From cad9cc56ed0eb10c604779a22b29d9963fd2c8e2 Mon Sep 17 00:00:00 2001 From: youluna Date: Thu, 16 May 2019 20:22:12 +0800 Subject: [PATCH] chore(*): Release-build/1.14.4 --- .gitignore | 13 +- .../affix/demo/absolute-position.en-us.md | 1 + compiled_docs/affix/demo/absolute-position.md | 1 + compiled_docs/affix/demo/basic.en-us.md | 1 + compiled_docs/affix/demo/basic.md | 1 + .../affix/demo/custom-container.en-us.md | 1 + compiled_docs/affix/demo/custom-container.md | 1 + .../affix/demo/custom-offset.en-us.md | 1 + compiled_docs/affix/demo/custom-offset.md | 1 + compiled_docs/affix/demo/on-affix.en-us.md | 1 + compiled_docs/affix/demo/on-affix.md | 1 + compiled_docs/affix/index.en-us.md | 1 + compiled_docs/affix/index.md | 1 + compiled_docs/animate/demo/basic.en-us.md | 1 + compiled_docs/animate/demo/basic.md | 1 + compiled_docs/animate/demo/expand.en-us.md | 1 + compiled_docs/animate/demo/expand.md | 1 + compiled_docs/animate/demo/multiple.en-us.md | 1 + compiled_docs/animate/demo/multiple.md | 1 + compiled_docs/animate/index.en-us.md | 1 + compiled_docs/animate/index.md | 1 + compiled_docs/badge/demo/basic.en-us.md | 1 + compiled_docs/badge/demo/basic.md | 1 + compiled_docs/badge/demo/change.en-us.md | 1 + compiled_docs/badge/demo/change.md | 1 + compiled_docs/badge/demo/content.en-us.md | 1 + compiled_docs/badge/demo/content.md | 1 + compiled_docs/badge/demo/dot.en-us.md | 1 + compiled_docs/badge/demo/dot.md | 1 + compiled_docs/badge/demo/no-wrapper.en-us.md | 1 + compiled_docs/badge/demo/no-wrapper.md | 1 + compiled_docs/badge/demo/plus.en-us.md | 1 + compiled_docs/badge/demo/plus.md | 1 + compiled_docs/badge/index.en-us.md | 1 + compiled_docs/badge/index.md | 1 + .../balloon/demo/accessibility.en-us.md | 1 + compiled_docs/balloon/demo/accessibility.md | 1 + compiled_docs/balloon/demo/alignment.en-us.md | 1 + compiled_docs/balloon/demo/alignment.md | 1 + compiled_docs/balloon/demo/basic.en-us.md | 1 + compiled_docs/balloon/demo/basic.md | 1 + compiled_docs/balloon/demo/control.en-us.md | 1 + compiled_docs/balloon/demo/control.md | 1 + compiled_docs/balloon/demo/nested.en-us.md | 1 + compiled_docs/balloon/demo/nested.md | 1 + .../balloon/demo/onCloseClick.en-us.md | 1 + compiled_docs/balloon/demo/onCloseClick.md | 1 + compiled_docs/balloon/demo/tooltip.en-us.md | 1 + compiled_docs/balloon/demo/tooltip.md | 1 + .../balloon/demo/triggerType.en-us.md | 1 + compiled_docs/balloon/demo/triggerType.md | 1 + compiled_docs/balloon/index.en-us.md | 1 + compiled_docs/balloon/index.md | 1 + compiled_docs/breadcrumb/demo/basic.en-us.md | 1 + compiled_docs/breadcrumb/demo/basic.md | 1 + compiled_docs/breadcrumb/demo/more.en-us.md | 1 + compiled_docs/breadcrumb/demo/more.md | 1 + .../breadcrumb/demo/separator.en-us.md | 1 + compiled_docs/breadcrumb/demo/separator.md | 1 + compiled_docs/breadcrumb/index.en-us.md | 1 + compiled_docs/breadcrumb/index.md | 1 + compiled_docs/button/demo/basic.en-us.md | 1 + compiled_docs/button/demo/basic.md | 1 + compiled_docs/button/demo/component.en-us.md | 1 + compiled_docs/button/demo/component.md | 1 + compiled_docs/button/demo/disabled.en-us.md | 1 + compiled_docs/button/demo/disabled.md | 1 + compiled_docs/button/demo/ghost.en-us.md | 1 + compiled_docs/button/demo/ghost.md | 1 + compiled_docs/button/demo/group.en-us.md | 1 + compiled_docs/button/demo/group.md | 1 + compiled_docs/button/demo/icon.en-us.md | 1 + compiled_docs/button/demo/icon.md | 1 + compiled_docs/button/demo/loading.en-us.md | 1 + compiled_docs/button/demo/loading.md | 1 + compiled_docs/button/demo/size.en-us.md | 1 + compiled_docs/button/demo/size.md | 1 + compiled_docs/button/index.en-us.md | 1 + compiled_docs/button/index.md | 1 + compiled_docs/calendar/demo/basic.en-us.md | 1 + compiled_docs/calendar/demo/basic.md | 1 + compiled_docs/calendar/demo/card.en-us.md | 1 + compiled_docs/calendar/demo/card.md | 1 + .../calendar/demo/custom-cell.en-us.md | 1 + compiled_docs/calendar/demo/custom-cell.md | 1 + .../demo/default-visible-month.en-us.md | 1 + .../calendar/demo/default-visible-month.md | 1 + compiled_docs/calendar/demo/disabled.en-us.md | 1 + compiled_docs/calendar/demo/disabled.md | 1 + compiled_docs/calendar/demo/locale.en-us.md | 1 + compiled_docs/calendar/demo/locale.md | 1 + compiled_docs/calendar/demo/lunar.en-us.md | 1 + compiled_docs/calendar/demo/lunar.md | 1 + compiled_docs/calendar/demo/panel.en-us.md | 1 + compiled_docs/calendar/demo/panel.md | 1 + compiled_docs/calendar/index.en-us.md | 1 + compiled_docs/calendar/index.md | 1 + compiled_docs/card/demo/basic.en-us.md | 1 + compiled_docs/card/demo/basic.md | 1 + compiled_docs/card/demo/custom-card.en-us.md | 1 + compiled_docs/card/demo/custom-card.md | 1 + .../card/demo/custom-height.en-us.md | 1 + compiled_docs/card/demo/custom-height.md | 1 + compiled_docs/card/demo/custom-title.en-us.md | 1 + compiled_docs/card/demo/custom-title.md | 1 + .../card/demo/head-underline.en-us.md | 1 + compiled_docs/card/demo/head-underline.md | 1 + compiled_docs/card/index.en-us.md | 1 + compiled_docs/card/index.md | 1 + .../demo/accessibility.en-us.md | 1 + .../cascader-select/demo/accessibility.md | 1 + .../cascader-select/demo/basic.en-us.md | 1 + compiled_docs/cascader-select/demo/basic.md | 1 + .../demo/custom-style.en-us.md | 1 + .../cascader-select/demo/custom-style.md | 1 + compiled_docs/cascader-select/demo/custom.md | 1 + .../cascader-select/demo/dynamic.en-us.md | 1 + compiled_docs/cascader-select/demo/dynamic.md | 1 + .../demo/expand-trigger.en-us.md | 1 + .../cascader-select/demo/expand-trigger.md | 1 + .../demo/multiple-control.en-us.md | 1 + .../cascader-select/demo/multiple-control.md | 1 + .../cascader-select/demo/multiple.en-us.md | 1 + .../cascader-select/demo/multiple.md | 1 + .../cascader-select/demo/search.en-us.md | 1 + compiled_docs/cascader-select/demo/search.md | 1 + .../demo/single-control.en-us.md | 1 + .../cascader-select/demo/single-control.md | 1 + compiled_docs/cascader-select/index.en-us.md | 1 + compiled_docs/cascader-select/index.md | 1 + .../cascader/demo/accessibility.en-us.md | 1 + compiled_docs/cascader/demo/accessibility.md | 1 + compiled_docs/cascader/demo/basic.en-us.md | 1 + compiled_docs/cascader/demo/basic.md | 1 + .../cascader/demo/custom-style.en-us.md | 1 + compiled_docs/cascader/demo/custom-style.md | 1 + compiled_docs/cascader/demo/dynamic.en-us.md | 1 + compiled_docs/cascader/demo/dynamic.md | 1 + .../cascader/demo/expand-trigger.en-us.md | 1 + compiled_docs/cascader/demo/expand-trigger.md | 1 + .../cascader/demo/multiple-control.en-us.md | 1 + .../cascader/demo/multiple-control.md | 1 + compiled_docs/cascader/demo/multiple.en-us.md | 1 + compiled_docs/cascader/demo/multiple.md | 1 + .../cascader/demo/single-control.en-us.md | 1 + compiled_docs/cascader/demo/single-control.md | 1 + compiled_docs/cascader/demo/source.en-us.md | 1 + compiled_docs/cascader/demo/source.md | 1 + compiled_docs/cascader/index.en-us.md | 1 + compiled_docs/cascader/index.md | 1 + .../checkbox/demo/accessibility.en-us.md | 1 + compiled_docs/checkbox/demo/accessibility.md | 1 + compiled_docs/checkbox/demo/basic.en-us.md | 1 + compiled_docs/checkbox/demo/basic.md | 1 + compiled_docs/checkbox/demo/control.en-us.md | 1 + compiled_docs/checkbox/demo/control.md | 1 + compiled_docs/checkbox/demo/group.en-us.md | 1 + compiled_docs/checkbox/demo/group.md | 1 + .../checkbox/demo/indeterminate.en-us.md | 1 + compiled_docs/checkbox/demo/indeterminate.md | 1 + compiled_docs/checkbox/demo/nest.en-us.md | 1 + compiled_docs/checkbox/demo/nest.md | 1 + .../checkbox/demo/uncontrol.en-us.md | 1 + compiled_docs/checkbox/demo/uncontrol.md | 1 + compiled_docs/checkbox/index.en-us.md | 1 + compiled_docs/checkbox/index.md | 1 + .../collapse/demo/accessibility.en-us.md | 1 + compiled_docs/collapse/demo/accessibility.md | 1 + .../collapse/demo/accordion.en-us.md | 1 + compiled_docs/collapse/demo/accordion.md | 1 + compiled_docs/collapse/demo/basic.en-us.md | 1 + compiled_docs/collapse/demo/basic.md | 1 + .../collapse/demo/datasource.en-us.md | 1 + compiled_docs/collapse/demo/datasource.md | 1 + compiled_docs/collapse/demo/disabled.en-us.md | 1 + compiled_docs/collapse/demo/disabled.md | 1 + compiled_docs/collapse/demo/event.en-us.md | 1 + compiled_docs/collapse/demo/event.md | 1 + compiled_docs/collapse/demo/nested.en-us.md | 1 + compiled_docs/collapse/demo/nested.md | 1 + compiled_docs/collapse/index.en-us.md | 1 + compiled_docs/collapse/index.md | 1 + compiled_docs/components.json | 1 + .../config-provider/demo/basic.en-us.md | 1 + compiled_docs/config-provider/demo/basic.md | 1 + .../config-provider/demo/components.en-us.md | 1 + .../config-provider/demo/components.md | 1 + .../config-provider/demo/consumer.en-us.md | 1 + .../config-provider/demo/consumer.md | 1 + .../demo/error-boundary.en-us.md | 1 + .../config-provider/demo/error-boundary.md | 1 + .../config-provider/demo/locale.en-us.md | 1 + compiled_docs/config-provider/demo/locale.md | 1 + .../config-provider/demo/rtl.en-us.md | 1 + compiled_docs/config-provider/demo/rtl.md | 1 + compiled_docs/config-provider/index.en-us.md | 1 + compiled_docs/config-provider/index.md | 1 + .../date-picker/demo/accessibility.en-us.md | 1 + .../date-picker/demo/accessibility.md | 1 + compiled_docs/date-picker/demo/basic.en-us.md | 1 + compiled_docs/date-picker/demo/basic.md | 1 + .../demo/custom-range-picker.en-us.md | 1 + .../date-picker/demo/custom-range-picker.md | 1 + .../demo/default-visible-month.en-us.md | 1 + .../date-picker/demo/default-visible-month.md | 1 + .../date-picker/demo/default.en-us.md | 1 + compiled_docs/date-picker/demo/default.md | 1 + .../date-picker/demo/disabled-date.en-us.md | 1 + .../date-picker/demo/disabled-date.md | 1 + .../date-picker/demo/disabled.en-us.md | 1 + compiled_docs/date-picker/demo/disabled.md | 1 + compiled_docs/date-picker/demo/field.en-us.md | 1 + compiled_docs/date-picker/demo/field.md | 1 + .../date-picker/demo/footer.en-us.md | 1 + compiled_docs/date-picker/demo/footer.md | 1 + .../date-picker/demo/format.en-us.md | 1 + compiled_docs/date-picker/demo/format.md | 1 + compiled_docs/date-picker/demo/popup.en-us.md | 1 + compiled_docs/date-picker/demo/popup.md | 1 + .../date-picker/demo/show-time.en-us.md | 1 + compiled_docs/date-picker/demo/show-time.md | 1 + compiled_docs/date-picker/demo/size.en-us.md | 1 + compiled_docs/date-picker/demo/size.md | 1 + compiled_docs/date-picker/index.en-us.md | 1 + compiled_docs/date-picker/index.md | 1 + .../dialog/demo/accessibility.en-us.md | 1 + compiled_docs/dialog/demo/accessibility.md | 1 + compiled_docs/dialog/demo/basic.en-us.md | 1 + compiled_docs/dialog/demo/basic.md | 1 + .../dialog/demo/customize-footer.en-us.md | 1 + compiled_docs/dialog/demo/customize-footer.md | 1 + .../dialog/demo/fixed-height.en-us.md | 1 + compiled_docs/dialog/demo/fixed-height.md | 1 + compiled_docs/dialog/demo/footer.en-us.md | 1 + compiled_docs/dialog/demo/footer.md | 1 + .../dialog/demo/large-content.en-us.md | 1 + compiled_docs/dialog/demo/large-content.md | 1 + compiled_docs/dialog/demo/promise.en-us.md | 1 + compiled_docs/dialog/demo/promise.md | 1 + compiled_docs/dialog/demo/quick.en-us.md | 1 + compiled_docs/dialog/demo/quick.md | 1 + .../demo/should-update-position.en-us.md | 1 + .../dialog/demo/should-update-position.md | 1 + compiled_docs/dialog/index.en-us.md | 1 + compiled_docs/dialog/index.md | 1 + compiled_docs/dropdown/demo/basic.en-us.md | 1 + compiled_docs/dropdown/demo/basic.md | 1 + .../dropdown/demo/controlled.en-us.md | 1 + compiled_docs/dropdown/demo/controlled.md | 1 + .../dropdown/demo/trigger-type.en-us.md | 1 + compiled_docs/dropdown/demo/trigger-type.md | 1 + compiled_docs/dropdown/index.en-us.md | 1 + compiled_docs/dropdown/index.md | 1 + compiled_docs/field/demo/autounmout.en-us.md | 1 + compiled_docs/field/demo/autounmout.md | 1 + compiled_docs/field/demo/basic.en-us.md | 1 + compiled_docs/field/demo/basic.md | 1 + compiled_docs/field/demo/custom.en-us.md | 1 + compiled_docs/field/demo/custom.md | 1 + compiled_docs/field/demo/dynamic.en-us.md | 1 + compiled_docs/field/demo/dynamic.md | 1 + compiled_docs/field/demo/mix.en-us.md | 1 + compiled_docs/field/demo/mix.md | 1 + compiled_docs/field/demo/normalize.en-us.md | 1 + compiled_docs/field/demo/normalize.md | 1 + compiled_docs/field/demo/onchange.en-us.md | 1 + compiled_docs/field/demo/onchange.md | 1 + compiled_docs/field/demo/redux.en-us.md | 1 + compiled_docs/field/demo/redux.md | 1 + compiled_docs/field/demo/seterror.en-us.md | 1 + compiled_docs/field/demo/seterror.md | 1 + compiled_docs/field/demo/topath.en-us.md | 1 + compiled_docs/field/demo/topath.md | 1 + compiled_docs/field/demo/validator.en-us.md | 1 + compiled_docs/field/demo/validator.md | 1 + compiled_docs/field/demo/valuename.en-us.md | 1 + compiled_docs/field/demo/valuename.md | 1 + compiled_docs/field/index.en-us.md | 1 + compiled_docs/field/index.md | 1 + .../form/demo/accessibility.en-us.md | 1 + compiled_docs/form/demo/accessibility.md | 1 + compiled_docs/form/demo/base.en-us.md | 1 + compiled_docs/form/demo/base.md | 1 + compiled_docs/form/demo/custom.en-us.md | 1 + compiled_docs/form/demo/custom.md | 1 + compiled_docs/form/demo/field.en-us.md | 1 + compiled_docs/form/demo/field.md | 1 + compiled_docs/form/demo/inline.en-us.md | 1 + compiled_docs/form/demo/inline.md | 1 + compiled_docs/form/demo/inset.en-us.md | 1 + compiled_docs/form/demo/inset.md | 1 + compiled_docs/form/demo/mix.en-us.md | 1 + compiled_docs/form/demo/mix.md | 1 + compiled_docs/form/demo/nest.en-us.md | 1 + compiled_docs/form/demo/nest.md | 1 + compiled_docs/form/demo/onsubmit.en-us.md | 1 + compiled_docs/form/demo/onsubmit.md | 1 + .../form/demo/redux-seterror.en-us.md | 1 + compiled_docs/form/demo/redux-seterror.md | 1 + compiled_docs/form/demo/redux.en-us.md | 1 + compiled_docs/form/demo/redux.md | 1 + compiled_docs/form/demo/register.en-us.md | 1 + compiled_docs/form/demo/register.md | 1 + compiled_docs/form/demo/responsive.en-us.md | 1 + compiled_docs/form/demo/responsive.md | 1 + compiled_docs/form/demo/size.en-us.md | 1 + compiled_docs/form/demo/size.md | 1 + compiled_docs/form/demo/top.en-us.md | 1 + compiled_docs/form/demo/top.md | 1 + .../form/demo/validate-basic.en-us.md | 1 + compiled_docs/form/demo/validate-basic.md | 1 + .../form/demo/validate-custom-error.en-us.md | 1 + .../form/demo/validate-custom-error.md | 1 + .../form/demo/validate-static.en-us.md | 1 + compiled_docs/form/demo/validate-static.md | 1 + compiled_docs/form/index.en-us.md | 1 + compiled_docs/form/index.md | 1 + compiled_docs/grid/demo/align.en-us.md | 1 + compiled_docs/grid/demo/align.md | 1 + compiled_docs/grid/demo/basic.en-us.md | 1 + compiled_docs/grid/demo/basic.md | 1 + compiled_docs/grid/demo/breakpoint.en-us.md | 1 + compiled_docs/grid/demo/breakpoint.md | 1 + .../grid/demo/custom-elem-type.en-us.md | 1 + compiled_docs/grid/demo/custom-elem-type.md | 1 + compiled_docs/grid/demo/fixed.en-us.md | 1 + compiled_docs/grid/demo/fixed.md | 1 + compiled_docs/grid/demo/gutter.en-us.md | 1 + compiled_docs/grid/demo/gutter.md | 1 + compiled_docs/grid/demo/hidden.en-us.md | 1 + compiled_docs/grid/demo/hidden.md | 1 + compiled_docs/grid/demo/justify.en-us.md | 1 + compiled_docs/grid/demo/justify.md | 1 + compiled_docs/grid/demo/nest.en-us.md | 1 + compiled_docs/grid/demo/nest.md | 1 + compiled_docs/grid/demo/offset-fixed.en-us.md | 1 + compiled_docs/grid/demo/offset-fixed.md | 1 + compiled_docs/grid/demo/offset.en-us.md | 1 + compiled_docs/grid/demo/offset.md | 1 + compiled_docs/grid/demo/type.en-us.md | 1 + compiled_docs/grid/demo/type.md | 1 + compiled_docs/grid/demo/wrap.en-us.md | 1 + compiled_docs/grid/demo/wrap.md | 1 + compiled_docs/grid/index.en-us.md | 1 + compiled_docs/grid/index.md | 1 + .../icon/demo/accessibility.en-us.md | 1 + compiled_docs/icon/demo/accessibility.md | 1 + compiled_docs/icon/demo/basic.en-us.md | 1 + compiled_docs/icon/demo/basic.md | 1 + compiled_docs/icon/demo/size.en-us.md | 1 + compiled_docs/icon/demo/size.md | 1 + compiled_docs/icon/demo/style.en-us.md | 1 + compiled_docs/icon/demo/style.md | 1 + compiled_docs/icon/demo/type.en-us.md | 1 + compiled_docs/icon/demo/type.md | 1 + compiled_docs/icon/index.en-us.md | 1 + compiled_docs/icon/index.md | 1 + .../input/demo/accessibility.en-us.md | 1 + compiled_docs/input/demo/accessibility.md | 1 + compiled_docs/input/demo/addon.en-us.md | 1 + compiled_docs/input/demo/addon.md | 1 + compiled_docs/input/demo/autoheight.en-us.md | 1 + compiled_docs/input/demo/autoheight.md | 1 + compiled_docs/input/demo/basic.en-us.md | 1 + compiled_docs/input/demo/basic.md | 1 + compiled_docs/input/demo/clear.en-us.md | 1 + compiled_docs/input/demo/clear.md | 1 + compiled_docs/input/demo/disabled.en-us.md | 1 + compiled_docs/input/demo/disabled.md | 1 + compiled_docs/input/demo/group.en-us.md | 1 + compiled_docs/input/demo/group.md | 1 + compiled_docs/input/demo/inner.en-us.md | 1 + compiled_docs/input/demo/inner.md | 1 + compiled_docs/input/demo/maxlen.en-us.md | 1 + compiled_docs/input/demo/maxlen.md | 1 + compiled_docs/input/demo/passwd.en-us.md | 1 + compiled_docs/input/demo/passwd.md | 1 + compiled_docs/input/demo/state.en-us.md | 1 + compiled_docs/input/demo/state.md | 1 + compiled_docs/input/demo/style.en-us.md | 1 + compiled_docs/input/demo/style.md | 1 + compiled_docs/input/demo/trim.en-us.md | 1 + compiled_docs/input/demo/trim.md | 1 + compiled_docs/input/index.en-us.md | 1 + compiled_docs/input/index.md | 1 + compiled_docs/loading/demo/basic.en-us.md | 1 + compiled_docs/loading/demo/basic.md | 1 + .../loading/demo/fullscreen.en-us.md | 1 + compiled_docs/loading/demo/fullscreen.md | 1 + compiled_docs/loading/demo/indicator.en-us.md | 1 + compiled_docs/loading/demo/indicator.md | 1 + compiled_docs/loading/demo/size.en-us.md | 1 + compiled_docs/loading/demo/size.md | 1 + compiled_docs/loading/demo/state.en-us.md | 1 + compiled_docs/loading/demo/state.md | 1 + compiled_docs/loading/demo/tipAlign.en-us.md | 1 + compiled_docs/loading/demo/tipAlign.md | 1 + compiled_docs/loading/index.en-us.md | 1 + compiled_docs/loading/index.md | 1 + compiled_docs/mapping.js | 1295 + compiled_docs/menu-button/demo/basic.en-us.md | 1 + compiled_docs/menu-button/demo/basic.md | 1 + compiled_docs/menu-button/demo/menu.en-us.md | 1 + compiled_docs/menu-button/demo/menu.md | 1 + .../menu-button/demo/select.en-us.md | 1 + compiled_docs/menu-button/demo/select.md | 1 + compiled_docs/menu-button/demo/size.en-us.md | 1 + compiled_docs/menu-button/demo/size.md | 1 + compiled_docs/menu-button/index.en-us.md | 1 + compiled_docs/menu-button/index.md | 1 + compiled_docs/menu/demo/accordian.en-us.md | 1 + compiled_docs/menu/demo/accordian.md | 1 + compiled_docs/menu/demo/basic.en-us.md | 1 + compiled_docs/menu/demo/basic.md | 1 + compiled_docs/menu/demo/context.en-us.md | 1 + compiled_docs/menu/demo/context.md | 1 + .../menu/demo/csutom-select.en-us.md | 1 + compiled_docs/menu/demo/csutom-select.md | 1 + compiled_docs/menu/demo/custom-popup.en-us.md | 1 + compiled_docs/menu/demo/custom-popup.md | 1 + compiled_docs/menu/demo/hover.en-us.md | 1 + compiled_docs/menu/demo/hover.md | 1 + compiled_docs/menu/demo/hoz.en-us.md | 1 + compiled_docs/menu/demo/hoz.md | 1 + compiled_docs/menu/demo/popup-align.en-us.md | 1 + compiled_docs/menu/demo/popup-align.md | 1 + compiled_docs/menu/demo/popup.en-us.md | 1 + compiled_docs/menu/demo/popup.md | 1 + compiled_docs/menu/demo/select.en-us.md | 1 + compiled_docs/menu/demo/select.md | 1 + compiled_docs/menu/index.en-us.md | 1 + compiled_docs/menu/index.md | 1 + .../message/demo/accessibility.en-us.md | 1 + compiled_docs/message/demo/accessibility.md | 1 + compiled_docs/message/demo/control.en-us.md | 1 + compiled_docs/message/demo/control.md | 1 + .../message/demo/inline-close.en-us.md | 1 + compiled_docs/message/demo/inline-close.md | 1 + compiled_docs/message/demo/shape.en-us.md | 1 + compiled_docs/message/demo/shape.md | 1 + compiled_docs/message/demo/size.en-us.md | 1 + compiled_docs/message/demo/size.md | 1 + .../message/demo/toast-quick.en-us.md | 1 + compiled_docs/message/demo/toast-quick.md | 1 + compiled_docs/message/demo/toast.en-us.md | 1 + compiled_docs/message/demo/toast.md | 1 + compiled_docs/message/demo/type.en-us.md | 1 + compiled_docs/message/demo/type.md | 1 + compiled_docs/message/index.en-us.md | 1 + compiled_docs/message/index.md | 1 + compiled_docs/nav/demo/basic.en-us.md | 1 + compiled_docs/nav/demo/basic.md | 1 + compiled_docs/nav/demo/custom.en-us.md | 1 + compiled_docs/nav/demo/custom.md | 1 + compiled_docs/nav/demo/group.en-us.md | 1 + compiled_docs/nav/demo/group.md | 1 + compiled_docs/nav/demo/icon-only.en-us.md | 1 + compiled_docs/nav/demo/icon-only.md | 1 + compiled_docs/nav/demo/open-mode.en-us.md | 1 + compiled_docs/nav/demo/open-mode.md | 1 + compiled_docs/nav/demo/popup-align.en-us.md | 1 + compiled_docs/nav/demo/popup-align.md | 1 + compiled_docs/nav/index.en-us.md | 1 + compiled_docs/nav/index.md | 1 + .../number-picker/demo/accessibility.en-us.md | 1 + .../number-picker/demo/accessibility.md | 1 + .../number-picker/demo/basic.en-us.md | 1 + compiled_docs/number-picker/demo/basic.md | 1 + .../number-picker/demo/disabled.en-us.md | 1 + compiled_docs/number-picker/demo/disabled.md | 1 + .../number-picker/demo/editable.en-us.md | 1 + compiled_docs/number-picker/demo/editable.md | 1 + .../number-picker/demo/format.en-us.md | 1 + compiled_docs/number-picker/demo/format.md | 1 + .../number-picker/demo/limit.en-us.md | 1 + compiled_docs/number-picker/demo/limit.md | 1 + .../number-picker/demo/precision.en-us.md | 1 + compiled_docs/number-picker/demo/precision.md | 1 + .../number-picker/demo/size.en-us.md | 1 + compiled_docs/number-picker/demo/size.md | 1 + .../number-picker/demo/step.en-us.md | 1 + compiled_docs/number-picker/demo/step.md | 1 + compiled_docs/number-picker/index.en-us.md | 1 + compiled_docs/number-picker/index.md | 1 + .../overlay/demo/accessibility.en-us.md | 1 + compiled_docs/overlay/demo/accessibility.md | 1 + compiled_docs/overlay/demo/align.en-us.md | 1 + compiled_docs/overlay/demo/align.md | 1 + compiled_docs/overlay/demo/backdrop.en-us.md | 1 + compiled_docs/overlay/demo/backdrop.md | 1 + .../overlay/demo/controlled.en-us.md | 1 + compiled_docs/overlay/demo/controlled.md | 1 + compiled_docs/overlay/demo/nested.en-us.md | 1 + compiled_docs/overlay/demo/nested.md | 1 + compiled_docs/overlay/demo/overlay.en-us.md | 1 + compiled_docs/overlay/demo/overlay.md | 1 + compiled_docs/overlay/demo/popup.en-us.md | 1 + compiled_docs/overlay/demo/popup.md | 1 + compiled_docs/overlay/demo/scroll.en-us.md | 1 + compiled_docs/overlay/demo/scroll.md | 1 + compiled_docs/overlay/index.en-us.md | 1 + compiled_docs/overlay/index.md | 1 + .../pagination/demo/control.en-us.md | 1 + compiled_docs/pagination/demo/control.md | 1 + .../demo/dropdown-direction.en-us.md | 1 + .../pagination/demo/dropdown-direction.md | 1 + compiled_docs/pagination/demo/link.en-us.md | 1 + compiled_docs/pagination/demo/link.md | 1 + .../pagination/demo/page-size.en-us.md | 1 + compiled_docs/pagination/demo/page-size.md | 1 + .../pagination/demo/react-router.en-us.md | 1 + compiled_docs/pagination/demo/react-router.md | 1 + compiled_docs/pagination/demo/shape.en-us.md | 1 + compiled_docs/pagination/demo/shape.md | 1 + .../pagination/demo/show-total.en-us.md | 1 + compiled_docs/pagination/demo/show-total.md | 1 + compiled_docs/pagination/demo/size.en-us.md | 1 + compiled_docs/pagination/demo/size.md | 1 + compiled_docs/pagination/demo/type.en-us.md | 1 + compiled_docs/pagination/demo/type.md | 1 + .../pagination/demo/uncontrol.en-us.md | 1 + compiled_docs/pagination/demo/uncontrol.md | 1 + compiled_docs/pagination/index.en-us.md | 1 + compiled_docs/pagination/index.md | 1 + compiled_docs/paragraph/demo/basic.en-us.md | 1 + compiled_docs/paragraph/demo/basic.md | 1 + compiled_docs/paragraph/demo/type.en-us.md | 1 + compiled_docs/paragraph/demo/type.md | 1 + compiled_docs/paragraph/index.en-us.md | 1 + compiled_docs/paragraph/index.md | 1 + compiled_docs/progress/demo/basic.en-us.md | 1 + compiled_docs/progress/demo/basic.md | 1 + compiled_docs/progress/demo/circle.en-us.md | 1 + compiled_docs/progress/demo/circle.md | 1 + compiled_docs/progress/demo/color.en-us.md | 1 + compiled_docs/progress/demo/color.md | 1 + .../progress/demo/controlled.en-us.md | 1 + compiled_docs/progress/demo/controlled.md | 1 + .../progress/demo/percentrender.en-us.md | 1 + compiled_docs/progress/demo/percentrender.md | 1 + .../progress/demo/progressive.en-us.md | 1 + compiled_docs/progress/demo/progressive.md | 1 + compiled_docs/progress/demo/size.en-us.md | 1 + compiled_docs/progress/demo/size.md | 1 + compiled_docs/progress/demo/state.en-us.md | 1 + compiled_docs/progress/demo/state.md | 1 + compiled_docs/progress/index.en-us.md | 1 + compiled_docs/progress/index.md | 1 + .../radio/demo/accessibility.en-us.md | 1 + compiled_docs/radio/demo/accessibility.md | 1 + compiled_docs/radio/demo/basic.en-us.md | 1 + compiled_docs/radio/demo/basic.md | 1 + compiled_docs/radio/demo/button.en-us.md | 1 + compiled_docs/radio/demo/button.md | 1 + compiled_docs/radio/demo/control.en-us.md | 1 + compiled_docs/radio/demo/control.md | 1 + compiled_docs/radio/demo/group.en-us.md | 1 + compiled_docs/radio/demo/group.md | 1 + compiled_docs/radio/demo/nest.en-us.md | 1 + compiled_docs/radio/demo/nest.md | 1 + compiled_docs/radio/demo/uncontrol.en-us.md | 1 + compiled_docs/radio/demo/uncontrol.md | 1 + compiled_docs/radio/demo/useWithGrid.en-us.md | 1 + compiled_docs/radio/demo/useWithGrid.md | 1 + compiled_docs/radio/index.en-us.md | 1 + compiled_docs/radio/index.md | 1 + .../range/demo/accessibility.en-us.md | 1 + compiled_docs/range/demo/accessibility.md | 1 + compiled_docs/range/demo/basic.en-us.md | 1 + compiled_docs/range/demo/basic.md | 1 + compiled_docs/range/demo/change.en-us.md | 1 + compiled_docs/range/demo/change.md | 1 + compiled_docs/range/demo/control.en-us.md | 1 + compiled_docs/range/demo/control.md | 1 + compiled_docs/range/demo/fixedWidth.en-us.md | 1 + compiled_docs/range/demo/fixedWidth.md | 1 + compiled_docs/range/demo/marks.en-us.md | 1 + compiled_docs/range/demo/marks.md | 1 + compiled_docs/range/demo/range.en-us.md | 1 + compiled_docs/range/demo/range.md | 1 + compiled_docs/range/demo/reverse.en-us.md | 1 + compiled_docs/range/demo/reverse.md | 1 + compiled_docs/range/demo/tipRender.en-us.md | 1 + compiled_docs/range/demo/tipRender.md | 1 + compiled_docs/range/index.en-us.md | 1 + compiled_docs/range/index.md | 1 + .../rating/demo/accessibility.en-us.md | 1 + compiled_docs/rating/demo/accessibility.md | 1 + compiled_docs/rating/demo/basic.en-us.md | 1 + compiled_docs/rating/demo/basic.md | 1 + compiled_docs/rating/demo/disabled.en-us.md | 1 + compiled_docs/rating/demo/disabled.md | 1 + compiled_docs/rating/demo/grade.en-us.md | 1 + compiled_docs/rating/demo/grade.md | 1 + compiled_docs/rating/demo/half.en-us.md | 1 + compiled_docs/rating/demo/half.md | 1 + compiled_docs/rating/demo/size.en-us.md | 1 + compiled_docs/rating/demo/size.md | 1 + compiled_docs/rating/index.en-us.md | 1 + compiled_docs/rating/index.md | 1 + .../search/demo/accessibility.en-us.md | 1 + compiled_docs/search/demo/accessibility.md | 1 + compiled_docs/search/demo/base.en-us.md | 1 + compiled_docs/search/demo/base.md | 1 + compiled_docs/search/demo/combobox.en-us.md | 1 + compiled_docs/search/demo/combobox.md | 1 + compiled_docs/search/demo/custom.en-us.md | 1 + compiled_docs/search/demo/custom.md | 1 + compiled_docs/search/demo/filter.en-us.md | 1 + compiled_docs/search/demo/filter.md | 1 + compiled_docs/search/demo/size.en-us.md | 1 + compiled_docs/search/demo/size.md | 1 + compiled_docs/search/demo/type.en-us.md | 1 + compiled_docs/search/demo/type.md | 1 + compiled_docs/search/index.en-us.md | 1 + compiled_docs/search/index.md | 1 + .../select/demo/accessibility.en-us.md | 1 + compiled_docs/select/demo/accessibility.md | 1 + compiled_docs/select/demo/basic.en-us.md | 1 + compiled_docs/select/demo/basic.md | 1 + .../select/demo/combobox-basic.en-us.md | 1 + compiled_docs/select/demo/combobox-basic.md | 1 + .../select/demo/combobox-remote.en-us.md | 1 + compiled_docs/select/demo/combobox-remote.md | 1 + .../select/demo/combobox-rich-text.en-us.md | 1 + .../select/demo/combobox-rich-text.md | 1 + compiled_docs/select/demo/combobox.en-us.md | 1 + compiled_docs/select/demo/combobox.md | 1 + .../select/demo/customize-menu.en-us.md | 1 + compiled_docs/select/demo/customize-menu.md | 1 + .../select/demo/customize-overlay.en-us.md | 1 + .../select/demo/customize-overlay.md | 1 + compiled_docs/select/demo/multiple.en-us.md | 1 + compiled_docs/select/demo/multiple.md | 1 + .../select/demo/select-basic.en-us.md | 1 + compiled_docs/select/demo/select-basic.md | 1 + .../select/demo/select-cascader.en-us.md | 1 + compiled_docs/select/demo/select-cascader.md | 1 + .../select/demo/select-custom-value.en-us.md | 1 + .../select/demo/select-custom-value.md | 1 + .../select/demo/select-options-group.en-us.md | 1 + .../select/demo/select-options-group.md | 1 + .../select/demo/select-search.en-us.md | 1 + compiled_docs/select/demo/select-search.md | 1 + compiled_docs/select/demo/tag.en-us.md | 1 + compiled_docs/select/demo/tag.md | 1 + .../select/demo/use-detail-value.en-us.md | 1 + compiled_docs/select/demo/use-detail-value.md | 1 + .../select/demo/virtual-select.en-us.md | 1 + compiled_docs/select/demo/virtual-select.md | 1 + compiled_docs/select/index.en-us.md | 1 + compiled_docs/select/index.md | 1 + .../slider/demo/arrow-position.en-us.md | 1 + compiled_docs/slider/demo/arrow-position.md | 1 + compiled_docs/slider/demo/autoplay.en-us.md | 1 + compiled_docs/slider/demo/autoplay.md | 1 + compiled_docs/slider/demo/basic.en-us.md | 1 + compiled_docs/slider/demo/basic.md | 1 + .../slider/demo/button-size.en-us.md | 1 + compiled_docs/slider/demo/button-size.md | 1 + .../slider/demo/center-mode.en-us.md | 1 + compiled_docs/slider/demo/center-mode.md | 1 + .../slider/demo/custom-arrow.en-us.md | 1 + compiled_docs/slider/demo/custom-arrow.md | 1 + .../slider/demo/custom-slide.en-us.md | 1 + compiled_docs/slider/demo/custom-slide.md | 1 + .../slider/demo/dots-direction.en-us.md | 1 + compiled_docs/slider/demo/dots-direction.md | 1 + .../slider/demo/dots-render.en-us.md | 1 + compiled_docs/slider/demo/dots-render.md | 1 + .../slider/demo/dots-triggerType.en-us.md | 1 + compiled_docs/slider/demo/dots-triggerType.md | 1 + compiled_docs/slider/demo/fade.en-us.md | 1 + compiled_docs/slider/demo/fade.md | 1 + compiled_docs/slider/demo/infinite.en-us.md | 1 + compiled_docs/slider/demo/infinite.md | 1 + compiled_docs/slider/demo/multiple.en-us.md | 1 + compiled_docs/slider/demo/multiple.md | 1 + .../slider/demo/pause-on-hover.en-us.md | 1 + compiled_docs/slider/demo/pause-on-hover.md | 1 + compiled_docs/slider/demo/slick-goto.en-us.md | 1 + compiled_docs/slider/demo/slick-goto.md | 1 + .../slider/demo/slide-change-hook.en-us.md | 1 + .../slider/demo/slide-change-hook.md | 1 + .../slider/demo/slide-direction.en-us.md | 1 + compiled_docs/slider/demo/slide-direction.md | 1 + .../slider/demo/slider-with-dialog.en-us.md | 1 + .../slider/demo/slider-with-dialog.md | 1 + .../slider/demo/slider-wrapper.en-us.md | 1 + compiled_docs/slider/demo/slider-wrapper.md | 1 + .../slider/demo/variable-width.en-us.md | 1 + compiled_docs/slider/demo/variable-width.md | 1 + compiled_docs/slider/index.en-us.md | 1 + compiled_docs/slider/index.md | 1 + .../split-button/demo/basic.en-us.md | 1 + compiled_docs/split-button/demo/basic.md | 1 + .../split-button/demo/composite.en-us.md | 1 + compiled_docs/split-button/demo/composite.md | 1 + compiled_docs/split-button/demo/menu.en-us.md | 1 + compiled_docs/split-button/demo/menu.md | 1 + compiled_docs/split-button/demo/size.en-us.md | 1 + compiled_docs/split-button/demo/size.md | 1 + compiled_docs/split-button/index.en-us.md | 1 + compiled_docs/split-button/index.md | 1 + compiled_docs/step/demo/basic.en-us.md | 1 + compiled_docs/step/demo/basic.md | 1 + compiled_docs/step/demo/controlled.en-us.md | 1 + compiled_docs/step/demo/controlled.md | 1 + .../step/demo/custom-step-item.en-us.md | 1 + compiled_docs/step/demo/custom-step-item.md | 1 + compiled_docs/step/demo/direction.en-us.md | 1 + compiled_docs/step/demo/direction.md | 1 + compiled_docs/step/demo/disable.en-us.md | 1 + compiled_docs/step/demo/disable.md | 1 + compiled_docs/step/demo/percent.en-us.md | 1 + compiled_docs/step/demo/percent.md | 1 + compiled_docs/step/demo/read-only.en-us.md | 1 + compiled_docs/step/demo/read-only.md | 1 + compiled_docs/step/index.en-us.md | 1 + compiled_docs/step/index.md | 1 + .../switch/demo/accessibility.en-us.md | 1 + compiled_docs/switch/demo/accessibility.md | 1 + compiled_docs/switch/demo/basic.en-us.md | 1 + compiled_docs/switch/demo/basic.md | 1 + compiled_docs/switch/demo/control.en-us.md | 1 + compiled_docs/switch/demo/control.md | 1 + compiled_docs/switch/demo/disabled.en-us.md | 1 + compiled_docs/switch/demo/disabled.md | 1 + compiled_docs/switch/index.en-us.md | 1 + compiled_docs/switch/index.md | 1 + compiled_docs/tab/demo/basic.en-us.md | 1 + compiled_docs/tab/demo/basic.md | 1 + compiled_docs/tab/demo/closable.en-us.md | 1 + compiled_docs/tab/demo/closable.md | 1 + compiled_docs/tab/demo/custom-style.en-us.md | 1 + compiled_docs/tab/demo/custom-style.md | 1 + compiled_docs/tab/demo/custom-tab.en-us.md | 1 + compiled_docs/tab/demo/custom-tab.md | 1 + compiled_docs/tab/demo/disabled.en-us.md | 1 + compiled_docs/tab/demo/disabled.md | 1 + compiled_docs/tab/demo/editable-tab.en-us.md | 1 + compiled_docs/tab/demo/editable-tab.md | 1 + compiled_docs/tab/demo/excess-mode.en-us.md | 1 + compiled_docs/tab/demo/excess-mode.md | 1 + compiled_docs/tab/demo/extra.en-us.md | 1 + compiled_docs/tab/demo/extra.md | 1 + compiled_docs/tab/demo/lazy-load.en-us.md | 1 + compiled_docs/tab/demo/lazy-load.md | 1 + compiled_docs/tab/demo/nested.en-us.md | 1 + compiled_docs/tab/demo/nested.md | 1 + compiled_docs/tab/demo/position.en-us.md | 1 + compiled_docs/tab/demo/position.md | 1 + compiled_docs/tab/demo/shape.en-us.md | 1 + compiled_docs/tab/demo/shape.md | 1 + compiled_docs/tab/demo/size.en-us.md | 1 + compiled_docs/tab/demo/size.md | 1 + compiled_docs/tab/demo/tab-in-grid.en-us.md | 1 + compiled_docs/tab/demo/tab-in-grid.md | 1 + compiled_docs/tab/demo/trigger-type.en-us.md | 1 + compiled_docs/tab/demo/trigger-type.md | 1 + compiled_docs/tab/index.en-us.md | 1 + compiled_docs/tab/index.md | 1 + .../table/demo/accessibility.en-us.md | 1 + compiled_docs/table/demo/accessibility.md | 1 + compiled_docs/table/demo/advanced.en-us.md | 1 + compiled_docs/table/demo/advanced.md | 1 + compiled_docs/table/demo/basic.en-us.md | 1 + compiled_docs/table/demo/basic.md | 1 + .../table/demo/clear-selection.en-us.md | 1 + compiled_docs/table/demo/clear-selection.md | 1 + compiled_docs/table/demo/colspan.en-us.md | 1 + compiled_docs/table/demo/colspan.md | 1 + compiled_docs/table/demo/column.en-us.md | 1 + compiled_docs/table/demo/column.md | 1 + compiled_docs/table/demo/crud.en-us.md | 1 + compiled_docs/table/demo/crud.md | 1 + .../table/demo/custom-loading.en-us.md | 1 + compiled_docs/table/demo/custom-loading.md | 1 + .../table/demo/expanded-complex.en-us.md | 1 + compiled_docs/table/demo/expanded-complex.md | 1 + compiled_docs/table/demo/expanded.en-us.md | 1 + compiled_docs/table/demo/expanded.md | 1 + compiled_docs/table/demo/filter&sort.en-us.md | 1 + compiled_docs/table/demo/filter&sort.md | 1 + .../table/demo/fixed-header.en-us.md | 1 + compiled_docs/table/demo/fixed-header.md | 1 + .../table/demo/get-row-props.en-us.md | 1 + compiled_docs/table/demo/get-row-props.md | 1 + compiled_docs/table/demo/list.en-us.md | 1 + compiled_docs/table/demo/list.md | 1 + compiled_docs/table/demo/lock-column.en-us.md | 1 + compiled_docs/table/demo/lock-column.md | 1 + compiled_docs/table/demo/mix.en-us.md | 1 + compiled_docs/table/demo/mix.md | 1 + .../table/demo/multiple-header.en-us.md | 1 + compiled_docs/table/demo/multiple-header.md | 1 + compiled_docs/table/demo/pagination.en-us.md | 1 + compiled_docs/table/demo/pagination.md | 1 + compiled_docs/table/demo/resize.en-us.md | 1 + compiled_docs/table/demo/resize.md | 1 + .../table/demo/row-selection-config.en-us.md | 1 + .../table/demo/row-selection-config.md | 1 + compiled_docs/table/demo/selection.en-us.md | 1 + compiled_docs/table/demo/selection.md | 1 + compiled_docs/table/demo/style.en-us.md | 1 + compiled_docs/table/demo/style.md | 1 + compiled_docs/table/demo/virtual.en-us.md | 1 + compiled_docs/table/demo/virtual.md | 1 + compiled_docs/table/index.en-us.md | 1 + compiled_docs/table/index.md | 1 + compiled_docs/tag/demo/accessibility.en-us.md | 1 + compiled_docs/tag/demo/accessibility.md | 1 + compiled_docs/tag/demo/basic.en-us.md | 1 + compiled_docs/tag/demo/basic.md | 1 + compiled_docs/tag/demo/closable.en-us.md | 1 + compiled_docs/tag/demo/closable.md | 1 + compiled_docs/tag/demo/selectable.en-us.md | 1 + compiled_docs/tag/demo/selectable.md | 1 + compiled_docs/tag/index.en-us.md | 1 + compiled_docs/tag/index.md | 1 + compiled_docs/time-picker/demo/basic.en-us.md | 1 + compiled_docs/time-picker/demo/basic.md | 1 + .../time-picker/demo/default-value.en-us.md | 1 + .../time-picker/demo/default-value.md | 1 + .../time-picker/demo/disabled.en-us.md | 1 + compiled_docs/time-picker/demo/disabled.md | 1 + compiled_docs/time-picker/demo/field.en-us.md | 1 + compiled_docs/time-picker/demo/field.md | 1 + .../time-picker/demo/format.en-us.md | 1 + compiled_docs/time-picker/demo/format.md | 1 + compiled_docs/time-picker/demo/size.en-us.md | 1 + compiled_docs/time-picker/demo/size.md | 1 + compiled_docs/time-picker/demo/step.en-us.md | 1 + compiled_docs/time-picker/demo/step.md | 1 + compiled_docs/time-picker/demo/value.en-us.md | 1 + compiled_docs/time-picker/demo/value.md | 1 + compiled_docs/time-picker/index.en-us.md | 1 + compiled_docs/time-picker/index.md | 1 + compiled_docs/timeline/demo/basic.en-us.md | 1 + compiled_docs/timeline/demo/basic.md | 1 + compiled_docs/timeline/demo/content.en-us.md | 1 + compiled_docs/timeline/demo/content.md | 1 + compiled_docs/timeline/demo/custom.en-us.md | 1 + compiled_docs/timeline/demo/custom.md | 1 + compiled_docs/timeline/demo/fold.en-us.md | 1 + compiled_docs/timeline/demo/fold.md | 1 + compiled_docs/timeline/demo/state.en-us.md | 1 + compiled_docs/timeline/demo/state.md | 1 + compiled_docs/timeline/demo/timeLeft.en-us.md | 1 + compiled_docs/timeline/demo/timeLeft.md | 1 + compiled_docs/timeline/index.en-us.md | 1 + compiled_docs/timeline/index.md | 1 + .../transfer/demo/accessibility.en-us.md | 1 + compiled_docs/transfer/demo/accessibility.md | 1 + compiled_docs/transfer/demo/basic.en-us.md | 1 + compiled_docs/transfer/demo/basic.md | 1 + compiled_docs/transfer/demo/control.en-us.md | 1 + compiled_docs/transfer/demo/control.md | 1 + compiled_docs/transfer/demo/custom.en-us.md | 1 + compiled_docs/transfer/demo/custom.md | 1 + compiled_docs/transfer/demo/search.en-us.md | 1 + compiled_docs/transfer/demo/search.md | 1 + compiled_docs/transfer/demo/simple.en-us.md | 1 + compiled_docs/transfer/demo/simple.md | 1 + compiled_docs/transfer/demo/sortable.en-us.md | 1 + compiled_docs/transfer/demo/sortable.md | 1 + compiled_docs/transfer/index.en-us.md | 1 + compiled_docs/transfer/index.md | 1 + .../tree-select/demo/accessibility.en-us.md | 1 + .../tree-select/demo/accessibility.md | 1 + compiled_docs/tree-select/demo/basic.en-us.md | 1 + compiled_docs/tree-select/demo/basic.md | 1 + compiled_docs/tree-select/demo/check.en-us.md | 1 + compiled_docs/tree-select/demo/check.md | 1 + .../tree-select/demo/control.en-us.md | 1 + compiled_docs/tree-select/demo/control.md | 1 + compiled_docs/tree-select/demo/data.en-us.md | 1 + compiled_docs/tree-select/demo/data.md | 1 + .../tree-select/demo/search.en-us.md | 1 + compiled_docs/tree-select/demo/search.md | 1 + compiled_docs/tree-select/index.en-us.md | 1 + compiled_docs/tree-select/index.md | 1 + compiled_docs/tree/demo/basic.en-us.md | 1 + compiled_docs/tree/demo/basic.md | 1 + .../tree/demo/control-check.en-us.md | 1 + compiled_docs/tree/demo/control-check.md | 1 + .../tree/demo/control-select.en-us.md | 1 + compiled_docs/tree/demo/control-select.md | 1 + compiled_docs/tree/demo/data.en-us.md | 1 + compiled_docs/tree/demo/data.md | 1 + compiled_docs/tree/demo/draggable.en-us.md | 1 + compiled_docs/tree/demo/draggable.md | 1 + compiled_docs/tree/demo/dynamic.en-us.md | 1 + compiled_docs/tree/demo/dynamic.md | 1 + compiled_docs/tree/demo/line.en-us.md | 1 + compiled_docs/tree/demo/line.md | 1 + compiled_docs/tree/demo/node-block.en-us.md | 1 + compiled_docs/tree/demo/node-block.md | 1 + compiled_docs/tree/demo/search-tree.en-us.md | 1 + compiled_docs/tree/demo/search-tree.md | 1 + compiled_docs/tree/index.en-us.md | 1 + compiled_docs/tree/index.md | 1 + .../upload/demo/accessibility.en-us.md | 1 + compiled_docs/upload/demo/accessibility.md | 1 + compiled_docs/upload/demo/base.en-us.md | 1 + compiled_docs/upload/demo/base.md | 1 + .../upload/demo/beforeupload.en-us.md | 1 + compiled_docs/upload/demo/beforeupload.md | 1 + compiled_docs/upload/demo/card.en-us.md | 1 + compiled_docs/upload/demo/card.md | 1 + compiled_docs/upload/demo/crop.en-us.md | 1 + compiled_docs/upload/demo/crop.md | 1 + compiled_docs/upload/demo/data.en-us.md | 1 + compiled_docs/upload/demo/data.md | 1 + compiled_docs/upload/demo/dragger.en-us.md | 1 + compiled_docs/upload/demo/dragger.md | 1 + compiled_docs/upload/demo/error.en-us.md | 1 + compiled_docs/upload/demo/error.md | 1 + compiled_docs/upload/demo/extra.en-us.md | 1 + compiled_docs/upload/demo/extra.md | 1 + compiled_docs/upload/demo/image.en-us.md | 1 + compiled_docs/upload/demo/image.md | 1 + compiled_docs/upload/demo/limit.en-us.md | 1 + compiled_docs/upload/demo/limit.md | 1 + compiled_docs/upload/demo/maxsize.en-us.md | 1 + compiled_docs/upload/demo/maxsize.md | 1 + compiled_docs/upload/demo/paste.en-us.md | 1 + compiled_docs/upload/demo/paste.md | 1 + compiled_docs/upload/demo/submit.en-us.md | 1 + compiled_docs/upload/demo/submit.md | 1 + compiled_docs/upload/demo/text.en-us.md | 1 + compiled_docs/upload/demo/text.md | 1 + compiled_docs/upload/demo/validation.en-us.md | 1 + compiled_docs/upload/demo/validation.md | 1 + compiled_docs/upload/demo/with-form.en-us.md | 1 + compiled_docs/upload/demo/with-form.md | 1 + compiled_docs/upload/index.en-us.md | 1 + compiled_docs/upload/index.md | 1 + .../virtual-list/demo/basic.en-us.md | 1 + compiled_docs/virtual-list/demo/basic.md | 1 + .../virtual-list/demo/initial-index.en-us.md | 1 + .../virtual-list/demo/initial-index.md | 1 + .../demo/item-size-getter.en-us.md | 1 + .../virtual-list/demo/item-size-getter.md | 1 + compiled_docs/virtual-list/index.en-us.md | 1 + compiled_docs/virtual-list/index.md | 1 + demos/badge/build/index.css | 6 + demos/badge/deps.json | 1 + demos/badge/index.html | 50 + demos/balloon/build/index.css | 6 + demos/balloon/deps.json | 1 + demos/balloon/index.html | 50 + demos/breadcrumb/build/index.css | 6 + demos/breadcrumb/deps.json | 1 + demos/breadcrumb/index.html | 50 + demos/button/build/index.css | 6 + demos/button/deps.json | 1 + demos/button/index.html | 50 + demos/calendar/build/index.css | 6 + demos/calendar/deps.json | 1 + demos/calendar/index.html | 50 + demos/card/build/index.css | 6 + demos/card/deps.json | 1 + demos/card/index.html | 50 + demos/cascader-select/build/index.css | 6 + demos/cascader-select/deps.json | 1 + demos/cascader-select/index.html | 50 + demos/cascader/build/index.css | 6 + demos/cascader/deps.json | 1 + demos/cascader/index.html | 50 + demos/checkbox/build/index.css | 6 + demos/checkbox/deps.json | 1 + demos/checkbox/index.html | 50 + demos/collapse/build/index.css | 6 + demos/collapse/deps.json | 1 + demos/collapse/index.html | 50 + demos/date-picker/build/index.css | 6 + demos/date-picker/deps.json | 1 + demos/date-picker/index.html | 50 + demos/dialog/build/index.css | 6 + demos/dialog/deps.json | 1 + demos/dialog/index.html | 50 + demos/form-element/build/index.css | 6 + demos/form-element/deps.json | 1 + demos/form-element/index.html | 50 + demos/form/build/index.css | 6 + demos/form/deps.json | 1 + demos/form/index.html | 50 + demos/input/build/index.css | 6 + demos/input/deps.json | 1 + demos/input/index.html | 50 + demos/loading/build/index.css | 6 + demos/loading/deps.json | 1 + demos/loading/index.html | 50 + demos/mask/build/index.css | 6 + demos/mask/deps.json | 1 + demos/mask/index.html | 50 + demos/menu-button/build/index.css | 6 + demos/menu-button/deps.json | 1 + demos/menu-button/index.html | 50 + demos/menu/build/index.css | 6 + demos/menu/deps.json | 1 + demos/menu/index.html | 50 + demos/message/build/index.css | 6 + demos/message/deps.json | 1 + demos/message/index.html | 50 + demos/nav/build/index.css | 6 + demos/nav/deps.json | 1 + demos/nav/index.html | 50 + demos/number-picker/build/index.css | 6 + demos/number-picker/deps.json | 1 + demos/number-picker/index.html | 50 + demos/pagination/build/index.css | 6 + demos/pagination/deps.json | 1 + demos/pagination/index.html | 50 + demos/paragraph/build/index.css | 6 + demos/paragraph/deps.json | 1 + demos/paragraph/index.html | 50 + demos/popup/build/index.css | 6 + demos/popup/deps.json | 1 + demos/popup/index.html | 50 + demos/progress/build/index.css | 6 + demos/progress/deps.json | 1 + demos/progress/index.html | 50 + demos/radio/build/index.css | 6 + demos/radio/deps.json | 1 + demos/radio/index.html | 50 + demos/range/build/index.css | 6 + demos/range/deps.json | 1 + demos/range/index.html | 50 + demos/rating/build/index.css | 6 + demos/rating/deps.json | 1 + demos/rating/index.html | 50 + demos/search/build/index.css | 6 + demos/search/deps.json | 1 + demos/search/index.html | 50 + demos/select/build/index.css | 6 + demos/select/deps.json | 1 + demos/select/index.html | 50 + demos/slider/build/index.css | 6 + demos/slider/deps.json | 1 + demos/slider/index.html | 50 + demos/split-button/build/index.css | 6 + demos/split-button/deps.json | 1 + demos/split-button/index.html | 50 + demos/step/build/index.css | 6 + demos/step/deps.json | 1 + demos/step/index.html | 50 + demos/switch/build/index.css | 6 + demos/switch/deps.json | 1 + demos/switch/index.html | 50 + demos/tab/build/index.css | 6 + demos/tab/deps.json | 1 + demos/tab/index.html | 50 + demos/table/build/index.css | 6 + demos/table/deps.json | 1 + demos/table/index.html | 50 + demos/tag/build/index.css | 6 + demos/tag/deps.json | 1 + demos/tag/index.html | 50 + demos/time-picker/build/index.css | 6 + demos/time-picker/deps.json | 1 + demos/time-picker/index.html | 50 + demos/timeline/build/index.css | 6 + demos/timeline/deps.json | 1 + demos/timeline/index.html | 50 + demos/transfer/build/index.css | 6 + demos/transfer/deps.json | 1 + demos/transfer/index.html | 50 + demos/tree-select/build/index.css | 6 + demos/tree-select/deps.json | 1 + demos/tree-select/index.html | 50 + demos/tree/build/index.css | 6 + demos/tree/deps.json | 1 + demos/tree/index.html | 50 + demos/upload/build/index.css | 6 + demos/upload/deps.json | 1 + demos/upload/index.html | 50 + dist/next-1.css | 12629 ++++ dist/next-2.css | 5665 ++ dist/next-noreset-1.css | 12454 ++++ dist/next-noreset-2.css | 5311 ++ dist/next-noreset.css | 17759 +++++ dist/next-noreset.min-1.css | 6 + dist/next-noreset.min-2.css | 6 + dist/next-noreset.min.css | 6 + dist/next-with-locales.js | 60640 ++++++++++++++++ dist/next-with-locales.min.js | 11 + dist/next.css | 18288 +++++ dist/next.js | 60230 +++++++++++++++ dist/next.min-1.css | 6 + dist/next.min-2.css | 6 + dist/next.min.css | 6 + dist/next.min.js | 11 + es/affix/index.js | 285 + es/affix/index.scss | 1 + es/affix/main.scss | 1 + es/affix/style.js | 1 + es/affix/util.js | 22 + es/animate/animate.js | 191 + es/animate/child.js | 259 + es/animate/expand.js | 152 + es/animate/index.js | 6 + es/animate/index.scss | 1 + es/animate/main.scss | 111 + .../scss/_attention-seekers/_buttonClick.scss | 14 + .../scss/_attention-seekers/_press.scss | 14 + .../scss/_attention-seekers/_pulse.scss | 21 + .../scss/_attention-seekers/_shake.scss | 32 + .../scss/_attention-seekers/_unpress.scss | 14 + .../_attention-seekers/attention-seekers.scss | 7 + .../scss/_bounce-entrances/_bounceIn.scss | 48 + .../_bounce-entrances/bounce-entrances.scss | 3 + es/animate/scss/_bounce-exits/_bounceOut.scss | 27 + .../scss/_bounce-exits/bounce-exits.scss | 3 + .../scss/_expand-entrances/_expandInDown.scss | 22 + .../scss/_expand-entrances/_expandInUp.scss | 22 + .../scss/_expand-entrances/_withFade.scss | 24 + .../scss/_expand-exits/_expandOutDown.scss | 22 + .../scss/_expand-exits/_expandOutUp.scss | 22 + es/animate/scss/_expand-exits/_withFade.scss | 21 + .../scss/_fading-entrances/_fadeIn.scss | 18 + .../scss/_fading-entrances/_fadeInDown.scss | 20 + .../_fading-entrances/_fadeInDownBig.scss | 20 + .../scss/_fading-entrances/_fadeInLeft.scss | 20 + .../_fading-entrances/_fadeInLeftBig.scss | 20 + .../scss/_fading-entrances/_fadeInRight.scss | 20 + .../_fading-entrances/_fadeInRightBig.scss | 20 + .../scss/_fading-entrances/_fadeInUp.scss | 19 + .../scss/_fading-entrances/_fadeInUpBig.scss | 20 + .../_fading-entrances/fading-entrances.scss | 11 + es/animate/scss/_fading-exits/_fadeOut.scss | 18 + .../scss/_fading-exits/_fadeOutDown.scss | 20 + .../scss/_fading-exits/_fadeOutDownBig.scss | 20 + .../scss/_fading-exits/_fadeOutLeft.scss | 20 + .../scss/_fading-exits/_fadeOutLeftBig.scss | 20 + .../scss/_fading-exits/_fadeOutRight.scss | 20 + .../scss/_fading-exits/_fadeOutRightBig.scss | 20 + es/animate/scss/_fading-exits/_fadeOutUp.scss | 20 + .../scss/_fading-exits/_fadeOutUpBig.scss | 20 + .../scss/_fading-exits/fading-exits.scss | 11 + .../scss/_other-entrances/_pressIn.scss | 14 + .../scss/_other-entrances/_pressInSmall.scss | 14 + .../scss/_other-entrances/_waterIn.scss | 17 + .../_other-entrances/other-entrances.scss | 5 + es/animate/scss/_other-exits/_pressOut.scss | 14 + .../scss/_other-exits/_pressOutSmall.scss | 14 + es/animate/scss/_other-exits/_waterOut.scss | 17 + es/animate/scss/_other-exits/other-exits.scss | 5 + .../scss/_sliding-entrances/_slideInDown.scss | 20 + .../scss/_sliding-entrances/_slideInLeft.scss | 20 + .../_sliding-entrances/_slideInRight.scss | 20 + .../scss/_sliding-entrances/_slideInUp.scss | 20 + .../_sliding-entrances/sliding-entrances.scss | 6 + .../scss/_sliding-exits/_slideOutDown.scss | 19 + .../scss/_sliding-exits/_slideOutLeft.scss | 19 + .../scss/_sliding-exits/_slideOutRight.scss | 19 + .../scss/_sliding-exits/_slideOutUp.scss | 19 + .../scss/_sliding-exits/sliding-exits.scss | 6 + .../scss/_zooming-entrances/_zoomIn.scss | 19 + .../scss/_zooming-entrances/_zoomInDown.scss | 22 + .../scss/_zooming-entrances/_zoomInLeft.scss | 22 + .../scss/_zooming-entrances/_zoomInPulse.scss | 24 + .../scss/_zooming-entrances/_zoomInQuick.scss | 19 + .../scss/_zooming-entrances/_zoomInRight.scss | 22 + .../scss/_zooming-entrances/_zoomInUp.scss | 22 + .../_zooming-entrances/zooming-entrances.scss | 9 + es/animate/scss/_zooming-exits/_zoomOut.scss | 22 + .../scss/_zooming-exits/_zoomOutDown.scss | 23 + .../scss/_zooming-exits/_zoomOutLeft.scss | 21 + .../scss/_zooming-exits/_zoomOutPulse.scss | 20 + .../scss/_zooming-exits/_zoomOutQuick.scss | 19 + .../scss/_zooming-exits/_zoomOutRight.scss | 21 + .../scss/_zooming-exits/_zoomOutUp.scss | 23 + .../scss/_zooming-exits/zooming-exits.scss | 9 + es/animate/scss/mixin.scss | 105 + es/animate/scss/variable.scss | 19 + es/animate/style.js | 1 + es/badge/index.js | 98 + es/badge/index.scss | 2 + es/badge/main.scss | 120 + es/badge/rtl.scss | 12 + es/badge/scss/function.scss | 4 + es/badge/scss/mixin.scss | 44 + es/badge/scss/placeholder.scss | 4 + es/badge/scss/variable.scss | 67 + es/badge/style.js | 2 + es/badge/sup.js | 206 + es/balloon/alignMap.js | 202 + es/balloon/balloon.js | 376 + es/balloon/index.js | 66 + es/balloon/index.scss | 4 + es/balloon/inner.js | 115 + es/balloon/main.scss | 112 + es/balloon/rtl.scss | 206 + es/balloon/scss/mixin.scss | 316 + es/balloon/scss/variable.scss | 170 + es/balloon/style.js | 4 + es/balloon/tooltip.js | 173 + es/balloon/util.js | 22 + es/breadcrumb/index.js | 153 + es/breadcrumb/index.scss | 2 + es/breadcrumb/item.js | 87 + es/breadcrumb/main.scss | 35 + es/breadcrumb/scss/mixin.scss | 130 + es/breadcrumb/scss/variable.scss | 82 + es/breadcrumb/style.js | 2 + es/button/index.js | 43 + es/button/index.scss | 2 + es/button/main.scss | 381 + es/button/rtl.scss | 119 + es/button/scss/mixin.scss | 54 + es/button/scss/normalize.scss | 15 + es/button/scss/variable.scss | 522 + es/button/style.js | 2 + es/button/view/button.js | 175 + es/button/view/group.js | 75 + es/calendar/calendar.js | 303 + es/calendar/head/card-header.js | 150 + es/calendar/head/date-panel-header.js | 111 + es/calendar/head/month-panel-header.js | 73 + es/calendar/head/range-panel-header.js | 142 + es/calendar/head/year-panel-header.js | 80 + es/calendar/index.js | 76 + es/calendar/index.scss | 4 + es/calendar/main.scss | 38 + es/calendar/range-calendar.js | 369 + es/calendar/rtl.scss | 69 + es/calendar/scss/animation.scss | 45 + es/calendar/scss/header.scss | 118 + es/calendar/scss/mixin.scss | 26 + es/calendar/scss/normalize.scss | 13 + es/calendar/scss/table.scss | 236 + es/calendar/scss/variable.scss | 347 + es/calendar/style.js | 4 + es/calendar/table/date-table-head.js | 48 + es/calendar/table/date-table.js | 143 + es/calendar/table/month-table.js | 92 + es/calendar/table/year-table.js | 113 + es/calendar/utils/index.js | 71 + es/card/card.js | 236 + es/card/index.js | 38 + es/card/index.scss | 3 + es/card/main.scss | 110 + es/card/rtl.scss | 26 + es/card/scss/mixin.scss | 2 + es/card/scss/normalize.scss | 13 + es/card/scss/variable.scss | 147 + es/card/style.js | 3 + es/cascader-select/cascader-select.js | 880 + es/cascader-select/index.js | 47 + es/cascader-select/index.scss | 3 + es/cascader-select/main.scss | 35 + es/cascader-select/scss/variable.scss | 15 + es/cascader-select/style.js | 3 + es/cascader/cascader.js | 912 + es/cascader/index.js | 28 + es/cascader/index.scss | 3 + es/cascader/item.js | 165 + es/cascader/main.scss | 92 + es/cascader/menu.js | 121 + es/cascader/rtl.scss | 24 + es/cascader/scss/variable.scss | 55 + es/cascader/style.js | 3 + es/checkbox/checkbox-group.js | 212 + es/checkbox/checkbox.js | 259 + es/checkbox/index.js | 6 + es/checkbox/index.scss | 3 + es/checkbox/main.scss | 169 + es/checkbox/rtl.scss | 12 + es/checkbox/scss/variable.scss | 80 + es/checkbox/style.js | 3 + es/collapse/collapse.js | 250 + es/collapse/index.js | 6 + es/collapse/index.scss | 2 + es/collapse/main.scss | 116 + es/collapse/panel.js | 132 + es/collapse/rtl.scss | 12 + es/collapse/scss/mixin.scss | 1 + es/collapse/scss/variable.scss | 108 + es/collapse/style.js | 2 + es/config-provider/cache.js | 48 + es/config-provider/config.js | 202 + es/config-provider/consumer.js | 78 + es/config-provider/error-boundary.js | 78 + es/config-provider/get-context-props.js | 70 + es/config-provider/index.js | 176 + es/config-provider/index.scss | 1 + es/config-provider/main.scss | 0 es/config-provider/style.js | 1 + es/core/base/_accessibility.scss | 11 + es/core/base/_normalize.scss | 449 + es/core/base/_reset.scss | 38 + es/core/base/_typography.scss | 141 + es/core/form-element.scss | 35 + es/core/index-noreset.scss | 23 + es/core/index.scss | 1 + es/core/mask.scss | 21 + es/core/popup.scss | 13 + es/core/reset.scss | 28 + es/core/style/_color.scss | 300 + es/core/style/_corner.scss | 45 + es/core/style/_font.scss | 149 + es/core/style/_global.scss | 38 + es/core/style/_icon.scss | 313 + es/core/style/_line.scss | 61 + es/core/style/_shadow.scss | 197 + es/core/style/_size.scss | 285 + es/core/util/_function.scss | 183 + es/core/util/_mixin.scss | 570 + es/core/utility/_form-element.scss | 58 + es/core/utility/_mask.scss | 20 + es/core/utility/_popup.scss | 51 + es/date-picker/date-picker.js | 647 + es/date-picker/index.js | 75 + es/date-picker/index.scss | 6 + es/date-picker/main.scss | 52 + es/date-picker/module/panel-footer.js | 79 + es/date-picker/month-picker.js | 439 + es/date-picker/range-picker.js | 902 + es/date-picker/rtl.scss | 75 + es/date-picker/scss/date-picker.scss | 30 + es/date-picker/scss/mixin.scss | 18 + es/date-picker/scss/range-picker.scss | 111 + es/date-picker/scss/variable.scss | 48 + es/date-picker/style.js | 6 + es/date-picker/util/index.js | 150 + es/date-picker/year-picker.js | 424 + es/dialog/dialog.js | 409 + es/dialog/index.js | 74 + es/dialog/index.scss | 5 + es/dialog/inner.js | 223 + es/dialog/main.scss | 128 + es/dialog/rtl.scss | 27 + es/dialog/scss/variable.scss | 135 + es/dialog/show.js | 276 + es/dialog/style.js | 5 + es/dropdown/dropdown.js | 179 + es/dropdown/index.js | 16 + es/dropdown/index.scss | 2 + es/dropdown/main.scss | 0 es/dropdown/style.js | 2 + es/field/index.js | 715 + es/field/index.scss | 1 + es/field/main.scss | 1 + es/field/style.js | 1 + es/field/utils.js | 146 + es/form/enhance.js | 96 + es/form/error.js | 121 + es/form/form.js | 217 + es/form/index.js | 45 + es/form/index.scss | 3 + es/form/item.js | 404 + es/form/main.scss | 168 + es/form/reset.js | 94 + es/form/scss/mixin.scss | 10 + es/form/scss/variable.scss | 69 + es/form/style.js | 3 + es/form/submit.js | 96 + es/grid/col.js | 168 + es/grid/index.js | 35 + es/grid/index.scss | 1 + es/grid/main.scss | 113 + es/grid/row.js | 155 + es/grid/rtl.scss | 43 + es/grid/scss/mixin.scss | 168 + es/grid/scss/variable.scss | 50 + es/grid/style.js | 1 + es/icon/index.js | 67 + es/icon/index.scss | 1 + es/icon/main.scss | 124 + es/icon/rtl.scss | 8 + es/icon/style.js | 1 + es/index.js | 50 + es/input/base.js | 292 + es/input/group.js | 107 + es/input/index.js | 15 + es/input/index.scss | 2 + es/input/input.js | 350 + es/input/main.scss | 370 + es/input/rtl.scss | 82 + es/input/scss/mixin.scss | 138 + es/input/scss/variable.scss | 188 + es/input/style.js | 2 + es/input/textarea.js | 262 + es/loading/index.js | 204 + es/loading/index.scss | 4 + es/loading/main.scss | 222 + es/loading/rtl.scss | 33 + es/loading/scss/mixin.scss | 63 + es/loading/scss/variable.scss | 44 + es/loading/style.js | 4 + es/locale/en-us.js | 125 + es/locale/ja-jp.js | 125 + es/locale/zh-cn.js | 125 + es/locale/zh-tw.js | 125 + es/menu-button/index.js | 253 + es/menu-button/index.scss | 5 + es/menu-button/main.scss | 63 + es/menu-button/scss/mixin.scss | 2 + es/menu-button/scss/variable.scss | 52 + es/menu-button/style.js | 5 + es/menu/index.js | 61 + es/menu/index.scss | 5 + es/menu/main.scss | 242 + es/menu/rtl.scss | 42 + es/menu/scss/mixin.scss | 17 + es/menu/scss/variable.scss | 140 + es/menu/style.js | 5 + es/menu/view/checkable-item.js | 158 + es/menu/view/checkbox-item.js | 76 + es/menu/view/create.js | 202 + es/menu/view/divider.js | 48 + es/menu/view/group.js | 84 + es/menu/view/item.js | 246 + es/menu/view/menu.js | 762 + es/menu/view/popup-item.js | 298 + es/menu/view/radio-item.js | 63 + es/menu/view/selectable-item.js | 178 + es/menu/view/sub-menu.js | 297 + es/message/index.js | 16 + es/message/index.scss | 4 + es/message/main.scss | 345 + es/message/message.js | 204 + es/message/rtl.scss | 27 + es/message/scss/mixin.scss | 105 + es/message/scss/variable.scss | 416 + es/message/style.js | 4 + es/message/toast.js | 309 + es/mixin-ui-state/index.js | 79 + es/nav/group.js | 80 + es/nav/index.js | 14 + es/nav/index.scss | 4 + es/nav/item.js | 83 + es/nav/main.scss | 406 + es/nav/nav.js | 257 + es/nav/popup-item.js | 94 + es/nav/rtl.scss | 90 + es/nav/scss/mixin.scss | 172 + es/nav/scss/variable.scss | 395 + es/nav/style.js | 4 + es/nav/sub-nav.js | 102 + es/number-picker/index.js | 565 + es/number-picker/index.scss | 4 + es/number-picker/main.scss | 174 + es/number-picker/scss/mixin.scss | 4 + es/number-picker/scss/variable.scss | 49 + es/number-picker/style.js | 4 + es/overlay/gateway.js | 82 + es/overlay/index.js | 15 + es/overlay/index.scss | 2 + es/overlay/main.scss | 23 + es/overlay/manager.js | 19 + es/overlay/overlay.js | 728 + es/overlay/popup.js | 377 + es/overlay/position.js | 143 + es/overlay/style.js | 2 + es/overlay/utils/find-node.js | 25 + es/overlay/utils/position.js | 342 + es/pagination/index.js | 3 + es/pagination/index.scss | 4 + es/pagination/main.scss | 232 + es/pagination/pagination.js | 704 + es/pagination/rtl.scss | 100 + es/pagination/scss/mixin.scss | 143 + es/pagination/scss/variable.scss | 190 + es/pagination/style.js | 4 + es/paragraph/index.js | 73 + es/paragraph/index.scss | 1 + es/paragraph/main.scss | 23 + es/paragraph/scss/mixin.scss | 2 + es/paragraph/scss/variable.scss | 35 + es/paragraph/style.js | 1 + es/progress/index.js | 48 + es/progress/index.scss | 1 + es/progress/main.scss | 173 + es/progress/rtl.scss | 12 + es/progress/scss/mixin.scss | 30 + es/progress/scss/variable.scss | 161 + es/progress/style.js | 1 + es/progress/view/progress-circle.js | 164 + es/progress/view/progress-line.js | 85 + es/progress/view/progress.js | 94 + es/radio/index.js | 6 + es/radio/index.scss | 2 + es/radio/main.scss | 316 + es/radio/radio-group.js | 232 + es/radio/radio.js | 245 + es/radio/rtl.scss | 81 + es/radio/scss/variable.scss | 191 + es/radio/style.js | 2 + es/range/index.js | 30 + es/range/index.scss | 2 + es/range/main.scss | 68 + es/range/scss/mixin.scss | 326 + es/range/scss/variable.scss | 174 + es/range/style.js | 2 + es/range/utils.js | 44 + es/range/view/fixedSlider.js | 199 + es/range/view/mark.js | 97 + es/range/view/range.js | 734 + es/range/view/scale.js | 88 + es/range/view/selected.js | 158 + es/range/view/slider.js | 62 + es/range/view/track.js | 22 + es/rating/index.js | 20 + es/rating/index.scss | 2 + es/rating/main.scss | 159 + es/rating/rating.js | 486 + es/rating/rtl.scss | 18 + es/rating/scss/mixin.scss | 23 + es/rating/scss/variable.scss | 78 + es/rating/style.js | 2 + es/search/Search.js | 344 + es/search/index.js | 33 + es/search/index.scss | 5 + es/search/main.scss | 321 + es/search/rtl.scss | 110 + es/search/scss/mixin.scss | 140 + es/search/scss/variable.scss | 330 + es/search/style.js | 5 + es/select/auto-complete.js | 406 + es/select/base.js | 638 + es/select/data-store.js | 97 + es/select/index.js | 82 + es/select/index.scss | 6 + es/select/main.scss | 423 + es/select/option-group.js | 37 + es/select/option.js | 41 + es/select/scss/mixin.scss | 33 + es/select/scss/variable.scss | 55 + es/select/select.js | 1046 + es/select/style.js | 6 + es/select/util.js | 357 + es/slider/index.js | 78 + es/slider/index.scss | 3 + es/slider/main.scss | 272 + es/slider/scss/mixin.scss | 87 + es/slider/scss/variable.scss | 255 + es/slider/slick/arrow.js | 139 + es/slider/slick/dots.js | 110 + es/slider/slick/inner-slider.js | 393 + es/slider/slick/mixins/event-handlers.js | 285 + es/slider/slick/mixins/helpers.js | 368 + es/slider/slick/mixins/trackHelper.js | 148 + es/slider/slick/track.js | 202 + es/slider/slider.js | 274 + es/slider/style.js | 3 + es/split-button/index.js | 327 + es/split-button/index.scss | 4 + es/split-button/main.scss | 32 + es/split-button/scss/mixin.scss | 2 + es/split-button/scss/variable.scss | 18 + es/split-button/style.js | 4 + es/step/index.js | 27 + es/step/index.scss | 4 + es/step/main.scss | 12 + es/step/rtl.scss | 325 + es/step/scss/arrow.scss | 115 + es/step/scss/basic.scss | 41 + es/step/scss/circle.scss | 178 + es/step/scss/dot.scss | 164 + es/step/scss/mixin.scss | 340 + es/step/scss/normalize.scss | 13 + es/step/scss/variable.scss | 443 + es/step/style.js | 4 + es/step/view/step-item.js | 443 + es/step/view/step.js | 268 + es/switch/index.js | 187 + es/switch/index.scss | 1 + es/switch/main.scss | 114 + es/switch/rtl.scss | 65 + es/switch/scss/mixin.scss | 38 + es/switch/scss/variable.scss | 196 + es/switch/style.js | 1 + es/tab/index.js | 46 + es/tab/index.scss | 4 + es/tab/main.scss | 443 + es/tab/rtl.scss | 94 + es/tab/scss/mixin.scss | 180 + es/tab/scss/placeholder.scss | 17 + es/tab/scss/variable.scss | 397 + es/tab/style.js | 4 + es/tab/tab.js | 324 + es/tab/tabs/content.js | 64 + es/tab/tabs/nav.js | 678 + es/tab/tabs/tab-item.js | 80 + es/tab/tabs/utils.js | 38 + es/table/base.js | 659 + es/table/base/body.js | 190 + es/table/base/cell.js | 131 + es/table/base/filter.js | 228 + es/table/base/header.js | 197 + es/table/base/resize.js | 90 + es/table/base/row.js | 235 + es/table/base/sort.js | 106 + es/table/base/wrapper.js | 48 + es/table/column-group.js | 45 + es/table/column.js | 89 + es/table/expanded.js | 235 + es/table/expanded/row.js | 149 + es/table/fixed.js | 145 + es/table/fixed/body.js | 87 + es/table/fixed/header.js | 62 + es/table/fixed/wrapper.js | 42 + es/table/index.js | 105 + es/table/index.scss | 8 + es/table/list-footer.js | 40 + es/table/list-header.js | 54 + es/table/list.js | 111 + es/table/list/body.js | 7 + es/table/list/row.js | 195 + es/table/lock.js | 641 + es/table/lock/body.js | 52 + es/table/lock/header.js | 35 + es/table/lock/row.js | 53 + es/table/main.scss | 324 + es/table/rtl.scss | 156 + es/table/scss/mixin.scss | 27 + es/table/scss/variable.scss | 124 + es/table/selection.js | 323 + es/table/selection/row.js | 44 + es/table/sticky.js | 85 + es/table/sticky/header.js | 70 + es/table/style.js | 8 + es/table/tree.js | 205 + es/table/tree/cell.js | 116 + es/table/tree/row.js | 56 + es/table/util.js | 40 + es/table/virtual.js | 315 + es/table/virtual/body.js | 119 + es/tag/closeable.js | 91 + es/tag/index.js | 67 + es/tag/index.scss | 3 + es/tag/main.scss | 255 + es/tag/rtl.scss | 0 es/tag/scss/animation.scss | 15 + es/tag/scss/mixin.scss | 207 + es/tag/scss/placeholder.scss | 181 + es/tag/scss/variable.scss | 515 + es/tag/selectable.js | 113 + es/tag/style.js | 3 + es/tag/tag-group.js | 52 + es/tag/tag.js | 269 + es/time-picker/index.js | 38 + es/time-picker/index.scss | 3 + es/time-picker/main.scss | 26 + es/time-picker/module/time-menu.js | 161 + es/time-picker/panel.js | 181 + es/time-picker/rtl.scss | 9 + es/time-picker/scss/menu.scss | 55 + es/time-picker/scss/panel.scss | 27 + es/time-picker/scss/variable.scss | 102 + es/time-picker/style.js | 3 + es/time-picker/time-picker.js | 433 + es/time-picker/utils/index.js | 23 + es/timeline/index.js | 6 + es/timeline/index.scss | 4 + es/timeline/locale/index.js | 6 + es/timeline/main.scss | 81 + es/timeline/rtl.scss | 38 + es/timeline/scss/mixin.scss | 199 + es/timeline/scss/normalize.scss | 23 + es/timeline/scss/util.scss | 3 + es/timeline/scss/variable.scss | 165 + es/timeline/style.js | 4 + es/timeline/view/timeline-item.js | 217 + es/timeline/view/timeline.js | 148 + es/transfer/index.js | 3 + es/transfer/index.scss | 4 + es/transfer/main.scss | 132 + es/transfer/scss/variable.scss | 113 + es/transfer/style.js | 4 + es/transfer/view/transfer-item.js | 191 + es/transfer/view/transfer-panel.js | 356 + es/transfer/view/transfer.js | 591 + es/tree-select/index.js | 30 + es/tree-select/index.scss | 4 + es/tree-select/main.scss | 20 + es/tree-select/scss/variable.scss | 31 + es/tree-select/style.js | 4 + es/tree-select/tree-select.js | 820 + es/tree/index.js | 9 + es/tree/index.scss | 4 + es/tree/main.scss | 276 + es/tree/rtl.scss | 34 + es/tree/scss/mixin.scss | 7 + es/tree/scss/variable.scss | 152 + es/tree/style.js | 4 + es/tree/view/tree-node-input.js | 44 + es/tree/view/tree-node.js | 593 + es/tree/view/tree.js | 1063 + es/tree/view/util.js | 131 + es/upload/base.js | 51 + es/upload/card.js | 177 + es/upload/dragger.js | 133 + es/upload/index.js | 138 + es/upload/index.scss | 4 + es/upload/list.js | 538 + es/upload/main.scss | 465 + es/upload/rtl.scss | 38 + es/upload/runtime/html5-uploader.js | 171 + es/upload/runtime/iframe-uploader.js | 258 + es/upload/runtime/index.js | 54 + es/upload/runtime/request.js | 115 + es/upload/runtime/selecter.js | 184 + es/upload/runtime/uploader.js | 148 + es/upload/scss/variable.scss | 265 + es/upload/style.js | 4 + es/upload/transform.js | 35 + es/upload/upload.js | 549 + es/upload/util.js | 60 + es/util/dom.js | 263 + es/util/env.js | 39 + es/util/events.js | 63 + es/util/focus.js | 125 + es/util/func.js | 89 + es/util/guid.js | 16 + es/util/htmlId.js | 35 + es/util/index.js | 25 + es/util/keycode.js | 32 + es/util/log.js | 32 + es/util/object.js | 228 + es/util/string.js | 53 + es/util/support.js | 94 + es/validate/index.js | 144 + es/validate/messages.js | 30 + es/validate/rules/format.js | 46 + es/validate/rules/index.js | 16 + es/validate/rules/length.js | 51 + es/validate/rules/pattern.js | 28 + es/validate/rules/required.js | 19 + es/validate/rules/size.js | 44 + es/validate/util.js | 121 + es/validate/validator.js | 64 + es/virtual-list/index.js | 4 + es/virtual-list/index.scss | 1 + es/virtual-list/main.scss | 4 + es/virtual-list/scss/mixin.scss | 2 + es/virtual-list/scss/variable.scss | 14 + es/virtual-list/style.js | 1 + es/virtual-list/virtual-list.js | 500 + .../@alife/next-core/lib/index-noreset.scss | 1 + .../@alife/next-core/lib/index.scss | 1 + lib/affix/api-schema.json | 72 + lib/affix/index.d.ts | 32 + lib/affix/index.js | 315 + lib/affix/index.scss | 1 + lib/affix/main.scss | 1 + lib/affix/style.js | 3 + lib/affix/util.js | 28 + lib/animate/animate.js | 221 + lib/animate/api-schema.json | 268 + lib/animate/child.js | 288 + lib/animate/expand.js | 183 + lib/animate/index.d.ts | 77 + lib/animate/index.js | 18 + lib/animate/index.scss | 1 + lib/animate/main.scss | 111 + .../scss/_attention-seekers/_buttonClick.scss | 14 + .../scss/_attention-seekers/_press.scss | 14 + .../scss/_attention-seekers/_pulse.scss | 21 + .../scss/_attention-seekers/_shake.scss | 32 + .../scss/_attention-seekers/_unpress.scss | 14 + .../_attention-seekers/attention-seekers.scss | 7 + .../scss/_bounce-entrances/_bounceIn.scss | 48 + .../_bounce-entrances/bounce-entrances.scss | 3 + .../scss/_bounce-exits/_bounceOut.scss | 27 + .../scss/_bounce-exits/bounce-exits.scss | 3 + .../scss/_expand-entrances/_expandInDown.scss | 22 + .../scss/_expand-entrances/_expandInUp.scss | 22 + .../scss/_expand-entrances/_withFade.scss | 24 + .../scss/_expand-exits/_expandOutDown.scss | 22 + .../scss/_expand-exits/_expandOutUp.scss | 22 + lib/animate/scss/_expand-exits/_withFade.scss | 21 + .../scss/_fading-entrances/_fadeIn.scss | 18 + .../scss/_fading-entrances/_fadeInDown.scss | 20 + .../_fading-entrances/_fadeInDownBig.scss | 20 + .../scss/_fading-entrances/_fadeInLeft.scss | 20 + .../_fading-entrances/_fadeInLeftBig.scss | 20 + .../scss/_fading-entrances/_fadeInRight.scss | 20 + .../_fading-entrances/_fadeInRightBig.scss | 20 + .../scss/_fading-entrances/_fadeInUp.scss | 19 + .../scss/_fading-entrances/_fadeInUpBig.scss | 20 + .../_fading-entrances/fading-entrances.scss | 11 + lib/animate/scss/_fading-exits/_fadeOut.scss | 18 + .../scss/_fading-exits/_fadeOutDown.scss | 20 + .../scss/_fading-exits/_fadeOutDownBig.scss | 20 + .../scss/_fading-exits/_fadeOutLeft.scss | 20 + .../scss/_fading-exits/_fadeOutLeftBig.scss | 20 + .../scss/_fading-exits/_fadeOutRight.scss | 20 + .../scss/_fading-exits/_fadeOutRightBig.scss | 20 + .../scss/_fading-exits/_fadeOutUp.scss | 20 + .../scss/_fading-exits/_fadeOutUpBig.scss | 20 + .../scss/_fading-exits/fading-exits.scss | 11 + .../scss/_other-entrances/_pressIn.scss | 14 + .../scss/_other-entrances/_pressInSmall.scss | 14 + .../scss/_other-entrances/_waterIn.scss | 17 + .../_other-entrances/other-entrances.scss | 5 + lib/animate/scss/_other-exits/_pressOut.scss | 14 + .../scss/_other-exits/_pressOutSmall.scss | 14 + lib/animate/scss/_other-exits/_waterOut.scss | 17 + .../scss/_other-exits/other-exits.scss | 5 + .../scss/_sliding-entrances/_slideInDown.scss | 20 + .../scss/_sliding-entrances/_slideInLeft.scss | 20 + .../_sliding-entrances/_slideInRight.scss | 20 + .../scss/_sliding-entrances/_slideInUp.scss | 20 + .../_sliding-entrances/sliding-entrances.scss | 6 + .../scss/_sliding-exits/_slideOutDown.scss | 19 + .../scss/_sliding-exits/_slideOutLeft.scss | 19 + .../scss/_sliding-exits/_slideOutRight.scss | 19 + .../scss/_sliding-exits/_slideOutUp.scss | 19 + .../scss/_sliding-exits/sliding-exits.scss | 6 + .../scss/_zooming-entrances/_zoomIn.scss | 19 + .../scss/_zooming-entrances/_zoomInDown.scss | 22 + .../scss/_zooming-entrances/_zoomInLeft.scss | 22 + .../scss/_zooming-entrances/_zoomInPulse.scss | 24 + .../scss/_zooming-entrances/_zoomInQuick.scss | 19 + .../scss/_zooming-entrances/_zoomInRight.scss | 22 + .../scss/_zooming-entrances/_zoomInUp.scss | 22 + .../_zooming-entrances/zooming-entrances.scss | 9 + lib/animate/scss/_zooming-exits/_zoomOut.scss | 22 + .../scss/_zooming-exits/_zoomOutDown.scss | 23 + .../scss/_zooming-exits/_zoomOutLeft.scss | 21 + .../scss/_zooming-exits/_zoomOutPulse.scss | 20 + .../scss/_zooming-exits/_zoomOutQuick.scss | 19 + .../scss/_zooming-exits/_zoomOutRight.scss | 21 + .../scss/_zooming-exits/_zoomOutUp.scss | 23 + .../scss/_zooming-exits/zooming-exits.scss | 9 + lib/animate/scss/mixin.scss | 105 + lib/animate/scss/variable.scss | 19 + lib/animate/style.js | 3 + lib/badge/api-schema.json | 75 + lib/badge/index.d.ts | 32 + lib/badge/index.js | 128 + lib/badge/index.scss | 2 + lib/badge/main.scss | 120 + lib/badge/rtl.scss | 12 + lib/badge/scss/function.scss | 4 + lib/badge/scss/mixin.scss | 44 + lib/badge/scss/placeholder.scss | 4 + lib/badge/scss/variable.scss | 67 + lib/badge/style.js | 5 + lib/badge/sup.js | 234 + lib/balloon/alignMap.js | 206 + lib/balloon/api-schema.json | 756 + lib/balloon/balloon.js | 413 + lib/balloon/index.d.ts | 243 + lib/balloon/index.js | 89 + lib/balloon/index.scss | 4 + lib/balloon/inner.js | 150 + lib/balloon/main.scss | 112 + lib/balloon/rtl.scss | 206 + lib/balloon/scss/mixin.scss | 316 + lib/balloon/scss/variable.scss | 170 + lib/balloon/style.js | 9 + lib/balloon/tooltip.js | 208 + lib/balloon/util.js | 35 + lib/breadcrumb/api-schema.json | 87 + lib/breadcrumb/index.d.ts | 42 + lib/breadcrumb/index.js | 187 + lib/breadcrumb/index.scss | 2 + lib/breadcrumb/item.js | 116 + lib/breadcrumb/main.scss | 35 + lib/breadcrumb/scss/mixin.scss | 130 + lib/breadcrumb/scss/variable.scss | 82 + lib/breadcrumb/style.js | 5 + lib/button/api-schema.json | 268 + lib/button/index.d.ts | 84 + lib/button/index.js | 65 + lib/button/index.scss | 2 + lib/button/main.scss | 381 + lib/button/rtl.scss | 119 + lib/button/scss/mixin.scss | 54 + lib/button/scss/normalize.scss | 15 + lib/button/scss/variable.scss | 522 + lib/button/style.js | 5 + lib/button/view/button.js | 205 + lib/button/view/group.js | 105 + lib/calendar/api-schema.json | 249 + lib/calendar/calendar.js | 359 + lib/calendar/head/card-header.js | 174 + lib/calendar/head/date-panel-header.js | 131 + lib/calendar/head/month-panel-header.js | 93 + lib/calendar/head/range-panel-header.js | 162 + lib/calendar/head/year-panel-header.js | 101 + lib/calendar/index.d.ts | 72 + lib/calendar/index.js | 92 + lib/calendar/index.scss | 4 + lib/calendar/main.scss | 38 + lib/calendar/range-calendar.js | 424 + lib/calendar/rtl.scss | 69 + lib/calendar/scss/animation.scss | 45 + lib/calendar/scss/header.scss | 118 + lib/calendar/scss/mixin.scss | 26 + lib/calendar/scss/normalize.scss | 13 + lib/calendar/scss/table.scss | 236 + lib/calendar/scss/variable.scss | 347 + lib/calendar/style.js | 9 + lib/calendar/table/date-table-head.js | 66 + lib/calendar/table/date-table.js | 170 + lib/calendar/table/month-table.js | 113 + lib/calendar/table/year-table.js | 137 + lib/calendar/utils/index.js | 86 + lib/card/api-schema.json | 75 + lib/card/card.js | 276 + lib/card/index.d.ts | 41 + lib/card/index.js | 55 + lib/card/index.scss | 3 + lib/card/main.scss | 110 + lib/card/rtl.scss | 26 + lib/card/scss/mixin.scss | 2 + lib/card/scss/normalize.scss | 13 + lib/card/scss/variable.scss | 147 + lib/card/style.js | 7 + lib/cascader-select/api-schema.json | 630 + lib/cascader-select/cascader-select.js | 914 + lib/cascader-select/index.d.ts | 209 + lib/cascader-select/index.js | 64 + lib/cascader-select/index.scss | 3 + lib/cascader-select/main.scss | 35 + lib/cascader-select/scss/variable.scss | 15 + lib/cascader-select/style.js | 7 + lib/cascader/api-schema.json | 330 + lib/cascader/cascader.js | 949 + lib/cascader/index.d.ts | 101 + lib/cascader/index.js | 45 + lib/cascader/index.scss | 3 + lib/cascader/item.js | 199 + lib/cascader/main.scss | 92 + lib/cascader/menu.js | 154 + lib/cascader/rtl.scss | 24 + lib/cascader/scss/variable.scss | 55 + lib/cascader/style.js | 7 + lib/checkbox/api-schema.json | 309 + lib/checkbox/checkbox-group.js | 246 + lib/checkbox/checkbox.js | 296 + lib/checkbox/index.d.ts | 130 + lib/checkbox/index.js | 18 + lib/checkbox/index.scss | 3 + lib/checkbox/main.scss | 169 + lib/checkbox/rtl.scss | 12 + lib/checkbox/scss/variable.scss | 80 + lib/checkbox/style.js | 7 + lib/collapse/api-schema.json | 146 + lib/collapse/collapse.js | 281 + lib/collapse/index.d.ts | 86 + lib/collapse/index.js | 18 + lib/collapse/index.scss | 2 + lib/collapse/main.scss | 116 + lib/collapse/panel.js | 167 + lib/collapse/rtl.scss | 12 + lib/collapse/scss/mixin.scss | 1 + lib/collapse/scss/variable.scss | 108 + lib/collapse/style.js | 5 + lib/config-provider/api-schema.json | 142 + lib/config-provider/cache.js | 57 + lib/config-provider/config.js | 247 + lib/config-provider/consumer.js | 87 + lib/config-provider/error-boundary.js | 99 + lib/config-provider/get-context-props.js | 82 + lib/config-provider/index.d.ts | 52 + lib/config-provider/index.js | 208 + lib/config-provider/index.scss | 1 + lib/config-provider/main.scss | 0 lib/config-provider/style.js | 3 + lib/core/base/_accessibility.scss | 11 + lib/core/base/_normalize.scss | 449 + lib/core/base/_reset.scss | 38 + lib/core/base/_typography.scss | 141 + lib/core/form-element.scss | 35 + lib/core/index-noreset.scss | 23 + lib/core/index.scss | 1 + lib/core/mask.scss | 21 + lib/core/popup.scss | 13 + lib/core/reset.scss | 28 + lib/core/style/_color.scss | 300 + lib/core/style/_corner.scss | 45 + lib/core/style/_font.scss | 149 + lib/core/style/_global.scss | 38 + lib/core/style/_icon.scss | 313 + lib/core/style/_line.scss | 61 + lib/core/style/_shadow.scss | 197 + lib/core/style/_size.scss | 285 + lib/core/util/_function.scss | 183 + lib/core/util/_mixin.scss | 570 + lib/core/utility/_form-element.scss | 58 + lib/core/utility/_mask.scss | 20 + lib/core/utility/_popup.scss | 51 + lib/date-picker/api-schema.json | 1634 + lib/date-picker/date-picker.js | 702 + lib/date-picker/index.d.ts | 582 + lib/date-picker/index.js | 99 + lib/date-picker/index.scss | 6 + lib/date-picker/main.scss | 52 + lib/date-picker/module/panel-footer.js | 102 + lib/date-picker/month-picker.js | 482 + lib/date-picker/range-picker.js | 959 + lib/date-picker/rtl.scss | 75 + lib/date-picker/scss/date-picker.scss | 30 + lib/date-picker/scss/mixin.scss | 18 + lib/date-picker/scss/range-picker.scss | 111 + lib/date-picker/scss/variable.scss | 48 + lib/date-picker/style.js | 13 + lib/date-picker/util/index.js | 168 + lib/date-picker/year-picker.js | 467 + lib/dialog/api-schema.json | 451 + lib/dialog/dialog.js | 446 + lib/dialog/index.d.ts | 143 + lib/dialog/index.js | 96 + lib/dialog/index.scss | 5 + lib/dialog/inner.js | 259 + lib/dialog/main.scss | 128 + lib/dialog/rtl.scss | 27 + lib/dialog/scss/variable.scss | 135 + lib/dialog/show.js | 320 + lib/dialog/style.js | 11 + lib/dropdown/api-schema.json | 538 + lib/dropdown/dropdown.js | 207 + lib/dropdown/index.d.ts | 192 + lib/dropdown/index.js | 28 + lib/dropdown/index.scss | 2 + lib/dropdown/main.scss | 0 lib/dropdown/style.js | 5 + lib/field/index.js | 733 + lib/field/index.scss | 1 + lib/field/main.scss | 1 + lib/field/style.js | 3 + lib/field/utils.js | 162 + lib/form/api-schema.json | 1437 + lib/form/enhance.js | 101 + lib/form/error.js | 152 + lib/form/form.js | 248 + lib/form/index.d.ts | 475 + lib/form/index.js | 74 + lib/form/index.scss | 3 + lib/form/item.js | 438 + lib/form/main.scss | 168 + lib/form/reset.js | 119 + lib/form/scss/mixin.scss | 10 + lib/form/scss/variable.scss | 69 + lib/form/style.js | 7 + lib/form/submit.js | 121 + lib/grid/api-schema.json | 562 + lib/grid/col.js | 200 + lib/grid/index.d.ts | 141 + lib/grid/index.js | 56 + lib/grid/index.scss | 1 + lib/grid/main.scss | 113 + lib/grid/row.js | 184 + lib/grid/rtl.scss | 43 + lib/grid/scss/mixin.scss | 168 + lib/grid/scss/variable.scss | 50 + lib/grid/style.js | 3 + lib/icon/api-schema.json | 65 + lib/icon/index.d.ts | 26 + lib/icon/index.js | 97 + lib/icon/index.scss | 1 + lib/icon/main.scss | 124 + lib/icon/rtl.scss | 8 + lib/icon/style.js | 3 + lib/index.d.ts | 50 + lib/index.js | 455 + lib/input/api-schema.json | 861 + lib/input/base.js | 317 + lib/input/group.js | 137 + lib/input/index.d.ts | 334 + lib/input/index.js | 33 + lib/input/index.scss | 2 + lib/input/input.js | 387 + lib/input/main.scss | 370 + lib/input/rtl.scss | 82 + lib/input/scss/mixin.scss | 138 + lib/input/scss/variable.scss | 188 + lib/input/style.js | 5 + lib/input/textarea.js | 299 + lib/loading/api-schema.json | 172 + lib/loading/index.d.ts | 67 + lib/loading/index.js | 234 + lib/loading/index.scss | 4 + lib/loading/main.scss | 222 + lib/loading/rtl.scss | 33 + lib/loading/scss/mixin.scss | 63 + lib/loading/scss/variable.scss | 44 + lib/loading/style.js | 9 + lib/locale/en-us.js | 129 + lib/locale/ja-jp.js | 129 + lib/locale/zh-cn.js | 129 + lib/locale/zh-tw.js | 129 + lib/menu-button/api-schema.json | 184 + lib/menu-button/index.d.ts | 91 + lib/menu-button/index.js | 297 + lib/menu-button/index.scss | 5 + lib/menu-button/main.scss | 63 + lib/menu-button/scss/mixin.scss | 2 + lib/menu-button/scss/variable.scss | 52 + lib/menu-button/style.js | 11 + lib/menu/api-schema.json | 868 + lib/menu/index.d.ts | 311 + lib/menu/index.js | 103 + lib/menu/index.scss | 5 + lib/menu/main.scss | 242 + lib/menu/rtl.scss | 42 + lib/menu/scss/mixin.scss | 17 + lib/menu/scss/variable.scss | 140 + lib/menu/style.js | 11 + lib/menu/view/checkable-item.js | 192 + lib/menu/view/checkbox-item.js | 105 + lib/menu/view/create.js | 243 + lib/menu/view/divider.js | 76 + lib/menu/view/group.js | 115 + lib/menu/view/item.js | 275 + lib/menu/view/menu.js | 794 + lib/menu/view/popup-item.js | 339 + lib/menu/view/radio-item.js | 89 + lib/menu/view/selectable-item.js | 212 + lib/menu/view/sub-menu.js | 344 + lib/message/api-schema.json | 333 + lib/message/index.d.ts | 80 + lib/message/index.js | 31 + lib/message/index.scss | 4 + lib/message/main.scss | 345 + lib/message/message.js | 242 + lib/message/rtl.scss | 27 + lib/message/scss/mixin.scss | 105 + lib/message/scss/variable.scss | 416 + lib/message/style.js | 9 + lib/message/toast.js | 347 + lib/mixin-ui-state/index.js | 99 + lib/nav/api-schema.json | 891 + lib/nav/group.js | 109 + lib/nav/index.d.ts | 282 + lib/nav/index.js | 38 + lib/nav/index.scss | 4 + lib/nav/item.js | 111 + lib/nav/main.scss | 406 + lib/nav/nav.js | 291 + lib/nav/popup-item.js | 125 + lib/nav/rtl.scss | 90 + lib/nav/scss/mixin.scss | 172 + lib/nav/scss/variable.scss | 395 + lib/nav/style.js | 9 + lib/nav/sub-nav.js | 133 + lib/number-picker/api-schema.json | 349 + lib/number-picker/index.d.ts | 126 + lib/number-picker/index.js | 602 + lib/number-picker/index.scss | 4 + lib/number-picker/main.scss | 174 + lib/number-picker/scss/mixin.scss | 4 + lib/number-picker/scss/variable.scss | 49 + lib/number-picker/style.js | 9 + lib/overlay/api-schema.json | 959 + lib/overlay/gateway.js | 108 + lib/overlay/index.d.ts | 337 + lib/overlay/index.js | 36 + lib/overlay/index.scss | 2 + lib/overlay/main.scss | 23 + lib/overlay/manager.js | 23 + lib/overlay/overlay.js | 769 + lib/overlay/popup.js | 408 + lib/overlay/position.js | 170 + lib/overlay/style.js | 5 + lib/overlay/utils/find-node.js | 31 + lib/overlay/utils/position.js | 352 + lib/pagination/api-schema.json | 398 + lib/pagination/index.d.ts | 116 + lib/pagination/index.js | 12 + lib/pagination/index.scss | 4 + lib/pagination/main.scss | 232 + lib/pagination/pagination.js | 749 + lib/pagination/rtl.scss | 100 + lib/pagination/scss/mixin.scss | 143 + lib/pagination/scss/variable.scss | 190 + lib/pagination/style.js | 9 + lib/paragraph/api-schema.json | 87 + lib/paragraph/index.d.ts | 22 + lib/paragraph/index.js | 103 + lib/paragraph/index.scss | 1 + lib/paragraph/main.scss | 23 + lib/paragraph/scss/mixin.scss | 2 + lib/paragraph/scss/variable.scss | 35 + lib/paragraph/style.js | 3 + lib/progress/api-schema.json | 167 + lib/progress/index.d.ts | 52 + lib/progress/index.js | 66 + lib/progress/index.scss | 1 + lib/progress/main.scss | 173 + lib/progress/rtl.scss | 12 + lib/progress/scss/mixin.scss | 30 + lib/progress/scss/variable.scss | 161 + lib/progress/style.js | 3 + lib/progress/view/progress-circle.js | 193 + lib/progress/view/progress-line.js | 115 + lib/progress/view/progress.js | 126 + lib/radio/api-schema.json | 429 + lib/radio/index.d.ts | 155 + lib/radio/index.js | 18 + lib/radio/index.scss | 2 + lib/radio/main.scss | 316 + lib/radio/radio-group.js | 266 + lib/radio/radio.js | 279 + lib/radio/rtl.scss | 81 + lib/radio/scss/variable.scss | 191 + lib/radio/style.js | 5 + lib/range/api-schema.json | 356 + lib/range/index.d.ts | 117 + lib/range/index.js | 48 + lib/range/index.scss | 2 + lib/range/main.scss | 68 + lib/range/scss/mixin.scss | 326 + lib/range/scss/variable.scss | 174 + lib/range/style.js | 5 + lib/range/utils.js | 52 + lib/range/view/fixedSlider.js | 228 + lib/range/view/mark.js | 121 + lib/range/view/range.js | 784 + lib/range/view/scale.js | 112 + lib/range/view/selected.js | 182 + lib/range/view/slider.js | 81 + lib/range/view/track.js | 37 + lib/rating/api-schema.json | 172 + lib/rating/index.d.ts | 67 + lib/rating/index.js | 38 + lib/rating/index.scss | 2 + lib/rating/main.scss | 159 + lib/rating/rating.js | 520 + lib/rating/rtl.scss | 18 + lib/rating/scss/mixin.scss | 23 + lib/rating/scss/variable.scss | 78 + lib/rating/style.js | 5 + lib/search/Search.js | 388 + lib/search/api-schema.json | 532 + lib/search/index.d.ts | 207 + lib/search/index.js | 46 + lib/search/index.scss | 5 + lib/search/main.scss | 321 + lib/search/rtl.scss | 110 + lib/search/scss/mixin.scss | 140 + lib/search/scss/variable.scss | 330 + lib/search/style.js | 11 + lib/select/api-schema.json | 1215 + lib/select/auto-complete.js | 440 + lib/select/base.js | 683 + lib/select/data-store.js | 109 + lib/select/index.d.ts | 387 + lib/select/index.js | 107 + lib/select/index.scss | 6 + lib/select/main.scss | 423 + lib/select/option-group.js | 57 + lib/select/option.js | 61 + lib/select/scss/mixin.scss | 33 + lib/select/scss/variable.scss | 55 + lib/select/select.js | 1084 + lib/select/style.js | 13 + lib/select/util.js | 384 + lib/slider/api-schema.json | 436 + lib/slider/index.d.ts | 161 + lib/slider/index.js | 96 + lib/slider/index.scss | 3 + lib/slider/main.scss | 272 + lib/slider/scss/mixin.scss | 87 + lib/slider/scss/variable.scss | 255 + lib/slider/slick/arrow.js | 169 + lib/slider/slick/dots.js | 137 + lib/slider/slick/inner-slider.js | 432 + lib/slider/slick/mixins/event-handlers.js | 296 + lib/slider/slick/mixins/helpers.js | 384 + lib/slider/slick/mixins/trackHelper.js | 160 + lib/slider/slick/track.js | 229 + lib/slider/slider.js | 308 + lib/slider/style.js | 7 + lib/split-button/api-schema.json | 325 + lib/split-button/index.d.ts | 124 + lib/split-button/index.js | 374 + lib/split-button/index.scss | 4 + lib/split-button/main.scss | 32 + lib/split-button/scss/mixin.scss | 2 + lib/split-button/scss/variable.scss | 18 + lib/split-button/style.js | 9 + lib/step/api-schema.json | 280 + lib/step/index.d.ts | 102 + lib/step/index.js | 48 + lib/step/index.scss | 4 + lib/step/main.scss | 12 + lib/step/rtl.scss | 325 + lib/step/scss/arrow.scss | 115 + lib/step/scss/basic.scss | 41 + lib/step/scss/circle.scss | 178 + lib/step/scss/dot.scss | 164 + lib/step/scss/mixin.scss | 340 + lib/step/scss/normalize.scss | 13 + lib/step/scss/variable.scss | 443 + lib/step/style.js | 9 + lib/step/view/step-item.js | 482 + lib/step/view/step.js | 301 + lib/switch/api-schema.json | 173 + lib/switch/index.d.ts | 68 + lib/switch/index.js | 218 + lib/switch/index.scss | 1 + lib/switch/main.scss | 114 + lib/switch/rtl.scss | 65 + lib/switch/scss/mixin.scss | 38 + lib/switch/scss/variable.scss | 196 + lib/switch/style.js | 3 + lib/tab/api-schema.json | 383 + lib/tab/index.d.ts | 136 + lib/tab/index.js | 63 + lib/tab/index.scss | 4 + lib/tab/main.scss | 443 + lib/tab/rtl.scss | 94 + lib/tab/scss/mixin.scss | 180 + lib/tab/scss/placeholder.scss | 17 + lib/tab/scss/variable.scss | 397 + lib/tab/style.js | 9 + lib/tab/tab.js | 364 + lib/tab/tabs/content.js | 90 + lib/tab/tabs/nav.js | 717 + lib/tab/tabs/tab-item.js | 100 + lib/tab/tabs/utils.js | 51 + lib/table/api-schema.json | 1137 + lib/table/base.js | 726 + lib/table/base/body.js | 225 + lib/table/base/cell.js | 161 + lib/table/base/filter.js | 262 + lib/table/base/header.js | 239 + lib/table/base/resize.js | 109 + lib/table/base/row.js | 269 + lib/table/base/sort.js | 131 + lib/table/base/wrapper.js | 68 + lib/table/column-group.js | 65 + lib/table/column.js | 109 + lib/table/expanded.js | 278 + lib/table/expanded/row.js | 178 + lib/table/fixed.js | 188 + lib/table/fixed/body.js | 117 + lib/table/fixed/header.js | 92 + lib/table/fixed/wrapper.js | 62 + lib/table/index.d.ts | 364 + lib/table/index.js | 153 + lib/table/index.scss | 8 + lib/table/list-footer.js | 60 + lib/table/list-header.js | 74 + lib/table/list.js | 161 + lib/table/list/body.js | 24 + lib/table/list/row.js | 228 + lib/table/lock.js | 691 + lib/table/lock/body.js | 80 + lib/table/lock/header.js | 59 + lib/table/lock/row.js | 80 + lib/table/main.scss | 324 + lib/table/rtl.scss | 156 + lib/table/scss/mixin.scss | 27 + lib/table/scss/variable.scss | 124 + lib/table/selection.js | 370 + lib/table/selection/row.js | 73 + lib/table/sticky.js | 119 + lib/table/sticky/header.js | 102 + lib/table/style.js | 17 + lib/table/tree.js | 242 + lib/table/tree/cell.js | 147 + lib/table/tree/row.js | 87 + lib/table/util.js | 43 + lib/table/virtual.js | 351 + lib/table/virtual/body.js | 149 + lib/tag/api-schema.json | 256 + lib/tag/closeable.js | 111 + lib/tag/index.d.ts | 106 + lib/tag/index.js | 89 + lib/tag/index.scss | 3 + lib/tag/main.scss | 255 + lib/tag/rtl.scss | 0 lib/tag/scss/animation.scss | 15 + lib/tag/scss/mixin.scss | 207 + lib/tag/scss/placeholder.scss | 181 + lib/tag/scss/variable.scss | 515 + lib/tag/selectable.js | 142 + lib/tag/style.js | 7 + lib/tag/tag-group.js | 78 + lib/tag/tag.js | 306 + lib/time-picker/api-schema.json | 368 + lib/time-picker/index.d.ts | 138 + lib/time-picker/index.js | 55 + lib/time-picker/index.scss | 3 + lib/time-picker/main.scss | 26 + lib/time-picker/module/time-menu.js | 182 + lib/time-picker/panel.js | 220 + lib/time-picker/rtl.scss | 9 + lib/time-picker/scss/menu.scss | 55 + lib/time-picker/scss/panel.scss | 27 + lib/time-picker/scss/variable.scss | 102 + lib/time-picker/style.js | 7 + lib/time-picker/time-picker.js | 480 + lib/time-picker/utils/index.js | 34 + lib/timeline/api-schema.json | 39 + lib/timeline/index.d.ts | 22 + lib/timeline/index.js | 18 + lib/timeline/index.scss | 4 + lib/timeline/locale/index.js | 10 + lib/timeline/main.scss | 81 + lib/timeline/rtl.scss | 38 + lib/timeline/scss/mixin.scss | 199 + lib/timeline/scss/normalize.scss | 23 + lib/timeline/scss/util.scss | 3 + lib/timeline/scss/variable.scss | 165 + lib/timeline/style.js | 9 + lib/timeline/view/timeline-item.js | 255 + lib/timeline/view/timeline.js | 181 + lib/transfer/api-schema.json | 434 + lib/transfer/index.d.ts | 132 + lib/transfer/index.js | 12 + lib/transfer/index.scss | 4 + lib/transfer/main.scss | 132 + lib/transfer/scss/variable.scss | 113 + lib/transfer/style.js | 9 + lib/transfer/view/transfer-item.js | 222 + lib/transfer/view/transfer-panel.js | 393 + lib/transfer/view/transfer.js | 631 + lib/tree-select/api-schema.json | 492 + lib/tree-select/index.d.ts | 172 + lib/tree-select/index.js | 47 + lib/tree-select/index.scss | 4 + lib/tree-select/main.scss | 20 + lib/tree-select/scss/variable.scss | 31 + lib/tree-select/style.js | 9 + lib/tree-select/tree-select.js | 855 + lib/tree/api-schema.json | 979 + lib/tree/index.d.ts | 241 + lib/tree/index.js | 24 + lib/tree/index.scss | 4 + lib/tree/main.scss | 276 + lib/tree/rtl.scss | 34 + lib/tree/scss/mixin.scss | 7 + lib/tree/scss/variable.scss | 152 + lib/tree/style.js | 9 + lib/tree/view/tree-node-input.js | 75 + lib/tree/view/tree-node.js | 637 + lib/tree/view/tree.js | 1097 + lib/tree/view/util.js | 140 + lib/upload/api-schema.json | 1297 + lib/upload/base.js | 68 + lib/upload/card.js | 214 + lib/upload/dragger.js | 170 + lib/upload/index.d.ts | 425 + lib/upload/index.js | 188 + lib/upload/index.scss | 4 + lib/upload/list.js | 584 + lib/upload/main.scss | 465 + lib/upload/rtl.scss | 38 + lib/upload/runtime/html5-uploader.js | 202 + lib/upload/runtime/iframe-uploader.js | 284 + lib/upload/runtime/index.js | 82 + lib/upload/runtime/request.js | 120 + lib/upload/runtime/selecter.js | 210 + lib/upload/runtime/uploader.js | 166 + lib/upload/scss/variable.scss | 265 + lib/upload/style.js | 9 + lib/upload/transform.js | 45 + lib/upload/upload.js | 594 + lib/upload/util.js | 68 + lib/util/dom.js | 283 + lib/util/env.js | 42 + lib/util/events.js | 68 + lib/util/focus.js | 139 + lib/util/func.js | 97 + lib/util/guid.js | 22 + lib/util/htmlId.js | 47 + lib/util/index.js | 69 + lib/util/keycode.js | 36 + lib/util/log.js | 38 + lib/util/object.js | 247 + lib/util/string.js | 61 + lib/util/support.js | 100 + lib/validate/index.js | 159 + lib/validate/messages.js | 34 + lib/validate/rules/format.js | 55 + lib/validate/rules/index.js | 37 + lib/validate/rules/length.js | 60 + lib/validate/rules/pattern.js | 37 + lib/validate/rules/required.js | 28 + lib/validate/rules/size.js | 53 + lib/validate/util.js | 127 + lib/validate/validator.js | 74 + lib/virtual-list/api-schema.json | 87 + lib/virtual-list/index.d.ts | 45 + lib/virtual-list/index.js | 16 + lib/virtual-list/index.scss | 1 + lib/virtual-list/main.scss | 4 + lib/virtual-list/scss/mixin.scss | 2 + lib/virtual-list/scss/variable.scss | 14 + lib/virtual-list/style.js | 3 + lib/virtual-list/virtual-list.js | 526 + 2491 files changed, 388030 insertions(+), 12 deletions(-) create mode 100644 compiled_docs/affix/demo/absolute-position.en-us.md create mode 100644 compiled_docs/affix/demo/absolute-position.md create mode 100644 compiled_docs/affix/demo/basic.en-us.md create mode 100644 compiled_docs/affix/demo/basic.md create mode 100644 compiled_docs/affix/demo/custom-container.en-us.md create mode 100644 compiled_docs/affix/demo/custom-container.md create mode 100644 compiled_docs/affix/demo/custom-offset.en-us.md create mode 100644 compiled_docs/affix/demo/custom-offset.md create mode 100644 compiled_docs/affix/demo/on-affix.en-us.md create mode 100644 compiled_docs/affix/demo/on-affix.md create mode 100644 compiled_docs/affix/index.en-us.md create mode 100644 compiled_docs/affix/index.md create mode 100644 compiled_docs/animate/demo/basic.en-us.md create mode 100644 compiled_docs/animate/demo/basic.md create mode 100644 compiled_docs/animate/demo/expand.en-us.md create mode 100644 compiled_docs/animate/demo/expand.md create mode 100644 compiled_docs/animate/demo/multiple.en-us.md create mode 100644 compiled_docs/animate/demo/multiple.md create mode 100644 compiled_docs/animate/index.en-us.md create mode 100644 compiled_docs/animate/index.md create mode 100644 compiled_docs/badge/demo/basic.en-us.md create mode 100644 compiled_docs/badge/demo/basic.md create mode 100644 compiled_docs/badge/demo/change.en-us.md create mode 100644 compiled_docs/badge/demo/change.md create mode 100644 compiled_docs/badge/demo/content.en-us.md create mode 100644 compiled_docs/badge/demo/content.md create mode 100644 compiled_docs/badge/demo/dot.en-us.md create mode 100644 compiled_docs/badge/demo/dot.md create mode 100644 compiled_docs/badge/demo/no-wrapper.en-us.md create mode 100644 compiled_docs/badge/demo/no-wrapper.md create mode 100644 compiled_docs/badge/demo/plus.en-us.md create mode 100644 compiled_docs/badge/demo/plus.md create mode 100644 compiled_docs/badge/index.en-us.md create mode 100644 compiled_docs/badge/index.md create mode 100644 compiled_docs/balloon/demo/accessibility.en-us.md create mode 100644 compiled_docs/balloon/demo/accessibility.md create mode 100644 compiled_docs/balloon/demo/alignment.en-us.md create mode 100644 compiled_docs/balloon/demo/alignment.md create mode 100644 compiled_docs/balloon/demo/basic.en-us.md create mode 100644 compiled_docs/balloon/demo/basic.md create mode 100644 compiled_docs/balloon/demo/control.en-us.md create mode 100644 compiled_docs/balloon/demo/control.md create mode 100644 compiled_docs/balloon/demo/nested.en-us.md create mode 100644 compiled_docs/balloon/demo/nested.md create mode 100644 compiled_docs/balloon/demo/onCloseClick.en-us.md create mode 100644 compiled_docs/balloon/demo/onCloseClick.md create mode 100644 compiled_docs/balloon/demo/tooltip.en-us.md create mode 100644 compiled_docs/balloon/demo/tooltip.md create mode 100644 compiled_docs/balloon/demo/triggerType.en-us.md create mode 100644 compiled_docs/balloon/demo/triggerType.md create mode 100644 compiled_docs/balloon/index.en-us.md create mode 100644 compiled_docs/balloon/index.md create mode 100644 compiled_docs/breadcrumb/demo/basic.en-us.md create mode 100644 compiled_docs/breadcrumb/demo/basic.md create mode 100644 compiled_docs/breadcrumb/demo/more.en-us.md create mode 100644 compiled_docs/breadcrumb/demo/more.md create mode 100644 compiled_docs/breadcrumb/demo/separator.en-us.md create mode 100644 compiled_docs/breadcrumb/demo/separator.md create mode 100644 compiled_docs/breadcrumb/index.en-us.md create mode 100644 compiled_docs/breadcrumb/index.md create mode 100644 compiled_docs/button/demo/basic.en-us.md create mode 100644 compiled_docs/button/demo/basic.md create mode 100644 compiled_docs/button/demo/component.en-us.md create mode 100644 compiled_docs/button/demo/component.md create mode 100644 compiled_docs/button/demo/disabled.en-us.md create mode 100644 compiled_docs/button/demo/disabled.md create mode 100644 compiled_docs/button/demo/ghost.en-us.md create mode 100644 compiled_docs/button/demo/ghost.md create mode 100644 compiled_docs/button/demo/group.en-us.md create mode 100644 compiled_docs/button/demo/group.md create mode 100644 compiled_docs/button/demo/icon.en-us.md create mode 100644 compiled_docs/button/demo/icon.md create mode 100644 compiled_docs/button/demo/loading.en-us.md create mode 100644 compiled_docs/button/demo/loading.md create mode 100644 compiled_docs/button/demo/size.en-us.md create mode 100644 compiled_docs/button/demo/size.md create mode 100644 compiled_docs/button/index.en-us.md create mode 100644 compiled_docs/button/index.md create mode 100644 compiled_docs/calendar/demo/basic.en-us.md create mode 100644 compiled_docs/calendar/demo/basic.md create mode 100644 compiled_docs/calendar/demo/card.en-us.md create mode 100644 compiled_docs/calendar/demo/card.md create mode 100644 compiled_docs/calendar/demo/custom-cell.en-us.md create mode 100644 compiled_docs/calendar/demo/custom-cell.md create mode 100644 compiled_docs/calendar/demo/default-visible-month.en-us.md create mode 100644 compiled_docs/calendar/demo/default-visible-month.md create mode 100644 compiled_docs/calendar/demo/disabled.en-us.md create mode 100644 compiled_docs/calendar/demo/disabled.md create mode 100644 compiled_docs/calendar/demo/locale.en-us.md create mode 100644 compiled_docs/calendar/demo/locale.md create mode 100644 compiled_docs/calendar/demo/lunar.en-us.md create mode 100644 compiled_docs/calendar/demo/lunar.md create mode 100644 compiled_docs/calendar/demo/panel.en-us.md create mode 100644 compiled_docs/calendar/demo/panel.md create mode 100644 compiled_docs/calendar/index.en-us.md create mode 100644 compiled_docs/calendar/index.md create mode 100644 compiled_docs/card/demo/basic.en-us.md create mode 100644 compiled_docs/card/demo/basic.md create mode 100644 compiled_docs/card/demo/custom-card.en-us.md create mode 100644 compiled_docs/card/demo/custom-card.md create mode 100644 compiled_docs/card/demo/custom-height.en-us.md create mode 100644 compiled_docs/card/demo/custom-height.md create mode 100644 compiled_docs/card/demo/custom-title.en-us.md create mode 100644 compiled_docs/card/demo/custom-title.md create mode 100644 compiled_docs/card/demo/head-underline.en-us.md create mode 100644 compiled_docs/card/demo/head-underline.md create mode 100644 compiled_docs/card/index.en-us.md create mode 100644 compiled_docs/card/index.md create mode 100644 compiled_docs/cascader-select/demo/accessibility.en-us.md create mode 100644 compiled_docs/cascader-select/demo/accessibility.md create mode 100644 compiled_docs/cascader-select/demo/basic.en-us.md create mode 100644 compiled_docs/cascader-select/demo/basic.md create mode 100644 compiled_docs/cascader-select/demo/custom-style.en-us.md create mode 100644 compiled_docs/cascader-select/demo/custom-style.md create mode 100644 compiled_docs/cascader-select/demo/custom.md create mode 100644 compiled_docs/cascader-select/demo/dynamic.en-us.md create mode 100644 compiled_docs/cascader-select/demo/dynamic.md create mode 100644 compiled_docs/cascader-select/demo/expand-trigger.en-us.md create mode 100644 compiled_docs/cascader-select/demo/expand-trigger.md create mode 100644 compiled_docs/cascader-select/demo/multiple-control.en-us.md create mode 100644 compiled_docs/cascader-select/demo/multiple-control.md create mode 100644 compiled_docs/cascader-select/demo/multiple.en-us.md create mode 100644 compiled_docs/cascader-select/demo/multiple.md create mode 100644 compiled_docs/cascader-select/demo/search.en-us.md create mode 100644 compiled_docs/cascader-select/demo/search.md create mode 100644 compiled_docs/cascader-select/demo/single-control.en-us.md create mode 100644 compiled_docs/cascader-select/demo/single-control.md create mode 100644 compiled_docs/cascader-select/index.en-us.md create mode 100644 compiled_docs/cascader-select/index.md create mode 100644 compiled_docs/cascader/demo/accessibility.en-us.md create mode 100644 compiled_docs/cascader/demo/accessibility.md create mode 100644 compiled_docs/cascader/demo/basic.en-us.md create mode 100644 compiled_docs/cascader/demo/basic.md create mode 100644 compiled_docs/cascader/demo/custom-style.en-us.md create mode 100644 compiled_docs/cascader/demo/custom-style.md create mode 100644 compiled_docs/cascader/demo/dynamic.en-us.md create mode 100644 compiled_docs/cascader/demo/dynamic.md create mode 100644 compiled_docs/cascader/demo/expand-trigger.en-us.md create mode 100644 compiled_docs/cascader/demo/expand-trigger.md create mode 100644 compiled_docs/cascader/demo/multiple-control.en-us.md create mode 100644 compiled_docs/cascader/demo/multiple-control.md create mode 100644 compiled_docs/cascader/demo/multiple.en-us.md create mode 100644 compiled_docs/cascader/demo/multiple.md create mode 100644 compiled_docs/cascader/demo/single-control.en-us.md create mode 100644 compiled_docs/cascader/demo/single-control.md create mode 100644 compiled_docs/cascader/demo/source.en-us.md create mode 100644 compiled_docs/cascader/demo/source.md create mode 100644 compiled_docs/cascader/index.en-us.md create mode 100644 compiled_docs/cascader/index.md create mode 100644 compiled_docs/checkbox/demo/accessibility.en-us.md create mode 100644 compiled_docs/checkbox/demo/accessibility.md create mode 100644 compiled_docs/checkbox/demo/basic.en-us.md create mode 100644 compiled_docs/checkbox/demo/basic.md create mode 100644 compiled_docs/checkbox/demo/control.en-us.md create mode 100644 compiled_docs/checkbox/demo/control.md create mode 100644 compiled_docs/checkbox/demo/group.en-us.md create mode 100644 compiled_docs/checkbox/demo/group.md create mode 100644 compiled_docs/checkbox/demo/indeterminate.en-us.md create mode 100644 compiled_docs/checkbox/demo/indeterminate.md create mode 100644 compiled_docs/checkbox/demo/nest.en-us.md create mode 100644 compiled_docs/checkbox/demo/nest.md create mode 100644 compiled_docs/checkbox/demo/uncontrol.en-us.md create mode 100644 compiled_docs/checkbox/demo/uncontrol.md create mode 100644 compiled_docs/checkbox/index.en-us.md create mode 100644 compiled_docs/checkbox/index.md create mode 100644 compiled_docs/collapse/demo/accessibility.en-us.md create mode 100644 compiled_docs/collapse/demo/accessibility.md create mode 100644 compiled_docs/collapse/demo/accordion.en-us.md create mode 100644 compiled_docs/collapse/demo/accordion.md create mode 100644 compiled_docs/collapse/demo/basic.en-us.md create mode 100644 compiled_docs/collapse/demo/basic.md create mode 100644 compiled_docs/collapse/demo/datasource.en-us.md create mode 100644 compiled_docs/collapse/demo/datasource.md create mode 100644 compiled_docs/collapse/demo/disabled.en-us.md create mode 100644 compiled_docs/collapse/demo/disabled.md create mode 100644 compiled_docs/collapse/demo/event.en-us.md create mode 100644 compiled_docs/collapse/demo/event.md create mode 100644 compiled_docs/collapse/demo/nested.en-us.md create mode 100644 compiled_docs/collapse/demo/nested.md create mode 100644 compiled_docs/collapse/index.en-us.md create mode 100644 compiled_docs/collapse/index.md create mode 100644 compiled_docs/components.json create mode 100644 compiled_docs/config-provider/demo/basic.en-us.md create mode 100644 compiled_docs/config-provider/demo/basic.md create mode 100644 compiled_docs/config-provider/demo/components.en-us.md create mode 100644 compiled_docs/config-provider/demo/components.md create mode 100644 compiled_docs/config-provider/demo/consumer.en-us.md create mode 100644 compiled_docs/config-provider/demo/consumer.md create mode 100644 compiled_docs/config-provider/demo/error-boundary.en-us.md create mode 100644 compiled_docs/config-provider/demo/error-boundary.md create mode 100644 compiled_docs/config-provider/demo/locale.en-us.md create mode 100644 compiled_docs/config-provider/demo/locale.md create mode 100644 compiled_docs/config-provider/demo/rtl.en-us.md create mode 100644 compiled_docs/config-provider/demo/rtl.md create mode 100644 compiled_docs/config-provider/index.en-us.md create mode 100644 compiled_docs/config-provider/index.md create mode 100644 compiled_docs/date-picker/demo/accessibility.en-us.md create mode 100644 compiled_docs/date-picker/demo/accessibility.md create mode 100644 compiled_docs/date-picker/demo/basic.en-us.md create mode 100644 compiled_docs/date-picker/demo/basic.md create mode 100644 compiled_docs/date-picker/demo/custom-range-picker.en-us.md create mode 100644 compiled_docs/date-picker/demo/custom-range-picker.md create mode 100644 compiled_docs/date-picker/demo/default-visible-month.en-us.md create mode 100644 compiled_docs/date-picker/demo/default-visible-month.md create mode 100644 compiled_docs/date-picker/demo/default.en-us.md create mode 100644 compiled_docs/date-picker/demo/default.md create mode 100644 compiled_docs/date-picker/demo/disabled-date.en-us.md create mode 100644 compiled_docs/date-picker/demo/disabled-date.md create mode 100644 compiled_docs/date-picker/demo/disabled.en-us.md create mode 100644 compiled_docs/date-picker/demo/disabled.md create mode 100644 compiled_docs/date-picker/demo/field.en-us.md create mode 100644 compiled_docs/date-picker/demo/field.md create mode 100644 compiled_docs/date-picker/demo/footer.en-us.md create mode 100644 compiled_docs/date-picker/demo/footer.md create mode 100644 compiled_docs/date-picker/demo/format.en-us.md create mode 100644 compiled_docs/date-picker/demo/format.md create mode 100644 compiled_docs/date-picker/demo/popup.en-us.md create mode 100644 compiled_docs/date-picker/demo/popup.md create mode 100644 compiled_docs/date-picker/demo/show-time.en-us.md create mode 100644 compiled_docs/date-picker/demo/show-time.md create mode 100644 compiled_docs/date-picker/demo/size.en-us.md create mode 100644 compiled_docs/date-picker/demo/size.md create mode 100644 compiled_docs/date-picker/index.en-us.md create mode 100644 compiled_docs/date-picker/index.md create mode 100644 compiled_docs/dialog/demo/accessibility.en-us.md create mode 100644 compiled_docs/dialog/demo/accessibility.md create mode 100644 compiled_docs/dialog/demo/basic.en-us.md create mode 100644 compiled_docs/dialog/demo/basic.md create mode 100644 compiled_docs/dialog/demo/customize-footer.en-us.md create mode 100644 compiled_docs/dialog/demo/customize-footer.md create mode 100644 compiled_docs/dialog/demo/fixed-height.en-us.md create mode 100644 compiled_docs/dialog/demo/fixed-height.md create mode 100644 compiled_docs/dialog/demo/footer.en-us.md create mode 100644 compiled_docs/dialog/demo/footer.md create mode 100644 compiled_docs/dialog/demo/large-content.en-us.md create mode 100644 compiled_docs/dialog/demo/large-content.md create mode 100644 compiled_docs/dialog/demo/promise.en-us.md create mode 100644 compiled_docs/dialog/demo/promise.md create mode 100644 compiled_docs/dialog/demo/quick.en-us.md create mode 100644 compiled_docs/dialog/demo/quick.md create mode 100644 compiled_docs/dialog/demo/should-update-position.en-us.md create mode 100644 compiled_docs/dialog/demo/should-update-position.md create mode 100644 compiled_docs/dialog/index.en-us.md create mode 100644 compiled_docs/dialog/index.md create mode 100644 compiled_docs/dropdown/demo/basic.en-us.md create mode 100644 compiled_docs/dropdown/demo/basic.md create mode 100644 compiled_docs/dropdown/demo/controlled.en-us.md create mode 100644 compiled_docs/dropdown/demo/controlled.md create mode 100644 compiled_docs/dropdown/demo/trigger-type.en-us.md create mode 100644 compiled_docs/dropdown/demo/trigger-type.md create mode 100644 compiled_docs/dropdown/index.en-us.md create mode 100644 compiled_docs/dropdown/index.md create mode 100644 compiled_docs/field/demo/autounmout.en-us.md create mode 100644 compiled_docs/field/demo/autounmout.md create mode 100644 compiled_docs/field/demo/basic.en-us.md create mode 100644 compiled_docs/field/demo/basic.md create mode 100644 compiled_docs/field/demo/custom.en-us.md create mode 100644 compiled_docs/field/demo/custom.md create mode 100644 compiled_docs/field/demo/dynamic.en-us.md create mode 100644 compiled_docs/field/demo/dynamic.md create mode 100644 compiled_docs/field/demo/mix.en-us.md create mode 100644 compiled_docs/field/demo/mix.md create mode 100644 compiled_docs/field/demo/normalize.en-us.md create mode 100644 compiled_docs/field/demo/normalize.md create mode 100644 compiled_docs/field/demo/onchange.en-us.md create mode 100644 compiled_docs/field/demo/onchange.md create mode 100644 compiled_docs/field/demo/redux.en-us.md create mode 100644 compiled_docs/field/demo/redux.md create mode 100644 compiled_docs/field/demo/seterror.en-us.md create mode 100644 compiled_docs/field/demo/seterror.md create mode 100644 compiled_docs/field/demo/topath.en-us.md create mode 100644 compiled_docs/field/demo/topath.md create mode 100644 compiled_docs/field/demo/validator.en-us.md create mode 100644 compiled_docs/field/demo/validator.md create mode 100644 compiled_docs/field/demo/valuename.en-us.md create mode 100644 compiled_docs/field/demo/valuename.md create mode 100644 compiled_docs/field/index.en-us.md create mode 100644 compiled_docs/field/index.md create mode 100644 compiled_docs/form/demo/accessibility.en-us.md create mode 100644 compiled_docs/form/demo/accessibility.md create mode 100644 compiled_docs/form/demo/base.en-us.md create mode 100644 compiled_docs/form/demo/base.md create mode 100644 compiled_docs/form/demo/custom.en-us.md create mode 100644 compiled_docs/form/demo/custom.md create mode 100644 compiled_docs/form/demo/field.en-us.md create mode 100644 compiled_docs/form/demo/field.md create mode 100644 compiled_docs/form/demo/inline.en-us.md create mode 100644 compiled_docs/form/demo/inline.md create mode 100644 compiled_docs/form/demo/inset.en-us.md create mode 100644 compiled_docs/form/demo/inset.md create mode 100644 compiled_docs/form/demo/mix.en-us.md create mode 100644 compiled_docs/form/demo/mix.md create mode 100644 compiled_docs/form/demo/nest.en-us.md create mode 100644 compiled_docs/form/demo/nest.md create mode 100644 compiled_docs/form/demo/onsubmit.en-us.md create mode 100644 compiled_docs/form/demo/onsubmit.md create mode 100644 compiled_docs/form/demo/redux-seterror.en-us.md create mode 100644 compiled_docs/form/demo/redux-seterror.md create mode 100644 compiled_docs/form/demo/redux.en-us.md create mode 100644 compiled_docs/form/demo/redux.md create mode 100644 compiled_docs/form/demo/register.en-us.md create mode 100644 compiled_docs/form/demo/register.md create mode 100644 compiled_docs/form/demo/responsive.en-us.md create mode 100644 compiled_docs/form/demo/responsive.md create mode 100644 compiled_docs/form/demo/size.en-us.md create mode 100644 compiled_docs/form/demo/size.md create mode 100644 compiled_docs/form/demo/top.en-us.md create mode 100644 compiled_docs/form/demo/top.md create mode 100644 compiled_docs/form/demo/validate-basic.en-us.md create mode 100644 compiled_docs/form/demo/validate-basic.md create mode 100644 compiled_docs/form/demo/validate-custom-error.en-us.md create mode 100644 compiled_docs/form/demo/validate-custom-error.md create mode 100644 compiled_docs/form/demo/validate-static.en-us.md create mode 100644 compiled_docs/form/demo/validate-static.md create mode 100644 compiled_docs/form/index.en-us.md create mode 100644 compiled_docs/form/index.md create mode 100644 compiled_docs/grid/demo/align.en-us.md create mode 100644 compiled_docs/grid/demo/align.md create mode 100644 compiled_docs/grid/demo/basic.en-us.md create mode 100644 compiled_docs/grid/demo/basic.md create mode 100644 compiled_docs/grid/demo/breakpoint.en-us.md create mode 100644 compiled_docs/grid/demo/breakpoint.md create mode 100644 compiled_docs/grid/demo/custom-elem-type.en-us.md create mode 100644 compiled_docs/grid/demo/custom-elem-type.md create mode 100644 compiled_docs/grid/demo/fixed.en-us.md create mode 100644 compiled_docs/grid/demo/fixed.md create mode 100644 compiled_docs/grid/demo/gutter.en-us.md create mode 100644 compiled_docs/grid/demo/gutter.md create mode 100644 compiled_docs/grid/demo/hidden.en-us.md create mode 100644 compiled_docs/grid/demo/hidden.md create mode 100644 compiled_docs/grid/demo/justify.en-us.md create mode 100644 compiled_docs/grid/demo/justify.md create mode 100644 compiled_docs/grid/demo/nest.en-us.md create mode 100644 compiled_docs/grid/demo/nest.md create mode 100644 compiled_docs/grid/demo/offset-fixed.en-us.md create mode 100644 compiled_docs/grid/demo/offset-fixed.md create mode 100644 compiled_docs/grid/demo/offset.en-us.md create mode 100644 compiled_docs/grid/demo/offset.md create mode 100644 compiled_docs/grid/demo/type.en-us.md create mode 100644 compiled_docs/grid/demo/type.md create mode 100644 compiled_docs/grid/demo/wrap.en-us.md create mode 100644 compiled_docs/grid/demo/wrap.md create mode 100644 compiled_docs/grid/index.en-us.md create mode 100644 compiled_docs/grid/index.md create mode 100644 compiled_docs/icon/demo/accessibility.en-us.md create mode 100644 compiled_docs/icon/demo/accessibility.md create mode 100644 compiled_docs/icon/demo/basic.en-us.md create mode 100644 compiled_docs/icon/demo/basic.md create mode 100644 compiled_docs/icon/demo/size.en-us.md create mode 100644 compiled_docs/icon/demo/size.md create mode 100644 compiled_docs/icon/demo/style.en-us.md create mode 100644 compiled_docs/icon/demo/style.md create mode 100644 compiled_docs/icon/demo/type.en-us.md create mode 100644 compiled_docs/icon/demo/type.md create mode 100644 compiled_docs/icon/index.en-us.md create mode 100644 compiled_docs/icon/index.md create mode 100644 compiled_docs/input/demo/accessibility.en-us.md create mode 100644 compiled_docs/input/demo/accessibility.md create mode 100644 compiled_docs/input/demo/addon.en-us.md create mode 100644 compiled_docs/input/demo/addon.md create mode 100644 compiled_docs/input/demo/autoheight.en-us.md create mode 100644 compiled_docs/input/demo/autoheight.md create mode 100644 compiled_docs/input/demo/basic.en-us.md create mode 100644 compiled_docs/input/demo/basic.md create mode 100644 compiled_docs/input/demo/clear.en-us.md create mode 100644 compiled_docs/input/demo/clear.md create mode 100644 compiled_docs/input/demo/disabled.en-us.md create mode 100644 compiled_docs/input/demo/disabled.md create mode 100644 compiled_docs/input/demo/group.en-us.md create mode 100644 compiled_docs/input/demo/group.md create mode 100644 compiled_docs/input/demo/inner.en-us.md create mode 100644 compiled_docs/input/demo/inner.md create mode 100644 compiled_docs/input/demo/maxlen.en-us.md create mode 100644 compiled_docs/input/demo/maxlen.md create mode 100644 compiled_docs/input/demo/passwd.en-us.md create mode 100644 compiled_docs/input/demo/passwd.md create mode 100644 compiled_docs/input/demo/state.en-us.md create mode 100644 compiled_docs/input/demo/state.md create mode 100644 compiled_docs/input/demo/style.en-us.md create mode 100644 compiled_docs/input/demo/style.md create mode 100644 compiled_docs/input/demo/trim.en-us.md create mode 100644 compiled_docs/input/demo/trim.md create mode 100644 compiled_docs/input/index.en-us.md create mode 100644 compiled_docs/input/index.md create mode 100644 compiled_docs/loading/demo/basic.en-us.md create mode 100644 compiled_docs/loading/demo/basic.md create mode 100644 compiled_docs/loading/demo/fullscreen.en-us.md create mode 100644 compiled_docs/loading/demo/fullscreen.md create mode 100644 compiled_docs/loading/demo/indicator.en-us.md create mode 100644 compiled_docs/loading/demo/indicator.md create mode 100644 compiled_docs/loading/demo/size.en-us.md create mode 100644 compiled_docs/loading/demo/size.md create mode 100644 compiled_docs/loading/demo/state.en-us.md create mode 100644 compiled_docs/loading/demo/state.md create mode 100644 compiled_docs/loading/demo/tipAlign.en-us.md create mode 100644 compiled_docs/loading/demo/tipAlign.md create mode 100644 compiled_docs/loading/index.en-us.md create mode 100644 compiled_docs/loading/index.md create mode 100644 compiled_docs/mapping.js create mode 100644 compiled_docs/menu-button/demo/basic.en-us.md create mode 100644 compiled_docs/menu-button/demo/basic.md create mode 100644 compiled_docs/menu-button/demo/menu.en-us.md create mode 100644 compiled_docs/menu-button/demo/menu.md create mode 100644 compiled_docs/menu-button/demo/select.en-us.md create mode 100644 compiled_docs/menu-button/demo/select.md create mode 100644 compiled_docs/menu-button/demo/size.en-us.md create mode 100644 compiled_docs/menu-button/demo/size.md create mode 100644 compiled_docs/menu-button/index.en-us.md create mode 100644 compiled_docs/menu-button/index.md create mode 100644 compiled_docs/menu/demo/accordian.en-us.md create mode 100644 compiled_docs/menu/demo/accordian.md create mode 100644 compiled_docs/menu/demo/basic.en-us.md create mode 100644 compiled_docs/menu/demo/basic.md create mode 100644 compiled_docs/menu/demo/context.en-us.md create mode 100644 compiled_docs/menu/demo/context.md create mode 100644 compiled_docs/menu/demo/csutom-select.en-us.md create mode 100644 compiled_docs/menu/demo/csutom-select.md create mode 100644 compiled_docs/menu/demo/custom-popup.en-us.md create mode 100644 compiled_docs/menu/demo/custom-popup.md create mode 100644 compiled_docs/menu/demo/hover.en-us.md create mode 100644 compiled_docs/menu/demo/hover.md create mode 100644 compiled_docs/menu/demo/hoz.en-us.md create mode 100644 compiled_docs/menu/demo/hoz.md create mode 100644 compiled_docs/menu/demo/popup-align.en-us.md create mode 100644 compiled_docs/menu/demo/popup-align.md create mode 100644 compiled_docs/menu/demo/popup.en-us.md create mode 100644 compiled_docs/menu/demo/popup.md create mode 100644 compiled_docs/menu/demo/select.en-us.md create mode 100644 compiled_docs/menu/demo/select.md create mode 100644 compiled_docs/menu/index.en-us.md create mode 100644 compiled_docs/menu/index.md create mode 100644 compiled_docs/message/demo/accessibility.en-us.md create mode 100644 compiled_docs/message/demo/accessibility.md create mode 100644 compiled_docs/message/demo/control.en-us.md create mode 100644 compiled_docs/message/demo/control.md create mode 100644 compiled_docs/message/demo/inline-close.en-us.md create mode 100644 compiled_docs/message/demo/inline-close.md create mode 100644 compiled_docs/message/demo/shape.en-us.md create mode 100644 compiled_docs/message/demo/shape.md create mode 100644 compiled_docs/message/demo/size.en-us.md create mode 100644 compiled_docs/message/demo/size.md create mode 100644 compiled_docs/message/demo/toast-quick.en-us.md create mode 100644 compiled_docs/message/demo/toast-quick.md create mode 100644 compiled_docs/message/demo/toast.en-us.md create mode 100644 compiled_docs/message/demo/toast.md create mode 100644 compiled_docs/message/demo/type.en-us.md create mode 100644 compiled_docs/message/demo/type.md create mode 100644 compiled_docs/message/index.en-us.md create mode 100644 compiled_docs/message/index.md create mode 100644 compiled_docs/nav/demo/basic.en-us.md create mode 100644 compiled_docs/nav/demo/basic.md create mode 100644 compiled_docs/nav/demo/custom.en-us.md create mode 100644 compiled_docs/nav/demo/custom.md create mode 100644 compiled_docs/nav/demo/group.en-us.md create mode 100644 compiled_docs/nav/demo/group.md create mode 100644 compiled_docs/nav/demo/icon-only.en-us.md create mode 100644 compiled_docs/nav/demo/icon-only.md create mode 100644 compiled_docs/nav/demo/open-mode.en-us.md create mode 100644 compiled_docs/nav/demo/open-mode.md create mode 100644 compiled_docs/nav/demo/popup-align.en-us.md create mode 100644 compiled_docs/nav/demo/popup-align.md create mode 100644 compiled_docs/nav/index.en-us.md create mode 100644 compiled_docs/nav/index.md create mode 100644 compiled_docs/number-picker/demo/accessibility.en-us.md create mode 100644 compiled_docs/number-picker/demo/accessibility.md create mode 100644 compiled_docs/number-picker/demo/basic.en-us.md create mode 100644 compiled_docs/number-picker/demo/basic.md create mode 100644 compiled_docs/number-picker/demo/disabled.en-us.md create mode 100644 compiled_docs/number-picker/demo/disabled.md create mode 100644 compiled_docs/number-picker/demo/editable.en-us.md create mode 100644 compiled_docs/number-picker/demo/editable.md create mode 100644 compiled_docs/number-picker/demo/format.en-us.md create mode 100644 compiled_docs/number-picker/demo/format.md create mode 100644 compiled_docs/number-picker/demo/limit.en-us.md create mode 100644 compiled_docs/number-picker/demo/limit.md create mode 100644 compiled_docs/number-picker/demo/precision.en-us.md create mode 100644 compiled_docs/number-picker/demo/precision.md create mode 100644 compiled_docs/number-picker/demo/size.en-us.md create mode 100644 compiled_docs/number-picker/demo/size.md create mode 100644 compiled_docs/number-picker/demo/step.en-us.md create mode 100644 compiled_docs/number-picker/demo/step.md create mode 100644 compiled_docs/number-picker/index.en-us.md create mode 100644 compiled_docs/number-picker/index.md create mode 100644 compiled_docs/overlay/demo/accessibility.en-us.md create mode 100644 compiled_docs/overlay/demo/accessibility.md create mode 100644 compiled_docs/overlay/demo/align.en-us.md create mode 100644 compiled_docs/overlay/demo/align.md create mode 100644 compiled_docs/overlay/demo/backdrop.en-us.md create mode 100644 compiled_docs/overlay/demo/backdrop.md create mode 100644 compiled_docs/overlay/demo/controlled.en-us.md create mode 100644 compiled_docs/overlay/demo/controlled.md create mode 100644 compiled_docs/overlay/demo/nested.en-us.md create mode 100644 compiled_docs/overlay/demo/nested.md create mode 100644 compiled_docs/overlay/demo/overlay.en-us.md create mode 100644 compiled_docs/overlay/demo/overlay.md create mode 100644 compiled_docs/overlay/demo/popup.en-us.md create mode 100644 compiled_docs/overlay/demo/popup.md create mode 100644 compiled_docs/overlay/demo/scroll.en-us.md create mode 100644 compiled_docs/overlay/demo/scroll.md create mode 100644 compiled_docs/overlay/index.en-us.md create mode 100644 compiled_docs/overlay/index.md create mode 100644 compiled_docs/pagination/demo/control.en-us.md create mode 100644 compiled_docs/pagination/demo/control.md create mode 100644 compiled_docs/pagination/demo/dropdown-direction.en-us.md create mode 100644 compiled_docs/pagination/demo/dropdown-direction.md create mode 100644 compiled_docs/pagination/demo/link.en-us.md create mode 100644 compiled_docs/pagination/demo/link.md create mode 100644 compiled_docs/pagination/demo/page-size.en-us.md create mode 100644 compiled_docs/pagination/demo/page-size.md create mode 100644 compiled_docs/pagination/demo/react-router.en-us.md create mode 100644 compiled_docs/pagination/demo/react-router.md create mode 100644 compiled_docs/pagination/demo/shape.en-us.md create mode 100644 compiled_docs/pagination/demo/shape.md create mode 100644 compiled_docs/pagination/demo/show-total.en-us.md create mode 100644 compiled_docs/pagination/demo/show-total.md create mode 100644 compiled_docs/pagination/demo/size.en-us.md create mode 100644 compiled_docs/pagination/demo/size.md create mode 100644 compiled_docs/pagination/demo/type.en-us.md create mode 100644 compiled_docs/pagination/demo/type.md create mode 100644 compiled_docs/pagination/demo/uncontrol.en-us.md create mode 100644 compiled_docs/pagination/demo/uncontrol.md create mode 100644 compiled_docs/pagination/index.en-us.md create mode 100644 compiled_docs/pagination/index.md create mode 100644 compiled_docs/paragraph/demo/basic.en-us.md create mode 100644 compiled_docs/paragraph/demo/basic.md create mode 100644 compiled_docs/paragraph/demo/type.en-us.md create mode 100644 compiled_docs/paragraph/demo/type.md create mode 100644 compiled_docs/paragraph/index.en-us.md create mode 100644 compiled_docs/paragraph/index.md create mode 100644 compiled_docs/progress/demo/basic.en-us.md create mode 100644 compiled_docs/progress/demo/basic.md create mode 100644 compiled_docs/progress/demo/circle.en-us.md create mode 100644 compiled_docs/progress/demo/circle.md create mode 100644 compiled_docs/progress/demo/color.en-us.md create mode 100644 compiled_docs/progress/demo/color.md create mode 100644 compiled_docs/progress/demo/controlled.en-us.md create mode 100644 compiled_docs/progress/demo/controlled.md create mode 100644 compiled_docs/progress/demo/percentrender.en-us.md create mode 100644 compiled_docs/progress/demo/percentrender.md create mode 100644 compiled_docs/progress/demo/progressive.en-us.md create mode 100644 compiled_docs/progress/demo/progressive.md create mode 100644 compiled_docs/progress/demo/size.en-us.md create mode 100644 compiled_docs/progress/demo/size.md create mode 100644 compiled_docs/progress/demo/state.en-us.md create mode 100644 compiled_docs/progress/demo/state.md create mode 100644 compiled_docs/progress/index.en-us.md create mode 100644 compiled_docs/progress/index.md create mode 100644 compiled_docs/radio/demo/accessibility.en-us.md create mode 100644 compiled_docs/radio/demo/accessibility.md create mode 100644 compiled_docs/radio/demo/basic.en-us.md create mode 100644 compiled_docs/radio/demo/basic.md create mode 100644 compiled_docs/radio/demo/button.en-us.md create mode 100644 compiled_docs/radio/demo/button.md create mode 100644 compiled_docs/radio/demo/control.en-us.md create mode 100644 compiled_docs/radio/demo/control.md create mode 100644 compiled_docs/radio/demo/group.en-us.md create mode 100644 compiled_docs/radio/demo/group.md create mode 100644 compiled_docs/radio/demo/nest.en-us.md create mode 100644 compiled_docs/radio/demo/nest.md create mode 100644 compiled_docs/radio/demo/uncontrol.en-us.md create mode 100644 compiled_docs/radio/demo/uncontrol.md create mode 100644 compiled_docs/radio/demo/useWithGrid.en-us.md create mode 100644 compiled_docs/radio/demo/useWithGrid.md create mode 100644 compiled_docs/radio/index.en-us.md create mode 100644 compiled_docs/radio/index.md create mode 100644 compiled_docs/range/demo/accessibility.en-us.md create mode 100644 compiled_docs/range/demo/accessibility.md create mode 100644 compiled_docs/range/demo/basic.en-us.md create mode 100644 compiled_docs/range/demo/basic.md create mode 100644 compiled_docs/range/demo/change.en-us.md create mode 100644 compiled_docs/range/demo/change.md create mode 100644 compiled_docs/range/demo/control.en-us.md create mode 100644 compiled_docs/range/demo/control.md create mode 100644 compiled_docs/range/demo/fixedWidth.en-us.md create mode 100644 compiled_docs/range/demo/fixedWidth.md create mode 100644 compiled_docs/range/demo/marks.en-us.md create mode 100644 compiled_docs/range/demo/marks.md create mode 100644 compiled_docs/range/demo/range.en-us.md create mode 100644 compiled_docs/range/demo/range.md create mode 100644 compiled_docs/range/demo/reverse.en-us.md create mode 100644 compiled_docs/range/demo/reverse.md create mode 100644 compiled_docs/range/demo/tipRender.en-us.md create mode 100644 compiled_docs/range/demo/tipRender.md create mode 100644 compiled_docs/range/index.en-us.md create mode 100644 compiled_docs/range/index.md create mode 100644 compiled_docs/rating/demo/accessibility.en-us.md create mode 100644 compiled_docs/rating/demo/accessibility.md create mode 100644 compiled_docs/rating/demo/basic.en-us.md create mode 100644 compiled_docs/rating/demo/basic.md create mode 100644 compiled_docs/rating/demo/disabled.en-us.md create mode 100644 compiled_docs/rating/demo/disabled.md create mode 100644 compiled_docs/rating/demo/grade.en-us.md create mode 100644 compiled_docs/rating/demo/grade.md create mode 100644 compiled_docs/rating/demo/half.en-us.md create mode 100644 compiled_docs/rating/demo/half.md create mode 100644 compiled_docs/rating/demo/size.en-us.md create mode 100644 compiled_docs/rating/demo/size.md create mode 100644 compiled_docs/rating/index.en-us.md create mode 100644 compiled_docs/rating/index.md create mode 100644 compiled_docs/search/demo/accessibility.en-us.md create mode 100644 compiled_docs/search/demo/accessibility.md create mode 100644 compiled_docs/search/demo/base.en-us.md create mode 100644 compiled_docs/search/demo/base.md create mode 100644 compiled_docs/search/demo/combobox.en-us.md create mode 100644 compiled_docs/search/demo/combobox.md create mode 100644 compiled_docs/search/demo/custom.en-us.md create mode 100644 compiled_docs/search/demo/custom.md create mode 100644 compiled_docs/search/demo/filter.en-us.md create mode 100644 compiled_docs/search/demo/filter.md create mode 100644 compiled_docs/search/demo/size.en-us.md create mode 100644 compiled_docs/search/demo/size.md create mode 100644 compiled_docs/search/demo/type.en-us.md create mode 100644 compiled_docs/search/demo/type.md create mode 100644 compiled_docs/search/index.en-us.md create mode 100644 compiled_docs/search/index.md create mode 100644 compiled_docs/select/demo/accessibility.en-us.md create mode 100644 compiled_docs/select/demo/accessibility.md create mode 100644 compiled_docs/select/demo/basic.en-us.md create mode 100644 compiled_docs/select/demo/basic.md create mode 100644 compiled_docs/select/demo/combobox-basic.en-us.md create mode 100644 compiled_docs/select/demo/combobox-basic.md create mode 100644 compiled_docs/select/demo/combobox-remote.en-us.md create mode 100644 compiled_docs/select/demo/combobox-remote.md create mode 100644 compiled_docs/select/demo/combobox-rich-text.en-us.md create mode 100644 compiled_docs/select/demo/combobox-rich-text.md create mode 100644 compiled_docs/select/demo/combobox.en-us.md create mode 100644 compiled_docs/select/demo/combobox.md create mode 100644 compiled_docs/select/demo/customize-menu.en-us.md create mode 100644 compiled_docs/select/demo/customize-menu.md create mode 100644 compiled_docs/select/demo/customize-overlay.en-us.md create mode 100644 compiled_docs/select/demo/customize-overlay.md create mode 100644 compiled_docs/select/demo/multiple.en-us.md create mode 100644 compiled_docs/select/demo/multiple.md create mode 100644 compiled_docs/select/demo/select-basic.en-us.md create mode 100644 compiled_docs/select/demo/select-basic.md create mode 100644 compiled_docs/select/demo/select-cascader.en-us.md create mode 100644 compiled_docs/select/demo/select-cascader.md create mode 100644 compiled_docs/select/demo/select-custom-value.en-us.md create mode 100644 compiled_docs/select/demo/select-custom-value.md create mode 100644 compiled_docs/select/demo/select-options-group.en-us.md create mode 100644 compiled_docs/select/demo/select-options-group.md create mode 100644 compiled_docs/select/demo/select-search.en-us.md create mode 100644 compiled_docs/select/demo/select-search.md create mode 100644 compiled_docs/select/demo/tag.en-us.md create mode 100644 compiled_docs/select/demo/tag.md create mode 100644 compiled_docs/select/demo/use-detail-value.en-us.md create mode 100644 compiled_docs/select/demo/use-detail-value.md create mode 100644 compiled_docs/select/demo/virtual-select.en-us.md create mode 100644 compiled_docs/select/demo/virtual-select.md create mode 100644 compiled_docs/select/index.en-us.md create mode 100644 compiled_docs/select/index.md create mode 100644 compiled_docs/slider/demo/arrow-position.en-us.md create mode 100644 compiled_docs/slider/demo/arrow-position.md create mode 100644 compiled_docs/slider/demo/autoplay.en-us.md create mode 100644 compiled_docs/slider/demo/autoplay.md create mode 100644 compiled_docs/slider/demo/basic.en-us.md create mode 100644 compiled_docs/slider/demo/basic.md create mode 100644 compiled_docs/slider/demo/button-size.en-us.md create mode 100644 compiled_docs/slider/demo/button-size.md create mode 100644 compiled_docs/slider/demo/center-mode.en-us.md create mode 100644 compiled_docs/slider/demo/center-mode.md create mode 100644 compiled_docs/slider/demo/custom-arrow.en-us.md create mode 100644 compiled_docs/slider/demo/custom-arrow.md create mode 100644 compiled_docs/slider/demo/custom-slide.en-us.md create mode 100644 compiled_docs/slider/demo/custom-slide.md create mode 100644 compiled_docs/slider/demo/dots-direction.en-us.md create mode 100644 compiled_docs/slider/demo/dots-direction.md create mode 100644 compiled_docs/slider/demo/dots-render.en-us.md create mode 100644 compiled_docs/slider/demo/dots-render.md create mode 100644 compiled_docs/slider/demo/dots-triggerType.en-us.md create mode 100644 compiled_docs/slider/demo/dots-triggerType.md create mode 100644 compiled_docs/slider/demo/fade.en-us.md create mode 100644 compiled_docs/slider/demo/fade.md create mode 100644 compiled_docs/slider/demo/infinite.en-us.md create mode 100644 compiled_docs/slider/demo/infinite.md create mode 100644 compiled_docs/slider/demo/multiple.en-us.md create mode 100644 compiled_docs/slider/demo/multiple.md create mode 100644 compiled_docs/slider/demo/pause-on-hover.en-us.md create mode 100644 compiled_docs/slider/demo/pause-on-hover.md create mode 100644 compiled_docs/slider/demo/slick-goto.en-us.md create mode 100644 compiled_docs/slider/demo/slick-goto.md create mode 100644 compiled_docs/slider/demo/slide-change-hook.en-us.md create mode 100644 compiled_docs/slider/demo/slide-change-hook.md create mode 100644 compiled_docs/slider/demo/slide-direction.en-us.md create mode 100644 compiled_docs/slider/demo/slide-direction.md create mode 100644 compiled_docs/slider/demo/slider-with-dialog.en-us.md create mode 100644 compiled_docs/slider/demo/slider-with-dialog.md create mode 100644 compiled_docs/slider/demo/slider-wrapper.en-us.md create mode 100644 compiled_docs/slider/demo/slider-wrapper.md create mode 100644 compiled_docs/slider/demo/variable-width.en-us.md create mode 100644 compiled_docs/slider/demo/variable-width.md create mode 100644 compiled_docs/slider/index.en-us.md create mode 100644 compiled_docs/slider/index.md create mode 100644 compiled_docs/split-button/demo/basic.en-us.md create mode 100644 compiled_docs/split-button/demo/basic.md create mode 100644 compiled_docs/split-button/demo/composite.en-us.md create mode 100644 compiled_docs/split-button/demo/composite.md create mode 100644 compiled_docs/split-button/demo/menu.en-us.md create mode 100644 compiled_docs/split-button/demo/menu.md create mode 100644 compiled_docs/split-button/demo/size.en-us.md create mode 100644 compiled_docs/split-button/demo/size.md create mode 100644 compiled_docs/split-button/index.en-us.md create mode 100644 compiled_docs/split-button/index.md create mode 100644 compiled_docs/step/demo/basic.en-us.md create mode 100644 compiled_docs/step/demo/basic.md create mode 100644 compiled_docs/step/demo/controlled.en-us.md create mode 100644 compiled_docs/step/demo/controlled.md create mode 100644 compiled_docs/step/demo/custom-step-item.en-us.md create mode 100644 compiled_docs/step/demo/custom-step-item.md create mode 100644 compiled_docs/step/demo/direction.en-us.md create mode 100644 compiled_docs/step/demo/direction.md create mode 100644 compiled_docs/step/demo/disable.en-us.md create mode 100644 compiled_docs/step/demo/disable.md create mode 100644 compiled_docs/step/demo/percent.en-us.md create mode 100644 compiled_docs/step/demo/percent.md create mode 100644 compiled_docs/step/demo/read-only.en-us.md create mode 100644 compiled_docs/step/demo/read-only.md create mode 100644 compiled_docs/step/index.en-us.md create mode 100644 compiled_docs/step/index.md create mode 100644 compiled_docs/switch/demo/accessibility.en-us.md create mode 100644 compiled_docs/switch/demo/accessibility.md create mode 100644 compiled_docs/switch/demo/basic.en-us.md create mode 100644 compiled_docs/switch/demo/basic.md create mode 100644 compiled_docs/switch/demo/control.en-us.md create mode 100644 compiled_docs/switch/demo/control.md create mode 100644 compiled_docs/switch/demo/disabled.en-us.md create mode 100644 compiled_docs/switch/demo/disabled.md create mode 100644 compiled_docs/switch/index.en-us.md create mode 100644 compiled_docs/switch/index.md create mode 100644 compiled_docs/tab/demo/basic.en-us.md create mode 100644 compiled_docs/tab/demo/basic.md create mode 100644 compiled_docs/tab/demo/closable.en-us.md create mode 100644 compiled_docs/tab/demo/closable.md create mode 100644 compiled_docs/tab/demo/custom-style.en-us.md create mode 100644 compiled_docs/tab/demo/custom-style.md create mode 100644 compiled_docs/tab/demo/custom-tab.en-us.md create mode 100644 compiled_docs/tab/demo/custom-tab.md create mode 100644 compiled_docs/tab/demo/disabled.en-us.md create mode 100644 compiled_docs/tab/demo/disabled.md create mode 100644 compiled_docs/tab/demo/editable-tab.en-us.md create mode 100644 compiled_docs/tab/demo/editable-tab.md create mode 100644 compiled_docs/tab/demo/excess-mode.en-us.md create mode 100644 compiled_docs/tab/demo/excess-mode.md create mode 100644 compiled_docs/tab/demo/extra.en-us.md create mode 100644 compiled_docs/tab/demo/extra.md create mode 100644 compiled_docs/tab/demo/lazy-load.en-us.md create mode 100644 compiled_docs/tab/demo/lazy-load.md create mode 100644 compiled_docs/tab/demo/nested.en-us.md create mode 100644 compiled_docs/tab/demo/nested.md create mode 100644 compiled_docs/tab/demo/position.en-us.md create mode 100644 compiled_docs/tab/demo/position.md create mode 100644 compiled_docs/tab/demo/shape.en-us.md create mode 100644 compiled_docs/tab/demo/shape.md create mode 100644 compiled_docs/tab/demo/size.en-us.md create mode 100644 compiled_docs/tab/demo/size.md create mode 100644 compiled_docs/tab/demo/tab-in-grid.en-us.md create mode 100644 compiled_docs/tab/demo/tab-in-grid.md create mode 100644 compiled_docs/tab/demo/trigger-type.en-us.md create mode 100644 compiled_docs/tab/demo/trigger-type.md create mode 100644 compiled_docs/tab/index.en-us.md create mode 100644 compiled_docs/tab/index.md create mode 100644 compiled_docs/table/demo/accessibility.en-us.md create mode 100644 compiled_docs/table/demo/accessibility.md create mode 100644 compiled_docs/table/demo/advanced.en-us.md create mode 100644 compiled_docs/table/demo/advanced.md create mode 100644 compiled_docs/table/demo/basic.en-us.md create mode 100644 compiled_docs/table/demo/basic.md create mode 100644 compiled_docs/table/demo/clear-selection.en-us.md create mode 100644 compiled_docs/table/demo/clear-selection.md create mode 100644 compiled_docs/table/demo/colspan.en-us.md create mode 100644 compiled_docs/table/demo/colspan.md create mode 100644 compiled_docs/table/demo/column.en-us.md create mode 100644 compiled_docs/table/demo/column.md create mode 100644 compiled_docs/table/demo/crud.en-us.md create mode 100644 compiled_docs/table/demo/crud.md create mode 100644 compiled_docs/table/demo/custom-loading.en-us.md create mode 100644 compiled_docs/table/demo/custom-loading.md create mode 100644 compiled_docs/table/demo/expanded-complex.en-us.md create mode 100644 compiled_docs/table/demo/expanded-complex.md create mode 100644 compiled_docs/table/demo/expanded.en-us.md create mode 100644 compiled_docs/table/demo/expanded.md create mode 100644 compiled_docs/table/demo/filter&sort.en-us.md create mode 100644 compiled_docs/table/demo/filter&sort.md create mode 100644 compiled_docs/table/demo/fixed-header.en-us.md create mode 100644 compiled_docs/table/demo/fixed-header.md create mode 100644 compiled_docs/table/demo/get-row-props.en-us.md create mode 100644 compiled_docs/table/demo/get-row-props.md create mode 100644 compiled_docs/table/demo/list.en-us.md create mode 100644 compiled_docs/table/demo/list.md create mode 100644 compiled_docs/table/demo/lock-column.en-us.md create mode 100644 compiled_docs/table/demo/lock-column.md create mode 100644 compiled_docs/table/demo/mix.en-us.md create mode 100644 compiled_docs/table/demo/mix.md create mode 100644 compiled_docs/table/demo/multiple-header.en-us.md create mode 100644 compiled_docs/table/demo/multiple-header.md create mode 100644 compiled_docs/table/demo/pagination.en-us.md create mode 100644 compiled_docs/table/demo/pagination.md create mode 100644 compiled_docs/table/demo/resize.en-us.md create mode 100644 compiled_docs/table/demo/resize.md create mode 100644 compiled_docs/table/demo/row-selection-config.en-us.md create mode 100644 compiled_docs/table/demo/row-selection-config.md create mode 100644 compiled_docs/table/demo/selection.en-us.md create mode 100644 compiled_docs/table/demo/selection.md create mode 100644 compiled_docs/table/demo/style.en-us.md create mode 100644 compiled_docs/table/demo/style.md create mode 100644 compiled_docs/table/demo/virtual.en-us.md create mode 100644 compiled_docs/table/demo/virtual.md create mode 100644 compiled_docs/table/index.en-us.md create mode 100644 compiled_docs/table/index.md create mode 100644 compiled_docs/tag/demo/accessibility.en-us.md create mode 100644 compiled_docs/tag/demo/accessibility.md create mode 100644 compiled_docs/tag/demo/basic.en-us.md create mode 100644 compiled_docs/tag/demo/basic.md create mode 100644 compiled_docs/tag/demo/closable.en-us.md create mode 100644 compiled_docs/tag/demo/closable.md create mode 100644 compiled_docs/tag/demo/selectable.en-us.md create mode 100644 compiled_docs/tag/demo/selectable.md create mode 100644 compiled_docs/tag/index.en-us.md create mode 100644 compiled_docs/tag/index.md create mode 100644 compiled_docs/time-picker/demo/basic.en-us.md create mode 100644 compiled_docs/time-picker/demo/basic.md create mode 100644 compiled_docs/time-picker/demo/default-value.en-us.md create mode 100644 compiled_docs/time-picker/demo/default-value.md create mode 100644 compiled_docs/time-picker/demo/disabled.en-us.md create mode 100644 compiled_docs/time-picker/demo/disabled.md create mode 100644 compiled_docs/time-picker/demo/field.en-us.md create mode 100644 compiled_docs/time-picker/demo/field.md create mode 100644 compiled_docs/time-picker/demo/format.en-us.md create mode 100644 compiled_docs/time-picker/demo/format.md create mode 100644 compiled_docs/time-picker/demo/size.en-us.md create mode 100644 compiled_docs/time-picker/demo/size.md create mode 100644 compiled_docs/time-picker/demo/step.en-us.md create mode 100644 compiled_docs/time-picker/demo/step.md create mode 100644 compiled_docs/time-picker/demo/value.en-us.md create mode 100644 compiled_docs/time-picker/demo/value.md create mode 100644 compiled_docs/time-picker/index.en-us.md create mode 100644 compiled_docs/time-picker/index.md create mode 100644 compiled_docs/timeline/demo/basic.en-us.md create mode 100644 compiled_docs/timeline/demo/basic.md create mode 100644 compiled_docs/timeline/demo/content.en-us.md create mode 100644 compiled_docs/timeline/demo/content.md create mode 100644 compiled_docs/timeline/demo/custom.en-us.md create mode 100644 compiled_docs/timeline/demo/custom.md create mode 100644 compiled_docs/timeline/demo/fold.en-us.md create mode 100644 compiled_docs/timeline/demo/fold.md create mode 100644 compiled_docs/timeline/demo/state.en-us.md create mode 100644 compiled_docs/timeline/demo/state.md create mode 100644 compiled_docs/timeline/demo/timeLeft.en-us.md create mode 100644 compiled_docs/timeline/demo/timeLeft.md create mode 100644 compiled_docs/timeline/index.en-us.md create mode 100644 compiled_docs/timeline/index.md create mode 100644 compiled_docs/transfer/demo/accessibility.en-us.md create mode 100644 compiled_docs/transfer/demo/accessibility.md create mode 100644 compiled_docs/transfer/demo/basic.en-us.md create mode 100644 compiled_docs/transfer/demo/basic.md create mode 100644 compiled_docs/transfer/demo/control.en-us.md create mode 100644 compiled_docs/transfer/demo/control.md create mode 100644 compiled_docs/transfer/demo/custom.en-us.md create mode 100644 compiled_docs/transfer/demo/custom.md create mode 100644 compiled_docs/transfer/demo/search.en-us.md create mode 100644 compiled_docs/transfer/demo/search.md create mode 100644 compiled_docs/transfer/demo/simple.en-us.md create mode 100644 compiled_docs/transfer/demo/simple.md create mode 100644 compiled_docs/transfer/demo/sortable.en-us.md create mode 100644 compiled_docs/transfer/demo/sortable.md create mode 100644 compiled_docs/transfer/index.en-us.md create mode 100644 compiled_docs/transfer/index.md create mode 100644 compiled_docs/tree-select/demo/accessibility.en-us.md create mode 100644 compiled_docs/tree-select/demo/accessibility.md create mode 100644 compiled_docs/tree-select/demo/basic.en-us.md create mode 100644 compiled_docs/tree-select/demo/basic.md create mode 100644 compiled_docs/tree-select/demo/check.en-us.md create mode 100644 compiled_docs/tree-select/demo/check.md create mode 100644 compiled_docs/tree-select/demo/control.en-us.md create mode 100644 compiled_docs/tree-select/demo/control.md create mode 100644 compiled_docs/tree-select/demo/data.en-us.md create mode 100644 compiled_docs/tree-select/demo/data.md create mode 100644 compiled_docs/tree-select/demo/search.en-us.md create mode 100644 compiled_docs/tree-select/demo/search.md create mode 100644 compiled_docs/tree-select/index.en-us.md create mode 100644 compiled_docs/tree-select/index.md create mode 100644 compiled_docs/tree/demo/basic.en-us.md create mode 100644 compiled_docs/tree/demo/basic.md create mode 100644 compiled_docs/tree/demo/control-check.en-us.md create mode 100644 compiled_docs/tree/demo/control-check.md create mode 100644 compiled_docs/tree/demo/control-select.en-us.md create mode 100644 compiled_docs/tree/demo/control-select.md create mode 100644 compiled_docs/tree/demo/data.en-us.md create mode 100644 compiled_docs/tree/demo/data.md create mode 100644 compiled_docs/tree/demo/draggable.en-us.md create mode 100644 compiled_docs/tree/demo/draggable.md create mode 100644 compiled_docs/tree/demo/dynamic.en-us.md create mode 100644 compiled_docs/tree/demo/dynamic.md create mode 100644 compiled_docs/tree/demo/line.en-us.md create mode 100644 compiled_docs/tree/demo/line.md create mode 100644 compiled_docs/tree/demo/node-block.en-us.md create mode 100644 compiled_docs/tree/demo/node-block.md create mode 100644 compiled_docs/tree/demo/search-tree.en-us.md create mode 100644 compiled_docs/tree/demo/search-tree.md create mode 100644 compiled_docs/tree/index.en-us.md create mode 100644 compiled_docs/tree/index.md create mode 100644 compiled_docs/upload/demo/accessibility.en-us.md create mode 100644 compiled_docs/upload/demo/accessibility.md create mode 100644 compiled_docs/upload/demo/base.en-us.md create mode 100644 compiled_docs/upload/demo/base.md create mode 100644 compiled_docs/upload/demo/beforeupload.en-us.md create mode 100644 compiled_docs/upload/demo/beforeupload.md create mode 100644 compiled_docs/upload/demo/card.en-us.md create mode 100644 compiled_docs/upload/demo/card.md create mode 100644 compiled_docs/upload/demo/crop.en-us.md create mode 100644 compiled_docs/upload/demo/crop.md create mode 100644 compiled_docs/upload/demo/data.en-us.md create mode 100644 compiled_docs/upload/demo/data.md create mode 100644 compiled_docs/upload/demo/dragger.en-us.md create mode 100644 compiled_docs/upload/demo/dragger.md create mode 100644 compiled_docs/upload/demo/error.en-us.md create mode 100644 compiled_docs/upload/demo/error.md create mode 100644 compiled_docs/upload/demo/extra.en-us.md create mode 100644 compiled_docs/upload/demo/extra.md create mode 100644 compiled_docs/upload/demo/image.en-us.md create mode 100644 compiled_docs/upload/demo/image.md create mode 100644 compiled_docs/upload/demo/limit.en-us.md create mode 100644 compiled_docs/upload/demo/limit.md create mode 100644 compiled_docs/upload/demo/maxsize.en-us.md create mode 100644 compiled_docs/upload/demo/maxsize.md create mode 100644 compiled_docs/upload/demo/paste.en-us.md create mode 100644 compiled_docs/upload/demo/paste.md create mode 100644 compiled_docs/upload/demo/submit.en-us.md create mode 100644 compiled_docs/upload/demo/submit.md create mode 100644 compiled_docs/upload/demo/text.en-us.md create mode 100644 compiled_docs/upload/demo/text.md create mode 100644 compiled_docs/upload/demo/validation.en-us.md create mode 100644 compiled_docs/upload/demo/validation.md create mode 100644 compiled_docs/upload/demo/with-form.en-us.md create mode 100644 compiled_docs/upload/demo/with-form.md create mode 100644 compiled_docs/upload/index.en-us.md create mode 100644 compiled_docs/upload/index.md create mode 100644 compiled_docs/virtual-list/demo/basic.en-us.md create mode 100644 compiled_docs/virtual-list/demo/basic.md create mode 100644 compiled_docs/virtual-list/demo/initial-index.en-us.md create mode 100644 compiled_docs/virtual-list/demo/initial-index.md create mode 100644 compiled_docs/virtual-list/demo/item-size-getter.en-us.md create mode 100644 compiled_docs/virtual-list/demo/item-size-getter.md create mode 100644 compiled_docs/virtual-list/index.en-us.md create mode 100644 compiled_docs/virtual-list/index.md create mode 100644 demos/badge/build/index.css create mode 100644 demos/badge/deps.json create mode 100644 demos/badge/index.html create mode 100644 demos/balloon/build/index.css create mode 100644 demos/balloon/deps.json create mode 100644 demos/balloon/index.html create mode 100644 demos/breadcrumb/build/index.css create mode 100644 demos/breadcrumb/deps.json create mode 100644 demos/breadcrumb/index.html create mode 100644 demos/button/build/index.css create mode 100644 demos/button/deps.json create mode 100644 demos/button/index.html create mode 100644 demos/calendar/build/index.css create mode 100644 demos/calendar/deps.json create mode 100644 demos/calendar/index.html create mode 100644 demos/card/build/index.css create mode 100644 demos/card/deps.json create mode 100644 demos/card/index.html create mode 100644 demos/cascader-select/build/index.css create mode 100644 demos/cascader-select/deps.json create mode 100644 demos/cascader-select/index.html create mode 100644 demos/cascader/build/index.css create mode 100644 demos/cascader/deps.json create mode 100644 demos/cascader/index.html create mode 100644 demos/checkbox/build/index.css create mode 100644 demos/checkbox/deps.json create mode 100644 demos/checkbox/index.html create mode 100644 demos/collapse/build/index.css create mode 100644 demos/collapse/deps.json create mode 100644 demos/collapse/index.html create mode 100644 demos/date-picker/build/index.css create mode 100644 demos/date-picker/deps.json create mode 100644 demos/date-picker/index.html create mode 100644 demos/dialog/build/index.css create mode 100644 demos/dialog/deps.json create mode 100644 demos/dialog/index.html create mode 100644 demos/form-element/build/index.css create mode 100644 demos/form-element/deps.json create mode 100644 demos/form-element/index.html create mode 100644 demos/form/build/index.css create mode 100644 demos/form/deps.json create mode 100644 demos/form/index.html create mode 100644 demos/input/build/index.css create mode 100644 demos/input/deps.json create mode 100644 demos/input/index.html create mode 100644 demos/loading/build/index.css create mode 100644 demos/loading/deps.json create mode 100644 demos/loading/index.html create mode 100644 demos/mask/build/index.css create mode 100644 demos/mask/deps.json create mode 100644 demos/mask/index.html create mode 100644 demos/menu-button/build/index.css create mode 100644 demos/menu-button/deps.json create mode 100644 demos/menu-button/index.html create mode 100644 demos/menu/build/index.css create mode 100644 demos/menu/deps.json create mode 100644 demos/menu/index.html create mode 100644 demos/message/build/index.css create mode 100644 demos/message/deps.json create mode 100644 demos/message/index.html create mode 100644 demos/nav/build/index.css create mode 100644 demos/nav/deps.json create mode 100644 demos/nav/index.html create mode 100644 demos/number-picker/build/index.css create mode 100644 demos/number-picker/deps.json create mode 100644 demos/number-picker/index.html create mode 100644 demos/pagination/build/index.css create mode 100644 demos/pagination/deps.json create mode 100644 demos/pagination/index.html create mode 100644 demos/paragraph/build/index.css create mode 100644 demos/paragraph/deps.json create mode 100644 demos/paragraph/index.html create mode 100644 demos/popup/build/index.css create mode 100644 demos/popup/deps.json create mode 100644 demos/popup/index.html create mode 100644 demos/progress/build/index.css create mode 100644 demos/progress/deps.json create mode 100644 demos/progress/index.html create mode 100644 demos/radio/build/index.css create mode 100644 demos/radio/deps.json create mode 100644 demos/radio/index.html create mode 100644 demos/range/build/index.css create mode 100644 demos/range/deps.json create mode 100644 demos/range/index.html create mode 100644 demos/rating/build/index.css create mode 100644 demos/rating/deps.json create mode 100644 demos/rating/index.html create mode 100644 demos/search/build/index.css create mode 100644 demos/search/deps.json create mode 100644 demos/search/index.html create mode 100644 demos/select/build/index.css create mode 100644 demos/select/deps.json create mode 100644 demos/select/index.html create mode 100644 demos/slider/build/index.css create mode 100644 demos/slider/deps.json create mode 100644 demos/slider/index.html create mode 100644 demos/split-button/build/index.css create mode 100644 demos/split-button/deps.json create mode 100644 demos/split-button/index.html create mode 100644 demos/step/build/index.css create mode 100644 demos/step/deps.json create mode 100644 demos/step/index.html create mode 100644 demos/switch/build/index.css create mode 100644 demos/switch/deps.json create mode 100644 demos/switch/index.html create mode 100644 demos/tab/build/index.css create mode 100644 demos/tab/deps.json create mode 100644 demos/tab/index.html create mode 100644 demos/table/build/index.css create mode 100644 demos/table/deps.json create mode 100644 demos/table/index.html create mode 100644 demos/tag/build/index.css create mode 100644 demos/tag/deps.json create mode 100644 demos/tag/index.html create mode 100644 demos/time-picker/build/index.css create mode 100644 demos/time-picker/deps.json create mode 100644 demos/time-picker/index.html create mode 100644 demos/timeline/build/index.css create mode 100644 demos/timeline/deps.json create mode 100644 demos/timeline/index.html create mode 100644 demos/transfer/build/index.css create mode 100644 demos/transfer/deps.json create mode 100644 demos/transfer/index.html create mode 100644 demos/tree-select/build/index.css create mode 100644 demos/tree-select/deps.json create mode 100644 demos/tree-select/index.html create mode 100644 demos/tree/build/index.css create mode 100644 demos/tree/deps.json create mode 100644 demos/tree/index.html create mode 100644 demos/upload/build/index.css create mode 100644 demos/upload/deps.json create mode 100644 demos/upload/index.html create mode 100644 dist/next-1.css create mode 100644 dist/next-2.css create mode 100644 dist/next-noreset-1.css create mode 100644 dist/next-noreset-2.css create mode 100644 dist/next-noreset.css create mode 100644 dist/next-noreset.min-1.css create mode 100644 dist/next-noreset.min-2.css create mode 100644 dist/next-noreset.min.css create mode 100644 dist/next-with-locales.js create mode 100644 dist/next-with-locales.min.js create mode 100644 dist/next.css create mode 100644 dist/next.js create mode 100644 dist/next.min-1.css create mode 100644 dist/next.min-2.css create mode 100644 dist/next.min.css create mode 100644 dist/next.min.js create mode 100644 es/affix/index.js create mode 100644 es/affix/index.scss create mode 100644 es/affix/main.scss create mode 100644 es/affix/style.js create mode 100644 es/affix/util.js create mode 100644 es/animate/animate.js create mode 100644 es/animate/child.js create mode 100644 es/animate/expand.js create mode 100644 es/animate/index.js create mode 100644 es/animate/index.scss create mode 100644 es/animate/main.scss create mode 100644 es/animate/scss/_attention-seekers/_buttonClick.scss create mode 100644 es/animate/scss/_attention-seekers/_press.scss create mode 100644 es/animate/scss/_attention-seekers/_pulse.scss create mode 100644 es/animate/scss/_attention-seekers/_shake.scss create mode 100644 es/animate/scss/_attention-seekers/_unpress.scss create mode 100644 es/animate/scss/_attention-seekers/attention-seekers.scss create mode 100644 es/animate/scss/_bounce-entrances/_bounceIn.scss create mode 100644 es/animate/scss/_bounce-entrances/bounce-entrances.scss create mode 100644 es/animate/scss/_bounce-exits/_bounceOut.scss create mode 100644 es/animate/scss/_bounce-exits/bounce-exits.scss create mode 100644 es/animate/scss/_expand-entrances/_expandInDown.scss create mode 100644 es/animate/scss/_expand-entrances/_expandInUp.scss create mode 100644 es/animate/scss/_expand-entrances/_withFade.scss create mode 100644 es/animate/scss/_expand-exits/_expandOutDown.scss create mode 100644 es/animate/scss/_expand-exits/_expandOutUp.scss create mode 100644 es/animate/scss/_expand-exits/_withFade.scss create mode 100644 es/animate/scss/_fading-entrances/_fadeIn.scss create mode 100644 es/animate/scss/_fading-entrances/_fadeInDown.scss create mode 100644 es/animate/scss/_fading-entrances/_fadeInDownBig.scss create mode 100644 es/animate/scss/_fading-entrances/_fadeInLeft.scss create mode 100644 es/animate/scss/_fading-entrances/_fadeInLeftBig.scss create mode 100644 es/animate/scss/_fading-entrances/_fadeInRight.scss create mode 100644 es/animate/scss/_fading-entrances/_fadeInRightBig.scss create mode 100644 es/animate/scss/_fading-entrances/_fadeInUp.scss create mode 100644 es/animate/scss/_fading-entrances/_fadeInUpBig.scss create mode 100644 es/animate/scss/_fading-entrances/fading-entrances.scss create mode 100644 es/animate/scss/_fading-exits/_fadeOut.scss create mode 100644 es/animate/scss/_fading-exits/_fadeOutDown.scss create mode 100644 es/animate/scss/_fading-exits/_fadeOutDownBig.scss create mode 100644 es/animate/scss/_fading-exits/_fadeOutLeft.scss create mode 100644 es/animate/scss/_fading-exits/_fadeOutLeftBig.scss create mode 100644 es/animate/scss/_fading-exits/_fadeOutRight.scss create mode 100644 es/animate/scss/_fading-exits/_fadeOutRightBig.scss create mode 100644 es/animate/scss/_fading-exits/_fadeOutUp.scss create mode 100644 es/animate/scss/_fading-exits/_fadeOutUpBig.scss create mode 100644 es/animate/scss/_fading-exits/fading-exits.scss create mode 100644 es/animate/scss/_other-entrances/_pressIn.scss create mode 100644 es/animate/scss/_other-entrances/_pressInSmall.scss create mode 100644 es/animate/scss/_other-entrances/_waterIn.scss create mode 100644 es/animate/scss/_other-entrances/other-entrances.scss create mode 100644 es/animate/scss/_other-exits/_pressOut.scss create mode 100644 es/animate/scss/_other-exits/_pressOutSmall.scss create mode 100644 es/animate/scss/_other-exits/_waterOut.scss create mode 100644 es/animate/scss/_other-exits/other-exits.scss create mode 100644 es/animate/scss/_sliding-entrances/_slideInDown.scss create mode 100644 es/animate/scss/_sliding-entrances/_slideInLeft.scss create mode 100644 es/animate/scss/_sliding-entrances/_slideInRight.scss create mode 100644 es/animate/scss/_sliding-entrances/_slideInUp.scss create mode 100644 es/animate/scss/_sliding-entrances/sliding-entrances.scss create mode 100644 es/animate/scss/_sliding-exits/_slideOutDown.scss create mode 100644 es/animate/scss/_sliding-exits/_slideOutLeft.scss create mode 100644 es/animate/scss/_sliding-exits/_slideOutRight.scss create mode 100644 es/animate/scss/_sliding-exits/_slideOutUp.scss create mode 100644 es/animate/scss/_sliding-exits/sliding-exits.scss create mode 100644 es/animate/scss/_zooming-entrances/_zoomIn.scss create mode 100644 es/animate/scss/_zooming-entrances/_zoomInDown.scss create mode 100644 es/animate/scss/_zooming-entrances/_zoomInLeft.scss create mode 100644 es/animate/scss/_zooming-entrances/_zoomInPulse.scss create mode 100644 es/animate/scss/_zooming-entrances/_zoomInQuick.scss create mode 100644 es/animate/scss/_zooming-entrances/_zoomInRight.scss create mode 100644 es/animate/scss/_zooming-entrances/_zoomInUp.scss create mode 100644 es/animate/scss/_zooming-entrances/zooming-entrances.scss create mode 100644 es/animate/scss/_zooming-exits/_zoomOut.scss create mode 100644 es/animate/scss/_zooming-exits/_zoomOutDown.scss create mode 100644 es/animate/scss/_zooming-exits/_zoomOutLeft.scss create mode 100644 es/animate/scss/_zooming-exits/_zoomOutPulse.scss create mode 100644 es/animate/scss/_zooming-exits/_zoomOutQuick.scss create mode 100644 es/animate/scss/_zooming-exits/_zoomOutRight.scss create mode 100644 es/animate/scss/_zooming-exits/_zoomOutUp.scss create mode 100644 es/animate/scss/_zooming-exits/zooming-exits.scss create mode 100644 es/animate/scss/mixin.scss create mode 100644 es/animate/scss/variable.scss create mode 100644 es/animate/style.js create mode 100644 es/badge/index.js create mode 100644 es/badge/index.scss create mode 100644 es/badge/main.scss create mode 100644 es/badge/rtl.scss create mode 100644 es/badge/scss/function.scss create mode 100644 es/badge/scss/mixin.scss create mode 100644 es/badge/scss/placeholder.scss create mode 100644 es/badge/scss/variable.scss create mode 100644 es/badge/style.js create mode 100644 es/badge/sup.js create mode 100644 es/balloon/alignMap.js create mode 100644 es/balloon/balloon.js create mode 100644 es/balloon/index.js create mode 100644 es/balloon/index.scss create mode 100644 es/balloon/inner.js create mode 100644 es/balloon/main.scss create mode 100644 es/balloon/rtl.scss create mode 100644 es/balloon/scss/mixin.scss create mode 100644 es/balloon/scss/variable.scss create mode 100644 es/balloon/style.js create mode 100644 es/balloon/tooltip.js create mode 100644 es/balloon/util.js create mode 100644 es/breadcrumb/index.js create mode 100644 es/breadcrumb/index.scss create mode 100644 es/breadcrumb/item.js create mode 100644 es/breadcrumb/main.scss create mode 100644 es/breadcrumb/scss/mixin.scss create mode 100644 es/breadcrumb/scss/variable.scss create mode 100644 es/breadcrumb/style.js create mode 100644 es/button/index.js create mode 100644 es/button/index.scss create mode 100644 es/button/main.scss create mode 100644 es/button/rtl.scss create mode 100644 es/button/scss/mixin.scss create mode 100644 es/button/scss/normalize.scss create mode 100644 es/button/scss/variable.scss create mode 100644 es/button/style.js create mode 100644 es/button/view/button.js create mode 100644 es/button/view/group.js create mode 100644 es/calendar/calendar.js create mode 100644 es/calendar/head/card-header.js create mode 100644 es/calendar/head/date-panel-header.js create mode 100644 es/calendar/head/month-panel-header.js create mode 100644 es/calendar/head/range-panel-header.js create mode 100644 es/calendar/head/year-panel-header.js create mode 100644 es/calendar/index.js create mode 100644 es/calendar/index.scss create mode 100644 es/calendar/main.scss create mode 100644 es/calendar/range-calendar.js create mode 100644 es/calendar/rtl.scss create mode 100644 es/calendar/scss/animation.scss create mode 100644 es/calendar/scss/header.scss create mode 100644 es/calendar/scss/mixin.scss create mode 100644 es/calendar/scss/normalize.scss create mode 100644 es/calendar/scss/table.scss create mode 100644 es/calendar/scss/variable.scss create mode 100644 es/calendar/style.js create mode 100644 es/calendar/table/date-table-head.js create mode 100644 es/calendar/table/date-table.js create mode 100644 es/calendar/table/month-table.js create mode 100644 es/calendar/table/year-table.js create mode 100644 es/calendar/utils/index.js create mode 100644 es/card/card.js create mode 100644 es/card/index.js create mode 100644 es/card/index.scss create mode 100644 es/card/main.scss create mode 100644 es/card/rtl.scss create mode 100644 es/card/scss/mixin.scss create mode 100644 es/card/scss/normalize.scss create mode 100644 es/card/scss/variable.scss create mode 100644 es/card/style.js create mode 100644 es/cascader-select/cascader-select.js create mode 100644 es/cascader-select/index.js create mode 100644 es/cascader-select/index.scss create mode 100644 es/cascader-select/main.scss create mode 100644 es/cascader-select/scss/variable.scss create mode 100644 es/cascader-select/style.js create mode 100644 es/cascader/cascader.js create mode 100644 es/cascader/index.js create mode 100644 es/cascader/index.scss create mode 100644 es/cascader/item.js create mode 100644 es/cascader/main.scss create mode 100644 es/cascader/menu.js create mode 100644 es/cascader/rtl.scss create mode 100644 es/cascader/scss/variable.scss create mode 100644 es/cascader/style.js create mode 100644 es/checkbox/checkbox-group.js create mode 100644 es/checkbox/checkbox.js create mode 100644 es/checkbox/index.js create mode 100644 es/checkbox/index.scss create mode 100644 es/checkbox/main.scss create mode 100644 es/checkbox/rtl.scss create mode 100644 es/checkbox/scss/variable.scss create mode 100644 es/checkbox/style.js create mode 100644 es/collapse/collapse.js create mode 100644 es/collapse/index.js create mode 100644 es/collapse/index.scss create mode 100644 es/collapse/main.scss create mode 100644 es/collapse/panel.js create mode 100644 es/collapse/rtl.scss create mode 100644 es/collapse/scss/mixin.scss create mode 100644 es/collapse/scss/variable.scss create mode 100644 es/collapse/style.js create mode 100644 es/config-provider/cache.js create mode 100644 es/config-provider/config.js create mode 100644 es/config-provider/consumer.js create mode 100644 es/config-provider/error-boundary.js create mode 100644 es/config-provider/get-context-props.js create mode 100644 es/config-provider/index.js create mode 100644 es/config-provider/index.scss create mode 100644 es/config-provider/main.scss create mode 100644 es/config-provider/style.js create mode 100644 es/core/base/_accessibility.scss create mode 100644 es/core/base/_normalize.scss create mode 100644 es/core/base/_reset.scss create mode 100644 es/core/base/_typography.scss create mode 100644 es/core/form-element.scss create mode 100644 es/core/index-noreset.scss create mode 100644 es/core/index.scss create mode 100644 es/core/mask.scss create mode 100644 es/core/popup.scss create mode 100644 es/core/reset.scss create mode 100644 es/core/style/_color.scss create mode 100644 es/core/style/_corner.scss create mode 100644 es/core/style/_font.scss create mode 100644 es/core/style/_global.scss create mode 100644 es/core/style/_icon.scss create mode 100644 es/core/style/_line.scss create mode 100644 es/core/style/_shadow.scss create mode 100644 es/core/style/_size.scss create mode 100644 es/core/util/_function.scss create mode 100644 es/core/util/_mixin.scss create mode 100644 es/core/utility/_form-element.scss create mode 100644 es/core/utility/_mask.scss create mode 100644 es/core/utility/_popup.scss create mode 100644 es/date-picker/date-picker.js create mode 100644 es/date-picker/index.js create mode 100644 es/date-picker/index.scss create mode 100644 es/date-picker/main.scss create mode 100644 es/date-picker/module/panel-footer.js create mode 100644 es/date-picker/month-picker.js create mode 100644 es/date-picker/range-picker.js create mode 100644 es/date-picker/rtl.scss create mode 100644 es/date-picker/scss/date-picker.scss create mode 100644 es/date-picker/scss/mixin.scss create mode 100644 es/date-picker/scss/range-picker.scss create mode 100644 es/date-picker/scss/variable.scss create mode 100644 es/date-picker/style.js create mode 100644 es/date-picker/util/index.js create mode 100644 es/date-picker/year-picker.js create mode 100644 es/dialog/dialog.js create mode 100644 es/dialog/index.js create mode 100644 es/dialog/index.scss create mode 100644 es/dialog/inner.js create mode 100644 es/dialog/main.scss create mode 100644 es/dialog/rtl.scss create mode 100644 es/dialog/scss/variable.scss create mode 100644 es/dialog/show.js create mode 100644 es/dialog/style.js create mode 100644 es/dropdown/dropdown.js create mode 100644 es/dropdown/index.js create mode 100644 es/dropdown/index.scss create mode 100644 es/dropdown/main.scss create mode 100644 es/dropdown/style.js create mode 100644 es/field/index.js create mode 100644 es/field/index.scss create mode 100644 es/field/main.scss create mode 100644 es/field/style.js create mode 100644 es/field/utils.js create mode 100644 es/form/enhance.js create mode 100644 es/form/error.js create mode 100644 es/form/form.js create mode 100644 es/form/index.js create mode 100644 es/form/index.scss create mode 100644 es/form/item.js create mode 100644 es/form/main.scss create mode 100644 es/form/reset.js create mode 100644 es/form/scss/mixin.scss create mode 100644 es/form/scss/variable.scss create mode 100644 es/form/style.js create mode 100644 es/form/submit.js create mode 100644 es/grid/col.js create mode 100644 es/grid/index.js create mode 100644 es/grid/index.scss create mode 100644 es/grid/main.scss create mode 100644 es/grid/row.js create mode 100644 es/grid/rtl.scss create mode 100644 es/grid/scss/mixin.scss create mode 100644 es/grid/scss/variable.scss create mode 100644 es/grid/style.js create mode 100644 es/icon/index.js create mode 100644 es/icon/index.scss create mode 100644 es/icon/main.scss create mode 100644 es/icon/rtl.scss create mode 100644 es/icon/style.js create mode 100644 es/index.js create mode 100644 es/input/base.js create mode 100644 es/input/group.js create mode 100644 es/input/index.js create mode 100644 es/input/index.scss create mode 100644 es/input/input.js create mode 100644 es/input/main.scss create mode 100644 es/input/rtl.scss create mode 100644 es/input/scss/mixin.scss create mode 100644 es/input/scss/variable.scss create mode 100644 es/input/style.js create mode 100644 es/input/textarea.js create mode 100644 es/loading/index.js create mode 100644 es/loading/index.scss create mode 100644 es/loading/main.scss create mode 100644 es/loading/rtl.scss create mode 100644 es/loading/scss/mixin.scss create mode 100644 es/loading/scss/variable.scss create mode 100644 es/loading/style.js create mode 100644 es/locale/en-us.js create mode 100644 es/locale/ja-jp.js create mode 100644 es/locale/zh-cn.js create mode 100644 es/locale/zh-tw.js create mode 100644 es/menu-button/index.js create mode 100644 es/menu-button/index.scss create mode 100644 es/menu-button/main.scss create mode 100644 es/menu-button/scss/mixin.scss create mode 100644 es/menu-button/scss/variable.scss create mode 100644 es/menu-button/style.js create mode 100644 es/menu/index.js create mode 100644 es/menu/index.scss create mode 100644 es/menu/main.scss create mode 100644 es/menu/rtl.scss create mode 100644 es/menu/scss/mixin.scss create mode 100644 es/menu/scss/variable.scss create mode 100644 es/menu/style.js create mode 100644 es/menu/view/checkable-item.js create mode 100644 es/menu/view/checkbox-item.js create mode 100644 es/menu/view/create.js create mode 100644 es/menu/view/divider.js create mode 100644 es/menu/view/group.js create mode 100644 es/menu/view/item.js create mode 100644 es/menu/view/menu.js create mode 100644 es/menu/view/popup-item.js create mode 100644 es/menu/view/radio-item.js create mode 100644 es/menu/view/selectable-item.js create mode 100644 es/menu/view/sub-menu.js create mode 100644 es/message/index.js create mode 100644 es/message/index.scss create mode 100644 es/message/main.scss create mode 100644 es/message/message.js create mode 100644 es/message/rtl.scss create mode 100644 es/message/scss/mixin.scss create mode 100644 es/message/scss/variable.scss create mode 100644 es/message/style.js create mode 100644 es/message/toast.js create mode 100644 es/mixin-ui-state/index.js create mode 100644 es/nav/group.js create mode 100644 es/nav/index.js create mode 100644 es/nav/index.scss create mode 100644 es/nav/item.js create mode 100644 es/nav/main.scss create mode 100644 es/nav/nav.js create mode 100644 es/nav/popup-item.js create mode 100644 es/nav/rtl.scss create mode 100644 es/nav/scss/mixin.scss create mode 100644 es/nav/scss/variable.scss create mode 100644 es/nav/style.js create mode 100644 es/nav/sub-nav.js create mode 100644 es/number-picker/index.js create mode 100644 es/number-picker/index.scss create mode 100644 es/number-picker/main.scss create mode 100644 es/number-picker/scss/mixin.scss create mode 100644 es/number-picker/scss/variable.scss create mode 100644 es/number-picker/style.js create mode 100644 es/overlay/gateway.js create mode 100644 es/overlay/index.js create mode 100644 es/overlay/index.scss create mode 100644 es/overlay/main.scss create mode 100644 es/overlay/manager.js create mode 100644 es/overlay/overlay.js create mode 100644 es/overlay/popup.js create mode 100644 es/overlay/position.js create mode 100644 es/overlay/style.js create mode 100644 es/overlay/utils/find-node.js create mode 100644 es/overlay/utils/position.js create mode 100644 es/pagination/index.js create mode 100644 es/pagination/index.scss create mode 100644 es/pagination/main.scss create mode 100644 es/pagination/pagination.js create mode 100644 es/pagination/rtl.scss create mode 100644 es/pagination/scss/mixin.scss create mode 100644 es/pagination/scss/variable.scss create mode 100644 es/pagination/style.js create mode 100644 es/paragraph/index.js create mode 100644 es/paragraph/index.scss create mode 100644 es/paragraph/main.scss create mode 100644 es/paragraph/scss/mixin.scss create mode 100644 es/paragraph/scss/variable.scss create mode 100644 es/paragraph/style.js create mode 100644 es/progress/index.js create mode 100644 es/progress/index.scss create mode 100644 es/progress/main.scss create mode 100644 es/progress/rtl.scss create mode 100644 es/progress/scss/mixin.scss create mode 100644 es/progress/scss/variable.scss create mode 100644 es/progress/style.js create mode 100644 es/progress/view/progress-circle.js create mode 100644 es/progress/view/progress-line.js create mode 100644 es/progress/view/progress.js create mode 100644 es/radio/index.js create mode 100644 es/radio/index.scss create mode 100644 es/radio/main.scss create mode 100644 es/radio/radio-group.js create mode 100644 es/radio/radio.js create mode 100644 es/radio/rtl.scss create mode 100644 es/radio/scss/variable.scss create mode 100644 es/radio/style.js create mode 100644 es/range/index.js create mode 100644 es/range/index.scss create mode 100644 es/range/main.scss create mode 100644 es/range/scss/mixin.scss create mode 100644 es/range/scss/variable.scss create mode 100644 es/range/style.js create mode 100644 es/range/utils.js create mode 100644 es/range/view/fixedSlider.js create mode 100644 es/range/view/mark.js create mode 100644 es/range/view/range.js create mode 100644 es/range/view/scale.js create mode 100644 es/range/view/selected.js create mode 100644 es/range/view/slider.js create mode 100644 es/range/view/track.js create mode 100644 es/rating/index.js create mode 100644 es/rating/index.scss create mode 100644 es/rating/main.scss create mode 100644 es/rating/rating.js create mode 100644 es/rating/rtl.scss create mode 100644 es/rating/scss/mixin.scss create mode 100644 es/rating/scss/variable.scss create mode 100644 es/rating/style.js create mode 100644 es/search/Search.js create mode 100644 es/search/index.js create mode 100644 es/search/index.scss create mode 100644 es/search/main.scss create mode 100644 es/search/rtl.scss create mode 100644 es/search/scss/mixin.scss create mode 100644 es/search/scss/variable.scss create mode 100644 es/search/style.js create mode 100644 es/select/auto-complete.js create mode 100644 es/select/base.js create mode 100644 es/select/data-store.js create mode 100644 es/select/index.js create mode 100644 es/select/index.scss create mode 100644 es/select/main.scss create mode 100644 es/select/option-group.js create mode 100644 es/select/option.js create mode 100644 es/select/scss/mixin.scss create mode 100644 es/select/scss/variable.scss create mode 100644 es/select/select.js create mode 100644 es/select/style.js create mode 100644 es/select/util.js create mode 100644 es/slider/index.js create mode 100644 es/slider/index.scss create mode 100644 es/slider/main.scss create mode 100644 es/slider/scss/mixin.scss create mode 100644 es/slider/scss/variable.scss create mode 100644 es/slider/slick/arrow.js create mode 100644 es/slider/slick/dots.js create mode 100644 es/slider/slick/inner-slider.js create mode 100644 es/slider/slick/mixins/event-handlers.js create mode 100644 es/slider/slick/mixins/helpers.js create mode 100644 es/slider/slick/mixins/trackHelper.js create mode 100644 es/slider/slick/track.js create mode 100644 es/slider/slider.js create mode 100644 es/slider/style.js create mode 100644 es/split-button/index.js create mode 100644 es/split-button/index.scss create mode 100644 es/split-button/main.scss create mode 100644 es/split-button/scss/mixin.scss create mode 100644 es/split-button/scss/variable.scss create mode 100644 es/split-button/style.js create mode 100644 es/step/index.js create mode 100644 es/step/index.scss create mode 100644 es/step/main.scss create mode 100644 es/step/rtl.scss create mode 100644 es/step/scss/arrow.scss create mode 100644 es/step/scss/basic.scss create mode 100644 es/step/scss/circle.scss create mode 100644 es/step/scss/dot.scss create mode 100644 es/step/scss/mixin.scss create mode 100644 es/step/scss/normalize.scss create mode 100644 es/step/scss/variable.scss create mode 100644 es/step/style.js create mode 100644 es/step/view/step-item.js create mode 100644 es/step/view/step.js create mode 100644 es/switch/index.js create mode 100644 es/switch/index.scss create mode 100644 es/switch/main.scss create mode 100644 es/switch/rtl.scss create mode 100644 es/switch/scss/mixin.scss create mode 100644 es/switch/scss/variable.scss create mode 100644 es/switch/style.js create mode 100644 es/tab/index.js create mode 100644 es/tab/index.scss create mode 100644 es/tab/main.scss create mode 100644 es/tab/rtl.scss create mode 100644 es/tab/scss/mixin.scss create mode 100644 es/tab/scss/placeholder.scss create mode 100644 es/tab/scss/variable.scss create mode 100644 es/tab/style.js create mode 100644 es/tab/tab.js create mode 100644 es/tab/tabs/content.js create mode 100644 es/tab/tabs/nav.js create mode 100644 es/tab/tabs/tab-item.js create mode 100644 es/tab/tabs/utils.js create mode 100644 es/table/base.js create mode 100644 es/table/base/body.js create mode 100644 es/table/base/cell.js create mode 100644 es/table/base/filter.js create mode 100644 es/table/base/header.js create mode 100644 es/table/base/resize.js create mode 100644 es/table/base/row.js create mode 100644 es/table/base/sort.js create mode 100644 es/table/base/wrapper.js create mode 100644 es/table/column-group.js create mode 100644 es/table/column.js create mode 100644 es/table/expanded.js create mode 100644 es/table/expanded/row.js create mode 100644 es/table/fixed.js create mode 100644 es/table/fixed/body.js create mode 100644 es/table/fixed/header.js create mode 100644 es/table/fixed/wrapper.js create mode 100644 es/table/index.js create mode 100644 es/table/index.scss create mode 100644 es/table/list-footer.js create mode 100644 es/table/list-header.js create mode 100644 es/table/list.js create mode 100644 es/table/list/body.js create mode 100644 es/table/list/row.js create mode 100644 es/table/lock.js create mode 100644 es/table/lock/body.js create mode 100644 es/table/lock/header.js create mode 100644 es/table/lock/row.js create mode 100644 es/table/main.scss create mode 100644 es/table/rtl.scss create mode 100644 es/table/scss/mixin.scss create mode 100644 es/table/scss/variable.scss create mode 100644 es/table/selection.js create mode 100644 es/table/selection/row.js create mode 100644 es/table/sticky.js create mode 100644 es/table/sticky/header.js create mode 100644 es/table/style.js create mode 100644 es/table/tree.js create mode 100644 es/table/tree/cell.js create mode 100644 es/table/tree/row.js create mode 100644 es/table/util.js create mode 100644 es/table/virtual.js create mode 100644 es/table/virtual/body.js create mode 100644 es/tag/closeable.js create mode 100644 es/tag/index.js create mode 100644 es/tag/index.scss create mode 100644 es/tag/main.scss create mode 100644 es/tag/rtl.scss create mode 100644 es/tag/scss/animation.scss create mode 100644 es/tag/scss/mixin.scss create mode 100644 es/tag/scss/placeholder.scss create mode 100644 es/tag/scss/variable.scss create mode 100644 es/tag/selectable.js create mode 100644 es/tag/style.js create mode 100644 es/tag/tag-group.js create mode 100644 es/tag/tag.js create mode 100644 es/time-picker/index.js create mode 100644 es/time-picker/index.scss create mode 100644 es/time-picker/main.scss create mode 100644 es/time-picker/module/time-menu.js create mode 100644 es/time-picker/panel.js create mode 100644 es/time-picker/rtl.scss create mode 100644 es/time-picker/scss/menu.scss create mode 100644 es/time-picker/scss/panel.scss create mode 100644 es/time-picker/scss/variable.scss create mode 100644 es/time-picker/style.js create mode 100644 es/time-picker/time-picker.js create mode 100644 es/time-picker/utils/index.js create mode 100644 es/timeline/index.js create mode 100644 es/timeline/index.scss create mode 100644 es/timeline/locale/index.js create mode 100644 es/timeline/main.scss create mode 100644 es/timeline/rtl.scss create mode 100644 es/timeline/scss/mixin.scss create mode 100644 es/timeline/scss/normalize.scss create mode 100644 es/timeline/scss/util.scss create mode 100644 es/timeline/scss/variable.scss create mode 100644 es/timeline/style.js create mode 100644 es/timeline/view/timeline-item.js create mode 100644 es/timeline/view/timeline.js create mode 100644 es/transfer/index.js create mode 100644 es/transfer/index.scss create mode 100644 es/transfer/main.scss create mode 100644 es/transfer/scss/variable.scss create mode 100644 es/transfer/style.js create mode 100644 es/transfer/view/transfer-item.js create mode 100644 es/transfer/view/transfer-panel.js create mode 100644 es/transfer/view/transfer.js create mode 100644 es/tree-select/index.js create mode 100644 es/tree-select/index.scss create mode 100644 es/tree-select/main.scss create mode 100644 es/tree-select/scss/variable.scss create mode 100644 es/tree-select/style.js create mode 100644 es/tree-select/tree-select.js create mode 100644 es/tree/index.js create mode 100644 es/tree/index.scss create mode 100644 es/tree/main.scss create mode 100644 es/tree/rtl.scss create mode 100644 es/tree/scss/mixin.scss create mode 100644 es/tree/scss/variable.scss create mode 100644 es/tree/style.js create mode 100644 es/tree/view/tree-node-input.js create mode 100644 es/tree/view/tree-node.js create mode 100644 es/tree/view/tree.js create mode 100644 es/tree/view/util.js create mode 100644 es/upload/base.js create mode 100644 es/upload/card.js create mode 100644 es/upload/dragger.js create mode 100644 es/upload/index.js create mode 100644 es/upload/index.scss create mode 100644 es/upload/list.js create mode 100644 es/upload/main.scss create mode 100644 es/upload/rtl.scss create mode 100644 es/upload/runtime/html5-uploader.js create mode 100644 es/upload/runtime/iframe-uploader.js create mode 100644 es/upload/runtime/index.js create mode 100644 es/upload/runtime/request.js create mode 100644 es/upload/runtime/selecter.js create mode 100644 es/upload/runtime/uploader.js create mode 100644 es/upload/scss/variable.scss create mode 100644 es/upload/style.js create mode 100644 es/upload/transform.js create mode 100644 es/upload/upload.js create mode 100644 es/upload/util.js create mode 100644 es/util/dom.js create mode 100644 es/util/env.js create mode 100644 es/util/events.js create mode 100644 es/util/focus.js create mode 100644 es/util/func.js create mode 100644 es/util/guid.js create mode 100644 es/util/htmlId.js create mode 100644 es/util/index.js create mode 100644 es/util/keycode.js create mode 100644 es/util/log.js create mode 100644 es/util/object.js create mode 100644 es/util/string.js create mode 100644 es/util/support.js create mode 100644 es/validate/index.js create mode 100644 es/validate/messages.js create mode 100644 es/validate/rules/format.js create mode 100644 es/validate/rules/index.js create mode 100644 es/validate/rules/length.js create mode 100644 es/validate/rules/pattern.js create mode 100644 es/validate/rules/required.js create mode 100644 es/validate/rules/size.js create mode 100644 es/validate/util.js create mode 100644 es/validate/validator.js create mode 100644 es/virtual-list/index.js create mode 100644 es/virtual-list/index.scss create mode 100644 es/virtual-list/main.scss create mode 100644 es/virtual-list/scss/mixin.scss create mode 100644 es/virtual-list/scss/variable.scss create mode 100644 es/virtual-list/style.js create mode 100644 es/virtual-list/virtual-list.js create mode 100644 lib/_components/@alife/next-core/lib/index-noreset.scss create mode 100644 lib/_components/@alife/next-core/lib/index.scss create mode 100644 lib/affix/api-schema.json create mode 100644 lib/affix/index.d.ts create mode 100644 lib/affix/index.js create mode 100644 lib/affix/index.scss create mode 100644 lib/affix/main.scss create mode 100644 lib/affix/style.js create mode 100644 lib/affix/util.js create mode 100644 lib/animate/animate.js create mode 100644 lib/animate/api-schema.json create mode 100644 lib/animate/child.js create mode 100644 lib/animate/expand.js create mode 100644 lib/animate/index.d.ts create mode 100644 lib/animate/index.js create mode 100644 lib/animate/index.scss create mode 100644 lib/animate/main.scss create mode 100644 lib/animate/scss/_attention-seekers/_buttonClick.scss create mode 100644 lib/animate/scss/_attention-seekers/_press.scss create mode 100644 lib/animate/scss/_attention-seekers/_pulse.scss create mode 100644 lib/animate/scss/_attention-seekers/_shake.scss create mode 100644 lib/animate/scss/_attention-seekers/_unpress.scss create mode 100644 lib/animate/scss/_attention-seekers/attention-seekers.scss create mode 100644 lib/animate/scss/_bounce-entrances/_bounceIn.scss create mode 100644 lib/animate/scss/_bounce-entrances/bounce-entrances.scss create mode 100644 lib/animate/scss/_bounce-exits/_bounceOut.scss create mode 100644 lib/animate/scss/_bounce-exits/bounce-exits.scss create mode 100644 lib/animate/scss/_expand-entrances/_expandInDown.scss create mode 100644 lib/animate/scss/_expand-entrances/_expandInUp.scss create mode 100644 lib/animate/scss/_expand-entrances/_withFade.scss create mode 100644 lib/animate/scss/_expand-exits/_expandOutDown.scss create mode 100644 lib/animate/scss/_expand-exits/_expandOutUp.scss create mode 100644 lib/animate/scss/_expand-exits/_withFade.scss create mode 100644 lib/animate/scss/_fading-entrances/_fadeIn.scss create mode 100644 lib/animate/scss/_fading-entrances/_fadeInDown.scss create mode 100644 lib/animate/scss/_fading-entrances/_fadeInDownBig.scss create mode 100644 lib/animate/scss/_fading-entrances/_fadeInLeft.scss create mode 100644 lib/animate/scss/_fading-entrances/_fadeInLeftBig.scss create mode 100644 lib/animate/scss/_fading-entrances/_fadeInRight.scss create mode 100644 lib/animate/scss/_fading-entrances/_fadeInRightBig.scss create mode 100644 lib/animate/scss/_fading-entrances/_fadeInUp.scss create mode 100644 lib/animate/scss/_fading-entrances/_fadeInUpBig.scss create mode 100644 lib/animate/scss/_fading-entrances/fading-entrances.scss create mode 100644 lib/animate/scss/_fading-exits/_fadeOut.scss create mode 100644 lib/animate/scss/_fading-exits/_fadeOutDown.scss create mode 100644 lib/animate/scss/_fading-exits/_fadeOutDownBig.scss create mode 100644 lib/animate/scss/_fading-exits/_fadeOutLeft.scss create mode 100644 lib/animate/scss/_fading-exits/_fadeOutLeftBig.scss create mode 100644 lib/animate/scss/_fading-exits/_fadeOutRight.scss create mode 100644 lib/animate/scss/_fading-exits/_fadeOutRightBig.scss create mode 100644 lib/animate/scss/_fading-exits/_fadeOutUp.scss create mode 100644 lib/animate/scss/_fading-exits/_fadeOutUpBig.scss create mode 100644 lib/animate/scss/_fading-exits/fading-exits.scss create mode 100644 lib/animate/scss/_other-entrances/_pressIn.scss create mode 100644 lib/animate/scss/_other-entrances/_pressInSmall.scss create mode 100644 lib/animate/scss/_other-entrances/_waterIn.scss create mode 100644 lib/animate/scss/_other-entrances/other-entrances.scss create mode 100644 lib/animate/scss/_other-exits/_pressOut.scss create mode 100644 lib/animate/scss/_other-exits/_pressOutSmall.scss create mode 100644 lib/animate/scss/_other-exits/_waterOut.scss create mode 100644 lib/animate/scss/_other-exits/other-exits.scss create mode 100644 lib/animate/scss/_sliding-entrances/_slideInDown.scss create mode 100644 lib/animate/scss/_sliding-entrances/_slideInLeft.scss create mode 100644 lib/animate/scss/_sliding-entrances/_slideInRight.scss create mode 100644 lib/animate/scss/_sliding-entrances/_slideInUp.scss create mode 100644 lib/animate/scss/_sliding-entrances/sliding-entrances.scss create mode 100644 lib/animate/scss/_sliding-exits/_slideOutDown.scss create mode 100644 lib/animate/scss/_sliding-exits/_slideOutLeft.scss create mode 100644 lib/animate/scss/_sliding-exits/_slideOutRight.scss create mode 100644 lib/animate/scss/_sliding-exits/_slideOutUp.scss create mode 100644 lib/animate/scss/_sliding-exits/sliding-exits.scss create mode 100644 lib/animate/scss/_zooming-entrances/_zoomIn.scss create mode 100644 lib/animate/scss/_zooming-entrances/_zoomInDown.scss create mode 100644 lib/animate/scss/_zooming-entrances/_zoomInLeft.scss create mode 100644 lib/animate/scss/_zooming-entrances/_zoomInPulse.scss create mode 100644 lib/animate/scss/_zooming-entrances/_zoomInQuick.scss create mode 100644 lib/animate/scss/_zooming-entrances/_zoomInRight.scss create mode 100644 lib/animate/scss/_zooming-entrances/_zoomInUp.scss create mode 100644 lib/animate/scss/_zooming-entrances/zooming-entrances.scss create mode 100644 lib/animate/scss/_zooming-exits/_zoomOut.scss create mode 100644 lib/animate/scss/_zooming-exits/_zoomOutDown.scss create mode 100644 lib/animate/scss/_zooming-exits/_zoomOutLeft.scss create mode 100644 lib/animate/scss/_zooming-exits/_zoomOutPulse.scss create mode 100644 lib/animate/scss/_zooming-exits/_zoomOutQuick.scss create mode 100644 lib/animate/scss/_zooming-exits/_zoomOutRight.scss create mode 100644 lib/animate/scss/_zooming-exits/_zoomOutUp.scss create mode 100644 lib/animate/scss/_zooming-exits/zooming-exits.scss create mode 100644 lib/animate/scss/mixin.scss create mode 100644 lib/animate/scss/variable.scss create mode 100644 lib/animate/style.js create mode 100644 lib/badge/api-schema.json create mode 100644 lib/badge/index.d.ts create mode 100644 lib/badge/index.js create mode 100644 lib/badge/index.scss create mode 100644 lib/badge/main.scss create mode 100644 lib/badge/rtl.scss create mode 100644 lib/badge/scss/function.scss create mode 100644 lib/badge/scss/mixin.scss create mode 100644 lib/badge/scss/placeholder.scss create mode 100644 lib/badge/scss/variable.scss create mode 100644 lib/badge/style.js create mode 100644 lib/badge/sup.js create mode 100644 lib/balloon/alignMap.js create mode 100644 lib/balloon/api-schema.json create mode 100644 lib/balloon/balloon.js create mode 100644 lib/balloon/index.d.ts create mode 100644 lib/balloon/index.js create mode 100644 lib/balloon/index.scss create mode 100644 lib/balloon/inner.js create mode 100644 lib/balloon/main.scss create mode 100644 lib/balloon/rtl.scss create mode 100644 lib/balloon/scss/mixin.scss create mode 100644 lib/balloon/scss/variable.scss create mode 100644 lib/balloon/style.js create mode 100644 lib/balloon/tooltip.js create mode 100644 lib/balloon/util.js create mode 100644 lib/breadcrumb/api-schema.json create mode 100644 lib/breadcrumb/index.d.ts create mode 100644 lib/breadcrumb/index.js create mode 100644 lib/breadcrumb/index.scss create mode 100644 lib/breadcrumb/item.js create mode 100644 lib/breadcrumb/main.scss create mode 100644 lib/breadcrumb/scss/mixin.scss create mode 100644 lib/breadcrumb/scss/variable.scss create mode 100644 lib/breadcrumb/style.js create mode 100644 lib/button/api-schema.json create mode 100644 lib/button/index.d.ts create mode 100644 lib/button/index.js create mode 100644 lib/button/index.scss create mode 100644 lib/button/main.scss create mode 100644 lib/button/rtl.scss create mode 100644 lib/button/scss/mixin.scss create mode 100644 lib/button/scss/normalize.scss create mode 100644 lib/button/scss/variable.scss create mode 100644 lib/button/style.js create mode 100644 lib/button/view/button.js create mode 100644 lib/button/view/group.js create mode 100644 lib/calendar/api-schema.json create mode 100644 lib/calendar/calendar.js create mode 100644 lib/calendar/head/card-header.js create mode 100644 lib/calendar/head/date-panel-header.js create mode 100644 lib/calendar/head/month-panel-header.js create mode 100644 lib/calendar/head/range-panel-header.js create mode 100644 lib/calendar/head/year-panel-header.js create mode 100644 lib/calendar/index.d.ts create mode 100644 lib/calendar/index.js create mode 100644 lib/calendar/index.scss create mode 100644 lib/calendar/main.scss create mode 100644 lib/calendar/range-calendar.js create mode 100644 lib/calendar/rtl.scss create mode 100644 lib/calendar/scss/animation.scss create mode 100644 lib/calendar/scss/header.scss create mode 100644 lib/calendar/scss/mixin.scss create mode 100644 lib/calendar/scss/normalize.scss create mode 100644 lib/calendar/scss/table.scss create mode 100644 lib/calendar/scss/variable.scss create mode 100644 lib/calendar/style.js create mode 100644 lib/calendar/table/date-table-head.js create mode 100644 lib/calendar/table/date-table.js create mode 100644 lib/calendar/table/month-table.js create mode 100644 lib/calendar/table/year-table.js create mode 100644 lib/calendar/utils/index.js create mode 100644 lib/card/api-schema.json create mode 100644 lib/card/card.js create mode 100644 lib/card/index.d.ts create mode 100644 lib/card/index.js create mode 100644 lib/card/index.scss create mode 100644 lib/card/main.scss create mode 100644 lib/card/rtl.scss create mode 100644 lib/card/scss/mixin.scss create mode 100644 lib/card/scss/normalize.scss create mode 100644 lib/card/scss/variable.scss create mode 100644 lib/card/style.js create mode 100644 lib/cascader-select/api-schema.json create mode 100644 lib/cascader-select/cascader-select.js create mode 100644 lib/cascader-select/index.d.ts create mode 100644 lib/cascader-select/index.js create mode 100644 lib/cascader-select/index.scss create mode 100644 lib/cascader-select/main.scss create mode 100644 lib/cascader-select/scss/variable.scss create mode 100644 lib/cascader-select/style.js create mode 100644 lib/cascader/api-schema.json create mode 100644 lib/cascader/cascader.js create mode 100644 lib/cascader/index.d.ts create mode 100644 lib/cascader/index.js create mode 100644 lib/cascader/index.scss create mode 100644 lib/cascader/item.js create mode 100644 lib/cascader/main.scss create mode 100644 lib/cascader/menu.js create mode 100644 lib/cascader/rtl.scss create mode 100644 lib/cascader/scss/variable.scss create mode 100644 lib/cascader/style.js create mode 100644 lib/checkbox/api-schema.json create mode 100644 lib/checkbox/checkbox-group.js create mode 100644 lib/checkbox/checkbox.js create mode 100644 lib/checkbox/index.d.ts create mode 100644 lib/checkbox/index.js create mode 100644 lib/checkbox/index.scss create mode 100644 lib/checkbox/main.scss create mode 100644 lib/checkbox/rtl.scss create mode 100644 lib/checkbox/scss/variable.scss create mode 100644 lib/checkbox/style.js create mode 100644 lib/collapse/api-schema.json create mode 100644 lib/collapse/collapse.js create mode 100644 lib/collapse/index.d.ts create mode 100644 lib/collapse/index.js create mode 100644 lib/collapse/index.scss create mode 100644 lib/collapse/main.scss create mode 100644 lib/collapse/panel.js create mode 100644 lib/collapse/rtl.scss create mode 100644 lib/collapse/scss/mixin.scss create mode 100644 lib/collapse/scss/variable.scss create mode 100644 lib/collapse/style.js create mode 100644 lib/config-provider/api-schema.json create mode 100644 lib/config-provider/cache.js create mode 100644 lib/config-provider/config.js create mode 100644 lib/config-provider/consumer.js create mode 100644 lib/config-provider/error-boundary.js create mode 100644 lib/config-provider/get-context-props.js create mode 100644 lib/config-provider/index.d.ts create mode 100644 lib/config-provider/index.js create mode 100644 lib/config-provider/index.scss create mode 100644 lib/config-provider/main.scss create mode 100644 lib/config-provider/style.js create mode 100644 lib/core/base/_accessibility.scss create mode 100644 lib/core/base/_normalize.scss create mode 100644 lib/core/base/_reset.scss create mode 100644 lib/core/base/_typography.scss create mode 100644 lib/core/form-element.scss create mode 100644 lib/core/index-noreset.scss create mode 100644 lib/core/index.scss create mode 100644 lib/core/mask.scss create mode 100644 lib/core/popup.scss create mode 100644 lib/core/reset.scss create mode 100644 lib/core/style/_color.scss create mode 100644 lib/core/style/_corner.scss create mode 100644 lib/core/style/_font.scss create mode 100644 lib/core/style/_global.scss create mode 100644 lib/core/style/_icon.scss create mode 100644 lib/core/style/_line.scss create mode 100644 lib/core/style/_shadow.scss create mode 100644 lib/core/style/_size.scss create mode 100644 lib/core/util/_function.scss create mode 100644 lib/core/util/_mixin.scss create mode 100644 lib/core/utility/_form-element.scss create mode 100644 lib/core/utility/_mask.scss create mode 100644 lib/core/utility/_popup.scss create mode 100644 lib/date-picker/api-schema.json create mode 100644 lib/date-picker/date-picker.js create mode 100644 lib/date-picker/index.d.ts create mode 100644 lib/date-picker/index.js create mode 100644 lib/date-picker/index.scss create mode 100644 lib/date-picker/main.scss create mode 100644 lib/date-picker/module/panel-footer.js create mode 100644 lib/date-picker/month-picker.js create mode 100644 lib/date-picker/range-picker.js create mode 100644 lib/date-picker/rtl.scss create mode 100644 lib/date-picker/scss/date-picker.scss create mode 100644 lib/date-picker/scss/mixin.scss create mode 100644 lib/date-picker/scss/range-picker.scss create mode 100644 lib/date-picker/scss/variable.scss create mode 100644 lib/date-picker/style.js create mode 100644 lib/date-picker/util/index.js create mode 100644 lib/date-picker/year-picker.js create mode 100644 lib/dialog/api-schema.json create mode 100644 lib/dialog/dialog.js create mode 100644 lib/dialog/index.d.ts create mode 100644 lib/dialog/index.js create mode 100644 lib/dialog/index.scss create mode 100644 lib/dialog/inner.js create mode 100644 lib/dialog/main.scss create mode 100644 lib/dialog/rtl.scss create mode 100644 lib/dialog/scss/variable.scss create mode 100644 lib/dialog/show.js create mode 100644 lib/dialog/style.js create mode 100644 lib/dropdown/api-schema.json create mode 100644 lib/dropdown/dropdown.js create mode 100644 lib/dropdown/index.d.ts create mode 100644 lib/dropdown/index.js create mode 100644 lib/dropdown/index.scss create mode 100644 lib/dropdown/main.scss create mode 100644 lib/dropdown/style.js create mode 100644 lib/field/index.js create mode 100644 lib/field/index.scss create mode 100644 lib/field/main.scss create mode 100644 lib/field/style.js create mode 100644 lib/field/utils.js create mode 100644 lib/form/api-schema.json create mode 100644 lib/form/enhance.js create mode 100644 lib/form/error.js create mode 100644 lib/form/form.js create mode 100644 lib/form/index.d.ts create mode 100644 lib/form/index.js create mode 100644 lib/form/index.scss create mode 100644 lib/form/item.js create mode 100644 lib/form/main.scss create mode 100644 lib/form/reset.js create mode 100644 lib/form/scss/mixin.scss create mode 100644 lib/form/scss/variable.scss create mode 100644 lib/form/style.js create mode 100644 lib/form/submit.js create mode 100644 lib/grid/api-schema.json create mode 100644 lib/grid/col.js create mode 100644 lib/grid/index.d.ts create mode 100644 lib/grid/index.js create mode 100644 lib/grid/index.scss create mode 100644 lib/grid/main.scss create mode 100644 lib/grid/row.js create mode 100644 lib/grid/rtl.scss create mode 100644 lib/grid/scss/mixin.scss create mode 100644 lib/grid/scss/variable.scss create mode 100644 lib/grid/style.js create mode 100644 lib/icon/api-schema.json create mode 100644 lib/icon/index.d.ts create mode 100644 lib/icon/index.js create mode 100644 lib/icon/index.scss create mode 100644 lib/icon/main.scss create mode 100644 lib/icon/rtl.scss create mode 100644 lib/icon/style.js create mode 100644 lib/index.d.ts create mode 100644 lib/index.js create mode 100644 lib/input/api-schema.json create mode 100644 lib/input/base.js create mode 100644 lib/input/group.js create mode 100644 lib/input/index.d.ts create mode 100644 lib/input/index.js create mode 100644 lib/input/index.scss create mode 100644 lib/input/input.js create mode 100644 lib/input/main.scss create mode 100644 lib/input/rtl.scss create mode 100644 lib/input/scss/mixin.scss create mode 100644 lib/input/scss/variable.scss create mode 100644 lib/input/style.js create mode 100644 lib/input/textarea.js create mode 100644 lib/loading/api-schema.json create mode 100644 lib/loading/index.d.ts create mode 100644 lib/loading/index.js create mode 100644 lib/loading/index.scss create mode 100644 lib/loading/main.scss create mode 100644 lib/loading/rtl.scss create mode 100644 lib/loading/scss/mixin.scss create mode 100644 lib/loading/scss/variable.scss create mode 100644 lib/loading/style.js create mode 100644 lib/locale/en-us.js create mode 100644 lib/locale/ja-jp.js create mode 100644 lib/locale/zh-cn.js create mode 100644 lib/locale/zh-tw.js create mode 100644 lib/menu-button/api-schema.json create mode 100644 lib/menu-button/index.d.ts create mode 100644 lib/menu-button/index.js create mode 100644 lib/menu-button/index.scss create mode 100644 lib/menu-button/main.scss create mode 100644 lib/menu-button/scss/mixin.scss create mode 100644 lib/menu-button/scss/variable.scss create mode 100644 lib/menu-button/style.js create mode 100644 lib/menu/api-schema.json create mode 100644 lib/menu/index.d.ts create mode 100644 lib/menu/index.js create mode 100644 lib/menu/index.scss create mode 100644 lib/menu/main.scss create mode 100644 lib/menu/rtl.scss create mode 100644 lib/menu/scss/mixin.scss create mode 100644 lib/menu/scss/variable.scss create mode 100644 lib/menu/style.js create mode 100644 lib/menu/view/checkable-item.js create mode 100644 lib/menu/view/checkbox-item.js create mode 100644 lib/menu/view/create.js create mode 100644 lib/menu/view/divider.js create mode 100644 lib/menu/view/group.js create mode 100644 lib/menu/view/item.js create mode 100644 lib/menu/view/menu.js create mode 100644 lib/menu/view/popup-item.js create mode 100644 lib/menu/view/radio-item.js create mode 100644 lib/menu/view/selectable-item.js create mode 100644 lib/menu/view/sub-menu.js create mode 100644 lib/message/api-schema.json create mode 100644 lib/message/index.d.ts create mode 100644 lib/message/index.js create mode 100644 lib/message/index.scss create mode 100644 lib/message/main.scss create mode 100644 lib/message/message.js create mode 100644 lib/message/rtl.scss create mode 100644 lib/message/scss/mixin.scss create mode 100644 lib/message/scss/variable.scss create mode 100644 lib/message/style.js create mode 100644 lib/message/toast.js create mode 100644 lib/mixin-ui-state/index.js create mode 100644 lib/nav/api-schema.json create mode 100644 lib/nav/group.js create mode 100644 lib/nav/index.d.ts create mode 100644 lib/nav/index.js create mode 100644 lib/nav/index.scss create mode 100644 lib/nav/item.js create mode 100644 lib/nav/main.scss create mode 100644 lib/nav/nav.js create mode 100644 lib/nav/popup-item.js create mode 100644 lib/nav/rtl.scss create mode 100644 lib/nav/scss/mixin.scss create mode 100644 lib/nav/scss/variable.scss create mode 100644 lib/nav/style.js create mode 100644 lib/nav/sub-nav.js create mode 100644 lib/number-picker/api-schema.json create mode 100644 lib/number-picker/index.d.ts create mode 100644 lib/number-picker/index.js create mode 100644 lib/number-picker/index.scss create mode 100644 lib/number-picker/main.scss create mode 100644 lib/number-picker/scss/mixin.scss create mode 100644 lib/number-picker/scss/variable.scss create mode 100644 lib/number-picker/style.js create mode 100644 lib/overlay/api-schema.json create mode 100644 lib/overlay/gateway.js create mode 100644 lib/overlay/index.d.ts create mode 100644 lib/overlay/index.js create mode 100644 lib/overlay/index.scss create mode 100644 lib/overlay/main.scss create mode 100644 lib/overlay/manager.js create mode 100644 lib/overlay/overlay.js create mode 100644 lib/overlay/popup.js create mode 100644 lib/overlay/position.js create mode 100644 lib/overlay/style.js create mode 100644 lib/overlay/utils/find-node.js create mode 100644 lib/overlay/utils/position.js create mode 100644 lib/pagination/api-schema.json create mode 100644 lib/pagination/index.d.ts create mode 100644 lib/pagination/index.js create mode 100644 lib/pagination/index.scss create mode 100644 lib/pagination/main.scss create mode 100644 lib/pagination/pagination.js create mode 100644 lib/pagination/rtl.scss create mode 100644 lib/pagination/scss/mixin.scss create mode 100644 lib/pagination/scss/variable.scss create mode 100644 lib/pagination/style.js create mode 100644 lib/paragraph/api-schema.json create mode 100644 lib/paragraph/index.d.ts create mode 100644 lib/paragraph/index.js create mode 100644 lib/paragraph/index.scss create mode 100644 lib/paragraph/main.scss create mode 100644 lib/paragraph/scss/mixin.scss create mode 100644 lib/paragraph/scss/variable.scss create mode 100644 lib/paragraph/style.js create mode 100644 lib/progress/api-schema.json create mode 100644 lib/progress/index.d.ts create mode 100644 lib/progress/index.js create mode 100644 lib/progress/index.scss create mode 100644 lib/progress/main.scss create mode 100644 lib/progress/rtl.scss create mode 100644 lib/progress/scss/mixin.scss create mode 100644 lib/progress/scss/variable.scss create mode 100644 lib/progress/style.js create mode 100644 lib/progress/view/progress-circle.js create mode 100644 lib/progress/view/progress-line.js create mode 100644 lib/progress/view/progress.js create mode 100644 lib/radio/api-schema.json create mode 100644 lib/radio/index.d.ts create mode 100644 lib/radio/index.js create mode 100644 lib/radio/index.scss create mode 100644 lib/radio/main.scss create mode 100644 lib/radio/radio-group.js create mode 100644 lib/radio/radio.js create mode 100644 lib/radio/rtl.scss create mode 100644 lib/radio/scss/variable.scss create mode 100644 lib/radio/style.js create mode 100644 lib/range/api-schema.json create mode 100644 lib/range/index.d.ts create mode 100644 lib/range/index.js create mode 100644 lib/range/index.scss create mode 100644 lib/range/main.scss create mode 100644 lib/range/scss/mixin.scss create mode 100644 lib/range/scss/variable.scss create mode 100644 lib/range/style.js create mode 100644 lib/range/utils.js create mode 100644 lib/range/view/fixedSlider.js create mode 100644 lib/range/view/mark.js create mode 100644 lib/range/view/range.js create mode 100644 lib/range/view/scale.js create mode 100644 lib/range/view/selected.js create mode 100644 lib/range/view/slider.js create mode 100644 lib/range/view/track.js create mode 100644 lib/rating/api-schema.json create mode 100644 lib/rating/index.d.ts create mode 100644 lib/rating/index.js create mode 100644 lib/rating/index.scss create mode 100644 lib/rating/main.scss create mode 100644 lib/rating/rating.js create mode 100644 lib/rating/rtl.scss create mode 100644 lib/rating/scss/mixin.scss create mode 100644 lib/rating/scss/variable.scss create mode 100644 lib/rating/style.js create mode 100644 lib/search/Search.js create mode 100644 lib/search/api-schema.json create mode 100644 lib/search/index.d.ts create mode 100644 lib/search/index.js create mode 100644 lib/search/index.scss create mode 100644 lib/search/main.scss create mode 100644 lib/search/rtl.scss create mode 100644 lib/search/scss/mixin.scss create mode 100644 lib/search/scss/variable.scss create mode 100644 lib/search/style.js create mode 100644 lib/select/api-schema.json create mode 100644 lib/select/auto-complete.js create mode 100644 lib/select/base.js create mode 100644 lib/select/data-store.js create mode 100644 lib/select/index.d.ts create mode 100644 lib/select/index.js create mode 100644 lib/select/index.scss create mode 100644 lib/select/main.scss create mode 100644 lib/select/option-group.js create mode 100644 lib/select/option.js create mode 100644 lib/select/scss/mixin.scss create mode 100644 lib/select/scss/variable.scss create mode 100644 lib/select/select.js create mode 100644 lib/select/style.js create mode 100644 lib/select/util.js create mode 100644 lib/slider/api-schema.json create mode 100644 lib/slider/index.d.ts create mode 100644 lib/slider/index.js create mode 100644 lib/slider/index.scss create mode 100644 lib/slider/main.scss create mode 100644 lib/slider/scss/mixin.scss create mode 100644 lib/slider/scss/variable.scss create mode 100644 lib/slider/slick/arrow.js create mode 100644 lib/slider/slick/dots.js create mode 100644 lib/slider/slick/inner-slider.js create mode 100644 lib/slider/slick/mixins/event-handlers.js create mode 100644 lib/slider/slick/mixins/helpers.js create mode 100644 lib/slider/slick/mixins/trackHelper.js create mode 100644 lib/slider/slick/track.js create mode 100644 lib/slider/slider.js create mode 100644 lib/slider/style.js create mode 100644 lib/split-button/api-schema.json create mode 100644 lib/split-button/index.d.ts create mode 100644 lib/split-button/index.js create mode 100644 lib/split-button/index.scss create mode 100644 lib/split-button/main.scss create mode 100644 lib/split-button/scss/mixin.scss create mode 100644 lib/split-button/scss/variable.scss create mode 100644 lib/split-button/style.js create mode 100644 lib/step/api-schema.json create mode 100644 lib/step/index.d.ts create mode 100644 lib/step/index.js create mode 100644 lib/step/index.scss create mode 100644 lib/step/main.scss create mode 100644 lib/step/rtl.scss create mode 100644 lib/step/scss/arrow.scss create mode 100644 lib/step/scss/basic.scss create mode 100644 lib/step/scss/circle.scss create mode 100644 lib/step/scss/dot.scss create mode 100644 lib/step/scss/mixin.scss create mode 100644 lib/step/scss/normalize.scss create mode 100644 lib/step/scss/variable.scss create mode 100644 lib/step/style.js create mode 100644 lib/step/view/step-item.js create mode 100644 lib/step/view/step.js create mode 100644 lib/switch/api-schema.json create mode 100644 lib/switch/index.d.ts create mode 100644 lib/switch/index.js create mode 100644 lib/switch/index.scss create mode 100644 lib/switch/main.scss create mode 100644 lib/switch/rtl.scss create mode 100644 lib/switch/scss/mixin.scss create mode 100644 lib/switch/scss/variable.scss create mode 100644 lib/switch/style.js create mode 100644 lib/tab/api-schema.json create mode 100644 lib/tab/index.d.ts create mode 100644 lib/tab/index.js create mode 100644 lib/tab/index.scss create mode 100644 lib/tab/main.scss create mode 100644 lib/tab/rtl.scss create mode 100644 lib/tab/scss/mixin.scss create mode 100644 lib/tab/scss/placeholder.scss create mode 100644 lib/tab/scss/variable.scss create mode 100644 lib/tab/style.js create mode 100644 lib/tab/tab.js create mode 100644 lib/tab/tabs/content.js create mode 100644 lib/tab/tabs/nav.js create mode 100644 lib/tab/tabs/tab-item.js create mode 100644 lib/tab/tabs/utils.js create mode 100644 lib/table/api-schema.json create mode 100644 lib/table/base.js create mode 100644 lib/table/base/body.js create mode 100644 lib/table/base/cell.js create mode 100644 lib/table/base/filter.js create mode 100644 lib/table/base/header.js create mode 100644 lib/table/base/resize.js create mode 100644 lib/table/base/row.js create mode 100644 lib/table/base/sort.js create mode 100644 lib/table/base/wrapper.js create mode 100644 lib/table/column-group.js create mode 100644 lib/table/column.js create mode 100644 lib/table/expanded.js create mode 100644 lib/table/expanded/row.js create mode 100644 lib/table/fixed.js create mode 100644 lib/table/fixed/body.js create mode 100644 lib/table/fixed/header.js create mode 100644 lib/table/fixed/wrapper.js create mode 100644 lib/table/index.d.ts create mode 100644 lib/table/index.js create mode 100644 lib/table/index.scss create mode 100644 lib/table/list-footer.js create mode 100644 lib/table/list-header.js create mode 100644 lib/table/list.js create mode 100644 lib/table/list/body.js create mode 100644 lib/table/list/row.js create mode 100644 lib/table/lock.js create mode 100644 lib/table/lock/body.js create mode 100644 lib/table/lock/header.js create mode 100644 lib/table/lock/row.js create mode 100644 lib/table/main.scss create mode 100644 lib/table/rtl.scss create mode 100644 lib/table/scss/mixin.scss create mode 100644 lib/table/scss/variable.scss create mode 100644 lib/table/selection.js create mode 100644 lib/table/selection/row.js create mode 100644 lib/table/sticky.js create mode 100644 lib/table/sticky/header.js create mode 100644 lib/table/style.js create mode 100644 lib/table/tree.js create mode 100644 lib/table/tree/cell.js create mode 100644 lib/table/tree/row.js create mode 100644 lib/table/util.js create mode 100644 lib/table/virtual.js create mode 100644 lib/table/virtual/body.js create mode 100644 lib/tag/api-schema.json create mode 100644 lib/tag/closeable.js create mode 100644 lib/tag/index.d.ts create mode 100644 lib/tag/index.js create mode 100644 lib/tag/index.scss create mode 100644 lib/tag/main.scss create mode 100644 lib/tag/rtl.scss create mode 100644 lib/tag/scss/animation.scss create mode 100644 lib/tag/scss/mixin.scss create mode 100644 lib/tag/scss/placeholder.scss create mode 100644 lib/tag/scss/variable.scss create mode 100644 lib/tag/selectable.js create mode 100644 lib/tag/style.js create mode 100644 lib/tag/tag-group.js create mode 100644 lib/tag/tag.js create mode 100644 lib/time-picker/api-schema.json create mode 100644 lib/time-picker/index.d.ts create mode 100644 lib/time-picker/index.js create mode 100644 lib/time-picker/index.scss create mode 100644 lib/time-picker/main.scss create mode 100644 lib/time-picker/module/time-menu.js create mode 100644 lib/time-picker/panel.js create mode 100644 lib/time-picker/rtl.scss create mode 100644 lib/time-picker/scss/menu.scss create mode 100644 lib/time-picker/scss/panel.scss create mode 100644 lib/time-picker/scss/variable.scss create mode 100644 lib/time-picker/style.js create mode 100644 lib/time-picker/time-picker.js create mode 100644 lib/time-picker/utils/index.js create mode 100644 lib/timeline/api-schema.json create mode 100644 lib/timeline/index.d.ts create mode 100644 lib/timeline/index.js create mode 100644 lib/timeline/index.scss create mode 100644 lib/timeline/locale/index.js create mode 100644 lib/timeline/main.scss create mode 100644 lib/timeline/rtl.scss create mode 100644 lib/timeline/scss/mixin.scss create mode 100644 lib/timeline/scss/normalize.scss create mode 100644 lib/timeline/scss/util.scss create mode 100644 lib/timeline/scss/variable.scss create mode 100644 lib/timeline/style.js create mode 100644 lib/timeline/view/timeline-item.js create mode 100644 lib/timeline/view/timeline.js create mode 100644 lib/transfer/api-schema.json create mode 100644 lib/transfer/index.d.ts create mode 100644 lib/transfer/index.js create mode 100644 lib/transfer/index.scss create mode 100644 lib/transfer/main.scss create mode 100644 lib/transfer/scss/variable.scss create mode 100644 lib/transfer/style.js create mode 100644 lib/transfer/view/transfer-item.js create mode 100644 lib/transfer/view/transfer-panel.js create mode 100644 lib/transfer/view/transfer.js create mode 100644 lib/tree-select/api-schema.json create mode 100644 lib/tree-select/index.d.ts create mode 100644 lib/tree-select/index.js create mode 100644 lib/tree-select/index.scss create mode 100644 lib/tree-select/main.scss create mode 100644 lib/tree-select/scss/variable.scss create mode 100644 lib/tree-select/style.js create mode 100644 lib/tree-select/tree-select.js create mode 100644 lib/tree/api-schema.json create mode 100644 lib/tree/index.d.ts create mode 100644 lib/tree/index.js create mode 100644 lib/tree/index.scss create mode 100644 lib/tree/main.scss create mode 100644 lib/tree/rtl.scss create mode 100644 lib/tree/scss/mixin.scss create mode 100644 lib/tree/scss/variable.scss create mode 100644 lib/tree/style.js create mode 100644 lib/tree/view/tree-node-input.js create mode 100644 lib/tree/view/tree-node.js create mode 100644 lib/tree/view/tree.js create mode 100644 lib/tree/view/util.js create mode 100644 lib/upload/api-schema.json create mode 100644 lib/upload/base.js create mode 100644 lib/upload/card.js create mode 100644 lib/upload/dragger.js create mode 100644 lib/upload/index.d.ts create mode 100644 lib/upload/index.js create mode 100644 lib/upload/index.scss create mode 100644 lib/upload/list.js create mode 100644 lib/upload/main.scss create mode 100644 lib/upload/rtl.scss create mode 100644 lib/upload/runtime/html5-uploader.js create mode 100644 lib/upload/runtime/iframe-uploader.js create mode 100644 lib/upload/runtime/index.js create mode 100644 lib/upload/runtime/request.js create mode 100644 lib/upload/runtime/selecter.js create mode 100644 lib/upload/runtime/uploader.js create mode 100644 lib/upload/scss/variable.scss create mode 100644 lib/upload/style.js create mode 100644 lib/upload/transform.js create mode 100644 lib/upload/upload.js create mode 100644 lib/upload/util.js create mode 100644 lib/util/dom.js create mode 100644 lib/util/env.js create mode 100644 lib/util/events.js create mode 100644 lib/util/focus.js create mode 100644 lib/util/func.js create mode 100644 lib/util/guid.js create mode 100644 lib/util/htmlId.js create mode 100644 lib/util/index.js create mode 100644 lib/util/keycode.js create mode 100644 lib/util/log.js create mode 100644 lib/util/object.js create mode 100644 lib/util/string.js create mode 100644 lib/util/support.js create mode 100644 lib/validate/index.js create mode 100644 lib/validate/messages.js create mode 100644 lib/validate/rules/format.js create mode 100644 lib/validate/rules/index.js create mode 100644 lib/validate/rules/length.js create mode 100644 lib/validate/rules/pattern.js create mode 100644 lib/validate/rules/required.js create mode 100644 lib/validate/rules/size.js create mode 100644 lib/validate/util.js create mode 100644 lib/validate/validator.js create mode 100644 lib/virtual-list/api-schema.json create mode 100644 lib/virtual-list/index.d.ts create mode 100644 lib/virtual-list/index.js create mode 100644 lib/virtual-list/index.scss create mode 100644 lib/virtual-list/main.scss create mode 100644 lib/virtual-list/scss/mixin.scss create mode 100644 lib/virtual-list/scss/variable.scss create mode 100644 lib/virtual-list/style.js create mode 100644 lib/virtual-list/virtual-list.js diff --git a/.gitignore b/.gitignore index 035cf012ab..6077544a4f 100644 --- a/.gitignore +++ b/.gitignore @@ -4,8 +4,7 @@ logs npm-debug.log* yarn-debug.log* yarn-error.log* -package-lock.json -yarn.lock + # Runtime data pids *.pid @@ -60,22 +59,12 @@ typings/ # next.js build output .next -next/ -# special demo file for locally reappear issue -docs/**/demo/issues.md precss.css .sass-cache/ -scripts/server-remote -__html/ -dist/ -es/ -lib/ test/coverage/ test/**/coverage/ -compiled_docs/ -demos/ platform-docs/ coverage/ docs-lang/ diff --git a/compiled_docs/affix/demo/absolute-position.en-us.md b/compiled_docs/affix/demo/absolute-position.en-us.md new file mode 100644 index 0000000000..a764ff12a1 --- /dev/null +++ b/compiled_docs/affix/demo/absolute-position.en-us.md @@ -0,0 +1 @@ +{"title":"Container","meta":{"title":"Container","description":"\n

Change the default container by passing a function to container;\nenable useAbsolute to use absolute position to implement affix component;

\n","order":"3"},"codes":{"jsx":"import { Affix, Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n _containerRefHandler(ref) {\n this.container = ref;\n }\n\n render() {\n return (\n
\n
\n this.container} offsetTop={0} useAbsolute>\n \n \n
\n
\n );\n }\n}\n\n\n\nReactDOM.render(, mountNode);\n","css":".custom-affix-container {\n height: 150px;\n overflow-y: scroll;\n width: 50px;\n background: url(https://img.alicdn.com/tfs/TB1AbJXSpXXXXXJXpXXXXXXXXXX-32-32.jpg) repeat 50% 50%;\n}\n\n.custom-affix-container .affix-wrapper {\n padding-top: 100px;\n height: 500px;\n}\n"},"body":"\n````jsx\nimport { Affix, Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n _containerRefHandler(ref) {\n this.container = ref;\n }\n\n render() {\n return (\n
\n
\n this.container} offsetTop={0} useAbsolute>\n \n \n
\n
\n );\n }\n}\n\n\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.custom-affix-container {\n height: 150px;\n overflow-y: scroll;\n width: 50px;\n background: url(https://img.alicdn.com/tfs/TB1AbJXSpXXXXXJXpXXXXXXXXXX-32-32.jpg) repeat 50% 50%;\n}\n\n.custom-affix-container .affix-wrapper {\n padding-top: 100px;\n height: 500px;\n}\n````","html":"
import { Affix, Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n    _containerRefHandler(ref) {\n        this.container = ref;\n    }\n\n    render() {\n        return (\n            <div className=\"custom-affix-container\" ref={this._containerRefHandler.bind(this)}>\n                <div className=\"affix-wrapper\">\n                    <Affix container={() => this.container} offsetTop={0} useAbsolute>\n                        <Button type=\"secondary\">Affixed Button</Button>\n                    </Affix>\n                </div>\n            </div>\n        );\n    }\n}\n\n\n\nReactDOM.render(<Demo />, mountNode);
.custom-affix-container {\n    height: 150px;\n    overflow-y: scroll;\n    width: 50px;\n    background: url(https://img.alicdn.com/tfs/TB1AbJXSpXXXXXJXpXXXXXXXXXX-32-32.jpg) repeat 50% 50%;\n}\n\n.custom-affix-container .affix-wrapper {\n    padding-top: 100px;\n    height: 500px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/affix/demo/absolute-position.md b/compiled_docs/affix/demo/absolute-position.md new file mode 100644 index 0000000000..2ad649206b --- /dev/null +++ b/compiled_docs/affix/demo/absolute-position.md @@ -0,0 +1 @@ +{"title":"启用绝对布局","meta":{"title":"启用绝对布局","description":"\n

可以通过 container 属性设置 Affix 组件需要监听其滚动事件的元素，该属性接收一个函数作为参数，默认为 () => window；\n设置 useAbsolute 为 true，通过 absolute 布局实现组件固定。

\n","order":"3"},"codes":{"jsx":"import { Affix, Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n _containerRefHandler(ref) {\n this.container = ref;\n }\n\n render() {\n return (\n
\n
\n this.container} offsetTop={0} useAbsolute>\n \n \n
\n
\n );\n }\n}\n\n\n\nReactDOM.render(, mountNode);\n","css":".custom-affix-container {\n height: 150px;\n overflow-y: scroll;\n width: 50px;\n background: url(https://img.alicdn.com/tfs/TB1AbJXSpXXXXXJXpXXXXXXXXXX-32-32.jpg) repeat 50% 50%;\n}\n\n.custom-affix-container .affix-wrapper {\n padding-top: 100px;\n height: 500px;\n}\n"},"body":"\n\n````jsx\nimport { Affix, Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n _containerRefHandler(ref) {\n this.container = ref;\n }\n\n render() {\n return (\n
\n
\n this.container} offsetTop={0} useAbsolute>\n \n \n
\n
\n );\n }\n}\n\n\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.custom-affix-container {\n height: 150px;\n overflow-y: scroll;\n width: 50px;\n background: url(https://img.alicdn.com/tfs/TB1AbJXSpXXXXXJXpXXXXXXXXXX-32-32.jpg) repeat 50% 50%;\n}\n\n.custom-affix-container .affix-wrapper {\n padding-top: 100px;\n height: 500px;\n}\n````","html":"
import { Affix, Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n    _containerRefHandler(ref) {\n        this.container = ref;\n    }\n\n    render() {\n        return (\n            <div className=\"custom-affix-container\" ref={this._containerRefHandler.bind(this)}>\n                <div className=\"affix-wrapper\">\n                    <Affix container={() => this.container} offsetTop={0} useAbsolute>\n                        <Button type=\"secondary\">Affixed Button</Button>\n                    </Affix>\n                </div>\n            </div>\n        );\n    }\n}\n\n\n\nReactDOM.render(<Demo />, mountNode);
.custom-affix-container {\n    height: 150px;\n    overflow-y: scroll;\n    width: 50px;\n    background: url(https://img.alicdn.com/tfs/TB1AbJXSpXXXXXJXpXXXXXXXXXX-32-32.jpg) repeat 50% 50%;\n}\n\n.custom-affix-container .affix-wrapper {\n    padding-top: 100px;\n    height: 500px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/affix/demo/basic.en-us.md b/compiled_docs/affix/demo/basic.en-us.md new file mode 100644 index 0000000000..cd0ffae4a2 --- /dev/null +++ b/compiled_docs/affix/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

The simple usage is to wrap your components direcly with Affix component.

\n","order":"0"},"codes":{"jsx":"import { Affix, Button } from '@alifd/next';\n\nReactDOM.render(
\n \n \n \n
, mountNode);\n","css":".custom-affix-wrapper {\n padding: 40px 0;\n}\n"},"body":"\n````jsx\nimport { Affix, Button } from '@alifd/next';\n\nReactDOM.render(
\n \n \n \n
, mountNode);\n````\n\n````css\n.custom-affix-wrapper {\n padding: 40px 0;\n}\n````","html":"
import { Affix, Button } from '@alifd/next';\n\nReactDOM.render(<div className=\"custom-affix-wrapper\">\n    <Affix>\n        <Button type=\"secondary\">Affixed Button</Button>\n    </Affix>\n</div>, mountNode);
.custom-affix-wrapper {\n    padding: 40px 0;\n}
"} \ No newline at end of file diff --git a/compiled_docs/affix/demo/basic.md b/compiled_docs/affix/demo/basic.md new file mode 100644 index 0000000000..3ad5755bee --- /dev/null +++ b/compiled_docs/affix/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

默认情况下，Affix 的默认目标容器元素是整个 window，并且 offsetTop = 0，\n也就意味着当页面往下滚动时，当 Affix 元素接触到浏览器边框时，此时会将 Affix 钉住。

\n","order":"0"},"codes":{"jsx":"import { Affix, Button } from '@alifd/next';\n\nReactDOM.render(
\n \n \n \n
, mountNode);\n","css":".custom-affix-wrapper {\n padding: 40px 0;\n}\n"},"body":"\n\n````jsx\nimport { Affix, Button } from '@alifd/next';\n\nReactDOM.render(
\n \n \n \n
, mountNode);\n````\n\n````css\n.custom-affix-wrapper {\n padding: 40px 0;\n}\n````","html":"
import { Affix, Button } from '@alifd/next';\n\nReactDOM.render(<div className=\"custom-affix-wrapper\">\n    <Affix>\n        <Button type=\"secondary\">Affixed Button</Button>\n    </Affix>\n</div>, mountNode);
.custom-affix-wrapper {\n    padding: 40px 0;\n}
"} \ No newline at end of file diff --git a/compiled_docs/affix/demo/custom-container.en-us.md b/compiled_docs/affix/demo/custom-container.en-us.md new file mode 100644 index 0000000000..811b942104 --- /dev/null +++ b/compiled_docs/affix/demo/custom-container.en-us.md @@ -0,0 +1 @@ +{"title":"Container","meta":{"title":"Container","description":"\n

Change the default container by passing a function to container.

\n","order":"2"},"codes":{"jsx":"import { Affix, Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n _containerRefHandler(ref) {\n this.container = ref;\n }\n\n render() {\n return (\n
\n
\n this.container} offsetTop={0}>\n \n \n
\n
\n );\n }\n}\n\n\n\nReactDOM.render(, mountNode);\n","css":".custom-affix-container {\n height: 150px;\n overflow-y: scroll;\n background: url(https://img.alicdn.com/tfs/TB1AbJXSpXXXXXJXpXXXXXXXXXX-32-32.jpg) repeat 50% 50%;\n}\n\n.custom-affix-container .affix-wrapper {\n padding-top: 50px;\n height: 500px;\n}\n"},"body":"\n````jsx\nimport { Affix, Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n _containerRefHandler(ref) {\n this.container = ref;\n }\n\n render() {\n return (\n
\n
\n this.container} offsetTop={0}>\n \n \n
\n
\n );\n }\n}\n\n\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.custom-affix-container {\n height: 150px;\n overflow-y: scroll;\n background: url(https://img.alicdn.com/tfs/TB1AbJXSpXXXXXJXpXXXXXXXXXX-32-32.jpg) repeat 50% 50%;\n}\n\n.custom-affix-container .affix-wrapper {\n padding-top: 50px;\n height: 500px;\n}\n````","html":"
import { Affix, Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n    _containerRefHandler(ref) {\n        this.container = ref;\n    }\n\n    render() {\n        return (\n            <div className=\"custom-affix-container\" ref={this._containerRefHandler.bind(this)}>\n                <div className=\"affix-wrapper\">\n                    <Affix container={() => this.container} offsetTop={0}>\n                        <Button type=\"secondary\">Affixed Button</Button>\n                    </Affix>\n                </div>\n            </div>\n        );\n    }\n}\n\n\n\nReactDOM.render(<Demo />, mountNode);
.custom-affix-container {\n    height: 150px;\n    overflow-y: scroll;\n    background: url(https://img.alicdn.com/tfs/TB1AbJXSpXXXXXJXpXXXXXXXXXX-32-32.jpg) repeat 50% 50%;\n}\n\n.custom-affix-container .affix-wrapper {\n    padding-top: 50px;\n    height: 500px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/affix/demo/custom-container.md b/compiled_docs/affix/demo/custom-container.md new file mode 100644 index 0000000000..e11a834df6 --- /dev/null +++ b/compiled_docs/affix/demo/custom-container.md @@ -0,0 +1 @@ +{"title":"自定义目标容器","meta":{"title":"自定义目标容器","description":"\n

可以通过 container 属性设置 Affix 组件需要监听其滚动事件的元素，该属性接收一个函数作为参数，默认为 () => window。

\n","order":"2"},"codes":{"jsx":"import { Affix, Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n _containerRefHandler(ref) {\n this.container = ref;\n }\n\n render() {\n return (\n
\n
\n this.container} offsetTop={0}>\n \n \n
\n
\n );\n }\n}\n\n\n\nReactDOM.render(, mountNode);\n","css":".custom-affix-container {\n height: 150px;\n overflow-y: scroll;\n background: url(https://img.alicdn.com/tfs/TB1AbJXSpXXXXXJXpXXXXXXXXXX-32-32.jpg) repeat 50% 50%;\n}\n\n.custom-affix-container .affix-wrapper {\n padding-top: 50px;\n height: 500px;\n}\n"},"body":"\n\n````jsx\nimport { Affix, Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n _containerRefHandler(ref) {\n this.container = ref;\n }\n\n render() {\n return (\n
\n
\n this.container} offsetTop={0}>\n \n \n
\n
\n );\n }\n}\n\n\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.custom-affix-container {\n height: 150px;\n overflow-y: scroll;\n background: url(https://img.alicdn.com/tfs/TB1AbJXSpXXXXXJXpXXXXXXXXXX-32-32.jpg) repeat 50% 50%;\n}\n\n.custom-affix-container .affix-wrapper {\n padding-top: 50px;\n height: 500px;\n}\n````","html":"
import { Affix, Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n    _containerRefHandler(ref) {\n        this.container = ref;\n    }\n\n    render() {\n        return (\n            <div className=\"custom-affix-container\" ref={this._containerRefHandler.bind(this)}>\n                <div className=\"affix-wrapper\">\n                    <Affix container={() => this.container} offsetTop={0}>\n                        <Button type=\"secondary\">Affixed Button</Button>\n                    </Affix>\n                </div>\n            </div>\n        );\n    }\n}\n\n\n\nReactDOM.render(<Demo />, mountNode);
.custom-affix-container {\n    height: 150px;\n    overflow-y: scroll;\n    background: url(https://img.alicdn.com/tfs/TB1AbJXSpXXXXXJXpXXXXXXXXXX-32-32.jpg) repeat 50% 50%;\n}\n\n.custom-affix-container .affix-wrapper {\n    padding-top: 50px;\n    height: 500px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/affix/demo/custom-offset.en-us.md b/compiled_docs/affix/demo/custom-offset.en-us.md new file mode 100644 index 0000000000..457e109c4c --- /dev/null +++ b/compiled_docs/affix/demo/custom-offset.en-us.md @@ -0,0 +1 @@ +{"title":"Offset","meta":{"title":"Offset","description":"\n

Setting the offset by offsetTop or offsetBottom.

\n","order":"1"},"codes":{"jsx":"import { Affix, Button } from '@alifd/next';\n\nReactDOM.render(
\n \n \n \n
, mountNode);\n","css":".custom-affix-wrapper {\n padding: 40px 0;\n}\n"},"body":"\n````jsx\nimport { Affix, Button } from '@alifd/next';\n\nReactDOM.render(
\n \n \n \n
, mountNode);\n````\n\n````css\n.custom-affix-wrapper {\n padding: 40px 0;\n}\n````","html":"
import { Affix, Button } from '@alifd/next';\n\nReactDOM.render(<div className=\"custom-affix-wrapper\">\n    <Affix offsetBottom={0}>\n        <Button type=\"secondary\">Affixed Button</Button>\n    </Affix>\n</div>, mountNode);
.custom-affix-wrapper {\n    padding: 40px 0;\n}
"} \ No newline at end of file diff --git a/compiled_docs/affix/demo/custom-offset.md b/compiled_docs/affix/demo/custom-offset.md new file mode 100644 index 0000000000..621aed9d5f --- /dev/null +++ b/compiled_docs/affix/demo/custom-offset.md @@ -0,0 +1 @@ +{"title":"自定义偏移量","meta":{"title":"自定义偏移量","description":"\n

可以通过 offsetTop 或 offsetBottom 自定义偏移量。

\n","order":"1"},"codes":{"jsx":"import { Affix, Button } from '@alifd/next';\n\nReactDOM.render(
\n \n \n \n
, mountNode);\n","css":".custom-affix-wrapper {\n padding: 40px 0;\n}\n"},"body":"\n\n````jsx\nimport { Affix, Button } from '@alifd/next';\n\nReactDOM.render(
\n \n \n \n
, mountNode);\n````\n\n````css\n.custom-affix-wrapper {\n padding: 40px 0;\n}\n````","html":"
import { Affix, Button } from '@alifd/next';\n\nReactDOM.render(<div className=\"custom-affix-wrapper\">\n    <Affix offsetBottom={0}>\n        <Button type=\"secondary\">Affixed Button</Button>\n    </Affix>\n</div>, mountNode);
.custom-affix-wrapper {\n    padding: 40px 0;\n}
"} \ No newline at end of file diff --git a/compiled_docs/affix/demo/on-affix.en-us.md b/compiled_docs/affix/demo/on-affix.en-us.md new file mode 100644 index 0000000000..b089d27f9d --- /dev/null +++ b/compiled_docs/affix/demo/on-affix.en-us.md @@ -0,0 +1 @@ +{"title":"onAffix","meta":{"title":"onAffix","description":"\n

Listening the affix state by onAffix.

\n","order":"4"},"codes":{"jsx":"import { Affix, Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n affixed: false\n };\n }\n\n onAffix = (affixed) => {\n this.setState({\n affixed\n });\n }\n\n render() {\n const state = this.state;\n\n return (
\n \n \n \n
);\n }\n}\n\n\nReactDOM.render(, mountNode);\n","css":".affix-demo-wrapper {\n padding: 40px 0;\n}\n"},"body":"\n````jsx\nimport { Affix, Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n affixed: false\n };\n }\n\n onAffix = (affixed) => {\n this.setState({\n affixed\n });\n }\n\n render() {\n const state = this.state;\n\n return (
\n \n \n \n
);\n }\n}\n\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.affix-demo-wrapper {\n padding: 40px 0;\n}\n````","html":"
import { Affix, Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n    constructor(props) {\n        super(props);\n        this.state = {\n            affixed: false\n        };\n    }\n\n    onAffix = (affixed) => {\n        this.setState({\n            affixed\n        });\n    }\n\n    render() {\n        const state = this.state;\n\n        return (<div className=\"affix-demo-wrapper\">\n            <Affix onAffix={this.onAffix}>\n                <Button type=\"secondary\">{state.affixed ? 'Affixed Button' : 'Unaffixed Button'}</Button>\n            </Affix>\n        </div>);\n    }\n}\n\n\nReactDOM.render(<Demo />, mountNode);
.affix-demo-wrapper {\n    padding: 40px 0;\n}
"} \ No newline at end of file diff --git a/compiled_docs/affix/demo/on-affix.md b/compiled_docs/affix/demo/on-affix.md new file mode 100644 index 0000000000..c77d3deea2 --- /dev/null +++ b/compiled_docs/affix/demo/on-affix.md @@ -0,0 +1 @@ +{"title":"onAffix","meta":{"title":"onAffix","description":"\n

可以通过传入 onAffix 的事件回调函数来监听元素是否发生了固钉状态。该函数会在状态变化时返回固钉状态。

\n","order":"4"},"codes":{"jsx":"import { Affix, Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n affixed: false\n };\n }\n\n onAffix = (affixed) => {\n this.setState({\n affixed\n });\n }\n\n render() {\n const state = this.state;\n\n return (
\n \n \n \n
);\n }\n}\n\n\nReactDOM.render(, mountNode);\n","css":".affix-demo-wrapper {\n padding: 40px 0;\n}\n"},"body":"\n\n````jsx\nimport { Affix, Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n affixed: false\n };\n }\n\n onAffix = (affixed) => {\n this.setState({\n affixed\n });\n }\n\n render() {\n const state = this.state;\n\n return (
\n \n \n \n
);\n }\n}\n\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.affix-demo-wrapper {\n padding: 40px 0;\n}\n````","html":"
import { Affix, Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n    constructor(props) {\n        super(props);\n        this.state = {\n            affixed: false\n        };\n    }\n\n    onAffix = (affixed) => {\n        this.setState({\n            affixed\n        });\n    }\n\n    render() {\n        const state = this.state;\n\n        return (<div className=\"affix-demo-wrapper\">\n            <Affix onAffix={this.onAffix}>\n                <Button type=\"secondary\">{state.affixed ? 'Affixed Button' : 'Unaffixed Button'}</Button>\n            </Affix>\n        </div>);\n    }\n}\n\n\nReactDOM.render(<Demo />, mountNode);
.affix-demo-wrapper {\n    padding: 40px 0;\n}
"} \ No newline at end of file diff --git a/compiled_docs/affix/index.en-us.md b/compiled_docs/affix/index.en-us.md new file mode 100644 index 0000000000..0f811b2f6f --- /dev/null +++ b/compiled_docs/affix/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Guide#

When to Use#

The Affix component allows an element to become affixed (locked) to an area on the page. This is offten used with navigation menus or social icon buttons, to make them "stick" at specific area while scrolling up and down the page.

\n

API#

","api":"

Affix#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault Value
containerThe container for listening scroll events

signature:
Function() => ReactElement
return:
{ReactElement} the instance of container
Function() => window
offsetTopOffset from top when event triggersNumber-
offsetBottomOffset from bottom when event triggersNumber-
onAffixCallback when affix event triggers

signature:
Function(isAffixed: Boolean) => void
parameters:
if element is affixed: {Boolean} null		Functionfunc.noop
useAbsoluteEnable absolute positionBoolean-
\n"} \ No newline at end of file diff --git a/compiled_docs/affix/index.md b/compiled_docs/affix/index.md new file mode 100644 index 0000000000..e3b6cf5e1d --- /dev/null +++ b/compiled_docs/affix/index.md @@ -0,0 +1 @@ +{"meta":"

Guide#

何时使用#

当用户需要将某个组件固定在页面的某个位置时，可以使用 Affix 组件进行固定。

\n

API#

","api":"

Affix#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
container设置 Affix 需要监听滚动事件的容器元素

签名:
Function() => ReactElement
返回值:
{ReactElement} 目标容器元素的实例
Function() => window
offsetTop距离窗口顶部达到指定偏移量后触发Number-
offsetBottom距离窗口底部达到制定偏移量后触发Number-
onAffix当元素的样式发生固钉样式变化时触发的回调函数

签名:
Function(元素是否被固钉: Boolean) => void
参数:
元素是否被固钉: {Boolean} null		Functionfunc.noop
useAbsolute是否启用绝对布局实现 affixBoolean-
\n"} \ No newline at end of file diff --git a/compiled_docs/animate/demo/basic.en-us.md b/compiled_docs/animate/demo/basic.en-us.md new file mode 100644 index 0000000000..415688d491 --- /dev/null +++ b/compiled_docs/animate/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

Demo the enter and leave animation of a child element.

\n","order":"0"},"codes":{"jsx":"import { Animate } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = { visible: true };\n this.handleToggle = this.handleToggle.bind(this);\n }\n\n handleToggle() {\n this.setState({\n visible: !this.state.visible\n });\n }\n\n render() {\n return (\n
\n \n \n {this.state.visible ?\n
Next Animate
:\n null}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".basic-demo {\n font-size: 96px;\n text-align: center;\n}\n\n.my-zoom-in {\n opacity: 0;\n}\n\n.my-zoom-in-active {\n animation: my-zoom-in 500ms linear;\n}\n\n.my-zoom-out {\n opacity: 1;\n}\n\n.my-zoom-out-active {\n animation: my-zoom-out 500ms linear;\n}\n\n@keyframes my-zoom-in {\n from {\n opacity: 0;\n transform: scale3d(.3, .3, .3);\n }\n\n 50% {\n opacity: 1;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes my-zoom-out {\n from {\n opacity: 1;\n }\n\n 50% {\n opacity: 0;\n transform: scale3d(.3, .3, .3);\n }\n\n to {\n opacity: 0;\n }\n}\n"},"body":"\n````jsx\nimport { Animate } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = { visible: true };\n this.handleToggle = this.handleToggle.bind(this);\n }\n\n handleToggle() {\n this.setState({\n visible: !this.state.visible\n });\n }\n\n render() {\n return (\n
\n \n \n {this.state.visible ?\n
Next Animate
:\n null}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.basic-demo {\n font-size: 96px;\n text-align: center;\n}\n\n.my-zoom-in {\n opacity: 0;\n}\n\n.my-zoom-in-active {\n animation: my-zoom-in 500ms linear;\n}\n\n.my-zoom-out {\n opacity: 1;\n}\n\n.my-zoom-out-active {\n animation: my-zoom-out 500ms linear;\n}\n\n@keyframes my-zoom-in {\n from {\n opacity: 0;\n transform: scale3d(.3, .3, .3);\n }\n\n 50% {\n opacity: 1;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes my-zoom-out {\n from {\n opacity: 1;\n }\n\n 50% {\n opacity: 0;\n transform: scale3d(.3, .3, .3);\n }\n\n to {\n opacity: 0;\n }\n}\n````","html":"
import { Animate } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = { visible: true };\n        this.handleToggle = this.handleToggle.bind(this);\n    }\n\n    handleToggle() {\n        this.setState({\n            visible: !this.state.visible\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <button onClick={this.handleToggle}>Toggle visible</button>\n                <Animate animation={{\n                    enter: 'my-zoom-in',\n                    leave: 'my-zoom-out'\n                }}>\n                    {this.state.visible ?\n                        <div className=\"basic-demo\">Next Animate</div> :\n                        null}\n                </Animate>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.basic-demo {\n    font-size: 96px;\n    text-align: center;\n}\n\n.my-zoom-in {\n    opacity: 0;\n}\n\n.my-zoom-in-active {\n    animation: my-zoom-in 500ms linear;\n}\n\n.my-zoom-out {\n    opacity: 1;\n}\n\n.my-zoom-out-active {\n    animation: my-zoom-out 500ms linear;\n}\n\n@keyframes my-zoom-in {\n    from {\n        opacity: 0;\n        transform: scale3d(.3, .3, .3);\n    }\n\n    50% {\n        opacity: 1;\n    }\n\n    to {\n        opacity: 1;\n    }\n}\n\n@keyframes my-zoom-out {\n    from {\n        opacity: 1;\n    }\n\n    50% {\n        opacity: 0;\n        transform: scale3d(.3, .3, .3);\n    }\n\n    to {\n        opacity: 0;\n    }\n}
"} \ No newline at end of file diff --git a/compiled_docs/animate/demo/basic.md b/compiled_docs/animate/demo/basic.md new file mode 100644 index 0000000000..c4a03ceef0 --- /dev/null +++ b/compiled_docs/animate/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

展示单个子元素的进场离场动画。

\n","order":"0"},"codes":{"jsx":"import { Animate } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = { visible: true };\n this.handleToggle = this.handleToggle.bind(this);\n }\n\n handleToggle() {\n this.setState({\n visible: !this.state.visible\n });\n }\n\n render() {\n return (\n
\n \n \n {this.state.visible ?\n
Next Animate
:\n null}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".basic-demo {\n font-size: 96px;\n text-align: center;\n}\n\n.my-zoom-in {\n opacity: 0;\n}\n\n.my-zoom-in-active {\n animation: my-zoom-in 500ms linear;\n}\n\n.my-zoom-out {\n opacity: 1;\n}\n\n.my-zoom-out-active {\n animation: my-zoom-out 500ms linear;\n}\n\n@keyframes my-zoom-in {\n from {\n opacity: 0;\n transform: scale3d(.3, .3, .3);\n }\n\n 50% {\n opacity: 1;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes my-zoom-out {\n from {\n opacity: 1;\n }\n\n 50% {\n opacity: 0;\n transform: scale3d(.3, .3, .3);\n }\n\n to {\n opacity: 0;\n }\n}\n"},"body":"\n\n````jsx\nimport { Animate } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = { visible: true };\n this.handleToggle = this.handleToggle.bind(this);\n }\n\n handleToggle() {\n this.setState({\n visible: !this.state.visible\n });\n }\n\n render() {\n return (\n
\n \n \n {this.state.visible ?\n
Next Animate
:\n null}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.basic-demo {\n font-size: 96px;\n text-align: center;\n}\n\n.my-zoom-in {\n opacity: 0;\n}\n\n.my-zoom-in-active {\n animation: my-zoom-in 500ms linear;\n}\n\n.my-zoom-out {\n opacity: 1;\n}\n\n.my-zoom-out-active {\n animation: my-zoom-out 500ms linear;\n}\n\n@keyframes my-zoom-in {\n from {\n opacity: 0;\n transform: scale3d(.3, .3, .3);\n }\n\n 50% {\n opacity: 1;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes my-zoom-out {\n from {\n opacity: 1;\n }\n\n 50% {\n opacity: 0;\n transform: scale3d(.3, .3, .3);\n }\n\n to {\n opacity: 0;\n }\n}\n````","html":"
import { Animate } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = { visible: true };\n        this.handleToggle = this.handleToggle.bind(this);\n    }\n\n    handleToggle() {\n        this.setState({\n            visible: !this.state.visible\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <button onClick={this.handleToggle}>Toggle visible</button>\n                <Animate animation={{\n                    enter: 'my-zoom-in',\n                    leave: 'my-zoom-out'\n                }}>\n                    {this.state.visible ?\n                        <div className=\"basic-demo\">Next Animate</div> :\n                        null}\n                </Animate>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.basic-demo {\n    font-size: 96px;\n    text-align: center;\n}\n\n.my-zoom-in {\n    opacity: 0;\n}\n\n.my-zoom-in-active {\n    animation: my-zoom-in 500ms linear;\n}\n\n.my-zoom-out {\n    opacity: 1;\n}\n\n.my-zoom-out-active {\n    animation: my-zoom-out 500ms linear;\n}\n\n@keyframes my-zoom-in {\n    from {\n        opacity: 0;\n        transform: scale3d(.3, .3, .3);\n    }\n\n    50% {\n        opacity: 1;\n    }\n\n    to {\n        opacity: 1;\n    }\n}\n\n@keyframes my-zoom-out {\n    from {\n        opacity: 1;\n    }\n\n    50% {\n        opacity: 0;\n        transform: scale3d(.3, .3, .3);\n    }\n\n    to {\n        opacity: 0;\n    }\n}
"} \ No newline at end of file diff --git a/compiled_docs/animate/demo/expand.en-us.md b/compiled_docs/animate/demo/expand.en-us.md new file mode 100644 index 0000000000..17fca8ff47 --- /dev/null +++ b/compiled_docs/animate/demo/expand.en-us.md @@ -0,0 +1 @@ +{"title":"Expand and collapse animation","meta":{"title":"Expand and collapse animation","description":"\n

Demo the expand and collapse animation of a child element.

\n","order":"2"},"codes":{"jsx":"import { Animate } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = { expand: true };\n ['beforeEnter', 'onEnter', 'afterEnter', 'beforeLeave', 'onLeave', 'afterLeave', 'handleToggle'].forEach(method => {\n this[method] = this[method].bind(this);\n });\n }\n\n handleToggle() {\n this.setState({\n expand: !this.state.expand\n });\n }\n\n beforeEnter(node) {\n this.height = node.offsetHeight;\n node.style.height = '0px';\n }\n\n onEnter(node) {\n node.style.height = `${this.height}px`;\n }\n\n afterEnter(node) {\n this.height = null;\n node.style.height = null;\n }\n\n beforeLeave(node) {\n node.style.height = `${this.height}px`;\n }\n\n onLeave(node) {\n node.style.height = '0px';\n }\n\n afterLeave(node) {\n node.style.height = null;\n }\n\n render() {\n return (\n
\n \n \n {this.state.expand ?\n
:\n null}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".expand-enter {\n overflow: hidden;\n}\n\n.expand-enter-active {\n transition: height 0.3s ease-out;\n}\n\n.expand-leave {\n overflow: hidden;\n}\n\n.expand-leave-active {\n transition: height 0.3s ease-out;\n}\n\n.notice {\n width: 200px;\n height: 100px;\n margin-top: 20px;\n border: 1px solid #ccc;\n}\n"},"body":"\n````jsx\nimport { Animate } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = { expand: true };\n ['beforeEnter', 'onEnter', 'afterEnter', 'beforeLeave', 'onLeave', 'afterLeave', 'handleToggle'].forEach(method => {\n this[method] = this[method].bind(this);\n });\n }\n\n handleToggle() {\n this.setState({\n expand: !this.state.expand\n });\n }\n\n beforeEnter(node) {\n this.height = node.offsetHeight;\n node.style.height = '0px';\n }\n\n onEnter(node) {\n node.style.height = `${this.height}px`;\n }\n\n afterEnter(node) {\n this.height = null;\n node.style.height = null;\n }\n\n beforeLeave(node) {\n node.style.height = `${this.height}px`;\n }\n\n onLeave(node) {\n node.style.height = '0px';\n }\n\n afterLeave(node) {\n node.style.height = null;\n }\n\n render() {\n return (\n
\n \n \n {this.state.expand ?\n
:\n null}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.expand-enter {\n overflow: hidden;\n}\n\n.expand-enter-active {\n transition: height 0.3s ease-out;\n}\n\n.expand-leave {\n overflow: hidden;\n}\n\n.expand-leave-active {\n transition: height 0.3s ease-out;\n}\n\n.notice {\n width: 200px;\n height: 100px;\n margin-top: 20px;\n border: 1px solid #ccc;\n}\n````","html":"
import { Animate } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = { expand: true };\n        ['beforeEnter', 'onEnter', 'afterEnter', 'beforeLeave', 'onLeave', 'afterLeave', 'handleToggle'].forEach(method => {\n            this[method] = this[method].bind(this);\n        });\n    }\n\n    handleToggle() {\n        this.setState({\n            expand: !this.state.expand\n        });\n    }\n\n    beforeEnter(node) {\n        this.height = node.offsetHeight;\n        node.style.height = '0px';\n    }\n\n    onEnter(node) {\n        node.style.height = `${this.height}px`;\n    }\n\n    afterEnter(node) {\n        this.height = null;\n        node.style.height = null;\n    }\n\n    beforeLeave(node) {\n        node.style.height = `${this.height}px`;\n    }\n\n    onLeave(node) {\n        node.style.height = '0px';\n    }\n\n    afterLeave(node) {\n        node.style.height = null;\n    }\n\n    render() {\n        return (\n            <div>\n                <button onClick={this.handleToggle}>Toggle expand</button>\n                <Animate animation=\"expand\"\n                    beforeEnter={this.beforeEnter}\n                    onEnter={this.onEnter}\n                    afterEnter={this.afterEnter}\n                    beforeLeave={this.beforeLeave}\n                    onLeave={this.onLeave}\n                    afterLeave={this.afterLeave}>\n                    {this.state.expand ?\n                        <div className=\"notice\"></div> :\n                        null}\n                </Animate>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.expand-enter {\n    overflow: hidden;\n}\n\n.expand-enter-active {\n    transition: height 0.3s ease-out;\n}\n\n.expand-leave {\n    overflow: hidden;\n}\n\n.expand-leave-active {\n    transition: height 0.3s ease-out;\n}\n\n.notice {\n    width: 200px;\n    height: 100px;\n    margin-top: 20px;\n    border: 1px solid #ccc;\n}
"} \ No newline at end of file diff --git a/compiled_docs/animate/demo/expand.md b/compiled_docs/animate/demo/expand.md new file mode 100644 index 0000000000..31538c5495 --- /dev/null +++ b/compiled_docs/animate/demo/expand.md @@ -0,0 +1 @@ +{"title":"展开收起动画","meta":{"title":"展开收起动画","description":"\n

展示单个子元素的展开收起动画。

\n","order":"2"},"codes":{"jsx":"import { Animate } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = { expand: true };\n ['beforeEnter', 'onEnter', 'afterEnter', 'beforeLeave', 'onLeave', 'afterLeave', 'handleToggle'].forEach(method => {\n this[method] = this[method].bind(this);\n });\n }\n\n handleToggle() {\n this.setState({\n expand: !this.state.expand\n });\n }\n\n beforeEnter(node) {\n this.height = node.offsetHeight;\n node.style.height = '0px';\n }\n\n onEnter(node) {\n node.style.height = `${this.height}px`;\n }\n\n afterEnter(node) {\n this.height = null;\n node.style.height = null;\n }\n\n beforeLeave(node) {\n node.style.height = `${this.height}px`;\n }\n\n onLeave(node) {\n node.style.height = '0px';\n }\n\n afterLeave(node) {\n node.style.height = null;\n }\n\n render() {\n return (\n
\n \n \n {this.state.expand ?\n
:\n null}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".expand-enter {\n overflow: hidden;\n}\n\n.expand-enter-active {\n transition: height 0.3s ease-out;\n}\n\n.expand-leave {\n overflow: hidden;\n}\n\n.expand-leave-active {\n transition: height 0.3s ease-out;\n}\n\n.notice {\n width: 200px;\n height: 100px;\n margin-top: 20px;\n border: 1px solid #ccc;\n}\n"},"body":"\n\n````jsx\nimport { Animate } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = { expand: true };\n ['beforeEnter', 'onEnter', 'afterEnter', 'beforeLeave', 'onLeave', 'afterLeave', 'handleToggle'].forEach(method => {\n this[method] = this[method].bind(this);\n });\n }\n\n handleToggle() {\n this.setState({\n expand: !this.state.expand\n });\n }\n\n beforeEnter(node) {\n this.height = node.offsetHeight;\n node.style.height = '0px';\n }\n\n onEnter(node) {\n node.style.height = `${this.height}px`;\n }\n\n afterEnter(node) {\n this.height = null;\n node.style.height = null;\n }\n\n beforeLeave(node) {\n node.style.height = `${this.height}px`;\n }\n\n onLeave(node) {\n node.style.height = '0px';\n }\n\n afterLeave(node) {\n node.style.height = null;\n }\n\n render() {\n return (\n
\n \n \n {this.state.expand ?\n
:\n null}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.expand-enter {\n overflow: hidden;\n}\n\n.expand-enter-active {\n transition: height 0.3s ease-out;\n}\n\n.expand-leave {\n overflow: hidden;\n}\n\n.expand-leave-active {\n transition: height 0.3s ease-out;\n}\n\n.notice {\n width: 200px;\n height: 100px;\n margin-top: 20px;\n border: 1px solid #ccc;\n}\n````","html":"
import { Animate } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = { expand: true };\n        ['beforeEnter', 'onEnter', 'afterEnter', 'beforeLeave', 'onLeave', 'afterLeave', 'handleToggle'].forEach(method => {\n            this[method] = this[method].bind(this);\n        });\n    }\n\n    handleToggle() {\n        this.setState({\n            expand: !this.state.expand\n        });\n    }\n\n    beforeEnter(node) {\n        this.height = node.offsetHeight;\n        node.style.height = '0px';\n    }\n\n    onEnter(node) {\n        node.style.height = `${this.height}px`;\n    }\n\n    afterEnter(node) {\n        this.height = null;\n        node.style.height = null;\n    }\n\n    beforeLeave(node) {\n        node.style.height = `${this.height}px`;\n    }\n\n    onLeave(node) {\n        node.style.height = '0px';\n    }\n\n    afterLeave(node) {\n        node.style.height = null;\n    }\n\n    render() {\n        return (\n            <div>\n                <button onClick={this.handleToggle}>Toggle expand</button>\n                <Animate animation=\"expand\"\n                    beforeEnter={this.beforeEnter}\n                    onEnter={this.onEnter}\n                    afterEnter={this.afterEnter}\n                    beforeLeave={this.beforeLeave}\n                    onLeave={this.onLeave}\n                    afterLeave={this.afterLeave}>\n                    {this.state.expand ?\n                        <div className=\"notice\"></div> :\n                        null}\n                </Animate>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.expand-enter {\n    overflow: hidden;\n}\n\n.expand-enter-active {\n    transition: height 0.3s ease-out;\n}\n\n.expand-leave {\n    overflow: hidden;\n}\n\n.expand-leave-active {\n    transition: height 0.3s ease-out;\n}\n\n.notice {\n    width: 200px;\n    height: 100px;\n    margin-top: 20px;\n    border: 1px solid #ccc;\n}
"} \ No newline at end of file diff --git a/compiled_docs/animate/demo/multiple.en-us.md b/compiled_docs/animate/demo/multiple.en-us.md new file mode 100644 index 0000000000..6a530c1fef --- /dev/null +++ b/compiled_docs/animate/demo/multiple.en-us.md @@ -0,0 +1 @@ +{"title":"Multiple child elements animation","meta":{"title":"Multiple child elements animation","description":"\n

Demo the enter and leave animation of multiple child elements.

\n","order":"1"},"codes":{"jsx":"import { Animate } from '@alifd/next';\n\nclass TodoList extends React.Component {\n constructor(props) {\n super(props);\n this.state = { items: ['hello', 'world', 'click', 'me'] };\n }\n\n handleAdd() {\n this.setState({\n items: [\n ...this.state.items,\n // eslint-disable-next-line\n prompt('Enter some text')\n ]\n });\n }\n\n handleRemove(i) {\n const newItems = this.state.items.slice();\n newItems.splice(i, 1);\n this.setState({ items: newItems });\n }\n\n render() {\n return (\n
\n console.log('before appear')}\n onAppear={() => console.log('appear')}\n afterAppear={() => console.log('after appear')}\n beforeEnter={() => console.log('before enter')}\n onEnter={() => console.log('enter')}\n afterEnter={() => console.log('after enter')}\n beforeLeave={() => console.log('before leave')}\n onLeave={() => console.log('leave')}\n afterLeave={() => console.log('after leave')}>\n {this.state.items.map((item, i) => (\n
\n {item}\n \n
\n ))}\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".fade-appear {\n opacity: 0.01;\n}\n\n.fade-appear.fade-appear-active {\n opacity: 1;\n transition: opacity 1000ms ease-in;\n}\n\n.fade-enter {\n opacity: 0.01;\n}\n\n.fade-enter.fade-enter-active {\n opacity: 1;\n transition: opacity 1000ms ease-in;\n}\n\n.fade-leave {\n opacity: 1;\n}\n\n.fade-leave.fade-leave-active {\n opacity: 0.01;\n transition: opacity 800ms ease-in;\n}\n\n.totolist-container {\n padding: 20px;\n border: 1px solid #ccc;\n width: 200px;\n border-radius: 4px;\n}\n\n.todo-list > * {\n margin: 5px 0;\n padding: 5px 0;\n border-bottom: 1px solid #ccc;\n}\n\n.totolist-container > button {\n margin-top: 20px;\n}\n"},"body":"\n````jsx\nimport { Animate } from '@alifd/next';\n\nclass TodoList extends React.Component {\n constructor(props) {\n super(props);\n this.state = { items: ['hello', 'world', 'click', 'me'] };\n }\n\n handleAdd() {\n this.setState({\n items: [\n ...this.state.items,\n // eslint-disable-next-line\n prompt('Enter some text')\n ]\n });\n }\n\n handleRemove(i) {\n const newItems = this.state.items.slice();\n newItems.splice(i, 1);\n this.setState({ items: newItems });\n }\n\n render() {\n return (\n
\n console.log('before appear')}\n onAppear={() => console.log('appear')}\n afterAppear={() => console.log('after appear')}\n beforeEnter={() => console.log('before enter')}\n onEnter={() => console.log('enter')}\n afterEnter={() => console.log('after enter')}\n beforeLeave={() => console.log('before leave')}\n onLeave={() => console.log('leave')}\n afterLeave={() => console.log('after leave')}>\n {this.state.items.map((item, i) => (\n
\n {item}\n \n
\n ))}\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.fade-appear {\n opacity: 0.01;\n}\n\n.fade-appear.fade-appear-active {\n opacity: 1;\n transition: opacity 1000ms ease-in;\n}\n\n.fade-enter {\n opacity: 0.01;\n}\n\n.fade-enter.fade-enter-active {\n opacity: 1;\n transition: opacity 1000ms ease-in;\n}\n\n.fade-leave {\n opacity: 1;\n}\n\n.fade-leave.fade-leave-active {\n opacity: 0.01;\n transition: opacity 800ms ease-in;\n}\n\n.totolist-container {\n padding: 20px;\n border: 1px solid #ccc;\n width: 200px;\n border-radius: 4px;\n}\n\n.todo-list > * {\n margin: 5px 0;\n padding: 5px 0;\n border-bottom: 1px solid #ccc;\n}\n\n.totolist-container > button {\n margin-top: 20px;\n}\n````","html":"
import { Animate } from '@alifd/next';\n\nclass TodoList extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = { items: ['hello', 'world', 'click', 'me'] };\n    }\n\n    handleAdd() {\n        this.setState({\n            items: [\n                ...this.state.items,\n                // eslint-disable-next-line\n                prompt('Enter some text')\n            ]\n        });\n    }\n\n    handleRemove(i) {\n        const newItems = this.state.items.slice();\n        newItems.splice(i, 1);\n        this.setState({ items: newItems });\n    }\n\n    render() {\n        return (\n            <div className=\"totolist-container\">\n                <Animate animationAppear animation=\"fade\" className=\"todo-list\" singleMode={false}\n                    beforeAppear={() => console.log('before appear')}\n                    onAppear={() => console.log('appear')}\n                    afterAppear={() => console.log('after appear')}\n                    beforeEnter={() => console.log('before enter')}\n                    onEnter={() => console.log('enter')}\n                    afterEnter={() => console.log('after enter')}\n                    beforeLeave={() => console.log('before leave')}\n                    onLeave={() => console.log('leave')}\n                    afterLeave={() => console.log('after leave')}>\n                    {this.state.items.map((item, i) => (\n                        <div key={item}>\n                            {item}\n                            <button onClick={() => this.handleRemove(i)}>\n                                &times;\n                            </button>\n                        </div>\n                    ))}\n                </Animate>\n                <button onClick={() => this.handleAdd()}>Add Item</button>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<TodoList />, mountNode);
.fade-appear {\n  opacity: 0.01;\n}\n\n.fade-appear.fade-appear-active {\n  opacity: 1;\n  transition: opacity 1000ms ease-in;\n}\n\n.fade-enter {\n  opacity: 0.01;\n}\n\n.fade-enter.fade-enter-active {\n  opacity: 1;\n  transition: opacity 1000ms ease-in;\n}\n\n.fade-leave {\n  opacity: 1;\n}\n\n.fade-leave.fade-leave-active {\n  opacity: 0.01;\n  transition: opacity 800ms ease-in;\n}\n\n.totolist-container {\n  padding: 20px;\n  border: 1px solid #ccc;\n  width: 200px;\n  border-radius: 4px;\n}\n\n.todo-list > * {\n  margin: 5px 0;\n  padding: 5px 0;\n  border-bottom:  1px solid #ccc;\n}\n\n.totolist-container > button {\n  margin-top: 20px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/animate/demo/multiple.md b/compiled_docs/animate/demo/multiple.md new file mode 100644 index 0000000000..f9c1f1af6c --- /dev/null +++ b/compiled_docs/animate/demo/multiple.md @@ -0,0 +1 @@ +{"title":"多个子元素动画","meta":{"title":"多个子元素动画","description":"\n

展示多个子元素的进场离场动画。

\n","order":"1"},"codes":{"jsx":"import { Animate } from '@alifd/next';\n\nclass TodoList extends React.Component {\n constructor(props) {\n super(props);\n this.state = { items: ['hello', 'world', 'click', 'me'] };\n }\n\n handleAdd() {\n this.setState({\n items: [\n ...this.state.items,\n // eslint-disable-next-line\n prompt('Enter some text')\n ]\n });\n }\n\n handleRemove(i) {\n const newItems = this.state.items.slice();\n newItems.splice(i, 1);\n this.setState({ items: newItems });\n }\n\n render() {\n return (\n
\n console.log('before appear')}\n onAppear={() => console.log('appear')}\n afterAppear={() => console.log('after appear')}\n beforeEnter={() => console.log('before enter')}\n onEnter={() => console.log('enter')}\n afterEnter={() => console.log('after enter')}\n beforeLeave={() => console.log('before leave')}\n onLeave={() => console.log('leave')}\n afterLeave={() => console.log('after leave')}>\n {this.state.items.map((item, i) => (\n
\n {item}\n \n
\n ))}\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".fade-appear {\n opacity: 0.01;\n}\n\n.fade-appear.fade-appear-active {\n opacity: 1;\n transition: opacity 1000ms ease-in;\n}\n\n.fade-enter {\n opacity: 0.01;\n}\n\n.fade-enter.fade-enter-active {\n opacity: 1;\n transition: opacity 1000ms ease-in;\n}\n\n.fade-leave {\n opacity: 1;\n}\n\n.fade-leave.fade-leave-active {\n opacity: 0.01;\n transition: opacity 800ms ease-in;\n}\n\n.totolist-container {\n padding: 20px;\n border: 1px solid #ccc;\n width: 200px;\n border-radius: 4px;\n}\n\n.todo-list > * {\n margin: 5px 0;\n padding: 5px 0;\n border-bottom: 1px solid #ccc;\n}\n\n.totolist-container > button {\n margin-top: 20px;\n}\n"},"body":"\n\n````jsx\nimport { Animate } from '@alifd/next';\n\nclass TodoList extends React.Component {\n constructor(props) {\n super(props);\n this.state = { items: ['hello', 'world', 'click', 'me'] };\n }\n\n handleAdd() {\n this.setState({\n items: [\n ...this.state.items,\n // eslint-disable-next-line\n prompt('Enter some text')\n ]\n });\n }\n\n handleRemove(i) {\n const newItems = this.state.items.slice();\n newItems.splice(i, 1);\n this.setState({ items: newItems });\n }\n\n render() {\n return (\n
\n console.log('before appear')}\n onAppear={() => console.log('appear')}\n afterAppear={() => console.log('after appear')}\n beforeEnter={() => console.log('before enter')}\n onEnter={() => console.log('enter')}\n afterEnter={() => console.log('after enter')}\n beforeLeave={() => console.log('before leave')}\n onLeave={() => console.log('leave')}\n afterLeave={() => console.log('after leave')}>\n {this.state.items.map((item, i) => (\n
\n {item}\n \n
\n ))}\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.fade-appear {\n opacity: 0.01;\n}\n\n.fade-appear.fade-appear-active {\n opacity: 1;\n transition: opacity 1000ms ease-in;\n}\n\n.fade-enter {\n opacity: 0.01;\n}\n\n.fade-enter.fade-enter-active {\n opacity: 1;\n transition: opacity 1000ms ease-in;\n}\n\n.fade-leave {\n opacity: 1;\n}\n\n.fade-leave.fade-leave-active {\n opacity: 0.01;\n transition: opacity 800ms ease-in;\n}\n\n.totolist-container {\n padding: 20px;\n border: 1px solid #ccc;\n width: 200px;\n border-radius: 4px;\n}\n\n.todo-list > * {\n margin: 5px 0;\n padding: 5px 0;\n border-bottom: 1px solid #ccc;\n}\n\n.totolist-container > button {\n margin-top: 20px;\n}\n````","html":"
import { Animate } from '@alifd/next';\n\nclass TodoList extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = { items: ['hello', 'world', 'click', 'me'] };\n    }\n\n    handleAdd() {\n        this.setState({\n            items: [\n                ...this.state.items,\n                // eslint-disable-next-line\n                prompt('Enter some text')\n            ]\n        });\n    }\n\n    handleRemove(i) {\n        const newItems = this.state.items.slice();\n        newItems.splice(i, 1);\n        this.setState({ items: newItems });\n    }\n\n    render() {\n        return (\n            <div className=\"totolist-container\">\n                <Animate animationAppear animation=\"fade\" className=\"todo-list\" singleMode={false}\n                    beforeAppear={() => console.log('before appear')}\n                    onAppear={() => console.log('appear')}\n                    afterAppear={() => console.log('after appear')}\n                    beforeEnter={() => console.log('before enter')}\n                    onEnter={() => console.log('enter')}\n                    afterEnter={() => console.log('after enter')}\n                    beforeLeave={() => console.log('before leave')}\n                    onLeave={() => console.log('leave')}\n                    afterLeave={() => console.log('after leave')}>\n                    {this.state.items.map((item, i) => (\n                        <div key={item}>\n                            {item}\n                            <button onClick={() => this.handleRemove(i)}>\n                                &times;\n                            </button>\n                        </div>\n                    ))}\n                </Animate>\n                <button onClick={() => this.handleAdd()}>Add Item</button>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<TodoList />, mountNode);
.fade-appear {\n  opacity: 0.01;\n}\n\n.fade-appear.fade-appear-active {\n  opacity: 1;\n  transition: opacity 1000ms ease-in;\n}\n\n.fade-enter {\n  opacity: 0.01;\n}\n\n.fade-enter.fade-enter-active {\n  opacity: 1;\n  transition: opacity 1000ms ease-in;\n}\n\n.fade-leave {\n  opacity: 1;\n}\n\n.fade-leave.fade-leave-active {\n  opacity: 0.01;\n  transition: opacity 800ms ease-in;\n}\n\n.totolist-container {\n  padding: 20px;\n  border: 1px solid #ccc;\n  width: 200px;\n  border-radius: 4px;\n}\n\n.todo-list > * {\n  margin: 5px 0;\n  padding: 5px 0;\n  border-bottom:  1px solid #ccc;\n}\n\n.totolist-container > button {\n  margin-top: 20px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/animate/index.en-us.md b/compiled_docs/animate/index.en-us.md new file mode 100644 index 0000000000..db48ab47d0 --- /dev/null +++ b/compiled_docs/animate/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Guide#

When To Use#

Need to customize animation.

\n

API#

","api":"

Animate#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
animationanimation class namesString/Object-
animationAppearwhether the child elements performs animation when it is first mountedBooleantrue
componentcomponent wrapped child elementany'div'
singleModewhether there is only a single child element, if there is more than one child element, set it to falseBooleantrue
childrenchild elementsReactElement/Array<ReactElement>-
beforeAppeartriggered before performing the first mount animation

signatures:
Function() => void		Function() => {}
onAppeartriggered after adding the xxx-appear-active class name

signatures:
Function(node: HTMLElement) => void
params:
node: {HTMLElement} \banimated dom element		Function() => {}
afterAppeartriggered after performing the first mount animation

signatures:
Function(node: HTMLElement) => void
params:
node: {HTMLElement} \banimated dom element		Function() => {}
beforeEntertriggered before performing the enter animation

signatures:
Function(node: HTMLElement) => void
params:
node: {HTMLElement} \banimated dom element		Function() => {}
onEntertriggered after adding the xxx-enter-active class name

signatures:
Function(node: HTMLElement) => void
params:
node: {HTMLElement} \banimated dom element		Function() => {}
afterEntertriggered after performing the enter animation

signatures:
Function(node: HTMLElement) => void
params:
node: {HTMLElement} \banimated dom element		Function() => {}
beforeLeavetriggered before performing the leave animation

signatures:
Function(node: HTMLElement) => void
params:
node: {HTMLElement} \banimated dom element		Function() => {}
onLeavetriggered after adding the xxx-leave-active class name

signatures:
Function(node: HTMLElement) => void
params:
node: {HTMLElement} \banimated dom element		Function() => {}
afterLeavetriggered after performing the leave animation

signatures:
Function(node: HTMLElement) => void
params:
node: {HTMLElement} \banimated dom element		Function() => {}
\n

Animation List#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
InOut
fadeInfadeOut
fadeInDownfadeOutDown
fadeInLeftfadeOutLeft
fadeInRightfadeOutRight
fadeInUpfadeOutUp
zoomInzoomOut
expandInDownexpandOutUp
expandInUpexpandOutDown
pulse
\n"} \ No newline at end of file diff --git a/compiled_docs/animate/index.md b/compiled_docs/animate/index.md new file mode 100644 index 0000000000..3117ab555f --- /dev/null +++ b/compiled_docs/animate/index.md @@ -0,0 +1 @@ +{"meta":"

开发指南#

何时使用#

需要自定义动效

\n

API#

","api":"

Animate#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
animation动画 classNameString/Object-
animationAppear子元素第一次挂载时是否执行动画Booleantrue
component包裹子元素的标签any'div'
singleMode是否只有单个子元素，如果有多个子元素，请设置为 falseBooleantrue
children子元素ReactElement/Array<ReactElement>-
beforeAppear执行第一次挂载动画前触发的回调函数

签名:
Function() => void		Function() => {}
onAppear执行第一次挂载动画，添加 xxx-appear-active 类名后触发的回调函数

签名:
Function(node: HTMLElement) => void
参数:
node: {HTMLElement} \b执行动画的 dom 元素		Function() => {}
afterAppear执行完第一次挂载动画后触发的函数

签名:
Function(node: HTMLElement) => void
参数:
node: {HTMLElement} \b执行动画的 dom 元素		Function() => {}
beforeEnter执行进场动画前触发的回调函数

签名:
Function(node: HTMLElement) => void
参数:
node: {HTMLElement} \b执行动画的 dom 元素		Function() => {}
onEnter执行进场动画，添加 xxx-enter-active 类名后触发的回调函数

签名:
Function(node: HTMLElement) => void
参数:
node: {HTMLElement} \b执行动画的 dom 元素		Function() => {}
afterEnter执行完进场动画后触发的回调函数

签名:
Function(node: HTMLElement) => void
参数:
node: {HTMLElement} \b执行动画的 dom 元素		Function() => {}
beforeLeave执行离场动画前触发的回调函数

签名:
Function(node: HTMLElement) => void
参数:
node: {HTMLElement} \b执行动画的 dom 元素		Function() => {}
onLeave执行离场动画，添加 xxx-leave-active 类名后触发的回调函数

签名:
Function(node: HTMLElement) => void
参数:
node: {HTMLElement} \b执行动画的 dom 元素		Function() => {}
afterLeave执行完离场动画后触发的回调函数

签名:
Function(node: HTMLElement) => void
参数:
node: {HTMLElement} \b执行动画的 dom 元素		Function() => {}
\n

Animation List#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
InOut
fadeInfadeOut
fadeInDownfadeOutDown
fadeInLeftfadeOutLeft
fadeInRightfadeOutRight
fadeInUpfadeOutUp
zoomInzoomOut
expandInDownexpandOutUp
expandInUpexpandOutDown
pulse
\n"} \ No newline at end of file diff --git a/compiled_docs/badge/demo/basic.en-us.md b/compiled_docs/badge/demo/basic.en-us.md new file mode 100644 index 0000000000..76a6cd8dd9 --- /dev/null +++ b/compiled_docs/badge/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic Usage","meta":{"title":"Basic Usage","description":"\n

Simple usage of badge component.

\n","order":"0"},"codes":{"jsx":"import { Badge } from '@alifd/next';\n\nReactDOM.render(\n
\n \n \n \n\n \n unread messages\n \n
\n , mountNode);\n","css":".basic-example {\n display: inline-block;\n width: 42px;\n height: 42px;\n border-radius: 8px;\n background: #eee;\n}\n\n.next-badge {\n margin-right: 16px;\n}\n"},"body":"\n````jsx\nimport { Badge } from '@alifd/next';\n\nReactDOM.render(\n
\n \n \n \n\n \n unread messages\n \n
\n , mountNode);\n````\n\n````css\n.basic-example {\n display: inline-block;\n width: 42px;\n height: 42px;\n border-radius: 8px;\n background: #eee;\n}\n\n.next-badge {\n margin-right: 16px;\n}\n````","html":"
import { Badge } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Badge count={5}>\n            <a href=\"#\" className=\"basic-example\"></a>\n        </Badge>\n\n        <Badge count={5}>\n            <a href=\"#\" className=\"basic-example\"><span className=\"next-sr-only\">unread messages</span></a>\n        </Badge>\n    </div>\n    , mountNode);
.basic-example {\n    display: inline-block;\n    width: 42px;\n    height: 42px;\n    border-radius: 8px;\n    background: #eee;\n}\n\n.next-badge {\n    margin-right: 16px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/badge/demo/basic.md b/compiled_docs/badge/demo/basic.md new file mode 100644 index 0000000000..64e8d9b253 --- /dev/null +++ b/compiled_docs/badge/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

简单的徽章展示。

\n","order":"0"},"codes":{"jsx":"import { Badge } from '@alifd/next';\n\nReactDOM.render(\n
\n \n \n \n\n \n unread messages\n \n
\n , mountNode);\n","css":".basic-example {\n display: inline-block;\n width: 42px;\n height: 42px;\n border-radius: 8px;\n background: #eee;\n}\n\n.next-badge {\n margin-right: 16px;\n}\n"},"body":"\n\n````jsx\nimport { Badge } from '@alifd/next';\n\nReactDOM.render(\n
\n \n \n \n\n \n unread messages\n \n
\n , mountNode);\n````\n\n````css\n.basic-example {\n display: inline-block;\n width: 42px;\n height: 42px;\n border-radius: 8px;\n background: #eee;\n}\n\n.next-badge {\n margin-right: 16px;\n}\n````","html":"
import { Badge } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Badge count={5}>\n            <a href=\"#\" className=\"basic-example\"></a>\n        </Badge>\n\n        <Badge count={5}>\n            <a href=\"#\" className=\"basic-example\"><span className=\"next-sr-only\">unread messages</span></a>\n        </Badge>\n    </div>\n    , mountNode);
.basic-example {\n    display: inline-block;\n    width: 42px;\n    height: 42px;\n    border-radius: 8px;\n    background: #eee;\n}\n\n.next-badge {\n    margin-right: 16px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/badge/demo/change.en-us.md b/compiled_docs/badge/demo/change.en-us.md new file mode 100644 index 0000000000..39d8df0a3e --- /dev/null +++ b/compiled_docs/badge/demo/change.en-us.md @@ -0,0 +1 @@ +{"title":"Dynamic","meta":{"title":"Dynamic","description":"\n

Display the effect of dynamic changes.

\n","order":"3"},"codes":{"jsx":"import { Badge, Button, Icon } from '@alifd/next';\n\n\n\nconst ButtonGroup = Button.Group;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n count: 5,\n show: true\n };\n\n this.increase = this.increase.bind(this);\n this.decrease = this.decrease.bind(this);\n this.onClick = this.onClick.bind(this);\n }\n\n increase() {\n const count = this.state.count + 1;\n this.setState({ count });\n }\n\n decrease() {\n let count = this.state.count - 1;\n if (count < 0) {\n count = 0;\n }\n this.setState({ count });\n }\n\n onClick() {\n this.setState({\n show: !this.state.show\n });\n }\n\n render() {\n return (\n
\n
\n \n unread messages\n \n \n \n \n \n
\n
\n \n \n \n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".next-badge {\n margin-right: 16px;\n}\n.change-count {\n margin-bottom: 16px;\n}\n.head-example {\n display: inline-block;\n width: 42px;\n height: 42px;\n border-radius: 8px;\n background: #eee;\n}\n"},"body":"\n````jsx\nimport { Badge, Button, Icon } from '@alifd/next';\n\n\n\nconst ButtonGroup = Button.Group;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n count: 5,\n show: true\n };\n\n this.increase = this.increase.bind(this);\n this.decrease = this.decrease.bind(this);\n this.onClick = this.onClick.bind(this);\n }\n\n increase() {\n const count = this.state.count + 1;\n this.setState({ count });\n }\n\n decrease() {\n let count = this.state.count - 1;\n if (count < 0) {\n count = 0;\n }\n this.setState({ count });\n }\n\n onClick() {\n this.setState({\n show: !this.state.show\n });\n }\n\n render() {\n return (\n
\n
\n \n unread messages\n \n \n \n \n \n
\n
\n \n \n \n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.next-badge {\n margin-right: 16px;\n}\n.change-count {\n margin-bottom: 16px;\n}\n.head-example {\n display: inline-block;\n width: 42px;\n height: 42px;\n border-radius: 8px;\n background: #eee;\n}\n````","html":"
import { Badge, Button, Icon } from '@alifd/next';\n\n\n\nconst ButtonGroup = Button.Group;\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            count: 5,\n            show: true\n        };\n\n        this.increase = this.increase.bind(this);\n        this.decrease = this.decrease.bind(this);\n        this.onClick = this.onClick.bind(this);\n    }\n\n    increase() {\n        const count = this.state.count + 1;\n        this.setState({ count });\n    }\n\n    decrease() {\n        let count = this.state.count - 1;\n        if (count < 0) {\n            count = 0;\n        }\n        this.setState({ count });\n    }\n\n    onClick() {\n        this.setState({\n            show: !this.state.show\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <div className=\"change-count\">\n                    <Badge count={this.state.count}>\n                        <a href=\"#\" className=\"head-example\"><span className=\"next-sr-only\">unread messages</span></a>\n                    </Badge>\n                    <ButtonGroup>\n                        <Button aria-label=\"add\" onClick={this.increase}>\n                            <Icon type=\"add\"/>\n                        </Button>\n                        <Button aria-label=\"minus\" onClick={this.decrease}>\n                            <Icon type=\"minus\"/>\n                        </Button>\n                    </ButtonGroup>\n                </div>\n                <div>\n                    <Badge dot={this.state.show}>\n                        <a href=\"#\" className=\"head-example\"></a>\n                    </Badge>\n                    <Button onClick={this.onClick}>\n                        Toggle Display\n                    </Button>\n                </div>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.next-badge {\n    margin-right: 16px;\n}\n.change-count {\n    margin-bottom: 16px;\n}\n.head-example {\n    display: inline-block;\n    width: 42px;\n    height: 42px;\n    border-radius: 8px;\n    background: #eee;\n}
"} \ No newline at end of file diff --git a/compiled_docs/badge/demo/change.md b/compiled_docs/badge/demo/change.md new file mode 100644 index 0000000000..ed1fb6ae14 --- /dev/null +++ b/compiled_docs/badge/demo/change.md @@ -0,0 +1 @@ +{"title":"动态","meta":{"title":"动态","description":"\n

展示动态变化的效果。

\n","order":"3"},"codes":{"jsx":"import { Badge, Button, Icon } from '@alifd/next';\n\n\n\nconst ButtonGroup = Button.Group;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n count: 5,\n show: true\n };\n\n this.increase = this.increase.bind(this);\n this.decrease = this.decrease.bind(this);\n this.onClick = this.onClick.bind(this);\n }\n\n increase() {\n const count = this.state.count + 1;\n this.setState({ count });\n }\n\n decrease() {\n let count = this.state.count - 1;\n if (count < 0) {\n count = 0;\n }\n this.setState({ count });\n }\n\n onClick() {\n this.setState({\n show: !this.state.show\n });\n }\n\n render() {\n return (\n
\n
\n \n unread messages\n \n \n \n \n \n
\n
\n \n \n \n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".next-badge {\n margin-right: 16px;\n}\n.change-count {\n margin-bottom: 16px;\n}\n.head-example {\n display: inline-block;\n width: 42px;\n height: 42px;\n border-radius: 8px;\n background: #eee;\n}\n"},"body":"\n\n````jsx\nimport { Badge, Button, Icon } from '@alifd/next';\n\n\n\nconst ButtonGroup = Button.Group;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n count: 5,\n show: true\n };\n\n this.increase = this.increase.bind(this);\n this.decrease = this.decrease.bind(this);\n this.onClick = this.onClick.bind(this);\n }\n\n increase() {\n const count = this.state.count + 1;\n this.setState({ count });\n }\n\n decrease() {\n let count = this.state.count - 1;\n if (count < 0) {\n count = 0;\n }\n this.setState({ count });\n }\n\n onClick() {\n this.setState({\n show: !this.state.show\n });\n }\n\n render() {\n return (\n
\n
\n \n unread messages\n \n \n \n \n \n
\n
\n \n \n \n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.next-badge {\n margin-right: 16px;\n}\n.change-count {\n margin-bottom: 16px;\n}\n.head-example {\n display: inline-block;\n width: 42px;\n height: 42px;\n border-radius: 8px;\n background: #eee;\n}\n````","html":"
import { Badge, Button, Icon } from '@alifd/next';\n\n\n\nconst ButtonGroup = Button.Group;\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            count: 5,\n            show: true\n        };\n\n        this.increase = this.increase.bind(this);\n        this.decrease = this.decrease.bind(this);\n        this.onClick = this.onClick.bind(this);\n    }\n\n    increase() {\n        const count = this.state.count + 1;\n        this.setState({ count });\n    }\n\n    decrease() {\n        let count = this.state.count - 1;\n        if (count < 0) {\n            count = 0;\n        }\n        this.setState({ count });\n    }\n\n    onClick() {\n        this.setState({\n            show: !this.state.show\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <div className=\"change-count\">\n                    <Badge count={this.state.count}>\n                        <a href=\"#\" className=\"head-example\"><span className=\"next-sr-only\">unread messages</span></a>\n                    </Badge>\n                    <ButtonGroup>\n                        <Button aria-label=\"add\" onClick={this.increase}>\n                            <Icon type=\"add\"/>\n                        </Button>\n                        <Button aria-label=\"minus\" onClick={this.decrease}>\n                            <Icon type=\"minus\"/>\n                        </Button>\n                    </ButtonGroup>\n                </div>\n                <div>\n                    <Badge dot={this.state.show}>\n                        <a href=\"#\" className=\"head-example\"></a>\n                    </Badge>\n                    <Button onClick={this.onClick}>\n                        Toggle Display\n                    </Button>\n                </div>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.next-badge {\n    margin-right: 16px;\n}\n.change-count {\n    margin-bottom: 16px;\n}\n.head-example {\n    display: inline-block;\n    width: 42px;\n    height: 42px;\n    border-radius: 8px;\n    background: #eee;\n}
"} \ No newline at end of file diff --git a/compiled_docs/badge/demo/content.en-us.md b/compiled_docs/badge/demo/content.en-us.md new file mode 100644 index 0000000000..222465df97 --- /dev/null +++ b/compiled_docs/badge/demo/content.en-us.md @@ -0,0 +1 @@ +{"title":"Customized Content of Badge","meta":{"title":"Customized Content of Badge","description":"\n

You can set value of atrribute content to customize content of badge, customize content depend on what you code, and exclude any style.

\n","order":"4"},"codes":{"jsx":"import { Badge, Icon } from '@alifd/next';\n\nReactDOM.render(\n
\n \n \n \n } style={{backgroundColor: 'transparent', color: 'red', padding: 0}}>\n \n \n
, mountNode);\n","css":".next-badge {\n margin-right: 24px;\n}\n.head-example {\n display: inline-block;\n width: 42px;\n height: 42px;\n border-radius: 8px;\n background-color: #eee;\n}\n"},"body":"\n````jsx\nimport { Badge, Icon } from '@alifd/next';\n\nReactDOM.render(\n
\n \n \n \n } style={{backgroundColor: 'transparent', color: 'red', padding: 0}}>\n \n \n
, mountNode);\n````\n\n````css\n.next-badge {\n margin-right: 24px;\n}\n.head-example {\n display: inline-block;\n width: 42px;\n height: 42px;\n border-radius: 8px;\n background-color: #eee;\n}\n````","html":"
import { Badge, Icon } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Badge content=\"hot\" style={{backgroundColor: '#FC0E3D', color: '#FFFFFF'}}>\n            <a href=\"#\" className=\"head-example\"></a>\n        </Badge>\n        <Badge content={<Icon type=\"error\" />} style={{backgroundColor: 'transparent', color: 'red', padding: 0}}>\n            <a href=\"#\" className=\"head-example\"></a>\n        </Badge>\n    </div>, mountNode);
.next-badge {\n    margin-right: 24px;\n}\n.head-example {\n    display: inline-block;\n    width: 42px;\n    height: 42px;\n    border-radius: 8px;\n    background-color: #eee;\n}
"} \ No newline at end of file diff --git a/compiled_docs/badge/demo/content.md b/compiled_docs/badge/demo/content.md new file mode 100644 index 0000000000..5eecbb7042 --- /dev/null +++ b/compiled_docs/badge/demo/content.md @@ -0,0 +1 @@ +{"title":"自定义徽标内容","meta":{"title":"自定义徽标内容","description":"\n

通过 content 属性可以自定义徽标的内容，自定义内容不包含任何色彩样式，完全由使用者自己定义。

\n","order":"4"},"codes":{"jsx":"import { Badge, Icon } from '@alifd/next';\n\nReactDOM.render(\n
\n \n \n \n } style={{backgroundColor: 'transparent', color: 'red', padding: 0}}>\n \n \n
, mountNode);\n","css":".next-badge {\n margin-right: 24px;\n}\n.head-example {\n display: inline-block;\n width: 42px;\n height: 42px;\n border-radius: 8px;\n background-color: #eee;\n}\n"},"body":"\n\n````jsx\nimport { Badge, Icon } from '@alifd/next';\n\nReactDOM.render(\n
\n \n \n \n } style={{backgroundColor: 'transparent', color: 'red', padding: 0}}>\n \n \n
, mountNode);\n````\n\n````css\n.next-badge {\n margin-right: 24px;\n}\n.head-example {\n display: inline-block;\n width: 42px;\n height: 42px;\n border-radius: 8px;\n background-color: #eee;\n}\n````","html":"
import { Badge, Icon } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Badge content=\"hot\" style={{backgroundColor: '#FC0E3D', color: '#FFFFFF'}}>\n            <a href=\"#\" className=\"head-example\"></a>\n        </Badge>\n        <Badge content={<Icon type=\"error\" />} style={{backgroundColor: 'transparent', color: 'red', padding: 0}}>\n            <a href=\"#\" className=\"head-example\"></a>\n        </Badge>\n    </div>, mountNode);
.next-badge {\n    margin-right: 24px;\n}\n.head-example {\n    display: inline-block;\n    width: 42px;\n    height: 42px;\n    border-radius: 8px;\n    background-color: #eee;\n}
"} \ No newline at end of file diff --git a/compiled_docs/badge/demo/dot.en-us.md b/compiled_docs/badge/demo/dot.en-us.md new file mode 100644 index 0000000000..ef790b8ba6 --- /dev/null +++ b/compiled_docs/badge/demo/dot.en-us.md @@ -0,0 +1 @@ +{"title":"Red Dot","meta":{"title":"Red Dot","description":"\n

Just a red dot, not a number.

\n","order":"2"},"codes":{"jsx":"import { Badge, Icon } from '@alifd/next';\n\nReactDOM.render(\n
\n \n \n \n \n A Link\n \n
, mountNode);\n","css":".next-badge {\n margin-right: 16px;\n}\n"},"body":"\n````jsx\nimport { Badge, Icon } from '@alifd/next';\n\nReactDOM.render(\n
\n \n \n \n \n A Link\n \n
, mountNode);\n````\n\n````css\n.next-badge {\n margin-right: 16px;\n}\n````","html":"
import { Badge, Icon } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Badge dot>\n            <Icon type=\"email\" />\n        </Badge>\n        <Badge dot>\n            <a href=\"#\">A Link</a>\n        </Badge>\n    </div>, mountNode);
.next-badge {\n    margin-right: 16px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/badge/demo/dot.md b/compiled_docs/badge/demo/dot.md new file mode 100644 index 0000000000..fd0a7e0c91 --- /dev/null +++ b/compiled_docs/badge/demo/dot.md @@ -0,0 +1 @@ +{"title":"讨嫌的小红点","meta":{"title":"讨嫌的小红点","description":"\n

没有具体的数字。

\n","order":"2"},"codes":{"jsx":"import { Badge, Icon } from '@alifd/next';\n\nReactDOM.render(\n
\n \n \n \n \n A Link\n \n
, mountNode);\n","css":".next-badge {\n margin-right: 16px;\n}\n"},"body":"\n\n````jsx\nimport { Badge, Icon } from '@alifd/next';\n\nReactDOM.render(\n
\n \n \n \n \n A Link\n \n
, mountNode);\n````\n\n````css\n.next-badge {\n margin-right: 16px;\n}\n````","html":"
import { Badge, Icon } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Badge dot>\n            <Icon type=\"email\" />\n        </Badge>\n        <Badge dot>\n            <a href=\"#\">A Link</a>\n        </Badge>\n    </div>, mountNode);
.next-badge {\n    margin-right: 16px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/badge/demo/no-wrapper.en-us.md b/compiled_docs/badge/demo/no-wrapper.en-us.md new file mode 100644 index 0000000000..6b69fa242c --- /dev/null +++ b/compiled_docs/badge/demo/no-wrapper.en-us.md @@ -0,0 +1 @@ +{"title":"Alone Usage","meta":{"title":"Alone Usage","description":"\n

Alone usage mean that badge component wrap nothing, and you can custom style of badge component.

\n","order":"5"},"codes":{"jsx":"import { Badge } from '@alifd/next';\n\nReactDOM.render(\n
\n \n \n \n \n \n
, mountNode);\n","css":".next-badge {\n margin-right: 16px;\n}\n"},"body":"\n````jsx\nimport { Badge } from '@alifd/next';\n\nReactDOM.render(\n
\n \n \n \n \n \n
, mountNode);\n````\n\n````css\n.next-badge {\n margin-right: 16px;\n}\n````","html":"
import { Badge } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Badge count={25} />\n        <Badge count={4} style={{backgroundColor: '#fff', color: '#999', border: '1px solid #d9d9d9'}} />\n        <Badge count={109} style={{backgroundColor: '#87d068'}} />\n        <Badge dot />\n        <Badge content=\"hot\" style={{backgroundColor: '#FC0E3D', color: '#FFFFFF'}} />\n    </div>, mountNode);
.next-badge {\n    margin-right: 16px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/badge/demo/no-wrapper.md b/compiled_docs/badge/demo/no-wrapper.md new file mode 100644 index 0000000000..84c6ff8093 --- /dev/null +++ b/compiled_docs/badge/demo/no-wrapper.md @@ -0,0 +1 @@ +{"title":"独立使用","meta":{"title":"独立使用","description":"\n

不包裹任何元素即独立使用，可自定样式展示。

\n","order":"5"},"codes":{"jsx":"import { Badge } from '@alifd/next';\n\nReactDOM.render(\n
\n \n \n \n \n \n
, mountNode);\n","css":".next-badge {\n margin-right: 16px;\n}\n"},"body":"\n\n````jsx\nimport { Badge } from '@alifd/next';\n\nReactDOM.render(\n
\n \n \n \n \n \n
, mountNode);\n````\n\n````css\n.next-badge {\n margin-right: 16px;\n}\n````","html":"
import { Badge } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Badge count={25} />\n        <Badge count={4} style={{backgroundColor: '#fff', color: '#999', border: '1px solid #d9d9d9'}} />\n        <Badge count={109} style={{backgroundColor: '#87d068'}} />\n        <Badge dot />\n        <Badge content=\"hot\" style={{backgroundColor: '#FC0E3D', color: '#FFFFFF'}} />\n    </div>, mountNode);
.next-badge {\n    margin-right: 16px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/badge/demo/plus.en-us.md b/compiled_docs/badge/demo/plus.en-us.md new file mode 100644 index 0000000000..82c2f89461 --- /dev/null +++ b/compiled_docs/badge/demo/plus.en-us.md @@ -0,0 +1 @@ +{"title":"Large Number","meta":{"title":"Large Number","description":"\n

Display \\${overflowCount}+ when count is greater than overflowCount, default value of overflow is 99.

\n","order":"1"},"codes":{"jsx":"import { Badge } from '@alifd/next';\n\nReactDOM.render(\n
\n \n \n \n \n \n \n
, mountNode);\n","css":".next-badge {\n margin-right: 16px;\n}\n.head-example {\n display: inline-block;\n width: 42px;\n height: 42px;\n border-radius: 8px;\n background: #eee;\n}\n"},"body":"\n````jsx\nimport { Badge } from '@alifd/next';\n\nReactDOM.render(\n
\n \n \n \n \n \n \n
, mountNode);\n````\n\n````css\n.next-badge {\n margin-right: 16px;\n}\n.head-example {\n display: inline-block;\n width: 42px;\n height: 42px;\n border-radius: 8px;\n background: #eee;\n}\n````","html":"
import { Badge } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Badge count={100}>\n            <a href=\"#\" className=\"head-example\"></a>\n        </Badge>\n        <Badge count={200} overflowCount={199}>\n            <a href=\"#\" className=\"head-example\"></a>\n        </Badge>\n    </div>, mountNode);
.next-badge {\n    margin-right: 16px;\n}\n.head-example {\n    display: inline-block;\n    width: 42px;\n    height: 42px;\n    border-radius: 8px;\n    background: #eee;\n}
"} \ No newline at end of file diff --git a/compiled_docs/badge/demo/plus.md b/compiled_docs/badge/demo/plus.md new file mode 100644 index 0000000000..c4471140c4 --- /dev/null +++ b/compiled_docs/badge/demo/plus.md @@ -0,0 +1 @@ +{"title":"大数字","meta":{"title":"大数字","description":"\n

超过overflow的数值，会显示\\${overflow}+，overflow默认值为99。

\n","order":"1"},"codes":{"jsx":"import { Badge } from '@alifd/next';\n\nReactDOM.render(\n
\n \n \n \n \n \n \n
, mountNode);\n","css":".next-badge {\n margin-right: 16px;\n}\n.head-example {\n display: inline-block;\n width: 42px;\n height: 42px;\n border-radius: 8px;\n background: #eee;\n}\n"},"body":"\n\n````jsx\nimport { Badge } from '@alifd/next';\n\nReactDOM.render(\n
\n \n \n \n \n \n \n
, mountNode);\n````\n\n````css\n.next-badge {\n margin-right: 16px;\n}\n.head-example {\n display: inline-block;\n width: 42px;\n height: 42px;\n border-radius: 8px;\n background: #eee;\n}\n````","html":"
import { Badge } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Badge count={100}>\n            <a href=\"#\" className=\"head-example\"></a>\n        </Badge>\n        <Badge count={200} overflowCount={199}>\n            <a href=\"#\" className=\"head-example\"></a>\n        </Badge>\n    </div>, mountNode);
.next-badge {\n    margin-right: 16px;\n}\n.head-example {\n    display: inline-block;\n    width: 42px;\n    height: 42px;\n    border-radius: 8px;\n    background: #eee;\n}
"} \ No newline at end of file diff --git a/compiled_docs/badge/index.en-us.md b/compiled_docs/badge/index.en-us.md new file mode 100644 index 0000000000..de2f9dc3a2 --- /dev/null +++ b/compiled_docs/badge/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Develop Guide#

When to Use#

When we receive a new message, or our app/plugin/module should be update or upgrade.

\n

Accessibility#

You can add class as below, so that messages will not appear on pages, but can be read by screen reader.\n<span className="next-sr-only">unread messages</span>

\n

API#

","api":"

Badge#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
childrencontent of Badge based onReactNode-
countnumber to display, display ${overflowCount}+ when count is greater than overflowCount, display none when count equal to 0Number/String0
contentcustomized node contentReactNode-
overflowCountmax number to displayNumber/String99
dotdisplay a red dot, not a numberBooleanfalse
\n"} \ No newline at end of file diff --git a/compiled_docs/badge/index.md b/compiled_docs/badge/index.md new file mode 100644 index 0000000000..db1eea5dd5 --- /dev/null +++ b/compiled_docs/badge/index.md @@ -0,0 +1 @@ +{"meta":"

开发指南#

何时使用#

在有新消息、讯息时，或者是app/插件/功能模块可以更新、升级时使用这个组件。

\n

无障碍#

可通过添加如下class，使内容仅能被读屏软件读取，但不会展示到页面上\n<span className="next-sr-only">unread messages</span>

\n

API#

","api":"

Badge#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
children徽章依托的内容ReactNode-
count展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为 0 时隐藏Number/String0
content自定义节点内容ReactNode-
overflowCount展示的封顶的数字Number/String99
dot不展示数字，只展示一个小红点Booleanfalse
\n"} \ No newline at end of file diff --git a/compiled_docs/balloon/demo/accessibility.en-us.md b/compiled_docs/balloon/demo/accessibility.en-us.md new file mode 100644 index 0000000000..33ff0dcc27 --- /dev/null +++ b/compiled_docs/balloon/demo/accessibility.en-us.md @@ -0,0 +1 @@ +{"title":"Accessibility","meta":{"title":"Accessibility","description":"\n

id of popup. only when you set value, balloon will support accessibility.

\n","order":"8"},"codes":{"jsx":"\nimport { Button, Balloon, Input } from '@alifd/next';\nimport moment from 'moment';\n\nconst { Tooltip } = Balloon;\nconst innerButton = ;\nconst triggerTooltip = ;\n\nconst App = () => (\n
\n Fill in sub-form} popupContainer={(trigger) => trigger.parentNode} triggerType=\"click\">\n please input your age:\n

\n \n\n         \n\n \n Fill in sub-form} popupContainer={(trigger) => trigger.parentNode} triggerType=\"click\">\n please input your age:\n

\n \n
\n please input your name:\n

\n \n\n         \n\n \n

This is content for tooltip.

\n \n
\n);\n\nReactDOM.render(, mountNode);\n","css":".container.nested {\n margin-left: 100px;\n margin-bottom: 50px;\n}\n"},"body":"\n````jsx\n\nimport { Button, Balloon, Input } from '@alifd/next';\nimport moment from 'moment';\n\nconst { Tooltip } = Balloon;\nconst innerButton = ;\nconst triggerTooltip = ;\n\nconst App = () => (\n
\n Fill in sub-form} popupContainer={(trigger) => trigger.parentNode} triggerType=\"click\">\n please input your age:\n

\n \n\n         \n\n \n Fill in sub-form} popupContainer={(trigger) => trigger.parentNode} triggerType=\"click\">\n please input your age:\n

\n \n
\n please input your name:\n

\n \n\n         \n\n \n

This is content for tooltip.

\n \n
\n);\n\nReactDOM.render(, mountNode);\n````\n\n```css\n.container.nested {\n margin-left: 100px;\n margin-bottom: 50px;\n}\n```","html":"
\nimport { Button, Balloon, Input } from '@alifd/next';\nimport moment from 'moment';\n\nconst { Tooltip } = Balloon;\nconst innerButton = <Button className=\"btrigger\">Fill in form</Button>;\nconst triggerTooltip = <Button style={{margin: '5px'}}>show tooltip</Button>;\n\nconst App = () => (\n    <div className=\"container nested\">\n        <Balloon id=\"inner-a11y-balloon-1\" autoFocus trigger={<Button type=\"primary\">Fill in sub-form</Button>} popupContainer={(trigger) => trigger.parentNode} triggerType=\"click\">\n            please input your age:\n            <Input placeholder=\"Age\" size=\"small\" label=\"Age :\" id=\"balloon-input-1\" /><br /><br />\n        </Balloon>\n\n        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n\n        <Balloon id=\"a11y-balloon\" type=\"primary\" autoFocus trigger={innerButton} triggerType=\"click\">\n            <Balloon id=\"inner-a11y-balloon\" autoFocus trigger={<Button type=\"primary\">Fill in sub-form</Button>} popupContainer={(trigger) => trigger.parentNode} triggerType=\"click\">\n                please input your age:\n                <Input placeholder=\"Age\" size=\"small\" label=\"Age :\" id=\"balloon-input-2\" /><br /><br />\n            </Balloon>\n            <br />\n            please input your name:\n            <Input placeholder=\"Name\" size=\"small\" label=\"Name :\" id=\"balloon-input-3\" /><br /><br />\n        </Balloon>\n\n        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n\n        <Tooltip trigger={triggerTooltip} id=\"aria-tooltip\">\n            <p>This is content for tooltip.</p>\n        </Tooltip>\n    </div>\n);\n\nReactDOM.render(<App />, mountNode);
.container.nested {\n    margin-left: 100px;\n    margin-bottom: 50px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/balloon/demo/accessibility.md b/compiled_docs/balloon/demo/accessibility.md new file mode 100644 index 0000000000..c3ac435c10 --- /dev/null +++ b/compiled_docs/balloon/demo/accessibility.md @@ -0,0 +1 @@ +{"title":"无障碍","meta":{"title":"无障碍","description":"\n

弹层id, 传入值才会支持无障碍。

\n","order":"8"},"codes":{"jsx":"\nimport { Button, Balloon, Input } from '@alifd/next';\nimport moment from 'moment';\n\nconst { Tooltip } = Balloon;\nconst innerButton = ;\nconst triggerTooltip = ;\n\nconst App = () => (\n
\n Fill in sub-form} popupContainer={(trigger) => trigger.parentNode} triggerType=\"click\">\n please input your age:\n

\n \n\n         \n\n \n Fill in sub-form} popupContainer={(trigger) => trigger.parentNode} triggerType=\"click\">\n please input your age:\n

\n \n
\n please input your name:\n

\n \n\n         \n\n \n

This is content for tooltip.

\n \n
\n);\n\nReactDOM.render(, mountNode);\n","css":".container.nested {\n margin-left: 100px;\n margin-bottom: 50px;\n}\n"},"body":"\n\n````jsx\n\nimport { Button, Balloon, Input } from '@alifd/next';\nimport moment from 'moment';\n\nconst { Tooltip } = Balloon;\nconst innerButton = ;\nconst triggerTooltip = ;\n\nconst App = () => (\n
\n Fill in sub-form} popupContainer={(trigger) => trigger.parentNode} triggerType=\"click\">\n please input your age:\n

\n \n\n         \n\n \n Fill in sub-form} popupContainer={(trigger) => trigger.parentNode} triggerType=\"click\">\n please input your age:\n

\n \n
\n please input your name:\n

\n \n\n         \n\n \n

This is content for tooltip.

\n \n
\n);\n\nReactDOM.render(, mountNode);\n````\n\n```css\n.container.nested {\n margin-left: 100px;\n margin-bottom: 50px;\n}\n```","html":"
\nimport { Button, Balloon, Input } from '@alifd/next';\nimport moment from 'moment';\n\nconst { Tooltip } = Balloon;\nconst innerButton = <Button className=\"btrigger\">Fill in form</Button>;\nconst triggerTooltip = <Button style={{margin: '5px'}}>show tooltip</Button>;\n\nconst App = () => (\n    <div className=\"container nested\">\n        <Balloon id=\"inner-a11y-balloon-1\" autoFocus trigger={<Button type=\"primary\">Fill in sub-form</Button>} popupContainer={(trigger) => trigger.parentNode} triggerType=\"click\">\n            please input your age:\n            <Input placeholder=\"Age\" size=\"small\" label=\"Age :\" id=\"balloon-input-1\" /><br /><br />\n        </Balloon>\n\n        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n\n        <Balloon id=\"a11y-balloon\" type=\"primary\" autoFocus trigger={innerButton} triggerType=\"click\">\n            <Balloon id=\"inner-a11y-balloon\" autoFocus trigger={<Button type=\"primary\">Fill in sub-form</Button>} popupContainer={(trigger) => trigger.parentNode} triggerType=\"click\">\n                please input your age:\n                <Input placeholder=\"Age\" size=\"small\" label=\"Age :\" id=\"balloon-input-2\" /><br /><br />\n            </Balloon>\n            <br />\n            please input your name:\n            <Input placeholder=\"Name\" size=\"small\" label=\"Name :\" id=\"balloon-input-3\" /><br /><br />\n        </Balloon>\n\n        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n\n        <Tooltip trigger={triggerTooltip} id=\"aria-tooltip\">\n            <p>This is content for tooltip.</p>\n        </Tooltip>\n    </div>\n);\n\nReactDOM.render(<App />, mountNode);
.container.nested {\n    margin-left: 100px;\n    margin-bottom: 50px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/balloon/demo/alignment.en-us.md b/compiled_docs/balloon/demo/alignment.en-us.md new file mode 100644 index 0000000000..c8617dfe5b --- /dev/null +++ b/compiled_docs/balloon/demo/alignment.en-us.md @@ -0,0 +1 @@ +{"title":"Alignment","meta":{"title":"Alignment","description":"\n

There are 12 options for align

\n","order":"3"},"codes":{"jsx":"import { Button, Balloon } from '@alifd/next';\n\n\n\n\nconst top = ;\nconst right = ;\nconst bottom = ;\nconst left = ;\nconst topLeft = ;\nconst topRight = ;\nconst rightTop = ;\nconst rightBottom = ;\nconst bottomLeft = ;\nconst bottomRight = ;\nconst leftTop = ;\nconst leftBottom = ;\n\nconst Content = () => (\n
\n

balloon title

\n
\n

\n balloon content\n

\n
\n);\n\nconst App = () => (\n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n);\n\nReactDOM.render(, mountNode);\n\n"},"body":"\n````jsx\nimport { Button, Balloon } from '@alifd/next';\n\n\n\n\nconst top = ;\nconst right = ;\nconst bottom = ;\nconst left = ;\nconst topLeft = ;\nconst topRight = ;\nconst rightTop = ;\nconst rightBottom = ;\nconst bottomLeft = ;\nconst bottomRight = ;\nconst leftTop = ;\nconst leftBottom = ;\n\nconst Content = () => (\n
\n

balloon title

\n
\n

\n balloon content\n

\n
\n);\n\nconst App = () => (\n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n);\n\nReactDOM.render(, mountNode);\n\n````","html":"
import { Button, Balloon } from '@alifd/next';\n\n\n\n\nconst top = <Button id=\"top\" style={{margin: '5px'}} className=\"btrigger\">top</Button>;\nconst right = <Button id=\"right\" style={{margin: '5px'}} className=\"btrigger\">right</Button>;\nconst bottom = <Button id=\"bottom\" style={{margin: '5px'}} className=\"btrigger\">bottom</Button>;\nconst left = <Button id=\"left\" style={{margin: '5px'}} className=\"btrigger\">left</Button>;\nconst topLeft = <Button id=\"topLeft\" style={{margin: '5px'}} className=\"btrigger\">top left</Button>;\nconst topRight = <Button id=\"topRight\" style={{margin: '5px'}} className=\"btrigger\">top right</Button>;\nconst rightTop = <Button id=\"rightTop\" style={{margin: '5px'}} className=\"btrigger\">right top</Button>;\nconst rightBottom = <Button id=\"rightBottom\" style={{margin: '5px'}} className=\"btrigger\">right bottom</Button>;\nconst bottomLeft = <Button id=\"bottomLeft\" style={{margin: '5px'}} className=\"btrigger\">bottom left</Button>;\nconst bottomRight = <Button id=\"bottomRight\" style={{margin: '5px'}} className=\"btrigger\">bottom right</Button>;\nconst leftTop = <Button id=\"leftTop\" style={{margin: '5px'}} className=\"btrigger\">left top</Button>;\nconst leftBottom = <Button id=\"leftBottom\" style={{margin: '5px'}} className=\"btrigger\">left bottom</Button>;\n\nconst Content = () => (\n    <div>\n        <h4 style={{marginTop: 0}}>balloon title</h4>\n        <hr/>\n        <p>\n            balloon content\n        </p>\n    </div>\n);\n\nconst App = () => (\n    <div style={{paddingLeft: 320, paddingTop: 100}}>\n        <div style={{marginLeft: 75}}>\n            <Balloon trigger={topLeft} align=\"tl\" alignEdge triggerType=\"click\" style={{width: 300}}>\n                <Content/>\n            </Balloon>\n            <Balloon trigger={top} align=\"t\" alignEdge triggerType=\"click\" style={{width: 300}}>\n                <Content/>\n            </Balloon>\n            <Balloon trigger={topRight} align=\"tr\" alignEdge triggerType=\"click\" style={{width: 300}}>\n                <Content/>\n            </Balloon>\n        </div>\n        <div style={{width: 80, float: 'left'}}>\n            <Balloon trigger={leftTop} align=\"lt\" alignEdge triggerType=\"click\" style={{width: 300}}>\n                <Content/>\n            </Balloon>\n            <Balloon trigger={left} align=\"l\" alignEdge triggerType=\"click\" style={{width: 300}}>\n                <Content/>\n            </Balloon>\n            <Balloon trigger={leftBottom} align=\"lb\" alignEdge triggerType=\"click\" style={{width: 300}}>\n                <Content/>\n            </Balloon>\n        </div>\n        <div style={{width: 80, marginLeft: 290}}>\n            <Balloon trigger={rightTop} align=\"rt\" alignEdge triggerType=\"click\" style={{width: 300}}>\n                <Content/>\n            </Balloon>\n            <Balloon trigger={right} align=\"r\" alignEdge triggerType=\"click\" style={{width: 300}}>\n                <Content/>\n            </Balloon>\n            <Balloon trigger={rightBottom} align=\"rb\" alignEdge triggerType=\"click\" style={{width: 300}}>\n                <Content/>\n            </Balloon>\n        </div>\n        <div style={{marginLeft: 80, clear: 'both'}}>\n            <Balloon trigger={bottomLeft} align=\"bl\" alignEdge triggerType=\"click\" style={{width: 300}}>\n                <Content/>\n            </Balloon>\n            <Balloon trigger={bottom} align=\"b\" alignEdge triggerType=\"click\" style={{width: 300}}>\n                <Content/>\n            </Balloon>\n            <Balloon trigger={bottomRight} align=\"br\" alignEdge triggerType=\"click\" style={{width: 300}}>\n                <Content/>\n            </Balloon>\n        </div>\n    </div>\n);\n\nReactDOM.render(<App />, mountNode);\n
"} \ No newline at end of file diff --git a/compiled_docs/balloon/demo/alignment.md b/compiled_docs/balloon/demo/alignment.md new file mode 100644 index 0000000000..df96ae196e --- /dev/null +++ b/compiled_docs/balloon/demo/alignment.md @@ -0,0 +1 @@ +{"title":"边缘对齐设置","meta":{"title":"边缘对齐设置","description":"\n

位置有十二个方向。

\n","order":"3"},"codes":{"jsx":"import { Button, Balloon } from '@alifd/next';\n\n\n\n\nconst top = ;\nconst right = ;\nconst bottom = ;\nconst left = ;\nconst topLeft = ;\nconst topRight = ;\nconst rightTop = ;\nconst rightBottom = ;\nconst bottomLeft = ;\nconst bottomRight = ;\nconst leftTop = ;\nconst leftBottom = ;\n\nconst Content = () => (\n
\n

balloon title

\n
\n

\n balloon content\n

\n
\n);\n\nconst App = () => (\n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n);\n\nReactDOM.render(, mountNode);\n\n"},"body":"\n\n\n````jsx\nimport { Button, Balloon } from '@alifd/next';\n\n\n\n\nconst top = ;\nconst right = ;\nconst bottom = ;\nconst left = ;\nconst topLeft = ;\nconst topRight = ;\nconst rightTop = ;\nconst rightBottom = ;\nconst bottomLeft = ;\nconst bottomRight = ;\nconst leftTop = ;\nconst leftBottom = ;\n\nconst Content = () => (\n
\n

balloon title

\n
\n

\n balloon content\n

\n
\n);\n\nconst App = () => (\n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n \n \n \n \n \n \n \n \n \n
\n
\n);\n\nReactDOM.render(, mountNode);\n\n````","html":"
import { Button, Balloon } from '@alifd/next';\n\n\n\n\nconst top = <Button id=\"top\" style={{margin: '5px'}} className=\"btrigger\">top</Button>;\nconst right = <Button id=\"right\" style={{margin: '5px'}} className=\"btrigger\">right</Button>;\nconst bottom = <Button id=\"bottom\" style={{margin: '5px'}} className=\"btrigger\">bottom</Button>;\nconst left = <Button id=\"left\" style={{margin: '5px'}} className=\"btrigger\">left</Button>;\nconst topLeft = <Button id=\"topLeft\" style={{margin: '5px'}} className=\"btrigger\">top left</Button>;\nconst topRight = <Button id=\"topRight\" style={{margin: '5px'}} className=\"btrigger\">top right</Button>;\nconst rightTop = <Button id=\"rightTop\" style={{margin: '5px'}} className=\"btrigger\">right top</Button>;\nconst rightBottom = <Button id=\"rightBottom\" style={{margin: '5px'}} className=\"btrigger\">right bottom</Button>;\nconst bottomLeft = <Button id=\"bottomLeft\" style={{margin: '5px'}} className=\"btrigger\">bottom left</Button>;\nconst bottomRight = <Button id=\"bottomRight\" style={{margin: '5px'}} className=\"btrigger\">bottom right</Button>;\nconst leftTop = <Button id=\"leftTop\" style={{margin: '5px'}} className=\"btrigger\">left top</Button>;\nconst leftBottom = <Button id=\"leftBottom\" style={{margin: '5px'}} className=\"btrigger\">left bottom</Button>;\n\nconst Content = () => (\n    <div>\n        <h4 style={{marginTop: 0}}>balloon title</h4>\n        <hr/>\n        <p>\n            balloon content\n        </p>\n    </div>\n);\n\nconst App = () => (\n    <div style={{paddingLeft: 320, paddingTop: 100}}>\n        <div style={{marginLeft: 75}}>\n            <Balloon trigger={topLeft} align=\"tl\" alignEdge triggerType=\"click\" style={{width: 300}}>\n                <Content/>\n            </Balloon>\n            <Balloon trigger={top} align=\"t\" alignEdge triggerType=\"click\" style={{width: 300}}>\n                <Content/>\n            </Balloon>\n            <Balloon trigger={topRight} align=\"tr\" alignEdge triggerType=\"click\" style={{width: 300}}>\n                <Content/>\n            </Balloon>\n        </div>\n        <div style={{width: 80, float: 'left'}}>\n            <Balloon trigger={leftTop} align=\"lt\" alignEdge triggerType=\"click\" style={{width: 300}}>\n                <Content/>\n            </Balloon>\n            <Balloon trigger={left} align=\"l\" alignEdge triggerType=\"click\" style={{width: 300}}>\n                <Content/>\n            </Balloon>\n            <Balloon trigger={leftBottom} align=\"lb\" alignEdge triggerType=\"click\" style={{width: 300}}>\n                <Content/>\n            </Balloon>\n        </div>\n        <div style={{width: 80, marginLeft: 290}}>\n            <Balloon trigger={rightTop} align=\"rt\" alignEdge triggerType=\"click\" style={{width: 300}}>\n                <Content/>\n            </Balloon>\n            <Balloon trigger={right} align=\"r\" alignEdge triggerType=\"click\" style={{width: 300}}>\n                <Content/>\n            </Balloon>\n            <Balloon trigger={rightBottom} align=\"rb\" alignEdge triggerType=\"click\" style={{width: 300}}>\n                <Content/>\n            </Balloon>\n        </div>\n        <div style={{marginLeft: 80, clear: 'both'}}>\n            <Balloon trigger={bottomLeft} align=\"bl\" alignEdge triggerType=\"click\" style={{width: 300}}>\n                <Content/>\n            </Balloon>\n            <Balloon trigger={bottom} align=\"b\" alignEdge triggerType=\"click\" style={{width: 300}}>\n                <Content/>\n            </Balloon>\n            <Balloon trigger={bottomRight} align=\"br\" alignEdge triggerType=\"click\" style={{width: 300}}>\n                <Content/>\n            </Balloon>\n        </div>\n    </div>\n);\n\nReactDOM.render(<App />, mountNode);\n
"} \ No newline at end of file diff --git a/compiled_docs/balloon/demo/basic.en-us.md b/compiled_docs/balloon/demo/basic.en-us.md new file mode 100644 index 0000000000..e85c20e250 --- /dev/null +++ b/compiled_docs/balloon/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

Basic usage.

\n","order":"0"},"codes":{"jsx":"import { Button, Balloon } from '@alifd/next';\n\n\n\nconst defaultTrigger = ;\nconst disabledTrigger = ;\nconst primary = ;\n\nconst Demo = () => (\n
\n \n default\n \n \n primary\n \n \n disabeled default\n \n
\n);\n\nReactDOM.render(, mountNode);\n\n"},"body":"\n````jsx\nimport { Button, Balloon } from '@alifd/next';\n\n\n\nconst defaultTrigger = ;\nconst disabledTrigger = ;\nconst primary = ;\n\nconst Demo = () => (\n
\n \n default\n \n \n primary\n \n \n disabeled default\n \n
\n);\n\nReactDOM.render(, mountNode);\n\n````","html":"
import { Button, Balloon } from '@alifd/next';\n\n\n\nconst defaultTrigger = <Button className=\"btrigger\" style={{margin: '5px'}}>default style</Button>;\nconst disabledTrigger = <Button disabled className=\"btrigger\" style={{margin: '5px'}}>default style</Button>;\nconst primary = <Button className=\"btrigger\" style={{margin: '5px'}}>primary style</Button>;\n\nconst Demo = () => (\n    <div className=\"container\">\n        <Balloon trigger={defaultTrigger} closable={false}>\n            default\n        </Balloon>\n        <Balloon type=\"primary\" trigger={primary} triggerType=\"click\">\n            primary\n        </Balloon>\n        <Balloon trigger={disabledTrigger} closable={false}>\n            disabeled default\n        </Balloon>\n    </div>\n);\n\nReactDOM.render(<Demo />, mountNode);\n
"} \ No newline at end of file diff --git a/compiled_docs/balloon/demo/basic.md b/compiled_docs/balloon/demo/basic.md new file mode 100644 index 0000000000..bd7d1d5f41 --- /dev/null +++ b/compiled_docs/balloon/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

最简单的用法。

\n","order":"0"},"codes":{"jsx":"import { Button, Balloon } from '@alifd/next';\n\n\n\nconst defaultTrigger = ;\nconst disabledTrigger = ;\nconst primary = ;\n\nconst Demo = () => (\n
\n \n default\n \n \n primary\n \n \n disabeled default\n \n
\n);\n\nReactDOM.render(, mountNode);\n\n"},"body":"\n\n````jsx\nimport { Button, Balloon } from '@alifd/next';\n\n\n\nconst defaultTrigger = ;\nconst disabledTrigger = ;\nconst primary = ;\n\nconst Demo = () => (\n
\n \n default\n \n \n primary\n \n \n disabeled default\n \n
\n);\n\nReactDOM.render(, mountNode);\n\n````","html":"
import { Button, Balloon } from '@alifd/next';\n\n\n\nconst defaultTrigger = <Button className=\"btrigger\" style={{margin: '5px'}}>default style</Button>;\nconst disabledTrigger = <Button disabled className=\"btrigger\" style={{margin: '5px'}}>default style</Button>;\nconst primary = <Button className=\"btrigger\" style={{margin: '5px'}}>primary style</Button>;\n\nconst Demo = () => (\n    <div className=\"container\">\n        <Balloon trigger={defaultTrigger} closable={false}>\n            default\n        </Balloon>\n        <Balloon type=\"primary\" trigger={primary} triggerType=\"click\">\n            primary\n        </Balloon>\n        <Balloon trigger={disabledTrigger} closable={false}>\n            disabeled default\n        </Balloon>\n    </div>\n);\n\nReactDOM.render(<Demo />, mountNode);\n
"} \ No newline at end of file diff --git a/compiled_docs/balloon/demo/control.en-us.md b/compiled_docs/balloon/demo/control.en-us.md new file mode 100644 index 0000000000..767a516d1c --- /dev/null +++ b/compiled_docs/balloon/demo/control.en-us.md @@ -0,0 +1 @@ +{"title":"Control","meta":{"title":"Control","description":"\n

Use 'visible' to control whether the popup should be displayed.

\n","order":"4"},"codes":{"jsx":"import { Button, Balloon } from '@alifd/next';\n\n\n\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n visible: false\n };\n }\n\n hide() {\n this.setState({\n visible: false\n });\n }\n\n // onVisibleChange callback will be triggered when visible changes.\n // For example, for click type, it'll be triggered when clicking the button and later the other areas;\n // for hover type, it'll be triggered when mouse enter and mouse leave\n handleVisibleChange(visible) {\n this.setState({visible});\n }\n\n onClose() {\n console.log('onClose doing!');\n }\n\n afterClose() {\n console.log('afterClose doing!');\n }\n render() {\n const visibleTrigger = ;\n const clickTrigger = ;\n\n const content = (
\n click the button
\n confirm\n cancel\n
);\n return (\n
\n \n {content}\n \n \n {content}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n\n"},"body":"\n````jsx\nimport { Button, Balloon } from '@alifd/next';\n\n\n\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n visible: false\n };\n }\n\n hide() {\n this.setState({\n visible: false\n });\n }\n\n // onVisibleChange callback will be triggered when visible changes.\n // For example, for click type, it'll be triggered when clicking the button and later the other areas;\n // for hover type, it'll be triggered when mouse enter and mouse leave\n handleVisibleChange(visible) {\n this.setState({visible});\n }\n\n onClose() {\n console.log('onClose doing!');\n }\n\n afterClose() {\n console.log('afterClose doing!');\n }\n render() {\n const visibleTrigger = ;\n const clickTrigger = ;\n\n const content = (
\n click the button
\n confirm\n cancel\n
);\n return (\n
\n \n {content}\n \n \n {content}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n\n````","html":"
import { Button, Balloon } from '@alifd/next';\n\n\n\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            visible: false\n        };\n    }\n\n    hide() {\n        this.setState({\n            visible: false\n        });\n    }\n\n    // onVisibleChange callback will be triggered when visible changes.\n    // For example, for click type, it'll be triggered when clicking the button and later the other areas;\n    // for hover type, it'll be triggered when mouse enter and mouse leave\n    handleVisibleChange(visible) {\n        this.setState({visible});\n    }\n\n    onClose() {\n        console.log('onClose doing!');\n    }\n\n    afterClose() {\n        console.log('afterClose doing!');\n    }\n    render() {\n        const visibleTrigger = <Button type=\"primary\" style={{margin: '5px'}}>click to popup the card</Button>;\n        const clickTrigger = <Button type=\"primary\" style={{margin: '5px'}}>hover to popup the card</Button>;\n\n        const content = (<div>\n            click the button<br/>\n            <a style={{right: 0}} id=\"confirmBtn\" onClick={this.hide.bind(this)}>confirm</a>\n            <a style={{marginLeft: '4px'}} id=\"cancelBtn\" onClick={this.hide.bind(this)}>cancel</a>\n        </div>);\n        return (\n            <div>\n                <Balloon trigger={visibleTrigger}\n                    triggerType=\"click\"\n                    visible={this.state.visible}\n                    onVisibleChange={this.handleVisibleChange.bind(this)}\n                >\n                    {content}\n                </Balloon>\n                <Balloon trigger={clickTrigger}\n                    triggerType=\"hover\"\n                    onClose={this.onClose.bind(this)}\n                    afterClose={this.afterClose.bind(this)}>\n                    {content}\n                </Balloon>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App />, mountNode);\n
"} \ No newline at end of file diff --git a/compiled_docs/balloon/demo/control.md b/compiled_docs/balloon/demo/control.md new file mode 100644 index 0000000000..d5218051f3 --- /dev/null +++ b/compiled_docs/balloon/demo/control.md @@ -0,0 +1 @@ +{"title":"从浮层内关闭, 事件回调","meta":{"title":"从浮层内关闭, 事件回调","description":"\n

使用 visible ,属性控制浮层显示, 使 balloon 变为受限组件。

\n","order":"4"},"codes":{"jsx":"import { Button, Balloon } from '@alifd/next';\n\n\n\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n visible: false\n };\n }\n\n hide() {\n this.setState({\n visible: false\n });\n }\n\n // onVisibleChange callback will be triggered when visible changes.\n // For example, for click type, it'll be triggered when clicking the button and later the other areas;\n // for hover type, it'll be triggered when mouse enter and mouse leave\n handleVisibleChange(visible) {\n this.setState({visible});\n }\n\n onClose() {\n console.log('onClose doing!');\n }\n\n afterClose() {\n console.log('afterClose doing!');\n }\n render() {\n const visibleTrigger = ;\n const clickTrigger = ;\n\n const content = (
\n click the button
\n confirm\n cancel\n
);\n return (\n
\n \n {content}\n \n \n {content}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n\n"},"body":"\n\n\n\n````jsx\nimport { Button, Balloon } from '@alifd/next';\n\n\n\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n visible: false\n };\n }\n\n hide() {\n this.setState({\n visible: false\n });\n }\n\n // onVisibleChange callback will be triggered when visible changes.\n // For example, for click type, it'll be triggered when clicking the button and later the other areas;\n // for hover type, it'll be triggered when mouse enter and mouse leave\n handleVisibleChange(visible) {\n this.setState({visible});\n }\n\n onClose() {\n console.log('onClose doing!');\n }\n\n afterClose() {\n console.log('afterClose doing!');\n }\n render() {\n const visibleTrigger = ;\n const clickTrigger = ;\n\n const content = (
\n click the button
\n confirm\n cancel\n
);\n return (\n
\n \n {content}\n \n \n {content}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n\n````","html":"
import { Button, Balloon } from '@alifd/next';\n\n\n\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            visible: false\n        };\n    }\n\n    hide() {\n        this.setState({\n            visible: false\n        });\n    }\n\n    // onVisibleChange callback will be triggered when visible changes.\n    // For example, for click type, it'll be triggered when clicking the button and later the other areas;\n    // for hover type, it'll be triggered when mouse enter and mouse leave\n    handleVisibleChange(visible) {\n        this.setState({visible});\n    }\n\n    onClose() {\n        console.log('onClose doing!');\n    }\n\n    afterClose() {\n        console.log('afterClose doing!');\n    }\n    render() {\n        const visibleTrigger = <Button type=\"primary\" style={{margin: '5px'}}>click to popup the card</Button>;\n        const clickTrigger = <Button type=\"primary\" style={{margin: '5px'}}>hover to popup the card</Button>;\n\n        const content = (<div>\n            click the button<br/>\n            <a style={{right: 0}} id=\"confirmBtn\" onClick={this.hide.bind(this)}>confirm</a>\n            <a style={{marginLeft: '4px'}} id=\"cancelBtn\" onClick={this.hide.bind(this)}>cancel</a>\n        </div>);\n        return (\n            <div>\n                <Balloon trigger={visibleTrigger}\n                    triggerType=\"click\"\n                    visible={this.state.visible}\n                    onVisibleChange={this.handleVisibleChange.bind(this)}\n                >\n                    {content}\n                </Balloon>\n                <Balloon trigger={clickTrigger}\n                    triggerType=\"hover\"\n                    onClose={this.onClose.bind(this)}\n                    afterClose={this.afterClose.bind(this)}>\n                    {content}\n                </Balloon>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App />, mountNode);\n
"} \ No newline at end of file diff --git a/compiled_docs/balloon/demo/nested.en-us.md b/compiled_docs/balloon/demo/nested.en-us.md new file mode 100644 index 0000000000..594a99cc70 --- /dev/null +++ b/compiled_docs/balloon/demo/nested.en-us.md @@ -0,0 +1 @@ +{"title":"Nested","meta":{"title":"Nested","description":"\n

When popup is nested in another popup, say DatePicker is nested in Balloon, use safeNode to avoid the unexpected Balloon's closing.

\n","order":"6"},"codes":{"jsx":"import { Button, Balloon, DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst primary = ;\nconst innerButton = ;\nconst dateValue = moment('2018-01-01', 'YYYY-MM-DD', true);\n\nconst App = () => (\n
\n \n trigger.parentNode\n } />\n \n          \n \n please click} popupContainer={(trigger) => trigger.parentNode} triggerType=\"click\">\n nesting balloon content\n \n \n
\n);\n\nReactDOM.render(, mountNode);\n\n","css":"\n.container.nested {\n margin-left: 100px;\n margin-bottom: 50px;\n}\n\n"},"body":"\n````jsx\nimport { Button, Balloon, DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst primary = ;\nconst innerButton = ;\nconst dateValue = moment('2018-01-01', 'YYYY-MM-DD', true);\n\nconst App = () => (\n
\n \n trigger.parentNode\n } />\n \n          \n \n please click} popupContainer={(trigger) => trigger.parentNode} triggerType=\"click\">\n nesting balloon content\n \n \n
\n);\n\nReactDOM.render(, mountNode);\n\n````\n\n```css\n\n.container.nested {\n margin-left: 100px;\n margin-bottom: 50px;\n}\n\n```","html":"
import { Button, Balloon, DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst primary = <Button className=\"btrigger\">primary</Button>;\nconst innerButton = <Button className=\"btrigger\">innerButton</Button>;\nconst dateValue = moment('2018-01-01', 'YYYY-MM-DD', true);\n\nconst App = () => (\n    <div className=\"container nested\">\n        <Balloon type=\"primary\" autoFocus trigger={primary} closable={false} triggerType=\"click\">\n            <DatePicker defaultValue={dateValue} popupContainer={\n                (trigger) => trigger.parentNode\n            } />\n        </Balloon>\n        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n        <Balloon type=\"primary\" autoFocus trigger={innerButton} closable={false} triggerType=\"click\">\n            <Balloon trigger={<Button type=\"primary\">please click</Button>} popupContainer={(trigger) => trigger.parentNode} triggerType=\"click\">\n                nesting balloon content\n            </Balloon>\n        </Balloon>\n    </div>\n);\n\nReactDOM.render(<App />, mountNode);\n
\n.container.nested {\n    margin-left: 100px;\n    margin-bottom: 50px;\n}\n
"} \ No newline at end of file diff --git a/compiled_docs/balloon/demo/nested.md b/compiled_docs/balloon/demo/nested.md new file mode 100644 index 0000000000..15fc99bac4 --- /dev/null +++ b/compiled_docs/balloon/demo/nested.md @@ -0,0 +1 @@ +{"title":"嵌套浮层问题","meta":{"title":"嵌套浮层问题","description":"\n

浮层中如果又有浮层,比如在Balloon中有DatePicker的浮层,需要用safeNode解决datePicker选择时,balloon浮层关闭的问题.

\n","order":"6"},"codes":{"jsx":"import { Button, Balloon, DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst primary = ;\nconst innerButton = ;\nconst dateValue = moment('2018-01-01', 'YYYY-MM-DD', true);\n\nconst App = () => (\n
\n \n trigger.parentNode\n } />\n \n          \n \n please click} popupContainer={(trigger) => trigger.parentNode} triggerType=\"click\">\n nesting balloon content\n \n \n
\n);\n\nReactDOM.render(, mountNode);\n\n","css":"\n.container.nested {\n margin-left: 100px;\n margin-bottom: 50px;\n}\n\n"},"body":"\n\n````jsx\nimport { Button, Balloon, DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst primary = ;\nconst innerButton = ;\nconst dateValue = moment('2018-01-01', 'YYYY-MM-DD', true);\n\nconst App = () => (\n
\n \n trigger.parentNode\n } />\n \n          \n \n please click} popupContainer={(trigger) => trigger.parentNode} triggerType=\"click\">\n nesting balloon content\n \n \n
\n);\n\nReactDOM.render(, mountNode);\n\n````\n\n```css\n\n.container.nested {\n margin-left: 100px;\n margin-bottom: 50px;\n}\n\n```","html":"
import { Button, Balloon, DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst primary = <Button className=\"btrigger\">primary</Button>;\nconst innerButton = <Button className=\"btrigger\">innerButton</Button>;\nconst dateValue = moment('2018-01-01', 'YYYY-MM-DD', true);\n\nconst App = () => (\n    <div className=\"container nested\">\n        <Balloon type=\"primary\" autoFocus trigger={primary} closable={false} triggerType=\"click\">\n            <DatePicker defaultValue={dateValue} popupContainer={\n                (trigger) => trigger.parentNode\n            } />\n        </Balloon>\n        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n        <Balloon type=\"primary\" autoFocus trigger={innerButton} closable={false} triggerType=\"click\">\n            <Balloon trigger={<Button type=\"primary\">please click</Button>} popupContainer={(trigger) => trigger.parentNode} triggerType=\"click\">\n                nesting balloon content\n            </Balloon>\n        </Balloon>\n    </div>\n);\n\nReactDOM.render(<App />, mountNode);\n
\n.container.nested {\n    margin-left: 100px;\n    margin-bottom: 50px;\n}\n
"} \ No newline at end of file diff --git a/compiled_docs/balloon/demo/onCloseClick.en-us.md b/compiled_docs/balloon/demo/onCloseClick.en-us.md new file mode 100644 index 0000000000..02b791612f --- /dev/null +++ b/compiled_docs/balloon/demo/onCloseClick.en-us.md @@ -0,0 +1 @@ +{"title":"onCloseClick","meta":{"title":"onCloseClick","description":"\n

When popup is nested in another popup, say DatePicker is nested in Balloon, use safeNode to avoid the unexpected Balloon's closing.

\n","order":"5"},"codes":{"jsx":"import { Button, Balloon } from '@alifd/next';\n\n\n\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n visible: false\n };\n }\n\n // triggered every time visible becomes false\n onClose() {\n console.log('onClose doing!');\n }\n\n onClick() {\n this.setState({visible: true});\n }\n\n render() {\n const visibleTrigger = ;\n const content = (
content
);\n\n return (\n
\n \n {content}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n\n"},"body":"\n````jsx\nimport { Button, Balloon } from '@alifd/next';\n\n\n\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n visible: false\n };\n }\n\n // triggered every time visible becomes false\n onClose() {\n console.log('onClose doing!');\n }\n\n onClick() {\n this.setState({visible: true});\n }\n\n render() {\n const visibleTrigger = ;\n const content = (
content
);\n\n return (\n
\n \n {content}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n\n````","html":"
import { Button, Balloon } from '@alifd/next';\n\n\n\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            visible: false\n        };\n    }\n\n    // triggered every time visible becomes false\n    onClose() {\n        console.log('onClose doing!');\n    }\n\n    onClick() {\n        this.setState({visible: true});\n    }\n\n    render() {\n        const visibleTrigger = <Button onClick={this.onClick.bind(this)} type=\"primary\">click to pupup the card</Button>;\n        const content = (<div>content</div>);\n\n        return (\n            <div style={{marginBottom: '100px'}}>\n                <Balloon trigger={visibleTrigger}\n                    triggerType=\"click\"\n                    visible={this.state.visible}\n                    onClose={this.onClose.bind(this)} >\n                    {content}\n                </Balloon>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App />, mountNode);\n
"} \ No newline at end of file diff --git a/compiled_docs/balloon/demo/onCloseClick.md b/compiled_docs/balloon/demo/onCloseClick.md new file mode 100644 index 0000000000..eb70b1451d --- /dev/null +++ b/compiled_docs/balloon/demo/onCloseClick.md @@ -0,0 +1 @@ +{"title":"close按钮事件，手动控制visible","meta":{"title":"close按钮事件，手动控制visible","description":"\n

使用 visible,属性控制浮层显示, 使balloon变为受限组件。

\n","order":"5"},"codes":{"jsx":"import { Button, Balloon } from '@alifd/next';\n\n\n\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n visible: false\n };\n }\n\n // triggered every time visible becomes false\n onClose() {\n console.log('onClose doing!');\n }\n\n onClick() {\n this.setState({visible: true});\n }\n\n render() {\n const visibleTrigger = ;\n const content = (
content
);\n\n return (\n
\n \n {content}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n\n"},"body":"\n\n````jsx\nimport { Button, Balloon } from '@alifd/next';\n\n\n\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n visible: false\n };\n }\n\n // triggered every time visible becomes false\n onClose() {\n console.log('onClose doing!');\n }\n\n onClick() {\n this.setState({visible: true});\n }\n\n render() {\n const visibleTrigger = ;\n const content = (
content
);\n\n return (\n
\n \n {content}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n\n````","html":"
import { Button, Balloon } from '@alifd/next';\n\n\n\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            visible: false\n        };\n    }\n\n    // triggered every time visible becomes false\n    onClose() {\n        console.log('onClose doing!');\n    }\n\n    onClick() {\n        this.setState({visible: true});\n    }\n\n    render() {\n        const visibleTrigger = <Button onClick={this.onClick.bind(this)} type=\"primary\">click to pupup the card</Button>;\n        const content = (<div>content</div>);\n\n        return (\n            <div style={{marginBottom: '100px'}}>\n                <Balloon trigger={visibleTrigger}\n                    triggerType=\"click\"\n                    visible={this.state.visible}\n                    onClose={this.onClose.bind(this)} >\n                    {content}\n                </Balloon>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App />, mountNode);\n
"} \ No newline at end of file diff --git a/compiled_docs/balloon/demo/tooltip.en-us.md b/compiled_docs/balloon/demo/tooltip.en-us.md new file mode 100644 index 0000000000..4292eca338 --- /dev/null +++ b/compiled_docs/balloon/demo/tooltip.en-us.md @@ -0,0 +1 @@ +{"title":"tooltip","meta":{"title":"tooltip","description":"\n

Simplified Balloon, which can only set align, trigger and children, and triggered by hovering.

\n","order":"7"},"codes":{"jsx":"import { Button, Balloon } from '@alifd/next';\n\n\n\nconst Tooltip = Balloon.Tooltip;\n\nconst top = ;\nconst right = ;\nconst bottom = ;\nconst left = ;\nconst topLeft = ;\nconst topRight = ;\nconst rightTop = ;\nconst rightBottom = ;\nconst bottomLeft = ;\nconst bottomRight = ;\nconst leftTop = ;\nconst leftBottom = ;\n\nconst App = () => (\n
\n
\n text text\n text text\n text text\n
\n
\n text text\n text text\n text text\n
\n
\n text text\n text text\n text text\n
\n
\n text text\n text text\n text text\n
\n
\n\n);\n\nReactDOM.render(, mountNode);\n\n","css":".code-box-demo .sui-btn {\n margin-right: 1em;\n margin-bottom: 1em;\n}\n"},"body":"\n````jsx\nimport { Button, Balloon } from '@alifd/next';\n\n\n\nconst Tooltip = Balloon.Tooltip;\n\nconst top = ;\nconst right = ;\nconst bottom = ;\nconst left = ;\nconst topLeft = ;\nconst topRight = ;\nconst rightTop = ;\nconst rightBottom = ;\nconst bottomLeft = ;\nconst bottomRight = ;\nconst leftTop = ;\nconst leftBottom = ;\n\nconst App = () => (\n
\n
\n text text\n text text\n text text\n
\n
\n text text\n text text\n text text\n
\n
\n text text\n text text\n text text\n
\n
\n text text\n text text\n text text\n
\n
\n\n);\n\nReactDOM.render(, mountNode);\n\n````\n\n````css\n.code-box-demo .sui-btn {\n margin-right: 1em;\n margin-bottom: 1em;\n}\n````","html":"
import { Button, Balloon } from '@alifd/next';\n\n\n\nconst Tooltip = Balloon.Tooltip;\n\nconst top = <Button style={{margin: '5px'}} id=\"top\" className=\"btrigger\">top</Button>;\nconst right = <Button style={{margin: '5px'}}id=\"right\" className=\"btrigger\">right</Button>;\nconst bottom = <Button style={{margin: '5px'}} id=\"bottom\" className=\"btrigger\">bottom</Button>;\nconst left = <Button style={{margin: '5px'}} id=\"left\" className=\"btrigger\">left</Button>;\nconst topLeft = <Button style={{margin: '5px'}} id=\"topLeft\" className=\"btrigger\">top left</Button>;\nconst topRight = <Button style={{margin: '5px'}} id=\"topRight\" className=\"btrigger\">top right</Button>;\nconst rightTop = <Button style={{margin: '5px'}} id=\"rightTop\" className=\"btrigger\">right top</Button>;\nconst rightBottom = <Button style={{margin: '5px'}} id=\"rightBottom\" className=\"btrigger\">right bottom</Button>;\nconst bottomLeft = <Button style={{margin: '5px'}} id=\"bottomLeft\" className=\"btrigger\">bottom left</Button>;\nconst bottomRight = <Button style={{margin: '5px'}} id=\"bottomRight\" className=\"btrigger\">bottom right</Button>;\nconst leftTop = <Button style={{margin: '5px'}} id=\"leftTop\" className=\"btrigger\">left top</Button>;\nconst leftBottom = <Button style={{margin: '5px'}} id=\"leftBottom\" className=\"btrigger\">left bottom</Button>;\n\nconst App = () => (\n    <div style={{paddingLeft: 220, paddingTop: 100}}>\n        <div style={{marginLeft: 75}}>\n            <Tooltip trigger={topLeft} align=\"tl\">text text</Tooltip>\n            <Tooltip trigger={top} align=\"t\">text text</Tooltip>\n            <Tooltip trigger={topRight} align=\"tr\">text text</Tooltip>\n        </div>\n        <div style={{width: 80, float: 'left'}}>\n            <Tooltip trigger={leftTop} align=\"lt\">text text</Tooltip>\n            <Tooltip trigger={left} align=\"l\">text text</Tooltip>\n            <Tooltip trigger={leftBottom} align=\"lb\">text text</Tooltip>\n        </div>\n        <div style={{width: 80, marginLeft: 290}}>\n            <Tooltip trigger={rightTop} align=\"rt\">text text</Tooltip>\n            <Tooltip trigger={right} align=\"r\">text text</Tooltip>\n            <Tooltip trigger={rightBottom} align=\"rb\">text text</Tooltip>\n        </div>\n        <div style={{marginLeft: 80, clear: 'both'}}>\n            <Tooltip trigger={bottomLeft} align=\"bl\">text text</Tooltip>\n            <Tooltip trigger={bottom} align=\"b\">text text</Tooltip>\n            <Tooltip trigger={bottomRight} align=\"br\">text text</Tooltip>\n        </div>\n    </div>\n\n);\n\nReactDOM.render(<App />, mountNode);\n
.code-box-demo .sui-btn {\n    margin-right: 1em;\n    margin-bottom: 1em;\n}
"} \ No newline at end of file diff --git a/compiled_docs/balloon/demo/tooltip.md b/compiled_docs/balloon/demo/tooltip.md new file mode 100644 index 0000000000..dd47862d42 --- /dev/null +++ b/compiled_docs/balloon/demo/tooltip.md @@ -0,0 +1 @@ +{"title":"tooltip","meta":{"title":"tooltip","description":"\n

简化的Balloon, 只能设置align, trigger和children, 触发条件是hover.

\n","order":"7"},"codes":{"jsx":"import { Button, Balloon } from '@alifd/next';\n\n\n\nconst Tooltip = Balloon.Tooltip;\n\nconst top = ;\nconst right = ;\nconst bottom = ;\nconst left = ;\nconst topLeft = ;\nconst topRight = ;\nconst rightTop = ;\nconst rightBottom = ;\nconst bottomLeft = ;\nconst bottomRight = ;\nconst leftTop = ;\nconst leftBottom = ;\n\nconst App = () => (\n
\n
\n text text\n text text\n text text\n
\n
\n text text\n text text\n text text\n
\n
\n text text\n text text\n text text\n
\n
\n text text\n text text\n text text\n
\n
\n\n);\n\nReactDOM.render(, mountNode);\n\n","css":".code-box-demo .sui-btn {\n margin-right: 1em;\n margin-bottom: 1em;\n}\n"},"body":"\n\n````jsx\nimport { Button, Balloon } from '@alifd/next';\n\n\n\nconst Tooltip = Balloon.Tooltip;\n\nconst top = ;\nconst right = ;\nconst bottom = ;\nconst left = ;\nconst topLeft = ;\nconst topRight = ;\nconst rightTop = ;\nconst rightBottom = ;\nconst bottomLeft = ;\nconst bottomRight = ;\nconst leftTop = ;\nconst leftBottom = ;\n\nconst App = () => (\n
\n
\n text text\n text text\n text text\n
\n
\n text text\n text text\n text text\n
\n
\n text text\n text text\n text text\n
\n
\n text text\n text text\n text text\n
\n
\n\n);\n\nReactDOM.render(, mountNode);\n\n````\n\n````css\n.code-box-demo .sui-btn {\n margin-right: 1em;\n margin-bottom: 1em;\n}\n````","html":"
import { Button, Balloon } from '@alifd/next';\n\n\n\nconst Tooltip = Balloon.Tooltip;\n\nconst top = <Button style={{margin: '5px'}} id=\"top\" className=\"btrigger\">top</Button>;\nconst right = <Button style={{margin: '5px'}}id=\"right\" className=\"btrigger\">right</Button>;\nconst bottom = <Button style={{margin: '5px'}} id=\"bottom\" className=\"btrigger\">bottom</Button>;\nconst left = <Button style={{margin: '5px'}} id=\"left\" className=\"btrigger\">left</Button>;\nconst topLeft = <Button style={{margin: '5px'}} id=\"topLeft\" className=\"btrigger\">top left</Button>;\nconst topRight = <Button style={{margin: '5px'}} id=\"topRight\" className=\"btrigger\">top right</Button>;\nconst rightTop = <Button style={{margin: '5px'}} id=\"rightTop\" className=\"btrigger\">right top</Button>;\nconst rightBottom = <Button style={{margin: '5px'}} id=\"rightBottom\" className=\"btrigger\">right bottom</Button>;\nconst bottomLeft = <Button style={{margin: '5px'}} id=\"bottomLeft\" className=\"btrigger\">bottom left</Button>;\nconst bottomRight = <Button style={{margin: '5px'}} id=\"bottomRight\" className=\"btrigger\">bottom right</Button>;\nconst leftTop = <Button style={{margin: '5px'}} id=\"leftTop\" className=\"btrigger\">left top</Button>;\nconst leftBottom = <Button style={{margin: '5px'}} id=\"leftBottom\" className=\"btrigger\">left bottom</Button>;\n\nconst App = () => (\n    <div style={{paddingLeft: 220, paddingTop: 100}}>\n        <div style={{marginLeft: 75}}>\n            <Tooltip trigger={topLeft} align=\"tl\">text text</Tooltip>\n            <Tooltip trigger={top} align=\"t\">text text</Tooltip>\n            <Tooltip trigger={topRight} align=\"tr\">text text</Tooltip>\n        </div>\n        <div style={{width: 80, float: 'left'}}>\n            <Tooltip trigger={leftTop} align=\"lt\">text text</Tooltip>\n            <Tooltip trigger={left} align=\"l\">text text</Tooltip>\n            <Tooltip trigger={leftBottom} align=\"lb\">text text</Tooltip>\n        </div>\n        <div style={{width: 80, marginLeft: 290}}>\n            <Tooltip trigger={rightTop} align=\"rt\">text text</Tooltip>\n            <Tooltip trigger={right} align=\"r\">text text</Tooltip>\n            <Tooltip trigger={rightBottom} align=\"rb\">text text</Tooltip>\n        </div>\n        <div style={{marginLeft: 80, clear: 'both'}}>\n            <Tooltip trigger={bottomLeft} align=\"bl\">text text</Tooltip>\n            <Tooltip trigger={bottom} align=\"b\">text text</Tooltip>\n            <Tooltip trigger={bottomRight} align=\"br\">text text</Tooltip>\n        </div>\n    </div>\n\n);\n\nReactDOM.render(<App />, mountNode);\n
.code-box-demo .sui-btn {\n    margin-right: 1em;\n    margin-bottom: 1em;\n}
"} \ No newline at end of file diff --git a/compiled_docs/balloon/demo/triggerType.en-us.md b/compiled_docs/balloon/demo/triggerType.en-us.md new file mode 100644 index 0000000000..e01587bda6 --- /dev/null +++ b/compiled_docs/balloon/demo/triggerType.en-us.md @@ -0,0 +1 @@ +{"title":"triggerType","meta":{"title":"triggerType","description":"\n

Hover, focus and click.

\n","order":"1"},"codes":{"jsx":"import { Button, Balloon, Input } from '@alifd/next';\n\n\nconst content = (

content

);\nconst MoveTarget = ;\nconst ClickTarget = ;\nconst FocusTarget = ;\n\nconst HoverInputTarget = ;\nconst ClickInputTarget = ;\nconst FocusInputTarget = ;\n\nconst App = () => (\n
\n \n {content}\n \n\n \n {content}\n \n\n \n {content}\n \n\n
\n
\n\n \n {content}\n \n \n {content}\n \n \n {content}\n \n
\n);\n\nReactDOM.render(, mountNode);\n\n"},"body":"\n````jsx\nimport { Button, Balloon, Input } from '@alifd/next';\n\n\nconst content = (

content

);\nconst MoveTarget = ;\nconst ClickTarget = ;\nconst FocusTarget = ;\n\nconst HoverInputTarget = ;\nconst ClickInputTarget = ;\nconst FocusInputTarget = ;\n\nconst App = () => (\n
\n \n {content}\n \n\n \n {content}\n \n\n \n {content}\n \n\n
\n
\n\n \n {content}\n \n \n {content}\n \n \n {content}\n \n
\n);\n\nReactDOM.render(, mountNode);\n\n````","html":"
import { Button, Balloon, Input } from '@alifd/next';\n\n\nconst content = (<div><p>content</p></div>);\nconst MoveTarget = <Button style={{margin: '5px'}}>hover</Button>;\nconst ClickTarget = <Button style={{margin: '5px'}}>click</Button>;\nconst FocusTarget = <Button style={{margin: '5px'}}>focus</Button>;\n\nconst HoverInputTarget = <Input placeholder=\"hover\" style={{marginRight: '20px'}}/>;\nconst ClickInputTarget = <Input placeholder=\"click\" style={{marginRight: '20px'}}/>;\nconst FocusInputTarget = <Input placeholder=\"focus\" />;\n\nconst App = () => (\n    <div>\n        <Balloon trigger={MoveTarget} triggerType=\"hover\">\n            {content}\n        </Balloon>\n\n        <Balloon trigger={ClickTarget} triggerType=\"click\">\n            {content}\n        </Balloon>\n\n        <Balloon trigger={FocusTarget} triggerType=\"focus\">\n            {content}\n        </Balloon>\n\n        <br/>\n        <br/>\n\n        <Balloon trigger={HoverInputTarget} triggerType=\"hover\">\n            {content}\n        </Balloon>\n        <Balloon trigger={ClickInputTarget} triggerType=\"click\">\n            {content}\n        </Balloon>\n        <Balloon trigger={FocusInputTarget} triggerType=\"focus\">\n            {content}\n        </Balloon>\n    </div>\n);\n\nReactDOM.render(<App />, mountNode);\n
"} \ No newline at end of file diff --git a/compiled_docs/balloon/demo/triggerType.md b/compiled_docs/balloon/demo/triggerType.md new file mode 100644 index 0000000000..17e6174cb3 --- /dev/null +++ b/compiled_docs/balloon/demo/triggerType.md @@ -0,0 +1 @@ +{"title":"三种触发方式","meta":{"title":"三种触发方式","description":"\n

鼠标移入、聚集、点击。

\n","order":"1"},"codes":{"jsx":"import { Button, Balloon, Input } from '@alifd/next';\n\n\nconst content = (

content

);\nconst MoveTarget = ;\nconst ClickTarget = ;\nconst FocusTarget = ;\n\nconst HoverInputTarget = ;\nconst ClickInputTarget = ;\nconst FocusInputTarget = ;\n\nconst App = () => (\n
\n \n {content}\n \n\n \n {content}\n \n\n \n {content}\n \n\n
\n
\n\n \n {content}\n \n \n {content}\n \n \n {content}\n \n
\n);\n\nReactDOM.render(, mountNode);\n\n"},"body":"\n\n````jsx\nimport { Button, Balloon, Input } from '@alifd/next';\n\n\nconst content = (

content

);\nconst MoveTarget = ;\nconst ClickTarget = ;\nconst FocusTarget = ;\n\nconst HoverInputTarget = ;\nconst ClickInputTarget = ;\nconst FocusInputTarget = ;\n\nconst App = () => (\n
\n \n {content}\n \n\n \n {content}\n \n\n \n {content}\n \n\n
\n
\n\n \n {content}\n \n \n {content}\n \n \n {content}\n \n
\n);\n\nReactDOM.render(, mountNode);\n\n````","html":"
import { Button, Balloon, Input } from '@alifd/next';\n\n\nconst content = (<div><p>content</p></div>);\nconst MoveTarget = <Button style={{margin: '5px'}}>hover</Button>;\nconst ClickTarget = <Button style={{margin: '5px'}}>click</Button>;\nconst FocusTarget = <Button style={{margin: '5px'}}>focus</Button>;\n\nconst HoverInputTarget = <Input placeholder=\"hover\" style={{marginRight: '20px'}}/>;\nconst ClickInputTarget = <Input placeholder=\"click\" style={{marginRight: '20px'}}/>;\nconst FocusInputTarget = <Input placeholder=\"focus\" />;\n\nconst App = () => (\n    <div>\n        <Balloon trigger={MoveTarget} triggerType=\"hover\">\n            {content}\n        </Balloon>\n\n        <Balloon trigger={ClickTarget} triggerType=\"click\">\n            {content}\n        </Balloon>\n\n        <Balloon trigger={FocusTarget} triggerType=\"focus\">\n            {content}\n        </Balloon>\n\n        <br/>\n        <br/>\n\n        <Balloon trigger={HoverInputTarget} triggerType=\"hover\">\n            {content}\n        </Balloon>\n        <Balloon trigger={ClickInputTarget} triggerType=\"click\">\n            {content}\n        </Balloon>\n        <Balloon trigger={FocusInputTarget} triggerType=\"focus\">\n            {content}\n        </Balloon>\n    </div>\n);\n\nReactDOM.render(<App />, mountNode);\n
"} \ No newline at end of file diff --git a/compiled_docs/balloon/index.en-us.md b/compiled_docs/balloon/index.en-us.md new file mode 100644 index 0000000000..892e5e8f9b --- /dev/null +++ b/compiled_docs/balloon/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Guide#

When To Use#

    \n
  • Balloon is used when you hope to show auxiliary or help message during users' interacting with the illustrated object (text, picture, input box, etc.).
    • \n
  • Particularly, Balloon.Tooltip is a simplified Balloon for displaying tip when hovered.
    • \n
\n

Note#

    \n
  • When trigger is a custom React Component, it needs to pass through the onMouseEnter/onMouseLeave/onClick callback.
    • \n
  • This Component will be accessible when you pass id. We recommond you <Tooltip> for simple tip, <Balloon triggerType="click"> for complex usage(e.g.nested with form). Don't use triggerType="focus", it's for Component internal use only.
    • \n
\n

API#

","api":"

Balloon#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault Value
typetype of style

option:
'normal', 'primary'		Enum'normal'
childrencontent of popup layerany-
visiblevisible state of popupBoolean-
defaultVisibledefault visible state of popupBooleanfalse
onVisibleChangecallback when visible state changes

signature:
Function(visible: Boolean) => void
parameter:
visible: {Boolean} whether to show the popup		Functionfunc.noop
alignEdgewhether align to the edgeBooleanfalse
closablewhether to show the close buttonBooleantrue
alignposition of popup relative to the trigger

option:
't'(top)
'r'(right)
'b'(bottom)
'l'(left)
'tl'(top left)
'tr'(top right)
'bl'(bottom left)
'br'(bottom right)
'lt'(left top)
'lb'(left bottom)
'rt'(right top)
'rb'(right bottom) or their combinations		Enum'b'
offsetoffset for fine tuning the popupArray[0, 0]
triggertrigger of the popupany<span></span>
triggerTypehow to trigger the popup.

type unit:
'hover'
'click'
e.g.['hover', 'click'] 'click'		String/Array'hover'
onClosecallback triggered when visible becomes false

signature:
Function() => void		Functionfunc.noop
needAdjustwhether to adjust the position automaticallyBooleanfalse
delayhow long should the popup be delayed after triggered in millisecondsNumber-
afterClosecallback triggered when the popup is closed or the animation ends

signature:
Function() => void		Functionfunc.noop
shouldUpdatePositionwhether to update the position of popup after the content changesBoolean-
autoFocuswhether to focus on the first element of popup on appearingBooleanfalse
safeNodeWhen triggetType is 'click', the popup will be closed if any area other than itself is clicked. safeNode is used to define the node which doesn't trigger the close action. It can be either dom or dom idStringundefined
safeIdid of the safeNode, and should be used together with safeNodeStringnull
animationwhen should the animation be playedObject/Boolean{ in: 'zoomIn', out: 'zoomOut' }
cachewhether to remove the popup when it's closedBooleanfalse
popupContainerpopupContainer of the popup, being either dom id or a function to return the domString/Function-
popupStylecustom style of popupObject{}
popupClassNamecustom className of popupString''
popupPropsprops of popupObject{}
idid of popup. only when you set value, balloon will support accessibilityString-
\n

Balloon.Tooltip#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault Value
childrencontent of tooltipany-
alignposition of popup relative to the trigger

option:
't'(top)
'r'(right)
'b'(bottom)
'l'(left)
'tl'(top left)
'tr'(top right)
'bl'(bottom left)
'br'(bottom right)
'lt'(left top)
'lb'(left bottom)
'rt'(right top)
'rb'(right bottom) or their combinations		Enum'b'
triggertrigger of the tooltipany<span></span>
triggerTypehow to trigger the tooltip.

type unit:
'hover'
'click'
e.g.['hover', 'click'] 'click'. <Balloon triggerType="click"> for complex usage		String/Array'hover'
popupStylecustom style of popupObject-
popupClassNamecustom className of popupString-
popupPropsprops of popupObject-
purepure render or notBoolean-
popupContainerpopupContainer of the popup, being either dom id or a function to return the domString/Function-
idid of popup. only when you set value, balloon will support accessibilityString-
\n

Known Issues#

    \n
  • For disabled elements, onMouseLeave can't be triggered in chrome, due to chrome's bug and can't be worked around at present.
    • \n
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyBoardDescripiton
SPACEWhen triggerType=‘click’, click will popup a prompt
EnterWhen triggerType=‘click’, click will popup a prompt
\n"} \ No newline at end of file diff --git a/compiled_docs/balloon/index.md b/compiled_docs/balloon/index.md new file mode 100644 index 0000000000..e75ffabe61 --- /dev/null +++ b/compiled_docs/balloon/index.md @@ -0,0 +1 @@ +{"meta":"

开发指南#

气泡组件

\n

何时使用#

    \n
  • 当用户与被说明对象（文字，图片，输入框等）发生交互行为的action开始时, 即刻跟随动作出现一种辅助或帮助的提示信息。
    • \n
  • 其中Balloon.Tooltip是简化版本，主要用于hover时显示简单文案。
    • \n
\n

使用注意#

    \n
  • 对于trigger是自定义的React Component的情况，自定义的React Component 需要透传onMouseEnter/onMouseLeave/onClick 事件。
    • \n
  • 若要使用无障碍的气泡提示，请传入id。推荐简单提示使用<Tooltip>、复杂交互使用<Balloon triggerType="click"> 。 triggerType="focus"作为辅助状态用于组件内部，请用户不要直接使用此值。
    • \n
\n

API#

","api":"

Balloon#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
children浮层的内容any-
type样式类型

可选值:
'normal', 'primary'		Enum'normal'
visible弹层当前显示的状态Boolean-
defaultVisible弹层默认显示的状态Booleanfalse
onVisibleChange弹层在显示和隐藏触发的事件

签名:
Function(visible: Boolean) => void
参数:
visible: {Boolean} 弹层是否隐藏和显示		Functionfunc.noop
alignEdge弹出层对齐方式Booleanfalse
closable是否显示关闭按钮Booleantrue
align弹出层位置

可选值:
't'(上)
'r'(右)
'b'(下)
'l'(左)
'tl'(上左)
'tr'(上右)
'bl'(下左)
'br'(下右)
'lt'(左上)
'lb'(左下)
'rt'(右上)
'rb'(右下 及其 两两组合)		Enum'b'
offset弹层相对于trigger的定位的微调Array[0, 0]
trigger触发元素any<span />
triggerType触发行为
鼠标悬浮, 鼠标点击('hover','click')或者它们组成的数组，如 ['hover', 'click'], 强烈不建议使用'focus'，若弹窗内容有复杂交互请使用click		String/Array'hover'
onClose任何visible为false时会触发的事件

签名:
Function() => void		Functionfunc.noop
needAdjust是否进行自动位置调整Booleanfalse
delay弹层在触发以后的延时显示, 单位毫秒 msNumber-
afterClose浮层关闭后触发的事件, 如果有动画，则在动画结束后触发

签名:
Function() => void		Functionfunc.noop
shouldUpdatePosition强制更新定位信息Boolean-
autoFocus弹层出现后是否自动focus到内部第一个元素Booleantrue
safeNode安全节点:对于triggetType为click的浮层,会在点击除了浮层外的其它区域时关闭浮层.safeNode用于添加不触发关闭的节点, 值可以是dom节点的id或者是节点的dom对象Stringundefined
safeId用来指定safeNode节点的id，和safeNode配合使用Stringnull
animation配置动画的播放方式Object/Boolean{ in: 'zoomIn', out: 'zoomOut', }
cache弹层的dom节点关闭时是否删除Booleanfalse
popupContainer指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数。String/Function-
popupStyle弹层组件style，透传给PopupObject{}
popupClassName弹层组件className，透传给PopupString''
popupProps弹层组件属性，透传给PopupObject{}
id弹层id, 传入值才会支持无障碍String-
\n

Balloon.Tooltip#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
childrentooltip的内容any-
align弹出层位置

可选值:
't'(上)
'r'(右)
'b'(下)
'l'(左)
'tl'(上左)
'tr'(上右)
'bl'(下左)
'br'(下右)
'lt'(左上)
'lb'(左下)
'rt'(右上)
'rb'(右下 及其 两两组合)		Enum'b'
trigger触发元素any<span />
triggerType触发行为
鼠标悬浮, 鼠标点击('hover', 'click')或者它们组成的数组，如 ['hover', 'click'], 强烈不建议使用'focus'，若有复杂交互，推荐使用triggerType为click的Balloon组件		String/Array'hover'
popupStyle弹层组件style，透传给PopupObject-
popupClassName弹层组件className，透传给PopupString-
popupProps弹层组件属性，透传给PopupObject-
pure是否pure renderBoolean-
popupContainer指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数。String/Function-
id弹层id, 传入值才会支持无障碍String-
\n

已知问题#

    \n
  • 对于 disabled 的元素，onMouseLeave 事件在chrome下无法触发，此为chrome的bug，暂时无法绕过。
    • \n
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
按键说明
SPACE当triggerType=‘click’时，点击会弹出提示
Enter当triggerType=‘click’时，点击会弹出提示
\n"} \ No newline at end of file diff --git a/compiled_docs/breadcrumb/demo/basic.en-us.md b/compiled_docs/breadcrumb/demo/basic.en-us.md new file mode 100644 index 0000000000..63e1f73d88 --- /dev/null +++ b/compiled_docs/breadcrumb/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic Usage","meta":{"title":"Basic Usage","description":"\n

Use Breadcrumb.Item to set the breadcrumb subnode, if its link properity is set to be a <a /> node, otherwise it is a <span />.

\n","order":"0"},"codes":{"jsx":"import { Breadcrumb } from '@alifd/next';\n\nReactDOM.render(\n \n Home\n All Categories\n Women’s Clothing\n Blouses & Shirts\n \n T-shirts  78,999 Results\n \n ,\n mountNode);\n"},"body":"\n````jsx\nimport { Breadcrumb } from '@alifd/next';\n\nReactDOM.render(\n \n Home\n All Categories\n Women’s Clothing\n Blouses & Shirts\n \n T-shirts  78,999 Results\n \n ,\n mountNode);\n````","html":"
import { Breadcrumb } from '@alifd/next';\n\nReactDOM.render(\n    <Breadcrumb>\n        <Breadcrumb.Item link=\"javascript:void(0);\">Home</Breadcrumb.Item>\n        <Breadcrumb.Item link=\"javascript:void(0);\">All Categories</Breadcrumb.Item>\n        <Breadcrumb.Item link=\"javascript:void(0);\">Women’s Clothing</Breadcrumb.Item>\n        <Breadcrumb.Item link=\"javascript:void(0);\">Blouses & Shirts</Breadcrumb.Item>\n        <Breadcrumb.Item>\n            T-shirts&nbsp; <b>78,999</b> Results\n        </Breadcrumb.Item>\n    </Breadcrumb>,\n    mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/breadcrumb/demo/basic.md b/compiled_docs/breadcrumb/demo/basic.md new file mode 100644 index 0000000000..2cf7086c59 --- /dev/null +++ b/compiled_docs/breadcrumb/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本用法","meta":{"title":"基本用法","description":"\n

使用 Breadcrumb.Item 来设置面包屑子节点，如果设置其 link 属性就是 <a /> 节点，否则为 <span /> 节点。

\n","order":"0"},"codes":{"jsx":"import { Breadcrumb } from '@alifd/next';\n\nReactDOM.render(\n \n Home\n All Categories\n Women’s Clothing\n Blouses & Shirts\n \n T-shirts  78,999 Results\n \n ,\n mountNode);\n"},"body":"\n\n````jsx\nimport { Breadcrumb } from '@alifd/next';\n\nReactDOM.render(\n \n Home\n All Categories\n Women’s Clothing\n Blouses & Shirts\n \n T-shirts  78,999 Results\n \n ,\n mountNode);\n````","html":"
import { Breadcrumb } from '@alifd/next';\n\nReactDOM.render(\n    <Breadcrumb>\n        <Breadcrumb.Item link=\"javascript:void(0);\">Home</Breadcrumb.Item>\n        <Breadcrumb.Item link=\"javascript:void(0);\">All Categories</Breadcrumb.Item>\n        <Breadcrumb.Item link=\"javascript:void(0);\">Women’s Clothing</Breadcrumb.Item>\n        <Breadcrumb.Item link=\"javascript:void(0);\">Blouses & Shirts</Breadcrumb.Item>\n        <Breadcrumb.Item>\n            T-shirts&nbsp; <b>78,999</b> Results\n        </Breadcrumb.Item>\n    </Breadcrumb>,\n    mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/breadcrumb/demo/more.en-us.md b/compiled_docs/breadcrumb/demo/more.en-us.md new file mode 100644 index 0000000000..b870b3e628 --- /dev/null +++ b/compiled_docs/breadcrumb/demo/more.en-us.md @@ -0,0 +1 @@ +{"title":"Show Omission","meta":{"title":"Show Omission","description":"\n"},"codes":{"jsx":"import { Breadcrumb } from '@alifd/next';\n\nReactDOM.render(\n \n Home 1\n Whatever 2\n All Categories 3\n Women’s Clothing 4\n Blouses & Shirts 5\n T-shirts 6\n ,\n mountNode);\n"},"body":"\n````jsx\nimport { Breadcrumb } from '@alifd/next';\n\nReactDOM.render(\n \n Home 1\n Whatever 2\n All Categories 3\n Women’s Clothing 4\n Blouses & Shirts 5\n T-shirts 6\n ,\n mountNode);\n````","html":"
import { Breadcrumb } from '@alifd/next';\n\nReactDOM.render(\n    <Breadcrumb maxNode={5}>\n        <Breadcrumb.Item link=\"javascript:void(0);\">Home 1</Breadcrumb.Item>\n        <Breadcrumb.Item link=\"javascript:void(0);\">Whatever 2</Breadcrumb.Item>\n        <Breadcrumb.Item link=\"javascript:void(0);\">All Categories 3</Breadcrumb.Item>\n        <Breadcrumb.Item link=\"javascript:void(0);\">Women’s Clothing 4</Breadcrumb.Item>\n        <Breadcrumb.Item link=\"javascript:void(0);\">Blouses & Shirts 5</Breadcrumb.Item>\n        <Breadcrumb.Item>T-shirts 6</Breadcrumb.Item>\n    </Breadcrumb>,\n    mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/breadcrumb/demo/more.md b/compiled_docs/breadcrumb/demo/more.md new file mode 100644 index 0000000000..e4d99499ab --- /dev/null +++ b/compiled_docs/breadcrumb/demo/more.md @@ -0,0 +1 @@ +{"title":"显示省略","meta":{"title":"显示省略","description":"\n

当超过设置的最大个数的时候，显示省略号。

\n","order":"1"},"codes":{"jsx":"import { Breadcrumb } from '@alifd/next';\n\nReactDOM.render(\n \n Home 1\n Whatever 2\n All Categories 3\n Women’s Clothing 4\n Blouses & Shirts 5\n T-shirts 6\n ,\n mountNode);\n"},"body":"\n\n````jsx\nimport { Breadcrumb } from '@alifd/next';\n\nReactDOM.render(\n \n Home 1\n Whatever 2\n All Categories 3\n Women’s Clothing 4\n Blouses & Shirts 5\n T-shirts 6\n ,\n mountNode);\n````","html":"
import { Breadcrumb } from '@alifd/next';\n\nReactDOM.render(\n    <Breadcrumb maxNode={5}>\n        <Breadcrumb.Item link=\"javascript:void(0);\">Home 1</Breadcrumb.Item>\n        <Breadcrumb.Item link=\"javascript:void(0);\">Whatever 2</Breadcrumb.Item>\n        <Breadcrumb.Item link=\"javascript:void(0);\">All Categories 3</Breadcrumb.Item>\n        <Breadcrumb.Item link=\"javascript:void(0);\">Women’s Clothing 4</Breadcrumb.Item>\n        <Breadcrumb.Item link=\"javascript:void(0);\">Blouses & Shirts 5</Breadcrumb.Item>\n        <Breadcrumb.Item>T-shirts 6</Breadcrumb.Item>\n    </Breadcrumb>,\n    mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/breadcrumb/demo/separator.en-us.md b/compiled_docs/breadcrumb/demo/separator.en-us.md new file mode 100644 index 0000000000..5ca860788c --- /dev/null +++ b/compiled_docs/breadcrumb/demo/separator.en-us.md @@ -0,0 +1 @@ +{"title":"Set Separator","meta":{"title":"Set Separator","description":"\n"},"codes":{"jsx":"import { Breadcrumb } from '@alifd/next';\n\nReactDOM.render(\n \n Home\n All Categories\n Women’s Clothing\n Blouses & Shirts\n T-shirts\n ,\n mountNode);\n"},"body":"\n````jsx\nimport { Breadcrumb } from '@alifd/next';\n\nReactDOM.render(\n \n Home\n All Categories\n Women’s Clothing\n Blouses & Shirts\n T-shirts\n ,\n mountNode);\n````","html":"
import { Breadcrumb } from '@alifd/next';\n\nReactDOM.render(\n    <Breadcrumb separator=\"/\">\n        <Breadcrumb.Item link=\"javascript:void(0);\">Home</Breadcrumb.Item>\n        <Breadcrumb.Item link=\"javascript:void(0);\">All Categories</Breadcrumb.Item>\n        <Breadcrumb.Item link=\"javascript:void(0);\">Women’s Clothing</Breadcrumb.Item>\n        <Breadcrumb.Item link=\"javascript:void(0);\">Blouses & Shirts</Breadcrumb.Item>\n        <Breadcrumb.Item>T-shirts</Breadcrumb.Item>\n    </Breadcrumb>,\n    mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/breadcrumb/demo/separator.md b/compiled_docs/breadcrumb/demo/separator.md new file mode 100644 index 0000000000..86dcacd9de --- /dev/null +++ b/compiled_docs/breadcrumb/demo/separator.md @@ -0,0 +1 @@ +{"title":"设置分隔符","meta":{"title":"设置分隔符","description":"\n

也可以设置不同的分隔符。

\n","order":"2"},"codes":{"jsx":"import { Breadcrumb } from '@alifd/next';\n\nReactDOM.render(\n \n Home\n All Categories\n Women’s Clothing\n Blouses & Shirts\n T-shirts\n ,\n mountNode);\n"},"body":"\n\n````jsx\nimport { Breadcrumb } from '@alifd/next';\n\nReactDOM.render(\n \n Home\n All Categories\n Women’s Clothing\n Blouses & Shirts\n T-shirts\n ,\n mountNode);\n````","html":"
import { Breadcrumb } from '@alifd/next';\n\nReactDOM.render(\n    <Breadcrumb separator=\"/\">\n        <Breadcrumb.Item link=\"javascript:void(0);\">Home</Breadcrumb.Item>\n        <Breadcrumb.Item link=\"javascript:void(0);\">All Categories</Breadcrumb.Item>\n        <Breadcrumb.Item link=\"javascript:void(0);\">Women’s Clothing</Breadcrumb.Item>\n        <Breadcrumb.Item link=\"javascript:void(0);\">Blouses & Shirts</Breadcrumb.Item>\n        <Breadcrumb.Item>T-shirts</Breadcrumb.Item>\n    </Breadcrumb>,\n    mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/breadcrumb/index.en-us.md b/compiled_docs/breadcrumb/index.en-us.md new file mode 100644 index 0000000000..86bbf4ac6c --- /dev/null +++ b/compiled_docs/breadcrumb/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Guide#

When to use#

It is used to inform the user of the current position and the position of the current page in the entire site. It is an auxiliary navigation method and is applicable to a clear and multi-level structure of the website. Each layer of content is a hierarchical ownership relationship, which is convenient for users to return. One or all levels of pages.

\n

API#

","api":"

Breadcrumb#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault Value
childrenChildren components, hsould be an Breadcrumb.Itemcustom-
maxNodeThe maximum number of breadcrumbs is displayed and the excess is hiddenNumber100
separatorSeparator, can be text or IconReactNode<Icon type="arrow-right" />
componentSet Element typeString/Function'nav'
\n

Breadcrumb.Item#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault Value
linkThe breadcrumb item link, if this property is set, the node is <a />, otherwise it is <span />String-
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyBoardDescripiton
Tabswitch to next item
\n"} \ No newline at end of file diff --git a/compiled_docs/breadcrumb/index.md b/compiled_docs/breadcrumb/index.md new file mode 100644 index 0000000000..317c22f6b8 --- /dev/null +++ b/compiled_docs/breadcrumb/index.md @@ -0,0 +1 @@ +{"meta":"

开发指南#

何时使用#

用来告知用户当前的位置，以及当前页面在整个网站中的位置，属于一种辅助的导航方式，适用于清晰且具多层次结构的网站，每一层内容为层级归属关系，方便用户返回上一级或各个层级的页面。

\n

API#

","api":"

Breadcrumb#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
children面包屑子节点，需传入 Breadcrumb.Itemcustom-
maxNode面包屑最多显示个数，超出部分会被隐藏Number100
separator分隔符，可以是文本或 IconReactNode<Icon type="arrow-right" />
component设置标签类型String/Function'nav'
\n

Breadcrumb.Item#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
link面包屑节点链接，如果设置这个属性，则该节点为<a /> ，否则是<span />String-
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n
按键说明
Tab切换到下一项
\n"} \ No newline at end of file diff --git a/compiled_docs/button/demo/basic.en-us.md b/compiled_docs/button/demo/basic.en-us.md new file mode 100644 index 0000000000..7228283cfd --- /dev/null +++ b/compiled_docs/button/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Type","meta":{"title":"Type","description":"\n

The types of button includes: primary, secondary, normal. Each one used to describe the importance level of a button.

\n","order":"0"},"codes":{"jsx":"import { Button } from '@alifd/next';\n\nReactDOM.render(
\n   \n   \n \n

\n   \n   \n \n

\n   \n   \n
, mountNode);\n"},"body":"\n````jsx\nimport { Button } from '@alifd/next';\n\nReactDOM.render(
\n   \n   \n \n

\n   \n   \n \n

\n   \n   \n
, mountNode);\n````","html":"
import { Button } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Button type=\"normal\">Normal</Button> &nbsp;&nbsp;\n    <Button type=\"primary\">Prirmary</Button> &nbsp;&nbsp;\n    <Button type=\"secondary\">Secondary</Button>\n    <br /><br />\n    <Button type=\"normal\" text>Normal</Button> &nbsp;&nbsp;\n    <Button type=\"primary\" text>Primary</Button> &nbsp;&nbsp;\n    <Button type=\"secondary\" text>Secondary</Button>\n    <br /><br />\n    <Button type=\"normal\" warning>Normal</Button> &nbsp;&nbsp;\n    <Button type=\"primary\" warning>Primary</Button> &nbsp;&nbsp;\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/button/demo/basic.md b/compiled_docs/button/demo/basic.md new file mode 100644 index 0000000000..1aabe6931f --- /dev/null +++ b/compiled_docs/button/demo/basic.md @@ -0,0 +1 @@ +{"title":"按钮类型","meta":{"title":"按钮类型","description":"\n

按钮有三种视觉层次：主按钮、次按钮、普通按钮。不同的类型可以用来区别按钮的重要程度。

\n","order":"0"},"codes":{"jsx":"import { Button } from '@alifd/next';\n\nReactDOM.render(
\n   \n   \n \n

\n   \n   \n \n

\n   \n   \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Button } from '@alifd/next';\n\nReactDOM.render(
\n   \n   \n \n

\n   \n   \n \n

\n   \n   \n
, mountNode);\n````","html":"
import { Button } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Button type=\"normal\">Normal</Button> &nbsp;&nbsp;\n    <Button type=\"primary\">Prirmary</Button> &nbsp;&nbsp;\n    <Button type=\"secondary\">Secondary</Button>\n    <br /><br />\n    <Button type=\"normal\" text>Normal</Button> &nbsp;&nbsp;\n    <Button type=\"primary\" text>Primary</Button> &nbsp;&nbsp;\n    <Button type=\"secondary\" text>Secondary</Button>\n    <br /><br />\n    <Button type=\"normal\" warning>Normal</Button> &nbsp;&nbsp;\n    <Button type=\"primary\" warning>Primary</Button> &nbsp;&nbsp;\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/button/demo/component.en-us.md b/compiled_docs/button/demo/component.en-us.md new file mode 100644 index 0000000000..1d94e78104 --- /dev/null +++ b/compiled_docs/button/demo/component.en-us.md @@ -0,0 +1 @@ +{"title":"Custom component","meta":{"title":"Custom component","description":"\n

By default, a Button component is rendered by a html <button> tag, its render behavior could be modified by a props named component, which should be set to button or a.

\n","order":"6"},"codes":{"jsx":"import { Button } from '@alifd/next';\n\nconst props = {\n component: 'a',\n href: 'http://www.alibaba.com',\n target: '_blank'\n};\n\nReactDOM.render(
\n   \n   \n \n
, mountNode);\n"},"body":"\n````jsx\nimport { Button } from '@alifd/next';\n\nconst props = {\n component: 'a',\n href: 'http://www.alibaba.com',\n target: '_blank'\n};\n\nReactDOM.render(
\n   \n   \n \n
, mountNode);\n````","html":"
import { Button } from '@alifd/next';\n\nconst props = {\n    component: 'a',\n    href: 'http://www.alibaba.com',\n    target: '_blank'\n};\n\nReactDOM.render(<div>\n    <Button {...props} type=\"primary\">alibaba.com</Button> &nbsp;&nbsp;\n    <Button {...props} type=\"secondary\">alibaba.com</Button> &nbsp;&nbsp;\n    <Button {...props} type=\"normal\">alibaba.com</Button>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/button/demo/component.md b/compiled_docs/button/demo/component.md new file mode 100644 index 0000000000..a792cfb621 --- /dev/null +++ b/compiled_docs/button/demo/component.md @@ -0,0 +1 @@ +{"title":"自定义标签类型","meta":{"title":"自定义标签类型","description":"\n

默认情况下 Button 组件使用 <button> 标签来渲染按钮，通过 component 属性可以自定义 Button 的标签类型。\n可选值为 button 和 a。

\n","order":"6"},"codes":{"jsx":"import { Button } from '@alifd/next';\n\nconst props = {\n component: 'a',\n href: 'http://www.alibaba.com',\n target: '_blank'\n};\n\nReactDOM.render(
\n   \n   \n \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Button } from '@alifd/next';\n\nconst props = {\n component: 'a',\n href: 'http://www.alibaba.com',\n target: '_blank'\n};\n\nReactDOM.render(
\n   \n   \n \n
, mountNode);\n````","html":"
import { Button } from '@alifd/next';\n\nconst props = {\n    component: 'a',\n    href: 'http://www.alibaba.com',\n    target: '_blank'\n};\n\nReactDOM.render(<div>\n    <Button {...props} type=\"primary\">alibaba.com</Button> &nbsp;&nbsp;\n    <Button {...props} type=\"secondary\">alibaba.com</Button> &nbsp;&nbsp;\n    <Button {...props} type=\"normal\">alibaba.com</Button>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/button/demo/disabled.en-us.md b/compiled_docs/button/demo/disabled.en-us.md new file mode 100644 index 0000000000..9f2af9b0c6 --- /dev/null +++ b/compiled_docs/button/demo/disabled.en-us.md @@ -0,0 +1 @@ +{"title":"Disabled","meta":{"title":"Disabled","description":"\n

Disable a Button by adding disabled attribute.

\n","order":"5"},"codes":{"jsx":"import { Button } from '@alifd/next';\n\nReactDOM.render(
\n   \n \n
\n
\n   \n \n
\n
\n   \n \n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
, mountNode);\n","css":".ghost-light-background {\n display: inline-block;\n height: 100px;\n line-height: 100px;\n width: 50%;\n background: #EBECF0;\n margin-bottom: 20px;\n padding-left:10px;\n box-sizing: border-box;\n}\n.ghost-dark-background {\n display: inline-block;\n height: 100px;\n line-height: 100px;\n width: 50%;\n background: #333;\n margin-bottom: 20px;\n padding-left:10px;\n box-sizing: border-box;\n}\n"},"body":"\n````jsx\nimport { Button } from '@alifd/next';\n\nReactDOM.render(
\n   \n \n
\n
\n   \n \n
\n
\n   \n \n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
, mountNode);\n````\n\n````css\n.ghost-light-background {\n display: inline-block;\n height: 100px;\n line-height: 100px;\n width: 50%;\n background: #EBECF0;\n margin-bottom: 20px;\n padding-left:10px;\n box-sizing: border-box;\n}\n.ghost-dark-background {\n display: inline-block;\n height: 100px;\n line-height: 100px;\n width: 50%;\n background: #333;\n margin-bottom: 20px;\n padding-left:10px;\n box-sizing: border-box;\n}\n````","html":"
import { Button } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Button type=\"primary\">Primary</Button>&nbsp;&nbsp;\n    <Button component=\"a\" type=\"primary\" disabled>Primary</Button>\n    <br />\n    <br />\n    <Button type=\"secondary\">Secondary</Button>&nbsp;&nbsp;\n    <Button type=\"secondary\" disabled>Secondary</Button>\n    <br />\n    <br />\n    <Button type=\"normal\">Normal</Button>&nbsp;&nbsp;\n    <Button type=\"normal\" disabled>Normal</Button>\n    <br />\n    <br />\n    <div>\n        <div className=\"ghost-light-background\">\n            <Button ghost=\"light\" disabled>Ghost Light</Button>\n        </div>\n        <div className=\"ghost-dark-background\">\n            <Button ghost=\"dark\" disabled>Ghost Dark</Button>\n        </div>\n    </div>\n</div>, mountNode);
.ghost-light-background {\n    display: inline-block;\n    height: 100px;\n    line-height: 100px;\n    width: 50%;\n    background: #EBECF0;\n    margin-bottom: 20px;\n    padding-left:10px;\n    box-sizing: border-box;\n}\n.ghost-dark-background {\n    display: inline-block;\n    height: 100px;\n    line-height: 100px;\n    width: 50%;\n    background: #333;\n    margin-bottom: 20px;\n    padding-left:10px;\n    box-sizing: border-box;\n}
"} \ No newline at end of file diff --git a/compiled_docs/button/demo/disabled.md b/compiled_docs/button/demo/disabled.md new file mode 100644 index 0000000000..e6f730b357 --- /dev/null +++ b/compiled_docs/button/demo/disabled.md @@ -0,0 +1 @@ +{"title":"不可用状态","meta":{"title":"不可用状态","description":"\n

添加 disabled 属性即可让按钮处于不可用状态，同时按钮样式也会改变。

\n","order":"5"},"codes":{"jsx":"import { Button } from '@alifd/next';\n\nReactDOM.render(
\n   \n \n
\n
\n   \n \n
\n
\n   \n \n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
, mountNode);\n","css":".ghost-light-background {\n display: inline-block;\n height: 100px;\n line-height: 100px;\n width: 50%;\n background: #EBECF0;\n margin-bottom: 20px;\n padding-left:10px;\n box-sizing: border-box;\n}\n.ghost-dark-background {\n display: inline-block;\n height: 100px;\n line-height: 100px;\n width: 50%;\n background: #333;\n margin-bottom: 20px;\n padding-left:10px;\n box-sizing: border-box;\n}\n"},"body":"\n\n````jsx\nimport { Button } from '@alifd/next';\n\nReactDOM.render(
\n   \n \n
\n
\n   \n \n
\n
\n   \n \n
\n
\n
\n
\n \n
\n
\n \n
\n
\n
, mountNode);\n````\n\n````css\n.ghost-light-background {\n display: inline-block;\n height: 100px;\n line-height: 100px;\n width: 50%;\n background: #EBECF0;\n margin-bottom: 20px;\n padding-left:10px;\n box-sizing: border-box;\n}\n.ghost-dark-background {\n display: inline-block;\n height: 100px;\n line-height: 100px;\n width: 50%;\n background: #333;\n margin-bottom: 20px;\n padding-left:10px;\n box-sizing: border-box;\n}\n````","html":"
import { Button } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Button type=\"primary\">Primary</Button>&nbsp;&nbsp;\n    <Button component=\"a\" type=\"primary\" disabled>Primary</Button>\n    <br />\n    <br />\n    <Button type=\"secondary\">Secondary</Button>&nbsp;&nbsp;\n    <Button type=\"secondary\" disabled>Secondary</Button>\n    <br />\n    <br />\n    <Button type=\"normal\">Normal</Button>&nbsp;&nbsp;\n    <Button type=\"normal\" disabled>Normal</Button>\n    <br />\n    <br />\n    <div>\n        <div className=\"ghost-light-background\">\n            <Button ghost=\"light\" disabled>Ghost Light</Button>\n        </div>\n        <div className=\"ghost-dark-background\">\n            <Button ghost=\"dark\" disabled>Ghost Dark</Button>\n        </div>\n    </div>\n</div>, mountNode);
.ghost-light-background {\n    display: inline-block;\n    height: 100px;\n    line-height: 100px;\n    width: 50%;\n    background: #EBECF0;\n    margin-bottom: 20px;\n    padding-left:10px;\n    box-sizing: border-box;\n}\n.ghost-dark-background {\n    display: inline-block;\n    height: 100px;\n    line-height: 100px;\n    width: 50%;\n    background: #333;\n    margin-bottom: 20px;\n    padding-left:10px;\n    box-sizing: border-box;\n}
"} \ No newline at end of file diff --git a/compiled_docs/button/demo/ghost.en-us.md b/compiled_docs/button/demo/ghost.en-us.md new file mode 100644 index 0000000000..ec73468e42 --- /dev/null +++ b/compiled_docs/button/demo/ghost.en-us.md @@ -0,0 +1 @@ +{"title":"Ghost","meta":{"title":"Ghost","description":"\n

Ghost button is usually used for colored backgrounds. Change a Button to ghost by adding ghost attribute,\nand set the attribute's value to light or darked based on the color depth.

\n","order":"4"},"codes":{"jsx":"import { Button } from '@alifd/next';\n\nReactDOM.render(
\n
\n \n
\n
\n \n
\n
, mountNode);\n","css":".ghost-light-background {\n display: inline-block;\n height: 100px;\n line-height: 100px;\n width: 50%;\n background: #EBECF0;\n margin-bottom: 20px;\n padding-left:10px;\n box-sizing: border-box;\n}\n.ghost-dark-background {\n display: inline-block;\n height: 100px;\n line-height: 100px;\n width: 50%;\n background: #333;\n margin-bottom: 20px;\n padding-left:10px;\n box-sizing: border-box;\n}\n"},"body":"\n````jsx\nimport { Button } from '@alifd/next';\n\nReactDOM.render(
\n
\n \n
\n
\n \n
\n
, mountNode);\n````\n\n````css\n.ghost-light-background {\n display: inline-block;\n height: 100px;\n line-height: 100px;\n width: 50%;\n background: #EBECF0;\n margin-bottom: 20px;\n padding-left:10px;\n box-sizing: border-box;\n}\n.ghost-dark-background {\n display: inline-block;\n height: 100px;\n line-height: 100px;\n width: 50%;\n background: #333;\n margin-bottom: 20px;\n padding-left:10px;\n box-sizing: border-box;\n}\n````","html":"
import { Button } from '@alifd/next';\n\nReactDOM.render(<div style={{ clear: 'both' }}>\n    <div className=\"ghost-light-background\">\n        <Button ghost=\"light\">Ghost light</Button>\n    </div>\n    <div className=\"ghost-dark-background\">\n        <Button ghost=\"dark\">Ghost dark</Button>\n    </div>\n</div>, mountNode);
.ghost-light-background {\n    display: inline-block;\n    height: 100px;\n    line-height: 100px;\n    width: 50%;\n    background: #EBECF0;\n    margin-bottom: 20px;\n    padding-left:10px;\n    box-sizing: border-box;\n}\n.ghost-dark-background {\n    display: inline-block;\n    height: 100px;\n    line-height: 100px;\n    width: 50%;\n    background: #333;\n    margin-bottom: 20px;\n    padding-left:10px;\n    box-sizing: border-box;\n}
"} \ No newline at end of file diff --git a/compiled_docs/button/demo/ghost.md b/compiled_docs/button/demo/ghost.md new file mode 100644 index 0000000000..3275b43dcb --- /dev/null +++ b/compiled_docs/button/demo/ghost.md @@ -0,0 +1 @@ +{"title":"幽灵按钮","meta":{"title":"幽灵按钮","description":"\n

幽灵按钮通常用在有色背景下，可以使用 ghost 属性开启，此时 Button 为透明背景。对于浅色背景和深色背景，通过取值 light, dark 可以配置使用幽灵按钮的场景。

\n","order":"4"},"codes":{"jsx":"import { Button } from '@alifd/next';\n\nReactDOM.render(
\n
\n \n
\n
\n \n
\n
, mountNode);\n","css":".ghost-light-background {\n display: inline-block;\n height: 100px;\n line-height: 100px;\n width: 50%;\n background: #EBECF0;\n margin-bottom: 20px;\n padding-left:10px;\n box-sizing: border-box;\n}\n.ghost-dark-background {\n display: inline-block;\n height: 100px;\n line-height: 100px;\n width: 50%;\n background: #333;\n margin-bottom: 20px;\n padding-left:10px;\n box-sizing: border-box;\n}\n"},"body":"\n\n````jsx\nimport { Button } from '@alifd/next';\n\nReactDOM.render(
\n
\n \n
\n
\n \n
\n
, mountNode);\n````\n\n````css\n.ghost-light-background {\n display: inline-block;\n height: 100px;\n line-height: 100px;\n width: 50%;\n background: #EBECF0;\n margin-bottom: 20px;\n padding-left:10px;\n box-sizing: border-box;\n}\n.ghost-dark-background {\n display: inline-block;\n height: 100px;\n line-height: 100px;\n width: 50%;\n background: #333;\n margin-bottom: 20px;\n padding-left:10px;\n box-sizing: border-box;\n}\n````","html":"
import { Button } from '@alifd/next';\n\nReactDOM.render(<div style={{ clear: 'both' }}>\n    <div className=\"ghost-light-background\">\n        <Button ghost=\"light\">Ghost light</Button>\n    </div>\n    <div className=\"ghost-dark-background\">\n        <Button ghost=\"dark\">Ghost dark</Button>\n    </div>\n</div>, mountNode);
.ghost-light-background {\n    display: inline-block;\n    height: 100px;\n    line-height: 100px;\n    width: 50%;\n    background: #EBECF0;\n    margin-bottom: 20px;\n    padding-left:10px;\n    box-sizing: border-box;\n}\n.ghost-dark-background {\n    display: inline-block;\n    height: 100px;\n    line-height: 100px;\n    width: 50%;\n    background: #333;\n    margin-bottom: 20px;\n    padding-left:10px;\n    box-sizing: border-box;\n}
"} \ No newline at end of file diff --git a/compiled_docs/button/demo/group.en-us.md b/compiled_docs/button/demo/group.en-us.md new file mode 100644 index 0000000000..c498b35ebe --- /dev/null +++ b/compiled_docs/button/demo/group.en-us.md @@ -0,0 +1 @@ +{"title":"Button group","meta":{"title":"Button group","description":"\n

Button.Group could be used to combine multiple Buttons.

\n","order":"7"},"codes":{"jsx":"import { Button, Icon } from '@alifd/next';\n\nReactDOM.render(
\n \n \n \n \n   \n \n \n \n \n \n
\n
\n\n \n \n \n \n   \n \n \n \n \n \n
, mountNode);\n"},"body":"\n````jsx\nimport { Button, Icon } from '@alifd/next';\n\nReactDOM.render(
\n \n \n \n \n   \n \n \n \n \n \n
\n
\n\n \n \n \n \n   \n \n \n \n \n \n
, mountNode);\n````","html":"
import { Button, Icon } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Button.Group>\n        <Button type=\"primary\">OK</Button>\n        <Button type=\"secondary\">Cancel</Button>\n    </Button.Group>\n    &nbsp;&nbsp;\n    <Button.Group>\n        <Button disabled>Left</Button>\n        <Button disabled>Middle</Button>\n        <Button disabled>Right</Button>\n    </Button.Group>\n    <br />\n    <br />\n\n    <Button.Group>\n        <Button type=\"primary\"><Icon type=\"arrow-left\" /> Backward</Button>\n        <Button type=\"primary\">Forward <Icon type=\"arrow-right\" /></Button>\n    </Button.Group>\n    &nbsp;&nbsp;\n    <Button.Group>\n        <Button type=\"primary\"><Icon type=\"prompt\" /></Button>\n        <Button type=\"primary\"><Icon type=\"clock\" /></Button>\n        <Button type=\"primary\"><Icon type=\"set\" /></Button>\n    </Button.Group>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/button/demo/group.md b/compiled_docs/button/demo/group.md new file mode 100644 index 0000000000..9b80064d5f --- /dev/null +++ b/compiled_docs/button/demo/group.md @@ -0,0 +1 @@ +{"title":"按钮组","meta":{"title":"按钮组","description":"\n

Button.Group 子组件用于将多个按钮组合在一个容器中。

\n","order":"7"},"codes":{"jsx":"import { Button, Icon } from '@alifd/next';\n\nReactDOM.render(
\n \n \n \n \n   \n \n \n \n \n \n
\n
\n\n \n \n \n \n   \n \n \n \n \n \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Button, Icon } from '@alifd/next';\n\nReactDOM.render(
\n \n \n \n \n   \n \n \n \n \n \n
\n
\n\n \n \n \n \n   \n \n \n \n \n \n
, mountNode);\n````","html":"
import { Button, Icon } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Button.Group>\n        <Button type=\"primary\">OK</Button>\n        <Button type=\"secondary\">Cancel</Button>\n    </Button.Group>\n    &nbsp;&nbsp;\n    <Button.Group>\n        <Button disabled>Left</Button>\n        <Button disabled>Middle</Button>\n        <Button disabled>Right</Button>\n    </Button.Group>\n    <br />\n    <br />\n\n    <Button.Group>\n        <Button type=\"primary\"><Icon type=\"arrow-left\" /> Backward</Button>\n        <Button type=\"primary\">Forward <Icon type=\"arrow-right\" /></Button>\n    </Button.Group>\n    &nbsp;&nbsp;\n    <Button.Group>\n        <Button type=\"primary\"><Icon type=\"prompt\" /></Button>\n        <Button type=\"primary\"><Icon type=\"clock\" /></Button>\n        <Button type=\"primary\"><Icon type=\"set\" /></Button>\n    </Button.Group>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/button/demo/icon.en-us.md b/compiled_docs/button/demo/icon.en-us.md new file mode 100644 index 0000000000..181c730e60 --- /dev/null +++ b/compiled_docs/button/demo/icon.en-us.md @@ -0,0 +1 @@ +{"title":"Icon","meta":{"title":"Icon","description":"\n

Button could contain Icon as its children, the default size of Icon is controlled by the Button size. And it can be manually controlled by using iconSize prop.

\n","order":"2"},"codes":{"jsx":"import { Button, Icon } from '@alifd/next';\n\nReactDOM.render(
\n   \n   \n   \n   \n
, mountNode);\n"},"body":"\n````jsx\nimport { Button, Icon } from '@alifd/next';\n\nReactDOM.render(
\n   \n   \n   \n   \n
, mountNode);\n````","html":"
import { Button, Icon } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Button><Icon type=\"atm\" /> ATM</Button> &nbsp;&nbsp;\n    <Button text><Icon type=\"atm\" /> ATM</Button> &nbsp;&nbsp;\n    <Button warning><Icon type=\"atm\" /> ATM</Button> &nbsp;&nbsp;\n    <Button iconSize=\"xxs\"><Icon type=\"arrow-left\" /> ARROW</Button> &nbsp;&nbsp;\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/button/demo/icon.md b/compiled_docs/button/demo/icon.md new file mode 100644 index 0000000000..1b5952b06d --- /dev/null +++ b/compiled_docs/button/demo/icon.md @@ -0,0 +1 @@ +{"title":"图标按钮","meta":{"title":"图标按钮","description":"\n

Button 可以嵌入 Icon，默认情况下 Icon 尺寸自动跟随 Button 的尺寸。如果用户想要控制 Icon 的大小，可以通过 iconSize 属性进行设置。

\n","order":"2"},"codes":{"jsx":"import { Button, Icon } from '@alifd/next';\n\nReactDOM.render(
\n   \n   \n   \n   \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Button, Icon } from '@alifd/next';\n\nReactDOM.render(
\n   \n   \n   \n   \n
, mountNode);\n````","html":"
import { Button, Icon } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Button><Icon type=\"atm\" /> ATM</Button> &nbsp;&nbsp;\n    <Button text><Icon type=\"atm\" /> ATM</Button> &nbsp;&nbsp;\n    <Button warning><Icon type=\"atm\" /> ATM</Button> &nbsp;&nbsp;\n    <Button iconSize=\"xxs\"><Icon type=\"arrow-left\" /> ARROW</Button> &nbsp;&nbsp;\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/button/demo/loading.en-us.md b/compiled_docs/button/demo/loading.en-us.md new file mode 100644 index 0000000000..5b2fc3d48e --- /dev/null +++ b/compiled_docs/button/demo/loading.en-us.md @@ -0,0 +1 @@ +{"title":"Loading","meta":{"title":"Loading","description":"\n

Button has a inner state loading to control if a Button is in loading. It could be changed by setting loading attribute.

\n","order":"3"},"codes":{"jsx":"import { Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n loading: false\n };\n }\n\n setLoading = () => {\n this.setState({ loading: true });\n }\n\n render() {\n return (
\n   \n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n loading: false\n };\n }\n\n setLoading = () => {\n this.setState({ loading: true });\n }\n\n render() {\n return (
\n   \n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props, context) {\n        super(props, context);\n\n        this.state = {\n            loading: false\n        };\n    }\n\n    setLoading = () => {\n        this.setState({ loading: true });\n    }\n\n    render() {\n        return (<div>\n            <Button type=\"secondary\" loading>Loading</Button>&nbsp;&nbsp;\n            <Button type=\"primary\" loading={this.state.loading} onClick={this.setLoading}>Click to loading</Button>\n        </div>);\n    }\n}\n\nReactDOM.render(<Demo/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/button/demo/loading.md b/compiled_docs/button/demo/loading.md new file mode 100644 index 0000000000..46ce251a35 --- /dev/null +++ b/compiled_docs/button/demo/loading.md @@ -0,0 +1 @@ +{"title":"加载中","meta":{"title":"加载中","description":"\n

通过设置 loading 属性即可以让按钮处于加载状态。

\n","order":"3"},"codes":{"jsx":"import { Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n loading: false\n };\n }\n\n setLoading = () => {\n this.setState({ loading: true });\n }\n\n render() {\n return (
\n   \n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props, context) {\n super(props, context);\n\n this.state = {\n loading: false\n };\n }\n\n setLoading = () => {\n this.setState({ loading: true });\n }\n\n render() {\n return (
\n   \n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Button } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props, context) {\n        super(props, context);\n\n        this.state = {\n            loading: false\n        };\n    }\n\n    setLoading = () => {\n        this.setState({ loading: true });\n    }\n\n    render() {\n        return (<div>\n            <Button type=\"secondary\" loading>Loading</Button>&nbsp;&nbsp;\n            <Button type=\"primary\" loading={this.state.loading} onClick={this.setLoading}>Click to loading</Button>\n        </div>);\n    }\n}\n\nReactDOM.render(<Demo/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/button/demo/size.en-us.md b/compiled_docs/button/demo/size.en-us.md new file mode 100644 index 0000000000..2f76fa183f --- /dev/null +++ b/compiled_docs/button/demo/size.en-us.md @@ -0,0 +1 @@ +{"title":"Size","meta":{"title":"Size","description":"\n

The size of a Button is controlled by a size attribute, supporting large, medium, small, the default value is medium.

\n","order":"1"},"codes":{"jsx":"import { Button, Icon } from '@alifd/next';\n\nReactDOM.render(
\n   \n   \n \n
\n
\n \n \n \n \n \n
, mountNode);\n"},"body":"\n````jsx\nimport { Button, Icon } from '@alifd/next';\n\nReactDOM.render(
\n   \n   \n \n
\n
\n \n \n \n \n \n
, mountNode);\n````","html":"
import { Button, Icon } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Button type=\"primary\" size=\"large\"><Icon type=\"atm\" />Large</Button>&nbsp;&nbsp;\n    <Button type=\"primary\"><Icon type=\"atm\" />Medium</Button>&nbsp;&nbsp;\n    <Button type=\"primary\" size=\"small\"><Icon type=\"atm\" />Small</Button>\n    <br />\n    <br />\n    <Button.Group size=\"large\">\n        <Button>Button</Button>\n        <Button>Button</Button>\n        <Button>Button</Button>\n    </Button.Group>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/button/demo/size.md b/compiled_docs/button/demo/size.md new file mode 100644 index 0000000000..73d9507da1 --- /dev/null +++ b/compiled_docs/button/demo/size.md @@ -0,0 +1 @@ +{"title":"按钮尺寸","meta":{"title":"按钮尺寸","description":"\n

可以通过设置 size 属性控制按钮的尺寸，可选值为 large medium small，其中默认值为 medium。

\n","order":"1"},"codes":{"jsx":"import { Button, Icon } from '@alifd/next';\n\nReactDOM.render(
\n   \n   \n \n
\n
\n \n \n \n \n \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Button, Icon } from '@alifd/next';\n\nReactDOM.render(
\n   \n   \n \n
\n
\n \n \n \n \n \n
, mountNode);\n````","html":"
import { Button, Icon } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Button type=\"primary\" size=\"large\"><Icon type=\"atm\" />Large</Button>&nbsp;&nbsp;\n    <Button type=\"primary\"><Icon type=\"atm\" />Medium</Button>&nbsp;&nbsp;\n    <Button type=\"primary\" size=\"small\"><Icon type=\"atm\" />Small</Button>\n    <br />\n    <br />\n    <Button.Group size=\"large\">\n        <Button>Button</Button>\n        <Button>Button</Button>\n        <Button>Button</Button>\n    </Button.Group>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/button/index.en-us.md b/compiled_docs/button/index.en-us.md new file mode 100644 index 0000000000..29aba29dd1 --- /dev/null +++ b/compiled_docs/button/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Button used to trigger an action.

\n

Guide#

When To Use#

Buttons are used for emphasizing important functions on your page.

\n

API#

","api":"

Button#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault Value
sizeSize of button

return:
'small', 'medium', 'large'		Enum'medium'
typeTypeo of button

return:
'primary', 'secondary', 'normal'		Enum'normal'
iconSizeSize of icon in button

return:
'xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl'		Enum-
htmlTypeOriginal html type

return:
'submit', 'reset', 'button'		Enum'button'
componentThe html tag to be rendered

return:
'button', 'a'		Enum'button'
loadingLoading state of a buttonBooleanfalse
ghostSetting ghost button

return:
true, false, 'light', 'dark'		Enumfalse
textSetting text buttonBooleanfalse
warningSettting warning buttonBooleanfalse
disabledwhether is disabledBooleanfalse
onClickCallback of click event

signature:
Function(e: Object) => void
return:
_e_: {Object} Event Object		Function() => {}
\n

Button.Group#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault Value
sizeSize of buttons in groupString'medium'
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyBoardDescripiton
EnterTrigger the onClick event
SPACETrigger the onClick event
\n"} \ No newline at end of file diff --git a/compiled_docs/button/index.md b/compiled_docs/button/index.md new file mode 100644 index 0000000000..ef13e903e3 --- /dev/null +++ b/compiled_docs/button/index.md @@ -0,0 +1 @@ +{"meta":"

按钮用于开始一个即时操作。

\n

Guide#

何时使用#

标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

\n

API#

","api":"

Button#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
size按钮的尺寸

可选值:
'small', 'medium', 'large'		Enum'medium'
type按钮的类型

可选值:
'primary', 'secondary', 'normal'		Enum'normal'
iconSize按钮中 Icon 的尺寸，用于替代 Icon 的默认大小

可选值:
'xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl'		Enum-
htmlType当 component = 'button' 时，设置 button 标签的 type 值

可选值:
'submit', 'reset', 'button'		Enum'button'
component设置标签类型

可选值:
'button', 'a'		Enum'button'
loading设置按钮的载入状态Booleanfalse
ghost是否为幽灵按钮

可选值:
true, false, 'light', 'dark'		Enumfalse
text是否为文本按钮Booleanfalse
warning是否为警告按钮Booleanfalse
disabled是否禁用Booleanfalse
onClick点击按钮的回调

签名:
Function(e: Object) => void
参数:
_e_: {Object} Event Object		Function() => {}
\n

Button.Group#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
size统一设置 Button 组件的按钮大小String'medium'
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
按键说明
Enter触发onClick事件
SPACE触发onClick事件
\n"} \ No newline at end of file diff --git a/compiled_docs/calendar/demo/basic.en-us.md b/compiled_docs/calendar/demo/basic.en-us.md new file mode 100644 index 0000000000..342b097336 --- /dev/null +++ b/compiled_docs/calendar/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Fullscreen","meta":{"title":"Fullscreen","description":"\n

A basic fullscreen calendar.

\n","order":"0"},"codes":{"jsx":"import { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nfunction onDateChange(value) {\n console.log(value.format('L'));\n}\n\nReactDOM.render(
\n
, mountNode);\n"},"body":"\n````jsx\nimport { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nfunction onDateChange(value) {\n console.log(value.format('L'));\n}\n\nReactDOM.render(
\n
, mountNode);\n````","html":"
import { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nfunction onDateChange(value) {\n    console.log(value.format('L'));\n}\n\nReactDOM.render(<div>\n    <Calendar onSelect={onDateChange} defaultValue={moment().add(1, 'days')} /></div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/calendar/demo/basic.md b/compiled_docs/calendar/demo/basic.md new file mode 100644 index 0000000000..fbcd66938f --- /dev/null +++ b/compiled_docs/calendar/demo/basic.md @@ -0,0 +1 @@ +{"title":"全屏日历","meta":{"title":"全屏日历","description":"\n

最简单的日历用法，用户可以切换年/月。

\n","order":"0"},"codes":{"jsx":"import { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nfunction onDateChange(value) {\n console.log(value.format('L'));\n}\n\nReactDOM.render(
\n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nfunction onDateChange(value) {\n console.log(value.format('L'));\n}\n\nReactDOM.render(
\n
, mountNode);\n````","html":"
import { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nfunction onDateChange(value) {\n    console.log(value.format('L'));\n}\n\nReactDOM.render(<div>\n    <Calendar onSelect={onDateChange} defaultValue={moment().add(1, 'days')} /></div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/calendar/demo/card.en-us.md b/compiled_docs/calendar/demo/card.en-us.md new file mode 100644 index 0000000000..0bcf1cf80e --- /dev/null +++ b/compiled_docs/calendar/demo/card.en-us.md @@ -0,0 +1 @@ +{"title":"Card","meta":{"title":"Card","description":"\n

A card calendar is usually used for embedding in a container with limiting width and height.

\n","order":"1"},"codes":{"jsx":"import { Calendar } from '@alifd/next';\n\nfunction onDateChange(value) {\n console.log(value);\n}\n\nReactDOM.render(
\n \n
, mountNode);\n","css":".wrapped-calendar {\n width: 300px;\n border: 1px solid #C4C6CF;\n border-radius: 3px;\n padding: 8px;\n}\n"},"body":"\n````jsx\nimport { Calendar } from '@alifd/next';\n\nfunction onDateChange(value) {\n console.log(value);\n}\n\nReactDOM.render(
\n \n
, mountNode);\n````\n\n````css\n.wrapped-calendar {\n width: 300px;\n border: 1px solid #C4C6CF;\n border-radius: 3px;\n padding: 8px;\n}\n````","html":"
import { Calendar } from '@alifd/next';\n\nfunction onDateChange(value) {\n    console.log(value);\n}\n\nReactDOM.render(<div className=\"wrapped-calendar\">\n    <Calendar onSelect={onDateChange} shape=\"card\" />\n</div>, mountNode);
.wrapped-calendar {\n    width: 300px;\n    border: 1px solid #C4C6CF;\n    border-radius: 3px;\n    padding: 8px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/calendar/demo/card.md b/compiled_docs/calendar/demo/card.md new file mode 100644 index 0000000000..4ddee718ad --- /dev/null +++ b/compiled_docs/calendar/demo/card.md @@ -0,0 +1 @@ +{"title":"日历卡片","meta":{"title":"日历卡片","description":"\n

可以将 card 形态的日历组件嵌套在宽高受限的容器中。

\n","order":"1"},"codes":{"jsx":"import { Calendar } from '@alifd/next';\n\nfunction onDateChange(value) {\n console.log(value);\n}\n\nReactDOM.render(
\n \n
, mountNode);\n","css":".wrapped-calendar {\n width: 300px;\n border: 1px solid #C4C6CF;\n border-radius: 3px;\n padding: 8px;\n}\n"},"body":"\n\n````jsx\nimport { Calendar } from '@alifd/next';\n\nfunction onDateChange(value) {\n console.log(value);\n}\n\nReactDOM.render(
\n \n
, mountNode);\n````\n\n````css\n.wrapped-calendar {\n width: 300px;\n border: 1px solid #C4C6CF;\n border-radius: 3px;\n padding: 8px;\n}\n````","html":"
import { Calendar } from '@alifd/next';\n\nfunction onDateChange(value) {\n    console.log(value);\n}\n\nReactDOM.render(<div className=\"wrapped-calendar\">\n    <Calendar onSelect={onDateChange} shape=\"card\" />\n</div>, mountNode);
.wrapped-calendar {\n    width: 300px;\n    border: 1px solid #C4C6CF;\n    border-radius: 3px;\n    padding: 8px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/calendar/demo/custom-cell.en-us.md b/compiled_docs/calendar/demo/custom-cell.en-us.md new file mode 100644 index 0000000000..63b77b2375 --- /dev/null +++ b/compiled_docs/calendar/demo/custom-cell.en-us.md @@ -0,0 +1 @@ +{"title":"Custom cell","meta":{"title":"Custom cell","description":"\n

Render custom contents in dateCellRender and monthCellRender.

\n","order":"3"},"codes":{"jsx":"import { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nconst currentDate = moment();\nconst localeData = currentDate.clone().localeData();\nconst monthLocale = localeData.monthsShort();\n\n\nfunction dateCellRender(date) {\n const dateNum = date.date();\n if (currentDate.month() !== date.month()) {\n return dateNum;\n }\n\n let eventList;\n switch (dateNum) {\n case 1:\n eventList = [\n { type: 'primary', content: 'Event 1' },\n { type: 'normal', content: 'Event 2' }\n ];\n break;\n case 10:\n eventList = [\n { type: 'normal', content: 'Event 3' },\n { type: 'normal', content: 'Event 4' }\n ];\n break;\n case 11:\n eventList = [\n { type: 'primary', content: 'Event 5' },\n { type: 'primary', content: 'Event 6' }\n ];\n break;\n default:\n eventList = [];\n }\n\n return (
\n
{dateNum}
\n
\n
    \n {eventList.map((item, key) =>
  • {item.content}
    • )}\n
\n
\n
);\n}\n\nfunction monthCellRender(date) {\n if (currentDate.month() === date.month()) {\n return (
\n
{monthLocale[date.month()]}
\n
Events
\n
);\n }\n return monthLocale[date.month()];\n}\n\nReactDOM.render(, mountNode);\n","css":".custom-calendar-guide {\n width: 270px;\n border: 1px solid #C4C6CF;\n border-radius: 3px;\n overflow: hidden;\n margin-top: 20px;\n}\n\n.custom-calendar-cell-content {\n height: 50px;\n text-align: left;\n}\n\n.event-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.primary-event {\n color: white;\n background: red;\n border-radius: 3px;\n padding-left: 10px;\n margin-bottom: 3px;\n}\n\n.normal-event {\n color: white;\n background: blue;\n border-radius: 3px;\n padding-left: 10px;\n margin-bottom: 3px;\n}\n"},"body":"\n````jsx\nimport { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nconst currentDate = moment();\nconst localeData = currentDate.clone().localeData();\nconst monthLocale = localeData.monthsShort();\n\n\nfunction dateCellRender(date) {\n const dateNum = date.date();\n if (currentDate.month() !== date.month()) {\n return dateNum;\n }\n\n let eventList;\n switch (dateNum) {\n case 1:\n eventList = [\n { type: 'primary', content: 'Event 1' },\n { type: 'normal', content: 'Event 2' }\n ];\n break;\n case 10:\n eventList = [\n { type: 'normal', content: 'Event 3' },\n { type: 'normal', content: 'Event 4' }\n ];\n break;\n case 11:\n eventList = [\n { type: 'primary', content: 'Event 5' },\n { type: 'primary', content: 'Event 6' }\n ];\n break;\n default:\n eventList = [];\n }\n\n return (
\n
{dateNum}
\n
\n
    \n {eventList.map((item, key) =>
  • {item.content}
    • )}\n
\n
\n
);\n}\n\nfunction monthCellRender(date) {\n if (currentDate.month() === date.month()) {\n return (
\n
{monthLocale[date.month()]}
\n
Events
\n
);\n }\n return monthLocale[date.month()];\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.custom-calendar-guide {\n width: 270px;\n border: 1px solid #C4C6CF;\n border-radius: 3px;\n overflow: hidden;\n margin-top: 20px;\n}\n\n.custom-calendar-cell-content {\n height: 50px;\n text-align: left;\n}\n\n.event-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.primary-event {\n color: white;\n background: red;\n border-radius: 3px;\n padding-left: 10px;\n margin-bottom: 3px;\n}\n\n.normal-event {\n color: white;\n background: blue;\n border-radius: 3px;\n padding-left: 10px;\n margin-bottom: 3px;\n}\n````","html":"
import { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nconst currentDate = moment();\nconst localeData = currentDate.clone().localeData();\nconst monthLocale = localeData.monthsShort();\n\n\nfunction dateCellRender(date) {\n    const dateNum = date.date();\n    if (currentDate.month() !== date.month()) {\n        return dateNum;\n    }\n\n    let eventList;\n    switch (dateNum) {\n        case 1:\n            eventList = [\n                { type: 'primary', content: 'Event 1' },\n                { type: 'normal', content: 'Event 2' }\n            ];\n            break;\n        case 10:\n            eventList = [\n                { type: 'normal', content: 'Event 3' },\n                { type: 'normal', content: 'Event 4' }\n            ];\n            break;\n        case 11:\n            eventList = [\n                { type: 'primary', content: 'Event 5' },\n                { type: 'primary', content: 'Event 6' }\n            ];\n            break;\n        default:\n            eventList = [];\n    }\n\n    return (<div className=\"custom-calendar-cell\">\n        <div className=\"custom-calendar-cell-value\">{dateNum}</div>\n        <div className=\"custom-calendar-cell-content\">\n            <ul className=\"event-list\">\n                {eventList.map((item, key) => <li className={`${item.type}-event`} key={key}>{item.content}</li>)}\n            </ul>\n        </div>\n    </div>);\n}\n\nfunction monthCellRender(date) {\n    if (currentDate.month() === date.month()) {\n        return (<div>\n            <div>{monthLocale[date.month()]}</div>\n            <div>Events</div>\n        </div>);\n    }\n    return monthLocale[date.month()];\n}\n\nReactDOM.render(<Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />, mountNode);
.custom-calendar-guide {\n    width: 270px;\n    border: 1px solid #C4C6CF;\n    border-radius: 3px;\n    overflow: hidden;\n    margin-top: 20px;\n}\n\n.custom-calendar-cell-content {\n    height: 50px;\n    text-align: left;\n}\n\n.event-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.primary-event {\n    color: white;\n    background: red;\n    border-radius: 3px;\n    padding-left: 10px;\n    margin-bottom: 3px;\n}\n\n.normal-event {\n    color: white;\n    background: blue;\n    border-radius: 3px;\n    padding-left: 10px;\n    margin-bottom: 3px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/calendar/demo/custom-cell.md b/compiled_docs/calendar/demo/custom-cell.md new file mode 100644 index 0000000000..22b55fbb7f --- /dev/null +++ b/compiled_docs/calendar/demo/custom-cell.md @@ -0,0 +1 @@ +{"title":"定制日历内容","meta":{"title":"定制日历内容","description":"\n

通过 dateCellRender 和 monthCellRender 用户可以在日历中添加自定义内容。

\n","order":"3"},"codes":{"jsx":"import { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nconst currentDate = moment();\nconst localeData = currentDate.clone().localeData();\nconst monthLocale = localeData.monthsShort();\n\n\nfunction dateCellRender(date) {\n const dateNum = date.date();\n if (currentDate.month() !== date.month()) {\n return dateNum;\n }\n\n let eventList;\n switch (dateNum) {\n case 1:\n eventList = [\n { type: 'primary', content: 'Event 1' },\n { type: 'normal', content: 'Event 2' }\n ];\n break;\n case 10:\n eventList = [\n { type: 'normal', content: 'Event 3' },\n { type: 'normal', content: 'Event 4' }\n ];\n break;\n case 11:\n eventList = [\n { type: 'primary', content: 'Event 5' },\n { type: 'primary', content: 'Event 6' }\n ];\n break;\n default:\n eventList = [];\n }\n\n return (
\n
{dateNum}
\n
\n
    \n {eventList.map((item, key) =>
  • {item.content}
    • )}\n
\n
\n
);\n}\n\nfunction monthCellRender(date) {\n if (currentDate.month() === date.month()) {\n return (
\n
{monthLocale[date.month()]}
\n
Events
\n
);\n }\n return monthLocale[date.month()];\n}\n\nReactDOM.render(, mountNode);\n","css":".custom-calendar-guide {\n width: 270px;\n border: 1px solid #C4C6CF;\n border-radius: 3px;\n overflow: hidden;\n margin-top: 20px;\n}\n\n.custom-calendar-cell-content {\n height: 50px;\n text-align: left;\n}\n\n.event-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.primary-event {\n color: white;\n background: red;\n border-radius: 3px;\n padding-left: 10px;\n margin-bottom: 3px;\n}\n\n.normal-event {\n color: white;\n background: blue;\n border-radius: 3px;\n padding-left: 10px;\n margin-bottom: 3px;\n}\n"},"body":"\n\n````jsx\nimport { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nconst currentDate = moment();\nconst localeData = currentDate.clone().localeData();\nconst monthLocale = localeData.monthsShort();\n\n\nfunction dateCellRender(date) {\n const dateNum = date.date();\n if (currentDate.month() !== date.month()) {\n return dateNum;\n }\n\n let eventList;\n switch (dateNum) {\n case 1:\n eventList = [\n { type: 'primary', content: 'Event 1' },\n { type: 'normal', content: 'Event 2' }\n ];\n break;\n case 10:\n eventList = [\n { type: 'normal', content: 'Event 3' },\n { type: 'normal', content: 'Event 4' }\n ];\n break;\n case 11:\n eventList = [\n { type: 'primary', content: 'Event 5' },\n { type: 'primary', content: 'Event 6' }\n ];\n break;\n default:\n eventList = [];\n }\n\n return (
\n
{dateNum}
\n
\n
    \n {eventList.map((item, key) =>
  • {item.content}
    • )}\n
\n
\n
);\n}\n\nfunction monthCellRender(date) {\n if (currentDate.month() === date.month()) {\n return (
\n
{monthLocale[date.month()]}
\n
Events
\n
);\n }\n return monthLocale[date.month()];\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.custom-calendar-guide {\n width: 270px;\n border: 1px solid #C4C6CF;\n border-radius: 3px;\n overflow: hidden;\n margin-top: 20px;\n}\n\n.custom-calendar-cell-content {\n height: 50px;\n text-align: left;\n}\n\n.event-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.primary-event {\n color: white;\n background: red;\n border-radius: 3px;\n padding-left: 10px;\n margin-bottom: 3px;\n}\n\n.normal-event {\n color: white;\n background: blue;\n border-radius: 3px;\n padding-left: 10px;\n margin-bottom: 3px;\n}\n````","html":"
import { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nconst currentDate = moment();\nconst localeData = currentDate.clone().localeData();\nconst monthLocale = localeData.monthsShort();\n\n\nfunction dateCellRender(date) {\n    const dateNum = date.date();\n    if (currentDate.month() !== date.month()) {\n        return dateNum;\n    }\n\n    let eventList;\n    switch (dateNum) {\n        case 1:\n            eventList = [\n                { type: 'primary', content: 'Event 1' },\n                { type: 'normal', content: 'Event 2' }\n            ];\n            break;\n        case 10:\n            eventList = [\n                { type: 'normal', content: 'Event 3' },\n                { type: 'normal', content: 'Event 4' }\n            ];\n            break;\n        case 11:\n            eventList = [\n                { type: 'primary', content: 'Event 5' },\n                { type: 'primary', content: 'Event 6' }\n            ];\n            break;\n        default:\n            eventList = [];\n    }\n\n    return (<div className=\"custom-calendar-cell\">\n        <div className=\"custom-calendar-cell-value\">{dateNum}</div>\n        <div className=\"custom-calendar-cell-content\">\n            <ul className=\"event-list\">\n                {eventList.map((item, key) => <li className={`${item.type}-event`} key={key}>{item.content}</li>)}\n            </ul>\n        </div>\n    </div>);\n}\n\nfunction monthCellRender(date) {\n    if (currentDate.month() === date.month()) {\n        return (<div>\n            <div>{monthLocale[date.month()]}</div>\n            <div>Events</div>\n        </div>);\n    }\n    return monthLocale[date.month()];\n}\n\nReactDOM.render(<Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />, mountNode);
.custom-calendar-guide {\n    width: 270px;\n    border: 1px solid #C4C6CF;\n    border-radius: 3px;\n    overflow: hidden;\n    margin-top: 20px;\n}\n\n.custom-calendar-cell-content {\n    height: 50px;\n    text-align: left;\n}\n\n.event-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.primary-event {\n    color: white;\n    background: red;\n    border-radius: 3px;\n    padding-left: 10px;\n    margin-bottom: 3px;\n}\n\n.normal-event {\n    color: white;\n    background: blue;\n    border-radius: 3px;\n    padding-left: 10px;\n    margin-bottom: 3px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/calendar/demo/default-visible-month.en-us.md b/compiled_docs/calendar/demo/default-visible-month.en-us.md new file mode 100644 index 0000000000..b80734ef41 --- /dev/null +++ b/compiled_docs/calendar/demo/default-visible-month.en-us.md @@ -0,0 +1 @@ +{"title":"Default visible month","meta":{"title":"Default visible month","description":"\n

Change default visible month by defaultVisibleMonth.

\n","order":"4"},"codes":{"jsx":"import { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nfunction onSelect(value) {\n console.log(value.format('L'));\n}\n\nfunction onVisibleMonthChange(value, reason) {\n console.log('Visible month changed to %s from <%s>', value.format('YYYY-MM'), reason);\n}\n\nReactDOM.render( moment('2018-01', 'YYYY-MM', true)} onVisibleMonthChange={onVisibleMonthChange} />, mountNode);\n"},"body":"\n````jsx\nimport { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nfunction onSelect(value) {\n console.log(value.format('L'));\n}\n\nfunction onVisibleMonthChange(value, reason) {\n console.log('Visible month changed to %s from <%s>', value.format('YYYY-MM'), reason);\n}\n\nReactDOM.render( moment('2018-01', 'YYYY-MM', true)} onVisibleMonthChange={onVisibleMonthChange} />, mountNode);\n````","html":"
import { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nfunction onSelect(value) {\n    console.log(value.format('L'));\n}\n\nfunction onVisibleMonthChange(value, reason) {\n    console.log('Visible month changed to %s from <%s>', value.format('YYYY-MM'), reason);\n}\n\nReactDOM.render(<Calendar onSelect={onSelect} defaultVisibleMonth={() => moment('2018-01', 'YYYY-MM', true)} onVisibleMonthChange={onVisibleMonthChange} />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/calendar/demo/default-visible-month.md b/compiled_docs/calendar/demo/default-visible-month.md new file mode 100644 index 0000000000..9a19bf3afc --- /dev/null +++ b/compiled_docs/calendar/demo/default-visible-month.md @@ -0,0 +1 @@ +{"title":"日历默认展示月份","meta":{"title":"日历默认展示月份","description":"\n

日历组件默认使用当前月作为展示的月份，用户可以可以通过 defaultVisibleMonth 属性进行定制。并可以通过 onVisibleMonthChange 属性监听面板可视月份的变化。

\n","order":"4"},"codes":{"jsx":"import { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nfunction onSelect(value) {\n console.log(value.format('L'));\n}\n\nfunction onVisibleMonthChange(value, reason) {\n console.log('Visible month changed to %s from <%s>', value.format('YYYY-MM'), reason);\n}\n\nReactDOM.render( moment('2018-01', 'YYYY-MM', true)} onVisibleMonthChange={onVisibleMonthChange} />, mountNode);\n"},"body":"\n\n````jsx\nimport { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nfunction onSelect(value) {\n console.log(value.format('L'));\n}\n\nfunction onVisibleMonthChange(value, reason) {\n console.log('Visible month changed to %s from <%s>', value.format('YYYY-MM'), reason);\n}\n\nReactDOM.render( moment('2018-01', 'YYYY-MM', true)} onVisibleMonthChange={onVisibleMonthChange} />, mountNode);\n````","html":"
import { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nfunction onSelect(value) {\n    console.log(value.format('L'));\n}\n\nfunction onVisibleMonthChange(value, reason) {\n    console.log('Visible month changed to %s from <%s>', value.format('YYYY-MM'), reason);\n}\n\nReactDOM.render(<Calendar onSelect={onSelect} defaultVisibleMonth={() => moment('2018-01', 'YYYY-MM', true)} onVisibleMonthChange={onVisibleMonthChange} />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/calendar/demo/disabled.en-us.md b/compiled_docs/calendar/demo/disabled.en-us.md new file mode 100644 index 0000000000..5eb29fb709 --- /dev/null +++ b/compiled_docs/calendar/demo/disabled.en-us.md @@ -0,0 +1 @@ +{"title":"Disable dates","meta":{"title":"Disable dates","description":"\n

Disable specific dates by disabledDate.

\n","order":"2"},"codes":{"jsx":"import { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nconst currentDate = moment();\nconst disabledDate = function (date) {\n return date.valueOf() > currentDate.valueOf();\n};\n\nReactDOM.render(
\n \n
, mountNode);\n","css":".wrapped-calendar {\n width: 300px;\n border: 1px solid #C4C6CF;\n border-radius: 3px;\n padding: 8px;\n}\n"},"body":"\n````jsx\nimport { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nconst currentDate = moment();\nconst disabledDate = function (date) {\n return date.valueOf() > currentDate.valueOf();\n};\n\nReactDOM.render(
\n \n
, mountNode);\n````\n\n````css\n.wrapped-calendar {\n width: 300px;\n border: 1px solid #C4C6CF;\n border-radius: 3px;\n padding: 8px;\n}\n````","html":"
import { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nconst currentDate = moment();\nconst disabledDate = function (date) {\n    return date.valueOf() > currentDate.valueOf();\n};\n\nReactDOM.render(<div className=\"wrapped-calendar\">\n    <Calendar disabledDate={disabledDate} shape=\"card\" />\n</div>, mountNode);
.wrapped-calendar {\n    width: 300px;\n    border: 1px solid #C4C6CF;\n    border-radius: 3px;\n    padding: 8px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/calendar/demo/disabled.md b/compiled_docs/calendar/demo/disabled.md new file mode 100644 index 0000000000..b7cfc92dc1 --- /dev/null +++ b/compiled_docs/calendar/demo/disabled.md @@ -0,0 +1 @@ +{"title":"禁用日期","meta":{"title":"禁用日期","description":"\n

可以通过 disabledDate 属性禁止用户选择某些日期。

\n","order":"2"},"codes":{"jsx":"import { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nconst currentDate = moment();\nconst disabledDate = function (date) {\n return date.valueOf() > currentDate.valueOf();\n};\n\nReactDOM.render(
\n \n
, mountNode);\n","css":".wrapped-calendar {\n width: 300px;\n border: 1px solid #C4C6CF;\n border-radius: 3px;\n padding: 8px;\n}\n"},"body":"\n\n````jsx\nimport { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nconst currentDate = moment();\nconst disabledDate = function (date) {\n return date.valueOf() > currentDate.valueOf();\n};\n\nReactDOM.render(
\n \n
, mountNode);\n````\n\n````css\n.wrapped-calendar {\n width: 300px;\n border: 1px solid #C4C6CF;\n border-radius: 3px;\n padding: 8px;\n}\n````","html":"
import { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nconst currentDate = moment();\nconst disabledDate = function (date) {\n    return date.valueOf() > currentDate.valueOf();\n};\n\nReactDOM.render(<div className=\"wrapped-calendar\">\n    <Calendar disabledDate={disabledDate} shape=\"card\" />\n</div>, mountNode);
.wrapped-calendar {\n    width: 300px;\n    border: 1px solid #C4C6CF;\n    border-radius: 3px;\n    padding: 8px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/calendar/demo/locale.en-us.md b/compiled_docs/calendar/demo/locale.en-us.md new file mode 100644 index 0000000000..7bc462a3cb --- /dev/null +++ b/compiled_docs/calendar/demo/locale.en-us.md @@ -0,0 +1 @@ +{"title":"Value Locale","meta":{"title":"Value Locale","description":"\n

Locale of date values come from moment, setting to dispaly Chinese with moment.locale('zh-cn').

\n","order":"6"},"codes":{"jsx":"import { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\n// Setting moment locale to Chinese\nmoment.locale('zh-cn');\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\n// Setting moment locale to Chinese\nmoment.locale('zh-cn');\n\nReactDOM.render(, mountNode);\n````","html":"
import { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\n// Setting moment locale to Chinese\nmoment.locale('zh-cn');\n\nReactDOM.render(<Calendar />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/calendar/demo/locale.md b/compiled_docs/calendar/demo/locale.md new file mode 100644 index 0000000000..5f529dd6c5 --- /dev/null +++ b/compiled_docs/calendar/demo/locale.md @@ -0,0 +1 @@ +{"title":"多语言","meta":{"title":"多语言","description":"\n

日期时间的多语言来源于 moment ，可以通过 moment.locale('zh-cn') 来设置显示中文。

\n","order":"6"},"codes":{"jsx":"import { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\n// Setting moment locale to Chinese\nmoment.locale('zh-cn');\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\n// Setting moment locale to Chinese\nmoment.locale('zh-cn');\n\nReactDOM.render(, mountNode);\n````","html":"
import { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\n// Setting moment locale to Chinese\nmoment.locale('zh-cn');\n\nReactDOM.render(<Calendar />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/calendar/demo/lunar.en-us.md b/compiled_docs/calendar/demo/lunar.en-us.md new file mode 100644 index 0000000000..b411c0ade9 --- /dev/null +++ b/compiled_docs/calendar/demo/lunar.en-us.md @@ -0,0 +1 @@ +{"title":"Lunar Calendar","meta":{"title":"Lunar Calendar","description":"\n

A Lunar calendar.

\n","order":"0"},"codes":{"jsx":"import { Calendar } from '@alifd/next';\nimport moment from 'moment';\nimport solarLunar from 'solarlunar';\n\nfunction onDateChange(value) {\n console.log(value.format('L'));\n}\n\nfunction dateCellRender(value) {\n const solar2lunarData = solarLunar.solar2lunar(value.year(), value.month(), value.date());\n\n return (
\n {value.date()}\n {solar2lunarData.lDay === 1 ? solar2lunarData.monthCn: solar2lunarData.dayCn}\n
);\n}\n\n\nReactDOM.render(
\n
, mountNode);\n","css":".custom-cell {\n width: 100%;\n height: 70px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: flex-end;\n}\n"},"body":"\n````jsx\nimport { Calendar } from '@alifd/next';\nimport moment from 'moment';\nimport solarLunar from 'solarlunar';\n\nfunction onDateChange(value) {\n console.log(value.format('L'));\n}\n\nfunction dateCellRender(value) {\n const solar2lunarData = solarLunar.solar2lunar(value.year(), value.month(), value.date());\n\n return (
\n {value.date()}\n {solar2lunarData.lDay === 1 ? solar2lunarData.monthCn: solar2lunarData.dayCn}\n
);\n}\n\n\nReactDOM.render(
\n
, mountNode);\n````\n\n```css\n.custom-cell {\n width: 100%;\n height: 70px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: flex-end;\n}\n```","html":"
import { Calendar } from '@alifd/next';\nimport moment from 'moment';\nimport solarLunar from 'solarlunar';\n\nfunction onDateChange(value) {\n    console.log(value.format('L'));\n}\n\nfunction dateCellRender(value) {\n    const solar2lunarData = solarLunar.solar2lunar(value.year(), value.month(), value.date());\n\n    return (<div className=\"custom-cell\">\n        {value.date()}\n        <span>{solar2lunarData.lDay === 1 ? solar2lunarData.monthCn: solar2lunarData.dayCn}</span>\n    </div>);\n}\n\n\nReactDOM.render(<div>\n    <Calendar onSelect={onDateChange} dateCellRender={dateCellRender} defaultValue={moment().add(1, 'days')} /></div>, mountNode);
.custom-cell {\n    width: 100%;\n    height: 70px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: flex-end;\n}
"} \ No newline at end of file diff --git a/compiled_docs/calendar/demo/lunar.md b/compiled_docs/calendar/demo/lunar.md new file mode 100644 index 0000000000..656ac0059c --- /dev/null +++ b/compiled_docs/calendar/demo/lunar.md @@ -0,0 +1 @@ +{"title":"农历","meta":{"title":"农历","description":"\n

农历

\n","order":"0"},"codes":{"jsx":"import { Calendar } from '@alifd/next';\nimport moment from 'moment';\nimport solarLunar from 'solarlunar';\n\nfunction onDateChange(value) {\n console.log(value.format('L'));\n}\n\nfunction dateCellRender(value) {\n const solar2lunarData = solarLunar.solar2lunar(value.year(), value.month(), value.date());\n\n return (
\n {value.date()}\n {solar2lunarData.lDay === 1 ? solar2lunarData.monthCn: solar2lunarData.dayCn}\n
);\n}\n\n\nReactDOM.render(
\n
, mountNode);\n","css":".custom-cell {\n width: 100%;\n height: 70px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: flex-end;\n}\n"},"body":"\n\n````jsx\nimport { Calendar } from '@alifd/next';\nimport moment from 'moment';\nimport solarLunar from 'solarlunar';\n\nfunction onDateChange(value) {\n console.log(value.format('L'));\n}\n\nfunction dateCellRender(value) {\n const solar2lunarData = solarLunar.solar2lunar(value.year(), value.month(), value.date());\n\n return (
\n {value.date()}\n {solar2lunarData.lDay === 1 ? solar2lunarData.monthCn: solar2lunarData.dayCn}\n
);\n}\n\n\nReactDOM.render(
\n
, mountNode);\n````\n\n```css\n.custom-cell {\n width: 100%;\n height: 70px;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: flex-end;\n}\n```","html":"
import { Calendar } from '@alifd/next';\nimport moment from 'moment';\nimport solarLunar from 'solarlunar';\n\nfunction onDateChange(value) {\n    console.log(value.format('L'));\n}\n\nfunction dateCellRender(value) {\n    const solar2lunarData = solarLunar.solar2lunar(value.year(), value.month(), value.date());\n\n    return (<div className=\"custom-cell\">\n        {value.date()}\n        <span>{solar2lunarData.lDay === 1 ? solar2lunarData.monthCn: solar2lunarData.dayCn}</span>\n    </div>);\n}\n\n\nReactDOM.render(<div>\n    <Calendar onSelect={onDateChange} dateCellRender={dateCellRender} defaultValue={moment().add(1, 'days')} /></div>, mountNode);
.custom-cell {\n    width: 100%;\n    height: 70px;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    align-items: flex-end;\n}
"} \ No newline at end of file diff --git a/compiled_docs/calendar/demo/panel.en-us.md b/compiled_docs/calendar/demo/panel.en-us.md new file mode 100644 index 0000000000..b164b2026b --- /dev/null +++ b/compiled_docs/calendar/demo/panel.en-us.md @@ -0,0 +1 @@ +{"title":"Panel","meta":{"title":"Panel","description":"\n

A calendar panel is usually used for embedding in a popup container.

\n","order":"5"},"codes":{"jsx":"import { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nReactDOM.render(
\n \n
, mountNode);\n"},"body":"\n````jsx\nimport { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nReactDOM.render(
\n \n
, mountNode);\n````","html":"
import { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nReactDOM.render(<div>\n    <Calendar shape=\"panel\" value={moment().add(1, 'days')} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/calendar/demo/panel.md b/compiled_docs/calendar/demo/panel.md new file mode 100644 index 0000000000..93faa6c02f --- /dev/null +++ b/compiled_docs/calendar/demo/panel.md @@ -0,0 +1 @@ +{"title":"日历面板","meta":{"title":"日历面板","description":"\n

日历面板通用用于嵌套在弹层容器中。

\n","order":"5"},"codes":{"jsx":"import { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nReactDOM.render(
\n \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nReactDOM.render(
\n \n
, mountNode);\n````","html":"
import { Calendar } from '@alifd/next';\nimport moment from 'moment';\n\nReactDOM.render(<div>\n    <Calendar shape=\"panel\" value={moment().add(1, 'days')} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/calendar/index.en-us.md b/compiled_docs/calendar/index.en-us.md new file mode 100644 index 0000000000..0a742092b8 --- /dev/null +++ b/compiled_docs/calendar/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Guide#

A container for displaying calendar data.

\n

When to Use#

Calendar could be used to display dates, such as schedules, timetables, price calendar, lunar calendar, and so on.

\n

Values with locale#

Calendar use moment as a core part to manipulate and display time values. For real usage, it could be used with the latest moment package. Setting moment's locale by:

\n
import moment from 'moment';\n\nmoment.locale('zh-cn');

API#

","api":"

Calendar#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault Value
defaultValueDefault value of calendarcustom-
shapeShape of calendar

option:
'card', 'fullscreen', 'panel'		Enum'fullscreen'
valueValue of calendarcustom-
modeMode of panel

option:
'date', 'month', 'year'		Enum'date'
showOtherMonthShow dates of other month in current dateBooleantrue
defaultVisibleMonthDefault visible month of panel

signature:
Function() => void		Function-
onSelectCallback when select a date

signature:
Function(value: Object) => void
parameter:
value: {Object} date object		Functionfunc.noop
dateCellRenderRender function for date cell

signature:
Function(value: Object) => ReactNode
parameter:
value: {Object} date object
return:
{ReactNode} null
Function(value) => value.date()
monthCellRenderRender function for month cell

signature:
Function(calendarDate: Object) => ReactNode
parameter:
calendarDate: {Object} current date object
return:
{ReactNode} null
Function-
disabledDateFunction to disable dates

signature:
Function(calendarDate: Object) => Boolean
parameter:
calendarDate: {Object} current date object
view: {Enum} current view type: 'year', 'month', 'date'
return:
{Boolean} null
Function-
\n"} \ No newline at end of file diff --git a/compiled_docs/calendar/index.md b/compiled_docs/calendar/index.md new file mode 100644 index 0000000000..ef73fe7cfd --- /dev/null +++ b/compiled_docs/calendar/index.md @@ -0,0 +1 @@ +{"meta":"

Guide#

按照日历形式展示数据的容器。

\n

何时使用#

日历组件是一个偏向于展示与受控的基础组件，可用于日程、课表、价格日历、农历展示等。

\n

日期值的多语言#

由于 Calendar 组件内部使用 moment 对象来设置日期（请使用最新版 moment），部分 Locale 读取自 moment，因此用户需要在外部使用时正确的设置 moment 的 locale 。

\n
import moment from 'moment';\n\nmoment.locale('zh-cn');

API#

","api":"

Calendar#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
defaultValue默认选中的日期（moment 对象）custom-
shape展现形态

可选值:
'card', 'fullscreen', 'panel'		Enum'fullscreen'
value选中的日期值 (moment 对象)custom-
showOtherMonth是否展示非本月的日期Booleantrue
defaultVisibleMonth默认展示的月份

签名:
Function() => void		Function-
onSelect选择日期单元格时的回调

签名:
Function(value: Object) => void
参数:
value: {Object} 对应的日期值 (moment 对象)		Functionfunc.noop
onVisibleMonthChange展现的月份变化时的回调

签名:
Function(value: Object, reason: String) => void
参数:
value: {Object} 显示的月份 (moment 对象)
reason: {String} 触发月份改变原因		Functionfunc.noop
dateCellRender自定义日期渲染函数

签名:
Function(value: Object) => ReactNode
参数:
value: {Object} 日期值（moment对象）
返回值:
{ReactNode} null
Functionvalue => value.date()
monthCellRender自定义月份渲染函数

签名:
Function(calendarDate: Object) => ReactNode
参数:
calendarDate: {Object} 对应 Calendar 返回的自定义日期对象
返回值:
{ReactNode} null
Function-
disabledDate不可选择的日期

签名:
Function(calendarDate: Object, view: String) => Boolean
参数:
calendarDate: {Object} 对应 Calendar 返回的自定义日期对象
view: {String} 当前视图类型，year: 年， month: 月, date: 日
返回值:
{Boolean} null
Function-
\n"} \ No newline at end of file diff --git a/compiled_docs/card/demo/basic.en-us.md b/compiled_docs/card/demo/basic.en-us.md new file mode 100644 index 0000000000..85df366b68 --- /dev/null +++ b/compiled_docs/card/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

A simple card with title and sub-title.

\n","order":"0"},"codes":{"jsx":"import { Card } from '@alifd/next';\n\nconst commonProps = {\n style: { width: 300 },\n subTitle: 'SubTitle',\n extra: 'Link'\n};\n\nReactDOM.render(
\n \n
\n \n
, mountNode);\n","css":".card-placeholder {\n height: 500px;\n text-align: center;\n background: #F7F8FA;\n}\n"},"body":"\n````jsx\nimport { Card } from '@alifd/next';\n\nconst commonProps = {\n style: { width: 300 },\n subTitle: 'SubTitle',\n extra: 'Link'\n};\n\nReactDOM.render(
\n \n
\n \n
, mountNode);\n````\n\n````css\n.card-placeholder {\n height: 500px;\n text-align: center;\n background: #F7F8FA;\n}\n````","html":"
import { Card } from '@alifd/next';\n\nconst commonProps = {\n    style: { width: 300 },\n    subTitle: 'SubTitle',\n    extra: 'Link'\n};\n\nReactDOM.render(<div>\n    <Card {...commonProps} title=\"Simple Card\">\n        <div className=\"card-placeholder\"></div>\n    </Card>\n</div>, mountNode);
.card-placeholder {\n    height: 500px;\n    text-align: center;\n    background: #F7F8FA;\n}
"} \ No newline at end of file diff --git a/compiled_docs/card/demo/basic.md b/compiled_docs/card/demo/basic.md new file mode 100644 index 0000000000..6617112201 --- /dev/null +++ b/compiled_docs/card/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

最简单的用法。

\n","order":"0"},"codes":{"jsx":"import { Card } from '@alifd/next';\n\nconst commonProps = {\n style: { width: 300 },\n subTitle: 'SubTitle',\n extra: 'Link'\n};\n\nReactDOM.render(
\n \n
\n \n
, mountNode);\n","css":".card-placeholder {\n height: 500px;\n text-align: center;\n background: #F7F8FA;\n}\n"},"body":"\n\n````jsx\nimport { Card } from '@alifd/next';\n\nconst commonProps = {\n style: { width: 300 },\n subTitle: 'SubTitle',\n extra: 'Link'\n};\n\nReactDOM.render(
\n \n
\n \n
, mountNode);\n````\n\n````css\n.card-placeholder {\n height: 500px;\n text-align: center;\n background: #F7F8FA;\n}\n````","html":"
import { Card } from '@alifd/next';\n\nconst commonProps = {\n    style: { width: 300 },\n    subTitle: 'SubTitle',\n    extra: 'Link'\n};\n\nReactDOM.render(<div>\n    <Card {...commonProps} title=\"Simple Card\">\n        <div className=\"card-placeholder\"></div>\n    </Card>\n</div>, mountNode);
.card-placeholder {\n    height: 500px;\n    text-align: center;\n    background: #F7F8FA;\n}
"} \ No newline at end of file diff --git a/compiled_docs/card/demo/custom-card.en-us.md b/compiled_docs/card/demo/custom-card.en-us.md new file mode 100644 index 0000000000..63659440dd --- /dev/null +++ b/compiled_docs/card/demo/custom-card.en-us.md @@ -0,0 +1 @@ +{"title":"Custom style","meta":{"title":"Custom style","description":"\n

Customize default styles of a card.

\n","order":"2"},"codes":{"jsx":"import { Card } from '@alifd/next';\n\nReactDOM.render(\n \"father\n
\n

Father's Day

\n

Thank you, papa

\n
\n, mountNode);\n","css":".image-card {\n display: inline-block;\n text-align: center;\n}\n\n.custom-card p {\n color: #999;\n}\n"},"body":"\n````jsx\nimport { Card } from '@alifd/next';\n\nReactDOM.render(\n \"father\n
\n

Father's Day

\n

Thank you, papa

\n
\n, mountNode);\n````\n\n````css\n.image-card {\n display: inline-block;\n text-align: center;\n}\n\n.custom-card p {\n color: #999;\n}\n````","html":"
import { Card } from '@alifd/next';\n\nReactDOM.render(<Card className=\"image-card\" contentHeight=\"auto\">\n    <img src=\"https://img.alicdn.com/tfs/TB1FNIOSFXXXXaWXXXXXXXXXXXX-260-188.png\" alt=\"father day\" />\n    <div className=\"custom-card\">\n        <h3>Father's Day</h3>\n        <p>Thank you, papa</p>\n    </div>\n</Card>, mountNode);
.image-card {\n    display: inline-block;\n    text-align: center;\n}\n\n.custom-card p {\n    color: #999;\n}
"} \ No newline at end of file diff --git a/compiled_docs/card/demo/custom-card.md b/compiled_docs/card/demo/custom-card.md new file mode 100644 index 0000000000..0a35b0e86f --- /dev/null +++ b/compiled_docs/card/demo/custom-card.md @@ -0,0 +1 @@ +{"title":"自定义卡片样式","meta":{"title":"自定义卡片样式","description":"\n

如果默认的卡片样式不能满足您的需求，除了通过 Fusion 配置平台修改，还可以通过传入自定义样式修改。\n如果 title 属性不传入任何值，则默认会去除整个头部区域。

\n","order":"2"},"codes":{"jsx":"import { Card } from '@alifd/next';\n\nReactDOM.render(\n \"father\n
\n

Father's Day

\n

Thank you, papa

\n
\n, mountNode);\n","css":".image-card {\n display: inline-block;\n text-align: center;\n}\n\n.custom-card p {\n color: #999;\n}\n"},"body":"\n\n````jsx\nimport { Card } from '@alifd/next';\n\nReactDOM.render(\n \"father\n
\n

Father's Day

\n

Thank you, papa

\n
\n, mountNode);\n````\n\n````css\n.image-card {\n display: inline-block;\n text-align: center;\n}\n\n.custom-card p {\n color: #999;\n}\n````","html":"
import { Card } from '@alifd/next';\n\nReactDOM.render(<Card className=\"image-card\" contentHeight=\"auto\">\n    <img src=\"https://img.alicdn.com/tfs/TB1FNIOSFXXXXaWXXXXXXXXXXXX-260-188.png\" alt=\"father day\" />\n    <div className=\"custom-card\">\n        <h3>Father's Day</h3>\n        <p>Thank you, papa</p>\n    </div>\n</Card>, mountNode);
.image-card {\n    display: inline-block;\n    text-align: center;\n}\n\n.custom-card p {\n    color: #999;\n}
"} \ No newline at end of file diff --git a/compiled_docs/card/demo/custom-height.en-us.md b/compiled_docs/card/demo/custom-height.en-us.md new file mode 100644 index 0000000000..3f2604bd8e --- /dev/null +++ b/compiled_docs/card/demo/custom-height.en-us.md @@ -0,0 +1 @@ +{"title":"Content height","meta":{"title":"Content height","description":"\n

Setting contet height by contentHeight, setting value to auto will disabled the collapse behavior.

\n","order":"1"},"codes":{"jsx":"import { Card } from '@alifd/next';\n\nconst commonProps = {\n style: { width: 300 },\n title: 'Title',\n subTitle: 'Sub-title'\n};\n\nReactDOM.render(
\n \n
\n

Card content

\n

Card content

\n

Card content

\n

Card content

\n

Card content

\n
\n \n   \n \n
\n

Card content

\n

Card content

\n

Card content

\n

Card content

\n

Card content

\n
\n \n
, mountNode);\n","css":".custom-content p {\n margin: 0;\n}\n"},"body":"\n````jsx\nimport { Card } from '@alifd/next';\n\nconst commonProps = {\n style: { width: 300 },\n title: 'Title',\n subTitle: 'Sub-title'\n};\n\nReactDOM.render(
\n \n
\n

Card content

\n

Card content

\n

Card content

\n

Card content

\n

Card content

\n
\n \n   \n \n
\n

Card content

\n

Card content

\n

Card content

\n

Card content

\n

Card content

\n
\n \n
, mountNode);\n````\n\n````css\n.custom-content p {\n margin: 0;\n}\n````","html":"
import { Card } from '@alifd/next';\n\nconst commonProps = {\n    style: { width: 300 },\n    title: 'Title',\n    subTitle: 'Sub-title'\n};\n\nReactDOM.render(<div>\n    <Card {...commonProps} contentHeight=\"auto\">\n        <div className=\"custom-content\">\n            <p>Card content</p>\n            <p>Card content</p>\n            <p>Card content</p>\n            <p>Card content</p>\n            <p>Card content</p>\n        </div>\n    </Card>\n    &nbsp;&nbsp;\n    <Card {...commonProps} contentHeight={200}>\n        <div className=\"custom-content\">\n            <p>Card content</p>\n            <p>Card content</p>\n            <p>Card content</p>\n            <p>Card content</p>\n            <p>Card content</p>\n        </div>\n    </Card>\n</div>, mountNode);
.custom-content p {\n    margin: 0;\n}
"} \ No newline at end of file diff --git a/compiled_docs/card/demo/custom-height.md b/compiled_docs/card/demo/custom-height.md new file mode 100644 index 0000000000..77464baef4 --- /dev/null +++ b/compiled_docs/card/demo/custom-height.md @@ -0,0 +1 @@ +{"title":"自定义内容高度","meta":{"title":"自定义内容高度","description":"\n

可以通过 contentHeight 属性自定义内容区的高度。例如取值为 auto 的时候会默认关闭卡片的收缩效果。

\n","order":"1"},"codes":{"jsx":"import { Card } from '@alifd/next';\n\nconst commonProps = {\n style: { width: 300 },\n title: 'Title',\n subTitle: 'Sub-title'\n};\n\nReactDOM.render(
\n \n
\n

Card content

\n

Card content

\n

Card content

\n

Card content

\n

Card content

\n
\n \n   \n \n
\n

Card content

\n

Card content

\n

Card content

\n

Card content

\n

Card content

\n
\n \n
, mountNode);\n","css":".custom-content p {\n margin: 0;\n}\n"},"body":"\n\n````jsx\nimport { Card } from '@alifd/next';\n\nconst commonProps = {\n style: { width: 300 },\n title: 'Title',\n subTitle: 'Sub-title'\n};\n\nReactDOM.render(
\n \n
\n

Card content

\n

Card content

\n

Card content

\n

Card content

\n

Card content

\n
\n \n   \n \n
\n

Card content

\n

Card content

\n

Card content

\n

Card content

\n

Card content

\n
\n \n
, mountNode);\n````\n\n````css\n.custom-content p {\n margin: 0;\n}\n````","html":"
import { Card } from '@alifd/next';\n\nconst commonProps = {\n    style: { width: 300 },\n    title: 'Title',\n    subTitle: 'Sub-title'\n};\n\nReactDOM.render(<div>\n    <Card {...commonProps} contentHeight=\"auto\">\n        <div className=\"custom-content\">\n            <p>Card content</p>\n            <p>Card content</p>\n            <p>Card content</p>\n            <p>Card content</p>\n            <p>Card content</p>\n        </div>\n    </Card>\n    &nbsp;&nbsp;\n    <Card {...commonProps} contentHeight={200}>\n        <div className=\"custom-content\">\n            <p>Card content</p>\n            <p>Card content</p>\n            <p>Card content</p>\n            <p>Card content</p>\n            <p>Card content</p>\n        </div>\n    </Card>\n</div>, mountNode);
.custom-content p {\n    margin: 0;\n}
"} \ No newline at end of file diff --git a/compiled_docs/card/demo/custom-title.en-us.md b/compiled_docs/card/demo/custom-title.en-us.md new file mode 100644 index 0000000000..47778b6ef9 --- /dev/null +++ b/compiled_docs/card/demo/custom-title.en-us.md @@ -0,0 +1 @@ +{"title":"Title bullet","meta":{"title":"Title bullet","description":"\n

Customize card head by hasTitleBullet and extra.

\n","order":"3"},"codes":{"jsx":"import { Card, Button } from '@alifd/next';\n\nconst commonProps = {\n style: { width: 300 },\n title: 'Title',\n extra: \n};\n\nReactDOM.render(
\n \n Card Content\n \n
, mountNode);\n"},"body":"\n````jsx\nimport { Card, Button } from '@alifd/next';\n\nconst commonProps = {\n style: { width: 300 },\n title: 'Title',\n extra: \n};\n\nReactDOM.render(
\n \n Card Content\n \n
, mountNode);\n````","html":"
import { Card, Button } from '@alifd/next';\n\nconst commonProps = {\n    style: { width: 300 },\n    title: 'Title',\n    extra: <Button text>More</Button>\n};\n\nReactDOM.render(<div>\n    <Card {...commonProps} showTitleBullet={false}>\n        Card Content\n    </Card>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/card/demo/custom-title.md b/compiled_docs/card/demo/custom-title.md new file mode 100644 index 0000000000..bc7521f7a8 --- /dev/null +++ b/compiled_docs/card/demo/custom-title.md @@ -0,0 +1 @@ +{"title":"标题无项目符号","meta":{"title":"标题无项目符号","description":"\n

可以通过配置 hasTitleBullet 属性配置卡片标题是否显示项目符号。此外，extra 允许用户传入自定义的 React 组件。

\n","order":"3"},"codes":{"jsx":"import { Card, Button } from '@alifd/next';\n\nconst commonProps = {\n style: { width: 300 },\n title: 'Title',\n extra: \n};\n\nReactDOM.render(
\n \n Card Content\n \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Card, Button } from '@alifd/next';\n\nconst commonProps = {\n style: { width: 300 },\n title: 'Title',\n extra: \n};\n\nReactDOM.render(
\n \n Card Content\n \n
, mountNode);\n````","html":"
import { Card, Button } from '@alifd/next';\n\nconst commonProps = {\n    style: { width: 300 },\n    title: 'Title',\n    extra: <Button text>More</Button>\n};\n\nReactDOM.render(<div>\n    <Card {...commonProps} showTitleBullet={false}>\n        Card Content\n    </Card>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/card/demo/head-underline.en-us.md b/compiled_docs/card/demo/head-underline.en-us.md new file mode 100644 index 0000000000..2eb79229e3 --- /dev/null +++ b/compiled_docs/card/demo/head-underline.en-us.md @@ -0,0 +1 @@ +{"title":"Head divider","meta":{"title":"Head divider","description":"\n

Hiding head divider by showHeadDivider.

\n","order":"4"},"codes":{"jsx":"import { Card } from '@alifd/next';\n\nconst commonProps = {\n title: 'Title',\n style: { width: 300 },\n subTitle: 'Sub-title',\n extra: 'Link'\n};\n\nReactDOM.render(
\n \n
\n \n
, mountNode);\n","css":".card-placeholder {\n height: 500px;\n text-align: center;\n background: #F7F8FA;\n}\n"},"body":"\n````jsx\nimport { Card } from '@alifd/next';\n\nconst commonProps = {\n title: 'Title',\n style: { width: 300 },\n subTitle: 'Sub-title',\n extra: 'Link'\n};\n\nReactDOM.render(
\n \n
\n \n
, mountNode);\n````\n\n````css\n.card-placeholder {\n height: 500px;\n text-align: center;\n background: #F7F8FA;\n}\n````","html":"
import { Card } from '@alifd/next';\n\nconst commonProps = {\n    title: 'Title',\n    style: { width: 300 },\n    subTitle: 'Sub-title',\n    extra: 'Link'\n};\n\nReactDOM.render(<div>\n    <Card {...commonProps} showHeadDivider={false}>\n        <div className=\"card-placeholder\"></div>\n    </Card>\n</div>, mountNode);
.card-placeholder {\n    height: 500px;\n    text-align: center;\n    background: #F7F8FA;\n}
"} \ No newline at end of file diff --git a/compiled_docs/card/demo/head-underline.md b/compiled_docs/card/demo/head-underline.md new file mode 100644 index 0000000000..de900cc5b0 --- /dev/null +++ b/compiled_docs/card/demo/head-underline.md @@ -0,0 +1 @@ +{"title":"隐藏头部下划线","meta":{"title":"隐藏头部下划线","description":"\n

可以通过设置 showHeadDivider={false} 隐藏头部下划线。

\n","order":"4"},"codes":{"jsx":"import { Card } from '@alifd/next';\n\nconst commonProps = {\n title: 'Title',\n style: { width: 300 },\n subTitle: 'Sub-title',\n extra: 'Link'\n};\n\nReactDOM.render(
\n \n
\n \n
, mountNode);\n","css":".card-placeholder {\n height: 500px;\n text-align: center;\n background: #F7F8FA;\n}\n"},"body":"\n\n````jsx\nimport { Card } from '@alifd/next';\n\nconst commonProps = {\n title: 'Title',\n style: { width: 300 },\n subTitle: 'Sub-title',\n extra: 'Link'\n};\n\nReactDOM.render(
\n \n
\n \n
, mountNode);\n````\n\n````css\n.card-placeholder {\n height: 500px;\n text-align: center;\n background: #F7F8FA;\n}\n````","html":"
import { Card } from '@alifd/next';\n\nconst commonProps = {\n    title: 'Title',\n    style: { width: 300 },\n    subTitle: 'Sub-title',\n    extra: 'Link'\n};\n\nReactDOM.render(<div>\n    <Card {...commonProps} showHeadDivider={false}>\n        <div className=\"card-placeholder\"></div>\n    </Card>\n</div>, mountNode);
.card-placeholder {\n    height: 500px;\n    text-align: center;\n    background: #F7F8FA;\n}
"} \ No newline at end of file diff --git a/compiled_docs/card/index.en-us.md b/compiled_docs/card/index.en-us.md new file mode 100644 index 0000000000..5a89499a4b --- /dev/null +++ b/compiled_docs/card/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Guide#

A card is a piece of paper with unique related data taht servers as an entry point to more detailed information.

\n

When to Use#

A card could contain a photo, text, and a link about a single subject.

\n

API#

","api":"

Card#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault Value
titleTitle of cardString-
subTitleSub title of cardString-
showTitleBulletIf show title bulletBooleantrue
showHeadDividerIf show head dividerBooleantrue
contentHeightHeight of contentString/Number120
extraExtra of card headerReactNode-
\n"} \ No newline at end of file diff --git a/compiled_docs/card/index.md b/compiled_docs/card/index.md new file mode 100644 index 0000000000..bf1b016acc --- /dev/null +++ b/compiled_docs/card/index.md @@ -0,0 +1 @@ +{"meta":"

Guide#

一个通用的卡片组件。

\n

何时使用#

当一个模块的同类信息不能自然形成区块感，可借助 Card 组件将信息整合，帮助界面信息模块感更强。

\n

API#

","api":"

Card#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
title卡片的标题ReactNode-
subTitle卡片的副标题ReactNode-
showTitleBullet是否显示标题的项目符号Booleantrue
showHeadDivider是否展示头部的分隔线Booleantrue
contentHeight内容区域的固定高度String/Number120
extra标题区域的用户自定义内容ReactNode-
\n"} \ No newline at end of file diff --git a/compiled_docs/cascader-select/demo/accessibility.en-us.md b/compiled_docs/cascader-select/demo/accessibility.en-us.md new file mode 100644 index 0000000000..bbdfa0ae8b --- /dev/null +++ b/compiled_docs/cascader-select/demo/accessibility.en-us.md @@ -0,0 +1 @@ +{"title":"Accessibility","meta":{"title":"Accessibility","description":"\n

When the developer presses the Enter key to select an item, the screen reader will reads the selection item, which is described by aria-labelledby.\nPlease refer to ARIA and KeyBoard for keyboard operation.

\n","order":"8"},"codes":{"jsx":"import { CascaderSelect } from '@alifd/next';\n\nconst data = [{\n value: '0100',\n label: '金庸',\n children: [\n { value: '0101', label: '飞狐外传' },\n { value: '0102', label: '雪山飞狐' },\n { value: '0103', label: '连城诀' },\n { value: '0104', label: '天龙八部' },\n { value: '0105', label: '射雕英雄传' },\n { value: '0106', label: '白马啸西风' },\n { value: '0107', label: '鹿鼎记' },\n { value: '0108', label: '笑傲江湖' },\n { value: '0109', label: '书剑恩仇录' },\n { value: '0110', label: '神雕侠侣' },\n { value: '0111', label: '侠客行' },\n { value: '0112', label: '倚天屠龙记' },\n { value: '0113', label: '碧血剑' },\n { value: '0114', label: '鸳鸯刀' }\n ]\n}, {\n value: '0200',\n label: '古龙',\n children: [\n { value: '0201', label: '小李飞刀' },\n { value: '0202', label: '绝代双骄' },\n { value: '0203', label: '大旗英雄传' },\n { value: '0204', label: '英雄无泪' },\n { value: '0205', label: '边城浪子' },\n { value: '0206', label: '楚留香传奇' },\n ],\n}, {\n children: [\n { value: '0301', label: '白发魔女传' },\n { value: '0302', label: '七剑下天山' },\n { value: '0303', label: '云海玉弓缘' }\n ],\n value: '0300',\n label: '梁羽生'\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n label: '',\n data: []\n };\n this.handleChange = this.handleChange.bind(this);\n }\n componentDidMount() {\n this.setState({ data });\n }\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n label: extra.selectedPath.map(d => d.label).join(' / '), \n });\n }\n render() {\n return (\n
\n
CascaderSelect:
\n \n
\n );\n }\n}\nReactDOM.render(, mountNode);\n\n","css":".next-menu-item:focus {\n background-color: #F2F3F7;\n}\n"},"body":"\n````jsx\nimport { CascaderSelect } from '@alifd/next';\n\nconst data = [{\n value: '0100',\n label: '金庸',\n children: [\n { value: '0101', label: '飞狐外传' },\n { value: '0102', label: '雪山飞狐' },\n { value: '0103', label: '连城诀' },\n { value: '0104', label: '天龙八部' },\n { value: '0105', label: '射雕英雄传' },\n { value: '0106', label: '白马啸西风' },\n { value: '0107', label: '鹿鼎记' },\n { value: '0108', label: '笑傲江湖' },\n { value: '0109', label: '书剑恩仇录' },\n { value: '0110', label: '神雕侠侣' },\n { value: '0111', label: '侠客行' },\n { value: '0112', label: '倚天屠龙记' },\n { value: '0113', label: '碧血剑' },\n { value: '0114', label: '鸳鸯刀' }\n ]\n}, {\n value: '0200',\n label: '古龙',\n children: [\n { value: '0201', label: '小李飞刀' },\n { value: '0202', label: '绝代双骄' },\n { value: '0203', label: '大旗英雄传' },\n { value: '0204', label: '英雄无泪' },\n { value: '0205', label: '边城浪子' },\n { value: '0206', label: '楚留香传奇' },\n ],\n}, {\n children: [\n { value: '0301', label: '白发魔女传' },\n { value: '0302', label: '七剑下天山' },\n { value: '0303', label: '云海玉弓缘' }\n ],\n value: '0300',\n label: '梁羽生'\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n label: '',\n data: []\n };\n this.handleChange = this.handleChange.bind(this);\n }\n componentDidMount() {\n this.setState({ data });\n }\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n label: extra.selectedPath.map(d => d.label).join(' / '), \n });\n }\n render() {\n return (\n
\n
CascaderSelect:
\n \n
\n );\n }\n}\nReactDOM.render(, mountNode);\n\n````\n```css\n.next-menu-item:focus {\n background-color: #F2F3F7;\n}\n```","html":"
import { CascaderSelect } from '@alifd/next';\n\nconst data = [{\n    value: '0100',\n    label: '金庸',\n    children: [\n        { value: '0101', label: '飞狐外传' },\n        { value: '0102', label: '雪山飞狐' },\n        { value: '0103', label: '连城诀' },\n        { value: '0104', label: '天龙八部' },\n        { value: '0105', label: '射雕英雄传' },\n        { value: '0106', label: '白马啸西风' },\n        { value: '0107', label: '鹿鼎记' },\n        { value: '0108', label: '笑傲江湖' },\n        { value: '0109', label: '书剑恩仇录' },\n        { value: '0110', label: '神雕侠侣' },\n        { value: '0111', label: '侠客行' },\n        { value: '0112', label: '倚天屠龙记' },\n        { value: '0113', label: '碧血剑' },\n        { value: '0114', label: '鸳鸯刀' }\n    ]\n}, {\n    value: '0200',\n    label: '古龙',\n    children: [\n        { value: '0201', label: '小李飞刀' },\n        { value: '0202', label: '绝代双骄' },\n        { value: '0203', label: '大旗英雄传' },\n        { value: '0204', label: '英雄无泪' },\n        { value: '0205', label: '边城浪子' },\n        { value: '0206', label: '楚留香传奇' },\n    ],\n}, {\n    children: [\n        { value: '0301', label: '白发魔女传' },\n        { value: '0302', label: '七剑下天山' },\n        { value: '0303', label: '云海玉弓缘' }\n    ],\n    value: '0300',\n    label: '梁羽生'\n}];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            label: '',\n            data: []\n        };\n        this.handleChange = this.handleChange.bind(this);\n    }\n    componentDidMount() {\n        this.setState({ data });\n    }\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n\n        this.setState({\n            label: extra.selectedPath.map(d => d.label).join(' / '),       \n        });\n    }\n    render() {\n        return (\n            <div>\n                <div id=\"a11y-cascader-select\" >CascaderSelect: </div>\n                <CascaderSelect  dataSource={this.state.data} onChange={this.handleChange} listStyle={{ width: '200px', height: '256px' }} aria-labelledby=\"a11y-cascader-select\"/>\n            </div>\n        );\n    }\n}\nReactDOM.render(<Demo />, mountNode);\n
.next-menu-item:focus {\n    background-color: #F2F3F7;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader-select/demo/accessibility.md b/compiled_docs/cascader-select/demo/accessibility.md new file mode 100644 index 0000000000..ab09b884e2 --- /dev/null +++ b/compiled_docs/cascader-select/demo/accessibility.md @@ -0,0 +1 @@ +{"title":"无障碍","meta":{"title":"无障碍","description":"\n

当聚焦在组件上时，通过aria-labelledby对组件进行描述。关于键盘操作请参考ARIA and KeyBoard。

\n","order":"9"},"codes":{"jsx":"import { CascaderSelect } from '@alifd/next';\n\nconst data = [{\n value: '0100',\n label: '金庸',\n children: [\n { value: '0101', label: '飞狐外传' },\n { value: '0102', label: '雪山飞狐' },\n { value: '0103', label: '连城诀' },\n { value: '0104', label: '天龙八部' },\n { value: '0105', label: '射雕英雄传' },\n { value: '0106', label: '白马啸西风' },\n { value: '0107', label: '鹿鼎记' },\n { value: '0108', label: '笑傲江湖' },\n { value: '0109', label: '书剑恩仇录' },\n { value: '0110', label: '神雕侠侣' },\n { value: '0111', label: '侠客行' },\n { value: '0112', label: '倚天屠龙记' },\n { value: '0113', label: '碧血剑' },\n { value: '0114', label: '鸳鸯刀' }\n ]\n}, {\n value: '0200',\n label: '古龙',\n children: [\n { value: '0201', label: '小李飞刀' },\n { value: '0202', label: '绝代双骄' },\n { value: '0203', label: '大旗英雄传' },\n { value: '0204', label: '英雄无泪' },\n { value: '0205', label: '边城浪子' },\n { value: '0206', label: '楚留香传奇' },\n ],\n}, {\n children: [\n { value: '0301', label: '白发魔女传' },\n { value: '0302', label: '七剑下天山' },\n { value: '0303', label: '云海玉弓缘' }\n ],\n value: '0300',\n label: '梁羽生'\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n label: '',\n data: []\n };\n this.handleChange = this.handleChange.bind(this);\n }\n componentDidMount() {\n this.setState({ data });\n }\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n label: extra.selectedPath.map(d => d.label).join(' / '), \n });\n }\n render() {\n return (\n
\n
CascaderSelect:
\n \n
\n );\n }\n}\nReactDOM.render(, mountNode);\n\n","css":".next-menu-item:focus {\n background-color: #F2F3F7;\n}\n"},"body":"\n\n````jsx\nimport { CascaderSelect } from '@alifd/next';\n\nconst data = [{\n value: '0100',\n label: '金庸',\n children: [\n { value: '0101', label: '飞狐外传' },\n { value: '0102', label: '雪山飞狐' },\n { value: '0103', label: '连城诀' },\n { value: '0104', label: '天龙八部' },\n { value: '0105', label: '射雕英雄传' },\n { value: '0106', label: '白马啸西风' },\n { value: '0107', label: '鹿鼎记' },\n { value: '0108', label: '笑傲江湖' },\n { value: '0109', label: '书剑恩仇录' },\n { value: '0110', label: '神雕侠侣' },\n { value: '0111', label: '侠客行' },\n { value: '0112', label: '倚天屠龙记' },\n { value: '0113', label: '碧血剑' },\n { value: '0114', label: '鸳鸯刀' }\n ]\n}, {\n value: '0200',\n label: '古龙',\n children: [\n { value: '0201', label: '小李飞刀' },\n { value: '0202', label: '绝代双骄' },\n { value: '0203', label: '大旗英雄传' },\n { value: '0204', label: '英雄无泪' },\n { value: '0205', label: '边城浪子' },\n { value: '0206', label: '楚留香传奇' },\n ],\n}, {\n children: [\n { value: '0301', label: '白发魔女传' },\n { value: '0302', label: '七剑下天山' },\n { value: '0303', label: '云海玉弓缘' }\n ],\n value: '0300',\n label: '梁羽生'\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n label: '',\n data: []\n };\n this.handleChange = this.handleChange.bind(this);\n }\n componentDidMount() {\n this.setState({ data });\n }\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n label: extra.selectedPath.map(d => d.label).join(' / '), \n });\n }\n render() {\n return (\n
\n
CascaderSelect:
\n \n
\n );\n }\n}\nReactDOM.render(, mountNode);\n\n````\n```css\n.next-menu-item:focus {\n background-color: #F2F3F7;\n}\n```","html":"
import { CascaderSelect } from '@alifd/next';\n\nconst data = [{\n    value: '0100',\n    label: '金庸',\n    children: [\n        { value: '0101', label: '飞狐外传' },\n        { value: '0102', label: '雪山飞狐' },\n        { value: '0103', label: '连城诀' },\n        { value: '0104', label: '天龙八部' },\n        { value: '0105', label: '射雕英雄传' },\n        { value: '0106', label: '白马啸西风' },\n        { value: '0107', label: '鹿鼎记' },\n        { value: '0108', label: '笑傲江湖' },\n        { value: '0109', label: '书剑恩仇录' },\n        { value: '0110', label: '神雕侠侣' },\n        { value: '0111', label: '侠客行' },\n        { value: '0112', label: '倚天屠龙记' },\n        { value: '0113', label: '碧血剑' },\n        { value: '0114', label: '鸳鸯刀' }\n    ]\n}, {\n    value: '0200',\n    label: '古龙',\n    children: [\n        { value: '0201', label: '小李飞刀' },\n        { value: '0202', label: '绝代双骄' },\n        { value: '0203', label: '大旗英雄传' },\n        { value: '0204', label: '英雄无泪' },\n        { value: '0205', label: '边城浪子' },\n        { value: '0206', label: '楚留香传奇' },\n    ],\n}, {\n    children: [\n        { value: '0301', label: '白发魔女传' },\n        { value: '0302', label: '七剑下天山' },\n        { value: '0303', label: '云海玉弓缘' }\n    ],\n    value: '0300',\n    label: '梁羽生'\n}];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            label: '',\n            data: []\n        };\n        this.handleChange = this.handleChange.bind(this);\n    }\n    componentDidMount() {\n        this.setState({ data });\n    }\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n\n        this.setState({\n            label: extra.selectedPath.map(d => d.label).join(' / '),       \n        });\n    }\n    render() {\n        return (\n            <div>\n                <div id=\"a11y-cascader-select\" >CascaderSelect: </div>\n                <CascaderSelect  dataSource={this.state.data} onChange={this.handleChange} listStyle={{ width: '200px', height: '256px' }} aria-labelledby=\"a11y-cascader-select\"/>\n            </div>\n        );\n    }\n}\nReactDOM.render(<Demo />, mountNode);\n
.next-menu-item:focus {\n    background-color: #F2F3F7;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader-select/demo/basic.en-us.md b/compiled_docs/cascader-select/demo/basic.en-us.md new file mode 100644 index 0000000000..e63f74fe9c --- /dev/null +++ b/compiled_docs/cascader-select/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic Usage","meta":{"title":"Basic Usage","description":"\n

Demo the basic single select usage.

\n","order":"0"},"codes":{"jsx":"import { CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => {\n data[1].disabled = true;\n this.setState({ data });\n })\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => {\n data[1].disabled = true;\n this.setState({ data });\n })\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            data: []\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    componentDidMount() {\n        fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n            .then(response => response.json())\n            .then(data => {\n                data[1].disabled = true;\n                this.setState({ data });\n            })\n            .catch(e => console.log(e));\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n    }\n\n    render() {\n        return <CascaderSelect style={{ width: '302px' }} dataSource={this.state.data} onChange={this.handleChange} />;\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/cascader-select/demo/basic.md b/compiled_docs/cascader-select/demo/basic.md new file mode 100644 index 0000000000..5e04efc891 --- /dev/null +++ b/compiled_docs/cascader-select/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本使用","meta":{"title":"基本使用","description":"\n

展示基本的单选用法。

\n","order":"0"},"codes":{"jsx":"import { CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => {\n data[1].disabled = true;\n this.setState({ data });\n })\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => {\n data[1].disabled = true;\n this.setState({ data });\n })\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            data: []\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    componentDidMount() {\n        fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n            .then(response => response.json())\n            .then(data => {\n                data[1].disabled = true;\n                this.setState({ data });\n            })\n            .catch(e => console.log(e));\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n    }\n\n    render() {\n        return <CascaderSelect style={{ width: '302px' }} dataSource={this.state.data} onChange={this.handleChange} />;\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/cascader-select/demo/custom-style.en-us.md b/compiled_docs/cascader-select/demo/custom-style.en-us.md new file mode 100644 index 0000000000..711b37a0fd --- /dev/null +++ b/compiled_docs/cascader-select/demo/custom-style.en-us.md @@ -0,0 +1 @@ +{"title":"Customize style","meta":{"title":"Customize style","description":"\n

You can use displayRender to customize the results displayed when single select, and you can customize the component width and height by using listStyle and listClassName.

\n","order":"6"},"codes":{"jsx":"import { CascaderSelect, Icon } from '@alifd/next';\n\nconst dataSource = [{\n value: '2973',\n label: '陕西',\n children: [{\n value: '2974',\n label: '西安',\n children: [\n { value: '2975', label: '西安市' },\n { value: '2976', label: '高陵县' }\n ]\n }, {\n value: '2980',\n label: '铜川',\n children: [\n { value: '2981', label: '铜川市' },\n { value: '2982', label: '宜君县' }\n ]\n }]\n}, {\n value: '3371',\n label: '新疆',\n children: [{\n value: '3430',\n label: '巴音郭楞蒙古自治州',\n children: [\n { value: '3431', label: '库尔勒市' },\n { value: '3432', label: '和静县' }\n ]\n }]\n}];\n\nconst itemRender = item => {\n return (\n \n {item.label}\n \n );\n};\n\nReactDOM.render( labels[labels.length - 1]} defaultValue=\"3431\" dataSource={dataSource} itemRender={itemRender} />, mountNode);\n"},"body":"\n````jsx\nimport { CascaderSelect, Icon } from '@alifd/next';\n\nconst dataSource = [{\n value: '2973',\n label: '陕西',\n children: [{\n value: '2974',\n label: '西安',\n children: [\n { value: '2975', label: '西安市' },\n { value: '2976', label: '高陵县' }\n ]\n }, {\n value: '2980',\n label: '铜川',\n children: [\n { value: '2981', label: '铜川市' },\n { value: '2982', label: '宜君县' }\n ]\n }]\n}, {\n value: '3371',\n label: '新疆',\n children: [{\n value: '3430',\n label: '巴音郭楞蒙古自治州',\n children: [\n { value: '3431', label: '库尔勒市' },\n { value: '3432', label: '和静县' }\n ]\n }]\n}];\n\nconst itemRender = item => {\n return (\n \n {item.label}\n \n );\n};\n\nReactDOM.render( labels[labels.length - 1]} defaultValue=\"3431\" dataSource={dataSource} itemRender={itemRender} />, mountNode);\n````","html":"
import { CascaderSelect, Icon } from '@alifd/next';\n\nconst dataSource = [{\n    value: '2973',\n    label: '陕西',\n    children: [{\n        value: '2974',\n        label: '西安',\n        children: [\n            { value: '2975', label: '西安市' },\n            { value: '2976', label: '高陵县' }\n        ]\n    }, {\n        value: '2980',\n        label: '铜川',\n        children: [\n            { value: '2981', label: '铜川市' },\n            { value: '2982', label: '宜君县' }\n        ]\n    }]\n}, {\n    value: '3371',\n    label: '新疆',\n    children: [{\n        value: '3430',\n        label: '巴音郭楞蒙古自治州',\n        children: [\n            { value: '3431', label: '库尔勒市' },\n            { value: '3432', label: '和静县' }\n        ]\n    }]\n}];\n\nconst itemRender = item => {\n    return (\n        <span>\n            <Icon type=\"account\" size=\"xs\" /> {item.label}\n        </span>\n    );\n};\n\nReactDOM.render(<CascaderSelect style={{ width: '452px'}} listStyle={{ width: '150px', height: '160px' }} displayRender={labels => labels[labels.length - 1]} defaultValue=\"3431\" dataSource={dataSource} itemRender={itemRender} />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/cascader-select/demo/custom-style.md b/compiled_docs/cascader-select/demo/custom-style.md new file mode 100644 index 0000000000..9a7404ba79 --- /dev/null +++ b/compiled_docs/cascader-select/demo/custom-style.md @@ -0,0 +1 @@ +{"title":"自定义样式","meta":{"title":"自定义样式","description":"\n

可以通过 displayRender 来定制单选时展示的结果，可以通过 listStyle，listClassName 来定制组件宽高。

\n","order":"6"},"codes":{"jsx":"import { CascaderSelect, Icon } from '@alifd/next';\n\nconst dataSource = [{\n value: '2973',\n label: '陕西',\n children: [{\n value: '2974',\n label: '西安',\n children: [\n { value: '2975', label: '西安市' },\n { value: '2976', label: '高陵县' }\n ]\n }, {\n value: '2980',\n label: '铜川',\n children: [\n { value: '2981', label: '铜川市' },\n { value: '2982', label: '宜君县' }\n ]\n }]\n}, {\n value: '3371',\n label: '新疆',\n children: [{\n value: '3430',\n label: '巴音郭楞蒙古自治州',\n children: [\n { value: '3431', label: '库尔勒市' },\n { value: '3432', label: '和静县' }\n ]\n }]\n}];\n\nconst itemRender = item => {\n return (\n \n {item.label}\n \n );\n};\n\nReactDOM.render( labels[labels.length - 1]} defaultValue=\"3431\" dataSource={dataSource} itemRender={itemRender} />, mountNode);\n"},"body":"\n\n````jsx\nimport { CascaderSelect, Icon } from '@alifd/next';\n\nconst dataSource = [{\n value: '2973',\n label: '陕西',\n children: [{\n value: '2974',\n label: '西安',\n children: [\n { value: '2975', label: '西安市' },\n { value: '2976', label: '高陵县' }\n ]\n }, {\n value: '2980',\n label: '铜川',\n children: [\n { value: '2981', label: '铜川市' },\n { value: '2982', label: '宜君县' }\n ]\n }]\n}, {\n value: '3371',\n label: '新疆',\n children: [{\n value: '3430',\n label: '巴音郭楞蒙古自治州',\n children: [\n { value: '3431', label: '库尔勒市' },\n { value: '3432', label: '和静县' }\n ]\n }]\n}];\n\nconst itemRender = item => {\n return (\n \n {item.label}\n \n );\n};\n\nReactDOM.render( labels[labels.length - 1]} defaultValue=\"3431\" dataSource={dataSource} itemRender={itemRender} />, mountNode);\n````","html":"
import { CascaderSelect, Icon } from '@alifd/next';\n\nconst dataSource = [{\n    value: '2973',\n    label: '陕西',\n    children: [{\n        value: '2974',\n        label: '西安',\n        children: [\n            { value: '2975', label: '西安市' },\n            { value: '2976', label: '高陵县' }\n        ]\n    }, {\n        value: '2980',\n        label: '铜川',\n        children: [\n            { value: '2981', label: '铜川市' },\n            { value: '2982', label: '宜君县' }\n        ]\n    }]\n}, {\n    value: '3371',\n    label: '新疆',\n    children: [{\n        value: '3430',\n        label: '巴音郭楞蒙古自治州',\n        children: [\n            { value: '3431', label: '库尔勒市' },\n            { value: '3432', label: '和静县' }\n        ]\n    }]\n}];\n\nconst itemRender = item => {\n    return (\n        <span>\n            <Icon type=\"account\" size=\"xs\" /> {item.label}\n        </span>\n    );\n};\n\nReactDOM.render(<CascaderSelect style={{ width: '452px'}} listStyle={{ width: '150px', height: '160px' }} displayRender={labels => labels[labels.length - 1]} defaultValue=\"3431\" dataSource={dataSource} itemRender={itemRender} />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/cascader-select/demo/custom.md b/compiled_docs/cascader-select/demo/custom.md new file mode 100644 index 0000000000..b8b4977758 --- /dev/null +++ b/compiled_docs/cascader-select/demo/custom.md @@ -0,0 +1 @@ +{"title":"渲染 DataSource 中不存在的 value","meta":{"title":"渲染 DataSource 中不存在的 value","description":"\n","order":"8"},"codes":{"jsx":"import { CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => {\n data[1].disabled = true;\n this.setState({ data });\n })\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n valueRender = (item) => {\n if (item.label) {\n return item.label; // 正常的item\n }\n\n // value在 dataSouce里不存在时渲染。\n return item.value === '432988' ? '不存在的' : item.value;\n };\n\n render() {\n return ;\n }\n}\nReactDOM.render(, mountNode);\n"},"body":"\n\n```jsx\nimport { CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => {\n data[1].disabled = true;\n this.setState({ data });\n })\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n valueRender = (item) => {\n if (item.label) {\n return item.label; // 正常的item\n }\n\n // value在 dataSouce里不存在时渲染。\n return item.value === '432988' ? '不存在的' : item.value;\n };\n\n render() {\n return ;\n }\n}\nReactDOM.render(, mountNode);\n```","html":"
import { CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            data: []\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    componentDidMount() {\n        fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n            .then(response => response.json())\n            .then(data => {\n                data[1].disabled = true;\n                this.setState({ data });\n            })\n            .catch(e => console.log(e));\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n    }\n\n    valueRender = (item) => {\n        if (item.label) {\n            return item.label; // 正常的item\n        }\n\n        // value在 dataSouce里不存在时渲染。\n        return item.value === '432988' ? '不存在的' : item.value;\n    };\n\n    render() {\n        return <CascaderSelect valueRender={this.valueRender} defaultValue=\"432988\" style={{ width: '302px' }} dataSource={this.state.data} onChange={this.handleChange} />;\n    }\n}\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/cascader-select/demo/dynamic.en-us.md b/compiled_docs/cascader-select/demo/dynamic.en-us.md new file mode 100644 index 0000000000..93a9dfe000 --- /dev/null +++ b/compiled_docs/cascader-select/demo/dynamic.en-us.md @@ -0,0 +1 @@ +{"title":"Loading data asynchronously","meta":{"title":"Loading data asynchronously","description":"\n

Demon loading data asynchronously.

\n","order":"7"},"codes":{"jsx":"import { CascaderSelect } from '@alifd/next';\n\nconst dataSource = [{\n value: '2973',\n label: '陕西'\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n dataSource\n };\n\n this.onLoadData = this.onLoadData.bind(this);\n }\n\n onLoadData(data) {\n console.log(data);\n\n return new Promise(resolve => {\n setTimeout(() => {\n this.setState({\n dataSource: [{\n value: '2973',\n label: '陕西',\n children: [{\n value: '2974',\n label: '西安',\n children: [\n { value: '2975', label: '西安市', isLeaf: true },\n { value: '2976', label: '高陵县', isLeaf: true }\n ]\n }, {\n value: '2980',\n label: '铜川',\n children: [\n { value: '2981', label: '铜川市', isLeaf: true },\n { value: '2982', label: '宜君县', isLeaf: true }\n ]\n }]\n }]\n }, resolve);\n }, 500);\n });\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { CascaderSelect } from '@alifd/next';\n\nconst dataSource = [{\n value: '2973',\n label: '陕西'\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n dataSource\n };\n\n this.onLoadData = this.onLoadData.bind(this);\n }\n\n onLoadData(data) {\n console.log(data);\n\n return new Promise(resolve => {\n setTimeout(() => {\n this.setState({\n dataSource: [{\n value: '2973',\n label: '陕西',\n children: [{\n value: '2974',\n label: '西安',\n children: [\n { value: '2975', label: '西安市', isLeaf: true },\n { value: '2976', label: '高陵县', isLeaf: true }\n ]\n }, {\n value: '2980',\n label: '铜川',\n children: [\n { value: '2981', label: '铜川市', isLeaf: true },\n { value: '2982', label: '宜君县', isLeaf: true }\n ]\n }]\n }]\n }, resolve);\n }, 500);\n });\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { CascaderSelect } from '@alifd/next';\n\nconst dataSource = [{\n    value: '2973',\n    label: '陕西'\n}];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            dataSource\n        };\n\n        this.onLoadData = this.onLoadData.bind(this);\n    }\n\n    onLoadData(data) {\n        console.log(data);\n\n        return new Promise(resolve => {\n            setTimeout(() => {\n                this.setState({\n                    dataSource: [{\n                        value: '2973',\n                        label: '陕西',\n                        children: [{\n                            value: '2974',\n                            label: '西安',\n                            children: [\n                                { value: '2975', label: '西安市', isLeaf: true },\n                                { value: '2976', label: '高陵县', isLeaf: true }\n                            ]\n                        }, {\n                            value: '2980',\n                            label: '铜川',\n                            children: [\n                                { value: '2981', label: '铜川市', isLeaf: true },\n                                { value: '2982', label: '宜君县', isLeaf: true }\n                            ]\n                        }]\n                    }]\n                }, resolve);\n            }, 500);\n        });\n    }\n\n    render() {\n        return <CascaderSelect style={{ width: '302px' }} dataSource={this.state.dataSource} loadData={this.onLoadData} />;\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/cascader-select/demo/dynamic.md b/compiled_docs/cascader-select/demo/dynamic.md new file mode 100644 index 0000000000..3f2f3bc6f7 --- /dev/null +++ b/compiled_docs/cascader-select/demo/dynamic.md @@ -0,0 +1 @@ +{"title":"异步加载数据","meta":{"title":"异步加载数据","description":"\n

展示动态获取数据的用法。

\n","order":"7"},"codes":{"jsx":"import { CascaderSelect } from '@alifd/next';\n\nconst dataSource = [{\n value: '2973',\n label: '陕西'\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n dataSource\n };\n\n this.onLoadData = this.onLoadData.bind(this);\n }\n\n onLoadData(data) {\n console.log(data);\n\n return new Promise(resolve => {\n setTimeout(() => {\n this.setState({\n dataSource: [{\n value: '2973',\n label: '陕西',\n children: [{\n value: '2974',\n label: '西安',\n children: [\n { value: '2975', label: '西安市', isLeaf: true },\n { value: '2976', label: '高陵县', isLeaf: true }\n ]\n }, {\n value: '2980',\n label: '铜川',\n children: [\n { value: '2981', label: '铜川市', isLeaf: true },\n { value: '2982', label: '宜君县', isLeaf: true }\n ]\n }]\n }]\n }, resolve);\n }, 500);\n });\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { CascaderSelect } from '@alifd/next';\n\nconst dataSource = [{\n value: '2973',\n label: '陕西'\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n dataSource\n };\n\n this.onLoadData = this.onLoadData.bind(this);\n }\n\n onLoadData(data) {\n console.log(data);\n\n return new Promise(resolve => {\n setTimeout(() => {\n this.setState({\n dataSource: [{\n value: '2973',\n label: '陕西',\n children: [{\n value: '2974',\n label: '西安',\n children: [\n { value: '2975', label: '西安市', isLeaf: true },\n { value: '2976', label: '高陵县', isLeaf: true }\n ]\n }, {\n value: '2980',\n label: '铜川',\n children: [\n { value: '2981', label: '铜川市', isLeaf: true },\n { value: '2982', label: '宜君县', isLeaf: true }\n ]\n }]\n }]\n }, resolve);\n }, 500);\n });\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { CascaderSelect } from '@alifd/next';\n\nconst dataSource = [{\n    value: '2973',\n    label: '陕西'\n}];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            dataSource\n        };\n\n        this.onLoadData = this.onLoadData.bind(this);\n    }\n\n    onLoadData(data) {\n        console.log(data);\n\n        return new Promise(resolve => {\n            setTimeout(() => {\n                this.setState({\n                    dataSource: [{\n                        value: '2973',\n                        label: '陕西',\n                        children: [{\n                            value: '2974',\n                            label: '西安',\n                            children: [\n                                { value: '2975', label: '西安市', isLeaf: true },\n                                { value: '2976', label: '高陵县', isLeaf: true }\n                            ]\n                        }, {\n                            value: '2980',\n                            label: '铜川',\n                            children: [\n                                { value: '2981', label: '铜川市', isLeaf: true },\n                                { value: '2982', label: '宜君县', isLeaf: true }\n                            ]\n                        }]\n                    }]\n                }, resolve);\n            }, 500);\n        });\n    }\n\n    render() {\n        return <CascaderSelect style={{ width: '302px' }} dataSource={this.state.dataSource} loadData={this.onLoadData} />;\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/cascader-select/demo/expand-trigger.en-us.md b/compiled_docs/cascader-select/demo/expand-trigger.en-us.md new file mode 100644 index 0000000000..352c5c6333 --- /dev/null +++ b/compiled_docs/cascader-select/demo/expand-trigger.en-us.md @@ -0,0 +1 @@ +{"title":"Expand trigger type","meta":{"title":"Expand trigger type","description":"\n

You can set expand trigger type by setting expandTriggerType, support click and hover, the default is click.

\n","order":"1"},"codes":{"jsx":"import { Radio, CascaderSelect } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n triggerType: 'click',\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n this.handleTriggerTypeChange = this.handleTriggerTypeChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data }))\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n handleTriggerTypeChange(triggerType) {\n this.setState({\n triggerType\n });\n }\n\n render() {\n return (\n
\n
\n Expand trigger type:\n \n
\n\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".trigger-check {\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n\n.trigger-check .next-radio-group {\n margin-left: 10px;\n}\n"},"body":"\n````jsx\nimport { Radio, CascaderSelect } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n triggerType: 'click',\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n this.handleTriggerTypeChange = this.handleTriggerTypeChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data }))\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n handleTriggerTypeChange(triggerType) {\n this.setState({\n triggerType\n });\n }\n\n render() {\n return (\n
\n
\n Expand trigger type:\n \n
\n\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.trigger-check {\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n\n.trigger-check .next-radio-group {\n margin-left: 10px;\n}\n````","html":"
import { Radio, CascaderSelect } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            triggerType: 'click',\n            data: []\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n        this.handleTriggerTypeChange = this.handleTriggerTypeChange.bind(this);\n    }\n\n    componentDidMount() {\n        fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n            .then(response => response.json())\n            .then(data => this.setState({ data }))\n            .catch(e => console.log(e));\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n    }\n\n    handleTriggerTypeChange(triggerType) {\n        this.setState({\n            triggerType\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <div className=\"trigger-check\">\n                    Expand trigger type:\n                    <RadioGroup dataSource={['click', 'hover']} value={this.state.triggerType} onChange={this.handleTriggerTypeChange} />\n                </div>\n\n                <CascaderSelect style={{ width: '302px' }} expandTriggerType={this.state.triggerType} dataSource={this.state.data} onChange={this.handleChange} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.trigger-check {\n    margin-bottom: 10px;\n    font-size: 14px;\n    color: #666;\n}\n\n.trigger-check .next-radio-group {\n    margin-left: 10px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader-select/demo/expand-trigger.md b/compiled_docs/cascader-select/demo/expand-trigger.md new file mode 100644 index 0000000000..b9950b9cf4 --- /dev/null +++ b/compiled_docs/cascader-select/demo/expand-trigger.md @@ -0,0 +1 @@ +{"title":"展开触发行为","meta":{"title":"展开触发行为","description":"\n

展示可通过 expandTriggerType 来设置不同的展开触发行为，支持 click 和 hover，默认值为 click。

\n","order":"1"},"codes":{"jsx":"import { Radio, CascaderSelect } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n triggerType: 'click',\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n this.handleTriggerTypeChange = this.handleTriggerTypeChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data }))\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n handleTriggerTypeChange(triggerType) {\n this.setState({\n triggerType\n });\n }\n\n render() {\n return (\n
\n
\n Expand trigger type:\n \n
\n\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".trigger-check {\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n\n.trigger-check .next-radio-group {\n margin-left: 10px;\n}\n"},"body":"\n\n````jsx\nimport { Radio, CascaderSelect } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n triggerType: 'click',\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n this.handleTriggerTypeChange = this.handleTriggerTypeChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data }))\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n handleTriggerTypeChange(triggerType) {\n this.setState({\n triggerType\n });\n }\n\n render() {\n return (\n
\n
\n Expand trigger type:\n \n
\n\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.trigger-check {\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n\n.trigger-check .next-radio-group {\n margin-left: 10px;\n}\n````","html":"
import { Radio, CascaderSelect } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            triggerType: 'click',\n            data: []\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n        this.handleTriggerTypeChange = this.handleTriggerTypeChange.bind(this);\n    }\n\n    componentDidMount() {\n        fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n            .then(response => response.json())\n            .then(data => this.setState({ data }))\n            .catch(e => console.log(e));\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n    }\n\n    handleTriggerTypeChange(triggerType) {\n        this.setState({\n            triggerType\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <div className=\"trigger-check\">\n                    Expand trigger type:\n                    <RadioGroup dataSource={['click', 'hover']} value={this.state.triggerType} onChange={this.handleTriggerTypeChange} />\n                </div>\n\n                <CascaderSelect style={{ width: '302px' }} expandTriggerType={this.state.triggerType} dataSource={this.state.data} onChange={this.handleChange} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.trigger-check {\n    margin-bottom: 10px;\n    font-size: 14px;\n    color: #666;\n}\n\n.trigger-check .next-radio-group {\n    margin-left: 10px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader-select/demo/multiple-control.en-us.md b/compiled_docs/cascader-select/demo/multiple-control.en-us.md new file mode 100644 index 0000000000..6ca72b8c64 --- /dev/null +++ b/compiled_docs/cascader-select/demo/multiple-control.en-us.md @@ -0,0 +1 @@ +{"title":"Parent and child nodes checked is related","meta":{"title":"Parent and child nodes checked is related","description":"\n

Demo whether parent and child nodes checked is related.

\n","order":"4"},"codes":{"jsx":"import { Checkbox, CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: [],\n data: [],\n checkStrictly: false\n };\n\n this.handleCheck = this.handleCheck.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data, value: ['2975'] }))\n .catch(e => console.log(e));\n }\n\n handleCheck() {\n this.setState({\n checkStrictly: !this.state.checkStrictly,\n value: []\n });\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n value\n });\n }\n\n render() {\n return (\n
\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".control-multiple-demo .strictly-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.control-multiple-demo .strictly-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n"},"body":"\n````jsx\nimport { Checkbox, CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: [],\n data: [],\n checkStrictly: false\n };\n\n this.handleCheck = this.handleCheck.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data, value: ['2975'] }))\n .catch(e => console.log(e));\n }\n\n handleCheck() {\n this.setState({\n checkStrictly: !this.state.checkStrictly,\n value: []\n });\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n value\n });\n }\n\n render() {\n return (\n
\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.control-multiple-demo .strictly-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.control-multiple-demo .strictly-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n````","html":"
import { Checkbox, CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: [],\n            data: [],\n            checkStrictly: false\n        };\n\n        this.handleCheck = this.handleCheck.bind(this);\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    componentDidMount() {\n        fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n            .then(response => response.json())\n            .then(data => this.setState({ data, value: ['2975'] }))\n            .catch(e => console.log(e));\n    }\n\n    handleCheck() {\n        this.setState({\n            checkStrictly: !this.state.checkStrictly,\n            value: []\n        });\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n\n        this.setState({\n            value\n        });\n    }\n\n    render() {\n        return (\n            <div className=\"control-multiple-demo\">\n                <label className=\"strictly-check\">\n                    <Checkbox value={this.state.checkStrictly} onChange={this.handleCheck} />\n                    <span className=\"strictly-text\">Enable checkStrictly</span>\n                </label>\n                <CascaderSelect style={{ width: '302px' }} multiple checkStrictly={this.state.checkStrictly} value={this.state.value} dataSource={this.state.data} onChange={this.handleChange} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.control-multiple-demo .strictly-check {\n    display: block;\n    margin-bottom: 10px;\n}\n\n.control-multiple-demo .strictly-text {\n    display: inline-block;\n    margin-left: 10px;\n    vertical-align: middle;\n    color: #666;\n    font-size: 14px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader-select/demo/multiple-control.md b/compiled_docs/cascader-select/demo/multiple-control.md new file mode 100644 index 0000000000..9b8cb8b2cd --- /dev/null +++ b/compiled_docs/cascader-select/demo/multiple-control.md @@ -0,0 +1 @@ +{"title":"设置父子节点选中是否关联","meta":{"title":"设置父子节点选中是否关联","description":"\n

展示受控多选以及是否开启严格受控父子节点选中不再关联的用法。

\n","order":"4"},"codes":{"jsx":"import { Checkbox, CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: [],\n data: [],\n checkStrictly: false\n };\n\n this.handleCheck = this.handleCheck.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data, value: ['2975'] }))\n .catch(e => console.log(e));\n }\n\n handleCheck() {\n this.setState({\n checkStrictly: !this.state.checkStrictly,\n value: []\n });\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n value\n });\n }\n\n render() {\n return (\n
\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".control-multiple-demo .strictly-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.control-multiple-demo .strictly-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n"},"body":"\n\n````jsx\nimport { Checkbox, CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: [],\n data: [],\n checkStrictly: false\n };\n\n this.handleCheck = this.handleCheck.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data, value: ['2975'] }))\n .catch(e => console.log(e));\n }\n\n handleCheck() {\n this.setState({\n checkStrictly: !this.state.checkStrictly,\n value: []\n });\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n value\n });\n }\n\n render() {\n return (\n
\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.control-multiple-demo .strictly-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.control-multiple-demo .strictly-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n````","html":"
import { Checkbox, CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: [],\n            data: [],\n            checkStrictly: false\n        };\n\n        this.handleCheck = this.handleCheck.bind(this);\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    componentDidMount() {\n        fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n            .then(response => response.json())\n            .then(data => this.setState({ data, value: ['2975'] }))\n            .catch(e => console.log(e));\n    }\n\n    handleCheck() {\n        this.setState({\n            checkStrictly: !this.state.checkStrictly,\n            value: []\n        });\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n\n        this.setState({\n            value\n        });\n    }\n\n    render() {\n        return (\n            <div className=\"control-multiple-demo\">\n                <label className=\"strictly-check\">\n                    <Checkbox value={this.state.checkStrictly} onChange={this.handleCheck} />\n                    <span className=\"strictly-text\">Enable checkStrictly</span>\n                </label>\n                <CascaderSelect style={{ width: '302px' }} multiple checkStrictly={this.state.checkStrictly} value={this.state.value} dataSource={this.state.data} onChange={this.handleChange} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.control-multiple-demo .strictly-check {\n    display: block;\n    margin-bottom: 10px;\n}\n\n.control-multiple-demo .strictly-text {\n    display: inline-block;\n    margin-left: 10px;\n    vertical-align: middle;\n    color: #666;\n    font-size: 14px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader-select/demo/multiple.en-us.md b/compiled_docs/cascader-select/demo/multiple.en-us.md new file mode 100644 index 0000000000..daaf500881 --- /dev/null +++ b/compiled_docs/cascader-select/demo/multiple.en-us.md @@ -0,0 +1 @@ +{"title":"Multiple select","meta":{"title":"Multiple select","description":"\n

Demo the basic multiple select usage.

\n","order":"2"},"codes":{"jsx":"import { CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => {\n data[1].disabled = true;\n data[2].checkboxDisabled = true;\n this.setState({ data });\n })\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".cascader-value {\n width: 500px;\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n"},"body":"\n````jsx\nimport { CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => {\n data[1].disabled = true;\n data[2].checkboxDisabled = true;\n this.setState({ data });\n })\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.cascader-value {\n width: 500px;\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n````","html":"
import { CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            data: []\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    componentDidMount() {\n        fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n            .then(response => response.json())\n            .then(data => {\n                data[1].disabled = true;\n                data[2].checkboxDisabled = true;\n                this.setState({ data });\n            })\n            .catch(e => console.log(e));\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n    }\n\n    render() {\n        return <CascaderSelect style={{ width: '302px' }} multiple dataSource={this.state.data} onChange={this.handleChange} />;\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.cascader-value {\n    width: 500px;\n    margin-bottom: 10px;\n    font-size: 14px;\n    color: #666;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader-select/demo/multiple.md b/compiled_docs/cascader-select/demo/multiple.md new file mode 100644 index 0000000000..2a286e0ee0 --- /dev/null +++ b/compiled_docs/cascader-select/demo/multiple.md @@ -0,0 +1 @@ +{"title":"多选","meta":{"title":"多选","description":"\n

展示基本的多选用法。

\n","order":"2"},"codes":{"jsx":"import { CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => {\n data[1].disabled = true;\n data[2].checkboxDisabled = true;\n this.setState({ data });\n })\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".cascader-value {\n width: 500px;\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n"},"body":"\n\n````jsx\nimport { CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => {\n data[1].disabled = true;\n data[2].checkboxDisabled = true;\n this.setState({ data });\n })\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.cascader-value {\n width: 500px;\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n````","html":"
import { CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            data: []\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    componentDidMount() {\n        fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n            .then(response => response.json())\n            .then(data => {\n                data[1].disabled = true;\n                data[2].checkboxDisabled = true;\n                this.setState({ data });\n            })\n            .catch(e => console.log(e));\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n    }\n\n    render() {\n        return <CascaderSelect style={{ width: '302px' }} multiple dataSource={this.state.data} onChange={this.handleChange} />;\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.cascader-value {\n    width: 500px;\n    margin-bottom: 10px;\n    font-size: 14px;\n    color: #666;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader-select/demo/search.en-us.md b/compiled_docs/cascader-select/demo/search.en-us.md new file mode 100644 index 0000000000..3a99ce6110 --- /dev/null +++ b/compiled_docs/cascader-select/demo/search.en-us.md @@ -0,0 +1 @@ +{"title":"Search","meta":{"title":"Search","description":"\n

You can enable search by setting showSearch to true.

\n","order":"5"},"codes":{"jsx":"import { Checkbox, CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: [],\n data: [],\n multiple: false\n };\n\n this.handleCheck = this.handleCheck.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data, value: ['2975'] }))\n .catch(e => console.log(e));\n }\n\n handleCheck() {\n this.setState({\n multiple: !this.state.multiple,\n value: []\n });\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n value\n });\n }\n\n render() {\n return (\n
\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".search-demo .multiple-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.search-demo .multiple-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n"},"body":"\n````jsx\nimport { Checkbox, CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: [],\n data: [],\n multiple: false\n };\n\n this.handleCheck = this.handleCheck.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data, value: ['2975'] }))\n .catch(e => console.log(e));\n }\n\n handleCheck() {\n this.setState({\n multiple: !this.state.multiple,\n value: []\n });\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n value\n });\n }\n\n render() {\n return (\n
\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.search-demo .multiple-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.search-demo .multiple-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n````","html":"
import { Checkbox, CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: [],\n            data: [],\n            multiple: false\n        };\n\n        this.handleCheck = this.handleCheck.bind(this);\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    componentDidMount() {\n        fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n            .then(response => response.json())\n            .then(data => this.setState({ data, value: ['2975'] }))\n            .catch(e => console.log(e));\n    }\n\n    handleCheck() {\n        this.setState({\n            multiple: !this.state.multiple,\n            value: []\n        });\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n\n        this.setState({\n            value\n        });\n    }\n\n    render() {\n        return (\n            <div className=\"search-demo\">\n                <label className=\"multiple-check\">\n                    <Checkbox value={this.state.multiple} onChange={this.handleCheck} />\n                    <span className=\"multiple-text\">Multiple select</span>\n                </label>\n                <CascaderSelect style={{ width: '302px' }} showSearch multiple={this.state.multiple} value={this.state.value} dataSource={this.state.data} onChange={this.handleChange} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.search-demo .multiple-check {\n    display: block;\n    margin-bottom: 10px;\n}\n\n.search-demo .multiple-text {\n    display: inline-block;\n    margin-left: 10px;\n    vertical-align: middle;\n    color: #666;\n    font-size: 14px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader-select/demo/search.md b/compiled_docs/cascader-select/demo/search.md new file mode 100644 index 0000000000..438946ed6f --- /dev/null +++ b/compiled_docs/cascader-select/demo/search.md @@ -0,0 +1 @@ +{"title":"搜索","meta":{"title":"搜索","description":"\n

通过设置 showSearch 为 true，可以开启组件的搜索功能。

\n","order":"5"},"codes":{"jsx":"import { Checkbox, CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: [],\n data: [],\n multiple: false\n };\n\n this.handleCheck = this.handleCheck.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data, value: ['2975'] }))\n .catch(e => console.log(e));\n }\n\n handleCheck() {\n this.setState({\n multiple: !this.state.multiple,\n value: []\n });\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n value\n });\n }\n\n render() {\n return (\n
\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".search-demo .multiple-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.search-demo .multiple-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n"},"body":"\n\n````jsx\nimport { Checkbox, CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: [],\n data: [],\n multiple: false\n };\n\n this.handleCheck = this.handleCheck.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data, value: ['2975'] }))\n .catch(e => console.log(e));\n }\n\n handleCheck() {\n this.setState({\n multiple: !this.state.multiple,\n value: []\n });\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n value\n });\n }\n\n render() {\n return (\n
\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.search-demo .multiple-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.search-demo .multiple-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n````","html":"
import { Checkbox, CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: [],\n            data: [],\n            multiple: false\n        };\n\n        this.handleCheck = this.handleCheck.bind(this);\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    componentDidMount() {\n        fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n            .then(response => response.json())\n            .then(data => this.setState({ data, value: ['2975'] }))\n            .catch(e => console.log(e));\n    }\n\n    handleCheck() {\n        this.setState({\n            multiple: !this.state.multiple,\n            value: []\n        });\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n\n        this.setState({\n            value\n        });\n    }\n\n    render() {\n        return (\n            <div className=\"search-demo\">\n                <label className=\"multiple-check\">\n                    <Checkbox value={this.state.multiple} onChange={this.handleCheck} />\n                    <span className=\"multiple-text\">Multiple select</span>\n                </label>\n                <CascaderSelect style={{ width: '302px' }} showSearch multiple={this.state.multiple} value={this.state.value} dataSource={this.state.data} onChange={this.handleChange} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.search-demo .multiple-check {\n    display: block;\n    margin-bottom: 10px;\n}\n\n.search-demo .multiple-text {\n    display: inline-block;\n    margin-left: 10px;\n    vertical-align: middle;\n    color: #666;\n    font-size: 14px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader-select/demo/single-control.en-us.md b/compiled_docs/cascader-select/demo/single-control.en-us.md new file mode 100644 index 0000000000..9d89cd57eb --- /dev/null +++ b/compiled_docs/cascader-select/demo/single-control.en-us.md @@ -0,0 +1 @@ +{"title":"Set whether to only select leaf items","meta":{"title":"Set whether to only select leaf items","description":"\n

Demo the controlled single select and whether it can only select leaf items.

\n","order":"3"},"codes":{"jsx":"import { Checkbox, CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: null,\n changeOnSelect: false,\n data: []\n };\n\n this.handleCheck = this.handleCheck.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data, value: '2975' }))\n .catch(e => console.log(e));\n }\n\n handleCheck() {\n this.setState({\n changeOnSelect: !this.state.changeOnSelect,\n value: null\n });\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n value\n });\n }\n\n render() {\n return (\n
\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".control-single-demo .change-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.control-single-demo .change-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n"},"body":"\n````jsx\nimport { Checkbox, CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: null,\n changeOnSelect: false,\n data: []\n };\n\n this.handleCheck = this.handleCheck.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data, value: '2975' }))\n .catch(e => console.log(e));\n }\n\n handleCheck() {\n this.setState({\n changeOnSelect: !this.state.changeOnSelect,\n value: null\n });\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n value\n });\n }\n\n render() {\n return (\n
\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.control-single-demo .change-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.control-single-demo .change-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n````","html":"
import { Checkbox, CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: null,\n            changeOnSelect: false,\n            data: []\n        };\n\n        this.handleCheck = this.handleCheck.bind(this);\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    componentDidMount() {\n        fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n            .then(response => response.json())\n            .then(data => this.setState({ data, value: '2975' }))\n            .catch(e => console.log(e));\n    }\n\n    handleCheck() {\n        this.setState({\n            changeOnSelect: !this.state.changeOnSelect,\n            value: null\n        });\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n\n        this.setState({\n            value\n        });\n    }\n\n    render() {\n        return (\n            <div className=\"control-single-demo\">\n                <label className=\"change-check\">\n                    <Checkbox value={!this.state.changeOnSelect} onChange={this.handleCheck} />\n                    <span className=\"change-text\">Enable changeOnSelect</span>\n                </label>\n                <CascaderSelect style={{ width: '302px' }} changeOnSelect={this.state.changeOnSelect} value={this.state.value} dataSource={this.state.data} onChange={this.handleChange} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.control-single-demo .change-check {\n    display: block;\n    margin-bottom: 10px;\n}\n\n.control-single-demo .change-text {\n    display: inline-block;\n    margin-left: 10px;\n    vertical-align: middle;\n    color: #666;\n    font-size: 14px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader-select/demo/single-control.md b/compiled_docs/cascader-select/demo/single-control.md new file mode 100644 index 0000000000..b3f5b50e3a --- /dev/null +++ b/compiled_docs/cascader-select/demo/single-control.md @@ -0,0 +1 @@ +{"title":"设置是否只能选择叶子项","meta":{"title":"设置是否只能选择叶子项","description":"\n

展示受控单选以及是否选择即改变。

\n","order":"3"},"codes":{"jsx":"import { Checkbox, CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: null,\n changeOnSelect: false,\n data: []\n };\n\n this.handleCheck = this.handleCheck.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data, value: '2975' }))\n .catch(e => console.log(e));\n }\n\n handleCheck() {\n this.setState({\n changeOnSelect: !this.state.changeOnSelect,\n value: null\n });\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n value\n });\n }\n\n render() {\n return (\n
\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".control-single-demo .change-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.control-single-demo .change-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n"},"body":"\n\n````jsx\nimport { Checkbox, CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: null,\n changeOnSelect: false,\n data: []\n };\n\n this.handleCheck = this.handleCheck.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data, value: '2975' }))\n .catch(e => console.log(e));\n }\n\n handleCheck() {\n this.setState({\n changeOnSelect: !this.state.changeOnSelect,\n value: null\n });\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n value\n });\n }\n\n render() {\n return (\n
\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.control-single-demo .change-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.control-single-demo .change-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n````","html":"
import { Checkbox, CascaderSelect } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: null,\n            changeOnSelect: false,\n            data: []\n        };\n\n        this.handleCheck = this.handleCheck.bind(this);\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    componentDidMount() {\n        fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n            .then(response => response.json())\n            .then(data => this.setState({ data, value: '2975' }))\n            .catch(e => console.log(e));\n    }\n\n    handleCheck() {\n        this.setState({\n            changeOnSelect: !this.state.changeOnSelect,\n            value: null\n        });\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n\n        this.setState({\n            value\n        });\n    }\n\n    render() {\n        return (\n            <div className=\"control-single-demo\">\n                <label className=\"change-check\">\n                    <Checkbox value={!this.state.changeOnSelect} onChange={this.handleCheck} />\n                    <span className=\"change-text\">Enable changeOnSelect</span>\n                </label>\n                <CascaderSelect style={{ width: '302px' }} changeOnSelect={this.state.changeOnSelect} value={this.state.value} dataSource={this.state.data} onChange={this.handleChange} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.control-single-demo .change-check {\n    display: block;\n    margin-bottom: 10px;\n}\n\n.control-single-demo .change-text {\n    display: inline-block;\n    margin-left: 10px;\n    vertical-align: middle;\n    color: #666;\n    font-size: 14px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader-select/index.en-us.md b/compiled_docs/cascader-select/index.en-us.md new file mode 100644 index 0000000000..b7d89bf019 --- /dev/null +++ b/compiled_docs/cascader-select/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Guide#

When To Use#

CascaderSelect consists of Select and Cascader. Cascader are hidden in a pop up layer by default and are mostly used in form scenes.

\n

API#

","api":"

CascaderSelect#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault Value
sizesize of selector

options:
'small', 'medium', 'large'		Enum'medium'
placeholderplaceholder of selectorString-
disabledwhether is disabledBooleanfalse
hasArrowwhether has arrow iconBooleantrue
hasBorderwhether selector has borderBooleantrue
hasClearwhether has clear buttonBooleanfalse
labelcustom inline labelReactNode-
readOnlywhether selector is read only, it can be expanded but cannot be selected under read only modeBoolean-
dataSourcedata source, structure can refer to the following documentArray<Object>[]
defaultValue(under uncontrol) default valueString/Array<String>null
value(under control) current valueString/Array<String>-
onChangecallback triggered when value changes

signatures:
Function(value: String/Array, data: Object/Array, extra: Object) => void
params:
value: {String/Array} selected value, a single value is returned when single select, and an array is returned when multiple select
data: {Object/Array} selected data, including value, label, returns a single value when single select, returns an array when multiple select, parent and child nodes are selected at the same time, only the parent node is returned
extra: {Object} extra param
extra.selectedPath: {Array} path of the selected data when single selecte
extra.checked: {Boolean} whether is checked when multiple select
extra.currentData: {Object} current operation data when multiple select
extra.checkedData: {Array} all checked data when multiple select
extra.indeterminateData: {Array} indeterminate data when multile selec		Function-
defaultExpandedValue(under uncontrol) default expanded value, if not set, the component will be automatically set according to defaultValue/valueArray<String>-
expandTriggerTypeexpand trigger type

options:
'click', 'hover'		Enum'click'
multiplewhether is multiple selectBooleanfalse
changeOnSelectchange immediately if selected, this property is only worked in single selection modeBooleanfalse
canOnlyCheckLeafwhether checkbox of leaf item can only be checked, this property is only worked in multiple selection modeBooleanfalse
checkStrictlywhether selection of parent and child nodes are relatedBooleanfalse
listStylestyle of listObject-
listClassNameclass name of listString-
displayRendercustom rendering function to display results

signatures:
Function(label: Array) => ReactNode
params:
label: {Array} label array of the selected path
returns:
{ReactNode} display content
Functionsingle select: labelPath => labelPath.join(' / '); multiple select: labelPath => labelPath[labelPath.length - 1]
showSearchwhether to show the search boxBooleanfalse
filtercustom search function

signatures:
Function(searchValue: String, path: Array) => Boolean
params:
searchValue: {String} search keyword
path: {Array} item path
returns:
{Boolean} whether is matched
Functionfuzzy matching of label based on all nodes of the path
resultRendercustom render function of search result

signatures:
Function(searchValue: String, path: Array) => ReactNode
params:
searchValue: {String} search keyword
path: {Array} matched item path
returns:
{ReactNode} result content
Functionrendering by pattern of a / b / c
resultAutoWidthwhether the search result list is equal to the selectorBooleantrue
notFoundContentcontent without dataReactNode'Not Found'
loadDataasynchronous data loading function

signatures:
Function(data: Object) => void
params:
data: {Object} data of the clicked item		Function-
headercustom dropdown headerReactNode-
footercustom dropdown footerReactNode-
defaultVisiblewhether dropdown is default visibleBooleanfalse
visiblewhether dropdown is current visibleBoolean-
onVisibleChangecallback triggered when open or close dropdown

signatures:
Function(visible: Boolean, type: String) => void
params:
visible: {Boolean} whether is visible
type: {String} trigger type		Function() => {}
popupStylestyle of dropdownObject-
popupClassNameclassName of dropdownString-
popupContainercontainer of dropdownString/Function-
popupPropsproperties of PopupObject{}
\n\n

Data structure of dataSource#

const dataSource = [{\n    value: '2974',\n    label: '西安',\n    children: [\n        { value: '2975', label: '西安市', disabled: true },\n        { value: '2976', label: '高陵县', checkboxDisabled: true },\n        { value: '2977', label: '蓝田县' },\n        { value: '2978', label: '户县' },\n        { value: '2979', label: '周至县' },\n        { value: '4208', label: '灞桥区' },\n        { value: '4209', label: '长安区' },\n        { value: '4210', label: '莲湖区' },\n        { value: '4211', label: '临潼区' },\n        { value: '4212', label: '未央区' },\n        { value: '4213', label: '新城区' },\n        { value: '4214', label: '阎良区' },\n        { value: '4215', label: '雁塔区' },\n        { value: '4388', label: '碑林区' },\n        { value: '610127', label: '其它区' }\n    ]\n}];

The custom attribute of item in the array is also transparently passed to the data parameter of the onChange function.

\n\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
按键说明
Up ArrowGet the previous item focus of the current item of same level
Down ArrowGet the next item focus of the current item of same level
Left ArrowEnter the child element of the current item and get the first child element as the focus
Right ArrowReturns the parent of the current item and gets the focus
EnterOpen the directory or select current item
EscClose the directory
SPACESelect current item
\n"} \ No newline at end of file diff --git a/compiled_docs/cascader-select/index.md b/compiled_docs/cascader-select/index.md new file mode 100644 index 0000000000..e28e08b7a6 --- /dev/null +++ b/compiled_docs/cascader-select/index.md @@ -0,0 +1 @@ +{"meta":"

开发指南#

何时使用#

级联选择由选择器和级联组成。把级联组件以弹层的方式隐藏，多用于表单场景。

\n

API#

","api":"

CascaderSelect#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
size选择框大小

可选值:
'small', 'medium', 'large'		Enum'medium'
placeholder选择框占位符String-
disabled是否禁用Booleanfalse
hasArrow是否有下拉箭头Booleantrue
hasBorder是否有边框Booleantrue
hasClear是否有清除按钮Booleanfalse
label自定义内联 labelReactNode-
readOnly是否只读，只读模式下可以展开弹层但不能选Boolean-
dataSource数据源，结构可参考下方说明Array<Object>[]
defaultValue（非受控）默认值String/Array<String>null
value（受控）当前值String/Array<String>-
onChange选中值改变时触发的回调函数

签名:
Function(value: String/Array, data: Object/Array, extra: Object) => void
参数:
value: {String/Array} 选中的值，单选时返回单个值，多选时返回数组
data: {Object/Array} 选中的数据，包括 value 和 label，单选时返回单个值，多选时返回数组，父子节点选中关联时，同时选中，只返回父节点
extra: {Object} 额外参数
extra.selectedPath: {Array} 单选时选中的数据的路径
extra.checked: {Boolean} 多选时当前的操作是选中还是取消选中
extra.currentData: {Object} 多选时当前操作的数据
extra.checkedData: {Array} 多选时所有被选中的数据
extra.indeterminateData: {Array} 多选时半选的数据		Function-
defaultExpandedValue默认展开值，如果不设置，组件内部会根据 defaultValue/value 进行自动设置Array<String>-
expandTriggerType展开触发的方式

可选值:
'click', 'hover'		Enum'click'
useVirtual是否开启虚拟滚动Booleanfalse
multiple是否多选Booleanfalse
changeOnSelect是否选中即发生改变, 该属性仅在单选模式下有效Booleanfalse
canOnlyCheckLeaf是否只能勾选叶子项的checkbox，该属性仅在多选模式下有效Booleanfalse
checkStrictly父子节点是否选中不关联Booleanfalse
listStyle每列列表样式对象Object-
listClassName每列列表类名String-
displayRender选择框单选时展示结果的自定义渲染函数

签名:
Function(label: Array) => ReactNode
参数:
label: {Array} 选中路径的文本数组
返回值:
{ReactNode} 渲染在选择框中的内容
Function单选时：labelPath => labelPath.join(' / ')；多选时：labelPath => labelPath[labelPath.length - 1]
itemRender渲染 item 内容的方法

签名:
Function(item: Object) => ReactNode
参数:
item: {Object} 渲染节点的item
返回值:
{ReactNode} item node
Function-
showSearch是否显示搜索框Booleanfalse
filter自定义搜索函数

签名:
Function(searchValue: String, path: Array) => Boolean
参数:
searchValue: {String} 搜索的关键字
path: {Array} 节点路径
返回值:
{Boolean} 是否匹配
Function根据路径所有节点的文本值模糊匹配
resultRender搜索结果自定义渲染函数

签名:
Function(searchValue: String, path: Array) => ReactNode
参数:
searchValue: {String} 搜索的关键字
path: {Array} 匹配到的节点路径
返回值:
{ReactNode} 渲染的内容
Function按照节点文本 a / b / c 的模式渲染
resultAutoWidth搜索结果列表是否和选择框等宽Booleantrue
notFoundContent无数据时显示内容ReactNode'Not Found'
loadData异步加载数据函数

签名:
Function(data: Object) => void
参数:
data: {Object} 当前点击异步加载的数据		Function-
header自定义下拉框头部ReactNode-
footer自定义下拉框底部ReactNode-
defaultVisible初始下拉框是否显示Booleanfalse
visible当前下拉框是否显示Boolean-
onVisibleChange下拉框显示或关闭时触发事件的回调函数

签名:
Function(visible: Boolean, type: String) => void
参数:
visible: {Boolean} 是否显示
type: {String} 触发显示关闭的操作类型		Function() => {}
popupStyle下拉框自定义样式对象Object-
popupClassName下拉框样式自定义类名String-
popupContainer下拉框挂载的容器节点String/Function-
popupProps透传到 Popup 的属性对象Object{}
\n\n

dataSource数据结构#

const dataSource = [{\n    value: '2974',\n    label: '西安',\n    children: [\n        { value: '2975', label: '西安市', disabled: true },\n        { value: '2976', label: '高陵县', checkboxDisabled: true },\n        { value: '2977', label: '蓝田县' },\n        { value: '2978', label: '户县' },\n        { value: '2979', label: '周至县' },\n        { value: '4208', label: '灞桥区' },\n        { value: '4209', label: '长安区' },\n        { value: '4210', label: '莲湖区' },\n        { value: '4211', label: '临潼区' },\n        { value: '4212', label: '未央区' },\n        { value: '4213', label: '新城区' },\n        { value: '4214', label: '阎良区' },\n        { value: '4215', label: '雁塔区' },\n        { value: '4388', label: '碑林区' },\n        { value: '610127', label: '其它区' }\n    ]\n}];

数组中 Item 的自定义属性也会被透传到 onChange 函数的 data 参数中。

\n\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
按键说明
Up Arrow获取同级当前项前一项焦点
Down Arrow获取同级当前项后一项焦点
Left Arrow进入当前项的子元素，并获取第一个子元素为焦点
Right Arrow返回当前项的父元素并获取焦点
Enter打开目录或选择当前项
Esc关闭目录
SPACE选择当前项
\n"} \ No newline at end of file diff --git a/compiled_docs/cascader/demo/accessibility.en-us.md b/compiled_docs/cascader/demo/accessibility.en-us.md new file mode 100644 index 0000000000..681a3926f3 --- /dev/null +++ b/compiled_docs/cascader/demo/accessibility.en-us.md @@ -0,0 +1 @@ +{"title":"Accessibility","meta":{"title":"Accessibility","description":"\n

Please refer to ARIA and KeyBoard.

\n","order":"8"},"codes":{"jsx":"import { Cascader } from '@alifd/next';\n\nconst data = [{\n value: '0100',\n label: '金庸',\n children: [\n { value: '0101', label: '飞狐外传' },\n { value: '0102', label: '雪山飞狐' },\n { value: '0103', label: '连城诀' },\n { value: '0104', label: '天龙八部' },\n { value: '0105', label: '射雕英雄传' },\n { value: '0106', label: '白马啸西风' },\n { value: '0107', label: '鹿鼎记' },\n { value: '0108', label: '笑傲江湖' },\n { value: '0109', label: '书剑恩仇录' },\n { value: '0110', label: '神雕侠侣' },\n { value: '0111', label: '侠客行' },\n { value: '0112', label: '倚天屠龙记' },\n { value: '0113', label: '碧血剑' },\n { value: '0114', label: '鸳鸯刀' }\n ]\n}, {\n value: '0200',\n label: '古龙',\n children: [\n { value: '0201', label: '小李飞刀' },\n { value: '0202', label: '绝代双骄' },\n { value: '0203', label: '大旗英雄传' },\n { value: '0204', label: '英雄无泪' },\n { value: '0205', label: '边城浪子' },\n { value: '0206', label: '楚留香传奇' },\n ],\n}, {\n children: [\n { value: '0301', label: '白发魔女传' },\n { value: '0302', label: '七剑下天山' },\n { value: '0303', label: '云海玉弓缘' }\n ],\n value: '0300',\n label: '梁羽生'\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n label: '',\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n componentDidMount() {\n this.setState({ data });\n }\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n label: extra.selectedPath.map(d => d.label).join(' / ')\n });\n }\n render() {\n return (\n
\n
Select: {this.state.label}
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Cascader } from '@alifd/next';\n\nconst data = [{\n value: '0100',\n label: '金庸',\n children: [\n { value: '0101', label: '飞狐外传' },\n { value: '0102', label: '雪山飞狐' },\n { value: '0103', label: '连城诀' },\n { value: '0104', label: '天龙八部' },\n { value: '0105', label: '射雕英雄传' },\n { value: '0106', label: '白马啸西风' },\n { value: '0107', label: '鹿鼎记' },\n { value: '0108', label: '笑傲江湖' },\n { value: '0109', label: '书剑恩仇录' },\n { value: '0110', label: '神雕侠侣' },\n { value: '0111', label: '侠客行' },\n { value: '0112', label: '倚天屠龙记' },\n { value: '0113', label: '碧血剑' },\n { value: '0114', label: '鸳鸯刀' }\n ]\n}, {\n value: '0200',\n label: '古龙',\n children: [\n { value: '0201', label: '小李飞刀' },\n { value: '0202', label: '绝代双骄' },\n { value: '0203', label: '大旗英雄传' },\n { value: '0204', label: '英雄无泪' },\n { value: '0205', label: '边城浪子' },\n { value: '0206', label: '楚留香传奇' },\n ],\n}, {\n children: [\n { value: '0301', label: '白发魔女传' },\n { value: '0302', label: '七剑下天山' },\n { value: '0303', label: '云海玉弓缘' }\n ],\n value: '0300',\n label: '梁羽生'\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n label: '',\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n componentDidMount() {\n this.setState({ data });\n }\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n label: extra.selectedPath.map(d => d.label).join(' / ')\n });\n }\n render() {\n return (\n
\n
Select: {this.state.label}
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Cascader } from '@alifd/next';\n\nconst data = [{\n    value: '0100',\n    label: '金庸',\n    children: [\n        { value: '0101', label: '飞狐外传' },\n        { value: '0102', label: '雪山飞狐' },\n        { value: '0103', label: '连城诀' },\n        { value: '0104', label: '天龙八部' },\n        { value: '0105', label: '射雕英雄传' },\n        { value: '0106', label: '白马啸西风' },\n        { value: '0107', label: '鹿鼎记' },\n        { value: '0108', label: '笑傲江湖' },\n        { value: '0109', label: '书剑恩仇录' },\n        { value: '0110', label: '神雕侠侣' },\n        { value: '0111', label: '侠客行' },\n        { value: '0112', label: '倚天屠龙记' },\n        { value: '0113', label: '碧血剑' },\n        { value: '0114', label: '鸳鸯刀' }\n    ]\n}, {\n    value: '0200',\n    label: '古龙',\n    children: [\n        { value: '0201', label: '小李飞刀' },\n        { value: '0202', label: '绝代双骄' },\n        { value: '0203', label: '大旗英雄传' },\n        { value: '0204', label: '英雄无泪' },\n        { value: '0205', label: '边城浪子' },\n        { value: '0206', label: '楚留香传奇' },\n    ],\n}, {\n    children: [\n        { value: '0301', label: '白发魔女传' },\n        { value: '0302', label: '七剑下天山' },\n        { value: '0303', label: '云海玉弓缘' }\n    ],\n    value: '0300',\n    label: '梁羽生'\n}];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            label: '',\n            data: []\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n    componentDidMount() {\n        this.setState({ data });\n    }\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n\n        this.setState({\n            label: extra.selectedPath.map(d => d.label).join(' / ')\n        });\n    }\n    render() {\n        return (\n            <div>\n                <div className=\"cascader-value\">Select: {this.state.label}</div>\n                <Cascader dataSource={this.state.data} onChange={this.handleChange} listStyle={{ width: '200px', height: '256px' }} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/cascader/demo/accessibility.md b/compiled_docs/cascader/demo/accessibility.md new file mode 100644 index 0000000000..84e91f9b6b --- /dev/null +++ b/compiled_docs/cascader/demo/accessibility.md @@ -0,0 +1 @@ +{"title":"无障碍","meta":{"title":"无障碍","description":"\n

请参考ARIA and KeyBoard。

\n","order":"8"},"codes":{"jsx":"import { Cascader } from '@alifd/next';\n\nconst data = [{\n value: '0100',\n label: '金庸',\n children: [\n { value: '0101', label: '飞狐外传' },\n { value: '0102', label: '雪山飞狐' },\n { value: '0103', label: '连城诀' },\n { value: '0104', label: '天龙八部' },\n { value: '0105', label: '射雕英雄传' },\n { value: '0106', label: '白马啸西风' },\n { value: '0107', label: '鹿鼎记' },\n { value: '0108', label: '笑傲江湖' },\n { value: '0109', label: '书剑恩仇录' },\n { value: '0110', label: '神雕侠侣' },\n { value: '0111', label: '侠客行' },\n { value: '0112', label: '倚天屠龙记' },\n { value: '0113', label: '碧血剑' },\n { value: '0114', label: '鸳鸯刀' }\n ]\n}, {\n value: '0200',\n label: '古龙',\n children: [\n { value: '0201', label: '小李飞刀' },\n { value: '0202', label: '绝代双骄' },\n { value: '0203', label: '大旗英雄传' },\n { value: '0204', label: '英雄无泪' },\n { value: '0205', label: '边城浪子' },\n { value: '0206', label: '楚留香传奇' },\n ],\n}, {\n children: [\n { value: '0301', label: '白发魔女传' },\n { value: '0302', label: '七剑下天山' },\n { value: '0303', label: '云海玉弓缘' }\n ],\n value: '0300',\n label: '梁羽生'\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n label: '',\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n componentDidMount() {\n this.setState({ data });\n }\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n label: extra.selectedPath.map(d => d.label).join(' / ')\n });\n }\n render() {\n return (\n
\n
Select: {this.state.label}
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Cascader } from '@alifd/next';\n\nconst data = [{\n value: '0100',\n label: '金庸',\n children: [\n { value: '0101', label: '飞狐外传' },\n { value: '0102', label: '雪山飞狐' },\n { value: '0103', label: '连城诀' },\n { value: '0104', label: '天龙八部' },\n { value: '0105', label: '射雕英雄传' },\n { value: '0106', label: '白马啸西风' },\n { value: '0107', label: '鹿鼎记' },\n { value: '0108', label: '笑傲江湖' },\n { value: '0109', label: '书剑恩仇录' },\n { value: '0110', label: '神雕侠侣' },\n { value: '0111', label: '侠客行' },\n { value: '0112', label: '倚天屠龙记' },\n { value: '0113', label: '碧血剑' },\n { value: '0114', label: '鸳鸯刀' }\n ]\n}, {\n value: '0200',\n label: '古龙',\n children: [\n { value: '0201', label: '小李飞刀' },\n { value: '0202', label: '绝代双骄' },\n { value: '0203', label: '大旗英雄传' },\n { value: '0204', label: '英雄无泪' },\n { value: '0205', label: '边城浪子' },\n { value: '0206', label: '楚留香传奇' },\n ],\n}, {\n children: [\n { value: '0301', label: '白发魔女传' },\n { value: '0302', label: '七剑下天山' },\n { value: '0303', label: '云海玉弓缘' }\n ],\n value: '0300',\n label: '梁羽生'\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n label: '',\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n componentDidMount() {\n this.setState({ data });\n }\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n label: extra.selectedPath.map(d => d.label).join(' / ')\n });\n }\n render() {\n return (\n
\n
Select: {this.state.label}
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Cascader } from '@alifd/next';\n\nconst data = [{\n    value: '0100',\n    label: '金庸',\n    children: [\n        { value: '0101', label: '飞狐外传' },\n        { value: '0102', label: '雪山飞狐' },\n        { value: '0103', label: '连城诀' },\n        { value: '0104', label: '天龙八部' },\n        { value: '0105', label: '射雕英雄传' },\n        { value: '0106', label: '白马啸西风' },\n        { value: '0107', label: '鹿鼎记' },\n        { value: '0108', label: '笑傲江湖' },\n        { value: '0109', label: '书剑恩仇录' },\n        { value: '0110', label: '神雕侠侣' },\n        { value: '0111', label: '侠客行' },\n        { value: '0112', label: '倚天屠龙记' },\n        { value: '0113', label: '碧血剑' },\n        { value: '0114', label: '鸳鸯刀' }\n    ]\n}, {\n    value: '0200',\n    label: '古龙',\n    children: [\n        { value: '0201', label: '小李飞刀' },\n        { value: '0202', label: '绝代双骄' },\n        { value: '0203', label: '大旗英雄传' },\n        { value: '0204', label: '英雄无泪' },\n        { value: '0205', label: '边城浪子' },\n        { value: '0206', label: '楚留香传奇' },\n    ],\n}, {\n    children: [\n        { value: '0301', label: '白发魔女传' },\n        { value: '0302', label: '七剑下天山' },\n        { value: '0303', label: '云海玉弓缘' }\n    ],\n    value: '0300',\n    label: '梁羽生'\n}];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            label: '',\n            data: []\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n    componentDidMount() {\n        this.setState({ data });\n    }\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n\n        this.setState({\n            label: extra.selectedPath.map(d => d.label).join(' / ')\n        });\n    }\n    render() {\n        return (\n            <div>\n                <div className=\"cascader-value\">Select: {this.state.label}</div>\n                <Cascader dataSource={this.state.data} onChange={this.handleChange} listStyle={{ width: '200px', height: '256px' }} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/cascader/demo/basic.en-us.md b/compiled_docs/cascader/demo/basic.en-us.md new file mode 100644 index 0000000000..1abf103c1c --- /dev/null +++ b/compiled_docs/cascader/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic Usage","meta":{"title":"Basic Usage","description":"\n

Demo the basic single select usage.

\n","order":"0"},"codes":{"jsx":"import { Cascader } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n label: '',\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => {\n data[1].disabled = true;\n this.setState({ data });\n })\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n label: extra.selectedPath.map(d => d.label).join(' / ')\n });\n }\n\n render() {\n return (\n
\n
Select: {this.state.label}
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".cascader-value {\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n"},"body":"\n````jsx\nimport { Cascader } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n label: '',\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => {\n data[1].disabled = true;\n this.setState({ data });\n })\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n label: extra.selectedPath.map(d => d.label).join(' / ')\n });\n }\n\n render() {\n return (\n
\n
Select: {this.state.label}
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.cascader-value {\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n````","html":"
import { Cascader } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            label: '',\n            data: []\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    componentDidMount() {\n        fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n            .then(response => response.json())\n            .then(data => {\n                data[1].disabled = true;\n                this.setState({ data });\n            })\n            .catch(e => console.log(e));\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n\n        this.setState({\n            label: extra.selectedPath.map(d => d.label).join(' / ')\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <div className=\"cascader-value\">Select: {this.state.label}</div>\n                <Cascader dataSource={this.state.data} onChange={this.handleChange} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.cascader-value {\n    margin-bottom: 10px;\n    font-size: 14px;\n    color: #666;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader/demo/basic.md b/compiled_docs/cascader/demo/basic.md new file mode 100644 index 0000000000..7aebfeb7d0 --- /dev/null +++ b/compiled_docs/cascader/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本使用","meta":{"title":"基本使用","description":"\n

展示基本的单选用法。

\n","order":"0"},"codes":{"jsx":"import { Cascader } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n label: '',\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => {\n data[1].disabled = true;\n this.setState({ data });\n })\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n label: extra.selectedPath.map(d => d.label).join(' / ')\n });\n }\n\n render() {\n return (\n
\n
Select: {this.state.label}
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".cascader-value {\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n"},"body":"\n\n````jsx\nimport { Cascader } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n label: '',\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => {\n data[1].disabled = true;\n this.setState({ data });\n })\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n label: extra.selectedPath.map(d => d.label).join(' / ')\n });\n }\n\n render() {\n return (\n
\n
Select: {this.state.label}
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.cascader-value {\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n````","html":"
import { Cascader } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            label: '',\n            data: []\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    componentDidMount() {\n        fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n            .then(response => response.json())\n            .then(data => {\n                data[1].disabled = true;\n                this.setState({ data });\n            })\n            .catch(e => console.log(e));\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n\n        this.setState({\n            label: extra.selectedPath.map(d => d.label).join(' / ')\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <div className=\"cascader-value\">Select: {this.state.label}</div>\n                <Cascader dataSource={this.state.data} onChange={this.handleChange} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.cascader-value {\n    margin-bottom: 10px;\n    font-size: 14px;\n    color: #666;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader/demo/custom-style.en-us.md b/compiled_docs/cascader/demo/custom-style.en-us.md new file mode 100644 index 0000000000..0c784a4d2b --- /dev/null +++ b/compiled_docs/cascader/demo/custom-style.en-us.md @@ -0,0 +1 @@ +{"title":"Customize Style","meta":{"title":"Customize Style","description":"\n

You can customize the component width and height with listStyle and listClassName.

\n","order":"5"},"codes":{"jsx":"import { Cascader } from '@alifd/next';\n\nconst dataSource = [{\n value: '2973',\n label: '陕西',\n children: [{\n value: '2974',\n label: '西安',\n children: [\n { value: '2975', label: '西安市' },\n { value: '2976', label: '高陵县' }\n ]\n }, {\n value: '2980',\n label: '铜川',\n children: [\n { value: '2981', label: '铜川市' },\n { value: '2982', label: '宜君县' }\n ]\n }]\n}, {\n value: '3371',\n label: '新疆',\n children: [{\n value: '3430',\n label: '巴音郭楞蒙古自治州',\n children: [\n { value: '3431', label: '库尔勒市' },\n { value: '3432', label: '和静县' }\n ]\n }]\n}];\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Cascader } from '@alifd/next';\n\nconst dataSource = [{\n value: '2973',\n label: '陕西',\n children: [{\n value: '2974',\n label: '西安',\n children: [\n { value: '2975', label: '西安市' },\n { value: '2976', label: '高陵县' }\n ]\n }, {\n value: '2980',\n label: '铜川',\n children: [\n { value: '2981', label: '铜川市' },\n { value: '2982', label: '宜君县' }\n ]\n }]\n}, {\n value: '3371',\n label: '新疆',\n children: [{\n value: '3430',\n label: '巴音郭楞蒙古自治州',\n children: [\n { value: '3431', label: '库尔勒市' },\n { value: '3432', label: '和静县' }\n ]\n }]\n}];\n\nReactDOM.render(, mountNode);\n````","html":"
import { Cascader } from '@alifd/next';\n\nconst dataSource = [{\n    value: '2973',\n    label: '陕西',\n    children: [{\n        value: '2974',\n        label: '西安',\n        children: [\n            { value: '2975', label: '西安市' },\n            { value: '2976', label: '高陵县' }\n        ]\n    }, {\n        value: '2980',\n        label: '铜川',\n        children: [\n            { value: '2981', label: '铜川市' },\n            { value: '2982', label: '宜君县' }\n        ]\n    }]\n}, {\n    value: '3371',\n    label: '新疆',\n    children: [{\n        value: '3430',\n        label: '巴音郭楞蒙古自治州',\n        children: [\n            { value: '3431', label: '库尔勒市' },\n            { value: '3432', label: '和静县' }\n        ]\n    }]\n}];\n\nReactDOM.render(<Cascader defaultValue=\"3439\" defaultExpandedValue={['3371', '3430']} listStyle={{ width: '200px', height: '256px' }} dataSource={dataSource} />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/cascader/demo/custom-style.md b/compiled_docs/cascader/demo/custom-style.md new file mode 100644 index 0000000000..9ab8dbb37b --- /dev/null +++ b/compiled_docs/cascader/demo/custom-style.md @@ -0,0 +1 @@ +{"title":"自定义样式","meta":{"title":"自定义样式","description":"\n

可以通过listStyle，listClassName来定制组件宽高。

\n","order":"5"},"codes":{"jsx":"import { Cascader } from '@alifd/next';\n\nconst dataSource = [{\n value: '2973',\n label: '陕西',\n children: [{\n value: '2974',\n label: '西安',\n children: [\n { value: '2975', label: '西安市' },\n { value: '2976', label: '高陵县' }\n ]\n }, {\n value: '2980',\n label: '铜川',\n children: [\n { value: '2981', label: '铜川市' },\n { value: '2982', label: '宜君县' }\n ]\n }]\n}, {\n value: '3371',\n label: '新疆',\n children: [{\n value: '3430',\n label: '巴音郭楞蒙古自治州',\n children: [\n { value: '3431', label: '库尔勒市' },\n { value: '3432', label: '和静县' }\n ]\n }]\n}];\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Cascader } from '@alifd/next';\n\nconst dataSource = [{\n value: '2973',\n label: '陕西',\n children: [{\n value: '2974',\n label: '西安',\n children: [\n { value: '2975', label: '西安市' },\n { value: '2976', label: '高陵县' }\n ]\n }, {\n value: '2980',\n label: '铜川',\n children: [\n { value: '2981', label: '铜川市' },\n { value: '2982', label: '宜君县' }\n ]\n }]\n}, {\n value: '3371',\n label: '新疆',\n children: [{\n value: '3430',\n label: '巴音郭楞蒙古自治州',\n children: [\n { value: '3431', label: '库尔勒市' },\n { value: '3432', label: '和静县' }\n ]\n }]\n}];\n\nReactDOM.render(, mountNode);\n````","html":"
import { Cascader } from '@alifd/next';\n\nconst dataSource = [{\n    value: '2973',\n    label: '陕西',\n    children: [{\n        value: '2974',\n        label: '西安',\n        children: [\n            { value: '2975', label: '西安市' },\n            { value: '2976', label: '高陵县' }\n        ]\n    }, {\n        value: '2980',\n        label: '铜川',\n        children: [\n            { value: '2981', label: '铜川市' },\n            { value: '2982', label: '宜君县' }\n        ]\n    }]\n}, {\n    value: '3371',\n    label: '新疆',\n    children: [{\n        value: '3430',\n        label: '巴音郭楞蒙古自治州',\n        children: [\n            { value: '3431', label: '库尔勒市' },\n            { value: '3432', label: '和静县' }\n        ]\n    }]\n}];\n\nReactDOM.render(<Cascader defaultValue=\"3439\" defaultExpandedValue={['3371', '3430']} listStyle={{ width: '200px', height: '256px' }} dataSource={dataSource} />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/cascader/demo/dynamic.en-us.md b/compiled_docs/cascader/demo/dynamic.en-us.md new file mode 100644 index 0000000000..e32eedf81f --- /dev/null +++ b/compiled_docs/cascader/demo/dynamic.en-us.md @@ -0,0 +1 @@ +{"title":"Loading data asynchronously","meta":{"title":"Loading data asynchronously","description":"\n

Demon loading data asynchronously.

\n","order":"6"},"codes":{"jsx":"import { Cascader } from '@alifd/next';\n\nconst dataSource = [{\n value: '2973',\n label: '陕西'\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n dataSource\n };\n\n this.onLoadData = this.onLoadData.bind(this);\n }\n\n onLoadData(data) {\n console.log(data);\n\n return new Promise(resolve => {\n setTimeout(() => {\n this.setState({\n dataSource: [{\n value: '2973',\n label: '陕西',\n children: [{\n value: '2974',\n label: '西安',\n children: [\n { value: '2975', label: '西安市', isLeaf: true },\n { value: '2976', label: '高陵县', isLeaf: true }\n ]\n }, {\n value: '2980',\n label: '铜川',\n children: [\n { value: '2981', label: '铜川市', isLeaf: true },\n { value: '2982', label: '宜君县', isLeaf: true }\n ]\n }]\n }]\n }, resolve);\n }, 500);\n });\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".cascader-value {\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n"},"body":"\n````jsx\nimport { Cascader } from '@alifd/next';\n\nconst dataSource = [{\n value: '2973',\n label: '陕西'\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n dataSource\n };\n\n this.onLoadData = this.onLoadData.bind(this);\n }\n\n onLoadData(data) {\n console.log(data);\n\n return new Promise(resolve => {\n setTimeout(() => {\n this.setState({\n dataSource: [{\n value: '2973',\n label: '陕西',\n children: [{\n value: '2974',\n label: '西安',\n children: [\n { value: '2975', label: '西安市', isLeaf: true },\n { value: '2976', label: '高陵县', isLeaf: true }\n ]\n }, {\n value: '2980',\n label: '铜川',\n children: [\n { value: '2981', label: '铜川市', isLeaf: true },\n { value: '2982', label: '宜君县', isLeaf: true }\n ]\n }]\n }]\n }, resolve);\n }, 500);\n });\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.cascader-value {\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n````","html":"
import { Cascader } from '@alifd/next';\n\nconst dataSource = [{\n    value: '2973',\n    label: '陕西'\n}];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            dataSource\n        };\n\n        this.onLoadData = this.onLoadData.bind(this);\n    }\n\n    onLoadData(data) {\n        console.log(data);\n\n        return new Promise(resolve => {\n            setTimeout(() => {\n                this.setState({\n                    dataSource: [{\n                        value: '2973',\n                        label: '陕西',\n                        children: [{\n                            value: '2974',\n                            label: '西安',\n                            children: [\n                                { value: '2975', label: '西安市', isLeaf: true },\n                                { value: '2976', label: '高陵县', isLeaf: true }\n                            ]\n                        }, {\n                            value: '2980',\n                            label: '铜川',\n                            children: [\n                                { value: '2981', label: '铜川市', isLeaf: true },\n                                { value: '2982', label: '宜君县', isLeaf: true }\n                            ]\n                        }]\n                    }]\n                }, resolve);\n            }, 500);\n        });\n    }\n\n    render() {\n        return <Cascader canOnlySelectLeaf dataSource={this.state.dataSource} loadData={this.onLoadData} />;\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.cascader-value {\n    margin-bottom: 10px;\n    font-size: 14px;\n    color: #666;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader/demo/dynamic.md b/compiled_docs/cascader/demo/dynamic.md new file mode 100644 index 0000000000..943f3d3cc7 --- /dev/null +++ b/compiled_docs/cascader/demo/dynamic.md @@ -0,0 +1 @@ +{"title":"异步加载数据","meta":{"title":"异步加载数据","description":"\n

展示动态获取数据的用法。

\n","order":"6"},"codes":{"jsx":"import { Cascader } from '@alifd/next';\n\nconst dataSource = [{\n value: '2973',\n label: '陕西'\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n dataSource\n };\n\n this.onLoadData = this.onLoadData.bind(this);\n }\n\n onLoadData(data) {\n console.log(data);\n\n return new Promise(resolve => {\n setTimeout(() => {\n this.setState({\n dataSource: [{\n value: '2973',\n label: '陕西',\n children: [{\n value: '2974',\n label: '西安',\n children: [\n { value: '2975', label: '西安市', isLeaf: true },\n { value: '2976', label: '高陵县', isLeaf: true }\n ]\n }, {\n value: '2980',\n label: '铜川',\n children: [\n { value: '2981', label: '铜川市', isLeaf: true },\n { value: '2982', label: '宜君县', isLeaf: true }\n ]\n }]\n }]\n }, resolve);\n }, 500);\n });\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".cascader-value {\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n"},"body":"\n\n````jsx\nimport { Cascader } from '@alifd/next';\n\nconst dataSource = [{\n value: '2973',\n label: '陕西'\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n dataSource\n };\n\n this.onLoadData = this.onLoadData.bind(this);\n }\n\n onLoadData(data) {\n console.log(data);\n\n return new Promise(resolve => {\n setTimeout(() => {\n this.setState({\n dataSource: [{\n value: '2973',\n label: '陕西',\n children: [{\n value: '2974',\n label: '西安',\n children: [\n { value: '2975', label: '西安市', isLeaf: true },\n { value: '2976', label: '高陵县', isLeaf: true }\n ]\n }, {\n value: '2980',\n label: '铜川',\n children: [\n { value: '2981', label: '铜川市', isLeaf: true },\n { value: '2982', label: '宜君县', isLeaf: true }\n ]\n }]\n }]\n }, resolve);\n }, 500);\n });\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.cascader-value {\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n````","html":"
import { Cascader } from '@alifd/next';\n\nconst dataSource = [{\n    value: '2973',\n    label: '陕西'\n}];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            dataSource\n        };\n\n        this.onLoadData = this.onLoadData.bind(this);\n    }\n\n    onLoadData(data) {\n        console.log(data);\n\n        return new Promise(resolve => {\n            setTimeout(() => {\n                this.setState({\n                    dataSource: [{\n                        value: '2973',\n                        label: '陕西',\n                        children: [{\n                            value: '2974',\n                            label: '西安',\n                            children: [\n                                { value: '2975', label: '西安市', isLeaf: true },\n                                { value: '2976', label: '高陵县', isLeaf: true }\n                            ]\n                        }, {\n                            value: '2980',\n                            label: '铜川',\n                            children: [\n                                { value: '2981', label: '铜川市', isLeaf: true },\n                                { value: '2982', label: '宜君县', isLeaf: true }\n                            ]\n                        }]\n                    }]\n                }, resolve);\n            }, 500);\n        });\n    }\n\n    render() {\n        return <Cascader canOnlySelectLeaf dataSource={this.state.dataSource} loadData={this.onLoadData} />;\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.cascader-value {\n    margin-bottom: 10px;\n    font-size: 14px;\n    color: #666;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader/demo/expand-trigger.en-us.md b/compiled_docs/cascader/demo/expand-trigger.en-us.md new file mode 100644 index 0000000000..88ed5bc1f1 --- /dev/null +++ b/compiled_docs/cascader/demo/expand-trigger.en-us.md @@ -0,0 +1 @@ +{"title":"Expand trigger type","meta":{"title":"Expand trigger type","description":"\n

You can set expand trigger type by setting expandTriggerType, support click and hover, the default is click.

\n","order":"1"},"codes":{"jsx":"import { Radio, Cascader } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n triggerType: 'click',\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n this.handleTriggerTypeChange = this.handleTriggerTypeChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data }))\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n handleTriggerTypeChange(triggerType) {\n this.setState({\n triggerType\n });\n }\n\n render() {\n return (\n
\n
\n Expand trigger type:\n \n
\n\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".trigger-check {\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n\n.trigger-check .next-radio-group {\n margin-left: 10px;\n}\n"},"body":"\n````jsx\nimport { Radio, Cascader } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n triggerType: 'click',\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n this.handleTriggerTypeChange = this.handleTriggerTypeChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data }))\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n handleTriggerTypeChange(triggerType) {\n this.setState({\n triggerType\n });\n }\n\n render() {\n return (\n
\n
\n Expand trigger type:\n \n
\n\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.trigger-check {\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n\n.trigger-check .next-radio-group {\n margin-left: 10px;\n}\n````","html":"
import { Radio, Cascader } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            triggerType: 'click',\n            data: []\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n        this.handleTriggerTypeChange = this.handleTriggerTypeChange.bind(this);\n    }\n\n    componentDidMount() {\n        fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n            .then(response => response.json())\n            .then(data => this.setState({ data }))\n            .catch(e => console.log(e));\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n    }\n\n    handleTriggerTypeChange(triggerType) {\n        this.setState({\n            triggerType\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <div className=\"trigger-check\">\n                    Expand trigger type:\n                    <RadioGroup dataSource={['click', 'hover']} value={this.state.triggerType} onChange={this.handleTriggerTypeChange} />\n                </div>\n\n                <Cascader expandTriggerType={this.state.triggerType} dataSource={this.state.data} onChange={this.handleChange} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.trigger-check {\n    margin-bottom: 10px;\n    font-size: 14px;\n    color: #666;\n}\n\n.trigger-check .next-radio-group {\n    margin-left: 10px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader/demo/expand-trigger.md b/compiled_docs/cascader/demo/expand-trigger.md new file mode 100644 index 0000000000..3f7a7b7d9f --- /dev/null +++ b/compiled_docs/cascader/demo/expand-trigger.md @@ -0,0 +1 @@ +{"title":"展开触发行为","meta":{"title":"展开触发行为","description":"\n

展示可通过expandTriggerType来设置不同的展开触发行为，支持click和hover，默认值为click。

\n","order":"1"},"codes":{"jsx":"import { Radio, Cascader } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n triggerType: 'click',\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n this.handleTriggerTypeChange = this.handleTriggerTypeChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data }))\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n handleTriggerTypeChange(triggerType) {\n this.setState({\n triggerType\n });\n }\n\n render() {\n return (\n
\n
\n Expand trigger type:\n \n
\n\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".trigger-check {\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n\n.trigger-check .next-radio-group {\n margin-left: 10px;\n}\n"},"body":"\n\n````jsx\nimport { Radio, Cascader } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n triggerType: 'click',\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n this.handleTriggerTypeChange = this.handleTriggerTypeChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data }))\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n handleTriggerTypeChange(triggerType) {\n this.setState({\n triggerType\n });\n }\n\n render() {\n return (\n
\n
\n Expand trigger type:\n \n
\n\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.trigger-check {\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n\n.trigger-check .next-radio-group {\n margin-left: 10px;\n}\n````","html":"
import { Radio, Cascader } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            triggerType: 'click',\n            data: []\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n        this.handleTriggerTypeChange = this.handleTriggerTypeChange.bind(this);\n    }\n\n    componentDidMount() {\n        fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n            .then(response => response.json())\n            .then(data => this.setState({ data }))\n            .catch(e => console.log(e));\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n    }\n\n    handleTriggerTypeChange(triggerType) {\n        this.setState({\n            triggerType\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <div className=\"trigger-check\">\n                    Expand trigger type:\n                    <RadioGroup dataSource={['click', 'hover']} value={this.state.triggerType} onChange={this.handleTriggerTypeChange} />\n                </div>\n\n                <Cascader expandTriggerType={this.state.triggerType} dataSource={this.state.data} onChange={this.handleChange} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.trigger-check {\n    margin-bottom: 10px;\n    font-size: 14px;\n    color: #666;\n}\n\n.trigger-check .next-radio-group {\n    margin-left: 10px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader/demo/multiple-control.en-us.md b/compiled_docs/cascader/demo/multiple-control.en-us.md new file mode 100644 index 0000000000..eaf1162726 --- /dev/null +++ b/compiled_docs/cascader/demo/multiple-control.en-us.md @@ -0,0 +1 @@ +{"title":"Set parent or child nodes to select whether to relate","meta":{"title":"Set parent or child nodes to select whether to relate","description":"\n

Demo whether parent and child nodes checked is related.

\n","order":"4"},"codes":{"jsx":"import { Checkbox, Cascader } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: [],\n data: [],\n checkStrictly: false\n };\n\n this.handleCheck = this.handleCheck.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data, value: ['2975'] }))\n .catch(e => console.log(e));\n }\n\n handleCheck() {\n this.setState({\n checkStrictly: !this.state.checkStrictly,\n value: []\n });\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n value\n });\n }\n\n render() {\n return (\n
\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".control-multiple-demo .strictly-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.control-multiple-demo .strictly-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n"},"body":"\n````jsx\nimport { Checkbox, Cascader } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: [],\n data: [],\n checkStrictly: false\n };\n\n this.handleCheck = this.handleCheck.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data, value: ['2975'] }))\n .catch(e => console.log(e));\n }\n\n handleCheck() {\n this.setState({\n checkStrictly: !this.state.checkStrictly,\n value: []\n });\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n value\n });\n }\n\n render() {\n return (\n
\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.control-multiple-demo .strictly-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.control-multiple-demo .strictly-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n````","html":"
import { Checkbox, Cascader } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: [],\n            data: [],\n            checkStrictly: false\n        };\n\n        this.handleCheck = this.handleCheck.bind(this);\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    componentDidMount() {\n        fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n            .then(response => response.json())\n            .then(data => this.setState({ data, value: ['2975'] }))\n            .catch(e => console.log(e));\n    }\n\n    handleCheck() {\n        this.setState({\n            checkStrictly: !this.state.checkStrictly,\n            value: []\n        });\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n\n        this.setState({\n            value\n        });\n    }\n\n    render() {\n        return (\n            <div className=\"control-multiple-demo\">\n                <label className=\"strictly-check\">\n                    <Checkbox value={this.state.checkStrictly} onChange={this.handleCheck} />\n                    <span className=\"strictly-text\">Enable checkStrictly</span>\n                </label>\n                <Cascader multiple checkStrictly={this.state.checkStrictly} value={this.state.value} dataSource={this.state.data} onChange={this.handleChange} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.control-multiple-demo .strictly-check {\n    display: block;\n    margin-bottom: 10px;\n}\n\n.control-multiple-demo .strictly-text {\n    display: inline-block;\n    margin-left: 10px;\n    vertical-align: middle;\n    color: #666;\n    font-size: 14px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader/demo/multiple-control.md b/compiled_docs/cascader/demo/multiple-control.md new file mode 100644 index 0000000000..65c3cc5ef7 --- /dev/null +++ b/compiled_docs/cascader/demo/multiple-control.md @@ -0,0 +1 @@ +{"title":"设置父子节点选中是否关联","meta":{"title":"设置父子节点选中是否关联","description":"\n

展示受控多选以及是否开启严格受控父子节点选中不再关联的用法。

\n","order":"4"},"codes":{"jsx":"import { Checkbox, Cascader } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: [],\n data: [],\n checkStrictly: false\n };\n\n this.handleCheck = this.handleCheck.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data, value: ['2975'] }))\n .catch(e => console.log(e));\n }\n\n handleCheck() {\n this.setState({\n checkStrictly: !this.state.checkStrictly,\n value: []\n });\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n value\n });\n }\n\n render() {\n return (\n
\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".control-multiple-demo .strictly-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.control-multiple-demo .strictly-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n"},"body":"\n\n````jsx\nimport { Checkbox, Cascader } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: [],\n data: [],\n checkStrictly: false\n };\n\n this.handleCheck = this.handleCheck.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data, value: ['2975'] }))\n .catch(e => console.log(e));\n }\n\n handleCheck() {\n this.setState({\n checkStrictly: !this.state.checkStrictly,\n value: []\n });\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n value\n });\n }\n\n render() {\n return (\n
\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.control-multiple-demo .strictly-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.control-multiple-demo .strictly-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n````","html":"
import { Checkbox, Cascader } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: [],\n            data: [],\n            checkStrictly: false\n        };\n\n        this.handleCheck = this.handleCheck.bind(this);\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    componentDidMount() {\n        fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n            .then(response => response.json())\n            .then(data => this.setState({ data, value: ['2975'] }))\n            .catch(e => console.log(e));\n    }\n\n    handleCheck() {\n        this.setState({\n            checkStrictly: !this.state.checkStrictly,\n            value: []\n        });\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n\n        this.setState({\n            value\n        });\n    }\n\n    render() {\n        return (\n            <div className=\"control-multiple-demo\">\n                <label className=\"strictly-check\">\n                    <Checkbox value={this.state.checkStrictly} onChange={this.handleCheck} />\n                    <span className=\"strictly-text\">Enable checkStrictly</span>\n                </label>\n                <Cascader multiple checkStrictly={this.state.checkStrictly} value={this.state.value} dataSource={this.state.data} onChange={this.handleChange} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.control-multiple-demo .strictly-check {\n    display: block;\n    margin-bottom: 10px;\n}\n\n.control-multiple-demo .strictly-text {\n    display: inline-block;\n    margin-left: 10px;\n    vertical-align: middle;\n    color: #666;\n    font-size: 14px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader/demo/multiple.en-us.md b/compiled_docs/cascader/demo/multiple.en-us.md new file mode 100644 index 0000000000..e9af233ef3 --- /dev/null +++ b/compiled_docs/cascader/demo/multiple.en-us.md @@ -0,0 +1 @@ +{"title":"Multiple select","meta":{"title":"Multiple select","description":"\n

Demo the basic multiple select usage.

\n","order":"2"},"codes":{"jsx":"import { Cascader } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n label: '',\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => {\n data[1].disabled = true;\n data[2].checkboxDisabled = true;\n this.setState({ data });\n })\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n label: data.map(d => d.label).join(', ')\n });\n }\n\n render() {\n return (\n
\n
Select: {this.state.label}
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".cascader-value {\n width: 500px;\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n"},"body":"\n````jsx\nimport { Cascader } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n label: '',\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => {\n data[1].disabled = true;\n data[2].checkboxDisabled = true;\n this.setState({ data });\n })\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n label: data.map(d => d.label).join(', ')\n });\n }\n\n render() {\n return (\n
\n
Select: {this.state.label}
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.cascader-value {\n width: 500px;\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n````","html":"
import { Cascader } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            label: '',\n            data: []\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    componentDidMount() {\n        fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n            .then(response => response.json())\n            .then(data => {\n                data[1].disabled = true;\n                data[2].checkboxDisabled = true;\n                this.setState({ data });\n            })\n            .catch(e => console.log(e));\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n\n        this.setState({\n            label: data.map(d => d.label).join(', ')\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <div className=\"cascader-value\">Select: {this.state.label}</div>\n                <Cascader multiple dataSource={this.state.data} onChange={this.handleChange} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.cascader-value {\n    width: 500px;\n    margin-bottom: 10px;\n    font-size: 14px;\n    color: #666;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader/demo/multiple.md b/compiled_docs/cascader/demo/multiple.md new file mode 100644 index 0000000000..d7b7c4649b --- /dev/null +++ b/compiled_docs/cascader/demo/multiple.md @@ -0,0 +1 @@ +{"title":"多选","meta":{"title":"多选","description":"\n

展示基本的多选用法。

\n","order":"2"},"codes":{"jsx":"import { Cascader } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n label: '',\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => {\n data[1].disabled = true;\n data[2].checkboxDisabled = true;\n this.setState({ data });\n })\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n label: data.map(d => d.label).join(', ')\n });\n }\n\n render() {\n return (\n
\n
Select: {this.state.label}
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".cascader-value {\n width: 500px;\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n"},"body":"\n\n````jsx\nimport { Cascader } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n label: '',\n data: []\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => {\n data[1].disabled = true;\n data[2].checkboxDisabled = true;\n this.setState({ data });\n })\n .catch(e => console.log(e));\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n label: data.map(d => d.label).join(', ')\n });\n }\n\n render() {\n return (\n
\n
Select: {this.state.label}
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.cascader-value {\n width: 500px;\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n````","html":"
import { Cascader } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            label: '',\n            data: []\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    componentDidMount() {\n        fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n            .then(response => response.json())\n            .then(data => {\n                data[1].disabled = true;\n                data[2].checkboxDisabled = true;\n                this.setState({ data });\n            })\n            .catch(e => console.log(e));\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n\n        this.setState({\n            label: data.map(d => d.label).join(', ')\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <div className=\"cascader-value\">Select: {this.state.label}</div>\n                <Cascader multiple dataSource={this.state.data} onChange={this.handleChange} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.cascader-value {\n    width: 500px;\n    margin-bottom: 10px;\n    font-size: 14px;\n    color: #666;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader/demo/single-control.en-us.md b/compiled_docs/cascader/demo/single-control.en-us.md new file mode 100644 index 0000000000..f8f6562d08 --- /dev/null +++ b/compiled_docs/cascader/demo/single-control.en-us.md @@ -0,0 +1 @@ +{"title":"Set whether to only select leaf items","meta":{"title":"Set whether to only select leaf items","description":"\n

Demo the controlled single select and whether it can only select leaf items.

\n","order":"3"},"codes":{"jsx":"import { Checkbox, Cascader } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: null,\n canOnlySelectLeaf: false,\n data: []\n };\n\n this.handleCheck = this.handleCheck.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data, value: '2975' }))\n .catch(e => console.log(e));\n }\n\n handleCheck() {\n this.setState({\n canOnlySelectLeaf: !this.state.canOnlySelectLeaf,\n value: null\n });\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n value\n });\n }\n\n render() {\n return (\n
\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".control-single-demo .leaf-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.control-single-demo .leaf-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n"},"body":"\n````jsx\nimport { Checkbox, Cascader } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: null,\n canOnlySelectLeaf: false,\n data: []\n };\n\n this.handleCheck = this.handleCheck.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data, value: '2975' }))\n .catch(e => console.log(e));\n }\n\n handleCheck() {\n this.setState({\n canOnlySelectLeaf: !this.state.canOnlySelectLeaf,\n value: null\n });\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n value\n });\n }\n\n render() {\n return (\n
\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.control-single-demo .leaf-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.control-single-demo .leaf-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n````","html":"
import { Checkbox, Cascader } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: null,\n            canOnlySelectLeaf: false,\n            data: []\n        };\n\n        this.handleCheck = this.handleCheck.bind(this);\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    componentDidMount() {\n        fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n            .then(response => response.json())\n            .then(data => this.setState({ data, value: '2975' }))\n            .catch(e => console.log(e));\n    }\n\n    handleCheck() {\n        this.setState({\n            canOnlySelectLeaf: !this.state.canOnlySelectLeaf,\n            value: null\n        });\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n\n        this.setState({\n            value\n        });\n    }\n\n    render() {\n        return (\n            <div className=\"control-single-demo\">\n                <label className=\"leaf-check\">\n                    <Checkbox value={this.state.canOnlySelectLeaf} onChange={this.handleCheck} />\n                    <span className=\"leaf-text\">Enable canOnlySelectLeaf</span>\n                </label>\n                <Cascader canOnlySelectLeaf={this.state.canOnlySelectLeaf} value={this.state.value} dataSource={this.state.data} onChange={this.handleChange} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.control-single-demo .leaf-check {\n    display: block;\n    margin-bottom: 10px;\n}\n\n.control-single-demo .leaf-text {\n    display: inline-block;\n    margin-left: 10px;\n    vertical-align: middle;\n    color: #666;\n    font-size: 14px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader/demo/single-control.md b/compiled_docs/cascader/demo/single-control.md new file mode 100644 index 0000000000..c206621c72 --- /dev/null +++ b/compiled_docs/cascader/demo/single-control.md @@ -0,0 +1 @@ +{"title":"设置是否只能选择叶子项","meta":{"title":"设置是否只能选择叶子项","description":"\n

展示受控单选以及是否只能选择叶子项的用法。

\n","order":"3"},"codes":{"jsx":"import { Checkbox, Cascader } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: null,\n canOnlySelectLeaf: false,\n data: []\n };\n\n this.handleCheck = this.handleCheck.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data, value: '2975' }))\n .catch(e => console.log(e));\n }\n\n handleCheck() {\n this.setState({\n canOnlySelectLeaf: !this.state.canOnlySelectLeaf,\n value: null\n });\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n value\n });\n }\n\n render() {\n return (\n
\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".control-single-demo .leaf-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.control-single-demo .leaf-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n"},"body":"\n\n````jsx\nimport { Checkbox, Cascader } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: null,\n canOnlySelectLeaf: false,\n data: []\n };\n\n this.handleCheck = this.handleCheck.bind(this);\n this.handleChange = this.handleChange.bind(this);\n }\n\n componentDidMount() {\n fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n .then(response => response.json())\n .then(data => this.setState({ data, value: '2975' }))\n .catch(e => console.log(e));\n }\n\n handleCheck() {\n this.setState({\n canOnlySelectLeaf: !this.state.canOnlySelectLeaf,\n value: null\n });\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n value\n });\n }\n\n render() {\n return (\n
\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.control-single-demo .leaf-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.control-single-demo .leaf-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n````","html":"
import { Checkbox, Cascader } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: null,\n            canOnlySelectLeaf: false,\n            data: []\n        };\n\n        this.handleCheck = this.handleCheck.bind(this);\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    componentDidMount() {\n        fetch('https://os.alipayobjects.com/rmsportal/ODDwqcDFTLAguOvWEolX.json')\n            .then(response => response.json())\n            .then(data => this.setState({ data, value: '2975' }))\n            .catch(e => console.log(e));\n    }\n\n    handleCheck() {\n        this.setState({\n            canOnlySelectLeaf: !this.state.canOnlySelectLeaf,\n            value: null\n        });\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n\n        this.setState({\n            value\n        });\n    }\n\n    render() {\n        return (\n            <div className=\"control-single-demo\">\n                <label className=\"leaf-check\">\n                    <Checkbox value={this.state.canOnlySelectLeaf} onChange={this.handleCheck} />\n                    <span className=\"leaf-text\">Enable canOnlySelectLeaf</span>\n                </label>\n                <Cascader canOnlySelectLeaf={this.state.canOnlySelectLeaf} value={this.state.value} dataSource={this.state.data} onChange={this.handleChange} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.control-single-demo .leaf-check {\n    display: block;\n    margin-bottom: 10px;\n}\n\n.control-single-demo .leaf-text {\n    display: inline-block;\n    margin-left: 10px;\n    vertical-align: middle;\n    color: #666;\n    font-size: 14px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader/demo/source.en-us.md b/compiled_docs/cascader/demo/source.en-us.md new file mode 100644 index 0000000000..875270ea5e --- /dev/null +++ b/compiled_docs/cascader/demo/source.en-us.md @@ -0,0 +1 @@ +{"title":"Loading data asynchronously","meta":{"title":"Loading data asynchronously","description":"\n

Demon loading data asynchronously.

\n","order":"7"},"codes":{"jsx":"import { Cascader } from '@alifd/next';\n\nconst dataSource = [{\n value: '2974',\n label: '西安'\n}, {\n value: '2980',\n label: '铜川'\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n dataSource\n };\n\n this.onLoadData = this.onLoadData.bind(this);\n }\n\n onLoadData(data, source) {\n console.log(data, source);\n\n return new Promise(resolve => {\n source.children = source.value === '2974' ? [\n { value: '2975', label: '西安市', isLeaf: true },\n { value: '2976', label: '高陵县', isLeaf: true }\n ] : [\n { value: '2981', label: '铜川市', isLeaf: true },\n { value: '2982', label: '宜君县', isLeaf: true }\n ];\n setTimeout(() => {\n this.setState({\n dataSource: this.state.dataSource\n }, resolve);\n }, 500);\n });\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".cascader-value {\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n"},"body":"\n````jsx\nimport { Cascader } from '@alifd/next';\n\nconst dataSource = [{\n value: '2974',\n label: '西安'\n}, {\n value: '2980',\n label: '铜川'\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n dataSource\n };\n\n this.onLoadData = this.onLoadData.bind(this);\n }\n\n onLoadData(data, source) {\n console.log(data, source);\n\n return new Promise(resolve => {\n source.children = source.value === '2974' ? [\n { value: '2975', label: '西安市', isLeaf: true },\n { value: '2976', label: '高陵县', isLeaf: true }\n ] : [\n { value: '2981', label: '铜川市', isLeaf: true },\n { value: '2982', label: '宜君县', isLeaf: true }\n ];\n setTimeout(() => {\n this.setState({\n dataSource: this.state.dataSource\n }, resolve);\n }, 500);\n });\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.cascader-value {\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n````","html":"
import { Cascader } from '@alifd/next';\n\nconst dataSource = [{\n    value: '2974',\n    label: '西安'\n}, {\n    value: '2980',\n    label: '铜川'\n}];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            dataSource\n        };\n\n        this.onLoadData = this.onLoadData.bind(this);\n    }\n\n    onLoadData(data, source) {\n        console.log(data, source);\n\n        return new Promise(resolve => {\n            source.children = source.value === '2974' ? [\n                { value: '2975', label: '西安市', isLeaf: true },\n                { value: '2976', label: '高陵县', isLeaf: true }\n            ] : [\n                { value: '2981', label: '铜川市', isLeaf: true },\n                { value: '2982', label: '宜君县', isLeaf: true }\n            ];\n            setTimeout(() => {\n                this.setState({\n                    dataSource: this.state.dataSource\n                }, resolve);\n            }, 500);\n        });\n    }\n\n    render() {\n        return <Cascader canOnlySelectLeaf dataSource={this.state.dataSource} loadData={this.onLoadData} />;\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.cascader-value {\n    margin-bottom: 10px;\n    font-size: 14px;\n    color: #666;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader/demo/source.md b/compiled_docs/cascader/demo/source.md new file mode 100644 index 0000000000..7483b287c2 --- /dev/null +++ b/compiled_docs/cascader/demo/source.md @@ -0,0 +1 @@ +{"title":"异步加载数据","meta":{"title":"异步加载数据","description":"\n

展示动态获取数据的用法。

\n","order":"7"},"codes":{"jsx":"import { Cascader } from '@alifd/next';\n\nconst dataSource = [{\n value: '2974',\n label: '西安'\n}, {\n value: '2980',\n label: '铜川'\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n dataSource\n };\n\n this.onLoadData = this.onLoadData.bind(this);\n }\n\n onLoadData(data, source) {\n console.log(data, source);\n\n return new Promise(resolve => {\n source.children = source.value === '2974' ? [\n { value: '2975', label: '西安市', isLeaf: true },\n { value: '2976', label: '高陵县', isLeaf: true }\n ] : [\n { value: '2981', label: '铜川市', isLeaf: true },\n { value: '2982', label: '宜君县', isLeaf: true }\n ];\n setTimeout(() => {\n this.setState({\n dataSource: this.state.dataSource\n }, resolve);\n }, 500);\n });\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".cascader-value {\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n"},"body":"\n\n````jsx\nimport { Cascader } from '@alifd/next';\n\nconst dataSource = [{\n value: '2974',\n label: '西安'\n}, {\n value: '2980',\n label: '铜川'\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n dataSource\n };\n\n this.onLoadData = this.onLoadData.bind(this);\n }\n\n onLoadData(data, source) {\n console.log(data, source);\n\n return new Promise(resolve => {\n source.children = source.value === '2974' ? [\n { value: '2975', label: '西安市', isLeaf: true },\n { value: '2976', label: '高陵县', isLeaf: true }\n ] : [\n { value: '2981', label: '铜川市', isLeaf: true },\n { value: '2982', label: '宜君县', isLeaf: true }\n ];\n setTimeout(() => {\n this.setState({\n dataSource: this.state.dataSource\n }, resolve);\n }, 500);\n });\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.cascader-value {\n margin-bottom: 10px;\n font-size: 14px;\n color: #666;\n}\n````","html":"
import { Cascader } from '@alifd/next';\n\nconst dataSource = [{\n    value: '2974',\n    label: '西安'\n}, {\n    value: '2980',\n    label: '铜川'\n}];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            dataSource\n        };\n\n        this.onLoadData = this.onLoadData.bind(this);\n    }\n\n    onLoadData(data, source) {\n        console.log(data, source);\n\n        return new Promise(resolve => {\n            source.children = source.value === '2974' ? [\n                { value: '2975', label: '西安市', isLeaf: true },\n                { value: '2976', label: '高陵县', isLeaf: true }\n            ] : [\n                { value: '2981', label: '铜川市', isLeaf: true },\n                { value: '2982', label: '宜君县', isLeaf: true }\n            ];\n            setTimeout(() => {\n                this.setState({\n                    dataSource: this.state.dataSource\n                }, resolve);\n            }, 500);\n        });\n    }\n\n    render() {\n        return <Cascader canOnlySelectLeaf dataSource={this.state.dataSource} loadData={this.onLoadData} />;\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.cascader-value {\n    margin-bottom: 10px;\n    font-size: 14px;\n    color: #666;\n}
"} \ No newline at end of file diff --git a/compiled_docs/cascader/index.en-us.md b/compiled_docs/cascader/index.en-us.md new file mode 100644 index 0000000000..3cd071bdea --- /dev/null +++ b/compiled_docs/cascader/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Guide#

When To Use#

    \n
  • Applies to the interactive way of selecting from a set of related data sets.
    • \n
  • Cascading is an effective method of saving screen space due to the hidden subset directory.
    • \n
  • The number of levels depends on the business needs, and it is not recommended to exceed 5 levels.
    • \n
  • Cascading is used for form scenes. It can be used independently on the page or in combination with other elements, such as cascading options.
    • \n
\n

API#

","api":"

Cascader#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault Value
dataSourcedata source, structure can refer to the following documentArray<Object>[]
defaultValue(under uncontrol) default valueString/Array<String>null
value(under control) current valueString/Array<String>-
onChangecallback triggered when value changes

signatures:
Function(value: String/Array, data: Object/Array, extra: Object) => void
params:
value: {String/Array} selected value, a single value is returned when single select, and an array is returned when multiple select
data: {Object/Array} selected data, including value, label, returns a single value when single select, returns an array when multiple select, parent and child nodes are selected at the same time, only the parent node is returned
extra: {Object} extra param
extra.selectedPath: {Array} path of the selected data when single selecte
extra.checked: {Boolean} whether is checked when multiple select
extra.currentData: {Object} current operation data when multiple select
extra.checkedData: {Array} all checked data when multiple select
extra.indeterminateData: {Array} indeterminate data when multile select		Function-
defaultExpandedValue(under uncontrol) default expanded value, if not set, the component will be automatically set according to defaultValue/valueArray<String>-
expandedValue(under control) current expanded valueArray<String>-
expandTriggerTypeexpand trigger type

options:
'click', 'hover'		Enum'click'
onExpandcallback triggered when expand or collapse

signatures:
Function(expandedValue: Array) => void
params:
expandedValue: {Array} an array of list expanded values		Function-
multiplewhether is multiple selectBooleanfalse
canOnlySelectLeafwhether only leaf nodes can be selected when single selectBooleanfalse
canOnlyCheckLeafwhether only leaf nodes can be checked when multiple selectBooleanfalse
checkStrictlywhether selection of parent and child nodes are relatedBooleanfalse
listStylestyle of listObject-
listClassNameclass name of listString-
itemRenderrender function of item

signatures:
Function(data: Object) => ReactNode
params:
data: {Object} data
returns:
{ReactNode} content of item
Functionitem => item.label
loadDataasynchronous data loading function

signatures:
Function(data: Object) => void
params:
data: {Object} clicked item		Function-
\n\n

Data structure of dataSource#

const dataSource = [{\n    value: '2974',\n    label: 'A',\n    children: [\n        { value: '2975', label: 'B', disabled: true },\n        { value: '2976', label: 'C', checkboxDisabled: true },\n        { value: '2977', label: 'D' },\n        { value: '2978', label: 'E' },\n        { value: '2979', label: 'F' },\n        { value: '4208', label: 'G' },\n        { value: '4209', label: 'H' },\n        { value: '4210', label: 'I' },\n        { value: '4211', label: 'J' },\n        { value: '4212', label: 'K' },\n        { value: '4213', label: 'L' },\n        { value: '4214', label: 'M' },\n        { value: '4215', label: 'N' },\n        { value: '4388', label: 'O' },\n        { value: '610127', label: 'P' }\n    ]\n}];

The custom attribute of item in the array is also transparently passed to the data parameter of the onChange function.

\n\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
按键说明
Up ArrowGet the previous item focus of the current item of same level
Down ArrowGet the next item focus of the current item of same level
Left ArrowEnter the child element of the current item and get the first child element as the focus
Right ArrowReturns the parent of the current item and gets the focus
EscReturns the parent of the current item and gets the focus
SPACESelect current item
\n"} \ No newline at end of file diff --git a/compiled_docs/cascader/index.md b/compiled_docs/cascader/index.md new file mode 100644 index 0000000000..5a7e8b0f2e --- /dev/null +++ b/compiled_docs/cascader/index.md @@ -0,0 +1 @@ +{"meta":"

开发指南#

何时使用#

    \n
  • 适用于从一组具有关联性的数据集合中进行选择的交互方式。
    • \n
  • 由于子集目录隐藏，级联是一种节约屏幕空间的有效方法。
    • \n
  • 级别数因业务需求而定，建议不超过5级。
    • \n
  • 级联多用于表单场景，可以独立在页面中使用，也可以与其他元素组合使用，如级联选择。
    • \n
\n

API#

","api":"

Cascader#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
dataSource数据源，结构可参考下方说明Array<Object>[]
defaultValue（非受控）默认值String/Array<String>null
value（受控）当前值String/Array<String>-
onChange选中值改变时触发的回调函数

签名:
Function(value: String/Array, data: Object/Array, extra: Object) => void
参数:
value: {String/Array} 选中的值，单选时返回单个值，多选时返回数组
data: {Object/Array} 选中的数据，包括 value 和 label，单选时返回单个值，多选时返回数组，父子节点选中关联时，同时选中，只返回父节点
extra: {Object} 额外参数
extra.selectedPath: {Array} 单选时选中的数据的路径
extra.checked: {Boolean} 多选时当前的操作是选中还是取消选中
extra.currentData: {Object} 多选时当前操作的数据
extra.checkedData: {Array} 多选时所有被选中的数据
extra.indeterminateData: {Array} 多选时半选的数据		Function-
defaultExpandedValue（非受控）默认展开值，如果不设置，组件内部会根据 defaultValue/value 进行自动设置Array<String>-
expandedValue（受控）当前展开值Array<String>-
expandTriggerType展开触发的方式

可选值:
'click', 'hover'		Enum'click'
onExpand展开时触发的回调函数

签名:
Function(expandedValue: Array) => void
参数:
expandedValue: {Array} 各列展开值的数组		Function-
useVirtual是否开启虚拟滚动Booleanfalse
multiple是否多选Booleanfalse
canOnlySelectLeaf单选时是否只能选中叶子节点Booleanfalse
canOnlyCheckLeaf多选时是否只能选中叶子节点Booleanfalse
checkStrictly父子节点是否选中不关联Booleanfalse
listStyle每列列表样式对象Object-
listClassName每列列表类名String-
itemRender每列列表项渲染函数

签名:
Function(data: Object) => ReactNode
参数:
data: {Object} 数据
返回值:
{ReactNode} 列表项内容
Functionitem => item.label
loadData异步加载数据函数

签名:
Function(data: Object, source: Object) => void
参数:
data: {Object} 当前点击异步加载的数据
source: {Object} 当前点击数据		Function-
\n\n

dataSource数据结构#

const dataSource = [{\n    value: '2974',\n    label: '西安',\n    children: [\n        { value: '2975', label: '西安市', disabled: true },\n        { value: '2976', label: '高陵县', checkboxDisabled: true },\n        { value: '2977', label: '蓝田县' },\n        { value: '2978', label: '户县' },\n        { value: '2979', label: '周至县' },\n        { value: '4208', label: '灞桥区' },\n        { value: '4209', label: '长安区' },\n        { value: '4210', label: '莲湖区' },\n        { value: '4211', label: '临潼区' },\n        { value: '4212', label: '未央区' },\n        { value: '4213', label: '新城区' },\n        { value: '4214', label: '阎良区' },\n        { value: '4215', label: '雁塔区' },\n        { value: '4388', label: '碑林区' },\n        { value: '610127', label: '其它区' }\n    ]\n}];

数组中 Item 的自定义属性也会被透传到 onChange 函数的 data 参数中。

\n\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
按键说明
Up Arrow获取同级当前项前一项焦点
Down Arrow获取同级当前项后一项焦点
Left Arrow进入当前项的子元素，并获取第一个子元素为焦点
Right Arrow返回当前项的父元素并获取焦点
Esc返回当前项的父元素并获取焦点
SPACE选择当前项
\n"} \ No newline at end of file diff --git a/compiled_docs/checkbox/demo/accessibility.en-us.md b/compiled_docs/checkbox/demo/accessibility.en-us.md new file mode 100644 index 0000000000..db2f2023a2 --- /dev/null +++ b/compiled_docs/checkbox/demo/accessibility.en-us.md @@ -0,0 +1 @@ +{"title":"Accessibility","meta":{"title":"Accessibility","description":"\n

Describe the Checkbox component with aria-label.Please refer to ARIA and KeyBoard for keyboard operation.

\n","order":"8"},"codes":{"jsx":"\nimport { Checkbox } from '@alifd/next';\n\nconst CheckboxGroup = () => (\n
\n

Programming language：

\n \n python\n java\n angular\n c\n other\n \n
\n);\n\nReactDOM.render(, mountNode);\n\n"},"body":"\n````jsx\n\nimport { Checkbox } from '@alifd/next';\n\nconst CheckboxGroup = () => (\n
\n

Programming language：

\n \n python\n java\n angular\n c\n other\n \n
\n);\n\nReactDOM.render(, mountNode);\n\n````","html":"
\nimport { Checkbox } from '@alifd/next';\n\nconst CheckboxGroup = () => (\n    <div>\n        <h4>Programming language：</h4>\n        <Checkbox.Group aria-label=\"Please select a programming language\">  \n            <Checkbox value=\"python\">python</Checkbox>\n            <Checkbox value=\"java\">java</Checkbox>\n            <Checkbox value=\"angular\">angular</Checkbox>\n            <Checkbox value=\"c\">c</Checkbox>\n            <Checkbox value=\"other\">other</Checkbox>\n        </Checkbox.Group>\n    </div>\n);\n\nReactDOM.render(<CheckboxGroup />, mountNode);\n
"} \ No newline at end of file diff --git a/compiled_docs/checkbox/demo/accessibility.md b/compiled_docs/checkbox/demo/accessibility.md new file mode 100644 index 0000000000..79e2d75afd --- /dev/null +++ b/compiled_docs/checkbox/demo/accessibility.md @@ -0,0 +1 @@ +{"title":"无障碍","meta":{"title":"无障碍","description":"\n

通过aria-label对Checkbox组件进行描述。关于键盘操作请参考ARIA and KeyBoard。

\n","order":"8"},"codes":{"jsx":"\nimport { Checkbox } from '@alifd/next';\n\nconst CheckboxGroup = () => (\n
\n

Programming language：

\n \n python\n java\n angular\n c\n other\n \n
\n);\n\nReactDOM.render(, mountNode);\n\n"},"body":"\n\n````jsx\n\nimport { Checkbox } from '@alifd/next';\n\nconst CheckboxGroup = () => (\n
\n

Programming language：

\n \n python\n java\n angular\n c\n other\n \n
\n);\n\nReactDOM.render(, mountNode);\n\n````","html":"
\nimport { Checkbox } from '@alifd/next';\n\nconst CheckboxGroup = () => (\n    <div>\n        <h4>Programming language：</h4>\n        <Checkbox.Group aria-label=\"Please select a programming language\">  \n            <Checkbox value=\"python\">python</Checkbox>\n            <Checkbox value=\"java\">java</Checkbox>\n            <Checkbox value=\"angular\">angular</Checkbox>\n            <Checkbox value=\"c\">c</Checkbox>\n            <Checkbox value=\"other\">other</Checkbox>\n        </Checkbox.Group>\n    </div>\n);\n\nReactDOM.render(<CheckboxGroup />, mountNode);\n
"} \ No newline at end of file diff --git a/compiled_docs/checkbox/demo/basic.en-us.md b/compiled_docs/checkbox/demo/basic.en-us.md new file mode 100644 index 0000000000..92a4e19419 --- /dev/null +++ b/compiled_docs/checkbox/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic Usage","meta":{"title":"Basic Usage","description":"\n"},"codes":{"jsx":"import { Checkbox } from '@alifd/next';\n\nReactDOM.render(\n
\n
Different status without label:
\n Unchecked\n DefaultChecked\n Indeterminate\n Disabled;\n Checked-Disabled\n Checked\n
Using with label
\n Banana \n  \n  \n \n
, mountNode);\n"},"body":"\n````jsx\nimport { Checkbox } from '@alifd/next';\n\nReactDOM.render(\n
\n
Different status without label:
\n Unchecked\n DefaultChecked\n Indeterminate\n Disabled;\n Checked-Disabled\n Checked\n
Using with label
\n Banana \n  \n  \n \n
, mountNode);\n````","html":"
import { Checkbox } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <h6>Different status without label:</h6>\n        <Checkbox >Unchecked</Checkbox>\n        <Checkbox defaultChecked >DefaultChecked</Checkbox>\n        <Checkbox defaultIndeterminate >Indeterminate</Checkbox>\n        <Checkbox disabled >Disabled</Checkbox>;\n        <Checkbox disabled checked >Checked-Disabled</Checkbox>\n        <Checkbox checked >Checked</Checkbox>\n        <h6>Using with label</h6>\n        <Checkbox>Banana</Checkbox>&nbsp;\n        <Checkbox id=\"apple\" /><label htmlFor=\"apple\" className=\"next-checkbox-label\">Apple</label>&nbsp;\n        <label>\n            <Checkbox id=\"pear\" />\n            <span className=\"next-checkbox-label\">Pear</span>\n        </label>&nbsp;\n        <Checkbox label=\"Banana\" />\n    </div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/checkbox/demo/basic.md b/compiled_docs/checkbox/demo/basic.md new file mode 100644 index 0000000000..77e17daa5e --- /dev/null +++ b/compiled_docs/checkbox/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

使用 Checkbox 渲染的基本组件。

\n","order":"0"},"codes":{"jsx":"import { Checkbox } from '@alifd/next';\n\nReactDOM.render(\n
\n
Different status without label:
\n Unchecked\n DefaultChecked\n Indeterminate\n Disabled;\n Checked-Disabled\n Checked\n
Using with label
\n Banana \n  \n  \n \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Checkbox } from '@alifd/next';\n\nReactDOM.render(\n
\n
Different status without label:
\n Unchecked\n DefaultChecked\n Indeterminate\n Disabled;\n Checked-Disabled\n Checked\n
Using with label
\n Banana \n  \n  \n \n
, mountNode);\n````","html":"
import { Checkbox } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <h6>Different status without label:</h6>\n        <Checkbox >Unchecked</Checkbox>\n        <Checkbox defaultChecked >DefaultChecked</Checkbox>\n        <Checkbox defaultIndeterminate >Indeterminate</Checkbox>\n        <Checkbox disabled >Disabled</Checkbox>;\n        <Checkbox disabled checked >Checked-Disabled</Checkbox>\n        <Checkbox checked >Checked</Checkbox>\n        <h6>Using with label</h6>\n        <Checkbox>Banana</Checkbox>&nbsp;\n        <Checkbox id=\"apple\" /><label htmlFor=\"apple\" className=\"next-checkbox-label\">Apple</label>&nbsp;\n        <label>\n            <Checkbox id=\"pear\" />\n            <span className=\"next-checkbox-label\">Pear</span>\n        </label>&nbsp;\n        <Checkbox label=\"Banana\" />\n    </div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/checkbox/demo/control.en-us.md b/compiled_docs/checkbox/demo/control.en-us.md new file mode 100644 index 0000000000..5be009eb07 --- /dev/null +++ b/compiled_docs/checkbox/demo/control.en-us.md @@ -0,0 +1 @@ +{"title":"Controlled Component","meta":{"title":"Controlled Component","description":"\n"},"codes":{"jsx":"import { Checkbox } from '@alifd/next';\n\nconst { Group: CheckboxGroup } = Checkbox;\nconst list = [\n {\n value: 'apple',\n label: 'Apple'\n }, {\n value: 'pear',\n label: 'Pear'\n }, {\n value: 'orange',\n label: 'Orange'\n }\n];\n\nclass ControlApp extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n value: ['orange']\n };\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(selectedItems) {\n console.log('onChange callback', selectedItems);\n this.setState({\n value: selectedItems\n });\n }\n\n render() {\n return (\n
\n \n
\n );\n }\n\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Checkbox } from '@alifd/next';\n\nconst { Group: CheckboxGroup } = Checkbox;\nconst list = [\n {\n value: 'apple',\n label: 'Apple'\n }, {\n value: 'pear',\n label: 'Pear'\n }, {\n value: 'orange',\n label: 'Orange'\n }\n];\n\nclass ControlApp extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n value: ['orange']\n };\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(selectedItems) {\n console.log('onChange callback', selectedItems);\n this.setState({\n value: selectedItems\n });\n }\n\n render() {\n return (\n
\n \n
\n );\n }\n\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Checkbox } from '@alifd/next';\n\nconst { Group: CheckboxGroup } = Checkbox;\nconst list = [\n    {\n        value: 'apple',\n        label: 'Apple'\n    }, {\n        value: 'pear',\n        label: 'Pear'\n    }, {\n        value: 'orange',\n        label: 'Orange'\n    }\n];\n\nclass ControlApp extends React.Component {\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: ['orange']\n        };\n\n        this.onChange = this.onChange.bind(this);\n    }\n\n    onChange(selectedItems) {\n        console.log('onChange callback', selectedItems);\n        this.setState({\n            value: selectedItems\n        });\n    }\n\n    render() {\n        return (\n            <div style={{padding: '20px'}}>\n                <CheckboxGroup value={this.state.value} dataSource={list} onChange={this.onChange} />\n            </div>\n        );\n    }\n\n}\n\nReactDOM.render(<ControlApp />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/checkbox/demo/control.md b/compiled_docs/checkbox/demo/control.md new file mode 100644 index 0000000000..995c9f94b9 --- /dev/null +++ b/compiled_docs/checkbox/demo/control.md @@ -0,0 +1 @@ +{"title":"受限组件","meta":{"title":"受限组件","description":"\n

使用 CheckboxGroup 渲染的组，通过设置 value 属性可以让组件变成受限组件。

\n","order":"2"},"codes":{"jsx":"import { Checkbox } from '@alifd/next';\n\nconst { Group: CheckboxGroup } = Checkbox;\nconst list = [\n {\n value: 'apple',\n label: 'Apple'\n }, {\n value: 'pear',\n label: 'Pear'\n }, {\n value: 'orange',\n label: 'Orange'\n }\n];\n\nclass ControlApp extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n value: ['orange']\n };\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(selectedItems) {\n console.log('onChange callback', selectedItems);\n this.setState({\n value: selectedItems\n });\n }\n\n render() {\n return (\n
\n \n
\n );\n }\n\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Checkbox } from '@alifd/next';\n\nconst { Group: CheckboxGroup } = Checkbox;\nconst list = [\n {\n value: 'apple',\n label: 'Apple'\n }, {\n value: 'pear',\n label: 'Pear'\n }, {\n value: 'orange',\n label: 'Orange'\n }\n];\n\nclass ControlApp extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n value: ['orange']\n };\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(selectedItems) {\n console.log('onChange callback', selectedItems);\n this.setState({\n value: selectedItems\n });\n }\n\n render() {\n return (\n
\n \n
\n );\n }\n\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Checkbox } from '@alifd/next';\n\nconst { Group: CheckboxGroup } = Checkbox;\nconst list = [\n    {\n        value: 'apple',\n        label: 'Apple'\n    }, {\n        value: 'pear',\n        label: 'Pear'\n    }, {\n        value: 'orange',\n        label: 'Orange'\n    }\n];\n\nclass ControlApp extends React.Component {\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: ['orange']\n        };\n\n        this.onChange = this.onChange.bind(this);\n    }\n\n    onChange(selectedItems) {\n        console.log('onChange callback', selectedItems);\n        this.setState({\n            value: selectedItems\n        });\n    }\n\n    render() {\n        return (\n            <div style={{padding: '20px'}}>\n                <CheckboxGroup value={this.state.value} dataSource={list} onChange={this.onChange} />\n            </div>\n        );\n    }\n\n}\n\nReactDOM.render(<ControlApp />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/checkbox/demo/group.en-us.md b/compiled_docs/checkbox/demo/group.en-us.md new file mode 100644 index 0000000000..58bf456035 --- /dev/null +++ b/compiled_docs/checkbox/demo/group.en-us.md @@ -0,0 +1 @@ +{"title":"Grouping","meta":{"title":"Grouping","description":"\n

Grouping <Checkbox> with <Checkbox.Group>.

\n","order":"0"},"codes":{"jsx":"import { Checkbox } from '@alifd/next';\n\nconst CheckboxGroup = () => (\n
\n

Horizonal direction

\n

\n \n React\n Vue\n Angular\n \n

\n

Vertical direction

\n

\n \n React\n Vue\n Angular\n \n

\n
\n);\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Checkbox } from '@alifd/next';\n\nconst CheckboxGroup = () => (\n
\n

Horizonal direction

\n

\n \n React\n Vue\n Angular\n \n

\n

Vertical direction

\n

\n \n React\n Vue\n Angular\n \n

\n
\n);\n\nReactDOM.render(, mountNode);\n````","html":"
import { Checkbox } from '@alifd/next';\n\nconst CheckboxGroup = () => (\n    <div>\n        <h4>Horizonal direction</h4>\n        <p>\n            <Checkbox.Group itemDirection=\"hoz\">\n                <Checkbox value=\"react\">React</Checkbox>\n                <Checkbox value=\"vue\">Vue</Checkbox>\n                <Checkbox value=\"angular\">Angular</Checkbox>\n            </Checkbox.Group>\n        </p>\n        <h4>Vertical direction</h4>\n        <p>\n            <Checkbox.Group itemDirection=\"ver\">\n                <Checkbox value=\"react\">React</Checkbox>\n                <Checkbox value=\"vue\">Vue</Checkbox>\n                <Checkbox value=\"angular\">Angular</Checkbox>\n            </Checkbox.Group>\n        </p>\n    </div>\n);\n\nReactDOM.render(<CheckboxGroup />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/checkbox/demo/group.md b/compiled_docs/checkbox/demo/group.md new file mode 100644 index 0000000000..23ab98ce46 --- /dev/null +++ b/compiled_docs/checkbox/demo/group.md @@ -0,0 +1 @@ +{"title":"分组","meta":{"title":"分组","description":"\n

使用 <Checkbox.Group> 渲染 <Checkbox> 分组。

\n","order":"1"},"codes":{"jsx":"import { Checkbox } from '@alifd/next';\n\nconst CheckboxGroup = () => (\n
\n

Horizonal direction

\n

\n \n React\n Vue\n Angular\n \n

\n

Vertical direction

\n

\n \n React\n Vue\n Angular\n \n

\n
\n);\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Checkbox } from '@alifd/next';\n\nconst CheckboxGroup = () => (\n
\n

Horizonal direction

\n

\n \n React\n Vue\n Angular\n \n

\n

Vertical direction

\n

\n \n React\n Vue\n Angular\n \n

\n
\n);\n\nReactDOM.render(, mountNode);\n````","html":"
import { Checkbox } from '@alifd/next';\n\nconst CheckboxGroup = () => (\n    <div>\n        <h4>Horizonal direction</h4>\n        <p>\n            <Checkbox.Group itemDirection=\"hoz\">\n                <Checkbox value=\"react\">React</Checkbox>\n                <Checkbox value=\"vue\">Vue</Checkbox>\n                <Checkbox value=\"angular\">Angular</Checkbox>\n            </Checkbox.Group>\n        </p>\n        <h4>Vertical direction</h4>\n        <p>\n            <Checkbox.Group itemDirection=\"ver\">\n                <Checkbox value=\"react\">React</Checkbox>\n                <Checkbox value=\"vue\">Vue</Checkbox>\n                <Checkbox value=\"angular\">Angular</Checkbox>\n            </Checkbox.Group>\n        </p>\n    </div>\n);\n\nReactDOM.render(<CheckboxGroup />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/checkbox/demo/indeterminate.en-us.md b/compiled_docs/checkbox/demo/indeterminate.en-us.md new file mode 100644 index 0000000000..f781f504b2 --- /dev/null +++ b/compiled_docs/checkbox/demo/indeterminate.en-us.md @@ -0,0 +1 @@ +{"title":"Intermediate State Component","meta":{"title":"Intermediate State Component","description":"\n"},"codes":{"jsx":"import { Checkbox, Button } from '@alifd/next';\n\nclass IndeterminateApp extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n checked: false,\n indeterminate: true,\n disabled: false\n };\n }\n\n render() {\n return (\n
\n {\n this.setState({checked: checked, indeterminate: false});\n }\n }\n />\n
\n
\n {\n this.setState({checked: true, indeterminate: false});\n }\n }>checked = true\n
\n
\n {\n this.setState({checked: false});\n }\n }\n >checked = false\n
\n
\n {\n this.setState({checked: false, indeterminate: true});\n }\n }\n >indeterminate = true\n
\n
\n {\n this.setState({indeterminate: false});\n }\n }\n >indeterminate = false\n
\n
\n {\n this.setState({disabled: !this.state.disabled});\n }\n }\n >toggle disabled\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Checkbox, Button } from '@alifd/next';\n\nclass IndeterminateApp extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n checked: false,\n indeterminate: true,\n disabled: false\n };\n }\n\n render() {\n return (\n
\n {\n this.setState({checked: checked, indeterminate: false});\n }\n }\n />\n
\n
\n {\n this.setState({checked: true, indeterminate: false});\n }\n }>checked = true\n
\n
\n {\n this.setState({checked: false});\n }\n }\n >checked = false\n
\n
\n {\n this.setState({checked: false, indeterminate: true});\n }\n }\n >indeterminate = true\n
\n
\n {\n this.setState({indeterminate: false});\n }\n }\n >indeterminate = false\n
\n
\n {\n this.setState({disabled: !this.state.disabled});\n }\n }\n >toggle disabled\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Checkbox, Button } from '@alifd/next';\n\nclass IndeterminateApp extends React.Component {\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            checked: false,\n            indeterminate: true,\n            disabled: false\n        };\n    }\n\n    render() {\n        return (\n            <div>\n                <Checkbox\n                    checked={this.state.checked}\n                    indeterminate={this.state.indeterminate}\n                    disabled={this.state.disabled}\n                    onChange={\n                        (checked) => {\n                            this.setState({checked: checked, indeterminate: false});\n                        }\n                    }\n                />\n                <br />\n                <br />\n                <Button\n                    type=\"primary\"\n                    onClick={\n                        () => {\n                            this.setState({checked: true, indeterminate: false});\n                        }\n                    }>checked = true</Button>\n                <br />\n                <br />\n                <Button\n                    type=\"primary\"\n                    onClick={\n                        () => {\n                            this.setState({checked: false});\n                        }\n                    }\n                >checked = false</Button>\n                <br />\n                <br />\n                <Button\n                    type=\"primary\"\n                    onClick={\n                        () => {\n                            this.setState({checked: false, indeterminate: true});\n                        }\n                    }\n                >indeterminate = true</Button>\n                <br />\n                <br />\n                <Button\n                    type=\"primary\"\n                    onClick={\n                        () => {\n                            this.setState({indeterminate: false});\n                        }\n                    }\n                >indeterminate = false</Button>\n                <br />\n                <br />\n                <Button\n                    type=\"primary\"\n                    onClick={\n                        () => {\n                            this.setState({disabled: !this.state.disabled});\n                        }\n                    }\n                >toggle disabled</Button>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<IndeterminateApp />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/checkbox/demo/indeterminate.md b/compiled_docs/checkbox/demo/indeterminate.md new file mode 100644 index 0000000000..9a5e0283c1 --- /dev/null +++ b/compiled_docs/checkbox/demo/indeterminate.md @@ -0,0 +1 @@ +{"title":"中间状态组件","meta":{"title":"中间状态组件","description":"\n

通过使用 indeterminate 来渲染中间状态的组件。

\n","order":"1"},"codes":{"jsx":"import { Checkbox, Button } from '@alifd/next';\n\nclass IndeterminateApp extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n checked: false,\n indeterminate: true,\n disabled: false\n };\n }\n\n render() {\n return (\n
\n {\n this.setState({checked: checked, indeterminate: false});\n }\n }\n />\n
\n
\n {\n this.setState({checked: true, indeterminate: false});\n }\n }>checked = true\n
\n
\n {\n this.setState({checked: false});\n }\n }\n >checked = false\n
\n
\n {\n this.setState({checked: false, indeterminate: true});\n }\n }\n >indeterminate = true\n
\n
\n {\n this.setState({indeterminate: false});\n }\n }\n >indeterminate = false\n
\n
\n {\n this.setState({disabled: !this.state.disabled});\n }\n }\n >toggle disabled\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Checkbox, Button } from '@alifd/next';\n\nclass IndeterminateApp extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n checked: false,\n indeterminate: true,\n disabled: false\n };\n }\n\n render() {\n return (\n
\n {\n this.setState({checked: checked, indeterminate: false});\n }\n }\n />\n
\n
\n {\n this.setState({checked: true, indeterminate: false});\n }\n }>checked = true\n
\n
\n {\n this.setState({checked: false});\n }\n }\n >checked = false\n
\n
\n {\n this.setState({checked: false, indeterminate: true});\n }\n }\n >indeterminate = true\n
\n
\n {\n this.setState({indeterminate: false});\n }\n }\n >indeterminate = false\n
\n
\n {\n this.setState({disabled: !this.state.disabled});\n }\n }\n >toggle disabled\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Checkbox, Button } from '@alifd/next';\n\nclass IndeterminateApp extends React.Component {\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            checked: false,\n            indeterminate: true,\n            disabled: false\n        };\n    }\n\n    render() {\n        return (\n            <div>\n                <Checkbox\n                    checked={this.state.checked}\n                    indeterminate={this.state.indeterminate}\n                    disabled={this.state.disabled}\n                    onChange={\n                        (checked) => {\n                            this.setState({checked: checked, indeterminate: false});\n                        }\n                    }\n                />\n                <br />\n                <br />\n                <Button\n                    type=\"primary\"\n                    onClick={\n                        () => {\n                            this.setState({checked: true, indeterminate: false});\n                        }\n                    }>checked = true</Button>\n                <br />\n                <br />\n                <Button\n                    type=\"primary\"\n                    onClick={\n                        () => {\n                            this.setState({checked: false});\n                        }\n                    }\n                >checked = false</Button>\n                <br />\n                <br />\n                <Button\n                    type=\"primary\"\n                    onClick={\n                        () => {\n                            this.setState({checked: false, indeterminate: true});\n                        }\n                    }\n                >indeterminate = true</Button>\n                <br />\n                <br />\n                <Button\n                    type=\"primary\"\n                    onClick={\n                        () => {\n                            this.setState({indeterminate: false});\n                        }\n                    }\n                >indeterminate = false</Button>\n                <br />\n                <br />\n                <Button\n                    type=\"primary\"\n                    onClick={\n                        () => {\n                            this.setState({disabled: !this.state.disabled});\n                        }\n                    }\n                >toggle disabled</Button>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<IndeterminateApp />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/checkbox/demo/nest.en-us.md b/compiled_docs/checkbox/demo/nest.en-us.md new file mode 100644 index 0000000000..0a8ec874d1 --- /dev/null +++ b/compiled_docs/checkbox/demo/nest.en-us.md @@ -0,0 +1 @@ +{"title":"Nested Components","meta":{"title":"Nested Components","description":"\n"},"codes":{"jsx":"import { Checkbox } from '@alifd/next';\n\nconst { Group: CheckboxGroup } = Checkbox;\n\nclass NestApp extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n value: ['orange']\n };\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(selectedItems) {\n this.setState({\n value: selectedItems\n });\n }\n\n render() {\n return (\n
\n \n Apple\n Watermelon\n Orange\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Checkbox } from '@alifd/next';\n\nconst { Group: CheckboxGroup } = Checkbox;\n\nclass NestApp extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n value: ['orange']\n };\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(selectedItems) {\n this.setState({\n value: selectedItems\n });\n }\n\n render() {\n return (\n
\n \n Apple\n Watermelon\n Orange\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Checkbox } from '@alifd/next';\n\nconst { Group: CheckboxGroup } = Checkbox;\n\nclass NestApp extends React.Component {\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: ['orange']\n        };\n\n        this.onChange = this.onChange.bind(this);\n    }\n\n    onChange(selectedItems) {\n        this.setState({\n            value: selectedItems\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <CheckboxGroup value={this.state.value} onChange={this.onChange}>\n                    <Checkbox id=\"apple\" value=\"apple\" disabled>Apple</Checkbox>\n                    <Checkbox id=\"watermelon\" value=\"watermelon\">Watermelon</Checkbox>\n                    <Checkbox id=\"orange\" value=\"orange\">Orange</Checkbox>\n                </CheckboxGroup>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<NestApp />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/checkbox/demo/nest.md b/compiled_docs/checkbox/demo/nest.md new file mode 100644 index 0000000000..5bbe21696d --- /dev/null +++ b/compiled_docs/checkbox/demo/nest.md @@ -0,0 +1 @@ +{"title":"Checkbox嵌套使用","meta":{"title":"Checkbox嵌套使用","description":"\n

使用 CheckboxGroup，通过直接嵌套 Checkbox 组件来渲染的组。

\n","order":"4"},"codes":{"jsx":"import { Checkbox } from '@alifd/next';\n\nconst { Group: CheckboxGroup } = Checkbox;\n\nclass NestApp extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n value: ['orange']\n };\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(selectedItems) {\n this.setState({\n value: selectedItems\n });\n }\n\n render() {\n return (\n
\n \n Apple\n Watermelon\n Orange\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Checkbox } from '@alifd/next';\n\nconst { Group: CheckboxGroup } = Checkbox;\n\nclass NestApp extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n value: ['orange']\n };\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(selectedItems) {\n this.setState({\n value: selectedItems\n });\n }\n\n render() {\n return (\n
\n \n Apple\n Watermelon\n Orange\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Checkbox } from '@alifd/next';\n\nconst { Group: CheckboxGroup } = Checkbox;\n\nclass NestApp extends React.Component {\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: ['orange']\n        };\n\n        this.onChange = this.onChange.bind(this);\n    }\n\n    onChange(selectedItems) {\n        this.setState({\n            value: selectedItems\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <CheckboxGroup value={this.state.value} onChange={this.onChange}>\n                    <Checkbox id=\"apple\" value=\"apple\" disabled>Apple</Checkbox>\n                    <Checkbox id=\"watermelon\" value=\"watermelon\">Watermelon</Checkbox>\n                    <Checkbox id=\"orange\" value=\"orange\">Orange</Checkbox>\n                </CheckboxGroup>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<NestApp />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/checkbox/demo/uncontrol.en-us.md b/compiled_docs/checkbox/demo/uncontrol.en-us.md new file mode 100644 index 0000000000..29befc7c2a --- /dev/null +++ b/compiled_docs/checkbox/demo/uncontrol.en-us.md @@ -0,0 +1 @@ +{"title":"Uncontrolled Component","meta":{"title":"Uncontrolled Component","description":"\n"},"codes":{"jsx":"import { Checkbox } from '@alifd/next';\n\nconst { Group: CheckboxGroup } = Checkbox;\nconst list = [\n {\n value: 'apple',\n label: 'Apple',\n disabled: false\n }, {\n value: 'pear',\n label: 'Pear'\n }, {\n value: 'orange',\n label: 'Orange',\n disabled: true\n }\n];\n\nclass UnControlApp extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(selectedItems) {\n console.log('onChange callback', selectedItems);\n }\n\n render() {\n return (\n
\n \n
\n );\n }\n\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Checkbox } from '@alifd/next';\n\nconst { Group: CheckboxGroup } = Checkbox;\nconst list = [\n {\n value: 'apple',\n label: 'Apple',\n disabled: false\n }, {\n value: 'pear',\n label: 'Pear'\n }, {\n value: 'orange',\n label: 'Orange',\n disabled: true\n }\n];\n\nclass UnControlApp extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(selectedItems) {\n console.log('onChange callback', selectedItems);\n }\n\n render() {\n return (\n
\n \n
\n );\n }\n\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Checkbox } from '@alifd/next';\n\nconst { Group: CheckboxGroup } = Checkbox;\nconst list = [\n    {\n        value: 'apple',\n        label: 'Apple',\n        disabled: false\n    }, {\n        value: 'pear',\n        label: 'Pear'\n    }, {\n        value: 'orange',\n        label: 'Orange',\n        disabled: true\n    }\n];\n\nclass UnControlApp extends React.Component {\n\n    constructor(props) {\n        super(props);\n\n        this.onChange = this.onChange.bind(this);\n    }\n\n    onChange(selectedItems) {\n        console.log('onChange callback', selectedItems);\n    }\n\n    render() {\n        return (\n            <div style={{padding: '20px'}}>\n                <CheckboxGroup defaultValue={['apple']} dataSource={list} onChange={this.onChange} />\n            </div>\n        );\n    }\n\n}\n\nReactDOM.render(<UnControlApp />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/checkbox/demo/uncontrol.md b/compiled_docs/checkbox/demo/uncontrol.md new file mode 100644 index 0000000000..0a8ddd9b35 --- /dev/null +++ b/compiled_docs/checkbox/demo/uncontrol.md @@ -0,0 +1 @@ +{"title":"非受限组件","meta":{"title":"非受限组件","description":"\n

使用 CheckboxGroup 渲染的组，通过设置 defaultValue 属性可以让组件变成非受限组件。

\n","order":"3"},"codes":{"jsx":"import { Checkbox } from '@alifd/next';\n\nconst { Group: CheckboxGroup } = Checkbox;\nconst list = [\n {\n value: 'apple',\n label: 'Apple',\n disabled: false\n }, {\n value: 'pear',\n label: 'Pear'\n }, {\n value: 'orange',\n label: 'Orange',\n disabled: true\n }\n];\n\nclass UnControlApp extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(selectedItems) {\n console.log('onChange callback', selectedItems);\n }\n\n render() {\n return (\n
\n \n
\n );\n }\n\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Checkbox } from '@alifd/next';\n\nconst { Group: CheckboxGroup } = Checkbox;\nconst list = [\n {\n value: 'apple',\n label: 'Apple',\n disabled: false\n }, {\n value: 'pear',\n label: 'Pear'\n }, {\n value: 'orange',\n label: 'Orange',\n disabled: true\n }\n];\n\nclass UnControlApp extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(selectedItems) {\n console.log('onChange callback', selectedItems);\n }\n\n render() {\n return (\n
\n \n
\n );\n }\n\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Checkbox } from '@alifd/next';\n\nconst { Group: CheckboxGroup } = Checkbox;\nconst list = [\n    {\n        value: 'apple',\n        label: 'Apple',\n        disabled: false\n    }, {\n        value: 'pear',\n        label: 'Pear'\n    }, {\n        value: 'orange',\n        label: 'Orange',\n        disabled: true\n    }\n];\n\nclass UnControlApp extends React.Component {\n\n    constructor(props) {\n        super(props);\n\n        this.onChange = this.onChange.bind(this);\n    }\n\n    onChange(selectedItems) {\n        console.log('onChange callback', selectedItems);\n    }\n\n    render() {\n        return (\n            <div style={{padding: '20px'}}>\n                <CheckboxGroup defaultValue={['apple']} dataSource={list} onChange={this.onChange} />\n            </div>\n        );\n    }\n\n}\n\nReactDOM.render(<UnControlApp />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/checkbox/index.en-us.md b/compiled_docs/checkbox/index.en-us.md new file mode 100644 index 0000000000..587d3f9607 --- /dev/null +++ b/compiled_docs/checkbox/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Guide#

Checkbox

\n

When to Use#

Checkbox is used to verify which options you want selected from a group. If you have only a single option, do not use the checkbox, use the on/off switch.

\n

API#

","api":"

Checkbox#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault Value
idcheckbox id, mounted on inputString-
checkedSet the status to be checkedBoolean-
defaultCheckedSet the default status to be checkedBooleanfalse
disabledSet the status to be disabledBoolean-
labelSet the label by propertyString-
indeterminateThe intermediate state of the Checkbox will only affect the style of the Checkbox and does not affect its checked property.Boolean-
defaultIndeterminateSet the default status to intermediate, it will only affect the style of the Checkbox and does not affect its checked property.Booleanfalse
onChangeCallback function triggered when the state changes

signatures:
Function(checked: Boolean, e: Event) => void
params:
checked: {Boolean} The checked value of the underlying checkbox input
_e_: {Event} Dom event object		Functionfunc.noop
onMouseEnterCallback function triggered when the mouse pointer enters the element.

signatures:
Function(e: Event) => void
params:
_e_: {Event} Dom event object		Functionfunc.noop
onMouseLeaveCallback function triggered when the mouse pointer leaves the element.

signatures:
Function(e: Event) => void
params:
_e_: {Event} Dom event object		Functionfunc.noop
\n

Checkbox.Group#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
paramsdesctypedefault
disabledSet the status of all checkbox in group to be checkedBoolean-
dataSourceOptional list, data item can be String or Object, for example ['apple', 'pear', 'orange'] or [{value: 'apple', label: 'Apple',}, {value: 'pear', label: 'Pear'}, {value: 'orange', label: 'Orange'}]Array<any>[]
valueThe values of selected optional listArray/String/Number-
defaultValueThe values of default selected optional listArray/String/Number-
childrenTo set nested checkbox by children componentsArray<ReactElement>-
onChangeCallback function triggered when the selected value changes

signatures:
Function(value: Array, e: Event) => void
params:
value: {Array} values of selected optional list
_e_: {Event} Dom event object		Function() => { }
itemDirectionThe direction of item's aligning
- hoz: horizontal (default)
- ver: vertical

Allowed values:
'hoz', 'ver'		Enum'hoz'
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyBoardDescripiton
SPACESelect or cancel the current item
\n"} \ No newline at end of file diff --git a/compiled_docs/checkbox/index.md b/compiled_docs/checkbox/index.md new file mode 100644 index 0000000000..32e5b9daf5 --- /dev/null +++ b/compiled_docs/checkbox/index.md @@ -0,0 +1 @@ +{"meta":"

开发指南#

多选框

\n

何时使用#

复选框允许用户从一个数据集中选择多个选项。如果在一个列表中有多个选项，你可以通过使用复选框而不是开/关切换来节省空间。如果你有一个单选项，不要用复选框，使用开/关切换。

\n

API#

","api":"

Checkbox#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
idcheckbox id, 挂载在input上String-
checked选中状态Boolean-
defaultChecked默认选中状态Booleanfalse
disabled禁用Boolean-
label通过属性配置label，ReactNode-
indeterminateCheckbox 的中间状态，只会影响到 Checkbox 的样式，并不影响其 checked 属性Boolean-
defaultIndeterminateCheckbox 的默认中间态，只会影响到 Checkbox 的样式，并不影响其 checked 属性Booleanfalse
onChange状态变化时触发的事件

签名:
Function(checked: Boolean, e: Event) => void
参数:
checked: {Boolean} 是否选中
_e_: {Event} Dom 事件对象		Functionfunc.noop
onMouseEnter鼠标进入enter事件

签名:
Function(e: Event) => void
参数:
_e_: {Event} Dom 事件对象		Functionfunc.noop
onMouseLeave鼠标离开Leave事件

签名:
Function(e: Event) => void
参数:
_e_: {Event} Dom 事件对象		Functionfunc.noop
\n

Checkbox.Group#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
disabled整体禁用Boolean-
dataSource可选项列表, 数据项可为 String 或者 Object, 如 ['apple', 'pear', 'orange'] 或者 [{value: 'apple', label: '苹果',}, {value: 'pear', label: '梨'}, {value: 'orange', label: '橙子'}]Array<any>[]
value被选中的值列表Array/String/Number-
defaultValue默认被选中的值列表Array/String/Number-
children通过子元素方式设置内部 checkboxArray<ReactElement>-
onChange选中值改变时的事件

签名:
Function(value: Array, e: Event) => void
参数:
value: {Array} 选中项列表
_e_: {Event} Dom 事件对象		Function() => {}
itemDirection子项目的排列方式
- hoz: 水平排列 (default)
- ver: 垂直排列

可选值:
'hoz', 'ver'		Enum'hoz'
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n
按键说明
SPACE选择或取消当前项
\n"} \ No newline at end of file diff --git a/compiled_docs/collapse/demo/accessibility.en-us.md b/compiled_docs/collapse/demo/accessibility.en-us.md new file mode 100644 index 0000000000..67ef2ec1ac --- /dev/null +++ b/compiled_docs/collapse/demo/accessibility.en-us.md @@ -0,0 +1 @@ +{"title":"Accessibility","meta":{"title":"Accessibility","description":"\n

To Support accessibility, you shoud assign an id prop to Collapse and it will generate id for Panels. or you can assign an id prop to Panel to overwrite generated id.

\n","order":"5"},"codes":{"jsx":"import { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nReactDOM.render(\n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a\n certain time range\n
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas\n
    • \n
\n \n\n, mountNode);\n"},"body":"\n````jsx\nimport { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nReactDOM.render(\n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a\n certain time range\n
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas\n
    • \n
\n \n\n, mountNode);\n````","html":"
import { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nReactDOM.render(<Collapse id=\"collapse-accessibility\">\n    <Panel\n        id=\"panel-accessibility\"\n        title=\"There is a long title, you can set the multiTitle to multi line display, the associated configuration properties and a single height is not the same, the specific configuration platform configuration can be configured.\">\n        <ul>\n            <li>Promotions are marketing campaigns ran by Marketplace</li>\n            <li>Participate to sale your products during that promotion and make a profit</li>\n        </ul>\n    </Panel>\n    <Panel title=\"What are Promotion Products?\">\n        <ul>\n            <li>Promotion Products is a service that helps you to promote products you list on Marketplace during a\n                certain time range\n            </li>\n            <li>You can choose which products should be available for the promotion</li>\n            <li>Not all Products of you will be available, because Promotions will only attract certain Product areas\n            </li>\n        </ul>\n    </Panel>\n\n</Collapse>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/collapse/demo/accessibility.md b/compiled_docs/collapse/demo/accessibility.md new file mode 100644 index 0000000000..a3bffc8e44 --- /dev/null +++ b/compiled_docs/collapse/demo/accessibility.md @@ -0,0 +1 @@ +{"title":"无障碍","meta":{"title":"无障碍","description":"\n

组件内置了部分支持无障碍, 但是额外需要开发者手动事情才能完整支持无障碍: 给Collapse传入一个id, 组件会根据Collapse的id自动给每一个Panel生成Id。如果你想指定Panel的Id也可以, 给某个Panel传入Id属性,就会覆盖根据CollapseId生成的Id。

\n","order":"5"},"codes":{"jsx":"import { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nReactDOM.render(\n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a\n certain time range\n
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas\n
    • \n
\n \n\n, mountNode);\n"},"body":"\n\n````jsx\nimport { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nReactDOM.render(\n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a\n certain time range\n
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas\n
    • \n
\n \n\n, mountNode);\n````","html":"
import { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nReactDOM.render(<Collapse id=\"collapse-accessibility\">\n    <Panel\n        id=\"panel-accessibility\"\n        title=\"There is a long title, you can set the multiTitle to multi line display, the associated configuration properties and a single height is not the same, the specific configuration platform configuration can be configured.\">\n        <ul>\n            <li>Promotions are marketing campaigns ran by Marketplace</li>\n            <li>Participate to sale your products during that promotion and make a profit</li>\n        </ul>\n    </Panel>\n    <Panel title=\"What are Promotion Products?\">\n        <ul>\n            <li>Promotion Products is a service that helps you to promote products you list on Marketplace during a\n                certain time range\n            </li>\n            <li>You can choose which products should be available for the promotion</li>\n            <li>Not all Products of you will be available, because Promotions will only attract certain Product areas\n            </li>\n        </ul>\n    </Panel>\n\n</Collapse>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/collapse/demo/accordion.en-us.md b/compiled_docs/collapse/demo/accordion.en-us.md new file mode 100644 index 0000000000..1e051d8285 --- /dev/null +++ b/compiled_docs/collapse/demo/accordion.en-us.md @@ -0,0 +1 @@ +{"title":"Accordion","meta":{"title":"Accordion","description":"\n

Accordion mode, you can only open at most one panel.

\n","order":"2"},"codes":{"jsx":"import { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nReactDOM.render(\n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a\n certain time range\n
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas\n
    • \n
\n \n \n
    \n
  • The Promotion requires a certain price to make sure that our customers are attracted
    • \n
\n \n \n Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo\n Stock value you commit to have this amount of stock available while Promotion is active.\n \n, mountNode);\n"},"body":"\n````jsx\nimport { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nReactDOM.render(\n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a\n certain time range\n
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas\n
    • \n
\n \n \n
    \n
  • The Promotion requires a certain price to make sure that our customers are attracted
    • \n
\n \n \n Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo\n Stock value you commit to have this amount of stock available while Promotion is active.\n \n, mountNode);\n````","html":"
import { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nReactDOM.render(<Collapse accordion>\n    <Panel\n        title=\"There is a long title, you can set the multiTitle to multi line display, the associated configuration properties and a single height is not the same, the specific configuration platform configuration can be configured.\">\n        <ul>\n            <li>Promotions are marketing campaigns ran by Marketplace</li>\n            <li>Participate to sale your products during that promotion and make a profit</li>\n        </ul>\n    </Panel>\n    <Panel title=\"What are Promotion Products?\">\n        <ul>\n            <li>Promotion Products is a service that helps you to promote products you list on Marketplace during a\n                certain time range\n            </li>\n            <li>You can choose which products should be available for the promotion</li>\n            <li>Not all Products of you will be available, because Promotions will only attract certain Product areas\n            </li>\n        </ul>\n    </Panel>\n    <Panel title=\"Why can i not submit a higher price?\">\n        <ul>\n            <li>The Promotion requires a certain price to make sure that our customers are attracted</li>\n        </ul>\n    </Panel>\n    <Panel title=\"What is Promo Stock?\">\n        Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo\n        Stock value you commit to have this amount of stock available while Promotion is active.\n    </Panel>\n</Collapse>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/collapse/demo/accordion.md b/compiled_docs/collapse/demo/accordion.md new file mode 100644 index 0000000000..ec8865164d --- /dev/null +++ b/compiled_docs/collapse/demo/accordion.md @@ -0,0 +1 @@ +{"title":"手风琴","meta":{"title":"手风琴","description":"\n

手风琴单例模式，每次只打开一个Panel。

\n","order":"2"},"codes":{"jsx":"import { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nReactDOM.render(\n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a\n certain time range\n
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas\n
    • \n
\n \n \n
    \n
  • The Promotion requires a certain price to make sure that our customers are attracted
    • \n
\n \n \n Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo\n Stock value you commit to have this amount of stock available while Promotion is active.\n \n, mountNode);\n"},"body":"\n\n````jsx\nimport { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nReactDOM.render(\n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a\n certain time range\n
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas\n
    • \n
\n \n \n
    \n
  • The Promotion requires a certain price to make sure that our customers are attracted
    • \n
\n \n \n Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo\n Stock value you commit to have this amount of stock available while Promotion is active.\n \n, mountNode);\n````","html":"
import { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nReactDOM.render(<Collapse accordion>\n    <Panel\n        title=\"There is a long title, you can set the multiTitle to multi line display, the associated configuration properties and a single height is not the same, the specific configuration platform configuration can be configured.\">\n        <ul>\n            <li>Promotions are marketing campaigns ran by Marketplace</li>\n            <li>Participate to sale your products during that promotion and make a profit</li>\n        </ul>\n    </Panel>\n    <Panel title=\"What are Promotion Products?\">\n        <ul>\n            <li>Promotion Products is a service that helps you to promote products you list on Marketplace during a\n                certain time range\n            </li>\n            <li>You can choose which products should be available for the promotion</li>\n            <li>Not all Products of you will be available, because Promotions will only attract certain Product areas\n            </li>\n        </ul>\n    </Panel>\n    <Panel title=\"Why can i not submit a higher price?\">\n        <ul>\n            <li>The Promotion requires a certain price to make sure that our customers are attracted</li>\n        </ul>\n    </Panel>\n    <Panel title=\"What is Promo Stock?\">\n        Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo\n        Stock value you commit to have this amount of stock available while Promotion is active.\n    </Panel>\n</Collapse>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/collapse/demo/basic.en-us.md b/compiled_docs/collapse/demo/basic.en-us.md new file mode 100644 index 0000000000..ddf10d8d75 --- /dev/null +++ b/compiled_docs/collapse/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic Usage","meta":{"title":"Basic Usage","description":"\n","order":"0"},"codes":{"jsx":"import { Collapse, Radio } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\nconst RadioGroup = Radio.Group;\n\nconst RTL = 'rtl';\nconst LTR = 'ltr';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n rtl: false\n };\n this.handleDirectionChange = this.handleDirectionChange.bind(this);\n }\n\n handleDirectionChange(v) {\n this.setState({\n rtl: !this.state.rtl\n });\n }\n\n render() {\n return (
\n \n \n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas
    • \n
\n \n \n
    \n
  • The Promotion requires a certain price to make sure that our customers are attracted
    • \n
\n \n \n Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n \n \n
);\n }\n}\n\nReactDOM.render(\n ,\n mountNode);\n"},"body":"\n````jsx\nimport { Collapse, Radio } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\nconst RadioGroup = Radio.Group;\n\nconst RTL = 'rtl';\nconst LTR = 'ltr';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n rtl: false\n };\n this.handleDirectionChange = this.handleDirectionChange.bind(this);\n }\n\n handleDirectionChange(v) {\n this.setState({\n rtl: !this.state.rtl\n });\n }\n\n render() {\n return (
\n \n \n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas
    • \n
\n \n \n
    \n
  • The Promotion requires a certain price to make sure that our customers are attracted
    • \n
\n \n \n Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n \n \n
);\n }\n}\n\nReactDOM.render(\n ,\n mountNode);\n````","html":"
import { Collapse, Radio } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\nconst RadioGroup = Radio.Group;\n\nconst RTL = 'rtl';\nconst LTR = 'ltr';\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            rtl: false\n        };\n        this.handleDirectionChange = this.handleDirectionChange.bind(this);\n    }\n\n    handleDirectionChange(v) {\n        this.setState({\n            rtl: !this.state.rtl\n        });\n    }\n\n    render() {\n        return (<div>\n            <RadioGroup dataSource={['ltr', 'rtl']} value={this.state.rtl ? 'rtl' : 'ltr'} onChange={this.handleDirectionChange} />\n            <Collapse rtl={this.state.rtl}>\n                <Panel title=\"simple tile\">\n                    <ul>\n                        <li>Promotions are marketing campaigns ran by Marketplace</li>\n                        <li>Participate to sale your products during that promotion and make a profit</li>\n                    </ul>\n                </Panel>\n                <Panel title=\"What are Promotion Products?\">\n                    <ul>\n                        <li>Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range</li>\n                        <li>You can choose which products should be available for the promotion</li>\n                        <li>Not all Products of you will be available, because Promotions will only attract certain Product areas</li>\n                    </ul>\n                </Panel>\n                <Panel title=\"Why can i not submit a higher price?\">\n                    <ul>\n                        <li>The Promotion requires a certain price to make sure that our customers are attracted</li>\n                    </ul>\n                </Panel>\n                <Panel title=\"What is Promo Stock?\">\n                    Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n                </Panel>\n            </Collapse>\n        </div>);\n    }\n}\n\nReactDOM.render(\n    <App />,\n    mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/collapse/demo/basic.md b/compiled_docs/collapse/demo/basic.md new file mode 100644 index 0000000000..0d7dee23dd --- /dev/null +++ b/compiled_docs/collapse/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n","order":"0"},"codes":{"jsx":"import { Collapse, Radio } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\nconst RadioGroup = Radio.Group;\n\nconst RTL = 'rtl';\nconst LTR = 'ltr';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n rtl: false\n };\n this.handleDirectionChange = this.handleDirectionChange.bind(this);\n }\n\n handleDirectionChange(v) {\n this.setState({\n rtl: !this.state.rtl\n });\n }\n\n render() {\n return (
\n \n \n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas
    • \n
\n \n \n
    \n
  • The Promotion requires a certain price to make sure that our customers are attracted
    • \n
\n \n \n Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n \n \n
);\n }\n}\n\nReactDOM.render(\n ,\n mountNode);\n"},"body":"\n\n````jsx\nimport { Collapse, Radio } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\nconst RadioGroup = Radio.Group;\n\nconst RTL = 'rtl';\nconst LTR = 'ltr';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n rtl: false\n };\n this.handleDirectionChange = this.handleDirectionChange.bind(this);\n }\n\n handleDirectionChange(v) {\n this.setState({\n rtl: !this.state.rtl\n });\n }\n\n render() {\n return (
\n \n \n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas
    • \n
\n \n \n
    \n
  • The Promotion requires a certain price to make sure that our customers are attracted
    • \n
\n \n \n Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n \n \n
);\n }\n}\n\nReactDOM.render(\n ,\n mountNode);\n````","html":"
import { Collapse, Radio } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\nconst RadioGroup = Radio.Group;\n\nconst RTL = 'rtl';\nconst LTR = 'ltr';\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            rtl: false\n        };\n        this.handleDirectionChange = this.handleDirectionChange.bind(this);\n    }\n\n    handleDirectionChange(v) {\n        this.setState({\n            rtl: !this.state.rtl\n        });\n    }\n\n    render() {\n        return (<div>\n            <RadioGroup dataSource={['ltr', 'rtl']} value={this.state.rtl ? 'rtl' : 'ltr'} onChange={this.handleDirectionChange} />\n            <Collapse rtl={this.state.rtl}>\n                <Panel title=\"simple tile\">\n                    <ul>\n                        <li>Promotions are marketing campaigns ran by Marketplace</li>\n                        <li>Participate to sale your products during that promotion and make a profit</li>\n                    </ul>\n                </Panel>\n                <Panel title=\"What are Promotion Products?\">\n                    <ul>\n                        <li>Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range</li>\n                        <li>You can choose which products should be available for the promotion</li>\n                        <li>Not all Products of you will be available, because Promotions will only attract certain Product areas</li>\n                    </ul>\n                </Panel>\n                <Panel title=\"Why can i not submit a higher price?\">\n                    <ul>\n                        <li>The Promotion requires a certain price to make sure that our customers are attracted</li>\n                    </ul>\n                </Panel>\n                <Panel title=\"What is Promo Stock?\">\n                    Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n                </Panel>\n            </Collapse>\n        </div>);\n    }\n}\n\nReactDOM.render(\n    <App />,\n    mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/collapse/demo/datasource.en-us.md b/compiled_docs/collapse/demo/datasource.en-us.md new file mode 100644 index 0000000000..c61d709c46 --- /dev/null +++ b/compiled_docs/collapse/demo/datasource.en-us.md @@ -0,0 +1 @@ +{"title":"Data Source","meta":{"title":"Data Source","description":"\n","order":"1"},"codes":{"jsx":"import { Collapse } from '@alifd/next';\n\nconst list = [\n {\n title: 'Well, hello there',\n content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',\n disabled: true\n },\n {\n title: 'Gigantomaniac Monster Text, very long, much width, wow',\n content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'\n },\n {\n title: 'Generic Title',\n content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'\n },\n {\n title: 'Login Infomation',\n content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'\n }\n];\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Collapse } from '@alifd/next';\n\nconst list = [\n {\n title: 'Well, hello there',\n content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',\n disabled: true\n },\n {\n title: 'Gigantomaniac Monster Text, very long, much width, wow',\n content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'\n },\n {\n title: 'Generic Title',\n content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'\n },\n {\n title: 'Login Infomation',\n content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'\n }\n];\n\nReactDOM.render(, mountNode);\n````","html":"
import { Collapse } from '@alifd/next';\n\nconst list = [\n    {\n        title: 'Well, hello there',\n        content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',\n        disabled: true\n    },\n    {\n        title: 'Gigantomaniac Monster Text, very long, much width, wow',\n        content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'\n    },\n    {\n        title: 'Generic Title',\n        content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'\n    },\n    {\n        title: 'Login Infomation',\n        content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'\n    }\n];\n\nReactDOM.render(<Collapse dataSource={list}/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/collapse/demo/datasource.md b/compiled_docs/collapse/demo/datasource.md new file mode 100644 index 0000000000..6319533ba2 --- /dev/null +++ b/compiled_docs/collapse/demo/datasource.md @@ -0,0 +1 @@ +{"title":"数据","meta":{"title":"数据","description":"\n","order":"1"},"codes":{"jsx":"import { Collapse } from '@alifd/next';\n\nconst list = [\n {\n title: 'Well, hello there',\n content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',\n disabled: true\n },\n {\n title: 'Gigantomaniac Monster Text, very long, much width, wow',\n content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'\n },\n {\n title: 'Generic Title',\n content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'\n },\n {\n title: 'Login Infomation',\n content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'\n }\n];\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Collapse } from '@alifd/next';\n\nconst list = [\n {\n title: 'Well, hello there',\n content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',\n disabled: true\n },\n {\n title: 'Gigantomaniac Monster Text, very long, much width, wow',\n content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'\n },\n {\n title: 'Generic Title',\n content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'\n },\n {\n title: 'Login Infomation',\n content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'\n }\n];\n\nReactDOM.render(, mountNode);\n````","html":"
import { Collapse } from '@alifd/next';\n\nconst list = [\n    {\n        title: 'Well, hello there',\n        content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',\n        disabled: true\n    },\n    {\n        title: 'Gigantomaniac Monster Text, very long, much width, wow',\n        content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'\n    },\n    {\n        title: 'Generic Title',\n        content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'\n    },\n    {\n        title: 'Login Infomation',\n        content: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'\n    }\n];\n\nReactDOM.render(<Collapse dataSource={list}/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/collapse/demo/disabled.en-us.md b/compiled_docs/collapse/demo/disabled.en-us.md new file mode 100644 index 0000000000..c8f0d1b373 --- /dev/null +++ b/compiled_docs/collapse/demo/disabled.en-us.md @@ -0,0 +1 @@ +{"title":"disable","meta":{"title":"disable","description":"\n","order":"3"},"codes":{"jsx":"import { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nReactDOM.render(\n
\n \n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas
    • \n
\n \n \n
    \n
  • The Promotion requires a certain price to make sure that our customers are attracted
    • \n
\n \n \n Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n \n \n
\n \n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas
    • \n
\n \n \n
    \n
  • The Promotion requires a certain price to make sure that our customers are attracted
    • \n
\n \n \n Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n \n \n
,\n mountNode);\n"},"body":"\n````jsx\nimport { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nReactDOM.render(\n
\n \n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas
    • \n
\n \n \n
    \n
  • The Promotion requires a certain price to make sure that our customers are attracted
    • \n
\n \n \n Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n \n \n
\n \n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas
    • \n
\n \n \n
    \n
  • The Promotion requires a certain price to make sure that our customers are attracted
    • \n
\n \n \n Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n \n \n
,\n mountNode);\n````","html":"
import { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nReactDOM.render(\n    <div>\n        <Collapse disabled>\n            <Panel title=\"disable collapse\">\n                <ul>\n                    <li>Promotions are marketing campaigns ran by Marketplace</li>\n                    <li>Participate to sale your products during that promotion and make a profit</li>\n                </ul>\n            </Panel>\n            <Panel title=\"disable collapse\">\n                <ul>\n                    <li>Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range</li>\n                    <li>You can choose which products should be available for the promotion</li>\n                    <li>Not all Products of you will be available, because Promotions will only attract certain Product areas</li>\n                </ul>\n            </Panel>\n            <Panel title=\"disable collapse\">\n                <ul>\n                    <li>The Promotion requires a certain price to make sure that our customers are attracted</li>\n                </ul>\n            </Panel>\n            <Panel title=\"disable collapse\">\n                Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n            </Panel>\n        </Collapse>\n        <br />\n        <Collapse>\n            <Panel title=\"simple title(disabled)\" disabled>\n                <ul>\n                    <li>Promotions are marketing campaigns ran by Marketplace</li>\n                    <li>Participate to sale your products during that promotion and make a profit</li>\n                </ul>\n            </Panel>\n            <Panel title=\"What are Promotion Products?(disabled)\" disabled>\n                <ul>\n                    <li>Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range</li>\n                    <li>You can choose which products should be available for the promotion</li>\n                    <li>Not all Products of you will be available, because Promotions will only attract certain Product areas</li>\n                </ul>\n            </Panel>\n            <Panel title=\"Why can i not submit a higher price?\">\n                <ul>\n                    <li>The Promotion requires a certain price to make sure that our customers are attracted</li>\n                </ul>\n            </Panel>\n            <Panel title=\"What is Promo Stock?\">\n                Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n            </Panel>\n        </Collapse>\n    </div>,\n    mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/collapse/demo/disabled.md b/compiled_docs/collapse/demo/disabled.md new file mode 100644 index 0000000000..bc5f6fe4a9 --- /dev/null +++ b/compiled_docs/collapse/demo/disabled.md @@ -0,0 +1 @@ +{"title":"禁用","meta":{"title":"禁用","description":"\n","order":"3"},"codes":{"jsx":"import { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nReactDOM.render(\n
\n \n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas
    • \n
\n \n \n
    \n
  • The Promotion requires a certain price to make sure that our customers are attracted
    • \n
\n \n \n Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n \n \n
\n \n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas
    • \n
\n \n \n
    \n
  • The Promotion requires a certain price to make sure that our customers are attracted
    • \n
\n \n \n Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n \n \n
,\n mountNode);\n"},"body":"\n\n````jsx\nimport { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nReactDOM.render(\n
\n \n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas
    • \n
\n \n \n
    \n
  • The Promotion requires a certain price to make sure that our customers are attracted
    • \n
\n \n \n Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n \n \n
\n \n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas
    • \n
\n \n \n
    \n
  • The Promotion requires a certain price to make sure that our customers are attracted
    • \n
\n \n \n Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n \n \n
,\n mountNode);\n````","html":"
import { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nReactDOM.render(\n    <div>\n        <Collapse disabled>\n            <Panel title=\"disable collapse\">\n                <ul>\n                    <li>Promotions are marketing campaigns ran by Marketplace</li>\n                    <li>Participate to sale your products during that promotion and make a profit</li>\n                </ul>\n            </Panel>\n            <Panel title=\"disable collapse\">\n                <ul>\n                    <li>Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range</li>\n                    <li>You can choose which products should be available for the promotion</li>\n                    <li>Not all Products of you will be available, because Promotions will only attract certain Product areas</li>\n                </ul>\n            </Panel>\n            <Panel title=\"disable collapse\">\n                <ul>\n                    <li>The Promotion requires a certain price to make sure that our customers are attracted</li>\n                </ul>\n            </Panel>\n            <Panel title=\"disable collapse\">\n                Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n            </Panel>\n        </Collapse>\n        <br />\n        <Collapse>\n            <Panel title=\"simple title(disabled)\" disabled>\n                <ul>\n                    <li>Promotions are marketing campaigns ran by Marketplace</li>\n                    <li>Participate to sale your products during that promotion and make a profit</li>\n                </ul>\n            </Panel>\n            <Panel title=\"What are Promotion Products?(disabled)\" disabled>\n                <ul>\n                    <li>Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range</li>\n                    <li>You can choose which products should be available for the promotion</li>\n                    <li>Not all Products of you will be available, because Promotions will only attract certain Product areas</li>\n                </ul>\n            </Panel>\n            <Panel title=\"Why can i not submit a higher price?\">\n                <ul>\n                    <li>The Promotion requires a certain price to make sure that our customers are attracted</li>\n                </ul>\n            </Panel>\n            <Panel title=\"What is Promo Stock?\">\n                Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n            </Panel>\n        </Collapse>\n    </div>,\n    mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/collapse/demo/event.en-us.md b/compiled_docs/collapse/demo/event.en-us.md new file mode 100644 index 0000000000..adc4e1dd14 --- /dev/null +++ b/compiled_docs/collapse/demo/event.en-us.md @@ -0,0 +1 @@ +{"title":"Event","meta":{"title":"Event","description":"\n"},"codes":{"jsx":"import { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nclass Demo extends React.Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n expandedKeys: []\n };\n }\n\n onExpand(expandedKeys) {\n this.setState({\n expandedKeys\n });\n }\n\n onClick(key) {\n console.log('clicked', key);\n }\n render() {\n return (\n \n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas
    • \n
\n \n \n
    \n
  • The Promotion requires a certain price to make sure that our customers are attracted
    • \n
\n \n \n Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nclass Demo extends React.Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n expandedKeys: []\n };\n }\n\n onExpand(expandedKeys) {\n this.setState({\n expandedKeys\n });\n }\n\n onClick(key) {\n console.log('clicked', key);\n }\n render() {\n return (\n \n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas
    • \n
\n \n \n
    \n
  • The Promotion requires a certain price to make sure that our customers are attracted
    • \n
\n \n \n Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nclass Demo extends React.Component {\n    constructor(props, context) {\n        super(props, context);\n        this.state = {\n            expandedKeys: []\n        };\n    }\n\n    onExpand(expandedKeys) {\n        this.setState({\n            expandedKeys\n        });\n    }\n\n    onClick(key) {\n        console.log('clicked', key);\n    }\n    render() {\n        return (\n            <Collapse onExpand={this.onExpand.bind(this)} expandedKeys={this.state.expandedKeys} >\n                <Panel title=\"simple tile\" onClick={this.onClick}>\n                    <ul>\n                        <li>Promotions are marketing campaigns ran by Marketplace</li>\n                        <li>Participate to sale your products during that promotion and make a profit</li>\n                    </ul>\n                </Panel>\n                <Panel title=\"What are Promotion Products?\">\n                    <ul>\n                        <li>Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range</li>\n                        <li>You can choose which products should be available for the promotion</li>\n                        <li>Not all Products of you will be available, because Promotions will only attract certain Product areas</li>\n                    </ul>\n                </Panel>\n                <Panel title=\"Why can i not submit a higher price?\">\n                    <ul>\n                        <li>The Promotion requires a certain price to make sure that our customers are attracted</li>\n                    </ul>\n                </Panel>\n                <Panel title=\"What is Promo Stock?\">\n                    Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n                </Panel>\n            </Collapse>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/collapse/demo/event.md b/compiled_docs/collapse/demo/event.md new file mode 100644 index 0000000000..5a9f0d8cf7 --- /dev/null +++ b/compiled_docs/collapse/demo/event.md @@ -0,0 +1 @@ +{"title":"事件","meta":{"title":"事件","description":"\n"},"codes":{"jsx":"import { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nclass Demo extends React.Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n expandedKeys: []\n };\n }\n\n onExpand(expandedKeys) {\n this.setState({\n expandedKeys\n });\n }\n\n onClick(key) {\n console.log('clicked', key);\n }\n render() {\n return (\n \n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas
    • \n
\n \n \n
    \n
  • The Promotion requires a certain price to make sure that our customers are attracted
    • \n
\n \n \n Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nclass Demo extends React.Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n expandedKeys: []\n };\n }\n\n onExpand(expandedKeys) {\n this.setState({\n expandedKeys\n });\n }\n\n onClick(key) {\n console.log('clicked', key);\n }\n render() {\n return (\n \n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas
    • \n
\n \n \n
    \n
  • The Promotion requires a certain price to make sure that our customers are attracted
    • \n
\n \n \n Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nclass Demo extends React.Component {\n    constructor(props, context) {\n        super(props, context);\n        this.state = {\n            expandedKeys: []\n        };\n    }\n\n    onExpand(expandedKeys) {\n        this.setState({\n            expandedKeys\n        });\n    }\n\n    onClick(key) {\n        console.log('clicked', key);\n    }\n    render() {\n        return (\n            <Collapse onExpand={this.onExpand.bind(this)} expandedKeys={this.state.expandedKeys} >\n                <Panel title=\"simple tile\" onClick={this.onClick}>\n                    <ul>\n                        <li>Promotions are marketing campaigns ran by Marketplace</li>\n                        <li>Participate to sale your products during that promotion and make a profit</li>\n                    </ul>\n                </Panel>\n                <Panel title=\"What are Promotion Products?\">\n                    <ul>\n                        <li>Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range</li>\n                        <li>You can choose which products should be available for the promotion</li>\n                        <li>Not all Products of you will be available, because Promotions will only attract certain Product areas</li>\n                    </ul>\n                </Panel>\n                <Panel title=\"Why can i not submit a higher price?\">\n                    <ul>\n                        <li>The Promotion requires a certain price to make sure that our customers are attracted</li>\n                    </ul>\n                </Panel>\n                <Panel title=\"What is Promo Stock?\">\n                    Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n                </Panel>\n            </Collapse>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/collapse/demo/nested.en-us.md b/compiled_docs/collapse/demo/nested.en-us.md new file mode 100644 index 0000000000..d8c92d5bc3 --- /dev/null +++ b/compiled_docs/collapse/demo/nested.en-us.md @@ -0,0 +1 @@ +{"title":"Nested Collapse","meta":{"title":"Nested Collapse","description":"\n","order":"6"},"codes":{"jsx":"import { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nReactDOM.render(\n
\n \n \n \n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas
    • \n
\n \n \n
    \n
  • The Promotion requires a certain price to make sure that our customers are attracted
    • \n
\n \n \n Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n \n \n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas
    • \n
\n \n\n \n
,\n mountNode);\n"},"body":"\n````jsx\nimport { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nReactDOM.render(\n
\n \n \n \n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas
    • \n
\n \n \n
    \n
  • The Promotion requires a certain price to make sure that our customers are attracted
    • \n
\n \n \n Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n \n \n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas
    • \n
\n \n\n \n
,\n mountNode);\n````","html":"
import { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nReactDOM.render(\n    <div>\n        <Collapse>\n            <Panel title=\"simple tile\">\n                <Collapse>\n                    <Panel title=\"simple tile\">\n                        <ul>\n                            <li>Promotions are marketing campaigns ran by Marketplace</li>\n                            <li>Participate to sale your products during that promotion and make a profit</li>\n                        </ul>\n                    </Panel>\n                    <Panel title=\"What are Promotion Products?\">\n                        <ul>\n                            <li>Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range</li>\n                            <li>You can choose which products should be available for the promotion</li>\n                            <li>Not all Products of you will be available, because Promotions will only attract certain Product areas</li>\n                        </ul>\n                    </Panel>\n                    <Panel title=\"Why can i not submit a higher price?\">\n                        <ul>\n                            <li>The Promotion requires a certain price to make sure that our customers are attracted</li>\n                        </ul>\n                    </Panel>\n                    <Panel title=\"What is Promo Stock?\">\n                        Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n                    </Panel>\n                </Collapse>\n            </Panel>\n            <Panel title=\"What are Promotion Products?\">\n                <ul>\n                    <li>Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range</li>\n                    <li>You can choose which products should be available for the promotion</li>\n                    <li>Not all Products of you will be available, because Promotions will only attract certain Product areas</li>\n                </ul>\n            </Panel>\n\n        </Collapse>\n    </div>,\n    mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/collapse/demo/nested.md b/compiled_docs/collapse/demo/nested.md new file mode 100644 index 0000000000..c912f0a817 --- /dev/null +++ b/compiled_docs/collapse/demo/nested.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n","order":"6"},"codes":{"jsx":"import { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nReactDOM.render(\n
\n \n \n \n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas
    • \n
\n \n \n
    \n
  • The Promotion requires a certain price to make sure that our customers are attracted
    • \n
\n \n \n Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n \n \n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas
    • \n
\n \n\n \n
,\n mountNode);\n"},"body":"\n\n````jsx\nimport { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nReactDOM.render(\n
\n \n \n \n \n
    \n
  • Promotions are marketing campaigns ran by Marketplace
    • \n
  • Participate to sale your products during that promotion and make a profit
    • \n
\n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas
    • \n
\n \n \n
    \n
  • The Promotion requires a certain price to make sure that our customers are attracted
    • \n
\n \n \n Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n \n \n \n \n
    \n
  • Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range
    • \n
  • You can choose which products should be available for the promotion
    • \n
  • Not all Products of you will be available, because Promotions will only attract certain Product areas
    • \n
\n \n\n \n
,\n mountNode);\n````","html":"
import { Collapse } from '@alifd/next';\n\nconst Panel = Collapse.Panel;\n\nReactDOM.render(\n    <div>\n        <Collapse>\n            <Panel title=\"simple tile\">\n                <Collapse>\n                    <Panel title=\"simple tile\">\n                        <ul>\n                            <li>Promotions are marketing campaigns ran by Marketplace</li>\n                            <li>Participate to sale your products during that promotion and make a profit</li>\n                        </ul>\n                    </Panel>\n                    <Panel title=\"What are Promotion Products?\">\n                        <ul>\n                            <li>Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range</li>\n                            <li>You can choose which products should be available for the promotion</li>\n                            <li>Not all Products of you will be available, because Promotions will only attract certain Product areas</li>\n                        </ul>\n                    </Panel>\n                    <Panel title=\"Why can i not submit a higher price?\">\n                        <ul>\n                            <li>The Promotion requires a certain price to make sure that our customers are attracted</li>\n                        </ul>\n                    </Panel>\n                    <Panel title=\"What is Promo Stock?\">\n                        Promo Stock is the criteria needed to be followed to be able to join Promotion. With setting particular Promo Stock value you commit to have this amount of stock available while Promotion is active.\n                    </Panel>\n                </Collapse>\n            </Panel>\n            <Panel title=\"What are Promotion Products?\">\n                <ul>\n                    <li>Promotion Products is a service that helps you to promote products you list on Marketplace during a certain time range</li>\n                    <li>You can choose which products should be available for the promotion</li>\n                    <li>Not all Products of you will be available, because Promotions will only attract certain Product areas</li>\n                </ul>\n            </Panel>\n\n        </Collapse>\n    </div>,\n    mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/collapse/index.en-us.md b/compiled_docs/collapse/index.en-us.md new file mode 100644 index 0000000000..9a1ddb55a4 --- /dev/null +++ b/compiled_docs/collapse/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Guide#

When to use#

When some earas may toggle between collapse state and expand state.

\n

API#

","api":"

Collapse#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault Value
dataSourcedata modelArray-
defaultExpandedKeysdefault expand panel keysArray-
expandedKeysexpand panel keysArray-
onExpandcallback when panel state changes

signature:
Function() => void		Functionfunc.noop
disableddisable all panelBoolean-
accordionaccordion mode, you can only open at most one panelBooleanfalse
\n

Collapse.Panel#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault Value
disableddisable this panelBoolean-
titlepanel titleReactNode-
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyBoardDescripiton
Tabnavigate to the next collapse panel
Spacetoggle expanded
\n"} \ No newline at end of file diff --git a/compiled_docs/collapse/index.md b/compiled_docs/collapse/index.md new file mode 100644 index 0000000000..f86a55526b --- /dev/null +++ b/compiled_docs/collapse/index.md @@ -0,0 +1 @@ +{"meta":"

开发指南#

何时使用#

可以折叠/展开的内容区域。

\n

API#

","api":"

Collapse#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
dataSource使用数据模型构建Array-
defaultExpandedKeys默认展开keysArray-
expandedKeys受控展开keysArray-
onExpand展开状态发升变化时候的回调

签名:
Function() => void		Functionfunc.noop
disabled所有禁用Boolean-
accordion手风琴模式，一次只能打开一个Booleanfalse
\n

Collapse.Panel#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
disabled是否禁止用户操作Boolean-
title标题ReactNode-
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
按键说明
Tab切换到下一个collapse panel
Space切换collapse的折叠状态
\n"} \ No newline at end of file diff --git a/compiled_docs/components.json b/compiled_docs/components.json new file mode 100644 index 0000000000..21d84c814e --- /dev/null +++ b/compiled_docs/components.json @@ -0,0 +1 @@ +[{"english":"Affix","chinese":"固钉","family":"Util"},{"english":"Animate","chinese":"动画","family":"Util"},{"english":"Badge","chinese":"徽标数","family":"DataDisplay"},{"english":"Balloon","chinese":"气泡提示","family":"Feedback"},{"english":"Breadcrumb","chinese":"面包屑","family":"Navigation"},{"english":"Button","chinese":"按钮","family":"General"},{"english":"Calendar","chinese":"日历","family":"DataDisplay"},{"english":"Card","chinese":"卡片","family":"DataDisplay"},{"english":"Cascader","chinese":"级联","family":"DataDisplay"},{"english":"CascaderSelect","chinese":"级联选择","family":"DataEntry"},{"english":"Checkbox","chinese":"复选按钮","family":"DataEntry"},{"english":"Collapse","chinese":"折叠面板","family":"DataDisplay"},{"english":"ConfigProvider","chinese":"全局配置 Next 组件","family":"Util"},{"english":"DatePicker","chinese":"日期选择框","family":"DataEntry"},{"english":"Dialog","chinese":"弹窗","family":"Feedback"},{"english":"Dropdown","chinese":"下拉菜单","family":"Util"},{"english":"Field","chinese":"表单辅助工具","family":"DataEntry"},{"english":"Form","chinese":"表单","family":"DataEntry"},{"english":"Grid","chinese":"栅格","family":"General"},{"english":"Icon","chinese":"图标","family":"General"},{"english":"Input","chinese":"输入框","family":"DataEntry"},{"english":"Loading","chinese":"加载","family":"Feedback"},{"english":"Menu","chinese":"菜单","family":"DataDisplay"},{"english":"MenuButton","chinese":"菜单按钮","family":"General"},{"english":"Message","chinese":"信息提示","family":"Feedback"},{"english":"Nav","chinese":"导航","family":"Navigation"},{"english":"NumberPicker","chinese":"数字输入框","family":"DataEntry"},{"english":"Overlay","chinese":"弹层","family":"Util"},{"english":"Pagination","chinese":"翻页器","family":"Navigation"},{"english":"Paragraph","chinese":"段落","family":"General"},{"english":"Progress","chinese":"进度指示器","family":"DataDisplay"},{"english":"Radio","chinese":"单选框","family":"DataEntry"},{"english":"Range","chinese":"区段选择器","family":"DataEntry"},{"english":"Rating","chinese":"评分","family":"DataEntry"},{"english":"Search","chinese":"搜索","family":"DataEntry"},{"english":"Select","chinese":"选择器","family":"DataEntry"},{"english":"Slider","chinese":"图片轮播","family":"DataDisplay"},{"english":"SplitButton","chinese":"分隔按钮","family":"General"},{"english":"Step","chinese":"步骤","family":"Navigation"},{"english":"Switch","chinese":"开关组件","family":"DataEntry"},{"english":"Tab","chinese":"选项卡","family":"Navigation"},{"english":"Table","chinese":"表格","family":"DataDisplay"},{"english":"Tag","chinese":"标签","family":"DataDisplay"},{"english":"TimePicker","chinese":"时间选择框","family":"DataEntry"},{"english":"Timeline","chinese":"时间轴","family":"DataDisplay"},{"english":"Transfer","chinese":"穿梭框","family":"DataEntry"},{"english":"Tree","chinese":"树形控件","family":"DataDisplay"},{"english":"TreeSelect","chinese":"树型选择控件","family":"DataEntry"},{"english":"Upload","chinese":"上传组件","family":"DataEntry"},{"english":"VirtualList","chinese":"虚拟滚动列表","family":"Util"}] \ No newline at end of file diff --git a/compiled_docs/config-provider/demo/basic.en-us.md b/compiled_docs/config-provider/demo/basic.en-us.md new file mode 100644 index 0000000000..fab77a82e7 --- /dev/null +++ b/compiled_docs/config-provider/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

The simplest usage, demo how ConfigProvider works.

\n","order":"1"},"codes":{"jsx":"import { ConfigProvider } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst { config } = ConfigProvider;\n\nclass Output extends React.Component {\n static propTypes = {\n prefix: PropTypes.string,\n locale: PropTypes.object,\n pure: PropTypes.bool\n };\n\n static defaultProps = {\n prefix: 'next-',\n locale: {\n hello: '你好'\n },\n pure: false\n };\n\n render() {\n const { prefix, locale, pure } = this.props;\n\n return (\n
    \n
  • prefix: {prefix}
    • \n
  • locale: {JSON.stringify(locale)}
    • \n
  • pure: {pure.toString()}
    • \n
\n );\n }\n}\n\nconst NewOutput = config(Output);\n\nclass Demo extends React.Component {\n render() {\n return (\n \n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { ConfigProvider } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst { config } = ConfigProvider;\n\nclass Output extends React.Component {\n static propTypes = {\n prefix: PropTypes.string,\n locale: PropTypes.object,\n pure: PropTypes.bool\n };\n\n static defaultProps = {\n prefix: 'next-',\n locale: {\n hello: '你好'\n },\n pure: false\n };\n\n render() {\n const { prefix, locale, pure } = this.props;\n\n return (\n
    \n
  • prefix: {prefix}
    • \n
  • locale: {JSON.stringify(locale)}
    • \n
  • pure: {pure.toString()}
    • \n
\n );\n }\n}\n\nconst NewOutput = config(Output);\n\nclass Demo extends React.Component {\n render() {\n return (\n \n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { ConfigProvider } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst { config } = ConfigProvider;\n\nclass Output extends React.Component {\n    static propTypes = {\n        prefix: PropTypes.string,\n        locale: PropTypes.object,\n        pure: PropTypes.bool\n    };\n\n    static defaultProps = {\n        prefix: 'next-',\n        locale: {\n            hello: '你好'\n        },\n        pure: false\n    };\n\n    render() {\n        const { prefix, locale, pure } = this.props;\n\n        return (\n            <ul>\n                <li>prefix: {prefix}</li>\n                <li>locale: {JSON.stringify(locale)}</li>\n                <li>pure: {pure.toString()}</li>\n            </ul>\n        );\n    }\n}\n\nconst NewOutput = config(Output);\n\nclass Demo extends React.Component {\n    render() {\n        return (\n            <ConfigProvider prefix=\"custom-\" locale={{ Output: { hello: 'hello' } }} pure>\n                <NewOutput />\n            </ConfigProvider>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/config-provider/demo/basic.md b/compiled_docs/config-provider/demo/basic.md new file mode 100644 index 0000000000..f70cc48be9 --- /dev/null +++ b/compiled_docs/config-provider/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

最简单的用法，展示 ConfigProvider 是如何工作的。

\n","order":"1"},"codes":{"jsx":"import { ConfigProvider } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst { config } = ConfigProvider;\n\nclass Output extends React.Component {\n static propTypes = {\n prefix: PropTypes.string,\n locale: PropTypes.object,\n pure: PropTypes.bool\n };\n\n static defaultProps = {\n prefix: 'next-',\n locale: {\n hello: '你好'\n },\n pure: false\n };\n\n render() {\n const { prefix, locale, pure } = this.props;\n\n return (\n
    \n
  • prefix: {prefix}
    • \n
  • locale: {JSON.stringify(locale)}
    • \n
  • pure: {pure.toString()}
    • \n
\n );\n }\n}\n\nconst NewOutput = config(Output);\n\nclass Demo extends React.Component {\n render() {\n return (\n \n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { ConfigProvider } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst { config } = ConfigProvider;\n\nclass Output extends React.Component {\n static propTypes = {\n prefix: PropTypes.string,\n locale: PropTypes.object,\n pure: PropTypes.bool\n };\n\n static defaultProps = {\n prefix: 'next-',\n locale: {\n hello: '你好'\n },\n pure: false\n };\n\n render() {\n const { prefix, locale, pure } = this.props;\n\n return (\n
    \n
  • prefix: {prefix}
    • \n
  • locale: {JSON.stringify(locale)}
    • \n
  • pure: {pure.toString()}
    • \n
\n );\n }\n}\n\nconst NewOutput = config(Output);\n\nclass Demo extends React.Component {\n render() {\n return (\n \n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { ConfigProvider } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst { config } = ConfigProvider;\n\nclass Output extends React.Component {\n    static propTypes = {\n        prefix: PropTypes.string,\n        locale: PropTypes.object,\n        pure: PropTypes.bool\n    };\n\n    static defaultProps = {\n        prefix: 'next-',\n        locale: {\n            hello: '你好'\n        },\n        pure: false\n    };\n\n    render() {\n        const { prefix, locale, pure } = this.props;\n\n        return (\n            <ul>\n                <li>prefix: {prefix}</li>\n                <li>locale: {JSON.stringify(locale)}</li>\n                <li>pure: {pure.toString()}</li>\n            </ul>\n        );\n    }\n}\n\nconst NewOutput = config(Output);\n\nclass Demo extends React.Component {\n    render() {\n        return (\n            <ConfigProvider prefix=\"custom-\" locale={{ Output: { hello: 'hello' } }} pure>\n                <NewOutput />\n            </ConfigProvider>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/config-provider/demo/components.en-us.md b/compiled_docs/config-provider/demo/components.en-us.md new file mode 100644 index 0000000000..1246e28e61 --- /dev/null +++ b/compiled_docs/config-provider/demo/components.en-us.md @@ -0,0 +1 @@ +{"title":"Components that support internationalization","meta":{"title":"Components that support internationalization","description":"\n

Show the components that support internationalization in the current Next components.

\n","order":"2"},"codes":{"jsx":"import { ConfigProvider, Button, Radio, Calendar, Card, DatePicker, Dialog, Pagination, TimePicker, Timeline, Transfer, Select, Upload, Table } from '@alifd/next';\n\nimport enUS from '@alifd/next/lib/locale/en-us';\nimport zhCN from '@alifd/next/lib/locale/zh-cn';\n\n// If the application directly imports the next-with-locales.js file from cdn\n// it need to import locale file in the following way\n// import { locales } from '@alifd/next';\n// const enUS = locales['en-us'];\n// const zhCN = locales['zh-cn'];\n\nconst RangePicker = DatePicker.RangePicker;\n\nconst transferDataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content ${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n lang: 'en-us'\n };\n\n this.changeLang = this.changeLang.bind(this);\n this.showDialog = this.showDialog.bind(this);\n }\n\n changeLang(lang) {\n this.setState({\n lang\n });\n }\n\n showDialog() {\n Dialog.confirm({\n title: 'Confirm',\n content: 'Are you sure you want to delete all alert e-mails waiting in queue?'\n });\n }\n\n render() {\n const locale = this.state.lang === 'en-us' ? enUS : zhCN;\n\n return (\n
\n
\n Change locale of components: \n \n English\n 中文\n \n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n
\n \n
\n \n \n \n \n \n \n \n \n
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.change-locale {\n border-bottom: 1px solid #d9d9d9;\n padding-bottom: 16px;\n}\n\n.locale-components > * {\n margin: 16px 0;\n display: block;\n}\n````","html":"
import { ConfigProvider, Button, Radio, Calendar, Card, DatePicker, Dialog, Pagination, TimePicker, Timeline, Transfer, Select, Upload, Table } from '@alifd/next';\n\nimport enUS from '@alifd/next/lib/locale/en-us';\nimport zhCN from '@alifd/next/lib/locale/zh-cn';\n\n// If the application directly imports the next-with-locales.js file from cdn\n// it need to import locale file in the following way\n// import { locales } from '@alifd/next';\n// const enUS = locales['en-us'];\n// const zhCN = locales['zh-cn'];\n\nconst RangePicker = DatePicker.RangePicker;\n\nconst transferDataSource = (() => {\n    const dataSource = [];\n\n    for (let i = 0; i < 10; i++) {\n        dataSource.push({\n            label: `content ${i}`,\n            value: `${i}`,\n            disabled: i % 4 === 0\n        });\n    }\n\n    return dataSource;\n})();\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            lang: 'en-us'\n        };\n\n        this.changeLang = this.changeLang.bind(this);\n        this.showDialog = this.showDialog.bind(this);\n    }\n\n    changeLang(lang) {\n        this.setState({\n            lang\n        });\n    }\n\n    showDialog() {\n        Dialog.confirm({\n            title: 'Confirm',\n            content: 'Are you sure you want to delete all alert e-mails waiting in queue?'\n        });\n    }\n\n    render() {\n        const locale = this.state.lang === 'en-us' ? enUS : zhCN;\n\n        return (\n            <div>\n                <div className=\"change-locale\">\n                    <span style={{ marginRight: 16 }}>Change locale of components: </span>\n                    <Radio.Group shape=\"button\" size=\"large\" defaultValue=\"en-us\" onChange={this.changeLang}>\n                        <Radio key=\"en\" value=\"en-us\">English</Radio>\n                        <Radio key=\"cn\" value=\"zh-cn\">中文</Radio>\n                    </Radio.Group>\n                </div>\n                <ConfigProvider locale={locale}>\n                    <div className=\"locale-components\">\n                        <Button type=\"primary\" onClick={this.showDialog}>Show Dialog</Button>\n                        <Select style={{ width: '150px' }} dataSource={['hello', 'bye']} />\n                        <DatePicker />\n                        <TimePicker />\n                        <RangePicker />\n                        <Calendar style={{ width: '350px', padding: '12px', border: '1px solid #C4C6CF', borderRadius: '3px' }} shape=\"card\" />\n                        <Pagination defaultCurrent={2} />\n                        <Transfer dataSource={transferDataSource} defaultValue={['3']} defaultLeftChecked={['1']} titles={['Source', 'Target']} />\n                        <Table style={{ width: '500px' }} dataSource={[]}>\n                            <Table.Column title=\"Name\" dataIndex=\"name\" filters={[{ label: 'Filter 1', value: '1' }, { label: 'Filter 2', value: '2' }]} />\n                            <Table.Column title=\"Age\" dataIndex=\"age\" />\n                        </Table>\n                        <Card style={{ width: '300px' }} title=\"Title\">\n                            <div style={{ height: '250px', background: '#F7F8FA' }}></div>\n                        </Card>\n                        <Timeline fold={[{foldArea: [1, 2], foldShow: true}]}>\n                            <Timeline.Item title=\"Signed\" content=\"Signed, sign Alibaba is a small post office, thanks to the use of STO, look forward to once again at your service\" time={'2016-06-10 10:30:00'} state=\"process\"/>\n                            <Timeline.Item title=\"Ship\" content=\"Express has arrived in Hangzhou, Zhejiang Binjiang company\" time={'2016-06-10 09:30:00'} />\n                            <Timeline.Item title=\"Ship\" content=\"Zhejiang Hangzhou Riverside company sent a member for you to send pieces\" time={'2016-06-10 09:03:00'} />\n                            <Timeline.Item title=\"Ship\" content=\"Zhejiang Hangzhou Transshipment Center has been issued\" time={'2016-06-10 06:10:00'} />\n                        </Timeline>\n                        <Upload.Dragger style={{ width: '500px' }}\n                            listType=\"image\"\n                            action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n                            accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\" />\n                    </div>\n                </ConfigProvider>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.change-locale {\n    border-bottom: 1px solid #d9d9d9;\n    padding-bottom: 16px;\n}\n\n.locale-components > * {\n    margin: 16px 0;\n    display: block;\n}
"} \ No newline at end of file diff --git a/compiled_docs/config-provider/demo/components.md b/compiled_docs/config-provider/demo/components.md new file mode 100644 index 0000000000..94d31cf87a --- /dev/null +++ b/compiled_docs/config-provider/demo/components.md @@ -0,0 +1 @@ +{"title":"支持国际化的组件","meta":{"title":"支持国际化的组件","description":"\n

展示目前 Next 组件中支持国际化的组件。

\n","order":"2"},"codes":{"jsx":"import { ConfigProvider, Button, Radio, Calendar, Card, DatePicker, Dialog, Pagination, TimePicker, Timeline, Transfer, Select, Upload, Table } from '@alifd/next';\n\nimport enUS from '@alifd/next/lib/locale/en-us';\nimport zhCN from '@alifd/next/lib/locale/zh-cn';\n\n// If the application directly imports the next-with-locales.js file from cdn\n// it need to import locale file in the following way\n// import { locales } from '@alifd/next';\n// const enUS = locales['en-us'];\n// const zhCN = locales['zh-cn'];\n\nconst RangePicker = DatePicker.RangePicker;\n\nconst transferDataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content ${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n lang: 'en-us'\n };\n\n this.changeLang = this.changeLang.bind(this);\n this.showDialog = this.showDialog.bind(this);\n }\n\n changeLang(lang) {\n this.setState({\n lang\n });\n }\n\n showDialog() {\n Dialog.confirm({\n title: 'Confirm',\n content: 'Are you sure you want to delete all alert e-mails waiting in queue?'\n });\n }\n\n render() {\n const locale = this.state.lang === 'en-us' ? enUS : zhCN;\n\n return (\n
\n
\n Change locale of components: \n \n English\n 中文\n \n
\n \n
\n \n \n \n \n \n \n \n \n \n \n \n
\n \n
\n \n \n \n \n \n \n \n \n
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.change-locale {\n border-bottom: 1px solid #d9d9d9;\n padding-bottom: 16px;\n}\n\n.locale-components > * {\n margin: 16px 0;\n display: block;\n}\n````","html":"
import { ConfigProvider, Button, Radio, Calendar, Card, DatePicker, Dialog, Pagination, TimePicker, Timeline, Transfer, Select, Upload, Table } from '@alifd/next';\n\nimport enUS from '@alifd/next/lib/locale/en-us';\nimport zhCN from '@alifd/next/lib/locale/zh-cn';\n\n// If the application directly imports the next-with-locales.js file from cdn\n// it need to import locale file in the following way\n// import { locales } from '@alifd/next';\n// const enUS = locales['en-us'];\n// const zhCN = locales['zh-cn'];\n\nconst RangePicker = DatePicker.RangePicker;\n\nconst transferDataSource = (() => {\n    const dataSource = [];\n\n    for (let i = 0; i < 10; i++) {\n        dataSource.push({\n            label: `content ${i}`,\n            value: `${i}`,\n            disabled: i % 4 === 0\n        });\n    }\n\n    return dataSource;\n})();\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            lang: 'en-us'\n        };\n\n        this.changeLang = this.changeLang.bind(this);\n        this.showDialog = this.showDialog.bind(this);\n    }\n\n    changeLang(lang) {\n        this.setState({\n            lang\n        });\n    }\n\n    showDialog() {\n        Dialog.confirm({\n            title: 'Confirm',\n            content: 'Are you sure you want to delete all alert e-mails waiting in queue?'\n        });\n    }\n\n    render() {\n        const locale = this.state.lang === 'en-us' ? enUS : zhCN;\n\n        return (\n            <div>\n                <div className=\"change-locale\">\n                    <span style={{ marginRight: 16 }}>Change locale of components: </span>\n                    <Radio.Group shape=\"button\" size=\"large\" defaultValue=\"en-us\" onChange={this.changeLang}>\n                        <Radio key=\"en\" value=\"en-us\">English</Radio>\n                        <Radio key=\"cn\" value=\"zh-cn\">中文</Radio>\n                    </Radio.Group>\n                </div>\n                <ConfigProvider locale={locale}>\n                    <div className=\"locale-components\">\n                        <Button type=\"primary\" onClick={this.showDialog}>Show Dialog</Button>\n                        <Select style={{ width: '150px' }} dataSource={['hello', 'bye']} />\n                        <DatePicker />\n                        <TimePicker />\n                        <RangePicker />\n                        <Calendar style={{ width: '350px', padding: '12px', border: '1px solid #C4C6CF', borderRadius: '3px' }} shape=\"card\" />\n                        <Pagination defaultCurrent={2} />\n                        <Transfer dataSource={transferDataSource} defaultValue={['3']} defaultLeftChecked={['1']} titles={['Source', 'Target']} />\n                        <Table style={{ width: '500px' }} dataSource={[]}>\n                            <Table.Column title=\"Name\" dataIndex=\"name\" filters={[{ label: 'Filter 1', value: '1' }, { label: 'Filter 2', value: '2' }]} />\n                            <Table.Column title=\"Age\" dataIndex=\"age\" />\n                        </Table>\n                        <Card style={{ width: '300px' }} title=\"Title\">\n                            <div style={{ height: '250px', background: '#F7F8FA' }}></div>\n                        </Card>\n                        <Timeline fold={[{foldArea: [1, 2], foldShow: true}]}>\n                            <Timeline.Item title=\"Signed\" content=\"Signed, sign Alibaba is a small post office, thanks to the use of STO, look forward to once again at your service\" time={'2016-06-10 10:30:00'} state=\"process\"/>\n                            <Timeline.Item title=\"Ship\" content=\"Express has arrived in Hangzhou, Zhejiang Binjiang company\" time={'2016-06-10 09:30:00'} />\n                            <Timeline.Item title=\"Ship\" content=\"Zhejiang Hangzhou Riverside company sent a member for you to send pieces\" time={'2016-06-10 09:03:00'} />\n                            <Timeline.Item title=\"Ship\" content=\"Zhejiang Hangzhou Transshipment Center has been issued\" time={'2016-06-10 06:10:00'} />\n                        </Timeline>\n                        <Upload.Dragger style={{ width: '500px' }}\n                            listType=\"image\"\n                            action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n                            accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\" />\n                    </div>\n                </ConfigProvider>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.change-locale {\n    border-bottom: 1px solid #d9d9d9;\n    padding-bottom: 16px;\n}\n\n.locale-components > * {\n    margin: 16px 0;\n    display: block;\n}
"} \ No newline at end of file diff --git a/compiled_docs/config-provider/demo/consumer.en-us.md b/compiled_docs/config-provider/demo/consumer.en-us.md new file mode 100644 index 0000000000..85e721d841 --- /dev/null +++ b/compiled_docs/config-provider/demo/consumer.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

<Consumer> can be to read context state of <ConfigProvider> with easly and highly customized

\n","order":"4"},"codes":{"jsx":"import { ConfigProvider } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst localeSettings = {\n momentLocale: 'fr-FR',\n CustomizedComponent: {\n helloWorld: 'hello, world'\n }\n};\n\nconst App = ({ children }) => (\n \n {children}\n \n);\n\nApp.propTypes = {\n children: PropTypes.node\n};\n\nconst Child = () => (\n \n {\n context => (\n
\n

Context's state

\n 
{JSON.stringify(context, false, 2)}
\n
\n )\n }\n \n);\n\nconst Demo = () => (\n \n \n \n);\n\nReactDOM.render(, mountNode);\n","css":".context-data {\n padding: 0 32px 32px;\n border: 3px dashed #aaa;\n border-radius: 9px;\n}\n"},"body":"\n````jsx\nimport { ConfigProvider } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst localeSettings = {\n momentLocale: 'fr-FR',\n CustomizedComponent: {\n helloWorld: 'hello, world'\n }\n};\n\nconst App = ({ children }) => (\n \n {children}\n \n);\n\nApp.propTypes = {\n children: PropTypes.node\n};\n\nconst Child = () => (\n \n {\n context => (\n
\n

Context's state

\n 
{JSON.stringify(context, false, 2)}
\n
\n )\n }\n \n);\n\nconst Demo = () => (\n \n \n \n);\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.context-data {\n padding: 0 32px 32px;\n border: 3px dashed #aaa;\n border-radius: 9px;\n}\n````","html":"
import { ConfigProvider } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst localeSettings = {\n    momentLocale: 'fr-FR',\n    CustomizedComponent: {\n        helloWorld: 'hello, world'\n    }\n};\n\nconst App = ({ children }) => (\n    <ConfigProvider\n        prefix=\"customized-\"\n        locale={localeSettings}\n        pure\n        warning={false}\n    >\n        {children}\n    </ConfigProvider>\n);\n\nApp.propTypes = {\n    children: PropTypes.node\n};\n\nconst Child = () => (\n    <ConfigProvider.Consumer>\n        {\n            context => (\n                <div className=\"context-data\">\n                    <h3>Context's state</h3>\n                    <pre>{JSON.stringify(context, false, 2)}</pre>\n                </div>\n            )\n        }\n    </ConfigProvider.Consumer>\n);\n\nconst Demo = () => (\n    <App>\n        <Child />\n    </App>\n);\n\nReactDOM.render(<Demo />, mountNode);
.context-data {\n    padding: 0 32px 32px;\n    border: 3px dashed #aaa;\n    border-radius: 9px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/config-provider/demo/consumer.md b/compiled_docs/config-provider/demo/consumer.md new file mode 100644 index 0000000000..d895f1b7aa --- /dev/null +++ b/compiled_docs/config-provider/demo/consumer.md @@ -0,0 +1 @@ +{"title":"使用 Consumer 组件读取上下文中的数据","meta":{"title":"使用 Consumer 组件读取上下文中的数据","description":"\n

使用 <Consumer> 可以方便地读取 <ConfigProvider> 中上下文的数据

\n","order":"4"},"codes":{"jsx":"import { ConfigProvider } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst localeSettings = {\n momentLocale: 'fr-FR',\n CustomizedComponent: {\n helloWorld: 'hello, world'\n }\n};\n\nconst App = ({ children }) => (\n \n {children}\n \n);\n\nApp.propTypes = {\n children: PropTypes.node\n};\n\nconst Child = () => (\n \n {\n context => (\n
\n

Context's state

\n 
{JSON.stringify(context, false, 2)}
\n
\n )\n }\n \n);\n\nconst Demo = () => (\n \n \n \n);\n\nReactDOM.render(, mountNode);\n","css":".context-data {\n padding: 0 32px 32px;\n border: 3px dashed #aaa;\n border-radius: 9px;\n}\n"},"body":"\n\n````jsx\nimport { ConfigProvider } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst localeSettings = {\n momentLocale: 'fr-FR',\n CustomizedComponent: {\n helloWorld: 'hello, world'\n }\n};\n\nconst App = ({ children }) => (\n \n {children}\n \n);\n\nApp.propTypes = {\n children: PropTypes.node\n};\n\nconst Child = () => (\n \n {\n context => (\n
\n

Context's state

\n 
{JSON.stringify(context, false, 2)}
\n
\n )\n }\n \n);\n\nconst Demo = () => (\n \n \n \n);\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.context-data {\n padding: 0 32px 32px;\n border: 3px dashed #aaa;\n border-radius: 9px;\n}\n````","html":"
import { ConfigProvider } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst localeSettings = {\n    momentLocale: 'fr-FR',\n    CustomizedComponent: {\n        helloWorld: 'hello, world'\n    }\n};\n\nconst App = ({ children }) => (\n    <ConfigProvider\n        prefix=\"customized-\"\n        locale={localeSettings}\n        pure\n        warning={false}\n    >\n        {children}\n    </ConfigProvider>\n);\n\nApp.propTypes = {\n    children: PropTypes.node\n};\n\nconst Child = () => (\n    <ConfigProvider.Consumer>\n        {\n            context => (\n                <div className=\"context-data\">\n                    <h3>Context's state</h3>\n                    <pre>{JSON.stringify(context, false, 2)}</pre>\n                </div>\n            )\n        }\n    </ConfigProvider.Consumer>\n);\n\nconst Demo = () => (\n    <App>\n        <Child />\n    </App>\n);\n\nReactDOM.render(<Demo />, mountNode);
.context-data {\n    padding: 0 32px 32px;\n    border: 3px dashed #aaa;\n    border-radius: 9px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/config-provider/demo/error-boundary.en-us.md b/compiled_docs/config-provider/demo/error-boundary.en-us.md new file mode 100644 index 0000000000..05f395e5ec --- /dev/null +++ b/compiled_docs/config-provider/demo/error-boundary.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

<ErrorBoundary> can be used to avoid blank screen caused by local errors

\n","order":"5"},"codes":{"jsx":"import { ConfigProvider, Button } from '@alifd/next';\n\nconst { ErrorBoundary, config } = ConfigProvider;\n\nclass Demo extends React.Component {\n render() {\n if (this.props.throwError) {\n throw Error('There is something going wrong!');\n } else {\n return (\n normal\n );\n }\n }\n}\n\nconst NewDemo = config(Demo);\n\nconst fallbackUI = (props) => {\n const { error, errorInfo } = props;\n return {error.toString()};\n};\n\nclass App extends React.Component {\n state = {\n throwError: false\n };\n\n onClick = () => {\n this.setState({\n throwError: true\n });\n };\n\n render() {\n return (
\n Click to throw an error \n
\n
\n Default fallback UI:\n
\n \n \n \n
\n
\n Customize fallback UI of configed Component(Basic Components / Biz Components):\n
\n {\n const { error, errorInfo } = props;\n return Error: {error.toString()};\n },\n afterCatch: () => {\n console.log('catching');\n }\n }}>\n \n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { ConfigProvider, Button } from '@alifd/next';\n\nconst { ErrorBoundary, config } = ConfigProvider;\n\nclass Demo extends React.Component {\n render() {\n if (this.props.throwError) {\n throw Error('There is something going wrong!');\n } else {\n return (\n normal\n );\n }\n }\n}\n\nconst NewDemo = config(Demo);\n\nconst fallbackUI = (props) => {\n const { error, errorInfo } = props;\n return {error.toString()};\n};\n\nclass App extends React.Component {\n state = {\n throwError: false\n };\n\n onClick = () => {\n this.setState({\n throwError: true\n });\n };\n\n render() {\n return (
\n Click to throw an error \n
\n
\n Default fallback UI:\n
\n \n \n \n
\n
\n Customize fallback UI of configed Component(Basic Components / Biz Components):\n
\n {\n const { error, errorInfo } = props;\n return Error: {error.toString()};\n },\n afterCatch: () => {\n console.log('catching');\n }\n }}>\n \n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { ConfigProvider, Button } from '@alifd/next';\n\nconst { ErrorBoundary, config } = ConfigProvider;\n\nclass Demo extends React.Component {\n    render() {\n        if (this.props.throwError) {\n            throw Error('There is something going wrong!');\n        } else {\n            return (\n                <span>normal</span>\n            );\n        }\n    }\n}\n\nconst NewDemo = config(Demo);\n\nconst fallbackUI = (props) => {\n    const { error, errorInfo } = props;\n    return <span style={{color: 'red'}}>{error.toString()}</span>;\n};\n\nclass App extends React.Component {\n    state = {\n        throwError: false\n    };\n\n    onClick = () => {\n        this.setState({\n            throwError: true\n        });\n    };\n\n    render() {\n        return (<div>\n            Click to throw an error <Button type=\"primary\" onClick={this.onClick}>trigger error</Button>\n            <br/>\n            <br/>\n            Default fallback UI:\n            <hr />\n            <ConfigProvider errorBoundary>\n                <NewDemo throwError={this.state.throwError}/>\n            </ConfigProvider>\n            <br/>\n            <br/>\n            Customize fallback UI of configed Component(Basic Components / Biz Components):\n            <hr />\n            <ConfigProvider errorBoundary={{\n                fallbackUI: props => {\n                    const { error, errorInfo } = props;\n                    return <span style={{color: 'red'}}>Error: {error.toString()}</span>;\n                },\n                afterCatch: () => {\n                    console.log('catching');\n                }\n            }}>\n                <NewDemo throwError={this.state.throwError}/>\n            </ConfigProvider>\n        </div>);\n    }\n}\n\nReactDOM.render(<App />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/config-provider/demo/error-boundary.md b/compiled_docs/config-provider/demo/error-boundary.md new file mode 100644 index 0000000000..0ea19bb19a --- /dev/null +++ b/compiled_docs/config-provider/demo/error-boundary.md @@ -0,0 +1 @@ +{"title":"ErrorBoundary 捕获错误","meta":{"title":"ErrorBoundary 捕获错误","description":"\n

使用 <ErrorBoundary> 可以避免由于局部区域的错误，所引起的页面白屏。

\n","order":"5"},"codes":{"jsx":"import { ConfigProvider, Button } from '@alifd/next';\n\nconst { ErrorBoundary, config } = ConfigProvider;\n\nclass Demo extends React.Component {\n render() {\n if (this.props.throwError) {\n throw Error('There is something going wrong!');\n } else {\n return (\n normal\n );\n }\n }\n}\n\nconst NewDemo = config(Demo);\n\nconst fallbackUI = (props) => {\n const { error, errorInfo } = props;\n return {error.toString()};\n};\n\nclass App extends React.Component {\n state = {\n throwError: false\n };\n\n onClick = () => {\n this.setState({\n throwError: true\n });\n };\n\n render() {\n return (
\n Click to throw an error \n
\n
\n Default fallback UI:\n
\n \n \n \n
\n
\n Customize fallback UI of configed Component(Basic Components / Biz Components):\n
\n {\n const { error, errorInfo } = props;\n return Error: {error.toString()};\n },\n afterCatch: () => {\n console.log('catching');\n }\n }}>\n \n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { ConfigProvider, Button } from '@alifd/next';\n\nconst { ErrorBoundary, config } = ConfigProvider;\n\nclass Demo extends React.Component {\n render() {\n if (this.props.throwError) {\n throw Error('There is something going wrong!');\n } else {\n return (\n normal\n );\n }\n }\n}\n\nconst NewDemo = config(Demo);\n\nconst fallbackUI = (props) => {\n const { error, errorInfo } = props;\n return {error.toString()};\n};\n\nclass App extends React.Component {\n state = {\n throwError: false\n };\n\n onClick = () => {\n this.setState({\n throwError: true\n });\n };\n\n render() {\n return (
\n Click to throw an error \n
\n
\n Default fallback UI:\n
\n \n \n \n
\n
\n Customize fallback UI of configed Component(Basic Components / Biz Components):\n
\n {\n const { error, errorInfo } = props;\n return Error: {error.toString()};\n },\n afterCatch: () => {\n console.log('catching');\n }\n }}>\n \n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { ConfigProvider, Button } from '@alifd/next';\n\nconst { ErrorBoundary, config } = ConfigProvider;\n\nclass Demo extends React.Component {\n    render() {\n        if (this.props.throwError) {\n            throw Error('There is something going wrong!');\n        } else {\n            return (\n                <span>normal</span>\n            );\n        }\n    }\n}\n\nconst NewDemo = config(Demo);\n\nconst fallbackUI = (props) => {\n    const { error, errorInfo } = props;\n    return <span style={{color: 'red'}}>{error.toString()}</span>;\n};\n\nclass App extends React.Component {\n    state = {\n        throwError: false\n    };\n\n    onClick = () => {\n        this.setState({\n            throwError: true\n        });\n    };\n\n    render() {\n        return (<div>\n            Click to throw an error <Button type=\"primary\" onClick={this.onClick}>trigger error</Button>\n            <br/>\n            <br/>\n            Default fallback UI:\n            <hr />\n            <ConfigProvider errorBoundary>\n                <NewDemo throwError={this.state.throwError}/>\n            </ConfigProvider>\n            <br/>\n            <br/>\n            Customize fallback UI of configed Component(Basic Components / Biz Components):\n            <hr />\n            <ConfigProvider errorBoundary={{\n                fallbackUI: props => {\n                    const { error, errorInfo } = props;\n                    return <span style={{color: 'red'}}>Error: {error.toString()}</span>;\n                },\n                afterCatch: () => {\n                    console.log('catching');\n                }\n            }}>\n                <NewDemo throwError={this.state.throwError}/>\n            </ConfigProvider>\n        </div>);\n    }\n}\n\nReactDOM.render(<App />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/config-provider/demo/locale.en-us.md b/compiled_docs/config-provider/demo/locale.en-us.md new file mode 100644 index 0000000000..4a22856a8a --- /dev/null +++ b/compiled_docs/config-provider/demo/locale.en-us.md @@ -0,0 +1 @@ +{"title":"Internationalization","meta":{"title":"Internationalization","description":"\n

Demo how to use ConfigProvider to implement components with international capabilities.

\n","order":"0"},"codes":{"jsx":"import { ConfigProvider, Button, Select } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst { config, getContextProps } = ConfigProvider;\nconst { Option } = Select;\n\nconst locales = {\n 'zh-cn': {\n ClickMe: {\n clickMe: '点我！'\n },\n Toast: {\n close: '关闭'\n }\n },\n 'en-us': {\n ClickMe: {\n clickMe: 'click me!'\n },\n Toast: {\n close: 'close'\n }\n }\n};\n\nclass ClickMe extends React.Component {\n static propTypes = {\n locale: PropTypes.object,\n onClick: PropTypes.func\n };\n\n static defaultProps = {\n locale: locales['zh-cn'].ClickMe,\n onClick: () => {}\n };\n\n render() {\n const { locale, onClick } = this.props;\n return (\n \n );\n }\n}\n\nclass Toast extends React.Component {\n static propTypes = {\n locale: PropTypes.object,\n afterClose: PropTypes.func\n };\n\n static defaultProps = {\n locale: locales['zh-cn'].Toast,\n afterClose: () => {}\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n visible: false\n };\n\n this.handleClose = this.handleClose.bind(this);\n }\n\n handleClose() {\n this.setState({\n visible: false\n });\n this.props.afterClose();\n }\n\n render() {\n return (\n
\n \n
\n );\n }\n}\nToast.create = (props = {}) => {\n const mountNode = document.createElement('div');\n document.body.appendChild(mountNode);\n\n const closeChain = () => {\n ReactDOM.unmountComponentAtNode(mountNode);\n document.body.removeChild(mountNode);\n };\n\n const newLocale = getContextProps(props, 'Toast').locale;\n\n ReactDOM.render(, mountNode);\n};\n\nconst NewClickMe = config(ClickMe);\nconst NewToast = config(Toast);\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n language: 'zh-cn'\n };\n\n this.handleClick = this.handleClick.bind(this);\n this.handleChangeLanguage = this.handleChangeLanguage.bind(this);\n }\n\n handleClick() {\n NewToast.create();\n }\n\n handleChangeLanguage(language) {\n this.setState({\n language\n });\n }\n\n render() {\n const { language } = this.state;\n\n return (\n \n
\n
\n \n
\n \n
\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".toast {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n margin: auto;\n width: 200px;\n height: 100px;\n line-height: 100px;\n text-align: center;\n background: white;\n box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, .32);\n}\n\n.toast .next-btn {\n margin: auto;\n}\n\n.select-language {\n margin-bottom: 20px;\n}\n"},"body":"\n````jsx\nimport { ConfigProvider, Button, Select } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst { config, getContextProps } = ConfigProvider;\nconst { Option } = Select;\n\nconst locales = {\n 'zh-cn': {\n ClickMe: {\n clickMe: '点我！'\n },\n Toast: {\n close: '关闭'\n }\n },\n 'en-us': {\n ClickMe: {\n clickMe: 'click me!'\n },\n Toast: {\n close: 'close'\n }\n }\n};\n\nclass ClickMe extends React.Component {\n static propTypes = {\n locale: PropTypes.object,\n onClick: PropTypes.func\n };\n\n static defaultProps = {\n locale: locales['zh-cn'].ClickMe,\n onClick: () => {}\n };\n\n render() {\n const { locale, onClick } = this.props;\n return (\n \n );\n }\n}\n\nclass Toast extends React.Component {\n static propTypes = {\n locale: PropTypes.object,\n afterClose: PropTypes.func\n };\n\n static defaultProps = {\n locale: locales['zh-cn'].Toast,\n afterClose: () => {}\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n visible: false\n };\n\n this.handleClose = this.handleClose.bind(this);\n }\n\n handleClose() {\n this.setState({\n visible: false\n });\n this.props.afterClose();\n }\n\n render() {\n return (\n
\n \n
\n );\n }\n}\nToast.create = (props = {}) => {\n const mountNode = document.createElement('div');\n document.body.appendChild(mountNode);\n\n const closeChain = () => {\n ReactDOM.unmountComponentAtNode(mountNode);\n document.body.removeChild(mountNode);\n };\n\n const newLocale = getContextProps(props, 'Toast').locale;\n\n ReactDOM.render(, mountNode);\n};\n\nconst NewClickMe = config(ClickMe);\nconst NewToast = config(Toast);\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n language: 'zh-cn'\n };\n\n this.handleClick = this.handleClick.bind(this);\n this.handleChangeLanguage = this.handleChangeLanguage.bind(this);\n }\n\n handleClick() {\n NewToast.create();\n }\n\n handleChangeLanguage(language) {\n this.setState({\n language\n });\n }\n\n render() {\n const { language } = this.state;\n\n return (\n \n
\n
\n \n
\n \n
\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.toast {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n margin: auto;\n width: 200px;\n height: 100px;\n line-height: 100px;\n text-align: center;\n background: white;\n box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, .32);\n}\n\n.toast .next-btn {\n margin: auto;\n}\n\n.select-language {\n margin-bottom: 20px;\n}\n````","html":"
import { ConfigProvider, Button, Select } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst { config, getContextProps } = ConfigProvider;\nconst { Option } = Select;\n\nconst locales = {\n    'zh-cn': {\n        ClickMe: {\n            clickMe: '点我！'\n        },\n        Toast: {\n            close: '关闭'\n        }\n    },\n    'en-us': {\n        ClickMe: {\n            clickMe: 'click me!'\n        },\n        Toast: {\n            close: 'close'\n        }\n    }\n};\n\nclass ClickMe extends React.Component {\n    static propTypes = {\n        locale: PropTypes.object,\n        onClick: PropTypes.func\n    };\n\n    static defaultProps = {\n        locale: locales['zh-cn'].ClickMe,\n        onClick: () => {}\n    };\n\n    render() {\n        const { locale, onClick } = this.props;\n        return (\n            <Button onClick={onClick}>{locale.clickMe}</Button>\n        );\n    }\n}\n\nclass Toast extends React.Component {\n    static propTypes = {\n        locale: PropTypes.object,\n        afterClose: PropTypes.func\n    };\n\n    static defaultProps = {\n        locale: locales['zh-cn'].Toast,\n        afterClose: () => {}\n    };\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            visible: false\n        };\n\n        this.handleClose = this.handleClose.bind(this);\n    }\n\n    handleClose() {\n        this.setState({\n            visible: false\n        });\n        this.props.afterClose();\n    }\n\n    render() {\n        return (\n            <div className=\"toast\">\n                <Button type=\"primary\" onClick={this.handleClose}>\n                    {this.props.locale.close}\n                </Button>\n            </div>\n        );\n    }\n}\nToast.create = (props = {}) => {\n    const mountNode = document.createElement('div');\n    document.body.appendChild(mountNode);\n\n    const closeChain = () => {\n        ReactDOM.unmountComponentAtNode(mountNode);\n        document.body.removeChild(mountNode);\n    };\n\n    const newLocale = getContextProps(props, 'Toast').locale;\n\n    ReactDOM.render(<Toast afterClose={closeChain} locale={newLocale} />, mountNode);\n};\n\nconst NewClickMe = config(ClickMe);\nconst NewToast = config(Toast);\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            language: 'zh-cn'\n        };\n\n        this.handleClick = this.handleClick.bind(this);\n        this.handleChangeLanguage = this.handleChangeLanguage.bind(this);\n    }\n\n    handleClick() {\n        NewToast.create();\n    }\n\n    handleChangeLanguage(language) {\n        this.setState({\n            language\n        });\n    }\n\n    render() {\n        const { language } = this.state;\n\n        return (\n            <ConfigProvider locale={locales[language]}>\n                <div>\n                    <div className=\"select-language\">\n                        <Select value={language} onChange={this.handleChangeLanguage}>\n                            <Option value=\"zh-cn\">zh-cn</Option>\n                            <Option value=\"en-us\">en-us</Option>\n                        </Select>\n                    </div>\n                    <NewClickMe onClick={this.handleClick} />\n                </div>\n            </ConfigProvider>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.toast {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    margin: auto;\n    width: 200px;\n    height: 100px;\n    line-height: 100px;\n    text-align: center;\n    background: white;\n    box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, .32);\n}\n\n.toast .next-btn {\n    margin: auto;\n}\n\n.select-language {\n    margin-bottom: 20px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/config-provider/demo/locale.md b/compiled_docs/config-provider/demo/locale.md new file mode 100644 index 0000000000..dd3bd1fa91 --- /dev/null +++ b/compiled_docs/config-provider/demo/locale.md @@ -0,0 +1 @@ +{"title":"国际化","meta":{"title":"国际化","description":"\n

展示如何配合 ConfigProvider 实现具有国际化能力的组件。

\n","order":"0"},"codes":{"jsx":"import { ConfigProvider, Button, Select } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst { config, getContextProps } = ConfigProvider;\nconst { Option } = Select;\n\nconst locales = {\n 'zh-cn': {\n ClickMe: {\n clickMe: '点我！'\n },\n Toast: {\n close: '关闭'\n }\n },\n 'en-us': {\n ClickMe: {\n clickMe: 'click me!'\n },\n Toast: {\n close: 'close'\n }\n }\n};\n\nclass ClickMe extends React.Component {\n static propTypes = {\n locale: PropTypes.object,\n onClick: PropTypes.func\n };\n\n static defaultProps = {\n locale: locales['zh-cn'].ClickMe,\n onClick: () => {}\n };\n\n render() {\n const { locale, onClick } = this.props;\n return (\n \n );\n }\n}\n\nclass Toast extends React.Component {\n static propTypes = {\n locale: PropTypes.object,\n afterClose: PropTypes.func\n };\n\n static defaultProps = {\n locale: locales['zh-cn'].Toast,\n afterClose: () => {}\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n visible: false\n };\n\n this.handleClose = this.handleClose.bind(this);\n }\n\n handleClose() {\n this.setState({\n visible: false\n });\n this.props.afterClose();\n }\n\n render() {\n return (\n
\n \n
\n );\n }\n}\nToast.create = (props = {}) => {\n const mountNode = document.createElement('div');\n document.body.appendChild(mountNode);\n\n const closeChain = () => {\n ReactDOM.unmountComponentAtNode(mountNode);\n document.body.removeChild(mountNode);\n };\n\n const newLocale = getContextProps(props, 'Toast').locale;\n\n ReactDOM.render(, mountNode);\n};\n\nconst NewClickMe = config(ClickMe);\nconst NewToast = config(Toast);\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n language: 'zh-cn'\n };\n\n this.handleClick = this.handleClick.bind(this);\n this.handleChangeLanguage = this.handleChangeLanguage.bind(this);\n }\n\n handleClick() {\n NewToast.create();\n }\n\n handleChangeLanguage(language) {\n this.setState({\n language\n });\n }\n\n render() {\n const { language } = this.state;\n\n return (\n \n
\n
\n \n
\n \n
\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".toast {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n margin: auto;\n width: 200px;\n height: 100px;\n line-height: 100px;\n text-align: center;\n background: white;\n box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, .32);\n}\n\n.toast .next-btn {\n margin: auto;\n}\n\n.select-language {\n margin-bottom: 20px;\n}\n"},"body":"\n\n````jsx\nimport { ConfigProvider, Button, Select } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst { config, getContextProps } = ConfigProvider;\nconst { Option } = Select;\n\nconst locales = {\n 'zh-cn': {\n ClickMe: {\n clickMe: '点我！'\n },\n Toast: {\n close: '关闭'\n }\n },\n 'en-us': {\n ClickMe: {\n clickMe: 'click me!'\n },\n Toast: {\n close: 'close'\n }\n }\n};\n\nclass ClickMe extends React.Component {\n static propTypes = {\n locale: PropTypes.object,\n onClick: PropTypes.func\n };\n\n static defaultProps = {\n locale: locales['zh-cn'].ClickMe,\n onClick: () => {}\n };\n\n render() {\n const { locale, onClick } = this.props;\n return (\n \n );\n }\n}\n\nclass Toast extends React.Component {\n static propTypes = {\n locale: PropTypes.object,\n afterClose: PropTypes.func\n };\n\n static defaultProps = {\n locale: locales['zh-cn'].Toast,\n afterClose: () => {}\n };\n\n constructor(props) {\n super(props);\n\n this.state = {\n visible: false\n };\n\n this.handleClose = this.handleClose.bind(this);\n }\n\n handleClose() {\n this.setState({\n visible: false\n });\n this.props.afterClose();\n }\n\n render() {\n return (\n
\n \n
\n );\n }\n}\nToast.create = (props = {}) => {\n const mountNode = document.createElement('div');\n document.body.appendChild(mountNode);\n\n const closeChain = () => {\n ReactDOM.unmountComponentAtNode(mountNode);\n document.body.removeChild(mountNode);\n };\n\n const newLocale = getContextProps(props, 'Toast').locale;\n\n ReactDOM.render(, mountNode);\n};\n\nconst NewClickMe = config(ClickMe);\nconst NewToast = config(Toast);\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n language: 'zh-cn'\n };\n\n this.handleClick = this.handleClick.bind(this);\n this.handleChangeLanguage = this.handleChangeLanguage.bind(this);\n }\n\n handleClick() {\n NewToast.create();\n }\n\n handleChangeLanguage(language) {\n this.setState({\n language\n });\n }\n\n render() {\n const { language } = this.state;\n\n return (\n \n
\n
\n \n
\n \n
\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.toast {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n margin: auto;\n width: 200px;\n height: 100px;\n line-height: 100px;\n text-align: center;\n background: white;\n box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, .32);\n}\n\n.toast .next-btn {\n margin: auto;\n}\n\n.select-language {\n margin-bottom: 20px;\n}\n````","html":"
import { ConfigProvider, Button, Select } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst { config, getContextProps } = ConfigProvider;\nconst { Option } = Select;\n\nconst locales = {\n    'zh-cn': {\n        ClickMe: {\n            clickMe: '点我！'\n        },\n        Toast: {\n            close: '关闭'\n        }\n    },\n    'en-us': {\n        ClickMe: {\n            clickMe: 'click me!'\n        },\n        Toast: {\n            close: 'close'\n        }\n    }\n};\n\nclass ClickMe extends React.Component {\n    static propTypes = {\n        locale: PropTypes.object,\n        onClick: PropTypes.func\n    };\n\n    static defaultProps = {\n        locale: locales['zh-cn'].ClickMe,\n        onClick: () => {}\n    };\n\n    render() {\n        const { locale, onClick } = this.props;\n        return (\n            <Button onClick={onClick}>{locale.clickMe}</Button>\n        );\n    }\n}\n\nclass Toast extends React.Component {\n    static propTypes = {\n        locale: PropTypes.object,\n        afterClose: PropTypes.func\n    };\n\n    static defaultProps = {\n        locale: locales['zh-cn'].Toast,\n        afterClose: () => {}\n    };\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            visible: false\n        };\n\n        this.handleClose = this.handleClose.bind(this);\n    }\n\n    handleClose() {\n        this.setState({\n            visible: false\n        });\n        this.props.afterClose();\n    }\n\n    render() {\n        return (\n            <div className=\"toast\">\n                <Button type=\"primary\" onClick={this.handleClose}>\n                    {this.props.locale.close}\n                </Button>\n            </div>\n        );\n    }\n}\nToast.create = (props = {}) => {\n    const mountNode = document.createElement('div');\n    document.body.appendChild(mountNode);\n\n    const closeChain = () => {\n        ReactDOM.unmountComponentAtNode(mountNode);\n        document.body.removeChild(mountNode);\n    };\n\n    const newLocale = getContextProps(props, 'Toast').locale;\n\n    ReactDOM.render(<Toast afterClose={closeChain} locale={newLocale} />, mountNode);\n};\n\nconst NewClickMe = config(ClickMe);\nconst NewToast = config(Toast);\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            language: 'zh-cn'\n        };\n\n        this.handleClick = this.handleClick.bind(this);\n        this.handleChangeLanguage = this.handleChangeLanguage.bind(this);\n    }\n\n    handleClick() {\n        NewToast.create();\n    }\n\n    handleChangeLanguage(language) {\n        this.setState({\n            language\n        });\n    }\n\n    render() {\n        const { language } = this.state;\n\n        return (\n            <ConfigProvider locale={locales[language]}>\n                <div>\n                    <div className=\"select-language\">\n                        <Select value={language} onChange={this.handleChangeLanguage}>\n                            <Option value=\"zh-cn\">zh-cn</Option>\n                            <Option value=\"en-us\">en-us</Option>\n                        </Select>\n                    </div>\n                    <NewClickMe onClick={this.handleClick} />\n                </div>\n            </ConfigProvider>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.toast {\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    margin: auto;\n    width: 200px;\n    height: 100px;\n    line-height: 100px;\n    text-align: center;\n    background: white;\n    box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, .32);\n}\n\n.toast .next-btn {\n    margin: auto;\n}\n\n.select-language {\n    margin-bottom: 20px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/config-provider/demo/rtl.en-us.md b/compiled_docs/config-provider/demo/rtl.en-us.md new file mode 100644 index 0000000000..e6f01142eb --- /dev/null +++ b/compiled_docs/config-provider/demo/rtl.en-us.md @@ -0,0 +1 @@ +{"title":"Components with rtl","meta":{"title":"Components with rtl","description":"\n

Show components with RTL(Partial supported currently).

\n","order":"4"},"codes":{"jsx":"import { ConfigProvider, Button, Radio, Menu, Calendar, DatePicker, Dialog, TimePicker, Timeline, Select } from '@alifd/next';\n\nconst { SubMenu, Item, Group, Divider } = Menu;\nconst RangePicker = DatePicker.RangePicker;\n\n// Set global direction to 'rtl'. This affects the whole page\n// ConfigProvider.setDirection('rtl');\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n dir: 'rtl'\n };\n\n this.changeDir = this.changeDir.bind(this);\n this.showDialog = this.showDialog.bind(this);\n }\n\n changeDir(value) {\n this.setState({\n dir: value\n });\n }\n\n showDialog() {\n Dialog.confirm({\n title: 'Confirm',\n content: 'Are you sure you want to delete all alert e-mails waiting in queue?'\n });\n }\n\n render() {\n\n return (\n
\n
\n Change direction of components: \n \n RTL\n LTR\n \n
\n
\n
\n \n
\n \n \n \n \n\n \n \n \n \n \n \n\n \n Option 1\n Disabled option 2\n \n \n Group option 1\n Group option 2\n \n \n \n Sub option 1\n Sub option 2\n \n Disabled Option Link 3\n \n \n Option Link 4\n \n \n Option 3\n \n Disabled Option Link\n \n \n Option Link\n \n \n
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.my-menu {\n width: 200px;\n}\n\n.change-locale {\n border-bottom: 1px solid #d9d9d9;\n padding-bottom: 16px;\n}\n\n.locale-components > * {\n margin: 16px 0;\n display: block;\n}\n````","html":"
import { ConfigProvider, Button, Radio, Menu, Calendar, DatePicker, Dialog, TimePicker, Timeline, Select } from '@alifd/next';\n\nconst { SubMenu, Item, Group, Divider } = Menu;\nconst RangePicker = DatePicker.RangePicker;\n\n// Set global direction to 'rtl'. This affects the whole page\n// ConfigProvider.setDirection('rtl');\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            dir: 'rtl'\n        };\n\n        this.changeDir = this.changeDir.bind(this);\n        this.showDialog = this.showDialog.bind(this);\n    }\n\n    changeDir(value) {\n        this.setState({\n            dir: value\n        });\n    }\n\n    showDialog() {\n        Dialog.confirm({\n            title: 'Confirm',\n            content: 'Are you sure you want to delete all alert e-mails waiting in queue?'\n        });\n    }\n\n    render() {\n\n        return (\n            <div>\n                <div className=\"change-rtl\">\n                    <span style={{ marginRight: 16 }}>Change direction of components: </span>\n                    <Radio.Group shape=\"button\" size=\"large\" value={this.state.dir} onChange={this.changeDir}>\n                        <Radio key=\"rtl\" value=\"rtl\">RTL</Radio>\n                        <Radio key=\"ltr\" value=\"ltr\">LTR</Radio>\n                    </Radio.Group>\n                </div>\n                <br />\n                <hr />\n                <ConfigProvider rtl={this.state.dir === 'rtl'}>\n                    <div className=\"locale-components\" dir={this.state.dir}>\n                        <Button type=\"primary\" onClick={this.showDialog}>Show Dialog</Button>\n                        <Select style={{ width: '150px' }} dataSource={['hello', 'bye']} />\n                        <RangePicker showTime/>\n                        <Calendar style={{ width: '350px', padding: '12px', border: '1px solid #C4C6CF', borderRadius: '3px' }} shape=\"card\" />\n\n                        <Timeline fold={[{foldArea: [1, 2], foldShow: true}]}>\n                            <Timeline.Item title=\"Signed\" content=\"Signed, sign Alibaba is a small post office, thanks to the use of STO, look forward to once again at your service\" time={'2016-06-10 10:30:00'} state=\"process\"/>\n                            <Timeline.Item title=\"Ship\" content=\"Express has arrived in Hangzhou, Zhejiang Binjiang company\" time={'2016-06-10 09:30:00'} />\n                            <Timeline.Item title=\"Ship\" content=\"Zhejiang Hangzhou Riverside company sent a member for you to send pieces\" time={'2016-06-10 09:03:00'} />\n                            <Timeline.Item title=\"Ship\" content=\"Zhejiang Hangzhou Transshipment Center has been issued\" time={'2016-06-10 06:10:00'} />\n                        </Timeline>\n\n                        <Menu className=\"my-menu\" defaultOpenKeys=\"sub-menu\">\n                            <Item key=\"1\">Option 1</Item>\n                            <Item disabled key=\"2\">Disabled option 2</Item>\n                            <Divider key=\"divider\" />\n                            <Group label=\"Group\">\n                                <Item key=\"group-1\">Group option 1</Item>\n                                <Item key=\"group-2\">Group option 2</Item>\n                            </Group>\n                            <Divider />\n                            <SubMenu key=\"sub-menu\" label=\"Sub menu\">\n                                <Item key=\"sub-1\">Sub option 1</Item>\n                                <Item key=\"sub-2\">Sub option 2</Item>\n                                <Item disabled key=\"sub-3\">\n                                    <a href=\"https://www.taobao.com/\" target=\"__blank\">Disabled Option Link 3</a>\n                                </Item>\n                                <Item key=\"sub-4\">\n                                    <a href=\"https://www.taobao.com/\" target=\"__blank\">Option Link 4</a>\n                                </Item>\n                            </SubMenu>\n                            <Item key=\"3\" helper=\"CTRL+P\">Option 3</Item>\n                            <Item disabled key=\"4\">\n                                <a href=\"https://www.taobao.com/\" target=\"__blank\">Disabled Option Link</a>\n                            </Item>\n                            <Item key=\"5\">\n                                <a href=\"https://www.taobao.com/\" target=\"__blank\">Option Link</a>\n                            </Item>\n                        </Menu>\n                    </div>\n                </ConfigProvider>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.my-menu {\n    width: 200px;\n}\n\n.change-locale {\n    border-bottom: 1px solid #d9d9d9;\n    padding-bottom: 16px;\n}\n\n.locale-components > * {\n    margin: 16px 0;\n    display: block;\n}
"} \ No newline at end of file diff --git a/compiled_docs/config-provider/demo/rtl.md b/compiled_docs/config-provider/demo/rtl.md new file mode 100644 index 0000000000..d0018f6c31 --- /dev/null +++ b/compiled_docs/config-provider/demo/rtl.md @@ -0,0 +1 @@ +{"title":"组件的RTL","meta":{"title":"组件的RTL","description":"\n

组件RTL样式展示(目前部分支持)

\n","order":"4"},"codes":{"jsx":"import { ConfigProvider, Button, Radio, Menu, Calendar, DatePicker, Dialog, TimePicker, Timeline, Select } from '@alifd/next';\n\nconst { SubMenu, Item, Group, Divider } = Menu;\nconst RangePicker = DatePicker.RangePicker;\n\n// Set global direction to 'rtl'. This affects the whole page\n// ConfigProvider.setDirection('rtl');\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n dir: 'rtl'\n };\n\n this.changeDir = this.changeDir.bind(this);\n this.showDialog = this.showDialog.bind(this);\n }\n\n changeDir(value) {\n this.setState({\n dir: value\n });\n }\n\n showDialog() {\n Dialog.confirm({\n title: 'Confirm',\n content: 'Are you sure you want to delete all alert e-mails waiting in queue?'\n });\n }\n\n render() {\n\n return (\n
\n
\n Change direction of components: \n \n RTL\n LTR\n \n
\n
\n
\n \n
\n \n \n \n \n\n \n \n \n \n \n \n\n \n Option 1\n Disabled option 2\n \n \n Group option 1\n Group option 2\n \n \n \n Sub option 1\n Sub option 2\n \n Disabled Option Link 3\n \n \n Option Link 4\n \n \n Option 3\n \n Disabled Option Link\n \n \n Option Link\n \n \n
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n```` css\n.my-menu {\n width: 200px;\n}\n\n.change-locale {\n border-bottom: 1px solid #d9d9d9;\n padding-bottom: 16px;\n}\n\n.locale-components > * {\n margin: 16px 0;\n display: block;\n}\n````","html":"
import { ConfigProvider, Button, Radio, Menu, Calendar, DatePicker, Dialog, TimePicker, Timeline, Select } from '@alifd/next';\n\nconst { SubMenu, Item, Group, Divider } = Menu;\nconst RangePicker = DatePicker.RangePicker;\n\n// Set global direction to 'rtl'. This affects the whole page\n// ConfigProvider.setDirection('rtl');\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            dir: 'rtl'\n        };\n\n        this.changeDir = this.changeDir.bind(this);\n        this.showDialog = this.showDialog.bind(this);\n    }\n\n    changeDir(value) {\n        this.setState({\n            dir: value\n        });\n    }\n\n    showDialog() {\n        Dialog.confirm({\n            title: 'Confirm',\n            content: 'Are you sure you want to delete all alert e-mails waiting in queue?'\n        });\n    }\n\n    render() {\n\n        return (\n            <div>\n                <div className=\"change-rtl\">\n                    <span style={{ marginRight: 16 }}>Change direction of components: </span>\n                    <Radio.Group shape=\"button\" size=\"large\" value={this.state.dir} onChange={this.changeDir}>\n                        <Radio key=\"rtl\" value=\"rtl\">RTL</Radio>\n                        <Radio key=\"ltr\" value=\"ltr\">LTR</Radio>\n                    </Radio.Group>\n                </div>\n                <br />\n                <hr />\n                <ConfigProvider rtl={this.state.dir === 'rtl'}>\n                    <div className=\"locale-components\" dir={this.state.dir}>\n                        <Button type=\"primary\" onClick={this.showDialog}>Show Dialog</Button>\n                        <Select style={{ width: '150px' }} dataSource={['hello', 'bye']} />\n                        <RangePicker showTime/>\n                        <Calendar style={{ width: '350px', padding: '12px', border: '1px solid #C4C6CF', borderRadius: '3px' }} shape=\"card\" />\n\n                        <Timeline fold={[{foldArea: [1, 2], foldShow: true}]}>\n                            <Timeline.Item title=\"Signed\" content=\"Signed, sign Alibaba is a small post office, thanks to the use of STO, look forward to once again at your service\" time={'2016-06-10 10:30:00'} state=\"process\"/>\n                            <Timeline.Item title=\"Ship\" content=\"Express has arrived in Hangzhou, Zhejiang Binjiang company\" time={'2016-06-10 09:30:00'} />\n                            <Timeline.Item title=\"Ship\" content=\"Zhejiang Hangzhou Riverside company sent a member for you to send pieces\" time={'2016-06-10 09:03:00'} />\n                            <Timeline.Item title=\"Ship\" content=\"Zhejiang Hangzhou Transshipment Center has been issued\" time={'2016-06-10 06:10:00'} />\n                        </Timeline>\n\n                        <Menu className=\"my-menu\" defaultOpenKeys=\"sub-menu\">\n                            <Item key=\"1\">Option 1</Item>\n                            <Item disabled key=\"2\">Disabled option 2</Item>\n                            <Divider key=\"divider\" />\n                            <Group label=\"Group\">\n                                <Item key=\"group-1\">Group option 1</Item>\n                                <Item key=\"group-2\">Group option 2</Item>\n                            </Group>\n                            <Divider />\n                            <SubMenu key=\"sub-menu\" label=\"Sub menu\">\n                                <Item key=\"sub-1\">Sub option 1</Item>\n                                <Item key=\"sub-2\">Sub option 2</Item>\n                                <Item disabled key=\"sub-3\">\n                                    <a href=\"https://www.taobao.com/\" target=\"__blank\">Disabled Option Link 3</a>\n                                </Item>\n                                <Item key=\"sub-4\">\n                                    <a href=\"https://www.taobao.com/\" target=\"__blank\">Option Link 4</a>\n                                </Item>\n                            </SubMenu>\n                            <Item key=\"3\" helper=\"CTRL+P\">Option 3</Item>\n                            <Item disabled key=\"4\">\n                                <a href=\"https://www.taobao.com/\" target=\"__blank\">Disabled Option Link</a>\n                            </Item>\n                            <Item key=\"5\">\n                                <a href=\"https://www.taobao.com/\" target=\"__blank\">Option Link</a>\n                            </Item>\n                        </Menu>\n                    </div>\n                </ConfigProvider>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.my-menu {\n    width: 200px;\n}\n\n.change-locale {\n    border-bottom: 1px solid #d9d9d9;\n    padding-bottom: 16px;\n}\n\n.locale-components > * {\n    margin: 16px 0;\n    display: block;\n}
"} \ No newline at end of file diff --git a/compiled_docs/config-provider/index.en-us.md b/compiled_docs/config-provider/index.en-us.md new file mode 100644 index 0000000000..40f7092727 --- /dev/null +++ b/compiled_docs/config-provider/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Guide#

When To Use#

    \n
  • Modify the component class name prefix, the default prefix of the Next component class name is 'next-', such as 'next-btn', you may want to change this default prefix in the following two cases:
      \n
    • Custom component brands such as 'my-btn', 'my-select'
      • \n
    • Two themes in a page at the same time, preventing the same class name from overwriting each other
      • \n
    \n
    • \n
  • Support multiple languages
    • \n
  • Enable Pure Render mode to improve performance, and note that it may have side effects
    • \n
\n

Basic Usage#

Specify language#

Now support four languages: Simplified Chinese, Traditional Chinese, English and Japanese.

\n
import { ConfigProvider, DatePicker } from '@alifd/next';\nimport enUS from '@alifd/next/lib/locale/en-us';\n// import zhCN from '@alifd/next/lib/locale/zh-cn';\n// import zhTW from '@alifd/next/lib/locale/zh-tw';\n// import jaJP from '@alifd/next/lib/locale/ja-jp';\n\n// If the application directly imports the next-with-locales.js file from cdn\n// it need to import locale file in the following way\n// const { ConfigProvider, DatePicker, locales } = window.Next;\n// const enUS = locales['en-us'];\n\n\nclass App extends React.Component {\n    render() {\n        return (\n            <ConfigProvider locale={enUS}>\n                <DatePicker />\n            </ConfigProvider>\n        );\n    }\n}

The passed locale object has the following format:

\n
{\n    DatePicker: {\n        datePlaceholder: 'Select date',\n        monthPlaceholder: 'Select month',\n        yearPlaceholder: 'Select year',\n        rangeStartPlaceholder: 'Start date',\n        rangeEndPlaceholder: 'End date',\n        ok: 'OK',\n        clear: 'Clear'\n    },\n    Dialog: {\n        // ...\n    },\n    // ...\n}

Modify the component class name prefix#

    \n

  1. Wrapper ConfigProvider for your application and set the custom prefix

    \n

    entry.jsx

    \n
    class App extends React.Component {\n    render() {\n        return (\n            <ConfigProvider prefix="my-">\n                <div>\n                    <Input />\n                    <Button>Submit</Button>\n                </div>\n            </ConfigProvider>\n        );\n    }\n}
    2. \n

  2. Set the $css-prefix to the same value before importing the theme scss file in the scss entry file.

    \n

    entry.scss

    \n
    $css-prefix: "my-";\n@import "~@alifd/theme-xxx/index.scss";
    3. \n
\n

Enable Pure Render#

import { ConfigProvider, DatePicker } from '@alifd/next';\n\nclass App extends React.Component {\n    render() {\n        return (\n            <ConfigProvider pure>\n                <DatePicker />\n            </ConfigProvider>\n        );\n    }\n}

How to make the component support ConfigProvider ？#

import { ConfigProvider } from '@alifd/next';\nimport locale from './locale';\n\nconst { config } = ConfigProvider;\n\nclass Component extends React.Component {\n    static propTypes = {\n        prefix: PropTypes.string,\n        locale: PropTypes.object,\n        pure: PropTypes.bool\n    };\n\n    static defaultProps = {\n        prefix: 'next-',\n        locale: locale,\n        pure: false\n    };\n\n    render() {\n        const { prefix, locale, pure } = this.props;\n        // ...\n    }\n}\n\nexport default config(Component);

API#

","api":"

ConfigProvider#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault Value
errorBoundaryturn errorBoundary on or not
If you pass object, properties：

fallbackUI Function(error?: {}, errorInfo?: {}) => Element
afterCatch Function(error?: {}, errorInfo?: {}) after being catched, e.g. send data to server for data statistics		Boolean/Objectfalse
purewhether enable the Pure Render mode, it will improve performance, but it will also have side effectsBoolean-
warningwhether to display the warning prompt for component properties being deprecated in development modeBooleantrue
childrencomponent treeReactElement-
\n\n

ConfigProvider.config(Component)#

Pass the component and generate the HOC that is controlled by the ConfigProvider. If the component does not declare the shouldComponentUpdate method, the following shouldComponentUpdate method is added to support the pure property of the ConfigProvider.

\n
Component.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {\n    if (this.props.pure) {\n        return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);\n    }\n\n    return true;\n};

ConfigProvider.getContextProps(props, displayName)#

Pass the props and displayName of the component to get the object containing preifx/locale/pure calculated by childContext, it is generally used to generate components that are separated from the component tree through static methods.

\n

ConfigProvider.getContext()#

You can get the context of ConfigProvider via this method. The format of the value returned as follows. For multiple ConfigProvider nested, the results will be merged and the nearer the higher priority。

\n
{\n    prefix: nextPrefix,\n    locale: nextLocale,\n    pure: nextPure,\n    warning: nextWarning\n}

ConfigProvider.initLocales(locales)#

Config locales, together with method ConfigProvider.setLanguage to specify the language package

\n
ConfigProvider.initLocales({\n    'zh-cn': {},\n    'en-us': {}\n});

ConfigProvider.setLanguage(language)#

Set language, the parameter language needs to be one of the keys of locales which is the input of ConfigProvider.initLocales. zh-cn by default.

\n
ConfigProvider.setLanguage('zh-cn');

ConfigProvider.setLocale(locale)#

Set language package directly.

\n
// The effect is the same as using ConfigProvider.initLocales and ConfigProvider.setLanguage\nConfigProvider.setLocale({\n    DatePicker: {},\n    Dialog: {}\n});

ConfigProvider.setDirection(dir)#

Set dir, when it is rtl, dir="rtl" will be added on the DOM element of each component's root node.

\n
ConfigProvider.setDirection('rtl');

ConfigProvider.getLocale()#

Return the setted language package.

\n

ConfigProvider.getLanguage()#

Return the language's name.

\n

ConfigProvider.getDirection()#

Return the direction.

\n\n

Note#

Reduce moment size built with webpack#

Next 1.x will use moment as its peerDependencies instead of dependencies, so the user needs to import the moment's cdn file moment-with-locales.js or the local moment module into his own application. For the latter, due to the moment has such code: require('./locale/' + name) to import locale files, if built with webpack, it will be packaged into all locale files to increase the size of files. There are two main solutions in the current community:

\n
const webpack = require('webpack');\n\nmodule.exports = {\n    // ...\n    plugins: [\n    // Package the specified language files\n        new webpack.ContextReplacementPlugin(/moment[\\/\\\\]locale$/, /zh-cn|ja/)\n    // Only package the language files referenced, and should add `import 'moment/locale/zh-cn';` in the application\n    // new webpack.IgnorePlugin(/^\\.\\/locale$/, /moment$/)\n    ]\n};

Add displayName for the custom component#

ConfigProvider use a Component's displayName or name to get its locale. However, the name of the function may be modified in the process of compression and uglifying. Therefore, if you want to support multi-language, you shoul add displayName to the component manually:

\n
class CustomComponent extends React.Component {\n    static displayName = 'CustomComponent';\n    // ...\n}

Or use babel-plugin-transform-react-es6-displayname to add displayName during compilation automatically.

\n

Get the internal component's reference of the HOC#

Due to the limit of the HOC itself, we can't get the reference of an internal component and call some of its internal methods as below:

\n
class App extends React.Component {\n    componentDidMount() {\n        // throw an error\n        this.refs.hoc.someMethod();\n    }\n\n    render() {\n        return <HOC ref="hoc" />;\n    }\n}

To solve this problem, we provide a method called getInstance of the HOC generated by calling the config method. You can call it as below:

\n
class App extends React.Component {\n    componentDidMount() {\n        this.refs.hoc.getInstance().someMethod();\n    }\n\n    render() {\n        return <HOC ref="hoc" />;\n    }\n}
"} \ No newline at end of file diff --git a/compiled_docs/config-provider/index.md b/compiled_docs/config-provider/index.md new file mode 100644 index 0000000000..3fea4afd64 --- /dev/null +++ b/compiled_docs/config-provider/index.md @@ -0,0 +1 @@ +{"meta":"

开发指南#

何时使用#

    \n
  • 修改组件类名前缀，Next 组件类名的默认前缀都是 'next-'，如 'next-btn'，你可能在以下两种情况下想改变这个默认前缀：
      \n
    • 自定义组件品牌，如 'my-btn'，'my-select'
      • \n
    • 一个页面中同时引入两个主题，防止相同类名样式互相覆盖
      • \n
    \n
    • \n
  • 实现多语言文案切换
    • \n
  • 开启 Pure Render 模式，提高性能，注意同时可能会带来副作用
    • \n
\n

基本使用#

指定多语言文案#

通过 <ConfigProvider locale={localeObj}> 传入语言包，以支持多语言。目前 Fusion 内置的 locale 库支持中英繁日四种语言，覆盖各组件的简单词汇，例如：确定、取消、展开、收起、下一页等， 简单词汇映射表可参考 https://unpkg.com/@alifd/next/lib/locale/\n
\n(ConfigProvider 提供简单组件简单词汇国际化能力，由于日期时间的国际化较为特殊，例如中国的日历是从周一到周日，美国的日历是从周日到周六等，时间相关的组件如DatePicker等需要国际化，请查看相应组件文档。)\n

\n

可通过两种方式设置多语言文案，两种方式接收的对象格式略有不同:

\n
    \n
  • 1.设置组件自身 locale 属性
    • \n
\n
{\n    key1: value1,\n    key2: value2\n}
    \n
  • 2.ConfigProvider 的 locale 属性 (推荐)
    • \n
\n
{\n    component1: {\n        key1: value1,\n        key2: value2\n    },\n    component2: {\n        key1: value1,\n        key2: value2\n    }\n}

优先级顺序为: 组件自身 locale > 最近 ConfigProvider 的 locale > 更远父级 ConfigProvider 的 locale

\n

(注： 由于Dialog.show() Message.show() 等函数式方法的特殊性，他们的将默认读取页面上的root context。当页面上有多个包含<ConfigProvider/> 的 ReactDOM.render()方法调用时，由第一个渲染的决定root context)

\n
import { ConfigProvider, DatePicker } from '@alifd/next';\n\nconst localeDatePicker = {\n  placeholder: 'localeDatePicker placeholder'\n};\n\nconst localeGlobal = {\n  DatePicker: {\n    placeholder: 'localeGlobal placeholder'\n  }\n};\n\nclass App extends React.Component {\n    render() {\n        return (\n            <div>\n                <ConfigProvider locale={localeGlobal}>\n                    <DatePicker /> should be 'localeGlobal placeholder'\n                </ConfigProvider>\n                <br />\n                <br />\n                <ConfigProvider locale={localeGlobal}>\n                    <DatePicker locale={localeDatePicker} /> should be 'localeDatePicker placeholder'\n                </ConfigProvider>\n            </div>\n        );\n    }\n}

根据引入组件库方式的不同(CDN直接引用、作为依赖引用)，使用语言包的方式略有差异，具体见如下代码：\n

\n
import { ConfigProvider, DatePicker } from '@alifd/next';\nimport enUS from '@alifd/next/lib/locale/en-us';\n// import zhCN from '@alifd/next/lib/locale/zh-cn';\n// import zhTW from '@alifd/next/lib/locale/zh-tw';\n// import jaJP from '@alifd/next/lib/locale/ja-jp';\n\n// 如果应用中直接引入的是 cdn 上的 next-with-locales.js 文件\n// 需要按照下面的方式引入国际化文案文件\n// const { ConfigProvider, DatePicker, locales } = window.Next;\n// const enUS = locales['en-us'];\n\n\nclass App extends React.Component {\n    render() {\n        return (\n            <ConfigProvider locale={enUS}>\n                <DatePicker />\n            </ConfigProvider>\n        );\n    }\n}

如果内置的 locale 库不满足你的需求(比如想支持法语、德语、西班牙语)，你也可以参考 https://unpkg.com/@alifd/next/lib/locale/ 来自定义语言包，按照如下格式传入给 locale 即可：

\n
{\n    DatePicker: {\n        datePlaceholder: 'Select date',\n        monthPlaceholder: 'Select month',\n        yearPlaceholder: 'Select year',\n        rangeStartPlaceholder: 'Start date',\n        rangeEndPlaceholder: 'End date',\n        ok: 'OK',\n        clear: 'Clear'\n    },\n    Dialog: {\n        // ...\n    },\n    // ...\n}

修改组件类名前缀#

    \n

  1. 为你的应用包裹 ConfigProvider，并设置相应的 prefix

    \n

    entry.jsx

    \n
    class App extends React.Component {\n    render() {\n        return (\n            <ConfigProvider prefix="my-">\n                <div>\n                    <Input />\n                    <Button>Submit</Button>\n                </div>\n            </ConfigProvider>\n        );\n    }\n}
    2. \n

  2. scss 入口文件中在引入主题 scss 文件前，设置相应的 $css-prefix

    \n

    entry.scss

    \n
    $css-prefix: "my-";\n@import "~@alifd/theme-xxx/index.scss";
    3. \n
\n

开启 Pure Render#

import { ConfigProvider, DatePicker } from '@alifd/next';\n\nclass App extends React.Component {\n    render() {\n        return (\n            <ConfigProvider pure>\n                <DatePicker />\n            </ConfigProvider>\n        );\n    }\n}

如何让组件支持 ConfigProvider ？#

import { ConfigProvider } from '@alifd/next';\nimport locale from './locale';\n\nconst { config } = ConfigProvider;\n\nclass Component extends React.Component {\n    static propTypes = {\n        prefix: PropTypes.string,\n        locale: PropTypes.object,\n        pure: PropTypes.bool\n    };\n\n    static defaultProps = {\n        prefix: 'next-',\n        locale: locale,\n        pure: false\n    };\n\n    render() {\n        const { prefix, locale, pure } = this.props;\n        // ...\n    }\n}\n\nexport default config(Component);

API#

","api":"

ConfigProvider#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
errorBoundary是否开启错误捕捉 errorBoundary
如需自定义参数，请传入对象 对象接受参数列表如下：

fallbackUI Function(error?: {}, errorInfo?: {}) => Element 捕获错误后的展示
afterCatch Function(error?: {}, errorInfo?: {}) 捕获错误后的行为, 比如埋点上传		Boolean/Objectfalse
pure是否开启 Pure Render 模式，会提高性能，但是也会带来副作用Boolean-
warning是否在开发模式下显示组件属性被废弃的 warning 提示Booleantrue
rtl是否开启 rtl 模式Boolean-
children组件树ReactElement-
\n\n

ConfigProvider.config(Component)#

传入组件，生成受 ConfigProvider 控制的 HOC 组件，如果组件没有声明 shouldComponentUpdate 方法，会添加如下 shouldComponentUpdate 方法以支持 ConfigProvider 的 pure 属性

\n
Component.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {\n    if (this.props.pure) {\n        return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);\n    }\n\n    return true;\n};

ConfigProvider.getContextProps(props, displayName)#

传入组件的 props 和 displayName，得到和 childContext 计算过的包含有 preifx/locale/pure 的对象，一般用于通过静态方法生成脱离组件树的组件。

\n

ConfigProvider.getContext()#

通过该方法可以获取到 ConfigProvider 的上下文，格式如下。若有多层级 ConfigProvider 嵌套，会返回merge后的结果，关系近的优先。

\n
{\n    prefix: nextPrefix,\n    locale: nextLocale,\n    pure: nextPure,\n    warning: nextWarning\n}

ConfigProvider.initLocales(locales)#

配置所有语言包, 可配合 ConfigProvider.setLanguage 方法，确定组件使用的语言包。

\n
ConfigProvider.initLocales({\n    'zh-cn': {},\n    'en-us': {}\n});

ConfigProvider.setLanguage(language)#

设置语言，参数 language 需要能在 ConfigProvider.initLocales 方法传入的参数的 key 中找到， 默认为 zh-cn

\n
ConfigProvider.setLanguage('zh-cn');

ConfigProvider.setLocale(locale)#

直接设置语言包

\n
// 相当于 同时用ConfigProvider.initLocales 和 ConfigProvider.setLanguage\nConfigProvider.setLocale({\n    DatePicker: {},\n    Dialog: {}\n});

ConfigProvider.setDirection(dir)#

设置组件展示方向，当传入 rtl时，会在组件的根DOM节点加上 dir="rtl"，同时组件展示rtl视觉。可用于阿拉伯等阅读顺序从右到左的国家。

\n
ConfigProvider.setDirection('rtl');

ConfigProvider.getLocale()#

获取当前的语言包

\n

ConfigProvider.getLanguage()#

获取当前设定的语言

\n

ConfigProvider.getDirection()#

获取当前设定的方向

\n\n

使用注意#

减小应用中 webpack 打包 moment 体积#

Next 1.x 中将 moment 作为自己的 peerDependencies 而非 dependencies，所以用户需要自己在应用中引入 moment 的 cdn 文件 moment-with-locales.js 或者本地安装 moment 打包进自己的应用。对于后者，由于 moment 在引入 locale 文件时存在这样的代码：require('./locale/' + name)，如果用 webpack 构建，会打包进所有的 locale 文件，增加构建后文件的体积，目前社区比较主流的解决方案有以下两种：

\n
const webpack = require('webpack');\n\nmodule.exports = {\n    // ...\n    plugins: [\n    // 打包指定需要的语言文件\n        new webpack.ContextReplacementPlugin(/moment[\\/\\\\]locale$/, /zh-cn|ja/)\n    // 只打包有过引用的语言文件，应用中需要添加如：`import 'moment/locale/zh-cn';`\n    // new webpack.IgnorePlugin(/^\\.\\/locale$/, /moment$/)\n    ]\n};

为自定义组件添加 displayName#

ConfigProvider 获取组件对应的多语言文案，是通过组件的 displayName 或者 name 获取的，但是压缩混淆的过程中有可能会修改函数的 name，因此如果想支持在 ConfigProvider 下实现切换多语言切换，请为组件如下手动添加 displayName:

\n
class CustomComponent extends React.Component {\n    static displayName = 'CustomComponent';\n    // ...\n}

或者使用 babel-plugin-transform-react-es6-displayname 自动在编译期间添加 displayname。

\n

获取 HOC 组件内部组件的引用#

由于 HOC 本身的限制，我们不能直接像下面代码那样获取内部组件的引用，从而调用它的一些内部方法：

\n
class App extends React.Component {\n    componentDidMount() {\n        // 报错\n        this.refs.hoc.someMethod();\n    }\n\n    render() {\n        return <HOC ref="hoc" />;\n    }\n}

为了解决这个问题，我们为调用 config 方法生成的 HOC 组件添加了 getInstance 方法，你可以如下调用：

\n
class App extends React.Component {\n    componentDidMount() {\n        this.refs.hoc.getInstance().someMethod();\n    }\n\n    render() {\n        return <HOC ref="hoc" />;\n    }\n}
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/accessibility.en-us.md b/compiled_docs/date-picker/demo/accessibility.en-us.md new file mode 100644 index 0000000000..7a2a704d34 --- /dev/null +++ b/compiled_docs/date-picker/demo/accessibility.en-us.md @@ -0,0 +1 @@ +{"title":"Accessibility","meta":{"title":"Accessibility","description":"\n

Support manual input or keyboard operation,Please refer to ARIA and KeyBoard.

\n","order":"13"},"codes":{"jsx":"import { DatePicker } from '@alifd/next';\n\nconst { RangePicker, MonthPicker, YearPicker } = DatePicker;\nconst onChange = val => console.log(val);\n\nReactDOM.render(
\n

\n \n
, mountNode);\n"},"body":"\n````jsx\nimport { DatePicker } from '@alifd/next';\n\nconst { RangePicker, MonthPicker, YearPicker } = DatePicker;\nconst onChange = val => console.log(val);\n\nReactDOM.render(
\n

\n \n
, mountNode);\n````","html":"
import { DatePicker } from '@alifd/next';\n\nconst { RangePicker, MonthPicker, YearPicker } = DatePicker;\nconst onChange = val => console.log(val);\n\nReactDOM.render(<div>\n    <DatePicker dateInputAriaLabel=\"date input\" inputProps={{\"aria-label\": \"date picker main\"}}  onChange={onChange} /> <br /><br />\n    <RangePicker startDateInputAriaLabel=\"start date\" startTimeInputAriaLabel=\"start time\" endDateInputAriaLabel=\"end date\" endTimeInputAriaLabel=\"end time\" onChange={onChange} inputProps={{\"aria-label\": \"range picker main\"}} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/accessibility.md b/compiled_docs/date-picker/demo/accessibility.md new file mode 100644 index 0000000000..139fcf99a4 --- /dev/null +++ b/compiled_docs/date-picker/demo/accessibility.md @@ -0,0 +1 @@ +{"title":"无障碍","meta":{"title":"无障碍","description":"\n

支持手动输入或键盘操作，请参考ARIA and KeyBoard。

\n","order":"13"},"codes":{"jsx":"import { DatePicker } from '@alifd/next';\n\nconst { RangePicker, MonthPicker, YearPicker } = DatePicker;\nconst onChange = val => console.log(val);\n\nReactDOM.render(
\n

\n \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { DatePicker } from '@alifd/next';\n\nconst { RangePicker, MonthPicker, YearPicker } = DatePicker;\nconst onChange = val => console.log(val);\n\nReactDOM.render(
\n

\n \n
, mountNode);\n````","html":"
import { DatePicker } from '@alifd/next';\n\nconst { RangePicker, MonthPicker, YearPicker } = DatePicker;\nconst onChange = val => console.log(val);\n\nReactDOM.render(<div>\n    <DatePicker dateInputAriaLabel=\"date input\" inputProps={{\"aria-label\": \"date picker main\"}}  onChange={onChange} /> <br /><br />\n    <RangePicker startDateInputAriaLabel=\"start date\" startTimeInputAriaLabel=\"start time\" endDateInputAriaLabel=\"end date\" endTimeInputAriaLabel=\"end time\" onChange={onChange} inputProps={{\"aria-label\": \"range picker main\"}} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/basic.en-us.md b/compiled_docs/date-picker/demo/basic.en-us.md new file mode 100644 index 0000000000..f3badf9d55 --- /dev/null +++ b/compiled_docs/date-picker/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

A basic usage case.

\n","order":"0"},"codes":{"jsx":"import { DatePicker } from '@alifd/next';\n\nconst { RangePicker, MonthPicker, YearPicker } = DatePicker;\nconst onChange = val => console.log(val);\n\nReactDOM.render(
\n

\n

\n

\n \n
, mountNode);\n"},"body":"\n````jsx\nimport { DatePicker } from '@alifd/next';\n\nconst { RangePicker, MonthPicker, YearPicker } = DatePicker;\nconst onChange = val => console.log(val);\n\nReactDOM.render(
\n

\n

\n

\n \n
, mountNode);\n````","html":"
import { DatePicker } from '@alifd/next';\n\nconst { RangePicker, MonthPicker, YearPicker } = DatePicker;\nconst onChange = val => console.log(val);\n\nReactDOM.render(<div>\n    <DatePicker onChange={onChange} /> <br /><br />\n    <MonthPicker onChange={onChange} /> <br /><br />\n    <YearPicker onChange={onChange} /> <br /><br />\n    <RangePicker onChange={onChange} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/basic.md b/compiled_docs/date-picker/demo/basic.md new file mode 100644 index 0000000000..373cf2b2b4 --- /dev/null +++ b/compiled_docs/date-picker/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本用法","meta":{"title":"基本用法","description":"\n

最基本的用法。可以通过 onChange 监听选中值的变化。

\n","order":"0"},"codes":{"jsx":"import { DatePicker } from '@alifd/next';\n\nconst { RangePicker, MonthPicker, YearPicker } = DatePicker;\nconst onChange = val => console.log(val);\n\nReactDOM.render(
\n

\n

\n

\n \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { DatePicker } from '@alifd/next';\n\nconst { RangePicker, MonthPicker, YearPicker } = DatePicker;\nconst onChange = val => console.log(val);\n\nReactDOM.render(
\n

\n

\n

\n \n
, mountNode);\n````","html":"
import { DatePicker } from '@alifd/next';\n\nconst { RangePicker, MonthPicker, YearPicker } = DatePicker;\nconst onChange = val => console.log(val);\n\nReactDOM.render(<div>\n    <DatePicker onChange={onChange} /> <br /><br />\n    <MonthPicker onChange={onChange} /> <br /><br />\n    <YearPicker onChange={onChange} /> <br /><br />\n    <RangePicker onChange={onChange} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/custom-range-picker.en-us.md b/compiled_docs/date-picker/demo/custom-range-picker.en-us.md new file mode 100644 index 0000000000..44c0225386 --- /dev/null +++ b/compiled_docs/date-picker/demo/custom-range-picker.en-us.md @@ -0,0 +1 @@ +{"title":"Custom RangePicker","meta":{"title":"Custom RangePicker","description":"\n

Create your own RangePicker with two DatePickers.

\n","order":"8"},"codes":{"jsx":"import { DatePicker } from '@alifd/next';\n\nclass CustomRangePicker extends React.Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n startValue: null,\n endValue: null,\n endOpen: false\n };\n }\n\n disabledStartDate = (startValue) => {\n const { endValue } = this.state;\n if (!startValue || !endValue) {\n return false;\n }\n return startValue.valueOf() > endValue.valueOf();\n }\n\n disabledEndDate = (endValue) => {\n const { startValue } = this.state;\n if (!endValue || !startValue) {\n return false;\n }\n return endValue.valueOf() <= startValue.valueOf();\n }\n\n onChange = (stateName, value) => {\n this.setState({\n [stateName]: value\n });\n }\n\n onStartChange = (value) => {\n this.onChange('startValue', value);\n }\n\n onEndChange = value => {\n this.onChange('endValue', value);\n }\n\n handleStartOpenChange = (open) => {\n if (!open) {\n this.setState({ endOpen: true });\n }\n }\n\n handleEndOpenChange = (open) => {\n this.setState({ endOpen: open });\n }\n\n render() {\n const { endOpen } = this.state;\n return (\n
\n \n -\n \n
\n );\n }\n}\n\nReactDOM.render(
\n \n
, mountNode);\n","css":".custom-sep {\n margin: 0 6px;\n color: #999;\n}\n"},"body":"\n````jsx\nimport { DatePicker } from '@alifd/next';\n\nclass CustomRangePicker extends React.Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n startValue: null,\n endValue: null,\n endOpen: false\n };\n }\n\n disabledStartDate = (startValue) => {\n const { endValue } = this.state;\n if (!startValue || !endValue) {\n return false;\n }\n return startValue.valueOf() > endValue.valueOf();\n }\n\n disabledEndDate = (endValue) => {\n const { startValue } = this.state;\n if (!endValue || !startValue) {\n return false;\n }\n return endValue.valueOf() <= startValue.valueOf();\n }\n\n onChange = (stateName, value) => {\n this.setState({\n [stateName]: value\n });\n }\n\n onStartChange = (value) => {\n this.onChange('startValue', value);\n }\n\n onEndChange = value => {\n this.onChange('endValue', value);\n }\n\n handleStartOpenChange = (open) => {\n if (!open) {\n this.setState({ endOpen: true });\n }\n }\n\n handleEndOpenChange = (open) => {\n this.setState({ endOpen: open });\n }\n\n render() {\n const { endOpen } = this.state;\n return (\n
\n \n -\n \n
\n );\n }\n}\n\nReactDOM.render(
\n \n
, mountNode);\n````\n\n````css\n.custom-sep {\n margin: 0 6px;\n color: #999;\n}\n````","html":"
import { DatePicker } from '@alifd/next';\n\nclass CustomRangePicker extends React.Component {\n    constructor(props, context) {\n        super(props, context);\n        this.state = {\n            startValue: null,\n            endValue: null,\n            endOpen: false\n        };\n    }\n\n    disabledStartDate = (startValue) => {\n        const { endValue } = this.state;\n        if (!startValue || !endValue) {\n            return false;\n        }\n        return startValue.valueOf() > endValue.valueOf();\n    }\n\n    disabledEndDate = (endValue) => {\n        const { startValue } = this.state;\n        if (!endValue || !startValue) {\n            return false;\n        }\n        return endValue.valueOf() <= startValue.valueOf();\n    }\n\n    onChange = (stateName, value) => {\n        this.setState({\n            [stateName]: value\n        });\n    }\n\n    onStartChange = (value) => {\n        this.onChange('startValue', value);\n    }\n\n    onEndChange = value => {\n        this.onChange('endValue', value);\n    }\n\n    handleStartOpenChange = (open) => {\n        if (!open) {\n            this.setState({ endOpen: true });\n        }\n    }\n\n    handleEndOpenChange = (open) => {\n        this.setState({ endOpen: open });\n    }\n\n    render() {\n        const { endOpen } = this.state;\n        return (\n            <div>\n                <DatePicker\n                    disabledDate={this.disabledStartDate}\n                    placeholder=\"Departure Date\"\n                    onChange={this.onStartChange}\n                    onVisibleChange={this.handleStartOpenChange}\n                />\n                <span className=\"custom-sep\">-</span>\n                <DatePicker\n                    disabledDate={this.disabledEndDate}\n                    placeholder=\"Return Date\"\n                    onChange={this.onEndChange}\n                    visible={endOpen}\n                    onVisibleChange={this.handleEndOpenChange}\n                />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<div>\n    <CustomRangePicker />\n</div>, mountNode);
.custom-sep {\n    margin: 0 6px;\n    color: #999;\n}
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/custom-range-picker.md b/compiled_docs/date-picker/demo/custom-range-picker.md new file mode 100644 index 0000000000..59ef858241 --- /dev/null +++ b/compiled_docs/date-picker/demo/custom-range-picker.md @@ -0,0 +1 @@ +{"title":"自定义日期范围选择","meta":{"title":"自定义日期范围选择","description":"\n

如果默认的 RangePicker 在交互上无法满足您的使用需求，还可以基于 DatePicker 封装实现类似的功能。\n例如，示例中的日期选择可以自由的更改开始或结束日期，而不必每次选择时重置日期。

\n","order":"8"},"codes":{"jsx":"import { DatePicker } from '@alifd/next';\n\nclass CustomRangePicker extends React.Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n startValue: null,\n endValue: null,\n endOpen: false\n };\n }\n\n disabledStartDate = (startValue) => {\n const { endValue } = this.state;\n if (!startValue || !endValue) {\n return false;\n }\n return startValue.valueOf() > endValue.valueOf();\n }\n\n disabledEndDate = (endValue) => {\n const { startValue } = this.state;\n if (!endValue || !startValue) {\n return false;\n }\n return endValue.valueOf() <= startValue.valueOf();\n }\n\n onChange = (stateName, value) => {\n this.setState({\n [stateName]: value\n });\n }\n\n onStartChange = (value) => {\n this.onChange('startValue', value);\n }\n\n onEndChange = value => {\n this.onChange('endValue', value);\n }\n\n handleStartOpenChange = (open) => {\n if (!open) {\n this.setState({ endOpen: true });\n }\n }\n\n handleEndOpenChange = (open) => {\n this.setState({ endOpen: open });\n }\n\n render() {\n const { endOpen } = this.state;\n return (\n
\n \n -\n \n
\n );\n }\n}\n\nReactDOM.render(
\n \n
, mountNode);\n","css":".custom-sep {\n margin: 0 6px;\n color: #999;\n}\n"},"body":"\n\n````jsx\nimport { DatePicker } from '@alifd/next';\n\nclass CustomRangePicker extends React.Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n startValue: null,\n endValue: null,\n endOpen: false\n };\n }\n\n disabledStartDate = (startValue) => {\n const { endValue } = this.state;\n if (!startValue || !endValue) {\n return false;\n }\n return startValue.valueOf() > endValue.valueOf();\n }\n\n disabledEndDate = (endValue) => {\n const { startValue } = this.state;\n if (!endValue || !startValue) {\n return false;\n }\n return endValue.valueOf() <= startValue.valueOf();\n }\n\n onChange = (stateName, value) => {\n this.setState({\n [stateName]: value\n });\n }\n\n onStartChange = (value) => {\n this.onChange('startValue', value);\n }\n\n onEndChange = value => {\n this.onChange('endValue', value);\n }\n\n handleStartOpenChange = (open) => {\n if (!open) {\n this.setState({ endOpen: true });\n }\n }\n\n handleEndOpenChange = (open) => {\n this.setState({ endOpen: open });\n }\n\n render() {\n const { endOpen } = this.state;\n return (\n
\n \n -\n \n
\n );\n }\n}\n\nReactDOM.render(
\n \n
, mountNode);\n````\n\n````css\n.custom-sep {\n margin: 0 6px;\n color: #999;\n}\n````","html":"
import { DatePicker } from '@alifd/next';\n\nclass CustomRangePicker extends React.Component {\n    constructor(props, context) {\n        super(props, context);\n        this.state = {\n            startValue: null,\n            endValue: null,\n            endOpen: false\n        };\n    }\n\n    disabledStartDate = (startValue) => {\n        const { endValue } = this.state;\n        if (!startValue || !endValue) {\n            return false;\n        }\n        return startValue.valueOf() > endValue.valueOf();\n    }\n\n    disabledEndDate = (endValue) => {\n        const { startValue } = this.state;\n        if (!endValue || !startValue) {\n            return false;\n        }\n        return endValue.valueOf() <= startValue.valueOf();\n    }\n\n    onChange = (stateName, value) => {\n        this.setState({\n            [stateName]: value\n        });\n    }\n\n    onStartChange = (value) => {\n        this.onChange('startValue', value);\n    }\n\n    onEndChange = value => {\n        this.onChange('endValue', value);\n    }\n\n    handleStartOpenChange = (open) => {\n        if (!open) {\n            this.setState({ endOpen: true });\n        }\n    }\n\n    handleEndOpenChange = (open) => {\n        this.setState({ endOpen: open });\n    }\n\n    render() {\n        const { endOpen } = this.state;\n        return (\n            <div>\n                <DatePicker\n                    disabledDate={this.disabledStartDate}\n                    placeholder=\"Departure Date\"\n                    onChange={this.onStartChange}\n                    onVisibleChange={this.handleStartOpenChange}\n                />\n                <span className=\"custom-sep\">-</span>\n                <DatePicker\n                    disabledDate={this.disabledEndDate}\n                    placeholder=\"Return Date\"\n                    onChange={this.onEndChange}\n                    visible={endOpen}\n                    onVisibleChange={this.handleEndOpenChange}\n                />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<div>\n    <CustomRangePicker />\n</div>, mountNode);
.custom-sep {\n    margin: 0 6px;\n    color: #999;\n}
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/default-visible-month.en-us.md b/compiled_docs/date-picker/demo/default-visible-month.en-us.md new file mode 100644 index 0000000000..86c9e5507a --- /dev/null +++ b/compiled_docs/date-picker/demo/default-visible-month.en-us.md @@ -0,0 +1 @@ +{"title":"Default visible month","meta":{"title":"Default visible month","description":"\n

Change default visible month by setting defaultVisibleMonth or defaultVisibleYear.

\n","order":"2"},"codes":{"jsx":"import { DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst { RangePicker, MonthPicker } = DatePicker;\n\nfunction onVisibleMonthChange(val, reason) {\n console.log(val.format('L'), reason);\n}\n\nReactDOM.render(
\n

Setting last month as default visible month

\n moment().add(-1, 'months')} onVisibleMonthChange={onVisibleMonthChange} />\n

\n moment().add(-1, 'months')} onVisibleMonthChange={onVisibleMonthChange} />\n

\n

Setting 2017 as default visible year

\n moment('2017', 'YYYY')} />\n
, mountNode);\n"},"body":"\n````jsx\nimport { DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst { RangePicker, MonthPicker } = DatePicker;\n\nfunction onVisibleMonthChange(val, reason) {\n console.log(val.format('L'), reason);\n}\n\nReactDOM.render(
\n

Setting last month as default visible month

\n moment().add(-1, 'months')} onVisibleMonthChange={onVisibleMonthChange} />\n

\n moment().add(-1, 'months')} onVisibleMonthChange={onVisibleMonthChange} />\n

\n

Setting 2017 as default visible year

\n moment('2017', 'YYYY')} />\n
, mountNode);\n````","html":"
import { DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst { RangePicker, MonthPicker } = DatePicker;\n\nfunction onVisibleMonthChange(val, reason) {\n    console.log(val.format('L'), reason);\n}\n\nReactDOM.render(<div>\n    <p>Setting last month as default visible month</p>\n    <DatePicker defaultVisibleMonth={() => moment().add(-1, 'months')} onVisibleMonthChange={onVisibleMonthChange} />\n    <br /><br />\n    <RangePicker defaultVisibleMonth={() => moment().add(-1, 'months')} onVisibleMonthChange={onVisibleMonthChange} />\n    <br /><br />\n    <p>Setting 2017 as default visible year</p>\n    <MonthPicker defaultVisibleYear={() => moment('2017', 'YYYY')} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/default-visible-month.md b/compiled_docs/date-picker/demo/default-visible-month.md new file mode 100644 index 0000000000..579a9c878d --- /dev/null +++ b/compiled_docs/date-picker/demo/default-visible-month.md @@ -0,0 +1 @@ +{"title":"面板的默认展现日期","meta":{"title":"面板的默认展现日期","description":"\n

可以通过 defaultVisibleMonth 或 defaultVisibleYear 属性可以修改面板的默认展现日期。

\n","order":"2"},"codes":{"jsx":"import { DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst { RangePicker, MonthPicker } = DatePicker;\n\nfunction onVisibleMonthChange(val, reason) {\n console.log(val.format('L'), reason);\n}\n\nReactDOM.render(
\n

Setting last month as default visible month

\n moment().add(-1, 'months')} onVisibleMonthChange={onVisibleMonthChange} />\n

\n moment().add(-1, 'months')} onVisibleMonthChange={onVisibleMonthChange} />\n

\n

Setting 2017 as default visible year

\n moment('2017', 'YYYY')} />\n
, mountNode);\n"},"body":"\n\n````jsx\nimport { DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst { RangePicker, MonthPicker } = DatePicker;\n\nfunction onVisibleMonthChange(val, reason) {\n console.log(val.format('L'), reason);\n}\n\nReactDOM.render(
\n

Setting last month as default visible month

\n moment().add(-1, 'months')} onVisibleMonthChange={onVisibleMonthChange} />\n

\n moment().add(-1, 'months')} onVisibleMonthChange={onVisibleMonthChange} />\n

\n

Setting 2017 as default visible year

\n moment('2017', 'YYYY')} />\n
, mountNode);\n````","html":"
import { DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst { RangePicker, MonthPicker } = DatePicker;\n\nfunction onVisibleMonthChange(val, reason) {\n    console.log(val.format('L'), reason);\n}\n\nReactDOM.render(<div>\n    <p>Setting last month as default visible month</p>\n    <DatePicker defaultVisibleMonth={() => moment().add(-1, 'months')} onVisibleMonthChange={onVisibleMonthChange} />\n    <br /><br />\n    <RangePicker defaultVisibleMonth={() => moment().add(-1, 'months')} onVisibleMonthChange={onVisibleMonthChange} />\n    <br /><br />\n    <p>Setting 2017 as default visible year</p>\n    <MonthPicker defaultVisibleYear={() => moment('2017', 'YYYY')} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/default.en-us.md b/compiled_docs/date-picker/demo/default.en-us.md new file mode 100644 index 0000000000..af8c7e7a98 --- /dev/null +++ b/compiled_docs/date-picker/demo/default.en-us.md @@ -0,0 +1 @@ +{"title":"Default value","meta":{"title":"Default value","description":"\n

Setting default value by passing defaultValue.

\n","order":"1"},"codes":{"jsx":"import { DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst { RangePicker, MonthPicker, YearPicker } = DatePicker;\nconst startValue = moment('2017-11-20', 'YYYY-MM-DD', true);\nconst endValue = moment('2017-12-15', 'YYYY-MM-DD', true);\nconst onChange = val => console.log(val);\n\nReactDOM.render(
\n

\n

\n

\n \n
, mountNode);\n"},"body":"\n````jsx\nimport { DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst { RangePicker, MonthPicker, YearPicker } = DatePicker;\nconst startValue = moment('2017-11-20', 'YYYY-MM-DD', true);\nconst endValue = moment('2017-12-15', 'YYYY-MM-DD', true);\nconst onChange = val => console.log(val);\n\nReactDOM.render(
\n

\n

\n

\n \n
, mountNode);\n````","html":"
import { DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst { RangePicker, MonthPicker, YearPicker } = DatePicker;\nconst startValue = moment('2017-11-20', 'YYYY-MM-DD', true);\nconst endValue = moment('2017-12-15', 'YYYY-MM-DD', true);\nconst onChange = val => console.log(val);\n\nReactDOM.render(<div>\n    <DatePicker defaultValue={startValue} onChange={onChange} /><br /><br />\n    <MonthPicker defaultValue={startValue} onChange={onChange} /><br /><br />\n    <YearPicker defaultValue={startValue} onChange={onChange} /><br /><br />\n    <RangePicker defaultValue={[startValue, endValue]} onChange={onChange} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/default.md b/compiled_docs/date-picker/demo/default.md new file mode 100644 index 0000000000..64998ff8df --- /dev/null +++ b/compiled_docs/date-picker/demo/default.md @@ -0,0 +1 @@ +{"title":"提供默认值","meta":{"title":"提供默认值","description":"\n

可以通过 defaultValue 属性为日期选择器提供初值，所提供的初值必须为 moment 对象。

\n","order":"1"},"codes":{"jsx":"import { DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst { RangePicker, MonthPicker, YearPicker } = DatePicker;\nconst startValue = moment('2017-11-20', 'YYYY-MM-DD', true);\nconst endValue = moment('2017-12-15', 'YYYY-MM-DD', true);\nconst onChange = val => console.log(val);\n\nReactDOM.render(
\n

\n

\n

\n \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst { RangePicker, MonthPicker, YearPicker } = DatePicker;\nconst startValue = moment('2017-11-20', 'YYYY-MM-DD', true);\nconst endValue = moment('2017-12-15', 'YYYY-MM-DD', true);\nconst onChange = val => console.log(val);\n\nReactDOM.render(
\n

\n

\n

\n \n
, mountNode);\n````","html":"
import { DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst { RangePicker, MonthPicker, YearPicker } = DatePicker;\nconst startValue = moment('2017-11-20', 'YYYY-MM-DD', true);\nconst endValue = moment('2017-12-15', 'YYYY-MM-DD', true);\nconst onChange = val => console.log(val);\n\nReactDOM.render(<div>\n    <DatePicker defaultValue={startValue} onChange={onChange} /><br /><br />\n    <MonthPicker defaultValue={startValue} onChange={onChange} /><br /><br />\n    <YearPicker defaultValue={startValue} onChange={onChange} /><br /><br />\n    <RangePicker defaultValue={[startValue, endValue]} onChange={onChange} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/disabled-date.en-us.md b/compiled_docs/date-picker/demo/disabled-date.en-us.md new file mode 100644 index 0000000000..603cce0ca1 --- /dev/null +++ b/compiled_docs/date-picker/demo/disabled-date.en-us.md @@ -0,0 +1 @@ +{"title":"Disable dates","meta":{"title":"Disable dates","description":"\n

Disable date cells by disabledDate.

\n","order":"4"},"codes":{"jsx":"import { DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst { RangePicker, MonthPicker, YearPicker } = DatePicker;\nconst currentDate = moment();\n\n// Disable all dates before today\nconst disabledDate = function (date, view) {\n switch (view) {\n case 'date':\n return date.valueOf() <= currentDate.valueOf();\n case 'year':\n return date.year() < currentDate.year();\n case 'month':\n return date.year() * 100 + date.month() < currentDate.year() * 100 + currentDate.month();\n default: return false;\n }\n};\n\nReactDOM.render(
\n console.log(val)} />

\n console.log(val)} />

\n console.log(val)} />

\n console.log(val)} />\n
, mountNode);\n"},"body":"\n````jsx\nimport { DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst { RangePicker, MonthPicker, YearPicker } = DatePicker;\nconst currentDate = moment();\n\n// Disable all dates before today\nconst disabledDate = function (date, view) {\n switch (view) {\n case 'date':\n return date.valueOf() <= currentDate.valueOf();\n case 'year':\n return date.year() < currentDate.year();\n case 'month':\n return date.year() * 100 + date.month() < currentDate.year() * 100 + currentDate.month();\n default: return false;\n }\n};\n\nReactDOM.render(
\n console.log(val)} />

\n console.log(val)} />

\n console.log(val)} />

\n console.log(val)} />\n
, mountNode);\n````","html":"
import { DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst { RangePicker, MonthPicker, YearPicker } = DatePicker;\nconst currentDate = moment();\n\n// Disable all dates before today\nconst disabledDate = function (date, view) {\n    switch (view) {\n        case 'date':\n            return date.valueOf() <= currentDate.valueOf();\n        case 'year':\n            return date.year() < currentDate.year();\n        case 'month':\n            return date.year() * 100 + date.month() < currentDate.year() * 100 + currentDate.month();\n        default: return false;\n    }\n};\n\nReactDOM.render(<div>\n    <DatePicker disabledDate={disabledDate} onChange={val => console.log(val)} /><br /><br />\n    <MonthPicker disabledDate={disabledDate} onChange={val => console.log(val)} /><br /><br />\n    <YearPicker disabledDate={disabledDate} onChange={val => console.log(val)} /><br /><br />\n    <RangePicker disabledDate={disabledDate} onChange={val => console.log(val)} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/disabled-date.md b/compiled_docs/date-picker/demo/disabled-date.md new file mode 100644 index 0000000000..589449af92 --- /dev/null +++ b/compiled_docs/date-picker/demo/disabled-date.md @@ -0,0 +1 @@ +{"title":"禁止选择某些日期","meta":{"title":"禁止选择某些日期","description":"\n

可以通过 disabledDate 属性来禁止用户选择或输入某些特定日期。

\n","order":"4"},"codes":{"jsx":"import { DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst { RangePicker, MonthPicker, YearPicker } = DatePicker;\nconst currentDate = moment();\n\n// Disable all dates before today\nconst disabledDate = function (date, view) {\n switch (view) {\n case 'date':\n return date.valueOf() <= currentDate.valueOf();\n case 'year':\n return date.year() < currentDate.year();\n case 'month':\n return date.year() * 100 + date.month() < currentDate.year() * 100 + currentDate.month();\n default: return false;\n }\n};\n\nReactDOM.render(
\n console.log(val)} />

\n console.log(val)} />

\n console.log(val)} />

\n console.log(val)} />\n
, mountNode);\n"},"body":"\n\n````jsx\nimport { DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst { RangePicker, MonthPicker, YearPicker } = DatePicker;\nconst currentDate = moment();\n\n// Disable all dates before today\nconst disabledDate = function (date, view) {\n switch (view) {\n case 'date':\n return date.valueOf() <= currentDate.valueOf();\n case 'year':\n return date.year() < currentDate.year();\n case 'month':\n return date.year() * 100 + date.month() < currentDate.year() * 100 + currentDate.month();\n default: return false;\n }\n};\n\nReactDOM.render(
\n console.log(val)} />

\n console.log(val)} />

\n console.log(val)} />

\n console.log(val)} />\n
, mountNode);\n````","html":"
import { DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst { RangePicker, MonthPicker, YearPicker } = DatePicker;\nconst currentDate = moment();\n\n// Disable all dates before today\nconst disabledDate = function (date, view) {\n    switch (view) {\n        case 'date':\n            return date.valueOf() <= currentDate.valueOf();\n        case 'year':\n            return date.year() < currentDate.year();\n        case 'month':\n            return date.year() * 100 + date.month() < currentDate.year() * 100 + currentDate.month();\n        default: return false;\n    }\n};\n\nReactDOM.render(<div>\n    <DatePicker disabledDate={disabledDate} onChange={val => console.log(val)} /><br /><br />\n    <MonthPicker disabledDate={disabledDate} onChange={val => console.log(val)} /><br /><br />\n    <YearPicker disabledDate={disabledDate} onChange={val => console.log(val)} /><br /><br />\n    <RangePicker disabledDate={disabledDate} onChange={val => console.log(val)} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/disabled.en-us.md b/compiled_docs/date-picker/demo/disabled.en-us.md new file mode 100644 index 0000000000..dc8e2eefa8 --- /dev/null +++ b/compiled_docs/date-picker/demo/disabled.en-us.md @@ -0,0 +1 @@ +{"title":"Disabled","meta":{"title":"Disabled","description":"\n

Disable the picker.

\n","order":"6"},"codes":{"jsx":"import { DatePicker } from '@alifd/next';\n\nconst { RangePicker } = DatePicker;\n\nReactDOM.render(
\n   \n
, mountNode);\n"},"body":"\n````jsx\nimport { DatePicker } from '@alifd/next';\n\nconst { RangePicker } = DatePicker;\n\nReactDOM.render(
\n   \n
, mountNode);\n````","html":"
import { DatePicker } from '@alifd/next';\n\nconst { RangePicker } = DatePicker;\n\nReactDOM.render(<div>\n    <DatePicker disabled />&nbsp;&nbsp;<RangePicker disabled />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/disabled.md b/compiled_docs/date-picker/demo/disabled.md new file mode 100644 index 0000000000..69a0c0095c --- /dev/null +++ b/compiled_docs/date-picker/demo/disabled.md @@ -0,0 +1 @@ +{"title":"禁用日期选择","meta":{"title":"禁用日期选择","description":"\n

当开启 disabled 属性时，选择框处于完全禁用状态。

\n","order":"6"},"codes":{"jsx":"import { DatePicker } from '@alifd/next';\n\nconst { RangePicker } = DatePicker;\n\nReactDOM.render(
\n   \n
, mountNode);\n"},"body":"\n\n\n````jsx\nimport { DatePicker } from '@alifd/next';\n\nconst { RangePicker } = DatePicker;\n\nReactDOM.render(
\n   \n
, mountNode);\n````","html":"
import { DatePicker } from '@alifd/next';\n\nconst { RangePicker } = DatePicker;\n\nReactDOM.render(<div>\n    <DatePicker disabled />&nbsp;&nbsp;<RangePicker disabled />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/field.en-us.md b/compiled_docs/date-picker/demo/field.en-us.md new file mode 100644 index 0000000000..c9fa7bf2ef --- /dev/null +++ b/compiled_docs/date-picker/demo/field.en-us.md @@ -0,0 +1 @@ +{"title":"Field","meta":{"title":"Field","description":"\n

Use case with Field.

\n","order":"12"},"codes":{"jsx":"import { DatePicker, Field, Button } from '@alifd/next';\n\nconst { RangePicker, YearPicker, MonthPicker } = DatePicker;\n\nclass App extends React.Component {\n\n field = new Field(this);\n\n printData = () => {\n this.field.validate((err, values) => {\n\n if (err) {\n console.error('Error: ', err);\n return;\n }\n\n console.log('datepicker: %s', values.date.format('YYYY-MM-DD'));\n console.log('monthpicker: %s', values.month.format('YYYY-MM'));\n console.log('yearpicker: %s', values.year.format('YYYY'));\n const range = values.range;\n console.log('rangepicker: [%s, %s]', range[0] && range[0].format('YYYY-MM-DD'), range[1] && range[1].format('YYYY-MM-DD'));\n });\n }\n\n printError = (name) => {\n if (this.field.getError(name)) {\n return {this.field.getError(name).join(',')};\n }\n }\n\n render() {\n const init = this.field.init;\n\n return (\n
\n {this.printError('date')}

\n {this.printError('month')}

\n {this.printError('year')}

\n {this.printError('range')}

\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".error-msg {\n color: #E72B00;\n font-size: 12px;\n}\n"},"body":"\n````jsx\nimport { DatePicker, Field, Button } from '@alifd/next';\n\nconst { RangePicker, YearPicker, MonthPicker } = DatePicker;\n\nclass App extends React.Component {\n\n field = new Field(this);\n\n printData = () => {\n this.field.validate((err, values) => {\n\n if (err) {\n console.error('Error: ', err);\n return;\n }\n\n console.log('datepicker: %s', values.date.format('YYYY-MM-DD'));\n console.log('monthpicker: %s', values.month.format('YYYY-MM'));\n console.log('yearpicker: %s', values.year.format('YYYY'));\n const range = values.range;\n console.log('rangepicker: [%s, %s]', range[0] && range[0].format('YYYY-MM-DD'), range[1] && range[1].format('YYYY-MM-DD'));\n });\n }\n\n printError = (name) => {\n if (this.field.getError(name)) {\n return {this.field.getError(name).join(',')};\n }\n }\n\n render() {\n const init = this.field.init;\n\n return (\n
\n {this.printError('date')}

\n {this.printError('month')}

\n {this.printError('year')}

\n {this.printError('range')}

\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.error-msg {\n color: #E72B00;\n font-size: 12px;\n}\n````","html":"
import { DatePicker, Field, Button } from '@alifd/next';\n\nconst { RangePicker, YearPicker, MonthPicker } = DatePicker;\n\nclass App extends React.Component {\n\n    field = new Field(this);\n\n    printData = () => {\n        this.field.validate((err, values) => {\n\n            if (err) {\n                console.error('Error: ', err);\n                return;\n            }\n\n            console.log('datepicker: %s', values.date.format('YYYY-MM-DD'));\n            console.log('monthpicker: %s', values.month.format('YYYY-MM'));\n            console.log('yearpicker: %s', values.year.format('YYYY'));\n            const range = values.range;\n            console.log('rangepicker: [%s, %s]', range[0] && range[0].format('YYYY-MM-DD'), range[1] && range[1].format('YYYY-MM-DD'));\n        });\n    }\n\n    printError = (name) => {\n        if (this.field.getError(name)) {\n            return <span className=\"error-msg\">{this.field.getError(name).join(',')}</span>;\n        }\n    }\n\n    render() {\n        const init = this.field.init;\n\n        return (\n            <div>\n                <DatePicker {...init('date', { rules: [{\n                    required: true,\n                    message: '请选择日期'\n                }] })} />{this.printError('date')}<br /><br />\n                <MonthPicker {...init('month', { rules: [{\n                    required: true,\n                    message: '请选择月份'\n                }] })} />{this.printError('month')}<br /><br />\n                <YearPicker {...init('year', { rules: [{\n                    required: true,\n                    message: '请选择年份'\n                }] })} />{this.printError('year')}<br /><br />\n                <RangePicker {...init('range', { rules: [{\n                    required: true,\n                    message: '请选择日期范围'\n                }] })} />{this.printError('range')}<br /><br />\n                <Button onClick={this.printData}>Print to Console</Button>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
.error-msg {\n    color: #E72B00;\n    font-size: 12px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/field.md b/compiled_docs/date-picker/demo/field.md new file mode 100644 index 0000000000..5917c993f5 --- /dev/null +++ b/compiled_docs/date-picker/demo/field.md @@ -0,0 +1 @@ +{"title":"与 Field 结合","meta":{"title":"与 Field 结合","description":"\n

与 Field 结合使用，简单示范自定义返回值

\n","order":"12"},"codes":{"jsx":"import { DatePicker, Field, Button } from '@alifd/next';\n\nconst { RangePicker, YearPicker, MonthPicker } = DatePicker;\n\nclass App extends React.Component {\n\n field = new Field(this);\n\n printData = () => {\n this.field.validate((err, values) => {\n\n if (err) {\n console.error('Error: ', err);\n return;\n }\n\n console.log('datepicker: %s', values.date.format('YYYY-MM-DD'));\n console.log('monthpicker: %s', values.month.format('YYYY-MM'));\n console.log('yearpicker: %s', values.year.format('YYYY'));\n const range = values.range;\n console.log('rangepicker: [%s, %s]', range[0] && range[0].format('YYYY-MM-DD'), range[1] && range[1].format('YYYY-MM-DD'));\n });\n }\n\n printError = (name) => {\n if (this.field.getError(name)) {\n return {this.field.getError(name).join(',')};\n }\n }\n\n render() {\n const init = this.field.init;\n\n return (\n
\n {this.printError('date')}

\n {this.printError('month')}

\n {this.printError('year')}

\n {this.printError('range')}

\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".error-msg {\n color: #E72B00;\n font-size: 12px;\n}\n"},"body":"\n\n````jsx\nimport { DatePicker, Field, Button } from '@alifd/next';\n\nconst { RangePicker, YearPicker, MonthPicker } = DatePicker;\n\nclass App extends React.Component {\n\n field = new Field(this);\n\n printData = () => {\n this.field.validate((err, values) => {\n\n if (err) {\n console.error('Error: ', err);\n return;\n }\n\n console.log('datepicker: %s', values.date.format('YYYY-MM-DD'));\n console.log('monthpicker: %s', values.month.format('YYYY-MM'));\n console.log('yearpicker: %s', values.year.format('YYYY'));\n const range = values.range;\n console.log('rangepicker: [%s, %s]', range[0] && range[0].format('YYYY-MM-DD'), range[1] && range[1].format('YYYY-MM-DD'));\n });\n }\n\n printError = (name) => {\n if (this.field.getError(name)) {\n return {this.field.getError(name).join(',')};\n }\n }\n\n render() {\n const init = this.field.init;\n\n return (\n
\n {this.printError('date')}

\n {this.printError('month')}

\n {this.printError('year')}

\n {this.printError('range')}

\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.error-msg {\n color: #E72B00;\n font-size: 12px;\n}\n````","html":"
import { DatePicker, Field, Button } from '@alifd/next';\n\nconst { RangePicker, YearPicker, MonthPicker } = DatePicker;\n\nclass App extends React.Component {\n\n    field = new Field(this);\n\n    printData = () => {\n        this.field.validate((err, values) => {\n\n            if (err) {\n                console.error('Error: ', err);\n                return;\n            }\n\n            console.log('datepicker: %s', values.date.format('YYYY-MM-DD'));\n            console.log('monthpicker: %s', values.month.format('YYYY-MM'));\n            console.log('yearpicker: %s', values.year.format('YYYY'));\n            const range = values.range;\n            console.log('rangepicker: [%s, %s]', range[0] && range[0].format('YYYY-MM-DD'), range[1] && range[1].format('YYYY-MM-DD'));\n        });\n    }\n\n    printError = (name) => {\n        if (this.field.getError(name)) {\n            return <span className=\"error-msg\">{this.field.getError(name).join(',')}</span>;\n        }\n    }\n\n    render() {\n        const init = this.field.init;\n\n        return (\n            <div>\n                <DatePicker {...init('date', { rules: [{\n                    required: true,\n                    message: '请选择日期'\n                }] })} />{this.printError('date')}<br /><br />\n                <MonthPicker {...init('month', { rules: [{\n                    required: true,\n                    message: '请选择月份'\n                }] })} />{this.printError('month')}<br /><br />\n                <YearPicker {...init('year', { rules: [{\n                    required: true,\n                    message: '请选择年份'\n                }] })} />{this.printError('year')}<br /><br />\n                <RangePicker {...init('range', { rules: [{\n                    required: true,\n                    message: '请选择日期范围'\n                }] })} />{this.printError('range')}<br /><br />\n                <Button onClick={this.printData}>Print to Console</Button>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
.error-msg {\n    color: #E72B00;\n    font-size: 12px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/footer.en-us.md b/compiled_docs/date-picker/demo/footer.en-us.md new file mode 100644 index 0000000000..8eca506fdf --- /dev/null +++ b/compiled_docs/date-picker/demo/footer.en-us.md @@ -0,0 +1 @@ +{"title":"Footer","meta":{"title":"Footer","description":"\n

Passing custom footer with footerRender.

\n","order":"11"},"codes":{"jsx":"import { DatePicker } from '@alifd/next';\n\nconst { RangePicker } = DatePicker;\n\nfunction footerRender() {\n return
👍 Some useful info here
;\n}\n\nReactDOM.render(
\n   \n \n
, mountNode);\n","css":".custom-footer {\n padding: 12px;\n font-size: 12px;\n border-top: 1px solid #DCDEE3;\n}\n"},"body":"\n````jsx\nimport { DatePicker } from '@alifd/next';\n\nconst { RangePicker } = DatePicker;\n\nfunction footerRender() {\n return
👍 Some useful info here
;\n}\n\nReactDOM.render(
\n   \n \n
, mountNode);\n````\n\n````css\n.custom-footer {\n padding: 12px;\n font-size: 12px;\n border-top: 1px solid #DCDEE3;\n}\n````","html":"
import { DatePicker } from '@alifd/next';\n\nconst { RangePicker } = DatePicker;\n\nfunction footerRender() {\n    return <div className=\"custom-footer\">👍 Some useful info here</div>;\n}\n\nReactDOM.render(<div>\n    <DatePicker footerRender={footerRender} />&nbsp;&nbsp;\n    <RangePicker footerRender={footerRender} />\n</div>, mountNode);
.custom-footer {\n    padding: 12px;\n    font-size: 12px;\n    border-top: 1px solid #DCDEE3;\n}
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/footer.md b/compiled_docs/date-picker/demo/footer.md new file mode 100644 index 0000000000..3ea975d5f7 --- /dev/null +++ b/compiled_docs/date-picker/demo/footer.md @@ -0,0 +1 @@ +{"title":"自定义面板页脚","meta":{"title":"自定义面板页脚","description":"\n

可以通过 footerRender 自定义对面板页脚的定制。

\n","order":"11"},"codes":{"jsx":"import { DatePicker } from '@alifd/next';\n\nconst { RangePicker } = DatePicker;\n\nfunction footerRender() {\n return
👍 Some useful info here
;\n}\n\nReactDOM.render(
\n   \n \n
, mountNode);\n","css":".custom-footer {\n padding: 12px;\n font-size: 12px;\n border-top: 1px solid #DCDEE3;\n}\n"},"body":"\n\n\n````jsx\nimport { DatePicker } from '@alifd/next';\n\nconst { RangePicker } = DatePicker;\n\nfunction footerRender() {\n return
👍 Some useful info here
;\n}\n\nReactDOM.render(
\n   \n \n
, mountNode);\n````\n\n````css\n.custom-footer {\n padding: 12px;\n font-size: 12px;\n border-top: 1px solid #DCDEE3;\n}\n````","html":"
import { DatePicker } from '@alifd/next';\n\nconst { RangePicker } = DatePicker;\n\nfunction footerRender() {\n    return <div className=\"custom-footer\">👍 Some useful info here</div>;\n}\n\nReactDOM.render(<div>\n    <DatePicker footerRender={footerRender} />&nbsp;&nbsp;\n    <RangePicker footerRender={footerRender} />\n</div>, mountNode);
.custom-footer {\n    padding: 12px;\n    font-size: 12px;\n    border-top: 1px solid #DCDEE3;\n}
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/format.en-us.md b/compiled_docs/date-picker/demo/format.en-us.md new file mode 100644 index 0000000000..17fbfbe39e --- /dev/null +++ b/compiled_docs/date-picker/demo/format.en-us.md @@ -0,0 +1 @@ +{"title":"Format","meta":{"title":"Format","description":"\n

Using attribute format to change the displayed dates, it will be also used to check user inputs.

\n","order":"7"},"codes":{"jsx":"import { DatePicker } from '@alifd/next';\n\nconst { RangePicker } = DatePicker;\nconst onChange = val => console.log(val);\n\nReactDOM.render(
\n \n

\n \n

\n \n

\n \n
, mountNode);\n"},"body":"\n````jsx\nimport { DatePicker } from '@alifd/next';\n\nconst { RangePicker } = DatePicker;\nconst onChange = val => console.log(val);\n\nReactDOM.render(
\n \n

\n \n

\n \n

\n \n
, mountNode);\n````","html":"
import { DatePicker } from '@alifd/next';\n\nconst { RangePicker } = DatePicker;\nconst onChange = val => console.log(val);\n\nReactDOM.render(<div>\n    <DatePicker format=\"YYYY-M-D\" onChange={onChange} />\n    <br /><br />\n    <DatePicker format=\"YYYY-M-D\" onChange={onChange} showTime={{ format: 'HH:mm' }} />\n    <br /><br />\n    <RangePicker format=\"YYYY-M-D\" onChange={onChange} />\n    <br /><br />\n    <RangePicker format=\"YYYY-M-D\" onChange={onChange} showTime={{ format: 'HH:mm' }} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/format.md b/compiled_docs/date-picker/demo/format.md new file mode 100644 index 0000000000..20d7512e26 --- /dev/null +++ b/compiled_docs/date-picker/demo/format.md @@ -0,0 +1 @@ +{"title":"日期格式","meta":{"title":"日期格式","description":"\n

通过 format 属性可以约束日期选择器的日期格式，该格式同时会限定用户的输入格式。

\n","order":"7"},"codes":{"jsx":"import { DatePicker } from '@alifd/next';\n\nconst { RangePicker } = DatePicker;\nconst onChange = val => console.log(val);\n\nReactDOM.render(
\n \n

\n \n

\n \n

\n \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { DatePicker } from '@alifd/next';\n\nconst { RangePicker } = DatePicker;\nconst onChange = val => console.log(val);\n\nReactDOM.render(
\n \n

\n \n

\n \n

\n \n
, mountNode);\n````","html":"
import { DatePicker } from '@alifd/next';\n\nconst { RangePicker } = DatePicker;\nconst onChange = val => console.log(val);\n\nReactDOM.render(<div>\n    <DatePicker format=\"YYYY-M-D\" onChange={onChange} />\n    <br /><br />\n    <DatePicker format=\"YYYY-M-D\" onChange={onChange} showTime={{ format: 'HH:mm' }} />\n    <br /><br />\n    <RangePicker format=\"YYYY-M-D\" onChange={onChange} />\n    <br /><br />\n    <RangePicker format=\"YYYY-M-D\" onChange={onChange} showTime={{ format: 'HH:mm' }} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/popup.en-us.md b/compiled_docs/date-picker/demo/popup.en-us.md new file mode 100644 index 0000000000..51d436dd6f --- /dev/null +++ b/compiled_docs/date-picker/demo/popup.en-us.md @@ -0,0 +1 @@ +{"title":"Custom popup","meta":{"title":"Custom popup","description":"\n

Custom popup behaviors.

\n","order":"10"},"codes":{"jsx":"import { DatePicker } from '@alifd/next';\n\nconst { RangePicker } = DatePicker;\n\nReactDOM.render(
\n

Change popup align

\n \n

Change popup container

\n target.parentNode} />\n
, mountNode);\n"},"body":"\n````jsx\nimport { DatePicker } from '@alifd/next';\n\nconst { RangePicker } = DatePicker;\n\nReactDOM.render(
\n

Change popup align

\n \n

Change popup container

\n target.parentNode} />\n
, mountNode);\n````","html":"
import { DatePicker } from '@alifd/next';\n\nconst { RangePicker } = DatePicker;\n\nReactDOM.render(<div>\n    <p>Change popup align</p>\n    <DatePicker popupAlign=\"bl tl\" />\n    <p>Change popup container</p>\n    <RangePicker popupContainer={target => target.parentNode} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/popup.md b/compiled_docs/date-picker/demo/popup.md new file mode 100644 index 0000000000..8e7aa7a869 --- /dev/null +++ b/compiled_docs/date-picker/demo/popup.md @@ -0,0 +1 @@ +{"title":"自定义日期选择器弹层","meta":{"title":"自定义日期选择器弹层","description":"\n

组件对外透出了 visible, defaultVisible, onVisibleChange, popupTriggerType, popupAlign, popupContainer, popupStyle, popupClassName 等属性用于直接定制弹层。此外，如果这些属性仍然无法满足需求，可以通过 popupProps 进行透传。

\n","order":"10"},"codes":{"jsx":"import { DatePicker } from '@alifd/next';\n\nconst { RangePicker } = DatePicker;\n\nReactDOM.render(
\n

Change popup align

\n \n

Change popup container

\n target.parentNode} />\n
, mountNode);\n"},"body":"\n\n````jsx\nimport { DatePicker } from '@alifd/next';\n\nconst { RangePicker } = DatePicker;\n\nReactDOM.render(
\n

Change popup align

\n \n

Change popup container

\n target.parentNode} />\n
, mountNode);\n````","html":"
import { DatePicker } from '@alifd/next';\n\nconst { RangePicker } = DatePicker;\n\nReactDOM.render(<div>\n    <p>Change popup align</p>\n    <DatePicker popupAlign=\"bl tl\" />\n    <p>Change popup container</p>\n    <RangePicker popupContainer={target => target.parentNode} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/show-time.en-us.md b/compiled_docs/date-picker/demo/show-time.en-us.md new file mode 100644 index 0000000000..bd21a72d77 --- /dev/null +++ b/compiled_docs/date-picker/demo/show-time.en-us.md @@ -0,0 +1 @@ +{"title":"With time","meta":{"title":"With time","description":"\n

Enable showTime to create a DatePicker/RangePicker with time.

\n","order":"5"},"codes":{"jsx":"import { DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst { RangePicker } = DatePicker;\nconst onChange = (value) => console.log(value);\nconst onOk = (value) => console.log('onOK:', value.format('YYYY-MM-DD HH:mm:ss'));\nconst onRangeOk = (value) => console.log('onOk: [%s, %s]', value[0].format('YYYY-MM-DD HH:mm:ss'), value[1].format('YYYY-MM-DD HH:mm:ss'));\n\nconst defaultTimeValue = moment('09:00:00', 'HH:mm:ss', true);\n\nReactDOM.render(
\n

DatePicker With Time

\n \n

DatePicker with Time, reset 00:00:00 for every select

\n \n

DatePicker with Time, with default time value

\n \n

RangePicker with Time

\n \n

RangePicker with Time, reset 00:00:00 for every select

\n \n

RangePicker with Time, with default time value, hide seconds

\n \n
, mountNode);\n"},"body":"\n````jsx\nimport { DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst { RangePicker } = DatePicker;\nconst onChange = (value) => console.log(value);\nconst onOk = (value) => console.log('onOK:', value.format('YYYY-MM-DD HH:mm:ss'));\nconst onRangeOk = (value) => console.log('onOk: [%s, %s]', value[0].format('YYYY-MM-DD HH:mm:ss'), value[1].format('YYYY-MM-DD HH:mm:ss'));\n\nconst defaultTimeValue = moment('09:00:00', 'HH:mm:ss', true);\n\nReactDOM.render(
\n

DatePicker With Time

\n \n

DatePicker with Time, reset 00:00:00 for every select

\n \n

DatePicker with Time, with default time value

\n \n

RangePicker with Time

\n \n

RangePicker with Time, reset 00:00:00 for every select

\n \n

RangePicker with Time, with default time value, hide seconds

\n \n
, mountNode);\n````","html":"
import { DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst { RangePicker } = DatePicker;\nconst onChange = (value) => console.log(value);\nconst onOk = (value) => console.log('onOK:', value.format('YYYY-MM-DD HH:mm:ss'));\nconst onRangeOk = (value) => console.log('onOk: [%s, %s]', value[0].format('YYYY-MM-DD HH:mm:ss'), value[1].format('YYYY-MM-DD HH:mm:ss'));\n\nconst defaultTimeValue = moment('09:00:00', 'HH:mm:ss', true);\n\nReactDOM.render(<div>\n    <p>DatePicker With Time</p>\n    <DatePicker showTime onChange={onChange} onOk={onOk} />\n    <p>DatePicker with Time, reset 00:00:00 for every select</p>\n    <DatePicker showTime onChange={onChange} onOk={onOk} resetTime />\n    <p>DatePicker with Time, with default time value</p>\n    <DatePicker showTime={{ defaultValue: defaultTimeValue, secondStep: 10 }} onChange={onChange} onOk={onOk} />\n    <p>RangePicker with Time</p>\n    <RangePicker showTime onChange={onChange} onOk={onRangeOk} />\n    <p>RangePicker with Time, reset 00:00:00 for every select</p>\n    <RangePicker showTime resetTime onChange={onChange} onOk={onRangeOk} />\n    <p>RangePicker with Time, with default time value, hide seconds</p>\n    <RangePicker showTime={{ defaultValue: defaultTimeValue, format: 'HH:mm', minuteStep: 15 }} onChange={onChange} onOk={onRangeOk} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/show-time.md b/compiled_docs/date-picker/demo/show-time.md new file mode 100644 index 0000000000..e45bf5f038 --- /dev/null +++ b/compiled_docs/date-picker/demo/show-time.md @@ -0,0 +1 @@ +{"title":"日期时间选择","meta":{"title":"日期时间选择","description":"\n

如果需要同时选择时间，可以通过 showTime 属性开启，showTime 支持传入 TimePickerPanel 的属性，例如 format, defaultValue 等。

\n","order":"5"},"codes":{"jsx":"import { DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst { RangePicker } = DatePicker;\nconst onChange = (value) => console.log(value);\nconst onOk = (value) => console.log('onOK:', value.format('YYYY-MM-DD HH:mm:ss'));\nconst onRangeOk = (value) => console.log('onOk: [%s, %s]', value[0].format('YYYY-MM-DD HH:mm:ss'), value[1].format('YYYY-MM-DD HH:mm:ss'));\n\nconst defaultTimeValue = moment('09:00:00', 'HH:mm:ss', true);\n\nReactDOM.render(
\n

DatePicker With Time

\n \n

DatePicker with Time, reset 00:00:00 for every select

\n \n

DatePicker with Time, with default time value

\n \n

RangePicker with Time

\n \n

RangePicker with Time, reset 00:00:00 for every select

\n \n

RangePicker with Time, with default time value, hide seconds

\n \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst { RangePicker } = DatePicker;\nconst onChange = (value) => console.log(value);\nconst onOk = (value) => console.log('onOK:', value.format('YYYY-MM-DD HH:mm:ss'));\nconst onRangeOk = (value) => console.log('onOk: [%s, %s]', value[0].format('YYYY-MM-DD HH:mm:ss'), value[1].format('YYYY-MM-DD HH:mm:ss'));\n\nconst defaultTimeValue = moment('09:00:00', 'HH:mm:ss', true);\n\nReactDOM.render(
\n

DatePicker With Time

\n \n

DatePicker with Time, reset 00:00:00 for every select

\n \n

DatePicker with Time, with default time value

\n \n

RangePicker with Time

\n \n

RangePicker with Time, reset 00:00:00 for every select

\n \n

RangePicker with Time, with default time value, hide seconds

\n \n
, mountNode);\n````","html":"
import { DatePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst { RangePicker } = DatePicker;\nconst onChange = (value) => console.log(value);\nconst onOk = (value) => console.log('onOK:', value.format('YYYY-MM-DD HH:mm:ss'));\nconst onRangeOk = (value) => console.log('onOk: [%s, %s]', value[0].format('YYYY-MM-DD HH:mm:ss'), value[1].format('YYYY-MM-DD HH:mm:ss'));\n\nconst defaultTimeValue = moment('09:00:00', 'HH:mm:ss', true);\n\nReactDOM.render(<div>\n    <p>DatePicker With Time</p>\n    <DatePicker showTime onChange={onChange} onOk={onOk} />\n    <p>DatePicker with Time, reset 00:00:00 for every select</p>\n    <DatePicker showTime onChange={onChange} onOk={onOk} resetTime />\n    <p>DatePicker with Time, with default time value</p>\n    <DatePicker showTime={{ defaultValue: defaultTimeValue, secondStep: 10 }} onChange={onChange} onOk={onOk} />\n    <p>RangePicker with Time</p>\n    <RangePicker showTime onChange={onChange} onOk={onRangeOk} />\n    <p>RangePicker with Time, reset 00:00:00 for every select</p>\n    <RangePicker showTime resetTime onChange={onChange} onOk={onRangeOk} />\n    <p>RangePicker with Time, with default time value, hide seconds</p>\n    <RangePicker showTime={{ defaultValue: defaultTimeValue, format: 'HH:mm', minuteStep: 15 }} onChange={onChange} onOk={onRangeOk} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/size.en-us.md b/compiled_docs/date-picker/demo/size.en-us.md new file mode 100644 index 0000000000..41b7a82719 --- /dev/null +++ b/compiled_docs/date-picker/demo/size.en-us.md @@ -0,0 +1 @@ +{"title":"Size","meta":{"title":"Size","description":"\n

Change size by attribute size.

\n","order":"3"},"codes":{"jsx":"import { DatePicker } from '@alifd/next';\n\nReactDOM.render(
\n   \n   \n \n
, mountNode);\n"},"body":"\n````jsx\nimport { DatePicker } from '@alifd/next';\n\nReactDOM.render(
\n   \n   \n \n
, mountNode);\n````","html":"
import { DatePicker } from '@alifd/next';\n\nReactDOM.render(<div>\n    <DatePicker size=\"large\" /> &nbsp;&nbsp;\n    <DatePicker /> &nbsp;&nbsp;\n    <DatePicker size=\"small\" />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/demo/size.md b/compiled_docs/date-picker/demo/size.md new file mode 100644 index 0000000000..9aa1e80780 --- /dev/null +++ b/compiled_docs/date-picker/demo/size.md @@ -0,0 +1 @@ +{"title":"不同尺寸","meta":{"title":"不同尺寸","description":"\n

通过 size 属性可以改变 Input 组件的尺寸，默认为 medium。

\n","order":"3"},"codes":{"jsx":"import { DatePicker } from '@alifd/next';\n\nReactDOM.render(
\n   \n   \n \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { DatePicker } from '@alifd/next';\n\nReactDOM.render(
\n   \n   \n \n
, mountNode);\n````","html":"
import { DatePicker } from '@alifd/next';\n\nReactDOM.render(<div>\n    <DatePicker size=\"large\" /> &nbsp;&nbsp;\n    <DatePicker /> &nbsp;&nbsp;\n    <DatePicker size=\"small\" />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/date-picker/index.en-us.md b/compiled_docs/date-picker/index.en-us.md new file mode 100644 index 0000000000..12b98557ae --- /dev/null +++ b/compiled_docs/date-picker/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Guide#

DatePicker are used to select a single date for an input.

\n

API#

","api":"

DatePicker#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
labelInset label of inputReactNode-
sizeSize of input

option:
'small', 'medium', 'large'		Enum'medium'
stateState of input

option:
'success', 'error'		Enum-
placeholderPlaceholder of inputString-
defaultVisibleMonthDefault visible month

signature:
Function() => MomentObject
return:
{MomentObject} moment instance with specified month
Function-
valueValue of date-pickercustom-
defaultValueDefault value of date-pickercustom-
formatFormat of date value (it will also effect user input)String'YYYY-MM-DD'
showTimeEnable time-picker, pass object like { defaultValue, format, ... }Object/Booleanfalse
resetTimeIf reset time for every re-selectBooleanfalse
disabledDateFunction to disable date

signature:
Function(dateValue: MomentObject) => Boolean
parameter:
dateValue: {MomentObject} null
view: {Enum} current view type: 'year', 'month', 'date'
return:
{Boolean} if disable current date
Function() => false
footerRenderTemplate render for custom footer

signature:
Function() => Node
return:
{Node} Custom footer
Function() => null
onChangeCallback when date changes

signature:
Function() => MomentObject
return:
{MomentObject} dateValue
Functionfunc.noop
onOkCallback when click the ok button

signature:
Function() => MomentObject
return:
{MomentObject} dateValue
Functionfunc.noop
disabledDisable the pickerBoolean-
hasClearHas clear iconBooleantrue
visibleVisible state of popupBoolean-
defaultVisibleDefault visible state of popupBoolean-
onVisibleChangeCallback when visible state changes

signature:
Function(visible: Boolean, reason: String) => void
parameter:
visible: {Boolean} if popup visible
reason: {String} reason to change visible		Functionfunc.noop
popupTriggerTypeTrigger type of popup

option:
'click', 'hover'		Enum'click'
popupAlignAlign of popup, see Overlay doc for detailString'tl tl'
popupContainerContainer of popup

signature:
Function(target: Element) => Element
parameter:
target: {Element} target element
return:
{Element} container of popup
Function-
popupStyleCustom style of popupObject-
popupClassNameCustom className of popupString-
popupPropsProps of popupObject-
dateInputAriaLabelDate input aria-label attrString-
\n

DatePicker.RangePicker#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescriptionTypeDefault Value
sizeSize of input

option:
'small', 'medium', 'large'		Enum'medium'
defaultVisibleMonthDefault visible month

signature:
Function() => MomentObject
return:
{MomentObject} moment instance with specified month
Function-
valueRange value [moment, moment]Array-
defaultValueDefault range value [moment, moment]Array-
formatDate formatString'YYYY-MM-DD'
showTimeEnable time pickerObject/Booleanfalse
resetTimeIf reset time for every selectBooleanfalse
disabledDateFunction to disable dates

signature:
Function(dateValue: MomentObject) => Boolean
parameter:
dateValue: {MomentObject} null
view: {Enum} current view type: 'year', 'month', 'date'
return:
{Boolean} if disabled
Function() => false
footerRenderTemplate render for footer

signature:
Function() => Node
return:
{Node} custom footer
Function() => null
onChangeCallback when date changes

signature:
Function() => MomentObject
return:
{MomentObject} range values
Functionfunc.noop
onOkCallback when click ok button

signature:
Function() => MomentObject
return:
{MomentObject} range values
Functionfunc.noop
labelInset label of inputReactNode-
stateState of input

option:
'error', 'success'		Enum-
disabledDisable the pickerBoolean-
hasClearHas clear iconBooleantrue
visibleVisible state of popupBoolean-
defaultVisibleDefault visible state of popupBoolean-
onVisibleChangeCallback when visible state changes

signature:
Function(visible: Boolean, reason: String) => void
parameter:
visible: {Boolean} if popup visible
reason: {String} reason to change visible		Functionfunc.noop
popupTriggerTypeTrigger type of popup

option:
'click', 'hover'		Enum'click'
popupAlignAlign of popupString'tl tl'
popupContainerContainer of a popup

signature:
Function(target: Element) => Element
option:
target: {Element} target element
return:
{Element} coninter element of popup
Function-
popupStyleCustom style of popupObject-
popupClassNameCustom className of popupString-
popupPropsProps of popupObject-
startDateInputAriaLabelStart date input aria-label attributeString-
startTimeInputAriaLabelStart time input aria-label attributeString-
endDateInputAriaLabelEnd date input aria-label attributeString-
endTimeInputAriaLabelEnd time input aria-label attributeString-
\n

ARIA and KeyBoard#

When the Date Picker is focused, press enter will open popup to input date or time.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
按键说明
number keyNeed to manual input the date, the specified date format
Enteropen the calendar or select date after input date
Escclose the calendar
UpInput previous day（Month Picker is previous month， Year Picker is previous year）
DownInput next day（Month Picker is next month， Year Picker is next year）
Page UpInput previous month
Page DownInput next month
Alt + Page UpInput previous year
Alt + Page DownInput next year
\n"} \ No newline at end of file diff --git a/compiled_docs/date-picker/index.md b/compiled_docs/date-picker/index.md new file mode 100644 index 0000000000..afbf2b09ad --- /dev/null +++ b/compiled_docs/date-picker/index.md @@ -0,0 +1 @@ +{"meta":"

Guide#

输入或选择日期的控件。当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。

\n

日期选择模式#

DatePicker/RangePicker 在交互上增加了操作焦点的设置，意味着，如果某个输入框处于 focus 态，那么当前选择的日期将会作用于该输入框对应的日期。

\n

如上图所示，带时间的 RangePicker 有 4 个输入焦点，分别为开始日期、开始时间、结束日期、结束时间。当用户激活某个输入框时，此时下拉选择的日期将会作用域该输入框。同时设置了如下两个规则：

\n
    \n
  1. 已选定日期范围后，当焦点在开始日期时，如果即将选择的日期大于结束日期，将会重设开始日期。
    2. \n
  2. 已选定日期范围后，当焦点在结束日期时，如果即将选择的日期小于开始日期，将会重设开始日期。
    3. \n
\n

日期值的多语言#

由于 Calendar 组件内部使用 moment 对象来设置日期（请使用最新版 moment），部分 Locale 读取自 moment，因此用户需要在外部使用时正确的设置 moment 的 locale 。

\n
    \n
  • Q: 文档站点上看是中式日历，为什么我本地却是美式日历呢？如何进行多语言适配？
    \nA: 日期的多语言情况比较复杂，涉及到年、月、日、星期、阅读习惯等多方面(美式从周日到周六，中式从周一到周日)，因此我们借助了成熟的时间库 moment.js 来进行日期的多语言处理。\n moment.js 默认支持美式表达，如需中文等其他语言，请引入moment-with-locales.js语言包。
    • \n
\n
import moment from 'moment';\n\nmoment.locale('zh-cn');

此外，当改变 moment 的全局 locale 时并不会修改之前的已有实例，例如：

\n
moment.locale('fr');\nconst m = moment(1316116057189);\nm.fromNow(); // il y a une heure\n\nmoment.locale('en');\nm.fromNow(); // il y a une heure\nmoment(1316116057189).fromNow(); // an hour ago

除了全局设置 moment 的多语言，还可以只对某个 moment 实例设置多语言。比如：

\n
const value = moment();\nvalue.locale('fr'); // set this instance to use French

Moment 对象和字符串#

DatePicker 默认情况下接收和返回的数据类型都是 Moment 对象。为了便于用户的使用，DatePikcer 还支持直接传入字符串（组件内部仍然会格式化为 Moment 对象）。使用方法如下：

\n

标准非受控

\n
<DatePicker onChange={val => console.log(val)} />\n// select 2019-01-23\n// >> MomentObject\n\n<DatePicker defaultValue={moment()} onChange={val => console.log(val)} />\n// select 2019-01-23\n// >> MomentObject\n\n<DatePicker defaultValue="2018-01-23" onChange={val => console.log(val)} />\n// select 2019-01-23\n// >> "2019-01-23"

标准受控

\n
<DatePicker value={moment()} onChange={val => console.log(val)} />\n// setProps({ value: moment().add(1, 'months') })\n// >> MomentObject\n\n<DatePicker value="2018-01-23" onChange={val => console.log(val)} />\n// setProps({ value: '2019-01-23' })\n// >> "2019-01-23"

API#

","api":"

DatePicker#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
label输入框内置标签ReactNode-
size输入框尺寸

可选值:
'small', 'medium', 'large'		Enum'medium'
state输入框状态

可选值:
'success', 'loading', 'error'		Enum-
placeholder输入提示String-
defaultVisibleMonth默认展现的月

签名:
Function() => MomentObject
返回值:
{MomentObject} 返回包含指定月份的 moment 对象实例
Function-
value日期值（受控）moment 对象custom-
defaultValue初始日期值，moment 对象custom-
format日期值的格式（用于限定用户输入和展示）String'YYYY-MM-DD'
showTime是否使用时间控件，传入 TimePicker 的属性 { defaultValue, format, ... }Object/Booleanfalse
resetTime每次选择日期时是否重置时间（仅在 showTime 开启时有效）Booleanfalse
disabledDate禁用日期函数

签名:
Function(日期值: MomentObject, view: String) => Boolean
参数:
日期值: {MomentObject} null
view: {String} 当前视图类型，year: 年， month: 月, date: 日
返回值:
{Boolean} 是否禁用
Function() => false
footerRender自定义面板页脚

签名:
Function() => Node
返回值:
{Node} 自定义的面板页脚组件
Function() => null
onChange日期值改变时的回调

签名:
Function(value: MomentObject/String) => void
参数:
value: {MomentObject/String} 日期值		Functionfunc.noop
onOk点击确认按钮时的回调

签名:
Function() => MomentObject/String
返回值:
{MomentObject/String} 日期值
Functionfunc.noop
disabled是否禁用Boolean-
hasClear是否显示清空按钮Booleantrue
visible弹层显示状态Boolean-
defaultVisible弹层默认是否显示Booleanfalse
onVisibleChange弹层展示状态变化时的回调

签名:
Function(visible: Boolean, reason: String) => void
参数:
visible: {Boolean} 弹层是否显示
reason: {String} 触发弹层显示和隐藏的来源		Functionfunc.noop
popupTriggerType弹层触发方式

可选值:
'click', 'hover'		Enum'click'
popupAlign弹层对齐方式,具体含义见 OverLay文档String'tl tl'
popupContainer弹层容器

签名:
Function(target: Element) => Element
参数:
target: {Element} 目标元素
返回值:
{Element} 弹层的容器元素
Function-
popupStyle弹层自定义样式Object-
popupClassName弹层自定义样式类String-
popupProps弹层其他属性Object-
inputProps输入框其他属性Object-
dateCellRender自定义日期渲染函数

签名:
Function(value: Object) => ReactNode
参数:
value: {Object} 日期值（moment对象）
返回值:
{ReactNode} null
Function-
monthCellRender自定义月份渲染函数

签名:
Function(calendarDate: Object) => ReactNode
参数:
calendarDate: {Object} 对应 Calendar 返回的自定义日期对象
返回值:
{ReactNode} null
Function-
dateInputAriaLabel日期输入框的 aria-label 属性String-
timeInputAriaLabel时间输入框的 aria-label 属性String-
\n

DatePicker.MonthPicker#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
label输入框内置标签ReactNode-
size输入框尺寸

可选值:
'small', 'medium', 'large'		Enum'medium'
state输入框状态

可选值:
'success', 'loading', 'error'		Enum-
placeholder输入提示String-
defaultVisibleYear默认展现的年

签名:
Function() => MomentObject
返回值:
{MomentObject} 返回包含指定年份的 moment 对象实例
Function-
value日期值（受控）moment 对象custom-
defaultValue初始日期值，moment 对象custom-
format日期值的格式（用于限定用户输入和展示）String'YYYY-MM'
disabledDate禁用日期函数

签名:
Function(日期值: MomentObject, view: String) => Boolean
参数:
日期值: {MomentObject} null
view: {String} 当前视图类型，year: 年， month: 月, date: 日
返回值:
{Boolean} 是否禁用
Function() => false
footerRender自定义面板页脚

签名:
Function() => Node
返回值:
{Node} 自定义的面板页脚组件
Function() => null
onChange日期值改变时的回调

签名:
Function(value: MomentObject/String) => void
参数:
value: {MomentObject/String} 日期值		Functionfunc.noop
disabled是否禁用Boolean-
hasClear是否显示清空按钮Booleantrue
visible弹层显示状态Boolean-
defaultVisible弹层默认是否显示Boolean-
onVisibleChange弹层展示状态变化时的回调

签名:
Function(visible: Boolean, reason: String) => void
参数:
visible: {Boolean} 弹层是否显示
reason: {String} 触发弹层显示和隐藏的来源		Functionfunc.noop
popupTriggerType弹层触发方式

可选值:
'click', 'hover'		Enum'click'
popupAlign弹层对齐方式, 具体含义见 OverLay文档String'tl tl'
popupContainer弹层容器

签名:
Function(target: Element) => Element
参数:
target: {Element} 目标元素
返回值:
{Element} 弹层的容器元素
Function-
popupStyle弹层自定义样式Object-
popupClassName弹层自定义样式类String-
popupProps弹层其他属性Object-
inputProps输入框其他属性Object-
monthCellRender自定义月份渲染函数

签名:
Function(calendarDate: Object) => ReactNode
参数:
calendarDate: {Object} 对应 Calendar 返回的自定义日期对象
返回值:
{ReactNode} null
Function-
dateInputAriaLabel日期输入框的 aria-label 属性String-
\n

DatePicker.RangePicker#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
defaultVisibleMonth默认展示的起始月份

签名:
Function() => MomentObject
返回值:
{MomentObject} 返回包含指定月份的 moment 对象实例
Function-
size输入框尺寸

可选值:
'small', 'medium', 'large'		Enum'medium'
value日期范围值数组 [moment, moment]Array-
defaultValue初始的日期范围值数组 [moment, moment]Array-
format日期格式String'YYYY-MM-DD'
showTime是否使用时间控件，支持传入 TimePicker 的属性Object/Booleanfalse
resetTime每次选择是否重置时间（仅在 showTime 开启时有效）Booleanfalse
disabledDate禁用日期函数

签名:
Function(日期值: MomentObject, view: String) => Boolean
参数:
日期值: {MomentObject} null
view: {String} 当前视图类型，year: 年， month: 月, date: 日
返回值:
{Boolean} 是否禁用
Function() => false
footerRender自定义面板页脚

签名:
Function() => Node
返回值:
{Node} 自定义的面板页脚组件
Function() => null
onChange日期范围值改变时的回调 [ MomentObjectString, MomentObjectString ]

签名:
Function(value: Array) => void
参数:
value: {Array} 日期值		Functionfunc.noop
onOk点击确认按钮时的回调 返回开始时间和结束时间`[ MomentObjectString, MomentObjectString ]`

签名:
Function() => Array
返回值:
{Array} 日期范围
Functionfunc.noop
label输入框内置标签ReactNode-
state输入框状态

可选值:
'error', 'loading', 'success'		Enum-
disabled是否禁用Boolean-
hasClear是否显示清空按钮Booleantrue
visible弹层显示状态Boolean-
defaultVisible弹层默认是否显示Booleanfalse
onVisibleChange弹层展示状态变化时的回调

签名:
Function(visible: Boolean, reason: String) => void
参数:
visible: {Boolean} 弹层是否显示
reason: {String} 触发弹层显示和隐藏的来源		Functionfunc.noop
popupTriggerType弹层触发方式

可选值:
'click', 'hover'		Enum'click'
popupAlign弹层对齐方式, 具体含义见 OverLay文档String'tl tl'
popupContainer弹层容器

签名:
Function(target: Element) => Element
参数:
target: {Element} 目标元素
返回值:
{Element} 弹层的容器元素
Function-
popupStyle弹层自定义样式Object-
popupClassName弹层自定义样式类String-
popupProps弹层其他属性Object-
inputProps输入框其他属性Object-
dateCellRender自定义日期单元格渲染

签名:
Function() => void		Function-
startDateInputAriaLabel开始日期输入框的 aria-label 属性String-
startTimeInputAriaLabel开始时间输入框的 aria-label 属性String-
endDateInputAriaLabel结束日期输入框的 aria-label 属性String-
endTimeInputAriaLabel结束时间输入框的 aria-label 属性String-
\n

DatePicker.YearPicker#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
label输入框内置标签ReactNode-
size输入框尺寸

可选值:
'small', 'medium', 'large'		Enum'medium'
state输入框状态

可选值:
'success', 'loading', 'error'		Enum-
placeholder输入提示String-
value日期值（受控）moment 对象custom-
defaultValue初始日期值，moment 对象custom-
format日期值的格式（用于限定用户输入和展示）String'YYYY'
disabledDate禁用日期函数

签名:
Function(日期值: MomentObject, view: String) => Boolean
参数:
日期值: {MomentObject} null
view: {String} 当前视图类型，year: 年， month: 月, date: 日
返回值:
{Boolean} 是否禁用
Function() => false
footerRender自定义面板页脚

签名:
Function() => Node
返回值:
{Node} 自定义的面板页脚组件
Function() => null
onChange日期值改变时的回调

签名:
Function(value: MomentObject/String) => void
参数:
value: {MomentObject/String} 日期值		Functionfunc.noop
disabled是否禁用Boolean-
hasClear是否显示清空按钮Booleantrue
visible弹层显示状态Boolean-
defaultVisible弹层默认是否显示Boolean-
onVisibleChange弹层展示状态变化时的回调

签名:
Function(visible: Boolean, reason: String) => void
参数:
visible: {Boolean} 弹层是否显示
reason: {String} 触发弹层显示和隐藏的来源		Functionfunc.noop
popupTriggerType弹层触发方式

可选值:
'click', 'hover'		Enum'click'
popupAlign弹层对齐方式, 具体含义见 OverLay文档String'tl tl'
popupContainer弹层容器

签名:
Function(target: Element) => Element
参数:
target: {Element} 目标元素
返回值:
{Element} 弹层的容器元素
Function-
popupStyle弹层自定义样式Object-
popupClassName弹层自定义样式类String-
popupProps弹层其他属性Object-
inputProps输入框其他属性Object-
dateInputAriaLabel日期输入框的 aria-label 属性String-
\n

ARIA and KeyBoard#

同选择框一样聚焦到 DatePiker 后，需要按下 ENTER 键打开弹出框，选择/输入日期， 通过 TAB 切换日期和时间输入框。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
按键说明
数字键需要手动输入日期，指定的日期格式
Enter打开日期选择框或输入后选择日期
Esc关闭日期选择框
Up输入上一天（Month Picker 则是上一个月， Year Picker 则是上一年）
Down输入下一天（Month Picker 则是下一个月， Year Picker 则是下一年）
Page Up输入上一月
Page Down输入下一月
Alt + Page Up输入上一年
Alt + Page Down输入下一年
\n"} \ No newline at end of file diff --git a/compiled_docs/dialog/demo/accessibility.en-us.md b/compiled_docs/dialog/demo/accessibility.en-us.md new file mode 100644 index 0000000000..697e4d78ac --- /dev/null +++ b/compiled_docs/dialog/demo/accessibility.en-us.md @@ -0,0 +1 @@ +{"title":"Accessibility","meta":{"title":"Accessibility","description":"\n

Set the aria-label attribute via okProps and cancelProps, The screen reader will read the OK and Cancel buttons. Please refer to ARIA and KeyBoard for keyboard operation.

\n","order":"7"},"codes":{"jsx":"\nimport { Button, Dialog } from '@alifd/next';\n\nclass Demo extends React.Component {\n state = {\n visible: false\n };\n onOpen = () => {\n this.setState({\n visible: true\n });\n };\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n render() {\n return (\n
\n \n \n

Start your business here by searching a popular product

\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n\n"},"body":"\n````jsx\n\nimport { Button, Dialog } from '@alifd/next';\n\nclass Demo extends React.Component {\n state = {\n visible: false\n };\n onOpen = () => {\n this.setState({\n visible: true\n });\n };\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n render() {\n return (\n
\n \n \n

Start your business here by searching a popular product

\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n\n````","html":"
\nimport { Button, Dialog } from '@alifd/next';\n\nclass Demo extends React.Component {\n    state = {\n        visible: false\n    };\n    onOpen = () => {\n        this.setState({\n            visible: true\n        });\n    };\n    onClose = () => {\n        this.setState({\n            visible: false\n        });\n    };\n    render() {\n        return (\n            <div>\n                <Button onClick={this.onOpen} type=\"primary\">\n                    Open dialog\n                </Button>\n                <Dialog\n                    title=\"Welcome to Alibaba.com\"\n                    visible={this.state.visible}\n                    autoFocus\n                    onOk={this.onClose.bind(this, 'okClick')}\n                    onCancel={this.onClose.bind(this, 'cancelClick')}\n                    onClose={this.onClose}\n                    cancelProps={{'aria-label':'cancel'}}\n                    okProps={{'aria-label':'ok'}}>\n                    <p tabIndex=\"0\">  Start your business here by searching a popular product</p>\n                </Dialog>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);\n
"} \ No newline at end of file diff --git a/compiled_docs/dialog/demo/accessibility.md b/compiled_docs/dialog/demo/accessibility.md new file mode 100644 index 0000000000..1a8c6ec0b1 --- /dev/null +++ b/compiled_docs/dialog/demo/accessibility.md @@ -0,0 +1 @@ +{"title":"无障碍","meta":{"title":"无障碍","description":"\n

通过okProps与cancelProps设置aria-label属性，屏幕阅读器读取确定和取消按钮。关于键盘操作请参考ARIA and KeyBoard。

\n","order":"7"},"codes":{"jsx":"\nimport { Button, Dialog } from '@alifd/next';\n\nclass Demo extends React.Component {\n state = {\n visible: false\n };\n onOpen = () => {\n this.setState({\n visible: true\n });\n };\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n render() {\n return (\n
\n \n \n

Start your business here by searching a popular product

\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n\n"},"body":"\n\n````jsx\n\nimport { Button, Dialog } from '@alifd/next';\n\nclass Demo extends React.Component {\n state = {\n visible: false\n };\n onOpen = () => {\n this.setState({\n visible: true\n });\n };\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n render() {\n return (\n
\n \n \n

Start your business here by searching a popular product

\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n\n````","html":"
\nimport { Button, Dialog } from '@alifd/next';\n\nclass Demo extends React.Component {\n    state = {\n        visible: false\n    };\n    onOpen = () => {\n        this.setState({\n            visible: true\n        });\n    };\n    onClose = () => {\n        this.setState({\n            visible: false\n        });\n    };\n    render() {\n        return (\n            <div>\n                <Button onClick={this.onOpen} type=\"primary\">\n                    Open dialog\n                </Button>\n                <Dialog\n                    title=\"Welcome to Alibaba.com\"\n                    visible={this.state.visible}\n                    autoFocus\n                    onOk={this.onClose.bind(this, 'okClick')}\n                    onCancel={this.onClose.bind(this, 'cancelClick')}\n                    onClose={this.onClose}\n                    cancelProps={{'aria-label':'cancel'}}\n                    okProps={{'aria-label':'ok'}}>\n                    <p tabIndex=\"0\">  Start your business here by searching a popular product</p>\n                </Dialog>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);\n
"} \ No newline at end of file diff --git a/compiled_docs/dialog/demo/basic.en-us.md b/compiled_docs/dialog/demo/basic.en-us.md new file mode 100644 index 0000000000..f06b8c3fa4 --- /dev/null +++ b/compiled_docs/dialog/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

First dialog

\n","order":"0"},"codes":{"jsx":"import { Button, Dialog } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n state = {\n visible: false\n };\n\n onOpen = () => {\n this.setState({\n visible: true\n });\n };\n\n onClose = reason => {\n console.log(reason);\n\n this.setState({\n visible: false\n });\n };\n\n render() {\n return (\n
\n \n \n Start your business here by searching a popular product\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Button, Dialog } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n state = {\n visible: false\n };\n\n onOpen = () => {\n this.setState({\n visible: true\n });\n };\n\n onClose = reason => {\n console.log(reason);\n\n this.setState({\n visible: false\n });\n };\n\n render() {\n return (\n
\n \n \n Start your business here by searching a popular product\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Button, Dialog } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n    state = {\n        visible: false\n    };\n\n    onOpen = () => {\n        this.setState({\n            visible: true\n        });\n    };\n\n    onClose = reason => {\n        console.log(reason);\n\n        this.setState({\n            visible: false\n        });\n    };\n\n    render() {\n        return (\n            <div>\n                <Button onClick={this.onOpen} type=\"primary\">\n                    Open dialog\n                </Button>\n                <Dialog\n                    title=\"Welcome to Alibaba.com\"\n                    visible={this.state.visible}\n                    onOk={this.onClose.bind(this, 'okClick')}\n                    onCancel={this.onClose.bind(this, 'cancelClick')}\n                    onClose={this.onClose}>\n                    Start your business here by searching a popular product\n                </Dialog>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/dialog/demo/basic.md b/compiled_docs/dialog/demo/basic.md new file mode 100644 index 0000000000..d3949186b5 --- /dev/null +++ b/compiled_docs/dialog/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

第一个对话框

\n","order":"0"},"codes":{"jsx":"import { Button, Dialog } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n state = {\n visible: false\n };\n\n onOpen = () => {\n this.setState({\n visible: true\n });\n };\n\n onClose = reason => {\n console.log(reason);\n\n this.setState({\n visible: false\n });\n };\n\n render() {\n return (\n
\n \n \n Start your business here by searching a popular product\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Button, Dialog } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n state = {\n visible: false\n };\n\n onOpen = () => {\n this.setState({\n visible: true\n });\n };\n\n onClose = reason => {\n console.log(reason);\n\n this.setState({\n visible: false\n });\n };\n\n render() {\n return (\n
\n \n \n Start your business here by searching a popular product\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Button, Dialog } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n    state = {\n        visible: false\n    };\n\n    onOpen = () => {\n        this.setState({\n            visible: true\n        });\n    };\n\n    onClose = reason => {\n        console.log(reason);\n\n        this.setState({\n            visible: false\n        });\n    };\n\n    render() {\n        return (\n            <div>\n                <Button onClick={this.onOpen} type=\"primary\">\n                    Open dialog\n                </Button>\n                <Dialog\n                    title=\"Welcome to Alibaba.com\"\n                    visible={this.state.visible}\n                    onOk={this.onClose.bind(this, 'okClick')}\n                    onCancel={this.onClose.bind(this, 'cancelClick')}\n                    onClose={this.onClose}>\n                    Start your business here by searching a popular product\n                </Dialog>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/dialog/demo/customize-footer.en-us.md b/compiled_docs/dialog/demo/customize-footer.en-us.md new file mode 100644 index 0000000000..5236bfa8fb --- /dev/null +++ b/compiled_docs/dialog/demo/customize-footer.en-us.md @@ -0,0 +1 @@ +{"title":"Customize footer","meta":{"title":"Customize footer","description":"\n

The default footer is ok and cancel buttons, you can customize footer content.

\n","order":"2"},"codes":{"jsx":"import { Button, Dialog } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n state = {\n visible: false\n };\n\n onOpen = () => {\n this.setState({\n visible: true\n });\n };\n\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n\n render() {\n return (\n
\n \n Customize footer}\n visible={this.state.visible}\n onOk={this.onClose}\n onCancel={this.onClose}\n onClose={this.onClose}>\n Start your business here by searching a popular product\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Button, Dialog } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n state = {\n visible: false\n };\n\n onOpen = () => {\n this.setState({\n visible: true\n });\n };\n\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n\n render() {\n return (\n
\n \n Customize footer}\n visible={this.state.visible}\n onOk={this.onClose}\n onCancel={this.onClose}\n onClose={this.onClose}>\n Start your business here by searching a popular product\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Button, Dialog } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n    state = {\n        visible: false\n    };\n\n    onOpen = () => {\n        this.setState({\n            visible: true\n        });\n    };\n\n    onClose = () => {\n        this.setState({\n            visible: false\n        });\n    };\n\n    render() {\n        return (\n            <div>\n                <Button onClick={this.onOpen} type=\"primary\">\n                    Open dialog\n                </Button>\n                <Dialog\n                    title=\"Welcome to Alibaba.com\"\n                    footer={<Button warning type=\"primary\" onClick={this.onClose}>Customize footer</Button>}\n                    visible={this.state.visible}\n                    onOk={this.onClose}\n                    onCancel={this.onClose}\n                    onClose={this.onClose}>\n                    Start your business here by searching a popular product\n                </Dialog>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/dialog/demo/customize-footer.md b/compiled_docs/dialog/demo/customize-footer.md new file mode 100644 index 0000000000..2ff683375d --- /dev/null +++ b/compiled_docs/dialog/demo/customize-footer.md @@ -0,0 +1 @@ +{"title":"自定义底部","meta":{"title":"自定义底部","description":"\n

默认的 footer 为确定取消两个按钮，你可以自定义 footer 的内容。

\n","order":"2"},"codes":{"jsx":"import { Button, Dialog } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n state = {\n visible: false\n };\n\n onOpen = () => {\n this.setState({\n visible: true\n });\n };\n\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n\n render() {\n return (\n
\n \n Customize footer}\n visible={this.state.visible}\n onOk={this.onClose}\n onCancel={this.onClose}\n onClose={this.onClose}>\n Start your business here by searching a popular product\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Button, Dialog } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n state = {\n visible: false\n };\n\n onOpen = () => {\n this.setState({\n visible: true\n });\n };\n\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n\n render() {\n return (\n
\n \n Customize footer}\n visible={this.state.visible}\n onOk={this.onClose}\n onCancel={this.onClose}\n onClose={this.onClose}>\n Start your business here by searching a popular product\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Button, Dialog } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n    state = {\n        visible: false\n    };\n\n    onOpen = () => {\n        this.setState({\n            visible: true\n        });\n    };\n\n    onClose = () => {\n        this.setState({\n            visible: false\n        });\n    };\n\n    render() {\n        return (\n            <div>\n                <Button onClick={this.onOpen} type=\"primary\">\n                    Open dialog\n                </Button>\n                <Dialog\n                    title=\"Welcome to Alibaba.com\"\n                    footer={<Button warning type=\"primary\" onClick={this.onClose}>Customize footer</Button>}\n                    visible={this.state.visible}\n                    onOk={this.onClose}\n                    onCancel={this.onClose}\n                    onClose={this.onClose}>\n                    Start your business here by searching a popular product\n                </Dialog>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/dialog/demo/fixed-height.en-us.md b/compiled_docs/dialog/demo/fixed-height.en-us.md new file mode 100644 index 0000000000..d4fde3bfb3 --- /dev/null +++ b/compiled_docs/dialog/demo/fixed-height.en-us.md @@ -0,0 +1 @@ +{"title":"Set fixed Dialog height","meta":{"title":"Set fixed Dialog height","description":"\n

Use height prop to set Dialog height style. Will also position footer at bottom.

\n","order":"8"},"codes":{"jsx":"import { Button, Dialog } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n state = {\n visible: false,\n };\n\n onOpen = () => {\n this.setState({\n visible: true\n });\n }\n\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n\n\n\n render() {\n const { visible, footerActions, footerAlign, loading } = this.state;\n const okProps = {\n loading\n };\n\n return (\n
\n \n \n Small Content in a fixed size Dialog\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Button, Dialog } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n state = {\n visible: false,\n };\n\n onOpen = () => {\n this.setState({\n visible: true\n });\n }\n\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n\n\n\n render() {\n const { visible, footerActions, footerAlign, loading } = this.state;\n const okProps = {\n loading\n };\n\n return (\n
\n \n \n Small Content in a fixed size Dialog\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Button, Dialog } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n    state = {\n        visible: false,\n    };\n\n    onOpen = () => {\n        this.setState({\n            visible: true\n        });\n    }\n\n    onClose = () => {\n        this.setState({\n            visible: false\n        });\n    };\n\n\n\n    render() {\n        const { visible, footerActions, footerAlign, loading } = this.state;\n        const okProps = {\n            loading\n        };\n\n        return (\n            <div>\n                <Button onClick={this.onOpen} type=\"primary\">\n                    Open dialog\n                </Button>\n                <Dialog title=\"Fixed Height\"\n                    visible={visible}\n                    height=\"400px\"\n                    onOk={this.onClose}\n                    onCancel={this.onClose}\n                    onClose={this.onClose}\n                    >\n                    Small Content in a fixed size Dialog\n                </Dialog>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/dialog/demo/fixed-height.md b/compiled_docs/dialog/demo/fixed-height.md new file mode 100644 index 0000000000..edf19c30a9 --- /dev/null +++ b/compiled_docs/dialog/demo/fixed-height.md @@ -0,0 +1 @@ +{"title":"定制底部按钮","meta":{"title":"定制底部按钮","description":"\n

使用 'height' 道具设置 Dialog 高度风格。还将页尾底部的位置。

\n","order":"8"},"codes":{"jsx":"import { Button, Dialog } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n state = {\n visible: false,\n };\n\n onOpen = () => {\n this.setState({\n visible: true\n });\n }\n\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n\n\n\n render() {\n const { visible, footerActions, footerAlign, loading } = this.state;\n const okProps = {\n loading\n };\n\n return (\n
\n \n \n Small Content in a fixed size Dialog\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Button, Dialog } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n state = {\n visible: false,\n };\n\n onOpen = () => {\n this.setState({\n visible: true\n });\n }\n\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n\n\n\n render() {\n const { visible, footerActions, footerAlign, loading } = this.state;\n const okProps = {\n loading\n };\n\n return (\n
\n \n \n Small Content in a fixed size Dialog\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Button, Dialog } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n    state = {\n        visible: false,\n    };\n\n    onOpen = () => {\n        this.setState({\n            visible: true\n        });\n    }\n\n    onClose = () => {\n        this.setState({\n            visible: false\n        });\n    };\n\n\n\n    render() {\n        const { visible, footerActions, footerAlign, loading } = this.state;\n        const okProps = {\n            loading\n        };\n\n        return (\n            <div>\n                <Button onClick={this.onOpen} type=\"primary\">\n                    Open dialog\n                </Button>\n                <Dialog title=\"Fixed Height\"\n                    visible={visible}\n                    height=\"400px\"\n                    onOk={this.onClose}\n                    onCancel={this.onClose}\n                    onClose={this.onClose}\n                    >\n                    Small Content in a fixed size Dialog\n                </Dialog>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/dialog/demo/footer.en-us.md b/compiled_docs/dialog/demo/footer.en-us.md new file mode 100644 index 0000000000..c8c54295cb --- /dev/null +++ b/compiled_docs/dialog/demo/footer.en-us.md @@ -0,0 +1 @@ +{"title":"Customize buttons of footer","meta":{"title":"Customize buttons of footer","description":"\n

Use footerActions to control the position of the OK and Cancel buttons and their mutual position. Use footerAlign to control the alignment of the bottom buttons.

\n","order":"1"},"codes":{"jsx":"import { Button, Radio, Dialog } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n state = {\n visible: false,\n footerActions: ['ok', 'cancel'],\n footerAlign: 'right',\n loading: false\n };\n\n onOpen = () => {\n this.setState({\n visible: true\n });\n }\n\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n\n toggleFooterActions = footerActionsStr => {\n this.setState({\n footerActions: footerActionsStr.split(',')\n });\n };\n\n toggleFooterAlign = footerAlign => {\n this.setState({\n footerAlign\n });\n };\n\n toggleOkLoader = loading => {\n this.setState({\n loading\n });\n }\n\n render() {\n const { visible, footerActions, footerAlign, loading } = this.state;\n const okProps = {\n loading\n };\n\n return (\n
\n \n \n
\n \n ok is left\n ok is right\n only ok\n only cancel\n \n \n left\n center\n right\n \n \n Loading Off\n Loading On\n \n
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".demo-content {\n padding: 10px;\n border: 2px dashed #ddd;\n background: #F8F8F8;\n}\n\n.demo-radio-group {\n display: block;\n}\n\n.demo-radio-group + .demo-radio-group {\n margin-top: 10px;\n}\n"},"body":"\n````jsx\nimport { Button, Radio, Dialog } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n state = {\n visible: false,\n footerActions: ['ok', 'cancel'],\n footerAlign: 'right',\n loading: false\n };\n\n onOpen = () => {\n this.setState({\n visible: true\n });\n }\n\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n\n toggleFooterActions = footerActionsStr => {\n this.setState({\n footerActions: footerActionsStr.split(',')\n });\n };\n\n toggleFooterAlign = footerAlign => {\n this.setState({\n footerAlign\n });\n };\n\n toggleOkLoader = loading => {\n this.setState({\n loading\n });\n }\n\n render() {\n const { visible, footerActions, footerAlign, loading } = this.state;\n const okProps = {\n loading\n };\n\n return (\n
\n \n \n
\n \n ok is left\n ok is right\n only ok\n only cancel\n \n \n left\n center\n right\n \n \n Loading Off\n Loading On\n \n
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo-content {\n padding: 10px;\n border: 2px dashed #ddd;\n background: #F8F8F8;\n}\n\n.demo-radio-group {\n display: block;\n}\n\n.demo-radio-group + .demo-radio-group {\n margin-top: 10px;\n}\n````","html":"
import { Button, Radio, Dialog } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n    state = {\n        visible: false,\n        footerActions: ['ok', 'cancel'],\n        footerAlign: 'right',\n        loading: false\n    };\n\n    onOpen = () => {\n        this.setState({\n            visible: true\n        });\n    }\n\n    onClose = () => {\n        this.setState({\n            visible: false\n        });\n    };\n\n    toggleFooterActions = footerActionsStr => {\n        this.setState({\n            footerActions: footerActionsStr.split(',')\n        });\n    };\n\n    toggleFooterAlign = footerAlign => {\n        this.setState({\n            footerAlign\n        });\n    };\n\n    toggleOkLoader = loading => {\n        this.setState({\n            loading\n        });\n    }\n\n    render() {\n        const { visible, footerActions, footerAlign, loading } = this.state;\n        const okProps = {\n            loading\n        };\n\n        return (\n            <div>\n                <Button onClick={this.onOpen} type=\"primary\">\n                    Open dialog\n                </Button>\n                <Dialog title=\"Customize buttons of footer\"\n                    visible={visible}\n                    footerActions={footerActions}\n                    footerAlign={footerAlign}\n                    onOk={this.onClose}\n                    onCancel={this.onClose}\n                    onClose={this.onClose}\n                    okProps={okProps}\n                    >\n                    <div className=\"demo-content\">\n                        <Radio.Group className=\"demo-radio-group\" shape=\"button\" value={footerActions.join(',')} onChange={this.toggleFooterActions}>\n                            <Radio value=\"ok,cancel\">ok is left</Radio>\n                            <Radio value=\"cancel,ok\">ok is right</Radio>\n                            <Radio value=\"ok\">only ok</Radio>\n                            <Radio value=\"cancel\">only cancel</Radio>\n                        </Radio.Group>\n                        <Radio.Group className=\"demo-radio-group\" shape=\"button\" value={footerAlign} onChange={this.toggleFooterAlign}>\n                            <Radio value=\"left\">left</Radio>\n                            <Radio value=\"center\">center</Radio>\n                            <Radio value=\"right\">right</Radio>\n                        </Radio.Group>\n                        <Radio.Group  className=\"demo-radio-group\" shape=\"button\" value={loading} onChange={this.toggleOkLoader}>\n                            <Radio value={false}>Loading Off</Radio>\n                            <Radio value>Loading On</Radio>\n                        </Radio.Group>\n                    </div>\n                </Dialog>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.demo-content {\n    padding: 10px;\n    border: 2px dashed #ddd;\n    background: #F8F8F8;\n}\n\n.demo-radio-group {\n    display: block;\n}\n\n.demo-radio-group + .demo-radio-group  {\n    margin-top: 10px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/dialog/demo/footer.md b/compiled_docs/dialog/demo/footer.md new file mode 100644 index 0000000000..dfeef16ef4 --- /dev/null +++ b/compiled_docs/dialog/demo/footer.md @@ -0,0 +1 @@ +{"title":"定制底部按钮","meta":{"title":"定制底部按钮","description":"\n

通过 footerActions 来调整确定按钮和取消按钮是否出现以及相互间的位置，通过 footerAlign 来调整底部按钮的对齐方式。

\n","order":"1"},"codes":{"jsx":"import { Button, Radio, Dialog } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n state = {\n visible: false,\n footerActions: ['ok', 'cancel'],\n footerAlign: 'right',\n loading: false\n };\n\n onOpen = () => {\n this.setState({\n visible: true\n });\n }\n\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n\n toggleFooterActions = footerActionsStr => {\n this.setState({\n footerActions: footerActionsStr.split(',')\n });\n };\n\n toggleFooterAlign = footerAlign => {\n this.setState({\n footerAlign\n });\n };\n\n toggleOkLoader = loading => {\n this.setState({\n loading\n });\n }\n\n render() {\n const { visible, footerActions, footerAlign, loading } = this.state;\n const okProps = {\n loading\n };\n\n return (\n
\n \n \n
\n \n ok is left\n ok is right\n only ok\n only cancel\n \n \n left\n center\n right\n \n \n Loading Off\n Loading On\n \n
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".demo-content {\n padding: 10px;\n border: 2px dashed #ddd;\n background: #F8F8F8;\n}\n\n.demo-radio-group {\n display: block;\n}\n\n.demo-radio-group + .demo-radio-group {\n margin-top: 10px;\n}\n"},"body":"\n\n````jsx\nimport { Button, Radio, Dialog } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n state = {\n visible: false,\n footerActions: ['ok', 'cancel'],\n footerAlign: 'right',\n loading: false\n };\n\n onOpen = () => {\n this.setState({\n visible: true\n });\n }\n\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n\n toggleFooterActions = footerActionsStr => {\n this.setState({\n footerActions: footerActionsStr.split(',')\n });\n };\n\n toggleFooterAlign = footerAlign => {\n this.setState({\n footerAlign\n });\n };\n\n toggleOkLoader = loading => {\n this.setState({\n loading\n });\n }\n\n render() {\n const { visible, footerActions, footerAlign, loading } = this.state;\n const okProps = {\n loading\n };\n\n return (\n
\n \n \n
\n \n ok is left\n ok is right\n only ok\n only cancel\n \n \n left\n center\n right\n \n \n Loading Off\n Loading On\n \n
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo-content {\n padding: 10px;\n border: 2px dashed #ddd;\n background: #F8F8F8;\n}\n\n.demo-radio-group {\n display: block;\n}\n\n.demo-radio-group + .demo-radio-group {\n margin-top: 10px;\n}\n````","html":"
import { Button, Radio, Dialog } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n    state = {\n        visible: false,\n        footerActions: ['ok', 'cancel'],\n        footerAlign: 'right',\n        loading: false\n    };\n\n    onOpen = () => {\n        this.setState({\n            visible: true\n        });\n    }\n\n    onClose = () => {\n        this.setState({\n            visible: false\n        });\n    };\n\n    toggleFooterActions = footerActionsStr => {\n        this.setState({\n            footerActions: footerActionsStr.split(',')\n        });\n    };\n\n    toggleFooterAlign = footerAlign => {\n        this.setState({\n            footerAlign\n        });\n    };\n\n    toggleOkLoader = loading => {\n        this.setState({\n            loading\n        });\n    }\n\n    render() {\n        const { visible, footerActions, footerAlign, loading } = this.state;\n        const okProps = {\n            loading\n        };\n\n        return (\n            <div>\n                <Button onClick={this.onOpen} type=\"primary\">\n                    Open dialog\n                </Button>\n                <Dialog title=\"Customize buttons of footer\"\n                    visible={visible}\n                    footerActions={footerActions}\n                    footerAlign={footerAlign}\n                    onOk={this.onClose}\n                    onCancel={this.onClose}\n                    onClose={this.onClose}\n                    okProps={okProps}\n                    >\n                    <div className=\"demo-content\">\n                        <Radio.Group className=\"demo-radio-group\" shape=\"button\" value={footerActions.join(',')} onChange={this.toggleFooterActions}>\n                            <Radio value=\"ok,cancel\">ok is left</Radio>\n                            <Radio value=\"cancel,ok\">ok is right</Radio>\n                            <Radio value=\"ok\">only ok</Radio>\n                            <Radio value=\"cancel\">only cancel</Radio>\n                        </Radio.Group>\n                        <Radio.Group className=\"demo-radio-group\" shape=\"button\" value={footerAlign} onChange={this.toggleFooterAlign}>\n                            <Radio value=\"left\">left</Radio>\n                            <Radio value=\"center\">center</Radio>\n                            <Radio value=\"right\">right</Radio>\n                        </Radio.Group>\n                        <Radio.Group  className=\"demo-radio-group\" shape=\"button\" value={loading} onChange={this.toggleOkLoader}>\n                            <Radio value={false}>Loading Off</Radio>\n                            <Radio value>Loading On</Radio>\n                        </Radio.Group>\n                    </div>\n                </Dialog>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.demo-content {\n    padding: 10px;\n    border: 2px dashed #ddd;\n    background: #F8F8F8;\n}\n\n.demo-radio-group {\n    display: block;\n}\n\n.demo-radio-group + .demo-radio-group  {\n    margin-top: 10px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/dialog/demo/large-content.en-us.md b/compiled_docs/dialog/demo/large-content.en-us.md new file mode 100644 index 0000000000..b26c27700b --- /dev/null +++ b/compiled_docs/dialog/demo/large-content.en-us.md @@ -0,0 +1 @@ +{"title":"Large content dialog","meta":{"title":"Large content dialog","description":"\n

When the height of the dialog exceeds the viewport height of the browser, the default is to have the scroll bar appear in the body area of the dialog. This ensures that the bottom button can appear directly in the viewport, which is convenient to operate. If you don't want to show a scroll bar, please set isFullScreen to true to show all the content of the dialog.

\n","order":"4"},"codes":{"jsx":"import { Switch, Button, Dialog } from '@alifd/next';\n\n\nconst largeContent = new Array(30).fill(\n

Start your business here by searching a popular product

\n);\n\nclass Demo extends React.Component {\n state = {\n visible: false,\n isFullScreen: false\n };\n\n onOpen = () => {\n this.setState({\n visible: true\n });\n };\n\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n\n toggleIsFullScreen = () => {\n this.setState({\n isFullScreen: !this.state.isFullScreen\n });\n }\n\n render() {\n const { visible, isFullScreen } = this.state;\n\n return (\n
\n
\n When the height of the dialog exceeds the viewport height of the browser, whether to show the scroll bar:\n
\n \n \n \n {largeContent}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Switch, Button, Dialog } from '@alifd/next';\n\n\nconst largeContent = new Array(30).fill(\n

Start your business here by searching a popular product

\n);\n\nclass Demo extends React.Component {\n state = {\n visible: false,\n isFullScreen: false\n };\n\n onOpen = () => {\n this.setState({\n visible: true\n });\n };\n\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n\n toggleIsFullScreen = () => {\n this.setState({\n isFullScreen: !this.state.isFullScreen\n });\n }\n\n render() {\n const { visible, isFullScreen } = this.state;\n\n return (\n
\n
\n When the height of the dialog exceeds the viewport height of the browser, whether to show the scroll bar:\n
\n \n \n \n {largeContent}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Switch, Button, Dialog } from '@alifd/next';\n\n\nconst largeContent = new Array(30).fill(\n    <p>Start your business here by searching a popular product</p>\n);\n\nclass Demo extends React.Component {\n    state = {\n        visible: false,\n        isFullScreen: false\n    };\n\n    onOpen = () => {\n        this.setState({\n            visible: true\n        });\n    };\n\n    onClose = () => {\n        this.setState({\n            visible: false\n        });\n    };\n\n    toggleIsFullScreen = () => {\n        this.setState({\n            isFullScreen: !this.state.isFullScreen\n        });\n    }\n\n    render() {\n        const { visible, isFullScreen } = this.state;\n\n        return (\n            <div>\n                <div style={{ display: 'block', marginBottom: '10px' }}>\n                    When the height of the dialog exceeds the viewport height of the browser, whether to show the scroll bar:\n                </div>\n                <Switch style={{ display: 'block', marginBottom: '10px' }} checked={isFullScreen} onChange={this.toggleIsFullScreen} />\n                <Button onClick={this.onOpen} type=\"primary\">\n                    Open dialog\n                </Button>\n                <Dialog title=\"Welcome to Alibaba.com\"\n                    visible={visible}\n                    isFullScreen={isFullScreen}\n                    onOk={this.onClose}\n                    onCancel={this.onClose}\n                    onClose={this.onClose}>\n                    {largeContent}\n                </Dialog>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/dialog/demo/large-content.md b/compiled_docs/dialog/demo/large-content.md new file mode 100644 index 0000000000..b5530010f5 --- /dev/null +++ b/compiled_docs/dialog/demo/large-content.md @@ -0,0 +1 @@ +{"title":"内容较多的对话框","meta":{"title":"内容较多的对话框","description":"\n","order":"4"},"codes":{"jsx":"import { Switch, Button, Dialog } from '@alifd/next';\n\n\nconst largeContent = new Array(30).fill(\n

Start your business here by searching a popular product

\n);\n\nclass Demo extends React.Component {\n state = {\n visible: false,\n isFullScreen: false\n };\n\n onOpen = () => {\n this.setState({\n visible: true\n });\n };\n\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n\n toggleIsFullScreen = () => {\n this.setState({\n isFullScreen: !this.state.isFullScreen\n });\n }\n\n render() {\n const { visible, isFullScreen } = this.state;\n\n return (\n
\n
\n When the height of the dialog exceeds the viewport height of the browser, whether to show the scroll bar:\n
\n \n \n \n {largeContent}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Switch, Button, Dialog } from '@alifd/next';\n\n\nconst largeContent = new Array(30).fill(\n

Start your business here by searching a popular product

\n);\n\nclass Demo extends React.Component {\n state = {\n visible: false,\n isFullScreen: false\n };\n\n onOpen = () => {\n this.setState({\n visible: true\n });\n };\n\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n\n toggleIsFullScreen = () => {\n this.setState({\n isFullScreen: !this.state.isFullScreen\n });\n }\n\n render() {\n const { visible, isFullScreen } = this.state;\n\n return (\n
\n
\n When the height of the dialog exceeds the viewport height of the browser, whether to show the scroll bar:\n
\n \n \n \n {largeContent}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Switch, Button, Dialog } from '@alifd/next';\n\n\nconst largeContent = new Array(30).fill(\n    <p>Start your business here by searching a popular product</p>\n);\n\nclass Demo extends React.Component {\n    state = {\n        visible: false,\n        isFullScreen: false\n    };\n\n    onOpen = () => {\n        this.setState({\n            visible: true\n        });\n    };\n\n    onClose = () => {\n        this.setState({\n            visible: false\n        });\n    };\n\n    toggleIsFullScreen = () => {\n        this.setState({\n            isFullScreen: !this.state.isFullScreen\n        });\n    }\n\n    render() {\n        const { visible, isFullScreen } = this.state;\n\n        return (\n            <div>\n                <div style={{ display: 'block', marginBottom: '10px' }}>\n                    When the height of the dialog exceeds the viewport height of the browser, whether to show the scroll bar:\n                </div>\n                <Switch style={{ display: 'block', marginBottom: '10px' }} checked={isFullScreen} onChange={this.toggleIsFullScreen} />\n                <Button onClick={this.onOpen} type=\"primary\">\n                    Open dialog\n                </Button>\n                <Dialog title=\"Welcome to Alibaba.com\"\n                    visible={visible}\n                    isFullScreen={isFullScreen}\n                    onOk={this.onClose}\n                    onCancel={this.onClose}\n                    onClose={this.onClose}>\n                    {largeContent}\n                </Dialog>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/dialog/demo/promise.en-us.md b/compiled_docs/dialog/demo/promise.en-us.md new file mode 100644 index 0000000000..d7f88b3639 --- /dev/null +++ b/compiled_docs/dialog/demo/promise.en-us.md @@ -0,0 +1 @@ +{"title":"Delay close","meta":{"title":"Delay close","description":"\n

When using Dialog.alert, Dialog.confirm, and Dialog.show, if onOk returns a Promise, the dialog will close when the Promise resolves, unless resolve(false) is called.

\n","order":"6"},"codes":{"jsx":"import { Button, Message, Dialog } from '@alifd/next';\n\nclass Demo extends React.Component {\n state = {\n visible: false,\n loading: false,\n };\n\n onOpen = () => {\n this.setState({\n visible: true\n });\n };\n\n onOk = () => {\n return new Promise(resolve => {\n this.setState({\n loading: true\n });\n setTimeout(resolve, 2000);\n }).then(() => {\n Message.success('Deleted successfully!');\n this.setState({\n loading: false,\n visible: false\n });\n });\n };\n\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n\n render() {\n const okProps = {\n loading: this.state.loading\n };\n return (\n
\n \n \n Start your business here by searching a popular product\n \n
\n );\n }\n}\n\nconst popupConfirm = () => {\n Dialog.confirm({\n title: 'Confirm',\n content: 'Do you confirm deleting this content?',\n onOk: () => {\n return new Promise(resolve => {\n setTimeout(resolve, 2000);\n }).then(() => {\n Message.success('Deleted successfully!');\n });\n }\n });\n};\n\nReactDOM.render(
\n \n \n
\n, mountNode);\n"},"body":"\n````jsx\nimport { Button, Message, Dialog } from '@alifd/next';\n\nclass Demo extends React.Component {\n state = {\n visible: false,\n loading: false,\n };\n\n onOpen = () => {\n this.setState({\n visible: true\n });\n };\n\n onOk = () => {\n return new Promise(resolve => {\n this.setState({\n loading: true\n });\n setTimeout(resolve, 2000);\n }).then(() => {\n Message.success('Deleted successfully!');\n this.setState({\n loading: false,\n visible: false\n });\n });\n };\n\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n\n render() {\n const okProps = {\n loading: this.state.loading\n };\n return (\n
\n \n \n Start your business here by searching a popular product\n \n
\n );\n }\n}\n\nconst popupConfirm = () => {\n Dialog.confirm({\n title: 'Confirm',\n content: 'Do you confirm deleting this content?',\n onOk: () => {\n return new Promise(resolve => {\n setTimeout(resolve, 2000);\n }).then(() => {\n Message.success('Deleted successfully!');\n });\n }\n });\n};\n\nReactDOM.render(
\n \n \n
\n, mountNode);\n````","html":"
import { Button, Message, Dialog } from '@alifd/next';\n\nclass Demo extends React.Component {\n    state = {\n        visible: false,\n        loading: false,\n    };\n\n    onOpen = () => {\n        this.setState({\n            visible: true\n        });\n    };\n\n    onOk = () => {\n        return new Promise(resolve => {\n            this.setState({\n                loading: true\n            });\n            setTimeout(resolve, 2000);\n        }).then(() => {\n            Message.success('Deleted successfully!');\n            this.setState({\n                loading: false,\n                visible: false\n            });\n        });\n    };\n\n    onClose = () => {\n        this.setState({\n            visible: false\n        });\n    };\n\n    render() {\n        const okProps = {\n            loading: this.state.loading\n        };\n        return (\n            <div>\n                <Button onClick={this.onOpen} type=\"primary\">\n                    Dialog Promise\n                </Button>\n                <Dialog\n                    title=\"Welcome to Alibaba.com\"\n                    visible={this.state.visible}\n                    okProps={okProps}\n                    onOk={this.onOk}\n                    onCancel={this.onClose}\n                    onClose={this.onClose}>\n                    Start your business here by searching a popular product\n                </Dialog>\n            </div>\n        );\n    }\n}\n\nconst popupConfirm = () => {\n    Dialog.confirm({\n        title: 'Confirm',\n        content: 'Do you confirm deleting this content?',\n        onOk: () => {\n            return new Promise(resolve => {\n                setTimeout(resolve, 2000);\n            }).then(() => {\n                Message.success('Deleted successfully!');\n            });\n        }\n    });\n};\n\nReactDOM.render(<div>\n    <Demo />\n    <Button type=\"primary\" warning onClick={popupConfirm}>Quick Confirm Promise</Button>\n</div>\n, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/dialog/demo/promise.md b/compiled_docs/dialog/demo/promise.md new file mode 100644 index 0000000000..e45e05d7a2 --- /dev/null +++ b/compiled_docs/dialog/demo/promise.md @@ -0,0 +1 @@ +{"title":"延迟关闭","meta":{"title":"延迟关闭","description":"\n

在使用 Dialog.alert，Dialog.confirm 以及 Dialog.show 时，如果 onOk 返回 Promise，对话框会在 Promise resolve 时关闭，除非调用 resolve(false)。

\n","order":"6"},"codes":{"jsx":"import { Button, Message, Dialog } from '@alifd/next';\n\nclass Demo extends React.Component {\n state = {\n visible: false,\n loading: false,\n };\n\n onOpen = () => {\n this.setState({\n visible: true\n });\n };\n\n onOk = () => {\n return new Promise(resolve => {\n this.setState({\n loading: true\n });\n setTimeout(resolve, 2000);\n }).then(() => {\n Message.success('Deleted successfully!');\n this.setState({\n loading: false,\n visible: false\n });\n });\n };\n\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n\n render() {\n const okProps = {\n loading: this.state.loading\n };\n return (\n
\n \n \n Start your business here by searching a popular product\n \n
\n );\n }\n}\n\nconst popupConfirm = () => {\n Dialog.confirm({\n title: 'Confirm',\n content: 'Do you confirm deleting this content?',\n onOk: () => {\n return new Promise(resolve => {\n setTimeout(resolve, 2000);\n }).then(() => {\n Message.success('Deleted successfully!');\n });\n }\n });\n};\n\nReactDOM.render(
\n \n \n
\n, mountNode);\n"},"body":"\n\n````jsx\nimport { Button, Message, Dialog } from '@alifd/next';\n\nclass Demo extends React.Component {\n state = {\n visible: false,\n loading: false,\n };\n\n onOpen = () => {\n this.setState({\n visible: true\n });\n };\n\n onOk = () => {\n return new Promise(resolve => {\n this.setState({\n loading: true\n });\n setTimeout(resolve, 2000);\n }).then(() => {\n Message.success('Deleted successfully!');\n this.setState({\n loading: false,\n visible: false\n });\n });\n };\n\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n\n render() {\n const okProps = {\n loading: this.state.loading\n };\n return (\n
\n \n \n Start your business here by searching a popular product\n \n
\n );\n }\n}\n\nconst popupConfirm = () => {\n Dialog.confirm({\n title: 'Confirm',\n content: 'Do you confirm deleting this content?',\n onOk: () => {\n return new Promise(resolve => {\n setTimeout(resolve, 2000);\n }).then(() => {\n Message.success('Deleted successfully!');\n });\n }\n });\n};\n\nReactDOM.render(
\n \n \n
\n, mountNode);\n````","html":"
import { Button, Message, Dialog } from '@alifd/next';\n\nclass Demo extends React.Component {\n    state = {\n        visible: false,\n        loading: false,\n    };\n\n    onOpen = () => {\n        this.setState({\n            visible: true\n        });\n    };\n\n    onOk = () => {\n        return new Promise(resolve => {\n            this.setState({\n                loading: true\n            });\n            setTimeout(resolve, 2000);\n        }).then(() => {\n            Message.success('Deleted successfully!');\n            this.setState({\n                loading: false,\n                visible: false\n            });\n        });\n    };\n\n    onClose = () => {\n        this.setState({\n            visible: false\n        });\n    };\n\n    render() {\n        const okProps = {\n            loading: this.state.loading\n        };\n        return (\n            <div>\n                <Button onClick={this.onOpen} type=\"primary\">\n                    Dialog Promise\n                </Button>\n                <Dialog\n                    title=\"Welcome to Alibaba.com\"\n                    visible={this.state.visible}\n                    okProps={okProps}\n                    onOk={this.onOk}\n                    onCancel={this.onClose}\n                    onClose={this.onClose}>\n                    Start your business here by searching a popular product\n                </Dialog>\n            </div>\n        );\n    }\n}\n\nconst popupConfirm = () => {\n    Dialog.confirm({\n        title: 'Confirm',\n        content: 'Do you confirm deleting this content?',\n        onOk: () => {\n            return new Promise(resolve => {\n                setTimeout(resolve, 2000);\n            }).then(() => {\n                Message.success('Deleted successfully!');\n            });\n        }\n    });\n};\n\nReactDOM.render(<div>\n    <Demo />\n    <Button type=\"primary\" warning onClick={popupConfirm}>Quick Confirm Promise</Button>\n</div>\n, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/dialog/demo/quick.en-us.md b/compiled_docs/dialog/demo/quick.en-us.md new file mode 100644 index 0000000000..e92db63cc7 --- /dev/null +++ b/compiled_docs/dialog/demo/quick.en-us.md @@ -0,0 +1 @@ +{"title":"Quick call","meta":{"title":"Quick call","description":"\n

The Dialog provides quick methods called alert and confirm, as well as a lower-level show method.

\n","order":"5"},"codes":{"jsx":"import { Button, Dialog, ConfigProvider } from '@alifd/next';\n\n\nconst popupAlert = () => {\n Dialog.alert({\n title: 'Alert',\n content: 'alert content alert content...',\n onOk: () => console.log('ok')\n });\n};\n\nconst popupConfirm = () => {\n Dialog.confirm({\n title: 'Confirm',\n content: 'confirm content confirm content...',\n onOk: () => console.log('ok'),\n onCancel: () => console.log('cancel')\n });\n};\n\nconst popupCustom = () => {\n const dialog = Dialog.show({\n title: 'Custom',\n content: 'custom content custom content...',\n footer: (\n \n )\n });\n};\n\nReactDOM.render(\n \n \n  \n  \n \n \n ,\n mountNode\n);\n"},"body":"\n````jsx\nimport { Button, Dialog, ConfigProvider } from '@alifd/next';\n\n\nconst popupAlert = () => {\n Dialog.alert({\n title: 'Alert',\n content: 'alert content alert content...',\n onOk: () => console.log('ok')\n });\n};\n\nconst popupConfirm = () => {\n Dialog.confirm({\n title: 'Confirm',\n content: 'confirm content confirm content...',\n onOk: () => console.log('ok'),\n onCancel: () => console.log('cancel')\n });\n};\n\nconst popupCustom = () => {\n const dialog = Dialog.show({\n title: 'Custom',\n content: 'custom content custom content...',\n footer: (\n \n )\n });\n};\n\nReactDOM.render(\n \n \n  \n  \n \n \n ,\n mountNode\n);\n````","html":"
import { Button, Dialog, ConfigProvider } from '@alifd/next';\n\n\nconst popupAlert = () => {\n    Dialog.alert({\n        title: 'Alert',\n        content: 'alert content alert content...',\n        onOk: () => console.log('ok')\n    });\n};\n\nconst popupConfirm = () => {\n    Dialog.confirm({\n        title: 'Confirm',\n        content: 'confirm content confirm content...',\n        onOk: () => console.log('ok'),\n        onCancel: () => console.log('cancel')\n    });\n};\n\nconst popupCustom = () => {\n    const dialog = Dialog.show({\n        title: 'Custom',\n        content: 'custom content custom content...',\n        footer: (\n            <Button warning type=\"primary\" onClick={() => dialog.hide()}>\n                Custom button\n            </Button>\n        )\n    });\n};\n\nReactDOM.render(\n    <ConfigProvider locale={{ Dialog: { ok: 'OK', cancel: 'Cancel' } }}>\n        <span>\n            <Button onClick={popupAlert}>Alert</Button> &nbsp;\n            <Button onClick={popupConfirm}>Confirm</Button> &nbsp;\n            <Button onClick={popupCustom}>Custom</Button>\n        </span>\n    </ConfigProvider>,\n    mountNode\n);
"} \ No newline at end of file diff --git a/compiled_docs/dialog/demo/quick.md b/compiled_docs/dialog/demo/quick.md new file mode 100644 index 0000000000..cc1fc6f650 --- /dev/null +++ b/compiled_docs/dialog/demo/quick.md @@ -0,0 +1 @@ +{"title":"快捷调用","meta":{"title":"快捷调用","description":"\n

Dialog 提供 alert 和 confirm 的快掉调用方式，以及更底层的 show 方式。

\n","order":"5"},"codes":{"jsx":"import { Button, Dialog, ConfigProvider } from '@alifd/next';\n\n\nconst popupAlert = () => {\n Dialog.alert({\n title: 'Alert',\n content: 'alert content alert content...',\n onOk: () => console.log('ok')\n });\n};\n\nconst popupConfirm = () => {\n Dialog.confirm({\n title: 'Confirm',\n content: 'confirm content confirm content...',\n onOk: () => console.log('ok'),\n onCancel: () => console.log('cancel')\n });\n};\n\nconst popupCustom = () => {\n const dialog = Dialog.show({\n title: 'Custom',\n content: 'custom content custom content...',\n footer: (\n \n )\n });\n};\n\nReactDOM.render(\n \n \n  \n  \n \n \n ,\n mountNode\n);\n"},"body":"\n\n````jsx\nimport { Button, Dialog, ConfigProvider } from '@alifd/next';\n\n\nconst popupAlert = () => {\n Dialog.alert({\n title: 'Alert',\n content: 'alert content alert content...',\n onOk: () => console.log('ok')\n });\n};\n\nconst popupConfirm = () => {\n Dialog.confirm({\n title: 'Confirm',\n content: 'confirm content confirm content...',\n onOk: () => console.log('ok'),\n onCancel: () => console.log('cancel')\n });\n};\n\nconst popupCustom = () => {\n const dialog = Dialog.show({\n title: 'Custom',\n content: 'custom content custom content...',\n footer: (\n \n )\n });\n};\n\nReactDOM.render(\n \n \n  \n  \n \n \n ,\n mountNode\n);\n````","html":"
import { Button, Dialog, ConfigProvider } from '@alifd/next';\n\n\nconst popupAlert = () => {\n    Dialog.alert({\n        title: 'Alert',\n        content: 'alert content alert content...',\n        onOk: () => console.log('ok')\n    });\n};\n\nconst popupConfirm = () => {\n    Dialog.confirm({\n        title: 'Confirm',\n        content: 'confirm content confirm content...',\n        onOk: () => console.log('ok'),\n        onCancel: () => console.log('cancel')\n    });\n};\n\nconst popupCustom = () => {\n    const dialog = Dialog.show({\n        title: 'Custom',\n        content: 'custom content custom content...',\n        footer: (\n            <Button warning type=\"primary\" onClick={() => dialog.hide()}>\n                Custom button\n            </Button>\n        )\n    });\n};\n\nReactDOM.render(\n    <ConfigProvider locale={{ Dialog: { ok: 'OK', cancel: 'Cancel' } }}>\n        <span>\n            <Button onClick={popupAlert}>Alert</Button> &nbsp;\n            <Button onClick={popupConfirm}>Confirm</Button> &nbsp;\n            <Button onClick={popupCustom}>Custom</Button>\n        </span>\n    </ConfigProvider>,\n    mountNode\n);
"} \ No newline at end of file diff --git a/compiled_docs/dialog/demo/should-update-position.en-us.md b/compiled_docs/dialog/demo/should-update-position.en-us.md new file mode 100644 index 0000000000..ca1c588e48 --- /dev/null +++ b/compiled_docs/dialog/demo/should-update-position.en-us.md @@ -0,0 +1 @@ +{"title":"Update position","meta":{"title":"Update position","description":"\n

Update the position of the dialog by setting shouldUpdatePosition to true. It is generally used to change the contents of the dialog but still ensure the original alignment.

\n","order":"3"},"codes":{"jsx":"import { Switch, Button, Dialog } from '@alifd/next';\n\n\nconst shortContent =

Start your business here by searching a popular product

;\nconst longContent = [\n

Start your business here by searching a popular product

,\n

Start your business here by searching a popular product

,\n

Start your business here by searching a popular product

,\n

Start your business here by searching a popular product

\n];\n\nclass App extends React.Component {\n state = {\n visible: false,\n short: true,\n shouldUpdatePosition: true\n }\n\n onOpen = () => {\n this.setState({\n visible: true,\n short: true\n });\n };\n\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n\n toggleShouldUpdatePosition = () => {\n this.setState({\n shouldUpdatePosition: !this.state.shouldUpdatePosition\n });\n };\n\n modifyContent = () => {\n this.setState({\n short: !this.state.short\n });\n };\n\n render() {\n const { visible, short, shouldUpdatePosition } = this.state;\n\n return (\n
\n
\n Whether to update the dialog position when the dialog height changes:\n
\n \n \n \n \n {short ? shortContent : longContent}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Switch, Button, Dialog } from '@alifd/next';\n\n\nconst shortContent =

Start your business here by searching a popular product

;\nconst longContent = [\n

Start your business here by searching a popular product

,\n

Start your business here by searching a popular product

,\n

Start your business here by searching a popular product

,\n

Start your business here by searching a popular product

\n];\n\nclass App extends React.Component {\n state = {\n visible: false,\n short: true,\n shouldUpdatePosition: true\n }\n\n onOpen = () => {\n this.setState({\n visible: true,\n short: true\n });\n };\n\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n\n toggleShouldUpdatePosition = () => {\n this.setState({\n shouldUpdatePosition: !this.state.shouldUpdatePosition\n });\n };\n\n modifyContent = () => {\n this.setState({\n short: !this.state.short\n });\n };\n\n render() {\n const { visible, short, shouldUpdatePosition } = this.state;\n\n return (\n
\n
\n Whether to update the dialog position when the dialog height changes:\n
\n \n \n \n \n {short ? shortContent : longContent}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Switch, Button, Dialog } from '@alifd/next';\n\n\nconst shortContent = <p>Start your business here by searching a popular product</p>;\nconst longContent = [\n    <p key=\"0\">Start your business here by searching a popular product</p>,\n    <p key=\"1\">Start your business here by searching a popular product</p>,\n    <p key=\"2\">Start your business here by searching a popular product</p>,\n    <p key=\"3\">Start your business here by searching a popular product</p>\n];\n\nclass App extends React.Component {\n    state = {\n        visible: false,\n        short: true,\n        shouldUpdatePosition: true\n    }\n\n    onOpen = () => {\n        this.setState({\n            visible: true,\n            short: true\n        });\n    };\n\n    onClose = () => {\n        this.setState({\n            visible: false\n        });\n    };\n\n    toggleShouldUpdatePosition = () => {\n        this.setState({\n            shouldUpdatePosition: !this.state.shouldUpdatePosition\n        });\n    };\n\n    modifyContent = () => {\n        this.setState({\n            short: !this.state.short\n        });\n    };\n\n    render() {\n        const { visible, short, shouldUpdatePosition } = this.state;\n\n        return (\n            <div>\n                <div style={{ display: 'block', marginBottom: '10px' }}>\n                    Whether to update the dialog position when the dialog height changes:\n                </div>\n                <Switch style={{ display: 'block', marginBottom: '10px' }} checked={shouldUpdatePosition} onChange={this.toggleShouldUpdatePosition} />\n                <Button onClick={this.onOpen} type=\"primary\">\n                    Open dialog\n                </Button>\n                <Dialog title=\"Welcome to Alibaba.com\"\n                    visible={visible}\n                    onOk={this.onClose.bind(this, 'okClick')}\n                    onCancel={this.onClose.bind(this, 'cancelClick')}\n                    onClose={this.onClose}\n                    shouldUpdatePosition={shouldUpdatePosition}>\n                    <Button type=\"primary\" onClick={this.modifyContent}>\n                        Change content\n                    </Button>\n                    {short ? shortContent : longContent}\n                </Dialog>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/dialog/demo/should-update-position.md b/compiled_docs/dialog/demo/should-update-position.md new file mode 100644 index 0000000000..7c766503e4 --- /dev/null +++ b/compiled_docs/dialog/demo/should-update-position.md @@ -0,0 +1 @@ +{"title":"更新位置","meta":{"title":"更新位置","description":"\n

通过设置 shouldUpdatePosition 为 true 来及时更新对话框的位置，一般用于对话框内容发生变化但是仍然要保证原来对齐方式的情况

\n","order":"3"},"codes":{"jsx":"import { Switch, Button, Dialog } from '@alifd/next';\n\n\nconst shortContent =

Start your business here by searching a popular product

;\nconst longContent = [\n

Start your business here by searching a popular product

,\n

Start your business here by searching a popular product

,\n

Start your business here by searching a popular product

,\n

Start your business here by searching a popular product

\n];\n\nclass App extends React.Component {\n state = {\n visible: false,\n short: true,\n shouldUpdatePosition: true\n }\n\n onOpen = () => {\n this.setState({\n visible: true,\n short: true\n });\n };\n\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n\n toggleShouldUpdatePosition = () => {\n this.setState({\n shouldUpdatePosition: !this.state.shouldUpdatePosition\n });\n };\n\n modifyContent = () => {\n this.setState({\n short: !this.state.short\n });\n };\n\n render() {\n const { visible, short, shouldUpdatePosition } = this.state;\n\n return (\n
\n
\n Whether to update the dialog position when the dialog height changes:\n
\n \n \n \n \n {short ? shortContent : longContent}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Switch, Button, Dialog } from '@alifd/next';\n\n\nconst shortContent =

Start your business here by searching a popular product

;\nconst longContent = [\n

Start your business here by searching a popular product

,\n

Start your business here by searching a popular product

,\n

Start your business here by searching a popular product

,\n

Start your business here by searching a popular product

\n];\n\nclass App extends React.Component {\n state = {\n visible: false,\n short: true,\n shouldUpdatePosition: true\n }\n\n onOpen = () => {\n this.setState({\n visible: true,\n short: true\n });\n };\n\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n\n toggleShouldUpdatePosition = () => {\n this.setState({\n shouldUpdatePosition: !this.state.shouldUpdatePosition\n });\n };\n\n modifyContent = () => {\n this.setState({\n short: !this.state.short\n });\n };\n\n render() {\n const { visible, short, shouldUpdatePosition } = this.state;\n\n return (\n
\n
\n Whether to update the dialog position when the dialog height changes:\n
\n \n \n \n \n {short ? shortContent : longContent}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Switch, Button, Dialog } from '@alifd/next';\n\n\nconst shortContent = <p>Start your business here by searching a popular product</p>;\nconst longContent = [\n    <p key=\"0\">Start your business here by searching a popular product</p>,\n    <p key=\"1\">Start your business here by searching a popular product</p>,\n    <p key=\"2\">Start your business here by searching a popular product</p>,\n    <p key=\"3\">Start your business here by searching a popular product</p>\n];\n\nclass App extends React.Component {\n    state = {\n        visible: false,\n        short: true,\n        shouldUpdatePosition: true\n    }\n\n    onOpen = () => {\n        this.setState({\n            visible: true,\n            short: true\n        });\n    };\n\n    onClose = () => {\n        this.setState({\n            visible: false\n        });\n    };\n\n    toggleShouldUpdatePosition = () => {\n        this.setState({\n            shouldUpdatePosition: !this.state.shouldUpdatePosition\n        });\n    };\n\n    modifyContent = () => {\n        this.setState({\n            short: !this.state.short\n        });\n    };\n\n    render() {\n        const { visible, short, shouldUpdatePosition } = this.state;\n\n        return (\n            <div>\n                <div style={{ display: 'block', marginBottom: '10px' }}>\n                    Whether to update the dialog position when the dialog height changes:\n                </div>\n                <Switch style={{ display: 'block', marginBottom: '10px' }} checked={shouldUpdatePosition} onChange={this.toggleShouldUpdatePosition} />\n                <Button onClick={this.onOpen} type=\"primary\">\n                    Open dialog\n                </Button>\n                <Dialog title=\"Welcome to Alibaba.com\"\n                    visible={visible}\n                    onOk={this.onClose.bind(this, 'okClick')}\n                    onCancel={this.onClose.bind(this, 'cancelClick')}\n                    onClose={this.onClose}\n                    shouldUpdatePosition={shouldUpdatePosition}>\n                    <Button type=\"primary\" onClick={this.modifyContent}>\n                        Change content\n                    </Button>\n                    {short ? shortContent : longContent}\n                </Dialog>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/dialog/index.en-us.md b/compiled_docs/dialog/index.en-us.md new file mode 100644 index 0000000000..fc14e21ad5 --- /dev/null +++ b/compiled_docs/dialog/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Guide#

When To Use#

The dialog is used to provide the user with an auxiliary window for quickly performing a simple operation, confirming user information, or providing a feedback prompt without leaving the main path.

\n

API#

","api":"

Dialog#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
visiblewhether is visibleBooleanfalse
titletitle of dialogReactNode-
childrencontent of dialogReactNode-
footerbottom content, if yout set to false, will not displayBoolean/ReactNode[<Button type="primary">Ok</Button>, <Button>Cancel</Button>]
footerAlignalignment of footer

option:
'left', 'center', 'right'		Enum'right'
footerActionsspecify whether the ok button and the cancel button exist and how they are arranged

option：
['ok', 'cancel'] (The ok and the cancel buttons exist at the same time, and the ok button is on the left)
['cancel', 'ok'] (The ok and the cancel buttons exist at the same time, and the cancel button is on the left)
['ok'] (only ok button exists)
['cancel'] (only cancel button exists)		Array['ok', 'cancel']
onOkcallback function triggered when the ok button is clicked

signatures:
Function(event: Object) => void
params:
event: {Object} clicked event		Function() => {}
onCancelcallback function triggered when the cancel button is clicked

signatures:
Function(event: Object) => void
params:
event: {Object} clicked event		Function() => {}
okPropsproperties of the ok buttonObject{}
cancelPropsproperties of the cancel buttonObject{}
closeablecontrols how the dialog is closed. The value can be either a String or Boolean, where the string consists of the following values:
close clicking the close button can close the dialog
mask clicking the mask can close the dialog
esc pressing the esc key can close the dialog
such as 'close' or 'close,esc,mask'
If set to true, all of the above close methods take effect
If set to false, all of the above close methods will fail		String/Boolean'esc,close'
onClosecallback function triggered when the dialog closes

signatures:
Function(trigger: String, event: Object) => void
params:
trigger: {String} behavior triggered closed
event: {Object} closed event		Function() => {}
afterClosecallback function triggered after the dialog closed, if enabel animation, it will trigger after the animation ends.

signatures:
Function() => void		Function() => {}
hasMaskwhether to has maskBooleantrue
animationopen and close animation class nameObject/Boolean{ in: 'fadeInDown', out: 'fadeOutUp' }
autoFocuswhether to focus the element in the dialog automatically when the dialog is openedBooleanfalse
alignalignment of dialog, @see overlay docs for detailString/Boolean'cc cc'
isFullScreenwhen the height of the dialog exceeds the viewport height of the browser, whether to display all content of dialog or display scrollbars to ensure that the dialog is fully displayed in the viewport. This property is only effective when the dialog is vertically horizontally centered, that is, align is set to 'cc cc'Booleanfalse
shouldUpdatePositionwhether to update the dialog position when the dialog is rerendered. It is generally used to ensure the original alignment after the height of the dialog changes.Booleanfalse
minMarginthe minimum distance between the dialog box at the top and bottom of the browser, it will not work if set align to 'cc cc' and set isFullScreen to trueNumber40
overlayPropsproperties of OverlayObject{}
heightheight style attribute for dialogString-
\n\n

Dialog.alert(config)/Dialog.confirm(config)#

The following only list common properties that config can pass, and other properties of the Dialog can also be passed in.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
titletitle of dialogReactNode''
contentcontent of dialogReactNode''
onOkcallback function triggered when the ok button is clickedFunction() => {}
onCancelcallback function triggered when the cancel button is clickedFunction() => {}
messagePropsproperties of MessageObject{}
\n

Dialog.show#

The following only list common properties that config can pass, and other properties of the Dialog can also be passed in.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
titletitle of dialogReactNode''
contentcontent of dialogReactNode''
onOkcallback function triggered when the ok button is clickedFunction() => {}
onCancelcallback function triggered when the cancel button is clickedFunction() => {}
\n\n

Know Issue#

Stay centered when the dialog height changes#

The Dialog uses JS for positioning by default. When the content is too long, JS automatically adjusts the height of the dialog so that the action button appears in the visible area. However, this may result in the inability to perceive the reuse of JS positioning when the height of the dialog changes. There are two solutions:

\n
    \n

  1. Set shouldUpdatePosition to true to reposition after content is updated.

    \n
    2. \n

  2. Use isFullScreen to enable CSS positioning. It can be adaptively centered no matter how the height of the dialog changes, but the action button cannot appear in the visible area when the content is too long.

    \n
    3. \n
\n

ARIA and Keyboard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyboardDescripiton
escpressing ESC will close dialog
tabfocus on any element that can be focused, the focus remains in the dialog when the dialog is displayed
shift+tabback focus on any element that can be focused, the focus remains in the dialog when the dialog is displayed
\n"} \ No newline at end of file diff --git a/compiled_docs/dialog/index.md b/compiled_docs/dialog/index.md new file mode 100644 index 0000000000..41518cfad3 --- /dev/null +++ b/compiled_docs/dialog/index.md @@ -0,0 +1 @@ +{"meta":"

使用指南#

对话框

\n

何时使用#

对话框是用于在不离开主路径的情况下，提供用户快速执行简单的操作、确认用户信息或反馈提示的辅助窗口。

\n

API#

","api":"

Dialog#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
visible是否显示Booleanfalse
title标题ReactNode-
children内容ReactNode-
footer底部内容，设置为 false，则不进行显示Boolean/ReactNode[<Button type="primary">确定</Button>, <Button>取消</Button>]
footerAlign底部按钮的对齐方式

可选值:
'left', 'center', 'right'		Enum'right'
footerActions指定确定按钮和取消按钮是否存在以及如何排列,

可选值：
['ok', 'cancel']（确认取消按钮同时存在，确认按钮在左）
['cancel', 'ok']（确认取消按钮同时存在，确认按钮在右）
['ok']（只存在确认按钮）
['cancel']（只存在取消按钮）		Array['ok', 'cancel']
onOk在点击确定按钮时触发的回调函数

签名:
Function(event: Object) => void
参数:
event: {Object} 点击事件对象		Function() => {}
onCancel在点击取消按钮时触发的回调函数

签名:
Function(event: Object) => void
参数:
event: {Object} 点击事件对象		Function() => {}
okProps应用于确定按钮的属性对象Object{}
cancelProps应用于取消按钮的属性对象Object{}
closeable控制对话框关闭的方式，值可以为字符串或者布尔值，其中字符串是由以下值组成：
close 表示点击关闭按钮可以关闭对话框
mask 表示点击遮罩区域可以关闭对话框
esc 表示按下 esc 键可以关闭对话框
如 'close' 或 'close,esc,mask'
如果设置为 true，则以上关闭方式全部生效
如果设置为 false，则以上关闭方式全部失效		String/Boolean'esc,close'
onClose对话框关闭时触发的回调函数

签名:
Function(trigger: String, event: Object) => void
参数:
trigger: {String} 关闭触发行为的描述字符串
event: {Object} 关闭时事件对象		Function() => {}
afterClose对话框关闭后触发的回调函数, 如果有动画，则在动画结束后触发

签名:
Function() => void		Function() => {}
hasMask是否显示遮罩Booleantrue
animation显示隐藏时动画的播放方式Object/Boolean{ in: 'fadeInDown', out: 'fadeOutUp', }
autoFocus对话框弹出时是否自动获得焦点Booleanfalse
align对话框对齐方式, 具体见Overlay文档String/Boolean'cc cc'
isFullScreen当对话框高度超过浏览器视口高度时，是否显示所有内容而不是出现滚动条以保证对话框完整显示在浏览器视口内，该属性仅在对话框垂直水平居中时生效，即 align 被设置为 'cc cc' 时Booleanfalse
shouldUpdatePosition是否在对话框重新渲染时及时更新对话框位置，一般用于对话框高度变化后依然能保证原来的对齐方式Booleanfalse
minMargin对话框距离浏览器顶部和底部的最小间距，align 被设置为 'cc cc' 并且 isFullScreen 被设置为 true 时不生效Number40
overlayProps透传到弹层组件的属性对象Object{}
height对话框的高度样式属性String-
\n\n

Dialog.alert(config)/Dialog.confirm(config)#

以下只列举 config 可以传入的常用属性，Dialog 组件的其他属性也可以传入

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性说明类型默认值
title标题ReactNode''
content内容ReactNode''
onOk在点击确定按钮时触发的回调函数Function() => {}
onCancel在点击取消按钮时触发的回调函数Function() => {}
messageProps内嵌 Message 组件属性对象Object{}
\n

Dialog.show#

以下只列举 config 可以传入的常用属性，Dialog 组件其他属性也可以传入

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
属性说明类型默认值
title标题ReactNode''
content内容ReactNode''
onOk在点击确定按钮时触发的回调函数Function() => {}
onCancel在点击取消按钮时触发的回调函数Function() => {}
\n\n

常见问题#

对话框高度变化，保持居中#

Dialog 组件默认使用 JS 进行定位，当内容过长时使用 JS 自动调整对话框高度，以使得操作按钮在可视区域内出现，但是这会造成在对话框高度发生变化时无法感知重新使用 JS 定位，有下面两种解决方案：

\n
    \n

  1. 设置 shouldUpdatePosition，在内容更新后，会重新进行定位。

    \n
    2. \n

  2. 使用 isFullScreen，启动 CSS 进行定位，无论对话框高度如何变化都能自适应居中，但是当内容过长时无法让操作按钮在可视区域内出现。

    \n
    3. \n
\n

ARIA and Keyboard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
键盘说明
esc按下ESC键将会关闭dialog而不触发任何的动作
tab正向聚焦到任何可以被聚焦的元素， 在Dialog显示的时候，焦点始终保持在框体内
shift+tab反向聚焦到任何可以被聚焦的元素，在Dialog显示的时候，焦点始终保持在框体内
\n"} \ No newline at end of file diff --git a/compiled_docs/dropdown/demo/basic.en-us.md b/compiled_docs/dropdown/demo/basic.en-us.md new file mode 100644 index 0000000000..d91aa77066 --- /dev/null +++ b/compiled_docs/dropdown/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

Basic usage.

\n","order":"0"},"codes":{"jsx":"import { Dropdown, Menu } from '@alifd/next';\n\nconst menu = (\n \n Option 1\n Option 2\n Option 3\n Option 4\n \n);\n\nReactDOM.render(\n
\n Hello dropdown} triggerType={[\"click\", \"hover\"]} afterOpen={() => console.log('after open')}>\n {menu}\n \n
\n, mountNode);\n"},"body":"\n````jsx\nimport { Dropdown, Menu } from '@alifd/next';\n\nconst menu = (\n \n Option 1\n Option 2\n Option 3\n Option 4\n \n);\n\nReactDOM.render(\n
\n Hello dropdown} triggerType={[\"click\", \"hover\"]} afterOpen={() => console.log('after open')}>\n {menu}\n \n
\n, mountNode);\n````","html":"
import { Dropdown, Menu } from '@alifd/next';\n\nconst menu = (\n    <Menu>\n        <Menu.Item>Option 1</Menu.Item>\n        <Menu.Item>Option 2</Menu.Item>\n        <Menu.Item>Option 3</Menu.Item>\n        <Menu.Item>Option 4</Menu.Item>\n    </Menu>\n);\n\nReactDOM.render(\n    <div>\n        <Dropdown trigger={<button>Hello dropdown</button>}  triggerType={[\"click\", \"hover\"]} afterOpen={() => console.log('after open')}>\n            {menu}\n        </Dropdown>\n    </div>\n, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/dropdown/demo/basic.md b/compiled_docs/dropdown/demo/basic.md new file mode 100644 index 0000000000..bae3292f86 --- /dev/null +++ b/compiled_docs/dropdown/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

最简单的用法。

\n","order":"0"},"codes":{"jsx":"import { Dropdown, Menu } from '@alifd/next';\n\nconst menu = (\n \n Option 1\n Option 2\n Option 3\n Option 4\n \n);\n\nReactDOM.render(\n
\n Hello dropdown} triggerType={[\"click\", \"hover\"]} afterOpen={() => console.log('after open')}>\n {menu}\n \n
\n, mountNode);\n"},"body":"\n\n````jsx\nimport { Dropdown, Menu } from '@alifd/next';\n\nconst menu = (\n \n Option 1\n Option 2\n Option 3\n Option 4\n \n);\n\nReactDOM.render(\n
\n Hello dropdown} triggerType={[\"click\", \"hover\"]} afterOpen={() => console.log('after open')}>\n {menu}\n \n
\n, mountNode);\n````","html":"
import { Dropdown, Menu } from '@alifd/next';\n\nconst menu = (\n    <Menu>\n        <Menu.Item>Option 1</Menu.Item>\n        <Menu.Item>Option 2</Menu.Item>\n        <Menu.Item>Option 3</Menu.Item>\n        <Menu.Item>Option 4</Menu.Item>\n    </Menu>\n);\n\nReactDOM.render(\n    <div>\n        <Dropdown trigger={<button>Hello dropdown</button>}  triggerType={[\"click\", \"hover\"]} afterOpen={() => console.log('after open')}>\n            {menu}\n        </Dropdown>\n    </div>\n, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/dropdown/demo/controlled.en-us.md b/compiled_docs/dropdown/demo/controlled.en-us.md new file mode 100644 index 0000000000..f884b6f0d7 --- /dev/null +++ b/compiled_docs/dropdown/demo/controlled.en-us.md @@ -0,0 +1 @@ +{"title":"Close the Overlay from Outside","meta":{"title":"Close the Overlay from Outside","description":"\n

You can set visible attribute to controll overlay display or hidden, and you should tell dropdown component what it controls by safeNode attibute.

\n","order":"2"},"codes":{"jsx":"import { Dropdown, Menu, Button } from '@alifd/next';\n\nconst menu = (\n \n Option 1\n Option 2\n Option 3\n Option 4\n \n);\n\nclass App extends React.Component {\n state = {\n visible: false\n };\n\n toggleVisible = () => {\n this.setState({\n visible: !this.state.visible\n });\n };\n\n onVisibleChange = visible => {\n this.setState({\n visible\n });\n };\n\n render() {\n return (\n
\n
\n \n
\n Hello dropdown}\n triggerType=\"click\"\n visible={this.state.visible}\n onVisibleChange={this.onVisibleChange}\n safeNode={() => this.refs.button}>\n {menu}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Dropdown, Menu, Button } from '@alifd/next';\n\nconst menu = (\n \n Option 1\n Option 2\n Option 3\n Option 4\n \n);\n\nclass App extends React.Component {\n state = {\n visible: false\n };\n\n toggleVisible = () => {\n this.setState({\n visible: !this.state.visible\n });\n };\n\n onVisibleChange = visible => {\n this.setState({\n visible\n });\n };\n\n render() {\n return (\n
\n
\n \n
\n Hello dropdown}\n triggerType=\"click\"\n visible={this.state.visible}\n onVisibleChange={this.onVisibleChange}\n safeNode={() => this.refs.button}>\n {menu}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Dropdown, Menu, Button } from '@alifd/next';\n\nconst menu = (\n    <Menu>\n        <Menu.Item>Option 1</Menu.Item>\n        <Menu.Item>Option 2</Menu.Item>\n        <Menu.Item>Option 3</Menu.Item>\n        <Menu.Item>Option 4</Menu.Item>\n    </Menu>\n);\n\nclass App extends React.Component {\n    state = {\n        visible: false\n    };\n\n    toggleVisible = () => {\n        this.setState({\n            visible: !this.state.visible\n        });\n    };\n\n    onVisibleChange = visible => {\n        this.setState({\n            visible\n        });\n    };\n\n    render() {\n        return (\n            <div>\n                <div style={{ marginBottom: '20px' }}>\n                    <Button onClick={this.toggleVisible} ref=\"button\">Toggle Overlay</Button>\n                </div>\n                <Dropdown trigger={<span>Hello dropdown</span>}\n                    triggerType=\"click\"\n                    visible={this.state.visible}\n                    onVisibleChange={this.onVisibleChange}\n                    safeNode={() => this.refs.button}>\n                    {menu}\n                </Dropdown>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/dropdown/demo/controlled.md b/compiled_docs/dropdown/demo/controlled.md new file mode 100644 index 0000000000..e1e5470011 --- /dev/null +++ b/compiled_docs/dropdown/demo/controlled.md @@ -0,0 +1 @@ +{"title":"从弹层外关闭","meta":{"title":"从弹层外关闭","description":"\n

使用 visible 属性控制弹层显示或者隐藏，需要使用 safeNode 将其控制的元素告诉 dropdown 组件。

\n","order":"2"},"codes":{"jsx":"import { Dropdown, Menu, Button } from '@alifd/next';\n\nconst menu = (\n \n Option 1\n Option 2\n Option 3\n Option 4\n \n);\n\nclass App extends React.Component {\n state = {\n visible: false\n };\n\n toggleVisible = () => {\n this.setState({\n visible: !this.state.visible\n });\n };\n\n onVisibleChange = visible => {\n this.setState({\n visible\n });\n };\n\n render() {\n return (\n
\n
\n \n
\n Hello dropdown}\n triggerType=\"click\"\n visible={this.state.visible}\n onVisibleChange={this.onVisibleChange}\n safeNode={() => this.refs.button}>\n {menu}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Dropdown, Menu, Button } from '@alifd/next';\n\nconst menu = (\n \n Option 1\n Option 2\n Option 3\n Option 4\n \n);\n\nclass App extends React.Component {\n state = {\n visible: false\n };\n\n toggleVisible = () => {\n this.setState({\n visible: !this.state.visible\n });\n };\n\n onVisibleChange = visible => {\n this.setState({\n visible\n });\n };\n\n render() {\n return (\n
\n
\n \n
\n Hello dropdown}\n triggerType=\"click\"\n visible={this.state.visible}\n onVisibleChange={this.onVisibleChange}\n safeNode={() => this.refs.button}>\n {menu}\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Dropdown, Menu, Button } from '@alifd/next';\n\nconst menu = (\n    <Menu>\n        <Menu.Item>Option 1</Menu.Item>\n        <Menu.Item>Option 2</Menu.Item>\n        <Menu.Item>Option 3</Menu.Item>\n        <Menu.Item>Option 4</Menu.Item>\n    </Menu>\n);\n\nclass App extends React.Component {\n    state = {\n        visible: false\n    };\n\n    toggleVisible = () => {\n        this.setState({\n            visible: !this.state.visible\n        });\n    };\n\n    onVisibleChange = visible => {\n        this.setState({\n            visible\n        });\n    };\n\n    render() {\n        return (\n            <div>\n                <div style={{ marginBottom: '20px' }}>\n                    <Button onClick={this.toggleVisible} ref=\"button\">Toggle Overlay</Button>\n                </div>\n                <Dropdown trigger={<span>Hello dropdown</span>}\n                    triggerType=\"click\"\n                    visible={this.state.visible}\n                    onVisibleChange={this.onVisibleChange}\n                    safeNode={() => this.refs.button}>\n                    {menu}\n                </Dropdown>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/dropdown/demo/trigger-type.en-us.md b/compiled_docs/dropdown/demo/trigger-type.en-us.md new file mode 100644 index 0000000000..877745b354 --- /dev/null +++ b/compiled_docs/dropdown/demo/trigger-type.en-us.md @@ -0,0 +1 @@ +{"title":"Close the Overlay from Outside","meta":{"title":"Close the Overlay from Outside","description":"\n

You can set event type which trigger overlay by triggerType attribute.

\n","order":"1"},"codes":{"jsx":"import { Dropdown, Menu } from '@alifd/next';\n\nconst menu = (\n \n Option 1\n Option 2\n Option 3\n Option 4\n \n);\n\nReactDOM.render(\n Click me} triggerType=\"click\">\n {menu}\n , mountNode);\n"},"body":"\n````jsx\nimport { Dropdown, Menu } from '@alifd/next';\n\nconst menu = (\n \n Option 1\n Option 2\n Option 3\n Option 4\n \n);\n\nReactDOM.render(\n Click me} triggerType=\"click\">\n {menu}\n , mountNode);\n````","html":"
import { Dropdown, Menu } from '@alifd/next';\n\nconst menu = (\n    <Menu>\n        <Menu.Item>Option 1</Menu.Item>\n        <Menu.Item>Option 2</Menu.Item>\n        <Menu.Item>Option 3</Menu.Item>\n        <Menu.Item>Option 4</Menu.Item>\n    </Menu>\n);\n\nReactDOM.render(\n    <Dropdown trigger={<a>Click me</a>} triggerType=\"click\">\n        {menu}\n    </Dropdown>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/dropdown/demo/trigger-type.md b/compiled_docs/dropdown/demo/trigger-type.md new file mode 100644 index 0000000000..e3a2c52dc2 --- /dev/null +++ b/compiled_docs/dropdown/demo/trigger-type.md @@ -0,0 +1 @@ +{"title":"触发的事件类型","meta":{"title":"触发的事件类型","description":"\n

使用 triggerType 设置触发的事件类型。

\n","order":"1"},"codes":{"jsx":"import { Dropdown, Menu } from '@alifd/next';\n\nconst menu = (\n \n Option 1\n Option 2\n Option 3\n Option 4\n \n);\n\nReactDOM.render(\n Click me} triggerType=\"click\">\n {menu}\n , mountNode);\n"},"body":"\n\n````jsx\nimport { Dropdown, Menu } from '@alifd/next';\n\nconst menu = (\n \n Option 1\n Option 2\n Option 3\n Option 4\n \n);\n\nReactDOM.render(\n Click me} triggerType=\"click\">\n {menu}\n , mountNode);\n````","html":"
import { Dropdown, Menu } from '@alifd/next';\n\nconst menu = (\n    <Menu>\n        <Menu.Item>Option 1</Menu.Item>\n        <Menu.Item>Option 2</Menu.Item>\n        <Menu.Item>Option 3</Menu.Item>\n        <Menu.Item>Option 4</Menu.Item>\n    </Menu>\n);\n\nReactDOM.render(\n    <Dropdown trigger={<a>Click me</a>} triggerType=\"click\">\n        {menu}\n    </Dropdown>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/dropdown/index.en-us.md b/compiled_docs/dropdown/index.en-us.md new file mode 100644 index 0000000000..7a8fb0f22b --- /dev/null +++ b/compiled_docs/dropdown/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Develop Guide#

When to Use#

You can storage operation command with dropdown component when there are too much command. There will be a drop-down menu after you click or hover the trigger element. Then choose a command and run it.

\n

Note#

    \n
  • Dropdown is accessible when using like <Dropdown triggerType={["click", "hover"]}> (triggerType="focus" is deprecated). In our opinion, menu elements need to be confirmed by users before they are expanded when it comes to accessibility.
    • \n
\n

API#

","api":"

Dropdown#

\n

Dropdown component extends API of Popup component, unless special note.

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
childrencontent in overlayReactNode-
visibleoverlay display or not nowBoolean-
defaultVisibleoverlay display or not in default situationBooleanfalse
onVisibleChangecallback function when toggle visible of overlay

signatures:
Function(visible: Boolean, type: String, e: Object) => void
params:
visible: {Boolean} overlay display or not
type: {String} orign of trigger overlay toggle visible
_e_: {Object} DOM Event		Functionfunc.noop
triggertrigger elementReactNode-
triggerTypeoperation type of trigger overlay toggle visible

options:
'hover', 'click'		Enum'hover'
disabledoverlay can not toggle visible if you set disabled attributeBooleanfalse
alignoverlay position relative to trigger element, see details Overlay alignString'tl bl'
offsetoverlay adjust position relative to trigger elementArray[0, 0]
delaydelay time of toggle overlay visible(unit: ms)，if triggerType value is 'hover', delay time will workNumber200
autoFocuslet element in overlay get focus or not after overlay was openedBooleantrue
hasMaskdisplay mask or notBooleanfalse
cachereserve child element or not after hidden overlayBooleanfalse
animationanimation play mode, support object value: { in: 'enter-class', out: 'leave-class' }, there is no animation if set falseObject/Boolean{ in: 'expandInDown', out: 'expandOutUp' }
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyBoardDescripiton
Up Arrowin vertical mode, at the same level navigation, navigate to previous item
Down Arrowin vertical mode, at the same level navigation, navigate to next item
Right Arrowin vertical mode, open the submenu, navigate to the first item of the submenu; in horizontal mode, navigate at the same level, navigate to the next one
Left Arrowin vertical mode, close the submenu, navigate to the parent menu; in horizontal mode, navigate at the same level, navigate to the previous one
Enteropen submenu and navigate to the first item of the submenu
Escclose submenu and navigate to the parent menu item
\n"} \ No newline at end of file diff --git a/compiled_docs/dropdown/index.md b/compiled_docs/dropdown/index.md new file mode 100644 index 0000000000..9b7fd446fc --- /dev/null +++ b/compiled_docs/dropdown/index.md @@ -0,0 +1 @@ +{"meta":"

开发指南#

何时使用#

当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。

\n

使用注意#

    \n
  • 若要使用无障碍的Dropdown，推荐使用<Dropdown triggerType={["click", "hover"]}> (请勿使用triggerType="focus")。我们认为，菜单类元素需要由用户确认后再展开才是一种无障碍友好的实践。
    • \n
\n

API#

","api":"

Dropdown#

\n

继承 Popup 的 API，除非特别说明

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
children弹层内容ReactNode-
visible弹层当前是否显示Boolean-
defaultVisible弹层默认是否显示Booleanfalse
onVisibleChange弹层显示或隐藏时触发的回调函数

签名:
Function(visible: Boolean, type: String, e: Object) => void
参数:
visible: {Boolean} 弹层是否显示
type: {String} 触发弹层显示或隐藏的来源
_e_: {Object} DOM事件		Functionfunc.noop
trigger触发弹层显示或者隐藏的元素ReactNode-
triggerType触发弹层显示或隐藏的操作类型，可以是 'click'，'hover'，或者它们组成的数组，如 ['hover', 'click']String/Array'hover'
disabled设置此属性，弹层无法显示或隐藏Booleanfalse
align弹层相对于触发元素的定位, 详见 Overlay 的定位部分String'tl bl'
offset弹层相对于触发元素定位的微调Array[0, 0]
delay弹层显示或隐藏的延时时间（以毫秒为单位），在 triggerType 被设置为 hover 时生效Number200
autoFocus弹层打开时是否让其中的元素自动获取焦点Boolean-
hasMask是否显示遮罩Booleanfalse
cache隐藏时是否保留子节点Booleanfalse
animation配置动画的播放方式，支持 { in: 'enter-class', out: 'leave-class' } 的对象参数，如果设置为 false，则不播放动画Object/Boolean{ in: 'expandInDown', out: 'expandOutUp' }
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
按键说明
Up Arrow垂直模式下，同级导航，导航到前一项
Down Arrow垂直模式下，同级导航，导航到后一项
Right Arrow垂直模式下，打开子菜单，导航到子菜单第一项；水平模式下，同级导航，导航到后一项
Left Arrow垂直模式下，关闭子菜单，导航到父级菜单；水平模式下，同级导航，导航到前一项
Enter打开子菜单，导航到子菜单第一项
Esc关闭子菜单，导航到父级菜单
\n"} \ No newline at end of file diff --git a/compiled_docs/field/demo/autounmout.en-us.md b/compiled_docs/field/demo/autounmout.en-us.md new file mode 100644 index 0000000000..073161a905 --- /dev/null +++ b/compiled_docs/field/demo/autounmout.en-us.md @@ -0,0 +1 @@ +{"title":"basic","meta":{"title":"basic","description":"\n

autoUnmount is true by default, and data will be deleted automatically. Field will keep data while autoUnmount is set to false.

\n","order":"6"},"codes":{"jsx":"import { Input, Button, Field } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n state = {\n show: true,\n show2: true\n }\n field = new Field(this);\n field2 = new Field(this, { autoUnmount: false });\n\n render() {\n return (\n
\n {this.state.show ? < Input {...this.field.init('name', { initValue: 'autoUnmount = true' })} /> : null}\n {\n console.log('value auto delete', this.field.getValues());\n }}\n style={{marginLeft: 4}}\n >\n print\n \n this.setState({ show: false })}\n warning\n style={{marginLeft: 4}}\n >\n delete\n \n
\n
\n {this.state.show2 ? < Input {...this.field2.init('name2', { initValue: 'autoUnmount = false' })} /> : null}\n {\n console.log('value always exist', this.field2.getValues());\n }}\n style={{marginLeft: 4}}\n >\n print\n \n this.setState({ show2: false })}\n warning\n style={{marginLeft: 4}}\n >\n delete\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Input, Button, Field } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n state = {\n show: true,\n show2: true\n }\n field = new Field(this);\n field2 = new Field(this, { autoUnmount: false });\n\n render() {\n return (\n
\n {this.state.show ? < Input {...this.field.init('name', { initValue: 'autoUnmount = true' })} /> : null}\n {\n console.log('value auto delete', this.field.getValues());\n }}\n style={{marginLeft: 4}}\n >\n print\n \n this.setState({ show: false })}\n warning\n style={{marginLeft: 4}}\n >\n delete\n \n
\n
\n {this.state.show2 ? < Input {...this.field2.init('name2', { initValue: 'autoUnmount = false' })} /> : null}\n {\n console.log('value always exist', this.field2.getValues());\n }}\n style={{marginLeft: 4}}\n >\n print\n \n this.setState({ show2: false })}\n warning\n style={{marginLeft: 4}}\n >\n delete\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Input, Button, Field } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n    state = {\n        show: true,\n        show2: true\n    }\n    field = new Field(this);\n    field2 = new Field(this, { autoUnmount: false });\n\n    render() {\n        return (\n            <div>\n                {this.state.show ? < Input {...this.field.init('name', { initValue: 'autoUnmount = true' })} /> : null}\n                <Button\n                    onClick={() => {\n                        console.log('value auto delete', this.field.getValues());\n                    }}\n                    style={{marginLeft: 4}}\n                >\n                    print\n                </Button>\n                <Button\n                    onClick={() => this.setState({ show: false })}\n                    warning\n                    style={{marginLeft: 4}}\n                >\n                    delete\n                </Button>\n                <br />\n                <br />\n                {this.state.show2 ? < Input {...this.field2.init('name2', { initValue: 'autoUnmount = false' })} /> : null}\n                <Button\n                    onClick={() => {\n                        console.log('value always exist', this.field2.getValues());\n                    }}\n                    style={{marginLeft: 4}}\n                >\n                    print\n                </Button>\n                <Button\n                    onClick={() => this.setState({ show2: false })}\n                    warning\n                    style={{marginLeft: 4}}\n                >\n                    delete\n                </Button>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/field/demo/autounmout.md b/compiled_docs/field/demo/autounmout.md new file mode 100644 index 0000000000..aea0f0ab24 --- /dev/null +++ b/compiled_docs/field/demo/autounmout.md @@ -0,0 +1 @@ +{"title":"自动卸载","meta":{"title":"自动卸载","description":"\n

autoUnmount 默认为 true，当组件被 unmount 的时候会自动删除数据. autoUnmount 设置为 false 后，会一直保存数据.

\n","order":"6"},"codes":{"jsx":"import { Input, Button, Field } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n state = {\n show: true,\n show2: true\n }\n field = new Field(this);\n field2 = new Field(this, { autoUnmount: false });\n\n render() {\n return (\n
\n {this.state.show ? < Input {...this.field.init('name', { initValue: 'autoUnmount = true' })} /> : null}\n {\n console.log('value auto delete', this.field.getValues());\n }}\n style={{marginLeft: 4}}\n >\n print\n \n this.setState({ show: false })}\n warning\n style={{marginLeft: 4}}\n >\n delete\n \n
\n
\n {this.state.show2 ? < Input {...this.field2.init('name2', { initValue: 'autoUnmount = false' })} /> : null}\n {\n console.log('value always exist', this.field2.getValues());\n }}\n style={{marginLeft: 4}}\n >\n print\n \n this.setState({ show2: false })}\n warning\n style={{marginLeft: 4}}\n >\n delete\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Input, Button, Field } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n state = {\n show: true,\n show2: true\n }\n field = new Field(this);\n field2 = new Field(this, { autoUnmount: false });\n\n render() {\n return (\n
\n {this.state.show ? < Input {...this.field.init('name', { initValue: 'autoUnmount = true' })} /> : null}\n {\n console.log('value auto delete', this.field.getValues());\n }}\n style={{marginLeft: 4}}\n >\n print\n \n this.setState({ show: false })}\n warning\n style={{marginLeft: 4}}\n >\n delete\n \n
\n
\n {this.state.show2 ? < Input {...this.field2.init('name2', { initValue: 'autoUnmount = false' })} /> : null}\n {\n console.log('value always exist', this.field2.getValues());\n }}\n style={{marginLeft: 4}}\n >\n print\n \n this.setState({ show2: false })}\n warning\n style={{marginLeft: 4}}\n >\n delete\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Input, Button, Field } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n    state = {\n        show: true,\n        show2: true\n    }\n    field = new Field(this);\n    field2 = new Field(this, { autoUnmount: false });\n\n    render() {\n        return (\n            <div>\n                {this.state.show ? < Input {...this.field.init('name', { initValue: 'autoUnmount = true' })} /> : null}\n                <Button\n                    onClick={() => {\n                        console.log('value auto delete', this.field.getValues());\n                    }}\n                    style={{marginLeft: 4}}\n                >\n                    print\n                </Button>\n                <Button\n                    onClick={() => this.setState({ show: false })}\n                    warning\n                    style={{marginLeft: 4}}\n                >\n                    delete\n                </Button>\n                <br />\n                <br />\n                {this.state.show2 ? < Input {...this.field2.init('name2', { initValue: 'autoUnmount = false' })} /> : null}\n                <Button\n                    onClick={() => {\n                        console.log('value always exist', this.field2.getValues());\n                    }}\n                    style={{marginLeft: 4}}\n                >\n                    print\n                </Button>\n                <Button\n                    onClick={() => this.setState({ show2: false })}\n                    warning\n                    style={{marginLeft: 4}}\n                >\n                    delete\n                </Button>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/field/demo/basic.en-us.md b/compiled_docs/field/demo/basic.en-us.md new file mode 100644 index 0000000000..d0c02e8a6a --- /dev/null +++ b/compiled_docs/field/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"basic","meta":{"title":"basic","description":"\n

usage of getValue setValue reset

\n","order":"0"},"codes":{"jsx":"import { Input, Button, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n field = new Field(this);\n\n onGetValue() {\n console.log(this.field.getValue('input'));\n }\n\n render() {\n const { init, setValue, reset } = this.field;\n\n return (
\n \n

\n \n \n \n
);\n }\n}\n\n\nReactDOM.render(, mountNode);\n\n","css":".demo .next-btn {\n margin-right: 5px;\n}\n"},"body":"\n````jsx\nimport { Input, Button, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n field = new Field(this);\n\n onGetValue() {\n console.log(this.field.getValue('input'));\n }\n\n render() {\n const { init, setValue, reset } = this.field;\n\n return (
\n \n

\n \n \n \n
);\n }\n}\n\n\nReactDOM.render(, mountNode);\n\n````\n\n````css\n.demo .next-btn {\n margin-right: 5px;\n}\n````","html":"
import { Input, Button, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n    field = new Field(this);\n\n    onGetValue() {\n        console.log(this.field.getValue('input'));\n    }\n\n    render() {\n        const { init, setValue, reset } = this.field;\n\n        return (<div className=\"demo\">\n            <Input {...init('input', {initValue: 'test'})} />\n            <br/><br/>\n            <Button type=\"primary\" onClick={this.onGetValue.bind(this)}>getValue</Button>\n            <Button type=\"primary\" onClick={() => setValue('input', 'set me by click')}>setValue</Button>\n            <Button onClick={() => reset()}>reset</Button>\n        </div>);\n    }\n}\n\n\nReactDOM.render(<App/>, mountNode);\n
.demo .next-btn {\n    margin-right: 5px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/field/demo/basic.md b/compiled_docs/field/demo/basic.md new file mode 100644 index 0000000000..f95b4f0042 --- /dev/null +++ b/compiled_docs/field/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

getValue setValue reset 的使用

\n","order":"0"},"codes":{"jsx":"import { Input, Button, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n field = new Field(this);\n\n onGetValue() {\n console.log(this.field.getValue('input'));\n }\n\n render() {\n const { init, setValue, reset } = this.field;\n\n return (
\n \n

\n \n \n \n
);\n }\n}\n\n\nReactDOM.render(, mountNode);\n\n","css":".demo .next-btn {\n margin-right: 5px;\n}\n"},"body":"\n\n\n````jsx\nimport { Input, Button, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n field = new Field(this);\n\n onGetValue() {\n console.log(this.field.getValue('input'));\n }\n\n render() {\n const { init, setValue, reset } = this.field;\n\n return (
\n \n

\n \n \n \n
);\n }\n}\n\n\nReactDOM.render(, mountNode);\n\n````\n\n````css\n.demo .next-btn {\n margin-right: 5px;\n}\n````","html":"
import { Input, Button, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n    field = new Field(this);\n\n    onGetValue() {\n        console.log(this.field.getValue('input'));\n    }\n\n    render() {\n        const { init, setValue, reset } = this.field;\n\n        return (<div className=\"demo\">\n            <Input {...init('input', {initValue: 'test'})} />\n            <br/><br/>\n            <Button type=\"primary\" onClick={this.onGetValue.bind(this)}>getValue</Button>\n            <Button type=\"primary\" onClick={() => setValue('input', 'set me by click')}>setValue</Button>\n            <Button onClick={() => reset()}>reset</Button>\n        </div>);\n    }\n}\n\n\nReactDOM.render(<App/>, mountNode);\n
.demo .next-btn {\n    margin-right: 5px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/field/demo/custom.en-us.md b/compiled_docs/field/demo/custom.en-us.md new file mode 100644 index 0000000000..6db038303d --- /dev/null +++ b/compiled_docs/field/demo/custom.en-us.md @@ -0,0 +1 @@ +{"title":"custom","meta":{"title":"custom","description":"\n

must: has api of onChange, so you can use getValue but you can't setValue\nperfect support: has api of value onChange. value: set data for component; onChange: return first param for component

\n","order":"10"},"codes":{"jsx":"import { Button, Field } from '@alifd/next';\n\n\nclass Custom extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: typeof props.value === 'undefined' ? [] : props.value\n };\n }\n\n // update value\n componentWillReceiveProps(nextProps) {\n if ('value' in nextProps) {\n this.setState({\n value: typeof nextProps.value === 'undefined' ? [] : nextProps.value\n });\n }\n }\n\n onAdd = () => {\n const value = this.state.value.concat([]);\n value.push('new');\n\n this.setState({\n value\n });\n this.props.onChange(value);\n }\n\n render() {\n return (
\n {this.state.value.map((v, i) => {\n return ;\n })}\n \n
);\n }\n}\n\n/* eslint-disable react/no-multi-comp */\nclass App extends React.Component {\n field = new Field(this, {\n deepReset: true\n });\n\n onGetValue() {\n console.log(this.field.getValue('custom'));\n }\n\n render() {\n const { init, setValue, reset } = this.field;\n\n return (
\n \n\n

\n\n \n \n \n
);\n }\n}\nReactDOM.render(, mountNode);\n","css":".demo .next-btn {\n margin-right: 5px;\n}\n.custom {\n border: 1px dashed;\n padding: 4px;\n display: inline-block;\n}\n.custom span {\n border: 1px solid green;\n padding: 0px 5px;\n height: 24px;\n display: inline-block;\n margin-right: 2px;\n}\n"},"body":"\n````jsx\nimport { Button, Field } from '@alifd/next';\n\n\nclass Custom extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: typeof props.value === 'undefined' ? [] : props.value\n };\n }\n\n // update value\n componentWillReceiveProps(nextProps) {\n if ('value' in nextProps) {\n this.setState({\n value: typeof nextProps.value === 'undefined' ? [] : nextProps.value\n });\n }\n }\n\n onAdd = () => {\n const value = this.state.value.concat([]);\n value.push('new');\n\n this.setState({\n value\n });\n this.props.onChange(value);\n }\n\n render() {\n return (
\n {this.state.value.map((v, i) => {\n return ;\n })}\n \n
);\n }\n}\n\n/* eslint-disable react/no-multi-comp */\nclass App extends React.Component {\n field = new Field(this, {\n deepReset: true\n });\n\n onGetValue() {\n console.log(this.field.getValue('custom'));\n }\n\n render() {\n const { init, setValue, reset } = this.field;\n\n return (
\n \n\n

\n\n \n \n \n
);\n }\n}\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo .next-btn {\n margin-right: 5px;\n}\n.custom {\n border: 1px dashed;\n padding: 4px;\n display: inline-block;\n}\n.custom span {\n border: 1px solid green;\n padding: 0px 5px;\n height: 24px;\n display: inline-block;\n margin-right: 2px;\n}\n````","html":"
import { Button, Field } from '@alifd/next';\n\n\nclass Custom extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: typeof props.value === 'undefined' ? [] : props.value\n        };\n    }\n\n    // update value\n    componentWillReceiveProps(nextProps) {\n        if ('value' in nextProps) {\n            this.setState({\n                value: typeof nextProps.value === 'undefined' ? [] : nextProps.value\n            });\n        }\n    }\n\n    onAdd = () => {\n        const value = this.state.value.concat([]);\n        value.push('new');\n\n        this.setState({\n            value\n        });\n        this.props.onChange(value);\n    }\n\n    render() {\n        return (<div className=\"custom\">\n            {this.state.value.map((v, i) => {\n                return <Button key={i} >{v}</Button>;\n            })}\n            <Button type=\"primary\" onClick={this.onAdd.bind(this)}>Add ＋ </Button>\n        </div>);\n    }\n}\n\n/* eslint-disable react/no-multi-comp */\nclass App extends React.Component {\n    field = new Field(this, {\n        deepReset: true\n    });\n\n    onGetValue() {\n        console.log(this.field.getValue('custom'));\n    }\n\n    render() {\n        const { init, setValue, reset } = this.field;\n\n        return (<div className=\"demo\">\n            <Custom {...init('custom', {initValue: ['test']})} />\n\n            <br/><br/>\n\n            <Button type=\"primary\" onClick={this.onGetValue.bind(this)}>getValue</Button>\n            <Button type=\"primary\" onClick={() => setValue('custom', ['test', 'setValue'])}>setValue</Button>\n            <Button onClick={() => reset()}>reset</Button>\n        </div>);\n    }\n}\nReactDOM.render(<App/>, mountNode);
.demo .next-btn {\n    margin-right: 5px;\n}\n.custom {\n    border: 1px dashed;\n    padding: 4px;\n    display: inline-block;\n}\n.custom span {\n    border: 1px solid green;\n    padding: 0px 5px;\n    height: 24px;\n    display: inline-block;\n    margin-right: 2px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/field/demo/custom.md b/compiled_docs/field/demo/custom.md new file mode 100644 index 0000000000..af8c49fe7d --- /dev/null +++ b/compiled_docs/field/demo/custom.md @@ -0,0 +1 @@ +{"title":"自定义组件","meta":{"title":"自定义组件","description":"\n

自己的组件如何接入Field。

\n

最低标准: 组件支持 onChange 读取组件数据。达到效果：Field 可以 getValue，但是 setValue 无效

\n

完全支持: 组件支持受控， 也就是支持两个api：value onChange. value: 设置组件的数据; onChange: 在组件修改的时候在第一个数暴露数据

\n","order":"10"},"codes":{"jsx":"import { Button, Field } from '@alifd/next';\n\n\nclass Custom extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: typeof props.value === 'undefined' ? [] : props.value\n };\n }\n\n // update value\n componentWillReceiveProps(nextProps) {\n if ('value' in nextProps) {\n this.setState({\n value: typeof nextProps.value === 'undefined' ? [] : nextProps.value\n });\n }\n }\n\n onAdd = () => {\n const value = this.state.value.concat([]);\n value.push('new');\n\n this.setState({\n value\n });\n this.props.onChange(value);\n }\n\n render() {\n return (
\n {this.state.value.map((v, i) => {\n return ;\n })}\n \n
);\n }\n}\n\n/* eslint-disable react/no-multi-comp */\nclass App extends React.Component {\n field = new Field(this, {\n deepReset: true\n });\n\n onGetValue() {\n console.log(this.field.getValue('custom'));\n }\n\n render() {\n const { init, setValue, reset } = this.field;\n\n return (
\n \n\n

\n\n \n \n \n
);\n }\n}\nReactDOM.render(, mountNode);\n","css":".demo .next-btn {\n margin-right: 5px;\n}\n.custom {\n border: 1px dashed;\n padding: 4px;\n display: inline-block;\n}\n.custom span {\n border: 1px solid green;\n padding: 0px 5px;\n height: 24px;\n display: inline-block;\n margin-right: 2px;\n}\n"},"body":"\n\n\n````jsx\nimport { Button, Field } from '@alifd/next';\n\n\nclass Custom extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: typeof props.value === 'undefined' ? [] : props.value\n };\n }\n\n // update value\n componentWillReceiveProps(nextProps) {\n if ('value' in nextProps) {\n this.setState({\n value: typeof nextProps.value === 'undefined' ? [] : nextProps.value\n });\n }\n }\n\n onAdd = () => {\n const value = this.state.value.concat([]);\n value.push('new');\n\n this.setState({\n value\n });\n this.props.onChange(value);\n }\n\n render() {\n return (
\n {this.state.value.map((v, i) => {\n return ;\n })}\n \n
);\n }\n}\n\n/* eslint-disable react/no-multi-comp */\nclass App extends React.Component {\n field = new Field(this, {\n deepReset: true\n });\n\n onGetValue() {\n console.log(this.field.getValue('custom'));\n }\n\n render() {\n const { init, setValue, reset } = this.field;\n\n return (
\n \n\n

\n\n \n \n \n
);\n }\n}\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo .next-btn {\n margin-right: 5px;\n}\n.custom {\n border: 1px dashed;\n padding: 4px;\n display: inline-block;\n}\n.custom span {\n border: 1px solid green;\n padding: 0px 5px;\n height: 24px;\n display: inline-block;\n margin-right: 2px;\n}\n````","html":"
import { Button, Field } from '@alifd/next';\n\n\nclass Custom extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: typeof props.value === 'undefined' ? [] : props.value\n        };\n    }\n\n    // update value\n    componentWillReceiveProps(nextProps) {\n        if ('value' in nextProps) {\n            this.setState({\n                value: typeof nextProps.value === 'undefined' ? [] : nextProps.value\n            });\n        }\n    }\n\n    onAdd = () => {\n        const value = this.state.value.concat([]);\n        value.push('new');\n\n        this.setState({\n            value\n        });\n        this.props.onChange(value);\n    }\n\n    render() {\n        return (<div className=\"custom\">\n            {this.state.value.map((v, i) => {\n                return <Button key={i} >{v}</Button>;\n            })}\n            <Button type=\"primary\" onClick={this.onAdd.bind(this)}>Add ＋ </Button>\n        </div>);\n    }\n}\n\n/* eslint-disable react/no-multi-comp */\nclass App extends React.Component {\n    field = new Field(this, {\n        deepReset: true\n    });\n\n    onGetValue() {\n        console.log(this.field.getValue('custom'));\n    }\n\n    render() {\n        const { init, setValue, reset } = this.field;\n\n        return (<div className=\"demo\">\n            <Custom {...init('custom', {initValue: ['test']})} />\n\n            <br/><br/>\n\n            <Button type=\"primary\" onClick={this.onGetValue.bind(this)}>getValue</Button>\n            <Button type=\"primary\" onClick={() => setValue('custom', ['test', 'setValue'])}>setValue</Button>\n            <Button onClick={() => reset()}>reset</Button>\n        </div>);\n    }\n}\nReactDOM.render(<App/>, mountNode);
.demo .next-btn {\n    margin-right: 5px;\n}\n.custom {\n    border: 1px dashed;\n    padding: 4px;\n    display: inline-block;\n}\n.custom span {\n    border: 1px solid green;\n    padding: 0px 5px;\n    height: 24px;\n    display: inline-block;\n    margin-right: 2px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/field/demo/dynamic.en-us.md b/compiled_docs/field/demo/dynamic.en-us.md new file mode 100644 index 0000000000..dab44a94d7 --- /dev/null +++ b/compiled_docs/field/demo/dynamic.en-us.md @@ -0,0 +1 @@ +{"title":"mix usage","meta":{"title":"mix usage","description":"\n

by use spliceArray could delete array type keys (eg: name.{index}), and make larger keys auto -1

\n","order":"6"},"codes":{"jsx":"import { Button, Input, Table, Field } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n tableSource: [1, 2, 3].map(i => {\n return { id: i };\n })\n };\n this.idx = 3;\n\n this.field = new Field(this, {\n parseName: true,\n });\n }\n\n getValues = () => {\n const values = this.field.getValues();\n console.log(values);\n }\n\n add = () => {\n const { tableSource } = this.state;\n tableSource.push({\n id: ++this.idx\n });\n\n this.setState({ tableSource });\n }\n\n removeItem(index) {\n const { tableSource } = this.state;\n tableSource.splice(index, 1);\n this.field.spliceArray('name.{index}', index);\n this.setState({ tableSource });\n }\n\n input = (value, index) => ;\n delete = (value, index) => ;\n\n render() {\n return (\n
\n \n \n \n \n
\n
\n \n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Button, Input, Table, Field } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n tableSource: [1, 2, 3].map(i => {\n return { id: i };\n })\n };\n this.idx = 3;\n\n this.field = new Field(this, {\n parseName: true,\n });\n }\n\n getValues = () => {\n const values = this.field.getValues();\n console.log(values);\n }\n\n add = () => {\n const { tableSource } = this.state;\n tableSource.push({\n id: ++this.idx\n });\n\n this.setState({ tableSource });\n }\n\n removeItem(index) {\n const { tableSource } = this.state;\n tableSource.splice(index, 1);\n this.field.spliceArray('name.{index}', index);\n this.setState({ tableSource });\n }\n\n input = (value, index) => ;\n delete = (value, index) => ;\n\n render() {\n return (\n
\n \n \n \n \n
\n
\n \n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Button, Input, Table, Field } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            tableSource: [1, 2, 3].map(i => {\n                return { id: i };\n            })\n        };\n        this.idx = 3;\n\n        this.field = new Field(this, {\n            parseName: true,\n        });\n    }\n\n    getValues = () => {\n        const values = this.field.getValues();\n        console.log(values);\n    }\n\n    add = () => {\n        const { tableSource } = this.state;\n        tableSource.push({\n            id: ++this.idx\n        });\n\n        this.setState({ tableSource });\n    }\n\n    removeItem(index) {\n        const { tableSource } = this.state;\n        tableSource.splice(index, 1);\n        this.field.spliceArray('name.{index}', index);\n        this.setState({ tableSource });\n    }\n\n    input = (value, index) => <Input  {...this.field.init(`name.${index}`, { initValue: index })} />;\n    delete = (value, index) => <Button warning onClick={this.removeItem.bind(this, index)}>delete</Button>;\n\n    render() {\n        return (\n            <div>\n                <Table dataSource={this.state.tableSource}>\n                    <Table.Column title=\"id\" dataIndex=\"id\" />\n                    <Table.Column title=\"input\" dataIndex=\"id\" cell={this.input} />\n                    <Table.Column title=\"operation\" cell={this.delete} width={100} />\n                </Table>\n                <div style={{ marginTop: 10 }}>\n                    <Button type=\"primary\" onClick={this.getValues} >print</Button>\n                    <Button type=\"normal\" onClick={this.add} style={{ marginLeft: 8 }}>Add</Button>\n                </div>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/field/demo/dynamic.md b/compiled_docs/field/demo/dynamic.md new file mode 100644 index 0000000000..800b161090 --- /dev/null +++ b/compiled_docs/field/demo/dynamic.md @@ -0,0 +1 @@ +{"title":"动态表格","meta":{"title":"动态表格","description":"\n

通过 spliceArray 可以删除数组格式 name (eg: name.{index}) 的数据, 并且自动订正其他 name 的 index - 1 问题

\n","order":"6"},"codes":{"jsx":"import { Button, Input, Table, Field } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n tableSource: [1, 2, 3].map(i => {\n return { id: i };\n })\n };\n this.idx = 3;\n\n this.field = new Field(this, {\n parseName: true,\n });\n }\n\n getValues = () => {\n const values = this.field.getValues();\n console.log(values);\n }\n\n add = () => {\n const { tableSource } = this.state;\n tableSource.push({\n id: ++this.idx\n });\n\n this.setState({ tableSource });\n }\n\n removeItem(index) {\n const { tableSource } = this.state;\n tableSource.splice(index, 1);\n this.field.spliceArray('name.{index}', index);\n this.setState({ tableSource });\n }\n\n input = (value, index) => ;\n delete = (value, index) => ;\n\n render() {\n return (\n
\n \n \n \n \n
\n
\n \n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n\n````jsx\nimport { Button, Input, Table, Field } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n tableSource: [1, 2, 3].map(i => {\n return { id: i };\n })\n };\n this.idx = 3;\n\n this.field = new Field(this, {\n parseName: true,\n });\n }\n\n getValues = () => {\n const values = this.field.getValues();\n console.log(values);\n }\n\n add = () => {\n const { tableSource } = this.state;\n tableSource.push({\n id: ++this.idx\n });\n\n this.setState({ tableSource });\n }\n\n removeItem(index) {\n const { tableSource } = this.state;\n tableSource.splice(index, 1);\n this.field.spliceArray('name.{index}', index);\n this.setState({ tableSource });\n }\n\n input = (value, index) => ;\n delete = (value, index) => ;\n\n render() {\n return (\n
\n \n \n \n \n
\n
\n \n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Button, Input, Table, Field } from '@alifd/next';\n\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            tableSource: [1, 2, 3].map(i => {\n                return { id: i };\n            })\n        };\n        this.idx = 3;\n\n        this.field = new Field(this, {\n            parseName: true,\n        });\n    }\n\n    getValues = () => {\n        const values = this.field.getValues();\n        console.log(values);\n    }\n\n    add = () => {\n        const { tableSource } = this.state;\n        tableSource.push({\n            id: ++this.idx\n        });\n\n        this.setState({ tableSource });\n    }\n\n    removeItem(index) {\n        const { tableSource } = this.state;\n        tableSource.splice(index, 1);\n        this.field.spliceArray('name.{index}', index);\n        this.setState({ tableSource });\n    }\n\n    input = (value, index) => <Input  {...this.field.init(`name.${index}`, { initValue: index })} />;\n    delete = (value, index) => <Button warning onClick={this.removeItem.bind(this, index)}>delete</Button>;\n\n    render() {\n        return (\n            <div>\n                <Table dataSource={this.state.tableSource}>\n                    <Table.Column title=\"id\" dataIndex=\"id\" />\n                    <Table.Column title=\"input\" dataIndex=\"id\" cell={this.input} />\n                    <Table.Column title=\"operation\" cell={this.delete} width={100} />\n                </Table>\n                <div style={{ marginTop: 10 }}>\n                    <Button type=\"primary\" onClick={this.getValues} >print</Button>\n                    <Button type=\"normal\" onClick={this.add} style={{ marginLeft: 8 }}>Add</Button>\n                </div>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/field/demo/mix.en-us.md b/compiled_docs/field/demo/mix.en-us.md new file mode 100644 index 0000000000..8f89e4535f --- /dev/null +++ b/compiled_docs/field/demo/mix.en-us.md @@ -0,0 +1 @@ +{"title":"mix usage","meta":{"title":"mix usage","description":"\n

multi type of component

\n","order":"8"},"codes":{"jsx":"import { Button, Checkbox, Input, Radio, Select, Range, DatePicker, TimePicker, Field } from '@alifd/next';\n\n\nconst CheckboxGroup = Checkbox.Group;\nconst RadioGroup = Radio.Group;\n\nconst list = [\n {\n value: 'apple',\n label: 'apple'\n }, {\n value: 'pear',\n label: 'pear'\n }, {\n value: 'orange',\n label: 'orange'\n }\n];\nconst layout = {\n marginBottom: 10,\n width: 400\n};\n\nclass App extends React.Component {\n field = new Field(this);\n\n render() {\n const {init, getValue} = this.field;\n\n return (
\n
\n \n A\n B\n C\n D\n \n
\n\n {\n getValue('radiogroup') !== 'd' ?\n :\n \n }\n
\n\n \n\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n \n \n \n
);\n }\n}\n\n\nReactDOM.render(, mountNode);\n\n","css":".demo .next-btn {\n margin-right: 5px;\n}\n"},"body":"\n````jsx\nimport { Button, Checkbox, Input, Radio, Select, Range, DatePicker, TimePicker, Field } from '@alifd/next';\n\n\nconst CheckboxGroup = Checkbox.Group;\nconst RadioGroup = Radio.Group;\n\nconst list = [\n {\n value: 'apple',\n label: 'apple'\n }, {\n value: 'pear',\n label: 'pear'\n }, {\n value: 'orange',\n label: 'orange'\n }\n];\nconst layout = {\n marginBottom: 10,\n width: 400\n};\n\nclass App extends React.Component {\n field = new Field(this);\n\n render() {\n const {init, getValue} = this.field;\n\n return (
\n
\n \n A\n B\n C\n D\n \n
\n\n {\n getValue('radiogroup') !== 'd' ?\n :\n \n }\n
\n\n \n\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n \n \n \n
);\n }\n}\n\n\nReactDOM.render(, mountNode);\n\n````\n\n````css\n.demo .next-btn {\n margin-right: 5px;\n}\n````","html":"
import { Button, Checkbox, Input, Radio, Select, Range, DatePicker, TimePicker, Field } from '@alifd/next';\n\n\nconst CheckboxGroup = Checkbox.Group;\nconst RadioGroup = Radio.Group;\n\nconst list = [\n    {\n        value: 'apple',\n        label: 'apple'\n    }, {\n        value: 'pear',\n        label: 'pear'\n    }, {\n        value: 'orange',\n        label: 'orange'\n    }\n];\nconst layout = {\n    marginBottom: 10,\n    width: 400\n};\n\nclass App extends React.Component {\n    field = new Field(this);\n\n    render() {\n        const {init, getValue} = this.field;\n\n        return (<div className=\"demo\">\n            <div style={{marginBottom: 10}}>\n                <RadioGroup {...init('radiogroup', {initValue: 'a'})} >\n                    <Radio value=\"a\">A</Radio>\n                    <Radio value=\"b\">B</Radio>\n                    <Radio value=\"c\">C</Radio>\n                    <Radio value=\"d\">D</Radio>\n                </RadioGroup>\n            </div>\n\n            {\n                getValue('radiogroup') !== 'd' ?\n                    <Select {...init('name', {initValue: 'lucy'})} style={layout}>\n                        <Select.Option value=\"jack\">jack</Select.Option>\n                        <Select.Option value=\"lucy\">lucy</Select.Option>\n                        <Select.Option value=\"disabled\" disabled>disabled</Select.Option>\n                        <Select.Option value=\"hugohua\">hugohua</Select.Option>\n                    </Select> :\n                    <Input {...init('name', {initValue: 'frankqian'})} />\n            }\n            <br/>\n\n            <Range style={{...layout, marginTop: 30}} slider={'double'} scales={10}\n                marks={10} {...init('range', {initValue: [20, 40]})}/>\n\n            <div style={{marginBottom: 10}}>\n                <CheckboxGroup dataSource={list} {...init('checkboxgroup', {initValue: ['apple']})} />\n            </div>\n            <div style={{marginBottom: 10}}>\n                <DatePicker {...init('datepicker')}/>\n            </div>\n            <div style={{marginBottom: 10}}>\n                <DatePicker.RangePicker {...init('rangepicker')}/>\n            </div>\n            <div style={{marginBottom: 10}}>\n                <TimePicker {...init('timepicker')}/>\n            </div>\n            <Button type=\"primary\" onClick={() => {\n                console.log(this.field.getValues());\n            }}>getValues</Button>\n            <Button onClick={() => {\n                this.field.setValues({\n                    name: 'hugohua',\n                    range: [30, 50],\n                    checkboxgroup: ['orange'],\n                    radiogroup: 'd'\n                });\n            }}>setValues</Button>\n            <Button onClick={() => {\n                this.field.reset();\n            }}>reset</Button>\n        </div>);\n    }\n}\n\n\nReactDOM.render(<App/>, mountNode);\n
.demo .next-btn {\n    margin-right: 5px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/field/demo/mix.md b/compiled_docs/field/demo/mix.md new file mode 100644 index 0000000000..0a7818291e --- /dev/null +++ b/compiled_docs/field/demo/mix.md @@ -0,0 +1 @@ +{"title":"组合使用","meta":{"title":"组合使用","description":"\n

多组件混合使用

\n","order":"8"},"codes":{"jsx":"import { Button, Checkbox, Input, Radio, Select, Range, DatePicker, TimePicker, Field } from '@alifd/next';\n\n\nconst CheckboxGroup = Checkbox.Group;\nconst RadioGroup = Radio.Group;\n\nconst list = [\n {\n value: 'apple',\n label: 'apple'\n }, {\n value: 'pear',\n label: 'pear'\n }, {\n value: 'orange',\n label: 'orange'\n }\n];\nconst layout = {\n marginBottom: 10,\n width: 400\n};\n\nclass App extends React.Component {\n field = new Field(this);\n\n render() {\n const {init, getValue} = this.field;\n\n return (
\n
\n \n A\n B\n C\n D\n \n
\n\n {\n getValue('radiogroup') !== 'd' ?\n :\n \n }\n
\n\n \n\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n \n \n \n
);\n }\n}\n\n\nReactDOM.render(, mountNode);\n\n","css":".demo .next-btn {\n margin-right: 5px;\n}\n"},"body":"\n\n\n````jsx\nimport { Button, Checkbox, Input, Radio, Select, Range, DatePicker, TimePicker, Field } from '@alifd/next';\n\n\nconst CheckboxGroup = Checkbox.Group;\nconst RadioGroup = Radio.Group;\n\nconst list = [\n {\n value: 'apple',\n label: 'apple'\n }, {\n value: 'pear',\n label: 'pear'\n }, {\n value: 'orange',\n label: 'orange'\n }\n];\nconst layout = {\n marginBottom: 10,\n width: 400\n};\n\nclass App extends React.Component {\n field = new Field(this);\n\n render() {\n const {init, getValue} = this.field;\n\n return (
\n
\n \n A\n B\n C\n D\n \n
\n\n {\n getValue('radiogroup') !== 'd' ?\n :\n \n }\n
\n\n \n\n
\n \n
\n
\n \n
\n
\n \n
\n
\n \n
\n \n \n \n
);\n }\n}\n\n\nReactDOM.render(, mountNode);\n\n````\n\n````css\n.demo .next-btn {\n margin-right: 5px;\n}\n````","html":"
import { Button, Checkbox, Input, Radio, Select, Range, DatePicker, TimePicker, Field } from '@alifd/next';\n\n\nconst CheckboxGroup = Checkbox.Group;\nconst RadioGroup = Radio.Group;\n\nconst list = [\n    {\n        value: 'apple',\n        label: 'apple'\n    }, {\n        value: 'pear',\n        label: 'pear'\n    }, {\n        value: 'orange',\n        label: 'orange'\n    }\n];\nconst layout = {\n    marginBottom: 10,\n    width: 400\n};\n\nclass App extends React.Component {\n    field = new Field(this);\n\n    render() {\n        const {init, getValue} = this.field;\n\n        return (<div className=\"demo\">\n            <div style={{marginBottom: 10}}>\n                <RadioGroup {...init('radiogroup', {initValue: 'a'})} >\n                    <Radio value=\"a\">A</Radio>\n                    <Radio value=\"b\">B</Radio>\n                    <Radio value=\"c\">C</Radio>\n                    <Radio value=\"d\">D</Radio>\n                </RadioGroup>\n            </div>\n\n            {\n                getValue('radiogroup') !== 'd' ?\n                    <Select {...init('name', {initValue: 'lucy'})} style={layout}>\n                        <Select.Option value=\"jack\">jack</Select.Option>\n                        <Select.Option value=\"lucy\">lucy</Select.Option>\n                        <Select.Option value=\"disabled\" disabled>disabled</Select.Option>\n                        <Select.Option value=\"hugohua\">hugohua</Select.Option>\n                    </Select> :\n                    <Input {...init('name', {initValue: 'frankqian'})} />\n            }\n            <br/>\n\n            <Range style={{...layout, marginTop: 30}} slider={'double'} scales={10}\n                marks={10} {...init('range', {initValue: [20, 40]})}/>\n\n            <div style={{marginBottom: 10}}>\n                <CheckboxGroup dataSource={list} {...init('checkboxgroup', {initValue: ['apple']})} />\n            </div>\n            <div style={{marginBottom: 10}}>\n                <DatePicker {...init('datepicker')}/>\n            </div>\n            <div style={{marginBottom: 10}}>\n                <DatePicker.RangePicker {...init('rangepicker')}/>\n            </div>\n            <div style={{marginBottom: 10}}>\n                <TimePicker {...init('timepicker')}/>\n            </div>\n            <Button type=\"primary\" onClick={() => {\n                console.log(this.field.getValues());\n            }}>getValues</Button>\n            <Button onClick={() => {\n                this.field.setValues({\n                    name: 'hugohua',\n                    range: [30, 50],\n                    checkboxgroup: ['orange'],\n                    radiogroup: 'd'\n                });\n            }}>setValues</Button>\n            <Button onClick={() => {\n                this.field.reset();\n            }}>reset</Button>\n        </div>);\n    }\n}\n\n\nReactDOM.render(<App/>, mountNode);\n
.demo .next-btn {\n    margin-right: 5px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/field/demo/normalize.en-us.md b/compiled_docs/field/demo/normalize.en-us.md new file mode 100644 index 0000000000..df221a5915 --- /dev/null +++ b/compiled_docs/field/demo/normalize.en-us.md @@ -0,0 +1 @@ +{"title":"custom event value","meta":{"title":"custom event value","description":"\n

custom value by api getValueFromEvent

\n","order":"2"},"codes":{"jsx":"import { Button, Input, Field } from '@alifd/next';\n\n\nclass App extends React.Component {\n\n field = new Field(this);\n\n normFile(list) {\n if (Array.isArray(list)) {\n return list;\n }\n return list && list.fileList;\n }\n\n normDate(date, strdate) {\n console.log('normDate:', date, strdate);\n return strdate;\n }\n\n render() {\n const init = this.field.init;\n\n return (
\n {\n if (value.match(/##/)) {\n return value;\n } else {\n return `## title-${value}`;\n }\n }})} />\n \n
);\n }\n}\n\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Button, Input, Field } from '@alifd/next';\n\n\nclass App extends React.Component {\n\n field = new Field(this);\n\n normFile(list) {\n if (Array.isArray(list)) {\n return list;\n }\n return list && list.fileList;\n }\n\n normDate(date, strdate) {\n console.log('normDate:', date, strdate);\n return strdate;\n }\n\n render() {\n const init = this.field.init;\n\n return (
\n {\n if (value.match(/##/)) {\n return value;\n } else {\n return `## title-${value}`;\n }\n }})} />\n \n
);\n }\n}\n\n\nReactDOM.render(, mountNode);\n````","html":"
import { Button, Input, Field } from '@alifd/next';\n\n\nclass App extends React.Component {\n\n    field = new Field(this);\n\n    normFile(list) {\n        if (Array.isArray(list)) {\n            return list;\n        }\n        return list && list.fileList;\n    }\n\n    normDate(date, strdate) {\n        console.log('normDate:', date, strdate);\n        return strdate;\n    }\n\n    render() {\n        const init = this.field.init;\n\n        return (<div>\n            <Input {...init('name', { getValueFromEvent: (value) => {\n                if (value.match(/##/)) {\n                    return value;\n                } else {\n                    return `## title-${value}`;\n                }\n            }})} />\n            <Button type=\"primary\" onClick={() => {\n                console.log(this.field.getValues());\n            }}>getValues</Button>\n        </div>);\n    }\n}\n\n\nReactDOM.render(<App/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/field/demo/normalize.md b/compiled_docs/field/demo/normalize.md new file mode 100644 index 0000000000..d98432df6d --- /dev/null +++ b/compiled_docs/field/demo/normalize.md @@ -0,0 +1 @@ +{"title":"自定义返回值","meta":{"title":"自定义返回值","description":"\n

通过 getValueFromEvent 自定义从组件的 Event 获取 value 的方式

\n","order":"2"},"codes":{"jsx":"import { Button, Input, Field } from '@alifd/next';\n\n\nclass App extends React.Component {\n\n field = new Field(this);\n\n normFile(list) {\n if (Array.isArray(list)) {\n return list;\n }\n return list && list.fileList;\n }\n\n normDate(date, strdate) {\n console.log('normDate:', date, strdate);\n return strdate;\n }\n\n render() {\n const init = this.field.init;\n\n return (
\n {\n if (value.match(/##/)) {\n return value;\n } else {\n return `## title-${value}`;\n }\n }})} />\n \n
);\n }\n}\n\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n\n````jsx\nimport { Button, Input, Field } from '@alifd/next';\n\n\nclass App extends React.Component {\n\n field = new Field(this);\n\n normFile(list) {\n if (Array.isArray(list)) {\n return list;\n }\n return list && list.fileList;\n }\n\n normDate(date, strdate) {\n console.log('normDate:', date, strdate);\n return strdate;\n }\n\n render() {\n const init = this.field.init;\n\n return (
\n {\n if (value.match(/##/)) {\n return value;\n } else {\n return `## title-${value}`;\n }\n }})} />\n \n
);\n }\n}\n\n\nReactDOM.render(, mountNode);\n````","html":"
import { Button, Input, Field } from '@alifd/next';\n\n\nclass App extends React.Component {\n\n    field = new Field(this);\n\n    normFile(list) {\n        if (Array.isArray(list)) {\n            return list;\n        }\n        return list && list.fileList;\n    }\n\n    normDate(date, strdate) {\n        console.log('normDate:', date, strdate);\n        return strdate;\n    }\n\n    render() {\n        const init = this.field.init;\n\n        return (<div>\n            <Input {...init('name', { getValueFromEvent: (value) => {\n                if (value.match(/##/)) {\n                    return value;\n                } else {\n                    return `## title-${value}`;\n                }\n            }})} />\n            <Button type=\"primary\" onClick={() => {\n                console.log(this.field.getValues());\n            }}>getValues</Button>\n        </div>);\n    }\n}\n\n\nReactDOM.render(<App/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/field/demo/onchange.en-us.md b/compiled_docs/field/demo/onchange.en-us.md new file mode 100644 index 0000000000..508463376d --- /dev/null +++ b/compiled_docs/field/demo/onchange.en-us.md @@ -0,0 +1 @@ +{"title":"controlled","meta":{"title":"controlled","description":"\n

manage value by onChange

\n","order":"1"},"codes":{"jsx":"import { Input, Select, Range, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n field = new Field(this, {\n onChange: (name, value) => {\n console.log(this.field.getValues());\n\n switch (name) {\n case 'input':\n this.field.setValue('sync', `change to: ${value}`);\n break;\n case 'select':\n this.field.setValue('sync', `${value} is coming`);\n break;\n case 'range':\n this.field.setValue('sync', ` (${value.join(',')}) ready`);\n break;\n }\n }\n });\n\n render() {\n const {init, getValue} = this.field;\n const layout = {\n marginBottom: 10,\n width: 400\n };\n\n return (
\n
\n
\n\n
\n\n {\n getValue('select') !== 'hugo' ?\n : null\n }\n
\n\n
\n
\n
);\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Input, Select, Range, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n field = new Field(this, {\n onChange: (name, value) => {\n console.log(this.field.getValues());\n\n switch (name) {\n case 'input':\n this.field.setValue('sync', `change to: ${value}`);\n break;\n case 'select':\n this.field.setValue('sync', `${value} is coming`);\n break;\n case 'range':\n this.field.setValue('sync', ` (${value.join(',')}) ready`);\n break;\n }\n }\n });\n\n render() {\n const {init, getValue} = this.field;\n const layout = {\n marginBottom: 10,\n width: 400\n };\n\n return (
\n
\n
\n\n
\n\n {\n getValue('select') !== 'hugo' ?\n : null\n }\n
\n\n
\n
\n
);\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Input, Select, Range, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n    field = new Field(this, {\n        onChange: (name, value) => {\n            console.log(this.field.getValues());\n\n            switch (name) {\n                case 'input':\n                    this.field.setValue('sync', `change to: ${value}`);\n                    break;\n                case 'select':\n                    this.field.setValue('sync', `${value} is coming`);\n                    break;\n                case 'range':\n                    this.field.setValue('sync', ` (${value.join(',')}) ready`);\n                    break;\n            }\n        }\n    });\n\n    render() {\n        const {init, getValue} = this.field;\n        const layout = {\n            marginBottom: 10,\n            width: 400\n        };\n\n        return (<div>\n            <Input placeholder=\"controlled by onChange\" {...init('input')} style={layout}/><br/>\n            <Input placeholder=\"under control\" {...init('input')} style={layout}/><br/>\n\n            <Select style={layout} {...init('select', {initValue: 'lucy'})}>\n                <Select.Option value=\"jack\">jack</Select.Option>\n                <Select.Option value=\"lucy\">lucy</Select.Option>\n                <Select.Option value=\"disabled\" disabled>disabled</Select.Option>\n                <Select.Option value=\"hugo\">hugo</Select.Option>\n            </Select><br/>\n\n            {\n                getValue('select') !== 'hugo' ?\n                    <Range\n                        style={{...layout, marginTop: 30}}\n                        slider={'double'} scales={10} marks={10}\n                        {...init('range', {initValue: [20, 40], trigger: 'onProcess'})}\n                    /> : null\n            }\n            <br/>\n\n            <hr style={{marginBottom: 10}}/>\n            <Input placeholder=\"everyone can control me\" {...init('sync')} style={layout}/><br/>\n        </div>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/field/demo/onchange.md b/compiled_docs/field/demo/onchange.md new file mode 100644 index 0000000000..aceb8da31c --- /dev/null +++ b/compiled_docs/field/demo/onchange.md @@ -0,0 +1 @@ +{"title":"关联控制","meta":{"title":"关联控制","description":"\n

组件之间的关联控制. onChange 统一管理。

\n","order":"1"},"codes":{"jsx":"import { Input, Select, Range, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n field = new Field(this, {\n onChange: (name, value) => {\n console.log(this.field.getValues());\n\n switch (name) {\n case 'input':\n this.field.setValue('sync', `change to: ${value}`);\n break;\n case 'select':\n this.field.setValue('sync', `${value} is coming`);\n break;\n case 'range':\n this.field.setValue('sync', ` (${value.join(',')}) ready`);\n break;\n }\n }\n });\n\n render() {\n const {init, getValue} = this.field;\n const layout = {\n marginBottom: 10,\n width: 400\n };\n\n return (
\n
\n
\n\n
\n\n {\n getValue('select') !== 'hugo' ?\n : null\n }\n
\n\n
\n
\n
);\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n\n````jsx\nimport { Input, Select, Range, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n field = new Field(this, {\n onChange: (name, value) => {\n console.log(this.field.getValues());\n\n switch (name) {\n case 'input':\n this.field.setValue('sync', `change to: ${value}`);\n break;\n case 'select':\n this.field.setValue('sync', `${value} is coming`);\n break;\n case 'range':\n this.field.setValue('sync', ` (${value.join(',')}) ready`);\n break;\n }\n }\n });\n\n render() {\n const {init, getValue} = this.field;\n const layout = {\n marginBottom: 10,\n width: 400\n };\n\n return (
\n
\n
\n\n
\n\n {\n getValue('select') !== 'hugo' ?\n : null\n }\n
\n\n
\n
\n
);\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Input, Select, Range, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n    field = new Field(this, {\n        onChange: (name, value) => {\n            console.log(this.field.getValues());\n\n            switch (name) {\n                case 'input':\n                    this.field.setValue('sync', `change to: ${value}`);\n                    break;\n                case 'select':\n                    this.field.setValue('sync', `${value} is coming`);\n                    break;\n                case 'range':\n                    this.field.setValue('sync', ` (${value.join(',')}) ready`);\n                    break;\n            }\n        }\n    });\n\n    render() {\n        const {init, getValue} = this.field;\n        const layout = {\n            marginBottom: 10,\n            width: 400\n        };\n\n        return (<div>\n            <Input placeholder=\"controlled by onChange\" {...init('input')} style={layout}/><br/>\n            <Input placeholder=\"under control\" {...init('input')} style={layout}/><br/>\n\n            <Select style={layout} {...init('select', {initValue: 'lucy'})}>\n                <Select.Option value=\"jack\">jack</Select.Option>\n                <Select.Option value=\"lucy\">lucy</Select.Option>\n                <Select.Option value=\"disabled\" disabled>disabled</Select.Option>\n                <Select.Option value=\"hugo\">hugo</Select.Option>\n            </Select><br/>\n\n            {\n                getValue('select') !== 'hugo' ?\n                    <Range\n                        style={{...layout, marginTop: 30}}\n                        slider={'double'} scales={10} marks={10}\n                        {...init('range', {initValue: [20, 40], trigger: 'onProcess'})}\n                    /> : null\n            }\n            <br/>\n\n            <hr style={{marginBottom: 10}}/>\n            <Input placeholder=\"everyone can control me\" {...init('sync')} style={layout}/><br/>\n        </div>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/field/demo/redux.en-us.md b/compiled_docs/field/demo/redux.en-us.md new file mode 100644 index 0000000000..eb22ada24f --- /dev/null +++ b/compiled_docs/field/demo/redux.en-us.md @@ -0,0 +1 @@ +{"title":"with redux","meta":{"title":"with redux","description":"\n

set value in componentWillReceiveProps

\n","order":"5"},"codes":{"jsx":"import { Input, Button, Field } from '@alifd/next';\n\n\nimport { combineReducers, createStore } from 'redux';\nimport { Provider, connect } from 'react-redux';\n\nfunction formReducer(state = {email: 'frankqian@qq.com'}, action) {\n switch (action.type) {\n case 'save_fields':\n return {\n ...state,\n ...action.payload\n };\n default:\n return state;\n }\n}\n\nclass Demo extends React.Component {\n componentWillReceiveProps(nextProps) {\n this.field.setValues({\n email: nextProps.email,\n newlen: nextProps.email.length\n });\n }\n\n field = new Field(this, {\n onChange: (name, value) => {\n console.log('onChange', name, value);\n this.field.setValue('newlen', value.length);\n this.props.dispatch({\n type: 'save_fields',\n payload: {\n [name]: value\n }\n });\n }\n });\n\n setEmail() {\n this.props.dispatch({\n type: 'save_fields',\n payload: {\n email: 'qq@gmail.com'\n }\n });\n }\n\n\n render() {\n const init = this.field.init;\n\n const newLen = init('newlen', { initValue: this.props.email.length });\n\n return (
\n \n now length is:{newLen.value}\n

email: {this.props.email}

\n \n
);\n }\n}\n\n\nconst ReduxDemo = connect((state) => {\n return {\n email: state.formReducer.email\n };\n})(Demo);\n\n\nconst store = createStore(combineReducers({\n formReducer\n}));\n\nReactDOM.render((\n
\n \n
\n), mountNode);\n"},"body":"\n````jsx\nimport { Input, Button, Field } from '@alifd/next';\n\n\nimport { combineReducers, createStore } from 'redux';\nimport { Provider, connect } from 'react-redux';\n\nfunction formReducer(state = {email: 'frankqian@qq.com'}, action) {\n switch (action.type) {\n case 'save_fields':\n return {\n ...state,\n ...action.payload\n };\n default:\n return state;\n }\n}\n\nclass Demo extends React.Component {\n componentWillReceiveProps(nextProps) {\n this.field.setValues({\n email: nextProps.email,\n newlen: nextProps.email.length\n });\n }\n\n field = new Field(this, {\n onChange: (name, value) => {\n console.log('onChange', name, value);\n this.field.setValue('newlen', value.length);\n this.props.dispatch({\n type: 'save_fields',\n payload: {\n [name]: value\n }\n });\n }\n });\n\n setEmail() {\n this.props.dispatch({\n type: 'save_fields',\n payload: {\n email: 'qq@gmail.com'\n }\n });\n }\n\n\n render() {\n const init = this.field.init;\n\n const newLen = init('newlen', { initValue: this.props.email.length });\n\n return (
\n \n now length is:{newLen.value}\n

email: {this.props.email}

\n \n
);\n }\n}\n\n\nconst ReduxDemo = connect((state) => {\n return {\n email: state.formReducer.email\n };\n})(Demo);\n\n\nconst store = createStore(combineReducers({\n formReducer\n}));\n\nReactDOM.render((\n
\n \n
\n), mountNode);\n````","html":"
import { Input, Button, Field } from '@alifd/next';\n\n\nimport { combineReducers, createStore } from 'redux';\nimport { Provider, connect } from 'react-redux';\n\nfunction formReducer(state = {email: 'frankqian@qq.com'}, action) {\n    switch (action.type) {\n        case 'save_fields':\n            return {\n                ...state,\n                ...action.payload\n            };\n        default:\n            return state;\n    }\n}\n\nclass Demo extends React.Component {\n    componentWillReceiveProps(nextProps) {\n        this.field.setValues({\n            email: nextProps.email,\n            newlen: nextProps.email.length\n        });\n    }\n\n    field = new Field(this, {\n        onChange: (name, value) => {\n            console.log('onChange', name, value);\n            this.field.setValue('newlen', value.length);\n            this.props.dispatch({\n                type: 'save_fields',\n                payload: {\n                    [name]: value\n                }\n            });\n        }\n    });\n\n    setEmail() {\n        this.props.dispatch({\n            type: 'save_fields',\n            payload: {\n                email: 'qq@gmail.com'\n            }\n        });\n    }\n\n\n    render() {\n        const init = this.field.init;\n\n        const newLen = init('newlen', { initValue: this.props.email.length });\n\n        return (<div>\n            <Input {...init('email', { initValue: this.props.email }, {\n                rules: [\n                    {required: true, type: 'email', message: 'at least 5 chars'}\n                ]\n            })} />\n            now length is:{newLen.value}\n            <p>email: {this.props.email}</p>\n            <Button onClick={this.setEmail.bind(this)}>set</Button>\n        </div>);\n    }\n}\n\n\nconst ReduxDemo = connect((state) => {\n    return {\n        email: state.formReducer.email\n    };\n})(Demo);\n\n\nconst store = createStore(combineReducers({\n    formReducer\n}));\n\nReactDOM.render((<Provider store={store}>\n    <div>\n        <ReduxDemo />\n    </div>\n</Provider>), mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/field/demo/redux.md b/compiled_docs/field/demo/redux.md new file mode 100644 index 0000000000..09af614f22 --- /dev/null +++ b/compiled_docs/field/demo/redux.md @@ -0,0 +1 @@ +{"title":"redux 中使用","meta":{"title":"redux 中使用","description":"\n

在 redux 中使用, 在 componentWillReceiveProps 更新

\n","order":"5"},"codes":{"jsx":"import { Input, Button, Field } from '@alifd/next';\n\n\nimport { combineReducers, createStore } from 'redux';\nimport { Provider, connect } from 'react-redux';\n\nfunction formReducer(state = {email: 'frankqian@qq.com'}, action) {\n switch (action.type) {\n case 'save_fields':\n return {\n ...state,\n ...action.payload\n };\n default:\n return state;\n }\n}\n\nclass Demo extends React.Component {\n componentWillReceiveProps(nextProps) {\n this.field.setValues({\n email: nextProps.email,\n newlen: nextProps.email.length\n });\n }\n\n field = new Field(this, {\n onChange: (name, value) => {\n console.log('onChange', name, value);\n this.field.setValue('newlen', value.length);\n this.props.dispatch({\n type: 'save_fields',\n payload: {\n [name]: value\n }\n });\n }\n });\n\n setEmail() {\n this.props.dispatch({\n type: 'save_fields',\n payload: {\n email: 'qq@gmail.com'\n }\n });\n }\n\n\n render() {\n const init = this.field.init;\n\n const newLen = init('newlen', { initValue: this.props.email.length });\n\n return (
\n \n now length is:{newLen.value}\n

email: {this.props.email}

\n \n
);\n }\n}\n\n\nconst ReduxDemo = connect((state) => {\n return {\n email: state.formReducer.email\n };\n})(Demo);\n\n\nconst store = createStore(combineReducers({\n formReducer\n}));\n\nReactDOM.render((\n
\n \n
\n), mountNode);\n"},"body":"\n\n````jsx\nimport { Input, Button, Field } from '@alifd/next';\n\n\nimport { combineReducers, createStore } from 'redux';\nimport { Provider, connect } from 'react-redux';\n\nfunction formReducer(state = {email: 'frankqian@qq.com'}, action) {\n switch (action.type) {\n case 'save_fields':\n return {\n ...state,\n ...action.payload\n };\n default:\n return state;\n }\n}\n\nclass Demo extends React.Component {\n componentWillReceiveProps(nextProps) {\n this.field.setValues({\n email: nextProps.email,\n newlen: nextProps.email.length\n });\n }\n\n field = new Field(this, {\n onChange: (name, value) => {\n console.log('onChange', name, value);\n this.field.setValue('newlen', value.length);\n this.props.dispatch({\n type: 'save_fields',\n payload: {\n [name]: value\n }\n });\n }\n });\n\n setEmail() {\n this.props.dispatch({\n type: 'save_fields',\n payload: {\n email: 'qq@gmail.com'\n }\n });\n }\n\n\n render() {\n const init = this.field.init;\n\n const newLen = init('newlen', { initValue: this.props.email.length });\n\n return (
\n \n now length is:{newLen.value}\n

email: {this.props.email}

\n \n
);\n }\n}\n\n\nconst ReduxDemo = connect((state) => {\n return {\n email: state.formReducer.email\n };\n})(Demo);\n\n\nconst store = createStore(combineReducers({\n formReducer\n}));\n\nReactDOM.render((\n
\n \n
\n), mountNode);\n````","html":"
import { Input, Button, Field } from '@alifd/next';\n\n\nimport { combineReducers, createStore } from 'redux';\nimport { Provider, connect } from 'react-redux';\n\nfunction formReducer(state = {email: 'frankqian@qq.com'}, action) {\n    switch (action.type) {\n        case 'save_fields':\n            return {\n                ...state,\n                ...action.payload\n            };\n        default:\n            return state;\n    }\n}\n\nclass Demo extends React.Component {\n    componentWillReceiveProps(nextProps) {\n        this.field.setValues({\n            email: nextProps.email,\n            newlen: nextProps.email.length\n        });\n    }\n\n    field = new Field(this, {\n        onChange: (name, value) => {\n            console.log('onChange', name, value);\n            this.field.setValue('newlen', value.length);\n            this.props.dispatch({\n                type: 'save_fields',\n                payload: {\n                    [name]: value\n                }\n            });\n        }\n    });\n\n    setEmail() {\n        this.props.dispatch({\n            type: 'save_fields',\n            payload: {\n                email: 'qq@gmail.com'\n            }\n        });\n    }\n\n\n    render() {\n        const init = this.field.init;\n\n        const newLen = init('newlen', { initValue: this.props.email.length });\n\n        return (<div>\n            <Input {...init('email', { initValue: this.props.email }, {\n                rules: [\n                    {required: true, type: 'email', message: 'at least 5 chars'}\n                ]\n            })} />\n            now length is:{newLen.value}\n            <p>email: {this.props.email}</p>\n            <Button onClick={this.setEmail.bind(this)}>set</Button>\n        </div>);\n    }\n}\n\n\nconst ReduxDemo = connect((state) => {\n    return {\n        email: state.formReducer.email\n    };\n})(Demo);\n\n\nconst store = createStore(combineReducers({\n    formReducer\n}));\n\nReactDOM.render((<Provider store={store}>\n    <div>\n        <ReduxDemo />\n    </div>\n</Provider>), mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/field/demo/seterror.en-us.md b/compiled_docs/field/demo/seterror.en-us.md new file mode 100644 index 0000000000..550d27103c --- /dev/null +++ b/compiled_docs/field/demo/seterror.en-us.md @@ -0,0 +1 @@ +{"title":"custom errors","meta":{"title":"custom errors","description":"\n

set errors of component by yourself

\n","order":"3"},"codes":{"jsx":"import { Input, Button, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n field = new Field(this);\n\n render() {\n const { init, getError, setError, setErrors } = this.field;\n return (
\n
\n {getError('input')}\n\n
\n \n\n \n\n \n\n

\n
\n {getError('input2')}
\n\n \n
);\n }\n}\n\n\nReactDOM.render(, mountNode);\n\n\n","css":".demo .next-btn {\n margin-right: 5px;\n}\n"},"body":"\n````jsx\nimport { Input, Button, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n field = new Field(this);\n\n render() {\n const { init, getError, setError, setErrors } = this.field;\n return (
\n
\n {getError('input')}\n\n
\n \n\n \n\n \n\n

\n
\n {getError('input2')}
\n\n \n
);\n }\n}\n\n\nReactDOM.render(, mountNode);\n\n\n````\n\n````css\n.demo .next-btn {\n margin-right: 5px;\n}\n````","html":"
import { Input, Button, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n    field = new Field(this);\n\n    render() {\n        const { init, getError, setError, setErrors } = this.field;\n        return (<div className=\"demo\">\n            <Input {...init('input', {\n                rules: [{\n                    required: true,\n                    pattern: /hello/,\n                    message: 'must be hello'\n                }]\n            })} /><br/>\n            <span style={{color: 'red'}}>{getError('input')}</span>\n\n            <br/>\n            <Button onClick={() => {\n                setError('input', 'set error 1');\n            }}>setError</Button>\n\n            <Button onClick={() => {\n                setErrors({input: 'set error 2'});\n            }}>setErrors</Button>\n\n            <Button onClick={() => {\n                setErrors({input: ''});\n            }}>clear</Button>\n\n            <br/><br/>\n            <Input {...init('input2')} /><br/>\n            <span style={{color: 'red'}}>{getError('input2')}</span><br/>\n\n            <Button onClick={() => {\n                setError('input2', 'errors will be removed by onChange');\n            }}>setError</Button>\n        </div>);\n    }\n}\n\n\nReactDOM.render(<App/>, mountNode);\n\n
.demo .next-btn {\n    margin-right: 5px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/field/demo/seterror.md b/compiled_docs/field/demo/seterror.md new file mode 100644 index 0000000000..da1243067d --- /dev/null +++ b/compiled_docs/field/demo/seterror.md @@ -0,0 +1 @@ +{"title":"自定义错误","meta":{"title":"自定义错误","description":"\n

自己控制组件的errors

\n","order":"3"},"codes":{"jsx":"import { Input, Button, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n field = new Field(this);\n\n render() {\n const { init, getError, setError, setErrors } = this.field;\n return (
\n
\n {getError('input')}\n\n
\n \n\n \n\n \n\n

\n
\n {getError('input2')}
\n\n \n
);\n }\n}\n\n\nReactDOM.render(, mountNode);\n\n\n","css":".demo .next-btn {\n margin-right: 5px;\n}\n"},"body":"\n\n\n````jsx\nimport { Input, Button, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n field = new Field(this);\n\n render() {\n const { init, getError, setError, setErrors } = this.field;\n return (
\n
\n {getError('input')}\n\n
\n \n\n \n\n \n\n

\n
\n {getError('input2')}
\n\n \n
);\n }\n}\n\n\nReactDOM.render(, mountNode);\n\n\n````\n\n````css\n.demo .next-btn {\n margin-right: 5px;\n}\n````","html":"
import { Input, Button, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n    field = new Field(this);\n\n    render() {\n        const { init, getError, setError, setErrors } = this.field;\n        return (<div className=\"demo\">\n            <Input {...init('input', {\n                rules: [{\n                    required: true,\n                    pattern: /hello/,\n                    message: 'must be hello'\n                }]\n            })} /><br/>\n            <span style={{color: 'red'}}>{getError('input')}</span>\n\n            <br/>\n            <Button onClick={() => {\n                setError('input', 'set error 1');\n            }}>setError</Button>\n\n            <Button onClick={() => {\n                setErrors({input: 'set error 2'});\n            }}>setErrors</Button>\n\n            <Button onClick={() => {\n                setErrors({input: ''});\n            }}>clear</Button>\n\n            <br/><br/>\n            <Input {...init('input2')} /><br/>\n            <span style={{color: 'red'}}>{getError('input2')}</span><br/>\n\n            <Button onClick={() => {\n                setError('input2', 'errors will be removed by onChange');\n            }}>setError</Button>\n        </div>);\n    }\n}\n\n\nReactDOM.render(<App/>, mountNode);\n\n
.demo .next-btn {\n    margin-right: 5px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/field/demo/topath.en-us.md b/compiled_docs/field/demo/topath.en-us.md new file mode 100644 index 0000000000..54587317fb --- /dev/null +++ b/compiled_docs/field/demo/topath.en-us.md @@ -0,0 +1 @@ +{"title":"Parse Array or Object","meta":{"title":"Parse Array or Object","description":"\n

from init('obj.b') to obj={obj:{b:'value'}}；

\n

from init('arr.0') to obj={arr:['']}；

\n","order":"11"},"codes":{"jsx":"import { Input, Button, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n field = new Field(this, {\n parseName: true\n });\n\n onGetValue() {\n console.log(this.field.getValues());\n }\n\n onSetValue() {\n this.field.setValues({\n obj: {\n b: 'b',\n c: 'c'\n },\n arr: ['first', 'second']\n });\n }\n\n render() {\n const { init, reset } = this.field;\n\n return (
\n

Object transfer

\n obj.b:  \n obj.c: \n\n
\n\n

Array transfer

\n arr.0:  \n arr.1: \n

\n\n result:\n 
{JSON.stringify(this.field.getValues(), null, 2)}
\n\n

\n\n \n \n \n
);\n }\n}\n\n\nReactDOM.render(, mountNode);\n","css":".demo .next-btn {\n margin-right: 5px;\n}\n"},"body":"\n````jsx\nimport { Input, Button, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n field = new Field(this, {\n parseName: true\n });\n\n onGetValue() {\n console.log(this.field.getValues());\n }\n\n onSetValue() {\n this.field.setValues({\n obj: {\n b: 'b',\n c: 'c'\n },\n arr: ['first', 'second']\n });\n }\n\n render() {\n const { init, reset } = this.field;\n\n return (
\n

Object transfer

\n obj.b:  \n obj.c: \n\n
\n\n

Array transfer

\n arr.0:  \n arr.1: \n

\n\n result:\n 
{JSON.stringify(this.field.getValues(), null, 2)}
\n\n

\n\n \n \n \n
);\n }\n}\n\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo .next-btn {\n margin-right: 5px;\n}\n````","html":"
import { Input, Button, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n    field = new Field(this, {\n        parseName: true\n    });\n\n    onGetValue() {\n        console.log(this.field.getValues());\n    }\n\n    onSetValue() {\n        this.field.setValues({\n            obj: {\n                b: 'b',\n                c: 'c'\n            },\n            arr: ['first', 'second']\n        });\n    }\n\n    render() {\n        const { init, reset } = this.field;\n\n        return (<div className=\"demo\">\n            <h3>Object transfer</h3>\n            obj.b: <Input {...init('obj.b', {initValue: 'test1'})} /> &nbsp;\n            obj.c: <Input {...init('obj.c', {initValue: 'test2'})} />\n\n            <br/>\n\n            <h3>Array transfer</h3>\n            arr.0: <Input {...init('arr.0', {initValue: '0'})} /> &nbsp;\n            arr.1: <Input {...init('arr.1', {initValue: '1'})} />\n            <br/><br/>\n\n            result:\n            <pre>{JSON.stringify(this.field.getValues(), null, 2)}</pre>\n\n            <br/><br/>\n\n            <Button type=\"primary\" onClick={this.onGetValue.bind(this)}>getValues</Button>\n            <Button onClick={this.onSetValue.bind(this)}>setValues</Button>\n            <Button onClick={() => reset()}>reset</Button>\n        </div>);\n    }\n}\n\n\nReactDOM.render(<App/>, mountNode);
.demo .next-btn {\n    margin-right: 5px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/field/demo/topath.md b/compiled_docs/field/demo/topath.md new file mode 100644 index 0000000000..0ead22f7bf --- /dev/null +++ b/compiled_docs/field/demo/topath.md @@ -0,0 +1 @@ +{"title":"结构化解析","meta":{"title":"结构化解析","description":"\n

把 init('obj.b') 的数据转换成 obj={obj:{b:'value'}}；

\n

把 init('arr.0') 的数据转换成 obj={arr:['']}；

\n","order":"11"},"codes":{"jsx":"import { Input, Button, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n field = new Field(this, {\n parseName: true\n });\n\n onGetValue() {\n console.log(this.field.getValues());\n }\n\n onSetValue() {\n this.field.setValues({\n obj: {\n b: 'b',\n c: 'c'\n },\n arr: ['first', 'second']\n });\n }\n\n render() {\n const { init, reset } = this.field;\n\n return (
\n

Object transfer

\n obj.b:  \n obj.c: \n\n
\n\n

Array transfer

\n arr.0:  \n arr.1: \n

\n\n result:\n 
{JSON.stringify(this.field.getValues(), null, 2)}
\n\n

\n\n \n \n \n
);\n }\n}\n\n\nReactDOM.render(, mountNode);\n","css":".demo .next-btn {\n margin-right: 5px;\n}\n"},"body":"\n\n\n````jsx\nimport { Input, Button, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n field = new Field(this, {\n parseName: true\n });\n\n onGetValue() {\n console.log(this.field.getValues());\n }\n\n onSetValue() {\n this.field.setValues({\n obj: {\n b: 'b',\n c: 'c'\n },\n arr: ['first', 'second']\n });\n }\n\n render() {\n const { init, reset } = this.field;\n\n return (
\n

Object transfer

\n obj.b:  \n obj.c: \n\n
\n\n

Array transfer

\n arr.0:  \n arr.1: \n

\n\n result:\n 
{JSON.stringify(this.field.getValues(), null, 2)}
\n\n

\n\n \n \n \n
);\n }\n}\n\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo .next-btn {\n margin-right: 5px;\n}\n````","html":"
import { Input, Button, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n    field = new Field(this, {\n        parseName: true\n    });\n\n    onGetValue() {\n        console.log(this.field.getValues());\n    }\n\n    onSetValue() {\n        this.field.setValues({\n            obj: {\n                b: 'b',\n                c: 'c'\n            },\n            arr: ['first', 'second']\n        });\n    }\n\n    render() {\n        const { init, reset } = this.field;\n\n        return (<div className=\"demo\">\n            <h3>Object transfer</h3>\n            obj.b: <Input {...init('obj.b', {initValue: 'test1'})} /> &nbsp;\n            obj.c: <Input {...init('obj.c', {initValue: 'test2'})} />\n\n            <br/>\n\n            <h3>Array transfer</h3>\n            arr.0: <Input {...init('arr.0', {initValue: '0'})} /> &nbsp;\n            arr.1: <Input {...init('arr.1', {initValue: '1'})} />\n            <br/><br/>\n\n            result:\n            <pre>{JSON.stringify(this.field.getValues(), null, 2)}</pre>\n\n            <br/><br/>\n\n            <Button type=\"primary\" onClick={this.onGetValue.bind(this)}>getValues</Button>\n            <Button onClick={this.onSetValue.bind(this)}>setValues</Button>\n            <Button onClick={() => reset()}>reset</Button>\n        </div>);\n    }\n}\n\n\nReactDOM.render(<App/>, mountNode);
.demo .next-btn {\n    margin-right: 5px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/field/demo/validator.en-us.md b/compiled_docs/field/demo/validator.en-us.md new file mode 100644 index 0000000000..51901af746 --- /dev/null +++ b/compiled_docs/field/demo/validator.en-us.md @@ -0,0 +1 @@ +{"title":"validate","meta":{"title":"validate","description":"\n

you can easily use validate in Form, or you can use getError to set errors where you want to put

\n","order":"4"},"codes":{"jsx":"import { Input, Button, Checkbox, Field } from '@alifd/next';\n\n\n\nconst CheckboxGroup = Checkbox.Group;\n\nconst list = [\n {\n value: 'apple',\n label: 'apple'\n }, {\n value: 'pear',\n label: 'pear'\n }, {\n value: 'orange',\n label: 'orange'\n }\n];\n\nclass App extends React.Component {\n state = {\n checkboxStatus: true\n }\n field = new Field(this, {scrollToFirstError: -10});\n\n isChecked(rule, value, callback) {\n if (!value) {\n return callback('consent agreement not checked ');\n } else {\n return callback();\n }\n }\n\n userName(rule, value, callback) {\n if (value === 'frank') {\n setTimeout(() => callback('name existed'), 200);\n } else {\n setTimeout(() => callback(), 200);\n }\n }\n\n render() {\n const init = this.field.init;\n\n return (
\n \n {this.field.getError('input') ?\n {this.field.getError('input').join(',')} : ''}\n\n
\n
\n\n \n {this.field.getError('input1') ?\n {this.field.getError('input1').join(',')} : ''}\n\n
\n
\n\n \n {this.field.getState('username') === 'loading' ? 'validating...' : ''}\n {this.field.getError('username') ?\n {this.field.getError('username').join(',')} : ''}\n\n
\n
\n\n agreement:\n \n {this.field.getError('checkbox') ?\n {this.field.getError('checkbox').join(',')} : ''}\n\n
\n
\n\n 3 and <10\" {...init('textarea', {\n rules: [{\n required: true,\n minLength: 3,\n maxLength: 10\n }]\n })} />\n {this.field.getError('textarea') ?\n {this.field.getError('textarea').join(',')} : ''}\n\n
\n
\n\n {this.state.checkboxStatus ?
\n Array validate：\n \n {this.field.getError('checkboxgroup') ?\n {this.field.getError('checkboxgroup').join(',')} : ''}\n
: null}\n\n
\n
\n\n \n \n\n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".demo .next-btn {\n margin-right: 5px;\n}\n"},"body":"\n````jsx\nimport { Input, Button, Checkbox, Field } from '@alifd/next';\n\n\n\nconst CheckboxGroup = Checkbox.Group;\n\nconst list = [\n {\n value: 'apple',\n label: 'apple'\n }, {\n value: 'pear',\n label: 'pear'\n }, {\n value: 'orange',\n label: 'orange'\n }\n];\n\nclass App extends React.Component {\n state = {\n checkboxStatus: true\n }\n field = new Field(this, {scrollToFirstError: -10});\n\n isChecked(rule, value, callback) {\n if (!value) {\n return callback('consent agreement not checked ');\n } else {\n return callback();\n }\n }\n\n userName(rule, value, callback) {\n if (value === 'frank') {\n setTimeout(() => callback('name existed'), 200);\n } else {\n setTimeout(() => callback(), 200);\n }\n }\n\n render() {\n const init = this.field.init;\n\n return (
\n \n {this.field.getError('input') ?\n {this.field.getError('input').join(',')} : ''}\n\n
\n
\n\n \n {this.field.getError('input1') ?\n {this.field.getError('input1').join(',')} : ''}\n\n
\n
\n\n \n {this.field.getState('username') === 'loading' ? 'validating...' : ''}\n {this.field.getError('username') ?\n {this.field.getError('username').join(',')} : ''}\n\n
\n
\n\n agreement:\n \n {this.field.getError('checkbox') ?\n {this.field.getError('checkbox').join(',')} : ''}\n\n
\n
\n\n 3 and <10\" {...init('textarea', {\n rules: [{\n required: true,\n minLength: 3,\n maxLength: 10\n }]\n })} />\n {this.field.getError('textarea') ?\n {this.field.getError('textarea').join(',')} : ''}\n\n
\n
\n\n {this.state.checkboxStatus ?
\n Array validate：\n \n {this.field.getError('checkboxgroup') ?\n {this.field.getError('checkboxgroup').join(',')} : ''}\n
: null}\n\n
\n
\n\n \n \n\n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo .next-btn {\n margin-right: 5px;\n}\n````","html":"
import { Input, Button, Checkbox, Field } from '@alifd/next';\n\n\n\nconst CheckboxGroup = Checkbox.Group;\n\nconst list = [\n    {\n        value: 'apple',\n        label: 'apple'\n    }, {\n        value: 'pear',\n        label: 'pear'\n    }, {\n        value: 'orange',\n        label: 'orange'\n    }\n];\n\nclass App extends React.Component {\n    state = {\n        checkboxStatus: true\n    }\n    field = new Field(this, {scrollToFirstError: -10});\n\n    isChecked(rule, value, callback) {\n        if (!value) {\n            return callback('consent agreement not checked ');\n        } else {\n            return callback();\n        }\n    }\n\n    userName(rule, value, callback) {\n        if (value === 'frank') {\n            setTimeout(() => callback('name existed'), 200);\n        } else {\n            setTimeout(() => callback(), 200);\n        }\n    }\n\n    render() {\n        const init = this.field.init;\n\n        return (<div className=\"demo\">\n            <Input {...init('input', {initValue: 'delete all', rules: {required: true}})} />\n            {this.field.getError('input') ?\n                <span style={{color: 'red'}}>{this.field.getError('input').join(',')}</span> : ''}\n\n            <br/>\n            <br/>\n\n            <Input placeholder=\"try onBlur\" {...init('input1', {\n                rules: [{\n                    required: true,\n                    message: 'can not be empty',\n                    trigger: ['onBlur', 'onChange']\n                }]\n            })} />\n            {this.field.getError('input1') ?\n                <span style={{color: 'red'}}>{this.field.getError('input1').join(',')}</span> : ''}\n\n            <br/>\n            <br/>\n\n            <Input defaultValue=\"\" placeholder=\"try frank\" {...init('username', {\n                rules: [{\n                    validator: this.userName,\n                    trigger: ['onBlur', 'onChange']\n                }]\n            })} />\n            {this.field.getState('username') === 'loading' ? 'validating...' : ''}\n            {this.field.getError('username') ?\n                <span style={{color: 'red'}}>{this.field.getError('username').join(',')}</span> : ''}\n\n            <br/>\n            <br/>\n\n            agreement:\n            <Checkbox {...init('checkbox', {\n                valueName: 'checked',\n                rules: [{validator: this.isChecked}]\n            })} />\n            {this.field.getError('checkbox') ?\n                <span style={{color: 'red'}}>{this.field.getError('checkbox').join(',')}</span> : ''}\n\n            <br/>\n            <br/>\n\n            <Input.TextArea placeholder=\">3 and <10\" {...init('textarea', {\n                rules: [{\n                    required: true,\n                    minLength: 3,\n                    maxLength: 10\n                }]\n            })} />\n            {this.field.getError('textarea') ?\n                <span style={{color: 'red'}}>{this.field.getError('textarea').join(',')}</span> : ''}\n\n            <br/>\n            <br/>\n\n            {this.state.checkboxStatus ? <div>\n                Array validate：\n                <CheckboxGroup dataSource={list} {...init('checkboxgroup', {\n                    rules: [{\n                        required: true,\n                        type: 'array',\n                        message: 'choose one please'\n                    }]\n                })} style={{marginBottom: 10}}/>\n                {this.field.getError('checkboxgroup') ?\n                    <span style={{color: 'red'}}>{this.field.getError('checkboxgroup').join(',')}</span> : ''}\n            </div> : null}\n\n            <br/>\n            <br/>\n\n            <Button type=\"primary\" onClick={() => {\n                this.field.validate((errors, values) => {\n                    console.log(errors, values);\n                });\n            }}>validate</Button>\n            <Button onClick={() => {\n                this.field.reset();\n            }}>reset</Button>\n\n            <Button onClick={() => {\n                if (this.state.checkboxStatus) {\n                    this.setState({checkboxStatus: false});\n                    this.field.remove('checkboxgroup');\n                } else {\n                    this.setState({checkboxStatus: true});\n                }\n\n            }}>{this.state.checkboxStatus ? 'delete' : 'restore'}</Button>\n        </div>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
.demo .next-btn {\n    margin-right: 5px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/field/demo/validator.md b/compiled_docs/field/demo/validator.md new file mode 100644 index 0000000000..8935f77021 --- /dev/null +++ b/compiled_docs/field/demo/validator.md @@ -0,0 +1 @@ +{"title":"校验","meta":{"title":"校验","description":"\n

校验的错误信息需要用getError获取

\n

注意：Form 和 Field 做了深度结合，在 Form 中使用Field，错误信息不需getError获取会自动展现。

\n","order":"4"},"codes":{"jsx":"import { Input, Button, Checkbox, Field } from '@alifd/next';\n\n\n\nconst CheckboxGroup = Checkbox.Group;\n\nconst list = [\n {\n value: 'apple',\n label: 'apple'\n }, {\n value: 'pear',\n label: 'pear'\n }, {\n value: 'orange',\n label: 'orange'\n }\n];\n\nclass App extends React.Component {\n state = {\n checkboxStatus: true\n }\n field = new Field(this, {scrollToFirstError: -10});\n\n isChecked(rule, value, callback) {\n if (!value) {\n return callback('consent agreement not checked ');\n } else {\n return callback();\n }\n }\n\n userName(rule, value, callback) {\n if (value === 'frank') {\n setTimeout(() => callback('name existed'), 200);\n } else {\n setTimeout(() => callback(), 200);\n }\n }\n\n render() {\n const init = this.field.init;\n\n return (
\n \n {this.field.getError('input') ?\n {this.field.getError('input').join(',')} : ''}\n\n
\n
\n\n \n {this.field.getError('input1') ?\n {this.field.getError('input1').join(',')} : ''}\n\n
\n
\n\n \n {this.field.getState('username') === 'loading' ? 'validating...' : ''}\n {this.field.getError('username') ?\n {this.field.getError('username').join(',')} : ''}\n\n
\n
\n\n agreement:\n \n {this.field.getError('checkbox') ?\n {this.field.getError('checkbox').join(',')} : ''}\n\n
\n
\n\n 3 and <10\" {...init('textarea', {\n rules: [{\n required: true,\n minLength: 3,\n maxLength: 10\n }]\n })} />\n {this.field.getError('textarea') ?\n {this.field.getError('textarea').join(',')} : ''}\n\n
\n
\n\n {this.state.checkboxStatus ?
\n Array validate：\n \n {this.field.getError('checkboxgroup') ?\n {this.field.getError('checkboxgroup').join(',')} : ''}\n
: null}\n\n
\n
\n\n \n \n\n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".demo .next-btn {\n margin-right: 5px;\n}\n"},"body":"\n\n````jsx\nimport { Input, Button, Checkbox, Field } from '@alifd/next';\n\n\n\nconst CheckboxGroup = Checkbox.Group;\n\nconst list = [\n {\n value: 'apple',\n label: 'apple'\n }, {\n value: 'pear',\n label: 'pear'\n }, {\n value: 'orange',\n label: 'orange'\n }\n];\n\nclass App extends React.Component {\n state = {\n checkboxStatus: true\n }\n field = new Field(this, {scrollToFirstError: -10});\n\n isChecked(rule, value, callback) {\n if (!value) {\n return callback('consent agreement not checked ');\n } else {\n return callback();\n }\n }\n\n userName(rule, value, callback) {\n if (value === 'frank') {\n setTimeout(() => callback('name existed'), 200);\n } else {\n setTimeout(() => callback(), 200);\n }\n }\n\n render() {\n const init = this.field.init;\n\n return (
\n \n {this.field.getError('input') ?\n {this.field.getError('input').join(',')} : ''}\n\n
\n
\n\n \n {this.field.getError('input1') ?\n {this.field.getError('input1').join(',')} : ''}\n\n
\n
\n\n \n {this.field.getState('username') === 'loading' ? 'validating...' : ''}\n {this.field.getError('username') ?\n {this.field.getError('username').join(',')} : ''}\n\n
\n
\n\n agreement:\n \n {this.field.getError('checkbox') ?\n {this.field.getError('checkbox').join(',')} : ''}\n\n
\n
\n\n 3 and <10\" {...init('textarea', {\n rules: [{\n required: true,\n minLength: 3,\n maxLength: 10\n }]\n })} />\n {this.field.getError('textarea') ?\n {this.field.getError('textarea').join(',')} : ''}\n\n
\n
\n\n {this.state.checkboxStatus ?
\n Array validate：\n \n {this.field.getError('checkboxgroup') ?\n {this.field.getError('checkboxgroup').join(',')} : ''}\n
: null}\n\n
\n
\n\n \n \n\n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo .next-btn {\n margin-right: 5px;\n}\n````","html":"
import { Input, Button, Checkbox, Field } from '@alifd/next';\n\n\n\nconst CheckboxGroup = Checkbox.Group;\n\nconst list = [\n    {\n        value: 'apple',\n        label: 'apple'\n    }, {\n        value: 'pear',\n        label: 'pear'\n    }, {\n        value: 'orange',\n        label: 'orange'\n    }\n];\n\nclass App extends React.Component {\n    state = {\n        checkboxStatus: true\n    }\n    field = new Field(this, {scrollToFirstError: -10});\n\n    isChecked(rule, value, callback) {\n        if (!value) {\n            return callback('consent agreement not checked ');\n        } else {\n            return callback();\n        }\n    }\n\n    userName(rule, value, callback) {\n        if (value === 'frank') {\n            setTimeout(() => callback('name existed'), 200);\n        } else {\n            setTimeout(() => callback(), 200);\n        }\n    }\n\n    render() {\n        const init = this.field.init;\n\n        return (<div className=\"demo\">\n            <Input {...init('input', {initValue: 'delete all', rules: {required: true}})} />\n            {this.field.getError('input') ?\n                <span style={{color: 'red'}}>{this.field.getError('input').join(',')}</span> : ''}\n\n            <br/>\n            <br/>\n\n            <Input placeholder=\"try onBlur\" {...init('input1', {\n                rules: [{\n                    required: true,\n                    message: 'can not be empty',\n                    trigger: ['onBlur', 'onChange']\n                }]\n            })} />\n            {this.field.getError('input1') ?\n                <span style={{color: 'red'}}>{this.field.getError('input1').join(',')}</span> : ''}\n\n            <br/>\n            <br/>\n\n            <Input defaultValue=\"\" placeholder=\"try frank\" {...init('username', {\n                rules: [{\n                    validator: this.userName,\n                    trigger: ['onBlur', 'onChange']\n                }]\n            })} />\n            {this.field.getState('username') === 'loading' ? 'validating...' : ''}\n            {this.field.getError('username') ?\n                <span style={{color: 'red'}}>{this.field.getError('username').join(',')}</span> : ''}\n\n            <br/>\n            <br/>\n\n            agreement:\n            <Checkbox {...init('checkbox', {\n                valueName: 'checked',\n                rules: [{validator: this.isChecked}]\n            })} />\n            {this.field.getError('checkbox') ?\n                <span style={{color: 'red'}}>{this.field.getError('checkbox').join(',')}</span> : ''}\n\n            <br/>\n            <br/>\n\n            <Input.TextArea placeholder=\">3 and <10\" {...init('textarea', {\n                rules: [{\n                    required: true,\n                    minLength: 3,\n                    maxLength: 10\n                }]\n            })} />\n            {this.field.getError('textarea') ?\n                <span style={{color: 'red'}}>{this.field.getError('textarea').join(',')}</span> : ''}\n\n            <br/>\n            <br/>\n\n            {this.state.checkboxStatus ? <div>\n                Array validate：\n                <CheckboxGroup dataSource={list} {...init('checkboxgroup', {\n                    rules: [{\n                        required: true,\n                        type: 'array',\n                        message: 'choose one please'\n                    }]\n                })} style={{marginBottom: 10}}/>\n                {this.field.getError('checkboxgroup') ?\n                    <span style={{color: 'red'}}>{this.field.getError('checkboxgroup').join(',')}</span> : ''}\n            </div> : null}\n\n            <br/>\n            <br/>\n\n            <Button type=\"primary\" onClick={() => {\n                this.field.validate((errors, values) => {\n                    console.log(errors, values);\n                });\n            }}>validate</Button>\n            <Button onClick={() => {\n                this.field.reset();\n            }}>reset</Button>\n\n            <Button onClick={() => {\n                if (this.state.checkboxStatus) {\n                    this.setState({checkboxStatus: false});\n                    this.field.remove('checkboxgroup');\n                } else {\n                    this.setState({checkboxStatus: true});\n                }\n\n            }}>{this.state.checkboxStatus ? 'delete' : 'restore'}</Button>\n        </div>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
.demo .next-btn {\n    margin-right: 5px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/field/demo/valuename.en-us.md b/compiled_docs/field/demo/valuename.en-us.md new file mode 100644 index 0000000000..95c3d63499 --- /dev/null +++ b/compiled_docs/field/demo/valuename.en-us.md @@ -0,0 +1 @@ +{"title":"custom valueName","meta":{"title":"custom valueName","description":"\n

default valueName is value

\n","order":"9"},"codes":{"jsx":"import { Button, Checkbox, Radio, Switch, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n\n field = new Field(this);\n\n render() {\n const init = this.field.init;\n\n return (
\n checked\n
\n \n defaultChecked\n \n
\n \n
\n\n \n \n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".demo .next-btn {\n margin-right: 5px;\n}\n"},"body":"\n````jsx\nimport { Button, Checkbox, Radio, Switch, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n\n field = new Field(this);\n\n render() {\n const init = this.field.init;\n\n return (
\n checked\n
\n \n defaultChecked\n \n
\n \n
\n\n \n \n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo .next-btn {\n margin-right: 5px;\n}\n````","html":"
import { Button, Checkbox, Radio, Switch, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n\n    field = new Field(this);\n\n    render() {\n        const init = this.field.init;\n\n        return (<div className=\"demo\">\n            <Radio {...init('radio', {initValue: false, valueName: 'checked'})} > checked</Radio>\n            <br/>\n            <Checkbox {...init('checkbox', {valueName: 'checked', initValue: true})} >\n                defaultChecked\n            </Checkbox>\n            <br/>\n            <Switch {...init('switch', {valueName: 'checked', initValue: false})}\n                style={{marginTop: 10, marginBottom: 10}}/>\n            <br/>\n\n            <Button type=\"primary\" onClick={() => {\n                console.log(this.field.getValues());\n            }}>getValues</Button>\n            <Button onClick={() => {\n                this.field.setValues({\n                    radio: true,\n                    switch: true,\n                    checkbox: false\n                });\n            }}> setValues </Button>\n            <Button onClick={() => {\n                this.field.reset();\n            }}>reset</Button>\n        </div>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
.demo .next-btn {\n    margin-right: 5px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/field/demo/valuename.md b/compiled_docs/field/demo/valuename.md new file mode 100644 index 0000000000..cbc8bb861d --- /dev/null +++ b/compiled_docs/field/demo/valuename.md @@ -0,0 +1 @@ +{"title":"自定义受控字段","meta":{"title":"自定义受控字段","description":"\n

valueName 的默认值为 value，如果为其他需要用 valueName 指定

\n","order":"9"},"codes":{"jsx":"import { Button, Checkbox, Radio, Switch, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n\n field = new Field(this);\n\n render() {\n const init = this.field.init;\n\n return (
\n checked\n
\n \n defaultChecked\n \n
\n \n
\n\n \n \n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".demo .next-btn {\n margin-right: 5px;\n}\n"},"body":"\n\n````jsx\nimport { Button, Checkbox, Radio, Switch, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n\n field = new Field(this);\n\n render() {\n const init = this.field.init;\n\n return (
\n checked\n
\n \n defaultChecked\n \n
\n \n
\n\n \n \n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo .next-btn {\n margin-right: 5px;\n}\n````","html":"
import { Button, Checkbox, Radio, Switch, Field } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n\n    field = new Field(this);\n\n    render() {\n        const init = this.field.init;\n\n        return (<div className=\"demo\">\n            <Radio {...init('radio', {initValue: false, valueName: 'checked'})} > checked</Radio>\n            <br/>\n            <Checkbox {...init('checkbox', {valueName: 'checked', initValue: true})} >\n                defaultChecked\n            </Checkbox>\n            <br/>\n            <Switch {...init('switch', {valueName: 'checked', initValue: false})}\n                style={{marginTop: 10, marginBottom: 10}}/>\n            <br/>\n\n            <Button type=\"primary\" onClick={() => {\n                console.log(this.field.getValues());\n            }}>getValues</Button>\n            <Button onClick={() => {\n                this.field.setValues({\n                    radio: true,\n                    switch: true,\n                    checkbox: false\n                });\n            }}> setValues </Button>\n            <Button onClick={() => {\n                this.field.reset();\n            }}>reset</Button>\n        </div>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
.demo .next-btn {\n    margin-right: 5px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/field/index.en-us.md b/compiled_docs/field/index.en-us.md new file mode 100644 index 0000000000..90edf1f366 --- /dev/null +++ b/compiled_docs/field/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Development Guide#

When to use#

Fields can be used to manage data when it comes to form data manipulation and validation. After being associated with a component, the form data can be automatically written back, read, and verified.

\n

Use caution#

    \n
  • With Field init components, value onChange must be placed in init's third argument, otherwise it may be overridden by init.
    • \n
  • Form has been deeply optimized with Field for data acquisition and automatic verification prompt. It is recommended to use Field in Form. Please check Form demo.
    • \n
  • initValue The defaultValue of a similar component, which only takes effect when the component first renders (the ajax asynchronous invocation setting initValue may have missed the first render)
    • \n
  • with parseName=true you could use getValues to get a struct value, but not work in getValue you still need pass complete key
    • \n
\n

basic use#

Class Demo extends React.Component {\n    Field = new Field(this); // instance creation\n\n    onClick = ()=>{\n        Console.log(this.field.getValue('name'));\n    }\n    Render() {\n        Const init = this.field.init;\n\n        // Note: initValue will only be assigned when the component is first initialized. If you are using an asynchronous assignment, use setValue\n        Return <div>\n            <Input {...init('name',{initValue:'first value'})} />\n            <button onClick={this.onClick>Get Data</button>\n        </div>\n    }\n}

update data#

Event Updates#

Class Demo extends React.Component {\n    Field = new Field(this);\n\n    onClick = ()=>{\n        this.field.setValue('name', 'newvalue'); // Assignment will automatically trigger render\n    }\n    Render() {\n        Const init = this.field.init;\n\n        Return <div>\n            <Input {...init('name')} />\n            <button onClick={this.onClick}>Settings</button>\n        </div>\n    }\n}

props update#

Class Demo extends React.Component {\n    Field = new Field(this);\n\n    // Set the data before the component is mounted (this can be replaced with initValue)\n    componentWillMount() {\n        this.field.setValue('name', 'init Name')\n    }\n    // Receive data from props\n    componentWillReceiveProps(nextProps) {\n        this.field.setValue('name', nextProps.name)\n    }\n    Render() {\n        Const init = this.field.init;\n\n        Return <div>\n            <Input {...init('name')} />\n        </div>\n    }\n}

ajax update#

Class Demo extends React.Component {\n    Field = new Field(this);\n\n    onClick = ()=>{\n        Ajax({\n            Url:'/demo.json',\n            Success:(json)=>{\n                // Update of assignment in callback event\n                this.field.setValue('name',json.name);\n            }\n        });\n    }\n    Render() {\n        Const init = this.field.init;\n\n        Return <div>\n            <Input {...init('name')} />\n            <button onClick={this.onClick}>Settings</button>\n        </div>\n    }\n}

onChange update monitoring#

Two usages:

\n
    \n
  1. Unified management
    2. \n
\n
Class Demo extends React.Component {\n    Field = new Field(this,{\n        onChange:(name, value) => {\n          Switch(name) {\n            Case 'name1':\n              this.field.setValue('name2','value set by name1');\n              Break;\n            Case 'name2':\n              this.field.setValue('name1','value set by name2');\n              Break;\n          }\n        }\n    });\n    Render() {\n        Const init = this.field.init;\n\n        Return <div>\n          <Input {...init('name1')} />\n          <Input {...init('name2')} />\n        </div>\n    }\n}
    \n
  1. Individual management
    2. \n
\n
Class Demo extends React.Component {\n    Render() {\n        Const init = this.field.init;\n\n        Return <div>\n          <Input {...init('name1',{\n              Props:{\n                onChange:(v)=>{\n                  this.field.setValue('name2','value set by name1');\n                }\n              }\n            })} />\n          <Input {...init('name2',{\n              Props:{\n                onChange:(v)=>{\n                  this.field.setValue('name1','value set by name2');\n                }\n              }\n            })} />\n        </div>\n    }\n}

For details, please check Demo Demo Associate Control

\n

API#

","api":"

initialization#

Let myfield = new Field(this [,options]);
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterDescriptionTypeOptionalDefault
thisThe incoming call to this classReact.Componentmust be set
optionsSome event configuration, detailed parameters are as followsObjectNot required
\n

options configuration item

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParametersDescriptionTypeDefault
onChangeall component changes will arrive here [setValue won't trigger the function]Function(name,value)
parseNameWhether to translate name in init(name) (getValues ​​will convert a string with . to an object)Booleanfalse
forceUpdateOnly the components of PureComponent are recommended to open this forced refresh function, which will cause performance problems (500 components as an example: the render will cost 700ms when it is turned on, and 400ms if it is turned off)Booleanfalse
scrollToFirstErrorscrolling field.validate scrolls to the first errored component, offsets if it is an integerBoolean/Numbertrue
autoUnmountAutomatically delete the Unmout element, if you want to keep the data can be set to falseBooleantrue
autoValidateAutomatically validate while value changedBooleantrue
valuesinitial valueObject
\n

API Interface#

The api interface provided by the object after new (eg myfield.getValues()) (The api function starting with set should not be manipulated in render, which may trigger an infinite loop)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterDescriptionTypeOptionalDefault
initInitialize each component, [Detailed Parameters below] (#init))Function(name:String, option:Object)
getValues ​​Get the value of a group of input controls. If no parameters are passed, get the values ​​of all componentsFunction([names: String[]])
getValueget the value of a single input controlFunction(name: String)
setValues ​​Sets the value of a set of input controls (triggers render, follow the use of react time)Function(obj: Object)
setValueSets the value of a single input control (triggers render, follow the use of react time)Function(name: String, value)
ValidateValidate and retrieve the values ​​of a set of input fields and ErrorFunction([names: String[]], [options: Object], callback: Function(errors, values))
getErrorGet Error of a Single Input ControlFunction(name: String)
getErrorsGet Errors of a Group of Input ControlsFunction([name: String])
setErrorSet Error for a Single Input ControlFunction(name: String, errors:String/Array[String])
setErrorsSet Errors of a Group of Input ControlsFunction(obj: Object)
resetreset the value of a group of input controls, clear the checksumFunction([names: String[]])
resetToDefaultResets the value of a group of input controls to the defaultFunction([names: String[]])
getStateJudge check statusFunction(name: String)'error' 'success' 'loading' ''''
getNamesGet the key of all componentsFunction()
removeDelete the data of a certain control or a group of controls. After deletion, the validate/value associated with it will be cleared.Function(name: String/String[])
spliceArraydelete data of name like name.{index}Function(keyMatch: String, index: Number)
\n

init#

init(name, options, props)
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterDescriptionTypeOptionalDefault
nameRequired unique input control symbolString
options.valueNameattribute name of the component value, such as Checkbox is checked, Input is valueString'value'
options.initValueThe initial value of the component (the component will be read only when rendering for the first time, and later modifying this value is invalid), similar to defaultValueany
options.triggerName of the event that triggered the data changeString'onChange'
options.rulesChecksum RulesArray/Object
options.getValueFromEventcustom way to get value from onChange event, generally do not need to set. Detailed usage see demo custom data getFunction(value, ...args) parameter order and components are exactly the same The
propsComponent-defined events can be written hereObject
autoValidateAutomatically validate while value changedBooleantrue
\n

return

\n
{id,value,onChange}

rules#

{\n    rules:[{ required: true }]\n}

multiple rule

\n
{\n    rules:[{required:true,trigger:'onBlur'},{pattern:/abcd/,message:'match abcd'},{validator:(rule, value, callback)=>{callback('got error')}}]\n}
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParameterDescriptionTypeOptional
requiredcannot be emptyBooleantrueundefined/null/"/[] will trigger this rule)
patterncheck regular expressionregular
minLengthMinimum string length / Minimum number of arraysNumberString/Number/Array
maxLengthMaximum length of string / Maximum number of arraysNumberString/Number/Array
lengthstring exact length / exact number of arraysnumberString/Number/Array
minMinNumberString/Number
maxmaximumNumberString/Number
formatsum of common patternsStringurl, email, tel, numberString
validatorCustom validation, (don't forget to execute callback() when validation is successful, otherwise validation will not return)Function(rule,value,callback)
triggerName of the event that triggered the checkString/ArrayonChange/onBlur/...onChange
messageerror messageString
\n

Custom Component Access to Field Standards#

    \n

  • Supports controlled mode (value+onChange) Must

    \n
      \n
    • value control component data display
      • \n
    • onChange callback function when the component changes (the first parameter can be given to value)
      • \n
    \n
    • \n

  • One complete operation throws an onChange event\n For example, there is a process that indicates the status of the progress, it is recommended to increase the API onProcess; if there is a Start indicates the startup state, it is recommended to increase the API onStart

    \n
    • \n

  • Clear data when value={undefined}, field's reset function will send undefined data to all components

    \n
    • \n
\n
componentWillReceiveProps(nextProps) {\n    if ('value' in nextProps ) {\n        this.setState({\n           value: nextProps.value === undefined? []: nextProps.value   //  set value after clear\n        })\n    }\n}

Known Issues#

    \n
  • Why doesn't the callback function enter the this.field.validate manually? A: Is it safe to define the validator method to ensure that the callback can be executed on any branch?
    • \n
\n"} \ No newline at end of file diff --git a/compiled_docs/field/index.md b/compiled_docs/field/index.md new file mode 100644 index 0000000000..c3e4e9aed6 --- /dev/null +++ b/compiled_docs/field/index.md @@ -0,0 +1 @@ +{"meta":"

开发指南#

何时使用#

涉及到表单数据操作、校验的地方都可以用Field来管理数据。和组件关联后可以自动对表单数据进行回写、读取、校验。

\n

使用注意#

    \n
  • 使用Field init 过的组件, value onChange 必须放在 init 的第三个参数, 否则有可能被 init 覆盖。
    • \n
  • Form已经和Field 在数据获取和自动校验提示方面做了深度优化，建议在Form中使用Field, 请查看 Form demo。
    • \n
  • initValue 类似组件的 defaultValue 只有在组件第一次render的时候才生效(ajax 异步调用设置 initValue 可能已经错过了第一次render)
    • \n
  • autoUnmount 默认打开的，如果需要保留会 自动卸载的组件 数据请关闭此项
    • \n
  • parseName=true 可以通过 getValues 获取到结构化的数据, 但是 getValue 还是必须传完整 key 值
    • \n
\n

基本使用#

class Demo extends React.Component {\n    field = new Field(this);    // 实例创建\n\n    onClick = ()=>{\n        console.log(this.field.getValue('name'));\n    }\n    render() {\n        const init = this.field.init;\n\n        // 注意：initValue只会在组件第一次初始化的时候被赋值，如果你是异步赋值请用setValue\n        return <div>\n            <Input {...init('name',{initValue:'first value'})} />\n            <button onClick={this.onClick>获取数据</button>\n        </div>\n    }\n}

更新数据#

事件更新#

class Demo extends React.Component {\n    field = new Field(this);\n\n    onClick = ()=>{\n        this.field.setValue('name', 'newvalue');    // 赋值会自动触发render\n    }\n    render() {\n        const init = this.field.init;\n\n        return <div>\n            <Input {...init('name')} />\n            <button onClick={this.onClick}>设置数据</button>\n        </div>\n    }\n}

props更新#

class Demo extends React.Component {\n    field = new Field(this);\n\n    // 在组件挂载之前把数据设置进去(可以用initValue替代这种用法)\n    componentWillMount() {\n        this.field.setValue('name', 'init Name')\n    }\n    // 接收来自props的数据\n    componentWillReceiveProps(nextProps) {\n        this.field.setValue('name', nextProps.name)\n    }\n    render() {\n        const init = this.field.init;\n\n        return <div>\n            <Input {...init('name')} />\n        </div>\n    }\n}

ajax更新#

class Demo extends React.Component {\n    field = new Field(this);\n\n    onClick = ()=>{\n        Ajax({\n            url:'/demo.json',\n            success:(json)=>{\n                // 回调事件中赋值更新\n                this.field.setValue('name',json.name);\n            }\n        });\n    }\n    render() {\n        const init = this.field.init;\n\n        return <div>\n            <Input {...init('name')} />\n            <button onClick={this.onClick}>设置数据</button>\n        </div>\n    }\n}

onChange更新监控#

两种用法：

\n
    \n
  1. 统一管理
    2. \n
\n
class Demo extends React.Component {\n    field = new Field(this,{\n        onChange:(name, value) => {\n          switch(name) {\n            case 'name1':\n              this.field.setValue('name2','value set by name1');\n              break;\n            case 'name2':\n              this.field.setValue('name1','value set by name2');\n              break;\n          }\n        }\n    });\n    render() {\n        const init = this.field.init;\n\n        return <div>\n          <Input {...init('name1')} />\n          <Input {...init('name2')} />\n        </div>\n    }\n}
    \n
  1. 各自管理
    2. \n
\n
class Demo extends React.Component {\n    render() {\n        const init = this.field.init;\n\n        return <div>\n          <Input {...init('name1',{\n              props:{\n                onChange:(v)=>{\n                  this.field.setValue('name2','value set by name1');\n                }\n              }\n            })} />\n          <Input {...init('name2',{\n              props:{\n                onChange:(v)=>{\n                  this.field.setValue('name1','value set by name2');\n                }\n              }\n            })} />\n        </div>\n    }\n}

详细请查看demo演示 关联控制

\n

API#

","api":"

初始化#

let myfield = new Field(this [,options]);
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型可选值默认值
this传入调用class的thisReact.Component必须设置
options一些事件配置, 详细参数如下Object非必须
\n

options 配置项

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
onChange所有组件的change都会到达这里[setValue不会触发该函数]Function(name,value)
parseName是否翻译init(name)中的name(getValues会把带.的字符串转换成对象)Booleanfalse
forceUpdate仅建议PureComponent的组件打开此强制刷新功能，会带来性能问题(500个组件为例：打开的时候render花费700ms, 关闭时候render花费400ms)Booleanfalse
scrollToFirstErrorfield.validate的时候滚动到第一个出错的组件, 如果是整数会进行偏移Boolean/Numbertrue
autoUnmount自动删除Unmout元素，如果想保留数据可以设置为falseBooleantrue
autoValidate是否修改数据的时候就自动触发校验, 设为 false 后只能通过 validate() 来触发校验Booleantrue
values初始化数据Object
\n

API接口#

new之后的对象提供的api接口 （例：myfield.getValues()）(set 开头的api函数不要在render里面操作, 可能会触发死循环)

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型可选值默认值
init初始化每个组件，详细参数如下）Function(name:String, option:Object)
getValues获取一组输入控件的值，如不传入参数，则获取全部组件的值Function([names: String[]])
getValue获取单个输入控件的值Function(name: String)
setValues设置一组输入控件的值（会触发render，请遵循react时机使用)Function(obj: Object)
setValue设置单个输入控件的值 （会触发render，请遵循react时机使用)Function(name: String, value)
validate校验并获取一组输入域的值与 ErrorFunction([names: String[]], [options: Object], callback: Function(errors, values))
getError获取单个输入控件的 ErrorFunction(name: String)
getErrors获取一组输入控件的 ErrorFunction([name: String])
setError设置单个输入控件的 ErrorFunction(name: String, errors:String/Array[String])
setErrors设置一组输入控件的 ErrorFunction(obj: Object)
reset重置一组输入控件的值、清空校验Function([names: String[]])
resetToDefault重置一组输入控件的值为默认值Function([names: String[]])
getState判断校验状态Function(name: String)'error' 'success' 'loading' ''''
getNames获取所有组件的keyFunction()
remove删除某一个或者一组控件的数据，删除后与之相关的validate/value都会被清空Function(name: String/String[])
spliceArray删除 name 是数组格式的数据, 并且自动处理其他 name 的数组错位问题Function(keyMatch: String, index: Number)
\n

init#

init(name, options, props)
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型可选值默认值
name必填输入控件唯一标志String
options.valueName组件值的属性名称，如 Checkbox 的是 checked，Input是 valueString'value'
options.initValue组件初始值(组件第一次render的时候才会读取，后面再修改此值无效),类似defaultValueany
options.trigger触发数据变化的事件名称String'onChange'
options.rules校验规则Array/Object
options.getValueFromEvent自定义从onChange事件中获取value的方式，一般不需要设置. 详细用法查看demo 自定义数据获取Function(value,...args) 参数顺序和组件是完全一致的
props组件自定义的事件可以写在这里Object
autoValidate是否修改数据的时候自动触发校验单个组件的校验, 设为 false 后只能通过 validate() 来触发校验Booleantrue
\n

返回值

\n
{id,value,onChange}

rules#

{\n    rules:[{ required: true }]\n}

多个rule

\n
{\n    rules:[{required:true,trigger:'onBlur'},{pattern:/abcd/,message:'abcd不能缺'},{validator:(rule, value, callback)=>{callback('出错了')}}]\n}
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型可选值使用类型
required不能为空Booleantrueundefined/null/“”/[] 会触发此规则)
pattern校验正则表达式正则
minLength字符串最小长度 / 数组最小个数NumberString/Number/Array
maxLength字符串最大长度 / 数组最大个数NumberString/Number/Array
length字符串精确长度 / 数组精确个数NumberString/Number/Array
min最小值NumberString/Number
max最大值NumberString/Number
format对常用 pattern 的总结Stringurl、email、tel、numberString
validator自定义校验,(校验成功的时候不要忘记执行 callback(),否则会校验不返回)Function(rule,value,callback)
trigger触发校验的事件名称String/ArrayonChange/onBlur/...onChange
message出错时候信息String
\n

自定义组件接入Field标准#

    \n

  • 支持受控模式(value+onChange) 必须

    \n
      \n
    • value 控制组件数据展现
      • \n
    • onChange 组件发生变化时候的回调函数（第一个参数可以给到value)
      • \n
    \n
    • \n

  • 一次完整操作抛一次onChange事件 建议\n比如有Process表示进展中的状态，建议增加API onProcess；如果有Start表示启动状态，建议增加API onStart

    \n
    • \n

  • value={undefined}的时候清空数据, field 的 reset 函数会给所有组件下发 undefined 数据 建议

    \n
    • \n
\n
componentWillReceiveProps(nextProps) {\n    if ('value' in nextProps ) {\n        this.setState({\n           value: nextProps.value === undefined? []: nextProps.value   //  设置组件的被清空后的数值\n        })\n    }\n}

已知问题#

    \n
  • 为何手动调用this.field.validate的时候进不了回调函数？ 答: 是不是自定义了validator方法,确保callback在任何分支下都能被执行到。
    • \n
\n"} \ No newline at end of file diff --git a/compiled_docs/form/demo/accessibility.en-us.md b/compiled_docs/form/demo/accessibility.en-us.md new file mode 100644 index 0000000000..cc3c58bf5c --- /dev/null +++ b/compiled_docs/form/demo/accessibility.en-us.md @@ -0,0 +1 @@ +{"title":"Accessibility","meta":{"title":"Accessibility","description":"\n

For required fields, set the aria-required attribute in the component and prompt the user with a visual design highlight.

\n","order":"16"},"codes":{"jsx":"import { Form, Input, Select, Radio, Checkbox, DatePicker, Switch, Upload, Grid, Field } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\nconst {Row, Col} = Grid;\nconst FormItem = Form.Item;\nconst Option = Select.Option;\nconst formItemLayout = {\n labelCol: {\n span: 7\n },\n wrapperCol: {\n span: 16\n }\n};\nclass Demo extends React.Component {\n state = {\n size: 'medium'\n };\n submitHandle = (e) => {\n console.log(e);\n };\n render() {\n return (\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Male\n Female\n \n \n \n \n python\n java\n angular\n c\n other\n \n \n \n \n \n \n \n \n \n Submit\n Reset\n \n \n
\n );\n }\n}\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Form, Input, Select, Radio, Checkbox, DatePicker, Switch, Upload, Grid, Field } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\nconst {Row, Col} = Grid;\nconst FormItem = Form.Item;\nconst Option = Select.Option;\nconst formItemLayout = {\n labelCol: {\n span: 7\n },\n wrapperCol: {\n span: 16\n }\n};\nclass Demo extends React.Component {\n state = {\n size: 'medium'\n };\n submitHandle = (e) => {\n console.log(e);\n };\n render() {\n return (\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Male\n Female\n \n \n \n \n python\n java\n angular\n c\n other\n \n \n \n \n \n \n \n \n \n Submit\n Reset\n \n \n
\n );\n }\n}\nReactDOM.render(, mountNode);\n````","html":"
import { Form, Input, Select, Radio, Checkbox, DatePicker, Switch, Upload, Grid, Field } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\nconst {Row, Col} = Grid;\nconst FormItem = Form.Item;\nconst Option = Select.Option;\nconst formItemLayout = {\n    labelCol: {\n        span: 7\n    },\n    wrapperCol: {\n        span: 16\n    }\n};\nclass Demo extends React.Component {\n    state = {\n        size: 'medium'\n    };\n    submitHandle = (e) => {\n        console.log(e);\n    };\n    render() {\n        return (\n            <div>\n                <Form {...formItemLayout} size={this.state.size} style={{maxWidth: '800px'}}>\n                    <FormItem required label=\"username:\">\n                        <Input placeholder=\"Please enter your username\" id=\"a11yUsername\" name=\"a11yUsername\" aria-required=\"true\"   />\n                    </FormItem>\n                    <FormItem required label=\"Password:\">\n                        <Input htmlType=\"password\" placeholder=\"Please enter your password\" id=\"a11yPassword\" name=\"a11yPassword\" aria-required=\"true\" />\n                    </FormItem>\n                    <FormItem  \n                        id=\"myDateInput-1\"\n                        required\n                        label=\"Accessible Date 1 (YYYY/MM/DD):\"\n                        requiredMessage=\"Please select your date\"\n                    >\n                        <DatePicker name=\"a11yDate\" format=\"YYYY/MM/DD\" inputProps={{\"aria-required\": \"true\", \"id\": \"myDateInput-1\"}}/> \n                    </FormItem>\n                    <FormItem  \n                        required\n                        label=\"Accessible Date 2 (YYYY/MM/DD):\"\n                        requiredMessage=\"Please select your date\"\n                    >\n                        <DatePicker name=\"a11yOtherDate\" format=\"YYYY/MM/DD\" dateInputAriaLabel=\"Date input format YYYY/MM/DD\" inputProps={{\"aria-required\": \"true\", \"aria-label\": \"Accessible Date 2\"}}/> \n                    </FormItem>\n                    <FormItem label=\"Switch:\">\n                        <Switch name=\"a11ySwitch\" aria-label=\"Accessible Switch\" defaultChecked/>\n                    </FormItem>\n                    <FormItem\n                        required\n                        label=\"gender:\"\n                        requiredMessage=\"Please select your gender\"\n                    >\n                        <RadioGroup name=\"a11ySex\">\n                            <Radio value=\"male\" aria-required=\"true\">Male</Radio>\n                            <Radio value=\"female\" aria-required=\"true\">Female</Radio>\n                        </RadioGroup>\n                    </FormItem>\n                    <FormItem label=\"Language:\">\n                        <Checkbox.Group name=\"a11yLangs\" aria-label=\"Please select a programming language\">\n                            <Checkbox value=\"python\">python</Checkbox>\n                            <Checkbox value=\"java\">java</Checkbox>\n                            <Checkbox value=\"angular\">angular</Checkbox>\n                            <Checkbox value=\"c\">c</Checkbox>\n                            <Checkbox value=\"other\">other</Checkbox>\n                        </Checkbox.Group>\n                    </FormItem>\n                    <FormItem label=\"upload:\">\n                        <Upload.Card\n                            listType=\"card\"\n                            action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n                            accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\"\n                            defaultValue={[]}\n                            limit={2}\n                            name=\"a11yUpload\"\n                        />\n                    </FormItem>\n                    <FormItem label=\"Note:\">\n                        <Input.TextArea placeholder=\"description\" name=\"a11yRemark\"/>\n                    </FormItem>\n                    <FormItem wrapperCol={{offset: 5}}>\n                        <Form.Submit validate type=\"primary\" onClick={this.submitHandle} style={{marginRight: 7}}>Submit</Form.Submit>\n                        <Form.Reset style={{marginLeft: 130}}>Reset</Form.Reset>\n                    </FormItem>\n                </Form>\n            </div>\n        );\n    }\n}\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/accessibility.md b/compiled_docs/form/demo/accessibility.md new file mode 100644 index 0000000000..f0d8592327 --- /dev/null +++ b/compiled_docs/form/demo/accessibility.md @@ -0,0 +1 @@ +{"title":"无障碍","meta":{"title":"无障碍","description":"\n

对于必填项，在组件中要设置aria-required属性，并通过视觉设计上的高亮提示用户。

\n","order":"16"},"codes":{"jsx":"import { Form, Input, Select, Radio, Checkbox, DatePicker, Switch, Upload, Grid, Field } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\nconst {Row, Col} = Grid;\nconst FormItem = Form.Item;\nconst Option = Select.Option;\nconst formItemLayout = {\n labelCol: {\n span: 7\n },\n wrapperCol: {\n span: 16\n }\n};\nclass Demo extends React.Component {\n state = {\n size: 'medium'\n };\n submitHandle = (e) => {\n console.log(e);\n };\n render() {\n return (\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Male\n Female\n \n \n \n \n python\n java\n angular\n c\n other\n \n \n \n \n \n \n \n \n \n Submit\n Reset\n \n \n
\n );\n }\n}\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Form, Input, Select, Radio, Checkbox, DatePicker, Switch, Upload, Grid, Field } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\nconst {Row, Col} = Grid;\nconst FormItem = Form.Item;\nconst Option = Select.Option;\nconst formItemLayout = {\n labelCol: {\n span: 7\n },\n wrapperCol: {\n span: 16\n }\n};\nclass Demo extends React.Component {\n state = {\n size: 'medium'\n };\n submitHandle = (e) => {\n console.log(e);\n };\n render() {\n return (\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Male\n Female\n \n \n \n \n python\n java\n angular\n c\n other\n \n \n \n \n \n \n \n \n \n Submit\n Reset\n \n \n
\n );\n }\n}\nReactDOM.render(, mountNode);\n````","html":"
import { Form, Input, Select, Radio, Checkbox, DatePicker, Switch, Upload, Grid, Field } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\nconst {Row, Col} = Grid;\nconst FormItem = Form.Item;\nconst Option = Select.Option;\nconst formItemLayout = {\n    labelCol: {\n        span: 7\n    },\n    wrapperCol: {\n        span: 16\n    }\n};\nclass Demo extends React.Component {\n    state = {\n        size: 'medium'\n    };\n    submitHandle = (e) => {\n        console.log(e);\n    };\n    render() {\n        return (\n            <div>\n                <Form {...formItemLayout} size={this.state.size} style={{maxWidth: '800px'}}>\n                    <FormItem required label=\"username:\">\n                        <Input placeholder=\"Please enter your username\" id=\"a11yUsername\" name=\"a11yUsername\" aria-required=\"true\"   />\n                    </FormItem>\n                    <FormItem required label=\"Password:\">\n                        <Input htmlType=\"password\" placeholder=\"Please enter your password\" id=\"a11yPassword\" name=\"a11yPassword\" aria-required=\"true\" />\n                    </FormItem>\n                    <FormItem  \n                        id=\"myDateInput-1\"\n                        required\n                        label=\"Accessible Date 1 (YYYY/MM/DD):\"\n                        requiredMessage=\"Please select your date\"\n                    >\n                        <DatePicker name=\"a11yDate\" format=\"YYYY/MM/DD\" inputProps={{\"aria-required\": \"true\", \"id\": \"myDateInput-1\"}}/> \n                    </FormItem>\n                    <FormItem  \n                        required\n                        label=\"Accessible Date 2 (YYYY/MM/DD):\"\n                        requiredMessage=\"Please select your date\"\n                    >\n                        <DatePicker name=\"a11yOtherDate\" format=\"YYYY/MM/DD\" dateInputAriaLabel=\"Date input format YYYY/MM/DD\" inputProps={{\"aria-required\": \"true\", \"aria-label\": \"Accessible Date 2\"}}/> \n                    </FormItem>\n                    <FormItem label=\"Switch:\">\n                        <Switch name=\"a11ySwitch\" aria-label=\"Accessible Switch\" defaultChecked/>\n                    </FormItem>\n                    <FormItem\n                        required\n                        label=\"gender:\"\n                        requiredMessage=\"Please select your gender\"\n                    >\n                        <RadioGroup name=\"a11ySex\">\n                            <Radio value=\"male\" aria-required=\"true\">Male</Radio>\n                            <Radio value=\"female\" aria-required=\"true\">Female</Radio>\n                        </RadioGroup>\n                    </FormItem>\n                    <FormItem label=\"Language:\">\n                        <Checkbox.Group name=\"a11yLangs\" aria-label=\"Please select a programming language\">\n                            <Checkbox value=\"python\">python</Checkbox>\n                            <Checkbox value=\"java\">java</Checkbox>\n                            <Checkbox value=\"angular\">angular</Checkbox>\n                            <Checkbox value=\"c\">c</Checkbox>\n                            <Checkbox value=\"other\">other</Checkbox>\n                        </Checkbox.Group>\n                    </FormItem>\n                    <FormItem label=\"upload:\">\n                        <Upload.Card\n                            listType=\"card\"\n                            action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n                            accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\"\n                            defaultValue={[]}\n                            limit={2}\n                            name=\"a11yUpload\"\n                        />\n                    </FormItem>\n                    <FormItem label=\"Note:\">\n                        <Input.TextArea placeholder=\"description\" name=\"a11yRemark\"/>\n                    </FormItem>\n                    <FormItem wrapperCol={{offset: 5}}>\n                        <Form.Submit validate type=\"primary\" onClick={this.submitHandle} style={{marginRight: 7}}>Submit</Form.Submit>\n                        <Form.Reset style={{marginLeft: 130}}>Reset</Form.Reset>\n                    </FormItem>\n                </Form>\n            </div>\n        );\n    }\n}\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/base.en-us.md b/compiled_docs/form/demo/base.en-us.md new file mode 100644 index 0000000000..daa0455d0a --- /dev/null +++ b/compiled_docs/form/demo/base.en-us.md @@ -0,0 +1 @@ +{"title":"Basic Usage","meta":{"title":"Basic Usage","description":"\n

The width of the label does not change when the browser is stretched.

\n

If the component is relatively high, you can use className="next-form-text-align" to adjust.

\n","order":"0"},"codes":{"jsx":"import { Form, Input, Checkbox } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n labelCol: {\n fixedSpan: 10\n },\n wrapperCol: {\n span: 14\n }\n};\n\nclass Demo extends React.Component {\n\n handleSubmit = (values) => {\n console.log('Get form value:', values);\n };\n\n render() {\n return (\n
\n \n

Fixed Name

\n \n \n \n \n \n \n \n \n Agree\n \n \n Confirm\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Form, Input, Checkbox } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n labelCol: {\n fixedSpan: 10\n },\n wrapperCol: {\n span: 14\n }\n};\n\nclass Demo extends React.Component {\n\n handleSubmit = (values) => {\n console.log('Get form value:', values);\n };\n\n render() {\n return (\n
\n \n

Fixed Name

\n \n \n \n \n \n \n \n \n Agree\n \n \n Confirm\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Form, Input, Checkbox } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n    labelCol: {\n        fixedSpan: 10\n    },\n    wrapperCol: {\n        span: 14\n    }\n};\n\nclass Demo extends React.Component {\n\n    handleSubmit = (values) => {\n        console.log('Get form value:', values);\n    };\n\n    render() {\n        return (\n            <Form style={{width: '60%'}} {...formItemLayout} >\n                <FormItem label=\"baseUsername:\">\n                    <p>Fixed Name</p>\n                </FormItem>\n                <FormItem label=\"password:\">\n                    <Input htmlType=\"password\" name=\"basePass\" placeholder=\"Please Enter Password\"/>\n                </FormItem>\n                <FormItem label=\"Note:\" help=\"something\">\n                    <Input.TextArea placeholder=\"something\" name=\"baseRemark\" />\n                </FormItem>\n                <FormItem label=\"Agreement:\">\n                    <Checkbox name=\"baseAgreement\" defaultChecked>Agree</Checkbox>\n                </FormItem>\n                <FormItem label=\" \">\n                    <Form.Submit onClick={this.handleSubmit}>Confirm</Form.Submit>\n                </FormItem>\n            </Form>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/base.md b/compiled_docs/form/demo/base.md new file mode 100644 index 0000000000..bc5462e37e --- /dev/null +++ b/compiled_docs/form/demo/base.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

拉伸浏览器的时候label宽度不变。

\n

如果组件比较靠上，可以用 className="next-form-text-align" 做调整

\n","order":"0"},"codes":{"jsx":"import { Form, Input, Checkbox } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n labelCol: {\n fixedSpan: 10\n },\n wrapperCol: {\n span: 14\n }\n};\n\nclass Demo extends React.Component {\n\n handleSubmit = (values) => {\n console.log('Get form value:', values);\n };\n\n render() {\n return (\n
\n \n

Fixed Name

\n \n \n \n \n \n \n \n \n Agree\n \n \n Confirm\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Form, Input, Checkbox } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n labelCol: {\n fixedSpan: 10\n },\n wrapperCol: {\n span: 14\n }\n};\n\nclass Demo extends React.Component {\n\n handleSubmit = (values) => {\n console.log('Get form value:', values);\n };\n\n render() {\n return (\n
\n \n

Fixed Name

\n \n \n \n \n \n \n \n \n Agree\n \n \n Confirm\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Form, Input, Checkbox } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n    labelCol: {\n        fixedSpan: 10\n    },\n    wrapperCol: {\n        span: 14\n    }\n};\n\nclass Demo extends React.Component {\n\n    handleSubmit = (values) => {\n        console.log('Get form value:', values);\n    };\n\n    render() {\n        return (\n            <Form style={{width: '60%'}} {...formItemLayout} >\n                <FormItem label=\"baseUsername:\">\n                    <p>Fixed Name</p>\n                </FormItem>\n                <FormItem label=\"password:\">\n                    <Input htmlType=\"password\" name=\"basePass\" placeholder=\"Please Enter Password\"/>\n                </FormItem>\n                <FormItem label=\"Note:\" help=\"something\">\n                    <Input.TextArea placeholder=\"something\" name=\"baseRemark\" />\n                </FormItem>\n                <FormItem label=\"Agreement:\">\n                    <Checkbox name=\"baseAgreement\" defaultChecked>Agree</Checkbox>\n                </FormItem>\n                <FormItem label=\" \">\n                    <Form.Submit onClick={this.handleSubmit}>Confirm</Form.Submit>\n                </FormItem>\n            </Form>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/custom.en-us.md b/compiled_docs/form/demo/custom.en-us.md new file mode 100644 index 0000000000..acd30223f3 --- /dev/null +++ b/compiled_docs/form/demo/custom.en-us.md @@ -0,0 +1 @@ +{"title":"Custom Layout","meta":{"title":"Custom Layout","description":"\n

Label Position: top / left

\n

With Row Col control the layout of the elements within the form (Note: FormItem is not Form direct child elements can not directly set the layout on the Form)

\n","order":"6"},"codes":{"jsx":"import { Form, Input, Switch, Grid, Button, Icon, Balloon } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst {Row, Col} = Grid;\n\nconst style = {\n padding: '20px',\n background: '#F7F8FA',\n margin: '20px'\n};\nconst formItemLayout = {\n labelCol: {fixedSpan: 4}\n};\nconst label = (\nname：} closable={false}>blablablablablablablabla\n);\n\nclass Demo extends React.Component {\n state = {\n labelAlign: 'top'\n }\n handleChange = (v) => {\n this.setState({\n labelAlign: v ? 'left' : 'top'\n });\n }\n render() {\n const labelAlign = this.state.labelAlign;\n\n return (\n
\n

Label Position

\n \n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Form, Input, Switch, Grid, Button, Icon, Balloon } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst {Row, Col} = Grid;\n\nconst style = {\n padding: '20px',\n background: '#F7F8FA',\n margin: '20px'\n};\nconst formItemLayout = {\n labelCol: {fixedSpan: 4}\n};\nconst label = (\nname：} closable={false}>blablablablablablablabla\n);\n\nclass Demo extends React.Component {\n state = {\n labelAlign: 'top'\n }\n handleChange = (v) => {\n this.setState({\n labelAlign: v ? 'left' : 'top'\n });\n }\n render() {\n const labelAlign = this.state.labelAlign;\n\n return (\n
\n

Label Position

\n \n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Form, Input, Switch, Grid, Button, Icon, Balloon } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst {Row, Col} = Grid;\n\nconst style = {\n    padding: '20px',\n    background: '#F7F8FA',\n    margin: '20px'\n};\nconst formItemLayout = {\n    labelCol: {fixedSpan: 4}\n};\nconst label = (<span>\nname：<Balloon type=\"primary\" trigger={<Icon type=\"prompt\" size=\"small\" />} closable={false}>blablablablablablablabla</Balloon>\n</span>);\n\nclass Demo extends React.Component {\n    state = {\n        labelAlign: 'top'\n    }\n    handleChange = (v) => {\n        this.setState({\n            labelAlign: v ? 'left' : 'top'\n        });\n    }\n    render() {\n        const labelAlign = this.state.labelAlign;\n\n        return (\n            <div>\n                <h3>Label Position</h3>\n                <Switch checkedChildren=\"left\" unCheckedChildren=\"top\" checked={this.state.labelAlign === 'left'} onChange={this.handleChange} />\n\n                <Form style={style}>\n                    <Row gutter=\"4\">\n                        <Col>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label={label}\n                                required\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label=\"Long search name:\"\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label=\"Search name:\"\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                        </Col>\n                        <Col>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label=\"Search name:\"\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label=\"Long search name:\"\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label=\"Search name:\"\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                        </Col>\n                        <Col>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label=\"Search name:\"\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label=\"Long search name:\"\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label=\"Search name:\"\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                        </Col>\n                    </Row>\n                    <Row>\n                        <Col style={{ textAlign: 'right' }}>\n                            <Button type=\"primary\" style={{ marginRight: '5px' }}>Search</Button>\n                            <Button >Clear All</Button>\n                        </Col>\n                    </Row>\n                </Form>\n\n\n                <Form style={style}>\n                    <Row gutter=\"4\">\n                        <Col>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label={label}\n                                required\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                        </Col>\n                        <Col>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label=\"Long search name:\"\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                        </Col>\n                        <Col>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label=\"Search name:\"\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                        </Col>\n                        <Col>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label=\"Search name:\"\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                        </Col>\n                        <Col>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label=\"Search name:\"\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                        </Col>\n                    </Row>\n                    <Row>\n                        <Col style={{ textAlign: 'right' }}>\n                            <Button type=\"primary\" style={{ marginRight: '5px' }}>Search</Button>\n                            <Button >Clear All</Button>\n                        </Col>\n                    </Row>\n                </Form>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/custom.md b/compiled_docs/form/demo/custom.md new file mode 100644 index 0000000000..cc1b7162d4 --- /dev/null +++ b/compiled_docs/form/demo/custom.md @@ -0,0 +1 @@ +{"title":"自定义布局","meta":{"title":"自定义布局","description":"\n

标签位置：上、左

\n

配合 Row Col 控制表单内元素布局 (注意：FormItem非Form直接子元素需要不能直接直接在Form上设置布局)

\n","order":"6"},"codes":{"jsx":"import { Form, Input, Switch, Grid, Button, Icon, Balloon } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst {Row, Col} = Grid;\n\nconst style = {\n padding: '20px',\n background: '#F7F8FA',\n margin: '20px'\n};\nconst formItemLayout = {\n labelCol: {fixedSpan: 4}\n};\nconst label = (\nname：} closable={false}>blablablablablablablabla\n);\n\nclass Demo extends React.Component {\n state = {\n labelAlign: 'top'\n }\n handleChange = (v) => {\n this.setState({\n labelAlign: v ? 'left' : 'top'\n });\n }\n render() {\n const labelAlign = this.state.labelAlign;\n\n return (\n
\n

Label Position

\n \n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Form, Input, Switch, Grid, Button, Icon, Balloon } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst {Row, Col} = Grid;\n\nconst style = {\n padding: '20px',\n background: '#F7F8FA',\n margin: '20px'\n};\nconst formItemLayout = {\n labelCol: {fixedSpan: 4}\n};\nconst label = (\nname：} closable={false}>blablablablablablablabla\n);\n\nclass Demo extends React.Component {\n state = {\n labelAlign: 'top'\n }\n handleChange = (v) => {\n this.setState({\n labelAlign: v ? 'left' : 'top'\n });\n }\n render() {\n const labelAlign = this.state.labelAlign;\n\n return (\n
\n

Label Position

\n \n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Form, Input, Switch, Grid, Button, Icon, Balloon } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst {Row, Col} = Grid;\n\nconst style = {\n    padding: '20px',\n    background: '#F7F8FA',\n    margin: '20px'\n};\nconst formItemLayout = {\n    labelCol: {fixedSpan: 4}\n};\nconst label = (<span>\nname：<Balloon type=\"primary\" trigger={<Icon type=\"prompt\" size=\"small\" />} closable={false}>blablablablablablablabla</Balloon>\n</span>);\n\nclass Demo extends React.Component {\n    state = {\n        labelAlign: 'top'\n    }\n    handleChange = (v) => {\n        this.setState({\n            labelAlign: v ? 'left' : 'top'\n        });\n    }\n    render() {\n        const labelAlign = this.state.labelAlign;\n\n        return (\n            <div>\n                <h3>Label Position</h3>\n                <Switch checkedChildren=\"left\" unCheckedChildren=\"top\" checked={this.state.labelAlign === 'left'} onChange={this.handleChange} />\n\n                <Form style={style}>\n                    <Row gutter=\"4\">\n                        <Col>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label={label}\n                                required\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label=\"Long search name:\"\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label=\"Search name:\"\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                        </Col>\n                        <Col>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label=\"Search name:\"\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label=\"Long search name:\"\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label=\"Search name:\"\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                        </Col>\n                        <Col>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label=\"Search name:\"\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label=\"Long search name:\"\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label=\"Search name:\"\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                        </Col>\n                    </Row>\n                    <Row>\n                        <Col style={{ textAlign: 'right' }}>\n                            <Button type=\"primary\" style={{ marginRight: '5px' }}>Search</Button>\n                            <Button >Clear All</Button>\n                        </Col>\n                    </Row>\n                </Form>\n\n\n                <Form style={style}>\n                    <Row gutter=\"4\">\n                        <Col>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label={label}\n                                required\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                        </Col>\n                        <Col>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label=\"Long search name:\"\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                        </Col>\n                        <Col>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label=\"Search name:\"\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                        </Col>\n                        <Col>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label=\"Search name:\"\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                        </Col>\n                        <Col>\n                            <FormItem {...formItemLayout} labelAlign={labelAlign}\n                                label=\"Search name:\"\n                            >\n                                <Input placeholder=\"Enter a search name:\"/>\n                            </FormItem>\n                        </Col>\n                    </Row>\n                    <Row>\n                        <Col style={{ textAlign: 'right' }}>\n                            <Button type=\"primary\" style={{ marginRight: '5px' }}>Search</Button>\n                            <Button >Clear All</Button>\n                        </Col>\n                    </Row>\n                </Form>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/field.en-us.md b/compiled_docs/form/demo/field.en-us.md new file mode 100644 index 0000000000..8a2ef9426e --- /dev/null +++ b/compiled_docs/form/demo/field.en-us.md @@ -0,0 +1 @@ +{"title":"use Field","meta":{"title":"use Field","description":"\n

Complex functions can be realized with Field

\n","order":"10"},"codes":{"jsx":"import { Form, Input, Radio, Field, Button } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst RadioGroup = Radio.Group;\n\nconst formItemLayout = {\n labelCol: {\n span: 6\n },\n wrapperCol: {\n span: 14\n }\n};\n\nclass BasicDemo extends React.Component {\n field = new Field(this);\n\n userExists(rule, value) {\n return new Promise((resolve, reject) => {\n if (!value) {\n resolve();\n } else {\n setTimeout(() => {\n if (value === 'frank') {\n reject([new Error('Sorry, this username is already occupied.')]);\n } else {\n resolve();\n }\n }, 500);\n }\n });\n }\n\n checkPass(rule, value, callback) {\n const { validate } = this.field;\n if (value) {\n validate(['rePasswd']);\n }\n callback();\n }\n\n checkPass2(rule, value, callback) {\n const { getValue } = this.field;\n if (value && value !== getValue('passwd')) {\n return callback('Inconsistent password input twice!');\n } else {\n return callback();\n }\n }\n\n validate = () => {\n this.field.validate(['sex']);\n }\n\n render() {\n const {getState, getValue, getError} = this.field;\n\n return (\n
\n \n \n

Hello {getValue('username')}

\n \n\n \n \n \n\n \n \n \n\n \n \n Male\n Female\n \n \n\n \n \n console.log(v, e)} style={{margin: '0 10px'}}>Submit\n Reset\n \n \n );\n }\n}\n\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Form, Input, Radio, Field, Button } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst RadioGroup = Radio.Group;\n\nconst formItemLayout = {\n labelCol: {\n span: 6\n },\n wrapperCol: {\n span: 14\n }\n};\n\nclass BasicDemo extends React.Component {\n field = new Field(this);\n\n userExists(rule, value) {\n return new Promise((resolve, reject) => {\n if (!value) {\n resolve();\n } else {\n setTimeout(() => {\n if (value === 'frank') {\n reject([new Error('Sorry, this username is already occupied.')]);\n } else {\n resolve();\n }\n }, 500);\n }\n });\n }\n\n checkPass(rule, value, callback) {\n const { validate } = this.field;\n if (value) {\n validate(['rePasswd']);\n }\n callback();\n }\n\n checkPass2(rule, value, callback) {\n const { getValue } = this.field;\n if (value && value !== getValue('passwd')) {\n return callback('Inconsistent password input twice!');\n } else {\n return callback();\n }\n }\n\n validate = () => {\n this.field.validate(['sex']);\n }\n\n render() {\n const {getState, getValue, getError} = this.field;\n\n return (\n
\n \n \n

Hello {getValue('username')}

\n \n\n \n \n \n\n \n \n \n\n \n \n Male\n Female\n \n \n\n \n \n console.log(v, e)} style={{margin: '0 10px'}}>Submit\n Reset\n \n \n );\n }\n}\n\n\nReactDOM.render(, mountNode);\n````","html":"
import { Form, Input, Radio, Field, Button } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst RadioGroup = Radio.Group;\n\nconst formItemLayout = {\n    labelCol: {\n        span: 6\n    },\n    wrapperCol: {\n        span: 14\n    }\n};\n\nclass BasicDemo extends React.Component {\n    field = new Field(this);\n\n    userExists(rule, value) {\n        return new Promise((resolve, reject) => {\n            if (!value) {\n                resolve();\n            } else {\n                setTimeout(() => {\n                    if (value === 'frank') {\n                        reject([new Error('Sorry, this username is already occupied.')]);\n                    } else {\n                        resolve();\n                    }\n                }, 500);\n            }\n        });\n    }\n\n    checkPass(rule, value, callback) {\n        const { validate } = this.field;\n        if (value) {\n            validate(['rePasswd']);\n        }\n        callback();\n    }\n\n    checkPass2(rule, value, callback) {\n        const { getValue } = this.field;\n        if (value && value !== getValue('passwd')) {\n            return callback('Inconsistent password input twice!');\n        } else {\n            return callback();\n        }\n    }\n\n    validate = () => {\n        this.field.validate(['sex']);\n    }\n\n    render() {\n        const {getState, getValue, getError} = this.field;\n\n        return (\n            <Form {...formItemLayout} field={this.field}>\n                <FormItem\n                    label=\"Username:\"\n                    hasFeedback\n                    required\n                    validator={this.userExists.bind(this)}\n                    help={getState('username') === 'loading' ? 'Checking ...' : getError('username')}\n                >\n                    <Input placeholder=\"Input frank\" name=\"username\" />\n                    <p>Hello {getValue('username')}</p>\n                </FormItem>\n\n                <FormItem\n                    label=\"Password:\"\n                    hasFeedback\n                    required\n                    requiredMessage=\"Please enter password\"\n                    validator={this.checkPass.bind(this)}\n                >\n                    <Input htmlType=\"password\" name=\"passwd\" />\n                </FormItem>\n\n                <FormItem\n                    label=\"Check your password:\"\n                    hasFeedback\n                    required\n                    requiredMessage=\"Enter your password again\"\n                    validator={this.checkPass2.bind(this)}\n                >\n                    <Input htmlType=\"password\" placeholder=\"Enter the same password twice\" name=\"rePasswd\" />\n                </FormItem>\n\n                <FormItem\n                    label=\"Gender:\"\n                    hasFeedback\n                    required\n                    requiredMessage=\"Please select your gender\"\n                >\n                    <RadioGroup name=\"sex\" >\n                        <Radio value=\"male\">Male</Radio>\n                        <Radio value=\"female\">Female</Radio>\n                    </RadioGroup>\n                </FormItem>\n\n                <FormItem wrapperCol={{ offset: 6 }} >\n                    <Button onClick={this.validate}>Validate by Field</Button>\n                    <Form.Submit validate type=\"primary\" onClick={(v, e) => console.log(v, e)} style={{margin: '0 10px'}}>Submit</Form.Submit>\n                    <Form.Reset >Reset</Form.Reset>\n                </FormItem>\n            </Form>\n        );\n    }\n}\n\n\nReactDOM.render(<BasicDemo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/field.md b/compiled_docs/form/demo/field.md new file mode 100644 index 0000000000..1dd1f84018 --- /dev/null +++ b/compiled_docs/form/demo/field.md @@ -0,0 +1 @@ +{"title":"复杂功能(Field)","meta":{"title":"复杂功能(Field)","description":"\n

配合 Field 可以实现较复杂功能

\n","order":"10"},"codes":{"jsx":"import { Form, Input, Radio, Field, Button } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst RadioGroup = Radio.Group;\n\nconst formItemLayout = {\n labelCol: {\n span: 6\n },\n wrapperCol: {\n span: 14\n }\n};\n\nclass BasicDemo extends React.Component {\n field = new Field(this);\n\n userExists(rule, value) {\n return new Promise((resolve, reject) => {\n if (!value) {\n resolve();\n } else {\n setTimeout(() => {\n if (value === 'frank') {\n reject([new Error('Sorry, this username is already occupied.')]);\n } else {\n resolve();\n }\n }, 500);\n }\n });\n }\n\n checkPass(rule, value, callback) {\n const { validate } = this.field;\n if (value) {\n validate(['rePasswd']);\n }\n callback();\n }\n\n checkPass2(rule, value, callback) {\n const { getValue } = this.field;\n if (value && value !== getValue('passwd')) {\n return callback('Inconsistent password input twice!');\n } else {\n return callback();\n }\n }\n\n validate = () => {\n this.field.validate(['sex']);\n }\n\n render() {\n const {getState, getValue, getError} = this.field;\n\n return (\n
\n \n \n

Hello {getValue('username')}

\n \n\n \n \n \n\n \n \n \n\n \n \n Male\n Female\n \n \n\n \n \n console.log(v, e)} style={{margin: '0 10px'}}>Submit\n Reset\n \n \n );\n }\n}\n\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Form, Input, Radio, Field, Button } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst RadioGroup = Radio.Group;\n\nconst formItemLayout = {\n labelCol: {\n span: 6\n },\n wrapperCol: {\n span: 14\n }\n};\n\nclass BasicDemo extends React.Component {\n field = new Field(this);\n\n userExists(rule, value) {\n return new Promise((resolve, reject) => {\n if (!value) {\n resolve();\n } else {\n setTimeout(() => {\n if (value === 'frank') {\n reject([new Error('Sorry, this username is already occupied.')]);\n } else {\n resolve();\n }\n }, 500);\n }\n });\n }\n\n checkPass(rule, value, callback) {\n const { validate } = this.field;\n if (value) {\n validate(['rePasswd']);\n }\n callback();\n }\n\n checkPass2(rule, value, callback) {\n const { getValue } = this.field;\n if (value && value !== getValue('passwd')) {\n return callback('Inconsistent password input twice!');\n } else {\n return callback();\n }\n }\n\n validate = () => {\n this.field.validate(['sex']);\n }\n\n render() {\n const {getState, getValue, getError} = this.field;\n\n return (\n
\n \n \n

Hello {getValue('username')}

\n \n\n \n \n \n\n \n \n \n\n \n \n Male\n Female\n \n \n\n \n \n console.log(v, e)} style={{margin: '0 10px'}}>Submit\n Reset\n \n \n );\n }\n}\n\n\nReactDOM.render(, mountNode);\n````","html":"
import { Form, Input, Radio, Field, Button } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst RadioGroup = Radio.Group;\n\nconst formItemLayout = {\n    labelCol: {\n        span: 6\n    },\n    wrapperCol: {\n        span: 14\n    }\n};\n\nclass BasicDemo extends React.Component {\n    field = new Field(this);\n\n    userExists(rule, value) {\n        return new Promise((resolve, reject) => {\n            if (!value) {\n                resolve();\n            } else {\n                setTimeout(() => {\n                    if (value === 'frank') {\n                        reject([new Error('Sorry, this username is already occupied.')]);\n                    } else {\n                        resolve();\n                    }\n                }, 500);\n            }\n        });\n    }\n\n    checkPass(rule, value, callback) {\n        const { validate } = this.field;\n        if (value) {\n            validate(['rePasswd']);\n        }\n        callback();\n    }\n\n    checkPass2(rule, value, callback) {\n        const { getValue } = this.field;\n        if (value && value !== getValue('passwd')) {\n            return callback('Inconsistent password input twice!');\n        } else {\n            return callback();\n        }\n    }\n\n    validate = () => {\n        this.field.validate(['sex']);\n    }\n\n    render() {\n        const {getState, getValue, getError} = this.field;\n\n        return (\n            <Form {...formItemLayout} field={this.field}>\n                <FormItem\n                    label=\"Username:\"\n                    hasFeedback\n                    required\n                    validator={this.userExists.bind(this)}\n                    help={getState('username') === 'loading' ? 'Checking ...' : getError('username')}\n                >\n                    <Input placeholder=\"Input frank\" name=\"username\" />\n                    <p>Hello {getValue('username')}</p>\n                </FormItem>\n\n                <FormItem\n                    label=\"Password:\"\n                    hasFeedback\n                    required\n                    requiredMessage=\"Please enter password\"\n                    validator={this.checkPass.bind(this)}\n                >\n                    <Input htmlType=\"password\" name=\"passwd\" />\n                </FormItem>\n\n                <FormItem\n                    label=\"Check your password:\"\n                    hasFeedback\n                    required\n                    requiredMessage=\"Enter your password again\"\n                    validator={this.checkPass2.bind(this)}\n                >\n                    <Input htmlType=\"password\" placeholder=\"Enter the same password twice\" name=\"rePasswd\" />\n                </FormItem>\n\n                <FormItem\n                    label=\"Gender:\"\n                    hasFeedback\n                    required\n                    requiredMessage=\"Please select your gender\"\n                >\n                    <RadioGroup name=\"sex\" >\n                        <Radio value=\"male\">Male</Radio>\n                        <Radio value=\"female\">Female</Radio>\n                    </RadioGroup>\n                </FormItem>\n\n                <FormItem wrapperCol={{ offset: 6 }} >\n                    <Button onClick={this.validate}>Validate by Field</Button>\n                    <Form.Submit validate type=\"primary\" onClick={(v, e) => console.log(v, e)} style={{margin: '0 10px'}}>Submit</Form.Submit>\n                    <Form.Reset >Reset</Form.Reset>\n                </FormItem>\n            </Form>\n        );\n    }\n}\n\n\nReactDOM.render(<BasicDemo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/inline.en-us.md b/compiled_docs/form/demo/inline.en-us.md new file mode 100644 index 0000000000..637d4be529 --- /dev/null +++ b/compiled_docs/form/demo/inline.en-us.md @@ -0,0 +1 @@ +{"title":"Horizontal","meta":{"title":"Horizontal","description":"\n","order":"1"},"codes":{"jsx":"import { Form, Input } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nfunction handleSubmit(v) {\n console.log(v);\n}\n\nReactDOM.render(
\n
\n \n \n \n \n \n \n \n \n \n \n \n\n \n Submit\n \n
\n
, mountNode);\n"},"body":"\n````jsx\nimport { Form, Input } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nfunction handleSubmit(v) {\n console.log(v);\n}\n\nReactDOM.render(
\n
\n \n \n \n \n \n \n \n \n \n \n \n\n \n Submit\n \n
\n
, mountNode);\n````","html":"
import { Form, Input } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nfunction handleSubmit(v) {\n    console.log(v);\n}\n\nReactDOM.render(<div>\n    <Form inline>\n        <FormItem label=\"Username:\">\n            <FormItem >\n                <Input name=\"first\" style={{width: 80}} placeholder=\"first\"/>\n            </FormItem>\n            <FormItem >\n                <Input name=\"second\" style={{width: 80}} placeholder=\"second\"/>\n            </FormItem>\n        </FormItem>\n        <FormItem label=\"Password:\" required hasFeedback={false}>\n            <Input htmlType=\"password\" name=\"inlinePass\" placeholder=\"Please enter your password!\"/>\n        </FormItem>\n\n        <FormItem label=\" \">\n            <Form.Submit onClick={handleSubmit}>Submit</Form.Submit>\n        </FormItem>\n    </Form>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/inline.md b/compiled_docs/form/demo/inline.md new file mode 100644 index 0000000000..ad92e2ef56 --- /dev/null +++ b/compiled_docs/form/demo/inline.md @@ -0,0 +1 @@ +{"title":"水平","meta":{"title":"水平","description":"\n","order":"1"},"codes":{"jsx":"import { Form, Input } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nfunction handleSubmit(v) {\n console.log(v);\n}\n\nReactDOM.render(
\n
\n \n \n \n \n \n \n \n \n \n \n \n\n \n Submit\n \n
\n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Form, Input } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nfunction handleSubmit(v) {\n console.log(v);\n}\n\nReactDOM.render(
\n
\n \n \n \n \n \n \n \n \n \n \n \n\n \n Submit\n \n
\n
, mountNode);\n````","html":"
import { Form, Input } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nfunction handleSubmit(v) {\n    console.log(v);\n}\n\nReactDOM.render(<div>\n    <Form inline>\n        <FormItem label=\"Username:\">\n            <FormItem >\n                <Input name=\"first\" style={{width: 80}} placeholder=\"first\"/>\n            </FormItem>\n            <FormItem >\n                <Input name=\"second\" style={{width: 80}} placeholder=\"second\"/>\n            </FormItem>\n        </FormItem>\n        <FormItem label=\"Password:\" required hasFeedback={false}>\n            <Input htmlType=\"password\" name=\"inlinePass\" placeholder=\"Please enter your password!\"/>\n        </FormItem>\n\n        <FormItem label=\" \">\n            <Form.Submit onClick={handleSubmit}>Submit</Form.Submit>\n        </FormItem>\n    </Form>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/inset.en-us.md b/compiled_docs/form/demo/inset.en-us.md new file mode 100644 index 0000000000..82afb32b05 --- /dev/null +++ b/compiled_docs/form/demo/inset.en-us.md @@ -0,0 +1 @@ +{"title":"Inset Label","meta":{"title":"Inset Label","description":"\n

By setting labelAlign="inset" (only applicable to Input, Select components, other components do not apply)

\n","order":"4"},"codes":{"jsx":"import { Form, Input, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst Option = Select.Option;\n\nconst formItemLayout = {\n labelCol: {fixedSpan: 4},\n wrapperCol: {span: 20}\n};\n\nReactDOM.render(
\n\n
\n \n \n \n \n \n \n\n \n \n \n
\n\n

\n\n
\n \n \n \n \n \n \n\n \n \n \n
\n
, mountNode);\n"},"body":"\n````jsx\nimport { Form, Input, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst Option = Select.Option;\n\nconst formItemLayout = {\n labelCol: {fixedSpan: 4},\n wrapperCol: {span: 20}\n};\n\nReactDOM.render(
\n\n
\n \n \n \n \n \n \n\n \n \n \n
\n\n

\n\n
\n \n \n \n \n \n \n\n \n \n \n
\n
, mountNode);\n````","html":"
import { Form, Input, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst Option = Select.Option;\n\nconst formItemLayout = {\n    labelCol: {fixedSpan: 4},\n    wrapperCol: {span: 20}\n};\n\nReactDOM.render(<div>\n\n    <Form {...formItemLayout} labelAlign=\"inset\" style={{maxWidth: '500px'}}>\n        <FormItem label=\"User Name:\">\n            <Input placeholder=\"Please enter your name\" id=\"insetUserName\" name=\"insetUserName\"/>\n        </FormItem>\n        <FormItem label=\"Password:\" validateState=\"error\">\n            <Input htmlType=\"password\" placeholder=\"Please enter your password\" id=\"insetPassword\" name=\"insetPassword\"/>\n        </FormItem>\n\n        <FormItem label=\"Size：\">\n            <Select style={{width: '100%'}}>\n                <Option value=\"small\">small</Option>\n                <Option value=\"medium\">medium</Option>\n                <Option value=\"large\">large</Option>\n            </Select>\n        </FormItem>\n    </Form>\n\n    <br/><br/>\n\n    <Form labelAlign=\"inset\" inline>\n        <FormItem label=\"User Name:\">\n            <Input placeholder=\"Enter your name\" id=\"insetUserName2\" name=\"insetUserName2\"/>\n        </FormItem>\n        <FormItem label=\"Password:\" validateState=\"error\" help=\"Password is required!\">\n            <Input htmlType=\"password\" placeholder=\"Enter your password\" id=\"insetPassword2\" name=\"insetPassword2\"/>\n        </FormItem>\n\n        <FormItem label=\"Size:\">\n            <Select style={{width: 150}}>\n                <Option value=\"small\">small</Option>\n                <Option value=\"medium\">medium</Option>\n                <Option value=\"large\">large</Option>\n            </Select>\n        </FormItem>\n    </Form>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/inset.md b/compiled_docs/form/demo/inset.md new file mode 100644 index 0000000000..bf5c4f7ebb --- /dev/null +++ b/compiled_docs/form/demo/inset.md @@ -0,0 +1 @@ +{"title":"标签内嵌","meta":{"title":"标签内嵌","description":"\n

通过设置labelAlign="inset" (只适用于Input、Select组件，其他组件不适用)

\n","order":"4"},"codes":{"jsx":"import { Form, Input, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst Option = Select.Option;\n\nconst formItemLayout = {\n labelCol: {fixedSpan: 4},\n wrapperCol: {span: 20}\n};\n\nReactDOM.render(
\n\n
\n \n \n \n \n \n \n\n \n \n \n
\n\n

\n\n
\n \n \n \n \n \n \n\n \n \n \n
\n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Form, Input, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst Option = Select.Option;\n\nconst formItemLayout = {\n labelCol: {fixedSpan: 4},\n wrapperCol: {span: 20}\n};\n\nReactDOM.render(
\n\n
\n \n \n \n \n \n \n\n \n \n \n
\n\n

\n\n
\n \n \n \n \n \n \n\n \n \n \n
\n
, mountNode);\n````","html":"
import { Form, Input, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst Option = Select.Option;\n\nconst formItemLayout = {\n    labelCol: {fixedSpan: 4},\n    wrapperCol: {span: 20}\n};\n\nReactDOM.render(<div>\n\n    <Form {...formItemLayout} labelAlign=\"inset\" style={{maxWidth: '500px'}}>\n        <FormItem label=\"User Name:\">\n            <Input placeholder=\"Please enter your name\" id=\"insetUserName\" name=\"insetUserName\"/>\n        </FormItem>\n        <FormItem label=\"Password:\" validateState=\"error\">\n            <Input htmlType=\"password\" placeholder=\"Please enter your password\" id=\"insetPassword\" name=\"insetPassword\"/>\n        </FormItem>\n\n        <FormItem label=\"Size：\">\n            <Select style={{width: '100%'}}>\n                <Option value=\"small\">small</Option>\n                <Option value=\"medium\">medium</Option>\n                <Option value=\"large\">large</Option>\n            </Select>\n        </FormItem>\n    </Form>\n\n    <br/><br/>\n\n    <Form labelAlign=\"inset\" inline>\n        <FormItem label=\"User Name:\">\n            <Input placeholder=\"Enter your name\" id=\"insetUserName2\" name=\"insetUserName2\"/>\n        </FormItem>\n        <FormItem label=\"Password:\" validateState=\"error\" help=\"Password is required!\">\n            <Input htmlType=\"password\" placeholder=\"Enter your password\" id=\"insetPassword2\" name=\"insetPassword2\"/>\n        </FormItem>\n\n        <FormItem label=\"Size:\">\n            <Select style={{width: 150}}>\n                <Option value=\"small\">small</Option>\n                <Option value=\"medium\">medium</Option>\n                <Option value=\"large\">large</Option>\n            </Select>\n        </FormItem>\n    </Form>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/mix.en-us.md b/compiled_docs/form/demo/mix.en-us.md new file mode 100644 index 0000000000..74bef7f149 --- /dev/null +++ b/compiled_docs/form/demo/mix.en-us.md @@ -0,0 +1 @@ +{"title":"Combination of Form-Component","meta":{"title":"Combination of Form-Component","description":"\n

Display other components related to the Form.

\n","order":"11"},"codes":{"jsx":"import { Form, Input, Button, Checkbox, Radio, Select, Range, Balloon, DatePicker, TimePicker, NumberPicker, Field, Switch, Upload, Grid } from '@alifd/next';\n\n\n\nconst FormItem = Form.Item;\nconst Option = Select.Option;\nconst RangePicker = DatePicker.RangePicker;\nconst {Row, Col} = Grid;\n\nconst formItemLayout = {\n labelCol: {span: 6},\n wrapperCol: {span: 14}\n};\n\nclass Demo extends React.Component {\n field = new Field(this);\n\n handleSubmit(value) {\n console.log('Form values：', value);\n }\n\n render() {\n const init = this.field.init;\n\n return (\n
\n \n

The quick brown fox jumps over the lazy dog.

\n

Link

\n \n\n \n } align=\"r\" closable={false} triggerType=\"hover\">\n input password\n \n \n\n \n \n Something in here\n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n option 1 \n option 2 \n option 3（disabled）\n \n \n\n \n \n apple\n banana\n cherry（disabled）\n \n \n\n \n \n \n \n \n \n \n Submit\n \n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Form, Input, Button, Checkbox, Radio, Select, Range, Balloon, DatePicker, TimePicker, NumberPicker, Field, Switch, Upload, Grid } from '@alifd/next';\n\n\n\nconst FormItem = Form.Item;\nconst Option = Select.Option;\nconst RangePicker = DatePicker.RangePicker;\nconst {Row, Col} = Grid;\n\nconst formItemLayout = {\n labelCol: {span: 6},\n wrapperCol: {span: 14}\n};\n\nclass Demo extends React.Component {\n field = new Field(this);\n\n handleSubmit(value) {\n console.log('Form values：', value);\n }\n\n render() {\n const init = this.field.init;\n\n return (\n
\n \n

The quick brown fox jumps over the lazy dog.

\n

Link

\n \n\n \n } align=\"r\" closable={false} triggerType=\"hover\">\n input password\n \n \n\n \n \n Something in here\n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n option 1 \n option 2 \n option 3（disabled）\n \n \n\n \n \n apple\n banana\n cherry（disabled）\n \n \n\n \n \n \n \n \n \n \n Submit\n \n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Form, Input, Button, Checkbox, Radio, Select, Range, Balloon, DatePicker, TimePicker, NumberPicker, Field, Switch, Upload, Grid } from '@alifd/next';\n\n\n\nconst FormItem = Form.Item;\nconst Option = Select.Option;\nconst RangePicker = DatePicker.RangePicker;\nconst {Row, Col} = Grid;\n\nconst formItemLayout = {\n    labelCol: {span: 6},\n    wrapperCol: {span: 14}\n};\n\nclass Demo extends React.Component {\n    field = new Field(this);\n\n    handleSubmit(value) {\n        console.log('Form values：', value);\n    }\n\n    render() {\n        const init = this.field.init;\n\n        return (\n            <Form {...formItemLayout} field={this.field}>\n                <FormItem label=\"I'm the title：\">\n                    <p className=\"next-form-text-align\">The quick brown fox jumps over the lazy dog.</p>\n                    <p ><a href=\"#\">Link</a></p>\n                </FormItem>\n\n                <FormItem label=\"Password:\">\n                    <Balloon trigger={<Input htmlType=\"password\" {...init('pass')} />} align=\"r\" closable={false} triggerType=\"hover\">\n                        input password\n                    </Balloon>\n                </FormItem>\n\n                <FormItem label=\"NumberPicker:\">\n                    <NumberPicker min={1} max={10} name=\"numberPicker\" defaultValue={3} />\n                    <span>Something in here</span>\n                </FormItem>\n\n                <FormItem\n                    label=\"Switch:\"\n                    required>\n                    <Switch name=\"switch\" defaultChecked />\n                </FormItem>\n\n                <FormItem label=\"Range:\" required>\n                    <Range defaultValue={30} scales={[0, 100]} marks={[0, 100]} name=\"range\" />\n                </FormItem>\n\n                <FormItem label=\"Select:\" required>\n                    <Select style={{width: 200}} name=\"select\">\n                        <Option value=\"jack\">jack</Option>\n                        <Option value=\"lucy\">lucy</Option>\n                        <Option value=\"disabled\" disabled>disabled</Option>\n                        <Option value=\"hugohua\">hugohua</Option>\n                    </Select>\n                </FormItem>\n\n                <FormItem\n                    label=\"DatePicker:\"\n                    labelCol={{span: 6}}\n                    required>\n                    <Row>\n                        <FormItem style={{marginRight: 10, marginBottom: 0}}><DatePicker name=\"startDate\"/></FormItem>\n                        <FormItem style={{marginBottom: 0}}><DatePicker name=\"endDate\" /></FormItem>\n                    </Row>\n                </FormItem>\n\n                <FormItem\n                    label=\"RangePicker:\"\n                    labelCol={{span: 6}}\n                    required>\n                    <RangePicker name=\"rangeDate\"/>\n                </FormItem>\n\n                <FormItem\n                    label=\"TimePicker:\"\n                    required>\n                    <TimePicker name=\"time\" />\n                </FormItem>\n\n                <FormItem\n                    label=\"Checkbox:\">\n                    <Checkbox.Group name=\"checkbox\">\n                        <Checkbox value=\"a\">option 1 </Checkbox>\n                        <Checkbox value=\"b\">option 2 </Checkbox>\n                        <Checkbox disabled value=\"c\">option 3（disabled）</Checkbox>\n                    </Checkbox.Group>\n                </FormItem>\n\n                <FormItem\n                    label=\"Radio:\">\n                    <Radio.Group name=\"radio\">\n                        <Radio value=\"apple\">apple</Radio>\n                        <Radio value=\"banana\">banana</Radio>\n                        <Radio disabled value=\"cherry\">cherry（disabled）</Radio>\n                    </Radio.Group>\n                </FormItem>\n\n                <FormItem\n                    label=\"Logo：\"\n                >\n                    <Upload action=\"/upload.do\" listType=\"text\" name=\"upload\" >\n                        <Button type=\"primary\" style={{margin: '0 0 10px'}}>Upload</Button>\n                    </Upload>\n                </FormItem>\n                <Row style={{marginTop: 24}}>\n                    <Col offset=\"6\">\n                        <Form.Submit type=\"primary\" onClick={this.handleSubmit.bind(this)}>Submit</Form.Submit>\n                    </Col>\n                </Row>\n            </Form>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/mix.md b/compiled_docs/form/demo/mix.md new file mode 100644 index 0000000000..5befcba7e5 --- /dev/null +++ b/compiled_docs/form/demo/mix.md @@ -0,0 +1 @@ +{"title":"表单组合","meta":{"title":"表单组合","description":"\n

展示和表单相关的其他组件。

\n","order":"11"},"codes":{"jsx":"import { Form, Input, Button, Checkbox, Radio, Select, Range, Balloon, DatePicker, TimePicker, NumberPicker, Field, Switch, Upload, Grid } from '@alifd/next';\n\n\n\nconst FormItem = Form.Item;\nconst Option = Select.Option;\nconst RangePicker = DatePicker.RangePicker;\nconst {Row, Col} = Grid;\n\nconst formItemLayout = {\n labelCol: {span: 6},\n wrapperCol: {span: 14}\n};\n\nclass Demo extends React.Component {\n field = new Field(this);\n\n handleSubmit(value) {\n console.log('Form values：', value);\n }\n\n render() {\n const init = this.field.init;\n\n return (\n
\n \n

The quick brown fox jumps over the lazy dog.

\n

Link

\n \n\n \n } align=\"r\" closable={false} triggerType=\"hover\">\n input password\n \n \n\n \n \n Something in here\n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n option 1 \n option 2 \n option 3（disabled）\n \n \n\n \n \n apple\n banana\n cherry（disabled）\n \n \n\n \n \n \n \n \n \n \n Submit\n \n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Form, Input, Button, Checkbox, Radio, Select, Range, Balloon, DatePicker, TimePicker, NumberPicker, Field, Switch, Upload, Grid } from '@alifd/next';\n\n\n\nconst FormItem = Form.Item;\nconst Option = Select.Option;\nconst RangePicker = DatePicker.RangePicker;\nconst {Row, Col} = Grid;\n\nconst formItemLayout = {\n labelCol: {span: 6},\n wrapperCol: {span: 14}\n};\n\nclass Demo extends React.Component {\n field = new Field(this);\n\n handleSubmit(value) {\n console.log('Form values：', value);\n }\n\n render() {\n const init = this.field.init;\n\n return (\n
\n \n

The quick brown fox jumps over the lazy dog.

\n

Link

\n \n\n \n } align=\"r\" closable={false} triggerType=\"hover\">\n input password\n \n \n\n \n \n Something in here\n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n option 1 \n option 2 \n option 3（disabled）\n \n \n\n \n \n apple\n banana\n cherry（disabled）\n \n \n\n \n \n \n \n \n \n \n Submit\n \n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Form, Input, Button, Checkbox, Radio, Select, Range, Balloon, DatePicker, TimePicker, NumberPicker, Field, Switch, Upload, Grid } from '@alifd/next';\n\n\n\nconst FormItem = Form.Item;\nconst Option = Select.Option;\nconst RangePicker = DatePicker.RangePicker;\nconst {Row, Col} = Grid;\n\nconst formItemLayout = {\n    labelCol: {span: 6},\n    wrapperCol: {span: 14}\n};\n\nclass Demo extends React.Component {\n    field = new Field(this);\n\n    handleSubmit(value) {\n        console.log('Form values：', value);\n    }\n\n    render() {\n        const init = this.field.init;\n\n        return (\n            <Form {...formItemLayout} field={this.field}>\n                <FormItem label=\"I'm the title：\">\n                    <p className=\"next-form-text-align\">The quick brown fox jumps over the lazy dog.</p>\n                    <p ><a href=\"#\">Link</a></p>\n                </FormItem>\n\n                <FormItem label=\"Password:\">\n                    <Balloon trigger={<Input htmlType=\"password\" {...init('pass')} />} align=\"r\" closable={false} triggerType=\"hover\">\n                        input password\n                    </Balloon>\n                </FormItem>\n\n                <FormItem label=\"NumberPicker:\">\n                    <NumberPicker min={1} max={10} name=\"numberPicker\" defaultValue={3} />\n                    <span>Something in here</span>\n                </FormItem>\n\n                <FormItem\n                    label=\"Switch:\"\n                    required>\n                    <Switch name=\"switch\" defaultChecked />\n                </FormItem>\n\n                <FormItem label=\"Range:\" required>\n                    <Range defaultValue={30} scales={[0, 100]} marks={[0, 100]} name=\"range\" />\n                </FormItem>\n\n                <FormItem label=\"Select:\" required>\n                    <Select style={{width: 200}} name=\"select\">\n                        <Option value=\"jack\">jack</Option>\n                        <Option value=\"lucy\">lucy</Option>\n                        <Option value=\"disabled\" disabled>disabled</Option>\n                        <Option value=\"hugohua\">hugohua</Option>\n                    </Select>\n                </FormItem>\n\n                <FormItem\n                    label=\"DatePicker:\"\n                    labelCol={{span: 6}}\n                    required>\n                    <Row>\n                        <FormItem style={{marginRight: 10, marginBottom: 0}}><DatePicker name=\"startDate\"/></FormItem>\n                        <FormItem style={{marginBottom: 0}}><DatePicker name=\"endDate\" /></FormItem>\n                    </Row>\n                </FormItem>\n\n                <FormItem\n                    label=\"RangePicker:\"\n                    labelCol={{span: 6}}\n                    required>\n                    <RangePicker name=\"rangeDate\"/>\n                </FormItem>\n\n                <FormItem\n                    label=\"TimePicker:\"\n                    required>\n                    <TimePicker name=\"time\" />\n                </FormItem>\n\n                <FormItem\n                    label=\"Checkbox:\">\n                    <Checkbox.Group name=\"checkbox\">\n                        <Checkbox value=\"a\">option 1 </Checkbox>\n                        <Checkbox value=\"b\">option 2 </Checkbox>\n                        <Checkbox disabled value=\"c\">option 3（disabled）</Checkbox>\n                    </Checkbox.Group>\n                </FormItem>\n\n                <FormItem\n                    label=\"Radio:\">\n                    <Radio.Group name=\"radio\">\n                        <Radio value=\"apple\">apple</Radio>\n                        <Radio value=\"banana\">banana</Radio>\n                        <Radio disabled value=\"cherry\">cherry（disabled）</Radio>\n                    </Radio.Group>\n                </FormItem>\n\n                <FormItem\n                    label=\"Logo：\"\n                >\n                    <Upload action=\"/upload.do\" listType=\"text\" name=\"upload\" >\n                        <Button type=\"primary\" style={{margin: '0 0 10px'}}>Upload</Button>\n                    </Upload>\n                </FormItem>\n                <Row style={{marginTop: 24}}>\n                    <Col offset=\"6\">\n                        <Form.Submit type=\"primary\" onClick={this.handleSubmit.bind(this)}>Submit</Form.Submit>\n                    </Col>\n                </Row>\n            </Form>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/nest.en-us.md b/compiled_docs/form/demo/nest.en-us.md new file mode 100644 index 0000000000..5eb8e1b2d1 --- /dev/null +++ b/compiled_docs/form/demo/nest.en-us.md @@ -0,0 +1 @@ +{"title":"Nest","meta":{"title":"Nest","description":"\n

FormItem Nest

\n","order":"5"},"codes":{"jsx":"import { Form, Input, Grid } from '@alifd/next';\n\n\n\nconst FormItem = Form.Item;\nconst {Row, Col} = Grid;\n\nconst formItemLayout = {\n labelCol: {span: 4},\n wrapperCol: {span: 14}\n};\n\nconst insetLayout = {\n labelCol: {fixedSpan: 3}\n};\n\nReactDOM.render(
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n console.log(v)}>Submit\n \n
, mountNode);\n"},"body":"\n````jsx\nimport { Form, Input, Grid } from '@alifd/next';\n\n\n\nconst FormItem = Form.Item;\nconst {Row, Col} = Grid;\n\nconst formItemLayout = {\n labelCol: {span: 4},\n wrapperCol: {span: 14}\n};\n\nconst insetLayout = {\n labelCol: {fixedSpan: 3}\n};\n\nReactDOM.render(
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n console.log(v)}>Submit\n \n
, mountNode);\n````","html":"
import { Form, Input, Grid } from '@alifd/next';\n\n\n\nconst FormItem = Form.Item;\nconst {Row, Col} = Grid;\n\nconst formItemLayout = {\n    labelCol: {span: 4},\n    wrapperCol: {span: 14}\n};\n\nconst insetLayout = {\n    labelCol: {fixedSpan: 3}\n};\n\nReactDOM.render(<Form {...formItemLayout}>\n    <FormItem id=\"control-input\" label=\"Input Something：\">\n        <Row gutter=\"4\">\n            <Col>\n                <FormItem label=\"Nest\" labelAlign=\"inset\" {...insetLayout} required requiredTrigger=\"onBlur\" asterisk={false}>\n                    <Input placeholder=\"Please enter...\" name=\"firstname\"/>\n                </FormItem>\n            </Col>\n            <Col>\n                <FormItem label=\"Nest\" labelAlign=\"inset\" {...insetLayout} required asterisk={false}>\n                    <Input placeholder=\"need onChange\" name=\"secondname\" />\n                </FormItem>\n            </Col>\n        </Row>\n    </FormItem>\n    <FormItem label=\"Bank Account：\" >\n        <Row gutter=\"4\">\n            <Col>\n                <FormItem required requiredTrigger=\"onBlur\">\n                    <Input name=\"A\"/>\n                </FormItem>\n            </Col>\n            <Col>\n                <FormItem required requiredTrigger=\"onBlur\">\n                    <Input name=\"B\"/>\n                </FormItem>\n            </Col>\n            <Col>\n                <FormItem required requiredTrigger=\"onBlur\">\n                    <Input name=\"C\"/>\n                </FormItem>\n            </Col>\n            <Col>\n                <FormItem required requiredTrigger=\"onBlur\">\n                    <Input name=\"D\"/>\n                </FormItem>\n            </Col>\n        </Row>\n    </FormItem>\n    <FormItem label=\" \">\n        <Form.Submit onClick={(v) => console.log(v)}>Submit</Form.Submit>\n    </FormItem>\n</Form>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/nest.md b/compiled_docs/form/demo/nest.md new file mode 100644 index 0000000000..bfda7f1a8f --- /dev/null +++ b/compiled_docs/form/demo/nest.md @@ -0,0 +1 @@ +{"title":"嵌套","meta":{"title":"嵌套","description":"\n

FormItem 嵌套

\n","order":"5"},"codes":{"jsx":"import { Form, Input, Grid } from '@alifd/next';\n\n\n\nconst FormItem = Form.Item;\nconst {Row, Col} = Grid;\n\nconst formItemLayout = {\n labelCol: {span: 4},\n wrapperCol: {span: 14}\n};\n\nconst insetLayout = {\n labelCol: {fixedSpan: 3}\n};\n\nReactDOM.render(
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n console.log(v)}>Submit\n \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Form, Input, Grid } from '@alifd/next';\n\n\n\nconst FormItem = Form.Item;\nconst {Row, Col} = Grid;\n\nconst formItemLayout = {\n labelCol: {span: 4},\n wrapperCol: {span: 14}\n};\n\nconst insetLayout = {\n labelCol: {fixedSpan: 3}\n};\n\nReactDOM.render(
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n console.log(v)}>Submit\n \n
, mountNode);\n````","html":"
import { Form, Input, Grid } from '@alifd/next';\n\n\n\nconst FormItem = Form.Item;\nconst {Row, Col} = Grid;\n\nconst formItemLayout = {\n    labelCol: {span: 4},\n    wrapperCol: {span: 14}\n};\n\nconst insetLayout = {\n    labelCol: {fixedSpan: 3}\n};\n\nReactDOM.render(<Form {...formItemLayout}>\n    <FormItem id=\"control-input\" label=\"Input Something：\">\n        <Row gutter=\"4\">\n            <Col>\n                <FormItem label=\"Nest\" labelAlign=\"inset\" {...insetLayout} required requiredTrigger=\"onBlur\" asterisk={false}>\n                    <Input placeholder=\"Please enter...\" name=\"firstname\"/>\n                </FormItem>\n            </Col>\n            <Col>\n                <FormItem label=\"Nest\" labelAlign=\"inset\" {...insetLayout} required asterisk={false}>\n                    <Input placeholder=\"need onChange\" name=\"secondname\" />\n                </FormItem>\n            </Col>\n        </Row>\n    </FormItem>\n    <FormItem label=\"Bank Account：\" >\n        <Row gutter=\"4\">\n            <Col>\n                <FormItem required requiredTrigger=\"onBlur\">\n                    <Input name=\"A\"/>\n                </FormItem>\n            </Col>\n            <Col>\n                <FormItem required requiredTrigger=\"onBlur\">\n                    <Input name=\"B\"/>\n                </FormItem>\n            </Col>\n            <Col>\n                <FormItem required requiredTrigger=\"onBlur\">\n                    <Input name=\"C\"/>\n                </FormItem>\n            </Col>\n            <Col>\n                <FormItem required requiredTrigger=\"onBlur\">\n                    <Input name=\"D\"/>\n                </FormItem>\n            </Col>\n        </Row>\n    </FormItem>\n    <FormItem label=\" \">\n        <Form.Submit onClick={(v) => console.log(v)}>Submit</Form.Submit>\n    </FormItem>\n</Form>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/onsubmit.en-us.md b/compiled_docs/form/demo/onsubmit.en-us.md new file mode 100644 index 0000000000..77f2d33a8b --- /dev/null +++ b/compiled_docs/form/demo/onsubmit.en-us.md @@ -0,0 +1 @@ +{"title":"Trigger on Press the Enter key","meta":{"title":"Trigger on Press the Enter key","description":"\n

Requires htmlType="submit" element in Form

\n","order":"7"},"codes":{"jsx":"import { Form, Input } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nclass Demo extends React.Component {\n onSubmit(e) {\n e.preventDefault(); // form will auto submit if remove this line\n console.log('onsubmit');\n }\n\n render() {\n return (\n
\n \n \n \n submit\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Form, Input } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nclass Demo extends React.Component {\n onSubmit(e) {\n e.preventDefault(); // form will auto submit if remove this line\n console.log('onsubmit');\n }\n\n render() {\n return (\n
\n \n \n \n submit\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Form, Input } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nclass Demo extends React.Component {\n    onSubmit(e) {\n        e.preventDefault(); // form will auto submit if remove this line\n        console.log('onsubmit');\n    }\n\n    render() {\n        return (\n            <Form onSubmit={this.onSubmit.bind(this)}>\n                <FormItem >\n                    <Input placeholder=\"Enter Key can also trigger ‘onSubmit’\"/>\n                </FormItem>\n                <Form.Submit htmlType=\"submit\">submit</Form.Submit>\n            </Form>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/onsubmit.md b/compiled_docs/form/demo/onsubmit.md new file mode 100644 index 0000000000..4f45da2f25 --- /dev/null +++ b/compiled_docs/form/demo/onsubmit.md @@ -0,0 +1 @@ +{"title":"回车提交","meta":{"title":"回车提交","description":"\n

需要Form里面有 htmlType="submit" 的元素

\n","order":"7"},"codes":{"jsx":"import { Form, Input } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nclass Demo extends React.Component {\n onSubmit(e) {\n e.preventDefault(); // form will auto submit if remove this line\n console.log('onsubmit');\n }\n\n render() {\n return (\n
\n \n \n \n submit\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Form, Input } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nclass Demo extends React.Component {\n onSubmit(e) {\n e.preventDefault(); // form will auto submit if remove this line\n console.log('onsubmit');\n }\n\n render() {\n return (\n
\n \n \n \n submit\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Form, Input } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nclass Demo extends React.Component {\n    onSubmit(e) {\n        e.preventDefault(); // form will auto submit if remove this line\n        console.log('onsubmit');\n    }\n\n    render() {\n        return (\n            <Form onSubmit={this.onSubmit.bind(this)}>\n                <FormItem >\n                    <Input placeholder=\"Enter Key can also trigger ‘onSubmit’\"/>\n                </FormItem>\n                <Form.Submit htmlType=\"submit\">submit</Form.Submit>\n            </Form>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/redux-seterror.en-us.md b/compiled_docs/form/demo/redux-seterror.en-us.md new file mode 100644 index 0000000000..80b3d0f7b9 --- /dev/null +++ b/compiled_docs/form/demo/redux-seterror.en-us.md @@ -0,0 +1 @@ +{"title":"Specify the Error Message Position","meta":{"title":"Specify the Error Message Position","description":"\n

Combine componentWillReceiveProps with setErrorsinredux`

\n

If you need to specify the error message position, you can make help="" and place the error display yourself.

\n","order":"13"},"codes":{"jsx":"import { Form, Input, Button, Field } from '@alifd/next';\nimport { combineReducers, createStore } from 'redux';\nimport { Provider, connect } from 'react-redux';\n\n\n\nconst initState = {\n values: {email: '', username: 'xiachi'},\n errors: {}\n};\n\nfunction formReducer(state = initState, action) {\n switch (action.type) {\n case 'save_fields':\n return {\n ...state,\n values: {\n ...state.values,\n ...action.values\n }\n };\n case 'set_errors':\n return {\n ...state,\n errors: {\n ...state.errors,\n ...action.errors\n }\n };\n default:\n return state;\n }\n}\n\nclass FormDemo extends React.Component {\n constructor(props) {\n super(props);\n\n this.field = new Field(this, {\n onChange: (name, value) => {\n console.log('onChange', name, value, this.field.getError(name));\n this.props.dispatch({\n type: 'save_fields',\n values: {\n [name]: value\n }\n });\n this.props.dispatch({\n type: 'set_errors',\n errors: {\n [name]: this.field.getError(name)\n }\n });\n }\n });\n }\n\n componentWillReceiveProps(nextProps) {\n this.field.setValues(nextProps.formData.values);\n this.field.setErrors(nextProps.formData.errors);\n }\n\n setEmail() {\n this.props.dispatch({\n type: 'save_fields',\n values: {\n email: 'qq@gmail.com'\n }\n });\n }\n\n setName() {\n this.props.dispatch({\n type: 'save_fields',\n values: {\n username: 'frank'\n }\n });\n }\n\n setError() {\n this.props.dispatch({\n type: 'set_errors',\n errors: {\n email: 'Error message from remote'\n }\n });\n }\n\n setErrors() {\n this.props.dispatch({\n type: 'set_errors',\n errors: {\n email: 'A-Error message from remote',\n username: 'B-Error message from remote'\n }\n });\n }\n\n render() {\n return (
\n \n \n \n \n \n

{this.field.getError('username')}

\n \n\n

email: {this.props.email && this.props.email.value}

\n \n \n \n \n \n
);\n }\n}\n\n\nconst ReduxFormDemo = connect((state) => {\n return {\n formData: state.formReducer\n };\n})(FormDemo);\n\nconst store = createStore(combineReducers({\n formReducer\n}));\n\nReactDOM.render(\n
\n \n
\n, mountNode);\n"},"body":"\n````jsx\nimport { Form, Input, Button, Field } from '@alifd/next';\nimport { combineReducers, createStore } from 'redux';\nimport { Provider, connect } from 'react-redux';\n\n\n\nconst initState = {\n values: {email: '', username: 'xiachi'},\n errors: {}\n};\n\nfunction formReducer(state = initState, action) {\n switch (action.type) {\n case 'save_fields':\n return {\n ...state,\n values: {\n ...state.values,\n ...action.values\n }\n };\n case 'set_errors':\n return {\n ...state,\n errors: {\n ...state.errors,\n ...action.errors\n }\n };\n default:\n return state;\n }\n}\n\nclass FormDemo extends React.Component {\n constructor(props) {\n super(props);\n\n this.field = new Field(this, {\n onChange: (name, value) => {\n console.log('onChange', name, value, this.field.getError(name));\n this.props.dispatch({\n type: 'save_fields',\n values: {\n [name]: value\n }\n });\n this.props.dispatch({\n type: 'set_errors',\n errors: {\n [name]: this.field.getError(name)\n }\n });\n }\n });\n }\n\n componentWillReceiveProps(nextProps) {\n this.field.setValues(nextProps.formData.values);\n this.field.setErrors(nextProps.formData.errors);\n }\n\n setEmail() {\n this.props.dispatch({\n type: 'save_fields',\n values: {\n email: 'qq@gmail.com'\n }\n });\n }\n\n setName() {\n this.props.dispatch({\n type: 'save_fields',\n values: {\n username: 'frank'\n }\n });\n }\n\n setError() {\n this.props.dispatch({\n type: 'set_errors',\n errors: {\n email: 'Error message from remote'\n }\n });\n }\n\n setErrors() {\n this.props.dispatch({\n type: 'set_errors',\n errors: {\n email: 'A-Error message from remote',\n username: 'B-Error message from remote'\n }\n });\n }\n\n render() {\n return (
\n \n \n \n \n \n

{this.field.getError('username')}

\n \n\n

email: {this.props.email && this.props.email.value}

\n \n \n \n \n \n
);\n }\n}\n\n\nconst ReduxFormDemo = connect((state) => {\n return {\n formData: state.formReducer\n };\n})(FormDemo);\n\nconst store = createStore(combineReducers({\n formReducer\n}));\n\nReactDOM.render(\n
\n \n
\n, mountNode);\n````","html":"
import { Form, Input, Button, Field } from '@alifd/next';\nimport { combineReducers, createStore } from 'redux';\nimport { Provider, connect } from 'react-redux';\n\n\n\nconst initState = {\n    values: {email: '', username: 'xiachi'},\n    errors: {}\n};\n\nfunction formReducer(state = initState, action) {\n    switch (action.type) {\n        case 'save_fields':\n            return {\n                ...state,\n                values: {\n                    ...state.values,\n                    ...action.values\n                }\n            };\n        case 'set_errors':\n            return {\n                ...state,\n                errors: {\n                    ...state.errors,\n                    ...action.errors\n                }\n            };\n        default:\n            return state;\n    }\n}\n\nclass FormDemo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.field = new Field(this, {\n            onChange: (name, value) => {\n                console.log('onChange', name, value, this.field.getError(name));\n                this.props.dispatch({\n                    type: 'save_fields',\n                    values: {\n                        [name]: value\n                    }\n                });\n                this.props.dispatch({\n                    type: 'set_errors',\n                    errors: {\n                        [name]: this.field.getError(name)\n                    }\n                });\n            }\n        });\n    }\n\n    componentWillReceiveProps(nextProps) {\n        this.field.setValues(nextProps.formData.values);\n        this.field.setErrors(nextProps.formData.errors);\n    }\n\n    setEmail() {\n        this.props.dispatch({\n            type: 'save_fields',\n            values: {\n                email: 'qq@gmail.com'\n            }\n        });\n    }\n\n    setName() {\n        this.props.dispatch({\n            type: 'save_fields',\n            values: {\n                username: 'frank'\n            }\n        });\n    }\n\n    setError() {\n        this.props.dispatch({\n            type: 'set_errors',\n            errors: {\n                email: 'Error message from remote'\n            }\n        });\n    }\n\n    setErrors() {\n        this.props.dispatch({\n            type: 'set_errors',\n            errors: {\n                email: 'A-Error message from remote',\n                username: 'B-Error message from remote'\n            }\n        });\n    }\n\n    render() {\n        return (<Form field={this.field}>\n            <Form.Item required format=\"email\">\n                <Input name=\"email\"/>\n            </Form.Item>\n            <Form.Item help=\"\" required requiredMessage=\"required\">\n                <Input name=\"username\" defaultValue={this.props.formData.values.username} />\n                <p style={{color: 'blue'}}>{this.field.getError('username')}</p>\n            </Form.Item>\n\n            <p>email: {this.props.email && this.props.email.value}</p>\n            <Button onClick={this.setEmail.bind(this)}>setEmail</Button>\n            <Button onClick={this.setName.bind(this)}>setName</Button>\n            <Button onClick={this.setError.bind(this)}>setError</Button>\n            <Button onClick={this.setErrors.bind(this)}>setErrors</Button>\n            <Button onClick={() => this.field.reset()}>reset</Button>\n        </Form>);\n    }\n}\n\n\nconst ReduxFormDemo = connect((state) => {\n    return {\n        formData: state.formReducer\n    };\n})(FormDemo);\n\nconst store = createStore(combineReducers({\n    formReducer\n}));\n\nReactDOM.render(<Provider store={store}>\n    <div>\n        <ReduxFormDemo />\n    </div>\n</Provider>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/redux-seterror.md b/compiled_docs/form/demo/redux-seterror.md new file mode 100644 index 0000000000..802e65a0a3 --- /dev/null +++ b/compiled_docs/form/demo/redux-seterror.md @@ -0,0 +1 @@ +{"title":"手动设置错误","meta":{"title":"手动设置错误","description":"\n

在redux中结合 componentWillReceiveProps setErrors 使用, 配合 Field 使用更加方便

\n

如果需要自己控制错误位置，可以让help="" 然后自己放置展示错误的地方

\n","order":"13"},"codes":{"jsx":"import { Form, Input, Button, Field } from '@alifd/next';\nimport { combineReducers, createStore } from 'redux';\nimport { Provider, connect } from 'react-redux';\n\n\n\nconst initState = {\n values: {email: '', username: 'xiachi'},\n errors: {}\n};\n\nfunction formReducer(state = initState, action) {\n switch (action.type) {\n case 'save_fields':\n return {\n ...state,\n values: {\n ...state.values,\n ...action.values\n }\n };\n case 'set_errors':\n return {\n ...state,\n errors: {\n ...state.errors,\n ...action.errors\n }\n };\n default:\n return state;\n }\n}\n\nclass FormDemo extends React.Component {\n constructor(props) {\n super(props);\n\n this.field = new Field(this, {\n onChange: (name, value) => {\n console.log('onChange', name, value, this.field.getError(name));\n this.props.dispatch({\n type: 'save_fields',\n values: {\n [name]: value\n }\n });\n this.props.dispatch({\n type: 'set_errors',\n errors: {\n [name]: this.field.getError(name)\n }\n });\n }\n });\n }\n\n componentWillReceiveProps(nextProps) {\n this.field.setValues(nextProps.formData.values);\n this.field.setErrors(nextProps.formData.errors);\n }\n\n setEmail() {\n this.props.dispatch({\n type: 'save_fields',\n values: {\n email: 'qq@gmail.com'\n }\n });\n }\n\n setName() {\n this.props.dispatch({\n type: 'save_fields',\n values: {\n username: 'frank'\n }\n });\n }\n\n setError() {\n this.props.dispatch({\n type: 'set_errors',\n errors: {\n email: 'Error message from remote'\n }\n });\n }\n\n setErrors() {\n this.props.dispatch({\n type: 'set_errors',\n errors: {\n email: 'A-Error message from remote',\n username: 'B-Error message from remote'\n }\n });\n }\n\n render() {\n return (
\n \n \n \n \n \n

{this.field.getError('username')}

\n \n\n

email: {this.props.email && this.props.email.value}

\n \n \n \n \n \n
);\n }\n}\n\n\nconst ReduxFormDemo = connect((state) => {\n return {\n formData: state.formReducer\n };\n})(FormDemo);\n\nconst store = createStore(combineReducers({\n formReducer\n}));\n\nReactDOM.render(\n
\n \n
\n, mountNode);\n"},"body":"\n\n````jsx\nimport { Form, Input, Button, Field } from '@alifd/next';\nimport { combineReducers, createStore } from 'redux';\nimport { Provider, connect } from 'react-redux';\n\n\n\nconst initState = {\n values: {email: '', username: 'xiachi'},\n errors: {}\n};\n\nfunction formReducer(state = initState, action) {\n switch (action.type) {\n case 'save_fields':\n return {\n ...state,\n values: {\n ...state.values,\n ...action.values\n }\n };\n case 'set_errors':\n return {\n ...state,\n errors: {\n ...state.errors,\n ...action.errors\n }\n };\n default:\n return state;\n }\n}\n\nclass FormDemo extends React.Component {\n constructor(props) {\n super(props);\n\n this.field = new Field(this, {\n onChange: (name, value) => {\n console.log('onChange', name, value, this.field.getError(name));\n this.props.dispatch({\n type: 'save_fields',\n values: {\n [name]: value\n }\n });\n this.props.dispatch({\n type: 'set_errors',\n errors: {\n [name]: this.field.getError(name)\n }\n });\n }\n });\n }\n\n componentWillReceiveProps(nextProps) {\n this.field.setValues(nextProps.formData.values);\n this.field.setErrors(nextProps.formData.errors);\n }\n\n setEmail() {\n this.props.dispatch({\n type: 'save_fields',\n values: {\n email: 'qq@gmail.com'\n }\n });\n }\n\n setName() {\n this.props.dispatch({\n type: 'save_fields',\n values: {\n username: 'frank'\n }\n });\n }\n\n setError() {\n this.props.dispatch({\n type: 'set_errors',\n errors: {\n email: 'Error message from remote'\n }\n });\n }\n\n setErrors() {\n this.props.dispatch({\n type: 'set_errors',\n errors: {\n email: 'A-Error message from remote',\n username: 'B-Error message from remote'\n }\n });\n }\n\n render() {\n return (
\n \n \n \n \n \n

{this.field.getError('username')}

\n \n\n

email: {this.props.email && this.props.email.value}

\n \n \n \n \n \n
);\n }\n}\n\n\nconst ReduxFormDemo = connect((state) => {\n return {\n formData: state.formReducer\n };\n})(FormDemo);\n\nconst store = createStore(combineReducers({\n formReducer\n}));\n\nReactDOM.render(\n
\n \n
\n, mountNode);\n````","html":"
import { Form, Input, Button, Field } from '@alifd/next';\nimport { combineReducers, createStore } from 'redux';\nimport { Provider, connect } from 'react-redux';\n\n\n\nconst initState = {\n    values: {email: '', username: 'xiachi'},\n    errors: {}\n};\n\nfunction formReducer(state = initState, action) {\n    switch (action.type) {\n        case 'save_fields':\n            return {\n                ...state,\n                values: {\n                    ...state.values,\n                    ...action.values\n                }\n            };\n        case 'set_errors':\n            return {\n                ...state,\n                errors: {\n                    ...state.errors,\n                    ...action.errors\n                }\n            };\n        default:\n            return state;\n    }\n}\n\nclass FormDemo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.field = new Field(this, {\n            onChange: (name, value) => {\n                console.log('onChange', name, value, this.field.getError(name));\n                this.props.dispatch({\n                    type: 'save_fields',\n                    values: {\n                        [name]: value\n                    }\n                });\n                this.props.dispatch({\n                    type: 'set_errors',\n                    errors: {\n                        [name]: this.field.getError(name)\n                    }\n                });\n            }\n        });\n    }\n\n    componentWillReceiveProps(nextProps) {\n        this.field.setValues(nextProps.formData.values);\n        this.field.setErrors(nextProps.formData.errors);\n    }\n\n    setEmail() {\n        this.props.dispatch({\n            type: 'save_fields',\n            values: {\n                email: 'qq@gmail.com'\n            }\n        });\n    }\n\n    setName() {\n        this.props.dispatch({\n            type: 'save_fields',\n            values: {\n                username: 'frank'\n            }\n        });\n    }\n\n    setError() {\n        this.props.dispatch({\n            type: 'set_errors',\n            errors: {\n                email: 'Error message from remote'\n            }\n        });\n    }\n\n    setErrors() {\n        this.props.dispatch({\n            type: 'set_errors',\n            errors: {\n                email: 'A-Error message from remote',\n                username: 'B-Error message from remote'\n            }\n        });\n    }\n\n    render() {\n        return (<Form field={this.field}>\n            <Form.Item required format=\"email\">\n                <Input name=\"email\"/>\n            </Form.Item>\n            <Form.Item help=\"\" required requiredMessage=\"required\">\n                <Input name=\"username\" defaultValue={this.props.formData.values.username} />\n                <p style={{color: 'blue'}}>{this.field.getError('username')}</p>\n            </Form.Item>\n\n            <p>email: {this.props.email && this.props.email.value}</p>\n            <Button onClick={this.setEmail.bind(this)}>setEmail</Button>\n            <Button onClick={this.setName.bind(this)}>setName</Button>\n            <Button onClick={this.setError.bind(this)}>setError</Button>\n            <Button onClick={this.setErrors.bind(this)}>setErrors</Button>\n            <Button onClick={() => this.field.reset()}>reset</Button>\n        </Form>);\n    }\n}\n\n\nconst ReduxFormDemo = connect((state) => {\n    return {\n        formData: state.formReducer\n    };\n})(FormDemo);\n\nconst store = createStore(combineReducers({\n    formReducer\n}));\n\nReactDOM.render(<Provider store={store}>\n    <div>\n        <ReduxFormDemo />\n    </div>\n</Provider>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/redux.en-us.md b/compiled_docs/form/demo/redux.en-us.md new file mode 100644 index 0000000000..b5925fe75e --- /dev/null +++ b/compiled_docs/form/demo/redux.en-us.md @@ -0,0 +1 @@ +{"title":"Using with Redux","meta":{"title":"Using with Redux","description":"\n

Using in redux with componentWillReceiveProps setValues

\n","order":"12"},"codes":{"jsx":"import { Form, Input, Button, Checkbox, Field } from '@alifd/next';\nimport { combineReducers, createStore } from 'redux';\nimport { Provider, connect } from 'react-redux';\n\n\n\n\nconst CheckboxGroup = Checkbox.Group;\nfunction formReducer(state = {email: '', username: 'xiachi', fruit: ['apple']}, action) {\n switch (action.type) {\n case 'save_fields':\n return {\n ...state,\n ...action.payload\n };\n default:\n return state;\n }\n}\n\nclass FormDemo extends React.Component {\n constructor(props) {\n super(props);\n this.field = new Field(this, {\n onChange: (name, value) => {\n console.log('onChange', name, value, this.field.getValues());\n this.props.dispatch({\n type: 'save_fields',\n payload: {\n [name]: value\n }\n });\n /* Method 2, Updates all values.\n this.props.dispatch({\n type: 'save_fields',\n payload: this.field.getValues()\n });\n */\n }\n });\n }\n\n componentWillReceiveProps(nextProps) {\n this.field.setValues(nextProps.formData);\n }\n\n setEmail() {\n this.props.dispatch({\n type: 'save_fields',\n payload: {\n email: 'qq@gmail.com'\n }\n });\n }\n\n setName() {\n this.props.dispatch({\n type: 'save_fields',\n payload: {\n username: 'frank'\n }\n });\n }\n\n setGroup() {\n this.props.dispatch({\n type: 'save_fields',\n payload: {\n fruit: ['pear']\n }\n });\n }\n\n render() {\n return (
\n \n \n \n \n \n \n \n \n \n\n

email: {this.props.email && this.props.email.value}

\n \n \n \n
);\n }\n}\n\nconst ReduxFormDemo = connect((state) => {\n return {\n formData: state.formReducer\n };\n})(FormDemo);\n\nconst store = createStore(combineReducers({\n formReducer\n}));\n\nReactDOM.render(\n
\n \n
\n, mountNode);\n"},"body":"\n````jsx\nimport { Form, Input, Button, Checkbox, Field } from '@alifd/next';\nimport { combineReducers, createStore } from 'redux';\nimport { Provider, connect } from 'react-redux';\n\n\n\n\nconst CheckboxGroup = Checkbox.Group;\nfunction formReducer(state = {email: '', username: 'xiachi', fruit: ['apple']}, action) {\n switch (action.type) {\n case 'save_fields':\n return {\n ...state,\n ...action.payload\n };\n default:\n return state;\n }\n}\n\nclass FormDemo extends React.Component {\n constructor(props) {\n super(props);\n this.field = new Field(this, {\n onChange: (name, value) => {\n console.log('onChange', name, value, this.field.getValues());\n this.props.dispatch({\n type: 'save_fields',\n payload: {\n [name]: value\n }\n });\n /* Method 2, Updates all values.\n this.props.dispatch({\n type: 'save_fields',\n payload: this.field.getValues()\n });\n */\n }\n });\n }\n\n componentWillReceiveProps(nextProps) {\n this.field.setValues(nextProps.formData);\n }\n\n setEmail() {\n this.props.dispatch({\n type: 'save_fields',\n payload: {\n email: 'qq@gmail.com'\n }\n });\n }\n\n setName() {\n this.props.dispatch({\n type: 'save_fields',\n payload: {\n username: 'frank'\n }\n });\n }\n\n setGroup() {\n this.props.dispatch({\n type: 'save_fields',\n payload: {\n fruit: ['pear']\n }\n });\n }\n\n render() {\n return (
\n \n \n \n \n \n \n \n \n \n\n

email: {this.props.email && this.props.email.value}

\n \n \n \n
);\n }\n}\n\nconst ReduxFormDemo = connect((state) => {\n return {\n formData: state.formReducer\n };\n})(FormDemo);\n\nconst store = createStore(combineReducers({\n formReducer\n}));\n\nReactDOM.render(\n
\n \n
\n, mountNode);\n````","html":"
import { Form, Input, Button, Checkbox, Field } from '@alifd/next';\nimport { combineReducers, createStore } from 'redux';\nimport { Provider, connect } from 'react-redux';\n\n\n\n\nconst CheckboxGroup = Checkbox.Group;\nfunction formReducer(state = {email: '', username: 'xiachi', fruit: ['apple']}, action) {\n    switch (action.type) {\n        case 'save_fields':\n            return {\n                ...state,\n                ...action.payload\n            };\n        default:\n            return state;\n    }\n}\n\nclass FormDemo extends React.Component {\n    constructor(props) {\n        super(props);\n        this.field = new Field(this, {\n            onChange: (name, value) => {\n                console.log('onChange', name, value, this.field.getValues());\n                this.props.dispatch({\n                    type: 'save_fields',\n                    payload: {\n                        [name]: value\n                    }\n                });\n                /* Method 2, Updates all values.\n                 this.props.dispatch({\n                 type: 'save_fields',\n                 payload: this.field.getValues()\n                 });\n                 */\n            }\n        });\n    }\n\n    componentWillReceiveProps(nextProps) {\n        this.field.setValues(nextProps.formData);\n    }\n\n    setEmail() {\n        this.props.dispatch({\n            type: 'save_fields',\n            payload: {\n                email: 'qq@gmail.com'\n            }\n        });\n    }\n\n    setName() {\n        this.props.dispatch({\n            type: 'save_fields',\n            payload: {\n                username: 'frank'\n            }\n        });\n    }\n\n    setGroup() {\n        this.props.dispatch({\n            type: 'save_fields',\n            payload: {\n                fruit: ['pear']\n            }\n        });\n    }\n\n    render() {\n        return (<Form field={this.field}>\n            <Form.Item required requiredMessage=\"required!\">\n                <Input name=\"email\"/>\n            </Form.Item>\n            <Form.Item required requiredMessage=\"required!\">\n                <Input name=\"username\" defaultValue={this.props.formData.username} />\n            </Form.Item>\n            <Form.Item required requiredMessage=\"required!\">\n                <CheckboxGroup name=\"fruit\" dataSource={[{label: 'Apple', value: 'apple'}, {label: 'Pear', value: 'pear'}]} defaultValue={this.props.formData.fruit}/>\n            </Form.Item>\n\n            <p>email: {this.props.email && this.props.email.value}</p>\n            <Button onClick={this.setEmail.bind(this)}>setEmail</Button>\n            <Button onClick={this.setName.bind(this)}>setName</Button>\n            <Button onClick={this.setGroup.bind(this)}>setGroup</Button>\n        </Form>);\n    }\n}\n\nconst ReduxFormDemo = connect((state) => {\n    return {\n        formData: state.formReducer\n    };\n})(FormDemo);\n\nconst store = createStore(combineReducers({\n    formReducer\n}));\n\nReactDOM.render(<Provider store={store}>\n    <div>\n        <ReduxFormDemo />\n    </div>\n</Provider>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/redux.md b/compiled_docs/form/demo/redux.md new file mode 100644 index 0000000000..a6c7824748 --- /dev/null +++ b/compiled_docs/form/demo/redux.md @@ -0,0 +1 @@ +{"title":"配合redux使用","meta":{"title":"配合redux使用","description":"\n

在redux中结合 componentWillReceiveProps setValues 使用， 配合 Field 使用

\n","order":"12"},"codes":{"jsx":"import { Form, Input, Button, Checkbox, Field } from '@alifd/next';\nimport { combineReducers, createStore } from 'redux';\nimport { Provider, connect } from 'react-redux';\n\n\n\n\nconst CheckboxGroup = Checkbox.Group;\nfunction formReducer(state = {email: '', username: 'xiachi', fruit: ['apple']}, action) {\n switch (action.type) {\n case 'save_fields':\n return {\n ...state,\n ...action.payload\n };\n default:\n return state;\n }\n}\n\nclass FormDemo extends React.Component {\n constructor(props) {\n super(props);\n this.field = new Field(this, {\n onChange: (name, value) => {\n console.log('onChange', name, value, this.field.getValues());\n this.props.dispatch({\n type: 'save_fields',\n payload: {\n [name]: value\n }\n });\n /* Method 2, Updates all values.\n this.props.dispatch({\n type: 'save_fields',\n payload: this.field.getValues()\n });\n */\n }\n });\n }\n\n componentWillReceiveProps(nextProps) {\n this.field.setValues(nextProps.formData);\n }\n\n setEmail() {\n this.props.dispatch({\n type: 'save_fields',\n payload: {\n email: 'qq@gmail.com'\n }\n });\n }\n\n setName() {\n this.props.dispatch({\n type: 'save_fields',\n payload: {\n username: 'frank'\n }\n });\n }\n\n setGroup() {\n this.props.dispatch({\n type: 'save_fields',\n payload: {\n fruit: ['pear']\n }\n });\n }\n\n render() {\n return (
\n \n \n \n \n \n \n \n \n \n\n

email: {this.props.email && this.props.email.value}

\n \n \n \n
);\n }\n}\n\nconst ReduxFormDemo = connect((state) => {\n return {\n formData: state.formReducer\n };\n})(FormDemo);\n\nconst store = createStore(combineReducers({\n formReducer\n}));\n\nReactDOM.render(\n
\n \n
\n, mountNode);\n"},"body":"\n\n````jsx\nimport { Form, Input, Button, Checkbox, Field } from '@alifd/next';\nimport { combineReducers, createStore } from 'redux';\nimport { Provider, connect } from 'react-redux';\n\n\n\n\nconst CheckboxGroup = Checkbox.Group;\nfunction formReducer(state = {email: '', username: 'xiachi', fruit: ['apple']}, action) {\n switch (action.type) {\n case 'save_fields':\n return {\n ...state,\n ...action.payload\n };\n default:\n return state;\n }\n}\n\nclass FormDemo extends React.Component {\n constructor(props) {\n super(props);\n this.field = new Field(this, {\n onChange: (name, value) => {\n console.log('onChange', name, value, this.field.getValues());\n this.props.dispatch({\n type: 'save_fields',\n payload: {\n [name]: value\n }\n });\n /* Method 2, Updates all values.\n this.props.dispatch({\n type: 'save_fields',\n payload: this.field.getValues()\n });\n */\n }\n });\n }\n\n componentWillReceiveProps(nextProps) {\n this.field.setValues(nextProps.formData);\n }\n\n setEmail() {\n this.props.dispatch({\n type: 'save_fields',\n payload: {\n email: 'qq@gmail.com'\n }\n });\n }\n\n setName() {\n this.props.dispatch({\n type: 'save_fields',\n payload: {\n username: 'frank'\n }\n });\n }\n\n setGroup() {\n this.props.dispatch({\n type: 'save_fields',\n payload: {\n fruit: ['pear']\n }\n });\n }\n\n render() {\n return (
\n \n \n \n \n \n \n \n \n \n\n

email: {this.props.email && this.props.email.value}

\n \n \n \n
);\n }\n}\n\nconst ReduxFormDemo = connect((state) => {\n return {\n formData: state.formReducer\n };\n})(FormDemo);\n\nconst store = createStore(combineReducers({\n formReducer\n}));\n\nReactDOM.render(\n
\n \n
\n, mountNode);\n````","html":"
import { Form, Input, Button, Checkbox, Field } from '@alifd/next';\nimport { combineReducers, createStore } from 'redux';\nimport { Provider, connect } from 'react-redux';\n\n\n\n\nconst CheckboxGroup = Checkbox.Group;\nfunction formReducer(state = {email: '', username: 'xiachi', fruit: ['apple']}, action) {\n    switch (action.type) {\n        case 'save_fields':\n            return {\n                ...state,\n                ...action.payload\n            };\n        default:\n            return state;\n    }\n}\n\nclass FormDemo extends React.Component {\n    constructor(props) {\n        super(props);\n        this.field = new Field(this, {\n            onChange: (name, value) => {\n                console.log('onChange', name, value, this.field.getValues());\n                this.props.dispatch({\n                    type: 'save_fields',\n                    payload: {\n                        [name]: value\n                    }\n                });\n                /* Method 2, Updates all values.\n                 this.props.dispatch({\n                 type: 'save_fields',\n                 payload: this.field.getValues()\n                 });\n                 */\n            }\n        });\n    }\n\n    componentWillReceiveProps(nextProps) {\n        this.field.setValues(nextProps.formData);\n    }\n\n    setEmail() {\n        this.props.dispatch({\n            type: 'save_fields',\n            payload: {\n                email: 'qq@gmail.com'\n            }\n        });\n    }\n\n    setName() {\n        this.props.dispatch({\n            type: 'save_fields',\n            payload: {\n                username: 'frank'\n            }\n        });\n    }\n\n    setGroup() {\n        this.props.dispatch({\n            type: 'save_fields',\n            payload: {\n                fruit: ['pear']\n            }\n        });\n    }\n\n    render() {\n        return (<Form field={this.field}>\n            <Form.Item required requiredMessage=\"required!\">\n                <Input name=\"email\"/>\n            </Form.Item>\n            <Form.Item required requiredMessage=\"required!\">\n                <Input name=\"username\" defaultValue={this.props.formData.username} />\n            </Form.Item>\n            <Form.Item required requiredMessage=\"required!\">\n                <CheckboxGroup name=\"fruit\" dataSource={[{label: 'Apple', value: 'apple'}, {label: 'Pear', value: 'pear'}]} defaultValue={this.props.formData.fruit}/>\n            </Form.Item>\n\n            <p>email: {this.props.email && this.props.email.value}</p>\n            <Button onClick={this.setEmail.bind(this)}>setEmail</Button>\n            <Button onClick={this.setName.bind(this)}>setName</Button>\n            <Button onClick={this.setGroup.bind(this)}>setGroup</Button>\n        </Form>);\n    }\n}\n\nconst ReduxFormDemo = connect((state) => {\n    return {\n        formData: state.formReducer\n    };\n})(FormDemo);\n\nconst store = createStore(combineReducers({\n    formReducer\n}));\n\nReactDOM.render(<Provider store={store}>\n    <div>\n        <ReduxFormDemo />\n    </div>\n</Provider>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/register.en-us.md b/compiled_docs/form/demo/register.en-us.md new file mode 100644 index 0000000000..bfc4f50f8a --- /dev/null +++ b/compiled_docs/form/demo/register.en-us.md @@ -0,0 +1 @@ +{"title":"save field","meta":{"title":"save field","description":"\n

send code

\n","order":"10"},"codes":{"jsx":"import { Form, Input } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n labelCol: { fixedSpan: 3 },\n wrapperCol: { span: 20 }\n};\n\nclass Demo extends React.Component {\n state = {\n code: '',\n second: 60\n }\n\n handleSubmit = (values, errors) => {\n if (errors) {\n return;\n }\n console.log('Get form value:', values);\n };\n\n sendCode = (values, errors) => {\n if (errors) {\n return;\n }\n this.setState({\n code: Math.floor(Math.random() * (999999 - 99999 + 1) + 99999)\n });\n\n setInterval(() => {\n this.setState({\n second: --this.state.second\n });\n }, 1000);\n }\n\n render() {\n const { code } = this.state;\n\n return (\n
\n \n \n \n \n \n {code ? `retry after ${this.state.second}s` : 'send code'}\n \n } />\n \n {\n this.state.code ? \n \n : null\n }\n\n \n Submit\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Form, Input } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n labelCol: { fixedSpan: 3 },\n wrapperCol: { span: 20 }\n};\n\nclass Demo extends React.Component {\n state = {\n code: '',\n second: 60\n }\n\n handleSubmit = (values, errors) => {\n if (errors) {\n return;\n }\n console.log('Get form value:', values);\n };\n\n sendCode = (values, errors) => {\n if (errors) {\n return;\n }\n this.setState({\n code: Math.floor(Math.random() * (999999 - 99999 + 1) + 99999)\n });\n\n setInterval(() => {\n this.setState({\n second: --this.state.second\n });\n }, 1000);\n }\n\n render() {\n const { code } = this.state;\n\n return (\n
\n \n \n \n \n \n {code ? `retry after ${this.state.second}s` : 'send code'}\n \n } />\n \n {\n this.state.code ? \n \n : null\n }\n\n \n Submit\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Form, Input } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n    labelCol: { fixedSpan: 3 },\n    wrapperCol: { span: 20 }\n};\n\nclass Demo extends React.Component {\n    state = {\n        code: '',\n        second: 60\n    }\n\n    handleSubmit = (values, errors) => {\n        if (errors) {\n            return;\n        }\n        console.log('Get form value:', values);\n    };\n\n    sendCode = (values, errors) => {\n        if (errors) {\n            return;\n        }\n        this.setState({\n            code: Math.floor(Math.random() * (999999 - 99999 + 1) + 99999)\n        });\n\n        setInterval(() => {\n            this.setState({\n                second: --this.state.second\n            });\n        }, 1000);\n    }\n\n    render() {\n        const { code } = this.state;\n\n        return (\n            <Form style={{ width: 400 }} {...formItemLayout} labelTextAlign=\"left\" size=\"large\" labelAlign=\"inset\" >\n                <FormItem label=\"name\" required asterisk={false}>\n                    <Input name=\"username\" trim defaultValue=\"frank\" />\n                </FormItem>\n                <FormItem label=\"phone\" format=\"tel\" required asterisk={false}>\n                    <Input name=\"phone\" trim innerAfter={\n                        <Form.Submit\n                            text\n                            type=\"primary\"\n                            disabled={!!code}\n                            validate={['phone']}\n                            onClick={this.sendCode}\n                            style={{ marginRight: 10 }}\n                        >\n                            {code ? `retry after ${this.state.second}s` : 'send code'}\n                        </Form.Submit>\n                    } />\n                </FormItem>\n                {\n                    this.state.code ? <FormItem label=\"code\" required asterisk={false}>\n                        <Input name=\"code\" trim defaultValue={this.state.code} />\n                    </FormItem> : null\n                }\n\n                <FormItem label=\" \">\n                    <Form.Submit style={{ width: '100%' }} type=\"primary\" validate onClick={this.handleSubmit}>Submit</Form.Submit>\n                </FormItem>\n            </Form>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/register.md b/compiled_docs/form/demo/register.md new file mode 100644 index 0000000000..040b4fbec9 --- /dev/null +++ b/compiled_docs/form/demo/register.md @@ -0,0 +1 @@ +{"title":"注册","meta":{"title":"注册","description":"\n

验证码获取

\n","order":"1"},"codes":{"jsx":"import { Form, Input } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n labelCol: { fixedSpan: 3 },\n wrapperCol: { span: 20 }\n};\n\nclass Demo extends React.Component {\n state = {\n code: '',\n second: 60\n }\n\n handleSubmit = (values, errors) => {\n if (errors) {\n return;\n }\n console.log('Get form value:', values);\n };\n\n sendCode = (values, errors) => {\n if (errors) {\n return;\n }\n this.setState({\n code: Math.floor(Math.random() * (999999 - 99999 + 1) + 99999)\n });\n\n setInterval(() => {\n this.setState({\n second: --this.state.second\n });\n }, 1000);\n }\n\n render() {\n const { code } = this.state;\n\n return (\n
\n \n \n \n \n \n {code ? `retry after ${this.state.second}s` : 'send code'}\n \n } />\n \n {\n this.state.code ? \n \n : null\n }\n\n \n Submit\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Form, Input } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n labelCol: { fixedSpan: 3 },\n wrapperCol: { span: 20 }\n};\n\nclass Demo extends React.Component {\n state = {\n code: '',\n second: 60\n }\n\n handleSubmit = (values, errors) => {\n if (errors) {\n return;\n }\n console.log('Get form value:', values);\n };\n\n sendCode = (values, errors) => {\n if (errors) {\n return;\n }\n this.setState({\n code: Math.floor(Math.random() * (999999 - 99999 + 1) + 99999)\n });\n\n setInterval(() => {\n this.setState({\n second: --this.state.second\n });\n }, 1000);\n }\n\n render() {\n const { code } = this.state;\n\n return (\n
\n \n \n \n \n \n {code ? `retry after ${this.state.second}s` : 'send code'}\n \n } />\n \n {\n this.state.code ? \n \n : null\n }\n\n \n Submit\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Form, Input } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n    labelCol: { fixedSpan: 3 },\n    wrapperCol: { span: 20 }\n};\n\nclass Demo extends React.Component {\n    state = {\n        code: '',\n        second: 60\n    }\n\n    handleSubmit = (values, errors) => {\n        if (errors) {\n            return;\n        }\n        console.log('Get form value:', values);\n    };\n\n    sendCode = (values, errors) => {\n        if (errors) {\n            return;\n        }\n        this.setState({\n            code: Math.floor(Math.random() * (999999 - 99999 + 1) + 99999)\n        });\n\n        setInterval(() => {\n            this.setState({\n                second: --this.state.second\n            });\n        }, 1000);\n    }\n\n    render() {\n        const { code } = this.state;\n\n        return (\n            <Form style={{ width: 400 }} {...formItemLayout} labelTextAlign=\"left\" size=\"large\" labelAlign=\"inset\" >\n                <FormItem label=\"name\" required asterisk={false}>\n                    <Input name=\"username\" trim defaultValue=\"frank\" />\n                </FormItem>\n                <FormItem label=\"phone\" format=\"tel\" required asterisk={false}>\n                    <Input name=\"phone\" trim innerAfter={\n                        <Form.Submit\n                            text\n                            type=\"primary\"\n                            disabled={!!code}\n                            validate={['phone']}\n                            onClick={this.sendCode}\n                            style={{ marginRight: 10 }}\n                        >\n                            {code ? `retry after ${this.state.second}s` : 'send code'}\n                        </Form.Submit>\n                    } />\n                </FormItem>\n                {\n                    this.state.code ? <FormItem label=\"code\" required asterisk={false}>\n                        <Input name=\"code\" trim defaultValue={this.state.code} />\n                    </FormItem> : null\n                }\n\n                <FormItem label=\" \">\n                    <Form.Submit style={{ width: '100%' }} type=\"primary\" validate onClick={this.handleSubmit}>Submit</Form.Submit>\n                </FormItem>\n            </Form>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/responsive.en-us.md b/compiled_docs/form/demo/responsive.en-us.md new file mode 100644 index 0000000000..b8db112329 --- /dev/null +++ b/compiled_docs/form/demo/responsive.en-us.md @@ -0,0 +1 @@ +{"title":"Responsive","meta":{"title":"Responsive","description":"\n

Response can be configured by Grid.Col property of labelCol wrapperCol.

\n","order":"7"},"codes":{"jsx":"import { Form, Input, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n labelCol: {xxs: 4, l: 4},\n wrapperCol: {xxs: 20, l: 16}\n};\n\nReactDOM.render(
\n \n \n \n \n \n \n \n \n \n \n \n \n \n Submit\n \n
, mountNode);\n"},"body":"\n````jsx\nimport { Form, Input, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n labelCol: {xxs: 4, l: 4},\n wrapperCol: {xxs: 20, l: 16}\n};\n\nReactDOM.render(
\n \n \n \n \n \n \n \n \n \n \n \n \n \n Submit\n \n
, mountNode);\n````","html":"
import { Form, Input, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n    labelCol: {xxs: 4, l: 4},\n    wrapperCol: {xxs: 20, l: 16}\n};\n\nReactDOM.render(<Form {...formItemLayout} >\n    <FormItem label=\"userName:\">\n        <Input />\n    </FormItem>\n    <FormItem label=\"password:\">\n        <Input htmlType=\"password\" name=\"resPass\" placeholder=\"Please Enter Password\"/>\n    </FormItem>\n    <FormItem label=\"Country:\">\n        <Select placeholder=\"Please select a country\" style={{width: '100%'}}>\n            <option value=\"china\">China</option>\n            <option value=\"use\">United States</option>\n            <option value=\"japan\">Japan</option>\n            <option value=\"korean\">South Korea</option>\n            <option value=\"Thailand\">Thailand</option>\n        </Select>\n    </FormItem>\n    <FormItem label=\"Note:\" help=\"something\">\n        <Input.TextArea placeholder=\"something\" name=\"resReremark\" />\n    </FormItem>\n    <FormItem label=\" \">\n        <Form.Submit>Submit</Form.Submit>\n    </FormItem>\n</Form>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/responsive.md b/compiled_docs/form/demo/responsive.md new file mode 100644 index 0000000000..73aa51cf5f --- /dev/null +++ b/compiled_docs/form/demo/responsive.md @@ -0,0 +1 @@ +{"title":"响应式","meta":{"title":"响应式","description":"\n

可以通过配置 labelCol wrapperCol 的 Grid.Col 响应式属性实现响应式

\n","order":"7"},"codes":{"jsx":"import { Form, Input, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n labelCol: {xxs: 4, l: 4},\n wrapperCol: {xxs: 20, l: 16}\n};\n\nReactDOM.render(
\n \n \n \n \n \n \n \n \n \n \n \n \n \n Submit\n \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Form, Input, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n labelCol: {xxs: 4, l: 4},\n wrapperCol: {xxs: 20, l: 16}\n};\n\nReactDOM.render(
\n \n \n \n \n \n \n \n \n \n \n \n \n \n Submit\n \n
, mountNode);\n````","html":"
import { Form, Input, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n    labelCol: {xxs: 4, l: 4},\n    wrapperCol: {xxs: 20, l: 16}\n};\n\nReactDOM.render(<Form {...formItemLayout} >\n    <FormItem label=\"userName:\">\n        <Input />\n    </FormItem>\n    <FormItem label=\"password:\">\n        <Input htmlType=\"password\" name=\"resPass\" placeholder=\"Please Enter Password\"/>\n    </FormItem>\n    <FormItem label=\"Country:\">\n        <Select placeholder=\"Please select a country\" style={{width: '100%'}}>\n            <option value=\"china\">China</option>\n            <option value=\"use\">United States</option>\n            <option value=\"japan\">Japan</option>\n            <option value=\"korean\">South Korea</option>\n            <option value=\"Thailand\">Thailand</option>\n        </Select>\n    </FormItem>\n    <FormItem label=\"Note:\" help=\"something\">\n        <Input.TextArea placeholder=\"something\" name=\"resReremark\" />\n    </FormItem>\n    <FormItem label=\" \">\n        <Form.Submit>Submit</Form.Submit>\n    </FormItem>\n</Form>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/size.en-us.md b/compiled_docs/form/demo/size.en-us.md new file mode 100644 index 0000000000..517515ff12 --- /dev/null +++ b/compiled_docs/form/demo/size.en-us.md @@ -0,0 +1 @@ +{"title":"Size","meta":{"title":"Size","description":"\n

labelAlign Align of label

\n

labelTextAlign Align of text inlabel;

\n"},"codes":{"jsx":"import { Form, Input, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst Option = Select.Option;\nconst formItemLayout = {\n labelCol: {span: 4},\n wrapperCol: {span: 20}\n};\n\nclass Demo extends React.Component {\n state = {\n size: 'medium'\n }\n\n handleChange = (v) => {\n this.setState({\n size: v\n });\n }\n\n render() {\n return (\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".demo-ctl {\n background-color: #f1f1f1;\n padding: 10.0px;\n color: #0a7ac3;\n border-left: 4.0px solid #0d599a;\n}\n"},"body":"\n````jsx\nimport { Form, Input, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst Option = Select.Option;\nconst formItemLayout = {\n labelCol: {span: 4},\n wrapperCol: {span: 20}\n};\n\nclass Demo extends React.Component {\n state = {\n size: 'medium'\n }\n\n handleChange = (v) => {\n this.setState({\n size: v\n });\n }\n\n render() {\n return (\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo-ctl {\n background-color: #f1f1f1;\n padding: 10.0px;\n color: #0a7ac3;\n border-left: 4.0px solid #0d599a;\n}\n````","html":"
import { Form, Input, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst Option = Select.Option;\nconst formItemLayout = {\n    labelCol: {span: 4},\n    wrapperCol: {span: 20}\n};\n\nclass Demo extends React.Component {\n    state = {\n        size: 'medium'\n    }\n\n    handleChange = (v) => {\n        this.setState({\n            size: v\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <Form {...formItemLayout} size={this.state.size} style={{maxWidth: '500px'}}>\n                    <FormItem label=\"Size:\">\n                        <Select value={this.state.size} onChange={this.handleChange} style={{width: '100%'}}>\n                            <Option value=\"small\">small</Option>\n                            <Option value=\"medium\">medium</Option>\n                            <Option value=\"large\">large</Option>\n                        </Select>\n                    </FormItem>\n                    <FormItem label=\"Account:\">\n                        <Input placeholder=\"Please enter your user name\" id=\"userName\" name=\"userName\"/>\n                    </FormItem>\n                    <FormItem required label=\"Password:\">\n                        <Input htmlType=\"password\" placeholder=\"Please enter your password\" id=\"password\" name=\"password\"/>\n                    </FormItem>\n                    <FormItem label=\"Password:\" validateState=\"error\">\n                        <Input htmlType=\"password\" placeholder=\"Check your password\" id=\"rePass\" name=\"rePass\"/>\n                    </FormItem>\n                </Form>\n\n                <br/><br/>\n\n                <Form size={this.state.size} inline>\n                    <FormItem label=\"Size:\">\n                        <Select style={{width: '100%'}} value={this.state.size} onChange={this.handleChange}>\n                            <Option value=\"small\">small</Option>\n                            <Option value=\"medium\">medium</Option>\n                            <Option value=\"large\">large</Option>\n                        </Select>\n                    </FormItem>\n                    <FormItem label=\"Account:\">\n                        <Input placeholder=\"Please enter your user name\" id=\"userName2\" name=\"userName2\"/>\n                    </FormItem>\n                    <FormItem label=\"Password:\">\n                        <Input htmlType=\"password\" placeholder=\"Please enter your password\" id=\"password2\" name=\"password2\"/>\n                    </FormItem>\n                    <FormItem label=\"Password:\" validateState=\"error\">\n                        <Input htmlType=\"password\" placeholder=\"Check your password\" id=\"rePass2\" name=\"rePass2\"/>\n                    </FormItem>\n                </Form>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.demo-ctl {\n  background-color: #f1f1f1;\n  padding: 10.0px;\n  color: #0a7ac3;\n  border-left: 4.0px solid #0d599a;\n}
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/size.md b/compiled_docs/form/demo/size.md new file mode 100644 index 0000000000..5683ffd155 --- /dev/null +++ b/compiled_docs/form/demo/size.md @@ -0,0 +1 @@ +{"title":"尺寸","meta":{"title":"尺寸","description":"\n

size 会强制设置 FormItem 下的所有组件的size

\n

labelAlign label方位

\n

labelTextAlign 文字左右对齐方式

\n","order":"2"},"codes":{"jsx":"import { Form, Input, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst Option = Select.Option;\nconst formItemLayout = {\n labelCol: {span: 4},\n wrapperCol: {span: 20}\n};\n\nclass Demo extends React.Component {\n state = {\n size: 'medium'\n }\n\n handleChange = (v) => {\n this.setState({\n size: v\n });\n }\n\n render() {\n return (\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".demo-ctl {\n background-color: #f1f1f1;\n padding: 10.0px;\n color: #0a7ac3;\n border-left: 4.0px solid #0d599a;\n}\n"},"body":"\n\n````jsx\nimport { Form, Input, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst Option = Select.Option;\nconst formItemLayout = {\n labelCol: {span: 4},\n wrapperCol: {span: 20}\n};\n\nclass Demo extends React.Component {\n state = {\n size: 'medium'\n }\n\n handleChange = (v) => {\n this.setState({\n size: v\n });\n }\n\n render() {\n return (\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n\n

\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo-ctl {\n background-color: #f1f1f1;\n padding: 10.0px;\n color: #0a7ac3;\n border-left: 4.0px solid #0d599a;\n}\n````","html":"
import { Form, Input, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst Option = Select.Option;\nconst formItemLayout = {\n    labelCol: {span: 4},\n    wrapperCol: {span: 20}\n};\n\nclass Demo extends React.Component {\n    state = {\n        size: 'medium'\n    }\n\n    handleChange = (v) => {\n        this.setState({\n            size: v\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <Form {...formItemLayout} size={this.state.size} style={{maxWidth: '500px'}}>\n                    <FormItem label=\"Size:\">\n                        <Select value={this.state.size} onChange={this.handleChange} style={{width: '100%'}}>\n                            <Option value=\"small\">small</Option>\n                            <Option value=\"medium\">medium</Option>\n                            <Option value=\"large\">large</Option>\n                        </Select>\n                    </FormItem>\n                    <FormItem label=\"Account:\">\n                        <Input placeholder=\"Please enter your user name\" id=\"userName\" name=\"userName\"/>\n                    </FormItem>\n                    <FormItem required label=\"Password:\">\n                        <Input htmlType=\"password\" placeholder=\"Please enter your password\" id=\"password\" name=\"password\"/>\n                    </FormItem>\n                    <FormItem label=\"Password:\" validateState=\"error\">\n                        <Input htmlType=\"password\" placeholder=\"Check your password\" id=\"rePass\" name=\"rePass\"/>\n                    </FormItem>\n                </Form>\n\n                <br/><br/>\n\n                <Form size={this.state.size} inline>\n                    <FormItem label=\"Size:\">\n                        <Select style={{width: '100%'}} value={this.state.size} onChange={this.handleChange}>\n                            <Option value=\"small\">small</Option>\n                            <Option value=\"medium\">medium</Option>\n                            <Option value=\"large\">large</Option>\n                        </Select>\n                    </FormItem>\n                    <FormItem label=\"Account:\">\n                        <Input placeholder=\"Please enter your user name\" id=\"userName2\" name=\"userName2\"/>\n                    </FormItem>\n                    <FormItem label=\"Password:\">\n                        <Input htmlType=\"password\" placeholder=\"Please enter your password\" id=\"password2\" name=\"password2\"/>\n                    </FormItem>\n                    <FormItem label=\"Password:\" validateState=\"error\">\n                        <Input htmlType=\"password\" placeholder=\"Check your password\" id=\"rePass2\" name=\"rePass2\"/>\n                    </FormItem>\n                </Form>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.demo-ctl {\n  background-color: #f1f1f1;\n  padding: 10.0px;\n  color: #0a7ac3;\n  border-left: 4.0px solid #0d599a;\n}
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/top.en-us.md b/compiled_docs/form/demo/top.en-us.md new file mode 100644 index 0000000000..dfa5737df7 --- /dev/null +++ b/compiled_docs/form/demo/top.en-us.md @@ -0,0 +1 @@ +{"title":"Label on Top","meta":{"title":"Label on Top","description":"\n

size will specify the size of all components under FormItem;

\n

labelAlign Align of label

\n

labelTextAlign Align of text inlabel;

\n","order":"3"},"codes":{"jsx":"import { Form, Input, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst Option = Select.Option;\n\nclass Demo extends React.Component {\n render() {\n return (\n
\n
\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".demo-ctl {\n background-color: #f1f1f1;\n padding: 10.0px;\n color: #0a7ac3;\n border-left: 4.0px solid #0d599a;\n}\n"},"body":"\n````jsx\nimport { Form, Input, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst Option = Select.Option;\n\nclass Demo extends React.Component {\n render() {\n return (\n
\n
\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo-ctl {\n background-color: #f1f1f1;\n padding: 10.0px;\n color: #0a7ac3;\n border-left: 4.0px solid #0d599a;\n}\n````","html":"
import { Form, Input, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst Option = Select.Option;\n\nclass Demo extends React.Component {\n    render() {\n        return (\n            <div>\n                <Form labelAlign=\"top\" >\n                    <FormItem label=\"Account:\">\n                        <Input placeholder=\"Please enter your user name\" id=\"userName\" name=\"userName\"/>\n                    </FormItem>\n\n                    <FormItem required label=\"Password:\">\n                        <Input htmlType=\"password\" placeholder=\"Please enter your password\" id=\"password\" name=\"password\"/>\n                    </FormItem>\n\n                    <FormItem label=\"Password:\" validateState=\"error\">\n                        <Input htmlType=\"password\" placeholder=\"Please enter your password\" id=\"rePass\" name=\"rePass\"/>\n                    </FormItem>\n\n                    <FormItem label=\"Size:\">\n                        <Select style={{width: '100%'}} name=\"size\">\n                            <Option value=\"small\">small</Option>\n                            <Option value=\"medium\">medium</Option>\n                            <Option value=\"large\">large</Option>\n                        </Select>\n                    </FormItem>\n                </Form>\n\n                <Form inline labelAlign=\"top\">\n                    <FormItem label=\"Account:\">\n                        <Input placeholder=\"Please enter your user name\" id=\"userName2\" name=\"userName2\"/>\n                    </FormItem>\n                    <FormItem label=\"Password:\">\n                        <Input htmlType=\"password\" placeholder=\"Please enter your password\" id=\"password2\" name=\"password2\"/>\n                    </FormItem>\n                    <FormItem label=\"Password:\" validateState=\"error\">\n                        <Input htmlType=\"password\" placeholder=\"Please enter your password\" id=\"rePass2\" name=\"rePass2\"/>\n                    </FormItem>\n                    <FormItem label=\"Size:\">\n                        <Select style={{width: '100%'}} name=\"size2\">\n                            <Option value=\"small\">small</Option>\n                            <Option value=\"medium\">medium</Option>\n                            <Option value=\"large\">large</Option>\n                        </Select>\n                    </FormItem>\n                </Form>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.demo-ctl {\n  background-color: #f1f1f1;\n  padding: 10.0px;\n  color: #0a7ac3;\n  border-left: 4.0px solid #0d599a;\n}
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/top.md b/compiled_docs/form/demo/top.md new file mode 100644 index 0000000000..c75fa899f0 --- /dev/null +++ b/compiled_docs/form/demo/top.md @@ -0,0 +1 @@ +{"title":"标签在上","meta":{"title":"标签在上","description":"\n

size 会强制设置 FormItem 下的所有组件的size

\n

labelAlign label方位

\n

labelTextAlign 文字左右对齐方式

\n","order":"3"},"codes":{"jsx":"import { Form, Input, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst Option = Select.Option;\n\nclass Demo extends React.Component {\n render() {\n return (\n
\n
\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".demo-ctl {\n background-color: #f1f1f1;\n padding: 10.0px;\n color: #0a7ac3;\n border-left: 4.0px solid #0d599a;\n}\n"},"body":"\n\n````jsx\nimport { Form, Input, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst Option = Select.Option;\n\nclass Demo extends React.Component {\n render() {\n return (\n
\n
\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n
\n\n
\n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo-ctl {\n background-color: #f1f1f1;\n padding: 10.0px;\n color: #0a7ac3;\n border-left: 4.0px solid #0d599a;\n}\n````","html":"
import { Form, Input, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst Option = Select.Option;\n\nclass Demo extends React.Component {\n    render() {\n        return (\n            <div>\n                <Form labelAlign=\"top\" >\n                    <FormItem label=\"Account:\">\n                        <Input placeholder=\"Please enter your user name\" id=\"userName\" name=\"userName\"/>\n                    </FormItem>\n\n                    <FormItem required label=\"Password:\">\n                        <Input htmlType=\"password\" placeholder=\"Please enter your password\" id=\"password\" name=\"password\"/>\n                    </FormItem>\n\n                    <FormItem label=\"Password:\" validateState=\"error\">\n                        <Input htmlType=\"password\" placeholder=\"Please enter your password\" id=\"rePass\" name=\"rePass\"/>\n                    </FormItem>\n\n                    <FormItem label=\"Size:\">\n                        <Select style={{width: '100%'}} name=\"size\">\n                            <Option value=\"small\">small</Option>\n                            <Option value=\"medium\">medium</Option>\n                            <Option value=\"large\">large</Option>\n                        </Select>\n                    </FormItem>\n                </Form>\n\n                <Form inline labelAlign=\"top\">\n                    <FormItem label=\"Account:\">\n                        <Input placeholder=\"Please enter your user name\" id=\"userName2\" name=\"userName2\"/>\n                    </FormItem>\n                    <FormItem label=\"Password:\">\n                        <Input htmlType=\"password\" placeholder=\"Please enter your password\" id=\"password2\" name=\"password2\"/>\n                    </FormItem>\n                    <FormItem label=\"Password:\" validateState=\"error\">\n                        <Input htmlType=\"password\" placeholder=\"Please enter your password\" id=\"rePass2\" name=\"rePass2\"/>\n                    </FormItem>\n                    <FormItem label=\"Size:\">\n                        <Select style={{width: '100%'}} name=\"size2\">\n                            <Option value=\"small\">small</Option>\n                            <Option value=\"medium\">medium</Option>\n                            <Option value=\"large\">large</Option>\n                        </Select>\n                    </FormItem>\n                </Form>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.demo-ctl {\n  background-color: #f1f1f1;\n  padding: 10.0px;\n  color: #0a7ac3;\n  border-left: 4.0px solid #0d599a;\n}
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/validate-basic.en-us.md b/compiled_docs/form/demo/validate-basic.en-us.md new file mode 100644 index 0000000000..4a65146fff --- /dev/null +++ b/compiled_docs/form/demo/validate-basic.en-us.md @@ -0,0 +1 @@ +{"title":"Validate","meta":{"title":"Validate","description":"\n

Basic usage of validation.

\n","order":"9"},"codes":{"jsx":"import { Form, Input, Radio } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst RadioGroup = Radio.Group;\n\nconst formItemLayout = {\n labelCol: {\n span: 6\n },\n wrapperCol: {\n span: 14\n }\n};\n\nclass BasicDemo extends React.Component {\n userExists(rule, value) {\n return new Promise((resolve, reject) => {\n if (!value) {\n resolve();\n } else {\n setTimeout(() => {\n if (value === 'frank') {\n reject([new Error('Sorry, this username is already exist.')]);\n } else {\n resolve();\n }\n }, 500);\n }\n });\n }\n\n render() {\n return (\n
\n \n \n {\n (errors, state) => {\n if (state === 'loading') {\n return 'loading...';\n } else {\n return errors;\n }\n }\n }\n \n \n \n \n\n \n \n \n\n \n \n Male\n Female\n \n \n\n \n \n \n\n \n console.log(v, e)} style={{marginRight: 10}}>Submit\n Reset\n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Form, Input, Radio } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst RadioGroup = Radio.Group;\n\nconst formItemLayout = {\n labelCol: {\n span: 6\n },\n wrapperCol: {\n span: 14\n }\n};\n\nclass BasicDemo extends React.Component {\n userExists(rule, value) {\n return new Promise((resolve, reject) => {\n if (!value) {\n resolve();\n } else {\n setTimeout(() => {\n if (value === 'frank') {\n reject([new Error('Sorry, this username is already exist.')]);\n } else {\n resolve();\n }\n }, 500);\n }\n });\n }\n\n render() {\n return (\n
\n \n \n {\n (errors, state) => {\n if (state === 'loading') {\n return 'loading...';\n } else {\n return errors;\n }\n }\n }\n \n \n \n \n\n \n \n \n\n \n \n Male\n Female\n \n \n\n \n \n \n\n \n console.log(v, e)} style={{marginRight: 10}}>Submit\n Reset\n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Form, Input, Radio } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst RadioGroup = Radio.Group;\n\nconst formItemLayout = {\n    labelCol: {\n        span: 6\n    },\n    wrapperCol: {\n        span: 14\n    }\n};\n\nclass BasicDemo extends React.Component {\n    userExists(rule, value) {\n        return new Promise((resolve, reject) => {\n            if (!value) {\n                resolve();\n            } else {\n                setTimeout(() => {\n                    if (value === 'frank') {\n                        reject([new Error('Sorry, this username is already exist.')]);\n                    } else {\n                        resolve();\n                    }\n                }, 500);\n            }\n        });\n    }\n\n    render() {\n        return (\n            <Form {...formItemLayout} >\n                <FormItem\n                    label=\"Account:\"\n                    hasFeedback\n                    validator={this.userExists.bind(this)}\n                    help=\"\"\n                >\n                    <Input placeholder=\"Input frank\" name=\"valUsername\" />\n                    <Form.Error name=\"valUsername\" >{\n                        (errors, state) => {\n                            if (state === 'loading') {\n                                return 'loading...';\n                            } else {\n                                return errors;\n                            }\n                        }\n                    }</Form.Error>\n                </FormItem>\n                <FormItem\n                    label=\"Email:\"\n                    hasFeedback\n                    required\n                    requiredTrigger=\"onBlur\"\n                    format=\"email\"\n                >\n                    <Input placeholder=\"Both trigget onBlur and onChange\" name=\"valEmail\" />\n                </FormItem>\n\n                <FormItem\n                    label=\"Password:\"\n                    hasFeedback\n                    required\n                    requiredMessage=\"Please enter password\"\n                >\n                    <Input htmlType=\"password\" name=\"valPasswd\" />\n                </FormItem>\n\n                <FormItem\n                    label=\"Gender:\"\n                    hasFeedback\n                    required\n                    requiredMessage=\"Please select your gender\"\n                >\n                    <RadioGroup name=\"valSex\" >\n                        <Radio value=\"male\">Male</Radio>\n                        <Radio value=\"female\">Female</Radio>\n                    </RadioGroup>\n                </FormItem>\n\n                <FormItem\n                    label=\"Remarks:\"\n                    required\n                    requiredMessage=\"Really do not intend to write anything?\"\n                >\n                    <Input.TextArea maxLength={20} hasLimitHint placeholder=\"Everything is ok!\" name=\"valTextarea\" />\n                </FormItem>\n\n                <FormItem wrapperCol={{ offset: 6 }} >\n                    <Form.Submit validate type=\"primary\" onClick={(v, e) => console.log(v, e)} style={{marginRight: 10}}>Submit</Form.Submit>\n                    <Form.Reset >Reset</Form.Reset>\n                </FormItem>\n            </Form>\n        );\n    }\n}\n\nReactDOM.render(<BasicDemo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/validate-basic.md b/compiled_docs/form/demo/validate-basic.md new file mode 100644 index 0000000000..da8dd9c5e5 --- /dev/null +++ b/compiled_docs/form/demo/validate-basic.md @@ -0,0 +1 @@ +{"title":"校验","meta":{"title":"校验","description":"\n

基本的表单校验例子。

\n","order":"9"},"codes":{"jsx":"import { Form, Input, Radio } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst RadioGroup = Radio.Group;\n\nconst formItemLayout = {\n labelCol: {\n span: 6\n },\n wrapperCol: {\n span: 14\n }\n};\n\nclass BasicDemo extends React.Component {\n userExists(rule, value) {\n return new Promise((resolve, reject) => {\n if (!value) {\n resolve();\n } else {\n setTimeout(() => {\n if (value === 'frank') {\n reject([new Error('Sorry, this username is already exist.')]);\n } else {\n resolve();\n }\n }, 500);\n }\n });\n }\n\n render() {\n return (\n
\n \n \n {\n (errors, state) => {\n if (state === 'loading') {\n return 'loading...';\n } else {\n return errors;\n }\n }\n }\n \n \n \n \n\n \n \n \n\n \n \n Male\n Female\n \n \n\n \n \n \n\n \n console.log(v, e)} style={{marginRight: 10}}>Submit\n Reset\n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Form, Input, Radio } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst RadioGroup = Radio.Group;\n\nconst formItemLayout = {\n labelCol: {\n span: 6\n },\n wrapperCol: {\n span: 14\n }\n};\n\nclass BasicDemo extends React.Component {\n userExists(rule, value) {\n return new Promise((resolve, reject) => {\n if (!value) {\n resolve();\n } else {\n setTimeout(() => {\n if (value === 'frank') {\n reject([new Error('Sorry, this username is already exist.')]);\n } else {\n resolve();\n }\n }, 500);\n }\n });\n }\n\n render() {\n return (\n
\n \n \n {\n (errors, state) => {\n if (state === 'loading') {\n return 'loading...';\n } else {\n return errors;\n }\n }\n }\n \n \n \n \n\n \n \n \n\n \n \n Male\n Female\n \n \n\n \n \n \n\n \n console.log(v, e)} style={{marginRight: 10}}>Submit\n Reset\n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Form, Input, Radio } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\nconst RadioGroup = Radio.Group;\n\nconst formItemLayout = {\n    labelCol: {\n        span: 6\n    },\n    wrapperCol: {\n        span: 14\n    }\n};\n\nclass BasicDemo extends React.Component {\n    userExists(rule, value) {\n        return new Promise((resolve, reject) => {\n            if (!value) {\n                resolve();\n            } else {\n                setTimeout(() => {\n                    if (value === 'frank') {\n                        reject([new Error('Sorry, this username is already exist.')]);\n                    } else {\n                        resolve();\n                    }\n                }, 500);\n            }\n        });\n    }\n\n    render() {\n        return (\n            <Form {...formItemLayout} >\n                <FormItem\n                    label=\"Account:\"\n                    hasFeedback\n                    validator={this.userExists.bind(this)}\n                    help=\"\"\n                >\n                    <Input placeholder=\"Input frank\" name=\"valUsername\" />\n                    <Form.Error name=\"valUsername\" >{\n                        (errors, state) => {\n                            if (state === 'loading') {\n                                return 'loading...';\n                            } else {\n                                return errors;\n                            }\n                        }\n                    }</Form.Error>\n                </FormItem>\n                <FormItem\n                    label=\"Email:\"\n                    hasFeedback\n                    required\n                    requiredTrigger=\"onBlur\"\n                    format=\"email\"\n                >\n                    <Input placeholder=\"Both trigget onBlur and onChange\" name=\"valEmail\" />\n                </FormItem>\n\n                <FormItem\n                    label=\"Password:\"\n                    hasFeedback\n                    required\n                    requiredMessage=\"Please enter password\"\n                >\n                    <Input htmlType=\"password\" name=\"valPasswd\" />\n                </FormItem>\n\n                <FormItem\n                    label=\"Gender:\"\n                    hasFeedback\n                    required\n                    requiredMessage=\"Please select your gender\"\n                >\n                    <RadioGroup name=\"valSex\" >\n                        <Radio value=\"male\">Male</Radio>\n                        <Radio value=\"female\">Female</Radio>\n                    </RadioGroup>\n                </FormItem>\n\n                <FormItem\n                    label=\"Remarks:\"\n                    required\n                    requiredMessage=\"Really do not intend to write anything?\"\n                >\n                    <Input.TextArea maxLength={20} hasLimitHint placeholder=\"Everything is ok!\" name=\"valTextarea\" />\n                </FormItem>\n\n                <FormItem wrapperCol={{ offset: 6 }} >\n                    <Form.Submit validate type=\"primary\" onClick={(v, e) => console.log(v, e)} style={{marginRight: 10}}>Submit</Form.Submit>\n                    <Form.Reset >Reset</Form.Reset>\n                </FormItem>\n            </Form>\n        );\n    }\n}\n\nReactDOM.render(<BasicDemo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/validate-custom-error.en-us.md b/compiled_docs/form/demo/validate-custom-error.en-us.md new file mode 100644 index 0000000000..10226bee40 --- /dev/null +++ b/compiled_docs/form/demo/validate-custom-error.en-us.md @@ -0,0 +1 @@ +{"title":"Validate","meta":{"title":"Validate","description":"\n

Basic usage of validation.

\n","order":"9"},"codes":{"jsx":"import { Form, Input, Field } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n labelCol: {\n span: 6\n },\n wrapperCol: {\n span: 14\n }\n};\n\nclass BasicDemo extends React.Component {\n field = new Field(this);\n\n render() {\n const {\n field,\n field: {\n init,\n }\n } = this;\n return (\n
\n\n \n This is a CUSTOM error);\n }\n }]\n })} />\n \n \n Submit\n Reset\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Form, Input, Field } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n labelCol: {\n span: 6\n },\n wrapperCol: {\n span: 14\n }\n};\n\nclass BasicDemo extends React.Component {\n field = new Field(this);\n\n render() {\n const {\n field,\n field: {\n init,\n }\n } = this;\n return (\n
\n\n \n This is a CUSTOM error);\n }\n }]\n })} />\n \n \n Submit\n Reset\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Form, Input, Field } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n    labelCol: {\n        span: 6\n    },\n    wrapperCol: {\n        span: 14\n    }\n};\n\nclass BasicDemo extends React.Component {\n    field = new Field(this);\n\n    render() {\n        const {\n            field,\n            field: {\n                init,\n            }\n        } = this;\n        return (\n            <Form {...formItemLayout} field={field} >\n\n                <Form.Item label=\"test\" key=\"test2\">\n                    <Input  {...init('input', {\n                    rules: [{\n                        validator(_rule, value, callback) {\n                        callback(<span>This is a <em>CUSTOM</em> error</span>);\n                        }\n                    }]\n                    })}  />\n                </Form.Item>\n                <FormItem wrapperCol={{ offset: 6 }} >\n                    <Form.Submit validate type=\"primary\">Submit</Form.Submit>\n                    <Form.Reset >Reset</Form.Reset>\n                </FormItem>\n            </Form>\n        );\n    }\n}\n\nReactDOM.render(<BasicDemo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/validate-custom-error.md b/compiled_docs/form/demo/validate-custom-error.md new file mode 100644 index 0000000000..799ab7d90d --- /dev/null +++ b/compiled_docs/form/demo/validate-custom-error.md @@ -0,0 +1 @@ +{"title":"校验","meta":{"title":"校验","description":"\n

基本的表单校验例子。

\n","order":"9"},"codes":{"jsx":"import { Form, Input, Field } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n labelCol: {\n span: 6\n },\n wrapperCol: {\n span: 14\n }\n};\n\nclass BasicDemo extends React.Component {\n field = new Field(this);\n\n render() {\n const {\n field,\n field: {\n init,\n }\n } = this;\n return (\n
\n\n \n This is a CUSTOM error);\n }\n }]\n })} />\n \n \n Submit\n Reset\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Form, Input, Field } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n labelCol: {\n span: 6\n },\n wrapperCol: {\n span: 14\n }\n};\n\nclass BasicDemo extends React.Component {\n field = new Field(this);\n\n render() {\n const {\n field,\n field: {\n init,\n }\n } = this;\n return (\n
\n\n \n This is a CUSTOM error);\n }\n }]\n })} />\n \n \n Submit\n Reset\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Form, Input, Field } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n    labelCol: {\n        span: 6\n    },\n    wrapperCol: {\n        span: 14\n    }\n};\n\nclass BasicDemo extends React.Component {\n    field = new Field(this);\n\n    render() {\n        const {\n            field,\n            field: {\n                init,\n            }\n        } = this;\n        return (\n            <Form {...formItemLayout} field={field} >\n\n                <Form.Item label=\"test\" key=\"test2\">\n                    <Input  {...init('input', {\n                    rules: [{\n                        validator(_rule, value, callback) {\n                        callback(<span>This is a <em>CUSTOM</em> error</span>);\n                        }\n                    }]\n                    })}  />\n                </Form.Item>\n                <FormItem wrapperCol={{ offset: 6 }} >\n                    <Form.Submit validate type=\"primary\">Submit</Form.Submit>\n                    <Form.Reset >Reset</Form.Reset>\n                </FormItem>\n            </Form>\n        );\n    }\n}\n\nReactDOM.render(<BasicDemo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/validate-static.en-us.md b/compiled_docs/form/demo/validate-static.en-us.md new file mode 100644 index 0000000000..7a6783ac17 --- /dev/null +++ b/compiled_docs/form/demo/validate-static.en-us.md @@ -0,0 +1 @@ +{"title":"Valedation prompt","meta":{"title":"Valedation prompt","description":"\n

Define the state attribute for <FormItem> to control the three valedation states.

\n

If it is an <Input> component, you can add hasFeedback to control icon on <FormItem>

\n

Note: The feedback icon is only valid for <Input />.

\n","order":"8"},"codes":{"jsx":"import { Form, Input, DatePicker, TimePicker, NumberPicker, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n labelCol: {\n span: 6\n },\n wrapperCol: {\n span: 14\n }\n};\n\nReactDOM.render(\n
\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n
\n , mountNode);\n"},"body":"\n````jsx\nimport { Form, Input, DatePicker, TimePicker, NumberPicker, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n labelCol: {\n span: 6\n },\n wrapperCol: {\n span: 14\n }\n};\n\nReactDOM.render(\n
\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n
\n , mountNode);\n````","html":"
import { Form, Input, DatePicker, TimePicker, NumberPicker, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n    labelCol: {\n        span: 6\n    },\n    wrapperCol: {\n        span: 14\n    }\n};\n\nReactDOM.render(\n    <Form {...formItemLayout}>\n        <FormItem label=\"Input Error：\" validateState=\"error\" help=\"Please enter a numeric and alphabetic string\">\n            <Input defaultValue=\"Invalid choice\"/>\n        </FormItem>\n\n        <FormItem label=\"Loading：\" hasFeedback validateState=\"loading\" help=\"Information Checking...\">\n            <Input defaultValue=\"Checking\"/>\n        </FormItem>\n\n        <FormItem label=\"Success：\" hasFeedback validateState=\"success\">\n            <Input defaultValue=\"Successful verification\"/>\n        </FormItem>\n\n        <FormItem label=\"Datepicker：\" validateState=\"error\" help=\"Please select the correct date\">\n            <DatePicker />\n        </FormItem>\n\n        <FormItem label=\"Timepicker：\" validateState=\"error\" help=\"Please select the correct time\">\n            <TimePicker />\n        </FormItem>\n\n        <FormItem label=\"Select：\" validateState=\"error\" help=\"Please select a country\">\n            <Select placeholder=\"Please select a country\">\n                <option value=\"china\">China</option>\n                <option value=\"use\">United States</option>\n                <option value=\"japan\">Japan</option>\n                <option value=\"korean\">South Korea</option>\n                <option value=\"Thailand\">Thailand</option>\n            </Select>\n        </FormItem>\n\n        <FormItem label=\"NumberPicker：\" validateState=\"error\">\n            <NumberPicker defaultValue={0} />\n        </FormItem>\n    </Form>\n    , mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/demo/validate-static.md b/compiled_docs/form/demo/validate-static.md new file mode 100644 index 0000000000..b25f41d779 --- /dev/null +++ b/compiled_docs/form/demo/validate-static.md @@ -0,0 +1 @@ +{"title":"校验提示","meta":{"title":"校验提示","description":"\n

为 <FormItem> 定义 state 属性控制三种校验状态。

\n

如果是 <Input> 组件, 可在<FormItem>上面添加 hasFeedback 控制图标的展示

\n

注意: 反馈图标只对 <Input /> 有效。

\n","order":"8"},"codes":{"jsx":"import { Form, Input, DatePicker, TimePicker, NumberPicker, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n labelCol: {\n span: 6\n },\n wrapperCol: {\n span: 14\n }\n};\n\nReactDOM.render(\n
\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n
\n , mountNode);\n"},"body":"\n\n````jsx\nimport { Form, Input, DatePicker, TimePicker, NumberPicker, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n labelCol: {\n span: 6\n },\n wrapperCol: {\n span: 14\n }\n};\n\nReactDOM.render(\n
\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n
\n , mountNode);\n````","html":"
import { Form, Input, DatePicker, TimePicker, NumberPicker, Select } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst formItemLayout = {\n    labelCol: {\n        span: 6\n    },\n    wrapperCol: {\n        span: 14\n    }\n};\n\nReactDOM.render(\n    <Form {...formItemLayout}>\n        <FormItem label=\"Input Error：\" validateState=\"error\" help=\"Please enter a numeric and alphabetic string\">\n            <Input defaultValue=\"Invalid choice\"/>\n        </FormItem>\n\n        <FormItem label=\"Loading：\" hasFeedback validateState=\"loading\" help=\"Information Checking...\">\n            <Input defaultValue=\"Checking\"/>\n        </FormItem>\n\n        <FormItem label=\"Success：\" hasFeedback validateState=\"success\">\n            <Input defaultValue=\"Successful verification\"/>\n        </FormItem>\n\n        <FormItem label=\"Datepicker：\" validateState=\"error\" help=\"Please select the correct date\">\n            <DatePicker />\n        </FormItem>\n\n        <FormItem label=\"Timepicker：\" validateState=\"error\" help=\"Please select the correct time\">\n            <TimePicker />\n        </FormItem>\n\n        <FormItem label=\"Select：\" validateState=\"error\" help=\"Please select a country\">\n            <Select placeholder=\"Please select a country\">\n                <option value=\"china\">China</option>\n                <option value=\"use\">United States</option>\n                <option value=\"japan\">Japan</option>\n                <option value=\"korean\">South Korea</option>\n                <option value=\"Thailand\">Thailand</option>\n            </Select>\n        </FormItem>\n\n        <FormItem label=\"NumberPicker：\" validateState=\"error\">\n            <NumberPicker defaultValue={0} />\n        </FormItem>\n    </Form>\n    , mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/form/index.en-us.md b/compiled_docs/form/index.en-us.md new file mode 100644 index 0000000000..ec1fe93fb0 --- /dev/null +++ b/compiled_docs/form/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Guide#

When To Use#

Form layout, validation, data submission operations used.

\n

Note#

    \n
  • Components do not use the keyword nodeName as the name and input`s id.
    • \n
  • Form uses size="medium" by default and controls the size of all components in the FormItem. If you want to modify the component size, set <FormItem size="small" >.
    • \n
  • In the vertical layout form, if the text (generally <p> tag) or component deviates upwards, it can be adjusted with className="next-form-text-align"
    • \n
  • It must be a component wrapped directly by <FormItem> to display the error message. If the error did not show, check whether there are multiple levels DOM. For example, <FormItem><div><Input/></div></FormItem> is unable to display error message.
    • \n
\n

API#

","api":"

Form#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
inlineInline formBoolean-
sizeCustomization of a single Item's size takes precedence over Form's size, and when the component is used with Item, the component itself sets the size attribute to be invalid.

option:
'large'
'medium'
'small'		Enum'medium'
labelAlignTo set the position align of label

option:
'top'
'left'
'inset'		Enum'left'
labelTextAlignTo set the position align of text in label

option:
'left'
'right'		Enum-
fieldBy the initialization of new Field(this), set to Form right. Do not ignore specify this, when use validation on form.any-
saveFieldsave field which create by Form

签名:
Function() => void		Functionfunc.noop
labelColControls the labelCol of the first-level ItemObject-
wrapperColControls the wrapperCol of the first-level ItemObject-
onSubmitTrigget when submit with htmlType="submit" in the form

signatures:
Function() => void		Functionfunction preventDefault(e) { e.preventDefault(); }
childrenChildren componentsany-
valueThe value data of then formObject-
onChangeCallback fuction trigget on form changed

signatures:
Function() => void		Functionfunc.noop
componentThe html tag to be renderedString'form'
\n

Form.Item#

\n

Passing the wrapCol labelCol will use the Grid auxiliary layout; labelAlign = 'top' will force the Grid to be disabled

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
labelTo set the label of itemReactNode-
sizeCustomization of Item's own size takes precedence over Form's size. when Form and Item both set the size, the component itself sets the size attribute to be invalid。

option:
'large', 'small', 'medium'		Enum-
labelColTo set label's layout same as <Col> setting the span offset, such as {span:8,offset:16}. It only valid in vertical forms.Object-
wrapperColWhen you need to set the layout style for the input control, use this property, use the same with the labelColObject-
helpCustom prompt information, if not set, it will be automatically generated according to the check rule.ReactNode-
validateStateSet the validation state, if not set, it will be automatically generated according to the check rule

option:
'error'
'success'
'loading'		Enum-
hasFeedbackUsed with the validateState property, whether to display the success/loading check status icon. Currently only Input supportBooleanfalse
extraAdditional prompt information, similar to help, can be used when error messages and prompts are required to appear at the same time. Behind the error messageReactNode-
labelAlignPosition align of label

option:
'top'
'left'
'inset'		Enum-
labelTextAlignPosition align of label's text

option:
'left'
'right'		Enum-
required[validation] cannot be emptyBoolean-
asteriskrequired asterisk is displayedBooleantrue
requiredMessagerequired custom error messageString-
requiredTriggerrequired Custom TriggerString/Array-
min[validation] MinimumNumber-
minMessagecustom error message for minString-
minTriggerCustom trigger mode for minString/Array-
max[validation] MaximumNumber-
maxMessagecustom error message for maxString-
maxTriggerCustom Trigger for maxString/Array-
minLength[validation] Minimum string length / Minimum number of arraysNumber-
minLengthMessagecustom error message for minLengthString-
minLengthTriggerCustom Trigger for minLengthString/Array-
maxLength[validation] Max Length of String/Maximum Number of ArraysNumber-
maxLengthMessagecustom error message for maxLengthString-
maxLengthTriggerCustom Trigger for maxLengthString/Array-
length[validation] exact length of string / exact number of arraysNumber-
lengthMessagecustom error message for lengthString-
lengthTriggercustom trigger method for lengthString/Array-
patterncustom pattern yourselfpattern-
format[validation] four common patterns

optional values:
'number', 'email', 'url', 'tel'		Enum-
formatMessagecustom error message for formatString-
formatTriggercustom trigger mode for formatString/Array-
validator[validation] custom validation function

signature :
Function() => void		Function-
autoValidatevalidate while value changedBoolean-
\n

Form.Reset#

\n

Inherit the Button API

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
namesSpecify the reset fieldArray-
onClickCallback function trigget after click Reset-Button

signatures:
Function() => void		Functionfunc.noop
toDefaultReset to default valueBoolean-
fieldSpecify field (No need in Form )Object-
\n

Form.Submit#

\n

Inherit the Button API

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
onClickCallback function trigget after click Submit-Button

signatures:
Function(value: Object, errors: Object) => void
params:
value: {Object} values
errors: {Object} errors
field: {class} Field instance		Functionfunc.noop
validateSpecify the field, whitch need validate.Boolean/Array-
fieldSpecify field (No need in Form )Object-
\n

Form.Error#

\n

custom error message

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
nameSpecify the reset fieldString/Array-
fieldSpecify field (No need in Form )Object-
childrencan be a ReactNode or a function(errors, state)ReactNode/Function-
\n

About Validation#

    \n
  • Suggest put FormItem as one component, convenient error prompt follow component display.
    • \n
  • The component must be the first child of the FormItem.
    • \n
  • See the more validation's rules for the Field component documentation.
    • \n
\n"} \ No newline at end of file diff --git a/compiled_docs/form/index.md b/compiled_docs/form/index.md new file mode 100644 index 0000000000..5f578bfd5b --- /dev/null +++ b/compiled_docs/form/index.md @@ -0,0 +1 @@ +{"meta":"

开发指南#

何时使用#

表单布局、校验、数据提交操作时用到。 组件的设计思想可以看这篇文章 https://zhuanlan.zhihu.com/p/56280821

\n

注意事项#

    \n
  • 组件不要使用关键字 nodeName 作为 name、id
    • \n
  • Form 默认使用 size=medium, 并且会控制 FormItem 内所有组件的size。 如果想修改组件的size <FormItem size="small" >
    • \n
  • 在垂直表单中如果文字（一般 <p> 标签）或者组件向上偏离，可以通过 className="next-form-text-align" 辅助调整
    • \n
  • 必须是被 <FormItem>直接包裹的组件才能展示校验错误提示。如果界面不展示错误信息，请检查是否有多个层级。 比如 <FormItem><div><Input/></div></FormItem> 是无法展示校验信息的。
    • \n
\n

API#

","api":"

Form#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
inline内联表单Boolean-
size单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。

可选值:
'large'(大)
'medium'(中)
'small'(小)		Enum'medium'
labelAlign标签的位置

可选值:
'top'(上)
'left'(左)
'inset'(内)		Enum'left'
labelTextAlign标签的左右对齐方式

可选值:
'left'(左)
'right'(右)		Enum-
field经 new Field(this) 初始化后，直接传给 Form 即可 用到表单校验则不可忽略此项any-
saveField保存 Form 自动生成的 field 对象

签名:
Function() => void		Functionfunc.noop
labelCol控制第一级 Item 的 labelColObject-
wrapperCol控制第一级 Item 的 wrapperColObject-
onSubmitform内有 htmlType="submit" 的元素的时候会触发

签名:
Function() => void		Functionfunction preventDefault(e) { e.preventDefault(); }
children子元素any-
value表单数值Object-
onChange表单变化回调

签名:
Function(values: Object, item: Object) => void
参数:
values: {Object} 表单数据
item: {Object} 详细
item.name: {String} 变化的组件名
item.value: {String} 变化的数据
item.field: {Object} field 实例		Functionfunc.noop
component设置标签类型String/Function'form'
\n

Form.Item#

\n

手动传递了 wrapCol labelCol 会使用 Grid 辅助布局; labelAlign='top' 会强制禁用 Grid

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
labellabel 标签的文本ReactNode-
size单个 Item 的 size 自定义，优先级高于 Form 的 size, 并且当组件与 Item 一起使用时，组件自身设置 size 属性无效。

可选值:
'large', 'small', 'medium'		Enum-
labelCollabel 标签布局，通 <Col> 组件，设置 span offset 值，如 {span: 8, offset: 16}，该项仅在垂直表单有效Object-
wrapperCol需要为输入控件设置布局样式时，使用该属性，用法同 labelColObject-
help自定义提示信息，如不设置，则会根据校验规则自动生成.ReactNode-
extra额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 位于错误信息后面ReactNode-
validateState校验状态，如不设置，则会根据校验规则自动生成

可选值:
'error'(成功)
'success'(失败)
'loading'(校验中)		Enum-
hasFeedback配合 validateState 属性使用，是否展示 success/loading 的校验状态图标, 目前只有Input支持Booleanfalse
childrennode 或者 function(values)ReactNode/Function-
labelAlign标签的位置

可选值:
'top'(上)
'left'(左)
'inset'(内)		Enum-
labelTextAlign标签的左右对齐方式

可选值:
'left'(左)
'right'(右)		Enum-
required[表单校验] 不能为空Boolean-
asteriskrequired 的星号是否显示Boolean-
requiredMessagerequired 自定义错误信息String-
requiredTriggerrequired 自定义触发方式String/Array-
min[表单校验] 最小值Number-
max[表单校验] 最大值Number-
minmaxMessagemin/max 自定义错误信息String-
minmaxTriggermin/max 自定义触发方式String/Array-
minLength[表单校验] 字符串最小长度 / 数组最小个数Number-
maxLength[表单校验] 字符串最大长度 / 数组最大个数Number-
minmaxLengthMessageminLength/maxLength 自定义错误信息String-
minmaxLengthTriggerminLength/maxLength 自定义触发方式String/Array-
length[表单校验] 字符串精确长度 / 数组精确个数Number-
lengthMessagelength 自定义错误信息String-
lengthTriggerlength 自定义触发方式String/Array-
pattern正则校验any-
patternMessagepattern 自定义错误信息String-
patternTriggerpattern 自定义触发方式String/Array-
format[表单校验] 四种常用的 pattern

可选值:
'number', 'email', 'url', 'tel'		Enum-
formatMessageformat 自定义错误信息String-
formatTriggerformat 自定义触发方式String/Array-
validator[表单校验] 自定义校验函数

签名:
Function() => void		Function-
validatorTriggervalidator 自定义触发方式String/Array-
autoValidate是否修改数据时自动触发校验Boolean-
\n

Form.Submit#

\n

继承 Button API

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
onClick点击提交后触发

签名:
Function(value: Object, errors: Object, field: class) => void
参数:
value: {Object} 数据
errors: {Object} 错误数据
field: {class} 实例		Functionfunc.noop
validate是否校验/需要校验的 name 数组Boolean/Array-
field自定义 field (在 Form 内不需要设置)Object-
\n

Form.Reset#

\n

继承 Button API

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
names自定义重置的字段Array-
onClick点击提交后触发

签名:
Function() => void		Functionfunc.noop
toDefault返回默认值Boolean-
field自定义 field (在 Form 内不需要设置)Object-
\n

Form.Error#

\n

自定义错误展示

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
name表单名String/Array-
field自定义 field (在 Form 内不需要设置)Object-
children自定义错误渲染, 可以是 node 或者 function(errors, state)ReactNode/Function-
\n

关于校验#

    \n
  • 建议一个FormItem放一个组件, 方便错误提示跟随组件展示
    • \n
  • 组件必须是FormItem的第一层子元素
    • \n
  • 详细校验请查看 Field 组件文档的 rules
    • \n
\n"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/align.en-us.md b/compiled_docs/grid/demo/align.en-us.md new file mode 100644 index 0000000000..6b1371b32e --- /dev/null +++ b/compiled_docs/grid/demo/align.en-us.md @@ -0,0 +1 @@ +{"title":"Vertical alignment of columns","meta":{"title":"Vertical alignment of columns","description":"\n

(IE9 is not supported) Based on Flex's align-items and align-self attributes, set the align property on Row to control the vertical alignment of all Col below Row: top (top alignment, default), center (center alignment), bottom (bottom alignment), baseline (baseline alignment of the first line of text), stretch (if no height is set or set to auto, it will fill the height of the entire container); set the align property on Col, it can override the align property of Row.

\n","order":"10"},"codes":{"jsx":"import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
top
\n \n col-8\n col-8\n col-8\n \n\n
center
\n \n col-8\n col-8\n col-8\n \n\n
bottom
\n \n col-8\n col-8\n col-8\n \n\n
baseline
\n \n col-8\n col-8\n col-8\n \n\n
stretch
\n \n col-8\n col-8\n col-8\n \n\n
override
\n \n col-8\n col-8\n col-8\n \n
, mountNode);\n","css":".align-demo .demo-title {\n margin-left: 20px;\n}\n\n.align-demo .next-row {\n margin: 10px 0;\n}\n\n.align-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n````jsx\nimport { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
top
\n \n col-8\n col-8\n col-8\n \n\n
center
\n \n col-8\n col-8\n col-8\n \n\n
bottom
\n \n col-8\n col-8\n col-8\n \n\n
baseline
\n \n col-8\n col-8\n col-8\n \n\n
stretch
\n \n col-8\n col-8\n col-8\n \n\n
override
\n \n col-8\n col-8\n col-8\n \n
, mountNode);\n````\n\n````css\n.align-demo .demo-title {\n margin-left: 20px;\n}\n\n.align-demo .next-row {\n margin: 10px 0;\n}\n\n.align-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n    <div className=\"align-demo\">\n        <div className=\"demo-title\">top</div>\n        <Row align=\"top\">\n            <Col span=\"8\" style={{ height: '100px', lineHeight: '100px' }}>col-8</Col>\n            <Col span=\"8\" style={{ height: '50px', lineHeight: '50px' }}>col-8</Col>\n            <Col span=\"8\" style={{ height: '150px', lineHeight: '150px' }}>col-8</Col>\n        </Row>\n\n        <div className=\"demo-title\">center</div>\n        <Row align=\"center\">\n            <Col span=\"8\" style={{ height: '100px', lineHeight: '100px' }}>col-8</Col>\n            <Col span=\"8\" style={{ height: '50px', lineHeight: '50px' }}>col-8</Col>\n            <Col span=\"8\" style={{ height: '150px', lineHeight: '150px' }}>col-8</Col>\n        </Row>\n\n        <div className=\"demo-title\">bottom</div>\n        <Row align=\"bottom\">\n            <Col span=\"8\" style={{ height: '100px', lineHeight: '100px' }}>col-8</Col>\n            <Col span=\"8\" style={{ height: '50px', lineHeight: '50px' }}>col-8</Col>\n            <Col span=\"8\" style={{ height: '150px', lineHeight: '150px' }}>col-8</Col>\n        </Row>\n\n        <div className=\"demo-title\">baseline</div>\n        <Row align=\"baseline\">\n            <Col span=\"8\" style={{ height: '100px', paddingTop: '20px', fontSize: '30px' }}>col-8</Col>\n            <Col span=\"8\" style={{ height: '50px', paddingTop: '20px', fontSize: '20px' }}>col-8</Col>\n            <Col span=\"8\" style={{ height: '150px', paddingTop: '20px', fontSize: '40px' }}>col-8</Col>\n        </Row>\n\n        <div className=\"demo-title\">stretch</div>\n        <Row align=\"stretch\" style={{ height: '150px' }}>\n            <Col span=\"8\">col-8</Col>\n            <Col span=\"8\">col-8</Col>\n            <Col span=\"8\">col-8</Col>\n        </Row>\n\n        <div className=\"demo-title\">override</div>\n        <Row align=\"top\">\n            <Col align=\"bottom\" span=\"8\" style={{ height: '100px', lineHeight: '100px' }}>col-8</Col>\n            <Col span=\"8\" style={{ height: '50px', lineHeight: '50px' }}>col-8</Col>\n            <Col span=\"8\" style={{ height: '150px', lineHeight: '150px' }}>col-8</Col>\n        </Row>\n    </div>, mountNode);
.align-demo .demo-title {\n    margin-left: 20px;\n}\n\n.align-demo .next-row {\n    margin: 10px 0;\n}\n\n.align-demo .next-col {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/align.md b/compiled_docs/grid/demo/align.md new file mode 100644 index 0000000000..d6ced98f0a --- /dev/null +++ b/compiled_docs/grid/demo/align.md @@ -0,0 +1 @@ +{"title":"多列垂直方向对齐方式","meta":{"title":"多列垂直方向对齐方式","description":"\n

（不支持 IE9 浏览器）基于 Flex 的 align-items 和 align-self 属性实现，在 Row 上设置 align 属性，即可控制 Row 下面所有 Col 的垂直方向对齐方式：top（顶部对齐，默认），center（居中对齐），bottom（底部对齐），baseline（第一行文字的基线对齐），stretch（如果未设置高度或设为 auto，将占满整个容器的高度）；在 Col 上设置 align 属性，可允许它与其它列不一样的对齐方式，覆盖 Row 的 align 属性。

\n","order":"10"},"codes":{"jsx":"import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
top
\n \n col-8\n col-8\n col-8\n \n\n
center
\n \n col-8\n col-8\n col-8\n \n\n
bottom
\n \n col-8\n col-8\n col-8\n \n\n
baseline
\n \n col-8\n col-8\n col-8\n \n\n
stretch
\n \n col-8\n col-8\n col-8\n \n\n
override
\n \n col-8\n col-8\n col-8\n \n
, mountNode);\n","css":".align-demo .demo-title {\n margin-left: 20px;\n}\n\n.align-demo .next-row {\n margin: 10px 0;\n}\n\n.align-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n\n````jsx\nimport { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
top
\n \n col-8\n col-8\n col-8\n \n\n
center
\n \n col-8\n col-8\n col-8\n \n\n
bottom
\n \n col-8\n col-8\n col-8\n \n\n
baseline
\n \n col-8\n col-8\n col-8\n \n\n
stretch
\n \n col-8\n col-8\n col-8\n \n\n
override
\n \n col-8\n col-8\n col-8\n \n
, mountNode);\n````\n\n````css\n.align-demo .demo-title {\n margin-left: 20px;\n}\n\n.align-demo .next-row {\n margin: 10px 0;\n}\n\n.align-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n    <div className=\"align-demo\">\n        <div className=\"demo-title\">top</div>\n        <Row align=\"top\">\n            <Col span=\"8\" style={{ height: '100px', lineHeight: '100px' }}>col-8</Col>\n            <Col span=\"8\" style={{ height: '50px', lineHeight: '50px' }}>col-8</Col>\n            <Col span=\"8\" style={{ height: '150px', lineHeight: '150px' }}>col-8</Col>\n        </Row>\n\n        <div className=\"demo-title\">center</div>\n        <Row align=\"center\">\n            <Col span=\"8\" style={{ height: '100px', lineHeight: '100px' }}>col-8</Col>\n            <Col span=\"8\" style={{ height: '50px', lineHeight: '50px' }}>col-8</Col>\n            <Col span=\"8\" style={{ height: '150px', lineHeight: '150px' }}>col-8</Col>\n        </Row>\n\n        <div className=\"demo-title\">bottom</div>\n        <Row align=\"bottom\">\n            <Col span=\"8\" style={{ height: '100px', lineHeight: '100px' }}>col-8</Col>\n            <Col span=\"8\" style={{ height: '50px', lineHeight: '50px' }}>col-8</Col>\n            <Col span=\"8\" style={{ height: '150px', lineHeight: '150px' }}>col-8</Col>\n        </Row>\n\n        <div className=\"demo-title\">baseline</div>\n        <Row align=\"baseline\">\n            <Col span=\"8\" style={{ height: '100px', paddingTop: '20px', fontSize: '30px' }}>col-8</Col>\n            <Col span=\"8\" style={{ height: '50px', paddingTop: '20px', fontSize: '20px' }}>col-8</Col>\n            <Col span=\"8\" style={{ height: '150px', paddingTop: '20px', fontSize: '40px' }}>col-8</Col>\n        </Row>\n\n        <div className=\"demo-title\">stretch</div>\n        <Row align=\"stretch\" style={{ height: '150px' }}>\n            <Col span=\"8\">col-8</Col>\n            <Col span=\"8\">col-8</Col>\n            <Col span=\"8\">col-8</Col>\n        </Row>\n\n        <div className=\"demo-title\">override</div>\n        <Row align=\"top\">\n            <Col align=\"bottom\" span=\"8\" style={{ height: '100px', lineHeight: '100px' }}>col-8</Col>\n            <Col span=\"8\" style={{ height: '50px', lineHeight: '50px' }}>col-8</Col>\n            <Col span=\"8\" style={{ height: '150px', lineHeight: '150px' }}>col-8</Col>\n        </Row>\n    </div>, mountNode);
.align-demo .demo-title {\n    margin-left: 20px;\n}\n\n.align-demo .next-row {\n    margin: 10px 0;\n}\n\n.align-demo .next-col {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/basic.en-us.md b/compiled_docs/grid/demo/basic.en-us.md new file mode 100644 index 0000000000..bce9e7e026 --- /dev/null +++ b/compiled_docs/grid/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic layout","meta":{"title":"Basic layout","description":"\n

Use the span property of Col to specify the width of the column.

\n","order":"0"},"codes":{"jsx":"import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
One
\n \n col-24\n \n\n
Two
\n \n col-12\n col-12\n \n\n
Three
\n \n col-8\n col-8\n col-8\n \n\n
Four
\n \n col-6\n col-6\n col-6\n col-6\n \n\n
Five
\n \n col-1p5\n col-1p5\n col-1p5\n col-1p5\n col-1p5\n \n\n
Six
\n \n col-4\n col-4\n col-4\n col-4\n col-4\n col-4\n \n
, mountNode);\n","css":".basic-demo .demo-title {\n margin-left: 20px;\n}\n\n.basic-demo .next-row {\n margin: 10px 0;\n}\n\n.basic-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n````jsx\nimport { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
One
\n \n col-24\n \n\n
Two
\n \n col-12\n col-12\n \n\n
Three
\n \n col-8\n col-8\n col-8\n \n\n
Four
\n \n col-6\n col-6\n col-6\n col-6\n \n\n
Five
\n \n col-1p5\n col-1p5\n col-1p5\n col-1p5\n col-1p5\n \n\n
Six
\n \n col-4\n col-4\n col-4\n col-4\n col-4\n col-4\n \n
, mountNode);\n````\n\n````css\n.basic-demo .demo-title {\n margin-left: 20px;\n}\n\n.basic-demo .next-row {\n margin: 10px 0;\n}\n\n.basic-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n    <div className=\"basic-demo\">\n        <div className=\"demo-title\">One</div>\n        <Row>\n            <Col span=\"24\">col-24</Col>\n        </Row>\n\n        <div className=\"demo-title\">Two</div>\n        <Row>\n            <Col span=\"12\">col-12</Col>\n            <Col span=\"12\">col-12</Col>\n        </Row>\n\n        <div className=\"demo-title\">Three</div>\n        <Row>\n            <Col span=\"8\">col-8</Col>\n            <Col span=\"8\">col-8</Col>\n            <Col span=\"8\">col-8</Col>\n        </Row>\n\n        <div className=\"demo-title\">Four</div>\n        <Row>\n            <Col span=\"6\">col-6</Col>\n            <Col span=\"6\">col-6</Col>\n            <Col span=\"6\">col-6</Col>\n            <Col span=\"6\">col-6</Col>\n        </Row>\n\n        <div className=\"demo-title\">Five</div>\n        <Row>\n            <Col span=\"1p5\">col-1p5</Col>\n            <Col span=\"1p5\">col-1p5</Col>\n            <Col span=\"1p5\">col-1p5</Col>\n            <Col span=\"1p5\">col-1p5</Col>\n            <Col span=\"1p5\">col-1p5</Col>\n        </Row>\n\n        <div className=\"demo-title\">Six</div>\n        <Row>\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n        </Row>\n    </div>, mountNode);
.basic-demo .demo-title {\n    margin-left: 20px;\n}\n\n.basic-demo .next-row {\n    margin: 10px 0;\n}\n\n.basic-demo .next-col {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    height: 30px;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/basic.md b/compiled_docs/grid/demo/basic.md new file mode 100644 index 0000000000..ecd2c7955d --- /dev/null +++ b/compiled_docs/grid/demo/basic.md @@ -0,0 +1 @@ +{"title":"基础布局","meta":{"title":"基础布局","description":"\n

通过 Col 的 span 属性指定该列宽度占整行宽度24分之几或5分之几。

\n","order":"0"},"codes":{"jsx":"import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
One
\n \n col-24\n \n\n
Two
\n \n col-12\n col-12\n \n\n
Three
\n \n col-8\n col-8\n col-8\n \n\n
Four
\n \n col-6\n col-6\n col-6\n col-6\n \n\n
Five
\n \n col-1p5\n col-1p5\n col-1p5\n col-1p5\n col-1p5\n \n\n
Six
\n \n col-4\n col-4\n col-4\n col-4\n col-4\n col-4\n \n
, mountNode);\n","css":".basic-demo .demo-title {\n margin-left: 20px;\n}\n\n.basic-demo .next-row {\n margin: 10px 0;\n}\n\n.basic-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n\n````jsx\nimport { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
One
\n \n col-24\n \n\n
Two
\n \n col-12\n col-12\n \n\n
Three
\n \n col-8\n col-8\n col-8\n \n\n
Four
\n \n col-6\n col-6\n col-6\n col-6\n \n\n
Five
\n \n col-1p5\n col-1p5\n col-1p5\n col-1p5\n col-1p5\n \n\n
Six
\n \n col-4\n col-4\n col-4\n col-4\n col-4\n col-4\n \n
, mountNode);\n````\n\n````css\n.basic-demo .demo-title {\n margin-left: 20px;\n}\n\n.basic-demo .next-row {\n margin: 10px 0;\n}\n\n.basic-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n    <div className=\"basic-demo\">\n        <div className=\"demo-title\">One</div>\n        <Row>\n            <Col span=\"24\">col-24</Col>\n        </Row>\n\n        <div className=\"demo-title\">Two</div>\n        <Row>\n            <Col span=\"12\">col-12</Col>\n            <Col span=\"12\">col-12</Col>\n        </Row>\n\n        <div className=\"demo-title\">Three</div>\n        <Row>\n            <Col span=\"8\">col-8</Col>\n            <Col span=\"8\">col-8</Col>\n            <Col span=\"8\">col-8</Col>\n        </Row>\n\n        <div className=\"demo-title\">Four</div>\n        <Row>\n            <Col span=\"6\">col-6</Col>\n            <Col span=\"6\">col-6</Col>\n            <Col span=\"6\">col-6</Col>\n            <Col span=\"6\">col-6</Col>\n        </Row>\n\n        <div className=\"demo-title\">Five</div>\n        <Row>\n            <Col span=\"1p5\">col-1p5</Col>\n            <Col span=\"1p5\">col-1p5</Col>\n            <Col span=\"1p5\">col-1p5</Col>\n            <Col span=\"1p5\">col-1p5</Col>\n            <Col span=\"1p5\">col-1p5</Col>\n        </Row>\n\n        <div className=\"demo-title\">Six</div>\n        <Row>\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n        </Row>\n    </div>, mountNode);
.basic-demo .demo-title {\n    margin-left: 20px;\n}\n\n.basic-demo .next-row {\n    margin: 10px 0;\n}\n\n.basic-demo .next-col {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    height: 30px;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/breakpoint.en-us.md b/compiled_docs/grid/demo/breakpoint.en-us.md new file mode 100644 index 0000000000..6edbfac2a4 --- /dev/null +++ b/compiled_docs/grid/demo/breakpoint.en-us.md @@ -0,0 +1 @@ +{"title":"Responsive layout","meta":{"title":"Responsive layout","description":"\n

Similar to Bootstrap's responsive design, it presets six response sizes: xxs (320px), xs (480px), s (720px), m (990px), l (1200px), and xl (1500px).

\n","order":"5"},"codes":{"jsx":"import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
Resize browser to see how each column changes
\n \n Col\n Col\n Col\n \n
, mountNode);\n","css":".breakpoint-demo .demo-title {\n margin-left: 20px;\n}\n\n.breakpoint-demo .next-row {\n margin: 10px 0;\n}\n\n.breakpoint-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n````jsx\nimport { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
Resize browser to see how each column changes
\n \n Col\n Col\n Col\n \n
, mountNode);\n````\n\n````css\n.breakpoint-demo .demo-title {\n margin-left: 20px;\n}\n\n.breakpoint-demo .next-row {\n margin: 10px 0;\n}\n\n.breakpoint-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n    <div className=\"breakpoint-demo\">\n        <div className=\"demo-title\">Resize browser to see how each column changes</div>\n        <Row >\n            <Col xs={12} s={8} m={6}>Col</Col>\n            <Col xs={6} s={8} m={6}>Col</Col>\n            <Col xs={6} s={8} m={12}>Col</Col>\n        </Row>\n    </div>, mountNode);
.breakpoint-demo .demo-title {\n    margin-left: 20px;\n}\n\n.breakpoint-demo .next-row {\n    margin: 10px 0;\n}\n\n.breakpoint-demo .next-col {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    height: 30px;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/breakpoint.md b/compiled_docs/grid/demo/breakpoint.md new file mode 100644 index 0000000000..75e23e8634 --- /dev/null +++ b/compiled_docs/grid/demo/breakpoint.md @@ -0,0 +1 @@ +{"title":"响应式布局","meta":{"title":"响应式布局","description":"\n","order":"5"},"codes":{"jsx":"import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
Resize browser to see how each column changes
\n \n Col\n Col\n Col\n \n
, mountNode);\n","css":".breakpoint-demo .demo-title {\n margin-left: 20px;\n}\n\n.breakpoint-demo .next-row {\n margin: 10px 0;\n}\n\n.breakpoint-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n\n````jsx\nimport { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
Resize browser to see how each column changes
\n \n Col\n Col\n Col\n \n
, mountNode);\n````\n\n````css\n.breakpoint-demo .demo-title {\n margin-left: 20px;\n}\n\n.breakpoint-demo .next-row {\n margin: 10px 0;\n}\n\n.breakpoint-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n    <div className=\"breakpoint-demo\">\n        <div className=\"demo-title\">Resize browser to see how each column changes</div>\n        <Row >\n            <Col xs={12} s={8} m={6}>Col</Col>\n            <Col xs={6} s={8} m={6}>Col</Col>\n            <Col xs={6} s={8} m={12}>Col</Col>\n        </Row>\n    </div>, mountNode);
.breakpoint-demo .demo-title {\n    margin-left: 20px;\n}\n\n.breakpoint-demo .next-row {\n    margin: 10px 0;\n}\n\n.breakpoint-demo .next-col {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    height: 30px;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/custom-elem-type.en-us.md b/compiled_docs/grid/demo/custom-elem-type.en-us.md new file mode 100644 index 0000000000..df9b0f8ed1 --- /dev/null +++ b/compiled_docs/grid/demo/custom-elem-type.en-us.md @@ -0,0 +1 @@ +{"title":"Customize rendered type of the element","meta":{"title":"Customize rendered type of the element","description":"\n

Use component property to customize rendered type of the element.

\n","order":"12"},"codes":{"jsx":"import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
Rendered as `ul` and `li`
\n \n col-12\n col-12\n \n
, mountNode);\n","css":".basic-demo ul {\n list-style: none;\n padding: 0;\n}\n\n.basic-demo .demo-title {\n margin-left: 20px;\n}\n\n.basic-demo .next-row {\n margin: 10px 0;\n}\n\n.basic-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n````jsx\nimport { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
Rendered as `ul` and `li`
\n \n col-12\n col-12\n \n
, mountNode);\n````\n\n````css\n.basic-demo ul {\n list-style: none;\n padding: 0;\n}\n\n.basic-demo .demo-title {\n margin-left: 20px;\n}\n\n.basic-demo .next-row {\n margin: 10px 0;\n}\n\n.basic-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n    <div className=\"basic-demo\">\n        <div className=\"demo-title\">Rendered as `ul` and `li`</div>\n        <Row component=\"ul\">\n            <Col span=\"12\" component=\"li\">col-12</Col>\n            <Col span=\"12\" component=\"li\">col-12</Col>\n        </Row>\n    </div>, mountNode);
.basic-demo ul {\n    list-style: none;\n    padding: 0;\n}\n\n.basic-demo .demo-title {\n    margin-left: 20px;\n}\n\n.basic-demo .next-row {\n    margin: 10px 0;\n}\n\n.basic-demo .next-col {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    height: 30px;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/custom-elem-type.md b/compiled_docs/grid/demo/custom-elem-type.md new file mode 100644 index 0000000000..615e373616 --- /dev/null +++ b/compiled_docs/grid/demo/custom-elem-type.md @@ -0,0 +1 @@ +{"title":"自定义元素渲染类型","meta":{"title":"自定义元素渲染类型","description":"\n

使用 component 来指定需要渲染的元素类型，默认为 div

\n","order":"12"},"codes":{"jsx":"import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
Rendered as `ul` and `li`
\n \n col-12\n col-12\n \n
, mountNode);\n","css":".basic-demo ul {\n list-style: none;\n padding: 0;\n}\n\n.basic-demo .demo-title {\n margin-left: 20px;\n}\n\n.basic-demo .next-row {\n margin: 10px 0;\n}\n\n.basic-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n\n````jsx\nimport { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
Rendered as `ul` and `li`
\n \n col-12\n col-12\n \n
, mountNode);\n````\n\n````css\n.basic-demo ul {\n list-style: none;\n padding: 0;\n}\n\n.basic-demo .demo-title {\n margin-left: 20px;\n}\n\n.basic-demo .next-row {\n margin: 10px 0;\n}\n\n.basic-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n    <div className=\"basic-demo\">\n        <div className=\"demo-title\">Rendered as `ul` and `li`</div>\n        <Row component=\"ul\">\n            <Col span=\"12\" component=\"li\">col-12</Col>\n            <Col span=\"12\" component=\"li\">col-12</Col>\n        </Row>\n    </div>, mountNode);
.basic-demo ul {\n    list-style: none;\n    padding: 0;\n}\n\n.basic-demo .demo-title {\n    margin-left: 20px;\n}\n\n.basic-demo .next-row {\n    margin: 10px 0;\n}\n\n.basic-demo .next-col {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    height: 30px;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/fixed.en-us.md b/compiled_docs/grid/demo/fixed.en-us.md new file mode 100644 index 0000000000..9db7da0efc --- /dev/null +++ b/compiled_docs/grid/demo/fixed.en-us.md @@ -0,0 +1 @@ +{"title":"Fixed width column","meta":{"title":"Fixed width column","description":"\n

The fixedSpan property of Col specifies a column as a fixed-width column whose width is calculated as 20 * fixedSpan.

\n","order":"1"},"codes":{"jsx":"import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
Two-column layout, left column fixed, right column adaptive
\n \n col-fixed-16\n col\n \n\n
Two-column layout, right column fixed, left column adaptive
\n \n col\n col-fixed-16\n \n\n
Three-column layout, left column and right column fixed, middle column adaptive
\n \n col-fixed-8\n col\n col-fixed-8\n \n
, mountNode);\n","css":".mixin-demo .demo-title {\n margin-left: 20px;\n}\n\n.mixin-demo .next-row {\n margin: 10px 0;\n}\n\n.mixin-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n````jsx\nimport { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
Two-column layout, left column fixed, right column adaptive
\n \n col-fixed-16\n col\n \n\n
Two-column layout, right column fixed, left column adaptive
\n \n col\n col-fixed-16\n \n\n
Three-column layout, left column and right column fixed, middle column adaptive
\n \n col-fixed-8\n col\n col-fixed-8\n \n
, mountNode);\n````\n\n````css\n.mixin-demo .demo-title {\n margin-left: 20px;\n}\n\n.mixin-demo .next-row {\n margin: 10px 0;\n}\n\n.mixin-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n    <div className=\"mixin-demo\">\n        <div className=\"demo-title\">Two-column layout, left column fixed, right column adaptive</div>\n        <Row>\n            <Col fixedSpan=\"16\">col-fixed-16</Col>\n            <Col>col</Col>\n        </Row>\n\n        <div className=\"demo-title\">Two-column layout, right column fixed, left column adaptive</div>\n        <Row>\n            <Col>col</Col>\n            <Col fixedSpan=\"16\">col-fixed-16</Col>\n        </Row>\n\n        <div className=\"demo-title\">Three-column layout, left column and right column fixed, middle column adaptive</div>\n        <Row>\n            <Col fixedSpan=\"8\">col-fixed-8</Col>\n            <Col>col</Col>\n            <Col fixedSpan=\"8\">col-fixed-8</Col>\n        </Row>\n    </div>, mountNode);
.mixin-demo .demo-title {\n    margin-left: 20px;\n}\n\n.mixin-demo .next-row {\n    margin: 10px 0;\n}\n\n.mixin-demo .next-col {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    height: 30px;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/fixed.md b/compiled_docs/grid/demo/fixed.md new file mode 100644 index 0000000000..e44e170544 --- /dev/null +++ b/compiled_docs/grid/demo/fixed.md @@ -0,0 +1 @@ +{"title":"固定宽度列","meta":{"title":"固定宽度列","description":"\n

通过 Col 的 fixedSpan 属性来指定某列为固定宽度列，其宽度的计算方式为 20 * fixedSpan。

\n","order":"1"},"codes":{"jsx":"import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
Two-column layout, left column fixed, right column adaptive
\n \n col-fixed-16\n col\n \n\n
Two-column layout, right column fixed, left column adaptive
\n \n col\n col-fixed-16\n \n\n
Three-column layout, left column and right column fixed, middle column adaptive
\n \n col-fixed-8\n col\n col-fixed-8\n \n
, mountNode);\n","css":".mixin-demo .demo-title {\n margin-left: 20px;\n}\n\n.mixin-demo .next-row {\n margin: 10px 0;\n}\n\n.mixin-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n\n````jsx\nimport { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
Two-column layout, left column fixed, right column adaptive
\n \n col-fixed-16\n col\n \n\n
Two-column layout, right column fixed, left column adaptive
\n \n col\n col-fixed-16\n \n\n
Three-column layout, left column and right column fixed, middle column adaptive
\n \n col-fixed-8\n col\n col-fixed-8\n \n
, mountNode);\n````\n\n````css\n.mixin-demo .demo-title {\n margin-left: 20px;\n}\n\n.mixin-demo .next-row {\n margin: 10px 0;\n}\n\n.mixin-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n    <div className=\"mixin-demo\">\n        <div className=\"demo-title\">Two-column layout, left column fixed, right column adaptive</div>\n        <Row>\n            <Col fixedSpan=\"16\">col-fixed-16</Col>\n            <Col>col</Col>\n        </Row>\n\n        <div className=\"demo-title\">Two-column layout, right column fixed, left column adaptive</div>\n        <Row>\n            <Col>col</Col>\n            <Col fixedSpan=\"16\">col-fixed-16</Col>\n        </Row>\n\n        <div className=\"demo-title\">Three-column layout, left column and right column fixed, middle column adaptive</div>\n        <Row>\n            <Col fixedSpan=\"8\">col-fixed-8</Col>\n            <Col>col</Col>\n            <Col fixedSpan=\"8\">col-fixed-8</Col>\n        </Row>\n    </div>, mountNode);
.mixin-demo .demo-title {\n    margin-left: 20px;\n}\n\n.mixin-demo .next-row {\n    margin: 10px 0;\n}\n\n.mixin-demo .next-col {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    height: 30px;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/gutter.en-us.md b/compiled_docs/grid/demo/gutter.en-us.md new file mode 100644 index 0000000000..af16f188a1 --- /dev/null +++ b/compiled_docs/grid/demo/gutter.en-us.md @@ -0,0 +1 @@ +{"title":"Columns spacing","meta":{"title":"Columns spacing","description":"\n

The spacing of the columns defaults to 0. You can change the column spacing by setting the gutter property of Row.

\n","order":"2"},"codes":{"jsx":"import { Range, Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n gutter: 0\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(gutter) {\n this.setState({\n gutter\n });\n }\n\n render() {\n const { gutter } = this.state;\n\n return (\n
\n \n \n
col-6
\n
col-6
\n
col-6
\n
col-6
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".gutter-demo .demo-title {\n margin-left: 20px;\n}\n\n.gutter-demo .next-row {\n margin: 10px 0;\n}\n\n.gutter-demo .demo-col-inset {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n````jsx\nimport { Range, Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n gutter: 0\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(gutter) {\n this.setState({\n gutter\n });\n }\n\n render() {\n const { gutter } = this.state;\n\n return (\n
\n \n \n
col-6
\n
col-6
\n
col-6
\n
col-6
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.gutter-demo .demo-title {\n margin-left: 20px;\n}\n\n.gutter-demo .next-row {\n margin: 10px 0;\n}\n\n.gutter-demo .demo-col-inset {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Range, Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            gutter: 0\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(gutter) {\n        this.setState({\n            gutter\n        });\n    }\n\n    render() {\n        const { gutter } = this.state;\n\n        return (\n            <div className=\"gutter-demo\">\n                <Range value={gutter} onChange={this.handleChange} marks={4} step={4} max={16} hasTip={false} style={{ width: '400px', marginLeft: '20px', marginTop: '30px' }} />\n                <Row gutter={gutter}>\n                    <Col span=\"6\"><div className=\"demo-col-inset\">col-6</div></Col>\n                    <Col span=\"6\"><div className=\"demo-col-inset\">col-6</div></Col>\n                    <Col span=\"6\"><div className=\"demo-col-inset\">col-6</div></Col>\n                    <Col span=\"6\"><div className=\"demo-col-inset\">col-6</div></Col>\n                </Row>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.gutter-demo .demo-title {\n    margin-left: 20px;\n}\n\n.gutter-demo .next-row {\n    margin: 10px 0;\n}\n\n.gutter-demo .demo-col-inset {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    height: 30px;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/gutter.md b/compiled_docs/grid/demo/gutter.md new file mode 100644 index 0000000000..55018b6c33 --- /dev/null +++ b/compiled_docs/grid/demo/gutter.md @@ -0,0 +1 @@ +{"title":"列间距","meta":{"title":"列间距","description":"\n

列与列间距默认为0，可以通过设置 Row 的 gutter 属性来改变列间距。

\n","order":"2"},"codes":{"jsx":"import { Range, Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n gutter: 0\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(gutter) {\n this.setState({\n gutter\n });\n }\n\n render() {\n const { gutter } = this.state;\n\n return (\n
\n \n \n
col-6
\n
col-6
\n
col-6
\n
col-6
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".gutter-demo .demo-title {\n margin-left: 20px;\n}\n\n.gutter-demo .next-row {\n margin: 10px 0;\n}\n\n.gutter-demo .demo-col-inset {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n\n````jsx\nimport { Range, Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n gutter: 0\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(gutter) {\n this.setState({\n gutter\n });\n }\n\n render() {\n const { gutter } = this.state;\n\n return (\n
\n \n \n
col-6
\n
col-6
\n
col-6
\n
col-6
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.gutter-demo .demo-title {\n margin-left: 20px;\n}\n\n.gutter-demo .next-row {\n margin: 10px 0;\n}\n\n.gutter-demo .demo-col-inset {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Range, Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            gutter: 0\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(gutter) {\n        this.setState({\n            gutter\n        });\n    }\n\n    render() {\n        const { gutter } = this.state;\n\n        return (\n            <div className=\"gutter-demo\">\n                <Range value={gutter} onChange={this.handleChange} marks={4} step={4} max={16} hasTip={false} style={{ width: '400px', marginLeft: '20px', marginTop: '30px' }} />\n                <Row gutter={gutter}>\n                    <Col span=\"6\"><div className=\"demo-col-inset\">col-6</div></Col>\n                    <Col span=\"6\"><div className=\"demo-col-inset\">col-6</div></Col>\n                    <Col span=\"6\"><div className=\"demo-col-inset\">col-6</div></Col>\n                    <Col span=\"6\"><div className=\"demo-col-inset\">col-6</div></Col>\n                </Row>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.gutter-demo .demo-title {\n    margin-left: 20px;\n}\n\n.gutter-demo .next-row {\n    margin: 10px 0;\n}\n\n.gutter-demo .demo-col-inset {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    height: 30px;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/hidden.en-us.md b/compiled_docs/grid/demo/hidden.en-us.md new file mode 100644 index 0000000000..9e420f6d97 --- /dev/null +++ b/compiled_docs/grid/demo/hidden.en-us.md @@ -0,0 +1 @@ +{"title":"Display and hide","meta":{"title":"Display and hide","description":"\n

Provides a powerful responsive display and hide functionality under different breakpoints.

\n","order":"6"},"codes":{"jsx":"import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
Hide columns under all breakpoints, resize browser to see if the second column is hidden or shown
\n \n col-8\n col-16\n \n\n
Hide columns under a breakpoint such as xs, resize browser to see if the second column is hidden or shown
\n \n col-8\n col-16\n \n\n
Hide columns under some breakpoints such as xs and s, resize browser to see if the second column is hidden or shown
\n \n col-8\n col-16\n \n
, mountNode);\n","css":".hidden-demo .demo-title {\n margin-left: 20px;\n}\n\n.hidden-demo .next-row {\n margin: 10px 0;\n}\n\n.hidden-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n````jsx\nimport { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
Hide columns under all breakpoints, resize browser to see if the second column is hidden or shown
\n \n col-8\n col-16\n \n\n
Hide columns under a breakpoint such as xs, resize browser to see if the second column is hidden or shown
\n \n col-8\n col-16\n \n\n
Hide columns under some breakpoints such as xs and s, resize browser to see if the second column is hidden or shown
\n \n col-8\n col-16\n \n
, mountNode);\n````\n\n````css\n.hidden-demo .demo-title {\n margin-left: 20px;\n}\n\n.hidden-demo .next-row {\n margin: 10px 0;\n}\n\n.hidden-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n    <div className=\"hidden-demo\">\n        <div className=\"demo-title\">Hide columns under all breakpoints, resize browser to see if the second column is hidden or shown</div>\n        <Row>\n            <Col span=\"8\">col-8</Col>\n            <Col span=\"16\" hidden>col-16</Col>\n        </Row>\n\n        <div className=\"demo-title\">Hide columns under a breakpoint such as xs, resize browser to see if the second column is hidden or shown</div>\n        <Row>\n            <Col span=\"8\">col-8</Col>\n            <Col span=\"16\" hidden=\"xs\">col-16</Col>\n        </Row>\n\n        <div className=\"demo-title\">Hide columns under some breakpoints such as xs and s, resize browser to see if the second column is hidden or shown</div>\n        <Row>\n            <Col span=\"8\">col-8</Col>\n            <Col span=\"16\" hidden={['xs', 's']}>col-16</Col>\n        </Row>\n    </div>, mountNode);
.hidden-demo .demo-title {\n    margin-left: 20px;\n}\n\n.hidden-demo .next-row {\n    margin: 10px 0;\n}\n\n.hidden-demo .next-col {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    height: 30px;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/hidden.md b/compiled_docs/grid/demo/hidden.md new file mode 100644 index 0000000000..75065bc41b --- /dev/null +++ b/compiled_docs/grid/demo/hidden.md @@ -0,0 +1 @@ +{"title":"显示与隐藏","meta":{"title":"显示与隐藏","description":"\n

提供了强大的响应式的显示与隐藏功能，支持在不同断点下的显示与隐藏。

\n","order":"6"},"codes":{"jsx":"import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
Hide columns under all breakpoints, resize browser to see if the second column is hidden or shown
\n \n col-8\n col-16\n \n\n
Hide columns under a breakpoint such as xs, resize browser to see if the second column is hidden or shown
\n \n col-8\n col-16\n \n\n
Hide columns under some breakpoints such as xs and s, resize browser to see if the second column is hidden or shown
\n \n col-8\n col-16\n \n
, mountNode);\n","css":".hidden-demo .demo-title {\n margin-left: 20px;\n}\n\n.hidden-demo .next-row {\n margin: 10px 0;\n}\n\n.hidden-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n\n````jsx\nimport { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
Hide columns under all breakpoints, resize browser to see if the second column is hidden or shown
\n \n col-8\n col-16\n \n\n
Hide columns under a breakpoint such as xs, resize browser to see if the second column is hidden or shown
\n \n col-8\n col-16\n \n\n
Hide columns under some breakpoints such as xs and s, resize browser to see if the second column is hidden or shown
\n \n col-8\n col-16\n \n
, mountNode);\n````\n\n````css\n.hidden-demo .demo-title {\n margin-left: 20px;\n}\n\n.hidden-demo .next-row {\n margin: 10px 0;\n}\n\n.hidden-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n    <div className=\"hidden-demo\">\n        <div className=\"demo-title\">Hide columns under all breakpoints, resize browser to see if the second column is hidden or shown</div>\n        <Row>\n            <Col span=\"8\">col-8</Col>\n            <Col span=\"16\" hidden>col-16</Col>\n        </Row>\n\n        <div className=\"demo-title\">Hide columns under a breakpoint such as xs, resize browser to see if the second column is hidden or shown</div>\n        <Row>\n            <Col span=\"8\">col-8</Col>\n            <Col span=\"16\" hidden=\"xs\">col-16</Col>\n        </Row>\n\n        <div className=\"demo-title\">Hide columns under some breakpoints such as xs and s, resize browser to see if the second column is hidden or shown</div>\n        <Row>\n            <Col span=\"8\">col-8</Col>\n            <Col span=\"16\" hidden={['xs', 's']}>col-16</Col>\n        </Row>\n    </div>, mountNode);
.hidden-demo .demo-title {\n    margin-left: 20px;\n}\n\n.hidden-demo .next-row {\n    margin: 10px 0;\n}\n\n.hidden-demo .next-col {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    height: 30px;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/justify.en-us.md b/compiled_docs/grid/demo/justify.en-us.md new file mode 100644 index 0000000000..16add7442d --- /dev/null +++ b/compiled_docs/grid/demo/justify.en-us.md @@ -0,0 +1 @@ +{"title":"Horizontal alignment of columns","meta":{"title":"Horizontal alignment of columns","description":"\n

(IE9 is not supported) Based on Flex's justify-content attributes, set the justify property on Row to control the horizontal alignment: start (left-aligned, default), center (center-aligned),end (right-aligned), space-between (both-aligned, spacing between items are all the same), space-around (equal intervals on both sides, the spacing between columns is double the spacing between the column and the left and right ends).

\n","order":"11"},"codes":{"jsx":"import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
start
\n \n col-4\n col-4\n col-4\n \n\n
center
\n \n col-4\n col-4\n col-4\n \n\n
end
\n \n col-4\n col-4\n col-4\n \n\n
space-between
\n \n col-4\n col-4\n col-4\n \n\n
space-around
\n \n col-4\n col-4\n col-4\n \n
, mountNode);\n","css":".justify-demo .demo-title {\n margin-left: 20px;\n}\n\n.justify-demo .next-row {\n margin: 10px 0;\n}\n\n.justify-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n````jsx\nimport { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
start
\n \n col-4\n col-4\n col-4\n \n\n
center
\n \n col-4\n col-4\n col-4\n \n\n
end
\n \n col-4\n col-4\n col-4\n \n\n
space-between
\n \n col-4\n col-4\n col-4\n \n\n
space-around
\n \n col-4\n col-4\n col-4\n \n
, mountNode);\n````\n\n````css\n.justify-demo .demo-title {\n margin-left: 20px;\n}\n\n.justify-demo .next-row {\n margin: 10px 0;\n}\n\n.justify-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n    <div className=\"justify-demo\">\n        <div className=\"demo-title\">start</div>\n        <Row justify=\"start\">\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n        </Row>\n\n        <div className=\"demo-title\">center</div>\n        <Row justify=\"center\">\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n        </Row>\n\n        <div className=\"demo-title\">end</div>\n        <Row justify=\"end\">\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n        </Row>\n\n        <div className=\"demo-title\">space-between</div>\n        <Row justify=\"space-between\">\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n        </Row>\n\n        <div className=\"demo-title\">space-around</div>\n        <Row justify=\"space-around\">\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n        </Row>\n    </div>, mountNode);
.justify-demo  .demo-title {\n    margin-left: 20px;\n}\n\n.justify-demo  .next-row {\n    margin: 10px 0;\n}\n\n.justify-demo .next-col {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    height: 30px;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/justify.md b/compiled_docs/grid/demo/justify.md new file mode 100644 index 0000000000..30b021f5b0 --- /dev/null +++ b/compiled_docs/grid/demo/justify.md @@ -0,0 +1 @@ +{"title":"多列水平方向对齐方式","meta":{"title":"多列水平方向对齐方式","description":"\n

（不支持 IE9 浏览器）基于 Flex 的 justify-content 属性实现，在 Row 上设置 justify 属性，即可行内多列水平方向对齐方式：start（左对齐，默认），center（居中对齐），end（右对齐），space-between（两端对齐，项目之间的间隔都相），space-around（两侧的间隔相等，列之间的间隔比列与左右两端的间隔大一倍）。

\n","order":"11"},"codes":{"jsx":"import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
start
\n \n col-4\n col-4\n col-4\n \n\n
center
\n \n col-4\n col-4\n col-4\n \n\n
end
\n \n col-4\n col-4\n col-4\n \n\n
space-between
\n \n col-4\n col-4\n col-4\n \n\n
space-around
\n \n col-4\n col-4\n col-4\n \n
, mountNode);\n","css":".justify-demo .demo-title {\n margin-left: 20px;\n}\n\n.justify-demo .next-row {\n margin: 10px 0;\n}\n\n.justify-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n\n````jsx\nimport { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
start
\n \n col-4\n col-4\n col-4\n \n\n
center
\n \n col-4\n col-4\n col-4\n \n\n
end
\n \n col-4\n col-4\n col-4\n \n\n
space-between
\n \n col-4\n col-4\n col-4\n \n\n
space-around
\n \n col-4\n col-4\n col-4\n \n
, mountNode);\n````\n\n````css\n.justify-demo .demo-title {\n margin-left: 20px;\n}\n\n.justify-demo .next-row {\n margin: 10px 0;\n}\n\n.justify-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n    <div className=\"justify-demo\">\n        <div className=\"demo-title\">start</div>\n        <Row justify=\"start\">\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n        </Row>\n\n        <div className=\"demo-title\">center</div>\n        <Row justify=\"center\">\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n        </Row>\n\n        <div className=\"demo-title\">end</div>\n        <Row justify=\"end\">\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n        </Row>\n\n        <div className=\"demo-title\">space-between</div>\n        <Row justify=\"space-between\">\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n        </Row>\n\n        <div className=\"demo-title\">space-around</div>\n        <Row justify=\"space-around\">\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n            <Col span=\"4\">col-4</Col>\n        </Row>\n    </div>, mountNode);
.justify-demo  .demo-title {\n    margin-left: 20px;\n}\n\n.justify-demo  .next-row {\n    margin: 10px 0;\n}\n\n.justify-demo .next-col {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    height: 30px;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/nest.en-us.md b/compiled_docs/grid/demo/nest.en-us.md new file mode 100644 index 0000000000..12e7b16ca3 --- /dev/null +++ b/compiled_docs/grid/demo/nest.en-us.md @@ -0,0 +1 @@ +{"title":"Nested layout","meta":{"title":"Nested layout","description":"\n

Row can also be nested under Col to create a more detailed layout.

\n","order":"4"},"codes":{"jsx":"import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n \n \n \n \n
col-10-6
\n \n \n
col-10-18
\n \n \n \n \n \n \n
col-14-18
\n \n \n
col-14-6
\n \n \n \n \n
, mountNode);\n","css":".nest-demo .demo-title {\n margin-left: 20px;\n}\n\n.nest-demo .demo-row {\n margin: 10px 0;\n}\n\n.nest-demo .demo-col-inset {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n````jsx\nimport { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n \n \n \n \n
col-10-6
\n \n \n
col-10-18
\n \n \n \n \n \n \n
col-14-18
\n \n \n
col-14-6
\n \n \n \n \n
, mountNode);\n````\n\n````css\n.nest-demo .demo-title {\n margin-left: 20px;\n}\n\n.nest-demo .demo-row {\n margin: 10px 0;\n}\n\n.nest-demo .demo-col-inset {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n    <div className=\"nest-demo\">\n        <Row className=\"demo-row\">\n            <Col span=\"10\">\n                <Row>\n                    <Col span=\"6\">\n                        <div className=\"demo-col-inset\">col-10-6</div>\n                    </Col>\n                    <Col span=\"18\">\n                        <div className=\"demo-col-inset\">col-10-18</div>\n                    </Col>\n                </Row>\n            </Col>\n            <Col span=\"14\">\n                <Row>\n                    <Col span=\"18\">\n                        <div className=\"demo-col-inset\">col-14-18</div>\n                    </Col>\n                    <Col span=\"6\">\n                        <div className=\"demo-col-inset\">col-14-6</div>\n                    </Col>\n                </Row>\n            </Col>\n        </Row>\n    </div>, mountNode);
.nest-demo .demo-title {\n    margin-left: 20px;\n}\n\n.nest-demo .demo-row {\n    margin: 10px 0;\n}\n\n.nest-demo .demo-col-inset {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    height: 30px;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/nest.md b/compiled_docs/grid/demo/nest.md new file mode 100644 index 0000000000..1b1e2fed01 --- /dev/null +++ b/compiled_docs/grid/demo/nest.md @@ -0,0 +1 @@ +{"title":"嵌套布局","meta":{"title":"嵌套布局","description":"\n

Col 下也可嵌套 Row，以完成更细致的布局。

\n","order":"4"},"codes":{"jsx":"import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n \n \n \n \n
col-10-6
\n \n \n
col-10-18
\n \n \n \n \n \n \n
col-14-18
\n \n \n
col-14-6
\n \n \n \n \n
, mountNode);\n","css":".nest-demo .demo-title {\n margin-left: 20px;\n}\n\n.nest-demo .demo-row {\n margin: 10px 0;\n}\n\n.nest-demo .demo-col-inset {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n\n````jsx\nimport { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n \n \n \n \n
col-10-6
\n \n \n
col-10-18
\n \n \n \n \n \n \n
col-14-18
\n \n \n
col-14-6
\n \n \n \n \n
, mountNode);\n````\n\n````css\n.nest-demo .demo-title {\n margin-left: 20px;\n}\n\n.nest-demo .demo-row {\n margin: 10px 0;\n}\n\n.nest-demo .demo-col-inset {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n    <div className=\"nest-demo\">\n        <Row className=\"demo-row\">\n            <Col span=\"10\">\n                <Row>\n                    <Col span=\"6\">\n                        <div className=\"demo-col-inset\">col-10-6</div>\n                    </Col>\n                    <Col span=\"18\">\n                        <div className=\"demo-col-inset\">col-10-18</div>\n                    </Col>\n                </Row>\n            </Col>\n            <Col span=\"14\">\n                <Row>\n                    <Col span=\"18\">\n                        <div className=\"demo-col-inset\">col-14-18</div>\n                    </Col>\n                    <Col span=\"6\">\n                        <div className=\"demo-col-inset\">col-14-6</div>\n                    </Col>\n                </Row>\n            </Col>\n        </Row>\n    </div>, mountNode);
.nest-demo .demo-title {\n    margin-left: 20px;\n}\n\n.nest-demo .demo-row {\n    margin: 10px 0;\n}\n\n.nest-demo .demo-col-inset {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    height: 30px;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/offset-fixed.en-us.md b/compiled_docs/grid/demo/offset-fixed.en-us.md new file mode 100644 index 0000000000..562974b8d3 --- /dev/null +++ b/compiled_docs/grid/demo/offset-fixed.en-us.md @@ -0,0 +1 @@ +{"title":"Fixed offset","meta":{"title":"Fixed offset","description":"\n

(IE9 is not supported) Column can be offset to the right by a fixed distance that is calculated in the same way as a fixed-width column.

\n","order":"9"},"codes":{"jsx":"import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
Normal offset, set offset from 1 to 30
\n \n offset-fixed-0\n \n \n offset-fixed-4\n \n \n offset-fixed-8\n \n \n offset-fixed-12\n \n\n
Adaptive offset
\n \n col\n offset-fixed-12\n \n
, mountNode\n);\n","css":".offset-fixed-demo .demo-title {\n margin-left: 20px;\n}\n\n.offset-fixed-demo .next-row {\n margin: 10px 0;\n}\n\n.offset-fixed-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n````jsx\nimport { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
Normal offset, set offset from 1 to 30
\n \n offset-fixed-0\n \n \n offset-fixed-4\n \n \n offset-fixed-8\n \n \n offset-fixed-12\n \n\n
Adaptive offset
\n \n col\n offset-fixed-12\n \n
, mountNode\n);\n````\n\n````css\n.offset-fixed-demo .demo-title {\n margin-left: 20px;\n}\n\n.offset-fixed-demo .next-row {\n margin: 10px 0;\n}\n\n.offset-fixed-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n    <div className=\"offset-fixed-demo\">\n        <div className=\"demo-title\">Normal offset, set offset from 1 to 30</div>\n        <Row>\n            <Col fixedOffset=\"0\">offset-fixed-0</Col>\n        </Row>\n        <Row>\n            <Col fixedOffset=\"4\">offset-fixed-4</Col>\n        </Row>\n        <Row>\n            <Col fixedOffset=\"8\">offset-fixed-8</Col>\n        </Row>\n        <Row>\n            <Col fixedOffset=\"12\">offset-fixed-12</Col>\n        </Row>\n\n        <div className=\"demo-title\">Adaptive offset</div>\n        <Row>\n            <Col>col</Col>\n            <Col fixedOffset=\"12\">offset-fixed-12</Col>\n        </Row>\n    </div>, mountNode\n);
.offset-fixed-demo .demo-title {\n    margin-left: 20px;\n}\n\n.offset-fixed-demo .next-row {\n    margin: 10px 0;\n}\n\n.offset-fixed-demo .next-col {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    height: 30px;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/offset-fixed.md b/compiled_docs/grid/demo/offset-fixed.md new file mode 100644 index 0000000000..d260762beb --- /dev/null +++ b/compiled_docs/grid/demo/offset-fixed.md @@ -0,0 +1 @@ +{"title":"固定宽度偏移","meta":{"title":"固定宽度偏移","description":"\n

（不支持 IE9 浏览器）列可以向右偏移一定距离，该距离的计算方式和固定宽度列的宽度相同。

\n","order":"9"},"codes":{"jsx":"import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
Normal offset, set offset from 1 to 30
\n \n offset-fixed-0\n \n \n offset-fixed-4\n \n \n offset-fixed-8\n \n \n offset-fixed-12\n \n\n
Adaptive offset
\n \n col\n offset-fixed-12\n \n
, mountNode\n);\n","css":".offset-fixed-demo .demo-title {\n margin-left: 20px;\n}\n\n.offset-fixed-demo .next-row {\n margin: 10px 0;\n}\n\n.offset-fixed-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n\n````jsx\nimport { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
Normal offset, set offset from 1 to 30
\n \n offset-fixed-0\n \n \n offset-fixed-4\n \n \n offset-fixed-8\n \n \n offset-fixed-12\n \n\n
Adaptive offset
\n \n col\n offset-fixed-12\n \n
, mountNode\n);\n````\n\n````css\n.offset-fixed-demo .demo-title {\n margin-left: 20px;\n}\n\n.offset-fixed-demo .next-row {\n margin: 10px 0;\n}\n\n.offset-fixed-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n    <div className=\"offset-fixed-demo\">\n        <div className=\"demo-title\">Normal offset, set offset from 1 to 30</div>\n        <Row>\n            <Col fixedOffset=\"0\">offset-fixed-0</Col>\n        </Row>\n        <Row>\n            <Col fixedOffset=\"4\">offset-fixed-4</Col>\n        </Row>\n        <Row>\n            <Col fixedOffset=\"8\">offset-fixed-8</Col>\n        </Row>\n        <Row>\n            <Col fixedOffset=\"12\">offset-fixed-12</Col>\n        </Row>\n\n        <div className=\"demo-title\">Adaptive offset</div>\n        <Row>\n            <Col>col</Col>\n            <Col fixedOffset=\"12\">offset-fixed-12</Col>\n        </Row>\n    </div>, mountNode\n);
.offset-fixed-demo .demo-title {\n    margin-left: 20px;\n}\n\n.offset-fixed-demo .next-row {\n    margin: 10px 0;\n}\n\n.offset-fixed-demo .next-col {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    height: 30px;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/offset.en-us.md b/compiled_docs/grid/demo/offset.en-us.md new file mode 100644 index 0000000000..01905df681 --- /dev/null +++ b/compiled_docs/grid/demo/offset.en-us.md @@ -0,0 +1 @@ +{"title":"Offset","meta":{"title":"Offset","description":"\n

(IE9 is not supported) Column can be offset to the right by a distance that is calculated in the same way as a column.

\n","order":"8"},"codes":{"jsx":"import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
Normal offset, set offset from 1 to 24
\n \n offset-0\n \n \n offset-4\n \n \n offset-8\n \n \n offset-12\n \n\n
Adaptive offset
\n \n col\n offset-12\n \n
,\n mountNode\n);\n","css":".offset-demo .demo-title {\n margin-left: 20px;\n}\n\n.offset-demo .next-row {\n margin: 10px 0;\n}\n\n.offset-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n````jsx\nimport { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
Normal offset, set offset from 1 to 24
\n \n offset-0\n \n \n offset-4\n \n \n offset-8\n \n \n offset-12\n \n\n
Adaptive offset
\n \n col\n offset-12\n \n
,\n mountNode\n);\n````\n\n````css\n.offset-demo .demo-title {\n margin-left: 20px;\n}\n\n.offset-demo .next-row {\n margin: 10px 0;\n}\n\n.offset-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n    <div className=\"offset-demo\">\n        <div className=\"demo-title\">Normal offset, set offset from 1 to 24</div>\n        <Row>\n            <Col offset=\"0\">offset-0</Col>\n        </Row>\n        <Row>\n            <Col offset=\"4\">offset-4</Col>\n        </Row>\n        <Row>\n            <Col offset=\"8\">offset-8</Col>\n        </Row>\n        <Row>\n            <Col offset=\"12\">offset-12</Col>\n        </Row>\n\n        <div className=\"demo-title\">Adaptive offset</div>\n        <Row>\n            <Col>col</Col>\n            <Col offset=\"12\">offset-12</Col>\n        </Row>\n    </div>,\n    mountNode\n);
.offset-demo .demo-title {\n    margin-left: 20px;\n}\n\n.offset-demo .next-row {\n    margin: 10px 0;\n}\n\n.offset-demo .next-col {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    height: 30px;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/offset.md b/compiled_docs/grid/demo/offset.md new file mode 100644 index 0000000000..ef9a912c30 --- /dev/null +++ b/compiled_docs/grid/demo/offset.md @@ -0,0 +1 @@ +{"title":"偏移","meta":{"title":"偏移","description":"\n

（不支持 IE9 浏览器）列可以向右偏移一定距离，该距离的计算方式和列所占宽度计算方式相同。

\n","order":"8"},"codes":{"jsx":"import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
Normal offset, set offset from 1 to 24
\n \n offset-0\n \n \n offset-4\n \n \n offset-8\n \n \n offset-12\n \n\n
Adaptive offset
\n \n col\n offset-12\n \n
,\n mountNode\n);\n","css":".offset-demo .demo-title {\n margin-left: 20px;\n}\n\n.offset-demo .next-row {\n margin: 10px 0;\n}\n\n.offset-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n\n````jsx\nimport { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
Normal offset, set offset from 1 to 24
\n \n offset-0\n \n \n offset-4\n \n \n offset-8\n \n \n offset-12\n \n\n
Adaptive offset
\n \n col\n offset-12\n \n
,\n mountNode\n);\n````\n\n````css\n.offset-demo .demo-title {\n margin-left: 20px;\n}\n\n.offset-demo .next-row {\n margin: 10px 0;\n}\n\n.offset-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n    <div className=\"offset-demo\">\n        <div className=\"demo-title\">Normal offset, set offset from 1 to 24</div>\n        <Row>\n            <Col offset=\"0\">offset-0</Col>\n        </Row>\n        <Row>\n            <Col offset=\"4\">offset-4</Col>\n        </Row>\n        <Row>\n            <Col offset=\"8\">offset-8</Col>\n        </Row>\n        <Row>\n            <Col offset=\"12\">offset-12</Col>\n        </Row>\n\n        <div className=\"demo-title\">Adaptive offset</div>\n        <Row>\n            <Col>col</Col>\n            <Col offset=\"12\">offset-12</Col>\n        </Row>\n    </div>,\n    mountNode\n);
.offset-demo .demo-title {\n    margin-left: 20px;\n}\n\n.offset-demo .next-row {\n    margin: 10px 0;\n}\n\n.offset-demo .next-col {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    height: 30px;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/type.en-us.md b/compiled_docs/grid/demo/type.en-us.md new file mode 100644 index 0000000000..d8b9c334c7 --- /dev/null +++ b/compiled_docs/grid/demo/type.en-us.md @@ -0,0 +1 @@ +{"title":"Set the width of the row","meta":{"title":"Set the width of the row","description":"\n

The default width of the Row is set to 100%. You can set the fixed property to true so that the width of Row does not immediately change with the size of the viewport. Instead, it is maintained at a certain breakpoint. You can also set the fixedWidth property to a certain breakpoint value, thus fixing the width of Row, no longer changing with the size of the viewport.

\n","order":"7"},"codes":{"jsx":"import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nconst breakpoints = {\n xxs: 320,\n xs: 480,\n s: 720,\n m: 990,\n l: 1200,\n xl: 1500\n};\n\nclass Demo extends React.Component {\n componentDidMount() {\n const row = ReactDOM.findDOMNode(this.refs.fixCol);\n\n this.handleResize = () => {\n let point = '';\n const innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;\n const keys = Object.keys(breakpoints);\n for (let i = 0; i < keys.length; i++) {\n const width = breakpoints[keys[i]];\n const nextWidth = breakpoints[keys[i + 1]];\n if (innerWidth > width && (innerWidth < nextWidth || !nextWidth)) {\n point = keys[i];\n break;\n }\n }\n\n if (point) {\n row.innerHTML = `${breakpoints[point]}px`;\n }\n };\n window.addEventListener('resize', this.handleResize);\n\n this.handleResize();\n }\n\n componentWillUnmount() {\n window.removeListener('resize', this.handleResize);\n }\n\n render() {\n return (\n
\n
Default
\n \n 100%\n \n
Set fixed to true
\n \n \n \n
Set fixedWidth to 's'
\n \n 720px\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".type-demo .demo-title {\n margin-left: 20px;\n}\n\n.type-demo .next-row {\n margin: 10px 0;\n}\n\n.type-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n````jsx\nimport { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nconst breakpoints = {\n xxs: 320,\n xs: 480,\n s: 720,\n m: 990,\n l: 1200,\n xl: 1500\n};\n\nclass Demo extends React.Component {\n componentDidMount() {\n const row = ReactDOM.findDOMNode(this.refs.fixCol);\n\n this.handleResize = () => {\n let point = '';\n const innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;\n const keys = Object.keys(breakpoints);\n for (let i = 0; i < keys.length; i++) {\n const width = breakpoints[keys[i]];\n const nextWidth = breakpoints[keys[i + 1]];\n if (innerWidth > width && (innerWidth < nextWidth || !nextWidth)) {\n point = keys[i];\n break;\n }\n }\n\n if (point) {\n row.innerHTML = `${breakpoints[point]}px`;\n }\n };\n window.addEventListener('resize', this.handleResize);\n\n this.handleResize();\n }\n\n componentWillUnmount() {\n window.removeListener('resize', this.handleResize);\n }\n\n render() {\n return (\n
\n
Default
\n \n 100%\n \n
Set fixed to true
\n \n \n \n
Set fixedWidth to 's'
\n \n 720px\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.type-demo .demo-title {\n margin-left: 20px;\n}\n\n.type-demo .next-row {\n margin: 10px 0;\n}\n\n.type-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nconst breakpoints = {\n    xxs: 320,\n    xs: 480,\n    s: 720,\n    m: 990,\n    l: 1200,\n    xl: 1500\n};\n\nclass Demo extends React.Component {\n    componentDidMount() {\n        const row = ReactDOM.findDOMNode(this.refs.fixCol);\n\n        this.handleResize = () => {\n            let point = '';\n            const innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;\n            const keys = Object.keys(breakpoints);\n            for (let i = 0; i < keys.length; i++) {\n                const width = breakpoints[keys[i]];\n                const nextWidth = breakpoints[keys[i + 1]];\n                if (innerWidth > width && (innerWidth < nextWidth || !nextWidth)) {\n                    point = keys[i];\n                    break;\n                }\n            }\n\n            if (point) {\n                row.innerHTML = `${breakpoints[point]}px`;\n            }\n        };\n        window.addEventListener('resize', this.handleResize);\n\n        this.handleResize();\n    }\n\n    componentWillUnmount() {\n        window.removeListener('resize', this.handleResize);\n    }\n\n    render() {\n        return (\n            <div className=\"type-demo\">\n                <div className=\"demo-title\">Default</div>\n                <Row>\n                    <Col>100%</Col>\n                </Row>\n                <div className=\"demo-title\">Set fixed to true</div>\n                <Row ref=\"fixedRow\" fixed>\n                    <Col ref=\"fixCol\" />\n                </Row>\n                <div className=\"demo-title\">Set fixedWidth to 's'</div>\n                <Row fixedWidth=\"s\">\n                    <Col>720px</Col>\n                </Row>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.type-demo .demo-title {\n    margin-left: 20px;\n}\n\n.type-demo .next-row {\n    margin: 10px 0;\n}\n\n.type-demo .next-col {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    height: 30px;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/type.md b/compiled_docs/grid/demo/type.md new file mode 100644 index 0000000000..23619f79b9 --- /dev/null +++ b/compiled_docs/grid/demo/type.md @@ -0,0 +1 @@ +{"title":"设置行的宽度","meta":{"title":"设置行的宽度","description":"\n

默认 Row 的宽度被设置为100%，可以通过设置 fixed 属性为 true，来让 Row 的宽度不立刻随着是视口大小变动而变动，而是在某个断点下维持固定的宽度，也可以通过设置 fixedWidth 属性为某一断点值，从而固定 Row 的宽度，不再随着视口大小变动而变动。

\n","order":"7"},"codes":{"jsx":"import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nconst breakpoints = {\n xxs: 320,\n xs: 480,\n s: 720,\n m: 990,\n l: 1200,\n xl: 1500\n};\n\nclass Demo extends React.Component {\n componentDidMount() {\n const row = ReactDOM.findDOMNode(this.refs.fixCol);\n\n this.handleResize = () => {\n let point = '';\n const innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;\n const keys = Object.keys(breakpoints);\n for (let i = 0; i < keys.length; i++) {\n const width = breakpoints[keys[i]];\n const nextWidth = breakpoints[keys[i + 1]];\n if (innerWidth > width && (innerWidth < nextWidth || !nextWidth)) {\n point = keys[i];\n break;\n }\n }\n\n if (point) {\n row.innerHTML = `${breakpoints[point]}px`;\n }\n };\n window.addEventListener('resize', this.handleResize);\n\n this.handleResize();\n }\n\n componentWillUnmount() {\n window.removeListener('resize', this.handleResize);\n }\n\n render() {\n return (\n
\n
Default
\n \n 100%\n \n
Set fixed to true
\n \n \n \n
Set fixedWidth to 's'
\n \n 720px\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".type-demo .demo-title {\n margin-left: 20px;\n}\n\n.type-demo .next-row {\n margin: 10px 0;\n}\n\n.type-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n\n````jsx\nimport { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nconst breakpoints = {\n xxs: 320,\n xs: 480,\n s: 720,\n m: 990,\n l: 1200,\n xl: 1500\n};\n\nclass Demo extends React.Component {\n componentDidMount() {\n const row = ReactDOM.findDOMNode(this.refs.fixCol);\n\n this.handleResize = () => {\n let point = '';\n const innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;\n const keys = Object.keys(breakpoints);\n for (let i = 0; i < keys.length; i++) {\n const width = breakpoints[keys[i]];\n const nextWidth = breakpoints[keys[i + 1]];\n if (innerWidth > width && (innerWidth < nextWidth || !nextWidth)) {\n point = keys[i];\n break;\n }\n }\n\n if (point) {\n row.innerHTML = `${breakpoints[point]}px`;\n }\n };\n window.addEventListener('resize', this.handleResize);\n\n this.handleResize();\n }\n\n componentWillUnmount() {\n window.removeListener('resize', this.handleResize);\n }\n\n render() {\n return (\n
\n
Default
\n \n 100%\n \n
Set fixed to true
\n \n \n \n
Set fixedWidth to 's'
\n \n 720px\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.type-demo .demo-title {\n margin-left: 20px;\n}\n\n.type-demo .next-row {\n margin: 10px 0;\n}\n\n.type-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nconst breakpoints = {\n    xxs: 320,\n    xs: 480,\n    s: 720,\n    m: 990,\n    l: 1200,\n    xl: 1500\n};\n\nclass Demo extends React.Component {\n    componentDidMount() {\n        const row = ReactDOM.findDOMNode(this.refs.fixCol);\n\n        this.handleResize = () => {\n            let point = '';\n            const innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;\n            const keys = Object.keys(breakpoints);\n            for (let i = 0; i < keys.length; i++) {\n                const width = breakpoints[keys[i]];\n                const nextWidth = breakpoints[keys[i + 1]];\n                if (innerWidth > width && (innerWidth < nextWidth || !nextWidth)) {\n                    point = keys[i];\n                    break;\n                }\n            }\n\n            if (point) {\n                row.innerHTML = `${breakpoints[point]}px`;\n            }\n        };\n        window.addEventListener('resize', this.handleResize);\n\n        this.handleResize();\n    }\n\n    componentWillUnmount() {\n        window.removeListener('resize', this.handleResize);\n    }\n\n    render() {\n        return (\n            <div className=\"type-demo\">\n                <div className=\"demo-title\">Default</div>\n                <Row>\n                    <Col>100%</Col>\n                </Row>\n                <div className=\"demo-title\">Set fixed to true</div>\n                <Row ref=\"fixedRow\" fixed>\n                    <Col ref=\"fixCol\" />\n                </Row>\n                <div className=\"demo-title\">Set fixedWidth to 's'</div>\n                <Row fixedWidth=\"s\">\n                    <Col>720px</Col>\n                </Row>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.type-demo .demo-title {\n    margin-left: 20px;\n}\n\n.type-demo .next-row {\n    margin: 10px 0;\n}\n\n.type-demo .next-col {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    height: 30px;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/wrap.en-us.md b/compiled_docs/grid/demo/wrap.en-us.md new file mode 100644 index 0000000000..92d286245e --- /dev/null +++ b/compiled_docs/grid/demo/wrap.en-us.md @@ -0,0 +1 @@ +{"title":"Wrap while overflow","meta":{"title":"Wrap while overflow","description":"\n

(IE9 is not supported) Default the column is no longer wrapped when the width overflows. If you want to wrap automatically, set wrap of Row to true.

\n","order":"3"},"codes":{"jsx":"import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
No wrap
\n \n col-6\n col-6\n col-6\n col-8\n \n
Wrap
\n \n col-6\n col-6\n col-6\n col-8\n \n
, mountNode);\n","css":".wrap-demo .demo-title {\n margin-left: 20px;\n}\n\n.wrap-demo .next-row {\n margin: 10px 0;\n}\n\n.wrap-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n````jsx\nimport { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
No wrap
\n \n col-6\n col-6\n col-6\n col-8\n \n
Wrap
\n \n col-6\n col-6\n col-6\n col-8\n \n
, mountNode);\n````\n\n````css\n.wrap-demo .demo-title {\n margin-left: 20px;\n}\n\n.wrap-demo .next-row {\n margin: 10px 0;\n}\n\n.wrap-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n    <div className=\"wrap-demo\">\n        <div className=\"demo-title\">No wrap</div>\n        <Row>\n            <Col span=\"6\">col-6</Col>\n            <Col span=\"6\">col-6</Col>\n            <Col span=\"6\">col-6</Col>\n            <Col span=\"8\">col-8</Col>\n        </Row>\n        <div className=\"demo-title\">Wrap</div>\n        <Row wrap>\n            <Col span=\"6\">col-6</Col>\n            <Col span=\"6\">col-6</Col>\n            <Col span=\"6\">col-6</Col>\n            <Col span=\"8\">col-8</Col>\n        </Row>\n    </div>, mountNode);
.wrap-demo .demo-title {\n    margin-left: 20px;\n}\n\n.wrap-demo .next-row {\n    margin: 10px 0;\n}\n\n.wrap-demo .next-col {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    height: 30px;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/demo/wrap.md b/compiled_docs/grid/demo/wrap.md new file mode 100644 index 0000000000..4f3a89a899 --- /dev/null +++ b/compiled_docs/grid/demo/wrap.md @@ -0,0 +1 @@ +{"title":"溢出后是否换行","meta":{"title":"溢出后是否换行","description":"\n

（不支持 IE9 浏览器）默认列在行中宽度溢出后不会换行，如果想自动换行，请为 Row 设置 wrap 为 true。

\n","order":"3"},"codes":{"jsx":"import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
No wrap
\n \n col-6\n col-6\n col-6\n col-8\n \n
Wrap
\n \n col-6\n col-6\n col-6\n col-8\n \n
, mountNode);\n","css":".wrap-demo .demo-title {\n margin-left: 20px;\n}\n\n.wrap-demo .next-row {\n margin: 10px 0;\n}\n\n.wrap-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n"},"body":"\n\n````jsx\nimport { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n
\n
No wrap
\n \n col-6\n col-6\n col-6\n col-8\n \n
Wrap
\n \n col-6\n col-6\n col-6\n col-8\n \n
, mountNode);\n````\n\n````css\n.wrap-demo .demo-title {\n margin-left: 20px;\n}\n\n.wrap-demo .next-row {\n margin: 10px 0;\n}\n\n.wrap-demo .next-col {\n border:1px solid #CCC;\n border-radius: 3px;\n background-color:#ECECEC;\n height: 30px;\n line-height: 30px;\n text-align: center;\n}\n````","html":"
import { Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nReactDOM.render(\n    <div className=\"wrap-demo\">\n        <div className=\"demo-title\">No wrap</div>\n        <Row>\n            <Col span=\"6\">col-6</Col>\n            <Col span=\"6\">col-6</Col>\n            <Col span=\"6\">col-6</Col>\n            <Col span=\"8\">col-8</Col>\n        </Row>\n        <div className=\"demo-title\">Wrap</div>\n        <Row wrap>\n            <Col span=\"6\">col-6</Col>\n            <Col span=\"6\">col-6</Col>\n            <Col span=\"6\">col-6</Col>\n            <Col span=\"8\">col-8</Col>\n        </Row>\n    </div>, mountNode);
.wrap-demo .demo-title {\n    margin-left: 20px;\n}\n\n.wrap-demo .next-row {\n    margin: 10px 0;\n}\n\n.wrap-demo .next-col {\n    border:1px solid #CCC;\n    border-radius: 3px;\n    background-color:#ECECEC;\n    height: 30px;\n    line-height: 30px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/grid/index.en-us.md b/compiled_docs/grid/index.en-us.md new file mode 100644 index 0000000000..03885f54cd --- /dev/null +++ b/compiled_docs/grid/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Guide#

Basic Usage#

This grid system provides response rules for almost all mainstream resolution scenes such as 320, 480, 720, 990, 1200, and 1500. The responsive grids are implemented using a 24-column and a 5-point to meet 2, 3, 4, 5, and 6 ratio layouts. The fixed grid uses a 20px width as the unit, it is recommended to use 9, 10, 12, 14, 16, 18, 24, but all from 1 to 30 are also available. You can also customize the fixed grid columns according to your requirements. The breakpoint are: xss(320px), xs(480px), s(720px), m(990px), l(1200px), xl(1500px). Based on the Flex implementation, IE9 is compatible with display:table;, but IE9 only supports basic responsive layouts (see API and DEMO for details).

\n

Accessibility#

Though we have build-in support of a11y by adding <Row> and <Col> with role="row" and role="gridcell" respectively, in order to achieve more a11y compliance, developers are also expected to add role="grid" in the outer wrapper element, as this:

\n
<div role="grid">\n    <Row><Col span={6}>1</Col><Col span={6}>2</Col><Col span={6}>3</Col><Col span={6}>4</Col></Row>\n    <Row><Col span={6} offset={6}>1</Col><Col span={6} offset={6}>2</Col></Row>\n</div>

API#

","api":"

Grid.Row#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
childrencontent of the rowReactNode-
gutterspacing of the columnsString/Number0
wrapwhether the row is wrap while width overflowBooleanfalse
fixedwhether the width of the row stays the same under a certain breakpoint (the default row width varies depending on the viewport)Booleanfalse
fixedWidththe width of the fixed row is the width of a certain breakpoint and it is not affected by the viewport.

option:
'xxs'(320px)
'xs'(480px)
's'(720px)
'm'(990px)
'l'(1200px)
'xl'(1500px)		Enum-
align(IE9 is not supported) vertical alignment of columns

option:
'top'
'center'
'bottom'
'baseline'
'stretch'		Enum'stretch'
justify(IE9 is not supported) horizontal alignment of columns

option:
'start'
'center'
'end'
'space-between'
'space-around'		Enum'start'
hiddenwhether display or hide the row under different breakpoints.

option:
true(always hide)
false(always display)
'xs'(hide under xs breakpoint）
['xxs', 'xs', 's', 'm', 'l', 'xl'](hide under xxs, xs, s, m, l, xl breakpoint）		Boolean/String/Array-
\n

Grid.Col#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
childrencontent of the columnReactNode-
spanwidth of the column

option:
1, 2, 3, ..., 22, 23, 24		String/Number-
fixedSpanwidth of the fixed column, the unit width is 20px

option:
1, 2, 3, ..., 28, 29, 30		String/Number-
offset(IE9 is not supported) the offset of the column

option:
1, 2, 3, ..., 22, 23, 24		String/Number-
fixedOffset(IE9 is not supported) the fixed offset of the column, the unit width is 20px

option:
1, 2, 3, ..., 28, 29, 30		String/Number-
align(IE9 is not supported) vertical alignment of columns, it can override the Row's align property

option:
'top', 'center', 'bottom', 'baseline', 'stretch'		Enum-
hiddenwhether display or hide the column under different breakpoints.

option:
true(always hide)
false(always display)
'xs'(hide under xs breakpoint）
['xxs', 'xs', 's', 'm', 'l', 'xl'](hide under xxs, xs, s, m, l, xl breakpoint）		Boolean/String/Array-
xxs>=320px, responsive grid, it can be a span string or an object with span and offset propertyString/Number/Object-
xs>=480px, responsive grid, it can be a span string or an object with span and offset propertyString/Number/Object-
s>=720px, responsive grid, it can be a span string or an object with span and offset propertyString/Number/Object-
m>=990px, responsive grid, it can be a span string or an object with span and offset propertyString/Number/Object-
l>=1200px, responsive grid, it can be a span string or an object with span and offset propertyString/Number/Object-
xl>=1500px, responsive grid, it can be a span string or an object with span and offset propertyString/Number/Object-
componentrender node 'div'String'div'
\n"} \ No newline at end of file diff --git a/compiled_docs/grid/index.md b/compiled_docs/grid/index.md new file mode 100644 index 0000000000..4627196710 --- /dev/null +++ b/compiled_docs/grid/index.md @@ -0,0 +1 @@ +{"meta":"

开发指南#

基本使用#

此栅格系统提供了320，480，720, 990，1200，1500等几乎所有主流分辨率场景的响应规则。
\n响应式栅格采用24列栅格体系和5分比实现，以满足2，3，4，5，6分比布局等多种情况。
\n固定栅格采用 20px 宽度作为单位栅格， 推荐使用9，10，12，14，16，18，24，但同时也提供了从1到30的所有栅格，也可根据需求定制固定栅格列。
\n响应式断点阈值为：xss(320px), xs(480px), s(720px), m(990px), l(1200px), xl(1500px)。
\n基于Flex实现，对 IE9 通过 display:table; 兼容实现，但 IE9 仅支持基本的响应式布局（详情请参考 API 和 DEMO 的说明）。

\n

无障碍#

默认 <Row> 和 <Col> 会加上 role="row" 和 role="gridcell", 但是为了完美的无障碍实现, 开发者还应该在外部容器加上 role="grid"。示例代码如下:

\n
<div role="grid">\n    <Row><Col span={6}>1</Col><Col span={6}>2</Col><Col span={6}>3</Col><Col span={6}>4</Col></Row>\n    <Row><Col span={6} offset={6}>1</Col><Col span={6} offset={6}>2</Col></Row>\n</div>\n\n

API#

","api":"

Grid.Row#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
children行内容ReactNode-
gutter列间隔String/Number0
wrap列在行中宽度溢出后是否换行Booleanfalse
fixed行在某一断点下宽度是否保持不变（默认行宽度随视口变化而变化）Booleanfalse
fixedWidth固定行的宽度为某一断点的宽度，不受视口影响而变动

可选值:
'xxs'(320px)
'xs'(480px)
's'(720px)
'm'(990px)
'l'(1200px)
'xl'(1500px)		Enum-
align（不支持IE9浏览器）多列垂直方向对齐方式

可选值:
'top'(顶部对齐)
'center'(居中对齐)
'bottom'(底部对齐)
'baseline'(按第一行文字基线对齐)
'stretch'(未设置高度或设为 auto，将占满整个容器的高度)		Enum-
justify（不支持IE9浏览器）行内具有多余空间时的布局方式

可选值:
'start'(左对齐)
'center'(居中对齐)
'end'(右对齐)
'space-between'(两端对齐，列之间间距相等)
'space-around'(每列具有相同的左右间距，行两端间距是列间距的二分之一)		Enum-
hidden行在不同断点下的显示与隐藏

可选值:
true(在所有断点下隐藏)
false(在所有断点下显示)
'xs'(在 xs 断点下隐藏）
['xxs', 'xs', 's', 'm', 'l', 'xl'](在 xxs, xs, s, m, l, xl 断点下隐藏）		Boolean/String/Array-
component指定以何种元素渲染该节点
- 默认为 'div'		String/Function'div'
\n

Grid.Col#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
children列内容ReactNode-
span列宽度

可选值:
1, 2, 3, ..., 22, 23, 24		String/Number-
fixedSpan固定列宽度，宽度值为20 * 栅格数

可选值:
1, 2, 3, ..., 28, 29, 30		String/Number-
offset（不支持IE9浏览器）列偏移

可选值:
1, 2, 3, ..., 22, 23, 24		String/Number-
fixedOffset（不支持IE9浏览器）固定列偏移，宽度值为20 * 栅格数

可选值:
1, 2, 3, ..., 28, 29, 30		String/Number-
align（不支持IE9浏览器）多列垂直方向对齐方式，可覆盖Row的align属性

可选值:
'top', 'center', 'bottom', 'baseline', 'stretch'		Enum-
hidden列在不同断点下的显示与隐藏

可选值:
true(在所有断点下隐藏)
false(在所有断点下显示)
'xs'(在 xs 断点下隐藏）
['xxs', 'xs', 's', 'm', 'l', 'xl'](在 xxs, xs, s, m, l, xl 断点下隐藏）		Boolean/String/Array-
xxs>=320px，响应式栅格，可为栅格数（span）或一个包含栅格数（span）和偏移栅格数（offset）对象String/Number/Object-
xs>=480px，响应式栅格，可为栅格数（span）或一个包含栅格数（span）和偏移栅格数（offset）对象String/Number/Object-
s>=720px，响应式栅格，可为栅格数（span）或一个包含栅格数（span）和偏移栅格数（offset）对象String/Number/Object-
m>=990px，响应式栅格，可为栅格数（span）或一个包含栅格数（span）和偏移栅格数（offset）对象String/Number/Object-
l>=1200px，响应式栅格，可为栅格数（span）或一个包含栅格数（span）和偏移栅格数（offset）对象String/Number/Object-
xl>=1500px，响应式栅格，可为栅格数（span）或一个包含栅格数（span）和偏移栅格数（offset）对象String/Number/Object-
component指定以何种元素渲染该节点，默认为 'div'String/Function'div'
\n"} \ No newline at end of file diff --git a/compiled_docs/icon/demo/accessibility.en-us.md b/compiled_docs/icon/demo/accessibility.en-us.md new file mode 100644 index 0000000000..8f07c23e41 --- /dev/null +++ b/compiled_docs/icon/demo/accessibility.en-us.md @@ -0,0 +1 @@ +{"title":"Accessibility","meta":{"title":"Accessibility","description":"\n

If it's a decorative icon, set aria-hidden to ignore; Or it's a button, set role="button"and aria-label.

\n","order":"6"},"codes":{"jsx":"\nimport { Icon } from '@alifd/next';\n\nReactDOM.render(
\n button:
\n \n \n
\n decoration:
\n \n
, mountNode);\n\n"},"body":"\n````jsx\n\nimport { Icon } from '@alifd/next';\n\nReactDOM.render(
\n button:
\n \n \n
\n decoration:
\n \n
, mountNode);\n\n````","html":"
\nimport { Icon } from '@alifd/next';\n\nReactDOM.render(<div>\n    button: <br/>\n    <Icon type=\"atm\"  role=\"button\"  aria-label=\"icon atm\" style={{ margin:'5px' }}/>\n    <Icon type=\"smile\"  role=\"button\"  aria-label=\"icon smile\" style={{ margin:'5px' }}/>\n    <br/>\n    decoration: <br/>\n    <Icon type=\"success\" aria-hidden style={{ margin:'5px' }}/>\n</div>, mountNode);\n
"} \ No newline at end of file diff --git a/compiled_docs/icon/demo/accessibility.md b/compiled_docs/icon/demo/accessibility.md new file mode 100644 index 0000000000..d1ead5d788 --- /dev/null +++ b/compiled_docs/icon/demo/accessibility.md @@ -0,0 +1 @@ +{"title":"无障碍","meta":{"title":"无障碍","description":"\n

若为装饰性icon，请设置通过设置 aria-hidden 忽略；若为按钮类型icon，请务必设置 role="button" 和 aria-label。

\n","order":"6"},"codes":{"jsx":"\nimport { Icon } from '@alifd/next';\n\nReactDOM.render(
\n button:
\n \n \n
\n decoration:
\n \n
, mountNode);\n\n"},"body":"\n\n````jsx\n\nimport { Icon } from '@alifd/next';\n\nReactDOM.render(
\n button:
\n \n \n
\n decoration:
\n \n
, mountNode);\n\n````","html":"
\nimport { Icon } from '@alifd/next';\n\nReactDOM.render(<div>\n    button: <br/>\n    <Icon type=\"atm\"  role=\"button\"  aria-label=\"icon atm\" style={{ margin:'5px' }}/>\n    <Icon type=\"smile\"  role=\"button\"  aria-label=\"icon smile\" style={{ margin:'5px' }}/>\n    <br/>\n    decoration: <br/>\n    <Icon type=\"success\" aria-hidden style={{ margin:'5px' }}/>\n</div>, mountNode);\n
"} \ No newline at end of file diff --git a/compiled_docs/icon/demo/basic.en-us.md b/compiled_docs/icon/demo/basic.en-us.md new file mode 100644 index 0000000000..2786d3bcdc --- /dev/null +++ b/compiled_docs/icon/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic Usage","meta":{"title":"Basic Usage","description":"\n

Basic usage of Icon。

\n","order":"0"},"codes":{"jsx":"import { Icon } from '@alifd/next';\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Icon } from '@alifd/next';\n\nReactDOM.render(, mountNode);\n````","html":"
import { Icon } from '@alifd/next';\n\nReactDOM.render(<Icon type=\"atm\" />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/icon/demo/basic.md b/compiled_docs/icon/demo/basic.md new file mode 100644 index 0000000000..b74400702c --- /dev/null +++ b/compiled_docs/icon/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

展示图标基本使用方法。

\n","order":"0"},"codes":{"jsx":"import { Icon } from '@alifd/next';\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Icon } from '@alifd/next';\n\nReactDOM.render(, mountNode);\n````","html":"
import { Icon } from '@alifd/next';\n\nReactDOM.render(<Icon type=\"atm\" />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/icon/demo/size.en-us.md b/compiled_docs/icon/demo/size.en-us.md new file mode 100644 index 0000000000..2d108c8959 --- /dev/null +++ b/compiled_docs/icon/demo/size.en-us.md @@ -0,0 +1 @@ +{"title":"Size","meta":{"title":"Size","description":"\n

ICON's sizes include:xxs，xs，small，medium，large，xl，xxl，xxxl, inherit。

\n","order":"2"},"codes":{"jsx":"import { Icon } from '@alifd/next';\n\nconst sizes = ['xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl'];\nconst inherit = 'inherit';\nReactDOM.render((\n
\n
    \n {sizes.map((size, index) => (\n
  • \n \n {size}\n
    • ))}\n
\n\n {inherit}\n

\n Shall I compare thee to a summer's day? \n

\n

\n Thou art more lovely and more temperate. \n

\n

\n Rough winds do shake the darling buds of May, \n

\n

\n And summer's lease hath all too short a date. \n

\n
\n), mountNode);\n\n","css":".icon-sizes {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.icon-sizes li {\n display: inline-block;\n width: 80px;\n height: 80px;\n}\n\n.icon-sizes i {\n display: block;\n margin: 12px auto 0 auto;\n text-align: center;\n}\n\n.icon-sizes span {\n display: block;\n margin-top: 10px;\n text-align: center;\n}\n"},"body":"\n````jsx\nimport { Icon } from '@alifd/next';\n\nconst sizes = ['xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl'];\nconst inherit = 'inherit';\nReactDOM.render((\n
\n
    \n {sizes.map((size, index) => (\n
  • \n \n {size}\n
    • ))}\n
\n\n {inherit}\n

\n Shall I compare thee to a summer's day? \n

\n

\n Thou art more lovely and more temperate. \n

\n

\n Rough winds do shake the darling buds of May, \n

\n

\n And summer's lease hath all too short a date. \n

\n
\n), mountNode);\n\n````\n\n````css\n.icon-sizes {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.icon-sizes li {\n display: inline-block;\n width: 80px;\n height: 80px;\n}\n\n.icon-sizes i {\n display: block;\n margin: 12px auto 0 auto;\n text-align: center;\n}\n\n.icon-sizes span {\n display: block;\n margin-top: 10px;\n text-align: center;\n}\n````","html":"
import { Icon } from '@alifd/next';\n\nconst sizes = ['xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl'];\nconst inherit = 'inherit';\nReactDOM.render((\n    <div>\n        <ul className=\"icon-sizes\">\n            {sizes.map((size, index) => (\n                <li key={index}>\n                    <Icon type=\"smile\" size={size} />\n                    <span>{size}</span>\n                </li>))}\n        </ul>\n\n        <span>{inherit}</span>\n        <h4>\n            Shall I compare thee to a summer's day? <Icon type=\"smile\" size={inherit} /> <Icon type=\"set\" size={inherit} />\n        </h4>\n        <h3>\n            Thou art more lovely and more temperate. <Icon type=\"smile\" size={inherit} /> <Icon type=\"set\" size={inherit} />\n        </h3>\n        <h2>\n           Rough winds do shake the darling buds of May,  <Icon type=\"smile\" size={inherit} /> <Icon type=\"set\" size={inherit} />\n        </h2>\n        <h1>\n           And summer's lease hath all too short a date.  <Icon type=\"smile\" size={inherit} /> <Icon type=\"set\" size={inherit} />\n        </h1>\n    </div>\n), mountNode);\n
.icon-sizes {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.icon-sizes li {\n    display: inline-block;\n    width: 80px;\n    height: 80px;\n}\n\n.icon-sizes i {\n    display: block;\n    margin: 12px auto 0 auto;\n    text-align: center;\n}\n\n.icon-sizes span {\n    display: block;\n    margin-top: 10px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/icon/demo/size.md b/compiled_docs/icon/demo/size.md new file mode 100644 index 0000000000..9ef09471d2 --- /dev/null +++ b/compiled_docs/icon/demo/size.md @@ -0,0 +1 @@ +{"title":"尺寸","meta":{"title":"尺寸","description":"\n

ICON的尺寸包括：xxs，xs，small，medium，large，xl，xxl，xxxl, inherit。

\n","order":"2"},"codes":{"jsx":"import { Icon } from '@alifd/next';\n\nconst sizes = ['xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl'];\nconst inherit = 'inherit';\nReactDOM.render((\n
\n
    \n {sizes.map((size, index) => (\n
  • \n \n {size}\n
    • ))}\n
\n\n {inherit}\n

\n Shall I compare thee to a summer's day? \n

\n

\n Thou art more lovely and more temperate. \n

\n

\n Rough winds do shake the darling buds of May, \n

\n

\n And summer's lease hath all too short a date. \n

\n
\n), mountNode);\n\n","css":".icon-sizes {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.icon-sizes li {\n display: inline-block;\n width: 80px;\n height: 80px;\n}\n\n.icon-sizes i {\n display: block;\n margin: 12px auto 0 auto;\n text-align: center;\n}\n\n.icon-sizes span {\n display: block;\n margin-top: 10px;\n text-align: center;\n}\n"},"body":"\n\n````jsx\nimport { Icon } from '@alifd/next';\n\nconst sizes = ['xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl'];\nconst inherit = 'inherit';\nReactDOM.render((\n
\n
    \n {sizes.map((size, index) => (\n
  • \n \n {size}\n
    • ))}\n
\n\n {inherit}\n

\n Shall I compare thee to a summer's day? \n

\n

\n Thou art more lovely and more temperate. \n

\n

\n Rough winds do shake the darling buds of May, \n

\n

\n And summer's lease hath all too short a date. \n

\n
\n), mountNode);\n\n````\n\n````css\n.icon-sizes {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.icon-sizes li {\n display: inline-block;\n width: 80px;\n height: 80px;\n}\n\n.icon-sizes i {\n display: block;\n margin: 12px auto 0 auto;\n text-align: center;\n}\n\n.icon-sizes span {\n display: block;\n margin-top: 10px;\n text-align: center;\n}\n````","html":"
import { Icon } from '@alifd/next';\n\nconst sizes = ['xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl'];\nconst inherit = 'inherit';\nReactDOM.render((\n    <div>\n        <ul className=\"icon-sizes\">\n            {sizes.map((size, index) => (\n                <li key={index}>\n                    <Icon type=\"smile\" size={size} />\n                    <span>{size}</span>\n                </li>))}\n        </ul>\n\n        <span>{inherit}</span>\n        <h4>\n            Shall I compare thee to a summer's day? <Icon type=\"smile\" size={inherit} /> <Icon type=\"set\" size={inherit} />\n        </h4>\n        <h3>\n            Thou art more lovely and more temperate. <Icon type=\"smile\" size={inherit} /> <Icon type=\"set\" size={inherit} />\n        </h3>\n        <h2>\n           Rough winds do shake the darling buds of May,  <Icon type=\"smile\" size={inherit} /> <Icon type=\"set\" size={inherit} />\n        </h2>\n        <h1>\n           And summer's lease hath all too short a date.  <Icon type=\"smile\" size={inherit} /> <Icon type=\"set\" size={inherit} />\n        </h1>\n    </div>\n), mountNode);\n
.icon-sizes {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.icon-sizes li {\n    display: inline-block;\n    width: 80px;\n    height: 80px;\n}\n\n.icon-sizes i {\n    display: block;\n    margin: 12px auto 0 auto;\n    text-align: center;\n}\n\n.icon-sizes span {\n    display: block;\n    margin-top: 10px;\n    text-align: center;\n}
"} \ No newline at end of file diff --git a/compiled_docs/icon/demo/style.en-us.md b/compiled_docs/icon/demo/style.en-us.md new file mode 100644 index 0000000000..5d055dc5d1 --- /dev/null +++ b/compiled_docs/icon/demo/style.en-us.md @@ -0,0 +1 @@ +{"title":"Custom Style","meta":{"title":"Custom Style","description":"\n

Icon fonts are essentially text. You can use style and className to set the size and color of the icons.

\n","order":"3"},"codes":{"jsx":"import { Icon } from '@alifd/next';\n\nReactDOM.render(\n
\n
\n \n This is a success message!\n
\n
\n \n This is a warning message!\n
\n
\n \n This is a failure message!\n
\n
\n , mountNode);\n","css":".icon-style-demo {\n height: 24px;\n line-height: 24px;\n margin-bottom: 10px;\n font-size: 16px;\n color: #333;\n}\n"},"body":"\n````jsx\nimport { Icon } from '@alifd/next';\n\nReactDOM.render(\n
\n
\n \n This is a success message!\n
\n
\n \n This is a warning message!\n
\n
\n \n This is a failure message!\n
\n
\n , mountNode);\n````\n\n````css\n.icon-style-demo {\n height: 24px;\n line-height: 24px;\n margin-bottom: 10px;\n font-size: 16px;\n color: #333;\n}\n````","html":"
import { Icon } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <div className=\"icon-style-demo\">\n            <Icon type=\"success\" style={{ color: '#1DC11D', marginRight: '10px' }} />\n            This is a success message!\n        </div>\n        <div className=\"icon-style-demo\">\n            <Icon type=\"warning\" style={{ color: '#FFA003', marginRight: '10px' }} />\n            This is a warning message!\n        </div>\n        <div className=\"icon-style-demo\">\n            <Icon type=\"error\" style={{ color: '#FF3333', marginRight: '10px' }} />\n            This is a failure message!\n        </div>\n    </div>\n    , mountNode);
.icon-style-demo {\n    height: 24px;\n    line-height: 24px;\n    margin-bottom: 10px;\n    font-size: 16px;\n    color: #333;\n}
"} \ No newline at end of file diff --git a/compiled_docs/icon/demo/style.md b/compiled_docs/icon/demo/style.md new file mode 100644 index 0000000000..74a1a3b146 --- /dev/null +++ b/compiled_docs/icon/demo/style.md @@ -0,0 +1 @@ +{"title":"自定义样式","meta":{"title":"自定义样式","description":"\n

图标字体本质上还是文字，可以使用 style 和 className 设置图标的大小和颜色。

\n","order":"3"},"codes":{"jsx":"import { Icon } from '@alifd/next';\n\nReactDOM.render(\n
\n
\n \n This is a success message!\n
\n
\n \n This is a warning message!\n
\n
\n \n This is a failure message!\n
\n
\n , mountNode);\n","css":".icon-style-demo {\n height: 24px;\n line-height: 24px;\n margin-bottom: 10px;\n font-size: 16px;\n color: #333;\n}\n"},"body":"\n\n````jsx\nimport { Icon } from '@alifd/next';\n\nReactDOM.render(\n
\n
\n \n This is a success message!\n
\n
\n \n This is a warning message!\n
\n
\n \n This is a failure message!\n
\n
\n , mountNode);\n````\n\n````css\n.icon-style-demo {\n height: 24px;\n line-height: 24px;\n margin-bottom: 10px;\n font-size: 16px;\n color: #333;\n}\n````","html":"
import { Icon } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <div className=\"icon-style-demo\">\n            <Icon type=\"success\" style={{ color: '#1DC11D', marginRight: '10px' }} />\n            This is a success message!\n        </div>\n        <div className=\"icon-style-demo\">\n            <Icon type=\"warning\" style={{ color: '#FFA003', marginRight: '10px' }} />\n            This is a warning message!\n        </div>\n        <div className=\"icon-style-demo\">\n            <Icon type=\"error\" style={{ color: '#FF3333', marginRight: '10px' }} />\n            This is a failure message!\n        </div>\n    </div>\n    , mountNode);
.icon-style-demo {\n    height: 24px;\n    line-height: 24px;\n    margin-bottom: 10px;\n    font-size: 16px;\n    color: #333;\n}
"} \ No newline at end of file diff --git a/compiled_docs/icon/demo/type.en-us.md b/compiled_docs/icon/demo/type.en-us.md new file mode 100644 index 0000000000..066fe0458b --- /dev/null +++ b/compiled_docs/icon/demo/type.en-us.md @@ -0,0 +1 @@ +{"title":"List of Icons","meta":{"title":"List of Icons","description":"\n

Click on the icon to copy the code.

\n","order":"1"},"codes":{"jsx":"import { Message, Icon } from '@alifd/next';\n\n\nimport CopyToClipboard from 'react-copy-to-clipboard';\n\nconst types = [\n 'smile', 'cry', 'success', 'warning', 'prompt',\n 'error', 'help', 'clock', 'success-filling', 'delete-filling',\n 'favorites-filling', 'add', 'minus', 'arrow-up', 'arrow-down',\n 'arrow-left', 'arrow-right', 'arrow-double-left', 'arrow-double-right', 'switch',\n 'sorting', 'descending', 'ascending', 'select', 'semi-select',\n 'loading', 'search', 'close', 'ellipsis', 'picture',\n 'calendar', 'ashbin', 'upload', 'download', 'set',\n 'edit', 'refresh', 'filter', 'attachment', 'account',\n 'email', 'atm'\n];\n\n\nlet customTypes = [];\n\n// The code here is for fusion dev display custom Icon components only\nif (window.customIcons) {\n customTypes = window.customIcons;\n}\n\nconst handleCopy = () => Message.success('Copied!');\n\nReactDOM.render(\n
\n
Click on the icon to copy the code.
\n
    \n {types.map((type, index) => (\n `} onCopy={handleCopy}>\n
  • \n \n {type}\n
    • \n     ))}\n
\n {\n customTypes.length ?\n
\n
Custom Icon
\n
    \n {\n customTypes.map((type, index) => (\n `} onCopy={handleCopy}>\n
  • \n \n {type}\n
    • \n     ))\n }\n
\n
:\n null\n }\n\n
\n , mountNode);\n","css":".icon-list-title {\n margin-bottom: 20px;\n font-size: 24px;\n color: #333;\n}\n\n.icon-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.icon-list li {\n display: inline-block;\n width: 140px;\n padding: 30px 0;\n color: #666;\n cursor: pointer;\n}\n\n.icon-list li:hover {\n color: #333;\n background-color: #f7f7f7;\n}\n\n.icon-list i {\n display: block;\n width: 32px;\n margin: 0 auto;\n}\n\n.icon-list span {\n display: block;\n margin-top: 10px;\n text-align: center;\n font-size: 14px;\n}\n\n.icon-list-custom-title {\n margin: 20px 0 20px 10px;\n font-size: 20px;\n color: #333;\n}\n"},"body":"\n````jsx\nimport { Message, Icon } from '@alifd/next';\n\n\nimport CopyToClipboard from 'react-copy-to-clipboard';\n\nconst types = [\n 'smile', 'cry', 'success', 'warning', 'prompt',\n 'error', 'help', 'clock', 'success-filling', 'delete-filling',\n 'favorites-filling', 'add', 'minus', 'arrow-up', 'arrow-down',\n 'arrow-left', 'arrow-right', 'arrow-double-left', 'arrow-double-right', 'switch',\n 'sorting', 'descending', 'ascending', 'select', 'semi-select',\n 'loading', 'search', 'close', 'ellipsis', 'picture',\n 'calendar', 'ashbin', 'upload', 'download', 'set',\n 'edit', 'refresh', 'filter', 'attachment', 'account',\n 'email', 'atm'\n];\n\n\nlet customTypes = [];\n\n// The code here is for fusion dev display custom Icon components only\nif (window.customIcons) {\n customTypes = window.customIcons;\n}\n\nconst handleCopy = () => Message.success('Copied!');\n\nReactDOM.render(\n
\n
Click on the icon to copy the code.
\n
    \n {types.map((type, index) => (\n `} onCopy={handleCopy}>\n
  • \n \n {type}\n
    • \n     ))}\n
\n {\n customTypes.length ?\n
\n
Custom Icon
\n
    \n {\n customTypes.map((type, index) => (\n `} onCopy={handleCopy}>\n
  • \n \n {type}\n
    • \n     ))\n }\n
\n
:\n null\n }\n\n
\n , mountNode);\n````\n\n````css\n.icon-list-title {\n margin-bottom: 20px;\n font-size: 24px;\n color: #333;\n}\n\n.icon-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.icon-list li {\n display: inline-block;\n width: 140px;\n padding: 30px 0;\n color: #666;\n cursor: pointer;\n}\n\n.icon-list li:hover {\n color: #333;\n background-color: #f7f7f7;\n}\n\n.icon-list i {\n display: block;\n width: 32px;\n margin: 0 auto;\n}\n\n.icon-list span {\n display: block;\n margin-top: 10px;\n text-align: center;\n font-size: 14px;\n}\n\n.icon-list-custom-title {\n margin: 20px 0 20px 10px;\n font-size: 20px;\n color: #333;\n}\n````","html":"
import { Message, Icon } from '@alifd/next';\n\n\nimport CopyToClipboard from 'react-copy-to-clipboard';\n\nconst types = [\n    'smile', 'cry', 'success', 'warning', 'prompt',\n    'error', 'help', 'clock', 'success-filling', 'delete-filling',\n    'favorites-filling', 'add', 'minus', 'arrow-up', 'arrow-down',\n    'arrow-left', 'arrow-right', 'arrow-double-left', 'arrow-double-right', 'switch',\n    'sorting', 'descending', 'ascending', 'select', 'semi-select',\n    'loading', 'search', 'close', 'ellipsis', 'picture',\n    'calendar', 'ashbin', 'upload', 'download', 'set',\n    'edit', 'refresh', 'filter', 'attachment', 'account',\n    'email', 'atm'\n];\n\n\nlet customTypes = [];\n\n// The code here is for fusion dev display custom Icon components only\nif (window.customIcons) {\n    customTypes = window.customIcons;\n}\n\nconst handleCopy = () => Message.success('Copied!');\n\nReactDOM.render(\n    <div>\n        <div className=\"icon-list-title\">Click on the icon to copy the code.</div>\n        <ul className=\"icon-list\">\n            {types.map((type, index) => (\n                <CopyToClipboard key={index} text={`<Icon type=\"${type}\" />`} onCopy={handleCopy}>\n                    <li>\n                        <Icon type={type} size=\"xl\" />\n                        <span>{type}</span>\n                    </li>\n                </CopyToClipboard>))}\n        </ul>\n        {\n            customTypes.length ?\n                <div>\n                    <div className=\"icon-list-custom-title\">Custom Icon</div>\n                    <ul className=\"icon-list\">\n                        {\n                            customTypes.map((type, index) => (\n                                <CopyToClipboard key={index} text={`<Icon type=\"${type}\" />`} onCopy={handleCopy}>\n                                    <li>\n                                        <Icon type={type} size=\"xl\" />\n                                        <span>{type}</span>\n                                    </li>\n                                </CopyToClipboard>))\n                        }\n                    </ul>\n                </div> :\n                null\n        }\n\n    </div>\n    , mountNode);
.icon-list-title {\n    margin-bottom: 20px;\n    font-size: 24px;\n    color: #333;\n}\n\n.icon-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.icon-list li {\n    display: inline-block;\n    width: 140px;\n    padding: 30px 0;\n    color: #666;\n    cursor: pointer;\n}\n\n.icon-list li:hover {\n    color: #333;\n    background-color: #f7f7f7;\n}\n\n.icon-list i {\n    display: block;\n    width: 32px;\n    margin: 0 auto;\n}\n\n.icon-list span {\n    display: block;\n    margin-top: 10px;\n    text-align: center;\n    font-size: 14px;\n}\n\n.icon-list-custom-title {\n    margin: 20px 0 20px 10px;\n    font-size: 20px;\n    color: #333;\n}
"} \ No newline at end of file diff --git a/compiled_docs/icon/demo/type.md b/compiled_docs/icon/demo/type.md new file mode 100644 index 0000000000..df2adc28d3 --- /dev/null +++ b/compiled_docs/icon/demo/type.md @@ -0,0 +1 @@ +{"title":"图标列表","meta":{"title":"图标列表","description":"\n

点击图标复制代码。

\n","order":"1"},"codes":{"jsx":"import { Message, Icon } from '@alifd/next';\n\n\nimport CopyToClipboard from 'react-copy-to-clipboard';\n\nconst types = [\n 'smile', 'cry', 'success', 'warning', 'prompt',\n 'error', 'help', 'clock', 'success-filling', 'delete-filling',\n 'favorites-filling', 'add', 'minus', 'arrow-up', 'arrow-down',\n 'arrow-left', 'arrow-right', 'arrow-double-left', 'arrow-double-right', 'switch',\n 'sorting', 'descending', 'ascending', 'select', 'semi-select',\n 'loading', 'search', 'close', 'ellipsis', 'picture',\n 'calendar', 'ashbin', 'upload', 'download', 'set',\n 'edit', 'refresh', 'filter', 'attachment', 'account',\n 'email', 'atm'\n];\n\n\nlet customTypes = [];\n\n// The code here is for fusion dev display custom Icon components only\nif (window.customIcons) {\n customTypes = window.customIcons;\n}\n\nconst handleCopy = () => Message.success('Copied!');\n\nReactDOM.render(\n
\n
Click on the icon to copy the code.
\n
    \n {types.map((type, index) => (\n `} onCopy={handleCopy}>\n
  • \n \n {type}\n
    • \n     ))}\n
\n {\n customTypes.length ?\n
\n
Custom Icon
\n
    \n {\n customTypes.map((type, index) => (\n `} onCopy={handleCopy}>\n
  • \n \n {type}\n
    • \n     ))\n }\n
\n
:\n null\n }\n\n
\n , mountNode);\n","css":".icon-list-title {\n margin-bottom: 20px;\n font-size: 24px;\n color: #333;\n}\n\n.icon-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.icon-list li {\n display: inline-block;\n width: 140px;\n padding: 30px 0;\n color: #666;\n cursor: pointer;\n}\n\n.icon-list li:hover {\n color: #333;\n background-color: #f7f7f7;\n}\n\n.icon-list i {\n display: block;\n width: 32px;\n margin: 0 auto;\n}\n\n.icon-list span {\n display: block;\n margin-top: 10px;\n text-align: center;\n font-size: 14px;\n}\n\n.icon-list-custom-title {\n margin: 20px 0 20px 10px;\n font-size: 20px;\n color: #333;\n}\n"},"body":"\n\n````jsx\nimport { Message, Icon } from '@alifd/next';\n\n\nimport CopyToClipboard from 'react-copy-to-clipboard';\n\nconst types = [\n 'smile', 'cry', 'success', 'warning', 'prompt',\n 'error', 'help', 'clock', 'success-filling', 'delete-filling',\n 'favorites-filling', 'add', 'minus', 'arrow-up', 'arrow-down',\n 'arrow-left', 'arrow-right', 'arrow-double-left', 'arrow-double-right', 'switch',\n 'sorting', 'descending', 'ascending', 'select', 'semi-select',\n 'loading', 'search', 'close', 'ellipsis', 'picture',\n 'calendar', 'ashbin', 'upload', 'download', 'set',\n 'edit', 'refresh', 'filter', 'attachment', 'account',\n 'email', 'atm'\n];\n\n\nlet customTypes = [];\n\n// The code here is for fusion dev display custom Icon components only\nif (window.customIcons) {\n customTypes = window.customIcons;\n}\n\nconst handleCopy = () => Message.success('Copied!');\n\nReactDOM.render(\n
\n
Click on the icon to copy the code.
\n
    \n {types.map((type, index) => (\n `} onCopy={handleCopy}>\n
  • \n \n {type}\n
    • \n     ))}\n
\n {\n customTypes.length ?\n
\n
Custom Icon
\n
    \n {\n customTypes.map((type, index) => (\n `} onCopy={handleCopy}>\n
  • \n \n {type}\n
    • \n     ))\n }\n
\n
:\n null\n }\n\n
\n , mountNode);\n````\n\n````css\n.icon-list-title {\n margin-bottom: 20px;\n font-size: 24px;\n color: #333;\n}\n\n.icon-list {\n margin: 0;\n padding: 0;\n list-style: none;\n}\n\n.icon-list li {\n display: inline-block;\n width: 140px;\n padding: 30px 0;\n color: #666;\n cursor: pointer;\n}\n\n.icon-list li:hover {\n color: #333;\n background-color: #f7f7f7;\n}\n\n.icon-list i {\n display: block;\n width: 32px;\n margin: 0 auto;\n}\n\n.icon-list span {\n display: block;\n margin-top: 10px;\n text-align: center;\n font-size: 14px;\n}\n\n.icon-list-custom-title {\n margin: 20px 0 20px 10px;\n font-size: 20px;\n color: #333;\n}\n````","html":"
import { Message, Icon } from '@alifd/next';\n\n\nimport CopyToClipboard from 'react-copy-to-clipboard';\n\nconst types = [\n    'smile', 'cry', 'success', 'warning', 'prompt',\n    'error', 'help', 'clock', 'success-filling', 'delete-filling',\n    'favorites-filling', 'add', 'minus', 'arrow-up', 'arrow-down',\n    'arrow-left', 'arrow-right', 'arrow-double-left', 'arrow-double-right', 'switch',\n    'sorting', 'descending', 'ascending', 'select', 'semi-select',\n    'loading', 'search', 'close', 'ellipsis', 'picture',\n    'calendar', 'ashbin', 'upload', 'download', 'set',\n    'edit', 'refresh', 'filter', 'attachment', 'account',\n    'email', 'atm'\n];\n\n\nlet customTypes = [];\n\n// The code here is for fusion dev display custom Icon components only\nif (window.customIcons) {\n    customTypes = window.customIcons;\n}\n\nconst handleCopy = () => Message.success('Copied!');\n\nReactDOM.render(\n    <div>\n        <div className=\"icon-list-title\">Click on the icon to copy the code.</div>\n        <ul className=\"icon-list\">\n            {types.map((type, index) => (\n                <CopyToClipboard key={index} text={`<Icon type=\"${type}\" />`} onCopy={handleCopy}>\n                    <li>\n                        <Icon type={type} size=\"xl\" />\n                        <span>{type}</span>\n                    </li>\n                </CopyToClipboard>))}\n        </ul>\n        {\n            customTypes.length ?\n                <div>\n                    <div className=\"icon-list-custom-title\">Custom Icon</div>\n                    <ul className=\"icon-list\">\n                        {\n                            customTypes.map((type, index) => (\n                                <CopyToClipboard key={index} text={`<Icon type=\"${type}\" />`} onCopy={handleCopy}>\n                                    <li>\n                                        <Icon type={type} size=\"xl\" />\n                                        <span>{type}</span>\n                                    </li>\n                                </CopyToClipboard>))\n                        }\n                    </ul>\n                </div> :\n                null\n        }\n\n    </div>\n    , mountNode);
.icon-list-title {\n    margin-bottom: 20px;\n    font-size: 24px;\n    color: #333;\n}\n\n.icon-list {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n\n.icon-list li {\n    display: inline-block;\n    width: 140px;\n    padding: 30px 0;\n    color: #666;\n    cursor: pointer;\n}\n\n.icon-list li:hover {\n    color: #333;\n    background-color: #f7f7f7;\n}\n\n.icon-list i {\n    display: block;\n    width: 32px;\n    margin: 0 auto;\n}\n\n.icon-list span {\n    display: block;\n    margin-top: 10px;\n    text-align: center;\n    font-size: 14px;\n}\n\n.icon-list-custom-title {\n    margin: 20px 0 20px 10px;\n    font-size: 20px;\n    color: #333;\n}
"} \ No newline at end of file diff --git a/compiled_docs/icon/index.en-us.md b/compiled_docs/icon/index.en-us.md new file mode 100644 index 0000000000..c5660df0c5 --- /dev/null +++ b/compiled_docs/icon/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

API#

","api":"

Icon#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
sizeTo set the icon size

option:
'xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl', 'inherit'		Enum'medium'
typeSpecify which icon to displayString-
\n"} \ No newline at end of file diff --git a/compiled_docs/icon/index.md b/compiled_docs/icon/index.md new file mode 100644 index 0000000000..5f23008b6a --- /dev/null +++ b/compiled_docs/icon/index.md @@ -0,0 +1 @@ +{"meta":"

Q&A#

    \n
  • Q: 如何添加自定义Icon呢？
    \nA: 默认提供部分基础 icon ，若要添加自定义 icon 可在 Fusion 设计中心新建主题，编辑主题中的Icon组件，完成后发布主题。每个主题是一个 npm 包，npm 包里面包含了主题变量、iconfont 地址等相关代码。在你的项目里引用该自定义主题包，更新主题包的版本即可（前提是你的项目/构建工具支持 Fusion 主题的使用）
    • \n
\n

注意事项#

    \n
  • 若为装饰性icon，请设置通过设置 aria-hidden 忽略；若为按钮类型icon，请务必设置 role="button" 和 aria-label
    • \n
\n

API#

","api":"

Icon#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
size指定图标大小

可选值:
'xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl', 'inherit'		Enum'medium'
type指定显示哪种图标String-
\n"} \ No newline at end of file diff --git a/compiled_docs/input/demo/accessibility.en-us.md b/compiled_docs/input/demo/accessibility.en-us.md new file mode 100644 index 0000000000..e792b717d4 --- /dev/null +++ b/compiled_docs/input/demo/accessibility.en-us.md @@ -0,0 +1 @@ +{"title":"Accessibility","meta":{"title":"Accessibility","description":"\n

Describe the Input component by aria-label.Please refer to ARIA and KeyBoard for keyboard operation.

\n","order":"13"},"codes":{"jsx":"import { Input } from '@alifd/next';\n\nfunction onChange(v) {\n console.log(v);\n}\nfunction onKeyDown(v) {\n console.log(v);\n}\nReactDOM.render(
\n \n
\n , mountNode);\n"},"body":"\n````jsx\nimport { Input } from '@alifd/next';\n\nfunction onChange(v) {\n console.log(v);\n}\nfunction onKeyDown(v) {\n console.log(v);\n}\nReactDOM.render(
\n \n
\n , mountNode);\n````","html":"
import { Input } from '@alifd/next';\n\nfunction onChange(v) {\n    console.log(v);\n}\nfunction onKeyDown(v) {\n    console.log(v);\n}\nReactDOM.render(<div>\n    <Input size=\"large\" placeholder=\"please input\" onChange={onChange} onKeyDown={onKeyDown} aria-label=\"this is input\" /> \n</div>\n    , mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/input/demo/accessibility.md b/compiled_docs/input/demo/accessibility.md new file mode 100644 index 0000000000..4a4e24c41b --- /dev/null +++ b/compiled_docs/input/demo/accessibility.md @@ -0,0 +1 @@ +{"title":"无障碍","meta":{"title":"无障碍","description":"\n

通过aria-label对Input组件进行描述。关于键盘操作请参考ARIA and KeyBoard。

\n","order":"13"},"codes":{"jsx":"import { Input } from '@alifd/next';\n\nfunction onChange(v) {\n console.log(v);\n}\nfunction onKeyDown(v) {\n console.log(v);\n}\nReactDOM.render(
\n \n
\n , mountNode);\n"},"body":"\n\n````jsx\nimport { Input } from '@alifd/next';\n\nfunction onChange(v) {\n console.log(v);\n}\nfunction onKeyDown(v) {\n console.log(v);\n}\nReactDOM.render(
\n \n
\n , mountNode);\n````","html":"
import { Input } from '@alifd/next';\n\nfunction onChange(v) {\n    console.log(v);\n}\nfunction onKeyDown(v) {\n    console.log(v);\n}\nReactDOM.render(<div>\n    <Input size=\"large\" placeholder=\"please input\" onChange={onChange} onKeyDown={onKeyDown} aria-label=\"this is input\" /> \n</div>\n    , mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/input/demo/addon.en-us.md b/compiled_docs/input/demo/addon.en-us.md new file mode 100644 index 0000000000..e746d6a55a --- /dev/null +++ b/compiled_docs/input/demo/addon.en-us.md @@ -0,0 +1 @@ +{"title":"Addon","meta":{"title":"Addon","description":"\n","order":"2"},"codes":{"jsx":"import { Input } from '@alifd/next';\n\nReactDOM.render(
\n

\n\n

\n\n \n
\n , mountNode);\n"},"body":"\n````jsx\nimport { Input } from '@alifd/next';\n\nReactDOM.render(
\n

\n\n

\n\n \n
\n , mountNode);\n````","html":"
import { Input } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Input hasLimitHint\n        addonTextBefore=\"http://\"\n        addonTextAfter=\".com\"\n        size=\"large\"\n        defaultValue=\"alibaba\"\n        maxLength={2}\n        aria-label=\"input with config of addonTextBefore and addonTextAfter\" /><br /><br />\n\n    <Input\n        addonTextBefore=\"http://\"\n        addonTextAfter=\".com\"\n        size=\"medium\"\n        value=\"alibaba\"\n        aria-label=\"input with config of addonTextBefore and addonTextAfter\" /><br /><br />\n\n    <Input\n        addonTextBefore=\"http://\"\n        addonTextAfter=\".com\"\n        size=\"small\"\n        value=\"alibaba\"\n        aria-label=\"input with config of addonTextBefore and addonTextAfter\" />\n</div>\n    , mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/input/demo/addon.md b/compiled_docs/input/demo/addon.md new file mode 100644 index 0000000000..12f499abdb --- /dev/null +++ b/compiled_docs/input/demo/addon.md @@ -0,0 +1 @@ +{"title":"前后扩展","meta":{"title":"前后扩展","description":"\n","order":"2"},"codes":{"jsx":"import { Input } from '@alifd/next';\n\nReactDOM.render(
\n

\n\n

\n\n \n
\n , mountNode);\n"},"body":"\n\n````jsx\nimport { Input } from '@alifd/next';\n\nReactDOM.render(
\n

\n\n

\n\n \n
\n , mountNode);\n````","html":"
import { Input } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Input hasLimitHint\n        addonTextBefore=\"http://\"\n        addonTextAfter=\".com\"\n        size=\"large\"\n        defaultValue=\"alibaba\"\n        maxLength={2}\n        aria-label=\"input with config of addonTextBefore and addonTextAfter\" /><br /><br />\n\n    <Input\n        addonTextBefore=\"http://\"\n        addonTextAfter=\".com\"\n        size=\"medium\"\n        value=\"alibaba\"\n        aria-label=\"input with config of addonTextBefore and addonTextAfter\" /><br /><br />\n\n    <Input\n        addonTextBefore=\"http://\"\n        addonTextAfter=\".com\"\n        size=\"small\"\n        value=\"alibaba\"\n        aria-label=\"input with config of addonTextBefore and addonTextAfter\" />\n</div>\n    , mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/input/demo/autoheight.en-us.md b/compiled_docs/input/demo/autoheight.en-us.md new file mode 100644 index 0000000000..0012e1886c --- /dev/null +++ b/compiled_docs/input/demo/autoheight.en-us.md @@ -0,0 +1 @@ +{"title":"Auto Height","meta":{"title":"Auto Height","description":"\n

Set Input as a TextArea

\n","order":"9"},"codes":{"jsx":"import { Input } from '@alifd/next';\n\n\n\n\nReactDOM.render(\n
\n {\n console.log('onKeyDown', opts);\n }} />

\n\n \n
\n , mountNode);\n"},"body":"\n````jsx\nimport { Input } from '@alifd/next';\n\n\n\n\nReactDOM.render(\n
\n {\n console.log('onKeyDown', opts);\n }} />

\n\n \n
\n , mountNode);\n````","html":"
import { Input } from '@alifd/next';\n\n\n\n\nReactDOM.render(\n    <div >\n        <Input.TextArea\n            autoHeight\n            trim\n            aria-label=\"auto height\"\n            placeholder=\"autoHeight\"\n            onKeyDown={(e, opts) => {\n                console.log('onKeyDown', opts);\n            }} /><br/><br/>\n\n        <Input.TextArea aria-label=\"auto height\" autoHeight={{ minRows: 2, maxRows: 6 }} />\n    </div>\n    , mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/input/demo/autoheight.md b/compiled_docs/input/demo/autoheight.md new file mode 100644 index 0000000000..673aa32606 --- /dev/null +++ b/compiled_docs/input/demo/autoheight.md @@ -0,0 +1 @@ +{"title":"自动高度","meta":{"title":"自动高度","description":"\n

设置 Input 为 多行文本域；

\n","order":"9"},"codes":{"jsx":"import { Input } from '@alifd/next';\n\n\n\n\nReactDOM.render(\n
\n {\n console.log('onKeyDown', opts);\n }} />

\n\n \n
\n , mountNode);\n"},"body":"\n\n````jsx\nimport { Input } from '@alifd/next';\n\n\n\n\nReactDOM.render(\n
\n {\n console.log('onKeyDown', opts);\n }} />

\n\n \n
\n , mountNode);\n````","html":"
import { Input } from '@alifd/next';\n\n\n\n\nReactDOM.render(\n    <div >\n        <Input.TextArea\n            autoHeight\n            trim\n            aria-label=\"auto height\"\n            placeholder=\"autoHeight\"\n            onKeyDown={(e, opts) => {\n                console.log('onKeyDown', opts);\n            }} /><br/><br/>\n\n        <Input.TextArea aria-label=\"auto height\" autoHeight={{ minRows: 2, maxRows: 6 }} />\n    </div>\n    , mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/input/demo/basic.en-us.md b/compiled_docs/input/demo/basic.en-us.md new file mode 100644 index 0000000000..dca8a8a2de --- /dev/null +++ b/compiled_docs/input/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n","order":"0"},"codes":{"jsx":"import { Input } from '@alifd/next';\n\nfunction onChange(v) {\n console.log(v);\n}\n\nReactDOM.render(
\n

\n\n Aria Labelby Demo \n

\n\n

\n\n \n
, mountNode);\n"},"body":"\n````jsx\nimport { Input } from '@alifd/next';\n\nfunction onChange(v) {\n console.log(v);\n}\n\nReactDOM.render(
\n

\n\n Aria Labelby Demo \n

\n\n

\n\n \n
, mountNode);\n````","html":"
import { Input } from '@alifd/next';\n\nfunction onChange(v) {\n    console.log(v);\n}\n\nReactDOM.render(<div>\n    <Input size=\"large\" placeholder=\"Large\" onChange={onChange} aria-label=\"Large\" /><br /><br />\n\n    <span id=\"J_InputMedium\" style={{display: 'none'}}>Aria Labelby Demo </span>\n    <Input placeholder=\"Medium\" aria-label=\"Medium\" aria-labelledby=\"J_InputMedium\" /><br /><br />\n\n    <Input placeholder=\"Small\" size=\"small\" label=\"SIZE :\" id=\"J_InputSmall\" /><br /><br />\n\n    <Input.TextArea placeholder=\"TextArea\" aria-label=\"TextArea\" />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/input/demo/basic.md b/compiled_docs/input/demo/basic.md new file mode 100644 index 0000000000..11df57f598 --- /dev/null +++ b/compiled_docs/input/demo/basic.md @@ -0,0 +1 @@ +{"title":"简单","meta":{"title":"简单","description":"\n","order":"0"},"codes":{"jsx":"import { Input } from '@alifd/next';\n\nfunction onChange(v) {\n console.log(v);\n}\n\nReactDOM.render(
\n

\n\n Aria Labelby Demo \n

\n\n

\n\n \n
, mountNode);\n"},"body":"\n\n\n````jsx\nimport { Input } from '@alifd/next';\n\nfunction onChange(v) {\n console.log(v);\n}\n\nReactDOM.render(
\n

\n\n Aria Labelby Demo \n

\n\n

\n\n \n
, mountNode);\n````","html":"
import { Input } from '@alifd/next';\n\nfunction onChange(v) {\n    console.log(v);\n}\n\nReactDOM.render(<div>\n    <Input size=\"large\" placeholder=\"Large\" onChange={onChange} aria-label=\"Large\" /><br /><br />\n\n    <span id=\"J_InputMedium\" style={{display: 'none'}}>Aria Labelby Demo </span>\n    <Input placeholder=\"Medium\" aria-label=\"Medium\" aria-labelledby=\"J_InputMedium\" /><br /><br />\n\n    <Input placeholder=\"Small\" size=\"small\" label=\"SIZE :\" id=\"J_InputSmall\" /><br /><br />\n\n    <Input.TextArea placeholder=\"TextArea\" aria-label=\"TextArea\" />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/input/demo/clear.en-us.md b/compiled_docs/input/demo/clear.en-us.md new file mode 100644 index 0000000000..4460735bc2 --- /dev/null +++ b/compiled_docs/input/demo/clear.en-us.md @@ -0,0 +1 @@ +{"title":"Clear Button","meta":{"title":"Clear Button","description":"\n","order":"3"},"codes":{"jsx":"import { Input } from '@alifd/next';\n\nconst onChange = (value) => {\n console.log(value);\n};\nconst onBlur = (e) => {\n console.log(e);\n};\n\nReactDOM.render(\n
\n

\n\n

\n\n

\n
\n , mountNode);\n"},"body":"\n````jsx\nimport { Input } from '@alifd/next';\n\nconst onChange = (value) => {\n console.log(value);\n};\nconst onBlur = (e) => {\n console.log(e);\n};\n\nReactDOM.render(\n
\n

\n\n

\n\n

\n
\n , mountNode);\n````","html":"
import { Input } from '@alifd/next';\n\nconst onChange = (value) => {\n    console.log(value);\n};\nconst onBlur = (e) => {\n    console.log(e);\n};\n\nReactDOM.render(\n    <div>\n        <Input\n            hasClear\n            defaultValue=\"clear by click\"\n            size=\"small\"\n            aria-label=\"input with config of hasClear\" onChange={onChange} /><br/><br/>\n\n        <Input\n            hasClear\n            defaultValue=\"2019-09-10 10:10:20\"\n            aria-label=\"input with config of hasClear\"\n            onChange={onChange}\n            onBlur={onBlur}\n            hint=\"calendar\"/><br/><br/>\n\n        <Input\n            hasClear\n            defaultValue=\"clear by click\"\n            size=\"large\"\n            aria-label=\"input with config of hasClear\"\n            onChange={onChange} /><br/><br/>\n    </div>\n    , mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/input/demo/clear.md b/compiled_docs/input/demo/clear.md new file mode 100644 index 0000000000..7d139dad60 --- /dev/null +++ b/compiled_docs/input/demo/clear.md @@ -0,0 +1 @@ +{"title":"清除按钮","meta":{"title":"清除按钮","description":"\n

通过设置 hasClear 添加清除按钮.

\n

hint为水印按钮，和hasClear占用同一个地方配合使用

\n","order":"3"},"codes":{"jsx":"import { Input } from '@alifd/next';\n\nconst onChange = (value) => {\n console.log(value);\n};\nconst onBlur = (e) => {\n console.log(e);\n};\n\nReactDOM.render(\n
\n

\n\n

\n\n

\n
\n , mountNode);\n"},"body":"\n\n````jsx\nimport { Input } from '@alifd/next';\n\nconst onChange = (value) => {\n console.log(value);\n};\nconst onBlur = (e) => {\n console.log(e);\n};\n\nReactDOM.render(\n
\n

\n\n

\n\n

\n
\n , mountNode);\n````","html":"
import { Input } from '@alifd/next';\n\nconst onChange = (value) => {\n    console.log(value);\n};\nconst onBlur = (e) => {\n    console.log(e);\n};\n\nReactDOM.render(\n    <div>\n        <Input\n            hasClear\n            defaultValue=\"clear by click\"\n            size=\"small\"\n            aria-label=\"input with config of hasClear\" onChange={onChange} /><br/><br/>\n\n        <Input\n            hasClear\n            defaultValue=\"2019-09-10 10:10:20\"\n            aria-label=\"input with config of hasClear\"\n            onChange={onChange}\n            onBlur={onBlur}\n            hint=\"calendar\"/><br/><br/>\n\n        <Input\n            hasClear\n            defaultValue=\"clear by click\"\n            size=\"large\"\n            aria-label=\"input with config of hasClear\"\n            onChange={onChange} /><br/><br/>\n    </div>\n    , mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/input/demo/disabled.en-us.md b/compiled_docs/input/demo/disabled.en-us.md new file mode 100644 index 0000000000..86c8216e74 --- /dev/null +++ b/compiled_docs/input/demo/disabled.en-us.md @@ -0,0 +1 @@ +{"title":"Disabled state","meta":{"title":"Disabled state","description":"\n

Set Input as disabled state

\n","order":"7"},"codes":{"jsx":"import { Input } from '@alifd/next';\n\nReactDOM.render(\n
\n

\n\n

\n\n

\n\n \n
\n , mountNode);\n"},"body":"\n````jsx\nimport { Input } from '@alifd/next';\n\nReactDOM.render(\n
\n

\n\n

\n\n

\n\n \n
\n , mountNode);\n````","html":"
import { Input } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Input disabled aria-label=\"disabled\" placeholder=\"disabled\" size=\"small\"/><br /><br />\n\n        <Input\n            disabled\n            aria-label=\"disabled\"\n            addonTextBefore=\"http://\"\n            addonTextAfter=\".com\"\n            size=\"medium\"\n            value=\"alibaba\"/><br /><br />\n\n        <Input disabled aria-label=\"disabled\" placeholder=\"medium\" maxLength={10} hasLimitHint/><br /><br />\n\n        <Input.TextArea disabled aria-label=\"disabled\" placeholder=\"medium\" maxLength={10} hasLimitHint/>\n    </div>\n    , mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/input/demo/disabled.md b/compiled_docs/input/demo/disabled.md new file mode 100644 index 0000000000..2236c8006f --- /dev/null +++ b/compiled_docs/input/demo/disabled.md @@ -0,0 +1 @@ +{"title":"禁用状态","meta":{"title":"禁用状态","description":"\n

为 Input 设置 disabled 状态；

\n","order":"7"},"codes":{"jsx":"import { Input } from '@alifd/next';\n\nReactDOM.render(\n
\n

\n\n

\n\n

\n\n \n
\n , mountNode);\n"},"body":"\n\n````jsx\nimport { Input } from '@alifd/next';\n\nReactDOM.render(\n
\n

\n\n

\n\n

\n\n \n
\n , mountNode);\n````","html":"
import { Input } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Input disabled aria-label=\"disabled\" placeholder=\"disabled\" size=\"small\"/><br /><br />\n\n        <Input\n            disabled\n            aria-label=\"disabled\"\n            addonTextBefore=\"http://\"\n            addonTextAfter=\".com\"\n            size=\"medium\"\n            value=\"alibaba\"/><br /><br />\n\n        <Input disabled aria-label=\"disabled\" placeholder=\"medium\" maxLength={10} hasLimitHint/><br /><br />\n\n        <Input.TextArea disabled aria-label=\"disabled\" placeholder=\"medium\" maxLength={10} hasLimitHint/>\n    </div>\n    , mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/input/demo/group.en-us.md b/compiled_docs/input/demo/group.en-us.md new file mode 100644 index 0000000000..db341d3401 --- /dev/null +++ b/compiled_docs/input/demo/group.en-us.md @@ -0,0 +1 @@ +{"title":"Input Groups","meta":{"title":"Input Groups","description":"\n

Group has an ability that total lenght is definite and its inner input is flexible.

\n","order":"11"},"codes":{"jsx":"import { Input, Select, Button } from '@alifd/next';\n\n\nconst select = ();\nconst button = ();\n\nReactDOM.render(
\n \n \n \n

\n \n
, mountNode);\n"},"body":"\n````jsx\nimport { Input, Select, Button } from '@alifd/next';\n\n\nconst select = ();\nconst button = ();\n\nReactDOM.render(
\n \n \n \n

\n \n
, mountNode);\n````","html":"
import { Input, Select, Button } from '@alifd/next';\n\n\nconst select = (<Select aria-label=\"please select\" >\n    <option value=\"https\">https</option>\n    <option value=\"http\">http</option>\n</Select>);\nconst button = (<Button>search</Button>);\n\nReactDOM.render(<div>\n    <Input.Group addonBefore={select} addonAfter={button}>\n        <Input hasClear defaultValue=\"abc\" style={{width: '100%'}} aria-label=\"please input\" />\n    </Input.Group>\n    <br/><br/>\n    <Input addonTextAfter=\".com\" addonBefore={select} aria-label=\"please input\" />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/input/demo/group.md b/compiled_docs/input/demo/group.md new file mode 100644 index 0000000000..d3dddc4dfb --- /dev/null +++ b/compiled_docs/input/demo/group.md @@ -0,0 +1 @@ +{"title":"输入框组合","meta":{"title":"输入框组合","description":"\n

Group 具有两边长度固定中间组件任意伸缩的能力。在Input中可以用addonBefore/addonAfter快速使用

\n","order":"11"},"codes":{"jsx":"import { Input, Select, Button } from '@alifd/next';\n\n\nconst select = ();\nconst button = ();\n\nReactDOM.render(
\n \n \n \n

\n \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Input, Select, Button } from '@alifd/next';\n\n\nconst select = ();\nconst button = ();\n\nReactDOM.render(
\n \n \n \n

\n \n
, mountNode);\n````","html":"
import { Input, Select, Button } from '@alifd/next';\n\n\nconst select = (<Select aria-label=\"please select\" >\n    <option value=\"https\">https</option>\n    <option value=\"http\">http</option>\n</Select>);\nconst button = (<Button>search</Button>);\n\nReactDOM.render(<div>\n    <Input.Group addonBefore={select} addonAfter={button}>\n        <Input hasClear defaultValue=\"abc\" style={{width: '100%'}} aria-label=\"please input\" />\n    </Input.Group>\n    <br/><br/>\n    <Input addonTextAfter=\".com\" addonBefore={select} aria-label=\"please input\" />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/input/demo/inner.en-us.md b/compiled_docs/input/demo/inner.en-us.md new file mode 100644 index 0000000000..0f730351d0 --- /dev/null +++ b/compiled_docs/input/demo/inner.en-us.md @@ -0,0 +1 @@ +{"title":"Watermark/Prefix/Suffix","meta":{"title":"Watermark/Prefix/Suffix","description":"\n

Add Watermark/Prefix/Suffix for Input

\n","order":"8"},"codes":{"jsx":"import { Input, Icon } from '@alifd/next';\n\n\nclass App extends React.Component {\n state = {\n v: ''\n };\n\n onChange = (v) => {\n this.setState({\n v\n });\n };\n\n onClick = () => {\n console.log(this.state.v);\n };\n\n render() {\n\n return (
\n }\n placeholder=\"search\"\n value={this.state.v}\n aria-label=\"input with config of innerBefore\"\n onChange={this.onChange}\n />

\n\n }\n placeholder=\"search\"\n value={this.state.v}\n aria-label=\"input with config of innerAfter\"\n onChange={this.onChange}\n />

\n\n }\n aria-label=\"input with config of innerAfter and disabled\" />\n
);\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Input, Icon } from '@alifd/next';\n\n\nclass App extends React.Component {\n state = {\n v: ''\n };\n\n onChange = (v) => {\n this.setState({\n v\n });\n };\n\n onClick = () => {\n console.log(this.state.v);\n };\n\n render() {\n\n return (
\n }\n placeholder=\"search\"\n value={this.state.v}\n aria-label=\"input with config of innerBefore\"\n onChange={this.onChange}\n />

\n\n }\n placeholder=\"search\"\n value={this.state.v}\n aria-label=\"input with config of innerAfter\"\n onChange={this.onChange}\n />

\n\n }\n aria-label=\"input with config of innerAfter and disabled\" />\n
);\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Input, Icon } from '@alifd/next';\n\n\nclass App extends React.Component {\n    state = {\n        v: ''\n    };\n\n    onChange = (v) => {\n        this.setState({\n            v\n        });\n    };\n\n    onClick = () => {\n        console.log(this.state.v);\n    };\n\n    render() {\n\n        return (<div>\n            <Input\n                innerBefore={<Icon type=\"search\" style={{margin: 4}} onClick={this.onClick} />}\n                placeholder=\"search\"\n                value={this.state.v}\n                aria-label=\"input with config of innerBefore\"\n                onChange={this.onChange}\n            /><br /><br />\n\n            <Input\n                innerAfter={<Icon type=\"search\" size=\"xs\" onClick={this.onClick} style={{margin: 4}}/>}\n                placeholder=\"search\"\n                value={this.state.v}\n                aria-label=\"input with config of innerAfter\"\n                onChange={this.onChange}\n            /><br /><br />\n\n            <Input\n                disabled\n                defaultValue=\"hi\"\n                innerAfter={<Icon type=\"calendar\" style={{margin: 4}}/>}\n                aria-label=\"input with config of innerAfter and disabled\" />\n        </div>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/input/demo/inner.md b/compiled_docs/input/demo/inner.md new file mode 100644 index 0000000000..0b1eee699c --- /dev/null +++ b/compiled_docs/input/demo/inner.md @@ -0,0 +1 @@ +{"title":"水印和前后缀","meta":{"title":"水印和前后缀","description":"\n

可以添加水印， 为input前后端增加额外内容

\n","order":"8"},"codes":{"jsx":"import { Input, Icon } from '@alifd/next';\n\n\nclass App extends React.Component {\n state = {\n v: ''\n };\n\n onChange = (v) => {\n this.setState({\n v\n });\n };\n\n onClick = () => {\n console.log(this.state.v);\n };\n\n render() {\n\n return (
\n }\n placeholder=\"search\"\n value={this.state.v}\n aria-label=\"input with config of innerBefore\"\n onChange={this.onChange}\n />

\n\n }\n placeholder=\"search\"\n value={this.state.v}\n aria-label=\"input with config of innerAfter\"\n onChange={this.onChange}\n />

\n\n }\n aria-label=\"input with config of innerAfter and disabled\" />\n
);\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Input, Icon } from '@alifd/next';\n\n\nclass App extends React.Component {\n state = {\n v: ''\n };\n\n onChange = (v) => {\n this.setState({\n v\n });\n };\n\n onClick = () => {\n console.log(this.state.v);\n };\n\n render() {\n\n return (
\n }\n placeholder=\"search\"\n value={this.state.v}\n aria-label=\"input with config of innerBefore\"\n onChange={this.onChange}\n />

\n\n }\n placeholder=\"search\"\n value={this.state.v}\n aria-label=\"input with config of innerAfter\"\n onChange={this.onChange}\n />

\n\n }\n aria-label=\"input with config of innerAfter and disabled\" />\n
);\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Input, Icon } from '@alifd/next';\n\n\nclass App extends React.Component {\n    state = {\n        v: ''\n    };\n\n    onChange = (v) => {\n        this.setState({\n            v\n        });\n    };\n\n    onClick = () => {\n        console.log(this.state.v);\n    };\n\n    render() {\n\n        return (<div>\n            <Input\n                innerBefore={<Icon type=\"search\" style={{margin: 4}} onClick={this.onClick} />}\n                placeholder=\"search\"\n                value={this.state.v}\n                aria-label=\"input with config of innerBefore\"\n                onChange={this.onChange}\n            /><br /><br />\n\n            <Input\n                innerAfter={<Icon type=\"search\" size=\"xs\" onClick={this.onClick} style={{margin: 4}}/>}\n                placeholder=\"search\"\n                value={this.state.v}\n                aria-label=\"input with config of innerAfter\"\n                onChange={this.onChange}\n            /><br /><br />\n\n            <Input\n                disabled\n                defaultValue=\"hi\"\n                innerAfter={<Icon type=\"calendar\" style={{margin: 4}}/>}\n                aria-label=\"input with config of innerAfter and disabled\" />\n        </div>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/input/demo/maxlen.en-us.md b/compiled_docs/input/demo/maxlen.en-us.md new file mode 100644 index 0000000000..2ce5ed1db4 --- /dev/null +++ b/compiled_docs/input/demo/maxlen.en-us.md @@ -0,0 +1 @@ +{"title":"Addon","meta":{"title":"Addon","description":"\n

the prop hasLimitHint will limit the number of characters

\n","order":"5"},"codes":{"jsx":"import { Input } from '@alifd/next';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n maxLength: 10,\n control: 'maxLen control'\n };\n }\n\n onChange(v) {\n console.log(v);\n this.setState({\n control: v\n });\n }\n\n onKeyDown(e, opts) {\n console.log('onKeyDown', opts);\n }\n\n render() {\n return (
\n

\n\n {\n this.setState({control: v});\n console.log(v);\n }}\n onKeyDown={(e, opts) => {\n console.log('onKeyDown', opts);\n }} />

\n\n

\n\n

\n\n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Input } from '@alifd/next';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n maxLength: 10,\n control: 'maxLen control'\n };\n }\n\n onChange(v) {\n console.log(v);\n this.setState({\n control: v\n });\n }\n\n onKeyDown(e, opts) {\n console.log('onKeyDown', opts);\n }\n\n render() {\n return (
\n

\n\n {\n this.setState({control: v});\n console.log(v);\n }}\n onKeyDown={(e, opts) => {\n console.log('onKeyDown', opts);\n }} />

\n\n

\n\n

\n\n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Input } from '@alifd/next';\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            maxLength: 10,\n            control: 'maxLen control'\n        };\n    }\n\n    onChange(v) {\n        console.log(v);\n        this.setState({\n            control: v\n        });\n    }\n\n    onKeyDown(e, opts) {\n        console.log('onKeyDown', opts);\n    }\n\n    render() {\n        return (<div>\n            <Input\n                maxLength={10}\n                size=\"large\"\n                placeholder=\"Large\"\n                value={this.state.control}\n                hasLimitHint\n                aria-label=\"input max length 10\"\n                onChange={this.onChange.bind(this)}\n                onKeyDown={this.onKeyDown.bind(this)} /><br /><br />\n\n            <Input\n                maxLength={20}\n                placeholder=\"medium\"\n                hasLimitHint\n                cutString={false}\n                aria-label=\"input max length 20\"\n                onChange={(v) => {\n                    this.setState({control: v});\n                    console.log(v);\n                }}\n                onKeyDown={(e, opts) => {\n                    console.log('onKeyDown', opts);\n                }} /><br /><br />\n\n            <Input\n                hasLimitHint\n                size=\"small\"\n                placeholder=\"small\"\n                maxLength={100}\n                aria-label=\"input max length 100\" /><br /><br />\n\n            <Input.TextArea\n                placeholder=\"TextArea\"\n                maxLength={100}\n                rows={4}\n                hasLimitHint\n                aria-label=\"input max length 100\" /><br /><br />\n\n            <Input maxLength={5} placeholder=\"Original maxLength\" aria-label=\"input max length 5\" />\n        </div>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/input/demo/maxlen.md b/compiled_docs/input/demo/maxlen.md new file mode 100644 index 0000000000..b2e7575ec4 --- /dev/null +++ b/compiled_docs/input/demo/maxlen.md @@ -0,0 +1 @@ +{"title":"最大长度","meta":{"title":"最大长度","description":"\n

最大长度 hasLimitHint 会展现限制数字; cutString 可控制是否要切割字符串, 用于只展示最大长度

\n","order":"5"},"codes":{"jsx":"import { Input } from '@alifd/next';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n maxLength: 10,\n control: 'maxLen control'\n };\n }\n\n onChange(v) {\n console.log(v);\n this.setState({\n control: v\n });\n }\n\n onKeyDown(e, opts) {\n console.log('onKeyDown', opts);\n }\n\n render() {\n return (
\n

\n\n {\n this.setState({control: v});\n console.log(v);\n }}\n onKeyDown={(e, opts) => {\n console.log('onKeyDown', opts);\n }} />

\n\n

\n\n

\n\n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n\n````jsx\nimport { Input } from '@alifd/next';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n maxLength: 10,\n control: 'maxLen control'\n };\n }\n\n onChange(v) {\n console.log(v);\n this.setState({\n control: v\n });\n }\n\n onKeyDown(e, opts) {\n console.log('onKeyDown', opts);\n }\n\n render() {\n return (
\n

\n\n {\n this.setState({control: v});\n console.log(v);\n }}\n onKeyDown={(e, opts) => {\n console.log('onKeyDown', opts);\n }} />

\n\n

\n\n

\n\n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Input } from '@alifd/next';\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            maxLength: 10,\n            control: 'maxLen control'\n        };\n    }\n\n    onChange(v) {\n        console.log(v);\n        this.setState({\n            control: v\n        });\n    }\n\n    onKeyDown(e, opts) {\n        console.log('onKeyDown', opts);\n    }\n\n    render() {\n        return (<div>\n            <Input\n                maxLength={10}\n                size=\"large\"\n                placeholder=\"Large\"\n                value={this.state.control}\n                hasLimitHint\n                aria-label=\"input max length 10\"\n                onChange={this.onChange.bind(this)}\n                onKeyDown={this.onKeyDown.bind(this)} /><br /><br />\n\n            <Input\n                maxLength={20}\n                placeholder=\"medium\"\n                hasLimitHint\n                cutString={false}\n                aria-label=\"input max length 20\"\n                onChange={(v) => {\n                    this.setState({control: v});\n                    console.log(v);\n                }}\n                onKeyDown={(e, opts) => {\n                    console.log('onKeyDown', opts);\n                }} /><br /><br />\n\n            <Input\n                hasLimitHint\n                size=\"small\"\n                placeholder=\"small\"\n                maxLength={100}\n                aria-label=\"input max length 100\" /><br /><br />\n\n            <Input.TextArea\n                placeholder=\"TextArea\"\n                maxLength={100}\n                rows={4}\n                hasLimitHint\n                aria-label=\"input max length 100\" /><br /><br />\n\n            <Input maxLength={5} placeholder=\"Original maxLength\" aria-label=\"input max length 5\" />\n        </div>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/input/demo/passwd.en-us.md b/compiled_docs/input/demo/passwd.en-us.md new file mode 100644 index 0000000000..94a3fd6634 --- /dev/null +++ b/compiled_docs/input/demo/passwd.en-us.md @@ -0,0 +1 @@ +{"title":"Password Input","meta":{"title":"Password Input","description":"\n

Set Input as a password type input;

\n","order":"1"},"codes":{"jsx":"import { Input } from '@alifd/next';\n\nReactDOM.render(\n
\n \n
\n , mountNode);\n"},"body":"\n````jsx\nimport { Input } from '@alifd/next';\n\nReactDOM.render(\n
\n \n
\n , mountNode);\n````","html":"
import { Input } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Input htmlType=\"password\" defaultValue=\"whoami\" aria-label=\"Please input password\"/>\n    </div>\n    , mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/input/demo/passwd.md b/compiled_docs/input/demo/passwd.md new file mode 100644 index 0000000000..07cdd3f702 --- /dev/null +++ b/compiled_docs/input/demo/passwd.md @@ -0,0 +1 @@ +{"title":"密码输入框","meta":{"title":"密码输入框","description":"\n

设置 Input 为 密码类型；

\n","order":"1"},"codes":{"jsx":"import { Input } from '@alifd/next';\n\nReactDOM.render(\n
\n \n
\n , mountNode);\n"},"body":"\n\n````jsx\nimport { Input } from '@alifd/next';\n\nReactDOM.render(\n
\n \n
\n , mountNode);\n````","html":"
import { Input } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Input htmlType=\"password\" defaultValue=\"whoami\" aria-label=\"Please input password\"/>\n    </div>\n    , mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/input/demo/state.en-us.md b/compiled_docs/input/demo/state.en-us.md new file mode 100644 index 0000000000..2ee4770805 --- /dev/null +++ b/compiled_docs/input/demo/state.en-us.md @@ -0,0 +1 @@ +{"title":"Error State","meta":{"title":"Error State","description":"\n

Set Error State for Input

\n","order":"4"},"codes":{"jsx":"import { Input } from '@alifd/next';\n\nReactDOM.render(\n
\n

\n

\n

\n\n

\n

\n

\n\n

\n

\n

\n
\n , mountNode);\n"},"body":"\n````jsx\nimport { Input } from '@alifd/next';\n\nReactDOM.render(\n
\n

\n

\n

\n\n

\n

\n

\n\n

\n

\n

\n
\n , mountNode);\n````","html":"
import { Input } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Input state=\"error\"\n            placeholder=\"error\"\n            size=\"small\"\n            aria-live=\"assertive\"\n            aria-label=\"error\" /><br/><br/>\n        <Input state=\"error\"\n            hasLimitHint\n            maxLength={100}\n            placeholder=\"error\"\n            size=\"medium\"\n            aria-live=\"assertive\"\n            aria-label=\"error\" /><br/><br/>\n        <Input state=\"error\"\n            multiple\n            placeholder=\"error\"\n            size=\"large\"\n            aria-live=\"assertive\"\n            aria-label=\"error\" /><br/><br/>\n\n        <Input state=\"success\"\n            size=\"small\"\n            value=\"success\"\n            aria-live=\"assertive\"\n            aria-label=\"success\"/><br/><br/>\n        <Input state=\"success\"\n            maxLength={100}\n            hasLimitHint\n            placeholder=\"success\"\n            size=\"medium\"\n            aria-live=\"assertive\"\n            aria-label=\"success\"/><br/><br/>\n        <Input state=\"success\"\n            placeholder=\"success\"\n            size=\"large\"\n            aria-live=\"assertive\"\n            aria-label=\"success\"/><br/><br/>\n\n        <Input state=\"loading\"\n            placeholder=\"loading\"\n            size=\"small\"\n            aria-live=\"assertive\"\n            aria-label=\"loading\"/><br/><br/>\n        <Input state=\"loading\"\n            placeholder=\"loading\"\n            size=\"medium\"\n            aria-live=\"assertive\"\n            aria-label=\"loading\"/><br/><br/>\n        <Input state=\"loading\"\n            placeholder=\"loading\"\n            size=\"large\"\n            aria-live=\"assertive\"\n            aria-label=\"loading\"/><br/><br/>\n    </div>\n    , mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/input/demo/state.md b/compiled_docs/input/demo/state.md new file mode 100644 index 0000000000..d232ddbed0 --- /dev/null +++ b/compiled_docs/input/demo/state.md @@ -0,0 +1 @@ +{"title":"错误状态","meta":{"title":"错误状态","description":"\n

为 Input 设置 error 状态；

\n","order":"4"},"codes":{"jsx":"import { Input } from '@alifd/next';\n\nReactDOM.render(\n
\n

\n

\n

\n\n

\n

\n

\n\n

\n

\n

\n
\n , mountNode);\n"},"body":"\n\n````jsx\nimport { Input } from '@alifd/next';\n\nReactDOM.render(\n
\n

\n

\n

\n\n

\n

\n

\n\n

\n

\n

\n
\n , mountNode);\n````","html":"
import { Input } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Input state=\"error\"\n            placeholder=\"error\"\n            size=\"small\"\n            aria-live=\"assertive\"\n            aria-label=\"error\" /><br/><br/>\n        <Input state=\"error\"\n            hasLimitHint\n            maxLength={100}\n            placeholder=\"error\"\n            size=\"medium\"\n            aria-live=\"assertive\"\n            aria-label=\"error\" /><br/><br/>\n        <Input state=\"error\"\n            multiple\n            placeholder=\"error\"\n            size=\"large\"\n            aria-live=\"assertive\"\n            aria-label=\"error\" /><br/><br/>\n\n        <Input state=\"success\"\n            size=\"small\"\n            value=\"success\"\n            aria-live=\"assertive\"\n            aria-label=\"success\"/><br/><br/>\n        <Input state=\"success\"\n            maxLength={100}\n            hasLimitHint\n            placeholder=\"success\"\n            size=\"medium\"\n            aria-live=\"assertive\"\n            aria-label=\"success\"/><br/><br/>\n        <Input state=\"success\"\n            placeholder=\"success\"\n            size=\"large\"\n            aria-live=\"assertive\"\n            aria-label=\"success\"/><br/><br/>\n\n        <Input state=\"loading\"\n            placeholder=\"loading\"\n            size=\"small\"\n            aria-live=\"assertive\"\n            aria-label=\"loading\"/><br/><br/>\n        <Input state=\"loading\"\n            placeholder=\"loading\"\n            size=\"medium\"\n            aria-live=\"assertive\"\n            aria-label=\"loading\"/><br/><br/>\n        <Input state=\"loading\"\n            placeholder=\"loading\"\n            size=\"large\"\n            aria-live=\"assertive\"\n            aria-label=\"loading\"/><br/><br/>\n    </div>\n    , mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/input/demo/style.en-us.md b/compiled_docs/input/demo/style.en-us.md new file mode 100644 index 0000000000..099dd8cfc8 --- /dev/null +++ b/compiled_docs/input/demo/style.en-us.md @@ -0,0 +1 @@ +{"title":"Custom Style","meta":{"title":"Custom Style","description":"\n

Custom style can be set using param style.

\n","order":"12"},"codes":{"jsx":"import { Input } from '@alifd/next';\n\nReactDOM.render(\n
\n

\n\n

\n\n

\n\n

\n\n \n \n
\n , mountNode);\n","css":"body .my-input-class {\n width:500px;\n}\n"},"body":"\n````jsx\nimport { Input } from '@alifd/next';\n\nReactDOM.render(\n
\n

\n\n

\n\n

\n\n

\n\n \n \n
\n , mountNode);\n````\n\n````css\nbody .my-input-class {\n width:500px;\n}\n````","html":"
import { Input } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Input placeholder=\"width:400\" style={{width: 400}} aria-label=\"style width 400\" /><br/><br/>\n\n        <Input\n            addonTextBefore=\"http://\"\n            addonTextAfter=\".com\"\n            size=\"medium\"\n            value=\"alibaba\"\n            style={{width: 400}} aria-label=\"style width 400\" /><br/><br/>\n\n        <Input\n            placeholder=\"medium\"\n            maxLength={10}\n            hasLimitHint\n            style={{width: 400}} aria-label=\"style width 400\" /><br/><br/>\n\n        <Input\n            placeholder=\"medium\"\n            hasClear maxLength={10}\n            hasLimitHint style={{width: 400}}\n            className=\"my-input-class\"\n            state=\"success\"\n            aria-label=\"style width 400\" /><br/><br/>\n\n        <Input placeholder=\"className\" className=\"my-input-class\" aria-label=\"custom my input class\" />\n        <Input htmlType=\"hidden\" aria-label=\"hidden input\" />\n    </div>\n    , mountNode);
body .my-input-class {\n    width:500px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/input/demo/style.md b/compiled_docs/input/demo/style.md new file mode 100644 index 0000000000..215b9eaf7c --- /dev/null +++ b/compiled_docs/input/demo/style.md @@ -0,0 +1 @@ +{"title":"自定义样式","meta":{"title":"自定义样式","description":"\n

通过style设置宽度

\n","order":"12"},"codes":{"jsx":"import { Input } from '@alifd/next';\n\nReactDOM.render(\n
\n

\n\n

\n\n

\n\n

\n\n \n \n
\n , mountNode);\n","css":"body .my-input-class {\n width:500px;\n}\n"},"body":"\n\n````jsx\nimport { Input } from '@alifd/next';\n\nReactDOM.render(\n
\n

\n\n

\n\n

\n\n

\n\n \n \n
\n , mountNode);\n````\n\n````css\nbody .my-input-class {\n width:500px;\n}\n````","html":"
import { Input } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Input placeholder=\"width:400\" style={{width: 400}} aria-label=\"style width 400\" /><br/><br/>\n\n        <Input\n            addonTextBefore=\"http://\"\n            addonTextAfter=\".com\"\n            size=\"medium\"\n            value=\"alibaba\"\n            style={{width: 400}} aria-label=\"style width 400\" /><br/><br/>\n\n        <Input\n            placeholder=\"medium\"\n            maxLength={10}\n            hasLimitHint\n            style={{width: 400}} aria-label=\"style width 400\" /><br/><br/>\n\n        <Input\n            placeholder=\"medium\"\n            hasClear maxLength={10}\n            hasLimitHint style={{width: 400}}\n            className=\"my-input-class\"\n            state=\"success\"\n            aria-label=\"style width 400\" /><br/><br/>\n\n        <Input placeholder=\"className\" className=\"my-input-class\" aria-label=\"custom my input class\" />\n        <Input htmlType=\"hidden\" aria-label=\"hidden input\" />\n    </div>\n    , mountNode);
body .my-input-class {\n    width:500px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/input/demo/trim.en-us.md b/compiled_docs/input/demo/trim.en-us.md new file mode 100644 index 0000000000..ea0f0a02e4 --- /dev/null +++ b/compiled_docs/input/demo/trim.en-us.md @@ -0,0 +1 @@ +{"title":"Auto Trim","meta":{"title":"Auto Trim","description":"\n

onChange callback will return the trimmed text value

\n","order":"6"},"codes":{"jsx":"import { Input } from '@alifd/next';\n\nclass App extends React.Component {\n state = {\n value: ''\n }\n\n onChange(value) {\n console.log('onChange', value);\n this.setState({\n value\n });\n }\n\n onKeyDown(e, opts) {\n console.log('onKeyDown', opts);\n }\n\n render() {\n return (
\n \n
);\n }\n}\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Input } from '@alifd/next';\n\nclass App extends React.Component {\n state = {\n value: ''\n }\n\n onChange(value) {\n console.log('onChange', value);\n this.setState({\n value\n });\n }\n\n onKeyDown(e, opts) {\n console.log('onKeyDown', opts);\n }\n\n render() {\n return (
\n \n
);\n }\n}\nReactDOM.render(, mountNode);\n````","html":"
import { Input } from '@alifd/next';\n\nclass App extends React.Component {\n    state = {\n        value: ''\n    }\n\n    onChange(value) {\n        console.log('onChange', value);\n        this.setState({\n            value\n        });\n    }\n\n    onKeyDown(e, opts) {\n        console.log('onKeyDown', opts);\n    }\n\n    render() {\n        return (<div>\n            <Input trim placeholder=\"cant not input space\" aria-label=\"cant not input space\"\n                onChange={this.onChange.bind(this)}\n                onKeyDown={this.onKeyDown.bind(this)} />\n        </div>);\n    }\n}\nReactDOM.render(<App/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/input/demo/trim.md b/compiled_docs/input/demo/trim.md new file mode 100644 index 0000000000..58c69410c4 --- /dev/null +++ b/compiled_docs/input/demo/trim.md @@ -0,0 +1 @@ +{"title":"去除空格","meta":{"title":"去除空格","description":"\n

onChange返回会自动去除头尾空字符

\n","order":"6"},"codes":{"jsx":"import { Input } from '@alifd/next';\n\nclass App extends React.Component {\n state = {\n value: ''\n }\n\n onChange(value) {\n console.log('onChange', value);\n this.setState({\n value\n });\n }\n\n onKeyDown(e, opts) {\n console.log('onKeyDown', opts);\n }\n\n render() {\n return (
\n \n
);\n }\n}\nReactDOM.render(, mountNode);\n"},"body":"\n\n\n````jsx\nimport { Input } from '@alifd/next';\n\nclass App extends React.Component {\n state = {\n value: ''\n }\n\n onChange(value) {\n console.log('onChange', value);\n this.setState({\n value\n });\n }\n\n onKeyDown(e, opts) {\n console.log('onKeyDown', opts);\n }\n\n render() {\n return (
\n \n
);\n }\n}\nReactDOM.render(, mountNode);\n````","html":"
import { Input } from '@alifd/next';\n\nclass App extends React.Component {\n    state = {\n        value: ''\n    }\n\n    onChange(value) {\n        console.log('onChange', value);\n        this.setState({\n            value\n        });\n    }\n\n    onKeyDown(e, opts) {\n        console.log('onKeyDown', opts);\n    }\n\n    render() {\n        return (<div>\n            <Input trim placeholder=\"cant not input space\" aria-label=\"cant not input space\"\n                onChange={this.onChange.bind(this)}\n                onKeyDown={this.onKeyDown.bind(this)} />\n        </div>);\n    }\n}\nReactDOM.render(<App/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/input/index.en-us.md b/compiled_docs/input/index.en-us.md new file mode 100644 index 0000000000..2eb44c6ece --- /dev/null +++ b/compiled_docs/input/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Development Guide#

When to Use#

Form Input, use it with Form components usually.

\n

API#

","api":"

Input#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
valuecurrent valueString/Number-
sizeSize

option:
'small'
'medium'
'large'		Enum'medium'
defaultValueinital valueString/Number-
onChangecallback when value changes

signature:
Function(value: String, e: Event) => void
params:
value: {String} data
_e_: {Event} DOM Event Object		Functionfunc.noop
onKeyDowncallback when on key down

signature:
Function(e: Event, opts: Object) => void
params:
_e_: {Event} DOM Event Object
opts: {Object} extended information：
- opts.overMaxLength: {Boolean} input has reached max length
- opts.beTrimed: {Boolean} input whitespace has been trimed		Functionfunc.noop
disableddisabled stateBooleanfalse
maxLengthmax lengthNumbernull
hasLimitHintlimit max num of charactersBooleanfalse
cutStringwhen maxLength is set, auto cut stringBooleantrue
readOnlyread only, forbid editingBooleanfalse
trimonChange will auto trim textBooleanfalse
placeholderplace holderString-
onFocuscallback when input get focused

signature:
Function() => void		Functionfunc.noop
onBlurcallback when input lose focused

signature:
Function() => void		Functionfunc.noop
getValueLengthdefine the value length caculation

signature:
Function(value: String) => Number
params:
value: {String} Data
returns:
{Number} caculated length
Functionfunc.noop
htmlTypehtml input typeString-
statestate

option:
'error'
'loading'
'success'		Enum-
labellabelReactNode-
hasClearclear button displays or notBoolean-
hasBorderinput border displays or notBooleantrue
onKeyDowncallback when keyboard press down

signature:
Function() => void		Functionfunc.noop
onPressEntercallback when the enter key press down

signature:
Function() => void		Functionfunc.noop
hintwatermark, a type of Icon, share a place with hasClearString-
innerBeforeElements appended before textReactNode-
innerAfterElements appended after textReactNode-
addonBeforeElements appended before inputReactNode-
addonAfterElements appended after inputReactNode-
addonTextBeforetext appended before inputReactNode-
addonTextAftertext appended before inputReactNode-
autoCompleterequire browser supportString'off'
autoFocusrequire browser supportBoolean-
\n

Input.TextArea#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
valuecurrentValueString/Number-
defaultValueinital valueString/Number-
onChangecallback when value changes

signature:
Function(value: String, e: Event) => void
params:
value: {String} Data
_e_: {Event} DOM Event		Functionfunc.noop
onKeyDowncallback when on key down

signature:
Function(e: Event, opts: Object) => void
params:
_e_: {Event} DOM Event Object
opts: {Object} extended information：
- opts.overMaxLength: {Boolean} input has reached max length
- opts.beTrimed: {Boolean} input whitespace has been trimed		Functionfunc.noop
disableddisabled stateBooleanfalse
maxLengthmax lengthNumbernull
hasLimitHintlimit max num of charactersBooleanfalse
cutStringwhen maxLength is set, auto cut stringBooleantrue
readOnlyread only, forbid editingBooleanfalse
trimonChange will auto trim textBooleanfalse
placeholderplaceholderString-
onFocuscallback when input get focused

signature:
Function() => void		Functionfunc.noop
onBlurcallback when input lose focused

signature:
Function() => void		Functionfunc.noop
getValueLengthdefine the value length caculation

signature:
Function(value: String) => Number
params:
value: {String} Data
returns:
{Number} caculated length
Functionfunc.noop
htmlTypehtml input typeString-
statestate

option:
'error'
'loading'
'success'		Enum-
autoHeightheight auto fit, exapmle: true / {minRows: 2, maxRows: 4}Boolean/Objectfalse
rowsmultiline text height
(Never use height to controll textarea's height for compatibility with IE9/10)		Number4
\n

Input.Group#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
addonBeforeElements appended before inputReactNode-
addonBeforeClassNameClassnames before input, usually use for cssString-
addonAfterElements appended after inputReactNode-
addonAfterClassNameClassnames after input , usually use for cssString-
\n

Input/TextArea Inner Methods(Got by refs)#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
getInputNodeget truely input html dom nodeFunction
focusget foucs

signature:
Function(start:Number, end: Number)
params:
start: {Number} cursor postion
end: {Number} select end postion		Function
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyBoardDescripiton
EnterTrigger the onKeyDown event
AnyTrigger the onChange event
\n"} \ No newline at end of file diff --git a/compiled_docs/input/index.md b/compiled_docs/input/index.md new file mode 100644 index 0000000000..187a361aac --- /dev/null +++ b/compiled_docs/input/index.md @@ -0,0 +1 @@ +{"meta":"

开发指南#

何时使用#

表单输入，一般配合Form使用

\n

API#

","api":"

Input#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
value当前值String/Number-
size尺寸

可选值:
'small'(小)
'medium'(中)
'large'(大)		Enum'medium'
defaultValue初始化值String/Number-
onChange发生改变的时候触发的回调

签名:
Function(value: String, e: Event) => void
参数:
value: {String} 数据
_e_: {Event} DOM事件对象		Functionfunc.noop
onKeyDown键盘按下的时候触发的回调

签名:
Function(e: Event, opts: Object) => void
参数:
_e_: {Event} DOM事件对象
opts: {Object} 可扩展的附加信息：
- opts.overMaxLength: {Boolean} 已超出最大长度
- opts.beTrimed: {Boolean} 输入的空格被清理		Functionfunc.noop
disabled禁用状态Booleanfalse
maxLength最大长度Numbernull
hasLimitHint是否展现最大长度样式Booleanfalse
cutString当设置了maxLength时，是否截断超出字符串Booleantrue
readOnly只读Booleanfalse
trimonChange返回会自动去除头尾空字符Booleanfalse
placeholder输入提示String-
onFocus获取焦点时候触发的回调

签名:
Function() => void		Functionfunc.noop
onBlur失去焦点时候触发的回调

签名:
Function() => void		Functionfunc.noop
getValueLength自定义字符串计算长度方式

签名:
Function(value: String) => Number
参数:
value: {String} 数据
返回值:
{Number} 自定义长度
Functionfunc.noop
htmlType原生typeString-
namenameString-
state状态

可选值:
'error'(错误)
'loading'(校验中)
'success'(成功)		Enum-
labellabelReactNode-
hasClear是否出现clear按钮Boolean-
hasBorder是否有边框Booleantrue
onPressEnter按下回车的回调

签名:
Function() => void		Functionfunc.noop
hint水印 (Icon的type类型，和hasClear占用一个地方)String-
innerBefore文字前附加内容ReactNode-
innerAfter文字后附加内容ReactNode-
addonBefore输入框前附加内容ReactNode-
addonAfter输入框后附加内容ReactNode-
addonTextBefore输入框前附加文字ReactNode-
addonTextAfter输入框后附加文字ReactNode-
autoComplete(原生input支持)String'off'
autoFocus自动聚焦(原生input支持)Boolean-
\n

Input.TextArea#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
value当前值String/Number-
defaultValue初始化值String/Number-
onChange发生改变的时候触发的回调

签名:
Function(value: String, e: Event) => void
参数:
value: {String} 数据
_e_: {Event} DOM事件对象		Functionfunc.noop
onKeyDown键盘按下的时候触发的回调

签名:
Function(e: Event, opts: Object) => void
参数:
_e_: {Event} DOM事件对象
opts: {Object} 可扩展的附加信息：
- opts.overMaxLength: {Boolean} 已超出最大长度
- opts.beTrimed: {Boolean} 输入的空格被清理		Functionfunc.noop
disabled禁用状态Booleanfalse
maxLength最大长度Numbernull
hasLimitHint是否展现最大长度样式Booleanfalse
cutString当设置了maxLength时，是否截断超出字符串Booleantrue
readOnly只读Booleanfalse
trimonChange返回会自动去除头尾空字符Booleanfalse
placeholder输入提示String-
onFocus获取焦点时候触发的回调

签名:
Function() => void		Functionfunc.noop
onBlur失去焦点时候触发的回调

签名:
Function() => void		Functionfunc.noop
getValueLength自定义字符串计算长度方式

签名:
Function(value: String) => Number
参数:
value: {String} 数据
返回值:
{Number} 自定义长度
Functionfunc.noop
htmlType原生typeString-
namenameString-
state状态

可选值:
'error'(错误)		Enum-
hasBorder是否有边框Booleantrue
autoHeight自动高度 true / {minRows: 2, maxRows: 4}Boolean/Objectfalse
rows多行文本框高度
(不要直接用height设置多行文本框的高度, ie9 10会有兼容性问题)		Number4
\n

Input.Group#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
addonBefore输入框前附加内容ReactNode-
addonBeforeClassName输入框前附加内容cssString-
addonAfter输入框后附加内容ReactNode-
addonAfterClassName输入框后额外cssString-
rtlrtlBoolean-
\n

Input/TextArea 内部函数(通过refs获取)#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
getInputNode获取真正input节点Function
focus获取焦点

签名:
Function(start:Number, end: Number)
参数:
start: {Number} 光标起始位置
end: {Number} 选择结束位置		Function
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
按键说明
Enter触发onKeyDown事件
Any触发onChange事件
\n"} \ No newline at end of file diff --git a/compiled_docs/loading/demo/basic.en-us.md b/compiled_docs/loading/demo/basic.en-us.md new file mode 100644 index 0000000000..abb63a3fc3 --- /dev/null +++ b/compiled_docs/loading/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic Usage","meta":{"title":"Basic Usage","description":"\n

a basic way to use it

\n","order":"0"},"codes":{"jsx":"import { Loading } from '@alifd/next';\n\nReactDOM.render(\n
\n
LTR\n \n
test
\n \n
\n
RTL\n \n
test
\n \n
\n
\n , mountNode);\n","css":".demo {\n width: 500px;\n background-color: #F2F3F7;\n text-align: center;\n padding:50px;\n}\n"},"body":"\n````jsx\nimport { Loading } from '@alifd/next';\n\nReactDOM.render(\n
\n
LTR\n \n
test
\n \n
\n
RTL\n \n
test
\n \n
\n
\n , mountNode);\n````\n\n````css\n.demo {\n width: 500px;\n background-color: #F2F3F7;\n text-align: center;\n padding:50px;\n}\n````","html":"
import { Loading } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <div>LTR\n            <Loading tip=\"加载中...\" >\n                <div className=\"demo\">test</div>\n            </Loading>\n        </div>\n        <div>RTL\n            <Loading tip=\"加载中...\" rtl >\n                <div className=\"demo\">test</div>\n            </Loading>\n        </div>\n    </div>\n    , mountNode);
.demo {\n    width: 500px;\n    background-color: #F2F3F7;\n    text-align: center;\n    padding:50px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/loading/demo/basic.md b/compiled_docs/loading/demo/basic.md new file mode 100644 index 0000000000..5403d5f6d0 --- /dev/null +++ b/compiled_docs/loading/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本用法","meta":{"title":"基本用法","description":"\n

最简单的用法。

\n","order":"0"},"codes":{"jsx":"import { Loading } from '@alifd/next';\n\nReactDOM.render(\n
\n
LTR\n \n
test
\n \n
\n
RTL\n \n
test
\n \n
\n
\n , mountNode);\n","css":".demo {\n width: 500px;\n background-color: #F2F3F7;\n text-align: center;\n padding:50px;\n}\n"},"body":"\n\n````jsx\nimport { Loading } from '@alifd/next';\n\nReactDOM.render(\n
\n
LTR\n \n
test
\n \n
\n
RTL\n \n
test
\n \n
\n
\n , mountNode);\n````\n\n````css\n.demo {\n width: 500px;\n background-color: #F2F3F7;\n text-align: center;\n padding:50px;\n}\n````","html":"
import { Loading } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <div>LTR\n            <Loading tip=\"加载中...\" >\n                <div className=\"demo\">test</div>\n            </Loading>\n        </div>\n        <div>RTL\n            <Loading tip=\"加载中...\" rtl >\n                <div className=\"demo\">test</div>\n            </Loading>\n        </div>\n    </div>\n    , mountNode);
.demo {\n    width: 500px;\n    background-color: #F2F3F7;\n    text-align: center;\n    padding:50px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/loading/demo/fullscreen.en-us.md b/compiled_docs/loading/demo/fullscreen.en-us.md new file mode 100644 index 0000000000..e8c88e20c8 --- /dev/null +++ b/compiled_docs/loading/demo/fullscreen.en-us.md @@ -0,0 +1 @@ +{"title":"Fullscreen","meta":{"title":"Fullscreen","description":"\n

display a fullscreen loading

\n","order":"3"},"codes":{"jsx":"import { Loading, Button } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n\n constructor(props, context) {\n super(props, context);\n this.state = {\n visible: false\n };\n }\n\n onClick() {\n this.setState({visible: !this.state.visible});\n }\n\n onClose = () => {\n this.setState({\n visible: false\n });\n }\n\n render() {\n return (\n \n \n \n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Loading, Button } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n\n constructor(props, context) {\n super(props, context);\n this.state = {\n visible: false\n };\n }\n\n onClick() {\n this.setState({visible: !this.state.visible});\n }\n\n onClose = () => {\n this.setState({\n visible: false\n });\n }\n\n render() {\n return (\n \n \n \n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Loading, Button } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n\n    constructor(props, context) {\n        super(props, context);\n        this.state = {\n            visible: false\n        };\n    }\n\n    onClick() {\n        this.setState({visible: !this.state.visible});\n    }\n\n    onClose = () => {\n        this.setState({\n            visible: false\n        });\n    }\n\n    render() {\n        return (\n            <span>\n                <Loading visible={this.state.visible}\n                    fullScreen\n                    shape=\"fusion-reactor\"\n                    safeNode={this.btn}\n                    onVisibleChange={this.onClose.bind(this)}>\n                    <Button onClick={this.onClick.bind(this)} ref={ref => (this.btn = ref)}>Full Screen</Button>\n                </Loading>\n            </span>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/loading/demo/fullscreen.md b/compiled_docs/loading/demo/fullscreen.md new file mode 100644 index 0000000000..262678f6a7 --- /dev/null +++ b/compiled_docs/loading/demo/fullscreen.md @@ -0,0 +1 @@ +{"title":"全屏","meta":{"title":"全屏","description":"\n

全屏展示

\n","order":"3"},"codes":{"jsx":"import { Loading, Button } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n\n constructor(props, context) {\n super(props, context);\n this.state = {\n visible: false\n };\n }\n\n onClick() {\n this.setState({visible: !this.state.visible});\n }\n\n onClose = () => {\n this.setState({\n visible: false\n });\n }\n\n render() {\n return (\n \n \n \n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Loading, Button } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n\n constructor(props, context) {\n super(props, context);\n this.state = {\n visible: false\n };\n }\n\n onClick() {\n this.setState({visible: !this.state.visible});\n }\n\n onClose = () => {\n this.setState({\n visible: false\n });\n }\n\n render() {\n return (\n \n \n \n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Loading, Button } from '@alifd/next';\n\n\n\nclass App extends React.Component {\n\n    constructor(props, context) {\n        super(props, context);\n        this.state = {\n            visible: false\n        };\n    }\n\n    onClick() {\n        this.setState({visible: !this.state.visible});\n    }\n\n    onClose = () => {\n        this.setState({\n            visible: false\n        });\n    }\n\n    render() {\n        return (\n            <span>\n                <Loading visible={this.state.visible}\n                    fullScreen\n                    shape=\"fusion-reactor\"\n                    safeNode={this.btn}\n                    onVisibleChange={this.onClose.bind(this)}>\n                    <Button onClick={this.onClick.bind(this)} ref={ref => (this.btn = ref)}>Full Screen</Button>\n                </Loading>\n            </span>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/loading/demo/indicator.en-us.md b/compiled_docs/loading/demo/indicator.en-us.md new file mode 100644 index 0000000000..38c30d1d47 --- /dev/null +++ b/compiled_docs/loading/demo/indicator.en-us.md @@ -0,0 +1 @@ +{"title":"Custom Loading Animation","meta":{"title":"Custom Loading Animation","description":"\n

You can write an animation and put it in.

\n","order":"1"},"codes":{"jsx":"import { Loading } from '@alifd/next';\n\nconst indicator1 = (
\n
loading...
\n
);\nconst indicator7 = (
\n
loading...
\n
);\n\nReactDOM.render(
\n \n
test
\n \n \n
test
\n \n \n
test
\n \n
, mountNode);\n","css":".demo {\n width: 500px;\n background-color: #F2F3F7;\n text-align: center;\n padding:50px;\n}\n.next-loading {\n margin-bottom: 5px;\n}\n\n/* start copy from here */\n\n\n.load-container {\n margin: 0 auto;\n position: relative;\n}\n\n/* animation 1 */\n.load1 .loader,\n.load1 .loader:before,\n.load1 .loader:after {\n background: #5584FF;\n color: #5584FF;\n -webkit-animation: load1 1s infinite ease-in-out;\n animation: load1 1s infinite ease-in-out;\n width: 1em;\n height: 4em;\n}\n.load1 .loader:before,\n.load1 .loader:after {\n position: absolute;\n top: 0;\n content: '';\n}\n.load1 .loader:before {\n left: -1.5em;\n -webkit-animation-delay: -0.32s;\n animation-delay: -0.32s;\n}\n.load1 .loader {\n text-indent: -9999em;\n margin: 0 auto !important;\n position: relative;\n font-size: 11px;\n -webkit-animation-delay: -0.16s;\n animation-delay: -0.16s;\n}\n.load1 .loader:after {\n left: 1.5em;\n}\n@-webkit-keyframes load1 {\n 0%,\n 80%,\n 100% {\n box-shadow: 0 0 ;\n height: 4em;\n }\n 40% {\n box-shadow: 0 -2em ;\n height: 5em;\n }\n}\n@keyframes load1 {\n 0%,\n 80%,\n 100% {\n box-shadow: 0 0 ;\n height: 4em;\n }\n 40% {\n box-shadow: 0 -2em ;\n height: 5em;\n }\n}\n\n\n/* animation 2 */\n.load7 .loader:before,\n.load7 .loader:after,\n.load7 .loader {\n border-radius: 50%;\n width: 2.5em;\n height: 2.5em;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n -webkit-animation: load7 1.8s infinite ease-in-out;\n animation: load7 1.8s infinite ease-in-out;\n top: -36px;\n}\n.load7 .loader {\n margin: 0 auto !important;\n font-size: 10px;\n position: relative;\n text-indent: -9999em;\n -webkit-animation-delay: -0.16s;\n animation-delay: -0.16s;\n}\n.load7 .loader:before {\n left: -3.5em;\n -webkit-animation-delay: -0.32s;\n animation-delay: -0.32s;\n}\n.load7 .loader:after {\n left: 3.5em;\n}\n.load7 .loader:before,\n.load7 .loader:after {\n content: '';\n position: absolute;\n top: 0;\n}\n@-webkit-keyframes load7 {\n 0%,\n 80%,\n 100% {\n box-shadow: 0 2.5em 0 -1.3em #5584FF;\n }\n 40% {\n box-shadow: 0 2.5em 0 0 #5584FF;\n }\n}\n@keyframes load7 {\n 0%,\n 80%,\n 100% {\n box-shadow: 0 2.5em 0 -1.3em #5584FF;\n }\n 40% {\n box-shadow: 0 2.5em 0 0 #5584FF;\n }\n}\n"},"body":"\n````jsx\nimport { Loading } from '@alifd/next';\n\nconst indicator1 = (
\n
loading...
\n
);\nconst indicator7 = (
\n
loading...
\n
);\n\nReactDOM.render(
\n \n
test
\n \n \n
test
\n \n \n
test
\n \n
, mountNode);\n````\n\n````css\n.demo {\n width: 500px;\n background-color: #F2F3F7;\n text-align: center;\n padding:50px;\n}\n.next-loading {\n margin-bottom: 5px;\n}\n\n/* start copy from here */\n\n\n.load-container {\n margin: 0 auto;\n position: relative;\n}\n\n/* animation 1 */\n.load1 .loader,\n.load1 .loader:before,\n.load1 .loader:after {\n background: #5584FF;\n color: #5584FF;\n -webkit-animation: load1 1s infinite ease-in-out;\n animation: load1 1s infinite ease-in-out;\n width: 1em;\n height: 4em;\n}\n.load1 .loader:before,\n.load1 .loader:after {\n position: absolute;\n top: 0;\n content: '';\n}\n.load1 .loader:before {\n left: -1.5em;\n -webkit-animation-delay: -0.32s;\n animation-delay: -0.32s;\n}\n.load1 .loader {\n text-indent: -9999em;\n margin: 0 auto !important;\n position: relative;\n font-size: 11px;\n -webkit-animation-delay: -0.16s;\n animation-delay: -0.16s;\n}\n.load1 .loader:after {\n left: 1.5em;\n}\n@-webkit-keyframes load1 {\n 0%,\n 80%,\n 100% {\n box-shadow: 0 0 ;\n height: 4em;\n }\n 40% {\n box-shadow: 0 -2em ;\n height: 5em;\n }\n}\n@keyframes load1 {\n 0%,\n 80%,\n 100% {\n box-shadow: 0 0 ;\n height: 4em;\n }\n 40% {\n box-shadow: 0 -2em ;\n height: 5em;\n }\n}\n\n\n/* animation 2 */\n.load7 .loader:before,\n.load7 .loader:after,\n.load7 .loader {\n border-radius: 50%;\n width: 2.5em;\n height: 2.5em;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n -webkit-animation: load7 1.8s infinite ease-in-out;\n animation: load7 1.8s infinite ease-in-out;\n top: -36px;\n}\n.load7 .loader {\n margin: 0 auto !important;\n font-size: 10px;\n position: relative;\n text-indent: -9999em;\n -webkit-animation-delay: -0.16s;\n animation-delay: -0.16s;\n}\n.load7 .loader:before {\n left: -3.5em;\n -webkit-animation-delay: -0.32s;\n animation-delay: -0.32s;\n}\n.load7 .loader:after {\n left: 3.5em;\n}\n.load7 .loader:before,\n.load7 .loader:after {\n content: '';\n position: absolute;\n top: 0;\n}\n@-webkit-keyframes load7 {\n 0%,\n 80%,\n 100% {\n box-shadow: 0 2.5em 0 -1.3em #5584FF;\n }\n 40% {\n box-shadow: 0 2.5em 0 0 #5584FF;\n }\n}\n@keyframes load7 {\n 0%,\n 80%,\n 100% {\n box-shadow: 0 2.5em 0 -1.3em #5584FF;\n }\n 40% {\n box-shadow: 0 2.5em 0 0 #5584FF;\n }\n}\n````","html":"
import { Loading } from '@alifd/next';\n\nconst indicator1 = (<div className=\"load-container load1\">\n    <div className=\"loader\">loading...</div>\n</div>);\nconst indicator7 = (<div className=\"load-container load7\">\n    <div className=\"loader\">loading...</div>\n</div>);\n\nReactDOM.render(<div>\n    <Loading tip=\"default animation\">\n        <div className=\"demo\">test</div>\n    </Loading>\n    <Loading indicator={indicator1}>\n        <div className=\"demo\">test</div>\n    </Loading>\n    <Loading indicator={indicator7}>\n        <div className=\"demo\">test</div>\n    </Loading>\n</div>, mountNode);
.demo {\n    width: 500px;\n    background-color: #F2F3F7;\n    text-align: center;\n    padding:50px;\n}\n.next-loading {\n    margin-bottom: 5px;\n}\n\n/* start copy from here */\n\n\n.load-container {\n  margin: 0 auto;\n  position: relative;\n}\n\n/* animation 1 */\n.load1 .loader,\n.load1 .loader:before,\n.load1 .loader:after {\n  background: #5584FF;\n  color: #5584FF;\n  -webkit-animation: load1 1s infinite ease-in-out;\n  animation: load1 1s infinite ease-in-out;\n  width: 1em;\n  height: 4em;\n}\n.load1 .loader:before,\n.load1 .loader:after {\n  position: absolute;\n  top: 0;\n  content: '';\n}\n.load1 .loader:before {\n  left: -1.5em;\n  -webkit-animation-delay: -0.32s;\n  animation-delay: -0.32s;\n}\n.load1 .loader {\n  text-indent: -9999em;\n  margin: 0 auto !important;\n  position: relative;\n  font-size: 11px;\n  -webkit-animation-delay: -0.16s;\n  animation-delay: -0.16s;\n}\n.load1 .loader:after {\n  left: 1.5em;\n}\n@-webkit-keyframes load1 {\n  0%,\n  80%,\n  100% {\n    box-shadow: 0 0 ;\n    height: 4em;\n  }\n  40% {\n    box-shadow: 0 -2em ;\n    height: 5em;\n  }\n}\n@keyframes load1 {\n  0%,\n  80%,\n  100% {\n    box-shadow: 0 0 ;\n    height: 4em;\n  }\n  40% {\n    box-shadow: 0 -2em ;\n    height: 5em;\n  }\n}\n\n\n/* animation 2 */\n.load7 .loader:before,\n.load7 .loader:after,\n.load7 .loader {\n  border-radius: 50%;\n  width: 2.5em;\n  height: 2.5em;\n  -webkit-animation-fill-mode: both;\n  animation-fill-mode: both;\n  -webkit-animation: load7 1.8s infinite ease-in-out;\n  animation: load7 1.8s infinite ease-in-out;\n  top: -36px;\n}\n.load7 .loader {\n  margin: 0 auto !important;\n  font-size: 10px;\n  position: relative;\n  text-indent: -9999em;\n  -webkit-animation-delay: -0.16s;\n  animation-delay: -0.16s;\n}\n.load7 .loader:before {\n  left: -3.5em;\n  -webkit-animation-delay: -0.32s;\n  animation-delay: -0.32s;\n}\n.load7 .loader:after {\n  left: 3.5em;\n}\n.load7 .loader:before,\n.load7 .loader:after {\n  content: '';\n  position: absolute;\n  top: 0;\n}\n@-webkit-keyframes load7 {\n  0%,\n  80%,\n  100% {\n    box-shadow: 0 2.5em 0 -1.3em #5584FF;\n  }\n  40% {\n    box-shadow: 0 2.5em 0 0 #5584FF;\n  }\n}\n@keyframes load7 {\n  0%,\n  80%,\n  100% {\n    box-shadow: 0 2.5em 0 -1.3em #5584FF;\n  }\n  40% {\n    box-shadow: 0 2.5em 0 0 #5584FF;\n  }\n}
"} \ No newline at end of file diff --git a/compiled_docs/loading/demo/indicator.md b/compiled_docs/loading/demo/indicator.md new file mode 100644 index 0000000000..75de22e2b3 --- /dev/null +++ b/compiled_docs/loading/demo/indicator.md @@ -0,0 +1 @@ +{"title":"自定义Loading动画","meta":{"title":"自定义Loading动画","description":"\n

你可以自定义动画，把自己的动画元素传进去, 需要自己写动画样式

\n","order":"1"},"codes":{"jsx":"import { Loading } from '@alifd/next';\n\nconst indicator1 = (
\n
loading...
\n
);\nconst indicator7 = (
\n
loading...
\n
);\n\nReactDOM.render(
\n \n
test
\n \n \n
test
\n \n \n
test
\n \n
, mountNode);\n","css":".demo {\n width: 500px;\n background-color: #F2F3F7;\n text-align: center;\n padding:50px;\n}\n.next-loading {\n margin-bottom: 5px;\n}\n\n/* start copy from here */\n\n\n.load-container {\n margin: 0 auto;\n position: relative;\n}\n\n/* animation 1 */\n.load1 .loader,\n.load1 .loader:before,\n.load1 .loader:after {\n background: #5584FF;\n color: #5584FF;\n -webkit-animation: load1 1s infinite ease-in-out;\n animation: load1 1s infinite ease-in-out;\n width: 1em;\n height: 4em;\n}\n.load1 .loader:before,\n.load1 .loader:after {\n position: absolute;\n top: 0;\n content: '';\n}\n.load1 .loader:before {\n left: -1.5em;\n -webkit-animation-delay: -0.32s;\n animation-delay: -0.32s;\n}\n.load1 .loader {\n text-indent: -9999em;\n margin: 0 auto !important;\n position: relative;\n font-size: 11px;\n -webkit-animation-delay: -0.16s;\n animation-delay: -0.16s;\n}\n.load1 .loader:after {\n left: 1.5em;\n}\n@-webkit-keyframes load1 {\n 0%,\n 80%,\n 100% {\n box-shadow: 0 0 ;\n height: 4em;\n }\n 40% {\n box-shadow: 0 -2em ;\n height: 5em;\n }\n}\n@keyframes load1 {\n 0%,\n 80%,\n 100% {\n box-shadow: 0 0 ;\n height: 4em;\n }\n 40% {\n box-shadow: 0 -2em ;\n height: 5em;\n }\n}\n\n\n/* animation 2 */\n.load7 .loader:before,\n.load7 .loader:after,\n.load7 .loader {\n border-radius: 50%;\n width: 2.5em;\n height: 2.5em;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n -webkit-animation: load7 1.8s infinite ease-in-out;\n animation: load7 1.8s infinite ease-in-out;\n top: -36px;\n}\n.load7 .loader {\n margin: 0 auto !important;\n font-size: 10px;\n position: relative;\n text-indent: -9999em;\n -webkit-animation-delay: -0.16s;\n animation-delay: -0.16s;\n}\n.load7 .loader:before {\n left: -3.5em;\n -webkit-animation-delay: -0.32s;\n animation-delay: -0.32s;\n}\n.load7 .loader:after {\n left: 3.5em;\n}\n.load7 .loader:before,\n.load7 .loader:after {\n content: '';\n position: absolute;\n top: 0;\n}\n@-webkit-keyframes load7 {\n 0%,\n 80%,\n 100% {\n box-shadow: 0 2.5em 0 -1.3em #5584FF;\n }\n 40% {\n box-shadow: 0 2.5em 0 0 #5584FF;\n }\n}\n@keyframes load7 {\n 0%,\n 80%,\n 100% {\n box-shadow: 0 2.5em 0 -1.3em #5584FF;\n }\n 40% {\n box-shadow: 0 2.5em 0 0 #5584FF;\n }\n}\n"},"body":"\n\n\n````jsx\nimport { Loading } from '@alifd/next';\n\nconst indicator1 = (
\n
loading...
\n
);\nconst indicator7 = (
\n
loading...
\n
);\n\nReactDOM.render(
\n \n
test
\n \n \n
test
\n \n \n
test
\n \n
, mountNode);\n````\n\n````css\n.demo {\n width: 500px;\n background-color: #F2F3F7;\n text-align: center;\n padding:50px;\n}\n.next-loading {\n margin-bottom: 5px;\n}\n\n/* start copy from here */\n\n\n.load-container {\n margin: 0 auto;\n position: relative;\n}\n\n/* animation 1 */\n.load1 .loader,\n.load1 .loader:before,\n.load1 .loader:after {\n background: #5584FF;\n color: #5584FF;\n -webkit-animation: load1 1s infinite ease-in-out;\n animation: load1 1s infinite ease-in-out;\n width: 1em;\n height: 4em;\n}\n.load1 .loader:before,\n.load1 .loader:after {\n position: absolute;\n top: 0;\n content: '';\n}\n.load1 .loader:before {\n left: -1.5em;\n -webkit-animation-delay: -0.32s;\n animation-delay: -0.32s;\n}\n.load1 .loader {\n text-indent: -9999em;\n margin: 0 auto !important;\n position: relative;\n font-size: 11px;\n -webkit-animation-delay: -0.16s;\n animation-delay: -0.16s;\n}\n.load1 .loader:after {\n left: 1.5em;\n}\n@-webkit-keyframes load1 {\n 0%,\n 80%,\n 100% {\n box-shadow: 0 0 ;\n height: 4em;\n }\n 40% {\n box-shadow: 0 -2em ;\n height: 5em;\n }\n}\n@keyframes load1 {\n 0%,\n 80%,\n 100% {\n box-shadow: 0 0 ;\n height: 4em;\n }\n 40% {\n box-shadow: 0 -2em ;\n height: 5em;\n }\n}\n\n\n/* animation 2 */\n.load7 .loader:before,\n.load7 .loader:after,\n.load7 .loader {\n border-radius: 50%;\n width: 2.5em;\n height: 2.5em;\n -webkit-animation-fill-mode: both;\n animation-fill-mode: both;\n -webkit-animation: load7 1.8s infinite ease-in-out;\n animation: load7 1.8s infinite ease-in-out;\n top: -36px;\n}\n.load7 .loader {\n margin: 0 auto !important;\n font-size: 10px;\n position: relative;\n text-indent: -9999em;\n -webkit-animation-delay: -0.16s;\n animation-delay: -0.16s;\n}\n.load7 .loader:before {\n left: -3.5em;\n -webkit-animation-delay: -0.32s;\n animation-delay: -0.32s;\n}\n.load7 .loader:after {\n left: 3.5em;\n}\n.load7 .loader:before,\n.load7 .loader:after {\n content: '';\n position: absolute;\n top: 0;\n}\n@-webkit-keyframes load7 {\n 0%,\n 80%,\n 100% {\n box-shadow: 0 2.5em 0 -1.3em #5584FF;\n }\n 40% {\n box-shadow: 0 2.5em 0 0 #5584FF;\n }\n}\n@keyframes load7 {\n 0%,\n 80%,\n 100% {\n box-shadow: 0 2.5em 0 -1.3em #5584FF;\n }\n 40% {\n box-shadow: 0 2.5em 0 0 #5584FF;\n }\n}\n````","html":"
import { Loading } from '@alifd/next';\n\nconst indicator1 = (<div className=\"load-container load1\">\n    <div className=\"loader\">loading...</div>\n</div>);\nconst indicator7 = (<div className=\"load-container load7\">\n    <div className=\"loader\">loading...</div>\n</div>);\n\nReactDOM.render(<div>\n    <Loading tip=\"default animation\">\n        <div className=\"demo\">test</div>\n    </Loading>\n    <Loading indicator={indicator1}>\n        <div className=\"demo\">test</div>\n    </Loading>\n    <Loading indicator={indicator7}>\n        <div className=\"demo\">test</div>\n    </Loading>\n</div>, mountNode);
.demo {\n    width: 500px;\n    background-color: #F2F3F7;\n    text-align: center;\n    padding:50px;\n}\n.next-loading {\n    margin-bottom: 5px;\n}\n\n/* start copy from here */\n\n\n.load-container {\n  margin: 0 auto;\n  position: relative;\n}\n\n/* animation 1 */\n.load1 .loader,\n.load1 .loader:before,\n.load1 .loader:after {\n  background: #5584FF;\n  color: #5584FF;\n  -webkit-animation: load1 1s infinite ease-in-out;\n  animation: load1 1s infinite ease-in-out;\n  width: 1em;\n  height: 4em;\n}\n.load1 .loader:before,\n.load1 .loader:after {\n  position: absolute;\n  top: 0;\n  content: '';\n}\n.load1 .loader:before {\n  left: -1.5em;\n  -webkit-animation-delay: -0.32s;\n  animation-delay: -0.32s;\n}\n.load1 .loader {\n  text-indent: -9999em;\n  margin: 0 auto !important;\n  position: relative;\n  font-size: 11px;\n  -webkit-animation-delay: -0.16s;\n  animation-delay: -0.16s;\n}\n.load1 .loader:after {\n  left: 1.5em;\n}\n@-webkit-keyframes load1 {\n  0%,\n  80%,\n  100% {\n    box-shadow: 0 0 ;\n    height: 4em;\n  }\n  40% {\n    box-shadow: 0 -2em ;\n    height: 5em;\n  }\n}\n@keyframes load1 {\n  0%,\n  80%,\n  100% {\n    box-shadow: 0 0 ;\n    height: 4em;\n  }\n  40% {\n    box-shadow: 0 -2em ;\n    height: 5em;\n  }\n}\n\n\n/* animation 2 */\n.load7 .loader:before,\n.load7 .loader:after,\n.load7 .loader {\n  border-radius: 50%;\n  width: 2.5em;\n  height: 2.5em;\n  -webkit-animation-fill-mode: both;\n  animation-fill-mode: both;\n  -webkit-animation: load7 1.8s infinite ease-in-out;\n  animation: load7 1.8s infinite ease-in-out;\n  top: -36px;\n}\n.load7 .loader {\n  margin: 0 auto !important;\n  font-size: 10px;\n  position: relative;\n  text-indent: -9999em;\n  -webkit-animation-delay: -0.16s;\n  animation-delay: -0.16s;\n}\n.load7 .loader:before {\n  left: -3.5em;\n  -webkit-animation-delay: -0.32s;\n  animation-delay: -0.32s;\n}\n.load7 .loader:after {\n  left: 3.5em;\n}\n.load7 .loader:before,\n.load7 .loader:after {\n  content: '';\n  position: absolute;\n  top: 0;\n}\n@-webkit-keyframes load7 {\n  0%,\n  80%,\n  100% {\n    box-shadow: 0 2.5em 0 -1.3em #5584FF;\n  }\n  40% {\n    box-shadow: 0 2.5em 0 0 #5584FF;\n  }\n}\n@keyframes load7 {\n  0%,\n  80%,\n  100% {\n    box-shadow: 0 2.5em 0 -1.3em #5584FF;\n  }\n  40% {\n    box-shadow: 0 2.5em 0 0 #5584FF;\n  }\n}
"} \ No newline at end of file diff --git a/compiled_docs/loading/demo/size.en-us.md b/compiled_docs/loading/demo/size.en-us.md new file mode 100644 index 0000000000..1d77522215 --- /dev/null +++ b/compiled_docs/loading/demo/size.en-us.md @@ -0,0 +1 @@ +{"title":"Loading Animation Size","meta":{"title":"Loading Animation Size","description":"\n

Sets Loading animation size. it only works for default loading animation.

\n","order":"6"},"codes":{"jsx":"import { Loading } from '@alifd/next';\n\nReactDOM.render(
\n \n
test
\n \n \n
test
\n \n \n
test
\n \n
, mountNode);\n","css":".demo {\n width: 500px;\n background-color: #F2F3F7;\n text-align: center;\n padding:50px;\n}\n.next-loading {\n margin-bottom: 5px;\n}\n"},"body":"\n````jsx\nimport { Loading } from '@alifd/next';\n\nReactDOM.render(
\n \n
test
\n \n \n
test
\n \n \n
test
\n \n
, mountNode);\n````\n\n````css\n.demo {\n width: 500px;\n background-color: #F2F3F7;\n text-align: center;\n padding:50px;\n}\n.next-loading {\n margin-bottom: 5px;\n}\n````","html":"
import { Loading } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Loading tip=\"normal(size default large)\" >\n        <div className=\"demo\">test</div>\n    </Loading>\n    <Loading tip=\"large\" size=\"large\">\n        <div className=\"demo\">test</div>\n    </Loading>\n    <Loading tip=\"medium\" size=\"medium\">\n        <div className=\"demo\">test</div>\n    </Loading>\n</div>, mountNode);
.demo {\n    width: 500px;\n    background-color: #F2F3F7;\n    text-align: center;\n    padding:50px;\n}\n.next-loading {\n    margin-bottom: 5px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/loading/demo/size.md b/compiled_docs/loading/demo/size.md new file mode 100644 index 0000000000..d7043b0a25 --- /dev/null +++ b/compiled_docs/loading/demo/size.md @@ -0,0 +1 @@ +{"title":"Loading动画尺寸","meta":{"title":"Loading动画尺寸","description":"\n

设置Loading动画的尺寸,只对原生的indicator管用

\n","order":"6"},"codes":{"jsx":"import { Loading } from '@alifd/next';\n\nReactDOM.render(
\n \n
test
\n \n \n
test
\n \n \n
test
\n \n
, mountNode);\n","css":".demo {\n width: 500px;\n background-color: #F2F3F7;\n text-align: center;\n padding:50px;\n}\n.next-loading {\n margin-bottom: 5px;\n}\n"},"body":"\n\n````jsx\nimport { Loading } from '@alifd/next';\n\nReactDOM.render(
\n \n
test
\n \n \n
test
\n \n \n
test
\n \n
, mountNode);\n````\n\n````css\n.demo {\n width: 500px;\n background-color: #F2F3F7;\n text-align: center;\n padding:50px;\n}\n.next-loading {\n margin-bottom: 5px;\n}\n````","html":"
import { Loading } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Loading tip=\"normal(size default large)\" >\n        <div className=\"demo\">test</div>\n    </Loading>\n    <Loading tip=\"large\" size=\"large\">\n        <div className=\"demo\">test</div>\n    </Loading>\n    <Loading tip=\"medium\" size=\"medium\">\n        <div className=\"demo\">test</div>\n    </Loading>\n</div>, mountNode);
.demo {\n    width: 500px;\n    background-color: #F2F3F7;\n    text-align: center;\n    padding:50px;\n}\n.next-loading {\n    margin-bottom: 5px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/loading/demo/state.en-us.md b/compiled_docs/loading/demo/state.en-us.md new file mode 100644 index 0000000000..14e77bba2c --- /dev/null +++ b/compiled_docs/loading/demo/state.en-us.md @@ -0,0 +1 @@ +{"title":"Loading State","meta":{"title":"Loading State","description":"\n

Loading state can be toggle。

\n","order":"2"},"codes":{"jsx":"import { Loading, Form, Input, Button } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst layout = {\n labelCol: {\n fixedSpan: 4\n },\n wrapperCol: {\n span: 18\n }\n};\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n visible: false\n };\n }\n\n setVisible(visible) {\n this.setState({\n visible\n });\n }\n render() {\n return (
\n \n
\n \n \n \n \n \n \n \n \n \n
\n \n
\n \n \n
\n
);\n }\n}\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Loading, Form, Input, Button } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst layout = {\n labelCol: {\n fixedSpan: 4\n },\n wrapperCol: {\n span: 18\n }\n};\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n visible: false\n };\n }\n\n setVisible(visible) {\n this.setState({\n visible\n });\n }\n render() {\n return (
\n \n
\n \n \n \n \n \n \n \n \n \n
\n \n
\n \n \n
\n
);\n }\n}\nReactDOM.render(, mountNode);\n````","html":"
import { Loading, Form, Input, Button } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst layout = {\n    labelCol: {\n        fixedSpan: 4\n    },\n    wrapperCol: {\n        span: 18\n    }\n};\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            visible: false\n        };\n    }\n\n    setVisible(visible) {\n        this.setState({\n            visible\n        });\n    }\n    render() {\n        return (<div>\n            <Loading visible={this.state.visible} shape=\"fusion-reactor\">\n                <Form style={{width: 500}}>\n                    <FormItem label=\"Username\" {...layout} >\n                        <Input />\n                    </FormItem>\n                    <FormItem label=\"Password\" {...layout} >\n                        <Input htmlType=\"password\" placeholder=\"please input\"/>\n                    </FormItem>\n                    <FormItem label=\"Detail\" {...layout} >\n                        <Input multiple />\n                    </FormItem>\n                </Form>\n            </Loading>\n            <div style={{paddingLeft: 80}}>\n                <Button onClick={this.setVisible.bind(this, true)} type=\"primary\">Submit</Button>\n                <Button onClick={this.setVisible.bind(this, false)} style={{marginLeft: 5}}>Cancel</Button>\n            </div>\n        </div>);\n    }\n}\nReactDOM.render(<App/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/loading/demo/state.md b/compiled_docs/loading/demo/state.md new file mode 100644 index 0000000000..e8d1345e17 --- /dev/null +++ b/compiled_docs/loading/demo/state.md @@ -0,0 +1 @@ +{"title":"关闭加载","meta":{"title":"关闭加载","description":"\n

可切换加载状态。

\n","order":"2"},"codes":{"jsx":"import { Loading, Form, Input, Button } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst layout = {\n labelCol: {\n fixedSpan: 4\n },\n wrapperCol: {\n span: 18\n }\n};\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n visible: false\n };\n }\n\n setVisible(visible) {\n this.setState({\n visible\n });\n }\n render() {\n return (
\n \n
\n \n \n \n \n \n \n \n \n \n
\n \n
\n \n \n
\n
);\n }\n}\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Loading, Form, Input, Button } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst layout = {\n labelCol: {\n fixedSpan: 4\n },\n wrapperCol: {\n span: 18\n }\n};\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n visible: false\n };\n }\n\n setVisible(visible) {\n this.setState({\n visible\n });\n }\n render() {\n return (
\n \n
\n \n \n \n \n \n \n \n \n \n
\n \n
\n \n \n
\n
);\n }\n}\nReactDOM.render(, mountNode);\n````","html":"
import { Loading, Form, Input, Button } from '@alifd/next';\n\n\nconst FormItem = Form.Item;\n\nconst layout = {\n    labelCol: {\n        fixedSpan: 4\n    },\n    wrapperCol: {\n        span: 18\n    }\n};\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            visible: false\n        };\n    }\n\n    setVisible(visible) {\n        this.setState({\n            visible\n        });\n    }\n    render() {\n        return (<div>\n            <Loading visible={this.state.visible} shape=\"fusion-reactor\">\n                <Form style={{width: 500}}>\n                    <FormItem label=\"Username\" {...layout} >\n                        <Input />\n                    </FormItem>\n                    <FormItem label=\"Password\" {...layout} >\n                        <Input htmlType=\"password\" placeholder=\"please input\"/>\n                    </FormItem>\n                    <FormItem label=\"Detail\" {...layout} >\n                        <Input multiple />\n                    </FormItem>\n                </Form>\n            </Loading>\n            <div style={{paddingLeft: 80}}>\n                <Button onClick={this.setVisible.bind(this, true)} type=\"primary\">Submit</Button>\n                <Button onClick={this.setVisible.bind(this, false)} style={{marginLeft: 5}}>Cancel</Button>\n            </div>\n        </div>);\n    }\n}\nReactDOM.render(<App/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/loading/demo/tipAlign.en-us.md b/compiled_docs/loading/demo/tipAlign.en-us.md new file mode 100644 index 0000000000..3663f51f0b --- /dev/null +++ b/compiled_docs/loading/demo/tipAlign.en-us.md @@ -0,0 +1 @@ +{"title":"Custom Tip Position","meta":{"title":"Custom Tip Position","description":"\n

Loading state can be toggle。

\n","order":"5"},"codes":{"jsx":"import { Loading } from '@alifd/next';\n\nReactDOM.render(
\n \n
test
\n \n \n
test
\n \n \n
test
\n \n
, mountNode);\n","css":".demo {\n width: 500px;\n background-color: #F2F3F7;\n text-align: center;\n padding:50px;\n}\n.next-loading {\n margin-bottom: 5px;\n}\n"},"body":"\n````jsx\nimport { Loading } from '@alifd/next';\n\nReactDOM.render(
\n \n
test
\n \n \n
test
\n \n \n
test
\n \n
, mountNode);\n````\n\n````css\n.demo {\n width: 500px;\n background-color: #F2F3F7;\n text-align: center;\n padding:50px;\n}\n.next-loading {\n margin-bottom: 5px;\n}\n````","html":"
import { Loading } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Loading tip=\"default\">\n        <div className=\"demo\">test</div>\n    </Loading>\n    <Loading tip=\"right\" tipAlign=\"right\">\n        <div className=\"demo\">test</div>\n    </Loading>\n    <Loading tip=\"bottom\" tipAlign=\"bottom\">\n        <div className=\"demo\">test</div>\n    </Loading>\n</div>, mountNode);
.demo {\n    width: 500px;\n    background-color: #F2F3F7;\n    text-align: center;\n    padding:50px;\n}\n.next-loading {\n    margin-bottom: 5px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/loading/demo/tipAlign.md b/compiled_docs/loading/demo/tipAlign.md new file mode 100644 index 0000000000..6805b14950 --- /dev/null +++ b/compiled_docs/loading/demo/tipAlign.md @@ -0,0 +1 @@ +{"title":"自定义提示语位置","meta":{"title":"自定义提示语位置","description":"\n

你可以选择提示语的位置,目前支持两个值 right/bottom(默认值)

\n","order":"5"},"codes":{"jsx":"import { Loading } from '@alifd/next';\n\nReactDOM.render(
\n \n
test
\n \n \n
test
\n \n \n
test
\n \n
, mountNode);\n","css":".demo {\n width: 500px;\n background-color: #F2F3F7;\n text-align: center;\n padding:50px;\n}\n.next-loading {\n margin-bottom: 5px;\n}\n"},"body":"\n\n````jsx\nimport { Loading } from '@alifd/next';\n\nReactDOM.render(
\n \n
test
\n \n \n
test
\n \n \n
test
\n \n
, mountNode);\n````\n\n````css\n.demo {\n width: 500px;\n background-color: #F2F3F7;\n text-align: center;\n padding:50px;\n}\n.next-loading {\n margin-bottom: 5px;\n}\n````","html":"
import { Loading } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Loading tip=\"default\">\n        <div className=\"demo\">test</div>\n    </Loading>\n    <Loading tip=\"right\" tipAlign=\"right\">\n        <div className=\"demo\">test</div>\n    </Loading>\n    <Loading tip=\"bottom\" tipAlign=\"bottom\">\n        <div className=\"demo\">test</div>\n    </Loading>\n</div>, mountNode);
.demo {\n    width: 500px;\n    background-color: #F2F3F7;\n    text-align: center;\n    padding:50px;\n}\n.next-loading {\n    margin-bottom: 5px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/loading/index.en-us.md b/compiled_docs/loading/index.en-us.md new file mode 100644 index 0000000000..bb6b654b36 --- /dev/null +++ b/compiled_docs/loading/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Develop Guide#

When to use#

When a part of page is waiting asynchronous data or is rendering, loading animate may reduce anxieties.

\n

Attentions#

Loading use the layout display='inline-block' to wrap inner elements by default.

\n

if you want wrap all the element, please use <Loading style={{display: 'block'}} />

\n

API#

","api":"

Loading#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
tipcustom text in loadingany-
sizethe animation size

option:
'large'
'medium'		Enum'large'
tipAligntip location

option:
'right'(right side of animation)
'bottom'(bottom of animation)		Enum'bottom'
visibleloading state, default trueBooleantrue
indicatorcustom animationany-
coloranimation colorString-
fullScreenfullscreen displayBoolean-
childrenchildren elementsany-
\n"} \ No newline at end of file diff --git a/compiled_docs/loading/index.md b/compiled_docs/loading/index.md new file mode 100644 index 0000000000..ebf1906ebd --- /dev/null +++ b/compiled_docs/loading/index.md @@ -0,0 +1 @@ +{"meta":"

开发指南#

何时使用#

页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。

\n

注意事项#

Loading 默认使用 display='inline-block' 布局的方式包裹内部元素。

\n

如果希望 通栏包裹 可以修改 <Loading style={{display: 'block'}} />

\n

API#

","api":"

Loading#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
tip自定义内容any-
size设置动画尺寸

可选值:
'large'(大号)
'medium'(中号)		Enum'large'
tipAlign自定义内容位置

可选值:
'right'(出现在动画右边)
'bottom'(出现在动画下面)		Enum'bottom'
visibleloading 状态, 默认 trueBooleantrue
indicator自定义动画any-
color动画颜色String-
fullScreen全屏展示Boolean-
children子元素any-
inlineshould loader be displayed inlineBooleantrue
\n"} \ No newline at end of file diff --git a/compiled_docs/mapping.js b/compiled_docs/mapping.js new file mode 100644 index 0000000000..31db87c934 --- /dev/null +++ b/compiled_docs/mapping.js @@ -0,0 +1,1295 @@ +module.exports = { + 'Affix': { + demos: [ + '/compiled_docs/affix/demo/absolute-position.en-us.md', + '/compiled_docs/affix/demo/absolute-position.md', + '/compiled_docs/affix/demo/basic.en-us.md', + '/compiled_docs/affix/demo/basic.md', + '/compiled_docs/affix/demo/custom-container.en-us.md', + '/compiled_docs/affix/demo/custom-container.md', + '/compiled_docs/affix/demo/custom-offset.en-us.md', + '/compiled_docs/affix/demo/custom-offset.md', + '/compiled_docs/affix/demo/on-affix.en-us.md', + '/compiled_docs/affix/demo/on-affix.md', + ], + + readme: [ + '/compiled_docs/affix/index.en-us.md', + '/compiled_docs/affix/index.md', + ], + }, + 'Animate': { + demos: [ + '/compiled_docs/animate/demo/basic.en-us.md', + '/compiled_docs/animate/demo/basic.md', + '/compiled_docs/animate/demo/expand.en-us.md', + '/compiled_docs/animate/demo/expand.md', + '/compiled_docs/animate/demo/multiple.en-us.md', + '/compiled_docs/animate/demo/multiple.md', + ], + + readme: [ + '/compiled_docs/animate/index.en-us.md', + '/compiled_docs/animate/index.md', + ], + }, + 'Badge': { + demos: [ + '/compiled_docs/badge/demo/basic.en-us.md', + '/compiled_docs/badge/demo/basic.md', + '/compiled_docs/badge/demo/change.en-us.md', + '/compiled_docs/badge/demo/change.md', + '/compiled_docs/badge/demo/content.en-us.md', + '/compiled_docs/badge/demo/content.md', + '/compiled_docs/badge/demo/dot.en-us.md', + '/compiled_docs/badge/demo/dot.md', + '/compiled_docs/badge/demo/no-wrapper.en-us.md', + '/compiled_docs/badge/demo/no-wrapper.md', + '/compiled_docs/badge/demo/plus.en-us.md', + '/compiled_docs/badge/demo/plus.md', + ], + + readme: [ + '/compiled_docs/badge/index.en-us.md', + '/compiled_docs/badge/index.md', + ], + }, + 'Balloon': { + demos: [ + '/compiled_docs/balloon/demo/accessibility.en-us.md', + '/compiled_docs/balloon/demo/accessibility.md', + '/compiled_docs/balloon/demo/alignment.en-us.md', + '/compiled_docs/balloon/demo/alignment.md', + '/compiled_docs/balloon/demo/basic.en-us.md', + '/compiled_docs/balloon/demo/basic.md', + '/compiled_docs/balloon/demo/control.en-us.md', + '/compiled_docs/balloon/demo/control.md', + '/compiled_docs/balloon/demo/nested.en-us.md', + '/compiled_docs/balloon/demo/nested.md', + '/compiled_docs/balloon/demo/onCloseClick.en-us.md', + '/compiled_docs/balloon/demo/onCloseClick.md', + '/compiled_docs/balloon/demo/tooltip.en-us.md', + '/compiled_docs/balloon/demo/tooltip.md', + '/compiled_docs/balloon/demo/triggerType.en-us.md', + '/compiled_docs/balloon/demo/triggerType.md', + ], + + readme: [ + '/compiled_docs/balloon/index.en-us.md', + '/compiled_docs/balloon/index.md', + ], + }, + 'Breadcrumb': { + demos: [ + '/compiled_docs/breadcrumb/demo/basic.en-us.md', + '/compiled_docs/breadcrumb/demo/basic.md', + '/compiled_docs/breadcrumb/demo/more.en-us.md', + '/compiled_docs/breadcrumb/demo/more.md', + '/compiled_docs/breadcrumb/demo/separator.en-us.md', + '/compiled_docs/breadcrumb/demo/separator.md', + ], + + readme: [ + '/compiled_docs/breadcrumb/index.en-us.md', + '/compiled_docs/breadcrumb/index.md', + ], + }, + 'Button': { + demos: [ + '/compiled_docs/button/demo/basic.en-us.md', + '/compiled_docs/button/demo/basic.md', + '/compiled_docs/button/demo/component.en-us.md', + '/compiled_docs/button/demo/component.md', + '/compiled_docs/button/demo/disabled.en-us.md', + '/compiled_docs/button/demo/disabled.md', + '/compiled_docs/button/demo/ghost.en-us.md', + '/compiled_docs/button/demo/ghost.md', + '/compiled_docs/button/demo/group.en-us.md', + '/compiled_docs/button/demo/group.md', + '/compiled_docs/button/demo/icon.en-us.md', + '/compiled_docs/button/demo/icon.md', + '/compiled_docs/button/demo/loading.en-us.md', + '/compiled_docs/button/demo/loading.md', + '/compiled_docs/button/demo/size.en-us.md', + '/compiled_docs/button/demo/size.md', + ], + + readme: [ + '/compiled_docs/button/index.en-us.md', + '/compiled_docs/button/index.md', + ], + }, + 'Calendar': { + demos: [ + '/compiled_docs/calendar/demo/basic.en-us.md', + '/compiled_docs/calendar/demo/basic.md', + '/compiled_docs/calendar/demo/card.en-us.md', + '/compiled_docs/calendar/demo/card.md', + '/compiled_docs/calendar/demo/custom-cell.en-us.md', + '/compiled_docs/calendar/demo/custom-cell.md', + '/compiled_docs/calendar/demo/default-visible-month.en-us.md', + '/compiled_docs/calendar/demo/default-visible-month.md', + '/compiled_docs/calendar/demo/disabled.en-us.md', + '/compiled_docs/calendar/demo/disabled.md', + '/compiled_docs/calendar/demo/locale.en-us.md', + '/compiled_docs/calendar/demo/locale.md', + '/compiled_docs/calendar/demo/lunar.en-us.md', + '/compiled_docs/calendar/demo/lunar.md', + '/compiled_docs/calendar/demo/panel.en-us.md', + '/compiled_docs/calendar/demo/panel.md', + ], + + readme: [ + '/compiled_docs/calendar/index.en-us.md', + '/compiled_docs/calendar/index.md', + ], + }, + 'Card': { + demos: [ + '/compiled_docs/card/demo/basic.en-us.md', + '/compiled_docs/card/demo/basic.md', + '/compiled_docs/card/demo/custom-card.en-us.md', + '/compiled_docs/card/demo/custom-card.md', + '/compiled_docs/card/demo/custom-height.en-us.md', + '/compiled_docs/card/demo/custom-height.md', + '/compiled_docs/card/demo/custom-title.en-us.md', + '/compiled_docs/card/demo/custom-title.md', + '/compiled_docs/card/demo/head-underline.en-us.md', + '/compiled_docs/card/demo/head-underline.md', + ], + + readme: [ + '/compiled_docs/card/index.en-us.md', + '/compiled_docs/card/index.md', + ], + }, + 'Cascader': { + demos: [ + '/compiled_docs/cascader/demo/accessibility.en-us.md', + '/compiled_docs/cascader/demo/accessibility.md', + '/compiled_docs/cascader/demo/basic.en-us.md', + '/compiled_docs/cascader/demo/basic.md', + '/compiled_docs/cascader/demo/custom-style.en-us.md', + '/compiled_docs/cascader/demo/custom-style.md', + '/compiled_docs/cascader/demo/dynamic.en-us.md', + '/compiled_docs/cascader/demo/dynamic.md', + '/compiled_docs/cascader/demo/expand-trigger.en-us.md', + '/compiled_docs/cascader/demo/expand-trigger.md', + '/compiled_docs/cascader/demo/multiple-control.en-us.md', + '/compiled_docs/cascader/demo/multiple-control.md', + '/compiled_docs/cascader/demo/multiple.en-us.md', + '/compiled_docs/cascader/demo/multiple.md', + '/compiled_docs/cascader/demo/single-control.en-us.md', + '/compiled_docs/cascader/demo/single-control.md', + '/compiled_docs/cascader/demo/source.en-us.md', + '/compiled_docs/cascader/demo/source.md', + ], + + readme: [ + '/compiled_docs/cascader/index.en-us.md', + '/compiled_docs/cascader/index.md', + ], + }, + 'CascaderSelect': { + demos: [ + '/compiled_docs/cascader-select/demo/accessibility.en-us.md', + '/compiled_docs/cascader-select/demo/accessibility.md', + '/compiled_docs/cascader-select/demo/basic.en-us.md', + '/compiled_docs/cascader-select/demo/basic.md', + '/compiled_docs/cascader-select/demo/custom-style.en-us.md', + '/compiled_docs/cascader-select/demo/custom-style.md', + '/compiled_docs/cascader-select/demo/custom.md', + '/compiled_docs/cascader-select/demo/dynamic.en-us.md', + '/compiled_docs/cascader-select/demo/dynamic.md', + '/compiled_docs/cascader-select/demo/expand-trigger.en-us.md', + '/compiled_docs/cascader-select/demo/expand-trigger.md', + '/compiled_docs/cascader-select/demo/multiple-control.en-us.md', + '/compiled_docs/cascader-select/demo/multiple-control.md', + '/compiled_docs/cascader-select/demo/multiple.en-us.md', + '/compiled_docs/cascader-select/demo/multiple.md', + '/compiled_docs/cascader-select/demo/search.en-us.md', + '/compiled_docs/cascader-select/demo/search.md', + '/compiled_docs/cascader-select/demo/single-control.en-us.md', + '/compiled_docs/cascader-select/demo/single-control.md', + ], + + readme: [ + '/compiled_docs/cascader-select/index.en-us.md', + '/compiled_docs/cascader-select/index.md', + ], + }, + 'Checkbox': { + demos: [ + '/compiled_docs/checkbox/demo/accessibility.en-us.md', + '/compiled_docs/checkbox/demo/accessibility.md', + '/compiled_docs/checkbox/demo/basic.en-us.md', + '/compiled_docs/checkbox/demo/basic.md', + '/compiled_docs/checkbox/demo/control.en-us.md', + '/compiled_docs/checkbox/demo/control.md', + '/compiled_docs/checkbox/demo/group.en-us.md', + '/compiled_docs/checkbox/demo/group.md', + '/compiled_docs/checkbox/demo/indeterminate.en-us.md', + '/compiled_docs/checkbox/demo/indeterminate.md', + '/compiled_docs/checkbox/demo/nest.en-us.md', + '/compiled_docs/checkbox/demo/nest.md', + '/compiled_docs/checkbox/demo/uncontrol.en-us.md', + '/compiled_docs/checkbox/demo/uncontrol.md', + ], + + readme: [ + '/compiled_docs/checkbox/index.en-us.md', + '/compiled_docs/checkbox/index.md', + ], + }, + 'Collapse': { + demos: [ + '/compiled_docs/collapse/demo/accessibility.en-us.md', + '/compiled_docs/collapse/demo/accessibility.md', + '/compiled_docs/collapse/demo/accordion.en-us.md', + '/compiled_docs/collapse/demo/accordion.md', + '/compiled_docs/collapse/demo/basic.en-us.md', + '/compiled_docs/collapse/demo/basic.md', + '/compiled_docs/collapse/demo/datasource.en-us.md', + '/compiled_docs/collapse/demo/datasource.md', + '/compiled_docs/collapse/demo/disabled.en-us.md', + '/compiled_docs/collapse/demo/disabled.md', + '/compiled_docs/collapse/demo/event.en-us.md', + '/compiled_docs/collapse/demo/event.md', + '/compiled_docs/collapse/demo/nested.en-us.md', + '/compiled_docs/collapse/demo/nested.md', + ], + + readme: [ + '/compiled_docs/collapse/index.en-us.md', + '/compiled_docs/collapse/index.md', + ], + }, + 'ConfigProvider': { + demos: [ + '/compiled_docs/config-provider/demo/basic.en-us.md', + '/compiled_docs/config-provider/demo/basic.md', + '/compiled_docs/config-provider/demo/components.en-us.md', + '/compiled_docs/config-provider/demo/components.md', + '/compiled_docs/config-provider/demo/consumer.en-us.md', + '/compiled_docs/config-provider/demo/consumer.md', + '/compiled_docs/config-provider/demo/error-boundary.en-us.md', + '/compiled_docs/config-provider/demo/error-boundary.md', + '/compiled_docs/config-provider/demo/locale.en-us.md', + '/compiled_docs/config-provider/demo/locale.md', + '/compiled_docs/config-provider/demo/rtl.en-us.md', + '/compiled_docs/config-provider/demo/rtl.md', + ], + + readme: [ + '/compiled_docs/config-provider/index.en-us.md', + '/compiled_docs/config-provider/index.md', + ], + }, + 'DatePicker': { + demos: [ + '/compiled_docs/date-picker/demo/accessibility.en-us.md', + '/compiled_docs/date-picker/demo/accessibility.md', + '/compiled_docs/date-picker/demo/basic.en-us.md', + '/compiled_docs/date-picker/demo/basic.md', + '/compiled_docs/date-picker/demo/custom-range-picker.en-us.md', + '/compiled_docs/date-picker/demo/custom-range-picker.md', + '/compiled_docs/date-picker/demo/default-visible-month.en-us.md', + '/compiled_docs/date-picker/demo/default-visible-month.md', + '/compiled_docs/date-picker/demo/default.en-us.md', + '/compiled_docs/date-picker/demo/default.md', + '/compiled_docs/date-picker/demo/disabled-date.en-us.md', + '/compiled_docs/date-picker/demo/disabled-date.md', + '/compiled_docs/date-picker/demo/disabled.en-us.md', + '/compiled_docs/date-picker/demo/disabled.md', + '/compiled_docs/date-picker/demo/field.en-us.md', + '/compiled_docs/date-picker/demo/field.md', + '/compiled_docs/date-picker/demo/footer.en-us.md', + '/compiled_docs/date-picker/demo/footer.md', + '/compiled_docs/date-picker/demo/format.en-us.md', + '/compiled_docs/date-picker/demo/format.md', + '/compiled_docs/date-picker/demo/popup.en-us.md', + '/compiled_docs/date-picker/demo/popup.md', + '/compiled_docs/date-picker/demo/show-time.en-us.md', + '/compiled_docs/date-picker/demo/show-time.md', + '/compiled_docs/date-picker/demo/size.en-us.md', + '/compiled_docs/date-picker/demo/size.md', + ], + + readme: [ + '/compiled_docs/date-picker/index.en-us.md', + '/compiled_docs/date-picker/index.md', + ], + }, + 'Dialog': { + demos: [ + '/compiled_docs/dialog/demo/accessibility.en-us.md', + '/compiled_docs/dialog/demo/accessibility.md', + '/compiled_docs/dialog/demo/basic.en-us.md', + '/compiled_docs/dialog/demo/basic.md', + '/compiled_docs/dialog/demo/customize-footer.en-us.md', + '/compiled_docs/dialog/demo/customize-footer.md', + '/compiled_docs/dialog/demo/fixed-height.en-us.md', + '/compiled_docs/dialog/demo/fixed-height.md', + '/compiled_docs/dialog/demo/footer.en-us.md', + '/compiled_docs/dialog/demo/footer.md', + '/compiled_docs/dialog/demo/large-content.en-us.md', + '/compiled_docs/dialog/demo/large-content.md', + '/compiled_docs/dialog/demo/promise.en-us.md', + '/compiled_docs/dialog/demo/promise.md', + '/compiled_docs/dialog/demo/quick.en-us.md', + '/compiled_docs/dialog/demo/quick.md', + '/compiled_docs/dialog/demo/should-update-position.en-us.md', + '/compiled_docs/dialog/demo/should-update-position.md', + ], + + readme: [ + '/compiled_docs/dialog/index.en-us.md', + '/compiled_docs/dialog/index.md', + ], + }, + 'Dropdown': { + demos: [ + '/compiled_docs/dropdown/demo/basic.en-us.md', + '/compiled_docs/dropdown/demo/basic.md', + '/compiled_docs/dropdown/demo/controlled.en-us.md', + '/compiled_docs/dropdown/demo/controlled.md', + '/compiled_docs/dropdown/demo/trigger-type.en-us.md', + '/compiled_docs/dropdown/demo/trigger-type.md', + ], + + readme: [ + '/compiled_docs/dropdown/index.en-us.md', + '/compiled_docs/dropdown/index.md', + ], + }, + 'Field': { + demos: [ + '/compiled_docs/field/demo/autounmout.en-us.md', + '/compiled_docs/field/demo/autounmout.md', + '/compiled_docs/field/demo/basic.en-us.md', + '/compiled_docs/field/demo/basic.md', + '/compiled_docs/field/demo/custom.en-us.md', + '/compiled_docs/field/demo/custom.md', + '/compiled_docs/field/demo/dynamic.en-us.md', + '/compiled_docs/field/demo/dynamic.md', + '/compiled_docs/field/demo/mix.en-us.md', + '/compiled_docs/field/demo/mix.md', + '/compiled_docs/field/demo/normalize.en-us.md', + '/compiled_docs/field/demo/normalize.md', + '/compiled_docs/field/demo/onchange.en-us.md', + '/compiled_docs/field/demo/onchange.md', + '/compiled_docs/field/demo/redux.en-us.md', + '/compiled_docs/field/demo/redux.md', + '/compiled_docs/field/demo/seterror.en-us.md', + '/compiled_docs/field/demo/seterror.md', + '/compiled_docs/field/demo/topath.en-us.md', + '/compiled_docs/field/demo/topath.md', + '/compiled_docs/field/demo/validator.en-us.md', + '/compiled_docs/field/demo/validator.md', + '/compiled_docs/field/demo/valuename.en-us.md', + '/compiled_docs/field/demo/valuename.md', + ], + + readme: [ + '/compiled_docs/field/index.en-us.md', + '/compiled_docs/field/index.md', + ], + }, + 'Form': { + demos: [ + '/compiled_docs/form/demo/accessibility.en-us.md', + '/compiled_docs/form/demo/accessibility.md', + '/compiled_docs/form/demo/base.en-us.md', + '/compiled_docs/form/demo/base.md', + '/compiled_docs/form/demo/custom.en-us.md', + '/compiled_docs/form/demo/custom.md', + '/compiled_docs/form/demo/field.en-us.md', + '/compiled_docs/form/demo/field.md', + '/compiled_docs/form/demo/inline.en-us.md', + '/compiled_docs/form/demo/inline.md', + '/compiled_docs/form/demo/inset.en-us.md', + '/compiled_docs/form/demo/inset.md', + '/compiled_docs/form/demo/mix.en-us.md', + '/compiled_docs/form/demo/mix.md', + '/compiled_docs/form/demo/nest.en-us.md', + '/compiled_docs/form/demo/nest.md', + '/compiled_docs/form/demo/onsubmit.en-us.md', + '/compiled_docs/form/demo/onsubmit.md', + '/compiled_docs/form/demo/redux-seterror.en-us.md', + '/compiled_docs/form/demo/redux-seterror.md', + '/compiled_docs/form/demo/redux.en-us.md', + '/compiled_docs/form/demo/redux.md', + '/compiled_docs/form/demo/register.en-us.md', + '/compiled_docs/form/demo/register.md', + '/compiled_docs/form/demo/responsive.en-us.md', + '/compiled_docs/form/demo/responsive.md', + '/compiled_docs/form/demo/size.en-us.md', + '/compiled_docs/form/demo/size.md', + '/compiled_docs/form/demo/top.en-us.md', + '/compiled_docs/form/demo/top.md', + '/compiled_docs/form/demo/validate-basic.en-us.md', + '/compiled_docs/form/demo/validate-basic.md', + '/compiled_docs/form/demo/validate-custom-error.en-us.md', + '/compiled_docs/form/demo/validate-custom-error.md', + '/compiled_docs/form/demo/validate-static.en-us.md', + '/compiled_docs/form/demo/validate-static.md', + ], + + readme: [ + '/compiled_docs/form/index.en-us.md', + '/compiled_docs/form/index.md', + ], + }, + 'Grid': { + demos: [ + '/compiled_docs/grid/demo/align.en-us.md', + '/compiled_docs/grid/demo/align.md', + '/compiled_docs/grid/demo/basic.en-us.md', + '/compiled_docs/grid/demo/basic.md', + '/compiled_docs/grid/demo/breakpoint.en-us.md', + '/compiled_docs/grid/demo/breakpoint.md', + '/compiled_docs/grid/demo/custom-elem-type.en-us.md', + '/compiled_docs/grid/demo/custom-elem-type.md', + '/compiled_docs/grid/demo/fixed.en-us.md', + '/compiled_docs/grid/demo/fixed.md', + '/compiled_docs/grid/demo/gutter.en-us.md', + '/compiled_docs/grid/demo/gutter.md', + '/compiled_docs/grid/demo/hidden.en-us.md', + '/compiled_docs/grid/demo/hidden.md', + '/compiled_docs/grid/demo/justify.en-us.md', + '/compiled_docs/grid/demo/justify.md', + '/compiled_docs/grid/demo/nest.en-us.md', + '/compiled_docs/grid/demo/nest.md', + '/compiled_docs/grid/demo/offset-fixed.en-us.md', + '/compiled_docs/grid/demo/offset-fixed.md', + '/compiled_docs/grid/demo/offset.en-us.md', + '/compiled_docs/grid/demo/offset.md', + '/compiled_docs/grid/demo/type.en-us.md', + '/compiled_docs/grid/demo/type.md', + '/compiled_docs/grid/demo/wrap.en-us.md', + '/compiled_docs/grid/demo/wrap.md', + ], + + readme: [ + '/compiled_docs/grid/index.en-us.md', + '/compiled_docs/grid/index.md', + ], + }, + 'Icon': { + demos: [ + '/compiled_docs/icon/demo/accessibility.en-us.md', + '/compiled_docs/icon/demo/accessibility.md', + '/compiled_docs/icon/demo/basic.en-us.md', + '/compiled_docs/icon/demo/basic.md', + '/compiled_docs/icon/demo/size.en-us.md', + '/compiled_docs/icon/demo/size.md', + '/compiled_docs/icon/demo/style.en-us.md', + '/compiled_docs/icon/demo/style.md', + '/compiled_docs/icon/demo/type.en-us.md', + '/compiled_docs/icon/demo/type.md', + ], + + readme: [ + '/compiled_docs/icon/index.en-us.md', + '/compiled_docs/icon/index.md', + ], + }, + 'Input': { + demos: [ + '/compiled_docs/input/demo/accessibility.en-us.md', + '/compiled_docs/input/demo/accessibility.md', + '/compiled_docs/input/demo/addon.en-us.md', + '/compiled_docs/input/demo/addon.md', + '/compiled_docs/input/demo/autoheight.en-us.md', + '/compiled_docs/input/demo/autoheight.md', + '/compiled_docs/input/demo/basic.en-us.md', + '/compiled_docs/input/demo/basic.md', + '/compiled_docs/input/demo/clear.en-us.md', + '/compiled_docs/input/demo/clear.md', + '/compiled_docs/input/demo/disabled.en-us.md', + '/compiled_docs/input/demo/disabled.md', + '/compiled_docs/input/demo/group.en-us.md', + '/compiled_docs/input/demo/group.md', + '/compiled_docs/input/demo/inner.en-us.md', + '/compiled_docs/input/demo/inner.md', + '/compiled_docs/input/demo/maxlen.en-us.md', + '/compiled_docs/input/demo/maxlen.md', + '/compiled_docs/input/demo/passwd.en-us.md', + '/compiled_docs/input/demo/passwd.md', + '/compiled_docs/input/demo/state.en-us.md', + '/compiled_docs/input/demo/state.md', + '/compiled_docs/input/demo/style.en-us.md', + '/compiled_docs/input/demo/style.md', + '/compiled_docs/input/demo/trim.en-us.md', + '/compiled_docs/input/demo/trim.md', + ], + + readme: [ + '/compiled_docs/input/index.en-us.md', + '/compiled_docs/input/index.md', + ], + }, + 'Loading': { + demos: [ + '/compiled_docs/loading/demo/basic.en-us.md', + '/compiled_docs/loading/demo/basic.md', + '/compiled_docs/loading/demo/fullscreen.en-us.md', + '/compiled_docs/loading/demo/fullscreen.md', + '/compiled_docs/loading/demo/indicator.en-us.md', + '/compiled_docs/loading/demo/indicator.md', + '/compiled_docs/loading/demo/size.en-us.md', + '/compiled_docs/loading/demo/size.md', + '/compiled_docs/loading/demo/state.en-us.md', + '/compiled_docs/loading/demo/state.md', + '/compiled_docs/loading/demo/tipAlign.en-us.md', + '/compiled_docs/loading/demo/tipAlign.md', + ], + + readme: [ + '/compiled_docs/loading/index.en-us.md', + '/compiled_docs/loading/index.md', + ], + }, + 'Menu': { + demos: [ + '/compiled_docs/menu/demo/accordian.en-us.md', + '/compiled_docs/menu/demo/accordian.md', + '/compiled_docs/menu/demo/basic.en-us.md', + '/compiled_docs/menu/demo/basic.md', + '/compiled_docs/menu/demo/context.en-us.md', + '/compiled_docs/menu/demo/context.md', + '/compiled_docs/menu/demo/csutom-select.en-us.md', + '/compiled_docs/menu/demo/csutom-select.md', + '/compiled_docs/menu/demo/custom-popup.en-us.md', + '/compiled_docs/menu/demo/custom-popup.md', + '/compiled_docs/menu/demo/hover.en-us.md', + '/compiled_docs/menu/demo/hover.md', + '/compiled_docs/menu/demo/hoz.en-us.md', + '/compiled_docs/menu/demo/hoz.md', + '/compiled_docs/menu/demo/popup-align.en-us.md', + '/compiled_docs/menu/demo/popup-align.md', + '/compiled_docs/menu/demo/popup.en-us.md', + '/compiled_docs/menu/demo/popup.md', + '/compiled_docs/menu/demo/select.en-us.md', + '/compiled_docs/menu/demo/select.md', + ], + + readme: [ + '/compiled_docs/menu/index.en-us.md', + '/compiled_docs/menu/index.md', + ], + }, + 'MenuButton': { + demos: [ + '/compiled_docs/menu-button/demo/basic.en-us.md', + '/compiled_docs/menu-button/demo/basic.md', + '/compiled_docs/menu-button/demo/menu.en-us.md', + '/compiled_docs/menu-button/demo/menu.md', + '/compiled_docs/menu-button/demo/select.en-us.md', + '/compiled_docs/menu-button/demo/select.md', + '/compiled_docs/menu-button/demo/size.en-us.md', + '/compiled_docs/menu-button/demo/size.md', + ], + + readme: [ + '/compiled_docs/menu-button/index.en-us.md', + '/compiled_docs/menu-button/index.md', + ], + }, + 'Message': { + demos: [ + '/compiled_docs/message/demo/accessibility.en-us.md', + '/compiled_docs/message/demo/accessibility.md', + '/compiled_docs/message/demo/control.en-us.md', + '/compiled_docs/message/demo/control.md', + '/compiled_docs/message/demo/inline-close.en-us.md', + '/compiled_docs/message/demo/inline-close.md', + '/compiled_docs/message/demo/shape.en-us.md', + '/compiled_docs/message/demo/shape.md', + '/compiled_docs/message/demo/size.en-us.md', + '/compiled_docs/message/demo/size.md', + '/compiled_docs/message/demo/toast-quick.en-us.md', + '/compiled_docs/message/demo/toast-quick.md', + '/compiled_docs/message/demo/toast.en-us.md', + '/compiled_docs/message/demo/toast.md', + '/compiled_docs/message/demo/type.en-us.md', + '/compiled_docs/message/demo/type.md', + ], + + readme: [ + '/compiled_docs/message/index.en-us.md', + '/compiled_docs/message/index.md', + ], + }, + 'Nav': { + demos: [ + '/compiled_docs/nav/demo/basic.en-us.md', + '/compiled_docs/nav/demo/basic.md', + '/compiled_docs/nav/demo/custom.en-us.md', + '/compiled_docs/nav/demo/custom.md', + '/compiled_docs/nav/demo/group.en-us.md', + '/compiled_docs/nav/demo/group.md', + '/compiled_docs/nav/demo/icon-only.en-us.md', + '/compiled_docs/nav/demo/icon-only.md', + '/compiled_docs/nav/demo/open-mode.en-us.md', + '/compiled_docs/nav/demo/open-mode.md', + '/compiled_docs/nav/demo/popup-align.en-us.md', + '/compiled_docs/nav/demo/popup-align.md', + ], + + readme: [ + '/compiled_docs/nav/index.en-us.md', + '/compiled_docs/nav/index.md', + ], + }, + 'NumberPicker': { + demos: [ + '/compiled_docs/number-picker/demo/accessibility.en-us.md', + '/compiled_docs/number-picker/demo/accessibility.md', + '/compiled_docs/number-picker/demo/basic.en-us.md', + '/compiled_docs/number-picker/demo/basic.md', + '/compiled_docs/number-picker/demo/disabled.en-us.md', + '/compiled_docs/number-picker/demo/disabled.md', + '/compiled_docs/number-picker/demo/editable.en-us.md', + '/compiled_docs/number-picker/demo/editable.md', + '/compiled_docs/number-picker/demo/format.en-us.md', + '/compiled_docs/number-picker/demo/format.md', + '/compiled_docs/number-picker/demo/limit.en-us.md', + '/compiled_docs/number-picker/demo/limit.md', + '/compiled_docs/number-picker/demo/precision.en-us.md', + '/compiled_docs/number-picker/demo/precision.md', + '/compiled_docs/number-picker/demo/size.en-us.md', + '/compiled_docs/number-picker/demo/size.md', + '/compiled_docs/number-picker/demo/step.en-us.md', + '/compiled_docs/number-picker/demo/step.md', + ], + + readme: [ + '/compiled_docs/number-picker/index.en-us.md', + '/compiled_docs/number-picker/index.md', + ], + }, + 'Overlay': { + demos: [ + '/compiled_docs/overlay/demo/accessibility.en-us.md', + '/compiled_docs/overlay/demo/accessibility.md', + '/compiled_docs/overlay/demo/align.en-us.md', + '/compiled_docs/overlay/demo/align.md', + '/compiled_docs/overlay/demo/backdrop.en-us.md', + '/compiled_docs/overlay/demo/backdrop.md', + '/compiled_docs/overlay/demo/controlled.en-us.md', + '/compiled_docs/overlay/demo/controlled.md', + '/compiled_docs/overlay/demo/nested.en-us.md', + '/compiled_docs/overlay/demo/nested.md', + '/compiled_docs/overlay/demo/overlay.en-us.md', + '/compiled_docs/overlay/demo/overlay.md', + '/compiled_docs/overlay/demo/popup.en-us.md', + '/compiled_docs/overlay/demo/popup.md', + '/compiled_docs/overlay/demo/scroll.en-us.md', + '/compiled_docs/overlay/demo/scroll.md', + ], + + readme: [ + '/compiled_docs/overlay/index.en-us.md', + '/compiled_docs/overlay/index.md', + ], + }, + 'Pagination': { + demos: [ + '/compiled_docs/pagination/demo/control.en-us.md', + '/compiled_docs/pagination/demo/control.md', + '/compiled_docs/pagination/demo/dropdown-direction.en-us.md', + '/compiled_docs/pagination/demo/dropdown-direction.md', + '/compiled_docs/pagination/demo/link.en-us.md', + '/compiled_docs/pagination/demo/link.md', + '/compiled_docs/pagination/demo/page-size.en-us.md', + '/compiled_docs/pagination/demo/page-size.md', + '/compiled_docs/pagination/demo/react-router.en-us.md', + '/compiled_docs/pagination/demo/react-router.md', + '/compiled_docs/pagination/demo/shape.en-us.md', + '/compiled_docs/pagination/demo/shape.md', + '/compiled_docs/pagination/demo/show-total.en-us.md', + '/compiled_docs/pagination/demo/show-total.md', + '/compiled_docs/pagination/demo/size.en-us.md', + '/compiled_docs/pagination/demo/size.md', + '/compiled_docs/pagination/demo/type.en-us.md', + '/compiled_docs/pagination/demo/type.md', + '/compiled_docs/pagination/demo/uncontrol.en-us.md', + '/compiled_docs/pagination/demo/uncontrol.md', + ], + + readme: [ + '/compiled_docs/pagination/index.en-us.md', + '/compiled_docs/pagination/index.md', + ], + }, + 'Paragraph': { + demos: [ + '/compiled_docs/paragraph/demo/basic.en-us.md', + '/compiled_docs/paragraph/demo/basic.md', + '/compiled_docs/paragraph/demo/type.en-us.md', + '/compiled_docs/paragraph/demo/type.md', + ], + + readme: [ + '/compiled_docs/paragraph/index.en-us.md', + '/compiled_docs/paragraph/index.md', + ], + }, + 'Progress': { + demos: [ + '/compiled_docs/progress/demo/basic.en-us.md', + '/compiled_docs/progress/demo/basic.md', + '/compiled_docs/progress/demo/circle.en-us.md', + '/compiled_docs/progress/demo/circle.md', + '/compiled_docs/progress/demo/color.en-us.md', + '/compiled_docs/progress/demo/color.md', + '/compiled_docs/progress/demo/controlled.en-us.md', + '/compiled_docs/progress/demo/controlled.md', + '/compiled_docs/progress/demo/percentrender.en-us.md', + '/compiled_docs/progress/demo/percentrender.md', + '/compiled_docs/progress/demo/progressive.en-us.md', + '/compiled_docs/progress/demo/progressive.md', + '/compiled_docs/progress/demo/size.en-us.md', + '/compiled_docs/progress/demo/size.md', + '/compiled_docs/progress/demo/state.en-us.md', + '/compiled_docs/progress/demo/state.md', + ], + + readme: [ + '/compiled_docs/progress/index.en-us.md', + '/compiled_docs/progress/index.md', + ], + }, + 'Radio': { + demos: [ + '/compiled_docs/radio/demo/accessibility.en-us.md', + '/compiled_docs/radio/demo/accessibility.md', + '/compiled_docs/radio/demo/basic.en-us.md', + '/compiled_docs/radio/demo/basic.md', + '/compiled_docs/radio/demo/button.en-us.md', + '/compiled_docs/radio/demo/button.md', + '/compiled_docs/radio/demo/control.en-us.md', + '/compiled_docs/radio/demo/control.md', + '/compiled_docs/radio/demo/group.en-us.md', + '/compiled_docs/radio/demo/group.md', + '/compiled_docs/radio/demo/nest.en-us.md', + '/compiled_docs/radio/demo/nest.md', + '/compiled_docs/radio/demo/uncontrol.en-us.md', + '/compiled_docs/radio/demo/uncontrol.md', + '/compiled_docs/radio/demo/useWithGrid.en-us.md', + '/compiled_docs/radio/demo/useWithGrid.md', + ], + + readme: [ + '/compiled_docs/radio/index.en-us.md', + '/compiled_docs/radio/index.md', + ], + }, + 'Range': { + demos: [ + '/compiled_docs/range/demo/accessibility.en-us.md', + '/compiled_docs/range/demo/accessibility.md', + '/compiled_docs/range/demo/basic.en-us.md', + '/compiled_docs/range/demo/basic.md', + '/compiled_docs/range/demo/change.en-us.md', + '/compiled_docs/range/demo/change.md', + '/compiled_docs/range/demo/control.en-us.md', + '/compiled_docs/range/demo/control.md', + '/compiled_docs/range/demo/fixedWidth.en-us.md', + '/compiled_docs/range/demo/fixedWidth.md', + '/compiled_docs/range/demo/marks.en-us.md', + '/compiled_docs/range/demo/marks.md', + '/compiled_docs/range/demo/range.en-us.md', + '/compiled_docs/range/demo/range.md', + '/compiled_docs/range/demo/reverse.en-us.md', + '/compiled_docs/range/demo/reverse.md', + '/compiled_docs/range/demo/tipRender.en-us.md', + '/compiled_docs/range/demo/tipRender.md', + ], + + readme: [ + '/compiled_docs/range/index.en-us.md', + '/compiled_docs/range/index.md', + ], + }, + 'Rating': { + demos: [ + '/compiled_docs/rating/demo/accessibility.en-us.md', + '/compiled_docs/rating/demo/accessibility.md', + '/compiled_docs/rating/demo/basic.en-us.md', + '/compiled_docs/rating/demo/basic.md', + '/compiled_docs/rating/demo/disabled.en-us.md', + '/compiled_docs/rating/demo/disabled.md', + '/compiled_docs/rating/demo/grade.en-us.md', + '/compiled_docs/rating/demo/grade.md', + '/compiled_docs/rating/demo/half.en-us.md', + '/compiled_docs/rating/demo/half.md', + '/compiled_docs/rating/demo/size.en-us.md', + '/compiled_docs/rating/demo/size.md', + ], + + readme: [ + '/compiled_docs/rating/index.en-us.md', + '/compiled_docs/rating/index.md', + ], + }, + 'Search': { + demos: [ + '/compiled_docs/search/demo/accessibility.en-us.md', + '/compiled_docs/search/demo/accessibility.md', + '/compiled_docs/search/demo/base.en-us.md', + '/compiled_docs/search/demo/base.md', + '/compiled_docs/search/demo/combobox.en-us.md', + '/compiled_docs/search/demo/combobox.md', + '/compiled_docs/search/demo/custom.en-us.md', + '/compiled_docs/search/demo/custom.md', + '/compiled_docs/search/demo/filter.en-us.md', + '/compiled_docs/search/demo/filter.md', + '/compiled_docs/search/demo/size.en-us.md', + '/compiled_docs/search/demo/size.md', + '/compiled_docs/search/demo/type.en-us.md', + '/compiled_docs/search/demo/type.md', + ], + + readme: [ + '/compiled_docs/search/index.en-us.md', + '/compiled_docs/search/index.md', + ], + }, + 'Select': { + demos: [ + '/compiled_docs/select/demo/accessibility.en-us.md', + '/compiled_docs/select/demo/accessibility.md', + '/compiled_docs/select/demo/basic.en-us.md', + '/compiled_docs/select/demo/basic.md', + '/compiled_docs/select/demo/combobox-basic.en-us.md', + '/compiled_docs/select/demo/combobox-basic.md', + '/compiled_docs/select/demo/combobox-remote.en-us.md', + '/compiled_docs/select/demo/combobox-remote.md', + '/compiled_docs/select/demo/combobox-rich-text.en-us.md', + '/compiled_docs/select/demo/combobox-rich-text.md', + '/compiled_docs/select/demo/combobox.en-us.md', + '/compiled_docs/select/demo/combobox.md', + '/compiled_docs/select/demo/customize-menu.en-us.md', + '/compiled_docs/select/demo/customize-menu.md', + '/compiled_docs/select/demo/customize-overlay.en-us.md', + '/compiled_docs/select/demo/customize-overlay.md', + '/compiled_docs/select/demo/multiple.en-us.md', + '/compiled_docs/select/demo/multiple.md', + '/compiled_docs/select/demo/select-basic.en-us.md', + '/compiled_docs/select/demo/select-basic.md', + '/compiled_docs/select/demo/select-cascader.en-us.md', + '/compiled_docs/select/demo/select-cascader.md', + '/compiled_docs/select/demo/select-custom-value.en-us.md', + '/compiled_docs/select/demo/select-custom-value.md', + '/compiled_docs/select/demo/select-options-group.en-us.md', + '/compiled_docs/select/demo/select-options-group.md', + '/compiled_docs/select/demo/select-search.en-us.md', + '/compiled_docs/select/demo/select-search.md', + '/compiled_docs/select/demo/tag.en-us.md', + '/compiled_docs/select/demo/tag.md', + '/compiled_docs/select/demo/use-detail-value.en-us.md', + '/compiled_docs/select/demo/use-detail-value.md', + '/compiled_docs/select/demo/virtual-select.en-us.md', + '/compiled_docs/select/demo/virtual-select.md', + ], + + readme: [ + '/compiled_docs/select/index.en-us.md', + '/compiled_docs/select/index.md', + ], + }, + 'Slider': { + demos: [ + '/compiled_docs/slider/demo/arrow-position.en-us.md', + '/compiled_docs/slider/demo/arrow-position.md', + '/compiled_docs/slider/demo/autoplay.en-us.md', + '/compiled_docs/slider/demo/autoplay.md', + '/compiled_docs/slider/demo/basic.en-us.md', + '/compiled_docs/slider/demo/basic.md', + '/compiled_docs/slider/demo/button-size.en-us.md', + '/compiled_docs/slider/demo/button-size.md', + '/compiled_docs/slider/demo/center-mode.en-us.md', + '/compiled_docs/slider/demo/center-mode.md', + '/compiled_docs/slider/demo/custom-arrow.en-us.md', + '/compiled_docs/slider/demo/custom-arrow.md', + '/compiled_docs/slider/demo/custom-slide.en-us.md', + '/compiled_docs/slider/demo/custom-slide.md', + '/compiled_docs/slider/demo/dots-direction.en-us.md', + '/compiled_docs/slider/demo/dots-direction.md', + '/compiled_docs/slider/demo/dots-render.en-us.md', + '/compiled_docs/slider/demo/dots-render.md', + '/compiled_docs/slider/demo/dots-triggerType.en-us.md', + '/compiled_docs/slider/demo/dots-triggerType.md', + '/compiled_docs/slider/demo/fade.en-us.md', + '/compiled_docs/slider/demo/fade.md', + '/compiled_docs/slider/demo/infinite.en-us.md', + '/compiled_docs/slider/demo/infinite.md', + '/compiled_docs/slider/demo/multiple.en-us.md', + '/compiled_docs/slider/demo/multiple.md', + '/compiled_docs/slider/demo/pause-on-hover.en-us.md', + '/compiled_docs/slider/demo/pause-on-hover.md', + '/compiled_docs/slider/demo/slick-goto.en-us.md', + '/compiled_docs/slider/demo/slick-goto.md', + '/compiled_docs/slider/demo/slide-change-hook.en-us.md', + '/compiled_docs/slider/demo/slide-change-hook.md', + '/compiled_docs/slider/demo/slide-direction.en-us.md', + '/compiled_docs/slider/demo/slide-direction.md', + '/compiled_docs/slider/demo/slider-with-dialog.en-us.md', + '/compiled_docs/slider/demo/slider-with-dialog.md', + '/compiled_docs/slider/demo/slider-wrapper.en-us.md', + '/compiled_docs/slider/demo/slider-wrapper.md', + '/compiled_docs/slider/demo/variable-width.en-us.md', + '/compiled_docs/slider/demo/variable-width.md', + ], + + readme: [ + '/compiled_docs/slider/index.en-us.md', + '/compiled_docs/slider/index.md', + ], + }, + 'SplitButton': { + demos: [ + '/compiled_docs/split-button/demo/basic.en-us.md', + '/compiled_docs/split-button/demo/basic.md', + '/compiled_docs/split-button/demo/composite.en-us.md', + '/compiled_docs/split-button/demo/composite.md', + '/compiled_docs/split-button/demo/menu.en-us.md', + '/compiled_docs/split-button/demo/menu.md', + '/compiled_docs/split-button/demo/size.en-us.md', + '/compiled_docs/split-button/demo/size.md', + ], + + readme: [ + '/compiled_docs/split-button/index.en-us.md', + '/compiled_docs/split-button/index.md', + ], + }, + 'Step': { + demos: [ + '/compiled_docs/step/demo/basic.en-us.md', + '/compiled_docs/step/demo/basic.md', + '/compiled_docs/step/demo/controlled.en-us.md', + '/compiled_docs/step/demo/controlled.md', + '/compiled_docs/step/demo/custom-step-item.en-us.md', + '/compiled_docs/step/demo/custom-step-item.md', + '/compiled_docs/step/demo/direction.en-us.md', + '/compiled_docs/step/demo/direction.md', + '/compiled_docs/step/demo/disable.en-us.md', + '/compiled_docs/step/demo/disable.md', + '/compiled_docs/step/demo/percent.en-us.md', + '/compiled_docs/step/demo/percent.md', + '/compiled_docs/step/demo/read-only.en-us.md', + '/compiled_docs/step/demo/read-only.md', + ], + + readme: [ + '/compiled_docs/step/index.en-us.md', + '/compiled_docs/step/index.md', + ], + }, + 'Switch': { + demos: [ + '/compiled_docs/switch/demo/accessibility.en-us.md', + '/compiled_docs/switch/demo/accessibility.md', + '/compiled_docs/switch/demo/basic.en-us.md', + '/compiled_docs/switch/demo/basic.md', + '/compiled_docs/switch/demo/control.en-us.md', + '/compiled_docs/switch/demo/control.md', + '/compiled_docs/switch/demo/disabled.en-us.md', + '/compiled_docs/switch/demo/disabled.md', + ], + + readme: [ + '/compiled_docs/switch/index.en-us.md', + '/compiled_docs/switch/index.md', + ], + }, + 'Tab': { + demos: [ + '/compiled_docs/tab/demo/basic.en-us.md', + '/compiled_docs/tab/demo/basic.md', + '/compiled_docs/tab/demo/closable.en-us.md', + '/compiled_docs/tab/demo/closable.md', + '/compiled_docs/tab/demo/custom-style.en-us.md', + '/compiled_docs/tab/demo/custom-style.md', + '/compiled_docs/tab/demo/custom-tab.en-us.md', + '/compiled_docs/tab/demo/custom-tab.md', + '/compiled_docs/tab/demo/disabled.en-us.md', + '/compiled_docs/tab/demo/disabled.md', + '/compiled_docs/tab/demo/editable-tab.en-us.md', + '/compiled_docs/tab/demo/editable-tab.md', + '/compiled_docs/tab/demo/excess-mode.en-us.md', + '/compiled_docs/tab/demo/excess-mode.md', + '/compiled_docs/tab/demo/extra.en-us.md', + '/compiled_docs/tab/demo/extra.md', + '/compiled_docs/tab/demo/lazy-load.en-us.md', + '/compiled_docs/tab/demo/lazy-load.md', + '/compiled_docs/tab/demo/nested.en-us.md', + '/compiled_docs/tab/demo/nested.md', + '/compiled_docs/tab/demo/position.en-us.md', + '/compiled_docs/tab/demo/position.md', + '/compiled_docs/tab/demo/shape.en-us.md', + '/compiled_docs/tab/demo/shape.md', + '/compiled_docs/tab/demo/size.en-us.md', + '/compiled_docs/tab/demo/size.md', + '/compiled_docs/tab/demo/tab-in-grid.en-us.md', + '/compiled_docs/tab/demo/tab-in-grid.md', + '/compiled_docs/tab/demo/trigger-type.en-us.md', + '/compiled_docs/tab/demo/trigger-type.md', + ], + + readme: [ + '/compiled_docs/tab/index.en-us.md', + '/compiled_docs/tab/index.md', + ], + }, + 'Table': { + demos: [ + '/compiled_docs/table/demo/accessibility.en-us.md', + '/compiled_docs/table/demo/accessibility.md', + '/compiled_docs/table/demo/advanced.en-us.md', + '/compiled_docs/table/demo/advanced.md', + '/compiled_docs/table/demo/basic.en-us.md', + '/compiled_docs/table/demo/basic.md', + '/compiled_docs/table/demo/clear-selection.en-us.md', + '/compiled_docs/table/demo/clear-selection.md', + '/compiled_docs/table/demo/colspan.en-us.md', + '/compiled_docs/table/demo/colspan.md', + '/compiled_docs/table/demo/column.en-us.md', + '/compiled_docs/table/demo/column.md', + '/compiled_docs/table/demo/crud.en-us.md', + '/compiled_docs/table/demo/crud.md', + '/compiled_docs/table/demo/custom-loading.en-us.md', + '/compiled_docs/table/demo/custom-loading.md', + '/compiled_docs/table/demo/expanded-complex.en-us.md', + '/compiled_docs/table/demo/expanded-complex.md', + '/compiled_docs/table/demo/expanded.en-us.md', + '/compiled_docs/table/demo/expanded.md', + '/compiled_docs/table/demo/filter&sort.en-us.md', + '/compiled_docs/table/demo/filter&sort.md', + '/compiled_docs/table/demo/fixed-header.en-us.md', + '/compiled_docs/table/demo/fixed-header.md', + '/compiled_docs/table/demo/get-row-props.en-us.md', + '/compiled_docs/table/demo/get-row-props.md', + '/compiled_docs/table/demo/list.en-us.md', + '/compiled_docs/table/demo/list.md', + '/compiled_docs/table/demo/lock-column.en-us.md', + '/compiled_docs/table/demo/lock-column.md', + '/compiled_docs/table/demo/mix.en-us.md', + '/compiled_docs/table/demo/mix.md', + '/compiled_docs/table/demo/multiple-header.en-us.md', + '/compiled_docs/table/demo/multiple-header.md', + '/compiled_docs/table/demo/pagination.en-us.md', + '/compiled_docs/table/demo/pagination.md', + '/compiled_docs/table/demo/resize.en-us.md', + '/compiled_docs/table/demo/resize.md', + '/compiled_docs/table/demo/row-selection-config.en-us.md', + '/compiled_docs/table/demo/row-selection-config.md', + '/compiled_docs/table/demo/selection.en-us.md', + '/compiled_docs/table/demo/selection.md', + '/compiled_docs/table/demo/style.en-us.md', + '/compiled_docs/table/demo/style.md', + '/compiled_docs/table/demo/virtual.en-us.md', + '/compiled_docs/table/demo/virtual.md', + ], + + readme: [ + '/compiled_docs/table/index.en-us.md', + '/compiled_docs/table/index.md', + ], + }, + 'Tag': { + demos: [ + '/compiled_docs/tag/demo/accessibility.en-us.md', + '/compiled_docs/tag/demo/accessibility.md', + '/compiled_docs/tag/demo/basic.en-us.md', + '/compiled_docs/tag/demo/basic.md', + '/compiled_docs/tag/demo/closable.en-us.md', + '/compiled_docs/tag/demo/closable.md', + '/compiled_docs/tag/demo/selectable.en-us.md', + '/compiled_docs/tag/demo/selectable.md', + ], + + readme: [ + '/compiled_docs/tag/index.en-us.md', + '/compiled_docs/tag/index.md', + ], + }, + 'TimePicker': { + demos: [ + '/compiled_docs/time-picker/demo/basic.en-us.md', + '/compiled_docs/time-picker/demo/basic.md', + '/compiled_docs/time-picker/demo/default-value.en-us.md', + '/compiled_docs/time-picker/demo/default-value.md', + '/compiled_docs/time-picker/demo/disabled.en-us.md', + '/compiled_docs/time-picker/demo/disabled.md', + '/compiled_docs/time-picker/demo/field.en-us.md', + '/compiled_docs/time-picker/demo/field.md', + '/compiled_docs/time-picker/demo/format.en-us.md', + '/compiled_docs/time-picker/demo/format.md', + '/compiled_docs/time-picker/demo/size.en-us.md', + '/compiled_docs/time-picker/demo/size.md', + '/compiled_docs/time-picker/demo/step.en-us.md', + '/compiled_docs/time-picker/demo/step.md', + '/compiled_docs/time-picker/demo/value.en-us.md', + '/compiled_docs/time-picker/demo/value.md', + ], + + readme: [ + '/compiled_docs/time-picker/index.en-us.md', + '/compiled_docs/time-picker/index.md', + ], + }, + 'Timeline': { + demos: [ + '/compiled_docs/timeline/demo/basic.en-us.md', + '/compiled_docs/timeline/demo/basic.md', + '/compiled_docs/timeline/demo/content.en-us.md', + '/compiled_docs/timeline/demo/content.md', + '/compiled_docs/timeline/demo/custom.en-us.md', + '/compiled_docs/timeline/demo/custom.md', + '/compiled_docs/timeline/demo/fold.en-us.md', + '/compiled_docs/timeline/demo/fold.md', + '/compiled_docs/timeline/demo/state.en-us.md', + '/compiled_docs/timeline/demo/state.md', + '/compiled_docs/timeline/demo/timeLeft.en-us.md', + '/compiled_docs/timeline/demo/timeLeft.md', + ], + + readme: [ + '/compiled_docs/timeline/index.en-us.md', + '/compiled_docs/timeline/index.md', + ], + }, + 'Transfer': { + demos: [ + '/compiled_docs/transfer/demo/accessibility.en-us.md', + '/compiled_docs/transfer/demo/accessibility.md', + '/compiled_docs/transfer/demo/basic.en-us.md', + '/compiled_docs/transfer/demo/basic.md', + '/compiled_docs/transfer/demo/control.en-us.md', + '/compiled_docs/transfer/demo/control.md', + '/compiled_docs/transfer/demo/custom.en-us.md', + '/compiled_docs/transfer/demo/custom.md', + '/compiled_docs/transfer/demo/search.en-us.md', + '/compiled_docs/transfer/demo/search.md', + '/compiled_docs/transfer/demo/simple.en-us.md', + '/compiled_docs/transfer/demo/simple.md', + '/compiled_docs/transfer/demo/sortable.en-us.md', + '/compiled_docs/transfer/demo/sortable.md', + ], + + readme: [ + '/compiled_docs/transfer/index.en-us.md', + '/compiled_docs/transfer/index.md', + ], + }, + 'Tree': { + demos: [ + '/compiled_docs/tree/demo/basic.en-us.md', + '/compiled_docs/tree/demo/basic.md', + '/compiled_docs/tree/demo/control-check.en-us.md', + '/compiled_docs/tree/demo/control-check.md', + '/compiled_docs/tree/demo/control-select.en-us.md', + '/compiled_docs/tree/demo/control-select.md', + '/compiled_docs/tree/demo/data.en-us.md', + '/compiled_docs/tree/demo/data.md', + '/compiled_docs/tree/demo/draggable.en-us.md', + '/compiled_docs/tree/demo/draggable.md', + '/compiled_docs/tree/demo/dynamic.en-us.md', + '/compiled_docs/tree/demo/dynamic.md', + '/compiled_docs/tree/demo/line.en-us.md', + '/compiled_docs/tree/demo/line.md', + '/compiled_docs/tree/demo/node-block.en-us.md', + '/compiled_docs/tree/demo/node-block.md', + '/compiled_docs/tree/demo/search-tree.en-us.md', + '/compiled_docs/tree/demo/search-tree.md', + ], + + readme: [ + '/compiled_docs/tree/index.en-us.md', + '/compiled_docs/tree/index.md', + ], + }, + 'TreeSelect': { + demos: [ + '/compiled_docs/tree-select/demo/accessibility.en-us.md', + '/compiled_docs/tree-select/demo/accessibility.md', + '/compiled_docs/tree-select/demo/basic.en-us.md', + '/compiled_docs/tree-select/demo/basic.md', + '/compiled_docs/tree-select/demo/check.en-us.md', + '/compiled_docs/tree-select/demo/check.md', + '/compiled_docs/tree-select/demo/control.en-us.md', + '/compiled_docs/tree-select/demo/control.md', + '/compiled_docs/tree-select/demo/data.en-us.md', + '/compiled_docs/tree-select/demo/data.md', + '/compiled_docs/tree-select/demo/search.en-us.md', + '/compiled_docs/tree-select/demo/search.md', + ], + + readme: [ + '/compiled_docs/tree-select/index.en-us.md', + '/compiled_docs/tree-select/index.md', + ], + }, + 'Upload': { + demos: [ + '/compiled_docs/upload/demo/accessibility.en-us.md', + '/compiled_docs/upload/demo/accessibility.md', + '/compiled_docs/upload/demo/base.en-us.md', + '/compiled_docs/upload/demo/base.md', + '/compiled_docs/upload/demo/beforeupload.en-us.md', + '/compiled_docs/upload/demo/beforeupload.md', + '/compiled_docs/upload/demo/card.en-us.md', + '/compiled_docs/upload/demo/card.md', + '/compiled_docs/upload/demo/crop.en-us.md', + '/compiled_docs/upload/demo/crop.md', + '/compiled_docs/upload/demo/data.en-us.md', + '/compiled_docs/upload/demo/data.md', + '/compiled_docs/upload/demo/dragger.en-us.md', + '/compiled_docs/upload/demo/dragger.md', + '/compiled_docs/upload/demo/error.en-us.md', + '/compiled_docs/upload/demo/error.md', + '/compiled_docs/upload/demo/extra.en-us.md', + '/compiled_docs/upload/demo/extra.md', + '/compiled_docs/upload/demo/image.en-us.md', + '/compiled_docs/upload/demo/image.md', + '/compiled_docs/upload/demo/limit.en-us.md', + '/compiled_docs/upload/demo/limit.md', + '/compiled_docs/upload/demo/maxsize.en-us.md', + '/compiled_docs/upload/demo/maxsize.md', + '/compiled_docs/upload/demo/paste.en-us.md', + '/compiled_docs/upload/demo/paste.md', + '/compiled_docs/upload/demo/submit.en-us.md', + '/compiled_docs/upload/demo/submit.md', + '/compiled_docs/upload/demo/text.en-us.md', + '/compiled_docs/upload/demo/text.md', + '/compiled_docs/upload/demo/validation.en-us.md', + '/compiled_docs/upload/demo/validation.md', + '/compiled_docs/upload/demo/with-form.en-us.md', + '/compiled_docs/upload/demo/with-form.md', + ], + + readme: [ + '/compiled_docs/upload/index.en-us.md', + '/compiled_docs/upload/index.md', + ], + }, + 'VirtualList': { + demos: [ + '/compiled_docs/virtual-list/demo/basic.en-us.md', + '/compiled_docs/virtual-list/demo/basic.md', + '/compiled_docs/virtual-list/demo/initial-index.en-us.md', + '/compiled_docs/virtual-list/demo/initial-index.md', + '/compiled_docs/virtual-list/demo/item-size-getter.en-us.md', + '/compiled_docs/virtual-list/demo/item-size-getter.md', + ], + + readme: [ + '/compiled_docs/virtual-list/index.en-us.md', + '/compiled_docs/virtual-list/index.md', + ], + }, +}; diff --git a/compiled_docs/menu-button/demo/basic.en-us.md b/compiled_docs/menu-button/demo/basic.en-us.md new file mode 100644 index 0000000000..5dec1d4b78 --- /dev/null +++ b/compiled_docs/menu-button/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

Use MenuButton as Button.

\n","order":"0"},"codes":{"jsx":"import { MenuButton } from '@alifd/next';\n\nconst { Item } = MenuButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => {item});\n\nReactDOM.render(
\n {menu}  \n {menu}  \n {menu}

\n {menu}  \n {menu}  \n {menu}\n
, mountNode);\n"},"body":"\n````jsx\nimport { MenuButton } from '@alifd/next';\n\nconst { Item } = MenuButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => {item});\n\nReactDOM.render(
\n {menu}  \n {menu}  \n {menu}

\n {menu}  \n {menu}  \n {menu}\n
, mountNode);\n````","html":"
import { MenuButton } from '@alifd/next';\n\nconst { Item } = MenuButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => <Item key={item}>{item}</Item>);\n\nReactDOM.render(<div>\n    <MenuButton label=\"Document Edit\">{menu}</MenuButton>&nbsp;&nbsp;\n    <MenuButton type=\"primary\" label=\"Document Edit\">{menu}</MenuButton>&nbsp;&nbsp;\n    <MenuButton type=\"secondary\" label=\"Document Edit\">{menu}</MenuButton><br /><br />\n    <MenuButton text label=\"Document Edit\">{menu}</MenuButton>&nbsp;&nbsp;\n    <MenuButton text type=\"primary\" label=\"Document Edit\">{menu}</MenuButton>&nbsp;&nbsp;\n    <MenuButton text type=\"secondary\" label=\"Document Edit\">{menu}</MenuButton>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/menu-button/demo/basic.md b/compiled_docs/menu-button/demo/basic.md new file mode 100644 index 0000000000..ccfb9d3a33 --- /dev/null +++ b/compiled_docs/menu-button/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

最简单的用法。支持 Button 的 shape, type, size, component, ghost 等属性透传。

\n","order":"0"},"codes":{"jsx":"import { MenuButton } from '@alifd/next';\n\nconst { Item } = MenuButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => {item});\n\nReactDOM.render(
\n {menu}  \n {menu}  \n {menu}

\n {menu}  \n {menu}  \n {menu}\n
, mountNode);\n"},"body":"\n\n````jsx\nimport { MenuButton } from '@alifd/next';\n\nconst { Item } = MenuButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => {item});\n\nReactDOM.render(
\n {menu}  \n {menu}  \n {menu}

\n {menu}  \n {menu}  \n {menu}\n
, mountNode);\n````","html":"
import { MenuButton } from '@alifd/next';\n\nconst { Item } = MenuButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => <Item key={item}>{item}</Item>);\n\nReactDOM.render(<div>\n    <MenuButton label=\"Document Edit\">{menu}</MenuButton>&nbsp;&nbsp;\n    <MenuButton type=\"primary\" label=\"Document Edit\">{menu}</MenuButton>&nbsp;&nbsp;\n    <MenuButton type=\"secondary\" label=\"Document Edit\">{menu}</MenuButton><br /><br />\n    <MenuButton text label=\"Document Edit\">{menu}</MenuButton>&nbsp;&nbsp;\n    <MenuButton text type=\"primary\" label=\"Document Edit\">{menu}</MenuButton>&nbsp;&nbsp;\n    <MenuButton text type=\"secondary\" label=\"Document Edit\">{menu}</MenuButton>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/menu-button/demo/menu.en-us.md b/compiled_docs/menu-button/demo/menu.en-us.md new file mode 100644 index 0000000000..415e8da2d1 --- /dev/null +++ b/compiled_docs/menu-button/demo/menu.en-us.md @@ -0,0 +1 @@ +{"title":"Menu","meta":{"title":"Menu","description":"\n

More complex case with custom menu.

\n","order":"2"},"codes":{"jsx":"import { MenuButton } from '@alifd/next';\n\nconst { Item, Group, Divider } = MenuButton;\n\nfunction selectItem(id) {\n console.log(id);\n}\n\nReactDOM.render(\n Undo\n Redo\n \n \n Cut\n Copy\n Paste\n \n, mountNode);\n"},"body":"\n````jsx\nimport { MenuButton } from '@alifd/next';\n\nconst { Item, Group, Divider } = MenuButton;\n\nfunction selectItem(id) {\n console.log(id);\n}\n\nReactDOM.render(\n Undo\n Redo\n \n \n Cut\n Copy\n Paste\n \n, mountNode);\n````","html":"
import { MenuButton } from '@alifd/next';\n\nconst { Item, Group, Divider } = MenuButton;\n\nfunction selectItem(id) {\n    console.log(id);\n}\n\nReactDOM.render(<MenuButton type=\"primary\" label=\"Document Edit\" onItemClick={selectItem}>\n    <Item key=\"undo\">Undo</Item>\n    <Item key=\"redo\">Redo</Item>\n    <Divider />\n    <Group>\n        <Item key=\"cut\">Cut</Item>\n        <Item key=\"copy\">Copy</Item>\n        <Item key=\"paste\">Paste</Item>\n    </Group>\n</MenuButton>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/menu-button/demo/menu.md b/compiled_docs/menu-button/demo/menu.md new file mode 100644 index 0000000000..37bdfa36b6 --- /dev/null +++ b/compiled_docs/menu-button/demo/menu.md @@ -0,0 +1 @@ +{"title":"菜单组","meta":{"title":"菜单组","description":"\n

支持菜单组和菜单分割线，使用方法同 Menu.Group, Menu.Item, Menu.Divider。

\n","order":"2"},"codes":{"jsx":"import { MenuButton } from '@alifd/next';\n\nconst { Item, Group, Divider } = MenuButton;\n\nfunction selectItem(id) {\n console.log(id);\n}\n\nReactDOM.render(\n Undo\n Redo\n \n \n Cut\n Copy\n Paste\n \n, mountNode);\n"},"body":"\n\n````jsx\nimport { MenuButton } from '@alifd/next';\n\nconst { Item, Group, Divider } = MenuButton;\n\nfunction selectItem(id) {\n console.log(id);\n}\n\nReactDOM.render(\n Undo\n Redo\n \n \n Cut\n Copy\n Paste\n \n, mountNode);\n````","html":"
import { MenuButton } from '@alifd/next';\n\nconst { Item, Group, Divider } = MenuButton;\n\nfunction selectItem(id) {\n    console.log(id);\n}\n\nReactDOM.render(<MenuButton type=\"primary\" label=\"Document Edit\" onItemClick={selectItem}>\n    <Item key=\"undo\">Undo</Item>\n    <Item key=\"redo\">Redo</Item>\n    <Divider />\n    <Group>\n        <Item key=\"cut\">Cut</Item>\n        <Item key=\"copy\">Copy</Item>\n        <Item key=\"paste\">Paste</Item>\n    </Group>\n</MenuButton>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/menu-button/demo/select.en-us.md b/compiled_docs/menu-button/demo/select.en-us.md new file mode 100644 index 0000000000..38b6dfe7ee --- /dev/null +++ b/compiled_docs/menu-button/demo/select.en-us.md @@ -0,0 +1 @@ +{"title":"selectMode","meta":{"title":"selectMode","description":"\n

Change select mode of menu by selectMode.

\n","order":"3"},"codes":{"jsx":"import { MenuButton } from '@alifd/next';\n\nconst { Item } = MenuButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => {item});\n\nReactDOM.render(
\n console.log(keys)}>{menu}\n
, mountNode);\n"},"body":"\n````jsx\nimport { MenuButton } from '@alifd/next';\n\nconst { Item } = MenuButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => {item});\n\nReactDOM.render(
\n console.log(keys)}>{menu}\n
, mountNode);\n````","html":"
import { MenuButton } from '@alifd/next';\n\nconst { Item } = MenuButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => <Item key={item}>{item}</Item>);\n\nReactDOM.render(<div>\n    <MenuButton label=\"Document Edit\" selectMode=\"single\" onSelect={keys => console.log(keys)}>{menu}</MenuButton>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/menu-button/demo/select.md b/compiled_docs/menu-button/demo/select.md new file mode 100644 index 0000000000..b49d6af250 --- /dev/null +++ b/compiled_docs/menu-button/demo/select.md @@ -0,0 +1 @@ +{"title":"菜单选择模式","meta":{"title":"菜单选择模式","description":"\n

通过 selectMode 控制菜单的选择模式。

\n","order":"3"},"codes":{"jsx":"import { MenuButton } from '@alifd/next';\n\nconst { Item } = MenuButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => {item});\n\nReactDOM.render(
\n console.log(keys)}>{menu}\n
, mountNode);\n"},"body":"\n\n````jsx\nimport { MenuButton } from '@alifd/next';\n\nconst { Item } = MenuButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => {item});\n\nReactDOM.render(
\n console.log(keys)}>{menu}\n
, mountNode);\n````","html":"
import { MenuButton } from '@alifd/next';\n\nconst { Item } = MenuButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => <Item key={item}>{item}</Item>);\n\nReactDOM.render(<div>\n    <MenuButton label=\"Document Edit\" selectMode=\"single\" onSelect={keys => console.log(keys)}>{menu}</MenuButton>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/menu-button/demo/size.en-us.md b/compiled_docs/menu-button/demo/size.en-us.md new file mode 100644 index 0000000000..d11c5f9ef6 --- /dev/null +++ b/compiled_docs/menu-button/demo/size.en-us.md @@ -0,0 +1 @@ +{"title":"Size","meta":{"title":"Size","description":"\n

Change component size by size attribute.

\n","order":"1"},"codes":{"jsx":"import { MenuButton } from '@alifd/next';\n\nconst { Item } = MenuButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => {item});\n\nReactDOM.render(
\n {menu}    \n {menu}    \n {menu}\n
, mountNode);\n"},"body":"\n````jsx\nimport { MenuButton } from '@alifd/next';\n\nconst { Item } = MenuButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => {item});\n\nReactDOM.render(
\n {menu}    \n {menu}    \n {menu}\n
, mountNode);\n````","html":"
import { MenuButton } from '@alifd/next';\n\nconst { Item } = MenuButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => <Item key={item}>{item}</Item>);\n\nReactDOM.render(<div>\n    <MenuButton label=\"Edit Document\" size=\"small\">{menu}</MenuButton> &nbsp; &nbsp;\n    <MenuButton label=\"Edit Document\" size=\"medium\">{menu}</MenuButton> &nbsp; &nbsp;\n    <MenuButton label=\"Edit Document\" size=\"large\">{menu}</MenuButton>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/menu-button/demo/size.md b/compiled_docs/menu-button/demo/size.md new file mode 100644 index 0000000000..972223bacc --- /dev/null +++ b/compiled_docs/menu-button/demo/size.md @@ -0,0 +1 @@ +{"title":"尺寸","meta":{"title":"尺寸","description":"\n

可以通过 size 属性改变按钮大小。

\n","order":"1"},"codes":{"jsx":"import { MenuButton } from '@alifd/next';\n\nconst { Item } = MenuButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => {item});\n\nReactDOM.render(
\n {menu}    \n {menu}    \n {menu}\n
, mountNode);\n"},"body":"\n\n````jsx\nimport { MenuButton } from '@alifd/next';\n\nconst { Item } = MenuButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => {item});\n\nReactDOM.render(
\n {menu}    \n {menu}    \n {menu}\n
, mountNode);\n````","html":"
import { MenuButton } from '@alifd/next';\n\nconst { Item } = MenuButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => <Item key={item}>{item}</Item>);\n\nReactDOM.render(<div>\n    <MenuButton label=\"Edit Document\" size=\"small\">{menu}</MenuButton> &nbsp; &nbsp;\n    <MenuButton label=\"Edit Document\" size=\"medium\">{menu}</MenuButton> &nbsp; &nbsp;\n    <MenuButton label=\"Edit Document\" size=\"large\">{menu}</MenuButton>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/menu-button/index.en-us.md b/compiled_docs/menu-button/index.en-us.md new file mode 100644 index 0000000000..f8f13129f9 --- /dev/null +++ b/compiled_docs/menu-button/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

User Guide#

MenuButton is a button which, when clicked or pressed, will show a context menu.

\n

API#

","api":"

MenuButton#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
labelThe text in buttonReactNode-
autoWidthIf popup width equals to button widthBooleantrue
popupTriggerTypeTrigger type of popup

option:
'click', 'hover'		Enum'click'
popupContainerContainer of popup

signature:
Function() => void		Function-
visibleVisible state of popupBoolean-
defaultVisibleDefault visible state of popupBoolean-
onVisibleChangeCallback when visible state changes

signature:
Function() => void		Functionfunc.noop
popupStyleCustom style of popupObject-
popupClassNameCustom className of popupString-
popupPropsProps of popupObject-
defaultSelectedKeysDefault selected items, as MenuArray[]
selectedKeysSelected items, as MenuArray-
selectModeSelect mode of menu, see MenuString-
onItemClickCallback when click the menu item, see Menu

signature:
Function() => void		Functionfunc.noop
onSelectCallback when select the menu, see Menu

signature:
Function() => void		Functionfunc.noop
menuPropsProps of menuObject{}
\n"} \ No newline at end of file diff --git a/compiled_docs/menu-button/index.md b/compiled_docs/menu-button/index.md new file mode 100644 index 0000000000..d464a4483b --- /dev/null +++ b/compiled_docs/menu-button/index.md @@ -0,0 +1 @@ +{"meta":"

使用指南#

    \n
  1. 通过触发按钮打开弹层菜单。支持透传所有的 Button 属性。
    2. \n
  2. 子组件 Item, Group, Divider 即 Menu 中对应的子组件，请参考 Menu 文档。
    3. \n
\n

API#

","api":"

MenuButton#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
label按钮上的文本内容ReactNode-
autoWidth弹层是否与按钮宽度相同Booleantrue
popupTriggerType弹层触发方式

可选值:
'click', 'hover'		Enum'click'
popupContainer弹层容器

签名:
Function() => void		Function-
visible弹层展开状态Boolean-
defaultVisible弹层默认是否展开Boolean-
onVisibleChange弹层在显示和隐藏触发的事件

签名:
Function() => void		Functionfunc.noop
popupStyle弹层自定义样式Object-
popupClassName弹层自定义样式类String-
popupProps弹层属性透传Object-
defaultSelectedKeys默认激活的菜单项（用法同 Menu 非受控）Array[]
selectedKeys激活的菜单项（用法同 Menu 受控）Array-
selectMode菜单的选择模式，同 MenuString-
onItemClick点击菜单项后的回调，同 Menu

签名:
Function() => void		Functionfunc.noop
onSelect选择菜单后的回调，同 Menu

签名:
Function() => void		Functionfunc.noop
menuProps菜单属性透传Object{}
\n"} \ No newline at end of file diff --git a/compiled_docs/menu/demo/accordian.en-us.md b/compiled_docs/menu/demo/accordian.en-us.md new file mode 100644 index 0000000000..e5432c2d1f --- /dev/null +++ b/compiled_docs/menu/demo/accordian.en-us.md @@ -0,0 +1 @@ +{"title":"Expand mode of inline menu","meta":{"title":"Expand mode of inline menu","description":"\n

You can make the inline menu expand only one submenu at the same time by setting openMode to 'single'. By default, you can expand more than one at a time.

\n","order":"1"},"codes":{"jsx":"import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item } = Menu;\n\nReactDOM.render(\n \n \n Sub option 1\n Sub option 2\n Sub option 3\n \n \n Sub option 1\n Sub option 2\n Sub option 3\n \n \n Sub option 1\n Sub option 2\n Sub option 3\n \n \n Sub option 1\n Sub option 2\n Sub option 3\n \n \n , mountNode);\n","css":".my-menu {\n width: 200px;\n}\n"},"body":"\n````jsx\nimport { Menu } from '@alifd/next';\n\nconst { SubMenu, Item } = Menu;\n\nReactDOM.render(\n \n \n Sub option 1\n Sub option 2\n Sub option 3\n \n \n Sub option 1\n Sub option 2\n Sub option 3\n \n \n Sub option 1\n Sub option 2\n Sub option 3\n \n \n Sub option 1\n Sub option 2\n Sub option 3\n \n \n , mountNode);\n````\n\n````css\n.my-menu {\n width: 200px;\n}\n````","html":"
import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item } = Menu;\n\nReactDOM.render(\n    <Menu defaultOpenKeys=\"1\" className=\"my-menu\" openMode=\"single\">\n        <SubMenu key=\"0\" label=\"Sub menu 1\">\n            <Item key=\"0-0\">Sub option 1</Item>\n            <Item key=\"0-1\">Sub option 2</Item>\n            <Item key=\"0-2\">Sub option 3</Item>\n        </SubMenu>\n        <SubMenu key=\"1\" label=\"Sub menu 2\">\n            <Item key=\"1-0\">Sub option 1</Item>\n            <Item key=\"1-1\">Sub option 2</Item>\n            <Item key=\"1-2\">Sub option 3</Item>\n        </SubMenu>\n        <SubMenu key=\"2\" label=\"Sub menu 3\">\n            <Item key=\"2-0\">Sub option 1</Item>\n            <Item key=\"2-1\">Sub option 2</Item>\n            <Item key=\"2-2\">Sub option 3</Item>\n        </SubMenu>\n        <SubMenu key=\"3\" label=\"Sub menu 4\">\n            <Item key=\"3-0\">Sub option 1</Item>\n            <Item key=\"3-1\">Sub option 2</Item>\n            <Item key=\"3-2\">Sub option 3</Item>\n        </SubMenu>\n    </Menu>\n    , mountNode);
.my-menu {\n    width: 200px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/menu/demo/accordian.md b/compiled_docs/menu/demo/accordian.md new file mode 100644 index 0000000000..ce719ae404 --- /dev/null +++ b/compiled_docs/menu/demo/accordian.md @@ -0,0 +1 @@ +{"title":"内连菜单展开模式","meta":{"title":"内连菜单展开模式","description":"\n

通过设置 openMode 为 'single'，可以让菜单同时只能展开一个内连子菜单，默认为可以同时展开多个。

\n","order":"1"},"codes":{"jsx":"import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item } = Menu;\n\nReactDOM.render(\n \n \n Sub option 1\n Sub option 2\n Sub option 3\n \n \n Sub option 1\n Sub option 2\n Sub option 3\n \n \n Sub option 1\n Sub option 2\n Sub option 3\n \n \n Sub option 1\n Sub option 2\n Sub option 3\n \n \n , mountNode);\n","css":".my-menu {\n width: 200px;\n}\n"},"body":"\n\n````jsx\nimport { Menu } from '@alifd/next';\n\nconst { SubMenu, Item } = Menu;\n\nReactDOM.render(\n \n \n Sub option 1\n Sub option 2\n Sub option 3\n \n \n Sub option 1\n Sub option 2\n Sub option 3\n \n \n Sub option 1\n Sub option 2\n Sub option 3\n \n \n Sub option 1\n Sub option 2\n Sub option 3\n \n \n , mountNode);\n````\n\n````css\n.my-menu {\n width: 200px;\n}\n````","html":"
import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item } = Menu;\n\nReactDOM.render(\n    <Menu defaultOpenKeys=\"1\" className=\"my-menu\" openMode=\"single\">\n        <SubMenu key=\"0\" label=\"Sub menu 1\">\n            <Item key=\"0-0\">Sub option 1</Item>\n            <Item key=\"0-1\">Sub option 2</Item>\n            <Item key=\"0-2\">Sub option 3</Item>\n        </SubMenu>\n        <SubMenu key=\"1\" label=\"Sub menu 2\">\n            <Item key=\"1-0\">Sub option 1</Item>\n            <Item key=\"1-1\">Sub option 2</Item>\n            <Item key=\"1-2\">Sub option 3</Item>\n        </SubMenu>\n        <SubMenu key=\"2\" label=\"Sub menu 3\">\n            <Item key=\"2-0\">Sub option 1</Item>\n            <Item key=\"2-1\">Sub option 2</Item>\n            <Item key=\"2-2\">Sub option 3</Item>\n        </SubMenu>\n        <SubMenu key=\"3\" label=\"Sub menu 4\">\n            <Item key=\"3-0\">Sub option 1</Item>\n            <Item key=\"3-1\">Sub option 2</Item>\n            <Item key=\"3-2\">Sub option 3</Item>\n        </SubMenu>\n    </Menu>\n    , mountNode);
.my-menu {\n    width: 200px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/menu/demo/basic.en-us.md b/compiled_docs/menu/demo/basic.en-us.md new file mode 100644 index 0000000000..c24f422f52 --- /dev/null +++ b/compiled_docs/menu/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

Demo the basic usage.

\n","order":"0"},"codes":{"jsx":"import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Group, Divider } = Menu;\n\nReactDOM.render(\n \n Option 1\n Disabled option 2\n \n \n Group option 1\n Group option 2\n \n \n \n Sub option 1\n Sub option 2\n \n Disabled Option Link 3\n \n \n Option Link 4\n \n \n Option 3\n \n Disabled Option Link\n \n \n Option Link\n \n \n , mountNode);\n","css":".my-menu {\n width: 200px;\n}\n"},"body":"\n````jsx\nimport { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Group, Divider } = Menu;\n\nReactDOM.render(\n \n Option 1\n Disabled option 2\n \n \n Group option 1\n Group option 2\n \n \n \n Sub option 1\n Sub option 2\n \n Disabled Option Link 3\n \n \n Option Link 4\n \n \n Option 3\n \n Disabled Option Link\n \n \n Option Link\n \n \n , mountNode);\n````\n\n````css\n.my-menu {\n width: 200px;\n}\n````","html":"
import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Group, Divider } = Menu;\n\nReactDOM.render(\n    <Menu className=\"my-menu\" defaultOpenKeys=\"sub-menu\">\n        <Item key=\"1\">Option 1</Item>\n        <Item disabled key=\"2\">Disabled option 2</Item>\n        <Divider key=\"divider\" />\n        <Group label=\"Group\">\n            <Item key=\"group-1\">Group option 1</Item>\n            <Item key=\"group-2\">Group option 2</Item>\n        </Group>\n        <Divider />\n        <SubMenu key=\"sub-menu\" label=\"Sub menu\">\n            <Item key=\"sub-1\">Sub option 1</Item>\n            <Item key=\"sub-2\">Sub option 2</Item>\n            <Item disabled key=\"sub-3\">\n                <a href=\"https://www.taobao.com/\" target=\"__blank\">Disabled Option Link 3</a>\n            </Item>\n            <Item key=\"sub-4\">\n                <a href=\"https://www.taobao.com/\" target=\"__blank\">Option Link 4</a>\n            </Item>\n        </SubMenu>\n        <Item key=\"3\" helper=\"CTRL+P\">Option 3</Item>\n        <Item disabled key=\"4\">\n            <a href=\"https://www.taobao.com/\" target=\"__blank\">Disabled Option Link</a>\n        </Item>\n        <Item key=\"5\">\n            <a href=\"https://www.taobao.com/\" target=\"__blank\">Option Link</a>\n        </Item>\n    </Menu>\n    , mountNode);
.my-menu {\n    width: 200px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/menu/demo/basic.md b/compiled_docs/menu/demo/basic.md new file mode 100644 index 0000000000..d6e1881c41 --- /dev/null +++ b/compiled_docs/menu/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

展示最基本的用法。

\n","order":"0"},"codes":{"jsx":"import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Group, Divider } = Menu;\n\nReactDOM.render(\n \n Option 1\n Disabled option 2\n \n \n Group option 1\n Group option 2\n \n \n \n Sub option 1\n Sub option 2\n \n Disabled Option Link 3\n \n \n Option Link 4\n \n \n Option 3\n \n Disabled Option Link\n \n \n Option Link\n \n \n , mountNode);\n","css":".my-menu {\n width: 200px;\n}\n"},"body":"\n\n````jsx\nimport { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Group, Divider } = Menu;\n\nReactDOM.render(\n \n Option 1\n Disabled option 2\n \n \n Group option 1\n Group option 2\n \n \n \n Sub option 1\n Sub option 2\n \n Disabled Option Link 3\n \n \n Option Link 4\n \n \n Option 3\n \n Disabled Option Link\n \n \n Option Link\n \n \n , mountNode);\n````\n\n````css\n.my-menu {\n width: 200px;\n}\n````","html":"
import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Group, Divider } = Menu;\n\nReactDOM.render(\n    <Menu className=\"my-menu\" defaultOpenKeys=\"sub-menu\">\n        <Item key=\"1\">Option 1</Item>\n        <Item disabled key=\"2\">Disabled option 2</Item>\n        <Divider key=\"divider\" />\n        <Group label=\"Group\">\n            <Item key=\"group-1\">Group option 1</Item>\n            <Item key=\"group-2\">Group option 2</Item>\n        </Group>\n        <Divider />\n        <SubMenu key=\"sub-menu\" label=\"Sub menu\">\n            <Item key=\"sub-1\">Sub option 1</Item>\n            <Item key=\"sub-2\">Sub option 2</Item>\n            <Item disabled key=\"sub-3\">\n                <a href=\"https://www.taobao.com/\" target=\"__blank\">Disabled Option Link 3</a>\n            </Item>\n            <Item key=\"sub-4\">\n                <a href=\"https://www.taobao.com/\" target=\"__blank\">Option Link 4</a>\n            </Item>\n        </SubMenu>\n        <Item key=\"3\" helper=\"CTRL+P\">Option 3</Item>\n        <Item disabled key=\"4\">\n            <a href=\"https://www.taobao.com/\" target=\"__blank\">Disabled Option Link</a>\n        </Item>\n        <Item key=\"5\">\n            <a href=\"https://www.taobao.com/\" target=\"__blank\">Option Link</a>\n        </Item>\n    </Menu>\n    , mountNode);
.my-menu {\n    width: 200px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/menu/demo/context.en-us.md b/compiled_docs/menu/demo/context.en-us.md new file mode 100644 index 0000000000..ba160640fd --- /dev/null +++ b/compiled_docs/menu/demo/context.en-us.md @@ -0,0 +1 @@ +{"title":"Create context menu","meta":{"title":"Create context menu","description":"\n

Demo how to create the custom context menu.

\n","order":"9"},"codes":{"jsx":"import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Divider } = Menu;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n selectedKeys: []\n };\n\n this.handleSelect = this.handleSelect.bind(this);\n }\n\n handleSelect(selectedKeys) {\n selectedKeys = selectedKeys.filter(key => {\n return ['sub-1', 'sub-2'].indexOf(key) > -1;\n });\n this.setState({\n selectedKeys\n });\n }\n\n createContextMenu = e => {\n e.preventDefault();\n\n const target = e.target;\n const { top, left } = target.getBoundingClientRect();\n\n Menu.create({\n target: e.target,\n offset: [e.clientX - left, e.clientY - top],\n className: 'context-menu',\n popupClassName: 'context-menu',\n onItemClick: console.log,\n selectedKeys: this.state.selectedKeys,\n selectMode: 'multiple',\n onSelect: this.handleSelect,\n children: [\n Option 1,\n Option 2,\n Option 3,\n ,\n \n Sub option 1\n Sub option 2\n ,\n Option 4,\n ,\n Option 5\n ]\n });\n };\n\n render() {\n return (\n
\n Right click here to see the context menu!\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".context-demo {\n width: 500px;\n height: 200px;\n line-height: 200px;\n text-align: center;\n background: #DDD;\n border: 1px solid black;\n}\n\n.context-menu {\n width: 120px;\n}\n"},"body":"\n````jsx\nimport { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Divider } = Menu;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n selectedKeys: []\n };\n\n this.handleSelect = this.handleSelect.bind(this);\n }\n\n handleSelect(selectedKeys) {\n selectedKeys = selectedKeys.filter(key => {\n return ['sub-1', 'sub-2'].indexOf(key) > -1;\n });\n this.setState({\n selectedKeys\n });\n }\n\n createContextMenu = e => {\n e.preventDefault();\n\n const target = e.target;\n const { top, left } = target.getBoundingClientRect();\n\n Menu.create({\n target: e.target,\n offset: [e.clientX - left, e.clientY - top],\n className: 'context-menu',\n popupClassName: 'context-menu',\n onItemClick: console.log,\n selectedKeys: this.state.selectedKeys,\n selectMode: 'multiple',\n onSelect: this.handleSelect,\n children: [\n Option 1,\n Option 2,\n Option 3,\n ,\n \n Sub option 1\n Sub option 2\n ,\n Option 4,\n ,\n Option 5\n ]\n });\n };\n\n render() {\n return (\n
\n Right click here to see the context menu!\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.context-demo {\n width: 500px;\n height: 200px;\n line-height: 200px;\n text-align: center;\n background: #DDD;\n border: 1px solid black;\n}\n\n.context-menu {\n width: 120px;\n}\n````","html":"
import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Divider } = Menu;\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            selectedKeys: []\n        };\n\n        this.handleSelect = this.handleSelect.bind(this);\n    }\n\n    handleSelect(selectedKeys) {\n        selectedKeys = selectedKeys.filter(key => {\n            return ['sub-1', 'sub-2'].indexOf(key) > -1;\n        });\n        this.setState({\n            selectedKeys\n        });\n    }\n\n    createContextMenu = e => {\n        e.preventDefault();\n\n        const target = e.target;\n        const { top, left } = target.getBoundingClientRect();\n\n        Menu.create({\n            target: e.target,\n            offset: [e.clientX - left, e.clientY - top],\n            className: 'context-menu',\n            popupClassName: 'context-menu',\n            onItemClick: console.log,\n            selectedKeys: this.state.selectedKeys,\n            selectMode: 'multiple',\n            onSelect: this.handleSelect,\n            children: [\n                <Item key=\"1\">Option 1</Item>,\n                <Item key=\"2\">Option 2</Item>,\n                <Item key=\"3\">Option 3</Item>,\n                <Divider key=\"divider-1\" />,\n                <SubMenu key=\"sub-menu\" label=\"Sub menu\">\n                    <Item key=\"sub-1\">Sub option 1</Item>\n                    <Item key=\"sub-2\">Sub option 2</Item>\n                </SubMenu>,\n                <Item key=\"4\">Option 4</Item>,\n                <Divider key=\"divider-2\" />,\n                <Item key=\"5\">Option 5</Item>\n            ]\n        });\n    };\n\n    render() {\n        return (\n            <div className=\"context-demo\" onContextMenu={this.createContextMenu}>\n                Right click here to see the context menu!\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.context-demo {\n    width: 500px;\n    height: 200px;\n    line-height: 200px;\n    text-align: center;\n    background: #DDD;\n    border: 1px solid black;\n}\n\n.context-menu {\n    width: 120px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/menu/demo/context.md b/compiled_docs/menu/demo/context.md new file mode 100644 index 0000000000..3f0af4bbe2 --- /dev/null +++ b/compiled_docs/menu/demo/context.md @@ -0,0 +1 @@ +{"title":"创建上下文菜单","meta":{"title":"创建上下文菜单","description":"\n

展示如何创建自定义的上下文菜单。

\n","order":"9"},"codes":{"jsx":"import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Divider } = Menu;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n selectedKeys: []\n };\n\n this.handleSelect = this.handleSelect.bind(this);\n }\n\n handleSelect(selectedKeys) {\n selectedKeys = selectedKeys.filter(key => {\n return ['sub-1', 'sub-2'].indexOf(key) > -1;\n });\n this.setState({\n selectedKeys\n });\n }\n\n createContextMenu = e => {\n e.preventDefault();\n\n const target = e.target;\n const { top, left } = target.getBoundingClientRect();\n\n Menu.create({\n target: e.target,\n offset: [e.clientX - left, e.clientY - top],\n className: 'context-menu',\n popupClassName: 'context-menu',\n onItemClick: console.log,\n selectedKeys: this.state.selectedKeys,\n selectMode: 'multiple',\n onSelect: this.handleSelect,\n children: [\n Option 1,\n Option 2,\n Option 3,\n ,\n \n Sub option 1\n Sub option 2\n ,\n Option 4,\n ,\n Option 5\n ]\n });\n };\n\n render() {\n return (\n
\n Right click here to see the context menu!\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".context-demo {\n width: 500px;\n height: 200px;\n line-height: 200px;\n text-align: center;\n background: #DDD;\n border: 1px solid black;\n}\n\n.context-menu {\n width: 120px;\n}\n"},"body":"\n\n````jsx\nimport { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Divider } = Menu;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n selectedKeys: []\n };\n\n this.handleSelect = this.handleSelect.bind(this);\n }\n\n handleSelect(selectedKeys) {\n selectedKeys = selectedKeys.filter(key => {\n return ['sub-1', 'sub-2'].indexOf(key) > -1;\n });\n this.setState({\n selectedKeys\n });\n }\n\n createContextMenu = e => {\n e.preventDefault();\n\n const target = e.target;\n const { top, left } = target.getBoundingClientRect();\n\n Menu.create({\n target: e.target,\n offset: [e.clientX - left, e.clientY - top],\n className: 'context-menu',\n popupClassName: 'context-menu',\n onItemClick: console.log,\n selectedKeys: this.state.selectedKeys,\n selectMode: 'multiple',\n onSelect: this.handleSelect,\n children: [\n Option 1,\n Option 2,\n Option 3,\n ,\n \n Sub option 1\n Sub option 2\n ,\n Option 4,\n ,\n Option 5\n ]\n });\n };\n\n render() {\n return (\n
\n Right click here to see the context menu!\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.context-demo {\n width: 500px;\n height: 200px;\n line-height: 200px;\n text-align: center;\n background: #DDD;\n border: 1px solid black;\n}\n\n.context-menu {\n width: 120px;\n}\n````","html":"
import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Divider } = Menu;\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            selectedKeys: []\n        };\n\n        this.handleSelect = this.handleSelect.bind(this);\n    }\n\n    handleSelect(selectedKeys) {\n        selectedKeys = selectedKeys.filter(key => {\n            return ['sub-1', 'sub-2'].indexOf(key) > -1;\n        });\n        this.setState({\n            selectedKeys\n        });\n    }\n\n    createContextMenu = e => {\n        e.preventDefault();\n\n        const target = e.target;\n        const { top, left } = target.getBoundingClientRect();\n\n        Menu.create({\n            target: e.target,\n            offset: [e.clientX - left, e.clientY - top],\n            className: 'context-menu',\n            popupClassName: 'context-menu',\n            onItemClick: console.log,\n            selectedKeys: this.state.selectedKeys,\n            selectMode: 'multiple',\n            onSelect: this.handleSelect,\n            children: [\n                <Item key=\"1\">Option 1</Item>,\n                <Item key=\"2\">Option 2</Item>,\n                <Item key=\"3\">Option 3</Item>,\n                <Divider key=\"divider-1\" />,\n                <SubMenu key=\"sub-menu\" label=\"Sub menu\">\n                    <Item key=\"sub-1\">Sub option 1</Item>\n                    <Item key=\"sub-2\">Sub option 2</Item>\n                </SubMenu>,\n                <Item key=\"4\">Option 4</Item>,\n                <Divider key=\"divider-2\" />,\n                <Item key=\"5\">Option 5</Item>\n            ]\n        });\n    };\n\n    render() {\n        return (\n            <div className=\"context-demo\" onContextMenu={this.createContextMenu}>\n                Right click here to see the context menu!\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.context-demo {\n    width: 500px;\n    height: 200px;\n    line-height: 200px;\n    text-align: center;\n    background: #DDD;\n    border: 1px solid black;\n}\n\n.context-menu {\n    width: 120px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/menu/demo/csutom-select.en-us.md b/compiled_docs/menu/demo/csutom-select.en-us.md new file mode 100644 index 0000000000..04c37d872e --- /dev/null +++ b/compiled_docs/menu/demo/csutom-select.en-us.md @@ -0,0 +1 @@ +{"title":"Customize menu item selection","meta":{"title":"Customize menu item selection","description":"\n

Demo how to customize menu item selection.

\n","order":"7"},"codes":{"jsx":"import { Menu } from '@alifd/next';\n\nconst { CheckboxItem, RadioItem, Divider } = Menu;\n\nconst sexs = ['male', 'female'];\nconst balls = ['football', 'basketball', 'volleyball'];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n sex: 'male',\n balls: []\n };\n\n this.handleSexCheck = this.handleSexCheck.bind(this);\n this.handleBallCheck = this.handleBallCheck.bind(this);\n }\n\n handleSexCheck(key) {\n this.setState({\n sex: key\n });\n }\n\n handleBallCheck(key, check) {\n let newKeys;\n const index = this.state.balls.indexOf(key);\n if (check && index === -1) {\n newKeys = this.state.balls.concat(key);\n } else if (!check && index > -1) {\n newKeys = [\n ...this.state.balls.slice(0, index),\n ...this.state.balls.slice(index + 1)\n ];\n }\n\n if (newKeys) {\n this.setState({\n balls: newKeys\n });\n }\n }\n\n render() {\n return (\n \n {sexs.map(sex => (\n \n {sex}\n \n ))}\n \n {balls.map(ball => (\n -1} onChange={this.handleBallCheck.bind(this, ball)}>\n {ball}\n \n ))}\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".my-menu {\n width: 200px;\n}\n"},"body":"\n````jsx\nimport { Menu } from '@alifd/next';\n\nconst { CheckboxItem, RadioItem, Divider } = Menu;\n\nconst sexs = ['male', 'female'];\nconst balls = ['football', 'basketball', 'volleyball'];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n sex: 'male',\n balls: []\n };\n\n this.handleSexCheck = this.handleSexCheck.bind(this);\n this.handleBallCheck = this.handleBallCheck.bind(this);\n }\n\n handleSexCheck(key) {\n this.setState({\n sex: key\n });\n }\n\n handleBallCheck(key, check) {\n let newKeys;\n const index = this.state.balls.indexOf(key);\n if (check && index === -1) {\n newKeys = this.state.balls.concat(key);\n } else if (!check && index > -1) {\n newKeys = [\n ...this.state.balls.slice(0, index),\n ...this.state.balls.slice(index + 1)\n ];\n }\n\n if (newKeys) {\n this.setState({\n balls: newKeys\n });\n }\n }\n\n render() {\n return (\n \n {sexs.map(sex => (\n \n {sex}\n \n ))}\n \n {balls.map(ball => (\n -1} onChange={this.handleBallCheck.bind(this, ball)}>\n {ball}\n \n ))}\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.my-menu {\n width: 200px;\n}\n````","html":"
import { Menu } from '@alifd/next';\n\nconst { CheckboxItem, RadioItem, Divider } = Menu;\n\nconst sexs = ['male', 'female'];\nconst balls = ['football', 'basketball', 'volleyball'];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            sex: 'male',\n            balls: []\n        };\n\n        this.handleSexCheck = this.handleSexCheck.bind(this);\n        this.handleBallCheck = this.handleBallCheck.bind(this);\n    }\n\n    handleSexCheck(key) {\n        this.setState({\n            sex: key\n        });\n    }\n\n    handleBallCheck(key, check) {\n        let newKeys;\n        const index = this.state.balls.indexOf(key);\n        if (check && index === -1) {\n            newKeys = this.state.balls.concat(key);\n        } else if (!check && index > -1) {\n            newKeys = [\n                ...this.state.balls.slice(0, index),\n                ...this.state.balls.slice(index + 1)\n            ];\n        }\n\n        if (newKeys) {\n            this.setState({\n                balls: newKeys\n            });\n        }\n    }\n\n    render() {\n        return (\n            <Menu className=\"my-menu\">\n                {sexs.map(sex => (\n                    <RadioItem key={sex} checked={this.state.sex === sex} onChange={this.handleSexCheck.bind(this, sex)}>\n                        {sex}\n                    </RadioItem>\n                ))}\n                <Divider key=\"divider\" />\n                {balls.map(ball => (\n                    <CheckboxItem key={ball} checked={this.state.balls.indexOf(ball) > -1} onChange={this.handleBallCheck.bind(this, ball)}>\n                        {ball}\n                    </CheckboxItem>\n                ))}\n            </Menu>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.my-menu {\n    width: 200px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/menu/demo/csutom-select.md b/compiled_docs/menu/demo/csutom-select.md new file mode 100644 index 0000000000..e5d387c346 --- /dev/null +++ b/compiled_docs/menu/demo/csutom-select.md @@ -0,0 +1 @@ +{"title":"自定义菜单项选择","meta":{"title":"自定义菜单项选择","description":"\n

展示自定义组合菜单项可选的用法。

\n","order":"7"},"codes":{"jsx":"import { Menu } from '@alifd/next';\n\nconst { CheckboxItem, RadioItem, Divider } = Menu;\n\nconst sexs = ['male', 'female'];\nconst balls = ['football', 'basketball', 'volleyball'];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n sex: 'male',\n balls: []\n };\n\n this.handleSexCheck = this.handleSexCheck.bind(this);\n this.handleBallCheck = this.handleBallCheck.bind(this);\n }\n\n handleSexCheck(key) {\n this.setState({\n sex: key\n });\n }\n\n handleBallCheck(key, check) {\n let newKeys;\n const index = this.state.balls.indexOf(key);\n if (check && index === -1) {\n newKeys = this.state.balls.concat(key);\n } else if (!check && index > -1) {\n newKeys = [\n ...this.state.balls.slice(0, index),\n ...this.state.balls.slice(index + 1)\n ];\n }\n\n if (newKeys) {\n this.setState({\n balls: newKeys\n });\n }\n }\n\n render() {\n return (\n \n {sexs.map(sex => (\n \n {sex}\n \n ))}\n \n {balls.map(ball => (\n -1} onChange={this.handleBallCheck.bind(this, ball)}>\n {ball}\n \n ))}\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".my-menu {\n width: 200px;\n}\n"},"body":"\n\n````jsx\nimport { Menu } from '@alifd/next';\n\nconst { CheckboxItem, RadioItem, Divider } = Menu;\n\nconst sexs = ['male', 'female'];\nconst balls = ['football', 'basketball', 'volleyball'];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n sex: 'male',\n balls: []\n };\n\n this.handleSexCheck = this.handleSexCheck.bind(this);\n this.handleBallCheck = this.handleBallCheck.bind(this);\n }\n\n handleSexCheck(key) {\n this.setState({\n sex: key\n });\n }\n\n handleBallCheck(key, check) {\n let newKeys;\n const index = this.state.balls.indexOf(key);\n if (check && index === -1) {\n newKeys = this.state.balls.concat(key);\n } else if (!check && index > -1) {\n newKeys = [\n ...this.state.balls.slice(0, index),\n ...this.state.balls.slice(index + 1)\n ];\n }\n\n if (newKeys) {\n this.setState({\n balls: newKeys\n });\n }\n }\n\n render() {\n return (\n \n {sexs.map(sex => (\n \n {sex}\n \n ))}\n \n {balls.map(ball => (\n -1} onChange={this.handleBallCheck.bind(this, ball)}>\n {ball}\n \n ))}\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.my-menu {\n width: 200px;\n}\n````","html":"
import { Menu } from '@alifd/next';\n\nconst { CheckboxItem, RadioItem, Divider } = Menu;\n\nconst sexs = ['male', 'female'];\nconst balls = ['football', 'basketball', 'volleyball'];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            sex: 'male',\n            balls: []\n        };\n\n        this.handleSexCheck = this.handleSexCheck.bind(this);\n        this.handleBallCheck = this.handleBallCheck.bind(this);\n    }\n\n    handleSexCheck(key) {\n        this.setState({\n            sex: key\n        });\n    }\n\n    handleBallCheck(key, check) {\n        let newKeys;\n        const index = this.state.balls.indexOf(key);\n        if (check && index === -1) {\n            newKeys = this.state.balls.concat(key);\n        } else if (!check && index > -1) {\n            newKeys = [\n                ...this.state.balls.slice(0, index),\n                ...this.state.balls.slice(index + 1)\n            ];\n        }\n\n        if (newKeys) {\n            this.setState({\n                balls: newKeys\n            });\n        }\n    }\n\n    render() {\n        return (\n            <Menu className=\"my-menu\">\n                {sexs.map(sex => (\n                    <RadioItem key={sex} checked={this.state.sex === sex} onChange={this.handleSexCheck.bind(this, sex)}>\n                        {sex}\n                    </RadioItem>\n                ))}\n                <Divider key=\"divider\" />\n                {balls.map(ball => (\n                    <CheckboxItem key={ball} checked={this.state.balls.indexOf(ball) > -1} onChange={this.handleBallCheck.bind(this, ball)}>\n                        {ball}\n                    </CheckboxItem>\n                ))}\n            </Menu>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.my-menu {\n    width: 200px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/menu/demo/custom-popup.en-us.md b/compiled_docs/menu/demo/custom-popup.en-us.md new file mode 100644 index 0000000000..b6ec623c20 --- /dev/null +++ b/compiled_docs/menu/demo/custom-popup.en-us.md @@ -0,0 +1 @@ +{"title":"Customize pop up content","meta":{"title":"Customize pop up content","description":"\n

Demo how to customize pop up content.

\n","order":"5"},"codes":{"jsx":"import { Menu } from '@alifd/next';\n\nconst { PopupItem } = Menu;\n\nclass Demo extends React.Component {\n render() {\n const popupProps = {\n target: () => ReactDOM.findDOMNode(this),\n offset: [-1, 0],\n animation: false\n };\n\n return (\n \n \n
Custom content 1
\n \n \n
Custom content 2
\n \n \n
Custom content 3
\n \n \n
Custom content 4
\n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".my-custom-menu {\n width: 200px;\n border: 1px solid #ccc;\n padding: 0;\n box-shadow: none;\n z-index: 1000;\n}\n\n.my-custom-content {\n width: 400px;\n height: 200px;\n background: #fff;\n border: 1px solid #ccc;\n line-height: 200px;\n text-align: center;\n font-size: 20px;\n}\n"},"body":"\n````jsx\nimport { Menu } from '@alifd/next';\n\nconst { PopupItem } = Menu;\n\nclass Demo extends React.Component {\n render() {\n const popupProps = {\n target: () => ReactDOM.findDOMNode(this),\n offset: [-1, 0],\n animation: false\n };\n\n return (\n \n \n
Custom content 1
\n \n \n
Custom content 2
\n \n \n
Custom content 3
\n \n \n
Custom content 4
\n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.my-custom-menu {\n width: 200px;\n border: 1px solid #ccc;\n padding: 0;\n box-shadow: none;\n z-index: 1000;\n}\n\n.my-custom-content {\n width: 400px;\n height: 200px;\n background: #fff;\n border: 1px solid #ccc;\n line-height: 200px;\n text-align: center;\n font-size: 20px;\n}\n````","html":"
import { Menu } from '@alifd/next';\n\nconst { PopupItem } = Menu;\n\nclass Demo extends React.Component {\n    render() {\n        const popupProps = {\n            target: () => ReactDOM.findDOMNode(this),\n            offset: [-1, 0],\n            animation: false\n        };\n\n        return (\n            <Menu className=\"my-custom-menu\" popupProps={popupProps}>\n                <PopupItem key=\"0\" label=\"Popup item 1\">\n                    <div className=\"my-custom-content\">Custom content 1</div>\n                </PopupItem>\n                <PopupItem key=\"1\" label=\"Popup item 2\">\n                    <div className=\"my-custom-content\">Custom content 2</div>\n                </PopupItem>\n                <PopupItem key=\"2\" label=\"Popup item 3\">\n                    <div className=\"my-custom-content\">Custom content 3</div>\n                </PopupItem>\n                <PopupItem key=\"3\" label=\"Popup item 4\">\n                    <div className=\"my-custom-content\">Custom content 4</div>\n                </PopupItem>\n            </Menu>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.my-custom-menu {\n    width: 200px;\n    border: 1px solid #ccc;\n    padding: 0;\n    box-shadow: none;\n    z-index: 1000;\n}\n\n.my-custom-content {\n    width: 400px;\n    height: 200px;\n    background: #fff;\n    border: 1px solid #ccc;\n    line-height: 200px;\n    text-align: center;\n    font-size: 20px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/menu/demo/custom-popup.md b/compiled_docs/menu/demo/custom-popup.md new file mode 100644 index 0000000000..45d253fee7 --- /dev/null +++ b/compiled_docs/menu/demo/custom-popup.md @@ -0,0 +1 @@ +{"title":"自定义弹出内容","meta":{"title":"自定义弹出内容","description":"\n

自定义菜单弹出内容。

\n","order":"5"},"codes":{"jsx":"import { Menu } from '@alifd/next';\n\nconst { PopupItem } = Menu;\n\nclass Demo extends React.Component {\n render() {\n const popupProps = {\n target: () => ReactDOM.findDOMNode(this),\n offset: [-1, 0],\n animation: false\n };\n\n return (\n \n \n
Custom content 1
\n \n \n
Custom content 2
\n \n \n
Custom content 3
\n \n \n
Custom content 4
\n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".my-custom-menu {\n width: 200px;\n border: 1px solid #ccc;\n padding: 0;\n box-shadow: none;\n z-index: 1000;\n}\n\n.my-custom-content {\n width: 400px;\n height: 200px;\n background: #fff;\n border: 1px solid #ccc;\n line-height: 200px;\n text-align: center;\n font-size: 20px;\n}\n"},"body":"\n\n````jsx\nimport { Menu } from '@alifd/next';\n\nconst { PopupItem } = Menu;\n\nclass Demo extends React.Component {\n render() {\n const popupProps = {\n target: () => ReactDOM.findDOMNode(this),\n offset: [-1, 0],\n animation: false\n };\n\n return (\n \n \n
Custom content 1
\n \n \n
Custom content 2
\n \n \n
Custom content 3
\n \n \n
Custom content 4
\n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.my-custom-menu {\n width: 200px;\n border: 1px solid #ccc;\n padding: 0;\n box-shadow: none;\n z-index: 1000;\n}\n\n.my-custom-content {\n width: 400px;\n height: 200px;\n background: #fff;\n border: 1px solid #ccc;\n line-height: 200px;\n text-align: center;\n font-size: 20px;\n}\n````","html":"
import { Menu } from '@alifd/next';\n\nconst { PopupItem } = Menu;\n\nclass Demo extends React.Component {\n    render() {\n        const popupProps = {\n            target: () => ReactDOM.findDOMNode(this),\n            offset: [-1, 0],\n            animation: false\n        };\n\n        return (\n            <Menu className=\"my-custom-menu\" popupProps={popupProps}>\n                <PopupItem key=\"0\" label=\"Popup item 1\">\n                    <div className=\"my-custom-content\">Custom content 1</div>\n                </PopupItem>\n                <PopupItem key=\"1\" label=\"Popup item 2\">\n                    <div className=\"my-custom-content\">Custom content 2</div>\n                </PopupItem>\n                <PopupItem key=\"2\" label=\"Popup item 3\">\n                    <div className=\"my-custom-content\">Custom content 3</div>\n                </PopupItem>\n                <PopupItem key=\"3\" label=\"Popup item 4\">\n                    <div className=\"my-custom-content\">Custom content 4</div>\n                </PopupItem>\n            </Menu>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.my-custom-menu {\n    width: 200px;\n    border: 1px solid #ccc;\n    padding: 0;\n    box-shadow: none;\n    z-index: 1000;\n}\n\n.my-custom-content {\n    width: 400px;\n    height: 200px;\n    background: #fff;\n    border: 1px solid #ccc;\n    line-height: 200px;\n    text-align: center;\n    font-size: 20px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/menu/demo/hover.en-us.md b/compiled_docs/menu/demo/hover.en-us.md new file mode 100644 index 0000000000..0697d564f1 --- /dev/null +++ b/compiled_docs/menu/demo/hover.en-us.md @@ -0,0 +1 @@ +{"title":"Open submenu by hover","meta":{"title":"Open submenu by hover","description":"\n

You can set the triggerType to 'hover' to hover to open the submenu. By default, click to open the submenu.

\n","order":"3"},"codes":{"jsx":"import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Divider } = Menu;\n\nReactDOM.render(\n \n Option 1\n Option 2\n Option 3\n \n \n Popup option 1\n Popup option 2\n \n \n Popup option 1\n Popup option 2\n \n \n , mountNode);\n","css":".my-menu {\n width: 200px;\n}\n"},"body":"\n````jsx\nimport { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Divider } = Menu;\n\nReactDOM.render(\n \n Option 1\n Option 2\n Option 3\n \n \n Popup option 1\n Popup option 2\n \n \n Popup option 1\n Popup option 2\n \n \n , mountNode);\n````\n\n````css\n.my-menu {\n width: 200px;\n}\n````","html":"
import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Divider } = Menu;\n\nReactDOM.render(\n    <Menu className=\"my-menu\" mode=\"popup\" triggerType=\"hover\">\n        <Item key=\"1\">Option 1</Item>\n        <Item key=\"2\">Option 2</Item>\n        <Item key=\"3\">Option 3</Item>\n        <Divider key=\"divider\" />\n        <SubMenu key=\"sub-1\" label=\"Popup menu 1\">\n            <Item key=\"popup-1-1\">Popup option 1</Item>\n            <Item key=\"popup-1-2\">Popup option 2</Item>\n        </SubMenu>\n        <SubMenu key=\"sub-2\" label=\"Popup menu 2\">\n            <Item key=\"popup-2-1\">Popup option 1</Item>\n            <Item key=\"popup-2-2\">Popup option 2</Item>\n        </SubMenu>\n    </Menu>\n    , mountNode);
.my-menu {\n    width: 200px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/menu/demo/hover.md b/compiled_docs/menu/demo/hover.md new file mode 100644 index 0000000000..2fd02cf127 --- /dev/null +++ b/compiled_docs/menu/demo/hover.md @@ -0,0 +1 @@ +{"title":"hover 打开子菜单","meta":{"title":"hover 打开子菜单","description":"\n

可以设置 triggerType 为 'hover'，来 hover 打开子菜单，默认点击打开子菜单。

\n","order":"3"},"codes":{"jsx":"import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Divider } = Menu;\n\nReactDOM.render(\n \n Option 1\n Option 2\n Option 3\n \n \n Popup option 1\n Popup option 2\n \n \n Popup option 1\n Popup option 2\n \n \n , mountNode);\n","css":".my-menu {\n width: 200px;\n}\n"},"body":"\n\n````jsx\nimport { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Divider } = Menu;\n\nReactDOM.render(\n \n Option 1\n Option 2\n Option 3\n \n \n Popup option 1\n Popup option 2\n \n \n Popup option 1\n Popup option 2\n \n \n , mountNode);\n````\n\n````css\n.my-menu {\n width: 200px;\n}\n````","html":"
import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Divider } = Menu;\n\nReactDOM.render(\n    <Menu className=\"my-menu\" mode=\"popup\" triggerType=\"hover\">\n        <Item key=\"1\">Option 1</Item>\n        <Item key=\"2\">Option 2</Item>\n        <Item key=\"3\">Option 3</Item>\n        <Divider key=\"divider\" />\n        <SubMenu key=\"sub-1\" label=\"Popup menu 1\">\n            <Item key=\"popup-1-1\">Popup option 1</Item>\n            <Item key=\"popup-1-2\">Popup option 2</Item>\n        </SubMenu>\n        <SubMenu key=\"sub-2\" label=\"Popup menu 2\">\n            <Item key=\"popup-2-1\">Popup option 1</Item>\n            <Item key=\"popup-2-2\">Popup option 2</Item>\n        </SubMenu>\n    </Menu>\n    , mountNode);
.my-menu {\n    width: 200px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/menu/demo/hoz.en-us.md b/compiled_docs/menu/demo/hoz.en-us.md new file mode 100644 index 0000000000..48aafe0c61 --- /dev/null +++ b/compiled_docs/menu/demo/hoz.en-us.md @@ -0,0 +1 @@ +{"title":"Horizontal menu bar","meta":{"title":"Horizontal menu bar","description":"\n

Demo the usage of the horizontal navigation menu bar.

\n","order":"8"},"codes":{"jsx":"import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item } = Menu;\n\nReactDOM.render(\n \n First\n Second\n \n Sub option 1\n Sub option 2\n \n Sub sub option 1\n Sub sub option 2\n \n \n Third\n \n , mountNode);\n","css":".my-hoz-menu .next-menu-item {\n width: 160px;\n}\n"},"body":"\n````jsx\nimport { Menu } from '@alifd/next';\n\nconst { SubMenu, Item } = Menu;\n\nReactDOM.render(\n \n First\n Second\n \n Sub option 1\n Sub option 2\n \n Sub sub option 1\n Sub sub option 2\n \n \n Third\n \n , mountNode);\n````\n\n````css\n.my-hoz-menu .next-menu-item {\n width: 160px;\n}\n````","html":"
import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item } = Menu;\n\nReactDOM.render(\n    <Menu header=\"aaa\" direction=\"hoz\" mode=\"popup\" className=\"my-hoz-menu\" popupClassName=\"my-hoz-menu\" popupAutoWidth>\n        <Item key=\"1\">First</Item>\n        <Item key=\"2\">Second</Item>\n        <SubMenu label=\"Sub Nav\">\n            <Item key=\"sub-1\">Sub option 1</Item>\n            <Item key=\"sub-2\">Sub option 2</Item>\n            <SubMenu label=\"Sub Sub Nav\">\n                <Item key=\"sub-sub-1\">Sub sub option 1</Item>\n                <Item key=\"sub-sub-2\">Sub sub option 2</Item>\n            </SubMenu>\n        </SubMenu>\n        <Item key=\"3\">Third</Item>\n    </Menu>\n    , mountNode);
.my-hoz-menu .next-menu-item {\n    width: 160px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/menu/demo/hoz.md b/compiled_docs/menu/demo/hoz.md new file mode 100644 index 0000000000..4eae9dca24 --- /dev/null +++ b/compiled_docs/menu/demo/hoz.md @@ -0,0 +1 @@ +{"title":"横向菜单条","meta":{"title":"横向菜单条","description":"\n

展示横向导航菜单条的用法。

\n","order":"8"},"codes":{"jsx":"import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item } = Menu;\n\nReactDOM.render(\n \n First\n Second\n \n Sub option 1\n Sub option 2\n \n Sub sub option 1\n Sub sub option 2\n \n \n Third\n \n , mountNode);\n","css":".my-hoz-menu .next-menu-item {\n width: 160px;\n}\n"},"body":"\n\n````jsx\nimport { Menu } from '@alifd/next';\n\nconst { SubMenu, Item } = Menu;\n\nReactDOM.render(\n \n First\n Second\n \n Sub option 1\n Sub option 2\n \n Sub sub option 1\n Sub sub option 2\n \n \n Third\n \n , mountNode);\n````\n\n````css\n.my-hoz-menu .next-menu-item {\n width: 160px;\n}\n````","html":"
import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item } = Menu;\n\nReactDOM.render(\n    <Menu header=\"aaa\" direction=\"hoz\" mode=\"popup\" className=\"my-hoz-menu\" popupClassName=\"my-hoz-menu\" popupAutoWidth>\n        <Item key=\"1\">First</Item>\n        <Item key=\"2\">Second</Item>\n        <SubMenu label=\"Sub Nav\">\n            <Item key=\"sub-1\">Sub option 1</Item>\n            <Item key=\"sub-2\">Sub option 2</Item>\n            <SubMenu label=\"Sub Sub Nav\">\n                <Item key=\"sub-sub-1\">Sub sub option 1</Item>\n                <Item key=\"sub-sub-2\">Sub sub option 2</Item>\n            </SubMenu>\n        </SubMenu>\n        <Item key=\"3\">Third</Item>\n    </Menu>\n    , mountNode);
.my-hoz-menu .next-menu-item {\n    width: 160px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/menu/demo/popup-align.en-us.md b/compiled_docs/menu/demo/popup-align.en-us.md new file mode 100644 index 0000000000..ca97c24215 --- /dev/null +++ b/compiled_docs/menu/demo/popup-align.en-us.md @@ -0,0 +1 @@ +{"title":"Alignment of the pop up menu","meta":{"title":"Alignment of the pop up menu","description":"\n

You can align the popup menu with the parent menu by setting popupAlign to 'outside'.

\n","order":"4"},"codes":{"jsx":"import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Divider } = Menu;\n\nReactDOM.render(\n \n Option 1\n Option 2\n Option 3\n \n \n Popup option 1\n Popup option 2\n \n \n Popup option 1\n Popup option 2\n \n \n , mountNode);\n","css":".my-menu {\n width: 200px;\n}\n"},"body":"\n````jsx\nimport { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Divider } = Menu;\n\nReactDOM.render(\n \n Option 1\n Option 2\n Option 3\n \n \n Popup option 1\n Popup option 2\n \n \n Popup option 1\n Popup option 2\n \n \n , mountNode);\n````\n\n````css\n.my-menu {\n width: 200px;\n}\n````","html":"
import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Divider } = Menu;\n\nReactDOM.render(\n    <Menu className=\"my-menu\" mode=\"popup\" popupAlign=\"outside\">\n        <Item key=\"1\">Option 1</Item>\n        <Item key=\"2\">Option 2</Item>\n        <Item key=\"3\">Option 3</Item>\n        <Divider key=\"divider\" />\n        <SubMenu key=\"sub-1\" label=\"Popup menu 1\">\n            <Item key=\"popup-1-1\">Popup option 1</Item>\n            <Item key=\"popup-1-2\">Popup option 2</Item>\n        </SubMenu>\n        <SubMenu key=\"sub-2\" label=\"Popup menu 2\">\n            <Item key=\"popup-2-1\">Popup option 1</Item>\n            <Item key=\"popup-2-2\">Popup option 2</Item>\n        </SubMenu>\n    </Menu>\n    , mountNode);
.my-menu {\n    width: 200px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/menu/demo/popup-align.md b/compiled_docs/menu/demo/popup-align.md new file mode 100644 index 0000000000..0748965659 --- /dev/null +++ b/compiled_docs/menu/demo/popup-align.md @@ -0,0 +1 @@ +{"title":"弹出菜单对齐方式","meta":{"title":"弹出菜单对齐方式","description":"\n

可以通过设置 popupAlign 为 'outside'，使弹出菜单和父级菜单对齐。

\n","order":"4"},"codes":{"jsx":"import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Divider } = Menu;\n\nReactDOM.render(\n \n Option 1\n Option 2\n Option 3\n \n \n Popup option 1\n Popup option 2\n \n \n Popup option 1\n Popup option 2\n \n \n , mountNode);\n","css":".my-menu {\n width: 200px;\n}\n"},"body":"\n\n````jsx\nimport { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Divider } = Menu;\n\nReactDOM.render(\n \n Option 1\n Option 2\n Option 3\n \n \n Popup option 1\n Popup option 2\n \n \n Popup option 1\n Popup option 2\n \n \n , mountNode);\n````\n\n````css\n.my-menu {\n width: 200px;\n}\n````","html":"
import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Divider } = Menu;\n\nReactDOM.render(\n    <Menu className=\"my-menu\" mode=\"popup\" popupAlign=\"outside\">\n        <Item key=\"1\">Option 1</Item>\n        <Item key=\"2\">Option 2</Item>\n        <Item key=\"3\">Option 3</Item>\n        <Divider key=\"divider\" />\n        <SubMenu key=\"sub-1\" label=\"Popup menu 1\">\n            <Item key=\"popup-1-1\">Popup option 1</Item>\n            <Item key=\"popup-1-2\">Popup option 2</Item>\n        </SubMenu>\n        <SubMenu key=\"sub-2\" label=\"Popup menu 2\">\n            <Item key=\"popup-2-1\">Popup option 1</Item>\n            <Item key=\"popup-2-2\">Popup option 2</Item>\n        </SubMenu>\n    </Menu>\n    , mountNode);
.my-menu {\n    width: 200px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/menu/demo/popup.en-us.md b/compiled_docs/menu/demo/popup.en-us.md new file mode 100644 index 0000000000..fc3b506f76 --- /dev/null +++ b/compiled_docs/menu/demo/popup.en-us.md @@ -0,0 +1 @@ +{"title":"Pop up menu","meta":{"title":"Pop up menu","description":"\n

Demo the usage of the popup up menu.

\n","order":"2"},"codes":{"jsx":"import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Divider } = Menu;\n\nReactDOM.render(\n \n Option 1\n Option 2\n Option 3\n \n \n Popup option 1\n Popup option 2\n \n \n Popup option 1\n Popup option 2\n \n \n , mountNode);\n","css":".my-menu {\n width: 200px;\n}\n"},"body":"\n````jsx\nimport { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Divider } = Menu;\n\nReactDOM.render(\n \n Option 1\n Option 2\n Option 3\n \n \n Popup option 1\n Popup option 2\n \n \n Popup option 1\n Popup option 2\n \n \n , mountNode);\n````\n\n````css\n.my-menu {\n width: 200px;\n}\n````","html":"
import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Divider } = Menu;\n\nReactDOM.render(\n    <Menu className=\"my-menu\" mode=\"popup\">\n        <Item key=\"1\">Option 1</Item>\n        <Item key=\"2\">Option 2</Item>\n        <Item key=\"3\">Option 3</Item>\n        <Divider key=\"divider\" />\n        <SubMenu key=\"sub-1\" label=\"Popup menu 1\">\n            <Item key=\"popup-1-1\">Popup option 1</Item>\n            <Item key=\"popup-1-2\">Popup option 2</Item>\n        </SubMenu>\n        <SubMenu key=\"sub-2\" label=\"Popup menu 2\">\n            <Item key=\"popup-2-1\">Popup option 1</Item>\n            <Item key=\"popup-2-2\">Popup option 2</Item>\n        </SubMenu>\n    </Menu>\n    , mountNode);
.my-menu {\n    width: 200px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/menu/demo/popup.md b/compiled_docs/menu/demo/popup.md new file mode 100644 index 0000000000..6fcb6e9386 --- /dev/null +++ b/compiled_docs/menu/demo/popup.md @@ -0,0 +1 @@ +{"title":"弹出菜单","meta":{"title":"弹出菜单","description":"\n

展示弹出菜单的用法。

\n","order":"2"},"codes":{"jsx":"import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Divider } = Menu;\n\nReactDOM.render(\n \n Option 1\n Option 2\n Option 3\n \n \n Popup option 1\n Popup option 2\n \n \n Popup option 1\n Popup option 2\n \n \n , mountNode);\n","css":".my-menu {\n width: 200px;\n}\n"},"body":"\n\n````jsx\nimport { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Divider } = Menu;\n\nReactDOM.render(\n \n Option 1\n Option 2\n Option 3\n \n \n Popup option 1\n Popup option 2\n \n \n Popup option 1\n Popup option 2\n \n \n , mountNode);\n````\n\n````css\n.my-menu {\n width: 200px;\n}\n````","html":"
import { Menu } from '@alifd/next';\n\nconst { SubMenu, Item, Divider } = Menu;\n\nReactDOM.render(\n    <Menu className=\"my-menu\" mode=\"popup\">\n        <Item key=\"1\">Option 1</Item>\n        <Item key=\"2\">Option 2</Item>\n        <Item key=\"3\">Option 3</Item>\n        <Divider key=\"divider\" />\n        <SubMenu key=\"sub-1\" label=\"Popup menu 1\">\n            <Item key=\"popup-1-1\">Popup option 1</Item>\n            <Item key=\"popup-1-2\">Popup option 2</Item>\n        </SubMenu>\n        <SubMenu key=\"sub-2\" label=\"Popup menu 2\">\n            <Item key=\"popup-2-1\">Popup option 1</Item>\n            <Item key=\"popup-2-2\">Popup option 2</Item>\n        </SubMenu>\n    </Menu>\n    , mountNode);
.my-menu {\n    width: 200px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/menu/demo/select.en-us.md b/compiled_docs/menu/demo/select.en-us.md new file mode 100644 index 0000000000..4f616ef033 --- /dev/null +++ b/compiled_docs/menu/demo/select.en-us.md @@ -0,0 +1 @@ +{"title":"Menu item selection","meta":{"title":"Menu item selection","description":"\n

Demo the usage of menu item selection.

\n","order":"6"},"codes":{"jsx":"import { Switch, Menu } from '@alifd/next';\n\nconst { SubMenu, Item } = Menu;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n multiple: false,\n subMenuSelectable: false,\n shallowSelect: false,\n isSelectIconRight: false,\n selectedKeys: ['1']\n };\n\n [\n 'handleMultipleChange', 'handleSubMenuSelectableChange',\n 'handleShallowSelectChange', 'handleSelect', 'handleIconDirectionChange'\n ].forEach(method => {\n this[method] = this[method].bind(this);\n });\n }\n\n handleMultipleChange() {\n this.setState({\n multiple: !this.state.multiple,\n selectedKeys: []\n });\n }\n\n handleIconDirectionChange() {\n this.setState({\n isSelectIconRight: !this.state.isSelectIconRight,\n selectedKeys: []\n });\n }\n\n handleSubMenuSelectableChange() {\n this.setState({\n subMenuSelectable: !this.state.subMenuSelectable,\n selectedKeys: []\n });\n }\n\n handleShallowSelectChange() {\n this.setState({\n shallowSelect: !this.state.shallowSelect,\n selectedKeys: []\n });\n }\n\n handleSelect(selectedKeys, ...others) {\n this.setState({\n selectedKeys\n });\n\n console.log(selectedKeys, ...others);\n }\n\n render() {\n const { multiple, subMenuSelectable, shallowSelect, selectedKeys, isSelectIconRight } = this.state;\n const selectMode = multiple ? 'multiple' : 'single';\n\n return (\n
\n
\n Multiple \n \n
\n
\n isSelectIconRight \n \n
\n
\n Label of submenu selectable \n \n
\n
\n Only first level selectable \n \n
\n \n Option 1\n Disabled option 2\n \n Sub option 1\n Sub option 2\n \n Option 3\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".my-switch-label {\n vertical-align: super;\n}\n\n.my-select-menu {\n margin-top: 10px;\n width: 200px;\n}\n"},"body":"\n````jsx\nimport { Switch, Menu } from '@alifd/next';\n\nconst { SubMenu, Item } = Menu;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n multiple: false,\n subMenuSelectable: false,\n shallowSelect: false,\n isSelectIconRight: false,\n selectedKeys: ['1']\n };\n\n [\n 'handleMultipleChange', 'handleSubMenuSelectableChange',\n 'handleShallowSelectChange', 'handleSelect', 'handleIconDirectionChange'\n ].forEach(method => {\n this[method] = this[method].bind(this);\n });\n }\n\n handleMultipleChange() {\n this.setState({\n multiple: !this.state.multiple,\n selectedKeys: []\n });\n }\n\n handleIconDirectionChange() {\n this.setState({\n isSelectIconRight: !this.state.isSelectIconRight,\n selectedKeys: []\n });\n }\n\n handleSubMenuSelectableChange() {\n this.setState({\n subMenuSelectable: !this.state.subMenuSelectable,\n selectedKeys: []\n });\n }\n\n handleShallowSelectChange() {\n this.setState({\n shallowSelect: !this.state.shallowSelect,\n selectedKeys: []\n });\n }\n\n handleSelect(selectedKeys, ...others) {\n this.setState({\n selectedKeys\n });\n\n console.log(selectedKeys, ...others);\n }\n\n render() {\n const { multiple, subMenuSelectable, shallowSelect, selectedKeys, isSelectIconRight } = this.state;\n const selectMode = multiple ? 'multiple' : 'single';\n\n return (\n
\n
\n Multiple \n \n
\n
\n isSelectIconRight \n \n
\n
\n Label of submenu selectable \n \n
\n
\n Only first level selectable \n \n
\n \n Option 1\n Disabled option 2\n \n Sub option 1\n Sub option 2\n \n Option 3\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.my-switch-label {\n vertical-align: super;\n}\n\n.my-select-menu {\n margin-top: 10px;\n width: 200px;\n}\n````","html":"
import { Switch, Menu } from '@alifd/next';\n\nconst { SubMenu, Item } = Menu;\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            multiple: false,\n            subMenuSelectable: false,\n            shallowSelect: false,\n            isSelectIconRight: false,\n            selectedKeys: ['1']\n        };\n\n        [\n            'handleMultipleChange', 'handleSubMenuSelectableChange',\n            'handleShallowSelectChange', 'handleSelect', 'handleIconDirectionChange'\n        ].forEach(method => {\n            this[method] = this[method].bind(this);\n        });\n    }\n\n    handleMultipleChange() {\n        this.setState({\n            multiple: !this.state.multiple,\n            selectedKeys: []\n        });\n    }\n\n    handleIconDirectionChange() {\n        this.setState({\n            isSelectIconRight: !this.state.isSelectIconRight,\n            selectedKeys: []\n        });\n    }\n\n    handleSubMenuSelectableChange() {\n        this.setState({\n            subMenuSelectable: !this.state.subMenuSelectable,\n            selectedKeys: []\n        });\n    }\n\n    handleShallowSelectChange() {\n        this.setState({\n            shallowSelect: !this.state.shallowSelect,\n            selectedKeys: []\n        });\n    }\n\n    handleSelect(selectedKeys, ...others) {\n        this.setState({\n            selectedKeys\n        });\n\n        console.log(selectedKeys, ...others);\n    }\n\n    render() {\n        const { multiple, subMenuSelectable, shallowSelect, selectedKeys, isSelectIconRight } = this.state;\n        const selectMode = multiple ? 'multiple' : 'single';\n\n        return (\n            <div>\n                <div>\n                    <span className=\"my-switch-label\">Multiple </span>\n                    <Switch value={multiple} onChange={this.handleMultipleChange} />\n                </div>\n                <div>\n                    <span className=\"my-switch-label\">isSelectIconRight </span>\n                    <Switch value={multiple} onChange={this.handleIconDirectionChange} />\n                </div>\n                <div>\n                    <span className=\"my-switch-label\">Label of submenu selectable </span>\n                    <Switch value={multiple} onChange={this.handleSubMenuSelectableChange} />\n                </div>\n                <div>\n                    <span className=\"my-switch-label\">Only first level selectable </span>\n                    <Switch value={multiple} onChange={this.handleShallowSelectChange} />\n                </div>\n                <Menu isSelectIconRight={isSelectIconRight} className=\"my-select-menu\" defaultOpenKeys={['sub']} selectMode={selectMode} selectedKeys={selectedKeys} shallowSelect={shallowSelect} onSelect={this.handleSelect}>\n                    <Item key=\"1\">Option 1</Item>\n                    <Item disabled key=\"2\">Disabled option 2</Item>\n                    <SubMenu key=\"sub\" label=\"Sub menu\" selectable={subMenuSelectable}>\n                        <Item key=\"sub-1\">Sub option 1</Item>\n                        <Item key=\"sub-2\">Sub option 2</Item>\n                    </SubMenu>\n                    <Item key=\"3\">Option 3</Item>\n                </Menu>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.my-switch-label {\n    vertical-align: super;\n}\n\n.my-select-menu {\n    margin-top: 10px;\n    width: 200px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/menu/demo/select.md b/compiled_docs/menu/demo/select.md new file mode 100644 index 0000000000..62d278edb9 --- /dev/null +++ b/compiled_docs/menu/demo/select.md @@ -0,0 +1 @@ +{"title":"菜单项选择","meta":{"title":"菜单项选择","description":"\n

展示菜单项选择用法。

\n","order":"6"},"codes":{"jsx":"import { Switch, Menu } from '@alifd/next';\n\nconst { SubMenu, Item } = Menu;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n multiple: false,\n subMenuSelectable: false,\n shallowSelect: false,\n isSelectIconRight: false,\n selectedKeys: ['1']\n };\n\n [\n 'handleMultipleChange', 'handleSubMenuSelectableChange',\n 'handleShallowSelectChange', 'handleSelect', 'handleIconDirectionChange'\n ].forEach(method => {\n this[method] = this[method].bind(this);\n });\n }\n\n handleMultipleChange() {\n this.setState({\n multiple: !this.state.multiple,\n selectedKeys: []\n });\n }\n\n handleIconDirectionChange() {\n this.setState({\n isSelectIconRight: !this.state.isSelectIconRight,\n selectedKeys: []\n });\n }\n\n handleSubMenuSelectableChange() {\n this.setState({\n subMenuSelectable: !this.state.subMenuSelectable,\n selectedKeys: []\n });\n }\n\n handleShallowSelectChange() {\n this.setState({\n shallowSelect: !this.state.shallowSelect,\n selectedKeys: []\n });\n }\n\n handleSelect(selectedKeys, ...others) {\n this.setState({\n selectedKeys\n });\n\n console.log(selectedKeys, ...others);\n }\n\n render() {\n const { multiple, subMenuSelectable, shallowSelect, selectedKeys, isSelectIconRight } = this.state;\n const selectMode = multiple ? 'multiple' : 'single';\n\n return (\n
\n
\n Multiple \n \n
\n
\n isSelectIconRight \n \n
\n
\n Label of submenu selectable \n \n
\n
\n Only first level selectable \n \n
\n \n Option 1\n Disabled option 2\n \n Sub option 1\n Sub option 2\n \n Option 3\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".my-switch-label {\n vertical-align: super;\n}\n\n.my-select-menu {\n margin-top: 10px;\n width: 200px;\n}\n"},"body":"\n\n````jsx\nimport { Switch, Menu } from '@alifd/next';\n\nconst { SubMenu, Item } = Menu;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n multiple: false,\n subMenuSelectable: false,\n shallowSelect: false,\n isSelectIconRight: false,\n selectedKeys: ['1']\n };\n\n [\n 'handleMultipleChange', 'handleSubMenuSelectableChange',\n 'handleShallowSelectChange', 'handleSelect', 'handleIconDirectionChange'\n ].forEach(method => {\n this[method] = this[method].bind(this);\n });\n }\n\n handleMultipleChange() {\n this.setState({\n multiple: !this.state.multiple,\n selectedKeys: []\n });\n }\n\n handleIconDirectionChange() {\n this.setState({\n isSelectIconRight: !this.state.isSelectIconRight,\n selectedKeys: []\n });\n }\n\n handleSubMenuSelectableChange() {\n this.setState({\n subMenuSelectable: !this.state.subMenuSelectable,\n selectedKeys: []\n });\n }\n\n handleShallowSelectChange() {\n this.setState({\n shallowSelect: !this.state.shallowSelect,\n selectedKeys: []\n });\n }\n\n handleSelect(selectedKeys, ...others) {\n this.setState({\n selectedKeys\n });\n\n console.log(selectedKeys, ...others);\n }\n\n render() {\n const { multiple, subMenuSelectable, shallowSelect, selectedKeys, isSelectIconRight } = this.state;\n const selectMode = multiple ? 'multiple' : 'single';\n\n return (\n
\n
\n Multiple \n \n
\n
\n isSelectIconRight \n \n
\n
\n Label of submenu selectable \n \n
\n
\n Only first level selectable \n \n
\n \n Option 1\n Disabled option 2\n \n Sub option 1\n Sub option 2\n \n Option 3\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.my-switch-label {\n vertical-align: super;\n}\n\n.my-select-menu {\n margin-top: 10px;\n width: 200px;\n}\n````","html":"
import { Switch, Menu } from '@alifd/next';\n\nconst { SubMenu, Item } = Menu;\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            multiple: false,\n            subMenuSelectable: false,\n            shallowSelect: false,\n            isSelectIconRight: false,\n            selectedKeys: ['1']\n        };\n\n        [\n            'handleMultipleChange', 'handleSubMenuSelectableChange',\n            'handleShallowSelectChange', 'handleSelect', 'handleIconDirectionChange'\n        ].forEach(method => {\n            this[method] = this[method].bind(this);\n        });\n    }\n\n    handleMultipleChange() {\n        this.setState({\n            multiple: !this.state.multiple,\n            selectedKeys: []\n        });\n    }\n\n    handleIconDirectionChange() {\n        this.setState({\n            isSelectIconRight: !this.state.isSelectIconRight,\n            selectedKeys: []\n        });\n    }\n\n    handleSubMenuSelectableChange() {\n        this.setState({\n            subMenuSelectable: !this.state.subMenuSelectable,\n            selectedKeys: []\n        });\n    }\n\n    handleShallowSelectChange() {\n        this.setState({\n            shallowSelect: !this.state.shallowSelect,\n            selectedKeys: []\n        });\n    }\n\n    handleSelect(selectedKeys, ...others) {\n        this.setState({\n            selectedKeys\n        });\n\n        console.log(selectedKeys, ...others);\n    }\n\n    render() {\n        const { multiple, subMenuSelectable, shallowSelect, selectedKeys, isSelectIconRight } = this.state;\n        const selectMode = multiple ? 'multiple' : 'single';\n\n        return (\n            <div>\n                <div>\n                    <span className=\"my-switch-label\">Multiple </span>\n                    <Switch value={multiple} onChange={this.handleMultipleChange} />\n                </div>\n                <div>\n                    <span className=\"my-switch-label\">isSelectIconRight </span>\n                    <Switch value={multiple} onChange={this.handleIconDirectionChange} />\n                </div>\n                <div>\n                    <span className=\"my-switch-label\">Label of submenu selectable </span>\n                    <Switch value={multiple} onChange={this.handleSubMenuSelectableChange} />\n                </div>\n                <div>\n                    <span className=\"my-switch-label\">Only first level selectable </span>\n                    <Switch value={multiple} onChange={this.handleShallowSelectChange} />\n                </div>\n                <Menu isSelectIconRight={isSelectIconRight} className=\"my-select-menu\" defaultOpenKeys={['sub']} selectMode={selectMode} selectedKeys={selectedKeys} shallowSelect={shallowSelect} onSelect={this.handleSelect}>\n                    <Item key=\"1\">Option 1</Item>\n                    <Item disabled key=\"2\">Disabled option 2</Item>\n                    <SubMenu key=\"sub\" label=\"Sub menu\" selectable={subMenuSelectable}>\n                        <Item key=\"sub-1\">Sub option 1</Item>\n                        <Item key=\"sub-2\">Sub option 2</Item>\n                    </SubMenu>\n                    <Item key=\"3\">Option 3</Item>\n                </Menu>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.my-switch-label {\n    vertical-align: super;\n}\n\n.my-select-menu {\n    margin-top: 10px;\n    width: 200px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/menu/index.en-us.md b/compiled_docs/menu/index.en-us.md new file mode 100644 index 0000000000..1cad69d2be --- /dev/null +++ b/compiled_docs/menu/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

API#

","api":"

Menu#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
childrensubmenu and menu itemReactNode-
onItemClickcallback function triggered when click the menu item

signatures:
Function(key: String, item: Object, event: Object) => void
params:
key: {String} key of clicked menu item
item: {Object} clicked menu item
event: {Object} clicked event		Function() => {}
openKeyskeys of open submenu currentlyString/Array-
defaultOpenKeyskeys of open submenu in defaultString/Array[]
defaultOpenAllopen all submenus default, only when mode is set to 'inline' and openMode is set to 'multiple', priority is higher than defaultOpenKeysBooleanfalse
onOpencallback function triggered when open or close the submenu
signatures:
Function(key: String, extra: Object) => void
params:
key: {String} keys of open submenu
extra: {Object} extra param
extra.key: {String} key of current operation submenu
extra.open: {Boolean} whether is open		Function() => {}
modeopen mode of submenu

options:
'inline', 'popup'		Enum'inline'
triggerTypeopen trigger type of submenu

option:
'click', 'hover'		Enum'click'
openModeexpand mode of the inline submenu, expand a submenu or multiple submenus at the same time, it only works when mode is inline

options:
'single', 'multiple'		Enum'multiple'
inlineIndentindent of inline submenuNumber20
popupAutoWidthwhether the width of the pop up submenu is equal to the parent menu item, if the width of the pop up submenu is smaller than the parent menu item, it will be the same as the parent menu item, otherwise do nothing.Booleanfalse
popupAlignalignment of the pop up submenu

options:
'follow', 'outside'		Enum'follow'
popupPropsproperties of PopupObject/Function{}
popupClassNameclassName of the pop up submenuString-
popupStylestyle of the pop up submenuObject-
selectedKeyskeys of selected menu item currentlyString/Array-
defaultSelectedKeyskeys of selected menu item in defaultString/Array[]
onSelectcallback function triggered when select or unselect menu item

signatures:
Function(selectedKeys: Array, item: Object, extra: Object) => void
params:
selectedKeys: {Array} keys of selected menu item
item: {Object} current operation menu item
extra: {Object} extra params
extra.select: {Boolean} whether is selected
extra.key: {Array} key of current operation menu item
extra.label: {Object} label of current operation menu item
extra.keyPath: {Array} key path of current operation menu item		Function() => {}
selectModeselect mode, single or multiple, no value by default, not selectable

options:
'single', 'multiple'		Enum-
shallowSelectwhether you can only select the first level menu item (you cannot select the menu item in the submenu)Booleanfalse
hasSelectedIconwhether to show the selected icon, if it is set to false, it needs to match the background color when the configuration platform setting is selected to distinguish betweenBooleantrue
isSelectIconRightwhether to set the selected icon on right side of menu, this only works when hasSelectedIcon is true
Attention：select icon on SubMenu always lie on left of menu		Booleanfalse
directiondirection of the menu's first level

options:
'ver', 'hoz'		Enum'ver'
hozAlignalignment of items and footer in the horizontal menu bar, only works when direction is set to 'hoz' and the header exists

options:
'left', 'right'		Enum'left'
headerheader of menuReactNode-
footerfooter of menuReactNode-
autoFocuswhether to get focus automaticallyBooleanfalse
focusedKeykeys of the currently focused submenu or menu itemString-
embeddableintegrate with the background or not(which means no background/border/box-shadow etc.), usually used with Layout. You can also custom its height like<Menu style={{lineHeight: '100px'}}>Booleanfalse
\n

Menu.Item#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
disabledwhether is disabledBooleanfalse
helperhelp textReactNode-
childrencontent of menu itemReactNode-
\n

Menu.SubMenu#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
labellabel of submenuReactNode-
selectablewhether is selectable, it only works when set selectMode of MenuBooleanfalse
modeopen mode of submenu, it will override the property with the same name on Menu

options:
'inline', 'popup'		Enummode fo Menu
childrenmenu item or submenuReactNode-
\n

Menu.PopupItem#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
labellabel of the parent itemReactNode-
childrencontent of the pop upReactNode-
\n

Menu.CheckboxItem#

\n

This subcomponent selection is not controlled by defaultSelectedKeys/selectedKeys. Please control the selected yourself.

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
checkedwhether is checkedBooleanfalse
indeterminatewhether is indeterminateBooleanfalse
disabledwhether is disabledBooleanfalse
onChangecallback function triggered when check or uncheck menu item

signatures:
Function(checked: Boolean, event: Object) => void
params:
checked: {Boolean} whether is checked
event: {Object} checked event		Function() => {}
helperhelp textReactNode-
childrencontent of menu check itemReactNode-
\n

Menu.RadioItem#

\n

This subcomponent selection is not controlled by defaultSelectedKeys/selectedKeys. Please control the selected yourself.

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
checkedwhether is checkedBooleanfalse
disabledwhether is disabledBooleanfalse
onChangecallback function triggered when check or uncheck menu item

signatures:
Function(checked: Boolean, event: Object) => void
params:
checked: {Boolean} whether is checked
event: {Object} checked event		Function() => {}
helperhelp textReactNode-
childrencontent of menu radio itemReactNode-
\n

Menu.Group#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
labellabel of groupReactNode-
childrenmenu itemsReactNode-
\n

Menu.Divider#

\n

Menu.create(props)#

Create a context menu.

\n
    \n
  • the props argument can be passed to all supported props of Menu
    • \n
  • the props argument adds support for overlayProps to customize the overlay
    • \n
\n\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyBoardDescripiton
Up Arrownavigate to previous item
Down Arrownavigate to next item
Right Arrowopen the submenu, navigate to the first item of the submenu; horizontal menu bar first level, navigate to the right one
Left Arrowclose the submenu, navigate to the parent menu; horizontal menu bar first level, navigation to the left one
Enteropen submenu and navigate to the first item of the submenu
Escclose submenu and navigate to the parent menu item
Spacetoggle selected or checked
\n"} \ No newline at end of file diff --git a/compiled_docs/menu/index.md b/compiled_docs/menu/index.md new file mode 100644 index 0000000000..950102e8e7 --- /dev/null +++ b/compiled_docs/menu/index.md @@ -0,0 +1 @@ +{"meta":"

API#

","api":"

Menu#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
children菜单项和子菜单ReactNode-
onItemClick点击菜单项触发的回调函数

签名:
Function(key: String, item: Object, event: Object) => void
参数:
key: {String} 点击的菜单项的 key 值
item: {Object} 点击的菜单项对象
event: {Object} 点击的事件对象		Function() => {}
openKeys当前打开的子菜单的 key 值String/Array-
defaultOpenKeys初始打开的子菜单的 key 值String/Array[]
defaultOpenAll初始展开所有的子菜单，只在 mode 设置为 'inline' 以及 openMode 设置为 'multiple' 下生效，优先级高于 defaultOpenKeysBooleanfalse
onOpen打开或关闭子菜单触发的回调函数

签名:
Function(key: String, extra: Object) => void
参数:
key: {String} 打开的所有子菜单的 key 值
extra: {Object} 额外参数
extra.key: {String} 当前操作子菜单的 key 值
extra.open: {Boolean} 是否是打开		Function() => {}
mode子菜单打开的模式

可选值:
'inline', 'popup'		Enum'inline'
triggerType子菜单打开的触发行为

可选值:
'click', 'hover'		Enum'click'
openMode展开内连子菜单的模式，同时可以展开一个子菜单还是多个子菜单，该属性仅在 mode 为 inline 时生效

可选值:
'single', 'multiple'		Enum'multiple'
inlineIndent内连子菜单缩进距离Number20
popupAutoWidth是否自动让弹层的宽度和菜单项保持一致，如果弹层的宽度比菜单项小则和菜单项保持一致，如果宽度大于菜单项则不做处理Booleanfalse
popupAlign弹层的对齐方式

可选值:
'follow', 'outside'		Enum'follow'
popupProps弹层自定义 propsObject/Function{}
popupClassName弹出子菜单自定义 classNameString-
popupStyle弹出子菜单自定义 styleObject-
selectedKeys当前选中菜单项的 key 值String/Array-
defaultSelectedKeys初始选中菜单项的 key 值String/Array[]
onSelect选中或取消选中菜单项触发的回调函数

签名:
Function(selectedKeys: Array, item: Object, extra: Object) => void
参数:
selectedKeys: {Array} 选中的所有菜单项的值
item: {Object} 选中或取消选中的菜单项
extra: {Object} 额外参数
extra.select: {Boolean} 是否是选中
extra.key: {Array} 菜单项的 key
extra.label: {Object} 菜单项的文本
extra.keyPath: {Array} 菜单项 key 的路径		Function() => {}
selectMode选中模式，单选还是多选，默认无值，不可选

可选值:
'single', 'multiple'		Enum-
shallowSelect是否只能选择第一层菜单项（不能选择子菜单中的菜单项）Booleanfalse
hasSelectedIcon是否显示选中图标，如果设置为 false 需配合配置平台设置选中时的背景色以示区分Booleantrue
isSelectIconRight是否将选中图标居右，仅当 hasSelectedIcon 为true 时生效。
注意：SubMenu 上的选中图标一直居左，不受此API控制		Booleanfalse
direction菜单第一层展示方向

可选值:
'ver', 'hoz'		Enum'ver'
hozAlign横向菜单条 item 和 footer 的对齐方向，在 direction 设置为 'hoz' 并且 header 存在时生效

可选值:
'left', 'right'		Enum'left'
header自定义菜单头部ReactNode-
footer自定义菜单尾部ReactNode-
autoFocus是否自动获得焦点Booleanfalse
focusedKey当前获得焦点的子菜单或菜单项 key 值String-
embeddable是否开启嵌入式模式，一般用于Layout的布局中，开启后没有默认背景、外层border、box-shadow，可以配合<Menu style={{lineHeight: '100px'}}> 自定义高度Booleanfalse
\n

Menu.Item#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
disabled是否禁用Booleanfalse
helper帮助文本ReactNode-
children菜单项标签内容ReactNode-
\n

Menu.SubMenu#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
label标签内容ReactNode-
selectable是否可选，该属性仅在设置 Menu 组件 selectMode 属性后生效Booleanfalse
mode子菜单打开方式，如果设置会覆盖 Menu 上的同名属性

可选值:
'inline', 'popup'		EnumMenu 的 mode 属性值
children菜单项或下一级子菜单ReactNode-
\n

Menu.PopupItem#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
label标签内容ReactNode-
children自定义弹层内容ReactNode-
\n

Menu.CheckboxItem#

\n

该子组件选中情况不受 defaultSelectedKeys/selectedKeys 控制，请自行控制选中逻辑

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
checked是否选中Booleanfalse
indeterminate是否半选中Booleanfalse
disabled是否禁用Booleanfalse
onChange选中或取消选中触发的回调函数

签名:
Function(checked: Boolean, event: Object) => void
参数:
checked: {Boolean} 是否选中
event: {Object} 选中事件对象		Function() => {}
helper帮助文本ReactNode-
children标签内容ReactNode-
\n

Menu.RadioItem#

\n

该子组件选中情况不受 defaultSelectedKeys/selectedKeys 控制，请自行控制选中逻辑

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
checked是否选中Booleanfalse
disabled是否禁用Booleanfalse
onChange选中或取消选中触发的回调函数

签名:
Function(checked: Boolean, event: Object) => void
参数:
checked: {Boolean} 是否选中
event: {Object} 选中事件对象		Function() => {}
helper帮助文本ReactNode-
children标签内容ReactNode-
\n

Menu.Group#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
label标签内容ReactNode-
children菜单项ReactNode-
\n

Menu.Divider#

\n

Menu.create(props)#

创建上下文菜单。

\n
    \n
  • props 参数可传入 Menu 所有支持的 props
    • \n
  • props 额外支持 overlayProps，用来自定义 Menu 所在的弹层
    • \n
\n\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
按键说明
Up Arrow导航到上一项
Down Arrow导航到下一项
Right Arrow打开子菜单，导航到子菜单第一项；横向菜单条第一层，导航到右一项
Left Arrow关闭子菜单，导航到父级菜单；横向菜单条第一层，导航都左一项
Enter打开子菜单，导航到子菜单第一项
Esc关闭子菜单，导航到父级菜单
SPACE切换选中状态
\n"} \ No newline at end of file diff --git a/compiled_docs/message/demo/accessibility.en-us.md b/compiled_docs/message/demo/accessibility.en-us.md new file mode 100644 index 0000000000..9bdad9495e --- /dev/null +++ b/compiled_docs/message/demo/accessibility.en-us.md @@ -0,0 +1 @@ +{"title":"Accessibility","meta":{"title":"Accessibility","description":"\n

When you click button through the Enter key, it automatically focuses on Message to read the information.Please refer to ARIA and KeyBoard.

\n","order":"7"},"codes":{"jsx":"import { Message, Button } from '@alifd/next';\n\nconst showSuccess = () => Message.success('success');\nReactDOM.render(\n
\n \n
, mountNode);\n\n"},"body":"\n````jsx\nimport { Message, Button } from '@alifd/next';\n\nconst showSuccess = () => Message.success('success');\nReactDOM.render(\n
\n \n
, mountNode);\n\n````","html":"
import { Message, Button } from '@alifd/next';\n\nconst showSuccess = () => Message.success('success');\nReactDOM.render(\n    <div className=\"message-toast-quick-demo\">\n        <Button onClick={showSuccess}>success</Button>\n    </div>, mountNode);\n
"} \ No newline at end of file diff --git a/compiled_docs/message/demo/accessibility.md b/compiled_docs/message/demo/accessibility.md new file mode 100644 index 0000000000..57035aade6 --- /dev/null +++ b/compiled_docs/message/demo/accessibility.md @@ -0,0 +1 @@ +{"title":"无障碍","meta":{"title":"无障碍","description":"\n

通过Enter键点击button时，自动聚焦到Message上读取信息。请参考ARIA and KeyBoard。

\n","order":"7"},"codes":{"jsx":"import { Message, Button } from '@alifd/next';\n\nconst showSuccess = () => Message.success('success');\nReactDOM.render(\n
\n \n
, mountNode);\n\n"},"body":"\n\n````jsx\nimport { Message, Button } from '@alifd/next';\n\nconst showSuccess = () => Message.success('success');\nReactDOM.render(\n
\n \n
, mountNode);\n\n````","html":"
import { Message, Button } from '@alifd/next';\n\nconst showSuccess = () => Message.success('success');\nReactDOM.render(\n    <div className=\"message-toast-quick-demo\">\n        <Button onClick={showSuccess}>success</Button>\n    </div>, mountNode);\n
"} \ No newline at end of file diff --git a/compiled_docs/message/demo/control.en-us.md b/compiled_docs/message/demo/control.en-us.md new file mode 100644 index 0000000000..cc2269823a --- /dev/null +++ b/compiled_docs/message/demo/control.en-us.md @@ -0,0 +1 @@ +{"title":"Show and hide under controll","meta":{"title":"Show and hide under controll","description":"\n","order":"4"},"codes":{"jsx":"import { Message, Button } from '@alifd/next';\n\nclass App extends React.Component {\n state = {\n visible: true\n }\n\n handleChange = () => {\n this.setState({\n visible: !this.state.visible\n });\n }\n\n handleClose = () => {\n this.setState({\n visible: false\n });\n }\n\n render() {\n const { visible } = this.state;\n\n return (\n
\n \n \n This item already has the label \"travel\". You can add a new label.\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".control-demo .next-btn.next-medium {\n margin-bottom: 10px;\n}\n"},"body":"\n````jsx\nimport { Message, Button } from '@alifd/next';\n\nclass App extends React.Component {\n state = {\n visible: true\n }\n\n handleChange = () => {\n this.setState({\n visible: !this.state.visible\n });\n }\n\n handleClose = () => {\n this.setState({\n visible: false\n });\n }\n\n render() {\n const { visible } = this.state;\n\n return (\n
\n \n \n This item already has the label \"travel\". You can add a new label.\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.control-demo .next-btn.next-medium {\n margin-bottom: 10px;\n}\n````","html":"
import { Message, Button } from '@alifd/next';\n\nclass App extends React.Component {\n    state = {\n        visible: true\n    }\n\n    handleChange = () => {\n        this.setState({\n            visible: !this.state.visible\n        });\n    }\n\n    handleClose = () => {\n        this.setState({\n            visible: false\n        });\n    }\n\n    render() {\n        const { visible } = this.state;\n\n        return (\n            <div className=\"control-demo\">\n                <Button onClick={this.handleChange}>Toggle Visible</Button>\n                <Message type=\"warning\" visible={visible} title=\"Warning\" closeable onClose={this.handleClose}>\n                    This item already has the label \"travel\". You can add a new label.\n                </Message>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App />, mountNode);
.control-demo .next-btn.next-medium {\n    margin-bottom: 10px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/message/demo/control.md b/compiled_docs/message/demo/control.md new file mode 100644 index 0000000000..a9203f65b4 --- /dev/null +++ b/compiled_docs/message/demo/control.md @@ -0,0 +1 @@ +{"title":"受控显示隐藏","meta":{"title":"受控显示隐藏","description":"\n","order":"4"},"codes":{"jsx":"import { Message, Button } from '@alifd/next';\n\nclass App extends React.Component {\n state = {\n visible: true\n }\n\n handleChange = () => {\n this.setState({\n visible: !this.state.visible\n });\n }\n\n handleClose = () => {\n this.setState({\n visible: false\n });\n }\n\n render() {\n const { visible } = this.state;\n\n return (\n
\n \n \n This item already has the label \"travel\". You can add a new label.\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".control-demo .next-btn.next-medium {\n margin-bottom: 10px;\n}\n"},"body":"\n\n````jsx\nimport { Message, Button } from '@alifd/next';\n\nclass App extends React.Component {\n state = {\n visible: true\n }\n\n handleChange = () => {\n this.setState({\n visible: !this.state.visible\n });\n }\n\n handleClose = () => {\n this.setState({\n visible: false\n });\n }\n\n render() {\n const { visible } = this.state;\n\n return (\n
\n \n \n This item already has the label \"travel\". You can add a new label.\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.control-demo .next-btn.next-medium {\n margin-bottom: 10px;\n}\n````","html":"
import { Message, Button } from '@alifd/next';\n\nclass App extends React.Component {\n    state = {\n        visible: true\n    }\n\n    handleChange = () => {\n        this.setState({\n            visible: !this.state.visible\n        });\n    }\n\n    handleClose = () => {\n        this.setState({\n            visible: false\n        });\n    }\n\n    render() {\n        const { visible } = this.state;\n\n        return (\n            <div className=\"control-demo\">\n                <Button onClick={this.handleChange}>Toggle Visible</Button>\n                <Message type=\"warning\" visible={visible} title=\"Warning\" closeable onClose={this.handleClose}>\n                    This item already has the label \"travel\". You can add a new label.\n                </Message>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App />, mountNode);
.control-demo .next-btn.next-medium {\n    margin-bottom: 10px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/message/demo/inline-close.en-us.md b/compiled_docs/message/demo/inline-close.en-us.md new file mode 100644 index 0000000000..13a0b244f8 --- /dev/null +++ b/compiled_docs/message/demo/inline-close.en-us.md @@ -0,0 +1 @@ +{"title":"Closeable","meta":{"title":"Closeable","description":"\n

You can control whether the message can be closed by adding the closeable property.

\n","order":"3"},"codes":{"jsx":"import { Message } from '@alifd/next';\n\nconst onClose = () => console.log('onClose triggered!');\nconst afterClose = () => console.log('afterClose triggered!');\n\nReactDOM.render(\n
\n \n Content Content Content Content\n \n
, mountNode);\n"},"body":"\n````jsx\nimport { Message } from '@alifd/next';\n\nconst onClose = () => console.log('onClose triggered!');\nconst afterClose = () => console.log('afterClose triggered!');\n\nReactDOM.render(\n
\n \n Content Content Content Content\n \n
, mountNode);\n````","html":"
import { Message } from '@alifd/next';\n\nconst onClose = () => console.log('onClose triggered!');\nconst afterClose = () => console.log('afterClose triggered!');\n\nReactDOM.render(\n    <div>\n        <Message title=\"title\" closeable onClose={onClose} afterClose={afterClose}>\n            Content Content Content Content\n        </Message>\n    </div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/message/demo/inline-close.md b/compiled_docs/message/demo/inline-close.md new file mode 100644 index 0000000000..c702974721 --- /dev/null +++ b/compiled_docs/message/demo/inline-close.md @@ -0,0 +1 @@ +{"title":"可关闭组件","meta":{"title":"可关闭组件","description":"\n

通过增加closeable属性可以控制提示框是否可关闭。

\n","order":"3"},"codes":{"jsx":"import { Message } from '@alifd/next';\n\nconst onClose = () => console.log('onClose triggered!');\nconst afterClose = () => console.log('afterClose triggered!');\n\nReactDOM.render(\n
\n \n Content Content Content Content\n \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Message } from '@alifd/next';\n\nconst onClose = () => console.log('onClose triggered!');\nconst afterClose = () => console.log('afterClose triggered!');\n\nReactDOM.render(\n
\n \n Content Content Content Content\n \n
, mountNode);\n````","html":"
import { Message } from '@alifd/next';\n\nconst onClose = () => console.log('onClose triggered!');\nconst afterClose = () => console.log('afterClose triggered!');\n\nReactDOM.render(\n    <div>\n        <Message title=\"title\" closeable onClose={onClose} afterClose={afterClose}>\n            Content Content Content Content\n        </Message>\n    </div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/message/demo/shape.en-us.md b/compiled_docs/message/demo/shape.en-us.md new file mode 100644 index 0000000000..1e798d87c4 --- /dev/null +++ b/compiled_docs/message/demo/shape.en-us.md @@ -0,0 +1 @@ +{"title":"Shape","meta":{"title":"Shape","description":"\n

You can control the shape of message by setting the shape property.

\n","order":"1"},"codes":{"jsx":"import { Message, Radio } from '@alifd/next';\n\nconst types = ['success', 'warning', 'error', 'notice', 'help', 'loading'];\nconst list = [\n {\n value: 'inline',\n label: 'inline'\n }, {\n value: 'addon',\n label: 'addon'\n }, {\n value: 'toast',\n label: 'toast'\n }\n];\n\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n shape: 'inline'\n };\n this.handleSelect = this.handleSelect.bind(this);\n }\n\n handleSelect(shape) {\n this.setState({ shape });\n }\n\n render() {\n const { shape } = this.state;\n\n return (\n
\n Select Shape：\n \n\n\n {types.map(type => (\n \n Content Content Content Content\n \n ))}\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".message-shape-demo .demo-label {\n display: inline-block;\n vertical-align: top;\n height: 22px;\n line-height: 22px;\n}\n\n.message-shape-demo .next-message-title {\n text-transform: capitalize;\n}\n\n.message-shape-demo .next-message {\n margin-top: 10px;\n}\n\n.message-shape-demo .next-message.next-message-toast {\n position: relative !important;\n}\n"},"body":"\n````jsx\nimport { Message, Radio } from '@alifd/next';\n\nconst types = ['success', 'warning', 'error', 'notice', 'help', 'loading'];\nconst list = [\n {\n value: 'inline',\n label: 'inline'\n }, {\n value: 'addon',\n label: 'addon'\n }, {\n value: 'toast',\n label: 'toast'\n }\n];\n\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n shape: 'inline'\n };\n this.handleSelect = this.handleSelect.bind(this);\n }\n\n handleSelect(shape) {\n this.setState({ shape });\n }\n\n render() {\n const { shape } = this.state;\n\n return (\n
\n Select Shape：\n \n\n\n {types.map(type => (\n \n Content Content Content Content\n \n ))}\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.message-shape-demo .demo-label {\n display: inline-block;\n vertical-align: top;\n height: 22px;\n line-height: 22px;\n}\n\n.message-shape-demo .next-message-title {\n text-transform: capitalize;\n}\n\n.message-shape-demo .next-message {\n margin-top: 10px;\n}\n\n.message-shape-demo .next-message.next-message-toast {\n position: relative !important;\n}\n````","html":"
import { Message, Radio } from '@alifd/next';\n\nconst types = ['success', 'warning', 'error', 'notice', 'help', 'loading'];\nconst list = [\n    {\n        value: 'inline',\n        label: 'inline'\n    }, {\n        value: 'addon',\n        label: 'addon'\n    }, {\n        value: 'toast',\n        label: 'toast'\n    }\n];\n\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            shape: 'inline'\n        };\n        this.handleSelect = this.handleSelect.bind(this);\n    }\n\n    handleSelect(shape) {\n        this.setState({ shape });\n    }\n\n    render() {\n        const { shape } = this.state;\n\n        return (\n            <div className=\"message-shape-demo\">\n                <span className=\"demo-label\">Select Shape：</span>\n                <Radio.Group defaultValue=\"inline\" dataSource={list} value={this.state.shape} onChange={this.handleSelect} />\n\n\n                {types.map(type => (\n                    <Message key={type} title={type} type={type} shape={shape}>\n                        Content Content Content Content\n                    </Message>\n                ))}\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.message-shape-demo .demo-label {\n    display: inline-block;\n    vertical-align: top;\n    height: 22px;\n    line-height: 22px;\n}\n\n.message-shape-demo .next-message-title {\n    text-transform: capitalize;\n}\n\n.message-shape-demo .next-message {\n    margin-top: 10px;\n}\n\n.message-shape-demo .next-message.next-message-toast {\n    position: relative !important;\n}
"} \ No newline at end of file diff --git a/compiled_docs/message/demo/shape.md b/compiled_docs/message/demo/shape.md new file mode 100644 index 0000000000..c32ba21219 --- /dev/null +++ b/compiled_docs/message/demo/shape.md @@ -0,0 +1 @@ +{"title":"信息外观","meta":{"title":"信息外观","description":"\n

通过设置shape调整信息外观

\n","order":"1"},"codes":{"jsx":"import { Message, Radio } from '@alifd/next';\n\nconst types = ['success', 'warning', 'error', 'notice', 'help', 'loading'];\nconst list = [\n {\n value: 'inline',\n label: 'inline'\n }, {\n value: 'addon',\n label: 'addon'\n }, {\n value: 'toast',\n label: 'toast'\n }\n];\n\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n shape: 'inline'\n };\n this.handleSelect = this.handleSelect.bind(this);\n }\n\n handleSelect(shape) {\n this.setState({ shape });\n }\n\n render() {\n const { shape } = this.state;\n\n return (\n
\n Select Shape：\n \n\n\n {types.map(type => (\n \n Content Content Content Content\n \n ))}\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".message-shape-demo .demo-label {\n display: inline-block;\n vertical-align: top;\n height: 22px;\n line-height: 22px;\n}\n\n.message-shape-demo .next-message-title {\n text-transform: capitalize;\n}\n\n.message-shape-demo .next-message {\n margin-top: 10px;\n}\n\n.message-shape-demo .next-message.next-message-toast {\n position: relative !important;\n}\n"},"body":"\n\n````jsx\nimport { Message, Radio } from '@alifd/next';\n\nconst types = ['success', 'warning', 'error', 'notice', 'help', 'loading'];\nconst list = [\n {\n value: 'inline',\n label: 'inline'\n }, {\n value: 'addon',\n label: 'addon'\n }, {\n value: 'toast',\n label: 'toast'\n }\n];\n\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n shape: 'inline'\n };\n this.handleSelect = this.handleSelect.bind(this);\n }\n\n handleSelect(shape) {\n this.setState({ shape });\n }\n\n render() {\n const { shape } = this.state;\n\n return (\n
\n Select Shape：\n \n\n\n {types.map(type => (\n \n Content Content Content Content\n \n ))}\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.message-shape-demo .demo-label {\n display: inline-block;\n vertical-align: top;\n height: 22px;\n line-height: 22px;\n}\n\n.message-shape-demo .next-message-title {\n text-transform: capitalize;\n}\n\n.message-shape-demo .next-message {\n margin-top: 10px;\n}\n\n.message-shape-demo .next-message.next-message-toast {\n position: relative !important;\n}\n````","html":"
import { Message, Radio } from '@alifd/next';\n\nconst types = ['success', 'warning', 'error', 'notice', 'help', 'loading'];\nconst list = [\n    {\n        value: 'inline',\n        label: 'inline'\n    }, {\n        value: 'addon',\n        label: 'addon'\n    }, {\n        value: 'toast',\n        label: 'toast'\n    }\n];\n\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            shape: 'inline'\n        };\n        this.handleSelect = this.handleSelect.bind(this);\n    }\n\n    handleSelect(shape) {\n        this.setState({ shape });\n    }\n\n    render() {\n        const { shape } = this.state;\n\n        return (\n            <div className=\"message-shape-demo\">\n                <span className=\"demo-label\">Select Shape：</span>\n                <Radio.Group defaultValue=\"inline\" dataSource={list} value={this.state.shape} onChange={this.handleSelect} />\n\n\n                {types.map(type => (\n                    <Message key={type} title={type} type={type} shape={shape}>\n                        Content Content Content Content\n                    </Message>\n                ))}\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.message-shape-demo .demo-label {\n    display: inline-block;\n    vertical-align: top;\n    height: 22px;\n    line-height: 22px;\n}\n\n.message-shape-demo .next-message-title {\n    text-transform: capitalize;\n}\n\n.message-shape-demo .next-message {\n    margin-top: 10px;\n}\n\n.message-shape-demo .next-message.next-message-toast {\n    position: relative !important;\n}
"} \ No newline at end of file diff --git a/compiled_docs/message/demo/size.en-us.md b/compiled_docs/message/demo/size.en-us.md new file mode 100644 index 0000000000..4214670e06 --- /dev/null +++ b/compiled_docs/message/demo/size.en-us.md @@ -0,0 +1 @@ +{"title":"Size","meta":{"title":"Size","description":"\n

You can control the size of message by setting the size property.

\n","order":"2"},"codes":{"jsx":"import { Message, Radio } from '@alifd/next';\n\nconst types = ['success', 'warning', 'error', 'notice', 'help', 'loading'];\nconst list = [\n {\n value: 'medium',\n label: 'medium'\n }, {\n value: 'large',\n label: 'large'\n }\n];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n size: 'medium'\n };\n this.handleSelect = this.handleSelect.bind(this);\n }\n\n handleSelect(size) {\n this.setState({ size });\n }\n\n render() {\n const { size } = this.state;\n\n return (\n
\n Select Size：\n \n\n {types.map(type => (\n \n Content Content Content Content\n \n ))}\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".message-size-demo .demo-label {\n display: inline-block;\n vertical-align: top;\n height: 28px;\n line-height: 28px;\n}\n\n.message-size-demo .next-message-title {\n text-transform: capitalize;\n}\n\n.message-size-demo .next-message {\n margin-top: 10px;\n}\n"},"body":"\n````jsx\nimport { Message, Radio } from '@alifd/next';\n\nconst types = ['success', 'warning', 'error', 'notice', 'help', 'loading'];\nconst list = [\n {\n value: 'medium',\n label: 'medium'\n }, {\n value: 'large',\n label: 'large'\n }\n];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n size: 'medium'\n };\n this.handleSelect = this.handleSelect.bind(this);\n }\n\n handleSelect(size) {\n this.setState({ size });\n }\n\n render() {\n const { size } = this.state;\n\n return (\n
\n Select Size：\n \n\n {types.map(type => (\n \n Content Content Content Content\n \n ))}\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.message-size-demo .demo-label {\n display: inline-block;\n vertical-align: top;\n height: 28px;\n line-height: 28px;\n}\n\n.message-size-demo .next-message-title {\n text-transform: capitalize;\n}\n\n.message-size-demo .next-message {\n margin-top: 10px;\n}\n````","html":"
import { Message, Radio } from '@alifd/next';\n\nconst types = ['success', 'warning', 'error', 'notice', 'help', 'loading'];\nconst list = [\n    {\n        value: 'medium',\n        label: 'medium'\n    }, {\n        value: 'large',\n        label: 'large'\n    }\n];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            size: 'medium'\n        };\n        this.handleSelect = this.handleSelect.bind(this);\n    }\n\n    handleSelect(size) {\n        this.setState({ size });\n    }\n\n    render() {\n        const { size } = this.state;\n\n        return (\n            <div className=\"message-size-demo\">\n                <span className=\"demo-label\">Select Size：</span>\n                <Radio.Group defaultValue=\"medium\" dataSource={list} value={this.state.size} onChange={this.handleSelect} />\n\n                {types.map(type => (\n                    <Message key={type} title={type} type={type} size={size}>\n                        Content Content Content Content\n                    </Message>\n                ))}\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.message-size-demo .demo-label {\n    display: inline-block;\n    vertical-align: top;\n    height: 28px;\n    line-height: 28px;\n}\n\n.message-size-demo .next-message-title {\n    text-transform: capitalize;\n}\n\n.message-size-demo .next-message {\n    margin-top: 10px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/message/demo/size.md b/compiled_docs/message/demo/size.md new file mode 100644 index 0000000000..deebfe0730 --- /dev/null +++ b/compiled_docs/message/demo/size.md @@ -0,0 +1 @@ +{"title":"信息尺寸","meta":{"title":"信息尺寸","description":"\n

通过size设置尺寸

\n","order":"2"},"codes":{"jsx":"import { Message, Radio } from '@alifd/next';\n\nconst types = ['success', 'warning', 'error', 'notice', 'help', 'loading'];\nconst list = [\n {\n value: 'medium',\n label: 'medium'\n }, {\n value: 'large',\n label: 'large'\n }\n];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n size: 'medium'\n };\n this.handleSelect = this.handleSelect.bind(this);\n }\n\n handleSelect(size) {\n this.setState({ size });\n }\n\n render() {\n const { size } = this.state;\n\n return (\n
\n Select Size：\n \n\n {types.map(type => (\n \n Content Content Content Content\n \n ))}\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".message-size-demo .demo-label {\n display: inline-block;\n vertical-align: top;\n height: 28px;\n line-height: 28px;\n}\n\n.message-size-demo .next-message-title {\n text-transform: capitalize;\n}\n\n.message-size-demo .next-message {\n margin-top: 10px;\n}\n"},"body":"\n\n````jsx\nimport { Message, Radio } from '@alifd/next';\n\nconst types = ['success', 'warning', 'error', 'notice', 'help', 'loading'];\nconst list = [\n {\n value: 'medium',\n label: 'medium'\n }, {\n value: 'large',\n label: 'large'\n }\n];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n size: 'medium'\n };\n this.handleSelect = this.handleSelect.bind(this);\n }\n\n handleSelect(size) {\n this.setState({ size });\n }\n\n render() {\n const { size } = this.state;\n\n return (\n
\n Select Size：\n \n\n {types.map(type => (\n \n Content Content Content Content\n \n ))}\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.message-size-demo .demo-label {\n display: inline-block;\n vertical-align: top;\n height: 28px;\n line-height: 28px;\n}\n\n.message-size-demo .next-message-title {\n text-transform: capitalize;\n}\n\n.message-size-demo .next-message {\n margin-top: 10px;\n}\n````","html":"
import { Message, Radio } from '@alifd/next';\n\nconst types = ['success', 'warning', 'error', 'notice', 'help', 'loading'];\nconst list = [\n    {\n        value: 'medium',\n        label: 'medium'\n    }, {\n        value: 'large',\n        label: 'large'\n    }\n];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            size: 'medium'\n        };\n        this.handleSelect = this.handleSelect.bind(this);\n    }\n\n    handleSelect(size) {\n        this.setState({ size });\n    }\n\n    render() {\n        const { size } = this.state;\n\n        return (\n            <div className=\"message-size-demo\">\n                <span className=\"demo-label\">Select Size：</span>\n                <Radio.Group defaultValue=\"medium\" dataSource={list} value={this.state.size} onChange={this.handleSelect} />\n\n                {types.map(type => (\n                    <Message key={type} title={type} type={type} size={size}>\n                        Content Content Content Content\n                    </Message>\n                ))}\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.message-size-demo .demo-label {\n    display: inline-block;\n    vertical-align: top;\n    height: 28px;\n    line-height: 28px;\n}\n\n.message-size-demo .next-message-title {\n    text-transform: capitalize;\n}\n\n.message-size-demo .next-message {\n    margin-top: 10px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/message/demo/toast-quick.en-us.md b/compiled_docs/message/demo/toast-quick.en-us.md new file mode 100644 index 0000000000..f48c1608e6 --- /dev/null +++ b/compiled_docs/message/demo/toast-quick.en-us.md @@ -0,0 +1 @@ +{"title":"Quick way of toast","meta":{"title":"Quick way of toast","description":"\n

You can use static method such as Message.success to show the specified type toast.

\n","order":"6"},"codes":{"jsx":"import { Message, Button } from '@alifd/next';\n\n\nconst showSuccess = () => Message.success('success');\nconst showWarning = () => Message.warning('warning');\nconst showError = () => Message.error('error');\nconst showNotice = () => Message.notice('notice');\nconst showHelp = () => Message.help('help');\nconst showLoading = () => Message.loading('loading');\n\nReactDOM.render(\n
\n \n \n \n \n \n \n
, mountNode);\n","css":".message-toast-quick-demo .next-btn.next-medium {\n margin-right: 10px;\n margin-bottom: 10px;\n}\n"},"body":"\n````jsx\nimport { Message, Button } from '@alifd/next';\n\n\nconst showSuccess = () => Message.success('success');\nconst showWarning = () => Message.warning('warning');\nconst showError = () => Message.error('error');\nconst showNotice = () => Message.notice('notice');\nconst showHelp = () => Message.help('help');\nconst showLoading = () => Message.loading('loading');\n\nReactDOM.render(\n
\n \n \n \n \n \n \n
, mountNode);\n````\n\n````css\n.message-toast-quick-demo .next-btn.next-medium {\n margin-right: 10px;\n margin-bottom: 10px;\n}\n````","html":"
import { Message, Button } from '@alifd/next';\n\n\nconst showSuccess = () => Message.success('success');\nconst showWarning = () => Message.warning('warning');\nconst showError = () => Message.error('error');\nconst showNotice = () => Message.notice('notice');\nconst showHelp = () => Message.help('help');\nconst showLoading = () => Message.loading('loading');\n\nReactDOM.render(\n    <div className=\"message-toast-quick-demo\">\n        <Button onClick={showSuccess}>success</Button>\n        <Button onClick={showWarning}>warning</Button>\n        <Button onClick={showError}>error</Button>\n        <Button onClick={showNotice}>notice</Button>\n        <Button onClick={showHelp}>help</Button>\n        <Button onClick={showLoading}>loading</Button>\n    </div>, mountNode);
.message-toast-quick-demo .next-btn.next-medium {\n    margin-right: 10px;\n    margin-bottom: 10px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/message/demo/toast-quick.md b/compiled_docs/message/demo/toast-quick.md new file mode 100644 index 0000000000..1fee6f1db8 --- /dev/null +++ b/compiled_docs/message/demo/toast-quick.md @@ -0,0 +1 @@ +{"title":"弹窗便捷方法","meta":{"title":"弹窗便捷方法","description":"\n

可以通过Message.success等静态方法来方便的显示指定类型的信息弹窗。

\n","order":"6"},"codes":{"jsx":"import { Message, Button } from '@alifd/next';\n\n\nconst showSuccess = () => Message.success('success');\nconst showWarning = () => Message.warning('warning');\nconst showError = () => Message.error('error');\nconst showNotice = () => Message.notice('notice');\nconst showHelp = () => Message.help('help');\nconst showLoading = () => Message.loading('loading');\n\nReactDOM.render(\n
\n \n \n \n \n \n \n
, mountNode);\n","css":".message-toast-quick-demo .next-btn.next-medium {\n margin-right: 10px;\n margin-bottom: 10px;\n}\n"},"body":"\n\n````jsx\nimport { Message, Button } from '@alifd/next';\n\n\nconst showSuccess = () => Message.success('success');\nconst showWarning = () => Message.warning('warning');\nconst showError = () => Message.error('error');\nconst showNotice = () => Message.notice('notice');\nconst showHelp = () => Message.help('help');\nconst showLoading = () => Message.loading('loading');\n\nReactDOM.render(\n
\n \n \n \n \n \n \n
, mountNode);\n````\n\n````css\n.message-toast-quick-demo .next-btn.next-medium {\n margin-right: 10px;\n margin-bottom: 10px;\n}\n````","html":"
import { Message, Button } from '@alifd/next';\n\n\nconst showSuccess = () => Message.success('success');\nconst showWarning = () => Message.warning('warning');\nconst showError = () => Message.error('error');\nconst showNotice = () => Message.notice('notice');\nconst showHelp = () => Message.help('help');\nconst showLoading = () => Message.loading('loading');\n\nReactDOM.render(\n    <div className=\"message-toast-quick-demo\">\n        <Button onClick={showSuccess}>success</Button>\n        <Button onClick={showWarning}>warning</Button>\n        <Button onClick={showError}>error</Button>\n        <Button onClick={showNotice}>notice</Button>\n        <Button onClick={showHelp}>help</Button>\n        <Button onClick={showLoading}>loading</Button>\n    </div>, mountNode);
.message-toast-quick-demo .next-btn.next-medium {\n    margin-right: 10px;\n    margin-bottom: 10px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/message/demo/toast.en-us.md b/compiled_docs/message/demo/toast.en-us.md new file mode 100644 index 0000000000..e5b42d60b3 --- /dev/null +++ b/compiled_docs/message/demo/toast.en-us.md @@ -0,0 +1 @@ +{"title":"Toast","meta":{"title":"Toast","description":"\n

You can use Message.show and Message.hide to show and hide toast conveniently.

\n","order":"5"},"codes":{"jsx":"import { Message, Button } from '@alifd/next';\n\n\nconst show = () => {\n Message.show({\n type: 'loading',\n content: 'Will be closed after 3 seconds or manually click on the close button',\n afterClose: () => console.log('Closed the toast')\n });\n};\nconst hide = () => Message.hide();\n\nReactDOM.render(\n
\n \n \n
, mountNode);\n","css":".message-toast-demo .next-btn.next-medium {\n margin-right: 10px;\n}\n"},"body":"\n````jsx\nimport { Message, Button } from '@alifd/next';\n\n\nconst show = () => {\n Message.show({\n type: 'loading',\n content: 'Will be closed after 3 seconds or manually click on the close button',\n afterClose: () => console.log('Closed the toast')\n });\n};\nconst hide = () => Message.hide();\n\nReactDOM.render(\n
\n \n \n
, mountNode);\n````\n\n````css\n.message-toast-demo .next-btn.next-medium {\n margin-right: 10px;\n}\n````","html":"
import { Message, Button } from '@alifd/next';\n\n\nconst show = () => {\n    Message.show({\n        type: 'loading',\n        content: 'Will be closed after 3 seconds or manually click on the close button',\n        afterClose: () => console.log('Closed the toast')\n    });\n};\nconst hide = () => Message.hide();\n\nReactDOM.render(\n    <div className=\"message-toast-demo\">\n        <Button onClick={show}>Show</Button>\n        <Button onClick={hide}>Hide</Button>\n    </div>, mountNode);
.message-toast-demo .next-btn.next-medium {\n    margin-right: 10px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/message/demo/toast.md b/compiled_docs/message/demo/toast.md new file mode 100644 index 0000000000..3507883ed6 --- /dev/null +++ b/compiled_docs/message/demo/toast.md @@ -0,0 +1 @@ +{"title":"弹窗用法","meta":{"title":"弹窗用法","description":"\n

可以通过Message.show和Message.hide方法来方便的显示或隐藏反馈弹窗。

\n","order":"5"},"codes":{"jsx":"import { Message, Button } from '@alifd/next';\n\n\nconst show = () => {\n Message.show({\n type: 'loading',\n content: 'Will be closed after 3 seconds or manually click on the close button',\n afterClose: () => console.log('Closed the toast')\n });\n};\nconst hide = () => Message.hide();\n\nReactDOM.render(\n
\n \n \n
, mountNode);\n","css":".message-toast-demo .next-btn.next-medium {\n margin-right: 10px;\n}\n"},"body":"\n\n````jsx\nimport { Message, Button } from '@alifd/next';\n\n\nconst show = () => {\n Message.show({\n type: 'loading',\n content: 'Will be closed after 3 seconds or manually click on the close button',\n afterClose: () => console.log('Closed the toast')\n });\n};\nconst hide = () => Message.hide();\n\nReactDOM.render(\n
\n \n \n
, mountNode);\n````\n\n````css\n.message-toast-demo .next-btn.next-medium {\n margin-right: 10px;\n}\n````","html":"
import { Message, Button } from '@alifd/next';\n\n\nconst show = () => {\n    Message.show({\n        type: 'loading',\n        content: 'Will be closed after 3 seconds or manually click on the close button',\n        afterClose: () => console.log('Closed the toast')\n    });\n};\nconst hide = () => Message.hide();\n\nReactDOM.render(\n    <div className=\"message-toast-demo\">\n        <Button onClick={show}>Show</Button>\n        <Button onClick={hide}>Hide</Button>\n    </div>, mountNode);
.message-toast-demo .next-btn.next-medium {\n    margin-right: 10px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/message/demo/type.en-us.md b/compiled_docs/message/demo/type.en-us.md new file mode 100644 index 0000000000..382f67921e --- /dev/null +++ b/compiled_docs/message/demo/type.en-us.md @@ -0,0 +1 @@ +{"title":"Type","meta":{"title":"Type","description":"\n

You can control the type of message by setting the type property.

\n","order":"0"},"codes":{"jsx":"import { Message } from '@alifd/next';\n\nReactDOM.render(\n
\n \n Content Content Content Content\n \n \n Content Content Content Content\n \n \n Content Content Content Content\n \n \n Content Content Content Content\n \n \n Content Content Content Content\n \n \n Content Content Content Content\n \n
, mountNode);\n","css":".message-type-demo .next-message {\n margin-bottom: 10px;\n}\n"},"body":"\n````jsx\nimport { Message } from '@alifd/next';\n\nReactDOM.render(\n
\n \n Content Content Content Content\n \n \n Content Content Content Content\n \n \n Content Content Content Content\n \n \n Content Content Content Content\n \n \n Content Content Content Content\n \n \n Content Content Content Content\n \n
, mountNode);\n````\n\n````css\n.message-type-demo .next-message {\n margin-bottom: 10px;\n}\n````","html":"
import { Message } from '@alifd/next';\n\nReactDOM.render(\n    <div className=\"message-type-demo\">\n        <Message title=\"Success\" type=\"success\">\n            Content Content Content Content\n        </Message>\n        <Message title=\"Warning\" type=\"warning\">\n            Content Content Content Content\n        </Message>\n        <Message title=\"Error\" type=\"error\">\n            Content Content Content Content\n        </Message>\n        <Message title=\"Notice\" type=\"notice\">\n            Content Content Content Content\n        </Message>\n        <Message title=\"Help\" type=\"help\">\n            Content Content Content Content\n        </Message>\n        <Message title=\"Loading\" type=\"loading\">\n            Content Content Content Content\n        </Message>\n    </div>, mountNode);
.message-type-demo .next-message {\n    margin-bottom: 10px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/message/demo/type.md b/compiled_docs/message/demo/type.md new file mode 100644 index 0000000000..e5d8b138db --- /dev/null +++ b/compiled_docs/message/demo/type.md @@ -0,0 +1 @@ +{"title":"信息类型","meta":{"title":"信息类型","description":"\n

通过设置type调整信息类型

\n","order":"0"},"codes":{"jsx":"import { Message } from '@alifd/next';\n\nReactDOM.render(\n
\n \n Content Content Content Content\n \n \n Content Content Content Content\n \n \n Content Content Content Content\n \n \n Content Content Content Content\n \n \n Content Content Content Content\n \n \n Content Content Content Content\n \n
, mountNode);\n","css":".message-type-demo .next-message {\n margin-bottom: 10px;\n}\n"},"body":"\n\n````jsx\nimport { Message } from '@alifd/next';\n\nReactDOM.render(\n
\n \n Content Content Content Content\n \n \n Content Content Content Content\n \n \n Content Content Content Content\n \n \n Content Content Content Content\n \n \n Content Content Content Content\n \n \n Content Content Content Content\n \n
, mountNode);\n````\n\n````css\n.message-type-demo .next-message {\n margin-bottom: 10px;\n}\n````","html":"
import { Message } from '@alifd/next';\n\nReactDOM.render(\n    <div className=\"message-type-demo\">\n        <Message title=\"Success\" type=\"success\">\n            Content Content Content Content\n        </Message>\n        <Message title=\"Warning\" type=\"warning\">\n            Content Content Content Content\n        </Message>\n        <Message title=\"Error\" type=\"error\">\n            Content Content Content Content\n        </Message>\n        <Message title=\"Notice\" type=\"notice\">\n            Content Content Content Content\n        </Message>\n        <Message title=\"Help\" type=\"help\">\n            Content Content Content Content\n        </Message>\n        <Message title=\"Loading\" type=\"loading\">\n            Content Content Content Content\n        </Message>\n    </div>, mountNode);
.message-type-demo .next-message {\n    margin-bottom: 10px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/message/index.en-us.md b/compiled_docs/message/index.en-us.md new file mode 100644 index 0000000000..9ad56f0154 --- /dev/null +++ b/compiled_docs/message/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Guide#

API#

","api":"

Message#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
sizesize of message

option:
'medium', 'large'		Enum'medium'
typetype of message

option:
'success', 'warning', 'error', 'notice', 'help', 'loading'		Enum'success'
shapeshape of message

option:
'inline', 'addon', 'toast'		Enum'inline'
titletitle of messageReactNode-
childrencontent of messageReactNode-
defaultVisiblewhether the message is visible in defaultBooleantrue
visiblewhether the message is visible currentlyBoolean-
iconTypetype of icon, overriding the internally type of iconString-
closeablewhether to show the close buttonBooleanfalse
onClosecallback function triggered when close

signatures:
Function() => void		Function() => {}
afterClosecallback function triggered after closed

signatures:
Function() => void		Function() => {}
animationwhether to enable expand and collapse animationBooleantrue
\n\n

Message.show#

Message.show(props) provides a singleton call with the following configuration parameters (inheriting Overlay configuration):

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
typetype of messageString'success'
titletitle of messageReactNode-
contentcontent of messageReactNode-
durationshow duration, 0 means always present, in millisecondsNumber3000
alignalignment reference OverlayString'tc tc'
offsetoffset after positionedArray[0, 0]
hasMaskwhether to have a maskBooleanfalse
closeablewhether to show the close buttonBooleanfalse
afterClosecallback function triggered after closedFunction-
overlayPropsprops of OverlayObject-
\n

Example:

\n
Message.show({\n    type: 'error',\n    title: 'Error',\n    content: 'Please contact admin feedback!',\n    hasMask: true\n});

Message.hide#

Message.hide() provides a quick way to close the message.

\n

Message.[success|error|notice|help|loading]#

Quick ways of Message.show({type: type, title: 'xxx'});.

\n

Example：

\n
Message.success('message content');\n\n// or\nMessage.success({\n    title: 'message content',\n    duration: 1000\n});
\n

ARIA and KeyBoard#

Description: This component needs to be used in conjunction with other components to be prompted. Refer to the above accessibility

\n"} \ No newline at end of file diff --git a/compiled_docs/message/index.md b/compiled_docs/message/index.md new file mode 100644 index 0000000000..f2f2127ac7 --- /dev/null +++ b/compiled_docs/message/index.md @@ -0,0 +1 @@ +{"meta":"

开发指南#

API#

","api":"

Message#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
size反馈大小

可选值:
'medium', 'large'		Enum'medium'
type反馈类型

可选值:
'success', 'warning', 'error', 'notice', 'help', 'loading'		Enum'success'
shape反馈外观

可选值:
'inline', 'addon', 'toast'		Enum'inline'
title标题ReactNode-
children内容ReactNode-
defaultVisible默认是否显示Booleantrue
visible当前是否显示Boolean-
iconType显示的图标类型，会覆盖内部设置的IconTypeString-
closeable显示关闭按钮Booleanfalse
onClose关闭按钮的回调

签名:
Function() => void		Function() => {}
afterClose关闭之后调用的函数

签名:
Function() => void		Function() => {}
animation是否开启展开收起动画Booleantrue
\n\n

Message.show#

Message.show(props) 提供一个单例的调用方式，配置参数如下（继承 Overlay 的配置）：

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
type反馈类型String'success'
title反馈标题ReactNode-
content反馈内容ReactNode-
duration显示持续时间，0表示一直存在，以毫秒为单位Number3000
align对齐方式，参考OverlayString'tc tc'
offset对齐之后的偏移位置Array[0, 0]
hasMask是否带有遮罩Booleanfalse
closeable显示关闭按钮Booleanfalse
afterClose关闭事件的回调函数Function-
overlayProps透传到弹层的属性对象Object-
\n

示例：

\n
Message.show({\n    type: 'error',\n    title: '错误',\n    content: '请联系相关人员反馈！',\n    hasMask: true\n});

Message.hide#

Message.hide() 提供关闭反馈弹层的快捷方法。

\n

Message.[success|error|notice|help|loading]#

Message.show({type: type, title: 'xxx'}); 的便捷调用方法。

\n

示例：

\n
Message.success('反馈内容');\n\n// 或者\nMessage.success({\n    title: '反馈内容',\n    duration: 1000\n});
\n

ARIA and KeyBoard#

说明： 此组件需要结合其他组件使用，才会有提示。参考上文无障碍。

\n"} \ No newline at end of file diff --git a/compiled_docs/nav/demo/basic.en-us.md b/compiled_docs/nav/demo/basic.en-us.md new file mode 100644 index 0000000000..3861e7391c --- /dev/null +++ b/compiled_docs/nav/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

The simplest way to use it.

\n","order":"0"},"codes":{"jsx":"import { Nav } from '@alifd/next';\n\n\nconst { Item, SubNav } = Nav;\n\nconst header = FUSION;\nconst footer = Login in;\n\nReactDOM.render(\n \n , mountNode);\n","css":".basic-nav .fusion {\n margin: 8px 20px;\n width: 100px;\n color: #FFFFFF;\n font-size: 20px;\n}\n.basic-nav .login-in {\n margin: 0 20px;\n color: #FFFFFF;\n}\n.basic-nav .next-nav-item {\n width: 120px;\n}\n"},"body":"\n````jsx\nimport { Nav } from '@alifd/next';\n\n\nconst { Item, SubNav } = Nav;\n\nconst header = FUSION;\nconst footer = Login in;\n\nReactDOM.render(\n \n , mountNode);\n````\n\n````css\n.basic-nav .fusion {\n margin: 8px 20px;\n width: 100px;\n color: #FFFFFF;\n font-size: 20px;\n}\n.basic-nav .login-in {\n margin: 0 20px;\n color: #FFFFFF;\n}\n.basic-nav .next-nav-item {\n width: 120px;\n}\n````","html":"
import { Nav } from '@alifd/next';\n\n\nconst { Item, SubNav } = Nav;\n\nconst header = <span className=\"fusion\">FUSION</span>;\nconst footer = <a className=\"login-in\" href=\"javascript:;\">Login in</a>;\n\nReactDOM.render(\n    <Nav className=\"basic-nav\" direction=\"hoz\" type=\"primary\" header={header} footer={footer} defaultSelectedKeys={['home']} triggerType=\"hover\">\n        <Item key=\"home\">Home</Item>\n        <SubNav label=\"Component\" selectable>\n            <Item key=\"next\">Next</Item>\n            <Item key=\"mext\">Mext</Item>\n        </SubNav>\n        <Item key=\"document\">Document</Item>\n    </Nav>\n    , mountNode);
.basic-nav .fusion {\n    margin: 8px 20px;\n    width: 100px;\n    color: #FFFFFF;\n    font-size: 20px;\n}\n.basic-nav .login-in {\n    margin: 0 20px;\n    color: #FFFFFF;\n}\n.basic-nav .next-nav-item {\n    width: 120px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/nav/demo/basic.md b/compiled_docs/nav/demo/basic.md new file mode 100644 index 0000000000..d31705bb54 --- /dev/null +++ b/compiled_docs/nav/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

最简单的使用方式。

\n","order":"0"},"codes":{"jsx":"import { Nav } from '@alifd/next';\n\n\nconst { Item, SubNav } = Nav;\n\nconst header = FUSION;\nconst footer = Login in;\n\nReactDOM.render(\n \n , mountNode);\n","css":".basic-nav .fusion {\n margin: 8px 20px;\n width: 100px;\n color: #FFFFFF;\n font-size: 20px;\n}\n.basic-nav .login-in {\n margin: 0 20px;\n color: #FFFFFF;\n}\n.basic-nav .next-nav-item {\n width: 120px;\n}\n"},"body":"\n\n````jsx\nimport { Nav } from '@alifd/next';\n\n\nconst { Item, SubNav } = Nav;\n\nconst header = FUSION;\nconst footer = Login in;\n\nReactDOM.render(\n \n , mountNode);\n````\n\n````css\n.basic-nav .fusion {\n margin: 8px 20px;\n width: 100px;\n color: #FFFFFF;\n font-size: 20px;\n}\n.basic-nav .login-in {\n margin: 0 20px;\n color: #FFFFFF;\n}\n.basic-nav .next-nav-item {\n width: 120px;\n}\n````","html":"
import { Nav } from '@alifd/next';\n\n\nconst { Item, SubNav } = Nav;\n\nconst header = <span className=\"fusion\">FUSION</span>;\nconst footer = <a className=\"login-in\" href=\"javascript:;\">Login in</a>;\n\nReactDOM.render(\n    <Nav className=\"basic-nav\" direction=\"hoz\" type=\"primary\" header={header} footer={footer} defaultSelectedKeys={['home']} triggerType=\"hover\">\n        <Item key=\"home\">Home</Item>\n        <SubNav label=\"Component\" selectable>\n            <Item key=\"next\">Next</Item>\n            <Item key=\"mext\">Mext</Item>\n        </SubNav>\n        <Item key=\"document\">Document</Item>\n    </Nav>\n    , mountNode);
.basic-nav .fusion {\n    margin: 8px 20px;\n    width: 100px;\n    color: #FFFFFF;\n    font-size: 20px;\n}\n.basic-nav .login-in {\n    margin: 0 20px;\n    color: #FFFFFF;\n}\n.basic-nav .next-nav-item {\n    width: 120px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/nav/demo/custom.en-us.md b/compiled_docs/nav/demo/custom.en-us.md new file mode 100644 index 0000000000..398850cae9 --- /dev/null +++ b/compiled_docs/nav/demo/custom.en-us.md @@ -0,0 +1 @@ +{"title":"Customize","meta":{"title":"Customize","description":"\n

Nav provides a lot of configurations that can be personalized.

\n","order":"1"},"codes":{"jsx":"import { Nav, Radio } from '@alifd/next';\n\n\nconst { Item, SubNav } = Nav;\n\nclass App extends React.Component {\n state = {\n type: 'normal',\n direction: 'hoz',\n activeDirection: null,\n triggerType: 'click'\n }\n\n setValue(name, value) {\n this.setState({\n [name]: value === '' ? null : value\n });\n }\n\n setTriggerType(triggerType) {\n this.setState({\n triggerType\n });\n }\n\n render() {\n const { type, direction, activeDirection, triggerType } = this.state;\n\n return (\n
\n
\n \n type=\"normal\"\n type=\"primary\"\n type=\"secondary\"\n type=\"line\"\n \n \n direction=\"hoz\"\n direction=\"ver\"\n \n \n activeDirection=null\n {direction === 'hoz' ? activeDirection=\"top\" : null}\n {direction === 'hoz' ? activeDirection=\"bottom\" : null}\n {direction === 'ver' ? activeDirection=\"left\" : null}\n {direction === 'ver' ? activeDirection=\"right\" : null}\n \n \n triggerType=\"click\"\n triggerType=\"hover\"\n \n
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".demo-ctl {\n background-color: #F1F1F1;\n border-left: 4px solid #0D599A;\n color: #0A7AC3;\n margin-bottom: 20px;\n padding: 5px;\n}\n.demo-ctl .next-radio-group {\n display: block;\n margin: 5px;\n}\n.custom-nav.next-hoz .next-nav-item {\n width: 100px;\n}\n.custom-nav.next-ver {\n width: 200px;\n}\n"},"body":"\n````jsx\nimport { Nav, Radio } from '@alifd/next';\n\n\nconst { Item, SubNav } = Nav;\n\nclass App extends React.Component {\n state = {\n type: 'normal',\n direction: 'hoz',\n activeDirection: null,\n triggerType: 'click'\n }\n\n setValue(name, value) {\n this.setState({\n [name]: value === '' ? null : value\n });\n }\n\n setTriggerType(triggerType) {\n this.setState({\n triggerType\n });\n }\n\n render() {\n const { type, direction, activeDirection, triggerType } = this.state;\n\n return (\n
\n
\n \n type=\"normal\"\n type=\"primary\"\n type=\"secondary\"\n type=\"line\"\n \n \n direction=\"hoz\"\n direction=\"ver\"\n \n \n activeDirection=null\n {direction === 'hoz' ? activeDirection=\"top\" : null}\n {direction === 'hoz' ? activeDirection=\"bottom\" : null}\n {direction === 'ver' ? activeDirection=\"left\" : null}\n {direction === 'ver' ? activeDirection=\"right\" : null}\n \n \n triggerType=\"click\"\n triggerType=\"hover\"\n \n
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo-ctl {\n background-color: #F1F1F1;\n border-left: 4px solid #0D599A;\n color: #0A7AC3;\n margin-bottom: 20px;\n padding: 5px;\n}\n.demo-ctl .next-radio-group {\n display: block;\n margin: 5px;\n}\n.custom-nav.next-hoz .next-nav-item {\n width: 100px;\n}\n.custom-nav.next-ver {\n width: 200px;\n}\n````","html":"
import { Nav, Radio } from '@alifd/next';\n\n\nconst { Item, SubNav } = Nav;\n\nclass App extends React.Component {\n    state = {\n        type: 'normal',\n        direction: 'hoz',\n        activeDirection: null,\n        triggerType: 'click'\n    }\n\n    setValue(name, value) {\n        this.setState({\n            [name]: value === '' ? null : value\n        });\n    }\n\n    setTriggerType(triggerType) {\n        this.setState({\n            triggerType\n        });\n    }\n\n    render() {\n        const { type, direction, activeDirection, triggerType } = this.state;\n\n        return (\n            <div>\n                <div className=\"demo-ctl\">\n                    <Radio.Group shape=\"button\" size=\"medium\" value={type} onChange={this.setValue.bind(this, 'type')}>\n                        <Radio value=\"normal\">type=\"normal\"</Radio>\n                        <Radio value=\"primary\">type=\"primary\"</Radio>\n                        <Radio value=\"secondary\">type=\"secondary\"</Radio>\n                        <Radio value=\"line\">type=\"line\"</Radio>\n                    </Radio.Group>\n                    <Radio.Group shape=\"button\" size=\"medium\" value={direction} onChange={this.setValue.bind(this, 'direction')}>\n                        <Radio value=\"hoz\">direction=\"hoz\"</Radio>\n                        <Radio value=\"ver\">direction=\"ver\"</Radio>\n                    </Radio.Group>\n                    <Radio.Group shape=\"button\" size=\"medium\" value={activeDirection === null ? '' : activeDirection} onChange={this.setValue.bind(this, 'activeDirection')}>\n                        <Radio value=\"\">activeDirection=null</Radio>\n                        {direction === 'hoz' ? <Radio value=\"top\">activeDirection=\"top\"</Radio> : null}\n                        {direction === 'hoz' ? <Radio value=\"bottom\">activeDirection=\"bottom\"</Radio> : null}\n                        {direction === 'ver' ? <Radio value=\"left\">activeDirection=\"left\"</Radio> : null}\n                        {direction === 'ver' ? <Radio value=\"right\">activeDirection=\"right\"</Radio> : null}\n                    </Radio.Group>\n                    <Radio.Group shape=\"button\" size=\"medium\" value={triggerType} onChange={this.setTriggerType.bind(this)}>\n                        <Radio value=\"click\">triggerType=\"click\"</Radio>\n                        <Radio value=\"hover\">triggerType=\"hover\"</Radio>\n                    </Radio.Group>\n                </div>\n                <Nav className=\"custom-nav\" type={type} direction={direction} activeDirection={activeDirection} triggerType={triggerType}>\n                    <Item>Item 1</Item>\n                    <Item>Item 2</Item>\n                    <SubNav label=\"Sub Nav\">\n                        <Item>Item 3</Item>\n                        <Item>Item 4</Item>\n                        <SubNav label=\"Sub Nav\">\n                            <Item>Item 5</Item>\n                            <Item>Item 6</Item>\n                        </SubNav>\n                    </SubNav>\n                    <Item icon=\"account\">\n                        <a href=\"http://www.taobao.com\" target=\"_blank\">Taobao</a>\n                    </Item>\n                </Nav>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App />, mountNode);
.demo-ctl {\n    background-color: #F1F1F1;\n    border-left: 4px solid #0D599A;\n    color: #0A7AC3;\n    margin-bottom: 20px;\n    padding: 5px;\n}\n.demo-ctl .next-radio-group {\n    display: block;\n    margin: 5px;\n}\n.custom-nav.next-hoz .next-nav-item {\n    width: 100px;\n}\n.custom-nav.next-ver {\n    width: 200px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/nav/demo/custom.md b/compiled_docs/nav/demo/custom.md new file mode 100644 index 0000000000..309868c431 --- /dev/null +++ b/compiled_docs/nav/demo/custom.md @@ -0,0 +1 @@ +{"title":"定制","meta":{"title":"定制","description":"\n

Nav 提供了丰富的配置，可以进行个性化定制。

\n","order":"1"},"codes":{"jsx":"import { Nav, Radio } from '@alifd/next';\n\n\nconst { Item, SubNav } = Nav;\n\nclass App extends React.Component {\n state = {\n type: 'normal',\n direction: 'hoz',\n activeDirection: null,\n triggerType: 'click'\n }\n\n setValue(name, value) {\n this.setState({\n [name]: value === '' ? null : value\n });\n }\n\n setTriggerType(triggerType) {\n this.setState({\n triggerType\n });\n }\n\n render() {\n const { type, direction, activeDirection, triggerType } = this.state;\n\n return (\n
\n
\n \n type=\"normal\"\n type=\"primary\"\n type=\"secondary\"\n type=\"line\"\n \n \n direction=\"hoz\"\n direction=\"ver\"\n \n \n activeDirection=null\n {direction === 'hoz' ? activeDirection=\"top\" : null}\n {direction === 'hoz' ? activeDirection=\"bottom\" : null}\n {direction === 'ver' ? activeDirection=\"left\" : null}\n {direction === 'ver' ? activeDirection=\"right\" : null}\n \n \n triggerType=\"click\"\n triggerType=\"hover\"\n \n
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".demo-ctl {\n background-color: #F1F1F1;\n border-left: 4px solid #0D599A;\n color: #0A7AC3;\n margin-bottom: 20px;\n padding: 5px;\n}\n.demo-ctl .next-radio-group {\n display: block;\n margin: 5px;\n}\n.custom-nav.next-hoz .next-nav-item {\n width: 100px;\n}\n.custom-nav.next-ver {\n width: 200px;\n}\n"},"body":"\n\n````jsx\nimport { Nav, Radio } from '@alifd/next';\n\n\nconst { Item, SubNav } = Nav;\n\nclass App extends React.Component {\n state = {\n type: 'normal',\n direction: 'hoz',\n activeDirection: null,\n triggerType: 'click'\n }\n\n setValue(name, value) {\n this.setState({\n [name]: value === '' ? null : value\n });\n }\n\n setTriggerType(triggerType) {\n this.setState({\n triggerType\n });\n }\n\n render() {\n const { type, direction, activeDirection, triggerType } = this.state;\n\n return (\n
\n
\n \n type=\"normal\"\n type=\"primary\"\n type=\"secondary\"\n type=\"line\"\n \n \n direction=\"hoz\"\n direction=\"ver\"\n \n \n activeDirection=null\n {direction === 'hoz' ? activeDirection=\"top\" : null}\n {direction === 'hoz' ? activeDirection=\"bottom\" : null}\n {direction === 'ver' ? activeDirection=\"left\" : null}\n {direction === 'ver' ? activeDirection=\"right\" : null}\n \n \n triggerType=\"click\"\n triggerType=\"hover\"\n \n
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo-ctl {\n background-color: #F1F1F1;\n border-left: 4px solid #0D599A;\n color: #0A7AC3;\n margin-bottom: 20px;\n padding: 5px;\n}\n.demo-ctl .next-radio-group {\n display: block;\n margin: 5px;\n}\n.custom-nav.next-hoz .next-nav-item {\n width: 100px;\n}\n.custom-nav.next-ver {\n width: 200px;\n}\n````","html":"
import { Nav, Radio } from '@alifd/next';\n\n\nconst { Item, SubNav } = Nav;\n\nclass App extends React.Component {\n    state = {\n        type: 'normal',\n        direction: 'hoz',\n        activeDirection: null,\n        triggerType: 'click'\n    }\n\n    setValue(name, value) {\n        this.setState({\n            [name]: value === '' ? null : value\n        });\n    }\n\n    setTriggerType(triggerType) {\n        this.setState({\n            triggerType\n        });\n    }\n\n    render() {\n        const { type, direction, activeDirection, triggerType } = this.state;\n\n        return (\n            <div>\n                <div className=\"demo-ctl\">\n                    <Radio.Group shape=\"button\" size=\"medium\" value={type} onChange={this.setValue.bind(this, 'type')}>\n                        <Radio value=\"normal\">type=\"normal\"</Radio>\n                        <Radio value=\"primary\">type=\"primary\"</Radio>\n                        <Radio value=\"secondary\">type=\"secondary\"</Radio>\n                        <Radio value=\"line\">type=\"line\"</Radio>\n                    </Radio.Group>\n                    <Radio.Group shape=\"button\" size=\"medium\" value={direction} onChange={this.setValue.bind(this, 'direction')}>\n                        <Radio value=\"hoz\">direction=\"hoz\"</Radio>\n                        <Radio value=\"ver\">direction=\"ver\"</Radio>\n                    </Radio.Group>\n                    <Radio.Group shape=\"button\" size=\"medium\" value={activeDirection === null ? '' : activeDirection} onChange={this.setValue.bind(this, 'activeDirection')}>\n                        <Radio value=\"\">activeDirection=null</Radio>\n                        {direction === 'hoz' ? <Radio value=\"top\">activeDirection=\"top\"</Radio> : null}\n                        {direction === 'hoz' ? <Radio value=\"bottom\">activeDirection=\"bottom\"</Radio> : null}\n                        {direction === 'ver' ? <Radio value=\"left\">activeDirection=\"left\"</Radio> : null}\n                        {direction === 'ver' ? <Radio value=\"right\">activeDirection=\"right\"</Radio> : null}\n                    </Radio.Group>\n                    <Radio.Group shape=\"button\" size=\"medium\" value={triggerType} onChange={this.setTriggerType.bind(this)}>\n                        <Radio value=\"click\">triggerType=\"click\"</Radio>\n                        <Radio value=\"hover\">triggerType=\"hover\"</Radio>\n                    </Radio.Group>\n                </div>\n                <Nav className=\"custom-nav\" type={type} direction={direction} activeDirection={activeDirection} triggerType={triggerType}>\n                    <Item>Item 1</Item>\n                    <Item>Item 2</Item>\n                    <SubNav label=\"Sub Nav\">\n                        <Item>Item 3</Item>\n                        <Item>Item 4</Item>\n                        <SubNav label=\"Sub Nav\">\n                            <Item>Item 5</Item>\n                            <Item>Item 6</Item>\n                        </SubNav>\n                    </SubNav>\n                    <Item icon=\"account\">\n                        <a href=\"http://www.taobao.com\" target=\"_blank\">Taobao</a>\n                    </Item>\n                </Nav>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App />, mountNode);
.demo-ctl {\n    background-color: #F1F1F1;\n    border-left: 4px solid #0D599A;\n    color: #0A7AC3;\n    margin-bottom: 20px;\n    padding: 5px;\n}\n.demo-ctl .next-radio-group {\n    display: block;\n    margin: 5px;\n}\n.custom-nav.next-hoz .next-nav-item {\n    width: 100px;\n}\n.custom-nav.next-ver {\n    width: 200px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/nav/demo/group.en-us.md b/compiled_docs/nav/demo/group.en-us.md new file mode 100644 index 0000000000..45edce027f --- /dev/null +++ b/compiled_docs/nav/demo/group.en-us.md @@ -0,0 +1 @@ +{"title":"Group","meta":{"title":"Group","description":"\n

Nav could set the iconOnly property to reduce the footprint.

\n","order":"3"},"codes":{"jsx":"import { Nav } from '@alifd/next';\n\nconst { Item, Group } = Nav;\n\nReactDOM.render(\n , mountNode);\n"},"body":"\n````jsx\nimport { Nav } from '@alifd/next';\n\nconst { Item, Group } = Nav;\n\nReactDOM.render(\n , mountNode);\n````","html":"
import { Nav } from '@alifd/next';\n\nconst { Item, Group } = Nav;\n\nReactDOM.render(\n    <Nav style={{ width: 240 }}>\n        <Group label=\"Group Label 1\">\n            <Item icon=\"account\">Navigation One</Item>\n            <Item icon=\"account\">Navigation Two</Item>\n            <Item icon=\"account\">Navigation Three</Item>\n        </Group>\n        <Group label=\"Group Label 2\">\n            <Item icon=\"account\">Navigation Four</Item>\n            <Item icon=\"account\">Navigation Five</Item>\n            <Item icon=\"account\">Navigation Six</Item>\n        </Group>\n    </Nav>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/nav/demo/group.md b/compiled_docs/nav/demo/group.md new file mode 100644 index 0000000000..71dede9b76 --- /dev/null +++ b/compiled_docs/nav/demo/group.md @@ -0,0 +1 @@ +{"title":"分组","meta":{"title":"分组","description":"\n

建议只在垂直布局中使用。

\n","order":"3"},"codes":{"jsx":"import { Nav } from '@alifd/next';\n\nconst { Item, Group } = Nav;\n\nReactDOM.render(\n , mountNode);\n"},"body":"\n\n````jsx\nimport { Nav } from '@alifd/next';\n\nconst { Item, Group } = Nav;\n\nReactDOM.render(\n , mountNode);\n````","html":"
import { Nav } from '@alifd/next';\n\nconst { Item, Group } = Nav;\n\nReactDOM.render(\n    <Nav style={{ width: 240 }}>\n        <Group label=\"Group Label 1\">\n            <Item icon=\"account\">Navigation One</Item>\n            <Item icon=\"account\">Navigation Two</Item>\n            <Item icon=\"account\">Navigation Three</Item>\n        </Group>\n        <Group label=\"Group Label 2\">\n            <Item icon=\"account\">Navigation Four</Item>\n            <Item icon=\"account\">Navigation Five</Item>\n            <Item icon=\"account\">Navigation Six</Item>\n        </Group>\n    </Nav>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/nav/demo/icon-only.en-us.md b/compiled_docs/nav/demo/icon-only.en-us.md new file mode 100644 index 0000000000..9597781325 --- /dev/null +++ b/compiled_docs/nav/demo/icon-only.en-us.md @@ -0,0 +1 @@ +{"title":"Only show icon","meta":{"title":"Only show icon","description":"\n

Nav could set the iconOnly property to reduce the footprint.

\n","order":"2"},"codes":{"jsx":"import { Nav, Radio } from '@alifd/next';\n\n\nconst { Item, SubNav } = Nav;\n\nclass App extends React.Component {\n state = {\n iconOnly: false,\n hasTooltip: true,\n hasArrow: true\n }\n\n setValue(name, value) {\n this.setState({\n [name]: value === 'true'\n });\n }\n\n render() {\n const { iconOnly, hasTooltip, hasArrow } = this.state;\n\n return (\n
\n
\n \n iconOnly=true\n iconOnly=false\n \n {iconOnly ?\n \n hasArrow=true\n hasArrow=false\n : null}\n {iconOnly ?\n \n hasTooltip=true\n hasTooltip=false\n : null}\n
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".demo-ctl {\n background-color: #F1F1F1;\n border-left: 4px solid #0D599A;\n color: #0A7AC3;\n margin-bottom: 20px;\n padding: 5px;\n}\n.demo-ctl .next-radio-group {\n margin: 5px;\n}\n"},"body":"\n````jsx\nimport { Nav, Radio } from '@alifd/next';\n\n\nconst { Item, SubNav } = Nav;\n\nclass App extends React.Component {\n state = {\n iconOnly: false,\n hasTooltip: true,\n hasArrow: true\n }\n\n setValue(name, value) {\n this.setState({\n [name]: value === 'true'\n });\n }\n\n render() {\n const { iconOnly, hasTooltip, hasArrow } = this.state;\n\n return (\n
\n
\n \n iconOnly=true\n iconOnly=false\n \n {iconOnly ?\n \n hasArrow=true\n hasArrow=false\n : null}\n {iconOnly ?\n \n hasTooltip=true\n hasTooltip=false\n : null}\n
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo-ctl {\n background-color: #F1F1F1;\n border-left: 4px solid #0D599A;\n color: #0A7AC3;\n margin-bottom: 20px;\n padding: 5px;\n}\n.demo-ctl .next-radio-group {\n margin: 5px;\n}\n````","html":"
import { Nav, Radio } from '@alifd/next';\n\n\nconst { Item, SubNav } = Nav;\n\nclass App extends React.Component {\n    state = {\n        iconOnly: false,\n        hasTooltip: true,\n        hasArrow: true\n    }\n\n    setValue(name, value) {\n        this.setState({\n            [name]: value === 'true'\n        });\n    }\n\n    render() {\n        const { iconOnly, hasTooltip, hasArrow } = this.state;\n\n        return (\n            <div>\n                <div className=\"demo-ctl\">\n                    <Radio.Group shape=\"button\" size=\"medium\" value={iconOnly ? 'true' : 'false'} onChange={this.setValue.bind(this, 'iconOnly')}>\n                        <Radio value=\"true\">iconOnly=true</Radio>\n                        <Radio value=\"false\">iconOnly=false</Radio>\n                    </Radio.Group>\n                    {iconOnly ?\n                        <Radio.Group shape=\"button\" size=\"medium\" value={hasArrow ? 'true' : 'false'} onChange={this.setValue.bind(this, 'hasArrow')}>\n                            <Radio value=\"true\">hasArrow=true</Radio>\n                            <Radio value=\"false\">hasArrow=false</Radio>\n                        </Radio.Group> : null}\n                    {iconOnly ?\n                        <Radio.Group shape=\"button\" size=\"medium\" value={hasTooltip ? 'true' : 'false'} onChange={this.setValue.bind(this, 'hasTooltip')}>\n                            <Radio value=\"true\">hasTooltip=true</Radio>\n                            <Radio value=\"false\">hasTooltip=false</Radio>\n                        </Radio.Group> : null}\n                </div>\n                <Nav style={{ width: '200px' }} iconOnly={iconOnly} hasArrow={hasArrow} hasTooltip={hasTooltip}>\n                    <Item icon=\"account\">Navigation One</Item>\n                    <Item icon=\"account\">Navigation Two</Item>\n                    <Item icon=\"account\">Navigation Three</Item>\n                    <Item icon=\"account\">Navigation Four</Item>\n                    <Item icon=\"account\">Navigation Five</Item>\n                    <SubNav icon=\"account\" label=\"Sub Nav\">\n                        <Item icon=\"account\">Item 1</Item>\n                        <Item icon=\"account\">Item 2</Item>\n                        <Item icon=\"account\">Item 3</Item>\n                        <Item icon=\"account\">Item 4</Item>\n                    </SubNav>\n                </Nav>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App />, mountNode);
.demo-ctl {\n    background-color: #F1F1F1;\n    border-left: 4px solid #0D599A;\n    color: #0A7AC3;\n    margin-bottom: 20px;\n    padding: 5px;\n}\n.demo-ctl .next-radio-group {\n    margin: 5px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/nav/demo/icon-only.md b/compiled_docs/nav/demo/icon-only.md new file mode 100644 index 0000000000..75d5130fac --- /dev/null +++ b/compiled_docs/nav/demo/icon-only.md @@ -0,0 +1 @@ +{"title":"只显示图标","meta":{"title":"只显示图标","description":"\n

Nav 可设置 iconOnly 属性，只显示图标，以减少占用空间。

\n","order":"2"},"codes":{"jsx":"import { Nav, Radio } from '@alifd/next';\n\n\nconst { Item, SubNav } = Nav;\n\nclass App extends React.Component {\n state = {\n iconOnly: false,\n hasTooltip: true,\n hasArrow: true\n }\n\n setValue(name, value) {\n this.setState({\n [name]: value === 'true'\n });\n }\n\n render() {\n const { iconOnly, hasTooltip, hasArrow } = this.state;\n\n return (\n
\n
\n \n iconOnly=true\n iconOnly=false\n \n {iconOnly ?\n \n hasArrow=true\n hasArrow=false\n : null}\n {iconOnly ?\n \n hasTooltip=true\n hasTooltip=false\n : null}\n
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".demo-ctl {\n background-color: #F1F1F1;\n border-left: 4px solid #0D599A;\n color: #0A7AC3;\n margin-bottom: 20px;\n padding: 5px;\n}\n.demo-ctl .next-radio-group {\n margin: 5px;\n}\n"},"body":"\n\n````jsx\nimport { Nav, Radio } from '@alifd/next';\n\n\nconst { Item, SubNav } = Nav;\n\nclass App extends React.Component {\n state = {\n iconOnly: false,\n hasTooltip: true,\n hasArrow: true\n }\n\n setValue(name, value) {\n this.setState({\n [name]: value === 'true'\n });\n }\n\n render() {\n const { iconOnly, hasTooltip, hasArrow } = this.state;\n\n return (\n
\n
\n \n iconOnly=true\n iconOnly=false\n \n {iconOnly ?\n \n hasArrow=true\n hasArrow=false\n : null}\n {iconOnly ?\n \n hasTooltip=true\n hasTooltip=false\n : null}\n
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo-ctl {\n background-color: #F1F1F1;\n border-left: 4px solid #0D599A;\n color: #0A7AC3;\n margin-bottom: 20px;\n padding: 5px;\n}\n.demo-ctl .next-radio-group {\n margin: 5px;\n}\n````","html":"
import { Nav, Radio } from '@alifd/next';\n\n\nconst { Item, SubNav } = Nav;\n\nclass App extends React.Component {\n    state = {\n        iconOnly: false,\n        hasTooltip: true,\n        hasArrow: true\n    }\n\n    setValue(name, value) {\n        this.setState({\n            [name]: value === 'true'\n        });\n    }\n\n    render() {\n        const { iconOnly, hasTooltip, hasArrow } = this.state;\n\n        return (\n            <div>\n                <div className=\"demo-ctl\">\n                    <Radio.Group shape=\"button\" size=\"medium\" value={iconOnly ? 'true' : 'false'} onChange={this.setValue.bind(this, 'iconOnly')}>\n                        <Radio value=\"true\">iconOnly=true</Radio>\n                        <Radio value=\"false\">iconOnly=false</Radio>\n                    </Radio.Group>\n                    {iconOnly ?\n                        <Radio.Group shape=\"button\" size=\"medium\" value={hasArrow ? 'true' : 'false'} onChange={this.setValue.bind(this, 'hasArrow')}>\n                            <Radio value=\"true\">hasArrow=true</Radio>\n                            <Radio value=\"false\">hasArrow=false</Radio>\n                        </Radio.Group> : null}\n                    {iconOnly ?\n                        <Radio.Group shape=\"button\" size=\"medium\" value={hasTooltip ? 'true' : 'false'} onChange={this.setValue.bind(this, 'hasTooltip')}>\n                            <Radio value=\"true\">hasTooltip=true</Radio>\n                            <Radio value=\"false\">hasTooltip=false</Radio>\n                        </Radio.Group> : null}\n                </div>\n                <Nav style={{ width: '200px' }} iconOnly={iconOnly} hasArrow={hasArrow} hasTooltip={hasTooltip}>\n                    <Item icon=\"account\">Navigation One</Item>\n                    <Item icon=\"account\">Navigation Two</Item>\n                    <Item icon=\"account\">Navigation Three</Item>\n                    <Item icon=\"account\">Navigation Four</Item>\n                    <Item icon=\"account\">Navigation Five</Item>\n                    <SubNav icon=\"account\" label=\"Sub Nav\">\n                        <Item icon=\"account\">Item 1</Item>\n                        <Item icon=\"account\">Item 2</Item>\n                        <Item icon=\"account\">Item 3</Item>\n                        <Item icon=\"account\">Item 4</Item>\n                    </SubNav>\n                </Nav>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App />, mountNode);
.demo-ctl {\n    background-color: #F1F1F1;\n    border-left: 4px solid #0D599A;\n    color: #0A7AC3;\n    margin-bottom: 20px;\n    padding: 5px;\n}\n.demo-ctl .next-radio-group {\n    margin: 5px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/nav/demo/open-mode.en-us.md b/compiled_docs/nav/demo/open-mode.en-us.md new file mode 100644 index 0000000000..6db160ff4b --- /dev/null +++ b/compiled_docs/nav/demo/open-mode.en-us.md @@ -0,0 +1 @@ +{"title":"Open mode","meta":{"title":"Open mode","description":"\n

When yout set mode of Nav to inline, openMode could controls the number of expanded sub navigation at same time.

\n","order":"4"},"codes":{"jsx":"import { Nav, Radio } from '@alifd/next';\n\nconst { Item, SubNav } = Nav;\n\nclass App extends React.Component {\n state = {\n openMode: 'single'\n }\n\n setValue(openMode) {\n this.setState({\n openMode\n });\n }\n\n render() {\n const { openMode } = this.state;\n\n return (\n
\n
\n \n openMode=\"single\"\n openMode=\"multiple\"\n \n
\n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".demo-ctl {\n background-color: #F1F1F1;\n border-left: 4px solid #0D599A;\n color: #0A7AC3;\n margin-bottom: 20px;\n padding: 5px;\n}\n.demo-ctl .next-radio-group {\n margin: 5px;\n}\n"},"body":"\n````jsx\nimport { Nav, Radio } from '@alifd/next';\n\nconst { Item, SubNav } = Nav;\n\nclass App extends React.Component {\n state = {\n openMode: 'single'\n }\n\n setValue(openMode) {\n this.setState({\n openMode\n });\n }\n\n render() {\n const { openMode } = this.state;\n\n return (\n
\n
\n \n openMode=\"single\"\n openMode=\"multiple\"\n \n
\n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo-ctl {\n background-color: #F1F1F1;\n border-left: 4px solid #0D599A;\n color: #0A7AC3;\n margin-bottom: 20px;\n padding: 5px;\n}\n.demo-ctl .next-radio-group {\n margin: 5px;\n}\n````","html":"
import { Nav, Radio } from '@alifd/next';\n\nconst { Item, SubNav } = Nav;\n\nclass App extends React.Component {\n    state = {\n        openMode: 'single'\n    }\n\n    setValue(openMode) {\n        this.setState({\n            openMode\n        });\n    }\n\n    render() {\n        const { openMode } = this.state;\n\n        return (\n            <div>\n                <div className=\"demo-ctl\">\n                    <Radio.Group shape=\"button\" size=\"medium\" value={openMode} onChange={this.setValue.bind(this)}>\n                        <Radio value=\"single\">openMode=\"single\"</Radio>\n                        <Radio value=\"multiple\">openMode=\"multiple\"</Radio>\n                    </Radio.Group>\n                </div>\n                <Nav style={{ width: 240 }} openMode={openMode}>\n                    <SubNav label=\"Sub Nav 1\">\n                        <Item>Item 1</Item>\n                    </SubNav>\n                    <SubNav label=\"Sub Nav 2\">\n                        <Item>Item 1</Item>\n                        <Item>Item 2</Item>\n                        <SubNav label=\"Sub Nav 1\">\n                            <Item>Item 1</Item>\n                            <Item>Item 2</Item>\n                        </SubNav>\n                        <SubNav label=\"Sub Nav 2\">\n                            <Item>Item 1</Item>\n                            <Item>Item 2</Item>\n                        </SubNav>\n                    </SubNav>\n                    <SubNav label=\"Sub Nav 3\">\n                        <Item>Item 1</Item>\n                        <Item>Item 2</Item>\n                        <Item>Item 3</Item>\n                        <SubNav label=\"Sub Nav 1\">\n                            <Item>Item 1</Item>\n                            <Item>Item 2</Item>\n                            <Item>Item 3</Item>\n                        </SubNav>\n                        <SubNav label=\"Sub Nav 2\">\n                            <Item>Item 1</Item>\n                            <Item>Item 2</Item>\n                            <Item>Item 3</Item>\n                        </SubNav>\n                        <SubNav label=\"Sub Nav 3\">\n                            <Item>Item 1</Item>\n                            <Item>Item 2</Item>\n                            <Item>Item 3</Item>\n                        </SubNav>\n                    </SubNav>\n                    <Item>Item</Item>\n                </Nav>\n            </div>);\n    }\n}\n\nReactDOM.render(<App />, mountNode);
.demo-ctl {\n    background-color: #F1F1F1;\n    border-left: 4px solid #0D599A;\n    color: #0A7AC3;\n    margin-bottom: 20px;\n    padding: 5px;\n}\n.demo-ctl .next-radio-group {\n    margin: 5px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/nav/demo/open-mode.md b/compiled_docs/nav/demo/open-mode.md new file mode 100644 index 0000000000..78accc7726 --- /dev/null +++ b/compiled_docs/nav/demo/open-mode.md @@ -0,0 +1 @@ +{"title":"展开模式","meta":{"title":"展开模式","description":"\n

当 Nav 的 mode="inline" 时，openMode 可控制同级内联子导航的展开数量。

\n","order":"4"},"codes":{"jsx":"import { Nav, Radio } from '@alifd/next';\n\nconst { Item, SubNav } = Nav;\n\nclass App extends React.Component {\n state = {\n openMode: 'single'\n }\n\n setValue(openMode) {\n this.setState({\n openMode\n });\n }\n\n render() {\n const { openMode } = this.state;\n\n return (\n
\n
\n \n openMode=\"single\"\n openMode=\"multiple\"\n \n
\n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".demo-ctl {\n background-color: #F1F1F1;\n border-left: 4px solid #0D599A;\n color: #0A7AC3;\n margin-bottom: 20px;\n padding: 5px;\n}\n.demo-ctl .next-radio-group {\n margin: 5px;\n}\n"},"body":"\n\n````jsx\nimport { Nav, Radio } from '@alifd/next';\n\nconst { Item, SubNav } = Nav;\n\nclass App extends React.Component {\n state = {\n openMode: 'single'\n }\n\n setValue(openMode) {\n this.setState({\n openMode\n });\n }\n\n render() {\n const { openMode } = this.state;\n\n return (\n
\n
\n \n openMode=\"single\"\n openMode=\"multiple\"\n \n
\n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo-ctl {\n background-color: #F1F1F1;\n border-left: 4px solid #0D599A;\n color: #0A7AC3;\n margin-bottom: 20px;\n padding: 5px;\n}\n.demo-ctl .next-radio-group {\n margin: 5px;\n}\n````","html":"
import { Nav, Radio } from '@alifd/next';\n\nconst { Item, SubNav } = Nav;\n\nclass App extends React.Component {\n    state = {\n        openMode: 'single'\n    }\n\n    setValue(openMode) {\n        this.setState({\n            openMode\n        });\n    }\n\n    render() {\n        const { openMode } = this.state;\n\n        return (\n            <div>\n                <div className=\"demo-ctl\">\n                    <Radio.Group shape=\"button\" size=\"medium\" value={openMode} onChange={this.setValue.bind(this)}>\n                        <Radio value=\"single\">openMode=\"single\"</Radio>\n                        <Radio value=\"multiple\">openMode=\"multiple\"</Radio>\n                    </Radio.Group>\n                </div>\n                <Nav style={{ width: 240 }} openMode={openMode}>\n                    <SubNav label=\"Sub Nav 1\">\n                        <Item>Item 1</Item>\n                    </SubNav>\n                    <SubNav label=\"Sub Nav 2\">\n                        <Item>Item 1</Item>\n                        <Item>Item 2</Item>\n                        <SubNav label=\"Sub Nav 1\">\n                            <Item>Item 1</Item>\n                            <Item>Item 2</Item>\n                        </SubNav>\n                        <SubNav label=\"Sub Nav 2\">\n                            <Item>Item 1</Item>\n                            <Item>Item 2</Item>\n                        </SubNav>\n                    </SubNav>\n                    <SubNav label=\"Sub Nav 3\">\n                        <Item>Item 1</Item>\n                        <Item>Item 2</Item>\n                        <Item>Item 3</Item>\n                        <SubNav label=\"Sub Nav 1\">\n                            <Item>Item 1</Item>\n                            <Item>Item 2</Item>\n                            <Item>Item 3</Item>\n                        </SubNav>\n                        <SubNav label=\"Sub Nav 2\">\n                            <Item>Item 1</Item>\n                            <Item>Item 2</Item>\n                            <Item>Item 3</Item>\n                        </SubNav>\n                        <SubNav label=\"Sub Nav 3\">\n                            <Item>Item 1</Item>\n                            <Item>Item 2</Item>\n                            <Item>Item 3</Item>\n                        </SubNav>\n                    </SubNav>\n                    <Item>Item</Item>\n                </Nav>\n            </div>);\n    }\n}\n\nReactDOM.render(<App />, mountNode);
.demo-ctl {\n    background-color: #F1F1F1;\n    border-left: 4px solid #0D599A;\n    color: #0A7AC3;\n    margin-bottom: 20px;\n    padding: 5px;\n}\n.demo-ctl .next-radio-group {\n    margin: 5px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/nav/demo/popup-align.en-us.md b/compiled_docs/nav/demo/popup-align.en-us.md new file mode 100644 index 0000000000..b9dc174862 --- /dev/null +++ b/compiled_docs/nav/demo/popup-align.en-us.md @@ -0,0 +1 @@ +{"title":"Popup alignment","meta":{"title":"Popup alignment","description":"\n

When you set mode of Nav to popup, popAlign could controls the alignment of the pop sub navigation.

\n","order":"5"},"codes":{"jsx":"import { Nav, Radio } from '@alifd/next';\n\nconst { Item, SubNav } = Nav;\n\nclass App extends React.Component {\n state = {\n popupAlign: 'follow'\n }\n\n setValue(popupAlign) {\n this.setState({\n popupAlign\n });\n }\n\n render() {\n const { popupAlign } = this.state;\n\n return (\n
\n
\n \n popupAlign=\"follow\"\n popupAlign=\"outside\"\n \n
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".demo-ctl {\n background-color: #F1F1F1;\n border-left: 4px solid #0D599A;\n color: #0A7AC3;\n margin-bottom: 20px;\n padding: 5px;\n}\n.demo-ctl .next-radio-group {\n margin: 5px;\n}\n"},"body":"\n````jsx\nimport { Nav, Radio } from '@alifd/next';\n\nconst { Item, SubNav } = Nav;\n\nclass App extends React.Component {\n state = {\n popupAlign: 'follow'\n }\n\n setValue(popupAlign) {\n this.setState({\n popupAlign\n });\n }\n\n render() {\n const { popupAlign } = this.state;\n\n return (\n
\n
\n \n popupAlign=\"follow\"\n popupAlign=\"outside\"\n \n
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo-ctl {\n background-color: #F1F1F1;\n border-left: 4px solid #0D599A;\n color: #0A7AC3;\n margin-bottom: 20px;\n padding: 5px;\n}\n.demo-ctl .next-radio-group {\n margin: 5px;\n}\n````","html":"
import { Nav, Radio } from '@alifd/next';\n\nconst { Item, SubNav } = Nav;\n\nclass App extends React.Component {\n    state = {\n        popupAlign: 'follow'\n    }\n\n    setValue(popupAlign) {\n        this.setState({\n            popupAlign\n        });\n    }\n\n    render() {\n        const { popupAlign } = this.state;\n\n        return (\n            <div>\n                <div className=\"demo-ctl\">\n                    <Radio.Group shape=\"button\" size=\"medium\" value={popupAlign} onChange={this.setValue.bind(this)}>\n                        <Radio value=\"follow\">popupAlign=\"follow\"</Radio>\n                        <Radio value=\"outside\">popupAlign=\"outside\"</Radio>\n                    </Radio.Group>\n                </div>\n                <Nav style={{ height: 400, width: 240 }} mode=\"popup\" popupAlign={popupAlign} defaultOpenKeys={['sub-nav-2']}>\n                    <SubNav key=\"sub-nav-1\"label=\"Sub Nav 1\">\n                        <Item key=\"1\">Item 1</Item>\n                    </SubNav>\n                    <SubNav key=\"sub-nav-2\" label=\"Sub Nav 2\">\n                        <Item key=\"1\">Item 1</Item>\n                        <Item key=\"2\">Item 2</Item>\n                    </SubNav>\n                    <SubNav key=\"sub-nav-3\" label=\"Sub Nav 3\">\n                        <Item key=\"1\">Item 1</Item>\n                        <Item key=\"2\">Item 2</Item>\n                        <Item key=\"3\">Item 3</Item>\n                    </SubNav>\n                    <SubNav key=\"sub-nav-4\" label=\"Sub Nav 4\">\n                        <Item key=\"1\">Item 1</Item>\n                        <Item key=\"2\">Item 2</Item>\n                        <Item key=\"3\">Item 3</Item>\n                        <Item key=\"4\">Item 4</Item>\n                    </SubNav>\n                </Nav>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App />, mountNode);
.demo-ctl {\n    background-color: #F1F1F1;\n    border-left: 4px solid #0D599A;\n    color: #0A7AC3;\n    margin-bottom: 20px;\n    padding: 5px;\n}\n.demo-ctl .next-radio-group {\n    margin: 5px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/nav/demo/popup-align.md b/compiled_docs/nav/demo/popup-align.md new file mode 100644 index 0000000000..9d5a44b6b2 --- /dev/null +++ b/compiled_docs/nav/demo/popup-align.md @@ -0,0 +1 @@ +{"title":"对齐方式","meta":{"title":"对齐方式","description":"\n

当 Nav 的 mode="popup" 时，popAlign 可控制弹出子导航的对齐方式。

\n","order":"5"},"codes":{"jsx":"import { Nav, Radio } from '@alifd/next';\n\nconst { Item, SubNav } = Nav;\n\nclass App extends React.Component {\n state = {\n popupAlign: 'follow'\n }\n\n setValue(popupAlign) {\n this.setState({\n popupAlign\n });\n }\n\n render() {\n const { popupAlign } = this.state;\n\n return (\n
\n
\n \n popupAlign=\"follow\"\n popupAlign=\"outside\"\n \n
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".demo-ctl {\n background-color: #F1F1F1;\n border-left: 4px solid #0D599A;\n color: #0A7AC3;\n margin-bottom: 20px;\n padding: 5px;\n}\n.demo-ctl .next-radio-group {\n margin: 5px;\n}\n"},"body":"\n\n````jsx\nimport { Nav, Radio } from '@alifd/next';\n\nconst { Item, SubNav } = Nav;\n\nclass App extends React.Component {\n state = {\n popupAlign: 'follow'\n }\n\n setValue(popupAlign) {\n this.setState({\n popupAlign\n });\n }\n\n render() {\n const { popupAlign } = this.state;\n\n return (\n
\n
\n \n popupAlign=\"follow\"\n popupAlign=\"outside\"\n \n
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo-ctl {\n background-color: #F1F1F1;\n border-left: 4px solid #0D599A;\n color: #0A7AC3;\n margin-bottom: 20px;\n padding: 5px;\n}\n.demo-ctl .next-radio-group {\n margin: 5px;\n}\n````","html":"
import { Nav, Radio } from '@alifd/next';\n\nconst { Item, SubNav } = Nav;\n\nclass App extends React.Component {\n    state = {\n        popupAlign: 'follow'\n    }\n\n    setValue(popupAlign) {\n        this.setState({\n            popupAlign\n        });\n    }\n\n    render() {\n        const { popupAlign } = this.state;\n\n        return (\n            <div>\n                <div className=\"demo-ctl\">\n                    <Radio.Group shape=\"button\" size=\"medium\" value={popupAlign} onChange={this.setValue.bind(this)}>\n                        <Radio value=\"follow\">popupAlign=\"follow\"</Radio>\n                        <Radio value=\"outside\">popupAlign=\"outside\"</Radio>\n                    </Radio.Group>\n                </div>\n                <Nav style={{ height: 400, width: 240 }} mode=\"popup\" popupAlign={popupAlign} defaultOpenKeys={['sub-nav-2']}>\n                    <SubNav key=\"sub-nav-1\"label=\"Sub Nav 1\">\n                        <Item key=\"1\">Item 1</Item>\n                    </SubNav>\n                    <SubNav key=\"sub-nav-2\" label=\"Sub Nav 2\">\n                        <Item key=\"1\">Item 1</Item>\n                        <Item key=\"2\">Item 2</Item>\n                    </SubNav>\n                    <SubNav key=\"sub-nav-3\" label=\"Sub Nav 3\">\n                        <Item key=\"1\">Item 1</Item>\n                        <Item key=\"2\">Item 2</Item>\n                        <Item key=\"3\">Item 3</Item>\n                    </SubNav>\n                    <SubNav key=\"sub-nav-4\" label=\"Sub Nav 4\">\n                        <Item key=\"1\">Item 1</Item>\n                        <Item key=\"2\">Item 2</Item>\n                        <Item key=\"3\">Item 3</Item>\n                        <Item key=\"4\">Item 4</Item>\n                    </SubNav>\n                </Nav>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App />, mountNode);
.demo-ctl {\n    background-color: #F1F1F1;\n    border-left: 4px solid #0D599A;\n    color: #0A7AC3;\n    margin-bottom: 20px;\n    padding: 5px;\n}\n.demo-ctl .next-radio-group {\n    margin: 5px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/nav/index.en-us.md b/compiled_docs/nav/index.en-us.md new file mode 100644 index 0000000000..a03909620e --- /dev/null +++ b/compiled_docs/nav/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Guide#

When To Use#

It provides top navigation and side navigation, the top navigation provides global categories and functions, and the side navigation provides a multi-level structure to store and arrange the site architecture.

\n

Note#

    \n

  • iconOnly only works with the vertical direction.

    \n
    • \n

  • The property of Nav inherits from Menu, so in addition to special instructions, you can use the API of Menu.

    \n
    • \n
\n

API#

","api":"

Nav#

\n

The API inherits from Menu, please look at the Menu document

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
childrennavigation item and sub navigationReactNode-
typetype of navigation

option:
'normal'
'primary'
'secondary'
'line'		Enum'normal'
directionlayout of navigation

option:
'hoz'
'ver'		Enum'ver'
hozAlignalignment of items in the horizontal nav bar, only works when direction is set to 'hoz' and the header exists

options:
'left', 'right'		Enum'left'
activeDirectionthe active border direction of the selected item

option:
null
'top'
'bottom'
'left'
'right'		Enumwhen direction is 'hoz', the default value is 'bottom'. When direction is 'ver', the default value is 'left'.
modesub navigation open mode (horizontal navigation only supports pop up)

option:
'inline', 'popup'		Enum'inline'
triggerTypesub navigation open trigger

option:
'click', 'hover'		Enum'click'
inlineIndentinline sub navigation indent distanceNumber20
defaultOpenAllopen all subnavs default, only when mode is set to 'inline' and openMode is set to 'multiple'Booleanfalse
openModethe open mode of inline sub navigation, expand a peer navigation or multiple navigations at the same level at same time, it only works in inline mode

option:
'single', 'multiple'		Enum'multiple'
selectedKeyskeys of selected nav item currentlyString/Array-
defaultSelectedKeyskeys of selected nav item in defaultString/Array[]
onSelectcallback function triggered when select or unselect nav item

signatures:
Function(selectedKeys: Array, item: Object, extra: Object) => void
params:
selectedKeys: {Array} keys of selected nav item
item: {Object} current operation nav item
extra: {Object} extra params
extra.select: {Boolean} whether is selected
extra.key: {Array} key of current operation nav item
extra.label: {Object} label of current operation nav item
extra.keyPath: {Array} key path of current operation nav item		Function() => {}
popupAlignpop up sub navigation alignment (horizontal navigation only supports follow)

option:
'follow', 'outside'		Enum'follow'
popupClassNamepop up navigation custom class nameString-
iconOnlywhether to show only iconsBoolean-
hasArrowwhether to display the right arrow (only works when iconOnly=true)Booleantrue
hasTooltipwhether has tool tip (only works when iconOnly=true)Booleanfalse
headercustom navigation headReactNode-
footercustom navigation footerReactNode-
embeddableintegrate with the background or not(which means no background/border/box-shadow etc.), usually used with Layout. You can also custom its height like<Nav style={{lineHeight: '100px'}}>Booleanfalse
\n

Nav.Group#

\n

The API inherits from Menu.Group, please look at the Menu.Group document

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
labelcontent of labelReactNode-
childrennavigation item and sub navigationReactNode-
\n

Nav.Item#

\n

The API inherits from Menu.Item, please look at the Menu.Item document

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
iconcustom icon, it can be type of Icon or such as <Icon type="icon type" />String/ReactNode-
childrencontent of navigation itemReactNode-
\n

Nav.PopupItem#

\n

The API inherits from Menu.PopupItem, please look at the Menu.PopupItem document

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
iconcustom icon, it can be type of Icon or such as <Icon type="icon type" />String/ReactNode-
labelcontent of labelReactNode-
childrenpopup contentReactNode-
\n

Nav.SubNav#

\n

The API inherits from Menu.SubMenu, please look at the Menu.SubMenu document

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
iconcustom icon, it can be type of Icon or such as <Icon type="icon type" />String/ReactNode-
labelcontent of labelReactNode-
selectablewhether is selectableBooleanfalse
childrennavigation item and sub navigationReactNode-
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyBoardDescripiton
Up Arrownavigate to previous item
Down Arrownavigate to next item
Right Arrowopen the submenu, navigate to the first item of the submenu; horizontal menu bar first level, navigate to the right one
Left Arrowclose the submenu, navigate to the parent menu; horizontal menu bar first level, navigation to the left one
Enteropen submenu and navigate to the first item of the submenu
Escclose submenu and navigate to the parent menu item
\n"} \ No newline at end of file diff --git a/compiled_docs/nav/index.md b/compiled_docs/nav/index.md new file mode 100644 index 0000000000..44ae591309 --- /dev/null +++ b/compiled_docs/nav/index.md @@ -0,0 +1 @@ +{"meta":"

开发指南#

何时使用#

分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。

\n

注意事项#

    \n

  • iconOnly 只适用垂直方向。

    \n
    • \n

  • Nav 继承自 Menu，除特殊说明外，可使用 Menu 的 API。

    \n
    • \n
\n

API#

","api":"

Nav#

\n

继承自 Menu 的能力请查看 Menu 文档

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
children导航项和子导航ReactNode-
type导航类型

可选值:
'normal'(普通)
'primary'(主要)
'secondary'(次要)
'line'(线形)		Enum'normal'
direction导航布局

可选值:
'hoz'(水平)
'ver'(垂直)		Enum'ver'
hozAlign横向导航条 items 和 footer 的对齐方向，在 direction 设置为 'hoz' 并且 header 存在时生效

可选值:
'left', 'right'		Enum'left'
activeDirection设置组件选中状态的 active 边方向

可选值:
null(无)
'top'(上)
'bottom'(下)
'left'(左)
'right'(右)		Enum当 direction 为 'hoz' 时，默认值为 'bottom'，当 direction 为 'ver' 时，默认值为 'left'
mode子导航打开的模式（水平导航只支持弹出）

可选值:
'inline', 'popup'		Enum'inline'
triggerType子导航打开的触发方式

可选值:
'click', 'hover'		Enum'click'
inlineIndent内联子导航缩进距离Number20
defaultOpenAll初始展开所有的子导航，只在 mode 设置为 'inline' 以及 openMode 设置为 'multiple' 下生效Booleanfalse
openMode内联子导航的展开模式，同时可以展开一个同级子导航还是多个同级子导航，该属性仅在 mode 为 inline 时生效

可选值:
'single', 'multiple'		Enum'multiple'
selectedKeys当前选中导航项的 key 值String/Array-
defaultSelectedKeys初始选中导航项的 key 值String/Array[]
onSelect选中或取消选中导航项触发的回调函数

签名:
Function(selectedKeys: Array, item: Object, extra: Object) => void
参数:
selectedKeys: {Array} 选中的所有导航项的 key
item: {Object} 选中或取消选中的导航项
extra: {Object} 额外参数
extra.select: {Boolean} 是否是选中
extra.key: {Array} 导航项的 key
extra.label: {Object} 导航项的文本
extra.keyPath: {Array} 导航项 key 的路径		Function-
popupAlign弹出子导航的对齐方式（水平导航只支持 follow ）

可选值:
'follow', 'outside'		Enum'follow'
popupClassName弹出子导航的自定义类名String-
iconOnly是否只显示图标Boolean-
hasArrow是否显示右侧的箭头（仅在 iconOnly=true 时生效）Booleantrue
hasTooltip是否有 ToolTips （仅在 iconOnly=true 时生效）Booleanfalse
header自定义导航头部ReactNode-
footer自定义导航尾部ReactNode-
embeddable是否开启嵌入式模式，一般用于Layout的布局中，开启后没有默认背景、外层border、box-shadow，可以配合<Nav style={{lineHeight: '100px'}}> 自定义高度Booleanfalse
\n

Nav.Group#

\n

继承自 Menu.Group 的能力请查看 Menu.Group 文档

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
label标签内容ReactNode-
children导航项和子导航ReactNode-
\n

Nav.Item#

\n

继承自 Menu.Item 的能力请查看 Menu.Item 文档

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
icon自定义图标，可以使用 Icon 的 type，也可以使用组件 <Icon type="icon type" />String/ReactNode-
children导航内容ReactNode-
\n

Nav.PopupItem#

\n

继承自 Menu.PopupItem 的能力请查看 Menu.PopupItem 文档

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
icon自定义图标，可以使用 Icon 的 type, 也可以使用组件 <Icon type="icon type" />String/ReactNode-
label标签内容ReactNode-
children弹出内容ReactNode-
\n

Nav.SubNav#

\n

继承自 Menu.SubMenu 的能力请查看 Menu.SubMenu 文档

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
icon自定义图标，可以使用 Icon 的 type，也可以使用组件 <Icon type="your type" />String/ReactNode-
label标签内容ReactNode-
selectable是否可选Booleanfalse
children导航项和子导航ReactNode-
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
按键说明
Up Arrow导航到上一项
Down Arrow导航到下一项
Right Arrow打开子菜单，导航到子菜单第一项；横向菜单条第一层，导航到右一项
Left Arrow关闭子菜单，导航到父级菜单；横向菜单条第一层，导航到左一项
Enter打开子菜单，导航到子菜单第一项
Esc关闭子菜单，导航到父级菜单
\n"} \ No newline at end of file diff --git a/compiled_docs/number-picker/demo/accessibility.en-us.md b/compiled_docs/number-picker/demo/accessibility.en-us.md new file mode 100644 index 0000000000..32c54f16cc --- /dev/null +++ b/compiled_docs/number-picker/demo/accessibility.en-us.md @@ -0,0 +1 @@ +{"title":"Accessibility","meta":{"title":"Accessibility","description":"\n

The component is partially built to support accessibility, but requires additional developer manual Settings to fully support accessibility: upBtnprops and downBtnprops are set up to enable the screen reader to correctly express the specific functions of the buttons. set aria-live purpose is NumberPicker component value change, screen reader will be read.

\n","order":"8"},"codes":{"jsx":"\nimport { NumberPicker } from '@alifd/next';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: 0,\n tip: '',\n };\n this.onChange = this.onChange.bind(this);\n }\n onChange(value, e) {\n let num = '';\n if(value >= 0){\n num = value;\n }else {\n num =`negative ${value * -1};;;;;;;;;;`\n }\n this.setState({\n value: value,\n tip:`${num}`,\n });\n }\n render() {\n const {value, tip} = this.state;\n return (
\n \n \n
);\n }\n}\nReactDOM.render(, mountNode);\n \n"},"body":"\n````jsx\n\nimport { NumberPicker } from '@alifd/next';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: 0,\n tip: '',\n };\n this.onChange = this.onChange.bind(this);\n }\n onChange(value, e) {\n let num = '';\n if(value >= 0){\n num = value;\n }else {\n num =`negative ${value * -1};;;;;;;;;;`\n }\n this.setState({\n value: value,\n tip:`${num}`,\n });\n }\n render() {\n const {value, tip} = this.state;\n return (
\n \n \n
);\n }\n}\nReactDOM.render(, mountNode);\n \n````","html":"
\nimport { NumberPicker } from '@alifd/next';\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            value: 0,\n            tip: '',\n        };\n        this.onChange = this.onChange.bind(this);\n    }\n    onChange(value, e) {\n        let num = '';\n        if(value >= 0){\n            num = value;\n        }else {\n            num =`negative ${value * -1};;;;;;;;;;`\n        }\n        this.setState({\n            value: value,\n            tip:`${num}`,\n        });\n    }\n    render() {\n        const {value, tip} = this.state;\n        return (<div> \n            <span id=\"a11y-number-picker\" aria-live=\"assertive\"  aria-label={tip}></span> \n            <NumberPicker type=\"inline\" value={value} onChange={this.onChange} upBtnProps={{'aria-label':'\b\bincreasing button'}} downBtnProps={{'aria-label':'decreasing button'}} aria-labelledby=\"a11y-number-picker\" />\n        </div>);\n    }\n}\nReactDOM.render(<App/>, mountNode);\n
"} \ No newline at end of file diff --git a/compiled_docs/number-picker/demo/accessibility.md b/compiled_docs/number-picker/demo/accessibility.md new file mode 100644 index 0000000000..3c921dd155 --- /dev/null +++ b/compiled_docs/number-picker/demo/accessibility.md @@ -0,0 +1 @@ +{"title":"无障碍","meta":{"title":"无障碍","description":"\n

组件内置了部分支持无障碍, 但是额外需要开发者手动设置才能完整支持无障碍: 设置upBtnprops以及downBtnprops，使得\b读屏软件可以正确表达按键的具体功能。设置aria-live目的是NumberPicker组件值发生改变时，读屏软件会进行读取。

\n","order":"8"},"codes":{"jsx":"\nimport { NumberPicker } from '@alifd/next';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: 0,\n tip: '',\n };\n this.onChange = this.onChange.bind(this);\n }\n onChange(value, e) {\n let num = '';\n if(value >= 0){\n num = value;\n }else {\n num =`negative ${value * -1};;;;;;;;;;`\n }\n this.setState({\n value: value,\n tip:`${num}`,\n });\n }\n render() {\n const {value, tip} = this.state;\n return (
\n \n \n
);\n }\n}\nReactDOM.render(, mountNode);\n \n"},"body":"\n````jsx\n\nimport { NumberPicker } from '@alifd/next';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: 0,\n tip: '',\n };\n this.onChange = this.onChange.bind(this);\n }\n onChange(value, e) {\n let num = '';\n if(value >= 0){\n num = value;\n }else {\n num =`negative ${value * -1};;;;;;;;;;`\n }\n this.setState({\n value: value,\n tip:`${num}`,\n });\n }\n render() {\n const {value, tip} = this.state;\n return (
\n \n \n
);\n }\n}\nReactDOM.render(, mountNode);\n \n````","html":"
\nimport { NumberPicker } from '@alifd/next';\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            value: 0,\n            tip: '',\n        };\n        this.onChange = this.onChange.bind(this);\n    }\n    onChange(value, e) {\n        let num = '';\n        if(value >= 0){\n            num = value;\n        }else {\n            num =`negative ${value * -1};;;;;;;;;;`\n        }\n        this.setState({\n            value: value,\n            tip:`${num}`,\n        });\n    }\n    render() {\n        const {value, tip} = this.state;\n        return (<div> \n            <span id=\"a11y-number-picker\" aria-live=\"assertive\"  aria-label={tip}></span> \n            <NumberPicker type=\"inline\" value={value} onChange={this.onChange} upBtnProps={{'aria-label':'\b\bincreasing button'}} downBtnProps={{'aria-label':'decreasing button'}} aria-labelledby=\"a11y-number-picker\" />\n        </div>);\n    }\n}\nReactDOM.render(<App/>, mountNode);\n
"} \ No newline at end of file diff --git a/compiled_docs/number-picker/demo/basic.en-us.md b/compiled_docs/number-picker/demo/basic.en-us.md new file mode 100644 index 0000000000..29d3e6c9e2 --- /dev/null +++ b/compiled_docs/number-picker/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic usage","meta":{"title":"Basic usage","description":"\n

you can get event type from onChange function second param e.type。

\n

if events are triggered by '+' button or '-' button, you can get event type from onChange function third param e.triggerType.

\n","order":"0"},"codes":{"jsx":"import { NumberPicker } from '@alifd/next';\n\nfunction onChange(value, e) {\n console.log(value, e.type, e.triggerType);\n}\n\nReactDOM.render(\n
\n \n

\n \n
,\n mountNode\n);\n"},"body":"\n````jsx\nimport { NumberPicker } from '@alifd/next';\n\nfunction onChange(value, e) {\n console.log(value, e.type, e.triggerType);\n}\n\nReactDOM.render(\n
\n \n

\n \n
,\n mountNode\n);\n````","html":"
import { NumberPicker } from '@alifd/next';\n\nfunction onChange(value, e) {\n    console.log(value, e.type, e.triggerType);\n}\n\nReactDOM.render(\n    <div>\n        <NumberPicker onChange={onChange}/>\n        <br/><br/>\n        <NumberPicker defaultValue={0} type=\"inline\" onChange={onChange}/>\n    </div>,\n    mountNode\n);
"} \ No newline at end of file diff --git a/compiled_docs/number-picker/demo/basic.md b/compiled_docs/number-picker/demo/basic.md new file mode 100644 index 0000000000..03c6d61f59 --- /dev/null +++ b/compiled_docs/number-picker/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本用法","meta":{"title":"基本用法","description":"\n

onChange 第二个参数 e.type 可以获取事件类型。

\n

如果是点击+ - 触发，可以通过 e.triggerType 获取

\n","order":"0"},"codes":{"jsx":"import { NumberPicker } from '@alifd/next';\n\nfunction onChange(value, e) {\n console.log(value, e.type, e.triggerType);\n}\n\nReactDOM.render(\n
\n \n

\n \n
,\n mountNode\n);\n"},"body":"\n\n````jsx\nimport { NumberPicker } from '@alifd/next';\n\nfunction onChange(value, e) {\n console.log(value, e.type, e.triggerType);\n}\n\nReactDOM.render(\n
\n \n

\n \n
,\n mountNode\n);\n````","html":"
import { NumberPicker } from '@alifd/next';\n\nfunction onChange(value, e) {\n    console.log(value, e.type, e.triggerType);\n}\n\nReactDOM.render(\n    <div>\n        <NumberPicker onChange={onChange}/>\n        <br/><br/>\n        <NumberPicker defaultValue={0} type=\"inline\" onChange={onChange}/>\n    </div>,\n    mountNode\n);
"} \ No newline at end of file diff --git a/compiled_docs/number-picker/demo/disabled.en-us.md b/compiled_docs/number-picker/demo/disabled.en-us.md new file mode 100644 index 0000000000..81079d56a0 --- /dev/null +++ b/compiled_docs/number-picker/demo/disabled.en-us.md @@ -0,0 +1 @@ +{"title":"Disable","meta":{"title":"Disable","description":"\n

disable number picker。

\n","order":"6"},"codes":{"jsx":"import { NumberPicker } from '@alifd/next';\n\nReactDOM.render(\n
\n \n

\n \n
,\n mountNode\n);\n"},"body":"\n````jsx\nimport { NumberPicker } from '@alifd/next';\n\nReactDOM.render(\n
\n \n

\n \n
,\n mountNode\n);\n````","html":"
import { NumberPicker } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <NumberPicker defaultValue={0} disabled/>\n        <br/><br/>\n        <NumberPicker defaultValue={0} type=\"inline\" disabled />\n    </div>,\n    mountNode\n);
"} \ No newline at end of file diff --git a/compiled_docs/number-picker/demo/disabled.md b/compiled_docs/number-picker/demo/disabled.md new file mode 100644 index 0000000000..78179afe3f --- /dev/null +++ b/compiled_docs/number-picker/demo/disabled.md @@ -0,0 +1 @@ +{"title":"不可用","meta":{"title":"不可用","description":"\n

不可用的 number picker。

\n","order":"6"},"codes":{"jsx":"import { NumberPicker } from '@alifd/next';\n\nReactDOM.render(\n
\n \n

\n \n
,\n mountNode\n);\n"},"body":"\n\n\n````jsx\nimport { NumberPicker } from '@alifd/next';\n\nReactDOM.render(\n
\n \n

\n \n
,\n mountNode\n);\n````","html":"
import { NumberPicker } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <NumberPicker defaultValue={0} disabled/>\n        <br/><br/>\n        <NumberPicker defaultValue={0} type=\"inline\" disabled />\n    </div>,\n    mountNode\n);
"} \ No newline at end of file diff --git a/compiled_docs/number-picker/demo/editable.en-us.md b/compiled_docs/number-picker/demo/editable.en-us.md new file mode 100644 index 0000000000..b7101100f9 --- /dev/null +++ b/compiled_docs/number-picker/demo/editable.en-us.md @@ -0,0 +1 @@ +{"title":"Forbid Input","meta":{"title":"Forbid Input","description":"\n

Forbid directly inputting data, only allow changing data by clicking button

\n","order":"1"},"codes":{"jsx":"import { NumberPicker, Button } from '@alifd/next';\n\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n editable: false,\n value: 0\n };\n }\n\n toogle() {\n this.setState({\n editable: !this.state.editable\n });\n }\n\n onChange(value) {\n console.log('changed', value);\n this.setState({\n value: value\n });\n }\n\n render() {\n return (
\n

\n \n
);\n }\n}\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { NumberPicker, Button } from '@alifd/next';\n\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n editable: false,\n value: 0\n };\n }\n\n toogle() {\n this.setState({\n editable: !this.state.editable\n });\n }\n\n onChange(value) {\n console.log('changed', value);\n this.setState({\n value: value\n });\n }\n\n render() {\n return (
\n

\n \n
);\n }\n}\nReactDOM.render(, mountNode);\n````","html":"
import { NumberPicker, Button } from '@alifd/next';\n\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            editable: false,\n            value: 0\n        };\n    }\n\n    toogle() {\n        this.setState({\n            editable: !this.state.editable\n        });\n    }\n\n    onChange(value) {\n        console.log('changed', value);\n        this.setState({\n            value: value\n        });\n    }\n\n    render() {\n        return (<div>\n            <NumberPicker onChange={this.onChange.bind(this)} value={this.state.value}\n                editable={this.state.editable}/><br/><br/>\n            <Button onClick={this.toogle.bind(this)}>Toggle to {!this.state.editable ? 'editable' : 'uneditable'}</Button>\n        </div>);\n    }\n}\nReactDOM.render(<App/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/number-picker/demo/editable.md b/compiled_docs/number-picker/demo/editable.md new file mode 100644 index 0000000000..a0950e9851 --- /dev/null +++ b/compiled_docs/number-picker/demo/editable.md @@ -0,0 +1 @@ +{"title":"不可直接输入","meta":{"title":"不可直接输入","description":"\n

用户不可直接输入编辑数据

\n","order":"1"},"codes":{"jsx":"import { NumberPicker, Button } from '@alifd/next';\n\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n editable: false,\n value: 0\n };\n }\n\n toogle() {\n this.setState({\n editable: !this.state.editable\n });\n }\n\n onChange(value) {\n console.log('changed', value);\n this.setState({\n value: value\n });\n }\n\n render() {\n return (
\n

\n \n
);\n }\n}\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { NumberPicker, Button } from '@alifd/next';\n\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n editable: false,\n value: 0\n };\n }\n\n toogle() {\n this.setState({\n editable: !this.state.editable\n });\n }\n\n onChange(value) {\n console.log('changed', value);\n this.setState({\n value: value\n });\n }\n\n render() {\n return (
\n

\n \n
);\n }\n}\nReactDOM.render(, mountNode);\n````","html":"
import { NumberPicker, Button } from '@alifd/next';\n\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            editable: false,\n            value: 0\n        };\n    }\n\n    toogle() {\n        this.setState({\n            editable: !this.state.editable\n        });\n    }\n\n    onChange(value) {\n        console.log('changed', value);\n        this.setState({\n            value: value\n        });\n    }\n\n    render() {\n        return (<div>\n            <NumberPicker onChange={this.onChange.bind(this)} value={this.state.value}\n                editable={this.state.editable}/><br/><br/>\n            <Button onClick={this.toogle.bind(this)}>Toggle to {!this.state.editable ? 'editable' : 'uneditable'}</Button>\n        </div>);\n    }\n}\nReactDOM.render(<App/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/number-picker/demo/format.en-us.md b/compiled_docs/number-picker/demo/format.en-us.md new file mode 100644 index 0000000000..588ebb8d81 --- /dev/null +++ b/compiled_docs/number-picker/demo/format.en-us.md @@ -0,0 +1 @@ +{"title":"Formatting","meta":{"title":"Formatting","description":"\n","order":"7"},"codes":{"jsx":"import { NumberPicker } from '@alifd/next';\n\nconst intlize = val => Intl.NumberFormat('en-US').format(val);\n\nReactDOM.render(\n
\n \n
,\n mountNode\n);\n"},"body":"\n````jsx\nimport { NumberPicker } from '@alifd/next';\n\nconst intlize = val => Intl.NumberFormat('en-US').format(val);\n\nReactDOM.render(\n
\n \n
,\n mountNode\n);\n````","html":"
import { NumberPicker } from '@alifd/next';\n\nconst intlize = val => Intl.NumberFormat('en-US').format(val);\n\nReactDOM.render(\n    <div>\n        <NumberPicker format={intlize} />\n    </div>,\n    mountNode\n);
"} \ No newline at end of file diff --git a/compiled_docs/number-picker/demo/format.md b/compiled_docs/number-picker/demo/format.md new file mode 100644 index 0000000000..9ac48d282f --- /dev/null +++ b/compiled_docs/number-picker/demo/format.md @@ -0,0 +1 @@ +{"title":"格式化","meta":{"title":"格式化","description":"\n","order":"7"},"codes":{"jsx":"import { NumberPicker } from '@alifd/next';\n\nconst intlize = val => Intl.NumberFormat('en-US').format(val);\n\nReactDOM.render(\n
\n \n
,\n mountNode\n);\n"},"body":"\n\n````jsx\nimport { NumberPicker } from '@alifd/next';\n\nconst intlize = val => Intl.NumberFormat('en-US').format(val);\n\nReactDOM.render(\n
\n \n
,\n mountNode\n);\n````","html":"
import { NumberPicker } from '@alifd/next';\n\nconst intlize = val => Intl.NumberFormat('en-US').format(val);\n\nReactDOM.render(\n    <div>\n        <NumberPicker format={intlize} />\n    </div>,\n    mountNode\n);
"} \ No newline at end of file diff --git a/compiled_docs/number-picker/demo/limit.en-us.md b/compiled_docs/number-picker/demo/limit.en-us.md new file mode 100644 index 0000000000..f5d91758f0 --- /dev/null +++ b/compiled_docs/number-picker/demo/limit.en-us.md @@ -0,0 +1 @@ +{"title":"max-min","meta":{"title":"max-min","description":"\n

Use the param min to limit minimum value,\nUse the param max to limit maximum value,

\n

That the value exceeds min or max will trigger onCorrect.

\n","order":"2"},"codes":{"jsx":"import { NumberPicker } from '@alifd/next';\n\nfunction onChange(value, e) {\n console.log('onChange', value, e);\n}\n\nfunction onCorrect(obj) {\n console.log('onCorrect', obj);\n}\nReactDOM.render(\n
\n \n
,\n mountNode\n);\n"},"body":"\n````jsx\nimport { NumberPicker } from '@alifd/next';\n\nfunction onChange(value, e) {\n console.log('onChange', value, e);\n}\n\nfunction onCorrect(obj) {\n console.log('onCorrect', obj);\n}\nReactDOM.render(\n
\n \n
,\n mountNode\n);\n````","html":"
import { NumberPicker } from '@alifd/next';\n\nfunction onChange(value, e) {\n    console.log('onChange', value, e);\n}\n\nfunction onCorrect(obj) {\n    console.log('onCorrect', obj);\n}\nReactDOM.render(\n    <div>\n        <NumberPicker type=\"inline\" step={3} min={6} max={30} defaultValue={6}\n            onChange={onChange} onCorrect={onCorrect}/>\n    </div>,\n    mountNode\n);
"} \ No newline at end of file diff --git a/compiled_docs/number-picker/demo/limit.md b/compiled_docs/number-picker/demo/limit.md new file mode 100644 index 0000000000..8af6d8124c --- /dev/null +++ b/compiled_docs/number-picker/demo/limit.md @@ -0,0 +1 @@ +{"title":"最大最小值","meta":{"title":"最大最小值","description":"\n

min max 来限制value的最大最小值。

\n

当数据自动订正会触发 onCorrect

\n","order":"2"},"codes":{"jsx":"import { NumberPicker } from '@alifd/next';\n\nfunction onChange(value, e) {\n console.log('onChange', value, e);\n}\n\nfunction onCorrect(obj) {\n console.log('onCorrect', obj);\n}\nReactDOM.render(\n
\n \n
,\n mountNode\n);\n"},"body":"\n\n````jsx\nimport { NumberPicker } from '@alifd/next';\n\nfunction onChange(value, e) {\n console.log('onChange', value, e);\n}\n\nfunction onCorrect(obj) {\n console.log('onCorrect', obj);\n}\nReactDOM.render(\n
\n \n
,\n mountNode\n);\n````","html":"
import { NumberPicker } from '@alifd/next';\n\nfunction onChange(value, e) {\n    console.log('onChange', value, e);\n}\n\nfunction onCorrect(obj) {\n    console.log('onCorrect', obj);\n}\nReactDOM.render(\n    <div>\n        <NumberPicker type=\"inline\" step={3} min={6} max={30} defaultValue={6}\n            onChange={onChange} onCorrect={onCorrect}/>\n    </div>,\n    mountNode\n);
"} \ No newline at end of file diff --git a/compiled_docs/number-picker/demo/precision.en-us.md b/compiled_docs/number-picker/demo/precision.en-us.md new file mode 100644 index 0000000000..2e6978ee35 --- /dev/null +++ b/compiled_docs/number-picker/demo/precision.en-us.md @@ -0,0 +1 @@ +{"title":"precision","meta":{"title":"precision","description":"\n

Use precision to Control the number of decimal places.

\n","order":"4"},"codes":{"jsx":"import { NumberPicker } from '@alifd/next';\n\nfunction onChange(value) {\n console.log('changed', value);\n}\nfunction onCorrect(obj) {\n console.log(obj);\n}\nReactDOM.render(\n
\n \n
, mountNode);\n"},"body":"\n````jsx\nimport { NumberPicker } from '@alifd/next';\n\nfunction onChange(value) {\n console.log('changed', value);\n}\nfunction onCorrect(obj) {\n console.log(obj);\n}\nReactDOM.render(\n
\n \n
, mountNode);\n````","html":"
import { NumberPicker } from '@alifd/next';\n\nfunction onChange(value) {\n    console.log('changed', value);\n}\nfunction onCorrect(obj) {\n    console.log(obj);\n}\nReactDOM.render(\n    <div>\n        <NumberPicker defaultValue={-3.99} onChange={onChange} onCorrect={onCorrect} step={2} precision={2}/>\n    </div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/number-picker/demo/precision.md b/compiled_docs/number-picker/demo/precision.md new file mode 100644 index 0000000000..4fe91bd46a --- /dev/null +++ b/compiled_docs/number-picker/demo/precision.md @@ -0,0 +1 @@ +{"title":"精度","meta":{"title":"精度","description":"\n

通过 precision 控制小数点位数

\n","order":"4"},"codes":{"jsx":"import { NumberPicker } from '@alifd/next';\n\nfunction onChange(value) {\n console.log('changed', value);\n}\nfunction onCorrect(obj) {\n console.log(obj);\n}\nReactDOM.render(\n
\n \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { NumberPicker } from '@alifd/next';\n\nfunction onChange(value) {\n console.log('changed', value);\n}\nfunction onCorrect(obj) {\n console.log(obj);\n}\nReactDOM.render(\n
\n \n
, mountNode);\n````","html":"
import { NumberPicker } from '@alifd/next';\n\nfunction onChange(value) {\n    console.log('changed', value);\n}\nfunction onCorrect(obj) {\n    console.log(obj);\n}\nReactDOM.render(\n    <div>\n        <NumberPicker defaultValue={-3.99} onChange={onChange} onCorrect={onCorrect} step={2} precision={2}/>\n    </div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/number-picker/demo/size.en-us.md b/compiled_docs/number-picker/demo/size.en-us.md new file mode 100644 index 0000000000..69dc2a724e --- /dev/null +++ b/compiled_docs/number-picker/demo/size.en-us.md @@ -0,0 +1 @@ +{"title":"size","meta":{"title":"size","description":"\n","order":"5"},"codes":{"jsx":"import { NumberPicker } from '@alifd/next';\n\nReactDOM.render(\n
\n \n

\n \n
,\n mountNode\n);\n"},"body":"\n````jsx\nimport { NumberPicker } from '@alifd/next';\n\nReactDOM.render(\n
\n \n

\n \n
,\n mountNode\n);\n````","html":"
import { NumberPicker } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <NumberPicker defaultValue={0} size=\"large\" />\n        <br/><br/>\n        <NumberPicker defaultValue={0} size=\"large\" type=\"inline\" />\n    </div>,\n    mountNode\n);
"} \ No newline at end of file diff --git a/compiled_docs/number-picker/demo/size.md b/compiled_docs/number-picker/demo/size.md new file mode 100644 index 0000000000..396fa897cc --- /dev/null +++ b/compiled_docs/number-picker/demo/size.md @@ -0,0 +1 @@ +{"title":"大小","meta":{"title":"大小","description":"\n","order":"5"},"codes":{"jsx":"import { NumberPicker } from '@alifd/next';\n\nReactDOM.render(\n
\n \n

\n \n
,\n mountNode\n);\n"},"body":"\n\n````jsx\nimport { NumberPicker } from '@alifd/next';\n\nReactDOM.render(\n
\n \n

\n \n
,\n mountNode\n);\n````","html":"
import { NumberPicker } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <NumberPicker defaultValue={0} size=\"large\" />\n        <br/><br/>\n        <NumberPicker defaultValue={0} size=\"large\" type=\"inline\" />\n    </div>,\n    mountNode\n);
"} \ No newline at end of file diff --git a/compiled_docs/number-picker/demo/step.en-us.md b/compiled_docs/number-picker/demo/step.en-us.md new file mode 100644 index 0000000000..199f7013c2 --- /dev/null +++ b/compiled_docs/number-picker/demo/step.en-us.md @@ -0,0 +1 @@ +{"title":"step","meta":{"title":"step","description":"\n

Use step to control the number change every click.

\n","order":"3"},"codes":{"jsx":"import { NumberPicker } from '@alifd/next';\n\nfunction onChange(value) {\n console.log('changed', value);\n}\nfunction onCorrect(obj) {\n console.log(obj);\n}\nReactDOM.render(\n
\n \n
, mountNode);\n"},"body":"\n````jsx\nimport { NumberPicker } from '@alifd/next';\n\nfunction onChange(value) {\n console.log('changed', value);\n}\nfunction onCorrect(obj) {\n console.log(obj);\n}\nReactDOM.render(\n
\n \n
, mountNode);\n````","html":"
import { NumberPicker } from '@alifd/next';\n\nfunction onChange(value) {\n    console.log('changed', value);\n}\nfunction onCorrect(obj) {\n    console.log(obj);\n}\nReactDOM.render(\n    <div>\n        <NumberPicker defaultValue={0} onChange={onChange} onCorrect={onCorrect} step={.01}/>\n    </div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/number-picker/demo/step.md b/compiled_docs/number-picker/demo/step.md new file mode 100644 index 0000000000..3b70db518e --- /dev/null +++ b/compiled_docs/number-picker/demo/step.md @@ -0,0 +1 @@ +{"title":"步长","meta":{"title":"步长","description":"\n

通过step控制每次加减步长

\n","order":"3"},"codes":{"jsx":"import { NumberPicker } from '@alifd/next';\n\nfunction onChange(value) {\n console.log('changed', value);\n}\nfunction onCorrect(obj) {\n console.log(obj);\n}\nReactDOM.render(\n
\n \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { NumberPicker } from '@alifd/next';\n\nfunction onChange(value) {\n console.log('changed', value);\n}\nfunction onCorrect(obj) {\n console.log(obj);\n}\nReactDOM.render(\n
\n \n
, mountNode);\n````","html":"
import { NumberPicker } from '@alifd/next';\n\nfunction onChange(value) {\n    console.log('changed', value);\n}\nfunction onCorrect(obj) {\n    console.log(obj);\n}\nReactDOM.render(\n    <div>\n        <NumberPicker defaultValue={0} onChange={onChange} onCorrect={onCorrect} step={.01}/>\n    </div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/number-picker/index.en-us.md b/compiled_docs/number-picker/index.en-us.md new file mode 100644 index 0000000000..3fb30e9552 --- /dev/null +++ b/compiled_docs/number-picker/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Guide#

When to use#

Number input and auto correct data.

\n

Attentions#

    \n

  1. auto Correct may change the input value and let it be diffrent with onChange return value。

    \n
    2. \n

  2. Some interval value may not trigger the onChange, For example：

    \n
      \n
    • 0=>0.=>0.0=>0.01 the second & third step will not trigger onChange, because auto correct will let value always be '0'
      • \n
    • Assume min=10, 1=>12 the step one ,1, will not not trigger onChange, because the numbers are input one by one
      • \n
    \n
    3. \n

  3. if input action does not trigger onChange, it will correct data and trigger onChange when it gets blur

    \n
    4. \n
\n

API#

","api":"

NumberPicker#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
sizesize

option:
'large', 'medium'		Enum'medium'
typedisplay type

option:
'normal'
'inline'		Enum'normal'
valuecurrent valueNumber-
defaultValuedefault valueNumber0
disableddisabled or notBoolean-
stepnumber changes per clickNumber/String1
precisionprecision for decimals numberNumber0
editableeditable or notBooleantrue
autoFocusauto get focused or notBoolean-
onChangecallback when value changes

signature:
Function(value: Number, e: Event) => void
params:
value: {Number} data
_e_: {Event} DOM Event		Functionfunc.noop
onKeyDowncallback when key press

signature:
Function() => void		Functionfunc.noop
onBlurcallback when lose focus

signature:
Function() => void		Functionfunc.noop
onCorrectcallback when data are corrected

signature:
Function(obj: Object) => void
params:
obj: {Object} {currentValue,oldValue:String}		Functionfunc.noop
maxmaximum valueNumberInfinity
minminimum valueNumber-Infinity
formatformat value for display

signature:
Function(value: Number) => String/Number
params:
value: {Number} current value
return:
{String/Number} formatted value
Function-
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyBoardDescripiton
Up Arrowincrease the number
Down Arrowdecrease the number
\n"} \ No newline at end of file diff --git a/compiled_docs/number-picker/index.md b/compiled_docs/number-picker/index.md new file mode 100644 index 0000000000..f0fd9d95f6 --- /dev/null +++ b/compiled_docs/number-picker/index.md @@ -0,0 +1 @@ +{"meta":"

开发指南#

何时使用#

数字选择器，并对输入的数据做正确性检查、自动订正。

\n

注意事项#

    \n

  1. 自动订正可能会导致onChange返回值和你输入的数据不一样。

    \n
    2. \n

  2. 其中有些中间输入状态无法触发onChange，主要考虑到自动订正可能永远无法到达想要的值了。例如：

    \n
      \n
    • 0=>0.=>0.0=>0.01 中间两步不会触发onChange，因为如果订正会一直停留在0导致永远无法到达想要的值
      • \n
    • min=10 的情况下, 输入 1=>12 第一步 1 不会触发onChange也不会订正数据，因为数字是一个一个输入的
      • \n
    \n
    3. \n

  3. 如果输入时没触发onChange，会在onBlur检测数据正确性并触发onChange

    \n
    4. \n
\n

API#

","api":"

NumberPicker#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
size大小

可选值:
'large', 'medium'		Enum'medium'
type设置类型

可选值:
'normal'(普通)
'inline'(内联)		Enum'normal'
value当前值Number-
defaultValue默认值Number-
disabled是否禁用Boolean-
step步长Number/String1
precision保留小数点后位数Number0
editable用户是否可以输入Booleantrue
autoFocus自动焦点Boolean-
onChange数值被改变的事件

签名:
Function(value: Number, e: Event) => void
参数:
value: {Number} 数据
_e_: {Event} DOM事件对象		Functionfunc.noop
onKeyDown键盘按下

签名:
Function() => void		Functionfunc.noop
onFocus焦点获得

签名:
Function() => void		Function-
onBlur焦点失去

签名:
Function() => void		Functionfunc.noop
onCorrect数值订正后的回调

签名:
Function(obj: Object) => void
参数:
obj: {Object} {currentValue,oldValue:String}		Functionfunc.noop
max最大值NumberInfinity
min最小值Number-Infinity
format格式化当前值

签名:
Function(value: Number) => String/Number
参数:
value: {Number} null
返回值:
{String/Number} null
Function-
upBtnProps增加按钮的propsObject-
downBtnProps减少按钮的propsObject-
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
按键说明
Up Arrow数字增加
Down Arrow数字减小
\n"} \ No newline at end of file diff --git a/compiled_docs/overlay/demo/accessibility.en-us.md b/compiled_docs/overlay/demo/accessibility.en-us.md new file mode 100644 index 0000000000..53c72293b1 --- /dev/null +++ b/compiled_docs/overlay/demo/accessibility.en-us.md @@ -0,0 +1 @@ +{"title":"Accessibility","meta":{"title":"Accessibility","description":"\n

Read this by setting tabIndex ,Please refer to ARIA and KeyBoard.

\n","order":"7"},"codes":{"jsx":"import { Overlay } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n visible: false\n };\n };\n onClick = () => {\n this.setState({\n visible: !this.state.visible\n });\n };\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n render() {\n return (\n
\n \n this.btn}\n safeNode={() => this.btn}\n onRequestClose={this.onClose}>\n \n Hello World From Overlay!\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n"},"body":"\n````jsx\nimport { Overlay } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n visible: false\n };\n };\n onClick = () => {\n this.setState({\n visible: !this.state.visible\n });\n };\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n render() {\n return (\n
\n \n this.btn}\n safeNode={() => this.btn}\n onRequestClose={this.onClose}>\n \n Hello World From Overlay!\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n````","html":"
import { Overlay } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            visible: false\n        };\n    };\n    onClick = () => {\n        this.setState({\n            visible: !this.state.visible\n        });\n    };\n    onClose = () => {\n        this.setState({\n            visible: false\n        });\n    };\n    render() {\n        return (\n            <div>\n                <button onClick={this.onClick} ref={ref => {\n                    this.btn = ref;\n                }}>\n                    overlay accessibility\n                </button>\n                <Overlay visible={this.state.visible}\n                    autoFocus\n                    target={() => this.btn}\n                    safeNode={() => this.btn}\n                    onRequestClose={this.onClose}>\n                    <span className=\"overlay-demo\" tabIndex=\"0\">\n                        Hello World From Overlay!\n                    </span>\n                </Overlay>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.overlay-demo {\n    width: 300px;\n    height: 100px;\n    padding: 10px;\n    border: 1px solid #999999;\n    background: #FFFFFF;\n    box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}
"} \ No newline at end of file diff --git a/compiled_docs/overlay/demo/accessibility.md b/compiled_docs/overlay/demo/accessibility.md new file mode 100644 index 0000000000..d06aa98904 --- /dev/null +++ b/compiled_docs/overlay/demo/accessibility.md @@ -0,0 +1 @@ +{"title":"无障碍","meta":{"title":"无障碍","description":"\n

通过设置tabIndex读取，请参考ARIA and KeyBoard。

\n","order":"7"},"codes":{"jsx":"import { Overlay } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n visible: false\n };\n };\n onClick = () => {\n this.setState({\n visible: !this.state.visible\n });\n };\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n render() {\n return (\n
\n \n this.btn}\n safeNode={() => this.btn}\n onRequestClose={this.onClose}>\n \n Hello World From Overlay!\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n"},"body":" \n\n````jsx\nimport { Overlay } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n visible: false\n };\n };\n onClick = () => {\n this.setState({\n visible: !this.state.visible\n });\n };\n onClose = () => {\n this.setState({\n visible: false\n });\n };\n render() {\n return (\n
\n \n this.btn}\n safeNode={() => this.btn}\n onRequestClose={this.onClose}>\n \n Hello World From Overlay!\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n````","html":"
import { Overlay } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            visible: false\n        };\n    };\n    onClick = () => {\n        this.setState({\n            visible: !this.state.visible\n        });\n    };\n    onClose = () => {\n        this.setState({\n            visible: false\n        });\n    };\n    render() {\n        return (\n            <div>\n                <button onClick={this.onClick} ref={ref => {\n                    this.btn = ref;\n                }}>\n                    overlay accessibility\n                </button>\n                <Overlay visible={this.state.visible}\n                    autoFocus\n                    target={() => this.btn}\n                    safeNode={() => this.btn}\n                    onRequestClose={this.onClose}>\n                    <span className=\"overlay-demo\" tabIndex=\"0\">\n                        Hello World From Overlay!\n                    </span>\n                </Overlay>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.overlay-demo {\n    width: 300px;\n    height: 100px;\n    padding: 10px;\n    border: 1px solid #999999;\n    background: #FFFFFF;\n    box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}
"} \ No newline at end of file diff --git a/compiled_docs/overlay/demo/align.en-us.md b/compiled_docs/overlay/demo/align.en-us.md new file mode 100644 index 0000000000..64ba55d8f6 --- /dev/null +++ b/compiled_docs/overlay/demo/align.en-us.md @@ -0,0 +1 @@ +{"title":"Align","meta":{"title":"Align","description":"\n

Use align prop to set align type

\n","order":"6"},"codes":{"jsx":"import { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nReactDOM.render(\n
\n
\n normal example\n 123\n 123\n 123\n
\n



\n
\n dir=rtl example\n 123\n 123\n 123\n
\n
\n , mountNode);\n","css":".overlay-container {\n position: relative;\n height: 150px;\n margin: 50px;\n border: 1px solid #999;\n overflow: auto;\n text-align: center;\n color: red;\n}\n"},"body":"\n````jsx\nimport { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nReactDOM.render(\n
\n
\n normal example\n 123\n 123\n 123\n
\n



\n
\n dir=rtl example\n 123\n 123\n 123\n
\n
\n , mountNode);\n````\n\n````css\n.overlay-container {\n position: relative;\n height: 150px;\n margin: 50px;\n border: 1px solid #999;\n overflow: auto;\n text-align: center;\n color: red;\n}\n````","html":"
import { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nReactDOM.render(\n    <div >\n        <div id=\"container1\" className=\"overlay-container\">\n            normal example\n            <Overlay target=\"container1\" visible align=\"tr tr\"><span>123</span></Overlay>\n            <Overlay target=\"container1\" visible align=\"cc cr\"><span>123</span></Overlay>\n            <Overlay target=\"container1\" visible align=\"bc bc\"><span>123</span></Overlay>\n        </div>\n        <br /><br /><br /><br />\n        <div id=\"container2\" className=\"overlay-container\" dir=\"rtl\">\n            dir=rtl example\n            <Overlay target=\"container2\" rtl visible align=\"tr tr\"><span>123</span></Overlay>\n            <Overlay target=\"container2\" rtl visible align=\"cc cr\"><span>123</span></Overlay>\n            <Overlay target=\"container2\" rtl visible align=\"bc bc\"><span>123</span></Overlay>\n        </div>\n    </div>\n    , mountNode);
.overlay-container {\n    position: relative;\n    height: 150px;\n    margin: 50px;\n    border: 1px solid #999;\n    overflow: auto;\n    text-align: center;\n    color: red;\n}
"} \ No newline at end of file diff --git a/compiled_docs/overlay/demo/align.md b/compiled_docs/overlay/demo/align.md new file mode 100644 index 0000000000..a0e13a1ce0 --- /dev/null +++ b/compiled_docs/overlay/demo/align.md @@ -0,0 +1 @@ +{"title":"对齐","meta":{"title":"对齐","description":"\n

可以自定义对齐方式

\n","order":"6"},"codes":{"jsx":"import { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nReactDOM.render(\n
\n
\n normal example\n 123\n 123\n 123\n
\n



\n
\n dir=rtl example\n 123\n 123\n 123\n
\n
\n , mountNode);\n","css":".overlay-container {\n position: relative;\n height: 150px;\n margin: 50px;\n border: 1px solid #999;\n overflow: auto;\n text-align: center;\n color: red;\n}\n"},"body":"\n\n````jsx\nimport { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nReactDOM.render(\n
\n
\n normal example\n 123\n 123\n 123\n
\n



\n
\n dir=rtl example\n 123\n 123\n 123\n
\n
\n , mountNode);\n````\n\n````css\n.overlay-container {\n position: relative;\n height: 150px;\n margin: 50px;\n border: 1px solid #999;\n overflow: auto;\n text-align: center;\n color: red;\n}\n````","html":"
import { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nReactDOM.render(\n    <div >\n        <div id=\"container1\" className=\"overlay-container\">\n            normal example\n            <Overlay target=\"container1\" visible align=\"tr tr\"><span>123</span></Overlay>\n            <Overlay target=\"container1\" visible align=\"cc cr\"><span>123</span></Overlay>\n            <Overlay target=\"container1\" visible align=\"bc bc\"><span>123</span></Overlay>\n        </div>\n        <br /><br /><br /><br />\n        <div id=\"container2\" className=\"overlay-container\" dir=\"rtl\">\n            dir=rtl example\n            <Overlay target=\"container2\" rtl visible align=\"tr tr\"><span>123</span></Overlay>\n            <Overlay target=\"container2\" rtl visible align=\"cc cr\"><span>123</span></Overlay>\n            <Overlay target=\"container2\" rtl visible align=\"bc bc\"><span>123</span></Overlay>\n        </div>\n    </div>\n    , mountNode);
.overlay-container {\n    position: relative;\n    height: 150px;\n    margin: 50px;\n    border: 1px solid #999;\n    overflow: auto;\n    text-align: center;\n    color: red;\n}
"} \ No newline at end of file diff --git a/compiled_docs/overlay/demo/backdrop.en-us.md b/compiled_docs/overlay/demo/backdrop.en-us.md new file mode 100644 index 0000000000..168691a9cf --- /dev/null +++ b/compiled_docs/overlay/demo/backdrop.en-us.md @@ -0,0 +1 @@ +{"title":"Mask","meta":{"title":"Mask","description":"\n

The overlay with mask.

\n","order":"1"},"codes":{"jsx":"import { Overlay } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n visible: false\n };\n }\n\n onClick = () => {\n this.setState({\n visible: true\n });\n }\n\n onClose = () => {\n this.setState({\n visible: false\n });\n }\n\n render() {\n return (\n
\n \n this.btn}\n align=\"cc cc\"\n hasMask\n disableScroll\n onRequestClose={this.onClose}>\n \n Hello World From Overlay!\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n"},"body":"\n````jsx\nimport { Overlay } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n visible: false\n };\n }\n\n onClick = () => {\n this.setState({\n visible: true\n });\n }\n\n onClose = () => {\n this.setState({\n visible: false\n });\n }\n\n render() {\n return (\n
\n \n this.btn}\n align=\"cc cc\"\n hasMask\n disableScroll\n onRequestClose={this.onClose}>\n \n Hello World From Overlay!\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n````","html":"
import { Overlay } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            visible: false\n        };\n    }\n\n    onClick = () => {\n        this.setState({\n            visible: true\n        });\n    }\n\n    onClose = () => {\n        this.setState({\n            visible: false\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <button onClick={this.onClick} ref={ref => {\n                    this.btn = ref;\n                }}>\n                    Open\n                </button>\n                <Overlay visible={this.state.visible}\n                    safeNode={() => this.btn}\n                    align=\"cc cc\"\n                    hasMask\n                    disableScroll\n                    onRequestClose={this.onClose}>\n                    <span className=\"overlay-demo\">\n                        Hello World From Overlay!\n                    </span>\n                </Overlay>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.overlay-demo {\n    width: 300px;\n    height: 100px;\n    padding: 10px;\n    border: 1px solid #999999;\n    background: #FFFFFF;\n    box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}
"} \ No newline at end of file diff --git a/compiled_docs/overlay/demo/backdrop.md b/compiled_docs/overlay/demo/backdrop.md new file mode 100644 index 0000000000..e9f9f9a64e --- /dev/null +++ b/compiled_docs/overlay/demo/backdrop.md @@ -0,0 +1 @@ +{"title":"遮罩","meta":{"title":"遮罩","description":"\n

带有遮罩的弹层。

\n","order":"1"},"codes":{"jsx":"import { Overlay } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n visible: false\n };\n }\n\n onClick = () => {\n this.setState({\n visible: true\n });\n }\n\n onClose = () => {\n this.setState({\n visible: false\n });\n }\n\n render() {\n return (\n
\n \n this.btn}\n align=\"cc cc\"\n hasMask\n disableScroll\n onRequestClose={this.onClose}>\n \n Hello World From Overlay!\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n"},"body":"\n\n````jsx\nimport { Overlay } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n visible: false\n };\n }\n\n onClick = () => {\n this.setState({\n visible: true\n });\n }\n\n onClose = () => {\n this.setState({\n visible: false\n });\n }\n\n render() {\n return (\n
\n \n this.btn}\n align=\"cc cc\"\n hasMask\n disableScroll\n onRequestClose={this.onClose}>\n \n Hello World From Overlay!\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n````","html":"
import { Overlay } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            visible: false\n        };\n    }\n\n    onClick = () => {\n        this.setState({\n            visible: true\n        });\n    }\n\n    onClose = () => {\n        this.setState({\n            visible: false\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <button onClick={this.onClick} ref={ref => {\n                    this.btn = ref;\n                }}>\n                    Open\n                </button>\n                <Overlay visible={this.state.visible}\n                    safeNode={() => this.btn}\n                    align=\"cc cc\"\n                    hasMask\n                    disableScroll\n                    onRequestClose={this.onClose}>\n                    <span className=\"overlay-demo\">\n                        Hello World From Overlay!\n                    </span>\n                </Overlay>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.overlay-demo {\n    width: 300px;\n    height: 100px;\n    padding: 10px;\n    border: 1px solid #999999;\n    background: #FFFFFF;\n    box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}
"} \ No newline at end of file diff --git a/compiled_docs/overlay/demo/controlled.en-us.md b/compiled_docs/overlay/demo/controlled.en-us.md new file mode 100644 index 0000000000..6fb24e8e97 --- /dev/null +++ b/compiled_docs/overlay/demo/controlled.en-us.md @@ -0,0 +1 @@ +{"title":"Popup under control","meta":{"title":"Popup under control","description":"\n

Demos Popup under control usage.

\n","order":"3"},"codes":{"jsx":"import { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n visible: false\n };\n }\n\n onVisibleChange = visible => {\n this.setState({\n visible\n });\n }\n\n onGroupVisibleChange = groupVisible => {\n this.setState({\n groupVisible\n });\n }\n\n render() {\n return (\n
\n
\n Open}\n triggerType=\"click\"\n visible={this.state.visible}\n onVisibleChange={this.onVisibleChange}>\n \n Hello World From Popup!\n \n \n
\n
\n
\n {this.btn1 = ref;}}>Paired Popup 1}\n triggerType=\"click\"\n visible={this.state.groupVisible}\n safeNode={[() => this.btn2, () => this.overlay2]}\n onVisibleChange={this.onGroupVisibleChange}>\n {this.overlay1 = ref;}}>\n Hello World From Popup!\n \n \n {this.btn2 = ref;}}>Paired Popup 2}\n triggerType=\"click\"\n visible={this.state.groupVisible}\n safeNode={[() => this.btn1, () => this.overlay1]}\n onVisibleChange={this.onGroupVisibleChange}> \n {this.overlay2 = ref;}}>\n Hello World From Popup!\n \n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n"},"body":"\n````jsx\nimport { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n visible: false\n };\n }\n\n onVisibleChange = visible => {\n this.setState({\n visible\n });\n }\n\n onGroupVisibleChange = groupVisible => {\n this.setState({\n groupVisible\n });\n }\n\n render() {\n return (\n
\n
\n Open}\n triggerType=\"click\"\n visible={this.state.visible}\n onVisibleChange={this.onVisibleChange}>\n \n Hello World From Popup!\n \n \n
\n
\n
\n {this.btn1 = ref;}}>Paired Popup 1}\n triggerType=\"click\"\n visible={this.state.groupVisible}\n safeNode={[() => this.btn2, () => this.overlay2]}\n onVisibleChange={this.onGroupVisibleChange}>\n {this.overlay1 = ref;}}>\n Hello World From Popup!\n \n \n {this.btn2 = ref;}}>Paired Popup 2}\n triggerType=\"click\"\n visible={this.state.groupVisible}\n safeNode={[() => this.btn1, () => this.overlay1]}\n onVisibleChange={this.onGroupVisibleChange}> \n {this.overlay2 = ref;}}>\n Hello World From Popup!\n \n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n````","html":"
import { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            visible: false\n        };\n    }\n\n    onVisibleChange = visible => {\n        this.setState({\n            visible\n        });\n    }\n\n    onGroupVisibleChange = groupVisible => {\n        this.setState({\n            groupVisible\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <div>\n                    <Popup trigger={<button>Open</button>}\n                        triggerType=\"click\"\n                        visible={this.state.visible}\n                        onVisibleChange={this.onVisibleChange}>\n                        <span className=\"overlay-demo\">\n                            Hello World From Popup!\n                        </span>\n                    </Popup>\n                </div>\n                <br />\n                <div>\n                    <Popup trigger={<button style={{\"margin-right\": \"50px\"}} ref={ref => {this.btn1 = ref;}}>Paired Popup 1</button>}\n                        triggerType=\"click\"\n                        visible={this.state.groupVisible}\n                        safeNode={[() => this.btn2, () => this.overlay2]}\n                        onVisibleChange={this.onGroupVisibleChange}>\n                        <span className=\"overlay-demo\" ref={ref => {this.overlay1 = ref;}}>\n                            Hello World From Popup!\n                        </span>\n                    </Popup>\n                    <Popup trigger={<button ref={ref => {this.btn2 = ref;}}>Paired Popup 2</button>}\n                        triggerType=\"click\"\n                        visible={this.state.groupVisible}\n                        safeNode={[() => this.btn1, () => this.overlay1]}\n                        onVisibleChange={this.onGroupVisibleChange}>                  \n                        <span className=\"overlay-demo\" ref={ref => {this.overlay2 = ref;}}>\n                            Hello World From Popup!\n                        </span>\n                    </Popup>\n                </div>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.overlay-demo {\n    width: 300px;\n    height: 100px;\n    padding: 10px;\n    border: 1px solid #999999;\n    background: #FFFFFF;\n    box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}
"} \ No newline at end of file diff --git a/compiled_docs/overlay/demo/controlled.md b/compiled_docs/overlay/demo/controlled.md new file mode 100644 index 0000000000..b42a149173 --- /dev/null +++ b/compiled_docs/overlay/demo/controlled.md @@ -0,0 +1 @@ +{"title":"触发的弹层受控显示隐藏","meta":{"title":"触发的弹层受控显示隐藏","description":"\n

展示了 Popup 受控显示隐藏的用法。

\n","order":"3"},"codes":{"jsx":"import { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n visible: false\n };\n }\n\n onVisibleChange = visible => {\n this.setState({\n visible\n });\n }\n\n onGroupVisibleChange = groupVisible => {\n this.setState({\n groupVisible\n });\n }\n\n render() {\n return (\n
\n
\n Open}\n triggerType=\"click\"\n visible={this.state.visible}\n onVisibleChange={this.onVisibleChange}>\n \n Hello World From Popup!\n \n \n
\n
\n
\n {this.btn1 = ref;}}>Paired Popup 1}\n triggerType=\"click\"\n visible={this.state.groupVisible}\n safeNode={[() => this.btn2, () => this.overlay2]}\n onVisibleChange={this.onGroupVisibleChange}>\n {this.overlay1 = ref;}}>\n Hello World From Popup!\n \n \n {this.btn2 = ref;}}>Paired Popup 2}\n triggerType=\"click\"\n visible={this.state.groupVisible}\n safeNode={[() => this.btn1, () => this.overlay1]}\n onVisibleChange={this.onGroupVisibleChange}> \n {this.overlay2 = ref;}}>\n Hello World From Popup!\n \n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n"},"body":"\n\n````jsx\nimport { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n visible: false\n };\n }\n\n onVisibleChange = visible => {\n this.setState({\n visible\n });\n }\n\n onGroupVisibleChange = groupVisible => {\n this.setState({\n groupVisible\n });\n }\n\n render() {\n return (\n
\n
\n Open}\n triggerType=\"click\"\n visible={this.state.visible}\n onVisibleChange={this.onVisibleChange}>\n \n Hello World From Popup!\n \n \n
\n
\n
\n {this.btn1 = ref;}}>Paired Popup 1}\n triggerType=\"click\"\n visible={this.state.groupVisible}\n safeNode={[() => this.btn2, () => this.overlay2]}\n onVisibleChange={this.onGroupVisibleChange}>\n {this.overlay1 = ref;}}>\n Hello World From Popup!\n \n \n {this.btn2 = ref;}}>Paired Popup 2}\n triggerType=\"click\"\n visible={this.state.groupVisible}\n safeNode={[() => this.btn1, () => this.overlay1]}\n onVisibleChange={this.onGroupVisibleChange}> \n {this.overlay2 = ref;}}>\n Hello World From Popup!\n \n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n````","html":"
import { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            visible: false\n        };\n    }\n\n    onVisibleChange = visible => {\n        this.setState({\n            visible\n        });\n    }\n\n    onGroupVisibleChange = groupVisible => {\n        this.setState({\n            groupVisible\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <div>\n                    <Popup trigger={<button>Open</button>}\n                        triggerType=\"click\"\n                        visible={this.state.visible}\n                        onVisibleChange={this.onVisibleChange}>\n                        <span className=\"overlay-demo\">\n                            Hello World From Popup!\n                        </span>\n                    </Popup>\n                </div>\n                <br />\n                <div>\n                    <Popup trigger={<button style={{\"margin-right\": \"50px\"}} ref={ref => {this.btn1 = ref;}}>Paired Popup 1</button>}\n                        triggerType=\"click\"\n                        visible={this.state.groupVisible}\n                        safeNode={[() => this.btn2, () => this.overlay2]}\n                        onVisibleChange={this.onGroupVisibleChange}>\n                        <span className=\"overlay-demo\" ref={ref => {this.overlay1 = ref;}}>\n                            Hello World From Popup!\n                        </span>\n                    </Popup>\n                    <Popup trigger={<button ref={ref => {this.btn2 = ref;}}>Paired Popup 2</button>}\n                        triggerType=\"click\"\n                        visible={this.state.groupVisible}\n                        safeNode={[() => this.btn1, () => this.overlay1]}\n                        onVisibleChange={this.onGroupVisibleChange}>                  \n                        <span className=\"overlay-demo\" ref={ref => {this.overlay2 = ref;}}>\n                            Hello World From Popup!\n                        </span>\n                    </Popup>\n                </div>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.overlay-demo {\n    width: 300px;\n    height: 100px;\n    padding: 10px;\n    border: 1px solid #999999;\n    background: #FFFFFF;\n    box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}
"} \ No newline at end of file diff --git a/compiled_docs/overlay/demo/nested.en-us.md b/compiled_docs/overlay/demo/nested.en-us.md new file mode 100644 index 0000000000..5aab6cc7d1 --- /dev/null +++ b/compiled_docs/overlay/demo/nested.en-us.md @@ -0,0 +1 @@ +{"title":"Nested overlay","meta":{"title":"Nested overlay","description":"\n

When there is a overlay nesting requirement, use the container property to render the second overlay inside the first overlay.

\n","order":"4"},"codes":{"jsx":"import { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nReactDOM.render(\n Open first overlay}\n triggerType=\"click\">\n
\n Open second overlay}\n triggerType=\"click\"\n container={trigger => trigger.parentNode}>\n
\n

Hello World From Second Overlay!

\n
\n \n

Hello World From First Overlay!

\n
\n \n , mountNode);\n","css":".overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n"},"body":"\n````jsx\nimport { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nReactDOM.render(\n Open first overlay}\n triggerType=\"click\">\n
\n Open second overlay}\n triggerType=\"click\"\n container={trigger => trigger.parentNode}>\n
\n

Hello World From Second Overlay!

\n
\n \n

Hello World From First Overlay!

\n
\n \n , mountNode);\n````\n\n````css\n.overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n````","html":"
import { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nReactDOM.render(\n    <Popup trigger={<button>Open first overlay</button>}\n        triggerType=\"click\">\n        <div className=\"overlay-demo\">\n            <Popup trigger={<button>Open second overlay</button>}\n                triggerType=\"click\"\n                container={trigger => trigger.parentNode}>\n                <div className=\"overlay-demo\">\n                    <p>Hello World From Second Overlay!</p>\n                </div>\n            </Popup>\n            <p>Hello World From First Overlay!</p>\n        </div>\n    </Popup>\n    , mountNode);
.overlay-demo {\n    width: 300px;\n    height: 100px;\n    padding: 10px;\n    border: 1px solid #999999;\n    background: #FFFFFF;\n    box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}
"} \ No newline at end of file diff --git a/compiled_docs/overlay/demo/nested.md b/compiled_docs/overlay/demo/nested.md new file mode 100644 index 0000000000..7208f2f753 --- /dev/null +++ b/compiled_docs/overlay/demo/nested.md @@ -0,0 +1 @@ +{"title":"弹层嵌套","meta":{"title":"弹层嵌套","description":"\n

有弹层嵌套需求时，请使用 container 属性将第二个弹层渲染到第一个弹层内部。

\n","order":"4"},"codes":{"jsx":"import { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nReactDOM.render(\n Open first overlay}\n triggerType=\"click\">\n
\n Open second overlay}\n triggerType=\"click\"\n container={trigger => trigger.parentNode}>\n
\n

Hello World From Second Overlay!

\n
\n \n

Hello World From First Overlay!

\n
\n \n , mountNode);\n","css":".overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n"},"body":"\n\n````jsx\nimport { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nReactDOM.render(\n Open first overlay}\n triggerType=\"click\">\n
\n Open second overlay}\n triggerType=\"click\"\n container={trigger => trigger.parentNode}>\n
\n

Hello World From Second Overlay!

\n
\n \n

Hello World From First Overlay!

\n
\n \n , mountNode);\n````\n\n````css\n.overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n````","html":"
import { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nReactDOM.render(\n    <Popup trigger={<button>Open first overlay</button>}\n        triggerType=\"click\">\n        <div className=\"overlay-demo\">\n            <Popup trigger={<button>Open second overlay</button>}\n                triggerType=\"click\"\n                container={trigger => trigger.parentNode}>\n                <div className=\"overlay-demo\">\n                    <p>Hello World From Second Overlay!</p>\n                </div>\n            </Popup>\n            <p>Hello World From First Overlay!</p>\n        </div>\n    </Popup>\n    , mountNode);
.overlay-demo {\n    width: 300px;\n    height: 100px;\n    padding: 10px;\n    border: 1px solid #999999;\n    background: #FFFFFF;\n    box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}
"} \ No newline at end of file diff --git a/compiled_docs/overlay/demo/overlay.en-us.md b/compiled_docs/overlay/demo/overlay.en-us.md new file mode 100644 index 0000000000..8560c8ec2f --- /dev/null +++ b/compiled_docs/overlay/demo/overlay.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

Pop up a overlay.

\n","order":"0"},"codes":{"jsx":"import { Overlay } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n visible: false\n };\n }\n\n onClick = () => {\n this.setState({\n visible: !this.state.visible\n });\n }\n\n onClose = () => {\n this.setState({\n visible: false\n });\n }\n\n render() {\n return (\n
\n \n this.btn}\n safeNode={() => this.btn}\n onRequestClose={this.onClose}>\n \n Hello World From Overlay!\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n"},"body":"\n````jsx\nimport { Overlay } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n visible: false\n };\n }\n\n onClick = () => {\n this.setState({\n visible: !this.state.visible\n });\n }\n\n onClose = () => {\n this.setState({\n visible: false\n });\n }\n\n render() {\n return (\n
\n \n this.btn}\n safeNode={() => this.btn}\n onRequestClose={this.onClose}>\n \n Hello World From Overlay!\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n````","html":"
import { Overlay } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            visible: false\n        };\n    }\n\n    onClick = () => {\n        this.setState({\n            visible: !this.state.visible\n        });\n    }\n\n    onClose = () => {\n        this.setState({\n            visible: false\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <button onClick={this.onClick} ref={ref => {\n                    this.btn = ref;\n                }}>\n                    Toggle visible\n                </button>\n                <Overlay visible={this.state.visible}\n                    target={() => this.btn}\n                    safeNode={() => this.btn}\n                    onRequestClose={this.onClose}>\n                    <span className=\"overlay-demo\">\n                        Hello World From Overlay!\n                    </span>\n                </Overlay>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.overlay-demo {\n    width: 300px;\n    height: 100px;\n    padding: 10px;\n    border: 1px solid #999999;\n    background: #FFFFFF;\n    box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}
"} \ No newline at end of file diff --git a/compiled_docs/overlay/demo/overlay.md b/compiled_docs/overlay/demo/overlay.md new file mode 100644 index 0000000000..6ef000979f --- /dev/null +++ b/compiled_docs/overlay/demo/overlay.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

弹出一个弹层。

\n","order":"0"},"codes":{"jsx":"import { Overlay } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n visible: false\n };\n }\n\n onClick = () => {\n this.setState({\n visible: !this.state.visible\n });\n }\n\n onClose = () => {\n this.setState({\n visible: false\n });\n }\n\n render() {\n return (\n
\n \n this.btn}\n safeNode={() => this.btn}\n onRequestClose={this.onClose}>\n \n Hello World From Overlay!\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n"},"body":"\n\n````jsx\nimport { Overlay } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n visible: false\n };\n }\n\n onClick = () => {\n this.setState({\n visible: !this.state.visible\n });\n }\n\n onClose = () => {\n this.setState({\n visible: false\n });\n }\n\n render() {\n return (\n
\n \n this.btn}\n safeNode={() => this.btn}\n onRequestClose={this.onClose}>\n \n Hello World From Overlay!\n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n````","html":"
import { Overlay } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            visible: false\n        };\n    }\n\n    onClick = () => {\n        this.setState({\n            visible: !this.state.visible\n        });\n    }\n\n    onClose = () => {\n        this.setState({\n            visible: false\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <button onClick={this.onClick} ref={ref => {\n                    this.btn = ref;\n                }}>\n                    Toggle visible\n                </button>\n                <Overlay visible={this.state.visible}\n                    target={() => this.btn}\n                    safeNode={() => this.btn}\n                    onRequestClose={this.onClose}>\n                    <span className=\"overlay-demo\">\n                        Hello World From Overlay!\n                    </span>\n                </Overlay>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.overlay-demo {\n    width: 300px;\n    height: 100px;\n    padding: 10px;\n    border: 1px solid #999999;\n    background: #FFFFFF;\n    box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}
"} \ No newline at end of file diff --git a/compiled_docs/overlay/demo/popup.en-us.md b/compiled_docs/overlay/demo/popup.en-us.md new file mode 100644 index 0000000000..c99f1335e1 --- /dev/null +++ b/compiled_docs/overlay/demo/popup.en-us.md @@ -0,0 +1 @@ +{"title":"Popup","meta":{"title":"Popup","description":"\n

Use popup to pop up a overlay.

\n","order":"2"},"codes":{"jsx":"import { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nReactDOM.render(\n
\n Open} triggerType=\"click\">\n \n Hello World From Popup!\n \n \n
\n Use Down Arrow to open} triggerType=\"click\" triggerClickKeycode={40}>\n \n Hello World From Popup!\n \n \n
\n , mountNode);\n","css":".overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n"},"body":"\n````jsx\nimport { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nReactDOM.render(\n
\n Open} triggerType=\"click\">\n \n Hello World From Popup!\n \n \n
\n Use Down Arrow to open} triggerType=\"click\" triggerClickKeycode={40}>\n \n Hello World From Popup!\n \n \n
\n , mountNode);\n````\n\n````css\n.overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n````","html":"
import { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nReactDOM.render(\n    <div>\n        <Popup trigger={<button>Open</button>} triggerType=\"click\">\n            <span className=\"overlay-demo\">\n                Hello World From Popup!\n            </span>\n        </Popup>\n        <br />\n        <Popup trigger={<button>Use Down Arrow to open</button>} triggerType=\"click\" triggerClickKeycode={40}>\n            <span className=\"overlay-demo\">\n                Hello World From Popup!\n            </span>\n        </Popup>\n    </div>\n    , mountNode);
.overlay-demo {\n    width: 300px;\n    height: 100px;\n    padding: 10px;\n    border: 1px solid #999999;\n    background: #FFFFFF;\n    box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}
"} \ No newline at end of file diff --git a/compiled_docs/overlay/demo/popup.md b/compiled_docs/overlay/demo/popup.md new file mode 100644 index 0000000000..2843f8451c --- /dev/null +++ b/compiled_docs/overlay/demo/popup.md @@ -0,0 +1 @@ +{"title":"触发的弹层","meta":{"title":"触发的弹层","description":"\n

使用 Popup 弹出一个弹层。

\n","order":"2"},"codes":{"jsx":"import { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nReactDOM.render(\n
\n Open} triggerType=\"click\">\n \n Hello World From Popup!\n \n \n
\n Use Down Arrow to open} triggerType=\"click\" triggerClickKeycode={40}>\n \n Hello World From Popup!\n \n \n
\n , mountNode);\n","css":".overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n"},"body":"\n\n````jsx\nimport { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nReactDOM.render(\n
\n Open} triggerType=\"click\">\n \n Hello World From Popup!\n \n \n
\n Use Down Arrow to open} triggerType=\"click\" triggerClickKeycode={40}>\n \n Hello World From Popup!\n \n \n
\n , mountNode);\n````\n\n````css\n.overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n````","html":"
import { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nReactDOM.render(\n    <div>\n        <Popup trigger={<button>Open</button>} triggerType=\"click\">\n            <span className=\"overlay-demo\">\n                Hello World From Popup!\n            </span>\n        </Popup>\n        <br />\n        <Popup trigger={<button>Use Down Arrow to open</button>} triggerType=\"click\" triggerClickKeycode={40}>\n            <span className=\"overlay-demo\">\n                Hello World From Popup!\n            </span>\n        </Popup>\n    </div>\n    , mountNode);
.overlay-demo {\n    width: 300px;\n    height: 100px;\n    padding: 10px;\n    border: 1px solid #999999;\n    background: #FFFFFF;\n    box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}
"} \ No newline at end of file diff --git a/compiled_docs/overlay/demo/scroll.en-us.md b/compiled_docs/overlay/demo/scroll.en-us.md new file mode 100644 index 0000000000..bc3fd2f7d5 --- /dev/null +++ b/compiled_docs/overlay/demo/scroll.en-us.md @@ -0,0 +1 @@ +{"title":"Overlay follows the container scroll","meta":{"title":"Overlay follows the container scroll","description":"\n

The overlay defaults to absolute positioning with reference to document.body. If the overlay trigger element's container (usually the parent node) has a scrollbar, then when the container is scrolled, the trigger element will be separated from the overlay. The solution is to render the overlay to the container where the trigger element is located. (The container must have a position style to support the absolute positioning of the overlay.)

\n","order":"5"},"codes":{"jsx":"import { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nReactDOM.render(\n
\n Open}\n triggerType=\"click\"\n container={trigger => trigger.parentNode}>\n
\n Hello World From Popup!\n
\n \n
\n
\n , mountNode);\n","css":".overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n\n.scroll-container {\n position: relative;\n height: 150px;\n padding: 10px;\n border: 1px solid #999999;\n overflow: auto;\n}\n"},"body":"\n````jsx\nimport { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nReactDOM.render(\n
\n Open}\n triggerType=\"click\"\n container={trigger => trigger.parentNode}>\n
\n Hello World From Popup!\n
\n \n
\n
\n , mountNode);\n````\n\n````css\n.overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n\n.scroll-container {\n position: relative;\n height: 150px;\n padding: 10px;\n border: 1px solid #999999;\n overflow: auto;\n}\n````","html":"
import { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nReactDOM.render(\n    <div className=\"scroll-container\">\n        <Popup trigger={<button>Open</button>}\n            triggerType=\"click\"\n            container={trigger => trigger.parentNode}>\n            <div className=\"overlay-demo\">\n                Hello World From Popup!\n            </div>\n        </Popup>\n        <div style={{ height: '300px' }} />\n    </div>\n    , mountNode);
.overlay-demo {\n    width: 300px;\n    height: 100px;\n    padding: 10px;\n    border: 1px solid #999999;\n    background: #FFFFFF;\n    box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n\n.scroll-container {\n    position: relative;\n    height: 150px;\n    padding: 10px;\n    border: 1px solid #999999;\n    overflow: auto;\n}
"} \ No newline at end of file diff --git a/compiled_docs/overlay/demo/scroll.md b/compiled_docs/overlay/demo/scroll.md new file mode 100644 index 0000000000..494da5e363 --- /dev/null +++ b/compiled_docs/overlay/demo/scroll.md @@ -0,0 +1 @@ +{"title":"弹层跟随滚动","meta":{"title":"弹层跟随滚动","description":"\n

弹层默认参照 document.body 绝对定位，如果弹层显示隐藏的触发元素所在容器（一般为父节点）有滚动条，那么当容器滚动时，会发生触发元素与弹层相分离的情况，解决的办法是将弹层渲染到触发元素所在的容器中。（触发元素所在的容器，必须设置 position 样式，以完成弹层的绝对定位。）

\n","order":"5"},"codes":{"jsx":"import { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nReactDOM.render(\n
\n Open}\n triggerType=\"click\"\n container={trigger => trigger.parentNode}>\n
\n Hello World From Popup!\n
\n \n
\n
\n , mountNode);\n","css":".overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n\n.scroll-container {\n position: relative;\n height: 150px;\n padding: 10px;\n border: 1px solid #999999;\n overflow: auto;\n}\n"},"body":"\n\n````jsx\nimport { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nReactDOM.render(\n
\n Open}\n triggerType=\"click\"\n container={trigger => trigger.parentNode}>\n
\n Hello World From Popup!\n
\n \n
\n
\n , mountNode);\n````\n\n````css\n.overlay-demo {\n width: 300px;\n height: 100px;\n padding: 10px;\n border: 1px solid #999999;\n background: #FFFFFF;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n\n.scroll-container {\n position: relative;\n height: 150px;\n padding: 10px;\n border: 1px solid #999999;\n overflow: auto;\n}\n````","html":"
import { Overlay } from '@alifd/next';\n\nconst { Popup } = Overlay;\n\nReactDOM.render(\n    <div className=\"scroll-container\">\n        <Popup trigger={<button>Open</button>}\n            triggerType=\"click\"\n            container={trigger => trigger.parentNode}>\n            <div className=\"overlay-demo\">\n                Hello World From Popup!\n            </div>\n        </Popup>\n        <div style={{ height: '300px' }} />\n    </div>\n    , mountNode);
.overlay-demo {\n    width: 300px;\n    height: 100px;\n    padding: 10px;\n    border: 1px solid #999999;\n    background: #FFFFFF;\n    box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n\n.scroll-container {\n    position: relative;\n    height: 150px;\n    padding: 10px;\n    border: 1px solid #999999;\n    overflow: auto;\n}
"} \ No newline at end of file diff --git a/compiled_docs/overlay/index.en-us.md b/compiled_docs/overlay/index.en-us.md new file mode 100644 index 0000000000..a64e52a1f2 --- /dev/null +++ b/compiled_docs/overlay/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

A collection of tool for generating overlay.

\n

Guide#

Overlay provides a series of components for creating overlay:

\n

Overlay#

Overlay can pop up a layer in the page, provides positioning, animation and other common functions. Overlay is designed as a stateless component that does not control the state of its own visible.

\n

Note: Configurations like canCloseby* also need to work with onRequestClose to close the overlay.

\n

Safe node#

Overlay provides the function of hiding itself by clicking document. If you want to click a node and do not hide the overlay (for example, the node that triggers the overlay to open), pass the node to the safeNode property.

\n

Alignment#

    \n

  1. The value of the align property can be a space-separated string, such as tl bl, tl means the top left of the target element and bl means the bottom left of the reference element, so tl bl means the top left of the target element aligns with the bottom left of the reference element. Among the available options are tl, tc, tr, cl, cc, cr, bl, bc, br. t is short for top, b is short for bottom, c is short for center, l is short for left, and r is short for right.

    \n
    2. \n

  2. The align support Boolean value is only false. When set to false, JS positioning is not used, so you can pass the style or className for CSS positioning according to your needs.

    \n
    3. \n

  3. Under RTL Mode, Overylay will transfer r(right) and l(left) to each other automatically. It means tl bl under RTL Mode works the same to tr br under Non-RTL Mode\nThe following example shows how to position the overlay to the top right corner of the page:

    \n
    4. \n
\n
<Overlay visible align="tr tr"><span>123</span></Overlay>

Popup#

Popup is the wrapper of Overlay. It receives a node as a trigger node and pops up a overlay. This overlay uses the node as the reference element for positioning by default.

\n

API#

","api":"

Overlay#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
childrenconent of overlayany-
visiblewhether to show the overlayBooleanfalse
onRequestClosecallback function that triggers an event when the overlay request closed

signatures:
Function(type: String, e: Object) => void
params:
type: {String} the reason of the overlay closure
_e_: {Object} DOM event		Functionfunc.noop
targetreference element for overlay positioninganyPosition.VIEWPORT
alignalignment of the overlay relative to the reference element, see AlignmentString/Boolean'tl bl'
offsetoffset of the overlay relative to the reference elementArray[0, 0]
containercontainer of the overlay, if it is a function, it should return ref, if it is a string, it is should be the id of the DOM element, it can also be passed the DOM element directly.any-
hasMaskwhether to show the maskBooleanfalse
canCloseByEscwhether to support pressing esc to close the overlayBooleantrue
canCloseByOutSideClickwhether to support clicking the outside to close the overlay when the mask is hiddenBooleantrue
canCloseByMaskwhether to support clicking the mask to close the overlay when the mask is visibleBooleantrue
beforeOpencallback function that triggers the event before the overlay opens

signatures:
Function() => void		Functionfunc.noop
onOpencallback function that triggers the event when the overlay opens

signatures:
Function() => void		Functionfunc.noop
afterOpencallback function that triggers the event after the overlay opens, if enable animations, trigger after the animation ends

signatures:
Function() => void		Functionfunc.noop
beforeClosecallback function that triggers the event before the overlay closes

signatures:
Function() => void		Functionfunc.noop
onClosecallback function that triggers the event when the overlay closes

signatures:
Function() => void		Functionfunc.noop
afterClosecallback function that triggers the event after the overlay closes, if enable animations, trigger after the animation ends

signatures:
Function() => void		Functionfunc.noop
beforePositioncallback function that triggers the event before the overlay posiitons

signatures:
Function() => void		Functionfunc.noop
onPositioncallback function that triggers the event when the overlay posiitons

signatures:
Function(config: Object, node: Object) => void
params:
config: {Object} position arguments
config.align: {Array} alignment, such as ['cc', 'cc'] (if you enable needAdjust, it may be different from pre-set align)
config.top: {Number} distance from the top of the viewport
config.left: {Number} distance from the left of the viewport
node: {Object} container node		Functionfunc.noop
shouldUpdatePositionwhether to force the update of positioning after each rerendered, which is generally used to maintain the original positioning when the size of the content area changes.Booleanfalse
autoFocuswhether to focus the element in the overlay automatically when the overlay is openedBooleanfalse
needAdjustwhen the overlay is not visible due to scrolling of the page, does it automatically adjust the position to appear in the visible area?Booleantrue
disableScrollwhether to disable page scrollingBooleanfalse
cachewhether to keep dom nodes when hiddenBooleanfalse
safeNodewhen clicking on the document, does not close the overlay if the node is included. If it is a function, it should return ref, if it is a string, it should be the id of the DOM element, it can also be directly passed to the DOM element, or the above values Arrayany-
wrapperClassNameclass name of the overlay's wrapper nodeString-
wrapperStyleinline stylesheet of the overlay's wrapper nodeObject-
animationconfigure animation, support the {in: 'enter-class', out: 'leave-class' } object parameters, if set to false, do not play the animation. Refer to Animate component documentation for available animations.Object/Boolean{ in: 'expandInDown', out: 'expandOutUp' }
\n

Overlay.Popup#

\n

Inherited Overlay's API unless otherwise specified

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
childrencontent of overlayReactNode-
triggertrigger the overlay to show or hide elementsReactElement-
triggerTypetrigger the overlay to show or hide operations, either 'click', 'hover', 'focus', or an array of them, such as ['hover', 'focus']String/Array'hover'
triggerClickKeycodeCustomize the keyboard trigger keys that will trigger click event handlers when trigger is focused. It will only take effect when the triggerType is 'click'.Number/Array[KEYCODE.SPACE, KEYCODE.ENTER]
visiblewhether the overlay is visiible currentlyBoolean-
defaultVisiblewhether the overlay is visiible defaultBooleanfalse
onVisibleChangecallback function triggered when the ovlery is visible or hidden

signatures:
Function(visible: Boolean, type: String, e: Object) => void
params:
visible: {Boolean} whether the overlay is visible
type: {String} the reason that triggers the overlay to show or hide
_e_: {Object} DOM event		Functionfunc.noop
disabledif set this property, the overlay cannot be shown or hiddenBooleanfalse
delayThe delay time, in milliseconds, that the overlay shows or hides and only works when triggerType is set to hoverNumber200
canCloseByTriggerwhether the trigger element can close the overlayBooleantrue
targetreference element for overlay positioninganytrigger element
followTriggerfollow trigger to scroll or notBooleanfalse
\n

ARIA and KeyBoard#

Description: This component needs to be used in conjunction with other components to be prompted. Refer to the above overlay

\n"} \ No newline at end of file diff --git a/compiled_docs/overlay/index.md b/compiled_docs/overlay/index.md new file mode 100644 index 0000000000..1dafe1a9e7 --- /dev/null +++ b/compiled_docs/overlay/index.md @@ -0,0 +1 @@ +{"meta":"

用于生成弹层的工具类集合.

\n

开发指南#

Overlay 提供了一系列组件用于创建弹层。其中包含：

\n

Overlay#

Overlay 可以在页面中弹出一个浮层，封装了定位，动画及其他一些可用性的功能。Overlay 被设计为无状态的组件，其本身并不控制自己显示和隐藏的状态。

\n

注意: 类似 canCloseby* 的配置也需要配合 onRequestClose 才能关闭弹层。

\n

安全节点#

Overlay 提供了点击弹层外文档中节点隐藏该弹层的功能，如果想让某个节点点击后不隐藏弹层（如：触发弹层打开的节点），请将该节点传入 safeNode 属性。

\n

定位#

    \n

  1. align 的值可以是由空格隔开的字符串，如 tl bl，其中 tl 代表目标元素的左上方，bl 代表基准元素的左下方，所以 tl bl 的意思是目标元素的左上方对齐基准元素左下方。其中定位的可选值有 tl, tc, tr, cl, cc, cr, bl, bc, br。t 为 top 的缩写，b 为 bottom 的缩写，c 为 center 的缩写，l 为 left 的缩写，r 为 right 的缩写.

    \n
    2. \n

  2. align 支持的 Boolean 值仅为 false，在设置为 false 时，不使用 JS 定位，这样你可以根据你的需要传入 style 或者 className 进行 CSS 定位。

    \n
    3. \n

  3. rtl情况下会自动翻转 r(right)与 l(left), 例如 rtl状态下tl bl与 非rtl状态下tr br等效\n下面的例子演示了如何将弹层定位到页面的右上角：

    \n
    4. \n
\n
<Overlay visible align="tr tr"><span>123</span></Overlay>

Popup#

Popup 是对 Overlay 的封装，它接收某个节点作为触发节点，弹出一个浮层，这个浮层默认情况下使用这个节点作为定位的参照对象。

\n

API#

","api":"

Overlay#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
children弹层内容any-
visible是否显示弹层Booleanfalse
onRequestClose弹层请求关闭时触发事件的回调函数

签名:
Function(type: String, e: Object) => void
参数:
type: {String} 弹层关闭的来源
_e_: {Object} DOM 事件		Functionfunc.noop
target弹层定位的参照元素anyPosition.VIEWPORT
align弹层相对于参照元素的定位, 详见开发指南的定位部分String/Boolean'tl bl'
offset弹层相对于参照元素定位的微调Array[0, 0]
container渲染组件的容器，如果是函数需要返回 ref，如果是字符串则是该 DOM 的 id，也可以直接传入 DOM 节点any-
hasMask是否显示遮罩Booleanfalse
canCloseByEsc是否支持 esc 按键关闭弹层Booleantrue
canCloseByOutSideClick点击弹层外的区域是否关闭弹层，不显示遮罩时生效Booleantrue
canCloseByMask点击遮罩区域是否关闭弹层，显示遮罩时生效Booleantrue
beforeOpen弹层打开前触发事件的回调函数

签名:
Function() => void		Functionfunc.noop
onOpen弹层打开时触发事件的回调函数

签名:
Function() => void		Functionfunc.noop
afterOpen弹层打开后触发事件的回调函数, 如果有动画，则在动画结束后触发

签名:
Function() => void		Functionfunc.noop
beforeClose弹层关闭前触发事件的回调函数

签名:
Function() => void		Functionfunc.noop
onClose弹层关闭时触发事件的回调函数

签名:
Function() => void		Functionfunc.noop
afterClose弹层关闭后触发事件的回调函数, 如果有动画，则在动画结束后触发

签名:
Function() => void		Functionfunc.noop
beforePosition弹层定位完成前触发的事件

签名:
Function() => void		Functionfunc.noop
onPosition弹层定位完成时触发的事件

签名:
Function(config: Object, node: Object) => void
参数:
config: {Object} 定位的参数
config.align: {Array} 对齐方式，如 ['cc', 'cc']（如果开启 needAdjust，可能和预先设置的 align 不同）
config.top: {Number} 距离视口顶部距离
config.left: {Number} 距离视口左侧距离
node: {Object} 定位参照的容器节点		Functionfunc.noop
shouldUpdatePosition是否在每次弹层重新渲染后强制更新定位信息，一般用于弹层内容区域大小发生变化时，仍需保持原来的定位方式Booleanfalse
autoFocus弹层打开时是否让其中的元素自动获取焦点Booleanfalse
needAdjust当弹层由于页面滚动等情况不在可视区域时，是否自动调整定位以出现在可视区域Booleantrue
disableScroll是否禁用页面滚动Booleanfalse
cache隐藏时是否保留子节点Booleanfalse
safeNode安全节点，当点击 document 的时候，如果包含该节点则不会关闭弹层，如果是函数需要返回 ref，如果是字符串则是该 DOM 的 id，也可以直接传入 DOM 节点，或者以上值组成的数组any-
wrapperClassName弹层的根节点的样式类String-
wrapperStyle弹层的根节点的内联样式Object-
animation配置动画的播放方式，支持 { in: 'enter-class', out: 'leave-class' } 的对象参数，如果设置为 false，则不播放动画。 请参考 Animate 组件的文档获取可用的动画名Object/Boolean{ in: 'expandInDown', out: 'expandOutUp' }
\n

Overlay.Popup#

\n

继承 Overlay 的 API，除非特别说明

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
children弹层内容ReactNode-
trigger触发弹层显示或隐藏的元素ReactElement-
triggerType触发弹层显示或隐藏的操作类型，可以是 'click'，'hover'，'focus'，或者它们组成的数组，如 ['hover', 'focus']String/Array'hover'
triggerClickKeycode当 triggerType 为 click 时才生效，可自定义触发弹层显示的键盘码Number/Array[KEYCODE.SPACE, KEYCODE.ENTER]
visible弹层当前是否显示Boolean-
defaultVisible弹层默认是否显示Booleanfalse
onVisibleChange弹层显示或隐藏时触发的回调函数

签名:
Function(visible: Boolean, type: String, e: Object) => void
参数:
visible: {Boolean} 弹层是否显示
type: {String} 触发弹层显示或隐藏的来源
_e_: {Object} DOM事件		Functionfunc.noop
disabled设置此属性，弹层无法显示或隐藏Booleanfalse
delay弹层显示或隐藏的延时时间（以毫秒为单位），在 triggerType 被设置为 hover 时生效Number200
canCloseByTriggertrigger 是否可以关闭弹层Booleantrue
target弹层定位的参照元素anytarget 属性，即触发元素
followTrigger是否跟随trigger滚动Booleanfalse
\n

ARIA and KeyBoard#

说明： 此组件需要结合其他组件使用，会有提示。参考上文无障碍。

\n"} \ No newline at end of file diff --git a/compiled_docs/pagination/demo/control.en-us.md b/compiled_docs/pagination/demo/control.en-us.md new file mode 100644 index 0000000000..11f1a8439f --- /dev/null +++ b/compiled_docs/pagination/demo/control.en-us.md @@ -0,0 +1 @@ +{"title":"Controlled Pagination Component","meta":{"title":"Controlled Pagination Component","description":"\n"},"codes":{"jsx":"import { Pagination } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n current: 2\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(current) {\n this.setState({\n current\n });\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Pagination } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n current: 2\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(current) {\n this.setState({\n current\n });\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Pagination } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            current: 2\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(current) {\n        this.setState({\n            current\n        });\n    }\n\n    render() {\n        return (\n            <Pagination current={this.state.current} onChange={this.handleChange} />\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/pagination/demo/control.md b/compiled_docs/pagination/demo/control.md new file mode 100644 index 0000000000..26c6bb8603 --- /dev/null +++ b/compiled_docs/pagination/demo/control.md @@ -0,0 +1 @@ +{"title":"受控分页","meta":{"title":"受控分页","description":"\n

受控分页，是指分页组件的状态由父组件维护，组件自身只负责渲染其父组件传递的值，父组件通过 current 属性传递当前的值。

\n","order":"1"},"codes":{"jsx":"import { Pagination } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n current: 2\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(current) {\n this.setState({\n current\n });\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Pagination } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n current: 2\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(current) {\n this.setState({\n current\n });\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Pagination } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            current: 2\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(current) {\n        this.setState({\n            current\n        });\n    }\n\n    render() {\n        return (\n            <Pagination current={this.state.current} onChange={this.handleChange} />\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/pagination/demo/dropdown-direction.en-us.md b/compiled_docs/pagination/demo/dropdown-direction.en-us.md new file mode 100644 index 0000000000..4a4b01a75f --- /dev/null +++ b/compiled_docs/pagination/demo/dropdown-direction.en-us.md @@ -0,0 +1 @@ +{"title":"Every Page Display","meta":{"title":"Every Page Display","description":"\n

Set dropdown location using align property in popupProps prop.

\n","order":"9"},"codes":{"jsx":"import { Pagination } from '@alifd/next';\n\nconst handlePageSizeChange = size => console.log(size);\n\nconst containerStyle = {\n height: '300px',\n padding: 0,\n width: '100%',\n};\n\nconst boxStyle = {\n overflow: 'auto',\n position: 'relative',\n width: '100%',\n height: '200px',\n border: '1px solid black'\n};\n\nconst tempStyle = {\n height: '200px',\n\tdisplay: 'flex',\n 'justify-content': 'center',\n 'align-items': 'center',\n};\n\nconst parentStyle = {\n display: 'flex',\n 'justify-content': 'space-between',\n};\n\nconst popupProps = {\n align: 'bl tl'\n};\n\nReactDOM.render(\n
\n

default align - 'tl bl'

\n \n

custom align - 'bl tl'

\n \n

Inside parent with \"overlflow: auto\"

\n
\n
\n
scroll down to see the example
\n
\n
\n

default align - 'tl bl'

\n \n
\n
\n

custom align - 'bl tl'

\n \n
\n
\n
\n
\n
,\n mountNode\n);\n\n\n"},"body":"\n````jsx\nimport { Pagination } from '@alifd/next';\n\nconst handlePageSizeChange = size => console.log(size);\n\nconst containerStyle = {\n height: '300px',\n padding: 0,\n width: '100%',\n};\n\nconst boxStyle = {\n overflow: 'auto',\n position: 'relative',\n width: '100%',\n height: '200px',\n border: '1px solid black'\n};\n\nconst tempStyle = {\n height: '200px',\n\tdisplay: 'flex',\n 'justify-content': 'center',\n 'align-items': 'center',\n};\n\nconst parentStyle = {\n display: 'flex',\n 'justify-content': 'space-between',\n};\n\nconst popupProps = {\n align: 'bl tl'\n};\n\nReactDOM.render(\n
\n

default align - 'tl bl'

\n \n

custom align - 'bl tl'

\n \n

Inside parent with \"overlflow: auto\"

\n
\n
\n
scroll down to see the example
\n
\n
\n

default align - 'tl bl'

\n \n
\n
\n

custom align - 'bl tl'

\n \n
\n
\n
\n
\n
,\n mountNode\n);\n\n\n````","html":"
import { Pagination } from '@alifd/next';\n\nconst handlePageSizeChange = size => console.log(size);\n\nconst containerStyle = {\n    height: '300px',\n    padding: 0,\n    width: '100%',\n};\n\nconst boxStyle = {\n  overflow: 'auto',\n  position: 'relative',\n  width: '100%',\n  height: '200px',\n  border: '1px solid black'\n};\n\nconst tempStyle = {\n    height: '200px',\n    display: 'flex',\n    'justify-content': 'center',\n    'align-items': 'center',\n};\n\nconst parentStyle = {\n    display: 'flex',\n    'justify-content': 'space-between',\n};\n\nconst popupProps = {\n    align: 'bl tl'\n};\n\nReactDOM.render(\n    <div>\n        <h3>default align - 'tl bl'</h3>\n        <Pagination pageSizeSelector=\"dropdown\" total='10' pageSizePosition=\"start\" onPageSizeChange={handlePageSizeChange}/>\n        <h3>custom align - 'bl tl'</h3>\n        <Pagination pageSizeSelector=\"dropdown\" total='10' pageSizePosition=\"start\" onPageSizeChange={handlePageSizeChange} popupProps={popupProps}/>\n        <h3>Inside parent with \"overlflow: auto\"</h3>\n        <div style={containerStyle}>\n            <div style={boxStyle}>\n                <div style={tempStyle}>scroll down to see the example</div>\n                <div style={parentStyle}>\n                    <div>\n                        <h3>default align - 'tl bl'</h3>\n                        <Pagination pageSizeSelector=\"dropdown\" total='10' pageSizePosition=\"start\" onPageSizeChange={handlePageSizeChange}/>\n                    </div>\n                    <div>\n                        <h3>custom align - 'bl tl'</h3>\n                        <Pagination pageSizeSelector=\"dropdown\" total='10' pageSizePosition=\"start\" onPageSizeChange={handlePageSizeChange} popupProps={popupProps}/>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>,\n    mountNode\n);\n\n
"} \ No newline at end of file diff --git a/compiled_docs/pagination/demo/dropdown-direction.md b/compiled_docs/pagination/demo/dropdown-direction.md new file mode 100644 index 0000000000..ece923fc05 --- /dev/null +++ b/compiled_docs/pagination/demo/dropdown-direction.md @@ -0,0 +1 @@ +{"title":"每页显示","meta":{"title":"每页显示","description":"\n

使用popupProps prop中的align属性设置下拉位置。

\n","order":"9"},"codes":{"jsx":"import { Pagination } from '@alifd/next';\n\nconst handlePageSizeChange = size => console.log(size);\n\nconst containerStyle = {\n height: '300px',\n padding: 0,\n width: '100%',\n};\n\nconst boxStyle = {\n overflow: 'auto',\n position: 'relative',\n width: '100%',\n height: '200px',\n border: '1px solid black'\n};\n\nconst tempStyle = {\n height: '200px',\n\tdisplay: 'flex',\n 'justify-content': 'center',\n 'align-items': 'center',\n};\n\nconst parentStyle = {\n display: 'flex',\n 'justify-content': 'space-between',\n};\n\nconst popupProps = {\n align: 'bl tl'\n};\n\nReactDOM.render(\n
\n

default align - 'tl bl'

\n \n

custom align - 'bl tl'

\n \n

Inside parent with \"overlflow: auto\"

\n
\n
\n
scroll down to see the example
\n
\n
\n

default align - 'tl bl'

\n \n
\n
\n

custom align - 'bl tl'

\n \n
\n
\n
\n
\n
,\n mountNode\n);\n\n\n"},"body":"\n\n\n\n````jsx\nimport { Pagination } from '@alifd/next';\n\nconst handlePageSizeChange = size => console.log(size);\n\nconst containerStyle = {\n height: '300px',\n padding: 0,\n width: '100%',\n};\n\nconst boxStyle = {\n overflow: 'auto',\n position: 'relative',\n width: '100%',\n height: '200px',\n border: '1px solid black'\n};\n\nconst tempStyle = {\n height: '200px',\n\tdisplay: 'flex',\n 'justify-content': 'center',\n 'align-items': 'center',\n};\n\nconst parentStyle = {\n display: 'flex',\n 'justify-content': 'space-between',\n};\n\nconst popupProps = {\n align: 'bl tl'\n};\n\nReactDOM.render(\n
\n

default align - 'tl bl'

\n \n

custom align - 'bl tl'

\n \n

Inside parent with \"overlflow: auto\"

\n
\n
\n
scroll down to see the example
\n
\n
\n

default align - 'tl bl'

\n \n
\n
\n

custom align - 'bl tl'

\n \n
\n
\n
\n
\n
,\n mountNode\n);\n\n\n````","html":"
import { Pagination } from '@alifd/next';\n\nconst handlePageSizeChange = size => console.log(size);\n\nconst containerStyle = {\n    height: '300px',\n    padding: 0,\n    width: '100%',\n};\n\nconst boxStyle = {\n  overflow: 'auto',\n  position: 'relative',\n  width: '100%',\n  height: '200px',\n  border: '1px solid black'\n};\n\nconst tempStyle = {\n    height: '200px',\n    display: 'flex',\n    'justify-content': 'center',\n    'align-items': 'center',\n};\n\nconst parentStyle = {\n    display: 'flex',\n    'justify-content': 'space-between',\n};\n\nconst popupProps = {\n    align: 'bl tl'\n};\n\nReactDOM.render(\n    <div>\n        <h3>default align - 'tl bl'</h3>\n        <Pagination pageSizeSelector=\"dropdown\" total='10' pageSizePosition=\"start\" onPageSizeChange={handlePageSizeChange}/>\n        <h3>custom align - 'bl tl'</h3>\n        <Pagination pageSizeSelector=\"dropdown\" total='10' pageSizePosition=\"start\" onPageSizeChange={handlePageSizeChange} popupProps={popupProps}/>\n        <h3>Inside parent with \"overlflow: auto\"</h3>\n        <div style={containerStyle}>\n            <div style={boxStyle}>\n                <div style={tempStyle}>scroll down to see the example</div>\n                <div style={parentStyle}>\n                    <div>\n                        <h3>default align - 'tl bl'</h3>\n                        <Pagination pageSizeSelector=\"dropdown\" total='10' pageSizePosition=\"start\" onPageSizeChange={handlePageSizeChange}/>\n                    </div>\n                    <div>\n                        <h3>custom align - 'bl tl'</h3>\n                        <Pagination pageSizeSelector=\"dropdown\" total='10' pageSizePosition=\"start\" onPageSizeChange={handlePageSizeChange} popupProps={popupProps}/>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </div>,\n    mountNode\n);\n\n
"} \ No newline at end of file diff --git a/compiled_docs/pagination/demo/link.en-us.md b/compiled_docs/pagination/demo/link.en-us.md new file mode 100644 index 0000000000..0afb0d9120 --- /dev/null +++ b/compiled_docs/pagination/demo/link.en-us.md @@ -0,0 +1 @@ +{"title":"Pagination Button Link","meta":{"title":"Pagination Button Link","description":"\n

You can set the page link's jump url by specifying the link attribute. The value of the SEO, link attribute is a template string containing {page}, and the Pagination component replaces the placeholder with a specific page number.

\n","order":"7"},"codes":{"jsx":"import { Pagination } from '@alifd/next';\n\nconst format = `${window.location.href}#/{page}`;\n\nReactDOM.render(\n ,\n mountNode\n);\n"},"body":"\n````jsx\nimport { Pagination } from '@alifd/next';\n\nconst format = `${window.location.href}#/{page}`;\n\nReactDOM.render(\n ,\n mountNode\n);\n````","html":"
import { Pagination } from '@alifd/next';\n\nconst format = `${window.location.href}#/{page}`;\n\nReactDOM.render(\n    <Pagination defaultCurrent={2} link={format} />,\n    mountNode\n);
"} \ No newline at end of file diff --git a/compiled_docs/pagination/demo/link.md b/compiled_docs/pagination/demo/link.md new file mode 100644 index 0000000000..448785229c --- /dev/null +++ b/compiled_docs/pagination/demo/link.md @@ -0,0 +1 @@ +{"title":"分页按钮链接","meta":{"title":"分页按钮链接","description":"\n

可以通过指定 link 属性来设置页码按钮的跳转链接，方便 SEO，link 属性的值为一个包含 {page} 的模板字符串，Pagination 组件会将该占位符替换为具体的页码数字。

\n","order":"7"},"codes":{"jsx":"import { Pagination } from '@alifd/next';\n\nconst format = `${window.location.href}#/{page}`;\n\nReactDOM.render(\n ,\n mountNode\n);\n"},"body":"\n\n````jsx\nimport { Pagination } from '@alifd/next';\n\nconst format = `${window.location.href}#/{page}`;\n\nReactDOM.render(\n ,\n mountNode\n);\n````","html":"
import { Pagination } from '@alifd/next';\n\nconst format = `${window.location.href}#/{page}`;\n\nReactDOM.render(\n    <Pagination defaultCurrent={2} link={format} />,\n    mountNode\n);
"} \ No newline at end of file diff --git a/compiled_docs/pagination/demo/page-size.en-us.md b/compiled_docs/pagination/demo/page-size.en-us.md new file mode 100644 index 0000000000..6cc76a2413 --- /dev/null +++ b/compiled_docs/pagination/demo/page-size.en-us.md @@ -0,0 +1 @@ +{"title":"Every Page Display","meta":{"title":"Every Page Display","description":"\n

The Page Size property can be set to specify the number of records on the page.
\nThe pageSizeSelector property can be set to specify whether to display the number of parts selected per page and the part shape.\nThe pageSizeList property can specify the number of displayable values per page.
\nBy setting the pageSizePosition property, you can specify whether the part selected by the display quantity per page is displayed at the beginning or end of the entire component .\nThe onPageSizeChange property can be set to specify the callback function when the number of pages displayed changes.

\n","order":"5"},"codes":{"jsx":"import { Pagination } from '@alifd/next';\n\nconst handlePageSizeChange = size => console.log(size);\n\nReactDOM.render(\n
\n

To hidden per page size selector

\n \n

Type per page size selector of is dropdown，and as for the tail of the entire component

\n \n

Filter type per page size selector, and use floating layout

\n \n
,\n mountNode\n);\n"},"body":"\n````jsx\nimport { Pagination } from '@alifd/next';\n\nconst handlePageSizeChange = size => console.log(size);\n\nReactDOM.render(\n
\n

To hidden per page size selector

\n \n

Type per page size selector of is dropdown，and as for the tail of the entire component

\n \n

Filter type per page size selector, and use floating layout

\n \n
,\n mountNode\n);\n````","html":"
import { Pagination } from '@alifd/next';\n\nconst handlePageSizeChange = size => console.log(size);\n\nReactDOM.render(\n    <div>\n        <h3>To hidden per page size selector</h3>\n        <Pagination pageSizeSelector={false} />\n        <h3>Type per page size selector of is dropdown，and as for the tail of the entire component</h3>\n        <Pagination pageSizeSelector=\"dropdown\" pageSizePosition=\"end\" onPageSizeChange={handlePageSizeChange} />\n        <h3>Filter type per page size selector, and use floating layout</h3>\n        <Pagination pageSizeSelector=\"filter\" onPageSizeChange={handlePageSizeChange} useFloatLayout />\n    </div>,\n    mountNode\n);
"} \ No newline at end of file diff --git a/compiled_docs/pagination/demo/page-size.md b/compiled_docs/pagination/demo/page-size.md new file mode 100644 index 0000000000..41a84e50fb --- /dev/null +++ b/compiled_docs/pagination/demo/page-size.md @@ -0,0 +1 @@ +{"title":"每页显示","meta":{"title":"每页显示","description":"\n

可以通过设置 pageSize 属性来指定每页显示的数量。
\n可以通过设置 pageSizeSelector 属性来指定是否显示 每页数量选择 的部件以及部件形状。
\n可以通过设置 pageSizeList 属性来指定 每页显示数量 可选的值。
\n可以通过设置 pageSizePosition 属性来指定 每页显示数量选择 的部件显示在整个组件的开始位置还是结束位置。\n可以通过设置 onPageSizeChange 属性来指定每页显示的数量变化时的回调函数。

\n","order":"5"},"codes":{"jsx":"import { Pagination } from '@alifd/next';\n\nconst handlePageSizeChange = size => console.log(size);\n\nReactDOM.render(\n
\n

To hidden per page size selector

\n \n

Type per page size selector of is dropdown，and as for the tail of the entire component

\n \n

Filter type per page size selector, and use floating layout

\n \n
,\n mountNode\n);\n"},"body":"\n\n````jsx\nimport { Pagination } from '@alifd/next';\n\nconst handlePageSizeChange = size => console.log(size);\n\nReactDOM.render(\n
\n

To hidden per page size selector

\n \n

Type per page size selector of is dropdown，and as for the tail of the entire component

\n \n

Filter type per page size selector, and use floating layout

\n \n
,\n mountNode\n);\n````","html":"
import { Pagination } from '@alifd/next';\n\nconst handlePageSizeChange = size => console.log(size);\n\nReactDOM.render(\n    <div>\n        <h3>To hidden per page size selector</h3>\n        <Pagination pageSizeSelector={false} />\n        <h3>Type per page size selector of is dropdown，and as for the tail of the entire component</h3>\n        <Pagination pageSizeSelector=\"dropdown\" pageSizePosition=\"end\" onPageSizeChange={handlePageSizeChange} />\n        <h3>Filter type per page size selector, and use floating layout</h3>\n        <Pagination pageSizeSelector=\"filter\" onPageSizeChange={handlePageSizeChange} useFloatLayout />\n    </div>,\n    mountNode\n);
"} \ No newline at end of file diff --git a/compiled_docs/pagination/demo/react-router.en-us.md b/compiled_docs/pagination/demo/react-router.en-us.md new file mode 100644 index 0000000000..5c3992ddbf --- /dev/null +++ b/compiled_docs/pagination/demo/react-router.en-us.md @@ -0,0 +1 @@ +{"title":"Using With React-Router","meta":{"title":"Using With React-Router","description":"\n

In a single-page application scenario, the Pagination component can use external jump methods to implement single-page internal jumps.

\n","order":"8"},"codes":{"jsx":"import { Pagination } from '@alifd/next';\nimport { hashHistory } from 'react-router';\n\nfunction handleChange(page) {\n hashHistory.push(page.toString());\n}\n\nReactDOM.render(\n ,\n mountNode\n);\n"},"body":"\n````jsx\nimport { Pagination } from '@alifd/next';\nimport { hashHistory } from 'react-router';\n\nfunction handleChange(page) {\n hashHistory.push(page.toString());\n}\n\nReactDOM.render(\n ,\n mountNode\n);\n````","html":"
import { Pagination } from '@alifd/next';\nimport { hashHistory } from 'react-router';\n\nfunction handleChange(page) {\n    hashHistory.push(page.toString());\n}\n\nReactDOM.render(\n    <Pagination defaultCurrent={2} onChange={handleChange} />,\n    mountNode\n);
"} \ No newline at end of file diff --git a/compiled_docs/pagination/demo/react-router.md b/compiled_docs/pagination/demo/react-router.md new file mode 100644 index 0000000000..07288cbda5 --- /dev/null +++ b/compiled_docs/pagination/demo/react-router.md @@ -0,0 +1 @@ +{"title":"配合 react-router 使用","meta":{"title":"配合 react-router 使用","description":"\n

单页应用场景下，Pagination 组件可以使用外部跳转的方法来实现单页内部跳转。

\n","order":"8"},"codes":{"jsx":"import { Pagination } from '@alifd/next';\nimport { hashHistory } from 'react-router';\n\nfunction handleChange(page) {\n hashHistory.push(page.toString());\n}\n\nReactDOM.render(\n ,\n mountNode\n);\n"},"body":"\n\n````jsx\nimport { Pagination } from '@alifd/next';\nimport { hashHistory } from 'react-router';\n\nfunction handleChange(page) {\n hashHistory.push(page.toString());\n}\n\nReactDOM.render(\n ,\n mountNode\n);\n````","html":"
import { Pagination } from '@alifd/next';\nimport { hashHistory } from 'react-router';\n\nfunction handleChange(page) {\n    hashHistory.push(page.toString());\n}\n\nReactDOM.render(\n    <Pagination defaultCurrent={2} onChange={handleChange} />,\n    mountNode\n);
"} \ No newline at end of file diff --git a/compiled_docs/pagination/demo/shape.en-us.md b/compiled_docs/pagination/demo/shape.en-us.md new file mode 100644 index 0000000000..186d63585f --- /dev/null +++ b/compiled_docs/pagination/demo/shape.en-us.md @@ -0,0 +1 @@ +{"title":"Forward and Back Buttons Only Show Arrows","meta":{"title":"Forward and Back Buttons Only Show Arrows","description":"\n

You can set the forward and back arrow arrows to display by specifying the shape property.

\n","order":"4"},"codes":{"jsx":"import { Pagination } from '@alifd/next';\n\nReactDOM.render(\n
\n

normal

\n \n

arrow-only

\n \n

arrow-prev-only

\n \n

no-border

\n \n
,\n mountNode\n);\n","css":".next-pagination + .next-pagination {\n margin-top: 20px;\n}\n"},"body":"\n````jsx\nimport { Pagination } from '@alifd/next';\n\nReactDOM.render(\n
\n

normal

\n \n

arrow-only

\n \n

arrow-prev-only

\n \n

no-border

\n \n
,\n mountNode\n);\n````\n\n````css\n.next-pagination + .next-pagination {\n margin-top: 20px;\n}\n````","html":"
import { Pagination } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <h3>normal</h3>\n        <Pagination defaultCurrent={2} />\n        <h3>arrow-only</h3>\n        <Pagination defaultCurrent={2} shape=\"arrow-only\" />\n        <h3>arrow-prev-only</h3>\n        <Pagination defaultCurrent={2} shape=\"arrow-prev-only\" />\n        <h3>no-border</h3>\n        <Pagination defaultCurrent={2} shape=\"no-border\" type=\"simple\" />\n    </div>,\n    mountNode\n);
.next-pagination + .next-pagination {\n    margin-top: 20px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/pagination/demo/shape.md b/compiled_docs/pagination/demo/shape.md new file mode 100644 index 0000000000..843b4ad71e --- /dev/null +++ b/compiled_docs/pagination/demo/shape.md @@ -0,0 +1 @@ +{"title":"前进后退按钮只显示箭头","meta":{"title":"前进后退按钮只显示箭头","description":"\n

可以通过指定 shape 属性来设置前进后退按钮箭头的显示方式。

\n","order":"4"},"codes":{"jsx":"import { Pagination } from '@alifd/next';\n\nReactDOM.render(\n
\n

normal

\n \n

arrow-only

\n \n

arrow-prev-only

\n \n

no-border

\n \n
,\n mountNode\n);\n","css":".next-pagination + .next-pagination {\n margin-top: 20px;\n}\n"},"body":"\n\n````jsx\nimport { Pagination } from '@alifd/next';\n\nReactDOM.render(\n
\n

normal

\n \n

arrow-only

\n \n

arrow-prev-only

\n \n

no-border

\n \n
,\n mountNode\n);\n````\n\n````css\n.next-pagination + .next-pagination {\n margin-top: 20px;\n}\n````","html":"
import { Pagination } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <h3>normal</h3>\n        <Pagination defaultCurrent={2} />\n        <h3>arrow-only</h3>\n        <Pagination defaultCurrent={2} shape=\"arrow-only\" />\n        <h3>arrow-prev-only</h3>\n        <Pagination defaultCurrent={2} shape=\"arrow-prev-only\" />\n        <h3>no-border</h3>\n        <Pagination defaultCurrent={2} shape=\"no-border\" type=\"simple\" />\n    </div>,\n    mountNode\n);
.next-pagination + .next-pagination {\n    margin-top: 20px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/pagination/demo/show-total.en-us.md b/compiled_docs/pagination/demo/show-total.en-us.md new file mode 100644 index 0000000000..7ce50abb88 --- /dev/null +++ b/compiled_docs/pagination/demo/show-total.en-us.md @@ -0,0 +1 @@ +{"title":"Display Total Number","meta":{"title":"Display Total Number","description":"\n

By default, the paging component does not display the total number. You can customize the total display result by using totalRender.

\n","order":"6"},"codes":{"jsx":"import { Pagination } from '@alifd/next';\n\nconst total = 50;\n\nReactDOM.render(\n `Total: ${total}`} />,\n mountNode\n);\n","css":".custom-pagination {\n display: inline-block;\n margin-left: 10px;\n}\n"},"body":"\n````jsx\nimport { Pagination } from '@alifd/next';\n\nconst total = 50;\n\nReactDOM.render(\n `Total: ${total}`} />,\n mountNode\n);\n````\n\n````css\n.custom-pagination {\n display: inline-block;\n margin-left: 10px;\n}\n````","html":"
import { Pagination } from '@alifd/next';\n\nconst total = 50;\n\nReactDOM.render(\n    <Pagination className=\"custom-pagination\" total={total} totalRender={total => `Total: ${total}`} />,\n    mountNode\n);
.custom-pagination {\n    display: inline-block;\n    margin-left: 10px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/pagination/demo/show-total.md b/compiled_docs/pagination/demo/show-total.md new file mode 100644 index 0000000000..c20ca76119 --- /dev/null +++ b/compiled_docs/pagination/demo/show-total.md @@ -0,0 +1 @@ +{"title":"显示总数","meta":{"title":"显示总数","description":"\n

分页组件默认不显示总数，你可以通过 totalRender 自定义总数的显示结果。

\n","order":"6"},"codes":{"jsx":"import { Pagination } from '@alifd/next';\n\nconst total = 50;\n\nReactDOM.render(\n `Total: ${total}`} />,\n mountNode\n);\n","css":".custom-pagination {\n display: inline-block;\n margin-left: 10px;\n}\n"},"body":"\n\n````jsx\nimport { Pagination } from '@alifd/next';\n\nconst total = 50;\n\nReactDOM.render(\n `Total: ${total}`} />,\n mountNode\n);\n````\n\n````css\n.custom-pagination {\n display: inline-block;\n margin-left: 10px;\n}\n````","html":"
import { Pagination } from '@alifd/next';\n\nconst total = 50;\n\nReactDOM.render(\n    <Pagination className=\"custom-pagination\" total={total} totalRender={total => `Total: ${total}`} />,\n    mountNode\n);
.custom-pagination {\n    display: inline-block;\n    margin-left: 10px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/pagination/demo/size.en-us.md b/compiled_docs/pagination/demo/size.en-us.md new file mode 100644 index 0000000000..a036a46c71 --- /dev/null +++ b/compiled_docs/pagination/demo/size.en-us.md @@ -0,0 +1 @@ +{"title":"Page Size","meta":{"title":"Page Size","description":"\n

You can set the paging size by specifying the size property.

\n","order":"2"},"codes":{"jsx":"import { Pagination } from '@alifd/next';\n\nReactDOM.render(\n
\n

small

\n \n

medium

\n \n

large

\n \n
,\n mountNode\n);\n"},"body":"\n````jsx\nimport { Pagination } from '@alifd/next';\n\nReactDOM.render(\n
\n

small

\n \n

medium

\n \n

large

\n \n
,\n mountNode\n);\n````","html":"
import { Pagination } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <h3>small</h3>\n        <Pagination defaultCurrent={2} size=\"small\" />\n        <h3>medium</h3>\n        <Pagination defaultCurrent={2} size=\"medium\" />\n        <h3>large</h3>\n        <Pagination defaultCurrent={2} size=\"large\" />\n    </div>,\n    mountNode\n);
"} \ No newline at end of file diff --git a/compiled_docs/pagination/demo/size.md b/compiled_docs/pagination/demo/size.md new file mode 100644 index 0000000000..ed97166331 --- /dev/null +++ b/compiled_docs/pagination/demo/size.md @@ -0,0 +1 @@ +{"title":"分页尺寸","meta":{"title":"分页尺寸","description":"\n

可以通过指定 size 属性来设置分页的尺寸。

\n","order":"2"},"codes":{"jsx":"import { Pagination } from '@alifd/next';\n\nReactDOM.render(\n
\n

small

\n \n

medium

\n \n

large

\n \n
,\n mountNode\n);\n"},"body":"\n\n````jsx\nimport { Pagination } from '@alifd/next';\n\nReactDOM.render(\n
\n

small

\n \n

medium

\n \n

large

\n \n
,\n mountNode\n);\n````","html":"
import { Pagination } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <h3>small</h3>\n        <Pagination defaultCurrent={2} size=\"small\" />\n        <h3>medium</h3>\n        <Pagination defaultCurrent={2} size=\"medium\" />\n        <h3>large</h3>\n        <Pagination defaultCurrent={2} size=\"large\" />\n    </div>,\n    mountNode\n);
"} \ No newline at end of file diff --git a/compiled_docs/pagination/demo/type.en-us.md b/compiled_docs/pagination/demo/type.en-us.md new file mode 100644 index 0000000000..48ccd77905 --- /dev/null +++ b/compiled_docs/pagination/demo/type.en-us.md @@ -0,0 +1 @@ +{"title":"Type of Pagination","meta":{"title":"Type of Pagination","description":"\n

Set the component type by specifying the type property.

\n","order":"3"},"codes":{"jsx":"import { Pagination } from '@alifd/next';\n\nReactDOM.render(\n
\n

normal

\n \n

simple

\n \n

mini

\n \n
,\n mountNode\n);\n"},"body":"\n````jsx\nimport { Pagination } from '@alifd/next';\n\nReactDOM.render(\n
\n

normal

\n \n

simple

\n \n

mini

\n \n
,\n mountNode\n);\n````","html":"
import { Pagination } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <h3>normal</h3>\n        <Pagination defaultCurrent={2} />\n        <h3>simple</h3>\n        <Pagination defaultCurrent={2} type=\"simple\" />\n        <h3>mini</h3>\n        <Pagination defaultCurrent={2} type=\"mini\" />\n    </div>,\n    mountNode\n);
"} \ No newline at end of file diff --git a/compiled_docs/pagination/demo/type.md b/compiled_docs/pagination/demo/type.md new file mode 100644 index 0000000000..aa268da42a --- /dev/null +++ b/compiled_docs/pagination/demo/type.md @@ -0,0 +1 @@ +{"title":"分页类型","meta":{"title":"分页类型","description":"\n

可以通过指定 type 属性来设置分页的类型。

\n","order":"3"},"codes":{"jsx":"import { Pagination } from '@alifd/next';\n\nReactDOM.render(\n
\n

normal

\n \n

simple

\n \n

mini

\n \n
,\n mountNode\n);\n"},"body":"\n\n````jsx\nimport { Pagination } from '@alifd/next';\n\nReactDOM.render(\n
\n

normal

\n \n

simple

\n \n

mini

\n \n
,\n mountNode\n);\n````","html":"
import { Pagination } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <h3>normal</h3>\n        <Pagination defaultCurrent={2} />\n        <h3>simple</h3>\n        <Pagination defaultCurrent={2} type=\"simple\" />\n        <h3>mini</h3>\n        <Pagination defaultCurrent={2} type=\"mini\" />\n    </div>,\n    mountNode\n);
"} \ No newline at end of file diff --git a/compiled_docs/pagination/demo/uncontrol.en-us.md b/compiled_docs/pagination/demo/uncontrol.en-us.md new file mode 100644 index 0000000000..19cdf7ddd9 --- /dev/null +++ b/compiled_docs/pagination/demo/uncontrol.en-us.md @@ -0,0 +1 @@ +{"title":"Uncontrolled Pagination Component","meta":{"title":"Uncontrolled Pagination Component","description":"\n"},"codes":{"jsx":"import { Pagination } from '@alifd/next';\n\nconst change = function(value) {\n console.log(value);\n};\n\nReactDOM.render(\n ,\n mountNode\n);\n"},"body":"\n````jsx\nimport { Pagination } from '@alifd/next';\n\nconst change = function(value) {\n console.log(value);\n};\n\nReactDOM.render(\n ,\n mountNode\n);\n````","html":"
import { Pagination } from '@alifd/next';\n\nconst change = function(value) {\n    console.log(value);\n};\n\nReactDOM.render(\n    <Pagination defaultCurrent={2} onChange={change} />,\n    mountNode\n);
"} \ No newline at end of file diff --git a/compiled_docs/pagination/demo/uncontrol.md b/compiled_docs/pagination/demo/uncontrol.md new file mode 100644 index 0000000000..a0ddab8b82 --- /dev/null +++ b/compiled_docs/pagination/demo/uncontrol.md @@ -0,0 +1 @@ +{"title":"非受控分页","meta":{"title":"非受控分页","description":"\n

非受控分页，是指分页组件的状态由自己维护，组件值的改变可以通过 onChange 事件通知父组件，默认值由 defaultCurrent 初始化。

\n","order":"0"},"codes":{"jsx":"import { Pagination } from '@alifd/next';\n\nconst change = function(value) {\n console.log(value);\n};\n\nReactDOM.render(\n ,\n mountNode\n);\n"},"body":"\n\n````jsx\nimport { Pagination } from '@alifd/next';\n\nconst change = function(value) {\n console.log(value);\n};\n\nReactDOM.render(\n ,\n mountNode\n);\n````","html":"
import { Pagination } from '@alifd/next';\n\nconst change = function(value) {\n    console.log(value);\n};\n\nReactDOM.render(\n    <Pagination defaultCurrent={2} onChange={change} />,\n    mountNode\n);
"} \ No newline at end of file diff --git a/compiled_docs/pagination/index.en-us.md b/compiled_docs/pagination/index.en-us.md new file mode 100644 index 0000000000..42235242af --- /dev/null +++ b/compiled_docs/pagination/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Guide#

When To Use#

When there is a lot of content to show when paged load processing is needed.

\n

API#

","api":"

Pagination#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
sizeSet the size of Pagination component

option:
'small', 'medium', 'large'		Enum'medium'
typeSet the type of Pagination component

option:
'normal', 'simple', 'mini'		Enum'normal'
shapeForward Back Button Style

option:
'normal', 'arrow-only', 'arrow-prev-only', 'no-border'		Enum'normal'
current（controlled）Current page numberNumber-
defaultCurrent（uncontrolled）Initial page numberNumber1
onChangeCallback function when page number changes

signatures:
Function(current: Number, e: Object) => void
params:
current: {Number} Changed number of pages
_e_: {Object} Click envent object		Function() => {}
totaltotal pages numberNumber100
totalRenderThe rendering functions of total number

signatures:
Function(total: Number, range: Array) => void
params:
total: {Number} Total number
range: {Array} The intervals of current data in the total number		Function-
pageShowCountThe number of pages displayed, more use '...' insteadNumber5
pageSizeHow many records in a pageNumber10
pageSizeSelectorSet to display selector type per page size

option:
false, 'filter', 'dropdown'		Enumfalse
pageSizeListDisplay selector selectable records-number per pageArray<Number>/Array<Object>[5, 10, 20]
pageNumberRenderCustom page number rendering function, function for page number button and digital rendering of current page/total page count

signatures:
Function(index: Number) => ReactNode
params:
index: {Number} Page number of page, starting from 1
return:
{ReactNode} Return rendering results
Functionindex => index
pageSizePositionSet the position of pageSize selector

option:
'start', 'end'		Enum'start'
useFloatLayoutIs there a floating layout when pageSize selector is displayedBooleanfalse
onPageSizeChangeThe callback function trigget when the number of pageSize selector changes

signatures:
Function(pageSize: Number) => void
params:
pageSize: {Number} The number of pagesize changed		Function() => {}
hideOnlyOnePageWhether to hide the pager when the number of pages is 1Booleanfalse
showJumpWhen the number of pagination is 1, if the hidden pager type is set to normal, after the page number exceeds 5 pages, the jump input box and button will be displayed. When showJump is set to false, the jump zone is no longer displayed.Booleantrue
linkSet the jump link url of the page number button. Its value is a template string containing {page}, such as：http://xxx.com/{page}String-
popupPropsProps for PopupObject-
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyBoardDescripiton
Tabswitch page
Spaceclick the button
Enterclick the button
\n"} \ No newline at end of file diff --git a/compiled_docs/pagination/index.md b/compiled_docs/pagination/index.md new file mode 100644 index 0000000000..32533bf22f --- /dev/null +++ b/compiled_docs/pagination/index.md @@ -0,0 +1 @@ +{"meta":"

开发指南#

何时使用#

在有大量内容展现需要进行分页加载处理的时候。

\n

API#

","api":"

Pagination#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
size分页组件大小

可选值:
'small', 'medium', 'large'		Enum'medium'
type分页组件类型

可选值:
'normal', 'simple', 'mini'		Enum'normal'
shape前进后退按钮样式

可选值:
'normal', 'arrow-only', 'arrow-prev-only', 'no-border'		Enum'normal'
current（受控）当前页码Number-
defaultCurrent（非受控）初始页码Number1
onChange页码发生改变时的回调函数

签名:
Function(current: Number, e: Object) => void
参数:
current: {Number} 改变后的页码数
_e_: {Object} 点击事件对象		Function() => {}
total总记录数Number100
totalRender总数的渲染函数

签名:
Function(total: Number, range: Array) => void
参数:
total: {Number} 总数
range: {Array} 当前数据在总数中的区间		Function-
pageShowCount页码显示的数量，更多的使用...代替Number5
pageSize一页中的记录数Number10
pageSizeSelector每页显示选择器类型

可选值:
false, 'filter', 'dropdown'		Enumfalse
pageSizeList每页显示选择器可选值Array<Number>/Array<Object>[5, 10, 20]
pageNumberRender自定义页码渲染函数，函数作用于页码button以及当前页/总页数的数字渲染

签名:
Function(index: Number) => ReactNode
参数:
index: {Number} 分页的页码，从1开始
返回值:
{ReactNode} 返回渲染结果
Functionindex => index
pageSizePosition每页显示选择器在组件中的位置

可选值:
'start', 'end'		Enum'start'
useFloatLayout存在每页显示选择器时是否使用浮动布局Booleanfalse
onPageSizeChange每页显示记录数量改变时的回调函数

签名:
Function(pageSize: Number) => void
参数:
pageSize: {Number} 改变后的每页显示记录数		Function() => {}
hideOnlyOnePage当分页数为1时，是否隐藏分页器Booleanfalse
showJumptype 设置为 normal 时，在页码数超过5页后，会显示跳转输入框与按钮，当设置 showJump 为 false 时，不再显示该跳转区域Booleantrue
link设置页码按钮的跳转链接，它的值为一个包含 {page} 的模版字符串，如：http://xxx.com/{page}String-
popupProps弹层组件属性，透传给PopupObject-
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
按键说明
Tab切换页数
Space按下按钮
Enter按下按钮
\n"} \ No newline at end of file diff --git a/compiled_docs/paragraph/demo/basic.en-us.md b/compiled_docs/paragraph/demo/basic.en-us.md new file mode 100644 index 0000000000..a56eab2461 --- /dev/null +++ b/compiled_docs/paragraph/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"basic","meta":{"title":"basic","description":"\n

simple usage

\n","order":"0"},"codes":{"jsx":"import { Paragraph } from '@alifd/next';\n\nconst content = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';\n\nReactDOM.render(
\n {content}\n
\n {content}\n
, mountNode);\n"},"body":"\n````jsx\nimport { Paragraph } from '@alifd/next';\n\nconst content = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';\n\nReactDOM.render(
\n {content}\n
\n {content}\n
, mountNode);\n````","html":"
import { Paragraph } from '@alifd/next';\n\nconst content = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';\n\nReactDOM.render(<div>\n    <Paragraph>{content}</Paragraph>\n    <br/>\n    <Paragraph size=\"small\">{content}</Paragraph>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/paragraph/demo/basic.md b/compiled_docs/paragraph/demo/basic.md new file mode 100644 index 0000000000..6d321593a5 --- /dev/null +++ b/compiled_docs/paragraph/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

最简单的用法。

\n","order":"0"},"codes":{"jsx":"import { Paragraph } from '@alifd/next';\n\nconst content = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';\n\nReactDOM.render(
\n {content}\n
\n {content}\n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Paragraph } from '@alifd/next';\n\nconst content = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';\n\nReactDOM.render(
\n {content}\n
\n {content}\n
, mountNode);\n````","html":"
import { Paragraph } from '@alifd/next';\n\nconst content = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';\n\nReactDOM.render(<div>\n    <Paragraph>{content}</Paragraph>\n    <br/>\n    <Paragraph size=\"small\">{content}</Paragraph>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/paragraph/demo/type.en-us.md b/compiled_docs/paragraph/demo/type.en-us.md new file mode 100644 index 0000000000..db2611508d --- /dev/null +++ b/compiled_docs/paragraph/demo/type.en-us.md @@ -0,0 +1 @@ +{"title":"long and short text","meta":{"title":"long and short text","description":"\n

long for all text, short for those text within three lines

\n","order":"1"},"codes":{"jsx":"import { Paragraph } from '@alifd/next';\n\nconst content = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';\n\nReactDOM.render(
\n {content}\n
\n {content}\n
, mountNode);\n"},"body":"\n````jsx\nimport { Paragraph } from '@alifd/next';\n\nconst content = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';\n\nReactDOM.render(
\n {content}\n
\n {content}\n
, mountNode);\n````","html":"
import { Paragraph } from '@alifd/next';\n\nconst content = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';\n\nReactDOM.render(<div>\n    <Paragraph>{content}</Paragraph>\n    <br/>\n    <Paragraph type=\"short\">{content}</Paragraph>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/paragraph/demo/type.md b/compiled_docs/paragraph/demo/type.md new file mode 100644 index 0000000000..304e0f4e42 --- /dev/null +++ b/compiled_docs/paragraph/demo/type.md @@ -0,0 +1 @@ +{"title":"长短文本","meta":{"title":"长短文本","description":"\n

用于短文本和长文本的区分，短文本的行间距会更小(一般为三行以内)

\n","order":"1"},"codes":{"jsx":"import { Paragraph } from '@alifd/next';\n\nconst content = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';\n\nReactDOM.render(
\n {content}\n
\n {content}\n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Paragraph } from '@alifd/next';\n\nconst content = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';\n\nReactDOM.render(
\n {content}\n
\n {content}\n
, mountNode);\n````","html":"
import { Paragraph } from '@alifd/next';\n\nconst content = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';\n\nReactDOM.render(<div>\n    <Paragraph>{content}</Paragraph>\n    <br/>\n    <Paragraph type=\"short\">{content}</Paragraph>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/paragraph/index.en-us.md b/compiled_docs/paragraph/index.en-us.md new file mode 100644 index 0000000000..76163d1b59 --- /dev/null +++ b/compiled_docs/paragraph/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Guide#

Paragraphs are used to control the overall text visual of the page, and are mainly represented by the line spacing and text size.

\n

When to use#

    \n
  • Page text display requires a consistent experience.
    • \n
  • Generally, the row spacing between general short text and long text is different, and short text spacing will be smaller (usually less than three lines).
    • \n
\n

API#

","api":"

Paragraph#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
sizecomponent size. Default: medium medium, small smallString'medium'
typeWhat way to show paragraphs. Default: long shows all text, short shows three lines (not mandatory)String'long'
\n"} \ No newline at end of file diff --git a/compiled_docs/paragraph/index.md b/compiled_docs/paragraph/index.md new file mode 100644 index 0000000000..d23d05649b --- /dev/null +++ b/compiled_docs/paragraph/index.md @@ -0,0 +1 @@ +{"meta":"

Guide#

段落用于控制页面整体的文本视觉，主要由行间距及文本大小体现。

\n

何时使用#

    \n
  • 页面文本展示需要一致体验。
    • \n
  • 一般短文本和长文本的行间距是有差别的，短文本的行间距会更小(一般为三行以内)
    • \n
\n

API#

","api":"

Paragraph#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
size组件大小。

可选值:
'medium'(中号)
'small'(小号)		Enum'medium'
type什么方式展示段落

可选值:
'long'(展示所有文本)
'short'(展示三行以内（非强制）)		Enum'long'
\n"} \ No newline at end of file diff --git a/compiled_docs/progress/demo/basic.en-us.md b/compiled_docs/progress/demo/basic.en-us.md new file mode 100644 index 0000000000..73d0821d40 --- /dev/null +++ b/compiled_docs/progress/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic progress bar","meta":{"title":"Basic progress bar","description":"\n

A basic progress bar, using percent to control current progress, and control the tail text with textRender.

\n","order":"0"},"codes":{"jsx":"import { Progress } from '@alifd/next';\n\nReactDOM.render(
\n ''} />\n \n \n \n \n
, mountNode);\n"},"body":"\n````jsx\nimport { Progress } from '@alifd/next';\n\nReactDOM.render(
\n ''} />\n \n \n \n \n
, mountNode);\n````","html":"
import { Progress } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Progress percent={30} textRender={() => ''} />\n    <Progress percent={50} />\n    <Progress percent={90} />\n    <Progress percent={40} />\n    <Progress percent={40} hasBorder size=\"large\" />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/progress/demo/basic.md b/compiled_docs/progress/demo/basic.md new file mode 100644 index 0000000000..a744990841 --- /dev/null +++ b/compiled_docs/progress/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本进度条","meta":{"title":"基本进度条","description":"\n

普通模式的进度条，通过 percent 属性指定进度，通过 textRender 控制右侧文本信息的展示，\n通过 hasBorder 属性设置组件是否包含边框。

\n","order":"0"},"codes":{"jsx":"import { Progress } from '@alifd/next';\n\nReactDOM.render(
\n ''} />\n \n \n \n \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Progress } from '@alifd/next';\n\nReactDOM.render(
\n ''} />\n \n \n \n \n
, mountNode);\n````","html":"
import { Progress } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Progress percent={30} textRender={() => ''} />\n    <Progress percent={50} />\n    <Progress percent={90} />\n    <Progress percent={40} />\n    <Progress percent={40} hasBorder size=\"large\" />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/progress/demo/circle.en-us.md b/compiled_docs/progress/demo/circle.en-us.md new file mode 100644 index 0000000000..6f762e9ffc --- /dev/null +++ b/compiled_docs/progress/demo/circle.en-us.md @@ -0,0 +1 @@ +{"title":"Progress circle","meta":{"title":"Progress circle","description":"\n

A simple progress circle.

\n","order":"1"},"codes":{"jsx":"import { Progress, Icon } from '@alifd/next';\n\nReactDOM.render(
\n   \n   \n ''}/>  \n } />\n
, mountNode);\n"},"body":"\n````jsx\nimport { Progress, Icon } from '@alifd/next';\n\nReactDOM.render(
\n   \n   \n ''}/>  \n } />\n
, mountNode);\n````","html":"
import { Progress, Icon } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Progress percent={30} shape=\"circle\" /> &nbsp;&nbsp;\n    <Progress percent={50} shape=\"circle\" /> &nbsp;&nbsp;\n    <Progress percent={80} shape=\"circle\" textRender={() => ''}/>&nbsp;&nbsp;\n    <Progress percent={100} shape=\"circle\" textRender={() => <Icon type=\"select\" size=\"xl\" />} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/progress/demo/circle.md b/compiled_docs/progress/demo/circle.md new file mode 100644 index 0000000000..6f04089a3f --- /dev/null +++ b/compiled_docs/progress/demo/circle.md @@ -0,0 +1 @@ +{"title":"圆形进度条","meta":{"title":"圆形进度条","description":"\n

通过 shape 属性可以改变进度指示器的外观，当取值为 circle 时为圆形进度条。

\n","order":"1"},"codes":{"jsx":"import { Progress, Icon } from '@alifd/next';\n\nReactDOM.render(
\n   \n   \n ''}/>  \n } />\n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Progress, Icon } from '@alifd/next';\n\nReactDOM.render(
\n   \n   \n ''}/>  \n } />\n
, mountNode);\n````","html":"
import { Progress, Icon } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Progress percent={30} shape=\"circle\" /> &nbsp;&nbsp;\n    <Progress percent={50} shape=\"circle\" /> &nbsp;&nbsp;\n    <Progress percent={80} shape=\"circle\" textRender={() => ''}/>&nbsp;&nbsp;\n    <Progress percent={100} shape=\"circle\" textRender={() => <Icon type=\"select\" size=\"xl\" />} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/progress/demo/color.en-us.md b/compiled_docs/progress/demo/color.en-us.md new file mode 100644 index 0000000000..6a091670a2 --- /dev/null +++ b/compiled_docs/progress/demo/color.en-us.md @@ -0,0 +1 @@ +{"title":"Color","meta":{"title":"Color","description":"\n

Use color prop to controll progress bar color. The Progress Component has three APIs which can controll the color of progress bar and it's priority: color > progressive > state.

\n","order":"5"},"codes":{"jsx":"import { Progress, Icon } from '@alifd/next';\n\nReactDOM.render(
\n     \n     \n } />\n

\n \n \n } />\n
, mountNode);\n"},"body":"\n````jsx\nimport { Progress, Icon } from '@alifd/next';\n\nReactDOM.render(
\n     \n     \n } />\n

\n \n \n } />\n
, mountNode);\n````","html":"
import { Progress, Icon } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Progress percent={30} shape=\"circle\" color=\"#AF5F3C\"/> &nbsp;&nbsp;&nbsp;&nbsp;\n    <Progress percent={50} shape=\"circle\"/>&nbsp;&nbsp;&nbsp;&nbsp;\n    <Progress percent={90} shape=\"circle\" color=\"rgba(119,66,141, 0.9)\" textRender={() => <Icon type=\"select\" size=\"xl\" />} />\n    <br /><br />\n    <Progress percent={30} shape=\"line\" color=\"rgb(208,16,76)\"/>\n    <Progress percent={50} shape=\"line\"/>\n    <Progress percent={90} shape=\"line\" color=\"blue\" textRender={() => <Icon type=\"select\" size=\"medium\" />} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/progress/demo/color.md b/compiled_docs/progress/demo/color.md new file mode 100644 index 0000000000..dee10fda7b --- /dev/null +++ b/compiled_docs/progress/demo/color.md @@ -0,0 +1 @@ +{"title":"颜色","meta":{"title":"颜色","description":"\n

通过 color 属性可以改变进度条的颜色。Progress 有三个API可以改变进度条的颜色,其优先级为 color > progressive > state。

\n","order":"5"},"codes":{"jsx":"import { Progress, Icon } from '@alifd/next';\n\nReactDOM.render(
\n     \n     \n } />\n

\n \n \n } />\n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Progress, Icon } from '@alifd/next';\n\nReactDOM.render(
\n     \n     \n } />\n

\n \n \n } />\n
, mountNode);\n````","html":"
import { Progress, Icon } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Progress percent={30} shape=\"circle\" color=\"#AF5F3C\"/> &nbsp;&nbsp;&nbsp;&nbsp;\n    <Progress percent={50} shape=\"circle\"/>&nbsp;&nbsp;&nbsp;&nbsp;\n    <Progress percent={90} shape=\"circle\" color=\"rgba(119,66,141, 0.9)\" textRender={() => <Icon type=\"select\" size=\"xl\" />} />\n    <br /><br />\n    <Progress percent={30} shape=\"line\" color=\"rgb(208,16,76)\"/>\n    <Progress percent={50} shape=\"line\"/>\n    <Progress percent={90} shape=\"line\" color=\"blue\" textRender={() => <Icon type=\"select\" size=\"medium\" />} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/progress/demo/controlled.en-us.md b/compiled_docs/progress/demo/controlled.en-us.md new file mode 100644 index 0000000000..7e00bb93fc --- /dev/null +++ b/compiled_docs/progress/demo/controlled.en-us.md @@ -0,0 +1 @@ +{"title":"Dynamic","meta":{"title":"Dynamic","description":"\n

The dynmaic exmaple. Attention: Animation require time to finish, so changing percent too frequently may cause display delay.

\n","order":"6"},"codes":{"jsx":"import { Progress, Button, Icon } from '@alifd/next';\n\n\nclass CustomProgress extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n percent: 0\n };\n }\n\n addProgress = () => {\n this.setState(prevState => {\n return {\n percent: prevState.percent + 10\n };\n });\n }\n\n minusProgress = () => {\n this.setState(prevState => {\n return {\n percent: prevState.percent - 10\n };\n });\n }\n\n render() {\n const state = this.state;\n return (
\n
\n \n \n \n \n
\n\n \n

\n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".progress-panel {\n display: flex;\n margin-bottom: 14px;\n}\n\n.custom-select {\n margin-right: 20px;\n}\n"},"body":"\n````jsx\nimport { Progress, Button, Icon } from '@alifd/next';\n\n\nclass CustomProgress extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n percent: 0\n };\n }\n\n addProgress = () => {\n this.setState(prevState => {\n return {\n percent: prevState.percent + 10\n };\n });\n }\n\n minusProgress = () => {\n this.setState(prevState => {\n return {\n percent: prevState.percent - 10\n };\n });\n }\n\n render() {\n const state = this.state;\n return (
\n
\n \n \n \n \n
\n\n \n

\n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.progress-panel {\n display: flex;\n margin-bottom: 14px;\n}\n\n.custom-select {\n margin-right: 20px;\n}\n````","html":"
import { Progress, Button, Icon } from '@alifd/next';\n\n\nclass CustomProgress extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            percent: 0\n        };\n    }\n\n    addProgress = () => {\n        this.setState(prevState => {\n            return {\n                percent: prevState.percent + 10\n            };\n        });\n    }\n\n    minusProgress = () => {\n        this.setState(prevState => {\n            return {\n                percent: prevState.percent - 10\n            };\n        });\n    }\n\n    render() {\n        const state = this.state;\n        return (<div>\n            <div className=\"progress-panel\">\n                <Button.Group>\n                    <Button onClick={this.minusProgress} disabled={state.percent === 0}><Icon type=\"minus\" /></Button>\n                    <Button onClick={this.addProgress} disabled={state.percent === 100}><Icon type=\"add\" /></Button>\n                </Button.Group>\n            </div>\n\n            <Progress percent={state.percent} progressive size=\"large\" />\n            <br /><br />\n            <Progress percent={state.percent} progressive shape=\"circle\" size=\"large\" />\n        </div>);\n    }\n}\n\nReactDOM.render(<CustomProgress />, mountNode);
.progress-panel {\n    display: flex;\n    margin-bottom: 14px;\n}\n\n.custom-select {\n    margin-right: 20px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/progress/demo/controlled.md b/compiled_docs/progress/demo/controlled.md new file mode 100644 index 0000000000..b6d2d61d3f --- /dev/null +++ b/compiled_docs/progress/demo/controlled.md @@ -0,0 +1 @@ +{"title":"动态展示","meta":{"title":"动态展示","description":"\n

此时为增强模式的进度条，会根据当前进度展示不同的样式。注: css animation完成需要时间, 数据调整过于频繁会导致显示延迟。

\n","order":"6"},"codes":{"jsx":"import { Progress, Button, Icon } from '@alifd/next';\n\n\nclass CustomProgress extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n percent: 0\n };\n }\n\n addProgress = () => {\n this.setState(prevState => {\n return {\n percent: prevState.percent + 10\n };\n });\n }\n\n minusProgress = () => {\n this.setState(prevState => {\n return {\n percent: prevState.percent - 10\n };\n });\n }\n\n render() {\n const state = this.state;\n return (
\n
\n \n \n \n \n
\n\n \n

\n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".progress-panel {\n display: flex;\n margin-bottom: 14px;\n}\n\n.custom-select {\n margin-right: 20px;\n}\n"},"body":"\n\n````jsx\nimport { Progress, Button, Icon } from '@alifd/next';\n\n\nclass CustomProgress extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n percent: 0\n };\n }\n\n addProgress = () => {\n this.setState(prevState => {\n return {\n percent: prevState.percent + 10\n };\n });\n }\n\n minusProgress = () => {\n this.setState(prevState => {\n return {\n percent: prevState.percent - 10\n };\n });\n }\n\n render() {\n const state = this.state;\n return (
\n
\n \n \n \n \n
\n\n \n

\n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.progress-panel {\n display: flex;\n margin-bottom: 14px;\n}\n\n.custom-select {\n margin-right: 20px;\n}\n````","html":"
import { Progress, Button, Icon } from '@alifd/next';\n\n\nclass CustomProgress extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            percent: 0\n        };\n    }\n\n    addProgress = () => {\n        this.setState(prevState => {\n            return {\n                percent: prevState.percent + 10\n            };\n        });\n    }\n\n    minusProgress = () => {\n        this.setState(prevState => {\n            return {\n                percent: prevState.percent - 10\n            };\n        });\n    }\n\n    render() {\n        const state = this.state;\n        return (<div>\n            <div className=\"progress-panel\">\n                <Button.Group>\n                    <Button onClick={this.minusProgress} disabled={state.percent === 0}><Icon type=\"minus\" /></Button>\n                    <Button onClick={this.addProgress} disabled={state.percent === 100}><Icon type=\"add\" /></Button>\n                </Button.Group>\n            </div>\n\n            <Progress percent={state.percent} progressive size=\"large\" />\n            <br /><br />\n            <Progress percent={state.percent} progressive shape=\"circle\" size=\"large\" />\n        </div>);\n    }\n}\n\nReactDOM.render(<CustomProgress />, mountNode);
.progress-panel {\n    display: flex;\n    margin-bottom: 14px;\n}\n\n.custom-select {\n    margin-right: 20px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/progress/demo/percentrender.en-us.md b/compiled_docs/progress/demo/percentrender.en-us.md new file mode 100644 index 0000000000..c19f8fe6a5 --- /dev/null +++ b/compiled_docs/progress/demo/percentrender.en-us.md @@ -0,0 +1 @@ +{"title":"Custom Percentage","meta":{"title":"Custom Percentage","description":"\n

we can define how Percentage text to display by using textRender.\nThe exapme below will show a progressbar with accuracy of 2 decimal places and done icon when reached 100%.

\n","order":"7"},"codes":{"jsx":"import { Progress, Icon } from '@alifd/next';\n\nconst textRender = percent => {\n if (percent === 100) {\n return ;\n }\n return `${percent.toFixed(2)}%`;\n};\n\nReactDOM.render(
\n {[1, 2, 3, 4, 5, 6].map((value, index) => )}\n {[1, 2, 3, 4, 5, 6].map((value, index) => )}\n
, mountNode);\n"},"body":"\n````jsx\nimport { Progress, Icon } from '@alifd/next';\n\nconst textRender = percent => {\n if (percent === 100) {\n return ;\n }\n return `${percent.toFixed(2)}%`;\n};\n\nReactDOM.render(
\n {[1, 2, 3, 4, 5, 6].map((value, index) => )}\n {[1, 2, 3, 4, 5, 6].map((value, index) => )}\n
, mountNode);\n````","html":"
import { Progress, Icon } from '@alifd/next';\n\nconst textRender = percent => {\n    if (percent === 100) {\n        return <Icon type=\"select\" size=\"medium\" />;\n    }\n    return `${percent.toFixed(2)}%`;\n};\n\nReactDOM.render(<div>\n    {[1, 2, 3, 4, 5, 6].map((value, index) => <Progress key={index} percent={value / 6 * 100} shape=\"circle\" color={`hsl(${index * 60 + 60}, 90%, 50%)`} textRender={textRender}/>)}\n    {[1, 2, 3, 4, 5, 6].map((value, index) => <Progress key={index} percent={value / 6 * 100} shape=\"line\" color={`hsl(${index * 60 + 60}, 90%, 50%)`} textRender={textRender}/>)}\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/progress/demo/percentrender.md b/compiled_docs/progress/demo/percentrender.md new file mode 100644 index 0000000000..15d7416e69 --- /dev/null +++ b/compiled_docs/progress/demo/percentrender.md @@ -0,0 +1 @@ +{"title":"自定义百分比信息","meta":{"title":"自定义百分比信息","description":"\n

textRender 控制百分比信息的展示,通过自定义textRender个性化百分比渲染. 下面给一个 百分比进度取2位,当达到100%是显示Icon的progressbar.

\n","order":"7"},"codes":{"jsx":"import { Progress, Icon } from '@alifd/next';\n\nconst textRender = percent => {\n if (percent === 100) {\n return ;\n }\n return `${percent.toFixed(2)}%`;\n};\n\nReactDOM.render(
\n {[1, 2, 3, 4, 5, 6].map((value, index) => )}\n {[1, 2, 3, 4, 5, 6].map((value, index) => )}\n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Progress, Icon } from '@alifd/next';\n\nconst textRender = percent => {\n if (percent === 100) {\n return ;\n }\n return `${percent.toFixed(2)}%`;\n};\n\nReactDOM.render(
\n {[1, 2, 3, 4, 5, 6].map((value, index) => )}\n {[1, 2, 3, 4, 5, 6].map((value, index) => )}\n
, mountNode);\n````","html":"
import { Progress, Icon } from '@alifd/next';\n\nconst textRender = percent => {\n    if (percent === 100) {\n        return <Icon type=\"select\" size=\"medium\" />;\n    }\n    return `${percent.toFixed(2)}%`;\n};\n\nReactDOM.render(<div>\n    {[1, 2, 3, 4, 5, 6].map((value, index) => <Progress key={index} percent={value / 6 * 100} shape=\"circle\" color={`hsl(${index * 60 + 60}, 90%, 50%)`} textRender={textRender}/>)}\n    {[1, 2, 3, 4, 5, 6].map((value, index) => <Progress key={index} percent={value / 6 * 100} shape=\"line\" color={`hsl(${index * 60 + 60}, 90%, 50%)`} textRender={textRender}/>)}\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/progress/demo/progressive.en-us.md b/compiled_docs/progress/demo/progressive.en-us.md new file mode 100644 index 0000000000..becaea25e9 --- /dev/null +++ b/compiled_docs/progress/demo/progressive.en-us.md @@ -0,0 +1 @@ +{"title":"Progressive","meta":{"title":"Progressive","description":"\n

Progressive progresses.

\n","order":"4"},"codes":{"jsx":"import { Progress } from '@alifd/next';\n\nReactDOM.render(
\n \n \n \n
, mountNode);\n"},"body":"\n````jsx\nimport { Progress } from '@alifd/next';\n\nReactDOM.render(
\n \n \n \n
, mountNode);\n````","html":"
import { Progress } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Progress percent={20} progressive />\n    <Progress percent={60} progressive />\n    <Progress percent={90} progressive />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/progress/demo/progressive.md b/compiled_docs/progress/demo/progressive.md new file mode 100644 index 0000000000..c0bad5d171 --- /dev/null +++ b/compiled_docs/progress/demo/progressive.md @@ -0,0 +1 @@ +{"title":"Progressive","meta":{"title":"Progressive","description":"\n

当开启 progressive 模式时，Progress 组件会根据自身的进度自动设置展现的颜色值。\n注意，此时会忽略用户设置的 state 的属性值。

\n","order":"4"},"codes":{"jsx":"import { Progress } from '@alifd/next';\n\nReactDOM.render(
\n \n \n \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Progress } from '@alifd/next';\n\nReactDOM.render(
\n \n \n \n
, mountNode);\n````","html":"
import { Progress } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Progress percent={20} progressive />\n    <Progress percent={60} progressive />\n    <Progress percent={90} progressive />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/progress/demo/size.en-us.md b/compiled_docs/progress/demo/size.en-us.md new file mode 100644 index 0000000000..5e5d986abd --- /dev/null +++ b/compiled_docs/progress/demo/size.en-us.md @@ -0,0 +1 @@ +{"title":"Size","meta":{"title":"Size","description":"\n

Change the size of progress.

\n","order":"2"},"codes":{"jsx":"import { Progress } from '@alifd/next';\n\nReactDOM.render(
\n \n \n \n
\n   \n   \n \n
, mountNode);\n"},"body":"\n````jsx\nimport { Progress } from '@alifd/next';\n\nReactDOM.render(
\n \n \n \n
\n   \n   \n \n
, mountNode);\n````","html":"
import { Progress } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Progress percent={30} size=\"small\" />\n    <Progress percent={50} size=\"medium\" />\n    <Progress percent={90} size=\"large\" />\n    <br />\n    <Progress percent={30} size=\"small\" shape=\"circle\" /> &nbsp;&nbsp;\n    <Progress percent={50} size=\"medium\" shape=\"circle\" /> &nbsp;&nbsp;\n    <Progress percent={90} size=\"large\" shape=\"circle\" />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/progress/demo/size.md b/compiled_docs/progress/demo/size.md new file mode 100644 index 0000000000..a58dd4b680 --- /dev/null +++ b/compiled_docs/progress/demo/size.md @@ -0,0 +1 @@ +{"title":"尺寸","meta":{"title":"尺寸","description":"\n

可以通过 size 属性制定进度条的大小。

\n","order":"2"},"codes":{"jsx":"import { Progress } from '@alifd/next';\n\nReactDOM.render(
\n \n \n \n
\n   \n   \n \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Progress } from '@alifd/next';\n\nReactDOM.render(
\n \n \n \n
\n   \n   \n \n
, mountNode);\n````","html":"
import { Progress } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Progress percent={30} size=\"small\" />\n    <Progress percent={50} size=\"medium\" />\n    <Progress percent={90} size=\"large\" />\n    <br />\n    <Progress percent={30} size=\"small\" shape=\"circle\" /> &nbsp;&nbsp;\n    <Progress percent={50} size=\"medium\" shape=\"circle\" /> &nbsp;&nbsp;\n    <Progress percent={90} size=\"large\" shape=\"circle\" />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/progress/demo/state.en-us.md b/compiled_docs/progress/demo/state.en-us.md new file mode 100644 index 0000000000..515bd97888 --- /dev/null +++ b/compiled_docs/progress/demo/state.en-us.md @@ -0,0 +1 @@ +{"title":"State","meta":{"title":"State","description":"\n

Change the state of Progress by state, supporting normal, success, error.

\n","order":"3"},"codes":{"jsx":"import { Progress } from '@alifd/next';\n\nReactDOM.render(
\n \n \n \n
, mountNode);\n","css":".custom-progress {\n margin: 0 20px;\n}\n"},"body":"\n````jsx\nimport { Progress } from '@alifd/next';\n\nReactDOM.render(
\n \n \n \n
, mountNode);\n````\n\n````css\n.custom-progress {\n margin: 0 20px;\n}\n````","html":"
import { Progress } from '@alifd/next';\n\nReactDOM.render(<div className=\"\">\n    <Progress percent={20} shape=\"circle\" state=\"normal\" className=\"custom-progress\" />\n    <Progress percent={95} shape=\"circle\" state=\"success\" className=\"custom-progress\" />\n    <Progress percent={95} shape=\"circle\" state=\"error\" className=\"custom-progress\" />\n</div>, mountNode);
.custom-progress {\n    margin: 0 20px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/progress/demo/state.md b/compiled_docs/progress/demo/state.md new file mode 100644 index 0000000000..c6cedbc55f --- /dev/null +++ b/compiled_docs/progress/demo/state.md @@ -0,0 +1 @@ +{"title":"进度条不同状态","meta":{"title":"进度条不同状态","description":"\n

用户可以通过 state 属性自定义当前进度的展现状态，可取值为 normal, success, error 分别表示普通、成功、失败这三种状态。

\n","order":"3"},"codes":{"jsx":"import { Progress } from '@alifd/next';\n\nReactDOM.render(
\n \n \n \n
, mountNode);\n","css":".custom-progress {\n margin: 0 20px;\n}\n"},"body":"\n\n````jsx\nimport { Progress } from '@alifd/next';\n\nReactDOM.render(
\n \n \n \n
, mountNode);\n````\n\n````css\n.custom-progress {\n margin: 0 20px;\n}\n````","html":"
import { Progress } from '@alifd/next';\n\nReactDOM.render(<div className=\"\">\n    <Progress percent={20} shape=\"circle\" state=\"normal\" className=\"custom-progress\" />\n    <Progress percent={95} shape=\"circle\" state=\"success\" className=\"custom-progress\" />\n    <Progress percent={95} shape=\"circle\" state=\"error\" className=\"custom-progress\" />\n</div>, mountNode);
.custom-progress {\n    margin: 0 20px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/progress/index.en-us.md b/compiled_docs/progress/index.en-us.md new file mode 100644 index 0000000000..bd6250d0ab --- /dev/null +++ b/compiled_docs/progress/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Guide#

Progress used to show the progress of a task.

\n

When to Use#

If a task will take long time to complete, it could be use a Progress to show the progress. Such as:

\n
    \n
  • For a background operation with long time
    • \n
  • For a operation need to show its percentage
    • \n
\n

API#

","api":"

Progress#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
sizeSize

option:
'small', 'medium', 'large'		Enum'medium'
shapeShape

option:
'circle', 'line'		Enum'line'
percentCurrent percente of progressNumber0
stateState of progress, priority: color > progressive > state

option:
'normal', 'success', 'error'		Enum'normal'
progressiveProgressive mode (with dynamic color), priority: color > progressive > stateBooleanfalse
hasBorderHas border for progress lineBooleanfalse
textRenderText render

signature:
Function(percent: Number) => ReactNode
parameter:
percent: {Number} current percent
return:
{ReactNode} text node
Functionpercent => ${Math.floor(percent)}%
colorprogressbar color, priority: color > progressive > stateString''
\n"} \ No newline at end of file diff --git a/compiled_docs/progress/index.md b/compiled_docs/progress/index.md new file mode 100644 index 0000000000..d1fdb331ab --- /dev/null +++ b/compiled_docs/progress/index.md @@ -0,0 +1 @@ +{"meta":"

Guide#

展示操作的当前进度。

\n

何时使用#

在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。

\n
    \n
  • 操作在后台运行，需要耗费一定的客户端等待时间。
    • \n
  • 操作需要展示一个完成进度的百分比。
    • \n
\n

API#

","api":"

Progress#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
size尺寸

可选值:
'small', 'medium', 'large'		Enum'medium'
shape形态

可选值:
'circle', 'line'		Enum'line'
percent所占百分比Number0
state进度状态, 显示优先级: color > progressive > state

可选值:
'normal', 'success', 'error'		Enum'normal'
progressive是否为色彩阶段变化模式, 显示优先级: color > progressive > stateBooleanfalse
hasBorder是否添加 Border（只适用于 Line Progress)Booleanfalse
textRender文本渲染函数

签名:
Function(percent: Number, option: Object) => ReactNode
参数:
percent: {Number} 当前的进度信息
option: {Object} 额外的参数
返回值:
{ReactNode} 返回文本节点
Functionpercent => ${Math.floor(percent)}%
color进度条颜色, 显示优先级: color > progressive > stateString-
backgroundColor背景色String-
\n"} \ No newline at end of file diff --git a/compiled_docs/radio/demo/accessibility.en-us.md b/compiled_docs/radio/demo/accessibility.en-us.md new file mode 100644 index 0000000000..bcfedc77c3 --- /dev/null +++ b/compiled_docs/radio/demo/accessibility.en-us.md @@ -0,0 +1 @@ +{"title":"Accessibility","meta":{"title":"Accessibility","description":"\n

Please refer to ARIA and KeyBoard.

\n","order":"7"},"codes":{"jsx":"import { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\nReactDOM.render(\n
\n Programming language ：\n \n python\n java\n c\n \n
\n , mountNode);\n\n"},"body":"\n````jsx\nimport { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\nReactDOM.render(\n
\n Programming language ：\n \n python\n java\n c\n \n
\n , mountNode);\n\n````","html":"
import { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\nReactDOM.render(\n    <div>\n        <span id=\"radio-a11y\">Programming language ：</span>\n        <RadioGroup aria-labelledby=\"radio-a11y\">\n            <Radio id=\"python\" value=\"python\">python</Radio>\n            <Radio id=\"java\" value=\"java\">java</Radio>\n            <Radio id=\"c\" value=\"c\">c</Radio>\n        </RadioGroup>\n    </div>\n    , mountNode);\n
"} \ No newline at end of file diff --git a/compiled_docs/radio/demo/accessibility.md b/compiled_docs/radio/demo/accessibility.md new file mode 100644 index 0000000000..bdb291f7f3 --- /dev/null +++ b/compiled_docs/radio/demo/accessibility.md @@ -0,0 +1 @@ +{"title":"无障碍","meta":{"title":"无障碍","description":"\n

请参考ARIA and KeyBoard。

\n","order":"7"},"codes":{"jsx":"import { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\nReactDOM.render(\n
\n Programming language ：\n \n python\n java\n c\n \n
\n , mountNode);\n\n"},"body":"\n\n````jsx\nimport { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\nReactDOM.render(\n
\n Programming language ：\n \n python\n java\n c\n \n
\n , mountNode);\n\n````","html":"
import { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\nReactDOM.render(\n    <div>\n        <span id=\"radio-a11y\">Programming language ：</span>\n        <RadioGroup aria-labelledby=\"radio-a11y\">\n            <Radio id=\"python\" value=\"python\">python</Radio>\n            <Radio id=\"java\" value=\"java\">java</Radio>\n            <Radio id=\"c\" value=\"c\">c</Radio>\n        </RadioGroup>\n    </div>\n    , mountNode);\n
"} \ No newline at end of file diff --git a/compiled_docs/radio/demo/basic.en-us.md b/compiled_docs/radio/demo/basic.en-us.md new file mode 100644 index 0000000000..7d7de23ff8 --- /dev/null +++ b/compiled_docs/radio/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic Usage","meta":{"title":"Basic Usage","description":"\n"},"codes":{"jsx":"import { Radio } from '@alifd/next';\n\nReactDOM.render((\n
\n

Without Label

\n  \n  \n  \n  \n \n
\n

With Label

\n Apple \n  \n \n
\n), mountNode);\n"},"body":"\n````jsx\nimport { Radio } from '@alifd/next';\n\nReactDOM.render((\n
\n

Without Label

\n  \n  \n  \n  \n \n
\n

With Label

\n Apple \n  \n \n
\n), mountNode);\n````","html":"
import { Radio } from '@alifd/next';\n\nReactDOM.render((\n    <div>\n        <h4>Without Label</h4>\n        <Radio defaultChecked />&nbsp;\n        <Radio checked />&nbsp;\n        <Radio disabled />&nbsp;\n        <Radio checked disabled />&nbsp;\n        <Radio />\n        <br />\n        <h4>With Label</h4>\n        <Radio id=\"apple\">Apple</Radio>&nbsp;\n        <Radio id=\"banana\" /><label htmlFor=\"banana\" className=\"next-radio-label\">Banana</label>&nbsp;\n        <Radio id=\"apple2\" label=\"Apple\" className=\"testClassname\" />\n    </div>\n), mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/radio/demo/basic.md b/compiled_docs/radio/demo/basic.md new file mode 100644 index 0000000000..0c67331a4c --- /dev/null +++ b/compiled_docs/radio/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

使用 Radio 渲染的基本组件。

\n","order":"0"},"codes":{"jsx":"import { Radio } from '@alifd/next';\n\nReactDOM.render((\n
\n

Without Label

\n  \n  \n  \n  \n \n
\n

With Label

\n Apple \n  \n \n
\n), mountNode);\n"},"body":"\n\n````jsx\nimport { Radio } from '@alifd/next';\n\nReactDOM.render((\n
\n

Without Label

\n  \n  \n  \n  \n \n
\n

With Label

\n Apple \n  \n \n
\n), mountNode);\n````","html":"
import { Radio } from '@alifd/next';\n\nReactDOM.render((\n    <div>\n        <h4>Without Label</h4>\n        <Radio defaultChecked />&nbsp;\n        <Radio checked />&nbsp;\n        <Radio disabled />&nbsp;\n        <Radio checked disabled />&nbsp;\n        <Radio />\n        <br />\n        <h4>With Label</h4>\n        <Radio id=\"apple\">Apple</Radio>&nbsp;\n        <Radio id=\"banana\" /><label htmlFor=\"banana\" className=\"next-radio-label\">Banana</label>&nbsp;\n        <Radio id=\"apple2\" label=\"Apple\" className=\"testClassname\" />\n    </div>\n), mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/radio/demo/button.en-us.md b/compiled_docs/radio/demo/button.en-us.md new file mode 100644 index 0000000000..2036c62696 --- /dev/null +++ b/compiled_docs/radio/demo/button.en-us.md @@ -0,0 +1 @@ +{"title":"The components display as a button shape;","meta":{"title":"The components display as a button shape;","description":"\n"},"codes":{"jsx":"import { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nconst list = [\n {\n value: 'apple',\n label: 'Apple',\n disabled: false\n }, {\n value: 'pear',\n label: 'Pear'\n }, {\n value: 'orange',\n label: 'Orange',\n disabled: true\n }\n];\n\nclass ControlApp extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value1: 'apple',\n value2: 'apple',\n value3: ''\n };\n\n this.onNestChange = this.onNestChange.bind(this);\n this.onSmallChange = this.onSmallChange.bind(this);\n this.onMediumChange = this.onMediumChange.bind(this);\n }\n\n onSmallChange(value) {\n this.setState({\n value1: value\n });\n }\n\n onMediumChange(value) {\n this.setState({\n value2: value\n });\n }\n\n onNestChange(value) {\n this.setState({\n value3: value\n });\n }\n\n render() {\n return (\n
\n

Small size

\n \n
\n
\n

Medium size (default)

\n \n
\n
\n

Large size

\n \n Banana\n Watermelon\n Peach\n \n
\n
\n

Disabled and Selected-Disabled status

\n \n Peach\n Banana\n \n\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nconst list = [\n {\n value: 'apple',\n label: 'Apple',\n disabled: false\n }, {\n value: 'pear',\n label: 'Pear'\n }, {\n value: 'orange',\n label: 'Orange',\n disabled: true\n }\n];\n\nclass ControlApp extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value1: 'apple',\n value2: 'apple',\n value3: ''\n };\n\n this.onNestChange = this.onNestChange.bind(this);\n this.onSmallChange = this.onSmallChange.bind(this);\n this.onMediumChange = this.onMediumChange.bind(this);\n }\n\n onSmallChange(value) {\n this.setState({\n value1: value\n });\n }\n\n onMediumChange(value) {\n this.setState({\n value2: value\n });\n }\n\n onNestChange(value) {\n this.setState({\n value3: value\n });\n }\n\n render() {\n return (\n
\n

Small size

\n \n
\n
\n

Medium size (default)

\n \n
\n
\n

Large size

\n \n Banana\n Watermelon\n Peach\n \n
\n
\n

Disabled and Selected-Disabled status

\n \n Peach\n Banana\n \n\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nconst list = [\n    {\n        value: 'apple',\n        label: 'Apple',\n        disabled: false\n    }, {\n        value: 'pear',\n        label: 'Pear'\n    }, {\n        value: 'orange',\n        label: 'Orange',\n        disabled: true\n    }\n];\n\nclass ControlApp extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value1: 'apple',\n            value2: 'apple',\n            value3: ''\n        };\n\n        this.onNestChange = this.onNestChange.bind(this);\n        this.onSmallChange = this.onSmallChange.bind(this);\n        this.onMediumChange = this.onMediumChange.bind(this);\n    }\n\n    onSmallChange(value) {\n        this.setState({\n            value1: value\n        });\n    }\n\n    onMediumChange(value) {\n        this.setState({\n            value2: value\n        });\n    }\n\n    onNestChange(value) {\n        this.setState({\n            value3: value\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <h4>Small size</h4>\n                <RadioGroup dataSource={list} shape=\"button\" size=\"small\" value={this.state.value1} onChange={this.onSmallChange} />\n                <br/>\n                <br/>\n                <h4>Medium size (default)</h4>\n                <RadioGroup dataSource={list} shape=\"button\" size=\"medium\" value={this.state.value2} onChange={this.onMediumChange} />\n                <br/>\n                <br/>\n                <h4>Large size</h4>\n                <RadioGroup shape=\"button\" size=\"large\" value={this.state.value3} onChange={this.onNestChange}>\n                    <Radio id=\"banana\" value=\"banana\">Banana</Radio>\n                    <Radio id=\"watermelon\" value=\"watermelon\">Watermelon</Radio>\n                    <Radio id=\"peach\" value=\"peach\">Peach</Radio>\n                </RadioGroup>\n                <br/>\n                <br/>\n                <h4>Disabled and Selected-Disabled status</h4>\n                <RadioGroup shape=\"button\" value=\"banana\" onChange={this.onNestChange}>\n                    <Radio id=\"peach\" disabled value=\"peach\">Peach</Radio>\n                    <Radio id=\"banana\" disabled value=\"banana\">Banana</Radio>\n                </RadioGroup>\n\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<ControlApp />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/radio/demo/button.md b/compiled_docs/radio/demo/button.md new file mode 100644 index 0000000000..4016e476c3 --- /dev/null +++ b/compiled_docs/radio/demo/button.md @@ -0,0 +1 @@ +{"title":"按钮样式组件","meta":{"title":"按钮样式组件","description":"\n

使用 RadioGroup 渲染的组，通过设置 shape="button" 可以让组件以按钮形式展示，同时可以通过 size 来控制组件大小。

\n","order":"4"},"codes":{"jsx":"import { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nconst list = [\n {\n value: 'apple',\n label: 'Apple',\n disabled: false\n }, {\n value: 'pear',\n label: 'Pear'\n }, {\n value: 'orange',\n label: 'Orange',\n disabled: true\n }\n];\n\nclass ControlApp extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value1: 'apple',\n value2: 'apple',\n value3: ''\n };\n\n this.onNestChange = this.onNestChange.bind(this);\n this.onSmallChange = this.onSmallChange.bind(this);\n this.onMediumChange = this.onMediumChange.bind(this);\n }\n\n onSmallChange(value) {\n this.setState({\n value1: value\n });\n }\n\n onMediumChange(value) {\n this.setState({\n value2: value\n });\n }\n\n onNestChange(value) {\n this.setState({\n value3: value\n });\n }\n\n render() {\n return (\n
\n

Small size

\n \n
\n
\n

Medium size (default)

\n \n
\n
\n

Large size

\n \n Banana\n Watermelon\n Peach\n \n
\n
\n

Disabled and Selected-Disabled status

\n \n Peach\n Banana\n \n\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nconst list = [\n {\n value: 'apple',\n label: 'Apple',\n disabled: false\n }, {\n value: 'pear',\n label: 'Pear'\n }, {\n value: 'orange',\n label: 'Orange',\n disabled: true\n }\n];\n\nclass ControlApp extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value1: 'apple',\n value2: 'apple',\n value3: ''\n };\n\n this.onNestChange = this.onNestChange.bind(this);\n this.onSmallChange = this.onSmallChange.bind(this);\n this.onMediumChange = this.onMediumChange.bind(this);\n }\n\n onSmallChange(value) {\n this.setState({\n value1: value\n });\n }\n\n onMediumChange(value) {\n this.setState({\n value2: value\n });\n }\n\n onNestChange(value) {\n this.setState({\n value3: value\n });\n }\n\n render() {\n return (\n
\n

Small size

\n \n
\n
\n

Medium size (default)

\n \n
\n
\n

Large size

\n \n Banana\n Watermelon\n Peach\n \n
\n
\n

Disabled and Selected-Disabled status

\n \n Peach\n Banana\n \n\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nconst list = [\n    {\n        value: 'apple',\n        label: 'Apple',\n        disabled: false\n    }, {\n        value: 'pear',\n        label: 'Pear'\n    }, {\n        value: 'orange',\n        label: 'Orange',\n        disabled: true\n    }\n];\n\nclass ControlApp extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value1: 'apple',\n            value2: 'apple',\n            value3: ''\n        };\n\n        this.onNestChange = this.onNestChange.bind(this);\n        this.onSmallChange = this.onSmallChange.bind(this);\n        this.onMediumChange = this.onMediumChange.bind(this);\n    }\n\n    onSmallChange(value) {\n        this.setState({\n            value1: value\n        });\n    }\n\n    onMediumChange(value) {\n        this.setState({\n            value2: value\n        });\n    }\n\n    onNestChange(value) {\n        this.setState({\n            value3: value\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <h4>Small size</h4>\n                <RadioGroup dataSource={list} shape=\"button\" size=\"small\" value={this.state.value1} onChange={this.onSmallChange} />\n                <br/>\n                <br/>\n                <h4>Medium size (default)</h4>\n                <RadioGroup dataSource={list} shape=\"button\" size=\"medium\" value={this.state.value2} onChange={this.onMediumChange} />\n                <br/>\n                <br/>\n                <h4>Large size</h4>\n                <RadioGroup shape=\"button\" size=\"large\" value={this.state.value3} onChange={this.onNestChange}>\n                    <Radio id=\"banana\" value=\"banana\">Banana</Radio>\n                    <Radio id=\"watermelon\" value=\"watermelon\">Watermelon</Radio>\n                    <Radio id=\"peach\" value=\"peach\">Peach</Radio>\n                </RadioGroup>\n                <br/>\n                <br/>\n                <h4>Disabled and Selected-Disabled status</h4>\n                <RadioGroup shape=\"button\" value=\"banana\" onChange={this.onNestChange}>\n                    <Radio id=\"peach\" disabled value=\"peach\">Peach</Radio>\n                    <Radio id=\"banana\" disabled value=\"banana\">Banana</Radio>\n                </RadioGroup>\n\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<ControlApp />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/radio/demo/control.en-us.md b/compiled_docs/radio/demo/control.en-us.md new file mode 100644 index 0000000000..9098201df6 --- /dev/null +++ b/compiled_docs/radio/demo/control.en-us.md @@ -0,0 +1 @@ +{"title":"Controlled Component","meta":{"title":"Controlled Component","description":"\n"},"codes":{"jsx":"import { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nconst list = [\n {\n value: 'appale',\n label: 'Appale'\n }, {\n value: 'pear',\n label: 'Pear'\n }, {\n value: 'orange',\n label: 'Orange'\n }\n];\n\nclass ControlApp extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: 'orange'\n };\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(value) {\n this.setState({\n value: value\n });\n console.log('onChange', value);\n }\n\n onClick(e) {\n console.log('onClick', e);\n }\n\n render() {\n return (\n
\n normal: \n
\n
\n
\n disabled: \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nconst list = [\n {\n value: 'appale',\n label: 'Appale'\n }, {\n value: 'pear',\n label: 'Pear'\n }, {\n value: 'orange',\n label: 'Orange'\n }\n];\n\nclass ControlApp extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: 'orange'\n };\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(value) {\n this.setState({\n value: value\n });\n console.log('onChange', value);\n }\n\n onClick(e) {\n console.log('onClick', e);\n }\n\n render() {\n return (\n
\n normal: \n
\n
\n
\n disabled: \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nconst list = [\n    {\n        value: 'appale',\n        label: 'Appale'\n    }, {\n        value: 'pear',\n        label: 'Pear'\n    }, {\n        value: 'orange',\n        label: 'Orange'\n    }\n];\n\nclass ControlApp extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: 'orange'\n        };\n\n        this.onChange = this.onChange.bind(this);\n    }\n\n    onChange(value) {\n        this.setState({\n            value: value\n        });\n        console.log('onChange', value);\n    }\n\n    onClick(e) {\n        console.log('onClick', e);\n    }\n\n    render() {\n        return (\n            <div>\n                normal:   <RadioGroup dataSource={list} value={this.state.value} onChange={this.onChange} />\n                <br />\n                <br />\n                <br />\n                disabled:  <RadioGroup disabled dataSource={list} value={this.state.value} onChange={this.onChange} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<ControlApp />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/radio/demo/control.md b/compiled_docs/radio/demo/control.md new file mode 100644 index 0000000000..93a5e16b40 --- /dev/null +++ b/compiled_docs/radio/demo/control.md @@ -0,0 +1 @@ +{"title":"受限组件","meta":{"title":"受限组件","description":"\n

使用 RadioGroup 渲染的组，通过设置 value 属性可以让组件变成受限组件。

\n","order":"1"},"codes":{"jsx":"import { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nconst list = [\n {\n value: 'appale',\n label: 'Appale'\n }, {\n value: 'pear',\n label: 'Pear'\n }, {\n value: 'orange',\n label: 'Orange'\n }\n];\n\nclass ControlApp extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: 'orange'\n };\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(value) {\n this.setState({\n value: value\n });\n console.log('onChange', value);\n }\n\n onClick(e) {\n console.log('onClick', e);\n }\n\n render() {\n return (\n
\n normal: \n
\n
\n
\n disabled: \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nconst list = [\n {\n value: 'appale',\n label: 'Appale'\n }, {\n value: 'pear',\n label: 'Pear'\n }, {\n value: 'orange',\n label: 'Orange'\n }\n];\n\nclass ControlApp extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: 'orange'\n };\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(value) {\n this.setState({\n value: value\n });\n console.log('onChange', value);\n }\n\n onClick(e) {\n console.log('onClick', e);\n }\n\n render() {\n return (\n
\n normal: \n
\n
\n
\n disabled: \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nconst list = [\n    {\n        value: 'appale',\n        label: 'Appale'\n    }, {\n        value: 'pear',\n        label: 'Pear'\n    }, {\n        value: 'orange',\n        label: 'Orange'\n    }\n];\n\nclass ControlApp extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: 'orange'\n        };\n\n        this.onChange = this.onChange.bind(this);\n    }\n\n    onChange(value) {\n        this.setState({\n            value: value\n        });\n        console.log('onChange', value);\n    }\n\n    onClick(e) {\n        console.log('onClick', e);\n    }\n\n    render() {\n        return (\n            <div>\n                normal:   <RadioGroup dataSource={list} value={this.state.value} onChange={this.onChange} />\n                <br />\n                <br />\n                <br />\n                disabled:  <RadioGroup disabled dataSource={list} value={this.state.value} onChange={this.onChange} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<ControlApp />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/radio/demo/group.en-us.md b/compiled_docs/radio/demo/group.en-us.md new file mode 100644 index 0000000000..10d786d683 --- /dev/null +++ b/compiled_docs/radio/demo/group.en-us.md @@ -0,0 +1 @@ +{"title":"Grouping","meta":{"title":"Grouping","description":"\n

Grouping <Radio> with <Radio.Group>.

\n","order":"0"},"codes":{"jsx":"import { Radio } from '@alifd/next';\n\nconst Shape = {\n NORMAL: 'normal',\n BUTTON: 'button'\n};\n\nconst ItemDirection = {\n HORIZON: 'hoz',\n VERTICAL: 'ver'\n};\n\nclass RadioGroup extends React.Component {\n state = {\n shape: Shape.NORMAL,\n itemDirection: ItemDirection.HORIZON\n }\n\n onShapeChange = (shape) => {\n this.setState({ shape });\n }\n\n onItemDirectionChange = (itemDirection) => {\n this.setState({ itemDirection });\n }\n\n render() {\n return (\n
\n
Choose a shape
\n

\n \n Normal\n Button\n \n

\n
Choose an align-type of the item
\n

\n \n Horizon\n Vertical\n \n

\n
\n

Rendered Result

\n \n React\n Vue\n Angular\n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".rendered-container {\n margin: 32px 0 0;\n padding: 0 24px 24px;\n border: 3px dashed #aaa;\n border-radius: 11px;\n}\n"},"body":"\n````jsx\nimport { Radio } from '@alifd/next';\n\nconst Shape = {\n NORMAL: 'normal',\n BUTTON: 'button'\n};\n\nconst ItemDirection = {\n HORIZON: 'hoz',\n VERTICAL: 'ver'\n};\n\nclass RadioGroup extends React.Component {\n state = {\n shape: Shape.NORMAL,\n itemDirection: ItemDirection.HORIZON\n }\n\n onShapeChange = (shape) => {\n this.setState({ shape });\n }\n\n onItemDirectionChange = (itemDirection) => {\n this.setState({ itemDirection });\n }\n\n render() {\n return (\n
\n
Choose a shape
\n

\n \n Normal\n Button\n \n

\n
Choose an align-type of the item
\n

\n \n Horizon\n Vertical\n \n

\n
\n

Rendered Result

\n \n React\n Vue\n Angular\n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.rendered-container {\n margin: 32px 0 0;\n padding: 0 24px 24px;\n border: 3px dashed #aaa;\n border-radius: 11px;\n}\n````","html":"
import { Radio } from '@alifd/next';\n\nconst Shape = {\n    NORMAL: 'normal',\n    BUTTON: 'button'\n};\n\nconst ItemDirection = {\n    HORIZON: 'hoz',\n    VERTICAL: 'ver'\n};\n\nclass RadioGroup extends React.Component {\n    state = {\n        shape: Shape.NORMAL,\n        itemDirection: ItemDirection.HORIZON\n    }\n\n    onShapeChange = (shape) => {\n        this.setState({ shape });\n    }\n\n    onItemDirectionChange = (itemDirection) => {\n        this.setState({ itemDirection });\n    }\n\n    render() {\n        return (\n            <div>\n                <h5>Choose a shape</h5>\n                <p>\n                    <Radio.Group\n                        shape=\"button\"\n                        value={this.state.shape}\n                        onChange={this.onShapeChange}\n                    >\n                        <Radio value={Shape.NORMAL}>Normal</Radio>\n                        <Radio value={Shape.BUTTON}>Button</Radio>\n                    </Radio.Group>\n                </p>\n                <h5>Choose an align-type of the item</h5>\n                <p>\n                    <Radio.Group\n                        shape=\"button\"\n                        value={this.state.itemDirection}\n                        onChange={this.onItemDirectionChange}\n                    >\n                        <Radio value={ItemDirection.HORIZON}>Horizon</Radio>\n                        <Radio\n                            value={ItemDirection.VERTICAL}\n                            disabled={this.state.shape === Shape.BUTTON}\n                        >Vertical</Radio>\n                    </Radio.Group>\n                </p>\n                <div className=\"rendered-container\">\n                    <h3>Rendered Result</h3>\n                    <Radio.Group\n                        shape={this.state.shape}\n                        itemDirection={this.state.itemDirection}\n                    >\n                        <Radio value=\"react\">React</Radio>\n                        <Radio value=\"vue\">Vue</Radio>\n                        <Radio value=\"angular\">Angular</Radio>\n                    </Radio.Group>\n                </div>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<RadioGroup />, mountNode);
.rendered-container {\n    margin: 32px 0 0;\n    padding: 0 24px 24px;\n    border: 3px dashed #aaa;\n    border-radius: 11px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/radio/demo/group.md b/compiled_docs/radio/demo/group.md new file mode 100644 index 0000000000..09f76effdd --- /dev/null +++ b/compiled_docs/radio/demo/group.md @@ -0,0 +1 @@ +{"title":"分组","meta":{"title":"分组","description":"\n

使用 <Radio.Group> 渲染 <Radio> 分组。

\n","order":"1"},"codes":{"jsx":"import { Radio } from '@alifd/next';\n\nconst Shape = {\n NORMAL: 'normal',\n BUTTON: 'button'\n};\n\nconst ItemDirection = {\n HORIZON: 'hoz',\n VERTICAL: 'ver'\n};\n\nclass RadioGroup extends React.Component {\n state = {\n shape: Shape.NORMAL,\n itemDirection: ItemDirection.HORIZON\n }\n\n onShapeChange = (shape) => {\n this.setState({ shape });\n }\n\n onItemDirectionChange = (itemDirection) => {\n this.setState({ itemDirection });\n }\n\n render() {\n return (\n
\n
Choose a shape
\n

\n \n Normal\n Button\n \n

\n
Choose an align-type of the item
\n

\n \n Horizon\n Vertical\n \n

\n
\n

Rendered Result

\n \n React\n Vue\n Angular\n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".rendered-container {\n margin: 32px 0 0;\n padding: 0 24px 24px;\n border: 3px dashed #aaa;\n border-radius: 11px;\n}\n"},"body":"\n\n````jsx\nimport { Radio } from '@alifd/next';\n\nconst Shape = {\n NORMAL: 'normal',\n BUTTON: 'button'\n};\n\nconst ItemDirection = {\n HORIZON: 'hoz',\n VERTICAL: 'ver'\n};\n\nclass RadioGroup extends React.Component {\n state = {\n shape: Shape.NORMAL,\n itemDirection: ItemDirection.HORIZON\n }\n\n onShapeChange = (shape) => {\n this.setState({ shape });\n }\n\n onItemDirectionChange = (itemDirection) => {\n this.setState({ itemDirection });\n }\n\n render() {\n return (\n
\n
Choose a shape
\n

\n \n Normal\n Button\n \n

\n
Choose an align-type of the item
\n

\n \n Horizon\n Vertical\n \n

\n
\n

Rendered Result

\n \n React\n Vue\n Angular\n \n
\n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.rendered-container {\n margin: 32px 0 0;\n padding: 0 24px 24px;\n border: 3px dashed #aaa;\n border-radius: 11px;\n}\n````","html":"
import { Radio } from '@alifd/next';\n\nconst Shape = {\n    NORMAL: 'normal',\n    BUTTON: 'button'\n};\n\nconst ItemDirection = {\n    HORIZON: 'hoz',\n    VERTICAL: 'ver'\n};\n\nclass RadioGroup extends React.Component {\n    state = {\n        shape: Shape.NORMAL,\n        itemDirection: ItemDirection.HORIZON\n    }\n\n    onShapeChange = (shape) => {\n        this.setState({ shape });\n    }\n\n    onItemDirectionChange = (itemDirection) => {\n        this.setState({ itemDirection });\n    }\n\n    render() {\n        return (\n            <div>\n                <h5>Choose a shape</h5>\n                <p>\n                    <Radio.Group\n                        shape=\"button\"\n                        value={this.state.shape}\n                        onChange={this.onShapeChange}\n                    >\n                        <Radio value={Shape.NORMAL}>Normal</Radio>\n                        <Radio value={Shape.BUTTON}>Button</Radio>\n                    </Radio.Group>\n                </p>\n                <h5>Choose an align-type of the item</h5>\n                <p>\n                    <Radio.Group\n                        shape=\"button\"\n                        value={this.state.itemDirection}\n                        onChange={this.onItemDirectionChange}\n                    >\n                        <Radio value={ItemDirection.HORIZON}>Horizon</Radio>\n                        <Radio\n                            value={ItemDirection.VERTICAL}\n                            disabled={this.state.shape === Shape.BUTTON}\n                        >Vertical</Radio>\n                    </Radio.Group>\n                </p>\n                <div className=\"rendered-container\">\n                    <h3>Rendered Result</h3>\n                    <Radio.Group\n                        shape={this.state.shape}\n                        itemDirection={this.state.itemDirection}\n                    >\n                        <Radio value=\"react\">React</Radio>\n                        <Radio value=\"vue\">Vue</Radio>\n                        <Radio value=\"angular\">Angular</Radio>\n                    </Radio.Group>\n                </div>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<RadioGroup />, mountNode);
.rendered-container {\n    margin: 32px 0 0;\n    padding: 0 24px 24px;\n    border: 3px dashed #aaa;\n    border-radius: 11px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/radio/demo/nest.en-us.md b/compiled_docs/radio/demo/nest.en-us.md new file mode 100644 index 0000000000..917230cf37 --- /dev/null +++ b/compiled_docs/radio/demo/nest.en-us.md @@ -0,0 +1 @@ +{"title":"Nested Components","meta":{"title":"Nested Components","description":"\n"},"codes":{"jsx":"import { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nclass NestApp extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n value: 'orange'\n };\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(value) {\n this.setState({\n value: value\n });\n }\n\n render() {\n return (\n
\n
\n \n Apple\n Watermelon\n Orange\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nclass NestApp extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n value: 'orange'\n };\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(value) {\n this.setState({\n value: value\n });\n }\n\n render() {\n return (\n
\n
\n \n Apple\n Watermelon\n Orange\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nclass NestApp extends React.Component {\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: 'orange'\n        };\n\n        this.onChange = this.onChange.bind(this);\n    }\n\n    onChange(value) {\n        this.setState({\n            value: value\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <label id=\"groupId\">Choose fruit</label><br/>\n                <RadioGroup value={this.state.value} onChange={this.onChange} aria-labelledby=\"groupId\">\n                    <Radio id=\"apple\" value=\"apple\">Apple</Radio>\n                    <Radio id=\"watermelon\" value=\"watermelon\">Watermelon</Radio>\n                    <Radio id=\"orange\" value=\"orange\">Orange</Radio>\n                </RadioGroup>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<NestApp />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/radio/demo/nest.md b/compiled_docs/radio/demo/nest.md new file mode 100644 index 0000000000..efa41d7564 --- /dev/null +++ b/compiled_docs/radio/demo/nest.md @@ -0,0 +1 @@ +{"title":"嵌套组件","meta":{"title":"嵌套组件","description":"\n

使用 RadioGroup，通过直接嵌套 Radio 组件来渲染的组。

\n","order":"3"},"codes":{"jsx":"import { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nclass NestApp extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n value: 'orange'\n };\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(value) {\n this.setState({\n value: value\n });\n }\n\n render() {\n return (\n
\n
\n \n Apple\n Watermelon\n Orange\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nclass NestApp extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n value: 'orange'\n };\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(value) {\n this.setState({\n value: value\n });\n }\n\n render() {\n return (\n
\n
\n \n Apple\n Watermelon\n Orange\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nclass NestApp extends React.Component {\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: 'orange'\n        };\n\n        this.onChange = this.onChange.bind(this);\n    }\n\n    onChange(value) {\n        this.setState({\n            value: value\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <label id=\"groupId\">Choose fruit</label><br/>\n                <RadioGroup value={this.state.value} onChange={this.onChange} aria-labelledby=\"groupId\">\n                    <Radio id=\"apple\" value=\"apple\">Apple</Radio>\n                    <Radio id=\"watermelon\" value=\"watermelon\">Watermelon</Radio>\n                    <Radio id=\"orange\" value=\"orange\">Orange</Radio>\n                </RadioGroup>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<NestApp />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/radio/demo/uncontrol.en-us.md b/compiled_docs/radio/demo/uncontrol.en-us.md new file mode 100644 index 0000000000..4360e19b1c --- /dev/null +++ b/compiled_docs/radio/demo/uncontrol.en-us.md @@ -0,0 +1 @@ +{"title":"Uncontrolled Component","meta":{"title":"Uncontrolled Component","description":"\n"},"codes":{"jsx":"import { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nconst list = [\n {\n value: 'apple',\n label: 'Apple',\n disabled: false\n }, {\n value: 'pear',\n label: 'Pear',\n disabled: true\n }, {\n value: 'orange',\n label: 'Orange'\n }\n];\n\nconst UnControlApp = () => {\n return (\n
\n \n
\n );\n};\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nconst list = [\n {\n value: 'apple',\n label: 'Apple',\n disabled: false\n }, {\n value: 'pear',\n label: 'Pear',\n disabled: true\n }, {\n value: 'orange',\n label: 'Orange'\n }\n];\n\nconst UnControlApp = () => {\n return (\n
\n \n
\n );\n};\n\nReactDOM.render(, mountNode);\n````","html":"
import { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nconst list = [\n    {\n        value: 'apple',\n        label: 'Apple',\n        disabled: false\n    }, {\n        value: 'pear',\n        label: 'Pear',\n        disabled: true\n    }, {\n        value: 'orange',\n        label: 'Orange'\n    }\n];\n\nconst UnControlApp = () => {\n    return (\n        <div>\n            <RadioGroup dataSource={list} defaultValue={'apple'} />\n        </div>\n    );\n};\n\nReactDOM.render(<UnControlApp />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/radio/demo/uncontrol.md b/compiled_docs/radio/demo/uncontrol.md new file mode 100644 index 0000000000..1fc399a302 --- /dev/null +++ b/compiled_docs/radio/demo/uncontrol.md @@ -0,0 +1 @@ +{"title":"非受限组件","meta":{"title":"非受限组件","description":"\n

使用 RadioGroup 渲染的组，通过设置 defaultValue 属性可以让组件变成非受限组件。

\n","order":"2"},"codes":{"jsx":"import { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nconst list = [\n {\n value: 'apple',\n label: 'Apple',\n disabled: false\n }, {\n value: 'pear',\n label: 'Pear',\n disabled: true\n }, {\n value: 'orange',\n label: 'Orange'\n }\n];\n\nconst UnControlApp = () => {\n return (\n
\n \n
\n );\n};\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nconst list = [\n {\n value: 'apple',\n label: 'Apple',\n disabled: false\n }, {\n value: 'pear',\n label: 'Pear',\n disabled: true\n }, {\n value: 'orange',\n label: 'Orange'\n }\n];\n\nconst UnControlApp = () => {\n return (\n
\n \n
\n );\n};\n\nReactDOM.render(, mountNode);\n````","html":"
import { Radio } from '@alifd/next';\n\nconst RadioGroup = Radio.Group;\n\nconst list = [\n    {\n        value: 'apple',\n        label: 'Apple',\n        disabled: false\n    }, {\n        value: 'pear',\n        label: 'Pear',\n        disabled: true\n    }, {\n        value: 'orange',\n        label: 'Orange'\n    }\n];\n\nconst UnControlApp = () => {\n    return (\n        <div>\n            <RadioGroup dataSource={list} defaultValue={'apple'} />\n        </div>\n    );\n};\n\nReactDOM.render(<UnControlApp />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/radio/demo/useWithGrid.en-us.md b/compiled_docs/radio/demo/useWithGrid.en-us.md new file mode 100644 index 0000000000..9d64950d82 --- /dev/null +++ b/compiled_docs/radio/demo/useWithGrid.en-us.md @@ -0,0 +1 @@ +{"title":"Grid Layout","meta":{"title":"Grid Layout","description":"\n"},"codes":{"jsx":"import { Radio, Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\nconst RadioGroup = Radio.Group;\n\nclass ControlApp extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: 'orange',\n other: 0\n };\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(value) {\n this.setState({\n value: value\n });\n console.log('onChange', value);\n }\n\n onClick(e) {\n console.log('onClick', e);\n }\n\n render() {\n return (\n
\n

Grid Layout

\n \n \n \n Apple\n \n \n Pear\n \n \n Banana\n \n \n \n \n Peach\n \n \n Watermelon\n \n \n Strawberry\n \n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Radio, Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\nconst RadioGroup = Radio.Group;\n\nclass ControlApp extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: 'orange',\n other: 0\n };\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(value) {\n this.setState({\n value: value\n });\n console.log('onChange', value);\n }\n\n onClick(e) {\n console.log('onClick', e);\n }\n\n render() {\n return (\n
\n

Grid Layout

\n \n \n \n Apple\n \n \n Pear\n \n \n Banana\n \n \n \n \n Peach\n \n \n Watermelon\n \n \n Strawberry\n \n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Radio, Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\nconst RadioGroup = Radio.Group;\n\nclass ControlApp extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: 'orange',\n            other: 0\n        };\n\n        this.onChange = this.onChange.bind(this);\n    }\n\n    onChange(value) {\n        this.setState({\n            value: value\n        });\n        console.log('onChange', value);\n    }\n\n    onClick(e) {\n        console.log('onClick', e);\n    }\n\n    render() {\n        return (\n            <div >\n                <h4>Grid Layout</h4>\n                <RadioGroup onChange={this.onChange} style={{ width: '1000px'}} >\n                    <Row>\n                        <Col span=\"8\">\n                            <Radio value=\"apple1\" onClick={this.onClick} >Apple</Radio>\n                        </Col>\n                        <Col span=\"8\">\n                            <Radio value=\"pear1\" onClick={this.onClick} >Pear</Radio>\n                        </Col>\n                        <Col span=\"8\">\n                            <Radio value=\"banana1\" onClick={this.onClick} >Banana</Radio>\n                        </Col>\n                    </Row>\n                    <Row>\n                        <Col span=\"8\">\n                            <Radio value=\"peach\" onClick={this.onClick} >Peach</Radio>\n                        </Col>\n                        <Col span=\"8\">\n                            <Radio value=\"watermelon\" onClick={this.onClick} >Watermelon</Radio>\n                        </Col>\n                        <Col span=\"8\">\n                            <Radio value=\"strawberry\" onClick={this.onClick} >Strawberry</Radio>\n                        </Col>\n                    </Row>\n                </RadioGroup>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<ControlApp />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/radio/demo/useWithGrid.md b/compiled_docs/radio/demo/useWithGrid.md new file mode 100644 index 0000000000..fa19d790c7 --- /dev/null +++ b/compiled_docs/radio/demo/useWithGrid.md @@ -0,0 +1 @@ +{"title":"使用Grid 布局","meta":{"title":"使用Grid 布局","description":"\n

使用 Grid 布局 RadioGroup 中的选项。

\n","order":"5"},"codes":{"jsx":"import { Radio, Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\nconst RadioGroup = Radio.Group;\n\nclass ControlApp extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: 'orange',\n other: 0\n };\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(value) {\n this.setState({\n value: value\n });\n console.log('onChange', value);\n }\n\n onClick(e) {\n console.log('onClick', e);\n }\n\n render() {\n return (\n
\n

Grid Layout

\n \n \n \n Apple\n \n \n Pear\n \n \n Banana\n \n \n \n \n Peach\n \n \n Watermelon\n \n \n Strawberry\n \n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n\n\n````jsx\nimport { Radio, Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\nconst RadioGroup = Radio.Group;\n\nclass ControlApp extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: 'orange',\n other: 0\n };\n\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(value) {\n this.setState({\n value: value\n });\n console.log('onChange', value);\n }\n\n onClick(e) {\n console.log('onClick', e);\n }\n\n render() {\n return (\n
\n

Grid Layout

\n \n \n \n Apple\n \n \n Pear\n \n \n Banana\n \n \n \n \n Peach\n \n \n Watermelon\n \n \n Strawberry\n \n \n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Radio, Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\nconst RadioGroup = Radio.Group;\n\nclass ControlApp extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: 'orange',\n            other: 0\n        };\n\n        this.onChange = this.onChange.bind(this);\n    }\n\n    onChange(value) {\n        this.setState({\n            value: value\n        });\n        console.log('onChange', value);\n    }\n\n    onClick(e) {\n        console.log('onClick', e);\n    }\n\n    render() {\n        return (\n            <div >\n                <h4>Grid Layout</h4>\n                <RadioGroup onChange={this.onChange} style={{ width: '1000px'}} >\n                    <Row>\n                        <Col span=\"8\">\n                            <Radio value=\"apple1\" onClick={this.onClick} >Apple</Radio>\n                        </Col>\n                        <Col span=\"8\">\n                            <Radio value=\"pear1\" onClick={this.onClick} >Pear</Radio>\n                        </Col>\n                        <Col span=\"8\">\n                            <Radio value=\"banana1\" onClick={this.onClick} >Banana</Radio>\n                        </Col>\n                    </Row>\n                    <Row>\n                        <Col span=\"8\">\n                            <Radio value=\"peach\" onClick={this.onClick} >Peach</Radio>\n                        </Col>\n                        <Col span=\"8\">\n                            <Radio value=\"watermelon\" onClick={this.onClick} >Watermelon</Radio>\n                        </Col>\n                        <Col span=\"8\">\n                            <Radio value=\"strawberry\" onClick={this.onClick} >Strawberry</Radio>\n                        </Col>\n                    </Row>\n                </RadioGroup>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<ControlApp />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/radio/index.en-us.md b/compiled_docs/radio/index.en-us.md new file mode 100644 index 0000000000..747a085226 --- /dev/null +++ b/compiled_docs/radio/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Guide#

Radio

\n

When to use#

Radio buttons allow the user to select a single option from data-set. User can use the radio button for exlusive opration and see all the options side by side. Otherwsie, consider using <DropDown/> that take up less space than showing all the option.

\n

API#

","api":"

Radio#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
idInput`s id in componentString-
checkedTo set radio button is checkedBoolean-
defaultCheckedTo set radio button default to be checkedBoolean-
labelTo set the radio labelString-
onChangeCallback on state change

signatures:
Function(checked: Boolean, e: Event) => void
params:
checked: {Boolean} Is checked
_e_: {Event} Dom Event		Functionfunc.noop
onMouseEnterCallback on mouse enter

signatures:
Function(e: Event) => void
params:
_e_: {Event} Dom Event		Functionfunc.noop
onMouseLeaveCallback on mouse leave

signatures:
Function(e: Event) => void
params:
_e_: {Event} Dom Event		Functionfunc.noop
disabledSet radio button disabel to be usedBoolean-
valuevalueString/Number/Boolean-
namenameString-
\n

Radio.Group#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
namenameString-
valueThe value of the Item witch is selected in radio groupString/Number/Boolean-
sizeUsed with shape prop，valid when shape is set to button

option:
'large'
'medium'
'small'		Enum'medium'
shapeMake radio shape like button, when it set value to 'button'

option:
'button'		Enum-
defaultValueThe value of the Item witch is default selected in radio groupString/Number/Boolean-
onChangeCallback on state change

signatures:
Function(value: String/Number, e: Event) => void
params:
value: {String/Number} The selected value
_e_: {Event} Dom Event		Function() => { }
disabledAll the radios in group are disable to be usedBoolean-
dataSourceThe data of radio buttons, it can be a String or a Object. For example: ['apple', 'pear', 'orange']Array<any>[]
childrenTo set radio button by setting children componentsArray<ReactElement>/ReactElement-
itemDirectionThe direction of item's aligning
- hoz: horizonal (default)
- ver: vertical

Allowed values:
'hoz', 'ver'		Enum'hoz'
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyBoardDescripiton
TabGet the focus, if there is no selection, it is the first one, then you can select it with a space. If it is selected, it will focus on the selected item, and then left-right will navigate and select radio.
\n"} \ No newline at end of file diff --git a/compiled_docs/radio/index.md b/compiled_docs/radio/index.md new file mode 100644 index 0000000000..5ba5acae8b --- /dev/null +++ b/compiled_docs/radio/index.md @@ -0,0 +1 @@ +{"meta":"

开发指南#

单选框

\n

何时使用#

单选框允许用户从一个数据集中选择单个选项。如果你觉得用户需要并排看到所有的可选项，使用单选框进行排他操作。此外，考虑使用下拉列表，相对于显示所有的选项占用更少的空间。

\n

API#

","api":"

Radio#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
id组件input的idString-
checked设置radio是否选中Boolean-
defaultChecked设置radio是否默认选中Boolean-
label通过属性配置labelReactNode-
onChange状态变化时触发的事件

签名:
Function(checked: Boolean, e: Event) => void
参数:
checked: {Boolean} 是否选中
_e_: {Event} Dom 事件对象		Functionfunc.noop
onMouseEnter鼠标进入enter事件

签名:
Function(e: Event) => void
参数:
_e_: {Event} Dom 事件对象		Functionfunc.noop
onMouseLeave鼠标离开事件

签名:
Function(e: Event) => void
参数:
_e_: {Event} Dom 事件对象		Functionfunc.noop
disabledradio是否被禁用Boolean-
valueradio 的valueString/Number/Boolean-
namenameString-
\n

Radio.Group#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
namenameString-
size与 shape 属性配套使用，shape设为button时有效

可选值:
'large'(大)
'medium'(中)
'small'(小)		Enum'medium'
shape可以设置成 button 展示形状

可选值:
'button'(按钮状)		Enum-
valueradio group的选中项的值String/Number/Boolean-
defaultValueradio group的默认值String/Number/Boolean-
component设置标签类型String/Function'div'
onChange选中值改变时的事件

签名:
Function(value: String/Number, e: Event) => void
参数:
value: {String/Number} 选中项的值
_e_: {Event} Dom 事件对象		Function() => {}
disabled表示radio被禁用Boolean-
dataSource可选项列表, 数据项可为 String 或者 Object, 如 ['apple', 'pear', 'orange']Array<any>[]
children通过子元素方式设置内部radioArray<ReactElement>/ReactElement-
itemDirection子项目的排列方式
- hoz: 水平排列 (default)
- ver: 垂直排列

可选值:
'hoz', 'ver'		Enum'hoz'
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n
按键说明
Tab获取焦点，如果没有任何选中就是第一个，之后可以空格选中。如果有选中的就聚焦到选中项，然后通过左右键直接选中。
\n"} \ No newline at end of file diff --git a/compiled_docs/range/demo/accessibility.en-us.md b/compiled_docs/range/demo/accessibility.en-us.md new file mode 100644 index 0000000000..237150fd70 --- /dev/null +++ b/compiled_docs/range/demo/accessibility.en-us.md @@ -0,0 +1 @@ +{"title":"Accessibility","meta":{"title":"Accessibility","description":"\n

After the slider is focused by Tab or other approaches, you can change its position by pressing the left or right arrows on the keyboard. Currently, only a single slider supports accessibility.

\n","order":"8"},"codes":{"jsx":"import { Range } from '@alifd/next';\n\n\nconst style = {\n marginBottom: '15px'\n};\n\nReactDOM.render(
\n

single slider - from left to right

\n \n

single slider - from right to left

\n \n
, mountNode);\n"},"body":"\n````jsx\nimport { Range } from '@alifd/next';\n\n\nconst style = {\n marginBottom: '15px'\n};\n\nReactDOM.render(
\n

single slider - from left to right

\n \n

single slider - from right to left

\n \n
, mountNode);\n````","html":"
import { Range } from '@alifd/next';\n\n\nconst style = {\n    marginBottom: '15px'\n};\n\nReactDOM.render(<div style={{width: '400px', margin: '50px'}}>\n        <h4>single slider - from left to right</h4>\n        <Range defaultValue={30} style={style} hasTip={false} />\n        <h4>single slider - from right to left</h4>\n        <Range defaultValue={30} style={style} reverse hasTip={false} />\n    </div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/range/demo/accessibility.md b/compiled_docs/range/demo/accessibility.md new file mode 100644 index 0000000000..2e595ce531 --- /dev/null +++ b/compiled_docs/range/demo/accessibility.md @@ -0,0 +1 @@ +{"title":"无障碍","meta":{"title":"无障碍","description":"\n

通过Tab键或其他方式使滑块被聚焦之后，可以通过按下键盘的左右箭头来改变滑块的位置，目前只有单滑块支持无障碍。

\n","order":"8"},"codes":{"jsx":"import { Range } from '@alifd/next';\n\n\nconst style = {\n marginBottom: '15px'\n};\n\nReactDOM.render(
\n

single slider - from left to right

\n \n

single slider - from right to left

\n \n
, mountNode);\n"},"body":"\n````jsx\nimport { Range } from '@alifd/next';\n\n\nconst style = {\n marginBottom: '15px'\n};\n\nReactDOM.render(
\n

single slider - from left to right

\n \n

single slider - from right to left

\n \n
, mountNode);\n````","html":"
import { Range } from '@alifd/next';\n\n\nconst style = {\n    marginBottom: '15px'\n};\n\nReactDOM.render(<div style={{width: '400px', margin: '50px'}}>\n        <h4>single slider - from left to right</h4>\n        <Range defaultValue={30} style={style} hasTip={false} />\n        <h4>single slider - from right to left</h4>\n        <Range defaultValue={30} style={style} reverse hasTip={false} />\n    </div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/range/demo/basic.en-us.md b/compiled_docs/range/demo/basic.en-us.md new file mode 100644 index 0000000000..43655a45ce --- /dev/null +++ b/compiled_docs/range/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

Basic usage. When slider is double, render two sliders; when disabled is true, the slider is unusable.

\n","order":"0"},"codes":{"jsx":"import { Range } from '@alifd/next';\n\n\nconst style = {\n marginBottom: '15px'\n};\n\nReactDOM.render(
\n

single slider - from left to right

\n \n

single slider - from right to left

\n \n

double slider - from outside to inside

\n \n

double slider - from inside to outside

\n \n

Disabled

\n \n

Disabled

\n \n

tooltipVisible disabled

\n \n

tooltipVisible

\n \n

tooltipVisible disabled

\n \n

tooltipVisible

\n \n
, mountNode);\n"},"body":"\n````jsx\nimport { Range } from '@alifd/next';\n\n\nconst style = {\n marginBottom: '15px'\n};\n\nReactDOM.render(
\n

single slider - from left to right

\n \n

single slider - from right to left

\n \n

double slider - from outside to inside

\n \n

double slider - from inside to outside

\n \n

Disabled

\n \n

Disabled

\n \n

tooltipVisible disabled

\n \n

tooltipVisible

\n \n

tooltipVisible disabled

\n \n

tooltipVisible

\n \n
, mountNode);\n````","html":"
import { Range } from '@alifd/next';\n\n\nconst style = {\n    marginBottom: '15px'\n};\n\nReactDOM.render(<div style={{width: '400px', margin: '50px'}}>\n        <h4>single slider - from left to right</h4>\n        <Range defaultValue={30} style={style} hasTip={false} />\n        <h4>single slider - from right to left</h4>\n        <Range defaultValue={30} style={style} reverse hasTip={false} />\n        <h4>double slider - from outside to inside</h4>\n        <Range slider={'double'} defaultValue={[20, 40]} style={style} />\n        <h4>double slider - from inside to outside</h4>\n        <Range slider={'double'} defaultValue={[20, 40]} style={style} reverse />\n        <h4>Disabled</h4>\n        <Range defaultValue={30} disabled style={style} />\n        <h4>Disabled</h4>\n        <Range slider={'double'} defaultValue={[20, 40]} disabled style={style} />\n        <h4>tooltipVisible disabled</h4>\n        <Range disabled tooltipVisible defaultValue={60} style={style} />\n        <h4>tooltipVisible</h4>\n        <Range tooltipVisible defaultValue={60} style={style} />\n        <h4>tooltipVisible disabled</h4>\n        <Range disabled tooltipVisible slider={'double'} defaultValue={[57, 77]} style={style} />\n        <h4>tooltipVisible</h4>\n        <Range tooltipVisible slider={'double'} defaultValue={[57, 77]} style={style} />\n    </div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/range/demo/basic.md b/compiled_docs/range/demo/basic.md new file mode 100644 index 0000000000..6e9acdecc5 --- /dev/null +++ b/compiled_docs/range/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

基本滑块，当 slider 为 double 时，渲染为双滑块。当 disabled 为 true 时，滑块处于不可用状态。

\n","order":"0"},"codes":{"jsx":"import { Range } from '@alifd/next';\n\n\nconst style = {\n marginBottom: '15px'\n};\n\nReactDOM.render(
\n

single slider - from left to right

\n \n

single slider - from right to left

\n \n

double slider - from outside to inside

\n \n

double slider - from inside to outside

\n \n

Disabled

\n \n

Disabled

\n \n

tooltipVisible disabled

\n \n

tooltipVisible

\n \n

tooltipVisible disabled

\n \n

tooltipVisible

\n \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Range } from '@alifd/next';\n\n\nconst style = {\n marginBottom: '15px'\n};\n\nReactDOM.render(
\n

single slider - from left to right

\n \n

single slider - from right to left

\n \n

double slider - from outside to inside

\n \n

double slider - from inside to outside

\n \n

Disabled

\n \n

Disabled

\n \n

tooltipVisible disabled

\n \n

tooltipVisible

\n \n

tooltipVisible disabled

\n \n

tooltipVisible

\n \n
, mountNode);\n````","html":"
import { Range } from '@alifd/next';\n\n\nconst style = {\n    marginBottom: '15px'\n};\n\nReactDOM.render(<div style={{width: '400px', margin: '50px'}}>\n        <h4>single slider - from left to right</h4>\n        <Range defaultValue={30} style={style} hasTip={false} />\n        <h4>single slider - from right to left</h4>\n        <Range defaultValue={30} style={style} reverse hasTip={false} />\n        <h4>double slider - from outside to inside</h4>\n        <Range slider={'double'} defaultValue={[20, 40]} style={style} />\n        <h4>double slider - from inside to outside</h4>\n        <Range slider={'double'} defaultValue={[20, 40]} style={style} reverse />\n        <h4>Disabled</h4>\n        <Range defaultValue={30} disabled style={style} />\n        <h4>Disabled</h4>\n        <Range slider={'double'} defaultValue={[20, 40]} disabled style={style} />\n        <h4>tooltipVisible disabled</h4>\n        <Range disabled tooltipVisible defaultValue={60} style={style} />\n        <h4>tooltipVisible</h4>\n        <Range tooltipVisible defaultValue={60} style={style} />\n        <h4>tooltipVisible disabled</h4>\n        <Range disabled tooltipVisible slider={'double'} defaultValue={[57, 77]} style={style} />\n        <h4>tooltipVisible</h4>\n        <Range tooltipVisible slider={'double'} defaultValue={[57, 77]} style={style} />\n    </div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/range/demo/change.en-us.md b/compiled_docs/range/demo/change.en-us.md new file mode 100644 index 0000000000..b3fcbd13ff --- /dev/null +++ b/compiled_docs/range/demo/change.en-us.md @@ -0,0 +1 @@ +{"title":"Change","meta":{"title":"Change","description":"\n

onChange,onProcess callbacks

\n","order":"3"},"codes":{"jsx":"import { Range } from '@alifd/next';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: 128,\n value2: 300,\n doubleValue: [200, 300]\n };\n\n }\n\n //Controlled. onChange will be triggered when startValue isn't equal to endValue after sliding\n onChange(value) {\n console.log('onChange value:', value);\n this.setState({value});\n }\n\n // This callback will be triggered when startValue and endValue aren't equal after mousedown/mousemove. You shouldn't call setState here.\n onProcess(value) {\n console.log('onProcess: ', value);\n }\n\n onChangeDouble(doubleValue) {\n console.log('onChange doubleValue:', doubleValue);\n this.setState({doubleValue});\n }\n\n onProcessDouble(doubleValue) {\n console.log('onProcess: ', doubleValue);\n }\n\n render() {\n return (\n
\n

range 0 ~ 1024

\n
\n\n \n
\n\n

with value and without onChange

\n
\n\n \n
\n\n\n

double slider controlled

\n
\n\n \n
\n
\n );\n }\n\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Range } from '@alifd/next';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: 128,\n value2: 300,\n doubleValue: [200, 300]\n };\n\n }\n\n //Controlled. onChange will be triggered when startValue isn't equal to endValue after sliding\n onChange(value) {\n console.log('onChange value:', value);\n this.setState({value});\n }\n\n // This callback will be triggered when startValue and endValue aren't equal after mousedown/mousemove. You shouldn't call setState here.\n onProcess(value) {\n console.log('onProcess: ', value);\n }\n\n onChangeDouble(doubleValue) {\n console.log('onChange doubleValue:', doubleValue);\n this.setState({doubleValue});\n }\n\n onProcessDouble(doubleValue) {\n console.log('onProcess: ', doubleValue);\n }\n\n render() {\n return (\n
\n

range 0 ~ 1024

\n
\n\n \n
\n\n

with value and without onChange

\n
\n\n \n
\n\n\n

double slider controlled

\n
\n\n \n
\n
\n );\n }\n\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Range } from '@alifd/next';\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            value: 128,\n            value2: 300,\n            doubleValue: [200, 300]\n        };\n\n    }\n\n    //Controlled. onChange will be triggered when startValue isn't equal to endValue after sliding\n    onChange(value) {\n        console.log('onChange value:', value);\n        this.setState({value});\n    }\n\n    // This callback will be triggered when startValue and endValue aren't equal after mousedown/mousemove. You shouldn't call setState here.\n    onProcess(value) {\n        console.log('onProcess: ', value);\n    }\n\n    onChangeDouble(doubleValue) {\n        console.log('onChange doubleValue:', doubleValue);\n        this.setState({doubleValue});\n    }\n\n    onProcessDouble(doubleValue) {\n        console.log('onProcess: ', doubleValue);\n    }\n\n    render() {\n        return (\n            <div style={{width: '400px', margin: '50px'}}>\n                <p>range 0 ~ 1024</p>\n                <div style={{width: '400px', marginTop: '50px'}}>\n\n                    <Range value={this.state.value} onChange={this.onChange.bind(this)}\n                        onProcess={this.onProcess.bind(this)}\n                        min={0} max={1024} marks={[0, 1024]} />\n                </div>\n\n                <p>with value and without onChange</p>\n                <div style={{width: '400px', marginTop: '50px'}}>\n\n                    <Range value={this.state.value2}\n                        onProcess={this.onProcess.bind(this)}\n                        min={0} max={1024} marks={[0, 1024]} />\n                </div>\n\n\n                <p>double slider controlled</p>\n                <div style={{width: '400px', marginTop: '50px'}}>\n\n                    <Range slider=\"double\" value={this.state.doubleValue} onChange={this.onChangeDouble.bind(this)}\n                        onProcess={this.onProcessDouble.bind(this)}\n                        min={0} max={1024} marks={[0, 1024]} />\n                </div>\n            </div>\n        );\n    }\n\n}\n\nReactDOM.render(<App />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/range/demo/change.md b/compiled_docs/range/demo/change.md new file mode 100644 index 0000000000..b54cd9f446 --- /dev/null +++ b/compiled_docs/range/demo/change.md @@ -0,0 +1 @@ +{"title":"事件","meta":{"title":"事件","description":"\n

onChange,onProcess事件

\n","order":"3"},"codes":{"jsx":"import { Range } from '@alifd/next';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: 128,\n value2: 300,\n doubleValue: [200, 300]\n };\n\n }\n\n //Controlled. onChange will be triggered when startValue isn't equal to endValue after sliding\n onChange(value) {\n console.log('onChange value:', value);\n this.setState({value});\n }\n\n // This callback will be triggered when startValue and endValue aren't equal after mousedown/mousemove. You shouldn't call setState here.\n onProcess(value) {\n console.log('onProcess: ', value);\n }\n\n onChangeDouble(doubleValue) {\n console.log('onChange doubleValue:', doubleValue);\n this.setState({doubleValue});\n }\n\n onProcessDouble(doubleValue) {\n console.log('onProcess: ', doubleValue);\n }\n\n render() {\n return (\n
\n

range 0 ~ 1024

\n
\n\n \n
\n\n

with value and without onChange

\n
\n\n \n
\n\n\n

double slider controlled

\n
\n\n \n
\n
\n );\n }\n\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Range } from '@alifd/next';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: 128,\n value2: 300,\n doubleValue: [200, 300]\n };\n\n }\n\n //Controlled. onChange will be triggered when startValue isn't equal to endValue after sliding\n onChange(value) {\n console.log('onChange value:', value);\n this.setState({value});\n }\n\n // This callback will be triggered when startValue and endValue aren't equal after mousedown/mousemove. You shouldn't call setState here.\n onProcess(value) {\n console.log('onProcess: ', value);\n }\n\n onChangeDouble(doubleValue) {\n console.log('onChange doubleValue:', doubleValue);\n this.setState({doubleValue});\n }\n\n onProcessDouble(doubleValue) {\n console.log('onProcess: ', doubleValue);\n }\n\n render() {\n return (\n
\n

range 0 ~ 1024

\n
\n\n \n
\n\n

with value and without onChange

\n
\n\n \n
\n\n\n

double slider controlled

\n
\n\n \n
\n
\n );\n }\n\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Range } from '@alifd/next';\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            value: 128,\n            value2: 300,\n            doubleValue: [200, 300]\n        };\n\n    }\n\n    //Controlled. onChange will be triggered when startValue isn't equal to endValue after sliding\n    onChange(value) {\n        console.log('onChange value:', value);\n        this.setState({value});\n    }\n\n    // This callback will be triggered when startValue and endValue aren't equal after mousedown/mousemove. You shouldn't call setState here.\n    onProcess(value) {\n        console.log('onProcess: ', value);\n    }\n\n    onChangeDouble(doubleValue) {\n        console.log('onChange doubleValue:', doubleValue);\n        this.setState({doubleValue});\n    }\n\n    onProcessDouble(doubleValue) {\n        console.log('onProcess: ', doubleValue);\n    }\n\n    render() {\n        return (\n            <div style={{width: '400px', margin: '50px'}}>\n                <p>range 0 ~ 1024</p>\n                <div style={{width: '400px', marginTop: '50px'}}>\n\n                    <Range value={this.state.value} onChange={this.onChange.bind(this)}\n                        onProcess={this.onProcess.bind(this)}\n                        min={0} max={1024} marks={[0, 1024]} />\n                </div>\n\n                <p>with value and without onChange</p>\n                <div style={{width: '400px', marginTop: '50px'}}>\n\n                    <Range value={this.state.value2}\n                        onProcess={this.onProcess.bind(this)}\n                        min={0} max={1024} marks={[0, 1024]} />\n                </div>\n\n\n                <p>double slider controlled</p>\n                <div style={{width: '400px', marginTop: '50px'}}>\n\n                    <Range slider=\"double\" value={this.state.doubleValue} onChange={this.onChangeDouble.bind(this)}\n                        onProcess={this.onProcessDouble.bind(this)}\n                        min={0} max={1024} marks={[0, 1024]} />\n                </div>\n            </div>\n        );\n    }\n\n}\n\nReactDOM.render(<App />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/range/demo/control.en-us.md b/compiled_docs/range/demo/control.en-us.md new file mode 100644 index 0000000000..db164154c8 --- /dev/null +++ b/compiled_docs/range/demo/control.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

Used with number-picker to set the icon.

\n","order":"5"},"codes":{"jsx":"import { Range, NumberPicker, Grid, Icon } from '@alifd/next';\n\n\n\nconst {Row, Col} = Grid;\n\nclass Demo extends React.Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n valueInt: 3,\n valueDec: 0.05,\n valueIcon: 1,\n preIconClass: '',\n afterIconClass: ''\n };\n\n }\n\n onChangeInt(value) {\n console.log(value);\n this.setState(Object.assign({}, this.state, {\n valueInt: value\n }));\n }\n\n onChangeDec(value) {\n\n this.setState(Object.assign({}, this.state, {\n valueDec: value\n }));\n }\n\n onIconRangeProcess(value) {\n const mid = 50;\n this.setState(Object.assign({}, this.state, {\n valueIcon: value,\n preIconClass: value < mid ? 'myicon-highlight' : '',\n afterIconClass: value >= mid ? 'myicon-highlight' : ''\n }));\n }\n\n render() {\n return (\n
\n

Used with numberPicker

\n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n

Used with Icon

\n\n
\n \n \n \n
\n
\n );\n }\n\n\n}\n\nReactDOM.render(, mountNode);\n\n\n","css":".iconWrapper {\n position: relative;\n padding: 0px 40px;\n}\n\n.iconWrapper .myicon {\n position: absolute;\n top: -3px;\n width: 16px;\n height: 16px;\n line-height: 1;\n font-size: 16px;\n color: #ccc;\n}\n\n.iconWrapper .myicon:first-child {\n left: 0;\n}\n\n.iconWrapper .myicon:last-child {\n right: 0;\n}\n\n.myicon.myicon-highlight {\n color: #666;\n}\n"},"body":"\n````jsx\nimport { Range, NumberPicker, Grid, Icon } from '@alifd/next';\n\n\n\nconst {Row, Col} = Grid;\n\nclass Demo extends React.Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n valueInt: 3,\n valueDec: 0.05,\n valueIcon: 1,\n preIconClass: '',\n afterIconClass: ''\n };\n\n }\n\n onChangeInt(value) {\n console.log(value);\n this.setState(Object.assign({}, this.state, {\n valueInt: value\n }));\n }\n\n onChangeDec(value) {\n\n this.setState(Object.assign({}, this.state, {\n valueDec: value\n }));\n }\n\n onIconRangeProcess(value) {\n const mid = 50;\n this.setState(Object.assign({}, this.state, {\n valueIcon: value,\n preIconClass: value < mid ? 'myicon-highlight' : '',\n afterIconClass: value >= mid ? 'myicon-highlight' : ''\n }));\n }\n\n render() {\n return (\n
\n

Used with numberPicker

\n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n

Used with Icon

\n\n
\n \n \n \n
\n
\n );\n }\n\n\n}\n\nReactDOM.render(, mountNode);\n\n\n````\n\n````css\n.iconWrapper {\n position: relative;\n padding: 0px 40px;\n}\n\n.iconWrapper .myicon {\n position: absolute;\n top: -3px;\n width: 16px;\n height: 16px;\n line-height: 1;\n font-size: 16px;\n color: #ccc;\n}\n\n.iconWrapper .myicon:first-child {\n left: 0;\n}\n\n.iconWrapper .myicon:last-child {\n right: 0;\n}\n\n.myicon.myicon-highlight {\n color: #666;\n}\n````","html":"
import { Range, NumberPicker, Grid, Icon } from '@alifd/next';\n\n\n\nconst {Row, Col} = Grid;\n\nclass Demo extends React.Component {\n    constructor(props, context) {\n        super(props, context);\n        this.state = {\n            valueInt: 3,\n            valueDec: 0.05,\n            valueIcon: 1,\n            preIconClass: '',\n            afterIconClass: ''\n        };\n\n    }\n\n    onChangeInt(value) {\n        console.log(value);\n        this.setState(Object.assign({}, this.state, {\n            valueInt: value\n        }));\n    }\n\n    onChangeDec(value) {\n\n        this.setState(Object.assign({}, this.state, {\n            valueDec: value\n        }));\n    }\n\n    onIconRangeProcess(value) {\n        const mid = 50;\n        this.setState(Object.assign({}, this.state, {\n            valueIcon: value,\n            preIconClass: value < mid ? 'myicon-highlight' : '',\n            afterIconClass: value >= mid ? 'myicon-highlight' : ''\n        }));\n    }\n\n    render() {\n        return (\n            <div style={{width: '400px', margin: '50px'}}>\n                <h2>Used with numberPicker</h2>\n                <Row>\n                    <Col span=\"12\" style={{marginTop: '10px'}}>\n                        <Range value={this.state.valueInt} min={0} max={20} step={1}\n                            onChange={this.onChangeInt.bind(this)} />\n                    </Col>\n                    <Col span=\"12\">\n                        <NumberPicker value={this.state.valueInt} min={0} max={1024} step={1}\n                            onChange={this.onChangeInt.bind(this)} />\n                    </Col>\n                </Row>\n                <br />\n                <Row>\n                    <Col span=\"12\" style={{marginTop: '10px'}}>\n                        <Range value={this.state.valueDec} min={0} max={1} step={0.01}\n                            onChange={this.onChangeDec.bind(this)} />\n                    </Col>\n                    <Col span=\"12\">\n                        <NumberPicker value={this.state.valueDec} min={0} max={1} step={0.01}\n                            onChange={this.onChangeDec.bind(this)} />\n                    </Col>\n                </Row>\n                <h2>Used with Icon</h2>\n\n                <div className=\"iconWrapper\">\n                    <Icon className={`myicon ${this.state.preIconClass}`} type=\"cry\" />\n                    <Range min={1} max={100} onChange={this.onIconRangeProcess.bind(this)} value={this.state.valueIcon} />\n                    <Icon className={`myicon ${this.state.afterIconClass}`} type=\"smile\" />\n                </div>\n            </div>\n        );\n    }\n\n\n}\n\nReactDOM.render(<Demo />, mountNode);\n\n
.iconWrapper {\n  position: relative;\n  padding: 0px 40px;\n}\n\n.iconWrapper .myicon {\n  position: absolute;\n  top: -3px;\n  width: 16px;\n  height: 16px;\n  line-height: 1;\n  font-size: 16px;\n  color: #ccc;\n}\n\n.iconWrapper .myicon:first-child {\n  left: 0;\n}\n\n.iconWrapper .myicon:last-child {\n  right: 0;\n}\n\n.myicon.myicon-highlight {\n  color: #666;\n}
"} \ No newline at end of file diff --git a/compiled_docs/range/demo/control.md b/compiled_docs/range/demo/control.md new file mode 100644 index 0000000000..85294b5d91 --- /dev/null +++ b/compiled_docs/range/demo/control.md @@ -0,0 +1 @@ +{"title":"范围与 step","meta":{"title":"范围与 step","description":"\n

与number-picker结合,外部控制,与Icon结合设置边界Icon

\n","order":"5"},"codes":{"jsx":"import { Range, NumberPicker, Grid, Icon } from '@alifd/next';\n\n\n\nconst {Row, Col} = Grid;\n\nclass Demo extends React.Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n valueInt: 3,\n valueDec: 0.05,\n valueIcon: 1,\n preIconClass: '',\n afterIconClass: ''\n };\n\n }\n\n onChangeInt(value) {\n console.log(value);\n this.setState(Object.assign({}, this.state, {\n valueInt: value\n }));\n }\n\n onChangeDec(value) {\n\n this.setState(Object.assign({}, this.state, {\n valueDec: value\n }));\n }\n\n onIconRangeProcess(value) {\n const mid = 50;\n this.setState(Object.assign({}, this.state, {\n valueIcon: value,\n preIconClass: value < mid ? 'myicon-highlight' : '',\n afterIconClass: value >= mid ? 'myicon-highlight' : ''\n }));\n }\n\n render() {\n return (\n
\n

Used with numberPicker

\n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n

Used with Icon

\n\n
\n \n \n \n
\n
\n );\n }\n\n\n}\n\nReactDOM.render(, mountNode);\n\n\n","css":".iconWrapper {\n position: relative;\n padding: 0px 40px;\n}\n\n.iconWrapper .myicon {\n position: absolute;\n top: -3px;\n width: 16px;\n height: 16px;\n line-height: 1;\n font-size: 16px;\n color: #ccc;\n}\n\n.iconWrapper .myicon:first-child {\n left: 0;\n}\n\n.iconWrapper .myicon:last-child {\n right: 0;\n}\n\n.myicon.myicon-highlight {\n color: #666;\n}\n"},"body":"\n\n````jsx\nimport { Range, NumberPicker, Grid, Icon } from '@alifd/next';\n\n\n\nconst {Row, Col} = Grid;\n\nclass Demo extends React.Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n valueInt: 3,\n valueDec: 0.05,\n valueIcon: 1,\n preIconClass: '',\n afterIconClass: ''\n };\n\n }\n\n onChangeInt(value) {\n console.log(value);\n this.setState(Object.assign({}, this.state, {\n valueInt: value\n }));\n }\n\n onChangeDec(value) {\n\n this.setState(Object.assign({}, this.state, {\n valueDec: value\n }));\n }\n\n onIconRangeProcess(value) {\n const mid = 50;\n this.setState(Object.assign({}, this.state, {\n valueIcon: value,\n preIconClass: value < mid ? 'myicon-highlight' : '',\n afterIconClass: value >= mid ? 'myicon-highlight' : ''\n }));\n }\n\n render() {\n return (\n
\n

Used with numberPicker

\n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n

Used with Icon

\n\n
\n \n \n \n
\n
\n );\n }\n\n\n}\n\nReactDOM.render(, mountNode);\n\n\n````\n\n````css\n.iconWrapper {\n position: relative;\n padding: 0px 40px;\n}\n\n.iconWrapper .myicon {\n position: absolute;\n top: -3px;\n width: 16px;\n height: 16px;\n line-height: 1;\n font-size: 16px;\n color: #ccc;\n}\n\n.iconWrapper .myicon:first-child {\n left: 0;\n}\n\n.iconWrapper .myicon:last-child {\n right: 0;\n}\n\n.myicon.myicon-highlight {\n color: #666;\n}\n````","html":"
import { Range, NumberPicker, Grid, Icon } from '@alifd/next';\n\n\n\nconst {Row, Col} = Grid;\n\nclass Demo extends React.Component {\n    constructor(props, context) {\n        super(props, context);\n        this.state = {\n            valueInt: 3,\n            valueDec: 0.05,\n            valueIcon: 1,\n            preIconClass: '',\n            afterIconClass: ''\n        };\n\n    }\n\n    onChangeInt(value) {\n        console.log(value);\n        this.setState(Object.assign({}, this.state, {\n            valueInt: value\n        }));\n    }\n\n    onChangeDec(value) {\n\n        this.setState(Object.assign({}, this.state, {\n            valueDec: value\n        }));\n    }\n\n    onIconRangeProcess(value) {\n        const mid = 50;\n        this.setState(Object.assign({}, this.state, {\n            valueIcon: value,\n            preIconClass: value < mid ? 'myicon-highlight' : '',\n            afterIconClass: value >= mid ? 'myicon-highlight' : ''\n        }));\n    }\n\n    render() {\n        return (\n            <div style={{width: '400px', margin: '50px'}}>\n                <h2>Used with numberPicker</h2>\n                <Row>\n                    <Col span=\"12\" style={{marginTop: '10px'}}>\n                        <Range value={this.state.valueInt} min={0} max={20} step={1}\n                            onChange={this.onChangeInt.bind(this)} />\n                    </Col>\n                    <Col span=\"12\">\n                        <NumberPicker value={this.state.valueInt} min={0} max={1024} step={1}\n                            onChange={this.onChangeInt.bind(this)} />\n                    </Col>\n                </Row>\n                <br />\n                <Row>\n                    <Col span=\"12\" style={{marginTop: '10px'}}>\n                        <Range value={this.state.valueDec} min={0} max={1} step={0.01}\n                            onChange={this.onChangeDec.bind(this)} />\n                    </Col>\n                    <Col span=\"12\">\n                        <NumberPicker value={this.state.valueDec} min={0} max={1} step={0.01}\n                            onChange={this.onChangeDec.bind(this)} />\n                    </Col>\n                </Row>\n                <h2>Used with Icon</h2>\n\n                <div className=\"iconWrapper\">\n                    <Icon className={`myicon ${this.state.preIconClass}`} type=\"cry\" />\n                    <Range min={1} max={100} onChange={this.onIconRangeProcess.bind(this)} value={this.state.valueIcon} />\n                    <Icon className={`myicon ${this.state.afterIconClass}`} type=\"smile\" />\n                </div>\n            </div>\n        );\n    }\n\n\n}\n\nReactDOM.render(<Demo />, mountNode);\n\n
.iconWrapper {\n  position: relative;\n  padding: 0px 40px;\n}\n\n.iconWrapper .myicon {\n  position: absolute;\n  top: -3px;\n  width: 16px;\n  height: 16px;\n  line-height: 1;\n  font-size: 16px;\n  color: #ccc;\n}\n\n.iconWrapper .myicon:first-child {\n  left: 0;\n}\n\n.iconWrapper .myicon:last-child {\n  right: 0;\n}\n\n.myicon.myicon-highlight {\n  color: #666;\n}
"} \ No newline at end of file diff --git a/compiled_docs/range/demo/fixedWidth.en-us.md b/compiled_docs/range/demo/fixedWidth.en-us.md new file mode 100644 index 0000000000..972fc6c485 --- /dev/null +++ b/compiled_docs/range/demo/fixedWidth.en-us.md @@ -0,0 +1 @@ +{"title":"fixedWidth","meta":{"title":"fixedWidth","description":"\n

It means slider is double, and defaultValue is a interval. The scope can not be changed, drag the selected area to change the position of the start and end slider.

\n","order":"0"},"codes":{"jsx":"import { Range } from '@alifd/next';\n\nconst style = {\n marginBottom: '15px'\n};\n\nconst styleX3 = {\n marginBottom: '45px'\n};\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: [10, 300]\n };\n\n }\n\n //Controlled. onChange will be triggered when startValue isn't equal to endValue after sliding\n onChange(value) {\n console.log('onChange value:', value);\n this.setState({value});\n }\n\n // This callback will be triggered when startValue and endValue aren't equal after mousedown/mousemove. You shouldn't call setState here.\n onProcess(value) {\n // this.setState({value});\n console.log('onProcess: ', value);\n }\n\n render() {\n return (\n
\n

fixedWidth basic

\n \n

fixedWidth basic with tooltipVisible

\n \n \n

fixedWidth with marks

\n \n \n

fixedWidth with 0.01 step

\n \n
\n

range 0 ~ 1024

\n \n
\n
\n );\n }\n\n}\n\nReactDOM.render(, mountNode);\n\n"},"body":"\n````jsx\nimport { Range } from '@alifd/next';\n\nconst style = {\n marginBottom: '15px'\n};\n\nconst styleX3 = {\n marginBottom: '45px'\n};\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: [10, 300]\n };\n\n }\n\n //Controlled. onChange will be triggered when startValue isn't equal to endValue after sliding\n onChange(value) {\n console.log('onChange value:', value);\n this.setState({value});\n }\n\n // This callback will be triggered when startValue and endValue aren't equal after mousedown/mousemove. You shouldn't call setState here.\n onProcess(value) {\n // this.setState({value});\n console.log('onProcess: ', value);\n }\n\n render() {\n return (\n
\n

fixedWidth basic

\n \n

fixedWidth basic with tooltipVisible

\n \n \n

fixedWidth with marks

\n \n \n

fixedWidth with 0.01 step

\n \n
\n

range 0 ~ 1024

\n \n
\n
\n );\n }\n\n}\n\nReactDOM.render(, mountNode);\n\n````","html":"
import { Range } from '@alifd/next';\n\nconst style = {\n    marginBottom: '15px'\n};\n\nconst styleX3 = {\n    marginBottom: '45px'\n};\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            value: [10, 300]\n        };\n\n    }\n\n    //Controlled. onChange will be triggered when startValue isn't equal to endValue after sliding\n    onChange(value) {\n        console.log('onChange value:', value);\n        this.setState({value});\n    }\n\n    // This callback will be triggered when startValue and endValue aren't equal after mousedown/mousemove. You shouldn't call setState here.\n    onProcess(value) {\n        // this.setState({value});\n        console.log('onProcess: ', value);\n    }\n\n    render() {\n        return (\n            <div style={{width: '400px', margin: '50px'}}>\n                <h4>fixedWidth basic</h4>\n                <Range fixedWidth defaultValue={[20, 40]} style={style} />\n                <h4>fixedWidth basic with tooltipVisible</h4>\n                <Range tooltipVisible fixedWidth defaultValue={[70, 90]} style={styleX3} />\n                <Range disabled tooltipVisible fixedWidth defaultValue={[70, 90]} style={style} />\n                <h4>fixedWidth with marks</h4>\n                <Range fixedWidth step={10} defaultValue={[20, 40]} scales={10} marks={10} style={styleX3} />\n                <Range fixedWidth step={2} defaultValue={[60, 80]} scales={[0, 100]} marks={[0, 30, 100]} style={style} marksPosition=\"below\" />\n                <h4>fixedWidth with 0.01 step</h4>\n                <Range fixedWidth defaultValue={[0.6, 0.7]} min={0.5} max={1} step={0.01}/>\n                <div style={{width: '400px', marginTop: '50px'}}>\n                    <p>range 0 ~ 1024</p>\n                    <Range fixedWidth value={this.state.value}\n                        onChange={this.onChange.bind(this)}\n                        onProcess={this.onProcess.bind(this)}\n                        min={0} max={1024} marks={[0, 1024]} />\n                </div>\n            </div>\n        );\n    }\n\n}\n\nReactDOM.render(<App />, mountNode);\n
"} \ No newline at end of file diff --git a/compiled_docs/range/demo/fixedWidth.md b/compiled_docs/range/demo/fixedWidth.md new file mode 100644 index 0000000000..8ae34dc303 --- /dev/null +++ b/compiled_docs/range/demo/fixedWidth.md @@ -0,0 +1 @@ +{"title":"固定宽度滑动","meta":{"title":"固定宽度滑动","description":"\n

默认双滑块(slider 为 double)，且指定 defaultValue为区间值下可用。范围不可被改变，拖动所选区域改变始末滑块位置。

\n","order":"0"},"codes":{"jsx":"import { Range } from '@alifd/next';\n\nconst style = {\n marginBottom: '15px'\n};\n\nconst styleX3 = {\n marginBottom: '45px'\n};\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: [10, 300]\n };\n\n }\n\n //Controlled. onChange will be triggered when startValue isn't equal to endValue after sliding\n onChange(value) {\n console.log('onChange value:', value);\n this.setState({value});\n }\n\n // This callback will be triggered when startValue and endValue aren't equal after mousedown/mousemove. You shouldn't call setState here.\n onProcess(value) {\n // this.setState({value});\n console.log('onProcess: ', value);\n }\n\n render() {\n return (\n
\n

fixedWidth basic

\n \n

fixedWidth basic with tooltipVisible

\n \n \n

fixedWidth with marks

\n \n \n

fixedWidth with 0.01 step

\n \n
\n

range 0 ~ 1024

\n \n
\n
\n );\n }\n\n}\n\nReactDOM.render(, mountNode);\n\n"},"body":"\n\n````jsx\nimport { Range } from '@alifd/next';\n\nconst style = {\n marginBottom: '15px'\n};\n\nconst styleX3 = {\n marginBottom: '45px'\n};\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: [10, 300]\n };\n\n }\n\n //Controlled. onChange will be triggered when startValue isn't equal to endValue after sliding\n onChange(value) {\n console.log('onChange value:', value);\n this.setState({value});\n }\n\n // This callback will be triggered when startValue and endValue aren't equal after mousedown/mousemove. You shouldn't call setState here.\n onProcess(value) {\n // this.setState({value});\n console.log('onProcess: ', value);\n }\n\n render() {\n return (\n
\n

fixedWidth basic

\n \n

fixedWidth basic with tooltipVisible

\n \n \n

fixedWidth with marks

\n \n \n

fixedWidth with 0.01 step

\n \n
\n

range 0 ~ 1024

\n \n
\n
\n );\n }\n\n}\n\nReactDOM.render(, mountNode);\n\n````","html":"
import { Range } from '@alifd/next';\n\nconst style = {\n    marginBottom: '15px'\n};\n\nconst styleX3 = {\n    marginBottom: '45px'\n};\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            value: [10, 300]\n        };\n\n    }\n\n    //Controlled. onChange will be triggered when startValue isn't equal to endValue after sliding\n    onChange(value) {\n        console.log('onChange value:', value);\n        this.setState({value});\n    }\n\n    // This callback will be triggered when startValue and endValue aren't equal after mousedown/mousemove. You shouldn't call setState here.\n    onProcess(value) {\n        // this.setState({value});\n        console.log('onProcess: ', value);\n    }\n\n    render() {\n        return (\n            <div style={{width: '400px', margin: '50px'}}>\n                <h4>fixedWidth basic</h4>\n                <Range fixedWidth defaultValue={[20, 40]} style={style} />\n                <h4>fixedWidth basic with tooltipVisible</h4>\n                <Range tooltipVisible fixedWidth defaultValue={[70, 90]} style={styleX3} />\n                <Range disabled tooltipVisible fixedWidth defaultValue={[70, 90]} style={style} />\n                <h4>fixedWidth with marks</h4>\n                <Range fixedWidth step={10} defaultValue={[20, 40]} scales={10} marks={10} style={styleX3} />\n                <Range fixedWidth step={2} defaultValue={[60, 80]} scales={[0, 100]} marks={[0, 30, 100]} style={style} marksPosition=\"below\" />\n                <h4>fixedWidth with 0.01 step</h4>\n                <Range fixedWidth defaultValue={[0.6, 0.7]} min={0.5} max={1} step={0.01}/>\n                <div style={{width: '400px', marginTop: '50px'}}>\n                    <p>range 0 ~ 1024</p>\n                    <Range fixedWidth value={this.state.value}\n                        onChange={this.onChange.bind(this)}\n                        onProcess={this.onProcess.bind(this)}\n                        min={0} max={1024} marks={[0, 1024]} />\n                </div>\n            </div>\n        );\n    }\n\n}\n\nReactDOM.render(<App />, mountNode);\n
"} \ No newline at end of file diff --git a/compiled_docs/range/demo/marks.en-us.md b/compiled_docs/range/demo/marks.en-us.md new file mode 100644 index 0000000000..87d23258cb --- /dev/null +++ b/compiled_docs/range/demo/marks.en-us.md @@ -0,0 +1 @@ +{"title":"Scale and Marks","meta":{"title":"Scale and Marks","description":"\n

Use scales and marks to set scales and marks

\n","order":"1"},"codes":{"jsx":"import { Range } from '@alifd/next';\n\nconst style = {\n marginBottom: '20px',\n marginTop: '20px'\n};\n\nReactDOM.render(
\n

With minimal and maximal value

\n \n \n \n

Below

\n \n \n \n

Equal division

\n \n \n \n

Free

\n \n \n \n
, mountNode);\n"},"body":"\n````jsx\nimport { Range } from '@alifd/next';\n\nconst style = {\n marginBottom: '20px',\n marginTop: '20px'\n};\n\nReactDOM.render(
\n

With minimal and maximal value

\n \n \n \n

Below

\n \n \n \n

Equal division

\n \n \n \n

Free

\n \n \n \n
, mountNode);\n````","html":"
import { Range } from '@alifd/next';\n\nconst style = {\n    marginBottom: '20px',\n    marginTop: '20px'\n};\n\nReactDOM.render(<div style={{width: '400px', margin: '50px'}}>\n        <p>With minimal and maximal value</p>\n        <Range defaultValue={0} marks={[0, 100]} style={style} />\n        <Range slider={'double'} defaultValue={[20, 40]} scales={[0, 100]} marks={[0, 100]} style={style} />\n        <Range defaultValue={30} style={style} />\n        <p>Below</p>\n        <Range defaultValue={0} marks={[0, 100]} style={style} marksPosition=\"below\" />\n        <Range slider={'double'} defaultValue={[20, 40]} scales={[0, 100]} marks={[0, 100]} style={style} marksPosition=\"below\" />\n        <Range defaultValue={30} scales={[0, 100]} marks={[0, 100]} style={style} marksPosition=\"below\" />\n        <p>Equal division</p>\n        <Range defaultValue={30} marks={5} style={style} />\n        <Range slider={'double'} defaultValue={[20, 40]} scales={10} marks={10} style={style} />\n        <Range disabled slider={'double'} defaultValue={[20, 40]} scales={10} marks={10} style={style} />\n        <p>Free</p>\n        <Range defaultValue={30} marks={[0, 26, 37, 100]} style={style} />\n        <Range slider={'double'} defaultValue={[20, 40]} marks={[0, 26, 37, 100]} style={style} hasTip={false}/>\n        <Range defaultValue={30} marks={{0: '0°C', 26: '26°C', 37: '37°C', 100: '100°C'}} style={style} />\n    </div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/range/demo/marks.md b/compiled_docs/range/demo/marks.md new file mode 100644 index 0000000000..7ac2812dc8 --- /dev/null +++ b/compiled_docs/range/demo/marks.md @@ -0,0 +1 @@ +{"title":"刻度及标识","meta":{"title":"刻度及标识","description":"\n

通过 scales 与 marks 属性设置刻度及标识。

\n","order":"1"},"codes":{"jsx":"import { Range } from '@alifd/next';\n\nconst style = {\n marginBottom: '20px',\n marginTop: '20px'\n};\n\nReactDOM.render(
\n

With minimal and maximal value

\n \n \n \n

Below

\n \n \n \n

Equal division

\n \n \n \n

Free

\n \n \n \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Range } from '@alifd/next';\n\nconst style = {\n marginBottom: '20px',\n marginTop: '20px'\n};\n\nReactDOM.render(
\n

With minimal and maximal value

\n \n \n \n

Below

\n \n \n \n

Equal division

\n \n \n \n

Free

\n \n \n \n
, mountNode);\n````","html":"
import { Range } from '@alifd/next';\n\nconst style = {\n    marginBottom: '20px',\n    marginTop: '20px'\n};\n\nReactDOM.render(<div style={{width: '400px', margin: '50px'}}>\n        <p>With minimal and maximal value</p>\n        <Range defaultValue={0} marks={[0, 100]} style={style} />\n        <Range slider={'double'} defaultValue={[20, 40]} scales={[0, 100]} marks={[0, 100]} style={style} />\n        <Range defaultValue={30} style={style} />\n        <p>Below</p>\n        <Range defaultValue={0} marks={[0, 100]} style={style} marksPosition=\"below\" />\n        <Range slider={'double'} defaultValue={[20, 40]} scales={[0, 100]} marks={[0, 100]} style={style} marksPosition=\"below\" />\n        <Range defaultValue={30} scales={[0, 100]} marks={[0, 100]} style={style} marksPosition=\"below\" />\n        <p>Equal division</p>\n        <Range defaultValue={30} marks={5} style={style} />\n        <Range slider={'double'} defaultValue={[20, 40]} scales={10} marks={10} style={style} />\n        <Range disabled slider={'double'} defaultValue={[20, 40]} scales={10} marks={10} style={style} />\n        <p>Free</p>\n        <Range defaultValue={30} marks={[0, 26, 37, 100]} style={style} />\n        <Range slider={'double'} defaultValue={[20, 40]} marks={[0, 26, 37, 100]} style={style} hasTip={false}/>\n        <Range defaultValue={30} marks={{0: '0°C', 26: '26°C', 37: '37°C', 100: '100°C'}} style={style} />\n    </div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/range/demo/range.en-us.md b/compiled_docs/range/demo/range.en-us.md new file mode 100644 index 0000000000..ea7ca9389c --- /dev/null +++ b/compiled_docs/range/demo/range.en-us.md @@ -0,0 +1 @@ +{"title":"Range","meta":{"title":"Range","description":"\n

Used with min(defaults to 0) and max(defaults to 100) to set the boundary and step to set the step.

\n","order":"2"},"codes":{"jsx":"import { Range } from '@alifd/next';\n\nconst style = {\n marginBottom: '40px',\n marginTop: '40px'\n};\nReactDOM.render(\n
\n

Range 0 ~ 1024

\n \n

Range 0 ~ 1024，step 128

\n \n
\n, mountNode);\n"},"body":"\n````jsx\nimport { Range } from '@alifd/next';\n\nconst style = {\n marginBottom: '40px',\n marginTop: '40px'\n};\nReactDOM.render(\n
\n

Range 0 ~ 1024

\n \n

Range 0 ~ 1024，step 128

\n \n
\n, mountNode);\n````","html":"
import { Range } from '@alifd/next';\n\nconst style = {\n    marginBottom: '40px',\n    marginTop: '40px'\n};\nReactDOM.render(\n    <div style={{width: '400px', margin: '50px'}}>\n        <p>Range 0 ~ 1024</p>\n        <Range defaultValue={128} min={0} max={1024} marks={[0, 1024]} style={style} />\n        <p>Range 0 ~ 1024，step 128</p>\n        <Range defaultValue={512} min={0} max={1024} step={128} marks={[0, 1024]}\n            style={style} />\n    </div>\n, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/range/demo/range.md b/compiled_docs/range/demo/range.md new file mode 100644 index 0000000000..5139b80820 --- /dev/null +++ b/compiled_docs/range/demo/range.md @@ -0,0 +1 @@ +{"title":"min,max,step","meta":{"title":"min,max,step","description":"\n

可以通过 min 与 max 设置范围边界。通过 step(被 max - min 整除) 设置移动的最小步频。min默认为0,max默认为100.

\n","order":"2"},"codes":{"jsx":"import { Range } from '@alifd/next';\n\nconst style = {\n marginBottom: '40px',\n marginTop: '40px'\n};\nReactDOM.render(\n
\n

Range 0 ~ 1024

\n \n

Range 0 ~ 1024，step 128

\n \n
\n, mountNode);\n"},"body":"\n\n````jsx\nimport { Range } from '@alifd/next';\n\nconst style = {\n marginBottom: '40px',\n marginTop: '40px'\n};\nReactDOM.render(\n
\n

Range 0 ~ 1024

\n \n

Range 0 ~ 1024，step 128

\n \n
\n, mountNode);\n````","html":"
import { Range } from '@alifd/next';\n\nconst style = {\n    marginBottom: '40px',\n    marginTop: '40px'\n};\nReactDOM.render(\n    <div style={{width: '400px', margin: '50px'}}>\n        <p>Range 0 ~ 1024</p>\n        <Range defaultValue={128} min={0} max={1024} marks={[0, 1024]} style={style} />\n        <p>Range 0 ~ 1024，step 128</p>\n        <Range defaultValue={512} min={0} max={1024} step={128} marks={[0, 1024]}\n            style={style} />\n    </div>\n, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/range/demo/reverse.en-us.md b/compiled_docs/range/demo/reverse.en-us.md new file mode 100644 index 0000000000..dcc527c00c --- /dev/null +++ b/compiled_docs/range/demo/reverse.en-us.md @@ -0,0 +1 @@ +{"title":"Reverse","meta":{"title":"Reverse","description":"\n

When reverse is set to true, the selected part is reversed.

\n","order":"7"},"codes":{"jsx":"import { Range } from '@alifd/next';\n\n\nconst style = {\n marginBottom: '15px'\n};\n\nReactDOM.render(\n
\n \n \n \n \n \n \n \n \n
, mountNode);\n"},"body":"\n````jsx\nimport { Range } from '@alifd/next';\n\n\nconst style = {\n marginBottom: '15px'\n};\n\nReactDOM.render(\n
\n \n \n \n \n \n \n \n \n
, mountNode);\n````","html":"
import { Range } from '@alifd/next';\n\n\nconst style = {\n    marginBottom: '15px'\n};\n\nReactDOM.render(\n    <div style={{width: '400px', margin: '50px'}}>\n        <Range defaultValue={30} style={style} hasTip={false} />\n        <Range defaultValue={30} style={style} reverse hasTip={false} />\n        <Range slider={'double'} defaultValue={[20, 40]} style={style} />\n        <Range slider={'double'} defaultValue={[20, 40]} style={style} reverse />\n        <Range defaultValue={30} disabled style={style} />\n        <Range defaultValue={30} disabled style={style} reverse />\n        <Range slider={'double'} defaultValue={[20, 40]} disabled style={style} />\n        <Range slider={'double'} defaultValue={[20, 40]} disabled style={style} reverse />\n    </div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/range/demo/reverse.md b/compiled_docs/range/demo/reverse.md new file mode 100644 index 0000000000..858d9e7f08 --- /dev/null +++ b/compiled_docs/range/demo/reverse.md @@ -0,0 +1 @@ +{"title":"选择态反转","meta":{"title":"选择态反转","description":"\n

设置reverse为true, 选中态会反转。

\n","order":"7"},"codes":{"jsx":"import { Range } from '@alifd/next';\n\n\nconst style = {\n marginBottom: '15px'\n};\n\nReactDOM.render(\n
\n \n \n \n \n \n \n \n \n
, mountNode);\n"},"body":"\n````jsx\nimport { Range } from '@alifd/next';\n\n\nconst style = {\n marginBottom: '15px'\n};\n\nReactDOM.render(\n
\n \n \n \n \n \n \n \n \n
, mountNode);\n````","html":"
import { Range } from '@alifd/next';\n\n\nconst style = {\n    marginBottom: '15px'\n};\n\nReactDOM.render(\n    <div style={{width: '400px', margin: '50px'}}>\n        <Range defaultValue={30} style={style} hasTip={false} />\n        <Range defaultValue={30} style={style} reverse hasTip={false} />\n        <Range slider={'double'} defaultValue={[20, 40]} style={style} />\n        <Range slider={'double'} defaultValue={[20, 40]} style={style} reverse />\n        <Range defaultValue={30} disabled style={style} />\n        <Range defaultValue={30} disabled style={style} reverse />\n        <Range slider={'double'} defaultValue={[20, 40]} disabled style={style} />\n        <Range slider={'double'} defaultValue={[20, 40]} disabled style={style} reverse />\n    </div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/range/demo/tipRender.en-us.md b/compiled_docs/range/demo/tipRender.en-us.md new file mode 100644 index 0000000000..aff3549c0c --- /dev/null +++ b/compiled_docs/range/demo/tipRender.en-us.md @@ -0,0 +1 @@ +{"title":"tipRender","meta":{"title":"tipRender","description":"\n

tipRender demo.

\n","order":"5"},"codes":{"jsx":"import { Range } from '@alifd/next';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: 128\n };\n\n }\n\n // This callback will be triggered when startValue and endValue aren't equal after moving.\n onChange(value) {\n console.log('onChange value:', value);\n }\n\n // This callback will be triggered when startValue and endValue aren't equal after mousedown/mousemove. You can call setState here when using a controlled component.\n onProcess(value) {\n console.log('onProcess');\n this.setState({value});\n }\n\n formatter(value) {\n return `$${value}`;\n }\n render() {\n return (\n
\n

Range 0 ~ 1024

\n
\n\n \n
\n
\n );\n }\n\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Range } from '@alifd/next';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: 128\n };\n\n }\n\n // This callback will be triggered when startValue and endValue aren't equal after moving.\n onChange(value) {\n console.log('onChange value:', value);\n }\n\n // This callback will be triggered when startValue and endValue aren't equal after mousedown/mousemove. You can call setState here when using a controlled component.\n onProcess(value) {\n console.log('onProcess');\n this.setState({value});\n }\n\n formatter(value) {\n return `$${value}`;\n }\n render() {\n return (\n
\n

Range 0 ~ 1024

\n
\n\n \n
\n
\n );\n }\n\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Range } from '@alifd/next';\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            value: 128\n        };\n\n    }\n\n    // This callback will be triggered when startValue and endValue aren't equal after moving.\n    onChange(value) {\n        console.log('onChange value:', value);\n    }\n\n    // This callback will be triggered when startValue and endValue aren't equal after mousedown/mousemove. You can call setState here when using a controlled component.\n    onProcess(value) {\n        console.log('onProcess');\n        this.setState({value});\n    }\n\n    formatter(value) {\n        return `$${value}`;\n    }\n    render() {\n        return (\n            <div style={{width: '400px', margin: '50px'}}>\n                <p>Range 0 ~ 1024</p>\n                <div style={{width: '400px', marginTop: '50px'}}>\n\n                    <Range defaultValue={256} tipRender={this.formatter.bind(this)} value={this.state.value} onChange={this.onChange.bind(this)}\n                        onProcess={this.onProcess.bind(this)}\n                        min={0} max={1024} marks={[0, 1024]} />\n                </div>\n            </div>\n        );\n    }\n\n}\n\nReactDOM.render(<App />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/range/demo/tipRender.md b/compiled_docs/range/demo/tipRender.md new file mode 100644 index 0000000000..5e4a1cd5b7 --- /dev/null +++ b/compiled_docs/range/demo/tipRender.md @@ -0,0 +1 @@ +{"title":"tipRender","meta":{"title":"tipRender","description":"\n

tipRender 示例

\n","order":"5"},"codes":{"jsx":"import { Range } from '@alifd/next';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: 128\n };\n\n }\n\n // This callback will be triggered when startValue and endValue aren't equal after moving.\n onChange(value) {\n console.log('onChange value:', value);\n }\n\n // This callback will be triggered when startValue and endValue aren't equal after mousedown/mousemove. You can call setState here when using a controlled component.\n onProcess(value) {\n console.log('onProcess');\n this.setState({value});\n }\n\n formatter(value) {\n return `$${value}`;\n }\n render() {\n return (\n
\n

Range 0 ~ 1024

\n
\n\n \n
\n
\n );\n }\n\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Range } from '@alifd/next';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: 128\n };\n\n }\n\n // This callback will be triggered when startValue and endValue aren't equal after moving.\n onChange(value) {\n console.log('onChange value:', value);\n }\n\n // This callback will be triggered when startValue and endValue aren't equal after mousedown/mousemove. You can call setState here when using a controlled component.\n onProcess(value) {\n console.log('onProcess');\n this.setState({value});\n }\n\n formatter(value) {\n return `$${value}`;\n }\n render() {\n return (\n
\n

Range 0 ~ 1024

\n
\n\n \n
\n
\n );\n }\n\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Range } from '@alifd/next';\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            value: 128\n        };\n\n    }\n\n    // This callback will be triggered when startValue and endValue aren't equal after moving.\n    onChange(value) {\n        console.log('onChange value:', value);\n    }\n\n    // This callback will be triggered when startValue and endValue aren't equal after mousedown/mousemove. You can call setState here when using a controlled component.\n    onProcess(value) {\n        console.log('onProcess');\n        this.setState({value});\n    }\n\n    formatter(value) {\n        return `$${value}`;\n    }\n    render() {\n        return (\n            <div style={{width: '400px', margin: '50px'}}>\n                <p>Range 0 ~ 1024</p>\n                <div style={{width: '400px', marginTop: '50px'}}>\n\n                    <Range defaultValue={256} tipRender={this.formatter.bind(this)} value={this.state.value} onChange={this.onChange.bind(this)}\n                        onProcess={this.onProcess.bind(this)}\n                        min={0} max={1024} marks={[0, 1024]} />\n                </div>\n            </div>\n        );\n    }\n\n}\n\nReactDOM.render(<App />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/range/index.en-us.md b/compiled_docs/range/index.en-us.md new file mode 100644 index 0000000000..20b5fe4931 --- /dev/null +++ b/compiled_docs/range/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Guide#

Range

\n

When To Use#

Range Component is used to select a value in a range by dragging slider. Normally, the minimal value of the range is placed on the leftmost, and the maximal is on the rightmost. Sometimes, icons can be placed at the ends to reflect the strength. Range Component is the best choice when setting volume, brightness or saturation that related to strength.

\n

Note#

    \n
  • onChange is often used combined with value for controlling, and it can only be triggered after sliding.
    • \n
  • On the other hand, onProcess is the wrong place to do the control, for it's triggered through the sliding process.
    • \n
\n

API#

","api":"

Range#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
slidernumber of sliders

option:
'single'
'double'		Enum'single'
minminimal valueNumber0
maxmaximal valueNumber100
stepstep of the range, which is positive integer and (max - min) can be divided by itNumber1
valuecurrent value. It's in the form of Number when slider is single otherwise [Number, Number]Number/Array<Number>-
defaultValuedefault value. It's in the form of Number when slider is single otherwise [Number, Number]Number/Array<Number>-
marksway to show the scale. (false means nothing, array means enum, number means equal division, and object means key as the mark with value as the value)Boolean/Number/Array<Number>/Objectfalse
marksPositionposition for the scale

option:
'above', 'below'		Enum'above'
disableddisabledBooleanfalse
onChangecallback triggered when value changes

signature:
Function(value: String/number) => void
parameter:
value: {String/number} null		Functionfunc.noop
onProcesscallback triggered when slider being dragged, and used only for special need

signature:
Function(value: String/number) => void
parameter:
value: {String/number} null		Functionfunc.noop
hasTipwhether to show tipBooleantrue
tipRendercustom tip content

signature:
Function(value: Number/String) => ReactNode
signature:
value: {Number/String} value
returns:
{ReactNode} content
Functionvalue => value
reversereverse the selected partBooleanfalse
purepure render or notBooleanfalse
fixedWidthdrag a line with fixed width. It considers slider as double, and defaultValue must be a interval.Booleanfalse
tooltipVisibletooltip always be visible or notBooleanfalse
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyBoardDescripiton
Right Arrowcontrol the slider to move to the right
Left Arrowcontrol the slider to move to the left
Tabswitch to other slider
\n"} \ No newline at end of file diff --git a/compiled_docs/range/index.md b/compiled_docs/range/index.md new file mode 100644 index 0000000000..2504330124 --- /dev/null +++ b/compiled_docs/range/index.md @@ -0,0 +1 @@ +{"meta":"

开发指南#

区间选择

\n

何时使用#

滑块控件(Sliders，简称滑块)可以让我们通过在连续或间断的区间内滑动锚点来选择一个合适的数值。区间最小值放在左边，对应的，最大值放在右边。滑块(Sliders)可以在滑动条的左右两端设定图标来反映数值的强度。这种交互特性使得它在设置诸如音量、亮度、色彩饱和度等需要反映强度等级的选项时成为一种极好的选择。

\n

使用注意#

    \n
  • onChange是和value进行配置做受控处理的。onChange在滑动过程中不会触发，滑动停止后会触发。
    • \n
  • onProcess不建议内部做setState 进行受控，因为会频繁触发，整个滑动过程中会一直触发。
    • \n
\n

API#

","api":"

Range#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
slider滑块个数

可选值:
'single'(单个)
'double'(两个)		Enum'single'
min最小值Number0
max最大值Number100
step步长，取值必须大于 0，并且可被 (max - min) 整除。Number1
value设置当前取值。当 slider 为 single 时，使用 Number，否则用 [Number, Number]Number/Array<Number>-
defaultValue设置初始取值。当 slider 为 single 时，使用 Number，否则用 [Number, Number]Number/Array<Number>-
marks刻度数值显示逻辑（false 代表不显示，array 枚举显示的值，number 代表按 number 平分，object 表示按 key 划分，value 值显示）Boolean/Number/Array<Number>/Objectfalse
marksPositionmarks显示在上方('above')or下方('below')

可选值:
'above', 'below'		Enum'above'
disabled值为 true 时，滑块为禁用状态Booleanfalse
onChange当 Range 的值发生改变后，会触发 onChange 事件，并把改变后的值作为参数传入, 如果设置了value, 要配合此函数做受控使用

签名:
Function(value: String/number) => void
参数:
value: {String/number} null		Functionfunc.noop
onProcess滑块拖动的时候触发的事件,不建议在这里setState, 一般情况下不需要用, 滑动时有特殊需求时使用

签名:
Function(value: String/number) => void
参数:
value: {String/number} null		Functionfunc.noop
hasTip是否显示 tipBooleantrue
tipRender自定义 tip 显示内容

签名:
Function(value: Number/String) => ReactNode
参数:
value: {Number/String} 值
返回值:
{ReactNode} 显示内容
Functionvalue => value
reverse选中态反转Booleanfalse
pure是否pure renderBooleanfalse
fixedWidth是否为拖动线段类型,默认slider为double, defaultValue必传且指定区间Booleanfalse
tooltipVisibletooltip是否默认展示Booleanfalse
rtl是否已rtl模式展示Booleanfalse
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
按键说明
Right Arrow控制滑块往右移动
Left Arrow控制滑块向左移动
Tab切换滑动条
\n"} \ No newline at end of file diff --git a/compiled_docs/rating/demo/accessibility.en-us.md b/compiled_docs/rating/demo/accessibility.en-us.md new file mode 100644 index 0000000000..7ad60ba25c --- /dev/null +++ b/compiled_docs/rating/demo/accessibility.en-us.md @@ -0,0 +1 @@ +{"title":"Accessibility","meta":{"title":"Accessibility","description":"\n

To Support accessibility, you should assign an id prop to Rating. Notice: Don't assign same id prop for more than one Rating.

\n","order":"5"},"codes":{"jsx":"import { Rating } from '@alifd/next';\n\nconst starMap = {\n 1: 'Bad',\n 2: 'OK',\n 3: 'Good',\n 4: 'Great',\n 5: 'Perfect'\n};\nReactDOM.render(
\n starMap[val]}\n onChange={val => console.log('change:', val)}\n onHoverChange={val => console.log('hover:', val)} />\n
, mountNode);\n"},"body":"\n````jsx\nimport { Rating } from '@alifd/next';\n\nconst starMap = {\n 1: 'Bad',\n 2: 'OK',\n 3: 'Good',\n 4: 'Great',\n 5: 'Perfect'\n};\nReactDOM.render(
\n starMap[val]}\n onChange={val => console.log('change:', val)}\n onHoverChange={val => console.log('hover:', val)} />\n
, mountNode);\n````","html":"
import { Rating } from '@alifd/next';\n\nconst starMap = {\n    1: 'Bad',\n    2: 'OK',\n    3: 'Good',\n    4: 'Great',\n    5: 'Perfect'\n};\nReactDOM.render(<div>\n    <Rating\n        id=\"rating-a11y-1\"\n        defaultValue={3}\n        readAs={(val) => starMap[val]}\n        onChange={val => console.log('change:', val)}\n        onHoverChange={val => console.log('hover:', val)} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/rating/demo/accessibility.md b/compiled_docs/rating/demo/accessibility.md new file mode 100644 index 0000000000..f0f56cb413 --- /dev/null +++ b/compiled_docs/rating/demo/accessibility.md @@ -0,0 +1 @@ +{"title":"无障碍","meta":{"title":"无障碍","description":"\n

组件内置了部分支持无障碍, 但是额外需要开发者手动事情才能完整支持无障碍：给 Rating 传入一个id，就可以支持语音提示当前选择的评分。注意：如果一个页面上有多个 Rating，id 属性一定不能相同。

\n","order":"5"},"codes":{"jsx":"import { Rating } from '@alifd/next';\n\nconst starMap = {\n 1: 'Bad',\n 2: 'OK',\n 3: 'Good',\n 4: 'Great',\n 5: 'Perfect'\n};\nReactDOM.render(
\n starMap[val]}\n onChange={val => console.log('change:', val)}\n onHoverChange={val => console.log('hover:', val)} />\n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Rating } from '@alifd/next';\n\nconst starMap = {\n 1: 'Bad',\n 2: 'OK',\n 3: 'Good',\n 4: 'Great',\n 5: 'Perfect'\n};\nReactDOM.render(
\n starMap[val]}\n onChange={val => console.log('change:', val)}\n onHoverChange={val => console.log('hover:', val)} />\n
, mountNode);\n````","html":"
import { Rating } from '@alifd/next';\n\nconst starMap = {\n    1: 'Bad',\n    2: 'OK',\n    3: 'Good',\n    4: 'Great',\n    5: 'Perfect'\n};\nReactDOM.render(<div>\n    <Rating\n        id=\"rating-a11y-1\"\n        defaultValue={3}\n        readAs={(val) => starMap[val]}\n        onChange={val => console.log('change:', val)}\n        onHoverChange={val => console.log('hover:', val)} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/rating/demo/basic.en-us.md b/compiled_docs/rating/demo/basic.en-us.md new file mode 100644 index 0000000000..ddf7f219e5 --- /dev/null +++ b/compiled_docs/rating/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

Basic usage.

\n","order":"0"},"codes":{"jsx":"import { Rating } from '@alifd/next';\n\nReactDOM.render(
\n console.log('change:', val)} onHoverChange={val => console.log('hover:', val)} />\n
, mountNode);\n"},"body":"\n````jsx\nimport { Rating } from '@alifd/next';\n\nReactDOM.render(
\n console.log('change:', val)} onHoverChange={val => console.log('hover:', val)} />\n
, mountNode);\n````","html":"
import { Rating } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Rating defaultValue={3.2} onChange={val => console.log('change:', val)} onHoverChange={val => console.log('hover:', val)} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/rating/demo/basic.md b/compiled_docs/rating/demo/basic.md new file mode 100644 index 0000000000..4448a4fad1 --- /dev/null +++ b/compiled_docs/rating/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

最简单的用法。

\n","order":"0"},"codes":{"jsx":"import { Rating } from '@alifd/next';\n\nReactDOM.render(
\n console.log('change:', val)} onHoverChange={val => console.log('hover:', val)} />\n
, mountNode);\n"},"body":"\n\n\n````jsx\nimport { Rating } from '@alifd/next';\n\nReactDOM.render(
\n console.log('change:', val)} onHoverChange={val => console.log('hover:', val)} />\n
, mountNode);\n````","html":"
import { Rating } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Rating defaultValue={3.2} onChange={val => console.log('change:', val)} onHoverChange={val => console.log('hover:', val)} />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/rating/demo/disabled.en-us.md b/compiled_docs/rating/demo/disabled.en-us.md new file mode 100644 index 0000000000..670fbdc44c --- /dev/null +++ b/compiled_docs/rating/demo/disabled.en-us.md @@ -0,0 +1 @@ +{"title":"Read-only Mode","meta":{"title":"Read-only Mode","description":"\n

Rating component can only display score when you set disabled attribute.

\n","order":"4"},"codes":{"jsx":"import { Rating } from '@alifd/next';\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Rating } from '@alifd/next';\n\nReactDOM.render(, mountNode);\n````","html":"
import { Rating } from '@alifd/next';\n\nReactDOM.render(<Rating defaultValue={3.2} disabled />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/rating/demo/disabled.md b/compiled_docs/rating/demo/disabled.md new file mode 100644 index 0000000000..97dfa1687a --- /dev/null +++ b/compiled_docs/rating/demo/disabled.md @@ -0,0 +1 @@ +{"title":"只读模式","meta":{"title":"只读模式","description":"\n

设置 disabled 属性后，评分组件仅展示模式，不可选择。

\n","order":"4"},"codes":{"jsx":"import { Rating } from '@alifd/next';\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Rating } from '@alifd/next';\n\nReactDOM.render(, mountNode);\n````","html":"
import { Rating } from '@alifd/next';\n\nReactDOM.render(<Rating defaultValue={3.2} disabled />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/rating/demo/grade.en-us.md b/compiled_docs/rating/demo/grade.en-us.md new file mode 100644 index 0000000000..c349521286 --- /dev/null +++ b/compiled_docs/rating/demo/grade.en-us.md @@ -0,0 +1 @@ +{"title":"Grade Prompt","meta":{"title":"Grade Prompt","description":"\n

Rating component display grade tips when you set showGrade attribute.

\n","order":"5"},"codes":{"jsx":"import { Rating } from '@alifd/next';\n\nconst starMap = {\n 1: 'Bad',\n 2: 'OK',\n 3: 'Good',\n 4: 'Great',\n 5: 'Perfect'\n};\n\nReactDOM.render(\n starMap[val]}\n />, mountNode);\n"},"body":"\n````jsx\nimport { Rating } from '@alifd/next';\n\nconst starMap = {\n 1: 'Bad',\n 2: 'OK',\n 3: 'Good',\n 4: 'Great',\n 5: 'Perfect'\n};\n\nReactDOM.render(\n starMap[val]}\n />, mountNode);\n````","html":"
import { Rating } from '@alifd/next';\n\nconst starMap = {\n    1: 'Bad',\n    2: 'OK',\n    3: 'Good',\n    4: 'Great',\n    5: 'Perfect'\n};\n\nReactDOM.render(\n    <Rating\n        defaultValue={2}\n        showGrade\n        readAs={(val) => starMap[val]}\n    />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/rating/demo/grade.md b/compiled_docs/rating/demo/grade.md new file mode 100644 index 0000000000..255647de92 --- /dev/null +++ b/compiled_docs/rating/demo/grade.md @@ -0,0 +1 @@ +{"title":"等级提示","meta":{"title":"等级提示","description":"\n

添加 showGrade 属性，使评分组件具有等级提示信息。

\n","order":"5"},"codes":{"jsx":"import { Rating } from '@alifd/next';\n\nconst starMap = {\n 1: 'Bad',\n 2: 'OK',\n 3: 'Good',\n 4: 'Great',\n 5: 'Perfect'\n};\n\nReactDOM.render(\n starMap[val]}\n />, mountNode);\n"},"body":"\n\n````jsx\nimport { Rating } from '@alifd/next';\n\nconst starMap = {\n 1: 'Bad',\n 2: 'OK',\n 3: 'Good',\n 4: 'Great',\n 5: 'Perfect'\n};\n\nReactDOM.render(\n starMap[val]}\n />, mountNode);\n````","html":"
import { Rating } from '@alifd/next';\n\nconst starMap = {\n    1: 'Bad',\n    2: 'OK',\n    3: 'Good',\n    4: 'Great',\n    5: 'Perfect'\n};\n\nReactDOM.render(\n    <Rating\n        defaultValue={2}\n        showGrade\n        readAs={(val) => starMap[val]}\n    />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/rating/demo/half.en-us.md b/compiled_docs/rating/demo/half.en-us.md new file mode 100644 index 0000000000..91004301b6 --- /dev/null +++ b/compiled_docs/rating/demo/half.en-us.md @@ -0,0 +1 @@ +{"title":"Half-star Rating","meta":{"title":"Half-star Rating","description":"\n

Rating component only support integer score in default situation, bu you can set allowHalf attribute to support half star.

\n","order":"2"},"codes":{"jsx":"import { Rating } from '@alifd/next';\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Rating } from '@alifd/next';\n\nReactDOM.render(, mountNode);\n````","html":"
import { Rating } from '@alifd/next';\n\nReactDOM.render(<Rating defaultValue={3.2} allowHalf />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/rating/demo/half.md b/compiled_docs/rating/demo/half.md new file mode 100644 index 0000000000..cd7d99f406 --- /dev/null +++ b/compiled_docs/rating/demo/half.md @@ -0,0 +1 @@ +{"title":"半星评分","meta":{"title":"半星评分","description":"\n

默认情况下评分组件只支持整数评分，通过开启 allowHalf 属性可以支持半星评分。

\n","order":"2"},"codes":{"jsx":"import { Rating } from '@alifd/next';\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Rating } from '@alifd/next';\n\nReactDOM.render(, mountNode);\n````","html":"
import { Rating } from '@alifd/next';\n\nReactDOM.render(<Rating defaultValue={3.2} allowHalf />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/rating/demo/size.en-us.md b/compiled_docs/rating/demo/size.en-us.md new file mode 100644 index 0000000000..4128544be8 --- /dev/null +++ b/compiled_docs/rating/demo/size.en-us.md @@ -0,0 +1 @@ +{"title":"Size","meta":{"title":"Size","description":"\n

You can control the size of rating component by size attribute, and there are three options: small, medium, large, the default value is medium.

\n","order":"1"},"codes":{"jsx":"import { Rating } from '@alifd/next';\n\nReactDOM.render(
\n \n
\n
\n \n
\n
\n \n
, mountNode);\n"},"body":"\n````jsx\nimport { Rating } from '@alifd/next';\n\nReactDOM.render(
\n \n
\n
\n \n
\n
\n \n
, mountNode);\n````","html":"
import { Rating } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Rating defaultValue={3.2} size=\"small\" />\n    <br/>\n    <br/>\n    <Rating defaultValue={3.2} />\n    <br/>\n    <br/>\n    <Rating defaultValue={3.2} size=\"large\" />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/rating/demo/size.md b/compiled_docs/rating/demo/size.md new file mode 100644 index 0000000000..dc043b9fb6 --- /dev/null +++ b/compiled_docs/rating/demo/size.md @@ -0,0 +1 @@ +{"title":"尺寸","meta":{"title":"尺寸","description":"\n

通过 size 属性可以控制评分组件的大小，支持三种尺寸 small, medium, large。\n默认尺寸为 medium 。

\n","order":"1"},"codes":{"jsx":"import { Rating } from '@alifd/next';\n\nReactDOM.render(
\n \n
\n
\n \n
\n
\n \n
, mountNode);\n"},"body":"\n\n\n````jsx\nimport { Rating } from '@alifd/next';\n\nReactDOM.render(
\n \n
\n
\n \n
\n
\n \n
, mountNode);\n````","html":"
import { Rating } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Rating defaultValue={3.2} size=\"small\" />\n    <br/>\n    <br/>\n    <Rating defaultValue={3.2} />\n    <br/>\n    <br/>\n    <Rating defaultValue={3.2} size=\"large\" />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/rating/index.en-us.md b/compiled_docs/rating/index.en-us.md new file mode 100644 index 0000000000..cc3ab0aeb6 --- /dev/null +++ b/compiled_docs/rating/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Guide#

Rating component is usually used for customer feedback.

\n

API#

","api":"

Rating#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
defaultValuedefault valueNumber0
sizesize

options:
'small', 'medium', 'large'		Enum'medium'
valuevalueNumber-
countfull mark of ratingNumber5
showGradedisplay grade or notBooleanfalse
allowHalfallow half start or notBooleanfalse
onChangecallback function on click star

signatures:
Function(value: String) => void
params:
value: {String} score		Functionfunc.noop
onHoverChangecallback function on hover star

signatures:
Function(value: String) => void
params:
value: {String} score		Functionfunc.noop
disableddisabled rate or notBooleanfalse
readAscustom display of grade

signatures:
Function() => void		Functionval => val
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyBoardDescripiton
Up Arrowincrease star rating
Down Arrowdecrease star rating
Right Arrowincrease star rating
Left Arrowdecrease star rating
\n"} \ No newline at end of file diff --git a/compiled_docs/rating/index.md b/compiled_docs/rating/index.md new file mode 100644 index 0000000000..32f19e19b5 --- /dev/null +++ b/compiled_docs/rating/index.md @@ -0,0 +1 @@ +{"meta":"

Guide#

评分组件通常用于用户反馈场景。

\n

API#

","api":"

Rating#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
defaultValue默认值Number0
size尺寸

可选值:
'small', 'medium', 'large'		Enum'medium'
value值Number-
count评分的总数Number5
showGrade是否显示 gradeBooleanfalse
allowHalf是否允许半星评分Booleanfalse
onChange用户点击评分时触发的回调

签名:
Function(value: String) => void
参数:
value: {String} 评分值		Functionfunc.noop
onHoverChange用户hover评分时触发的回调

签名:
Function(value: String) => void
参数:
value: {String} 评分值		Functionfunc.noop
disabled是否禁用Booleanfalse
readAs评分文案生成方法，传入id支持无障碍时，读屏软件可读

签名:
Function() => void		Functionval => val
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
按键说明
Up Arrow增加星级评分
Down Arrow减少星级评分
Right Arrow增加星级评分
Left Arrow减少星级评分
\n"} \ No newline at end of file diff --git a/compiled_docs/search/demo/accessibility.en-us.md b/compiled_docs/search/demo/accessibility.en-us.md new file mode 100644 index 0000000000..d996adda56 --- /dev/null +++ b/compiled_docs/search/demo/accessibility.en-us.md @@ -0,0 +1 @@ +{"title":"Accessibility","meta":{"title":"Accessibility","description":"\n

Press the Enter key to call the onSearch event handle,Please refer to ARIA and KeyBoard.

\n","order":"6"},"codes":{"jsx":"import { Search } from '@alifd/next';\n\nReactDOM.render(
\n console.log(v)} searchText={search} style={{width: '400px'}}/>\n
, mountNode);\n"},"body":"\n````jsx\nimport { Search } from '@alifd/next';\n\nReactDOM.render(
\n console.log(v)} searchText={search} style={{width: '400px'}}/>\n
, mountNode);\n````","html":"
import { Search } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Search key=\"3\" placeholder=\"Please enter the search content\" onSearch={v => console.log(v)} searchText={<span>search</span>} style={{width: '400px'}}/>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/search/demo/accessibility.md b/compiled_docs/search/demo/accessibility.md new file mode 100644 index 0000000000..adaa5e98d9 --- /dev/null +++ b/compiled_docs/search/demo/accessibility.md @@ -0,0 +1 @@ +{"title":"无障碍","meta":{"title":"无障碍","description":"\n

按下Enter键调用onSearch事件去处理,请参考ARIA and KeyBoard。

\n","order":"6"},"codes":{"jsx":"import { Search } from '@alifd/next';\n\nReactDOM.render(
\n console.log(v)} searchText={search} style={{width: '400px'}}/>\n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Search } from '@alifd/next';\n\nReactDOM.render(
\n console.log(v)} searchText={search} style={{width: '400px'}}/>\n
, mountNode);\n````","html":"
import { Search } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Search key=\"3\" placeholder=\"Please enter the search content\" onSearch={v => console.log(v)} searchText={<span>search</span>} style={{width: '400px'}}/>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/search/demo/base.en-us.md b/compiled_docs/search/demo/base.en-us.md new file mode 100644 index 0000000000..d6acb438e5 --- /dev/null +++ b/compiled_docs/search/demo/base.en-us.md @@ -0,0 +1 @@ +{"title":"Basic usage","meta":{"title":"Basic usage","description":"\n","order":"0"},"codes":{"jsx":"import { Search } from '@alifd/next';\n\n\nfunction onSearch(v) {\n console.log(v);\n}\nconst App = () => [\n

simple

,\n ,\n

default

,\n ,\n

custom text

,\n ,\n

custom text widthout icon

,\n search} onSearch={onSearch} style={{width: '400px'}}/>\n];\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Search } from '@alifd/next';\n\n\nfunction onSearch(v) {\n console.log(v);\n}\nconst App = () => [\n

simple

,\n ,\n

default

,\n ,\n

custom text

,\n ,\n

custom text widthout icon

,\n search} onSearch={onSearch} style={{width: '400px'}}/>\n];\n\nReactDOM.render(, mountNode);\n````","html":"
import { Search } from '@alifd/next';\n\n\nfunction onSearch(v) {\n    console.log(v);\n}\nconst App = () => [\n    <p key=\"1\">simple</p>,\n    <Search key=\"2\" shape=\"simple\" onSearch={onSearch} style={{width: '400px'}}/>,\n    <p key=\"3\">default</p>,\n    <Search key=\"4\" onSearch={onSearch} style={{width: '400px'}}/>,\n    <p key=\"5\">custom text </p>,\n    <Search key=\"6\" searchText=\"search\" onSearch={onSearch} style={{width: '400px'}}/>,\n    <p key=\"7\">custom text widthout icon</p>,\n    <Search key=\"8\" hasIcon={false} searchText={<span style={{color: 'blue'}}>search</span>} onSearch={onSearch} style={{width: '400px'}}/>\n];\n\nReactDOM.render(<App />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/search/demo/base.md b/compiled_docs/search/demo/base.md new file mode 100644 index 0000000000..0379170e6a --- /dev/null +++ b/compiled_docs/search/demo/base.md @@ -0,0 +1 @@ +{"title":"基础用法","meta":{"title":"基础用法","description":"\n","order":"0"},"codes":{"jsx":"import { Search } from '@alifd/next';\n\n\nfunction onSearch(v) {\n console.log(v);\n}\nconst App = () => [\n

simple

,\n ,\n

default

,\n ,\n

custom text

,\n ,\n

custom text widthout icon

,\n search} onSearch={onSearch} style={{width: '400px'}}/>\n];\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Search } from '@alifd/next';\n\n\nfunction onSearch(v) {\n console.log(v);\n}\nconst App = () => [\n

simple

,\n ,\n

default

,\n ,\n

custom text

,\n ,\n

custom text widthout icon

,\n search} onSearch={onSearch} style={{width: '400px'}}/>\n];\n\nReactDOM.render(, mountNode);\n````","html":"
import { Search } from '@alifd/next';\n\n\nfunction onSearch(v) {\n    console.log(v);\n}\nconst App = () => [\n    <p key=\"1\">simple</p>,\n    <Search key=\"2\" shape=\"simple\" onSearch={onSearch} style={{width: '400px'}}/>,\n    <p key=\"3\">default</p>,\n    <Search key=\"4\" onSearch={onSearch} style={{width: '400px'}}/>,\n    <p key=\"5\">custom text </p>,\n    <Search key=\"6\" searchText=\"search\" onSearch={onSearch} style={{width: '400px'}}/>,\n    <p key=\"7\">custom text widthout icon</p>,\n    <Search key=\"8\" hasIcon={false} searchText={<span style={{color: 'blue'}}>search</span>} onSearch={onSearch} style={{width: '400px'}}/>\n];\n\nReactDOM.render(<App />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/search/demo/combobox.en-us.md b/compiled_docs/search/demo/combobox.en-us.md new file mode 100644 index 0000000000..9a2c995884 --- /dev/null +++ b/compiled_docs/search/demo/combobox.en-us.md @@ -0,0 +1 @@ +{"title":"Sugguest Box","meta":{"title":"Sugguest Box","description":"\n","order":"4"},"codes":{"jsx":"import { Search } from '@alifd/next';\n\nconst dataSource = [{\n label: 'Recent',\n value: 'Recent'\n}, {\n label: 'dress',\n value: 'dress'\n}, {\n label: 'sunglasses',\n value: 'sunglasses'\n}, {\n label: 't-shirt',\n value: 't-shirt'\n}];\n\nclass App extends React.Component {\n onSearch(value, filterValue) {\n console.log(value, filterValue);\n }\n\n onChange(value) {\n this.setState({\n value: value\n });\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Search } from '@alifd/next';\n\nconst dataSource = [{\n label: 'Recent',\n value: 'Recent'\n}, {\n label: 'dress',\n value: 'dress'\n}, {\n label: 'sunglasses',\n value: 'sunglasses'\n}, {\n label: 't-shirt',\n value: 't-shirt'\n}];\n\nclass App extends React.Component {\n onSearch(value, filterValue) {\n console.log(value, filterValue);\n }\n\n onChange(value) {\n this.setState({\n value: value\n });\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Search } from '@alifd/next';\n\nconst dataSource = [{\n    label: 'Recent',\n    value: 'Recent'\n}, {\n    label: 'dress',\n    value: 'dress'\n}, {\n    label: 'sunglasses',\n    value: 'sunglasses'\n}, {\n    label: 't-shirt',\n    value: 't-shirt'\n}];\n\nclass App extends React.Component {\n    onSearch(value, filterValue) {\n        console.log(value, filterValue);\n    }\n\n    onChange(value) {\n        this.setState({\n            value: value\n        });\n    }\n\n    render() {\n        return (\n            <Search dataSource={dataSource} onChange={this.onChange.bind(this)}\n                onSearch={this.onSearch.bind(this)}/>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/search/demo/combobox.md b/compiled_docs/search/demo/combobox.md new file mode 100644 index 0000000000..5effca4a1a --- /dev/null +++ b/compiled_docs/search/demo/combobox.md @@ -0,0 +1 @@ +{"title":"联想","meta":{"title":"联想","description":"\n","order":"4"},"codes":{"jsx":"import { Search } from '@alifd/next';\n\nconst dataSource = [{\n label: 'Recent',\n value: 'Recent'\n}, {\n label: 'dress',\n value: 'dress'\n}, {\n label: 'sunglasses',\n value: 'sunglasses'\n}, {\n label: 't-shirt',\n value: 't-shirt'\n}];\n\nclass App extends React.Component {\n onSearch(value, filterValue) {\n console.log(value, filterValue);\n }\n\n onChange(value) {\n this.setState({\n value: value\n });\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Search } from '@alifd/next';\n\nconst dataSource = [{\n label: 'Recent',\n value: 'Recent'\n}, {\n label: 'dress',\n value: 'dress'\n}, {\n label: 'sunglasses',\n value: 'sunglasses'\n}, {\n label: 't-shirt',\n value: 't-shirt'\n}];\n\nclass App extends React.Component {\n onSearch(value, filterValue) {\n console.log(value, filterValue);\n }\n\n onChange(value) {\n this.setState({\n value: value\n });\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Search } from '@alifd/next';\n\nconst dataSource = [{\n    label: 'Recent',\n    value: 'Recent'\n}, {\n    label: 'dress',\n    value: 'dress'\n}, {\n    label: 'sunglasses',\n    value: 'sunglasses'\n}, {\n    label: 't-shirt',\n    value: 't-shirt'\n}];\n\nclass App extends React.Component {\n    onSearch(value, filterValue) {\n        console.log(value, filterValue);\n    }\n\n    onChange(value) {\n        this.setState({\n            value: value\n        });\n    }\n\n    render() {\n        return (\n            <Search dataSource={dataSource} onChange={this.onChange.bind(this)}\n                onSearch={this.onSearch.bind(this)}/>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/search/demo/custom.en-us.md b/compiled_docs/search/demo/custom.en-us.md new file mode 100644 index 0000000000..96bba96f09 --- /dev/null +++ b/compiled_docs/search/demo/custom.en-us.md @@ -0,0 +1 @@ +{"title":"Custom Dropdown","meta":{"title":"Custom Dropdown","description":"\n

custom dropdown content

\n","order":"5"},"codes":{"jsx":"import { Search, Menu, Button } from '@alifd/next';\n\nconst menuData = [\n {\n label: 'Option 1',\n value: 'Option 1 Value',\n index: '1'\n }, {\n label: 'Option 2',\n value: 'Option 2 Value',\n index: '2'\n }, {\n label: 'Option 3',\n value: 'Option 3 Value',\n index: '3'\n }, {\n label: 'Option 4',\n value: 'Option 4 Value',\n index: '4'\n }\n];\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n visible: false,\n value: '111222',\n menuData: menuData\n };\n }\n\n renderMenu() {\n const menuData = this.state.menuData;\n\n return (\n \n {menuData.map((item) => {\n return (\n {item.label}\n \n );\n })}\n \n );\n }\n\n onSearch(value) {\n console.log(value);\n }\n\n onChange(value) {\n this.setState({\n visible: value.length > 0,\n value: value\n });\n }\n\n onSelect(selectedKeys) {\n this.setState({\n visible: false,\n value: selectedKeys[0]\n });\n }\n\n onDelete(index, e) {\n e.stopPropagation();\n\n const menuData = this.state.menuData;\n\n const menuDataNew = [];\n\n menuData.forEach(function (item) {\n if (item.index !== index) {\n menuDataNew.push(item);\n }\n });\n\n this.setState({\n menuData: menuDataNew\n });\n }\n\n onFocus() {\n this.setState({\n visible: true\n });\n }\n\n render() {\n const {visible, value} = this.state;\n\n return (
\n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n","css":"\n.diy-menu{\n /*width: 275px*/;\n}\n\n.diy-menu .next-menu-item a{\n display:none;\n float: right;\n cursor: pointer;\n}\n.diy-menu .next-menu-item:hover a{\n display:inline-block;\n}\n.diy-menu .diy-menu-button {\n float: right;\n}\n.diy-menu[dir=rtl] .diy-menu-button {\n float: left;\n}\n"},"body":"\n````jsx\nimport { Search, Menu, Button } from '@alifd/next';\n\nconst menuData = [\n {\n label: 'Option 1',\n value: 'Option 1 Value',\n index: '1'\n }, {\n label: 'Option 2',\n value: 'Option 2 Value',\n index: '2'\n }, {\n label: 'Option 3',\n value: 'Option 3 Value',\n index: '3'\n }, {\n label: 'Option 4',\n value: 'Option 4 Value',\n index: '4'\n }\n];\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n visible: false,\n value: '111222',\n menuData: menuData\n };\n }\n\n renderMenu() {\n const menuData = this.state.menuData;\n\n return (\n \n {menuData.map((item) => {\n return (\n {item.label}\n \n );\n })}\n \n );\n }\n\n onSearch(value) {\n console.log(value);\n }\n\n onChange(value) {\n this.setState({\n visible: value.length > 0,\n value: value\n });\n }\n\n onSelect(selectedKeys) {\n this.setState({\n visible: false,\n value: selectedKeys[0]\n });\n }\n\n onDelete(index, e) {\n e.stopPropagation();\n\n const menuData = this.state.menuData;\n\n const menuDataNew = [];\n\n menuData.forEach(function (item) {\n if (item.index !== index) {\n menuDataNew.push(item);\n }\n });\n\n this.setState({\n menuData: menuDataNew\n });\n }\n\n onFocus() {\n this.setState({\n visible: true\n });\n }\n\n render() {\n const {visible, value} = this.state;\n\n return (
\n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n\n````css\n\n.diy-menu{\n /*width: 275px*/;\n}\n\n.diy-menu .next-menu-item a{\n display:none;\n float: right;\n cursor: pointer;\n}\n.diy-menu .next-menu-item:hover a{\n display:inline-block;\n}\n.diy-menu .diy-menu-button {\n float: right;\n}\n.diy-menu[dir=rtl] .diy-menu-button {\n float: left;\n}\n````","html":"
import { Search, Menu, Button } from '@alifd/next';\n\nconst menuData = [\n    {\n        label: 'Option 1',\n        value: 'Option 1 Value',\n        index: '1'\n    }, {\n        label: 'Option 2',\n        value: 'Option 2 Value',\n        index: '2'\n    }, {\n        label: 'Option 3',\n        value: 'Option 3 Value',\n        index: '3'\n    }, {\n        label: 'Option 4',\n        value: 'Option 4 Value',\n        index: '4'\n    }\n];\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            visible: false,\n            value: '111222',\n            menuData: menuData\n        };\n    }\n\n    renderMenu() {\n        const menuData = this.state.menuData;\n\n        return (<Menu onSelect={this.onSelect.bind(this)} rtl className=\"diy-menu\" selectMode=\"single\">\n            <Menu.Group label=\"Recent\" key=\"xxx\">\n                {menuData.map((item) => {\n                    return (<Menu.Item key={item.value}>\n                        {item.label}\n                        <Button className=\"diy-menu-button\" onClick={this.onDelete.bind(this, item.index)} text>Delete</Button>\n                    </Menu.Item>);\n                })}\n            </Menu.Group>\n        </Menu>);\n    }\n\n    onSearch(value) {\n        console.log(value);\n    }\n\n    onChange(value) {\n        this.setState({\n            visible: value.length > 0,\n            value: value\n        });\n    }\n\n    onSelect(selectedKeys) {\n        this.setState({\n            visible: false,\n            value: selectedKeys[0]\n        });\n    }\n\n    onDelete(index, e) {\n        e.stopPropagation();\n\n        const menuData = this.state.menuData;\n\n        const menuDataNew = [];\n\n        menuData.forEach(function (item) {\n            if (item.index !== index) {\n                menuDataNew.push(item);\n            }\n        });\n\n        this.setState({\n            menuData: menuDataNew\n        });\n    }\n\n    onFocus() {\n        this.setState({\n            visible: true\n        });\n    }\n\n    render() {\n        const {visible, value} = this.state;\n\n        return (<div style={{width: 700}}>\n            <Search\n                popupContent={this.renderMenu()}\n                visible={visible}\n                value={value}\n                onSearch={this.onSearch.bind(this)}\n                onChange={this.onChange.bind(this)}\n                onFocus={this.onFocus.bind(this)}\n            />\n        </div>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
\n.diy-menu{\n    /*width: 275px*/;\n}\n\n.diy-menu .next-menu-item a{\n    display:none;\n    float: right;\n    cursor: pointer;\n}\n.diy-menu .next-menu-item:hover a{\n    display:inline-block;\n}\n.diy-menu .diy-menu-button {\n    float: right;\n}\n.diy-menu[dir=rtl] .diy-menu-button {\n    float: left;\n}
"} \ No newline at end of file diff --git a/compiled_docs/search/demo/custom.md b/compiled_docs/search/demo/custom.md new file mode 100644 index 0000000000..50006092ce --- /dev/null +++ b/compiled_docs/search/demo/custom.md @@ -0,0 +1 @@ +{"title":"自定义弹层","meta":{"title":"自定义弹层","description":"\n

自定义下拉框内容。

\n","order":"5"},"codes":{"jsx":"import { Search, Menu, Button } from '@alifd/next';\n\nconst menuData = [\n {\n label: 'Option 1',\n value: 'Option 1 Value',\n index: '1'\n }, {\n label: 'Option 2',\n value: 'Option 2 Value',\n index: '2'\n }, {\n label: 'Option 3',\n value: 'Option 3 Value',\n index: '3'\n }, {\n label: 'Option 4',\n value: 'Option 4 Value',\n index: '4'\n }\n];\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n visible: false,\n value: '111222',\n menuData: menuData\n };\n }\n\n renderMenu() {\n const menuData = this.state.menuData;\n\n return (\n \n {menuData.map((item) => {\n return (\n {item.label}\n \n );\n })}\n \n );\n }\n\n onSearch(value) {\n console.log(value);\n }\n\n onChange(value) {\n this.setState({\n visible: value.length > 0,\n value: value\n });\n }\n\n onSelect(selectedKeys) {\n this.setState({\n visible: false,\n value: selectedKeys[0]\n });\n }\n\n onDelete(index, e) {\n e.stopPropagation();\n\n const menuData = this.state.menuData;\n\n const menuDataNew = [];\n\n menuData.forEach(function (item) {\n if (item.index !== index) {\n menuDataNew.push(item);\n }\n });\n\n this.setState({\n menuData: menuDataNew\n });\n }\n\n onFocus() {\n this.setState({\n visible: true\n });\n }\n\n render() {\n const {visible, value} = this.state;\n\n return (
\n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n","css":"\n.diy-menu{\n /*width: 275px*/;\n}\n\n.diy-menu .next-menu-item a{\n display:none;\n float: right;\n cursor: pointer;\n}\n.diy-menu .next-menu-item:hover a{\n display:inline-block;\n}\n.diy-menu .diy-menu-button {\n float: right;\n}\n.diy-menu[dir=rtl] .diy-menu-button {\n float: left;\n}\n"},"body":"\n\n\n\n\n````jsx\nimport { Search, Menu, Button } from '@alifd/next';\n\nconst menuData = [\n {\n label: 'Option 1',\n value: 'Option 1 Value',\n index: '1'\n }, {\n label: 'Option 2',\n value: 'Option 2 Value',\n index: '2'\n }, {\n label: 'Option 3',\n value: 'Option 3 Value',\n index: '3'\n }, {\n label: 'Option 4',\n value: 'Option 4 Value',\n index: '4'\n }\n];\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n visible: false,\n value: '111222',\n menuData: menuData\n };\n }\n\n renderMenu() {\n const menuData = this.state.menuData;\n\n return (\n \n {menuData.map((item) => {\n return (\n {item.label}\n \n );\n })}\n \n );\n }\n\n onSearch(value) {\n console.log(value);\n }\n\n onChange(value) {\n this.setState({\n visible: value.length > 0,\n value: value\n });\n }\n\n onSelect(selectedKeys) {\n this.setState({\n visible: false,\n value: selectedKeys[0]\n });\n }\n\n onDelete(index, e) {\n e.stopPropagation();\n\n const menuData = this.state.menuData;\n\n const menuDataNew = [];\n\n menuData.forEach(function (item) {\n if (item.index !== index) {\n menuDataNew.push(item);\n }\n });\n\n this.setState({\n menuData: menuDataNew\n });\n }\n\n onFocus() {\n this.setState({\n visible: true\n });\n }\n\n render() {\n const {visible, value} = this.state;\n\n return (
\n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n\n````css\n\n.diy-menu{\n /*width: 275px*/;\n}\n\n.diy-menu .next-menu-item a{\n display:none;\n float: right;\n cursor: pointer;\n}\n.diy-menu .next-menu-item:hover a{\n display:inline-block;\n}\n.diy-menu .diy-menu-button {\n float: right;\n}\n.diy-menu[dir=rtl] .diy-menu-button {\n float: left;\n}\n````","html":"
import { Search, Menu, Button } from '@alifd/next';\n\nconst menuData = [\n    {\n        label: 'Option 1',\n        value: 'Option 1 Value',\n        index: '1'\n    }, {\n        label: 'Option 2',\n        value: 'Option 2 Value',\n        index: '2'\n    }, {\n        label: 'Option 3',\n        value: 'Option 3 Value',\n        index: '3'\n    }, {\n        label: 'Option 4',\n        value: 'Option 4 Value',\n        index: '4'\n    }\n];\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            visible: false,\n            value: '111222',\n            menuData: menuData\n        };\n    }\n\n    renderMenu() {\n        const menuData = this.state.menuData;\n\n        return (<Menu onSelect={this.onSelect.bind(this)} rtl className=\"diy-menu\" selectMode=\"single\">\n            <Menu.Group label=\"Recent\" key=\"xxx\">\n                {menuData.map((item) => {\n                    return (<Menu.Item key={item.value}>\n                        {item.label}\n                        <Button className=\"diy-menu-button\" onClick={this.onDelete.bind(this, item.index)} text>Delete</Button>\n                    </Menu.Item>);\n                })}\n            </Menu.Group>\n        </Menu>);\n    }\n\n    onSearch(value) {\n        console.log(value);\n    }\n\n    onChange(value) {\n        this.setState({\n            visible: value.length > 0,\n            value: value\n        });\n    }\n\n    onSelect(selectedKeys) {\n        this.setState({\n            visible: false,\n            value: selectedKeys[0]\n        });\n    }\n\n    onDelete(index, e) {\n        e.stopPropagation();\n\n        const menuData = this.state.menuData;\n\n        const menuDataNew = [];\n\n        menuData.forEach(function (item) {\n            if (item.index !== index) {\n                menuDataNew.push(item);\n            }\n        });\n\n        this.setState({\n            menuData: menuDataNew\n        });\n    }\n\n    onFocus() {\n        this.setState({\n            visible: true\n        });\n    }\n\n    render() {\n        const {visible, value} = this.state;\n\n        return (<div style={{width: 700}}>\n            <Search\n                popupContent={this.renderMenu()}\n                visible={visible}\n                value={value}\n                onSearch={this.onSearch.bind(this)}\n                onChange={this.onChange.bind(this)}\n                onFocus={this.onFocus.bind(this)}\n            />\n        </div>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
\n.diy-menu{\n    /*width: 275px*/;\n}\n\n.diy-menu .next-menu-item a{\n    display:none;\n    float: right;\n    cursor: pointer;\n}\n.diy-menu .next-menu-item:hover a{\n    display:inline-block;\n}\n.diy-menu .diy-menu-button {\n    float: right;\n}\n.diy-menu[dir=rtl] .diy-menu-button {\n    float: left;\n}
"} \ No newline at end of file diff --git a/compiled_docs/search/demo/filter.en-us.md b/compiled_docs/search/demo/filter.en-us.md new file mode 100644 index 0000000000..6579cbae9f --- /dev/null +++ b/compiled_docs/search/demo/filter.en-us.md @@ -0,0 +1 @@ +{"title":"Filter","meta":{"title":"Filter","description":"\n

Filter dropdown, use with onFilterChange event

\n","order":"3"},"codes":{"jsx":"import { Search } from '@alifd/next';\n\nclass App extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n filter: [\n {\n label: 'Products',\n value: 'Products'\n },\n {\n label: 'Products1',\n value: 'Products1'\n },\n {\n label: 'Products2',\n value: 'Products2'\n },\n {\n label: 'Products3',\n value: 'Products3'\n },\n {\n label: 'Products4',\n value: 'Products4'\n },\n {\n label: 'Products5',\n value: 'Products5'\n },\n {\n label: 'Products6',\n value: 'Products6'\n },\n {\n label: 'Products7',\n value: 'Products7'\n },\n {\n label: 'Products8',\n value: 'Products8'\n },\n {\n label: 'Products9',\n value: 'Products9'\n },\n {\n label: 'Products10',\n value: 'Products10'\n },\n {\n label: 'Suppliers',\n value: 'Suppliers',\n default: true\n }\n ],\n value: ''\n };\n }\n\n onSearch(value, filterValue) {\n console.log(value, filterValue);\n }\n\n onChange(value) {\n this.setState({\n value: value\n });\n }\n\n // value is filter value，obj is the search value\n onFilterChange(value) {\n console.log(value);\n }\n\n render() {\n\n return (
\n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Search } from '@alifd/next';\n\nclass App extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n filter: [\n {\n label: 'Products',\n value: 'Products'\n },\n {\n label: 'Products1',\n value: 'Products1'\n },\n {\n label: 'Products2',\n value: 'Products2'\n },\n {\n label: 'Products3',\n value: 'Products3'\n },\n {\n label: 'Products4',\n value: 'Products4'\n },\n {\n label: 'Products5',\n value: 'Products5'\n },\n {\n label: 'Products6',\n value: 'Products6'\n },\n {\n label: 'Products7',\n value: 'Products7'\n },\n {\n label: 'Products8',\n value: 'Products8'\n },\n {\n label: 'Products9',\n value: 'Products9'\n },\n {\n label: 'Products10',\n value: 'Products10'\n },\n {\n label: 'Suppliers',\n value: 'Suppliers',\n default: true\n }\n ],\n value: ''\n };\n }\n\n onSearch(value, filterValue) {\n console.log(value, filterValue);\n }\n\n onChange(value) {\n this.setState({\n value: value\n });\n }\n\n // value is filter value，obj is the search value\n onFilterChange(value) {\n console.log(value);\n }\n\n render() {\n\n return (
\n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Search } from '@alifd/next';\n\nclass App extends React.Component {\n\n    constructor(props) {\n        super(props);\n        this.state = {\n            filter: [\n                {\n                    label: 'Products',\n                    value: 'Products'\n                },\n                {\n                    label: 'Products1',\n                    value: 'Products1'\n                },\n                {\n                    label: 'Products2',\n                    value: 'Products2'\n                },\n                {\n                    label: 'Products3',\n                    value: 'Products3'\n                },\n                {\n                    label: 'Products4',\n                    value: 'Products4'\n                },\n                {\n                    label: 'Products5',\n                    value: 'Products5'\n                },\n                {\n                    label: 'Products6',\n                    value: 'Products6'\n                },\n                {\n                    label: 'Products7',\n                    value: 'Products7'\n                },\n                {\n                    label: 'Products8',\n                    value: 'Products8'\n                },\n                {\n                    label: 'Products9',\n                    value: 'Products9'\n                },\n                {\n                    label: 'Products10',\n                    value: 'Products10'\n                },\n                {\n                    label: 'Suppliers',\n                    value: 'Suppliers',\n                    default: true\n                }\n            ],\n            value: ''\n        };\n    }\n\n    onSearch(value, filterValue) {\n        console.log(value, filterValue);\n    }\n\n    onChange(value) {\n        this.setState({\n            value: value\n        });\n    }\n\n    // value is filter value，obj is the search value\n    onFilterChange(value) {\n        console.log(value);\n    }\n\n    render() {\n\n        return (<div>\n            <Search onChange={this.onChange.bind(this)} onSearch={this.onSearch.bind(this)}\n                filterProps={{autoWidth: false}}\n                filter={this.state.filter} onFilterChange={this.onFilterChange.bind(this)}/>\n        </div>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/search/demo/filter.md b/compiled_docs/search/demo/filter.md new file mode 100644 index 0000000000..025f76602f --- /dev/null +++ b/compiled_docs/search/demo/filter.md @@ -0,0 +1 @@ +{"title":"下拉框","meta":{"title":"下拉框","description":"\n

带下拉框的用法。可以设置onFilterChange事件

\n","order":"3"},"codes":{"jsx":"import { Search } from '@alifd/next';\n\nclass App extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n filter: [\n {\n label: 'Products',\n value: 'Products'\n },\n {\n label: 'Products1',\n value: 'Products1'\n },\n {\n label: 'Products2',\n value: 'Products2'\n },\n {\n label: 'Products3',\n value: 'Products3'\n },\n {\n label: 'Products4',\n value: 'Products4'\n },\n {\n label: 'Products5',\n value: 'Products5'\n },\n {\n label: 'Products6',\n value: 'Products6'\n },\n {\n label: 'Products7',\n value: 'Products7'\n },\n {\n label: 'Products8',\n value: 'Products8'\n },\n {\n label: 'Products9',\n value: 'Products9'\n },\n {\n label: 'Products10',\n value: 'Products10'\n },\n {\n label: 'Suppliers',\n value: 'Suppliers',\n default: true\n }\n ],\n value: ''\n };\n }\n\n onSearch(value, filterValue) {\n console.log(value, filterValue);\n }\n\n onChange(value) {\n this.setState({\n value: value\n });\n }\n\n // value is filter value，obj is the search value\n onFilterChange(value) {\n console.log(value);\n }\n\n render() {\n\n return (
\n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Search } from '@alifd/next';\n\nclass App extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n filter: [\n {\n label: 'Products',\n value: 'Products'\n },\n {\n label: 'Products1',\n value: 'Products1'\n },\n {\n label: 'Products2',\n value: 'Products2'\n },\n {\n label: 'Products3',\n value: 'Products3'\n },\n {\n label: 'Products4',\n value: 'Products4'\n },\n {\n label: 'Products5',\n value: 'Products5'\n },\n {\n label: 'Products6',\n value: 'Products6'\n },\n {\n label: 'Products7',\n value: 'Products7'\n },\n {\n label: 'Products8',\n value: 'Products8'\n },\n {\n label: 'Products9',\n value: 'Products9'\n },\n {\n label: 'Products10',\n value: 'Products10'\n },\n {\n label: 'Suppliers',\n value: 'Suppliers',\n default: true\n }\n ],\n value: ''\n };\n }\n\n onSearch(value, filterValue) {\n console.log(value, filterValue);\n }\n\n onChange(value) {\n this.setState({\n value: value\n });\n }\n\n // value is filter value，obj is the search value\n onFilterChange(value) {\n console.log(value);\n }\n\n render() {\n\n return (
\n \n
);\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
import { Search } from '@alifd/next';\n\nclass App extends React.Component {\n\n    constructor(props) {\n        super(props);\n        this.state = {\n            filter: [\n                {\n                    label: 'Products',\n                    value: 'Products'\n                },\n                {\n                    label: 'Products1',\n                    value: 'Products1'\n                },\n                {\n                    label: 'Products2',\n                    value: 'Products2'\n                },\n                {\n                    label: 'Products3',\n                    value: 'Products3'\n                },\n                {\n                    label: 'Products4',\n                    value: 'Products4'\n                },\n                {\n                    label: 'Products5',\n                    value: 'Products5'\n                },\n                {\n                    label: 'Products6',\n                    value: 'Products6'\n                },\n                {\n                    label: 'Products7',\n                    value: 'Products7'\n                },\n                {\n                    label: 'Products8',\n                    value: 'Products8'\n                },\n                {\n                    label: 'Products9',\n                    value: 'Products9'\n                },\n                {\n                    label: 'Products10',\n                    value: 'Products10'\n                },\n                {\n                    label: 'Suppliers',\n                    value: 'Suppliers',\n                    default: true\n                }\n            ],\n            value: ''\n        };\n    }\n\n    onSearch(value, filterValue) {\n        console.log(value, filterValue);\n    }\n\n    onChange(value) {\n        this.setState({\n            value: value\n        });\n    }\n\n    // value is filter value，obj is the search value\n    onFilterChange(value) {\n        console.log(value);\n    }\n\n    render() {\n\n        return (<div>\n            <Search onChange={this.onChange.bind(this)} onSearch={this.onSearch.bind(this)}\n                filterProps={{autoWidth: false}}\n                filter={this.state.filter} onFilterChange={this.onFilterChange.bind(this)}/>\n        </div>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/search/demo/size.en-us.md b/compiled_docs/search/demo/size.en-us.md new file mode 100644 index 0000000000..70b7a44104 --- /dev/null +++ b/compiled_docs/search/demo/size.en-us.md @@ -0,0 +1 @@ +{"title":"Size","meta":{"title":"Size","description":"\n

Filter dropdown, use with onFilterChange.

\n","order":"2"},"codes":{"jsx":"import { Search } from '@alifd/next';\n\nReactDOM.render(
\n \n

\n \n
, mountNode);\n"},"body":"\n````jsx\nimport { Search } from '@alifd/next';\n\nReactDOM.render(
\n \n

\n \n
, mountNode);\n````","html":"
import { Search } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Search\n        size=\"large\"\n        defaultValue=\"large\"\n        searchText=\"Search\"\n        placeholder=\"What are you looking for...\" />\n    <br/><br/>\n    <Search\n        size=\"medium\"\n        defaultValue=\"medium\"\n        searchText=\"Search\"\n        placeholder=\"What are you looking for...\" />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/search/demo/size.md b/compiled_docs/search/demo/size.md new file mode 100644 index 0000000000..a571218de9 --- /dev/null +++ b/compiled_docs/search/demo/size.md @@ -0,0 +1 @@ +{"title":"大小","meta":{"title":"大小","description":"\n

通过size进行大小设置，支持large、medium

\n","order":"2"},"codes":{"jsx":"import { Search } from '@alifd/next';\n\nReactDOM.render(
\n \n

\n \n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Search } from '@alifd/next';\n\nReactDOM.render(
\n \n

\n \n
, mountNode);\n````","html":"
import { Search } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Search\n        size=\"large\"\n        defaultValue=\"large\"\n        searchText=\"Search\"\n        placeholder=\"What are you looking for...\" />\n    <br/><br/>\n    <Search\n        size=\"medium\"\n        defaultValue=\"medium\"\n        searchText=\"Search\"\n        placeholder=\"What are you looking for...\" />\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/search/demo/type.en-us.md b/compiled_docs/search/demo/type.en-us.md new file mode 100644 index 0000000000..f0a4657fd5 --- /dev/null +++ b/compiled_docs/search/demo/type.en-us.md @@ -0,0 +1 @@ +{"title":"type","meta":{"title":"type","description":"\n

Simple Usage

\n","order":"1"},"codes":{"jsx":"import { Search } from '@alifd/next';\n\nReactDOM.render(
\n

Normal

\n \n

\n \n

\n \n

\n
\n \n
\n

Simple

\n \n

\n
\n \n
\n
, mountNode);\n"},"body":"\n````jsx\nimport { Search } from '@alifd/next';\n\nReactDOM.render(
\n

Normal

\n \n

\n \n

\n \n

\n
\n \n
\n

Simple

\n \n

\n
\n \n
\n
, mountNode);\n````","html":"
import { Search } from '@alifd/next';\n\nReactDOM.render(<div>\n    <h2>Normal</h2>\n    <Search type=\"primary\" placeholder=\"primary\"/>\n    <br/> <br/>\n    <Search type=\"secondary\" placeholder=\"Secondary\"/>\n    <br/> <br/>\n    <Search type=\"normal\" placeholder=\"normal\"/>\n    <br/> <br/>\n    <div style={{background: '#333', padding: 20}}>\n        <Search type=\"dark\" placeholder=\"dark\"/>\n    </div>\n    <h2>Simple</h2>\n    <Search type=\"normal\" shape=\"simple\" placeholder=\"normal\"/>\n    <br/> <br/>\n    <div style={{background: '#333', padding: 20}}>\n        <Search shape=\"simple\" type=\"dark\" placeholder=\"dark\"/>\n    </div>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/search/demo/type.md b/compiled_docs/search/demo/type.md new file mode 100644 index 0000000000..d85f76f71b --- /dev/null +++ b/compiled_docs/search/demo/type.md @@ -0,0 +1 @@ +{"title":"类别","meta":{"title":"类别","description":"\n

简单用法

\n","order":"1"},"codes":{"jsx":"import { Search } from '@alifd/next';\n\nReactDOM.render(
\n

Normal

\n \n

\n \n

\n \n

\n
\n \n
\n

Simple

\n \n

\n
\n \n
\n
, mountNode);\n"},"body":"\n\n````jsx\nimport { Search } from '@alifd/next';\n\nReactDOM.render(
\n

Normal

\n \n

\n \n

\n \n

\n
\n \n
\n

Simple

\n \n

\n
\n \n
\n
, mountNode);\n````","html":"
import { Search } from '@alifd/next';\n\nReactDOM.render(<div>\n    <h2>Normal</h2>\n    <Search type=\"primary\" placeholder=\"primary\"/>\n    <br/> <br/>\n    <Search type=\"secondary\" placeholder=\"Secondary\"/>\n    <br/> <br/>\n    <Search type=\"normal\" placeholder=\"normal\"/>\n    <br/> <br/>\n    <div style={{background: '#333', padding: 20}}>\n        <Search type=\"dark\" placeholder=\"dark\"/>\n    </div>\n    <h2>Simple</h2>\n    <Search type=\"normal\" shape=\"simple\" placeholder=\"normal\"/>\n    <br/> <br/>\n    <div style={{background: '#333', padding: 20}}>\n        <Search shape=\"simple\" type=\"dark\" placeholder=\"dark\"/>\n    </div>\n</div>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/search/index.en-us.md b/compiled_docs/search/index.en-us.md new file mode 100644 index 0000000000..4ebbd58ba1 --- /dev/null +++ b/compiled_docs/search/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

Guide#

When to use#

search data in forms or pages.

\n

API#

","api":"

Search#

\n

Inhert from Select.AutoComplete, you can use AutoComplete api directly

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
ParamDescripitonTypeDefault Value
sizesize

option:
'large'
'medium'		Enum'medium'
typetype. when shape=normal, type options: primary/secondary; when shape=simple, type options: normal/dark;

option:
'primary', 'secondary', 'normal', 'dark'		Enum'normal'
shapeshape

option:
'normal', 'simple'		Enum'normal'
defaultValuedefault valueString-
valuecurrent valueString/Number-
onChangecallback when value changes

signature:
Function() => void		Functionfunc.noop
onSearchcallback when search button clicked

signature:
Function() => void		Functionfunc.noop
defaultFilterValuedefault filterString-
filterfilterArray[]
filterValuefilter valueString-
onFilterChangecallback when filter changes

signature:
Function() => void		Functionfunc.noop
dataSourcedropdown menu data sourceArray-
placeholderdefault hintString-
searchTextbutton textReactNode-
filterPropsfilter propsObject-
buttonPropsprops for ButtonObject{}
popupContentcustom popup menuReactNode-
visiblepopupContent is displayedBoolean-
hasClearshow clear text buttonBooleanfalse
hasIconshow find buttonBooleantrue
disableddisabled or notBooleanfalse
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n
KeyBoardDescripiton
TabTrigger the onSearch event
\n"} \ No newline at end of file diff --git a/compiled_docs/search/index.md b/compiled_docs/search/index.md new file mode 100644 index 0000000000..2eb3fba1fb --- /dev/null +++ b/compiled_docs/search/index.md @@ -0,0 +1 @@ +{"meta":"

开发指南#

何时使用#

页面、表单数据搜索时使用

\n

API#

","api":"

Search#

\n

输入框部分继承 Select.AutoComplete 的能力，可以直接用AutoComplete 的 api

\n
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
参数说明类型默认值
size大小

可选值:
'large'('大')
'medium'('小')		Enum'medium'
type类型 shape=normal: primary/secondary; shape=simple: normal/dark;

可选值:
'primary', 'secondary', 'normal', 'dark'		Enum'normal'
shape形状

可选值:
'normal', 'simple'		Enum'normal'
defaultValue搜索框默认值String-
value搜索框数值String/Number-
onChange输入关键字时的回掉

签名:
Function(value: Object) => void
参数:
value: {Object} 输入值		Functionfunc.noop
onSearch点击搜索按钮触发的回调

签名:
Function(value: Object) => void
参数:
value: {Object} 输入值		Functionfunc.noop
defaultFilterValue选择器默认值String-
filter选择器Array[]
filterValue选择器值String-
onFilterChange选择器发生变化时回调

签名:
Function(filter: Object) => void
参数:
filter: {Object} value		Functionfunc.noop
dataSource搜索框下拉联想列表Array-
placeholder默认提示String-
searchTextbutton 的内容ReactNode-
filterProps选择器的propsObject-
buttonProps按钮的额外属性Object{}
popupContent自定义渲染的的下拉框ReactNode-
visible自定义渲染的的下拉框Boolean-
hasClear是否显示清除按钮Booleanfalse
hasIcon是否显示搜索按钮Booleantrue
disabled是否禁用Booleanfalse
\n

ARIA and KeyBoard#

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
按键说明
Enter触发onSearch事件
\n"} \ No newline at end of file diff --git a/compiled_docs/select/demo/accessibility.en-us.md b/compiled_docs/select/demo/accessibility.en-us.md new file mode 100644 index 0000000000..5e6ce6c986 --- /dev/null +++ b/compiled_docs/select/demo/accessibility.en-us.md @@ -0,0 +1 @@ +{"title":"Accessibility","meta":{"title":"Accessibility","description":"\n"},"codes":{"jsx":"import { Select } from '@alifd/next';\n\nconst Option = Select.Option;\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.onChange = this.onChange.bind(this);\n }\n onChange(value) {\n console.log(value);\n };\n\n render() {\n return (
\n Select: \n \n
);\n }\n}\n \nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Select } from '@alifd/next';\n\nconst Option = Select.Option;\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.onChange = this.onChange.bind(this);\n }\n onChange(value) {\n console.log(value);\n };\n\n render() {\n return (
\n Select: \n \n
);\n }\n}\n \nReactDOM.render(, mountNode);\n````","html":"
import { Select } from '@alifd/next';\n\nconst Option = Select.Option;\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.onChange = this.onChange.bind(this);\n    }\n    onChange(value) {\n        console.log(value);\n    };\n\n    render() {\n        return (<div>\n            <span id=\"select-a11y\">Select: </span>\n            <Select onChange={this.onChange} defaultValue=\"jack\" aria-labelledby=\"select-a11y\">\n                <Option value=\"jack\">Jack</Option>\n                <Option value=\"frank\">Frank</Option>\n                <Option value=\"hugo\">Hugo</Option>\n            </Select>\n        </div>);\n    }\n}\n\nReactDOM.render(<App />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/select/demo/accessibility.md b/compiled_docs/select/demo/accessibility.md new file mode 100644 index 0000000000..38c2a6eeb3 --- /dev/null +++ b/compiled_docs/select/demo/accessibility.md @@ -0,0 +1 @@ +{"title":"无障碍","meta":{"title":"无障碍","description":"\n

当聚焦在组件上时，通过aria-labelledby对组件进行描述。关于键盘操作请参考ARIA and KeyBoard。

\n","order":"16"},"codes":{"jsx":"import { Select } from '@alifd/next';\n\nconst Option = Select.Option;\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.onChange = this.onChange.bind(this);\n }\n onChange(value) {\n console.log(value);\n };\n\n render() {\n return (
\n Select: \n \n
);\n }\n}\n \nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Select } from '@alifd/next';\n\nconst Option = Select.Option;\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.onChange = this.onChange.bind(this);\n }\n onChange(value) {\n console.log(value);\n };\n\n render() {\n return (
\n Select: \n \n
);\n }\n}\n \nReactDOM.render(, mountNode);\n````","html":"
import { Select } from '@alifd/next';\n\nconst Option = Select.Option;\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.onChange = this.onChange.bind(this);\n    }\n    onChange(value) {\n        console.log(value);\n    };\n\n    render() {\n        return (<div>\n            <span id=\"select-a11y\">Select: </span>\n            <Select onChange={this.onChange} defaultValue=\"jack\" aria-labelledby=\"select-a11y\">\n                <Option value=\"jack\">Jack</Option>\n                <Option value=\"frank\">Frank</Option>\n                <Option value=\"hugo\">Hugo</Option>\n            </Select>\n        </div>);\n    }\n}\n\nReactDOM.render(<App />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/select/demo/basic.en-us.md b/compiled_docs/select/demo/basic.en-us.md new file mode 100644 index 0000000000..53db0f0eb3 --- /dev/null +++ b/compiled_docs/select/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

simple usage

\n","order":"0"},"codes":{"jsx":"import { Select } from '@alifd/next';\n\nconst Option = Select.Option;\n\nconst onChange = function (value) {\n console.log(value);\n};\nconst onBlur = function (e) {\n console.log(/onblur/,e);\n};\n\nconst onToggleHighlightItem = function (item, type) {\n console.log(item, type);\n};\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Select } from '@alifd/next';\n\nconst Option = Select.Option;\n\nconst onChange = function (value) {\n console.log(value);\n};\nconst onBlur = function (e) {\n console.log(/onblur/,e);\n};\n\nconst onToggleHighlightItem = function (item, type) {\n console.log(item, type);\n};\n\nReactDOM.render(, mountNode);\n````","html":"
import { Select } from '@alifd/next';\n\nconst Option = Select.Option;\n\nconst onChange = function (value) {\n    console.log(value);\n};\nconst onBlur = function (e) {\n    console.log(/onblur/,e);\n};\n\nconst onToggleHighlightItem = function (item, type) {\n    console.log(item, type);\n};\n\nReactDOM.render(<Select id=\"basic-demo\" onChange={onChange} onBlur={onBlur} onToggleHighlightItem={onToggleHighlightItem} defaultValue=\"jack\" aria-label=\"name is\" showSearch hasClear>\n    <Option value=\"jack\">Jack</Option>\n    <Option value=\"frank\">Frank</Option>\n    <Option value=\"hugo\">Hugo</Option>\n</Select>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/select/demo/basic.md b/compiled_docs/select/demo/basic.md new file mode 100644 index 0000000000..c093ef2824 --- /dev/null +++ b/compiled_docs/select/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本使用","meta":{"title":"基本使用","description":"\n

简单

\n","order":"0"},"codes":{"jsx":"import { Select } from '@alifd/next';\n\nconst Option = Select.Option;\n\nconst onChange = function (value) {\n console.log(value);\n};\nconst onBlur = function (e) {\n console.log(/onblur/,e);\n};\n\nconst onToggleHighlightItem = function (item, type) {\n console.log(item, type);\n};\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Select } from '@alifd/next';\n\nconst Option = Select.Option;\n\nconst onChange = function (value) {\n console.log(value);\n};\nconst onBlur = function (e) {\n console.log(/onblur/,e);\n};\n\nconst onToggleHighlightItem = function (item, type) {\n console.log(item, type);\n};\n\nReactDOM.render(, mountNode);\n````","html":"
import { Select } from '@alifd/next';\n\nconst Option = Select.Option;\n\nconst onChange = function (value) {\n    console.log(value);\n};\nconst onBlur = function (e) {\n    console.log(/onblur/,e);\n};\n\nconst onToggleHighlightItem = function (item, type) {\n    console.log(item, type);\n};\n\nReactDOM.render(<Select id=\"basic-demo\" onChange={onChange} onBlur={onBlur} onToggleHighlightItem={onToggleHighlightItem} defaultValue=\"jack\" aria-label=\"name is\" showSearch hasClear>\n    <Option value=\"jack\">Jack</Option>\n    <Option value=\"frank\">Frank</Option>\n    <Option value=\"hugo\">Hugo</Option>\n</Select>, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/select/demo/combobox-basic.en-us.md b/compiled_docs/select/demo/combobox-basic.en-us.md new file mode 100644 index 0000000000..dbd14a45d5 --- /dev/null +++ b/compiled_docs/select/demo/combobox-basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

AutoComplete api of size/disabled/hasClear

\n","order":"10"},"codes":{"jsx":"import { Select } from '@alifd/next';\n\nconst {AutoComplete} = Select;\nconst dataSource = [\n 'Lucy King',\n 'Lily King',\n 'Jim Green',\n {\n label: 'Chinese',\n children: [\n {value: 'Hang Meimei', label: 'Hang Meimei'},\n 'Li Lei',\n {value: 'Gao Hui', label: 'Gao Hui', disabled: true},\n 'Zhang San',\n 'Li Si',\n 'Wang Wu',\n {value: 'Zhao Benshan', label: 'Zhao Benshan', disabled: true},\n 'Sun Yang',\n 'Song Shuying'\n ]\n },\n {\n label: 'Pets',\n children: [\n 'Poly',\n 'Kitty'\n ]\n }\n];\n\nconst ctrlDataSources = {\n size: ['small', 'medium', 'large'],\n disabled: [true, false],\n hasClear: [true, false]\n};\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: null,\n size: undefined,\n disabled: undefined,\n hasClear: undefined\n };\n\n this.handleChange = this.handleChange.bind(this);\n this.handleCtrlChange = this.handleCtrlChange.bind(this);\n }\n\n handleCtrlChange(key, value) {\n this.setState({[key]: value});\n\n if (key === 'mode') {\n this.setState({value: null});\n }\n }\n\n handleChange(value) {\n console.log('handleChange: value: ', value);\n this.setState({value});\n }\n\n renderCtrlNodes(state) {\n const ctrlNodes = [];\n let k;\n for (k in ctrlDataSources) {\n if (ctrlDataSources.hasOwnProperty(k)) {\n ctrlNodes.push(\n \n );\n }\n }\n\n return ctrlNodes;\n }\n\n render() {\n\n return (\n
\n
{this.renderCtrlNodes(this.state)}
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo-container {\n padding: 16px;\n background-color: #F8F8F8;\n}\n\n.demo-controller {\n padding: 12px 12px 4px;\n margin-bottom: 16px;\n border: 2px dashed #ddd;\n}\n\n.next-select {\n margin-right: 8px;\n margin-bottom: 8px;\n}\n````","html":"
import { Select } from '@alifd/next';\n\nconst {AutoComplete} = Select;\nconst dataSource = [\n    'Lucy King',\n    'Lily King',\n    'Jim Green',\n    {\n        label: 'Chinese',\n        children: [\n            {value: 'Hang Meimei', label: 'Hang Meimei'},\n            'Li Lei',\n            {value: 'Gao Hui', label: 'Gao Hui', disabled: true},\n            'Zhang San',\n            'Li Si',\n            'Wang Wu',\n            {value: 'Zhao Benshan', label: 'Zhao Benshan', disabled: true},\n            'Sun Yang',\n            'Song Shuying'\n        ]\n    },\n    {\n        label: 'Pets',\n        children: [\n            'Poly',\n            'Kitty'\n        ]\n    }\n];\n\nconst ctrlDataSources = {\n    size: ['small', 'medium', 'large'],\n    disabled: [true, false],\n    hasClear: [true, false]\n};\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: null,\n            size: undefined,\n            disabled: undefined,\n            hasClear: undefined\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n        this.handleCtrlChange = this.handleCtrlChange.bind(this);\n    }\n\n    handleCtrlChange(key, value) {\n        this.setState({[key]: value});\n\n        if (key === 'mode') {\n            this.setState({value: null});\n        }\n    }\n\n    handleChange(value) {\n        console.log('handleChange: value: ', value);\n        this.setState({value});\n    }\n\n    renderCtrlNodes(state) {\n        const ctrlNodes = [];\n        let k;\n        for (k in ctrlDataSources) {\n            if (ctrlDataSources.hasOwnProperty(k)) {\n                ctrlNodes.push(\n                    <Select key={k}\n                        label={`${k}: `}\n                        value={state[k]}\n                        dataSource={ctrlDataSources[k]}\n                        onChange={this.handleCtrlChange.bind(this, k)} />\n                );\n            }\n        }\n\n        return ctrlNodes;\n    }\n\n    render() {\n\n        return (\n            <div className=\"demo-container\">\n                <div className=\"demo-controller\">{this.renderCtrlNodes(this.state)}</div>\n                <AutoComplete\n                    {...this.state}\n                    style={{maxWidth: 300}}\n                    onChange={this.handleChange}\n                    dataSource={dataSource} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.demo-container {\n    padding: 16px;\n    background-color: #F8F8F8;\n}\n\n.demo-controller {\n    padding: 12px 12px 4px;\n    margin-bottom: 16px;\n    border: 2px dashed #ddd;\n}\n\n.next-select {\n    margin-right: 8px;\n    margin-bottom: 8px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/select/demo/combobox-basic.md b/compiled_docs/select/demo/combobox-basic.md new file mode 100644 index 0000000000..655c938042 --- /dev/null +++ b/compiled_docs/select/demo/combobox-basic.md @@ -0,0 +1 @@ +{"title":"自动完成大小","meta":{"title":"自动完成大小","description":"\n

AutoComplete 大小、disabled、清除

\n","order":"10"},"codes":{"jsx":"import { Select } from '@alifd/next';\n\nconst {AutoComplete} = Select;\nconst dataSource = [\n 'Lucy King',\n 'Lily King',\n 'Jim Green',\n {\n label: 'Chinese',\n children: [\n {value: 'Hang Meimei', label: 'Hang Meimei'},\n 'Li Lei',\n {value: 'Gao Hui', label: 'Gao Hui', disabled: true},\n 'Zhang San',\n 'Li Si',\n 'Wang Wu',\n {value: 'Zhao Benshan', label: 'Zhao Benshan', disabled: true},\n 'Sun Yang',\n 'Song Shuying'\n ]\n },\n {\n label: 'Pets',\n children: [\n 'Poly',\n 'Kitty'\n ]\n }\n];\n\nconst ctrlDataSources = {\n size: ['small', 'medium', 'large'],\n disabled: [true, false],\n hasClear: [true, false]\n};\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: null,\n size: undefined,\n disabled: undefined,\n hasClear: undefined\n };\n\n this.handleChange = this.handleChange.bind(this);\n this.handleCtrlChange = this.handleCtrlChange.bind(this);\n }\n\n handleCtrlChange(key, value) {\n this.setState({[key]: value});\n\n if (key === 'mode') {\n this.setState({value: null});\n }\n }\n\n handleChange(value) {\n console.log('handleChange: value: ', value);\n this.setState({value});\n }\n\n renderCtrlNodes(state) {\n const ctrlNodes = [];\n let k;\n for (k in ctrlDataSources) {\n if (ctrlDataSources.hasOwnProperty(k)) {\n ctrlNodes.push(\n \n );\n }\n }\n\n return ctrlNodes;\n }\n\n render() {\n\n return (\n
\n
{this.renderCtrlNodes(this.state)}
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo-container {\n padding: 16px;\n background-color: #F8F8F8;\n}\n\n.demo-controller {\n padding: 12px 12px 4px;\n margin-bottom: 16px;\n border: 2px dashed #ddd;\n}\n\n.next-select {\n margin-right: 8px;\n margin-bottom: 8px;\n}\n````","html":"
import { Select } from '@alifd/next';\n\nconst {AutoComplete} = Select;\nconst dataSource = [\n    'Lucy King',\n    'Lily King',\n    'Jim Green',\n    {\n        label: 'Chinese',\n        children: [\n            {value: 'Hang Meimei', label: 'Hang Meimei'},\n            'Li Lei',\n            {value: 'Gao Hui', label: 'Gao Hui', disabled: true},\n            'Zhang San',\n            'Li Si',\n            'Wang Wu',\n            {value: 'Zhao Benshan', label: 'Zhao Benshan', disabled: true},\n            'Sun Yang',\n            'Song Shuying'\n        ]\n    },\n    {\n        label: 'Pets',\n        children: [\n            'Poly',\n            'Kitty'\n        ]\n    }\n];\n\nconst ctrlDataSources = {\n    size: ['small', 'medium', 'large'],\n    disabled: [true, false],\n    hasClear: [true, false]\n};\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: null,\n            size: undefined,\n            disabled: undefined,\n            hasClear: undefined\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n        this.handleCtrlChange = this.handleCtrlChange.bind(this);\n    }\n\n    handleCtrlChange(key, value) {\n        this.setState({[key]: value});\n\n        if (key === 'mode') {\n            this.setState({value: null});\n        }\n    }\n\n    handleChange(value) {\n        console.log('handleChange: value: ', value);\n        this.setState({value});\n    }\n\n    renderCtrlNodes(state) {\n        const ctrlNodes = [];\n        let k;\n        for (k in ctrlDataSources) {\n            if (ctrlDataSources.hasOwnProperty(k)) {\n                ctrlNodes.push(\n                    <Select key={k}\n                        label={`${k}: `}\n                        value={state[k]}\n                        dataSource={ctrlDataSources[k]}\n                        onChange={this.handleCtrlChange.bind(this, k)} />\n                );\n            }\n        }\n\n        return ctrlNodes;\n    }\n\n    render() {\n\n        return (\n            <div className=\"demo-container\">\n                <div className=\"demo-controller\">{this.renderCtrlNodes(this.state)}</div>\n                <AutoComplete\n                    {...this.state}\n                    style={{maxWidth: 300}}\n                    onChange={this.handleChange}\n                    dataSource={dataSource} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
.demo-container {\n    padding: 16px;\n    background-color: #F8F8F8;\n}\n\n.demo-controller {\n    padding: 12px 12px 4px;\n    margin-bottom: 16px;\n    border: 2px dashed #ddd;\n}\n\n.next-select {\n    margin-right: 8px;\n    margin-bottom: 8px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/select/demo/combobox-remote.en-us.md b/compiled_docs/select/demo/combobox-remote.en-us.md new file mode 100644 index 0000000000..9ab54e6783 --- /dev/null +++ b/compiled_docs/select/demo/combobox-remote.en-us.md @@ -0,0 +1 @@ +{"title":"Dynamic data","meta":{"title":"Dynamic data","description":"\n

By set filterLocal to false, so you can use AutoComplete with dynamic data.

\n","order":"11"},"codes":{"jsx":"import { Select } from '@alifd/next';\nimport jsonp from 'jsonp';\n\nconst {AutoComplete} = Select;\n\nclass Demo extends React.Component {\n state = {\n dataSource: []\n };\n\n handleChange = value => {\n clearTimeout(this.searchTimeout);\n this.searchTimeout = setTimeout(() => {\n // eslint-disable-next-line handle-callback-err\n jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${value}`, (err, data) => {\n const dataSource = data.result.map(item => item[0]);\n this.setState({dataSource});\n });\n }, 100);\n }\n\n render() {\n return (\n
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".demo-container {\n background-color: #F8F8F8;\n padding: 16px;\n}\n"},"body":"\n````jsx\nimport { Select } from '@alifd/next';\nimport jsonp from 'jsonp';\n\nconst {AutoComplete} = Select;\n\nclass Demo extends React.Component {\n state = {\n dataSource: []\n };\n\n handleChange = value => {\n clearTimeout(this.searchTimeout);\n this.searchTimeout = setTimeout(() => {\n // eslint-disable-next-line handle-callback-err\n jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${value}`, (err, data) => {\n const dataSource = data.result.map(item => item[0]);\n this.setState({dataSource});\n });\n }, 100);\n }\n\n render() {\n return (\n
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo-container {\n background-color: #F8F8F8;\n padding: 16px;\n}\n````","html":"
import { Select } from '@alifd/next';\nimport jsonp from 'jsonp';\n\nconst {AutoComplete} = Select;\n\nclass Demo extends React.Component {\n    state = {\n        dataSource: []\n    };\n\n    handleChange = value => {\n        clearTimeout(this.searchTimeout);\n        this.searchTimeout = setTimeout(() => {\n            // eslint-disable-next-line handle-callback-err\n            jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${value}`, (err, data) => {\n                const dataSource = data.result.map(item => item[0]);\n                this.setState({dataSource});\n            });\n        }, 100);\n    }\n\n    render() {\n        return (\n            <div className=\"demo-container\">\n                <AutoComplete\n                    filterLocal={false}\n                    placeholder=\"search from taobao\"\n                    onChange={this.handleChange}\n                    dataSource={this.state.dataSource}/>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo/>, mountNode);
.demo-container {\n    background-color: #F8F8F8;\n    padding: 16px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/select/demo/combobox-remote.md b/compiled_docs/select/demo/combobox-remote.md new file mode 100644 index 0000000000..c4e9eb430d --- /dev/null +++ b/compiled_docs/select/demo/combobox-remote.md @@ -0,0 +1 @@ +{"title":"动态数据","meta":{"title":"动态数据","description":"\n

使用动态数据填充 AutoComplete, 设置 filterLocal 为 false

\n","order":"11"},"codes":{"jsx":"import { Select } from '@alifd/next';\nimport jsonp from 'jsonp';\n\nconst {AutoComplete} = Select;\n\nclass Demo extends React.Component {\n state = {\n dataSource: []\n };\n\n handleChange = value => {\n clearTimeout(this.searchTimeout);\n this.searchTimeout = setTimeout(() => {\n // eslint-disable-next-line handle-callback-err\n jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${value}`, (err, data) => {\n const dataSource = data.result.map(item => item[0]);\n this.setState({dataSource});\n });\n }, 100);\n }\n\n render() {\n return (\n
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".demo-container {\n background-color: #F8F8F8;\n padding: 16px;\n}\n"},"body":"\n\n````jsx\nimport { Select } from '@alifd/next';\nimport jsonp from 'jsonp';\n\nconst {AutoComplete} = Select;\n\nclass Demo extends React.Component {\n state = {\n dataSource: []\n };\n\n handleChange = value => {\n clearTimeout(this.searchTimeout);\n this.searchTimeout = setTimeout(() => {\n // eslint-disable-next-line handle-callback-err\n jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${value}`, (err, data) => {\n const dataSource = data.result.map(item => item[0]);\n this.setState({dataSource});\n });\n }, 100);\n }\n\n render() {\n return (\n
\n \n
\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo-container {\n background-color: #F8F8F8;\n padding: 16px;\n}\n````","html":"
import { Select } from '@alifd/next';\nimport jsonp from 'jsonp';\n\nconst {AutoComplete} = Select;\n\nclass Demo extends React.Component {\n    state = {\n        dataSource: []\n    };\n\n    handleChange = value => {\n        clearTimeout(this.searchTimeout);\n        this.searchTimeout = setTimeout(() => {\n            // eslint-disable-next-line handle-callback-err\n            jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${value}`, (err, data) => {\n                const dataSource = data.result.map(item => item[0]);\n                this.setState({dataSource});\n            });\n        }, 100);\n    }\n\n    render() {\n        return (\n            <div className=\"demo-container\">\n                <AutoComplete\n                    filterLocal={false}\n                    placeholder=\"search from taobao\"\n                    onChange={this.handleChange}\n                    dataSource={this.state.dataSource}/>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo/>, mountNode);
.demo-container {\n    background-color: #F8F8F8;\n    padding: 16px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/select/demo/combobox-rich-text.en-us.md b/compiled_docs/select/demo/combobox-rich-text.en-us.md new file mode 100644 index 0000000000..b417191f85 --- /dev/null +++ b/compiled_docs/select/demo/combobox-rich-text.en-us.md @@ -0,0 +1 @@ +{"title":"picture list","meta":{"title":"picture list","description":"\n

menu with pictures

\n","order":"12"},"codes":{"jsx":"import { Select, Icon } from '@alifd/next';\nimport jsonp from 'jsonp';\n\nconst {AutoComplete} = Select;\n\nclass Demo extends React.Component {\n state = {\n dataSource: []\n }\n\n handleChange = (value) => {\n if (this.searchTimeout) {\n clearTimeout(this.searchTimeout);\n }\n this.searchTimeout = setTimeout(() => {\n // eslint-disable-next-line handle-callback-err\n jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${value}`, (err, data) => {\n const dataSource = data.result.map(item => {\n return {\n label:
 {item[0]}
,\n value: item[1],\n originLabel: item[0]\n };\n });\n this.setState({dataSource});\n });\n }, 100);\n }\n\n render() {\n return (\n
\n
\n );\n }\n}\nReactDOM.render(, mountNode);\n","css":".next-select {\n margin-right:10px;\n vertical-align: middle;\n}\n\n.demo-container {\n background-color: #F8F8F8;\n padding: 16px;\n}\n\n.demo-container p {\n margin-top:0;\n}\n"},"body":"\n````jsx\nimport { Select, Icon } from '@alifd/next';\nimport jsonp from 'jsonp';\n\nconst {AutoComplete} = Select;\n\nclass Demo extends React.Component {\n state = {\n dataSource: []\n }\n\n handleChange = (value) => {\n if (this.searchTimeout) {\n clearTimeout(this.searchTimeout);\n }\n this.searchTimeout = setTimeout(() => {\n // eslint-disable-next-line handle-callback-err\n jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${value}`, (err, data) => {\n const dataSource = data.result.map(item => {\n return {\n label:
 {item[0]}
,\n value: item[1],\n originLabel: item[0]\n };\n });\n this.setState({dataSource});\n });\n }, 100);\n }\n\n render() {\n return (\n
\n
\n );\n }\n}\nReactDOM.render(, mountNode);\n````\n\n````css\n.next-select {\n margin-right:10px;\n vertical-align: middle;\n}\n\n.demo-container {\n background-color: #F8F8F8;\n padding: 16px;\n}\n\n.demo-container p {\n margin-top:0;\n}\n````","html":"
import { Select, Icon } from '@alifd/next';\nimport jsonp from 'jsonp';\n\nconst {AutoComplete} = Select;\n\nclass Demo extends React.Component {\n    state = {\n        dataSource: []\n    }\n\n    handleChange = (value) => {\n        if (this.searchTimeout) {\n            clearTimeout(this.searchTimeout);\n        }\n        this.searchTimeout = setTimeout(() => {\n            // eslint-disable-next-line handle-callback-err\n            jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${value}`, (err, data) => {\n                const dataSource = data.result.map(item => {\n                    return {\n                        label: <div><Icon type=\"picture\" size=\"small\"/>&nbsp;{item[0]}</div>,\n                        value: item[1],\n                        originLabel: item[0]\n                    };\n                });\n                this.setState({dataSource});\n            });\n        }, 100);\n    }\n\n    render() {\n        return (\n            <div className=\"demo-container\">\n                <AutoComplete onChange={this.handleChange}\n                    filterLocal={false}\n                    fillProps=\"originLabel\"\n                    placeholder=\"search from taobao\"\n                    dataSource={this.state.dataSource}/></div>\n        );\n    }\n}\nReactDOM.render(<Demo/>, mountNode);
.next-select {\n    margin-right:10px;\n    vertical-align: middle;\n}\n\n.demo-container {\n  background-color: #F8F8F8;\n  padding: 16px;\n}\n\n.demo-container p {\n    margin-top:0;\n}
"} \ No newline at end of file diff --git a/compiled_docs/select/demo/combobox-rich-text.md b/compiled_docs/select/demo/combobox-rich-text.md new file mode 100644 index 0000000000..d0f3934633 --- /dev/null +++ b/compiled_docs/select/demo/combobox-rich-text.md @@ -0,0 +1 @@ +{"title":"图文展示","meta":{"title":"图文展示","description":"\n

展示较为复杂的内容展示

\n","order":"12"},"codes":{"jsx":"import { Select, Icon } from '@alifd/next';\nimport jsonp from 'jsonp';\n\nconst {AutoComplete} = Select;\n\nclass Demo extends React.Component {\n state = {\n dataSource: []\n }\n\n handleChange = (value) => {\n if (this.searchTimeout) {\n clearTimeout(this.searchTimeout);\n }\n this.searchTimeout = setTimeout(() => {\n // eslint-disable-next-line handle-callback-err\n jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${value}`, (err, data) => {\n const dataSource = data.result.map(item => {\n return {\n label:
 {item[0]}
,\n value: item[1],\n originLabel: item[0]\n };\n });\n this.setState({dataSource});\n });\n }, 100);\n }\n\n render() {\n return (\n
\n
\n );\n }\n}\nReactDOM.render(, mountNode);\n","css":".next-select {\n margin-right:10px;\n vertical-align: middle;\n}\n\n.demo-container {\n background-color: #F8F8F8;\n padding: 16px;\n}\n\n.demo-container p {\n margin-top:0;\n}\n"},"body":"\n\n````jsx\nimport { Select, Icon } from '@alifd/next';\nimport jsonp from 'jsonp';\n\nconst {AutoComplete} = Select;\n\nclass Demo extends React.Component {\n state = {\n dataSource: []\n }\n\n handleChange = (value) => {\n if (this.searchTimeout) {\n clearTimeout(this.searchTimeout);\n }\n this.searchTimeout = setTimeout(() => {\n // eslint-disable-next-line handle-callback-err\n jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${value}`, (err, data) => {\n const dataSource = data.result.map(item => {\n return {\n label:
 {item[0]}
,\n value: item[1],\n originLabel: item[0]\n };\n });\n this.setState({dataSource});\n });\n }, 100);\n }\n\n render() {\n return (\n
\n
\n );\n }\n}\nReactDOM.render(, mountNode);\n````\n\n````css\n.next-select {\n margin-right:10px;\n vertical-align: middle;\n}\n\n.demo-container {\n background-color: #F8F8F8;\n padding: 16px;\n}\n\n.demo-container p {\n margin-top:0;\n}\n````","html":"
import { Select, Icon } from '@alifd/next';\nimport jsonp from 'jsonp';\n\nconst {AutoComplete} = Select;\n\nclass Demo extends React.Component {\n    state = {\n        dataSource: []\n    }\n\n    handleChange = (value) => {\n        if (this.searchTimeout) {\n            clearTimeout(this.searchTimeout);\n        }\n        this.searchTimeout = setTimeout(() => {\n            // eslint-disable-next-line handle-callback-err\n            jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${value}`, (err, data) => {\n                const dataSource = data.result.map(item => {\n                    return {\n                        label: <div><Icon type=\"picture\" size=\"small\"/>&nbsp;{item[0]}</div>,\n                        value: item[1],\n                        originLabel: item[0]\n                    };\n                });\n                this.setState({dataSource});\n            });\n        }, 100);\n    }\n\n    render() {\n        return (\n            <div className=\"demo-container\">\n                <AutoComplete onChange={this.handleChange}\n                    filterLocal={false}\n                    fillProps=\"originLabel\"\n                    placeholder=\"search from taobao\"\n                    dataSource={this.state.dataSource}/></div>\n        );\n    }\n}\nReactDOM.render(<Demo/>, mountNode);
.next-select {\n    margin-right:10px;\n    vertical-align: middle;\n}\n\n.demo-container {\n  background-color: #F8F8F8;\n  padding: 16px;\n}\n\n.demo-container p {\n    margin-top:0;\n}
"} \ No newline at end of file diff --git a/compiled_docs/select/demo/combobox.en-us.md b/compiled_docs/select/demo/combobox.en-us.md new file mode 100644 index 0000000000..89307ac5fc --- /dev/null +++ b/compiled_docs/select/demo/combobox.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

AutoComplete inherits the capabilities of Input and adds autoComplete functionality to it.

\n","order":"9"},"codes":{"jsx":"import { Select } from '@alifd/next';\n\nconst dataSource = [\n 'Lucy King',\n 'Lily King',\n 'Jim Green',\n {\n label: 'Chinese',\n children: [\n {value: 'Hang Meimei', label: 'Hang Meimei'},\n 'Li Lei',\n {value: 'Gao Hui', label: 'Gao Hui', disabled: true},\n 'Zhang San',\n 'Li Si',\n 'Wang Wu',\n {value: 'Zhao Benshan', label: 'Zhao Benshan', disabled: true},\n 'Sun Yang',\n 'Song Shuying'\n ]\n },\n {\n label: 'Pets',\n children: [\n 'Poly',\n 'Kitty'\n ]\n }\n];\n\nconst onChange = (v) => {\n console.log(v);\n};\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Select } from '@alifd/next';\n\nconst dataSource = [\n 'Lucy King',\n 'Lily King',\n 'Jim Green',\n {\n label: 'Chinese',\n children: [\n {value: 'Hang Meimei', label: 'Hang Meimei'},\n 'Li Lei',\n {value: 'Gao Hui', label: 'Gao Hui', disabled: true},\n 'Zhang San',\n 'Li Si',\n 'Wang Wu',\n {value: 'Zhao Benshan', label: 'Zhao Benshan', disabled: true},\n 'Sun Yang',\n 'Song Shuying'\n ]\n },\n {\n label: 'Pets',\n children: [\n 'Poly',\n 'Kitty'\n ]\n }\n];\n\nconst onChange = (v) => {\n console.log(v);\n};\n\nReactDOM.render(, mountNode);\n````","html":"
import { Select } from '@alifd/next';\n\nconst dataSource = [\n    'Lucy King',\n    'Lily King',\n    'Jim Green',\n    {\n        label: 'Chinese',\n        children: [\n            {value: 'Hang Meimei', label: 'Hang Meimei'},\n            'Li Lei',\n            {value: 'Gao Hui', label: 'Gao Hui', disabled: true},\n            'Zhang San',\n            'Li Si',\n            'Wang Wu',\n            {value: 'Zhao Benshan', label: 'Zhao Benshan', disabled: true},\n            'Sun Yang',\n            'Song Shuying'\n        ]\n    },\n    {\n        label: 'Pets',\n        children: [\n            'Poly',\n            'Kitty'\n        ]\n    }\n];\n\nconst onChange = (v) => {\n    console.log(v);\n};\n\nReactDOM.render(<Select.AutoComplete style={{width: 300}} onChange={onChange} dataSource={dataSource} />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/select/demo/combobox.md b/compiled_docs/select/demo/combobox.md new file mode 100644 index 0000000000..b4ac6307ec --- /dev/null +++ b/compiled_docs/select/demo/combobox.md @@ -0,0 +1 @@ +{"title":"自动完成","meta":{"title":"自动完成","description":"\n

AutoComplete 继承了 Input 的能力，并在其基础上增加了 autoComplete 的功能。\n对于设置为AutoComplete为off不生效对的情况，可以参考 MDN 中进行设置。

\n","order":"9"},"codes":{"jsx":"import { Select } from '@alifd/next';\n\nconst dataSource = [\n 'Lucy King',\n 'Lily King',\n 'Jim Green',\n {\n label: 'Chinese',\n children: [\n {value: 'Hang Meimei', label: 'Hang Meimei'},\n 'Li Lei',\n {value: 'Gao Hui', label: 'Gao Hui', disabled: true},\n 'Zhang San',\n 'Li Si',\n 'Wang Wu',\n {value: 'Zhao Benshan', label: 'Zhao Benshan', disabled: true},\n 'Sun Yang',\n 'Song Shuying'\n ]\n },\n {\n label: 'Pets',\n children: [\n 'Poly',\n 'Kitty'\n ]\n }\n];\n\nconst onChange = (v) => {\n console.log(v);\n};\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Select } from '@alifd/next';\n\nconst dataSource = [\n 'Lucy King',\n 'Lily King',\n 'Jim Green',\n {\n label: 'Chinese',\n children: [\n {value: 'Hang Meimei', label: 'Hang Meimei'},\n 'Li Lei',\n {value: 'Gao Hui', label: 'Gao Hui', disabled: true},\n 'Zhang San',\n 'Li Si',\n 'Wang Wu',\n {value: 'Zhao Benshan', label: 'Zhao Benshan', disabled: true},\n 'Sun Yang',\n 'Song Shuying'\n ]\n },\n {\n label: 'Pets',\n children: [\n 'Poly',\n 'Kitty'\n ]\n }\n];\n\nconst onChange = (v) => {\n console.log(v);\n};\n\nReactDOM.render(, mountNode);\n````","html":"
import { Select } from '@alifd/next';\n\nconst dataSource = [\n    'Lucy King',\n    'Lily King',\n    'Jim Green',\n    {\n        label: 'Chinese',\n        children: [\n            {value: 'Hang Meimei', label: 'Hang Meimei'},\n            'Li Lei',\n            {value: 'Gao Hui', label: 'Gao Hui', disabled: true},\n            'Zhang San',\n            'Li Si',\n            'Wang Wu',\n            {value: 'Zhao Benshan', label: 'Zhao Benshan', disabled: true},\n            'Sun Yang',\n            'Song Shuying'\n        ]\n    },\n    {\n        label: 'Pets',\n        children: [\n            'Poly',\n            'Kitty'\n        ]\n    }\n];\n\nconst onChange = (v) => {\n    console.log(v);\n};\n\nReactDOM.render(<Select.AutoComplete style={{width: 300}} onChange={onChange} dataSource={dataSource} />, mountNode);
"} \ No newline at end of file diff --git a/compiled_docs/select/demo/customize-menu.en-us.md b/compiled_docs/select/demo/customize-menu.en-us.md new file mode 100644 index 0000000000..2cc7481128 --- /dev/null +++ b/compiled_docs/select/demo/customize-menu.en-us.md @@ -0,0 +1 @@ +{"title":"custom render","meta":{"title":"custom render","description":"\n

custom render Item by api of itemRender and valueRender (only support by Select)

\n","order":"13"},"codes":{"jsx":"import { Select, Icon } from '@alifd/next';\n\nconst dataSource = [\n {value: '#FF0000', label: 'red', title: 'red'},\n {value: '#00AA00', label: 'green', title: 'green'},\n {value: '#B482DB', label: 'purple', title: 'purple'},\n {value: '#F17334', label: 'orange', title: 'orange'},\n {value: '#66CCFF', label: 'blue', title: 'blue'}\n];\n\nconst itemRender = item => {\n return (\n \n \n \n \n \n \n \n );\n};\n\nconst valueRender = item => {\n return {item.label};\n};\n\nconst dataSource2 = [\n 'Lorem ipsum dolor sit amet',\n 'consectetur adipisicing elit',\n 'sed do eiusmod tempor incididunt',\n 'ut labore et dolore magna aliqua.',\n 'Ut enim ad minim veniam',\n 'quis nostrud exercitation',\n 'ullamco laboris nisi ut',\n 'aliquip ex ea commodo consequat',\n 'Duis aute irure dolor in',\n 'reprehenderit in voluptate',\n 'velit esse cillum dolore eu',\n 'Fugiat nulla pariatur excepteur sint',\n 'occaecat cupidatat non proident',\n 'sunt in culpa qui officia',\n 'deserunt mollit anim id est laborum'\n];\n\n// highlight keywords\nconst itemRender2 = (item, searchKey) => {\n let label = item.label;\n if (searchKey && searchKey.length) {\n const key = searchKey.replace(/[-/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&');\n const reg = new RegExp(`(${key})`, 'ig');\n label = label.replace(reg, x => `${x}`);\n }\n\n return ;\n};\n\nReactDOM.render(\n
\n \n
,\n mountNode\n);\n","css":".demo-container {\n padding: 16px;\n background-color: #F8F8F8;\n}\n\n.demo-container .next-select {\n margin-right: 10px;\n}\n"},"body":"\n````jsx\nimport { Select, Icon } from '@alifd/next';\n\nconst dataSource = [\n {value: '#FF0000', label: 'red', title: 'red'},\n {value: '#00AA00', label: 'green', title: 'green'},\n {value: '#B482DB', label: 'purple', title: 'purple'},\n {value: '#F17334', label: 'orange', title: 'orange'},\n {value: '#66CCFF', label: 'blue', title: 'blue'}\n];\n\nconst itemRender = item => {\n return (\n \n \n \n \n \n \n \n );\n};\n\nconst valueRender = item => {\n return {item.label};\n};\n\nconst dataSource2 = [\n 'Lorem ipsum dolor sit amet',\n 'consectetur adipisicing elit',\n 'sed do eiusmod tempor incididunt',\n 'ut labore et dolore magna aliqua.',\n 'Ut enim ad minim veniam',\n 'quis nostrud exercitation',\n 'ullamco laboris nisi ut',\n 'aliquip ex ea commodo consequat',\n 'Duis aute irure dolor in',\n 'reprehenderit in voluptate',\n 'velit esse cillum dolore eu',\n 'Fugiat nulla pariatur excepteur sint',\n 'occaecat cupidatat non proident',\n 'sunt in culpa qui officia',\n 'deserunt mollit anim id est laborum'\n];\n\n// highlight keywords\nconst itemRender2 = (item, searchKey) => {\n let label = item.label;\n if (searchKey && searchKey.length) {\n const key = searchKey.replace(/[-/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&');\n const reg = new RegExp(`(${key})`, 'ig');\n label = label.replace(reg, x => `${x}`);\n }\n\n return ;\n};\n\nReactDOM.render(\n
\n \n
,\n mountNode\n);\n````\n\n````css\n.demo-container {\n padding: 16px;\n background-color: #F8F8F8;\n}\n\n.demo-container .next-select {\n margin-right: 10px;\n}\n````","html":"
import { Select, Icon } from '@alifd/next';\n\nconst dataSource = [\n    {value: '#FF0000', label: 'red', title: 'red'},\n    {value: '#00AA00', label: 'green', title: 'green'},\n    {value: '#B482DB', label: 'purple', title: 'purple'},\n    {value: '#F17334', label: 'orange', title: 'orange'},\n    {value: '#66CCFF', label: 'blue', title: 'blue'}\n];\n\nconst itemRender = item => {\n    return (\n        <span>\n            <Icon type=\"account\" size=\"xs\" style={{color: item.value}} />\n            <Icon type=\"account\" size=\"xs\" style={{color: item.value}} />\n            <Icon type=\"account\" size=\"xs\" style={{color: item.value}} />\n            <Icon type=\"account\" size=\"xs\" style={{color: item.value}} />\n            <Icon type=\"account\" size=\"xs\" style={{color: item.value}} />\n        </span>\n    );\n};\n\nconst valueRender = item => {\n    return <span><Icon type=\"account\" size=\"xs\" style={{color: item.value}} /> {item.label}</span>;\n};\n\nconst dataSource2 = [\n    'Lorem ipsum dolor sit amet',\n    'consectetur adipisicing elit',\n    'sed do eiusmod tempor incididunt',\n    'ut labore et dolore magna aliqua.',\n    'Ut enim ad minim veniam',\n    'quis nostrud exercitation',\n    'ullamco laboris nisi ut',\n    'aliquip ex ea commodo consequat',\n    'Duis aute irure dolor in',\n    'reprehenderit in voluptate',\n    'velit esse cillum dolore eu',\n    'Fugiat nulla pariatur excepteur sint',\n    'occaecat cupidatat non proident',\n    'sunt in culpa qui officia',\n    'deserunt mollit anim id est laborum'\n];\n\n// highlight keywords\nconst itemRender2 = (item, searchKey) => {\n    let label = item.label;\n    if (searchKey && searchKey.length) {\n        const key = searchKey.replace(/[-/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&');\n        const reg = new RegExp(`(${key})`, 'ig');\n        label = label.replace(reg, x => `<span class=\"next-select-highlight\">${x}</span>`);\n    }\n\n    return <span dangerouslySetInnerHTML={{__html: label}} />;\n};\n\nReactDOM.render(\n    <div className=\"demo-container\">\n        <Select dataSource={dataSource} itemRender={itemRender} valueRender={valueRender} placeholder=\"pick your color\" />\n        <Select showSearch dataSource={dataSource2} itemRender={itemRender2} placeholder=\"highlight keywords\" style={{minWidth: 200}} />\n    </div>,\n    mountNode\n);
.demo-container {\n    padding: 16px;\n    background-color: #F8F8F8;\n}\n\n.demo-container .next-select {\n    margin-right: 10px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/select/demo/customize-menu.md b/compiled_docs/select/demo/customize-menu.md new file mode 100644 index 0000000000..d535b0362f --- /dev/null +++ b/compiled_docs/select/demo/customize-menu.md @@ -0,0 +1 @@ +{"title":"自定义渲染","meta":{"title":"自定义渲染","description":"\n

通过 itemRender 和 valueRender (仅 Select) 自定义渲染的节点内容。

\n","order":"13"},"codes":{"jsx":"import { Select, Icon } from '@alifd/next';\n\nconst dataSource = [\n {value: '#FF0000', label: 'red', title: 'red'},\n {value: '#00AA00', label: 'green', title: 'green'},\n {value: '#B482DB', label: 'purple', title: 'purple'},\n {value: '#F17334', label: 'orange', title: 'orange'},\n {value: '#66CCFF', label: 'blue', title: 'blue'}\n];\n\nconst itemRender = item => {\n return (\n \n \n \n \n \n \n \n );\n};\n\nconst valueRender = item => {\n return {item.label};\n};\n\nconst dataSource2 = [\n 'Lorem ipsum dolor sit amet',\n 'consectetur adipisicing elit',\n 'sed do eiusmod tempor incididunt',\n 'ut labore et dolore magna aliqua.',\n 'Ut enim ad minim veniam',\n 'quis nostrud exercitation',\n 'ullamco laboris nisi ut',\n 'aliquip ex ea commodo consequat',\n 'Duis aute irure dolor in',\n 'reprehenderit in voluptate',\n 'velit esse cillum dolore eu',\n 'Fugiat nulla pariatur excepteur sint',\n 'occaecat cupidatat non proident',\n 'sunt in culpa qui officia',\n 'deserunt mollit anim id est laborum'\n];\n\n// highlight keywords\nconst itemRender2 = (item, searchKey) => {\n let label = item.label;\n if (searchKey && searchKey.length) {\n const key = searchKey.replace(/[-/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&');\n const reg = new RegExp(`(${key})`, 'ig');\n label = label.replace(reg, x => `${x}`);\n }\n\n return ;\n};\n\nReactDOM.render(\n
\n \n
,\n mountNode\n);\n","css":".demo-container {\n padding: 16px;\n background-color: #F8F8F8;\n}\n\n.demo-container .next-select {\n margin-right: 10px;\n}\n"},"body":"\n\n````jsx\nimport { Select, Icon } from '@alifd/next';\n\nconst dataSource = [\n {value: '#FF0000', label: 'red', title: 'red'},\n {value: '#00AA00', label: 'green', title: 'green'},\n {value: '#B482DB', label: 'purple', title: 'purple'},\n {value: '#F17334', label: 'orange', title: 'orange'},\n {value: '#66CCFF', label: 'blue', title: 'blue'}\n];\n\nconst itemRender = item => {\n return (\n \n \n \n \n \n \n \n );\n};\n\nconst valueRender = item => {\n return {item.label};\n};\n\nconst dataSource2 = [\n 'Lorem ipsum dolor sit amet',\n 'consectetur adipisicing elit',\n 'sed do eiusmod tempor incididunt',\n 'ut labore et dolore magna aliqua.',\n 'Ut enim ad minim veniam',\n 'quis nostrud exercitation',\n 'ullamco laboris nisi ut',\n 'aliquip ex ea commodo consequat',\n 'Duis aute irure dolor in',\n 'reprehenderit in voluptate',\n 'velit esse cillum dolore eu',\n 'Fugiat nulla pariatur excepteur sint',\n 'occaecat cupidatat non proident',\n 'sunt in culpa qui officia',\n 'deserunt mollit anim id est laborum'\n];\n\n// highlight keywords\nconst itemRender2 = (item, searchKey) => {\n let label = item.label;\n if (searchKey && searchKey.length) {\n const key = searchKey.replace(/[-/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&');\n const reg = new RegExp(`(${key})`, 'ig');\n label = label.replace(reg, x => `${x}`);\n }\n\n return ;\n};\n\nReactDOM.render(\n
\n \n
,\n mountNode\n);\n````\n\n````css\n.demo-container {\n padding: 16px;\n background-color: #F8F8F8;\n}\n\n.demo-container .next-select {\n margin-right: 10px;\n}\n````","html":"
import { Select, Icon } from '@alifd/next';\n\nconst dataSource = [\n    {value: '#FF0000', label: 'red', title: 'red'},\n    {value: '#00AA00', label: 'green', title: 'green'},\n    {value: '#B482DB', label: 'purple', title: 'purple'},\n    {value: '#F17334', label: 'orange', title: 'orange'},\n    {value: '#66CCFF', label: 'blue', title: 'blue'}\n];\n\nconst itemRender = item => {\n    return (\n        <span>\n            <Icon type=\"account\" size=\"xs\" style={{color: item.value}} />\n            <Icon type=\"account\" size=\"xs\" style={{color: item.value}} />\n            <Icon type=\"account\" size=\"xs\" style={{color: item.value}} />\n            <Icon type=\"account\" size=\"xs\" style={{color: item.value}} />\n            <Icon type=\"account\" size=\"xs\" style={{color: item.value}} />\n        </span>\n    );\n};\n\nconst valueRender = item => {\n    return <span><Icon type=\"account\" size=\"xs\" style={{color: item.value}} /> {item.label}</span>;\n};\n\nconst dataSource2 = [\n    'Lorem ipsum dolor sit amet',\n    'consectetur adipisicing elit',\n    'sed do eiusmod tempor incididunt',\n    'ut labore et dolore magna aliqua.',\n    'Ut enim ad minim veniam',\n    'quis nostrud exercitation',\n    'ullamco laboris nisi ut',\n    'aliquip ex ea commodo consequat',\n    'Duis aute irure dolor in',\n    'reprehenderit in voluptate',\n    'velit esse cillum dolore eu',\n    'Fugiat nulla pariatur excepteur sint',\n    'occaecat cupidatat non proident',\n    'sunt in culpa qui officia',\n    'deserunt mollit anim id est laborum'\n];\n\n// highlight keywords\nconst itemRender2 = (item, searchKey) => {\n    let label = item.label;\n    if (searchKey && searchKey.length) {\n        const key = searchKey.replace(/[-/\\\\^$*+?.()|[\\]{}]/g, '\\\\$&');\n        const reg = new RegExp(`(${key})`, 'ig');\n        label = label.replace(reg, x => `<span class=\"next-select-highlight\">${x}</span>`);\n    }\n\n    return <span dangerouslySetInnerHTML={{__html: label}} />;\n};\n\nReactDOM.render(\n    <div className=\"demo-container\">\n        <Select dataSource={dataSource} itemRender={itemRender} valueRender={valueRender} placeholder=\"pick your color\" />\n        <Select showSearch dataSource={dataSource2} itemRender={itemRender2} placeholder=\"highlight keywords\" style={{minWidth: 200}} />\n    </div>,\n    mountNode\n);
.demo-container {\n    padding: 16px;\n    background-color: #F8F8F8;\n}\n\n.demo-container .next-select {\n    margin-right: 10px;\n}
"} \ No newline at end of file diff --git a/compiled_docs/select/demo/customize-overlay.en-us.md b/compiled_docs/select/demo/customize-overlay.en-us.md new file mode 100644 index 0000000000..b2f20e93b4 --- /dev/null +++ b/compiled_docs/select/demo/customize-overlay.en-us.md @@ -0,0 +1 @@ +{"title":"custom popup","meta":{"title":"custom popup","description":"\n

custom Popup by popupContent

\n","order":"14"},"codes":{"jsx":"import { Select } from '@alifd/next';\nimport classNames from 'classnames';\n/* eslint-disable react/prop-types, react/no-multi-comp */\n\n// prevent onBlur\nfunction preventDefault(e) {\n e.preventDefault();\n}\n\nclass Menu extends React.Component {\n data = [{\n label: 'value1',\n value: 1\n }, {\n label: 'value2',\n value: 2\n }];\n\n onClick(item) {\n this.props.onChange(item);\n }\n\n renderItems() {\n return this.data.map(item =>
  • {item.label}
    • );\n }\n\n render() {\n const {className, ...others} = this.props;\n const cls = classNames('overlay-content', className);\n\n return (\n
      \n {this.renderItems()}\n
    \n );\n }\n}\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n value: null\n };\n }\n\n handleSelect = (value) => {\n this.setState({\n value,\n visible: false\n });\n }\n\n onVisibleChange = (visible) => {\n this.setState({\n visible\n });\n }\n\n render() {\n const popupContent = ;\n const popupProps = {\n triggerClickKeycode: [13, 32, 40] // space, enter, down-arrow\n };\n\n return (\n
    \n \n
    \n );\n }\n}\nReactDOM.render(, mountNode);\n","css":".demo-container {\n background-color: #F8F8F8;\n padding: 16px;\n}\n\n.demo-container p {\n margin-top:0;\n}\n\n.overlay-content {\n border:1px solid #DDDDDD;\n padding:10px;\n background: #FFFFFF;\n margin:0;\n font-size: 12px;\n font-family: Arial;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n\n.overlay-content li {\n list-style: none;\n line-height:30px;\n padding: 0 5px;\n cursor: pointer;\n}\n\n.overlay-content li:hover {\n background: #F8F8F8;\n}\n\n.overlay-content li:last-child {\n border-width:0;\n}\n"},"body":"\n````jsx\nimport { Select } from '@alifd/next';\nimport classNames from 'classnames';\n/* eslint-disable react/prop-types, react/no-multi-comp */\n\n// prevent onBlur\nfunction preventDefault(e) {\n e.preventDefault();\n}\n\nclass Menu extends React.Component {\n data = [{\n label: 'value1',\n value: 1\n }, {\n label: 'value2',\n value: 2\n }];\n\n onClick(item) {\n this.props.onChange(item);\n }\n\n renderItems() {\n return this.data.map(item =>
  • {item.label}
    • );\n }\n\n render() {\n const {className, ...others} = this.props;\n const cls = classNames('overlay-content', className);\n\n return (\n
      \n {this.renderItems()}\n
    \n );\n }\n}\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n value: null\n };\n }\n\n handleSelect = (value) => {\n this.setState({\n value,\n visible: false\n });\n }\n\n onVisibleChange = (visible) => {\n this.setState({\n visible\n });\n }\n\n render() {\n const popupContent = ;\n const popupProps = {\n triggerClickKeycode: [13, 32, 40] // space, enter, down-arrow\n };\n\n return (\n
    \n \n
    \n );\n }\n}\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo-container {\n background-color: #F8F8F8;\n padding: 16px;\n}\n\n.demo-container p {\n margin-top:0;\n}\n\n.overlay-content {\n border:1px solid #DDDDDD;\n padding:10px;\n background: #FFFFFF;\n margin:0;\n font-size: 12px;\n font-family: Arial;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n\n.overlay-content li {\n list-style: none;\n line-height:30px;\n padding: 0 5px;\n cursor: pointer;\n}\n\n.overlay-content li:hover {\n background: #F8F8F8;\n}\n\n.overlay-content li:last-child {\n border-width:0;\n}\n````","html":"
    import { Select } from '@alifd/next';\nimport classNames from 'classnames';\n/* eslint-disable react/prop-types, react/no-multi-comp */\n\n// prevent onBlur\nfunction preventDefault(e) {\n    e.preventDefault();\n}\n\nclass Menu extends React.Component {\n    data = [{\n        label: 'value1',\n        value: 1\n    }, {\n        label: 'value2',\n        value: 2\n    }];\n\n    onClick(item) {\n        this.props.onChange(item);\n    }\n\n    renderItems() {\n        return this.data.map(item => <li onClick={this.onClick.bind(this, item)} key={item.value}>{item.label}</li>);\n    }\n\n    render() {\n        const {className, ...others} = this.props;\n        const cls = classNames('overlay-content', className);\n\n        return (\n            <ul className={cls} {...others}>\n                {this.renderItems()}\n            </ul>\n        );\n    }\n}\n\nclass Demo extends React.Component {\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: null\n        };\n    }\n\n    handleSelect = (value) => {\n        this.setState({\n            value,\n            visible: false\n        });\n    }\n\n    onVisibleChange = (visible) => {\n        this.setState({\n            visible\n        });\n    }\n\n    render() {\n        const popupContent = <Menu onChange={this.handleSelect} onMouseDown={preventDefault}/>;\n        const popupProps = {\n            triggerClickKeycode: [13, 32, 40] // space, enter, down-arrow\n        };\n\n        return (\n            <div className=\"demo-container\">\n                <Select\n                    placeholder=\"custom popupContent\"\n                    visible={this.state.visible}\n                    onVisibleChange={this.onVisibleChange}\n                    value={this.state.value}\n                    popupProps={popupProps}\n                    popupContent={popupContent} />\n            </div>\n        );\n    }\n}\nReactDOM.render(<Demo/>, mountNode);
    .demo-container {\n  background-color: #F8F8F8;\n  padding: 16px;\n}\n\n.demo-container p {\n    margin-top:0;\n}\n\n.overlay-content {\n    border:1px solid #DDDDDD;\n    padding:10px;\n    background: #FFFFFF;\n    margin:0;\n    font-size: 12px;\n    font-family: Arial;\n    box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n\n.overlay-content li {\n    list-style: none;\n    line-height:30px;\n    padding: 0 5px;\n    cursor: pointer;\n}\n\n.overlay-content li:hover {\n    background: #F8F8F8;\n}\n\n.overlay-content li:last-child {\n    border-width:0;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/select/demo/customize-overlay.md b/compiled_docs/select/demo/customize-overlay.md new file mode 100644 index 0000000000..bccf2d5f93 --- /dev/null +++ b/compiled_docs/select/demo/customize-overlay.md @@ -0,0 +1 @@ +{"title":"弹层定制","meta":{"title":"弹层定制","description":"\n

    通过 popupContent 定制 Select 弹层， Select 使用 popupContent 中渲染出的 item 的 value 作为菜单项的key，如果没有提供或者自定义渲染 key 请使用 valueRender

    \n","order":"14"},"codes":{"jsx":"import { Select } from '@alifd/next';\nimport classNames from 'classnames';\n/* eslint-disable react/prop-types, react/no-multi-comp */\n\n// prevent onBlur\nfunction preventDefault(e) {\n e.preventDefault();\n}\n\nclass Menu extends React.Component {\n data = [{\n label: 'value1',\n value: 1\n }, {\n label: 'value2',\n value: 2\n }];\n\n onClick(item) {\n this.props.onChange(item);\n }\n\n renderItems() {\n return this.data.map(item =>
  • {item.label}
    • );\n }\n\n render() {\n const {className, ...others} = this.props;\n const cls = classNames('overlay-content', className);\n\n return (\n
      \n {this.renderItems()}\n
    \n );\n }\n}\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n value: null\n };\n }\n\n handleSelect = (value) => {\n this.setState({\n value,\n visible: false\n });\n }\n\n onVisibleChange = (visible) => {\n this.setState({\n visible\n });\n }\n\n render() {\n const popupContent = ;\n const popupProps = {\n triggerClickKeycode: [13, 32, 40] // space, enter, down-arrow\n };\n\n return (\n
    \n \n
    \n );\n }\n}\nReactDOM.render(, mountNode);\n","css":".demo-container {\n background-color: #F8F8F8;\n padding: 16px;\n}\n\n.demo-container p {\n margin-top:0;\n}\n\n.overlay-content {\n border:1px solid #DDDDDD;\n padding:10px;\n background: #FFFFFF;\n margin:0;\n font-size: 12px;\n font-family: Arial;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n\n.overlay-content li {\n list-style: none;\n line-height:30px;\n padding: 0 5px;\n cursor: pointer;\n}\n\n.overlay-content li:hover {\n background: #F8F8F8;\n}\n\n.overlay-content li:last-child {\n border-width:0;\n}\n"},"body":"\n\n````jsx\nimport { Select } from '@alifd/next';\nimport classNames from 'classnames';\n/* eslint-disable react/prop-types, react/no-multi-comp */\n\n// prevent onBlur\nfunction preventDefault(e) {\n e.preventDefault();\n}\n\nclass Menu extends React.Component {\n data = [{\n label: 'value1',\n value: 1\n }, {\n label: 'value2',\n value: 2\n }];\n\n onClick(item) {\n this.props.onChange(item);\n }\n\n renderItems() {\n return this.data.map(item =>
  • {item.label}
    • );\n }\n\n render() {\n const {className, ...others} = this.props;\n const cls = classNames('overlay-content', className);\n\n return (\n
      \n {this.renderItems()}\n
    \n );\n }\n}\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n\n this.state = {\n value: null\n };\n }\n\n handleSelect = (value) => {\n this.setState({\n value,\n visible: false\n });\n }\n\n onVisibleChange = (visible) => {\n this.setState({\n visible\n });\n }\n\n render() {\n const popupContent = ;\n const popupProps = {\n triggerClickKeycode: [13, 32, 40] // space, enter, down-arrow\n };\n\n return (\n
    \n \n
    \n );\n }\n}\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo-container {\n background-color: #F8F8F8;\n padding: 16px;\n}\n\n.demo-container p {\n margin-top:0;\n}\n\n.overlay-content {\n border:1px solid #DDDDDD;\n padding:10px;\n background: #FFFFFF;\n margin:0;\n font-size: 12px;\n font-family: Arial;\n box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n\n.overlay-content li {\n list-style: none;\n line-height:30px;\n padding: 0 5px;\n cursor: pointer;\n}\n\n.overlay-content li:hover {\n background: #F8F8F8;\n}\n\n.overlay-content li:last-child {\n border-width:0;\n}\n````","html":"
    import { Select } from '@alifd/next';\nimport classNames from 'classnames';\n/* eslint-disable react/prop-types, react/no-multi-comp */\n\n// prevent onBlur\nfunction preventDefault(e) {\n    e.preventDefault();\n}\n\nclass Menu extends React.Component {\n    data = [{\n        label: 'value1',\n        value: 1\n    }, {\n        label: 'value2',\n        value: 2\n    }];\n\n    onClick(item) {\n        this.props.onChange(item);\n    }\n\n    renderItems() {\n        return this.data.map(item => <li onClick={this.onClick.bind(this, item)} key={item.value}>{item.label}</li>);\n    }\n\n    render() {\n        const {className, ...others} = this.props;\n        const cls = classNames('overlay-content', className);\n\n        return (\n            <ul className={cls} {...others}>\n                {this.renderItems()}\n            </ul>\n        );\n    }\n}\n\nclass Demo extends React.Component {\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: null\n        };\n    }\n\n    handleSelect = (value) => {\n        this.setState({\n            value,\n            visible: false\n        });\n    }\n\n    onVisibleChange = (visible) => {\n        this.setState({\n            visible\n        });\n    }\n\n    render() {\n        const popupContent = <Menu onChange={this.handleSelect} onMouseDown={preventDefault}/>;\n        const popupProps = {\n            triggerClickKeycode: [13, 32, 40] // space, enter, down-arrow\n        };\n\n        return (\n            <div className=\"demo-container\">\n                <Select\n                    placeholder=\"custom popupContent\"\n                    visible={this.state.visible}\n                    onVisibleChange={this.onVisibleChange}\n                    value={this.state.value}\n                    popupProps={popupProps}\n                    popupContent={popupContent} />\n            </div>\n        );\n    }\n}\nReactDOM.render(<Demo/>, mountNode);
    .demo-container {\n  background-color: #F8F8F8;\n  padding: 16px;\n}\n\n.demo-container p {\n    margin-top:0;\n}\n\n.overlay-content {\n    border:1px solid #DDDDDD;\n    padding:10px;\n    background: #FFFFFF;\n    margin:0;\n    font-size: 12px;\n    font-family: Arial;\n    box-shadow: 2px 2px 20px rgba(0,0,0,0.15);\n}\n\n.overlay-content li {\n    list-style: none;\n    line-height:30px;\n    padding: 0 5px;\n    cursor: pointer;\n}\n\n.overlay-content li:hover {\n    background: #F8F8F8;\n}\n\n.overlay-content li:last-child {\n    border-width:0;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/select/demo/multiple.en-us.md b/compiled_docs/select/demo/multiple.en-us.md new file mode 100644 index 0000000000..cceeeb6dbb --- /dev/null +++ b/compiled_docs/select/demo/multiple.en-us.md @@ -0,0 +1 @@ +{"title":"Multiple","meta":{"title":"Multiple","description":"\n

    multiple select

    \n","order":"2"},"codes":{"jsx":"import { Select } from '@alifd/next';\n\nconst dataSource = [\n {value: '10001', label: 'Lucy King'},\n {value: 10002, label: 'Lily King'},\n {value: 10003, label: 'Tom Cat', disabled: true},\n {label: 'Special Group', children: [\n {value: new Date(), label: 'new Date()'},\n {value: 'false', label: 'FALSE'},\n {value: 0, label: 'ZERO'}\n ]}\n];\n\nfunction handleChange(value) {\n console.log(value);\n}\n\n\nclass Demo extends React.Component{\n constructor(props) {\n super(props);\n this.state = {\n value: []\n };\n }\n\n handleChange = (value) => {\n this.setState({value});\n }\n\n render() {\n return (\n \n     \n );\n }\n}\n\n\nReactDOM.render(\n
    \n \n     \n \n
    \n, mountNode);\n````","html":"
    import { Select } from '@alifd/next';\n\nconst dataSource = [\n    {value: '10001', label: 'Lucy King'},\n    {value: 10002, label: 'Lily King'},\n    {value: 10003, label: 'Tom Cat', disabled: true},\n    {label: 'Special Group', children: [\n        {value: new Date(), label: 'new Date()'},\n        {value: 'false', label: 'FALSE'},\n        {value: 0, label: 'ZERO'}\n    ]}\n];\n\nfunction handleChange(value) {\n    console.log(value);\n}\n\n\nclass Demo extends React.Component{\n  constructor(props) {\n    super(props);\n    this.state = {\n      value: []\n    };\n  }\n\n  handleChange = (value) => {\n    this.setState({value});\n  }\n\n  render() {\n    return (\n    <Select hasSelectAll value={this.state.value}  mode=\"multiple\" onChange={this.handleChange} dataSource={dataSource} style={{width: 200}} />);\n  }\n}\n\n\nReactDOM.render(\n    <div>\n        <Select mode=\"multiple\" onChange={handleChange} dataSource={dataSource} style={{width: 200}} />\n        &nbsp;&nbsp;&nbsp;&nbsp;\n        <Select hasSelectAll mode=\"multiple\" onChange={handleChange} dataSource={dataSource} style={{width: 200}} />\n        &nbsp;&nbsp;&nbsp;&nbsp;\n        <Demo />\n    </div>\n, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/select/demo/multiple.md b/compiled_docs/select/demo/multiple.md new file mode 100644 index 0000000000..d385064f36 --- /dev/null +++ b/compiled_docs/select/demo/multiple.md @@ -0,0 +1 @@ +{"title":"多选","meta":{"title":"多选","description":"\n

    多选模式

    \n","order":"2"},"codes":{"jsx":"import { Select } from '@alifd/next';\n\nconst dataSource = [\n {value: '10001', label: 'Lucy King'},\n {value: 10002, label: 'Lily King'},\n {value: 10003, label: 'Tom Cat', disabled: true},\n {label: 'Special Group', children: [\n {value: new Date(), label: 'new Date()'},\n {value: 'false', label: 'FALSE'},\n {value: 0, label: 'ZERO'}\n ]}\n];\n\nfunction handleChange(value) {\n console.log(value);\n}\n\n\nclass Demo extends React.Component{\n constructor(props) {\n super(props);\n this.state = {\n value: []\n };\n }\n\n handleChange = (value) => {\n this.setState({value});\n }\n\n render() {\n return (\n \n     \n );\n }\n}\n\n\nReactDOM.render(\n
    \n \n     \n \n
    \n, mountNode);\n````","html":"
    import { Select } from '@alifd/next';\n\nconst dataSource = [\n    {value: '10001', label: 'Lucy King'},\n    {value: 10002, label: 'Lily King'},\n    {value: 10003, label: 'Tom Cat', disabled: true},\n    {label: 'Special Group', children: [\n        {value: new Date(), label: 'new Date()'},\n        {value: 'false', label: 'FALSE'},\n        {value: 0, label: 'ZERO'}\n    ]}\n];\n\nfunction handleChange(value) {\n    console.log(value);\n}\n\n\nclass Demo extends React.Component{\n  constructor(props) {\n    super(props);\n    this.state = {\n      value: []\n    };\n  }\n\n  handleChange = (value) => {\n    this.setState({value});\n  }\n\n  render() {\n    return (\n    <Select hasSelectAll value={this.state.value}  mode=\"multiple\" onChange={this.handleChange} dataSource={dataSource} style={{width: 200}} />);\n  }\n}\n\n\nReactDOM.render(\n    <div>\n        <Select mode=\"multiple\" onChange={handleChange} dataSource={dataSource} style={{width: 200}} />\n        &nbsp;&nbsp;&nbsp;&nbsp;\n        <Select hasSelectAll mode=\"multiple\" onChange={handleChange} dataSource={dataSource} style={{width: 200}} />\n        &nbsp;&nbsp;&nbsp;&nbsp;\n        <Demo />\n    </div>\n, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/select/demo/select-basic.en-us.md b/compiled_docs/select/demo/select-basic.en-us.md new file mode 100644 index 0000000000..1cbb1d035e --- /dev/null +++ b/compiled_docs/select/demo/select-basic.en-us.md @@ -0,0 +1 @@ +{"title":"Select","meta":{"title":"Select","description":"\n

    api usage of select

    \n","order":"3"},"codes":{"jsx":"import { Select } from '@alifd/next';\n\nconst dataSource = [\n {value: '10001', label: 'Lucy King'},\n {value: 10002, label: 'Lily King'},\n {value: 10003, label: 'Tom Cat', disabled: true},\n {label: 'Special Group', children: [\n {value: new Date(), label: 'new Date()'},\n {value: false, label: 'FALSE'},\n {value: 0, label: 'ZERO'}\n ]}\n];\n\nconst ctrlDataSources = {\n mode: ['single', 'multiple', 'tag'],\n size: ['small', 'medium', 'large'],\n showSearch: [true, false],\n hasArrow: [true, false],\n hasBorder: [true, false],\n hasClear: [true, false]\n};\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: null,\n size: undefined,\n mode: undefined,\n hasArrow: undefined,\n hasBorder: undefined,\n showSearch: undefined,\n hasClear: undefined\n };\n\n this.handleChange = this.handleChange.bind(this);\n this.handleCtrlChange = this.handleCtrlChange.bind(this);\n }\n\n handleCtrlChange(key, value) {\n this.setState({[key]: value});\n\n if (key === 'mode') {\n this.setState({value: null});\n }\n }\n\n handleChange(value, item) {\n console.log('handleChange: value: ', value, item);\n this.setState({value});\n }\n\n renderCtrlNodes(state) {\n const ctrlNodes = [];\n let k;\n for (k in ctrlDataSources) {\n if (ctrlDataSources.hasOwnProperty(k)) {\n ctrlNodes.push(\n \n );\n }\n }\n\n return ctrlNodes;\n }\n\n render() {\n\n return (\n
    \n
    {this.renderCtrlNodes(this.state)}
    \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo-container {\n padding: 16px;\n background-color: #F8F8F8;\n}\n\n.demo-controller {\n padding: 12px 12px 4px;\n margin-bottom: 16px;\n border: 2px dashed #ddd;\n}\n\n.next-select {\n margin-right: 8px;\n margin-bottom: 8px;\n}\n````","html":"
    import { Select } from '@alifd/next';\n\nconst dataSource = [\n    {value: '10001', label: 'Lucy King'},\n    {value: 10002, label: 'Lily King'},\n    {value: 10003, label: 'Tom Cat', disabled: true},\n    {label: 'Special Group', children: [\n        {value: new Date(), label: 'new Date()'},\n        {value: false, label: 'FALSE'},\n        {value: 0, label: 'ZERO'}\n    ]}\n];\n\nconst ctrlDataSources = {\n    mode: ['single', 'multiple', 'tag'],\n    size: ['small', 'medium', 'large'],\n    showSearch: [true, false],\n    hasArrow: [true, false],\n    hasBorder: [true, false],\n    hasClear: [true, false]\n};\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: null,\n            size: undefined,\n            mode: undefined,\n            hasArrow: undefined,\n            hasBorder: undefined,\n            showSearch: undefined,\n            hasClear: undefined\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n        this.handleCtrlChange = this.handleCtrlChange.bind(this);\n    }\n\n    handleCtrlChange(key, value) {\n        this.setState({[key]: value});\n\n        if (key === 'mode') {\n            this.setState({value: null});\n        }\n    }\n\n    handleChange(value, item) {\n        console.log('handleChange: value: ', value, item);\n        this.setState({value});\n    }\n\n    renderCtrlNodes(state) {\n        const ctrlNodes = [];\n        let k;\n        for (k in ctrlDataSources) {\n            if (ctrlDataSources.hasOwnProperty(k)) {\n                ctrlNodes.push(\n                    <Select key={k}\n                        label={`${k}: `}\n                        value={state[k]}\n                        id={k}\n                        dataSource={ctrlDataSources[k]}\n                        onChange={this.handleCtrlChange.bind(this, k)} />\n                );\n            }\n        }\n\n        return ctrlNodes;\n    }\n\n    render() {\n\n        return (\n            <div className=\"demo-container\">\n                <div className=\"demo-controller\">{this.renderCtrlNodes(this.state)}</div>\n                <Select\n                    {...this.state}\n                    onChange={this.handleChange}\n                    dataSource={dataSource} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    .demo-container {\n    padding: 16px;\n    background-color: #F8F8F8;\n}\n\n.demo-controller {\n    padding: 12px 12px 4px;\n    margin-bottom: 16px;\n    border: 2px dashed #ddd;\n}\n\n.next-select {\n    margin-right: 8px;\n    margin-bottom: 8px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/select/demo/select-basic.md b/compiled_docs/select/demo/select-basic.md new file mode 100644 index 0000000000..b06632014b --- /dev/null +++ b/compiled_docs/select/demo/select-basic.md @@ -0,0 +1 @@ +{"title":"选择器","meta":{"title":"选择器","description":"\n

    演示了 Select 的多种形态.

    \n","order":"3"},"codes":{"jsx":"import { Select } from '@alifd/next';\n\nconst dataSource = [\n {value: '10001', label: 'Lucy King'},\n {value: 10002, label: 'Lily King'},\n {value: 10003, label: 'Tom Cat', disabled: true},\n {label: 'Special Group', children: [\n {value: new Date(), label: 'new Date()'},\n {value: false, label: 'FALSE'},\n {value: 0, label: 'ZERO'}\n ]}\n];\n\nconst ctrlDataSources = {\n mode: ['single', 'multiple', 'tag'],\n size: ['small', 'medium', 'large'],\n showSearch: [true, false],\n hasArrow: [true, false],\n hasBorder: [true, false],\n hasClear: [true, false]\n};\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: null,\n size: undefined,\n mode: undefined,\n hasArrow: undefined,\n hasBorder: undefined,\n showSearch: undefined,\n hasClear: undefined\n };\n\n this.handleChange = this.handleChange.bind(this);\n this.handleCtrlChange = this.handleCtrlChange.bind(this);\n }\n\n handleCtrlChange(key, value) {\n this.setState({[key]: value});\n\n if (key === 'mode') {\n this.setState({value: null});\n }\n }\n\n handleChange(value, item) {\n console.log('handleChange: value: ', value, item);\n this.setState({value});\n }\n\n renderCtrlNodes(state) {\n const ctrlNodes = [];\n let k;\n for (k in ctrlDataSources) {\n if (ctrlDataSources.hasOwnProperty(k)) {\n ctrlNodes.push(\n \n );\n }\n }\n\n return ctrlNodes;\n }\n\n render() {\n\n return (\n
    \n
    {this.renderCtrlNodes(this.state)}
    \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.demo-container {\n padding: 16px;\n background-color: #F8F8F8;\n}\n\n.demo-controller {\n padding: 12px 12px 4px;\n margin-bottom: 16px;\n border: 2px dashed #ddd;\n}\n\n.next-select {\n margin-right: 8px;\n margin-bottom: 8px;\n}\n````","html":"
    import { Select } from '@alifd/next';\n\nconst dataSource = [\n    {value: '10001', label: 'Lucy King'},\n    {value: 10002, label: 'Lily King'},\n    {value: 10003, label: 'Tom Cat', disabled: true},\n    {label: 'Special Group', children: [\n        {value: new Date(), label: 'new Date()'},\n        {value: false, label: 'FALSE'},\n        {value: 0, label: 'ZERO'}\n    ]}\n];\n\nconst ctrlDataSources = {\n    mode: ['single', 'multiple', 'tag'],\n    size: ['small', 'medium', 'large'],\n    showSearch: [true, false],\n    hasArrow: [true, false],\n    hasBorder: [true, false],\n    hasClear: [true, false]\n};\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: null,\n            size: undefined,\n            mode: undefined,\n            hasArrow: undefined,\n            hasBorder: undefined,\n            showSearch: undefined,\n            hasClear: undefined\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n        this.handleCtrlChange = this.handleCtrlChange.bind(this);\n    }\n\n    handleCtrlChange(key, value) {\n        this.setState({[key]: value});\n\n        if (key === 'mode') {\n            this.setState({value: null});\n        }\n    }\n\n    handleChange(value, item) {\n        console.log('handleChange: value: ', value, item);\n        this.setState({value});\n    }\n\n    renderCtrlNodes(state) {\n        const ctrlNodes = [];\n        let k;\n        for (k in ctrlDataSources) {\n            if (ctrlDataSources.hasOwnProperty(k)) {\n                ctrlNodes.push(\n                    <Select key={k}\n                        label={`${k}: `}\n                        value={state[k]}\n                        id={k}\n                        dataSource={ctrlDataSources[k]}\n                        onChange={this.handleCtrlChange.bind(this, k)} />\n                );\n            }\n        }\n\n        return ctrlNodes;\n    }\n\n    render() {\n\n        return (\n            <div className=\"demo-container\">\n                <div className=\"demo-controller\">{this.renderCtrlNodes(this.state)}</div>\n                <Select\n                    {...this.state}\n                    onChange={this.handleChange}\n                    dataSource={dataSource} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    .demo-container {\n    padding: 16px;\n    background-color: #F8F8F8;\n}\n\n.demo-controller {\n    padding: 12px 12px 4px;\n    margin-bottom: 16px;\n    border: 2px dashed #ddd;\n}\n\n.next-select {\n    margin-right: 8px;\n    margin-bottom: 8px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/select/demo/select-cascader.en-us.md b/compiled_docs/select/demo/select-cascader.en-us.md new file mode 100644 index 0000000000..7ac1bb367d --- /dev/null +++ b/compiled_docs/select/demo/select-cascader.en-us.md @@ -0,0 +1 @@ +{"title":"cascader select","meta":{"title":"cascader select","description":"\n

    make a cascader by select

    \n","order":"4"},"codes":{"jsx":"import { Select } from '@alifd/next';\n\nconst provinceData = ['Zhejiang', 'Hubei', 'Jiangsu'];\nconst cityData = {\n Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],\n Hubei: ['Wuhan', 'Yichang', 'Jingzhou'],\n Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang']\n};\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n data: [],\n disabled: true\n };\n\n this.handleProvinceChange = this.handleProvinceChange.bind(this);\n this.handleCityChange = this.handleCityChange.bind(this);\n }\n\n handleProvinceChange(value) {\n const data = cityData[value];\n this.setState({data, province: value, city: '', disabled: !data});\n }\n\n handleCityChange(value) {\n this.setState({city: value});\n console.log(this.state.province, value);\n }\n\n render() {\n const {data, disabled, province, city} = this.state;\n\n return (\n
    \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".next-select {\n margin-right:10px;\n}\n\n.demo-container {\n background-color: #F8F8F8;\n padding: 16px;\n}\n"},"body":"\n````jsx\nimport { Select } from '@alifd/next';\n\nconst provinceData = ['Zhejiang', 'Hubei', 'Jiangsu'];\nconst cityData = {\n Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],\n Hubei: ['Wuhan', 'Yichang', 'Jingzhou'],\n Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang']\n};\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n data: [],\n disabled: true\n };\n\n this.handleProvinceChange = this.handleProvinceChange.bind(this);\n this.handleCityChange = this.handleCityChange.bind(this);\n }\n\n handleProvinceChange(value) {\n const data = cityData[value];\n this.setState({data, province: value, city: '', disabled: !data});\n }\n\n handleCityChange(value) {\n this.setState({city: value});\n console.log(this.state.province, value);\n }\n\n render() {\n const {data, disabled, province, city} = this.state;\n\n return (\n
    \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.next-select {\n margin-right:10px;\n}\n\n.demo-container {\n background-color: #F8F8F8;\n padding: 16px;\n}\n````","html":"
    import { Select } from '@alifd/next';\n\nconst provinceData = ['Zhejiang', 'Hubei', 'Jiangsu'];\nconst cityData = {\n    Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],\n    Hubei: ['Wuhan', 'Yichang', 'Jingzhou'],\n    Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang']\n};\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            data: [],\n            disabled: true\n        };\n\n        this.handleProvinceChange = this.handleProvinceChange.bind(this);\n        this.handleCityChange = this.handleCityChange.bind(this);\n    }\n\n    handleProvinceChange(value) {\n        const data = cityData[value];\n        this.setState({data, province: value, city: '', disabled: !data});\n    }\n\n    handleCityChange(value) {\n        this.setState({city: value});\n        console.log(this.state.province, value);\n    }\n\n    render() {\n        const {data, disabled, province, city} = this.state;\n\n        return (\n            <div className=\"demo-container\">\n                <Select placeholder=\"Select Province\" dataSource={provinceData} value={province} onChange={this.handleProvinceChange} />\n                <Select placeholder=\"Select City\" dataSource={data} value={city} onChange={this.handleCityChange} disabled={disabled}/>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo/>, mountNode);
    .next-select {\n    margin-right:10px;\n}\n\n.demo-container {\n    background-color: #F8F8F8;\n    padding: 16px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/select/demo/select-cascader.md b/compiled_docs/select/demo/select-cascader.md new file mode 100644 index 0000000000..e6c2392549 --- /dev/null +++ b/compiled_docs/select/demo/select-cascader.md @@ -0,0 +1 @@ +{"title":"级联选择","meta":{"title":"级联选择","description":"\n

    使用 Select 构建级联选择框

    \n","order":"4"},"codes":{"jsx":"import { Select } from '@alifd/next';\n\nconst provinceData = ['Zhejiang', 'Hubei', 'Jiangsu'];\nconst cityData = {\n Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],\n Hubei: ['Wuhan', 'Yichang', 'Jingzhou'],\n Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang']\n};\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n data: [],\n disabled: true\n };\n\n this.handleProvinceChange = this.handleProvinceChange.bind(this);\n this.handleCityChange = this.handleCityChange.bind(this);\n }\n\n handleProvinceChange(value) {\n const data = cityData[value];\n this.setState({data, province: value, city: '', disabled: !data});\n }\n\n handleCityChange(value) {\n this.setState({city: value});\n console.log(this.state.province, value);\n }\n\n render() {\n const {data, disabled, province, city} = this.state;\n\n return (\n
    \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".next-select {\n margin-right:10px;\n}\n\n.demo-container {\n background-color: #F8F8F8;\n padding: 16px;\n}\n"},"body":"\n\n````jsx\nimport { Select } from '@alifd/next';\n\nconst provinceData = ['Zhejiang', 'Hubei', 'Jiangsu'];\nconst cityData = {\n Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],\n Hubei: ['Wuhan', 'Yichang', 'Jingzhou'],\n Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang']\n};\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n data: [],\n disabled: true\n };\n\n this.handleProvinceChange = this.handleProvinceChange.bind(this);\n this.handleCityChange = this.handleCityChange.bind(this);\n }\n\n handleProvinceChange(value) {\n const data = cityData[value];\n this.setState({data, province: value, city: '', disabled: !data});\n }\n\n handleCityChange(value) {\n this.setState({city: value});\n console.log(this.state.province, value);\n }\n\n render() {\n const {data, disabled, province, city} = this.state;\n\n return (\n
    \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.next-select {\n margin-right:10px;\n}\n\n.demo-container {\n background-color: #F8F8F8;\n padding: 16px;\n}\n````","html":"
    import { Select } from '@alifd/next';\n\nconst provinceData = ['Zhejiang', 'Hubei', 'Jiangsu'];\nconst cityData = {\n    Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],\n    Hubei: ['Wuhan', 'Yichang', 'Jingzhou'],\n    Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang']\n};\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            data: [],\n            disabled: true\n        };\n\n        this.handleProvinceChange = this.handleProvinceChange.bind(this);\n        this.handleCityChange = this.handleCityChange.bind(this);\n    }\n\n    handleProvinceChange(value) {\n        const data = cityData[value];\n        this.setState({data, province: value, city: '', disabled: !data});\n    }\n\n    handleCityChange(value) {\n        this.setState({city: value});\n        console.log(this.state.province, value);\n    }\n\n    render() {\n        const {data, disabled, province, city} = this.state;\n\n        return (\n            <div className=\"demo-container\">\n                <Select placeholder=\"Select Province\" dataSource={provinceData} value={province} onChange={this.handleProvinceChange} />\n                <Select placeholder=\"Select City\" dataSource={data} value={city} onChange={this.handleCityChange} disabled={disabled}/>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo/>, mountNode);
    .next-select {\n    margin-right:10px;\n}\n\n.demo-container {\n    background-color: #F8F8F8;\n    padding: 16px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/select/demo/select-custom-value.en-us.md b/compiled_docs/select/demo/select-custom-value.en-us.md new file mode 100644 index 0000000000..eb4455a542 --- /dev/null +++ b/compiled_docs/select/demo/select-custom-value.en-us.md @@ -0,0 +1 @@ +{"title":"custom value","meta":{"title":"custom value","description":"\n

    value of Select could be any type, but it should be unique after toString()

    \n","order":"6"},"codes":{"jsx":"import { Select } from '@alifd/next';\n\nconst dataSource = [\n {value: 'Lilith', age: 22, gender: 'F'},\n {value: 'Tom Cat', age: 28, gender: 'M'},\n {value: 'Jim Green', age: 18, gender: 'M'},\n {value: 'Monkey King', age: 999, gender: 'M'}\n];\n\nconst handleChange = value => {\n console.log('handleChange: ', value);\n};\n\nconst valueRender = v => {\n return `${v.value} / ${v.gender} / ${v.age}`;\n};\n\nReactDOM.render(\n
    \n \n
    ,\n mountNode\n);\n","css":".demo-container {\n padding: 16px;\n background-color: #F8F8F8;\n}\n"},"body":"\n````jsx\nimport { Select } from '@alifd/next';\n\nconst dataSource = [\n {value: 'Lilith', age: 22, gender: 'F'},\n {value: 'Tom Cat', age: 28, gender: 'M'},\n {value: 'Jim Green', age: 18, gender: 'M'},\n {value: 'Monkey King', age: 999, gender: 'M'}\n];\n\nconst handleChange = value => {\n console.log('handleChange: ', value);\n};\n\nconst valueRender = v => {\n return `${v.value} / ${v.gender} / ${v.age}`;\n};\n\nReactDOM.render(\n
    \n \n
    ,\n mountNode\n);\n````\n\n````css\n.demo-container {\n padding: 16px;\n background-color: #F8F8F8;\n}\n````","html":"
    import { Select } from '@alifd/next';\n\nconst dataSource = [\n    {value: 'Lilith', age: 22, gender: 'F'},\n    {value: 'Tom Cat', age: 28, gender: 'M'},\n    {value: 'Jim Green', age: 18, gender: 'M'},\n    {value: 'Monkey King', age: 999, gender: 'M'}\n];\n\nconst handleChange = value => {\n    console.log('handleChange: ', value);\n};\n\nconst valueRender = v => {\n    return `${v.value} / ${v.gender} / ${v.age}`;\n};\n\nReactDOM.render(\n    <div className=\"demo-container\">\n        <Select\n            mode=\"multiple\"\n            placeholder=\"custom value\"\n            valueRender={valueRender}\n            dataSource={dataSource}\n            onChange={handleChange} />\n    </div>,\n    mountNode\n);
    .demo-container {\n    padding: 16px;\n    background-color: #F8F8F8;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/select/demo/select-custom-value.md b/compiled_docs/select/demo/select-custom-value.md new file mode 100644 index 0000000000..00132fddbf --- /dev/null +++ b/compiled_docs/select/demo/select-custom-value.md @@ -0,0 +1 @@ +{"title":"自定义 value","meta":{"title":"自定义 value","description":"\n

    Select 的 value 可以是任意非空类型的值，但是要保证 toString() 后是唯一的。

    \n","order":"6"},"codes":{"jsx":"import { Select } from '@alifd/next';\n\nconst dataSource = [\n {value: 'Lilith', age: 22, gender: 'F'},\n {value: 'Tom Cat', age: 28, gender: 'M'},\n {value: 'Jim Green', age: 18, gender: 'M'},\n {value: 'Monkey King', age: 999, gender: 'M'}\n];\n\nconst handleChange = value => {\n console.log('handleChange: ', value);\n};\n\nconst valueRender = v => {\n return `${v.value} / ${v.gender} / ${v.age}`;\n};\n\nReactDOM.render(\n
    \n \n
    ,\n mountNode\n);\n","css":".demo-container {\n padding: 16px;\n background-color: #F8F8F8;\n}\n"},"body":"\n\n````jsx\nimport { Select } from '@alifd/next';\n\nconst dataSource = [\n {value: 'Lilith', age: 22, gender: 'F'},\n {value: 'Tom Cat', age: 28, gender: 'M'},\n {value: 'Jim Green', age: 18, gender: 'M'},\n {value: 'Monkey King', age: 999, gender: 'M'}\n];\n\nconst handleChange = value => {\n console.log('handleChange: ', value);\n};\n\nconst valueRender = v => {\n return `${v.value} / ${v.gender} / ${v.age}`;\n};\n\nReactDOM.render(\n
    \n \n
    ,\n mountNode\n);\n````\n\n````css\n.demo-container {\n padding: 16px;\n background-color: #F8F8F8;\n}\n````","html":"
    import { Select } from '@alifd/next';\n\nconst dataSource = [\n    {value: 'Lilith', age: 22, gender: 'F'},\n    {value: 'Tom Cat', age: 28, gender: 'M'},\n    {value: 'Jim Green', age: 18, gender: 'M'},\n    {value: 'Monkey King', age: 999, gender: 'M'}\n];\n\nconst handleChange = value => {\n    console.log('handleChange: ', value);\n};\n\nconst valueRender = v => {\n    return `${v.value} / ${v.gender} / ${v.age}`;\n};\n\nReactDOM.render(\n    <div className=\"demo-container\">\n        <Select\n            mode=\"multiple\"\n            placeholder=\"custom value\"\n            valueRender={valueRender}\n            dataSource={dataSource}\n            onChange={handleChange} />\n    </div>,\n    mountNode\n);
    .demo-container {\n    padding: 16px;\n    background-color: #F8F8F8;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/select/demo/select-options-group.en-us.md b/compiled_docs/select/demo/select-options-group.en-us.md new file mode 100644 index 0000000000..cd7c861ffa --- /dev/null +++ b/compiled_docs/select/demo/select-options-group.en-us.md @@ -0,0 +1 @@ +{"title":"Group","meta":{"title":"Group","description":"\n

    use OptionGroup

    \n","order":"5"},"codes":{"jsx":"import { Select } from '@alifd/next';\n\nconst {Option, OptionGroup} = Select;\n\nconst dataSource = [{\n label: 'label1',\n children: [{\n label: 'label1-1',\n value: 'text1-1'\n }]\n}, {\n label: 'label2',\n children: [{\n label: 'label2-1',\n value: 'text2-1'\n }]\n}];\n\nReactDOM.render(\n
    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Select } from '@alifd/next';\nimport jsonp from 'jsonp';\n\nlet timestamp = Date.now();\n\nclass Demo extends React.Component {\n state = {\n dataSource: []\n }\n\n handleSearch = (value) => {\n if (this.searchTimeout) {\n clearTimeout(this.searchTimeout);\n }\n this.searchTimeout = setTimeout(() => {\n // eslint-disable-next-line handle-callback-err\n value ? jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${value}`, (err, data) => {\n const dataSource = data.result.map(item => ({\n label: item[0], value: (timestamp++).toString(36)\n }));\n this.setState({dataSource});\n }) : this.setState({dataSource: []});\n }, 100);\n }\n\n render() {\n return (\n
    \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Select } from '@alifd/next';\nimport jsonp from 'jsonp';\n\nlet timestamp = Date.now();\n\nclass Demo extends React.Component {\n state = {\n dataSource: []\n }\n\n handleSearch = (value) => {\n if (this.searchTimeout) {\n clearTimeout(this.searchTimeout);\n }\n this.searchTimeout = setTimeout(() => {\n // eslint-disable-next-line handle-callback-err\n value ? jsonp(`https://suggest.taobao.com/sug?code=utf-8&q=${value}`, (err, data) => {\n const dataSource = data.result.map(item => ({\n label: item[0], value: (timestamp++).toString(36)\n }));\n this.setState({dataSource});\n }) : this.setState({dataSource: []});\n }, 100);\n }\n\n render() {\n return (\n
    \n , mountNode);\n"},"body":"\n````jsx\nimport { Select } from '@alifd/next';\n\nconst dataSource = [\n {value: '10001', label: 'Lucy King'},\n {value: 10002, label: 'Lily King'},\n {value: 10003, label: 'Tom Cat', disabled: true},\n {label: 'Special Group', children: [\n {value: -1, label: 'FALSE'},\n {value: 0, label: 'ZERO'}\n ]}\n];\n\nfunction handleChange(value) {\n console.log(value);\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Select } from '@alifd/next';\n\nconst dataSource = [\n {value: '10001', label: 'Lucy King'},\n {value: 10002, label: 'Lily King'},\n {value: 10003, label: 'Tom Cat', disabled: true},\n {label: 'Special Group', children: [\n {value: -1, label: 'FALSE'},\n {value: 0, label: 'ZERO'}\n ]}\n];\n\nfunction handleChange(value) {\n console.log(value);\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Select } from '@alifd/next';\n\nconst dataSource = [\n {value: '10001', label: 'Lucy King'},\n {value: 10002, label: 'Lily King'},\n {value: 10003, label: 'Tom Cat', disabled: true},\n {label: 'Special Group', children: [\n {value: new Date(), label: 'new Date()'},\n {value: false, label: 'FALSE'},\n {value: 0, label: 'ZERO'}\n ]}\n];\n\nfunction handleChange(value) {\n console.log(value);\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Select } from '@alifd/next';\n\nconst dataSource = [\n {value: '10001', label: 'Lucy King'},\n {value: 10002, label: 'Lily King'},\n {value: 10003, label: 'Tom Cat', disabled: true},\n {label: 'Special Group', children: [\n {value: new Date(), label: 'new Date()'},\n {value: false, label: 'FALSE'},\n {value: 0, label: 'ZERO'}\n ]}\n];\n\nfunction handleChange(value) {\n console.log(value);\n}\n\nReactDOM.render(\n     \n \n
    \n , mountNode);\n"},"body":"\n````jsx\nimport { Select } from '@alifd/next';\n\nconst Option = Select.Option;\n\nconst onChange = function (value) {\n console.log(value);\n};\n\nfunction generateItem(index) {\n return {label: `option${index}`, value: `option${index}`};\n}\n\nfunction generateOption(index) {\n return ;\n}\n\nfunction generateData(len, isOption) {\n const data = [];\n\n for (let i = 0; i < len; i++) {\n isOption ? data.push(generateOption(i)) : data.push(generateItem(i));\n }\n\n return data;\n}\n\nReactDOM.render(\n
    \n \n {generateData(100, true)}\n \n
    \n , mountNode);\n````","html":"
    import { Select } from '@alifd/next';\n\nconst Option = Select.Option;\n\nconst onChange = function (value) {\n    console.log(value);\n};\n\nfunction generateItem(index) {\n    return {label: `option${index}`, value: `option${index}`};\n}\n\nfunction generateOption(index) {\n    return <Option key={`option${index}`} value={`option${index}`}>{`option${index}`}</Option>;\n}\n\nfunction generateData(len, isOption) {\n    const data = [];\n\n    for (let i = 0; i < len; i++) {\n        isOption ? data.push(generateOption(i)) : data.push(generateItem(i));\n    }\n\n    return data;\n}\n\nReactDOM.render(\n    <div>\n        <Select dataSource={generateData(100)} useVirtual onChange={onChange} defaultValue=\"option0\" />\n        &nbsp;&nbsp;&nbsp;&nbsp;\n        <Select useVirtual onChange={onChange} defaultValue=\"option50\">\n            {generateData(100, true)}\n        </Select>\n    </div>\n    , mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/select/demo/virtual-select.md b/compiled_docs/select/demo/virtual-select.md new file mode 100644 index 0000000000..1c72673209 --- /dev/null +++ b/compiled_docs/select/demo/virtual-select.md @@ -0,0 +1 @@ +{"title":"无限滚动","meta":{"title":"无限滚动","description":"\n

    select 配合无限滚动

    \n","order":"15"},"codes":{"jsx":"import { Select } from '@alifd/next';\n\nconst Option = Select.Option;\n\nconst onChange = function (value) {\n console.log(value);\n};\n\nfunction generateItem(index) {\n return {label: `option${index}`, value: `option${index}`};\n}\n\nfunction generateOption(index) {\n return ;\n}\n\nfunction generateData(len, isOption) {\n const data = [];\n\n for (let i = 0; i < len; i++) {\n isOption ? data.push(generateOption(i)) : data.push(generateItem(i));\n }\n\n return data;\n}\n\nReactDOM.render(\n
    \n \n {generateData(100, true)}\n \n
    \n , mountNode);\n"},"body":"\n\n````jsx\nimport { Select } from '@alifd/next';\n\nconst Option = Select.Option;\n\nconst onChange = function (value) {\n console.log(value);\n};\n\nfunction generateItem(index) {\n return {label: `option${index}`, value: `option${index}`};\n}\n\nfunction generateOption(index) {\n return ;\n}\n\nfunction generateData(len, isOption) {\n const data = [];\n\n for (let i = 0; i < len; i++) {\n isOption ? data.push(generateOption(i)) : data.push(generateItem(i));\n }\n\n return data;\n}\n\nReactDOM.render(\n
    \n \n {generateData(100, true)}\n \n
    \n , mountNode);\n````","html":"
    import { Select } from '@alifd/next';\n\nconst Option = Select.Option;\n\nconst onChange = function (value) {\n    console.log(value);\n};\n\nfunction generateItem(index) {\n    return {label: `option${index}`, value: `option${index}`};\n}\n\nfunction generateOption(index) {\n    return <Option key={`option${index}`} value={`option${index}`}>{`option${index}`}</Option>;\n}\n\nfunction generateData(len, isOption) {\n    const data = [];\n\n    for (let i = 0; i < len; i++) {\n        isOption ? data.push(generateOption(i)) : data.push(generateItem(i));\n    }\n\n    return data;\n}\n\nReactDOM.render(\n    <div>\n        <Select dataSource={generateData(100)} useVirtual onChange={onChange} defaultValue=\"option0\" />\n        &nbsp;&nbsp;&nbsp;&nbsp;\n        <Select useVirtual onChange={onChange} defaultValue=\"option50\">\n            {generateData(100, true)}\n        </Select>\n    </div>\n    , mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/select/index.en-us.md b/compiled_docs/select/index.en-us.md new file mode 100644 index 0000000000..82fbccb9f9 --- /dev/null +++ b/compiled_docs/select/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

    Guide#

    When to use#

    Select#

    If you don't expect the user-entered values ​​to take effect but just select, use Select. You can also use Select's showSearch property to filter.

    \n

    AutoComplete#

    AutoComplete retains the values ​​entered by the user, essentially the Input component, which extends the capabilities of autocomplete, so the properties of the Input component can be passed directly.

    \n

    common problem#

    There is a similar warning for flatternChildren#

    Select uses value as the key of the menu item by default. If the key value is not set, the default sequence index is used as the key value to ensure that these values ​​do not duplicate.

    \n

    Use of dataSource#

    Select supports both children and dataSource as the data source in the props. If set at the same time, children will prevail.

    \n

    Note: 1. Select uses value as the key value of the rendered menu item by default, so value cannot be repeated, otherwise the drop-down menu cannot be rendered. 2. Value does not allow null/undefined/object/array type values

    \n
      \n
    1. The way children
      2. \n
    \n
    <Select>\n    <Select.Option value="option1">option1</Select.Option>\n    <Select.Option value="option2">option2</Select.Option>\n    <Select.Option disabled>disabled</Select.Option>\n</Select>;
      \n
    1. The way props
      2. \n
    \n
    const dataSource = [\n    {label:'option1', value:'option1'},\n    {label:'option2', value:'option2'},\n    {label:'disabled', disabled:true}\n]\n<Select dataSource={dataSource}/>

    Customize Popup Layer#

    See the Embedded layer customization in the example. The only thing to notice is that the elements of overlay remember to pass through props.\nThis is because the layer's animation of the overlay is implemented by className. If you don't pass props, you will not be able to listen to the end of the animation.

    \n

    API#

    ","api":"

    Select#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    Sizeselector size

    optional values:
    'small', 'medium', 'large'    		Enum'medium'
    valueCurrent value for controlled modeany-
    defaultValueinitial defaultany-
    onChangeCallback that fires when Select changes

    Signature:
    Function(value: mixed, actionType: String) => void
    Parameters:
    value: {mixed} Selected value
    actionType: {String} Triggered, 'itemClick', 'enter', 'tag'
    item: {mixed} value in dataSource(only useDetailValue=false)    		Functionfunc.noop
    placeholderplaceholder when there is no valueReactNode-
    autoWidthDrop-down menu to align with selectorBooleantrue
    labelcustom inline labelReactNode-
    hasClearClear buttonBoolean-
    statevalidate state

    Optional:
    'error', 'loading'    		Enum-
    readOnlyIs read-only, can be expanded in read-only mode but cannot be selectedBoolean-
    disabledDisable selectorsBoolean-
    visibleThe current shell is displayedBoolean-
    defaultVisibleDoes the layer initialization showBoolean-
    onVisibleChangeCallback triggered when the layer is displayed or hidden

    Signature:
    Function(visible: Boolean) => void
    Parameters:
    visible: {Boolean} Does the shell display    		Functionfunc.noop
    popupContainershell container nodeString/Function-
    popupClassNameclassName of the shellany-
    popupStyleInline style of the shellObject-
    popupPropsAttributes added to the shellObject{}
    popupContentContent of custom shellReactNode-
    filterLocalWhether to use local filtering, turn this off when the data source is remoteBooleantrue
    filterA local filter method that returns a Boolean value to determine whether to keep

    Signature:
    Function() => void    		Functionfilter
    dataSourceThe incoming data source that can dynamically render children, as described in [DataSource Usage] (Use of #dataSource)Array<Object/Boolean/Number/String>-
    itemRenderHow to render MenuItem content






    Function(item: Object, searchValue: String) => ReactNode
    Parameters:
    item: {Object} Item for render node
    searchValue: {String} Search keyword (if search is enabled)
    Return value:
    {ReactNode} item node
    		Function-
    modeSelector mode

    Optional :
    'single', 'multiple', 'tag'    		Enum'single'
    notFoundContentEmpty copy of the shell contentReactNode'No options'
    hasBorderWhether there is a borderBoolean-
    showSearchCan search after expansion (fixed to true in tag mode)Booleanfalse
    onSearchCallback when the search box value changes

    Signature:
    Function(value: String) => void
    Parameters:
    value: {String } Data    		Functionfunc.noop
    onSearchClearCallback when the search box value is cleared

    Signature:
    Function(value: String) => void
    Parameters:
    actionType: {String} triggered method, 'itemClick', 'popupClose'    		Functionfunc.noop
    hasSelectAllIs there a Select All Function in Multiselect ModeBoolean/String-
    fillPropskey to fill the value of the select box key??String-
    useDetailValuevalue returned by onChange object using dataSourceBoolean-
    cacheValuedataSource keeps the selected contentBooleantrue
    valueRenderMethods for rendering Select to display content


















    Parameters:
    item: {Object} Render node's item
    return value :
    {ReactNode} show content
    		Functionitem => item.label \\\\item.value
    searchValueControlled search value, generally not setString-
    onRemovetag Delete callback


    Signature:
    Function(item: object) => void
    Parameters:
    item: {object} Render node's Item    		Functionfunc.noop
    onFocusfocus event

    签名:
    Function() => void    		Functionfunc.noop
    onBlurblur event

    签名:
    Function() => void    		Functionfunc.noop
    onToggleHighlightItemcallback func while highlight item changed

    签名:
    Function() => void    		Functionfunc.noop
    hiddenSelectedhide menu after selected (only mode="multiple" or "tag")Boolean-
    \n

    Select.AutoComplete#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    sizeselector size

    optional values:
    'small', 'medium', 'large'    		Enum'medium'
    valuecurrent value for controlled modeString/Number-
    defaultValueInitialization DefaultString/Number-
    onChangeCallback that fires when Select changes

    Signature:
    Function(value: mixed, actionType: String) => void
    Parameters:
    value: {mixed} selected value
    actionType: {String} triggered method, 'itemClick', 'enter', 'change'    		Function-
    placeholderplaceholder when there is no valueReactNode-
    autoWidthDrop-down menu to align with selectorBooleantrue
    labelcustom inline labelReactNode-
    hasClearClear buttonBoolean-
    statevalidate state

    Optional:
    'error', 'loading'    		Enum-
    readOnlyIs read-only, can be expanded in read-only mode but cannot be selectedBoolean-
    disabledDisable selectorsBoolean-
    visibleThe current shell is displayedBoolean-
    defaultVisibleDoes the layer initialization showBoolean-
    popupContainershell container nodeString/Function-
    popupClassNameclassName of the shellany-
    popupStyleInline style of the shellObject-
    popupPropsAttributes added to the shellObject{}
    popupContentContent of custom shellReactNode-
    filterLocalWhether to use local filtering, turn this off when the data source is remoteBooleantrue
    filterLocal filter method, returning a Boolean value to determine whether to keep

    Signature:
    Function() => void    		Functionfilter
    dataSourceIncoming data source that can dynamically render childrenArray<Object/String>-
    itemRenderHow to render MenuItem content

    Signature:
    Function(item: Object) => ReactNode
    Parameters:
    item: {Object} Rendering The node's item
    return value:
    {ReactNode} item node
    		Function-
    fillPropskey?? of the value filled into the selection box, default valueString'value'
    onToggleHighlightItemcallback func while highlight item changed

    签名:
    Function() => void    		Functionfunc.noop
    \n

    Select.OptionGroup#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    labelGrouping textReactNode-
    \n

    Select.Option#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    valueoption valueany-
    disableddisabledBoolean-
    \n

    ARIA and KeyBoard#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    按键说明
    Up ArrowGet the previous item focus of the current item
    Down ArrowGet the next item focus of the current item
    EnterOpen the list or select current item
    EscClose the list
    \n"} \ No newline at end of file diff --git a/compiled_docs/select/index.md b/compiled_docs/select/index.md new file mode 100644 index 0000000000..04910938d8 --- /dev/null +++ b/compiled_docs/select/index.md @@ -0,0 +1 @@ +{"meta":"

    Guide#

    何时使用#

    Select#

    如果你不期望用户输入的值生效而仅仅是选择，那么使用 Select. 同时可以使用 Select 的 showSearch 属性进行过滤。

    \n

    AutoComplete#

    AutoComplete 会保留用户输入的值，本质上是 Input 组件，扩展了 autocomplete 的能力，所以 Input 组件的属性可以直接透传。

    \n

    常见问题#

    出现类似的flatternChildren的warning#

    Select 默认使用 value 作为菜单项的 key，如果没有设置 key 值，则使用默认的序列 index 作为 key 值，确保这些值不会发生重复。

    \n

    dataSource的使用#

    Select 同时支持 children 和在 props 中传入 dataSource 作为数据源, 如果同时设置, 则以 children 为准.

    \n

    注意：1. Select 默认使用 value 作为渲染的菜单项的 key 值，所以 value 不能重复, 否则无法渲染下拉菜单。2. value 不允许出现 null/undefined/object/array 类型数值

    \n
      \n
    1. children的方式
      2. \n
    \n
    <Select>\n    <Select.Option value="option1">option1</Select.Option>\n    <Select.Option value="option2">option2</Select.Option>\n    <Select.Option disabled>disabled</Select.Option>\n</Select>;
      \n
    1. props的方式
      2. \n
    \n
    const dataSource = [\n    {label:'option1', value:'option1'},\n    {label:'option2', value:'option2'},\n    {label:'disabled', disabled:true}\n];\n\n<Select dataSource={dataSource}/>

    定制弹出层#

    参见示例中的 弹层定制。唯一需要注意的是 overlay 的元素记得透传 props.\n这是因为 Overlay 的弹层的动画是依靠 className 实现的，如果不透传 props 则会造成无法监听到动画播放结束的事件。

    \n

    API#

    ","api":"

    Select#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    size选择器尺寸

    可选值:
    'small', 'medium', 'large'    		Enum'medium'
    value当前值，用于受控模式any-
    defaultValue初始的默认值any-
    placeholder没有值的时候的占位符String-
    autoWidth下拉菜单是否与选择器对齐Booleantrue
    label自定义内联 labelReactNode-
    hasClear是否有清除按钮（单选模式有效）Boolean-
    state校验状态

    可选值:
    'error', 'loading'    		Enum-
    readOnly是否只读，只读模式下可以展开弹层但不能选Boolean-
    disabled是否禁用选择器Boolean-
    visible当前弹层是否显示Boolean-
    defaultVisible弹层初始化是否显示Boolean-
    onVisibleChange弹层显示或隐藏时触发的回调

    签名:
    Function(visible: Boolean) => void
    参数:
    visible: {Boolean} 弹层是否显示    		Functionfunc.noop
    popupContainer弹层挂载的容器节点String/Function-
    popupClassName弹层的 classNameany-
    popupStyle弹层的内联样式Object-
    popupProps添加到弹层上的属性Object{}
    popupContent自定义弹层的内容ReactNode-
    filterLocal是否使用本地过滤，在数据源为远程的时候需要关闭此项Booleantrue
    filter本地过滤方法，返回一个 Boolean 值确定是否保留

    签名:
    Function() => void    		Functionfilter
    onToggleHighlightItem键盘上下键切换菜单高亮选项的回调

    签名:
    Function() => void    		Functionfunc.noop
    useVirtual是否开启虚拟滚动模式Boolean-
    dataSource传入的数据源，可以动态渲染子项，详见 dataSource的使用Array<Object/Boolean/Number/String>-
    itemRender渲染 MenuItem 内容的方法

    签名:
    Function(item: Object, searchValue: String) => ReactNode
    参数:
    item: {Object} 渲染节点的item
    searchValue: {String} 搜索关键字（如果开启搜索）
    返回值:
    {ReactNode} item node
    		Function-
    mode选择器模式

    可选值:
    'single', 'multiple', 'tag'    		Enum'single'
    notFoundContent弹层内容为空的文案ReactNode-
    onChangeSelect发生改变时触发的回调

    签名:
    Function(value: mixed, actionType: String, item: mixed) => void
    参数:
    value: {mixed} 选中的值
    actionType: {String} 触发的方式, 'itemClick', 'enter', 'tag'
    item: {mixed} 选中的值的对象数据 (useDetailValue=false有效)    		Function-
    hasBorder是否有边框Boolean-
    hasArrow是否有下拉箭头Booleantrue
    showSearch展开后是否能搜索（tag 模式下固定为true）Booleanfalse
    onSearch当搜索框值变化时回调

    签名:
    Function(value: String) => void
    参数:
    value: {String} 数据    		Functionfunc.noop
    onSearchClear当搜索框值被清空时候的回调

    签名:
    Function(actionType: String) => void
    参数:
    actionType: {String} 触发的方式, 'select'(选择清空), 'popupClose'(弹窗关闭清空)    		Functionfunc.noop
    hasSelectAll多选模式下是否有全选功能Boolean/String-
    fillProps填充到选择框里的值的 key\b\bString-
    useDetailValueonChange 返回的 value 使用 dataSource 的对象Boolean-
    cacheValuedataSource 变化的时是否保留已选的内容Booleantrue
    valueRender渲染 Select 展现内容的方法

    签名:
    Function(item: Object) => ReactNode
    参数:
    item: {Object} 渲染节点的item
    返回值:
    {ReactNode} 展现内容
    		Functionitem => item.label \\\\item.value
    searchValue受控搜索值，一般不需要设置String-
    hiddenSelected选择后是否立即隐藏菜单 (mode=multiple/tag 模式生效)Boolean-
    onRemovetag 删除回调

    签名:
    Function(item: object) => void
    参数:
    item: {object} 渲染节点的item    		Functionfunc.noop
    onFocus焦点事件

    签名:
    Function() => void    		Functionfunc.noop
    onBlur失去焦点事件

    签名:
    Function() => void    		Functionfunc.noop
    \n

    Select.AutoComplete#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    size选择器尺寸

    可选值:
    'small', 'medium', 'large'    		Enum'medium'
    value当前值，用于受控模式String/Number-
    defaultValue初始化的默认值String/Number-
    placeholder没有值的时候的占位符String-
    autoWidth下拉菜单是否与选择器对齐Booleantrue
    label自定义内联 labelReactNode-
    hasClear是否有清除按钮（单选模式有效）Boolean-
    state校验状态

    可选值:
    'error', 'loading'    		Enum-
    readOnly是否只读，只读模式下可以展开弹层但不能选Boolean-
    disabled是否禁用选择器Boolean-
    visible当前弹层是否显示Boolean-
    defaultVisible弹层初始化是否显示Boolean-
    onVisibleChange弹层显示或隐藏时触发的回调

    签名:
    Function(visible: Boolean) => void
    参数:
    visible: {Boolean} 弹层是否显示    		Functionfunc.noop
    popupContainer弹层挂载的容器节点String/Function-
    popupClassName弹层的 classNameany-
    popupStyle弹层的内联样式Object-
    popupProps添加到弹层上的属性Object{}
    popupContent自定义弹层的内容ReactNode-
    filterLocal是否使用本地过滤，在数据源为远程的时候需要关闭此项Booleantrue
    filter本地过滤方法，返回一个 Boolean 值确定是否保留

    签名:
    Function() => void    		Functionfilter
    onToggleHighlightItem键盘上下键切换菜单高亮选项的回调

    签名:
    Function() => void    		Functionfunc.noop
    useVirtual是否开启虚拟滚动模式Boolean-
    dataSource传入的数据源，可以动态渲染子项Array<Object/String>-
    itemRender渲染 MenuItem 内容的方法

    签名:
    Function(item: Object) => ReactNode
    参数:
    item: {Object} 渲染节点的 item
    返回值:
    {ReactNode} item node
    		Function-
    onChangeSelect发生改变时触发的回调

    签名:
    Function(value: mixed, actionType: String, item: mixed) => void
    参数:
    value: {mixed} 选中的值
    actionType: {String} 触发的方式, 'itemClick', 'enter', 'change'
    item: {mixed} 选中的值的对象数据    		Function-
    fillProps填充到选择框里的值的 key\b\b，默认是 valueString'value'
    \n

    Select.OptionGroup#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    label设置分组的文案ReactNode-
    \n

    Select.Option#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    value选项值any-
    disabled是否禁用Boolean-
    \n

    ARIA and KeyBoard#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    按键说明
    Up Arrow获取当前项前一项焦点
    Down Arrow获取当前项后一项焦点
    Enter打开列表或选择当前项
    Esc关闭列表
    \n"} \ No newline at end of file diff --git a/compiled_docs/slider/demo/arrow-position.en-us.md b/compiled_docs/slider/demo/arrow-position.en-us.md new file mode 100644 index 0000000000..038e432253 --- /dev/null +++ b/compiled_docs/slider/demo/arrow-position.en-us.md @@ -0,0 +1 @@ +{"title":"Navigation Arrow Position","meta":{"title":"Navigation Arrow Position","description":"\n"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nReactDOM.render(\n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n

    5

    \n     \n\n
    \n\n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    \n , mountNode);\n","css":".next-slick .h3, .h4 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.next-slick .h4 {\n margin: 0 5px;\n position: relative;\n}\n"},"body":"\n````jsx\nimport { Slider } from '@alifd/next';\n\nReactDOM.render(\n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n

    5

    \n     \n\n
    \n\n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    \n , mountNode);\n````\n\n````css\n.next-slick .h3, .h4 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.next-slick .h4 {\n margin: 0 5px;\n position: relative;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Slider slidesToShow={4} arrowPosition=\"outer\">\n            <div style={{width: '25%'}}><h4 className=\"h4\">1</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">2</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">3</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">4</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">5</h4></div>\n        </Slider>\n\n        <br />\n\n        <Slider>\n            <div><h3 className=\"h3\">1</h3></div>\n            <div><h3 className=\"h3\">2</h3></div>\n            <div><h3 className=\"h3\">3</h3></div>\n            <div><h3 className=\"h3\">4</h3></div>\n        </Slider>\n    </div>\n    , mountNode);
    .next-slick .h3, .h4 {\n    background: #4F74B3;\n    color: #fff;\n    line-height: 150px;\n    text-align: center;\n    margin-top: 0;\n    margin-bottom: 0;\n}\n\n.next-slick .h4 {\n    margin: 0 5px;\n    position: relative;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/arrow-position.md b/compiled_docs/slider/demo/arrow-position.md new file mode 100644 index 0000000000..df8782a872 --- /dev/null +++ b/compiled_docs/slider/demo/arrow-position.md @@ -0,0 +1 @@ +{"title":"导航箭头位置","meta":{"title":"导航箭头位置","description":"\n

    轮播组件的导航按钮在默认情况下为内置模式。在多图同时导航的情况下，如果想要使用外置按钮，\n可以通过指定arrowPosition的属性值为outer，使用外置按钮，其默认值为inner。

    \n","order":"8"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nReactDOM.render(\n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n

    5

    \n     \n\n
    \n\n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    \n , mountNode);\n","css":".next-slick .h3, .h4 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.next-slick .h4 {\n margin: 0 5px;\n position: relative;\n}\n"},"body":"\n\n````jsx\nimport { Slider } from '@alifd/next';\n\nReactDOM.render(\n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n

    5

    \n     \n\n
    \n\n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    \n , mountNode);\n````\n\n````css\n.next-slick .h3, .h4 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.next-slick .h4 {\n margin: 0 5px;\n position: relative;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Slider slidesToShow={4} arrowPosition=\"outer\">\n            <div style={{width: '25%'}}><h4 className=\"h4\">1</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">2</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">3</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">4</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">5</h4></div>\n        </Slider>\n\n        <br />\n\n        <Slider>\n            <div><h3 className=\"h3\">1</h3></div>\n            <div><h3 className=\"h3\">2</h3></div>\n            <div><h3 className=\"h3\">3</h3></div>\n            <div><h3 className=\"h3\">4</h3></div>\n        </Slider>\n    </div>\n    , mountNode);
    .next-slick .h3, .h4 {\n    background: #4F74B3;\n    color: #fff;\n    line-height: 150px;\n    text-align: center;\n    margin-top: 0;\n    margin-bottom: 0;\n}\n\n.next-slick .h4 {\n    margin: 0 5px;\n    position: relative;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/autoplay.en-us.md b/compiled_docs/slider/demo/autoplay.en-us.md new file mode 100644 index 0000000000..5eb86142a3 --- /dev/null +++ b/compiled_docs/slider/demo/autoplay.en-us.md @@ -0,0 +1 @@ +{"title":"Autoplay","meta":{"title":"Autoplay","description":"\n

    You can use the autoplay and autoplaySpeed attributes to set whether the component will automatically rotate and auto rotate.

    \n","order":"9"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nReactDOM.render(\n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n

    5

    \n

    6

    \n

    7

    \n

    8

    \n

    9

    \n     \n
    \n \n

    1

    \n

    2

    \n

    3

    \n     \n
    \n , mountNode);\n","css":".next-slick .h3, .h4 {\n margin: 0 5px;\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n"},"body":"\n````jsx\nimport { Slider } from '@alifd/next';\n\nReactDOM.render(\n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n

    5

    \n

    6

    \n

    7

    \n

    8

    \n

    9

    \n     \n
    \n \n

    1

    \n

    2

    \n

    3

    \n     \n
    \n , mountNode);\n````\n\n````css\n.next-slick .h3, .h4 {\n margin: 0 5px;\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nReactDOM.render(\n    <div style={{width: '600px'}}>\n        <Slider slidesToShow={4} arrowPosition=\"outer\" lazyLoad dots={false} autoplay autoplaySpeed={1000}>\n            <div style={{width: '25%'}}><h4 className=\"h4\">1</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">2</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">3</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">4</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">5</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">6</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">7</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">8</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">9</h4></div>\n        </Slider>\n        <br/>\n        <Slider speed={1000} autoplay autoplaySpeed={2000}>\n            <div style={{width: '25%'}}><h4 className=\"h4\">1</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">2</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">3</h4></div>\n        </Slider>\n    </div>\n    , mountNode);
    .next-slick .h3, .h4 {\n    margin: 0 5px;\n    background: #4F74B3;\n    color: #fff;\n    line-height: 150px;\n    text-align: center;\n    margin-top: 0;\n    margin-bottom: 0;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/autoplay.md b/compiled_docs/slider/demo/autoplay.md new file mode 100644 index 0000000000..4c45363e11 --- /dev/null +++ b/compiled_docs/slider/demo/autoplay.md @@ -0,0 +1 @@ +{"title":"自动播放","meta":{"title":"自动播放","description":"\n

    可以通过 autoplay 和 autoplaySpeed 属性来设置组件是否自动轮播 和 自动轮播的速度。

    \n","order":"9"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nReactDOM.render(\n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n

    5

    \n

    6

    \n

    7

    \n

    8

    \n

    9

    \n     \n
    \n \n

    1

    \n

    2

    \n

    3

    \n     \n
    \n , mountNode);\n","css":".next-slick .h3, .h4 {\n margin: 0 5px;\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n"},"body":"\n\n````jsx\nimport { Slider } from '@alifd/next';\n\nReactDOM.render(\n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n

    5

    \n

    6

    \n

    7

    \n

    8

    \n

    9

    \n     \n
    \n \n

    1

    \n

    2

    \n

    3

    \n     \n
    \n , mountNode);\n````\n\n````css\n.next-slick .h3, .h4 {\n margin: 0 5px;\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nReactDOM.render(\n    <div style={{width: '600px'}}>\n        <Slider slidesToShow={4} arrowPosition=\"outer\" lazyLoad dots={false} autoplay autoplaySpeed={1000}>\n            <div style={{width: '25%'}}><h4 className=\"h4\">1</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">2</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">3</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">4</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">5</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">6</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">7</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">8</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">9</h4></div>\n        </Slider>\n        <br/>\n        <Slider speed={1000} autoplay autoplaySpeed={2000}>\n            <div style={{width: '25%'}}><h4 className=\"h4\">1</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">2</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">3</h4></div>\n        </Slider>\n    </div>\n    , mountNode);
    .next-slick .h3, .h4 {\n    margin: 0 5px;\n    background: #4F74B3;\n    color: #fff;\n    line-height: 150px;\n    text-align: center;\n    margin-top: 0;\n    margin-bottom: 0;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/basic.en-us.md b/compiled_docs/slider/demo/basic.en-us.md new file mode 100644 index 0000000000..7c7a1dd43f --- /dev/null +++ b/compiled_docs/slider/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic Usage","meta":{"title":"Basic Usage","description":"\n

    Note: If there is a 1px image height problem, try wrapping a div tag outside the img tag.

    \n"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nconst slides = [\n { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nconst itemNodes = slides.map((item, index) =>
    {item.text}
    );\n\nReactDOM.render({itemNodes}, mountNode);\n","css":".slider-img-wrapper img{\n width: 100%;\n}\n"},"body":"\n````jsx\nimport { Slider } from '@alifd/next';\n\nconst slides = [\n { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nconst itemNodes = slides.map((item, index) =>
    {item.text}
    );\n\nReactDOM.render({itemNodes}, mountNode);\n````\n\n````css\n.slider-img-wrapper img{\n width: 100%;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nconst slides = [\n    { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n    { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n    { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n    { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nconst itemNodes = slides.map((item, index) => <div key={index} className=\"slider-img-wrapper\"><img src={item.url} alt={item.text} /></div>);\n\nReactDOM.render(<Slider>{itemNodes}</Slider>, mountNode);
    .slider-img-wrapper img{\n    width: 100%;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/basic.md b/compiled_docs/slider/demo/basic.md new file mode 100644 index 0000000000..ba2c366356 --- /dev/null +++ b/compiled_docs/slider/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

    轮播组件共有两种类型：单图轮播和多图同时轮播。\n在默认模式下（不指定任何属性值），轮播组件为单图轮播模式。

    \n

    注意： 如果出现图片 1px 高度的问题，建议将图片的外部包括一层 div 来避免这个问题。

    \n","order":"0"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nconst slides = [\n { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nconst itemNodes = slides.map((item, index) =>
    {item.text}
    );\n\nReactDOM.render({itemNodes}, mountNode);\n","css":".slider-img-wrapper img{\n width: 100%;\n}\n"},"body":"\n\n````jsx\nimport { Slider } from '@alifd/next';\n\nconst slides = [\n { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nconst itemNodes = slides.map((item, index) =>
    {item.text}
    );\n\nReactDOM.render({itemNodes}, mountNode);\n````\n\n````css\n.slider-img-wrapper img{\n width: 100%;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nconst slides = [\n    { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n    { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n    { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n    { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nconst itemNodes = slides.map((item, index) => <div key={index} className=\"slider-img-wrapper\"><img src={item.url} alt={item.text} /></div>);\n\nReactDOM.render(<Slider>{itemNodes}</Slider>, mountNode);
    .slider-img-wrapper img{\n    width: 100%;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/button-size.en-us.md b/compiled_docs/slider/demo/button-size.en-us.md new file mode 100644 index 0000000000..04478b46c6 --- /dev/null +++ b/compiled_docs/slider/demo/button-size.en-us.md @@ -0,0 +1 @@ +{"title":"Navigation Button Size","meta":{"title":"Navigation Button Size","description":"\n"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nconst bigSlides = [\n { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nReactDOM.render(
    \n \n {\n bigSlides.map((item, index) =>
    {item.text}
    )\n }\n     \n\n
    \n\n \n {\n bigSlides.map((item, index) =>
    {item.text}
    )\n }\n     \n
    , mountNode);\n","css":".slider-img-wrapper img {\n width: 100%;\n}\n"},"body":"\n````jsx\nimport { Slider } from '@alifd/next';\n\nconst bigSlides = [\n { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nReactDOM.render(
    \n \n {\n bigSlides.map((item, index) =>
    {item.text}
    )\n }\n     \n\n
    \n\n \n {\n bigSlides.map((item, index) =>
    {item.text}
    )\n }\n     \n
    , mountNode);\n````\n\n````css\n.slider-img-wrapper img {\n width: 100%;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nconst bigSlides = [\n    { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n    { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n    { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n    { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nReactDOM.render(<div>\n    <Slider>\n        {\n            bigSlides.map((item, index) => <div key={index} className=\"slider-img-wrapper\"><img src={item.url} alt={item.text} /></div>)\n        }\n    </Slider>\n\n    <br />\n\n    <Slider arrowSize=\"large\">\n        {\n            bigSlides.map((item, index) => <div key={index} className=\"slider-img-wrapper\"><img src={item.url} alt={item.text} /></div>)\n        }\n    </Slider>\n</div>, mountNode);
    .slider-img-wrapper img {\n    width: 100%;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/button-size.md b/compiled_docs/slider/demo/button-size.md new file mode 100644 index 0000000000..76dfc80095 --- /dev/null +++ b/compiled_docs/slider/demo/button-size.md @@ -0,0 +1 @@ +{"title":"导航按钮尺寸","meta":{"title":"导航按钮尺寸","description":"\n

    可以通过arrowSize属性来更改导航组件的按钮尺寸，默认值为normal，\n对特定场景，比如展示的图片较大的情况下，可以选择large，将导航按钮设置为大按钮。

    \n","order":"3"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nconst bigSlides = [\n { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nReactDOM.render(
    \n \n {\n bigSlides.map((item, index) =>
    {item.text}
    )\n }\n     \n\n
    \n\n \n {\n bigSlides.map((item, index) =>
    {item.text}
    )\n }\n     \n
    , mountNode);\n","css":".slider-img-wrapper img {\n width: 100%;\n}\n"},"body":"\n\n````jsx\nimport { Slider } from '@alifd/next';\n\nconst bigSlides = [\n { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nReactDOM.render(
    \n \n {\n bigSlides.map((item, index) =>
    {item.text}
    )\n }\n     \n\n
    \n\n \n {\n bigSlides.map((item, index) =>
    {item.text}
    )\n }\n     \n
    , mountNode);\n````\n\n````css\n.slider-img-wrapper img {\n width: 100%;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nconst bigSlides = [\n    { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n    { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n    { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n    { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nReactDOM.render(<div>\n    <Slider>\n        {\n            bigSlides.map((item, index) => <div key={index} className=\"slider-img-wrapper\"><img src={item.url} alt={item.text} /></div>)\n        }\n    </Slider>\n\n    <br />\n\n    <Slider arrowSize=\"large\">\n        {\n            bigSlides.map((item, index) => <div key={index} className=\"slider-img-wrapper\"><img src={item.url} alt={item.text} /></div>)\n        }\n    </Slider>\n</div>, mountNode);
    .slider-img-wrapper img {\n    width: 100%;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/center-mode.en-us.md b/compiled_docs/slider/demo/center-mode.en-us.md new file mode 100644 index 0000000000..9e956ce8e4 --- /dev/null +++ b/compiled_docs/slider/demo/center-mode.en-us.md @@ -0,0 +1 @@ +{"title":"Centering Mode","meta":{"title":"Centering Mode","description":"\n

    The centering mode highlights the content of the most core area. You can enable this function by setting the centerMode property address to true.

    \n","order":"13"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nconst settings = {\n className: 'custom-slide center',\n centerMode: true,\n infinite: true,\n dots: false,\n arrowPosition: 'outer',\n centerPadding: '60px',\n slidesToShow: 3,\n speed: 500\n};\n\nReactDOM.render(\n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n

    5

    \n

    6

    \n

    7

    \n

    8

    \n

    9

    \n     \n , mountNode);\n","css":".custom-slide h3 {\n background: #4F74B3;\n color: #fff;\n font-size: 36px;\n line-height: 100px;\n margin: 10px;\n padding: 2%;\n position: relative;\n text-align: center;\n}\n\n.center h3 {\n opacity: 0.8;\n transition: all 300ms ease;\n}\n\n.center .next-slick-center h3 {\n color: #e67e22;\n opacity: 1;\n transform: scale(1.08);\n}\n"},"body":"\n````jsx\nimport { Slider } from '@alifd/next';\n\nconst settings = {\n className: 'custom-slide center',\n centerMode: true,\n infinite: true,\n dots: false,\n arrowPosition: 'outer',\n centerPadding: '60px',\n slidesToShow: 3,\n speed: 500\n};\n\nReactDOM.render(\n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n

    5

    \n

    6

    \n

    7

    \n

    8

    \n

    9

    \n     \n , mountNode);\n````\n\n\n````css\n.custom-slide h3 {\n background: #4F74B3;\n color: #fff;\n font-size: 36px;\n line-height: 100px;\n margin: 10px;\n padding: 2%;\n position: relative;\n text-align: center;\n}\n\n.center h3 {\n opacity: 0.8;\n transition: all 300ms ease;\n}\n\n.center .next-slick-center h3 {\n color: #e67e22;\n opacity: 1;\n transform: scale(1.08);\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nconst settings = {\n    className: 'custom-slide center',\n    centerMode: true,\n    infinite: true,\n    dots: false,\n    arrowPosition: 'outer',\n    centerPadding: '60px',\n    slidesToShow: 3,\n    speed: 500\n};\n\nReactDOM.render(\n    <Slider {...settings}>\n        <div><h3>1</h3></div>\n        <div><h3>2</h3></div>\n        <div><h3>3</h3></div>\n        <div><h3>4</h3></div>\n        <div><h3>5</h3></div>\n        <div><h3>6</h3></div>\n        <div><h3>7</h3></div>\n        <div><h3>8</h3></div>\n        <div><h3>9</h3></div>\n    </Slider>\n    , mountNode);
    .custom-slide h3 {\n    background: #4F74B3;\n    color: #fff;\n    font-size: 36px;\n    line-height: 100px;\n    margin: 10px;\n    padding: 2%;\n    position: relative;\n    text-align: center;\n}\n\n.center h3 {\n    opacity: 0.8;\n    transition: all 300ms ease;\n}\n\n.center .next-slick-center h3 {\n  color: #e67e22;\n  opacity: 1;\n  transform: scale(1.08);\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/center-mode.md b/compiled_docs/slider/demo/center-mode.md new file mode 100644 index 0000000000..119a35e152 --- /dev/null +++ b/compiled_docs/slider/demo/center-mode.md @@ -0,0 +1 @@ +{"title":"居中模式","meta":{"title":"居中模式","description":"\n

    居中模式可以突出显示最核心区域的内容，您可以通过设置 centerMode 属性址为 true 开启该功能。

    \n","order":"13"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nconst settings = {\n className: 'custom-slide center',\n centerMode: true,\n infinite: true,\n dots: false,\n arrowPosition: 'outer',\n centerPadding: '60px',\n slidesToShow: 3,\n speed: 500\n};\n\nReactDOM.render(\n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n

    5

    \n

    6

    \n

    7

    \n

    8

    \n

    9

    \n     \n , mountNode);\n","css":".custom-slide h3 {\n background: #4F74B3;\n color: #fff;\n font-size: 36px;\n line-height: 100px;\n margin: 10px;\n padding: 2%;\n position: relative;\n text-align: center;\n}\n\n.center h3 {\n opacity: 0.8;\n transition: all 300ms ease;\n}\n\n.center .next-slick-center h3 {\n color: #e67e22;\n opacity: 1;\n transform: scale(1.08);\n}\n"},"body":"\n\n````jsx\nimport { Slider } from '@alifd/next';\n\nconst settings = {\n className: 'custom-slide center',\n centerMode: true,\n infinite: true,\n dots: false,\n arrowPosition: 'outer',\n centerPadding: '60px',\n slidesToShow: 3,\n speed: 500\n};\n\nReactDOM.render(\n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n

    5

    \n

    6

    \n

    7

    \n

    8

    \n

    9

    \n     \n , mountNode);\n````\n\n\n````css\n.custom-slide h3 {\n background: #4F74B3;\n color: #fff;\n font-size: 36px;\n line-height: 100px;\n margin: 10px;\n padding: 2%;\n position: relative;\n text-align: center;\n}\n\n.center h3 {\n opacity: 0.8;\n transition: all 300ms ease;\n}\n\n.center .next-slick-center h3 {\n color: #e67e22;\n opacity: 1;\n transform: scale(1.08);\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nconst settings = {\n    className: 'custom-slide center',\n    centerMode: true,\n    infinite: true,\n    dots: false,\n    arrowPosition: 'outer',\n    centerPadding: '60px',\n    slidesToShow: 3,\n    speed: 500\n};\n\nReactDOM.render(\n    <Slider {...settings}>\n        <div><h3>1</h3></div>\n        <div><h3>2</h3></div>\n        <div><h3>3</h3></div>\n        <div><h3>4</h3></div>\n        <div><h3>5</h3></div>\n        <div><h3>6</h3></div>\n        <div><h3>7</h3></div>\n        <div><h3>8</h3></div>\n        <div><h3>9</h3></div>\n    </Slider>\n    , mountNode);
    .custom-slide h3 {\n    background: #4F74B3;\n    color: #fff;\n    font-size: 36px;\n    line-height: 100px;\n    margin: 10px;\n    padding: 2%;\n    position: relative;\n    text-align: center;\n}\n\n.center h3 {\n    opacity: 0.8;\n    transition: all 300ms ease;\n}\n\n.center .next-slick-center h3 {\n  color: #e67e22;\n  opacity: 1;\n  transform: scale(1.08);\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/custom-arrow.en-us.md b/compiled_docs/slider/demo/custom-arrow.en-us.md new file mode 100644 index 0000000000..1523ba92ff --- /dev/null +++ b/compiled_docs/slider/demo/custom-arrow.en-us.md @@ -0,0 +1 @@ +{"title":"Custom Navigation Arrows","meta":{"title":"Custom Navigation Arrows","description":"\n

    You can pass custom navigation arrow components through the two attributes prevArrow and nextArrow.

    \n","order":"7"},"codes":{"jsx":"import { Slider, Icon } from '@alifd/next';\n\nconst slides = [\n { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nconst arrowStyle = {\n display: 'block',\n background: 'red',\n opacity: 1,\n margin: '0 20px'\n};\n\nconst CustomNextArrow = (props) => {\n return
    ;\n};\n\nconst CustomPrevArrow = (props) => {\n return
    ;\n};\n\nReactDOM.render(\n } prevArrow={} lazyLoad>\n {\n slides.map((item, index) =>
    {item.text}
    )\n }\n     \n , mountNode);\n","css":".slider-img-wrapper img {\n width: 100%;\n}\n"},"body":"\n````jsx\nimport { Slider, Icon } from '@alifd/next';\n\nconst slides = [\n { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nconst arrowStyle = {\n display: 'block',\n background: 'red',\n opacity: 1,\n margin: '0 20px'\n};\n\nconst CustomNextArrow = (props) => {\n return
    ;\n};\n\nconst CustomPrevArrow = (props) => {\n return
    ;\n};\n\nReactDOM.render(\n } prevArrow={} lazyLoad>\n {\n slides.map((item, index) =>
    {item.text}
    )\n }\n     \n , mountNode);\n````\n\n````css\n.slider-img-wrapper img {\n width: 100%;\n}\n````","html":"
    import { Slider, Icon } from '@alifd/next';\n\nconst slides = [\n    { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n    { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n    { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n    { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nconst arrowStyle = {\n    display: 'block',\n    background: 'red',\n    opacity: 1,\n    margin: '0 20px'\n};\n\nconst CustomNextArrow = (props) => {\n    return <div {...props} style={arrowStyle}><Icon type=\"arrow-double-right\" /></div>;\n};\n\nconst CustomPrevArrow = (props) => {\n    return <div {...props} style={arrowStyle}><Icon type=\"arrow-double-left\" /></div>;\n};\n\nReactDOM.render(\n    <Slider nextArrow={<CustomNextArrow />} prevArrow={<CustomPrevArrow />} lazyLoad>\n        {\n            slides.map((item, index) => <div key={index} className=\"slider-img-wrapper\"><img src={item.url} alt={item.text} /></div>)\n        }\n    </Slider>\n    , mountNode);
    .slider-img-wrapper img {\n    width: 100%;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/custom-arrow.md b/compiled_docs/slider/demo/custom-arrow.md new file mode 100644 index 0000000000..7101e280c4 --- /dev/null +++ b/compiled_docs/slider/demo/custom-arrow.md @@ -0,0 +1 @@ +{"title":"自定义导航箭头","meta":{"title":"自定义导航箭头","description":"\n

    开发者可以通过 prevArrow 和 nextArrow 两个属性传入自定义的导航箭头组件。

    \n","order":"7"},"codes":{"jsx":"import { Slider, Icon } from '@alifd/next';\n\nconst slides = [\n { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nconst arrowStyle = {\n display: 'block',\n background: 'red',\n opacity: 1,\n margin: '0 20px'\n};\n\nconst CustomNextArrow = (props) => {\n return
    ;\n};\n\nconst CustomPrevArrow = (props) => {\n return
    ;\n};\n\nReactDOM.render(\n } prevArrow={} lazyLoad>\n {\n slides.map((item, index) =>
    {item.text}
    )\n }\n     \n , mountNode);\n","css":".slider-img-wrapper img {\n width: 100%;\n}\n"},"body":"\n\n````jsx\nimport { Slider, Icon } from '@alifd/next';\n\nconst slides = [\n { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nconst arrowStyle = {\n display: 'block',\n background: 'red',\n opacity: 1,\n margin: '0 20px'\n};\n\nconst CustomNextArrow = (props) => {\n return
    ;\n};\n\nconst CustomPrevArrow = (props) => {\n return
    ;\n};\n\nReactDOM.render(\n } prevArrow={} lazyLoad>\n {\n slides.map((item, index) =>
    {item.text}
    )\n }\n     \n , mountNode);\n````\n\n````css\n.slider-img-wrapper img {\n width: 100%;\n}\n````","html":"
    import { Slider, Icon } from '@alifd/next';\n\nconst slides = [\n    { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n    { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n    { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n    { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nconst arrowStyle = {\n    display: 'block',\n    background: 'red',\n    opacity: 1,\n    margin: '0 20px'\n};\n\nconst CustomNextArrow = (props) => {\n    return <div {...props} style={arrowStyle}><Icon type=\"arrow-double-right\" /></div>;\n};\n\nconst CustomPrevArrow = (props) => {\n    return <div {...props} style={arrowStyle}><Icon type=\"arrow-double-left\" /></div>;\n};\n\nReactDOM.render(\n    <Slider nextArrow={<CustomNextArrow />} prevArrow={<CustomPrevArrow />} lazyLoad>\n        {\n            slides.map((item, index) => <div key={index} className=\"slider-img-wrapper\"><img src={item.url} alt={item.text} /></div>)\n        }\n    </Slider>\n    , mountNode);
    .slider-img-wrapper img {\n    width: 100%;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/custom-slide.en-us.md b/compiled_docs/slider/demo/custom-slide.en-us.md new file mode 100644 index 0000000000..96b1028cfe --- /dev/null +++ b/compiled_docs/slider/demo/custom-slide.en-us.md @@ -0,0 +1 @@ +{"title":"Use Custom Components in Slider","meta":{"title":"Use Custom Components in Slider","description":"\n

    You can pass custom components to the Slider component. The premise is that the component must open transparently props to the underlying component or element, and the Slider needs to perform the clone operation of the element.

    \n","order":"16"},"codes":{"jsx":"import { Slider } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst pages = [1, 2, 3, 4];\n\nfunction Inner({ children, ...others }) {\n // Note that to transparently pass other attributes to the lower node, the Slider needs to perform the element's clone operation.\n return (\n
    \n {children}\n
    \n );\n}\n\nInner.propTypes = {\n children: PropTypes.any\n};\n\nconst slider = (\n {\n pages.map((page, index) => {\n return custom {page};\n })\n }\n);\n\nReactDOM.render(
    \n {slider}\n
    \n , mountNode);\n","css":".custom-inner {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n"},"body":"\n````jsx\nimport { Slider } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst pages = [1, 2, 3, 4];\n\nfunction Inner({ children, ...others }) {\n // Note that to transparently pass other attributes to the lower node, the Slider needs to perform the element's clone operation.\n return (\n
    \n {children}\n
    \n );\n}\n\nInner.propTypes = {\n children: PropTypes.any\n};\n\nconst slider = (\n {\n pages.map((page, index) => {\n return custom {page};\n })\n }\n);\n\nReactDOM.render(
    \n {slider}\n
    \n , mountNode);\n````\n\n````css\n.custom-inner {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n````","html":"
    import { Slider } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst pages = [1, 2, 3, 4];\n\nfunction Inner({ children, ...others }) {\n    // Note that to transparently pass other attributes to the lower node, the Slider needs to perform the element's clone operation.\n    return (\n        <div {...others}>\n            {children}\n        </div>\n    );\n}\n\nInner.propTypes = {\n    children: PropTypes.any\n};\n\nconst slider = (<Slider>\n    {\n        pages.map((page, index) => {\n            return <Inner className=\"custom-inner\" key={index}>custom {page}</Inner>;\n        })\n    }\n</Slider>);\n\nReactDOM.render(<div>\n    {slider}\n</div>\n    , mountNode);
    .custom-inner {\n    background: #4F74B3;\n    color: #fff;\n    line-height: 150px;\n    text-align: center;\n    margin-top: 0;\n    margin-bottom: 0;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/custom-slide.md b/compiled_docs/slider/demo/custom-slide.md new file mode 100644 index 0000000000..62471d93e8 --- /dev/null +++ b/compiled_docs/slider/demo/custom-slide.md @@ -0,0 +1 @@ +{"title":"使用自定义组件","meta":{"title":"使用自定义组件","description":"\n

    你可以为传递自定义组件到 Slider 组件中。前提是该组件一定要开放透传 props 到下层组件或元素，Slider 底层需要执行元素的 clone 操作。

    \n","order":"16"},"codes":{"jsx":"import { Slider } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst pages = [1, 2, 3, 4];\n\nfunction Inner({ children, ...others }) {\n // Note that to transparently pass other attributes to the lower node, the Slider needs to perform the element's clone operation.\n return (\n
    \n {children}\n
    \n );\n}\n\nInner.propTypes = {\n children: PropTypes.any\n};\n\nconst slider = (\n {\n pages.map((page, index) => {\n return custom {page};\n })\n }\n);\n\nReactDOM.render(
    \n {slider}\n
    \n , mountNode);\n","css":".custom-inner {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n"},"body":"\n\n````jsx\nimport { Slider } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst pages = [1, 2, 3, 4];\n\nfunction Inner({ children, ...others }) {\n // Note that to transparently pass other attributes to the lower node, the Slider needs to perform the element's clone operation.\n return (\n
    \n {children}\n
    \n );\n}\n\nInner.propTypes = {\n children: PropTypes.any\n};\n\nconst slider = (\n {\n pages.map((page, index) => {\n return custom {page};\n })\n }\n);\n\nReactDOM.render(
    \n {slider}\n
    \n , mountNode);\n````\n\n````css\n.custom-inner {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n````","html":"
    import { Slider } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst pages = [1, 2, 3, 4];\n\nfunction Inner({ children, ...others }) {\n    // Note that to transparently pass other attributes to the lower node, the Slider needs to perform the element's clone operation.\n    return (\n        <div {...others}>\n            {children}\n        </div>\n    );\n}\n\nInner.propTypes = {\n    children: PropTypes.any\n};\n\nconst slider = (<Slider>\n    {\n        pages.map((page, index) => {\n            return <Inner className=\"custom-inner\" key={index}>custom {page}</Inner>;\n        })\n    }\n</Slider>);\n\nReactDOM.render(<div>\n    {slider}\n</div>\n    , mountNode);
    .custom-inner {\n    background: #4F74B3;\n    color: #fff;\n    line-height: 150px;\n    text-align: center;\n    margin-top: 0;\n    margin-bottom: 0;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/dots-direction.en-us.md b/compiled_docs/slider/demo/dots-direction.en-us.md new file mode 100644 index 0000000000..9150c5c485 --- /dev/null +++ b/compiled_docs/slider/demo/dots-direction.en-us.md @@ -0,0 +1 @@ +{"title":"Navigation Anchor Direction","meta":{"title":"Navigation Anchor Direction","description":"\n

    The direction of the navigation anchor can be changed via dotsDirection. The default is hoz, which is the horizontal direction.The vertical direction is displayed when the value is set to ver.

    \n","order":"4"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nReactDOM.render(\n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n\n
    \n\n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    \n , mountNode);\n","css":".next-slick .h3, .h4 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.next-slick .h4 {\n margin-right: 5px;\n position: relative;\n}\n"},"body":"\n````jsx\nimport { Slider } from '@alifd/next';\n\nReactDOM.render(\n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n\n
    \n\n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    \n , mountNode);\n````\n\n````css\n.next-slick .h3, .h4 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.next-slick .h4 {\n margin-right: 5px;\n position: relative;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Slider dotsDirection=\"hoz\" arrows={false}>\n            <div><h3 className=\"h3\">1</h3></div>\n            <div><h3 className=\"h3\">2</h3></div>\n            <div><h3 className=\"h3\">3</h3></div>\n            <div><h3 className=\"h3\">4</h3></div>\n        </Slider>\n\n        <br />\n\n        <Slider dotsDirection=\"ver\" arrows={false}>\n            <div><h3 className=\"h3\">1</h3></div>\n            <div><h3 className=\"h3\">2</h3></div>\n            <div><h3 className=\"h3\">3</h3></div>\n            <div><h3 className=\"h3\">4</h3></div>\n        </Slider>\n    </div>\n    , mountNode);
    .next-slick .h3, .h4 {\n        background: #4F74B3;\n        color: #fff;\n        line-height: 150px;\n        text-align: center;\n        margin-top: 0;\n        margin-bottom: 0;\n}\n\n.next-slick .h4 {\n        margin-right: 5px;\n        position: relative;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/dots-direction.md b/compiled_docs/slider/demo/dots-direction.md new file mode 100644 index 0000000000..f33cb6718e --- /dev/null +++ b/compiled_docs/slider/demo/dots-direction.md @@ -0,0 +1 @@ +{"title":"导航锚点方向","meta":{"title":"导航锚点方向","description":"\n

    通过 dotsDirection 可以改变导航锚点的位置，默认为 hoz 即水平方向。\n当其值设为 ver 时为垂直方向展示。

    \n","order":"4"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nReactDOM.render(\n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n\n
    \n\n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    \n , mountNode);\n","css":".next-slick .h3, .h4 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.next-slick .h4 {\n margin-right: 5px;\n position: relative;\n}\n"},"body":"\n\n````jsx\nimport { Slider } from '@alifd/next';\n\nReactDOM.render(\n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n\n
    \n\n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    \n , mountNode);\n````\n\n````css\n.next-slick .h3, .h4 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.next-slick .h4 {\n margin-right: 5px;\n position: relative;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Slider dotsDirection=\"hoz\" arrows={false}>\n            <div><h3 className=\"h3\">1</h3></div>\n            <div><h3 className=\"h3\">2</h3></div>\n            <div><h3 className=\"h3\">3</h3></div>\n            <div><h3 className=\"h3\">4</h3></div>\n        </Slider>\n\n        <br />\n\n        <Slider dotsDirection=\"ver\" arrows={false}>\n            <div><h3 className=\"h3\">1</h3></div>\n            <div><h3 className=\"h3\">2</h3></div>\n            <div><h3 className=\"h3\">3</h3></div>\n            <div><h3 className=\"h3\">4</h3></div>\n        </Slider>\n    </div>\n    , mountNode);
    .next-slick .h3, .h4 {\n        background: #4F74B3;\n        color: #fff;\n        line-height: 150px;\n        text-align: center;\n        margin-top: 0;\n        margin-bottom: 0;\n}\n\n.next-slick .h4 {\n        margin-right: 5px;\n        position: relative;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/dots-render.en-us.md b/compiled_docs/slider/demo/dots-render.en-us.md new file mode 100644 index 0000000000..6265fff2ab --- /dev/null +++ b/compiled_docs/slider/demo/dots-render.en-us.md @@ -0,0 +1 @@ +{"title":"Custom Navigation Anchor","meta":{"title":"Custom Navigation Anchor","description":"\n

    dotsRender can be used to modify dost, and dotsClass can override dots.

    \n","order":"6"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nReactDOM.render(\n
    \n {\n console.log('current', current);\n return {index};\n }}>\n

    0

    \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    \n , mountNode);\n","css":".next-slick .h3, .h4 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.next-slick .h4 {\n margin-right: 5px;\n position: relative;\n}\n\n.dots-cust {\n color: #fff;\n}\n.dots-cust a{\n dispaly: block;\n background: rgba(200,200,200,.4);\n padding: 0 4px;\n}\n.dots-cust .active a{\n color: rgb(70, 188, 2);\n}\n"},"body":"\n````jsx\nimport { Slider } from '@alifd/next';\n\nReactDOM.render(\n
    \n {\n console.log('current', current);\n return {index};\n }}>\n

    0

    \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    \n , mountNode);\n````\n\n````css\n.next-slick .h3, .h4 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.next-slick .h4 {\n margin-right: 5px;\n position: relative;\n}\n\n.dots-cust {\n color: #fff;\n}\n.dots-cust a{\n dispaly: block;\n background: rgba(200,200,200,.4);\n padding: 0 4px;\n}\n.dots-cust .active a{\n color: rgb(70, 188, 2);\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Slider dotsClass=\"dots-cust\" dotsDirection=\"hoz\" arrows={false} dotsRender={(index, current) => {\n            console.log('current', current);\n            return <a>{index}</a>;\n        }}>\n            <div><h3 className=\"h3\">0</h3></div>\n            <div><h3 className=\"h3\">1</h3></div>\n            <div><h3 className=\"h3\">2</h3></div>\n            <div><h3 className=\"h3\">3</h3></div>\n            <div><h3 className=\"h3\">4</h3></div>\n        </Slider>\n    </div>\n    , mountNode);
    .next-slick .h3, .h4 {\n        background: #4F74B3;\n        color: #fff;\n        line-height: 150px;\n        text-align: center;\n        margin-top: 0;\n        margin-bottom: 0;\n}\n\n.next-slick .h4 {\n        margin-right: 5px;\n        position: relative;\n}\n\n.dots-cust {\n  color: #fff;\n}\n.dots-cust a{\n  dispaly: block;\n  background: rgba(200,200,200,.4);\n  padding: 0 4px;\n}\n.dots-cust .active a{\n  color: rgb(70, 188, 2);\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/dots-render.md b/compiled_docs/slider/demo/dots-render.md new file mode 100644 index 0000000000..ab529dc840 --- /dev/null +++ b/compiled_docs/slider/demo/dots-render.md @@ -0,0 +1 @@ +{"title":"自定义导航锚点","meta":{"title":"自定义导航锚点","description":"\n

    通过 dotsRender 可以自定义修改dost，通过 dotsClass 可覆盖dots的样式。

    \n","order":"6"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nReactDOM.render(\n
    \n {\n console.log('current', current);\n return {index};\n }}>\n

    0

    \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    \n , mountNode);\n","css":".next-slick .h3, .h4 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.next-slick .h4 {\n margin-right: 5px;\n position: relative;\n}\n\n.dots-cust {\n color: #fff;\n}\n.dots-cust a{\n dispaly: block;\n background: rgba(200,200,200,.4);\n padding: 0 4px;\n}\n.dots-cust .active a{\n color: rgb(70, 188, 2);\n}\n"},"body":"\n\n````jsx\nimport { Slider } from '@alifd/next';\n\nReactDOM.render(\n
    \n {\n console.log('current', current);\n return {index};\n }}>\n

    0

    \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    \n , mountNode);\n````\n\n````css\n.next-slick .h3, .h4 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.next-slick .h4 {\n margin-right: 5px;\n position: relative;\n}\n\n.dots-cust {\n color: #fff;\n}\n.dots-cust a{\n dispaly: block;\n background: rgba(200,200,200,.4);\n padding: 0 4px;\n}\n.dots-cust .active a{\n color: rgb(70, 188, 2);\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Slider dotsClass=\"dots-cust\" dotsDirection=\"hoz\" arrows={false} dotsRender={(index, current) => {\n            console.log('current', current);\n            return <a>{index}</a>;\n        }}>\n            <div><h3 className=\"h3\">0</h3></div>\n            <div><h3 className=\"h3\">1</h3></div>\n            <div><h3 className=\"h3\">2</h3></div>\n            <div><h3 className=\"h3\">3</h3></div>\n            <div><h3 className=\"h3\">4</h3></div>\n        </Slider>\n    </div>\n    , mountNode);
    .next-slick .h3, .h4 {\n        background: #4F74B3;\n        color: #fff;\n        line-height: 150px;\n        text-align: center;\n        margin-top: 0;\n        margin-bottom: 0;\n}\n\n.next-slick .h4 {\n        margin-right: 5px;\n        position: relative;\n}\n\n.dots-cust {\n  color: #fff;\n}\n.dots-cust a{\n  dispaly: block;\n  background: rgba(200,200,200,.4);\n  padding: 0 4px;\n}\n.dots-cust .active a{\n  color: rgb(70, 188, 2);\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/dots-triggerType.en-us.md b/compiled_docs/slider/demo/dots-triggerType.en-us.md new file mode 100644 index 0000000000..a01ad24c1f --- /dev/null +++ b/compiled_docs/slider/demo/dots-triggerType.en-us.md @@ -0,0 +1 @@ +{"title":"Navigation Anchor Trigger","meta":{"title":"Navigation Anchor Trigger","description":"\n"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nReactDOM.render(\n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    \n , mountNode);\n","css":".next-slick .h3, .h4 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.next-slick .h4 {\n margin-right: 5px;\n position: relative;\n}\n\n"},"body":"\n````jsx\nimport { Slider } from '@alifd/next';\n\nReactDOM.render(\n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    \n , mountNode);\n````\n\n````css\n.next-slick .h3, .h4 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.next-slick .h4 {\n margin-right: 5px;\n position: relative;\n}\n\n````","html":"
    import { Slider } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Slider triggerType=\"click\" arrows={false} >\n            <div><h3 className=\"h3\">1</h3></div>\n            <div><h3 className=\"h3\">2</h3></div>\n            <div><h3 className=\"h3\">3</h3></div>\n            <div><h3 className=\"h3\">4</h3></div>\n        </Slider>\n        <br/>\n        <Slider triggerType=\"hover\" arrows={false} >\n            <div><h3 className=\"h3\">1</h3></div>\n            <div><h3 className=\"h3\">2</h3></div>\n            <div><h3 className=\"h3\">3</h3></div>\n            <div><h3 className=\"h3\">4</h3></div>\n        </Slider>\n    </div>\n    , mountNode);
    .next-slick .h3, .h4 {\n        background: #4F74B3;\n        color: #fff;\n        line-height: 150px;\n        text-align: center;\n        margin-top: 0;\n        margin-bottom: 0;\n}\n\n.next-slick .h4 {\n        margin-right: 5px;\n        position: relative;\n}\n
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/dots-triggerType.md b/compiled_docs/slider/demo/dots-triggerType.md new file mode 100644 index 0000000000..8521d3854d --- /dev/null +++ b/compiled_docs/slider/demo/dots-triggerType.md @@ -0,0 +1 @@ +{"title":"导航锚点触发方式","meta":{"title":"导航锚点触发方式","description":"\n

    通过 triggerType 可以定义dots触发方式，共有两种触发方式：['click', 'hover'];\n当其值设为 hover 时为鼠标经过触发滚动。

    \n","order":"5"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nReactDOM.render(\n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    \n , mountNode);\n","css":".next-slick .h3, .h4 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.next-slick .h4 {\n margin-right: 5px;\n position: relative;\n}\n\n"},"body":"\n\n````jsx\nimport { Slider } from '@alifd/next';\n\nReactDOM.render(\n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    \n , mountNode);\n````\n\n````css\n.next-slick .h3, .h4 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.next-slick .h4 {\n margin-right: 5px;\n position: relative;\n}\n\n````","html":"
    import { Slider } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Slider triggerType=\"click\" arrows={false} >\n            <div><h3 className=\"h3\">1</h3></div>\n            <div><h3 className=\"h3\">2</h3></div>\n            <div><h3 className=\"h3\">3</h3></div>\n            <div><h3 className=\"h3\">4</h3></div>\n        </Slider>\n        <br/>\n        <Slider triggerType=\"hover\" arrows={false} >\n            <div><h3 className=\"h3\">1</h3></div>\n            <div><h3 className=\"h3\">2</h3></div>\n            <div><h3 className=\"h3\">3</h3></div>\n            <div><h3 className=\"h3\">4</h3></div>\n        </Slider>\n    </div>\n    , mountNode);
    .next-slick .h3, .h4 {\n        background: #4F74B3;\n        color: #fff;\n        line-height: 150px;\n        text-align: center;\n        margin-top: 0;\n        margin-bottom: 0;\n}\n\n.next-slick .h4 {\n        margin-right: 5px;\n        position: relative;\n}\n
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/fade.en-us.md b/compiled_docs/slider/demo/fade.en-us.md new file mode 100644 index 0000000000..0def0ae749 --- /dev/null +++ b/compiled_docs/slider/demo/fade.en-us.md @@ -0,0 +1 @@ +{"title":"Fade","meta":{"title":"Fade","description":"\n

    Use a fade effect when switching between marquees.

    \n","order":"18"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nconst settings = {\n arrowPosition: 'outer',\n dots: false,\n animation: 'fade',\n infinite: true,\n speed: 500,\n slidesToShow: 1,\n slidesToScroll: 1,\n className: 'custom-slide',\n onChange: function (index) {\n console.log('change Slide index', index);\n }\n};\n\nReactDOM.render(\n
    \n \n {[1, 2, 3, 4, 5, 6].map(function(d) {\n return

    console.log(d)} >{d}

    ;\n })}\n     \n \n {[1, 2, 3, 4, 5, 6].map(function(d) {\n return ;\n })}\n \n
    \n , mountNode\n);\n","css":".custom-slide h3, .custom-slide a {\n display: block;\n background: #4F74B3;\n color: #fff;\n font-size: 36px;\n line-height: 100px;\n margin: 10px;\n padding: 2%;\n position: relative;\n text-align: center;\n}\n"},"body":"\n````jsx\nimport { Slider } from '@alifd/next';\n\nconst settings = {\n arrowPosition: 'outer',\n dots: false,\n animation: 'fade',\n infinite: true,\n speed: 500,\n slidesToShow: 1,\n slidesToScroll: 1,\n className: 'custom-slide',\n onChange: function (index) {\n console.log('change Slide index', index);\n }\n};\n\nReactDOM.render(\n
    \n \n {[1, 2, 3, 4, 5, 6].map(function(d) {\n return

    console.log(d)} >{d}

    ;\n })}\n     \n \n {[1, 2, 3, 4, 5, 6].map(function(d) {\n return ;\n })}\n \n
    \n , mountNode\n);\n````\n\n````css\n.custom-slide h3, .custom-slide a {\n display: block;\n background: #4F74B3;\n color: #fff;\n font-size: 36px;\n line-height: 100px;\n margin: 10px;\n padding: 2%;\n position: relative;\n text-align: center;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nconst settings = {\n    arrowPosition: 'outer',\n    dots: false,\n    animation: 'fade',\n    infinite: true,\n    speed: 500,\n    slidesToShow: 1,\n    slidesToScroll: 1,\n    className: 'custom-slide',\n    onChange: function (index) {\n        console.log('change Slide index', index);\n    }\n};\n\nReactDOM.render(\n    <div>\n        <Slider {...settings}>\n            {[1, 2, 3, 4, 5, 6].map(function(d) {\n                return <div key={d}><h3 onClick={() => console.log(d)} >{d}</h3></div>;\n            })}\n        </Slider>\n        <Slider {...settings}>\n            {[1, 2, 3, 4, 5, 6].map(function(d) {\n                return <div key={d}><a href={`https://www.taobao.com/?some=${d}`} target=\"_blank\">{d}</a></div>;\n            })}\n        </Slider>\n    </div>\n    , mountNode\n);
    .custom-slide h3, .custom-slide a {\n    display: block;\n    background: #4F74B3;\n    color: #fff;\n    font-size: 36px;\n    line-height: 100px;\n    margin: 10px;\n    padding: 2%;\n    position: relative;\n    text-align: center;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/fade.md b/compiled_docs/slider/demo/fade.md new file mode 100644 index 0000000000..bc655214e7 --- /dev/null +++ b/compiled_docs/slider/demo/fade.md @@ -0,0 +1 @@ +{"title":"Fade","meta":{"title":"Fade","description":"\n

    切换跑马灯时使用渐变效果。

    \n","order":"18"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nconst settings = {\n arrowPosition: 'outer',\n dots: false,\n animation: 'fade',\n infinite: true,\n speed: 500,\n slidesToShow: 1,\n slidesToScroll: 1,\n className: 'custom-slide',\n onChange: function (index) {\n console.log('change Slide index', index);\n }\n};\n\nReactDOM.render(\n
    \n \n {[1, 2, 3, 4, 5, 6].map(function(d) {\n return

    console.log(d)} >{d}

    ;\n })}\n     \n \n {[1, 2, 3, 4, 5, 6].map(function(d) {\n return ;\n })}\n \n
    \n , mountNode\n);\n","css":".custom-slide h3, .custom-slide a {\n display: block;\n background: #4F74B3;\n color: #fff;\n font-size: 36px;\n line-height: 100px;\n margin: 10px;\n padding: 2%;\n position: relative;\n text-align: center;\n}\n"},"body":"\n\n````jsx\nimport { Slider } from '@alifd/next';\n\nconst settings = {\n arrowPosition: 'outer',\n dots: false,\n animation: 'fade',\n infinite: true,\n speed: 500,\n slidesToShow: 1,\n slidesToScroll: 1,\n className: 'custom-slide',\n onChange: function (index) {\n console.log('change Slide index', index);\n }\n};\n\nReactDOM.render(\n
    \n \n {[1, 2, 3, 4, 5, 6].map(function(d) {\n return

    console.log(d)} >{d}

    ;\n })}\n     \n \n {[1, 2, 3, 4, 5, 6].map(function(d) {\n return ;\n })}\n \n
    \n , mountNode\n);\n````\n\n````css\n.custom-slide h3, .custom-slide a {\n display: block;\n background: #4F74B3;\n color: #fff;\n font-size: 36px;\n line-height: 100px;\n margin: 10px;\n padding: 2%;\n position: relative;\n text-align: center;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nconst settings = {\n    arrowPosition: 'outer',\n    dots: false,\n    animation: 'fade',\n    infinite: true,\n    speed: 500,\n    slidesToShow: 1,\n    slidesToScroll: 1,\n    className: 'custom-slide',\n    onChange: function (index) {\n        console.log('change Slide index', index);\n    }\n};\n\nReactDOM.render(\n    <div>\n        <Slider {...settings}>\n            {[1, 2, 3, 4, 5, 6].map(function(d) {\n                return <div key={d}><h3 onClick={() => console.log(d)} >{d}</h3></div>;\n            })}\n        </Slider>\n        <Slider {...settings}>\n            {[1, 2, 3, 4, 5, 6].map(function(d) {\n                return <div key={d}><a href={`https://www.taobao.com/?some=${d}`} target=\"_blank\">{d}</a></div>;\n            })}\n        </Slider>\n    </div>\n    , mountNode\n);
    .custom-slide h3, .custom-slide a {\n    display: block;\n    background: #4F74B3;\n    color: #fff;\n    font-size: 36px;\n    line-height: 100px;\n    margin: 10px;\n    padding: 2%;\n    position: relative;\n    text-align: center;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/infinite.en-us.md b/compiled_docs/slider/demo/infinite.en-us.md new file mode 100644 index 0000000000..4710b9588a --- /dev/null +++ b/compiled_docs/slider/demo/infinite.en-us.md @@ -0,0 +1 @@ +{"title":"No Loop","meta":{"title":"No Loop","description":"\n

    By default, the Slider component behaves in an endless loop mode. If you don't want endless loops,\nYou can disable the loop mode by setting infinite to false.

    \n

    It is worth noting that since the default behavior of the component is the infinite mode, by default, the single image is automatically duplicated.\nIf you do not want to enable such a copy effect, just close the ʻinfinite` attribute.

    \n","order":"10"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nReactDOM.render(\n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n

    5

    \n     \n\n
    \n\n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    \n , mountNode);\n","css":".next-slick .h3, .h4 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.next-slick .h4 {\n margin: 0 5px;\n position: relative;\n}\n"},"body":"\n````jsx\nimport { Slider } from '@alifd/next';\n\nReactDOM.render(\n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n

    5

    \n     \n\n
    \n\n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    \n , mountNode);\n````\n\n````css\n.next-slick .h3, .h4 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.next-slick .h4 {\n margin: 0 5px;\n position: relative;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Slider slidesToShow={4} arrowPosition=\"outer\" infinite={false} dots={false}>\n            <div style={{width: '25%'}}><h4 className=\"h4\">1</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">2</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">3</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">4</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">5</h4></div>\n        </Slider>\n\n        <br />\n\n        <Slider infinite={false} lazyLoad>\n            <div><h3 className=\"h3\">1</h3></div>\n            <div><h3 className=\"h3\">2</h3></div>\n            <div><h3 className=\"h3\">3</h3></div>\n            <div><h3 className=\"h3\">4</h3></div>\n        </Slider>\n    </div>\n    , mountNode);
    .next-slick .h3, .h4 {\n        background: #4F74B3;\n        color: #fff;\n        line-height: 150px;\n        text-align: center;\n        margin-top: 0;\n        margin-bottom: 0;\n}\n\n.next-slick .h4 {\n        margin: 0 5px;\n        position: relative;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/infinite.md b/compiled_docs/slider/demo/infinite.md new file mode 100644 index 0000000000..cd7eb9d3e2 --- /dev/null +++ b/compiled_docs/slider/demo/infinite.md @@ -0,0 +1 @@ +{"title":"禁止循环","meta":{"title":"禁止循环","description":"\n

    默认情况下，轮播组件的表现为无穷循环模式。如果你不想无穷循环，\n可以通过设置 infinite 为 false，用来禁止循环模式。

    \n

    值得注意的是，由于组件的默认行为是无穷模式，所以默认情况下，自动将单张图片复制了两份，\n如果你不想启用这样的复制效果，只要关闭 infinite 属性即可。

    \n","order":"10"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nReactDOM.render(\n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n

    5

    \n     \n\n
    \n\n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    \n , mountNode);\n","css":".next-slick .h3, .h4 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.next-slick .h4 {\n margin: 0 5px;\n position: relative;\n}\n"},"body":"\n\n````jsx\nimport { Slider } from '@alifd/next';\n\nReactDOM.render(\n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n

    5

    \n     \n\n
    \n\n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    \n , mountNode);\n````\n\n````css\n.next-slick .h3, .h4 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.next-slick .h4 {\n margin: 0 5px;\n position: relative;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nReactDOM.render(\n    <div>\n        <Slider slidesToShow={4} arrowPosition=\"outer\" infinite={false} dots={false}>\n            <div style={{width: '25%'}}><h4 className=\"h4\">1</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">2</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">3</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">4</h4></div>\n            <div style={{width: '25%'}}><h4 className=\"h4\">5</h4></div>\n        </Slider>\n\n        <br />\n\n        <Slider infinite={false} lazyLoad>\n            <div><h3 className=\"h3\">1</h3></div>\n            <div><h3 className=\"h3\">2</h3></div>\n            <div><h3 className=\"h3\">3</h3></div>\n            <div><h3 className=\"h3\">4</h3></div>\n        </Slider>\n    </div>\n    , mountNode);
    .next-slick .h3, .h4 {\n        background: #4F74B3;\n        color: #fff;\n        line-height: 150px;\n        text-align: center;\n        margin-top: 0;\n        margin-bottom: 0;\n}\n\n.next-slick .h4 {\n        margin: 0 5px;\n        position: relative;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/multiple.en-us.md b/compiled_docs/slider/demo/multiple.en-us.md new file mode 100644 index 0000000000..8af481a98e --- /dev/null +++ b/compiled_docs/slider/demo/multiple.en-us.md @@ -0,0 +1 @@ +{"title":"Multiple Picture","meta":{"title":"Multiple Picture","description":"\n

    On the basis of the single-image carousel, multiple map carousels can be performed at the same time by specifying the slidesToShow attribute value.\nYou can set the number of single-rotation pictures with the slidesToScroll attribute.

    \n","order":"1"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nconst slides = [1, 2, 3, 4, 5, 6, 7, 8, 9].map(item =>

    {item}

    );\n\nReactDOM.render(\n
    \n
    slide one picture one at a time
    \n \n {slides}\n \n\n
    slide multiple picture one at a time
    \n \n {slides}\n \n
    \n , mountNode);\n","css":".next-slick .h3, .h4 {\n margin: 0 5px;\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 20px 0 10px 0;\n}\n"},"body":"\n````jsx\nimport { Slider } from '@alifd/next';\n\nconst slides = [1, 2, 3, 4, 5, 6, 7, 8, 9].map(item =>

    {item}

    );\n\nReactDOM.render(\n
    \n
    slide one picture one at a time
    \n \n {slides}\n \n\n
    slide multiple picture one at a time
    \n \n {slides}\n \n
    \n , mountNode);\n````\n\n````css\n.next-slick .h3, .h4 {\n margin: 0 5px;\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 20px 0 10px 0;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nconst slides = [1, 2, 3, 4, 5, 6, 7, 8, 9].map(item => <div style={{width: '25%'}} key={item}><h4 className=\"h4\">{item}</h4></div>);\n\nReactDOM.render(\n    <div style={{width: '600px'}}>\n        <div className=\"demo-item-title\">slide one picture one at a time</div>\n        <Slider slidesToShow={4} arrowPosition=\"outer\" dots={false} lazyLoad >\n            {slides}\n        </Slider>\n\n        <div className=\"demo-item-title\">slide multiple picture one at a time</div>\n        <Slider slidesToShow={4} slidesToScroll={4} arrowPosition=\"outer\" lazyLoad dots={false}>\n            {slides}\n        </Slider>\n    </div>\n    , mountNode);
    .next-slick .h3, .h4 {\n    margin: 0 5px;\n    background: #4F74B3;\n    color: #fff;\n    line-height: 150px;\n    text-align: center;\n    margin-top: 0;\n    margin-bottom: 0;\n}\n\n.demo-item-title {\n    font-size: 16px;\n    color: #333;\n    padding: 8px;\n    margin: 20px 0 10px 0;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/multiple.md b/compiled_docs/slider/demo/multiple.md new file mode 100644 index 0000000000..a6fdb1bcc4 --- /dev/null +++ b/compiled_docs/slider/demo/multiple.md @@ -0,0 +1 @@ +{"title":"多图轮播","meta":{"title":"多图轮播","description":"\n

    在单图轮播的基础上，通过指定slidesToShow属性值，可以同时进行多图轮播。\n可以通过 slidesToScroll 属性制定单次轮播图片的个数。

    \n","order":"1"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nconst slides = [1, 2, 3, 4, 5, 6, 7, 8, 9].map(item =>

    {item}

    );\n\nReactDOM.render(\n
    \n
    slide one picture one at a time
    \n \n {slides}\n \n\n
    slide multiple picture one at a time
    \n \n {slides}\n \n
    \n , mountNode);\n","css":".next-slick .h3, .h4 {\n margin: 0 5px;\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 20px 0 10px 0;\n}\n"},"body":"\n\n````jsx\nimport { Slider } from '@alifd/next';\n\nconst slides = [1, 2, 3, 4, 5, 6, 7, 8, 9].map(item =>

    {item}

    );\n\nReactDOM.render(\n
    \n
    slide one picture one at a time
    \n \n {slides}\n \n\n
    slide multiple picture one at a time
    \n \n {slides}\n \n
    \n , mountNode);\n````\n\n````css\n.next-slick .h3, .h4 {\n margin: 0 5px;\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 20px 0 10px 0;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nconst slides = [1, 2, 3, 4, 5, 6, 7, 8, 9].map(item => <div style={{width: '25%'}} key={item}><h4 className=\"h4\">{item}</h4></div>);\n\nReactDOM.render(\n    <div style={{width: '600px'}}>\n        <div className=\"demo-item-title\">slide one picture one at a time</div>\n        <Slider slidesToShow={4} arrowPosition=\"outer\" dots={false} lazyLoad >\n            {slides}\n        </Slider>\n\n        <div className=\"demo-item-title\">slide multiple picture one at a time</div>\n        <Slider slidesToShow={4} slidesToScroll={4} arrowPosition=\"outer\" lazyLoad dots={false}>\n            {slides}\n        </Slider>\n    </div>\n    , mountNode);
    .next-slick .h3, .h4 {\n    margin: 0 5px;\n    background: #4F74B3;\n    color: #fff;\n    line-height: 150px;\n    text-align: center;\n    margin-top: 0;\n    margin-bottom: 0;\n}\n\n.demo-item-title {\n    font-size: 16px;\n    color: #333;\n    padding: 8px;\n    margin: 20px 0 10px 0;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/pause-on-hover.en-us.md b/compiled_docs/slider/demo/pause-on-hover.en-us.md new file mode 100644 index 0000000000..0104f0a8e1 --- /dev/null +++ b/compiled_docs/slider/demo/pause-on-hover.en-us.md @@ -0,0 +1 @@ +{"title":"Pause When Mouse Is Floating","meta":{"title":"Pause When Mouse Is Floating","description":"\n"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nconst settings = {\n className: 'custom-slide',\n arrowPosition: 'outer',\n dots: false,\n infinite: true,\n slidesToShow: 3,\n slidesToScroll: 1,\n autoplay: true,\n autoplaySpeed: 2000,\n pauseOnHover: true\n};\n\nReactDOM.render(\n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n

    5

    \n

    6

    \n

    7

    \n

    8

    \n

    9

    \n     \n , mountNode);\n","css":".custom-slide h3 {\n background: #4F74B3;\n color: #fff;\n font-size: 36px;\n line-height: 100px;\n margin: 10px;\n padding: 2%;\n position: relative;\n text-align: center;\n}\n"},"body":"\n````jsx\nimport { Slider } from '@alifd/next';\n\nconst settings = {\n className: 'custom-slide',\n arrowPosition: 'outer',\n dots: false,\n infinite: true,\n slidesToShow: 3,\n slidesToScroll: 1,\n autoplay: true,\n autoplaySpeed: 2000,\n pauseOnHover: true\n};\n\nReactDOM.render(\n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n

    5

    \n

    6

    \n

    7

    \n

    8

    \n

    9

    \n     \n , mountNode);\n````\n\n\n````css\n.custom-slide h3 {\n background: #4F74B3;\n color: #fff;\n font-size: 36px;\n line-height: 100px;\n margin: 10px;\n padding: 2%;\n position: relative;\n text-align: center;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nconst settings = {\n    className: 'custom-slide',\n    arrowPosition: 'outer',\n    dots: false,\n    infinite: true,\n    slidesToShow: 3,\n    slidesToScroll: 1,\n    autoplay: true,\n    autoplaySpeed: 2000,\n    pauseOnHover: true\n};\n\nReactDOM.render(\n    <Slider {...settings}>\n        <div><h3>1</h3></div>\n        <div><h3>2</h3></div>\n        <div><h3>3</h3></div>\n        <div><h3>4</h3></div>\n        <div><h3>5</h3></div>\n        <div><h3>6</h3></div>\n        <div><h3>7</h3></div>\n        <div><h3>8</h3></div>\n        <div><h3>9</h3></div>\n    </Slider>\n    , mountNode);
    .custom-slide h3 {\n    background: #4F74B3;\n    color: #fff;\n    font-size: 36px;\n    line-height: 100px;\n    margin: 10px;\n    padding: 2%;\n    position: relative;\n    text-align: center;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/pause-on-hover.md b/compiled_docs/slider/demo/pause-on-hover.md new file mode 100644 index 0000000000..9fa13fa101 --- /dev/null +++ b/compiled_docs/slider/demo/pause-on-hover.md @@ -0,0 +1 @@ +{"title":"悬浮时暂停","meta":{"title":"悬浮时暂停","description":"\n

    可以通过设置 pauseOnHover 属性为 true 使得 Slide 在鼠标悬浮时自动停止轮播。

    \n","order":"11"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nconst settings = {\n className: 'custom-slide',\n arrowPosition: 'outer',\n dots: false,\n infinite: true,\n slidesToShow: 3,\n slidesToScroll: 1,\n autoplay: true,\n autoplaySpeed: 2000,\n pauseOnHover: true\n};\n\nReactDOM.render(\n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n

    5

    \n

    6

    \n

    7

    \n

    8

    \n

    9

    \n     \n , mountNode);\n","css":".custom-slide h3 {\n background: #4F74B3;\n color: #fff;\n font-size: 36px;\n line-height: 100px;\n margin: 10px;\n padding: 2%;\n position: relative;\n text-align: center;\n}\n"},"body":"\n\n````jsx\nimport { Slider } from '@alifd/next';\n\nconst settings = {\n className: 'custom-slide',\n arrowPosition: 'outer',\n dots: false,\n infinite: true,\n slidesToShow: 3,\n slidesToScroll: 1,\n autoplay: true,\n autoplaySpeed: 2000,\n pauseOnHover: true\n};\n\nReactDOM.render(\n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n

    5

    \n

    6

    \n

    7

    \n

    8

    \n

    9

    \n     \n , mountNode);\n````\n\n\n````css\n.custom-slide h3 {\n background: #4F74B3;\n color: #fff;\n font-size: 36px;\n line-height: 100px;\n margin: 10px;\n padding: 2%;\n position: relative;\n text-align: center;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nconst settings = {\n    className: 'custom-slide',\n    arrowPosition: 'outer',\n    dots: false,\n    infinite: true,\n    slidesToShow: 3,\n    slidesToScroll: 1,\n    autoplay: true,\n    autoplaySpeed: 2000,\n    pauseOnHover: true\n};\n\nReactDOM.render(\n    <Slider {...settings}>\n        <div><h3>1</h3></div>\n        <div><h3>2</h3></div>\n        <div><h3>3</h3></div>\n        <div><h3>4</h3></div>\n        <div><h3>5</h3></div>\n        <div><h3>6</h3></div>\n        <div><h3>7</h3></div>\n        <div><h3>8</h3></div>\n        <div><h3>9</h3></div>\n    </Slider>\n    , mountNode);
    .custom-slide h3 {\n    background: #4F74B3;\n    color: #fff;\n    font-size: 36px;\n    line-height: 100px;\n    margin: 10px;\n    padding: 2%;\n    position: relative;\n    text-align: center;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/slick-goto.en-us.md b/compiled_docs/slider/demo/slick-goto.en-us.md new file mode 100644 index 0000000000..31871226ce --- /dev/null +++ b/compiled_docs/slider/demo/slick-goto.en-us.md @@ -0,0 +1 @@ +{"title":"ActiveIndex","meta":{"title":"ActiveIndex","description":"\n"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nconst slides = [\n { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nclass SlickGoTo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n index: 0 // The initial value here need to be set to 0 for `activeIndex`. If you want the initial as 0 , you can use the `defaultActiveIndex` property to set.\n };\n this.changeHandler = this.changeHandler.bind(this);\n }\n changeHandler(e) {\n this.setState({\n index: parseInt(e.target.value)\n });\n }\n render() {\n const settings = {\n dots: false,\n infinite: true,\n activeIndex: this.state.index\n };\n return (\n
    \n
    Pull the scroll bar to switch:
    \n \n \n {\n slides.map((item, index) =>
    {item.text}
    )\n }\n     \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".slider-img-wrapper img {\n width: 100%;\n}\n\n.demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 20px 0 10px 0;\n}\n"},"body":"\n````jsx\nimport { Slider } from '@alifd/next';\n\nconst slides = [\n { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nclass SlickGoTo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n index: 0 // The initial value here need to be set to 0 for `activeIndex`. If you want the initial as 0 , you can use the `defaultActiveIndex` property to set.\n };\n this.changeHandler = this.changeHandler.bind(this);\n }\n changeHandler(e) {\n this.setState({\n index: parseInt(e.target.value)\n });\n }\n render() {\n const settings = {\n dots: false,\n infinite: true,\n activeIndex: this.state.index\n };\n return (\n
    \n
    Pull the scroll bar to switch:
    \n \n \n {\n slides.map((item, index) =>
    {item.text}
    )\n }\n     \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.slider-img-wrapper img {\n width: 100%;\n}\n\n.demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 20px 0 10px 0;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nconst slides = [\n    { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n    { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n    { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n    { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nclass SlickGoTo extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            index: 0 // The initial value here need to be set to 0 for `activeIndex`. If you want the initial as 0 , you can use the `defaultActiveIndex` property to set.\n        };\n        this.changeHandler = this.changeHandler.bind(this);\n    }\n    changeHandler(e) {\n        this.setState({\n            index: parseInt(e.target.value)\n        });\n    }\n    render() {\n        const settings = {\n            dots: false,\n            infinite: true,\n            activeIndex: this.state.index\n        };\n        return (\n            <div>\n                <div className=\"demo-item-title\">Pull the scroll bar to switch:</div>\n                <input onChange={this.changeHandler} defaultValue={0} type=\"range\" min={0} max={3} />\n                <Slider {...settings}>\n                    {\n                        slides.map((item, index) => <div key={index} className=\"slider-img-wrapper\"><img src={item.url} alt={item.text} /></div>)\n                    }\n                </Slider>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<SlickGoTo />, mountNode);
    .slider-img-wrapper img {\n    width: 100%;\n}\n\n.demo-item-title {\n    font-size: 16px;\n    color: #333;\n    padding: 8px;\n    margin: 20px 0 10px 0;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/slick-goto.md b/compiled_docs/slider/demo/slick-goto.md new file mode 100644 index 0000000000..b7c44f7678 --- /dev/null +++ b/compiled_docs/slider/demo/slick-goto.md @@ -0,0 +1 @@ +{"title":"ActiveIndex","meta":{"title":"ActiveIndex","description":"\n

    通过 index 属性可以快速的定位到指定次序的 slider 。

    \n","order":"14"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nconst slides = [\n { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nclass SlickGoTo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n index: 0 // The initial value here need to be set to 0 for `activeIndex`. If you want the initial as 0 , you can use the `defaultActiveIndex` property to set.\n };\n this.changeHandler = this.changeHandler.bind(this);\n }\n changeHandler(e) {\n this.setState({\n index: parseInt(e.target.value)\n });\n }\n render() {\n const settings = {\n dots: false,\n infinite: true,\n activeIndex: this.state.index\n };\n return (\n
    \n
    Pull the scroll bar to switch:
    \n \n \n {\n slides.map((item, index) =>
    {item.text}
    )\n }\n     \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".slider-img-wrapper img {\n width: 100%;\n}\n\n.demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 20px 0 10px 0;\n}\n"},"body":"\n\n````jsx\nimport { Slider } from '@alifd/next';\n\nconst slides = [\n { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nclass SlickGoTo extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n index: 0 // The initial value here need to be set to 0 for `activeIndex`. If you want the initial as 0 , you can use the `defaultActiveIndex` property to set.\n };\n this.changeHandler = this.changeHandler.bind(this);\n }\n changeHandler(e) {\n this.setState({\n index: parseInt(e.target.value)\n });\n }\n render() {\n const settings = {\n dots: false,\n infinite: true,\n activeIndex: this.state.index\n };\n return (\n
    \n
    Pull the scroll bar to switch:
    \n \n \n {\n slides.map((item, index) =>
    {item.text}
    )\n }\n     \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.slider-img-wrapper img {\n width: 100%;\n}\n\n.demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 20px 0 10px 0;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nconst slides = [\n    { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n    { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n    { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n    { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nclass SlickGoTo extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            index: 0 // The initial value here need to be set to 0 for `activeIndex`. If you want the initial as 0 , you can use the `defaultActiveIndex` property to set.\n        };\n        this.changeHandler = this.changeHandler.bind(this);\n    }\n    changeHandler(e) {\n        this.setState({\n            index: parseInt(e.target.value)\n        });\n    }\n    render() {\n        const settings = {\n            dots: false,\n            infinite: true,\n            activeIndex: this.state.index\n        };\n        return (\n            <div>\n                <div className=\"demo-item-title\">Pull the scroll bar to switch:</div>\n                <input onChange={this.changeHandler} defaultValue={0} type=\"range\" min={0} max={3} />\n                <Slider {...settings}>\n                    {\n                        slides.map((item, index) => <div key={index} className=\"slider-img-wrapper\"><img src={item.url} alt={item.text} /></div>)\n                    }\n                </Slider>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<SlickGoTo />, mountNode);
    .slider-img-wrapper img {\n    width: 100%;\n}\n\n.demo-item-title {\n    font-size: 16px;\n    color: #333;\n    padding: 8px;\n    margin: 20px 0 10px 0;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/slide-change-hook.en-us.md b/compiled_docs/slider/demo/slide-change-hook.en-us.md new file mode 100644 index 0000000000..18b8b215f1 --- /dev/null +++ b/compiled_docs/slider/demo/slide-change-hook.en-us.md @@ -0,0 +1 @@ +{"title":"onChange","meta":{"title":"onChange","description":"\n

    You can use the onChange hook function to handle some extra logic.

    \n","order":"19"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nconst settings = {\n className: 'custom-slide',\n arrowPosition: 'outer',\n dots: false,\n infinite: true,\n speed: 500,\n slidesToShow: 1,\n slidesToScroll: 1,\n onChange: function (index) {\n console.log('change Slide index', index);\n }\n};\n\nReactDOM.render(\n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n

    5

    \n

    6

    \n

    7

    \n

    8

    \n

    9

    \n     \n , mountNode);\n","css":".custom-slide h3 {\n background: #4F74B3;\n color: #fff;\n font-size: 36px;\n line-height: 100px;\n margin: 10px;\n padding: 2%;\n position: relative;\n text-align: center;\n}\n"},"body":"\n````jsx\nimport { Slider } from '@alifd/next';\n\nconst settings = {\n className: 'custom-slide',\n arrowPosition: 'outer',\n dots: false,\n infinite: true,\n speed: 500,\n slidesToShow: 1,\n slidesToScroll: 1,\n onChange: function (index) {\n console.log('change Slide index', index);\n }\n};\n\nReactDOM.render(\n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n

    5

    \n

    6

    \n

    7

    \n

    8

    \n

    9

    \n     \n , mountNode);\n````\n\n\n````css\n.custom-slide h3 {\n background: #4F74B3;\n color: #fff;\n font-size: 36px;\n line-height: 100px;\n margin: 10px;\n padding: 2%;\n position: relative;\n text-align: center;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nconst settings = {\n    className: 'custom-slide',\n    arrowPosition: 'outer',\n    dots: false,\n    infinite: true,\n    speed: 500,\n    slidesToShow: 1,\n    slidesToScroll: 1,\n    onChange: function (index) {\n        console.log('change Slide index', index);\n    }\n};\n\nReactDOM.render(\n    <Slider {...settings}>\n        <div><h3>1</h3></div>\n        <div><h3>2</h3></div>\n        <div><h3>3</h3></div>\n        <div><h3>4</h3></div>\n        <div><h3>5</h3></div>\n        <div><h3>6</h3></div>\n        <div><h3>7</h3></div>\n        <div><h3>8</h3></div>\n        <div><h3>9</h3></div>\n    </Slider>\n    , mountNode);
    .custom-slide h3 {\n    background: #4F74B3;\n    color: #fff;\n    font-size: 36px;\n    line-height: 100px;\n    margin: 10px;\n    padding: 2%;\n    position: relative;\n    text-align: center;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/slide-change-hook.md b/compiled_docs/slider/demo/slide-change-hook.md new file mode 100644 index 0000000000..cfed8b7947 --- /dev/null +++ b/compiled_docs/slider/demo/slide-change-hook.md @@ -0,0 +1 @@ +{"title":"onChange 钩子","meta":{"title":"onChange 钩子","description":"\n

    你可以利用 onChange 钩子函数处理一些额外的逻辑。

    \n","order":"19"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nconst settings = {\n className: 'custom-slide',\n arrowPosition: 'outer',\n dots: false,\n infinite: true,\n speed: 500,\n slidesToShow: 1,\n slidesToScroll: 1,\n onChange: function (index) {\n console.log('change Slide index', index);\n }\n};\n\nReactDOM.render(\n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n

    5

    \n

    6

    \n

    7

    \n

    8

    \n

    9

    \n     \n , mountNode);\n","css":".custom-slide h3 {\n background: #4F74B3;\n color: #fff;\n font-size: 36px;\n line-height: 100px;\n margin: 10px;\n padding: 2%;\n position: relative;\n text-align: center;\n}\n"},"body":"\n\n\n````jsx\nimport { Slider } from '@alifd/next';\n\nconst settings = {\n className: 'custom-slide',\n arrowPosition: 'outer',\n dots: false,\n infinite: true,\n speed: 500,\n slidesToShow: 1,\n slidesToScroll: 1,\n onChange: function (index) {\n console.log('change Slide index', index);\n }\n};\n\nReactDOM.render(\n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n

    5

    \n

    6

    \n

    7

    \n

    8

    \n

    9

    \n     \n , mountNode);\n````\n\n\n````css\n.custom-slide h3 {\n background: #4F74B3;\n color: #fff;\n font-size: 36px;\n line-height: 100px;\n margin: 10px;\n padding: 2%;\n position: relative;\n text-align: center;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nconst settings = {\n    className: 'custom-slide',\n    arrowPosition: 'outer',\n    dots: false,\n    infinite: true,\n    speed: 500,\n    slidesToShow: 1,\n    slidesToScroll: 1,\n    onChange: function (index) {\n        console.log('change Slide index', index);\n    }\n};\n\nReactDOM.render(\n    <Slider {...settings}>\n        <div><h3>1</h3></div>\n        <div><h3>2</h3></div>\n        <div><h3>3</h3></div>\n        <div><h3>4</h3></div>\n        <div><h3>5</h3></div>\n        <div><h3>6</h3></div>\n        <div><h3>7</h3></div>\n        <div><h3>8</h3></div>\n        <div><h3>9</h3></div>\n    </Slider>\n    , mountNode);
    .custom-slide h3 {\n    background: #4F74B3;\n    color: #fff;\n    font-size: 36px;\n    line-height: 100px;\n    margin: 10px;\n    padding: 2%;\n    position: relative;\n    text-align: center;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/slide-direction.en-us.md b/compiled_docs/slider/demo/slide-direction.en-us.md new file mode 100644 index 0000000000..1543163269 --- /dev/null +++ b/compiled_docs/slider/demo/slide-direction.en-us.md @@ -0,0 +1 @@ +{"title":"Swipe Vertically","meta":{"title":"Swipe Vertically","description":"\n

    The slider component can set two carousel directions with the slideDirection attribute. When the value is ver, the carousel direction is vertical. The default value is hoz. Vertical mode can also set single map and multi picture rotation.

    \n","order":"2"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nReactDOM.render(
    \n
    Vertical multi-picture mode
    \n \n {\n [1, 2, 3, 4, 5].map((item, index) =>

    {item}

    )\n }\n     \n\n
    Vertical single-picture mode
    \n \n {\n [1, 2, 3, 4, 5].map((item, index) =>

    {item}

    )\n }\n     \n
    , mountNode);\n","css":".ver-slick .h3 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n font-size: 36px;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 20px 0 10px 0;\n}\n"},"body":"\n````jsx\nimport { Slider } from '@alifd/next';\n\nReactDOM.render(
    \n
    Vertical multi-picture mode
    \n \n {\n [1, 2, 3, 4, 5].map((item, index) =>

    {item}

    )\n }\n     \n\n
    Vertical single-picture mode
    \n \n {\n [1, 2, 3, 4, 5].map((item, index) =>

    {item}

    )\n }\n     \n
    , mountNode);\n````\n\n````css\n.ver-slick .h3 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n font-size: 36px;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 20px 0 10px 0;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nReactDOM.render(<div style={{ width: '200px' }}>\n    <div className=\"demo-item-title\">Vertical multi-picture mode</div>\n    <Slider slideDirection=\"ver\" slidesToShow={3} slidesToScroll={1} dots={false} arrowPosition=\"inner\" arrowDirection=\"ver\" className=\"ver-slick\">\n        {\n            [1, 2, 3, 4, 5].map((item, index) => <div key={index} className=\"custom-slider\" style={{ border: '1px solid transparent'}}><h3 className=\"h3\">{item}</h3></div>)\n        }\n    </Slider>\n\n    <div className=\"demo-item-title\">Vertical single-picture mode</div>\n    <Slider slideDirection=\"ver\" dots={false} arrowPosition=\"inner\" arrowDirection=\"ver\" className=\"ver-slick\">\n        {\n            [1, 2, 3, 4, 5].map((item, index) => <div key={index} className=\"custom-slider\"><h3 className=\"h3\">{item}</h3></div>)\n        }\n    </Slider>\n</div>, mountNode);
    .ver-slick .h3 {\n        background: #4F74B3;\n        color: #fff;\n        line-height: 150px;\n        text-align: center;\n        font-size: 36px;\n        margin-top: 0;\n        margin-bottom: 0;\n}\n\n.demo-item-title {\n    font-size: 16px;\n    color: #333;\n    padding: 8px;\n    margin: 20px 0 10px 0;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/slide-direction.md b/compiled_docs/slider/demo/slide-direction.md new file mode 100644 index 0000000000..526ea3ecb8 --- /dev/null +++ b/compiled_docs/slider/demo/slide-direction.md @@ -0,0 +1 @@ +{"title":"垂直滑动","meta":{"title":"垂直滑动","description":"\n

    轮播组件可以通过 slideDirection 属性设置两种轮播方向。当值为 ver 时轮播方向为垂直方向，\n默认为值为 hoz 。垂直模式也可以设置单图和多图轮播。

    \n","order":"2"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nReactDOM.render(
    \n
    Vertical multi-picture mode
    \n \n {\n [1, 2, 3, 4, 5].map((item, index) =>

    {item}

    )\n }\n     \n\n
    Vertical single-picture mode
    \n \n {\n [1, 2, 3, 4, 5].map((item, index) =>

    {item}

    )\n }\n     \n
    , mountNode);\n","css":".ver-slick .h3 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n font-size: 36px;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 20px 0 10px 0;\n}\n"},"body":"\n\n````jsx\nimport { Slider } from '@alifd/next';\n\nReactDOM.render(
    \n
    Vertical multi-picture mode
    \n \n {\n [1, 2, 3, 4, 5].map((item, index) =>

    {item}

    )\n }\n     \n\n
    Vertical single-picture mode
    \n \n {\n [1, 2, 3, 4, 5].map((item, index) =>

    {item}

    )\n }\n     \n
    , mountNode);\n````\n\n````css\n.ver-slick .h3 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n font-size: 36px;\n margin-top: 0;\n margin-bottom: 0;\n}\n\n.demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 20px 0 10px 0;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nReactDOM.render(<div style={{ width: '200px' }}>\n    <div className=\"demo-item-title\">Vertical multi-picture mode</div>\n    <Slider slideDirection=\"ver\" slidesToShow={3} slidesToScroll={1} dots={false} arrowPosition=\"inner\" arrowDirection=\"ver\" className=\"ver-slick\">\n        {\n            [1, 2, 3, 4, 5].map((item, index) => <div key={index} className=\"custom-slider\" style={{ border: '1px solid transparent'}}><h3 className=\"h3\">{item}</h3></div>)\n        }\n    </Slider>\n\n    <div className=\"demo-item-title\">Vertical single-picture mode</div>\n    <Slider slideDirection=\"ver\" dots={false} arrowPosition=\"inner\" arrowDirection=\"ver\" className=\"ver-slick\">\n        {\n            [1, 2, 3, 4, 5].map((item, index) => <div key={index} className=\"custom-slider\"><h3 className=\"h3\">{item}</h3></div>)\n        }\n    </Slider>\n</div>, mountNode);
    .ver-slick .h3 {\n        background: #4F74B3;\n        color: #fff;\n        line-height: 150px;\n        text-align: center;\n        font-size: 36px;\n        margin-top: 0;\n        margin-bottom: 0;\n}\n\n.demo-item-title {\n    font-size: 16px;\n    color: #333;\n    padding: 8px;\n    margin: 20px 0 10px 0;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/slider-with-dialog.en-us.md b/compiled_docs/slider/demo/slider-with-dialog.en-us.md new file mode 100644 index 0000000000..d2314352d5 --- /dev/null +++ b/compiled_docs/slider/demo/slider-with-dialog.en-us.md @@ -0,0 +1 @@ +{"title":"Slider in Dialog","meta":{"title":"Slider in Dialog","description":"\n

    If you want to put the Slider in the Dialog, you need to close the Dialog animation at this time, to avoid the Slider causing an error when calculating the inner element width.

    \n","order":"17"},"codes":{"jsx":"import { Slider, Dialog, Button } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst slides = [\n { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nconst dialogStyle = {\n width: '800px'\n};\n\nclass FlappySlider extends React.Component {\n static propTypes = {\n slides: PropTypes.array\n }\n\n constructor(props) {\n super(props);\n\n this.state = {\n visible: false\n };\n\n this.setVisible = this.setVisible.bind(this);\n }\n\n setVisible() {\n this.setState(prevState => {\n return {\n visible: !prevState.visible\n };\n });\n }\n\n render() {\n return (
    \n \n \n \n {\n this.props.slides.map((item, index) =>
    {item.text}
    )\n }\n     \n     \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".slider-img-wrapper img {\n width: 100%;\n}\n"},"body":"\n````jsx\nimport { Slider, Dialog, Button } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst slides = [\n { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nconst dialogStyle = {\n width: '800px'\n};\n\nclass FlappySlider extends React.Component {\n static propTypes = {\n slides: PropTypes.array\n }\n\n constructor(props) {\n super(props);\n\n this.state = {\n visible: false\n };\n\n this.setVisible = this.setVisible.bind(this);\n }\n\n setVisible() {\n this.setState(prevState => {\n return {\n visible: !prevState.visible\n };\n });\n }\n\n render() {\n return (
    \n \n \n \n {\n this.props.slides.map((item, index) =>
    {item.text}
    )\n }\n     \n     \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.slider-img-wrapper img {\n width: 100%;\n}\n````","html":"
    import { Slider, Dialog, Button } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst slides = [\n    { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n    { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n    { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n    { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nconst dialogStyle = {\n    width: '800px'\n};\n\nclass FlappySlider extends React.Component {\n    static propTypes = {\n        slides: PropTypes.array\n    }\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            visible: false\n        };\n\n        this.setVisible = this.setVisible.bind(this);\n    }\n\n    setVisible() {\n        this.setState(prevState => {\n            return {\n                visible: !prevState.visible\n            };\n        });\n    }\n\n    render() {\n        return (<div className=\"demo-wrapper\">\n            <Button type=\"primary\" onClick={this.setVisible}>Marquee Banner</Button>\n            <Dialog visible={this.state.visible} title=\"Alibaba.com\" footer={false} style={dialogStyle} animation={false} onClose={this.setVisible}>\n                <Slider>\n                    {\n                        this.props.slides.map((item, index) => <div key={index} className=\"slider-img-wrapper\"><img key={index} src={item.url} alt={item.text} /></div>)\n                    }\n                </Slider>\n            </Dialog>\n        </div>);\n    }\n}\n\nReactDOM.render(<FlappySlider slides={slides}/>, mountNode);
    .slider-img-wrapper img {\n    width: 100%;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/slider-with-dialog.md b/compiled_docs/slider/demo/slider-with-dialog.md new file mode 100644 index 0000000000..33841aad54 --- /dev/null +++ b/compiled_docs/slider/demo/slider-with-dialog.md @@ -0,0 +1 @@ +{"title":"弹出来的跑马灯","meta":{"title":"弹出来的跑马灯","description":"\n

    如果你要将 Slider 放到 Dialog 中，此时你需要关闭 Dialog 的动画，避免 Slider 在计算内部元素宽度时造成出错。

    \n","order":"17"},"codes":{"jsx":"import { Slider, Dialog, Button } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst slides = [\n { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nconst dialogStyle = {\n width: '800px'\n};\n\nclass FlappySlider extends React.Component {\n static propTypes = {\n slides: PropTypes.array\n }\n\n constructor(props) {\n super(props);\n\n this.state = {\n visible: false\n };\n\n this.setVisible = this.setVisible.bind(this);\n }\n\n setVisible() {\n this.setState(prevState => {\n return {\n visible: !prevState.visible\n };\n });\n }\n\n render() {\n return (
    \n \n \n \n {\n this.props.slides.map((item, index) =>
    {item.text}
    )\n }\n     \n     \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".slider-img-wrapper img {\n width: 100%;\n}\n"},"body":"\n\n````jsx\nimport { Slider, Dialog, Button } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst slides = [\n { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nconst dialogStyle = {\n width: '800px'\n};\n\nclass FlappySlider extends React.Component {\n static propTypes = {\n slides: PropTypes.array\n }\n\n constructor(props) {\n super(props);\n\n this.state = {\n visible: false\n };\n\n this.setVisible = this.setVisible.bind(this);\n }\n\n setVisible() {\n this.setState(prevState => {\n return {\n visible: !prevState.visible\n };\n });\n }\n\n render() {\n return (
    \n \n \n \n {\n this.props.slides.map((item, index) =>
    {item.text}
    )\n }\n     \n     \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.slider-img-wrapper img {\n width: 100%;\n}\n````","html":"
    import { Slider, Dialog, Button } from '@alifd/next';\nimport PropTypes from 'prop-types';\n\nconst slides = [\n    { url: 'https://img.alicdn.com/tps/TB1bewbNVXXXXc5XXXXXXXXXXXX-1000-300.png', text: 'Tape Player Skin Design Competition' },\n    { url: 'https://img.alicdn.com/tps/TB1xuUcNVXXXXcRXXXXXXXXXXXX-1000-300.jpg', text: 'Mobile Phone Taobao Skin Call' },\n    { url: 'https://img.alicdn.com/tps/TB1ikP.NVXXXXaYXpXXXXXXXXXX-1000-300.jpg', text: 'Design Enabling Public Welfare' },\n    { url: 'https://img.alicdn.com/tps/TB1s1_JNVXXXXbhaXXXXXXXXXXX-1000-300.jpg', text: 'Amoy Doll Design Competition' }\n];\n\nconst dialogStyle = {\n    width: '800px'\n};\n\nclass FlappySlider extends React.Component {\n    static propTypes = {\n        slides: PropTypes.array\n    }\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            visible: false\n        };\n\n        this.setVisible = this.setVisible.bind(this);\n    }\n\n    setVisible() {\n        this.setState(prevState => {\n            return {\n                visible: !prevState.visible\n            };\n        });\n    }\n\n    render() {\n        return (<div className=\"demo-wrapper\">\n            <Button type=\"primary\" onClick={this.setVisible}>Marquee Banner</Button>\n            <Dialog visible={this.state.visible} title=\"Alibaba.com\" footer={false} style={dialogStyle} animation={false} onClose={this.setVisible}>\n                <Slider>\n                    {\n                        this.props.slides.map((item, index) => <div key={index} className=\"slider-img-wrapper\"><img key={index} src={item.url} alt={item.text} /></div>)\n                    }\n                </Slider>\n            </Dialog>\n        </div>);\n    }\n}\n\nReactDOM.render(<FlappySlider slides={slides}/>, mountNode);
    .slider-img-wrapper img {\n    width: 100%;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/slider-wrapper.en-us.md b/compiled_docs/slider/demo/slider-wrapper.en-us.md new file mode 100644 index 0000000000..6e1c6370fb --- /dev/null +++ b/compiled_docs/slider/demo/slider-wrapper.en-us.md @@ -0,0 +1 @@ +{"title":"Controled Swiping","meta":{"title":"Controled Swiping","description":"\n

    Users can package Slider components for controled. For example, To control of Slider components autoplay and autoplaySpeed values is achieved through a wrapper component.

    \n","order":"12"},"codes":{"jsx":"import { Slider, Select } from '@alifd/next';\n\nconst { Option } = Select;\n\nclass SliderWrapper extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n autoplay: false,\n autoplaySpeed: 1000\n };\n }\n\n onSelectAutoplay(value) {\n this.setState({ autoplay: value });\n }\n\n onSelectAutoplaySpeed(value) {\n this.setState({ autoplaySpeed: value });\n }\n\n render() {\n return (
    \n \n   \n \n
    \n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".next-slick .h3, .h4 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n"},"body":"\n````jsx\nimport { Slider, Select } from '@alifd/next';\n\nconst { Option } = Select;\n\nclass SliderWrapper extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n autoplay: false,\n autoplaySpeed: 1000\n };\n }\n\n onSelectAutoplay(value) {\n this.setState({ autoplay: value });\n }\n\n onSelectAutoplaySpeed(value) {\n this.setState({ autoplaySpeed: value });\n }\n\n render() {\n return (
    \n \n   \n \n
    \n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.next-slick .h3, .h4 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n````","html":"
    import { Slider, Select } from '@alifd/next';\n\nconst { Option } = Select;\n\nclass SliderWrapper extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            autoplay: false,\n            autoplaySpeed: 1000\n        };\n    }\n\n    onSelectAutoplay(value) {\n        this.setState({ autoplay: value });\n    }\n\n    onSelectAutoplaySpeed(value) {\n        this.setState({ autoplaySpeed: value });\n    }\n\n    render() {\n        return (<div>\n            <Select placeholder=\"Autoplay\" onChange={this.onSelectAutoplay.bind(this)}>\n                <Option value>True</Option>\n                <Option value={false}>False</Option>\n            </Select>\n            &nbsp;&nbsp;\n            <Select placeholder=\"Autoplay Speed\" onChange={this.onSelectAutoplaySpeed.bind(this)}>\n                <Option value={1000}>1 second</Option>\n                <Option value={2000}>2 seconds</Option>\n                <Option value={3000}>3 seconds</Option>\n            </Select>\n            <br />\n            <br />\n            <Slider autoplay={this.state.autoplay} autoplaySpeed={this.state.autoplaySpeed}>\n                <div><h3 className=\"h3\">1</h3></div>\n                <div><h3 className=\"h3\">2</h3></div>\n                <div><h3 className=\"h3\">3</h3></div>\n                <div><h3 className=\"h3\">4</h3></div>\n            </Slider>\n        </div>);\n    }\n}\n\nReactDOM.render(<SliderWrapper />, mountNode);
    .next-slick .h3, .h4 {\n        background: #4F74B3;\n        color: #fff;\n        line-height: 150px;\n        text-align: center;\n        margin-top: 0;\n        margin-bottom: 0;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/slider-wrapper.md b/compiled_docs/slider/demo/slider-wrapper.md new file mode 100644 index 0000000000..2c0df64752 --- /dev/null +++ b/compiled_docs/slider/demo/slider-wrapper.md @@ -0,0 +1 @@ +{"title":"外部控制","meta":{"title":"外部控制","description":"\n

    用户可以包装 Slider 组件，以便进行外部控制。例如通过包装组件实现外部对 Slider 组件 autoplay 和 autoplaySpeed 值的控制。

    \n","order":"12"},"codes":{"jsx":"import { Slider, Select } from '@alifd/next';\n\nconst { Option } = Select;\n\nclass SliderWrapper extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n autoplay: false,\n autoplaySpeed: 1000\n };\n }\n\n onSelectAutoplay(value) {\n this.setState({ autoplay: value });\n }\n\n onSelectAutoplaySpeed(value) {\n this.setState({ autoplaySpeed: value });\n }\n\n render() {\n return (
    \n \n   \n \n
    \n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".next-slick .h3, .h4 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n"},"body":"\n\n````jsx\nimport { Slider, Select } from '@alifd/next';\n\nconst { Option } = Select;\n\nclass SliderWrapper extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n autoplay: false,\n autoplaySpeed: 1000\n };\n }\n\n onSelectAutoplay(value) {\n this.setState({ autoplay: value });\n }\n\n onSelectAutoplaySpeed(value) {\n this.setState({ autoplaySpeed: value });\n }\n\n render() {\n return (
    \n \n   \n \n
    \n
    \n \n

    1

    \n

    2

    \n

    3

    \n

    4

    \n     \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.next-slick .h3, .h4 {\n background: #4F74B3;\n color: #fff;\n line-height: 150px;\n text-align: center;\n margin-top: 0;\n margin-bottom: 0;\n}\n````","html":"
    import { Slider, Select } from '@alifd/next';\n\nconst { Option } = Select;\n\nclass SliderWrapper extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            autoplay: false,\n            autoplaySpeed: 1000\n        };\n    }\n\n    onSelectAutoplay(value) {\n        this.setState({ autoplay: value });\n    }\n\n    onSelectAutoplaySpeed(value) {\n        this.setState({ autoplaySpeed: value });\n    }\n\n    render() {\n        return (<div>\n            <Select placeholder=\"Autoplay\" onChange={this.onSelectAutoplay.bind(this)}>\n                <Option value>True</Option>\n                <Option value={false}>False</Option>\n            </Select>\n            &nbsp;&nbsp;\n            <Select placeholder=\"Autoplay Speed\" onChange={this.onSelectAutoplaySpeed.bind(this)}>\n                <Option value={1000}>1 second</Option>\n                <Option value={2000}>2 seconds</Option>\n                <Option value={3000}>3 seconds</Option>\n            </Select>\n            <br />\n            <br />\n            <Slider autoplay={this.state.autoplay} autoplaySpeed={this.state.autoplaySpeed}>\n                <div><h3 className=\"h3\">1</h3></div>\n                <div><h3 className=\"h3\">2</h3></div>\n                <div><h3 className=\"h3\">3</h3></div>\n                <div><h3 className=\"h3\">4</h3></div>\n            </Slider>\n        </div>);\n    }\n}\n\nReactDOM.render(<SliderWrapper />, mountNode);
    .next-slick .h3, .h4 {\n        background: #4F74B3;\n        color: #fff;\n        line-height: 150px;\n        text-align: center;\n        margin-top: 0;\n        margin-bottom: 0;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/variable-width.en-us.md b/compiled_docs/slider/demo/variable-width.en-us.md new file mode 100644 index 0000000000..560239730e --- /dev/null +++ b/compiled_docs/slider/demo/variable-width.en-us.md @@ -0,0 +1 @@ +{"title":"Different Picture Widths","meta":{"title":"Different Picture Widths","description":"\n

    By default, Slider considers all child elements to be equal.\nBy setting variableWidth to true, you can place images of different widths in the Slider.

    \n","order":"15"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nconst settings = {\n className: 'custom-slide variable-width',\n arrowPosition: 'outer',\n dots: true,\n infinite: true,\n slidesToShow: 1,\n slidesToScroll: 1,\n variableWidth: true\n};\n\nReactDOM.render(\n \n

    100

    \n

    200

    \n

    75

    \n

    300

    \n

    225

    \n

    175

    \n     \n , mountNode);\n","css":".variable-width .next-slick-slide p {\n background: #4F74B3;;\n height: 100px;\n color: #fff;\n margin: 5px;\n line-height: 100px;\n text-align: center;\n}\n"},"body":"\n````jsx\nimport { Slider } from '@alifd/next';\n\nconst settings = {\n className: 'custom-slide variable-width',\n arrowPosition: 'outer',\n dots: true,\n infinite: true,\n slidesToShow: 1,\n slidesToScroll: 1,\n variableWidth: true\n};\n\nReactDOM.render(\n \n

    100

    \n

    200

    \n

    75

    \n

    300

    \n

    225

    \n

    175

    \n     \n , mountNode);\n````\n\n\n````css\n.variable-width .next-slick-slide p {\n background: #4F74B3;;\n height: 100px;\n color: #fff;\n margin: 5px;\n line-height: 100px;\n text-align: center;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nconst settings = {\n    className: 'custom-slide variable-width',\n    arrowPosition: 'outer',\n    dots: true,\n    infinite: true,\n    slidesToShow: 1,\n    slidesToScroll: 1,\n    variableWidth: true\n};\n\nReactDOM.render(\n    <Slider {...settings}>\n        <div style={{width: 100}}><p>100</p></div>\n        <div style={{width: 200}}><p>200</p></div>\n        <div style={{width: 75}}><p>75</p></div>\n        <div style={{width: 300}}><p>300</p></div>\n        <div style={{width: 225}}><p>225</p></div>\n        <div style={{width: 175}}><p>175</p></div>\n    </Slider>\n    , mountNode);
    .variable-width .next-slick-slide p {\n  background: #4F74B3;;\n  height: 100px;\n  color: #fff;\n  margin: 5px;\n  line-height: 100px;\n  text-align: center;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/demo/variable-width.md b/compiled_docs/slider/demo/variable-width.md new file mode 100644 index 0000000000..aeb616cf7a --- /dev/null +++ b/compiled_docs/slider/demo/variable-width.md @@ -0,0 +1 @@ +{"title":"不同的图片宽度","meta":{"title":"不同的图片宽度","description":"\n

    Slider 在默认情况下会认为所有的子元素是等宽的。\n通过设置 variableWidth 为 true，您可以在 Slider 中放置不同宽度的图片。

    \n","order":"15"},"codes":{"jsx":"import { Slider } from '@alifd/next';\n\nconst settings = {\n className: 'custom-slide variable-width',\n arrowPosition: 'outer',\n dots: true,\n infinite: true,\n slidesToShow: 1,\n slidesToScroll: 1,\n variableWidth: true\n};\n\nReactDOM.render(\n \n

    100

    \n

    200

    \n

    75

    \n

    300

    \n

    225

    \n

    175

    \n     \n , mountNode);\n","css":".variable-width .next-slick-slide p {\n background: #4F74B3;;\n height: 100px;\n color: #fff;\n margin: 5px;\n line-height: 100px;\n text-align: center;\n}\n"},"body":"\n\n````jsx\nimport { Slider } from '@alifd/next';\n\nconst settings = {\n className: 'custom-slide variable-width',\n arrowPosition: 'outer',\n dots: true,\n infinite: true,\n slidesToShow: 1,\n slidesToScroll: 1,\n variableWidth: true\n};\n\nReactDOM.render(\n \n

    100

    \n

    200

    \n

    75

    \n

    300

    \n

    225

    \n

    175

    \n     \n , mountNode);\n````\n\n\n````css\n.variable-width .next-slick-slide p {\n background: #4F74B3;;\n height: 100px;\n color: #fff;\n margin: 5px;\n line-height: 100px;\n text-align: center;\n}\n````","html":"
    import { Slider } from '@alifd/next';\n\nconst settings = {\n    className: 'custom-slide variable-width',\n    arrowPosition: 'outer',\n    dots: true,\n    infinite: true,\n    slidesToShow: 1,\n    slidesToScroll: 1,\n    variableWidth: true\n};\n\nReactDOM.render(\n    <Slider {...settings}>\n        <div style={{width: 100}}><p>100</p></div>\n        <div style={{width: 200}}><p>200</p></div>\n        <div style={{width: 75}}><p>75</p></div>\n        <div style={{width: 300}}><p>300</p></div>\n        <div style={{width: 225}}><p>225</p></div>\n        <div style={{width: 175}}><p>175</p></div>\n    </Slider>\n    , mountNode);
    .variable-width .next-slick-slide p {\n  background: #4F74B3;;\n  height: 100px;\n  color: #fff;\n  margin: 5px;\n  line-height: 100px;\n  text-align: center;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/slider/index.en-us.md b/compiled_docs/slider/index.en-us.md new file mode 100644 index 0000000000..6811271cbb --- /dev/null +++ b/compiled_docs/slider/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

    Guide#

    The Slider component is a slide show that displays many components of the content horizontally on the page.\nThe Slider are independent of each other and there is no logical relationship between content and data.

    \n

    When To Use#

      \n
    • single picture：This style is usually used to carry operational banners. It is a relatively fixed module.
      • \n
    • multiple picture：browse multiple unit message
      • \n
    \n

    Note#

      \n
    1. When there is only one picture in the Slider component, it will hides the navigation anchor, disables automatic cycling (even if the upper layer is set), and prohibits drag and drop playback (even if the upper layer is set).
      2. \n
    2. If you want to put the Slider into the Dialog, you need to close the Dialog animation at this time, to avoid the Slider causing an error when calculating the inner element width.
      3. \n
    3. If there is a 1px image height problem, try wrapping a div tag outside the img tag.
      4. \n
    \n

    API#

    ","api":"

    Slider#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    adaptiveHeightWhether to use adaptive heightBooleanfalse
    animationAnimation type, default is 'slide'String/Boolean'slide'
    arrowsWhether to show arrowsBooleantrue
    arrowSizeNavigation arrow size , option has: 'medium', 'large'

    option:
    'medium', 'large'    		Enum'medium'
    arrowPositionPosition of navigation arrow, option: 'inner', 'outer'

    option:
    'inner', 'outer'    		Enum'inner'
    arrowDirectionDirection of the arrow, option: 'hoz', 'ver'

    option:
    'hoz', 'ver'    		Enum'hoz'
    autoplayWhether to play automaticallyBooleanfalse
    autoplaySpeedAutoplay speedNumber3000
    nextArrowBackward arrowReactElementnull
    prevArrowForward arrowReactElementnull
    centerModeIs centering mode enabled?Booleanfalse
    dotsWhether to display navigation anchorBooleantrue
    dotsDirectionNavigation anchor position

    option:
    'hoz', 'ver'    		Enum'hoz'
    dotRenderCustom navigation anchor, such as your custom components.

    signatures:
    Function() => void    		Function-
    draggableCan it be draggedBooleantrue
    infiniteWhether to use infinite circulation modeBooleantrue
    defaultActiveIndexInitially activated rotation mapNumber0
    lazyLoadWhether to enable lazy loadingBooleanfalse
    slideDirectionSlide direction

    option:
    'hoz', 'ver'    		Enum'hoz'
    slidesToShowNumber of pictures displayed at the same timeNumber1
    slidesToScrollSwiping number of pictures at the same timeNumber1
    speedSlide speedNumber500
    activeIndexSlide to the specified carousel (controlled)Number-
    triggerTypeAnchor navigation trigger

    option:
    'click', 'hover'    		Enum'click'
    onChangeSlider switching callback function

    signatures:
    Function(index: Number) => void
    params:
    index: {Number} Slide index    		Function() => {}
    centerPaddingSide padding when in center mode (px or %); The display part is center, padding will produce a preview before and afterString'50px'
    cssEaseCSS3 Animation Easing, default is ‘ease’String'ease'
    focusOnSelectMulti-mode swiping, click to automatically centerBooleanfalse
    \n

    Other#

    next-slider is forked from react-slick

    \n"} \ No newline at end of file diff --git a/compiled_docs/slider/index.md b/compiled_docs/slider/index.md new file mode 100644 index 0000000000..994e69a311 --- /dev/null +++ b/compiled_docs/slider/index.md @@ -0,0 +1 @@ +{"meta":"

    Guide#

    轮播组件，就是以幻灯片的方式，在页面中横向展示诸多内容的组件。\n轮播内容相互独立，前后在内容以及数据上都不存在逻辑关系。

    \n

    何时使用#

      \n
    • 单图轮播：该样式通常用于承载运营banner，是一个位置相对固定的模块。
      • \n
    • 多图轮播：单元信息浏览
      • \n
    \n

    使用注意点#

      \n
    1. 当轮播组件中只有一张图片的时候，轮播组件会隐藏导航锚点、禁止自动循环（即使上层设置了）、禁止拖拽播放（即使上层设置了）。
      2. \n
    2. 如果您要将 Slider 放到 Dialog 中，此时你需要关闭 Dialog 的动画，避免 Slider 在计算内部元素宽度时造成出错。
      3. \n
    3. 如果出现图片高度 1px 的问题，可以尝试在 img 标签的外部包裹一层 div 标签。
      4. \n
    \n

    API#

    ","api":"

    Slider#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    adaptiveHeight是否使用自适应高度Booleanfalse
    animation动效类型，默认是'slide'String/Boolean'slide'
    arrows是否显示箭头Booleantrue
    arrowSize导航箭头大小 可选值: 'medium', 'large'

    可选值:
    'medium', 'large'    		Enum'medium'
    arrowPosition导航箭头位置 可选值: 'inner', 'outer'

    可选值:
    'inner', 'outer'    		Enum'inner'
    arrowDirection导航箭头的方向 可选值: 'hoz', 'ver'

    可选值:
    'hoz', 'ver'    		Enum'hoz'
    autoplay是否自动播放Booleanfalse
    autoplaySpeed自动播放的速度Number3000
    nextArrow向后箭头ReactElementnull
    prevArrow向前箭头ReactElementnull
    centerMode是否启用居中模式Booleanfalse
    dots是否显示导航锚点Booleantrue
    dotsDirection导航锚点位置

    可选值:
    'hoz', 'ver'    		Enum'hoz'
    dotRender自定义导航锚点

    签名:
    Function() => void    		Function-
    draggable是否可拖拽Booleantrue
    infinite是否使用无穷循环模式Booleantrue
    defaultActiveIndex初始被激活的轮播图Number0
    lazyLoad是否启用懒加载Booleanfalse
    slideDirection轮播方向

    可选值:
    'hoz', 'ver'    		Enum'hoz'
    slidesToShow同时展示的图片数量Number1
    slidesToScroll同时滑动的图片数量Number1
    speed轮播速度Number500
    activeIndex跳转到指定的轮播图（受控）Number-
    triggerType锚点导航触发方式

    可选值:
    'click', 'hover'    		Enum'click'
    onChange轮播切换的回调函数

    签名:
    Function(index: Number) => void
    参数:
    index: {Number} 幻灯片的索引    		Function() => {}
    centerPaddingSide padding when in center mode (px or %); 展示部分为center，pading会产生前后预览String'50px'
    cssEaseCSS3 Animation Easing,默认‘ease’String'ease'
    focusOnSelect多图轮播时，点击选中后自动居中Booleanfalse
    \n

    说明#

    next-slider is forked from react-slick

    \n"} \ No newline at end of file diff --git a/compiled_docs/split-button/demo/basic.en-us.md b/compiled_docs/split-button/demo/basic.en-us.md new file mode 100644 index 0000000000..b767df7242 --- /dev/null +++ b/compiled_docs/split-button/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

    Use SplitButton as Button.

    \n","order":"0"},"codes":{"jsx":"import { SplitButton } from '@alifd/next';\n\nconst { Item } = SplitButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => {item});\n\nReactDOM.render(
    \n {menu}    \n {menu}  \n {menu}

    \n
    , mountNode);\n"},"body":"\n````jsx\nimport { SplitButton } from '@alifd/next';\n\nconst { Item } = SplitButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => {item});\n\nReactDOM.render(
    \n {menu}    \n {menu}  \n {menu}

    \n
    , mountNode);\n````","html":"
    import { SplitButton } from '@alifd/next';\n\nconst { Item } = SplitButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => <Item key={item}>{item}</Item>);\n\nReactDOM.render(<div>\n    <SplitButton label=\"Edit Document\">{menu}</SplitButton> &nbsp; &nbsp;\n    <SplitButton label=\"Edit Document\" type=\"primary\">{menu}</SplitButton>&nbsp;&nbsp;\n    <SplitButton label=\"Edit Document\" type=\"secondary\">{menu}</SplitButton><br /><br />\n</div>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/split-button/demo/basic.md b/compiled_docs/split-button/demo/basic.md new file mode 100644 index 0000000000..7240cf6c95 --- /dev/null +++ b/compiled_docs/split-button/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

    最简单的用法。支持 Button 的 type, size, component, ghost 等属性透传。

    \n","order":"0"},"codes":{"jsx":"import { SplitButton } from '@alifd/next';\n\nconst { Item } = SplitButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => {item});\n\nReactDOM.render(
    \n {menu}    \n {menu}  \n {menu}

    \n
    , mountNode);\n"},"body":"\n\n````jsx\nimport { SplitButton } from '@alifd/next';\n\nconst { Item } = SplitButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => {item});\n\nReactDOM.render(
    \n {menu}    \n {menu}  \n {menu}

    \n
    , mountNode);\n````","html":"
    import { SplitButton } from '@alifd/next';\n\nconst { Item } = SplitButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => <Item key={item}>{item}</Item>);\n\nReactDOM.render(<div>\n    <SplitButton label=\"Edit Document\">{menu}</SplitButton> &nbsp; &nbsp;\n    <SplitButton label=\"Edit Document\" type=\"primary\">{menu}</SplitButton>&nbsp;&nbsp;\n    <SplitButton label=\"Edit Document\" type=\"secondary\">{menu}</SplitButton><br /><br />\n</div>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/split-button/demo/composite.en-us.md b/compiled_docs/split-button/demo/composite.en-us.md new file mode 100644 index 0000000000..13fc36aa95 --- /dev/null +++ b/compiled_docs/split-button/demo/composite.en-us.md @@ -0,0 +1 @@ +{"title":"Composite","meta":{"title":"Composite","description":"\n

    A more complex use case, control menu with attributes from Menu.

    \n","order":"3"},"codes":{"jsx":"import { SplitButton } from '@alifd/next';\n\nconst { Item } = SplitButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => {item});\n\nclass CompositeSplitButton extends React.Component {\n state = {\n visible: false,\n label: 'Choose Action'\n }\n\n onSelect = val => {\n this.setState({\n visible: false,\n label: val\n });\n }\n\n changeVisible = visible => {\n this.setState({\n visible\n });\n }\n\n render() {\n const { visible, label } = this.state;\n return ({menu});\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { SplitButton } from '@alifd/next';\n\nconst { Item } = SplitButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => {item});\n\nclass CompositeSplitButton extends React.Component {\n state = {\n visible: false,\n label: 'Choose Action'\n }\n\n onSelect = val => {\n this.setState({\n visible: false,\n label: val\n });\n }\n\n changeVisible = visible => {\n this.setState({\n visible\n });\n }\n\n render() {\n const { visible, label } = this.state;\n return ({menu});\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { SplitButton } from '@alifd/next';\n\nconst { Item } = SplitButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => <Item key={item}>{item}</Item>);\n\nclass CompositeSplitButton extends React.Component {\n    state = {\n        visible: false,\n        label: 'Choose Action'\n    }\n\n    onSelect = val => {\n        this.setState({\n            visible: false,\n            label: val\n        });\n    }\n\n    changeVisible = visible => {\n        this.setState({\n            visible\n        });\n    }\n\n    render() {\n        const { visible, label } = this.state;\n        return (<SplitButton label={label} visible={visible} onVisibleChange={this.changeVisible} onItemClick={this.onSelect}>{menu}</SplitButton>);\n    }\n}\n\nReactDOM.render(<CompositeSplitButton />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/split-button/demo/composite.md b/compiled_docs/split-button/demo/composite.md new file mode 100644 index 0000000000..72d590dbd5 --- /dev/null +++ b/compiled_docs/split-button/demo/composite.md @@ -0,0 +1 @@ +{"title":"复合使用","meta":{"title":"复合使用","description":"\n

    复合使用菜单，监听菜单行为。

    \n","order":"3"},"codes":{"jsx":"import { SplitButton } from '@alifd/next';\n\nconst { Item } = SplitButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => {item});\n\nclass CompositeSplitButton extends React.Component {\n state = {\n visible: false,\n label: 'Choose Action'\n }\n\n onSelect = val => {\n this.setState({\n visible: false,\n label: val\n });\n }\n\n changeVisible = visible => {\n this.setState({\n visible\n });\n }\n\n render() {\n const { visible, label } = this.state;\n return ({menu});\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { SplitButton } from '@alifd/next';\n\nconst { Item } = SplitButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => {item});\n\nclass CompositeSplitButton extends React.Component {\n state = {\n visible: false,\n label: 'Choose Action'\n }\n\n onSelect = val => {\n this.setState({\n visible: false,\n label: val\n });\n }\n\n changeVisible = visible => {\n this.setState({\n visible\n });\n }\n\n render() {\n const { visible, label } = this.state;\n return ({menu});\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { SplitButton } from '@alifd/next';\n\nconst { Item } = SplitButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => <Item key={item}>{item}</Item>);\n\nclass CompositeSplitButton extends React.Component {\n    state = {\n        visible: false,\n        label: 'Choose Action'\n    }\n\n    onSelect = val => {\n        this.setState({\n            visible: false,\n            label: val\n        });\n    }\n\n    changeVisible = visible => {\n        this.setState({\n            visible\n        });\n    }\n\n    render() {\n        const { visible, label } = this.state;\n        return (<SplitButton label={label} visible={visible} onVisibleChange={this.changeVisible} onItemClick={this.onSelect}>{menu}</SplitButton>);\n    }\n}\n\nReactDOM.render(<CompositeSplitButton />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/split-button/demo/menu.en-us.md b/compiled_docs/split-button/demo/menu.en-us.md new file mode 100644 index 0000000000..a3580109b6 --- /dev/null +++ b/compiled_docs/split-button/demo/menu.en-us.md @@ -0,0 +1 @@ +{"title":"Menu","meta":{"title":"Menu","description":"\n

    SplitButton with complex menus.

    \n","order":"3"},"codes":{"jsx":"import { SplitButton } from '@alifd/next';\n\nconst { Item, Group, Divider } = SplitButton;\n\nReactDOM.render( console.log(key)}>\n Undo\n Redo\n \n \n Cut\n Copy\n Paste\n \n, mountNode);\n"},"body":"\n````jsx\nimport { SplitButton } from '@alifd/next';\n\nconst { Item, Group, Divider } = SplitButton;\n\nReactDOM.render( console.log(key)}>\n Undo\n Redo\n \n \n Cut\n Copy\n Paste\n \n, mountNode);\n````","html":"
    import { SplitButton } from '@alifd/next';\n\nconst { Item, Group, Divider } = SplitButton;\n\nReactDOM.render(<SplitButton label=\"Edit Document\" onItemClick={key => console.log(key)}>\n    <Item>Undo</Item>\n    <Item>Redo</Item>\n    <Divider />\n    <Group>\n        <Item helper=\"CTRL + X\">Cut</Item>\n        <Item helper=\"CTRL + C\">Copy</Item>\n        <Item helper=\"CTRL + V\">Paste</Item>\n    </Group>\n</SplitButton>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/split-button/demo/menu.md b/compiled_docs/split-button/demo/menu.md new file mode 100644 index 0000000000..88f73b4bca --- /dev/null +++ b/compiled_docs/split-button/demo/menu.md @@ -0,0 +1 @@ +{"title":"复杂菜单","meta":{"title":"复杂菜单","description":"\n

    支持菜单组和菜单分割线，使用方法同 Menu.Group, Menu.Item, Menu.Divider。

    \n","order":"3"},"codes":{"jsx":"import { SplitButton } from '@alifd/next';\n\nconst { Item, Group, Divider } = SplitButton;\n\nReactDOM.render( console.log(key)}>\n Undo\n Redo\n \n \n Cut\n Copy\n Paste\n \n, mountNode);\n"},"body":"\n\n````jsx\nimport { SplitButton } from '@alifd/next';\n\nconst { Item, Group, Divider } = SplitButton;\n\nReactDOM.render( console.log(key)}>\n Undo\n Redo\n \n \n Cut\n Copy\n Paste\n \n, mountNode);\n````","html":"
    import { SplitButton } from '@alifd/next';\n\nconst { Item, Group, Divider } = SplitButton;\n\nReactDOM.render(<SplitButton label=\"Edit Document\" onItemClick={key => console.log(key)}>\n    <Item>Undo</Item>\n    <Item>Redo</Item>\n    <Divider />\n    <Group>\n        <Item helper=\"CTRL + X\">Cut</Item>\n        <Item helper=\"CTRL + C\">Copy</Item>\n        <Item helper=\"CTRL + V\">Paste</Item>\n    </Group>\n</SplitButton>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/split-button/demo/size.en-us.md b/compiled_docs/split-button/demo/size.en-us.md new file mode 100644 index 0000000000..c81e632a44 --- /dev/null +++ b/compiled_docs/split-button/demo/size.en-us.md @@ -0,0 +1 @@ +{"title":"Size","meta":{"title":"Size","description":"\n

    Change the component size by passing size.

    \n","order":"1"},"codes":{"jsx":"import { SplitButton } from '@alifd/next';\n\nconst { Item } = SplitButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => {item});\n\nReactDOM.render(
    \n {menu}    \n {menu}    \n {menu}\n
    , mountNode);\n"},"body":"\n````jsx\nimport { SplitButton } from '@alifd/next';\n\nconst { Item } = SplitButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => {item});\n\nReactDOM.render(
    \n {menu}    \n {menu}    \n {menu}\n
    , mountNode);\n````","html":"
    import { SplitButton } from '@alifd/next';\n\nconst { Item } = SplitButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => <Item key={item}>{item}</Item>);\n\nReactDOM.render(<div>\n    <SplitButton label=\"Edit Document\" size=\"small\">{menu}</SplitButton> &nbsp; &nbsp;\n    <SplitButton label=\"Edit Document\" size=\"medium\">{menu}</SplitButton> &nbsp; &nbsp;\n    <SplitButton label=\"Edit Document\" size=\"large\">{menu}</SplitButton>\n</div>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/split-button/demo/size.md b/compiled_docs/split-button/demo/size.md new file mode 100644 index 0000000000..632928ed11 --- /dev/null +++ b/compiled_docs/split-button/demo/size.md @@ -0,0 +1 @@ +{"title":"尺寸","meta":{"title":"尺寸","description":"\n

    SplitButton 实际是上一个按钮组，通过 size 属性可以改变按钮组的大小。

    \n","order":"1"},"codes":{"jsx":"import { SplitButton } from '@alifd/next';\n\nconst { Item } = SplitButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => {item});\n\nReactDOM.render(
    \n {menu}    \n {menu}    \n {menu}\n
    , mountNode);\n"},"body":"\n\n````jsx\nimport { SplitButton } from '@alifd/next';\n\nconst { Item } = SplitButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => {item});\n\nReactDOM.render(
    \n {menu}    \n {menu}    \n {menu}\n
    , mountNode);\n````","html":"
    import { SplitButton } from '@alifd/next';\n\nconst { Item } = SplitButton;\nconst menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => <Item key={item}>{item}</Item>);\n\nReactDOM.render(<div>\n    <SplitButton label=\"Edit Document\" size=\"small\">{menu}</SplitButton> &nbsp; &nbsp;\n    <SplitButton label=\"Edit Document\" size=\"medium\">{menu}</SplitButton> &nbsp; &nbsp;\n    <SplitButton label=\"Edit Document\" size=\"large\">{menu}</SplitButton>\n</div>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/split-button/index.en-us.md b/compiled_docs/split-button/index.en-us.md new file mode 100644 index 0000000000..27c78cf5e4 --- /dev/null +++ b/compiled_docs/split-button/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

    User Guide#

    SplitButton is kind of GroupButton, only the icon part could be trigerred by user behavior.

    \n

    API#

    ","api":"

    SplitButton#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    sizeSize of button

    option:
    'small', 'medium', 'large'    		Enum'medium'
    typeTypeo of button

    option:
    'normal', 'primary', 'secondary'    		Enum'normal'
    labelText in buttonReactNode-
    componentThe html tag to be rendered

    option:
    'button', 'a'    		Enum-
    ghostSetting ghost button

    option:
    'light', 'dark', false, true    		Enum-
    defaultSelectedKeysDefault selected items, as MenuArray[]
    selectedKeysSelected items, as MenuArray-
    selectModeSelect mode of menu

    option:
    'single', 'multiple'    		Enum-
    onSelectCallback when select the menu，see Menu

    signature:
    Function() => void    		Function-
    onItemClickCallback when click the menu，see Menu

    signature:
    Function() => void    		Function-
    triggerPropsThe props of trigger elementObject-
    autoWidthIf popup width equals to button widthBooleantrue
    visibleVisible state of the popupBoolean-
    defaultVisibleDefault visible state of the popupBoolean-
    onVisibleChangeCallback when visible state change

    signature:
    Function(visible: Boolean, reason: String) => void
    parameters:
    visible: {Boolean} visible state of the popup
    reason: {String} reason to change visible state    		Functionfunc.noop
    popupTriggerTypeTrigger type of popup

    option:
    'click', 'hover'    		Enum'click'
    popupAlignAlign of popup, @see Overlay doc for detailString'tr br'
    popupStyleCustom style of popupObject-
    popupClassNameCustom className of popupString-
    popupPropsProps of popupObject{}
    menuPropsProps of MenuObject{}
    leftButtonPropsProps of left buttonObject{}
    \n"} \ No newline at end of file diff --git a/compiled_docs/split-button/index.md b/compiled_docs/split-button/index.md new file mode 100644 index 0000000000..5f65f3c78c --- /dev/null +++ b/compiled_docs/split-button/index.md @@ -0,0 +1 @@ +{"meta":"

    使用指南#

    SplitButton 同样由 Button 和 Menu 组成，其在触发区域上可以分为两部分，其中 Icon 部分作为弹层菜单的触发区域。\n菜单只有在鼠标悬浮或点击右侧图标区域的时候才会展示。

    \n

    API#

    ","api":"

    SplitButton#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    size按钮组的尺寸

    可选值:
    'small', 'medium', 'large'    		Enum'medium'
    type按钮的类型

    可选值:
    'normal', 'primary', 'secondary'    		Enum'normal'
    label主按钮的文案ReactNode-
    component设置标签类型

    可选值:
    'button', 'a'    		Enum-
    ghost是否为幽灵按钮

    可选值:
    'light', 'dark', false, true    		Enum-
    defaultSelectedKeys默认激活的菜单项（用法同 Menu 非受控）Array[]
    selectedKeys激活的菜单项（用法同 Menu 受控）Array-
    selectMode菜单的选择模式

    可选值:
    'single', 'multiple'    		Enum-
    onSelect选择菜单项时的回调，参考 Menu

    签名:
    Function() => void    		Functionfunc.noop
    onItemClick点击菜单项时的回调，参考 Menu

    签名:
    Function() => void    		Functionfunc.noop
    triggerProps触发按钮的属性（支持 Button 的所有属性透传）Object-
    autoWidth弹层菜单的宽度是否与按钮组一致Booleantrue
    visible弹层是否显示Boolean-
    defaultVisible弹层默认是否显示Boolean-
    onVisibleChange弹层显示状态变化时的回调函数

    签名:
    Function(visible: Boolean, reason: String) => void
    参数:
    visible: {Boolean} 弹层显示状态
    reason: {String} 触发弹层显示和隐藏的来源    		Functionfunc.noop
    popupTriggerType弹层的触发方式

    可选值:
    'click', 'hover'    		Enum'click'
    popupAlign弹层对齐方式, 详情见Overlay alignString-
    popupStyle弹层自定义样式Object-
    popupClassName弹层自定义样式类String-
    popupProps透传给弹层的属性Object-
    menuProps透传给 Menu 的属性Object{}
    leftButtonProps透传给 左侧按钮 的属性Object{}
    \n"} \ No newline at end of file diff --git a/compiled_docs/step/demo/basic.en-us.md b/compiled_docs/step/demo/basic.en-us.md new file mode 100644 index 0000000000..bcd8ac5afb --- /dev/null +++ b/compiled_docs/step/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

    In the simplest case, Step has three types that can be toggled through the shape attribute.

    \n

    The circle type can be used to set the orientation of the text through labelPlacement.

    \n","order":"0"},"codes":{"jsx":"import { Step } from '@alifd/next';\n\nconst steps = [['Step 1', 'Open the refrigerator door'], ['Step 2', 'Put the elephant in the refrigerator'], ['Step 3', 'Close the refrigerator door']].map((item, index) => );\n\nReactDOM.render(
    \n

    Arrow

    \n \n {steps}\n \n\n

    Circle

    \n \n {steps}\n \n\n

    Circle(Horizontal content)

    \n \n {steps}\n \n\n

    Dot

    \n \n {steps}\n \n\n
    , mountNode);\n"},"body":"\n````jsx\nimport { Step } from '@alifd/next';\n\nconst steps = [['Step 1', 'Open the refrigerator door'], ['Step 2', 'Put the elephant in the refrigerator'], ['Step 3', 'Close the refrigerator door']].map((item, index) => );\n\nReactDOM.render(
    \n

    Arrow

    \n \n {steps}\n \n\n

    Circle

    \n \n {steps}\n \n\n

    Circle(Horizontal content)

    \n \n {steps}\n \n\n

    Dot

    \n \n {steps}\n \n\n
    , mountNode);\n````","html":"
    import { Step } from '@alifd/next';\n\nconst steps = [['Step 1', 'Open the refrigerator door'], ['Step 2', 'Put the elephant in the refrigerator'], ['Step 3', 'Close the refrigerator door']].map((item, index) => <Step.Item aria-current={index === 1 ? 'step' : null} key={index} title={item[0]} content={item[1]}/>);\n\nReactDOM.render(<div>\n    <h3>Arrow</h3>\n    <Step current={1} shape=\"arrow\">\n        {steps}\n    </Step>\n\n    <h3>Circle</h3>\n    <Step current={1} shape=\"circle\">\n        {steps}\n    </Step>\n\n    <h3>Circle(Horizontal content)</h3>\n    <Step current={1} shape=\"circle\" labelPlacement=\"hoz\">\n        {steps}\n    </Step>\n\n    <h3>Dot</h3>\n    <Step current={1} shape=\"dot\">\n        {steps}\n    </Step>\n\n</div>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/step/demo/basic.md b/compiled_docs/step/demo/basic.md new file mode 100644 index 0000000000..66770112c2 --- /dev/null +++ b/compiled_docs/step/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

    在最简单的情况下，Step 有三种类型，可以通过 shape 属性进行切换。

    \n

    circle类型可通过labelPlacement设置文本排列方向。

    \n","order":"0"},"codes":{"jsx":"import { Step } from '@alifd/next';\n\nconst steps = [['Step 1', 'Open the refrigerator door'], ['Step 2', 'Put the elephant in the refrigerator'], ['Step 3', 'Close the refrigerator door']].map((item, index) => );\n\nReactDOM.render(
    \n

    Arrow

    \n \n {steps}\n \n\n

    Circle

    \n \n {steps}\n \n\n

    Circle(Horizontal content)

    \n \n {steps}\n \n\n

    Dot

    \n \n {steps}\n \n\n
    , mountNode);\n"},"body":"\n\n````jsx\nimport { Step } from '@alifd/next';\n\nconst steps = [['Step 1', 'Open the refrigerator door'], ['Step 2', 'Put the elephant in the refrigerator'], ['Step 3', 'Close the refrigerator door']].map((item, index) => );\n\nReactDOM.render(
    \n

    Arrow

    \n \n {steps}\n \n\n

    Circle

    \n \n {steps}\n \n\n

    Circle(Horizontal content)

    \n \n {steps}\n \n\n

    Dot

    \n \n {steps}\n \n\n
    , mountNode);\n````","html":"
    import { Step } from '@alifd/next';\n\nconst steps = [['Step 1', 'Open the refrigerator door'], ['Step 2', 'Put the elephant in the refrigerator'], ['Step 3', 'Close the refrigerator door']].map((item, index) => <Step.Item aria-current={index === 1 ? 'step' : null} key={index} title={item[0]} content={item[1]}/>);\n\nReactDOM.render(<div>\n    <h3>Arrow</h3>\n    <Step current={1} shape=\"arrow\">\n        {steps}\n    </Step>\n\n    <h3>Circle</h3>\n    <Step current={1} shape=\"circle\">\n        {steps}\n    </Step>\n\n    <h3>Circle(Horizontal content)</h3>\n    <Step current={1} shape=\"circle\" labelPlacement=\"hoz\">\n        {steps}\n    </Step>\n\n    <h3>Dot</h3>\n    <Step current={1} shape=\"dot\">\n        {steps}\n    </Step>\n\n</div>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/step/demo/controlled.en-us.md b/compiled_docs/step/demo/controlled.en-us.md new file mode 100644 index 0000000000..5793620a6c --- /dev/null +++ b/compiled_docs/step/demo/controlled.en-us.md @@ -0,0 +1 @@ +{"title":"Controlled","meta":{"title":"Controlled","description":"\n

    By default, Step is defined as a display component. The upper component can modify the current step by modifying the value of the current property passed in. At the same time, each node's click event can be set to customize the callback.

    \n","order":"6"},"codes":{"jsx":"import { Step, Button, Select } from '@alifd/next';\n\nconst StepItem = Step.Item, ButtonGroup = Button.Group;\n\nclass Component extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n currentStep: 3,\n stepType: 'circle',\n stepAnimation: true,\n labelPlacement: 'ver'\n };\n\n this.onClick = this.onClick.bind(this);\n }\n next() {\n const s = this.state.currentStep + 1;\n\n this.setState({\n currentStep: s > 6 ? 6 : s\n });\n }\n prev() {\n const s = this.state.currentStep - 1;\n\n this.setState({\n currentStep: s < 0 ? 0 : s\n });\n }\n onClick(currentStep) {\n console.log(currentStep);\n\n this.setState({\n currentStep: currentStep\n });\n }\n onStepTypeChange(value) {\n this.setState({ stepType: value });\n }\n onStepAnimation(value) {\n this.setState({ stepAnimation: value });\n }\n onLabelPlacementChange(value) {\n this.setState({ labelPlacement: value });\n }\n render() {\n const {currentStep} = this.state;\n\n return (\n
    \n
    \n \n\n \n\n\n \n
    \n\n \n \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".custom-step-option {\n margin-bottom: 20px;\n}\n\n.custom-select {\n margin-right: 20px;\n}\n"},"body":"\n````jsx\nimport { Step, Button, Select } from '@alifd/next';\n\nconst StepItem = Step.Item, ButtonGroup = Button.Group;\n\nclass Component extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n currentStep: 3,\n stepType: 'circle',\n stepAnimation: true,\n labelPlacement: 'ver'\n };\n\n this.onClick = this.onClick.bind(this);\n }\n next() {\n const s = this.state.currentStep + 1;\n\n this.setState({\n currentStep: s > 6 ? 6 : s\n });\n }\n prev() {\n const s = this.state.currentStep - 1;\n\n this.setState({\n currentStep: s < 0 ? 0 : s\n });\n }\n onClick(currentStep) {\n console.log(currentStep);\n\n this.setState({\n currentStep: currentStep\n });\n }\n onStepTypeChange(value) {\n this.setState({ stepType: value });\n }\n onStepAnimation(value) {\n this.setState({ stepAnimation: value });\n }\n onLabelPlacementChange(value) {\n this.setState({ labelPlacement: value });\n }\n render() {\n const {currentStep} = this.state;\n\n return (\n
    \n
    \n \n\n \n\n\n \n
    \n\n \n \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.custom-step-option {\n margin-bottom: 20px;\n}\n\n.custom-select {\n margin-right: 20px;\n}\n````","html":"
    import { Step, Button, Select } from '@alifd/next';\n\nconst StepItem = Step.Item, ButtonGroup = Button.Group;\n\nclass Component extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            currentStep: 3,\n            stepType: 'circle',\n            stepAnimation: true,\n            labelPlacement: 'ver'\n        };\n\n        this.onClick = this.onClick.bind(this);\n    }\n    next() {\n        const s = this.state.currentStep + 1;\n\n        this.setState({\n            currentStep: s > 6 ? 6 : s\n        });\n    }\n    prev() {\n        const s = this.state.currentStep - 1;\n\n        this.setState({\n            currentStep: s < 0 ? 0 : s\n        });\n    }\n    onClick(currentStep) {\n        console.log(currentStep);\n\n        this.setState({\n            currentStep: currentStep\n        });\n    }\n    onStepTypeChange(value) {\n        this.setState({ stepType: value });\n    }\n    onStepAnimation(value) {\n        this.setState({ stepAnimation: value });\n    }\n    onLabelPlacementChange(value) {\n        this.setState({ labelPlacement: value });\n    }\n    render() {\n        const {currentStep} = this.state;\n\n        return (\n            <div>\n                <div className=\"custom-step-option\">\n                    <Select placeholder=\"Choose the dispaly type\" onChange={this.onStepTypeChange.bind(this)} className=\"custom-select\" defaultValue=\"circle\">\n                        {\n                            ['circle', 'arrow', 'dot'].map(item => <Select.Option value={item} key={item}>{item}</Select.Option>)\n                        }\n                    </Select>\n\n                    <Select placeholder=\"Label placement\" onChange={this.onLabelPlacementChange.bind(this)} className=\"custom-select\" defaultValue=\"ver\">\n                        {\n                            ['hoz', 'ver'].map(item => <Select.Option value={item} key={item}>{item}</Select.Option>)\n                        }\n                    </Select>\n\n\n                    <Select placeholder=\"Enable animation\" onChange={this.onStepAnimation.bind(this)} className=\"custom-select\" defaultValue>\n                        {\n                            [true, false].map((item, index) => <Select.Option value={item} key={index}>{item ? 'animation on' : 'animation off'}</Select.Option>)\n                        }\n                    </Select>\n                </div>\n\n                <Step current={currentStep} shape={this.state.stepType} animation={this.state.stepAnimation} labelPlacement={this.state.labelPlacement}>\n                    <StepItem title=\"Step 1\" onClick={this.onClick} content=\"Description\" />\n                    <StepItem title=\"Step 2\" onClick={this.onClick} content=\"Description\" />\n                    <StepItem title=\"Step 3\" onClick={this.onClick} content=\"Description\" />\n                    <StepItem title=\"Step 4\" onClick={this.onClick} content=\"Description\" />\n                    <StepItem title=\"Step 5\" onClick={this.onClick} content=\"Description\" />\n                    <StepItem title=\"Step 6\" onClick={this.onClick} content=\"Description\" />\n                </Step>\n                <br />\n                <br />\n                <ButtonGroup>\n                    <Button onClick={this.prev.bind(this)} type=\"primary\" disabled={currentStep === 0}>Backward</Button>\n                    <Button onClick={this.next.bind(this)} type=\"primary\" disabled={currentStep === 6}>Forward</Button>\n                </ButtonGroup>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Component />, mountNode);
    .custom-step-option {\n    margin-bottom: 20px;\n}\n\n.custom-select {\n    margin-right: 20px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/step/demo/controlled.md b/compiled_docs/step/demo/controlled.md new file mode 100644 index 0000000000..cef0a5b01e --- /dev/null +++ b/compiled_docs/step/demo/controlled.md @@ -0,0 +1 @@ +{"title":"受控模式","meta":{"title":"受控模式","description":"\n

    默认情况下，Step 定义为展示型组件，上层组件可以通过修改传入的 current 属性值来修改当前的步骤，同时可以设置每个节点的 click 事件，来自定义回调。

    \n","order":"6"},"codes":{"jsx":"import { Step, Button, Select } from '@alifd/next';\n\nconst StepItem = Step.Item, ButtonGroup = Button.Group;\n\nclass Component extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n currentStep: 3,\n stepType: 'circle',\n stepAnimation: true,\n labelPlacement: 'ver'\n };\n\n this.onClick = this.onClick.bind(this);\n }\n next() {\n const s = this.state.currentStep + 1;\n\n this.setState({\n currentStep: s > 6 ? 6 : s\n });\n }\n prev() {\n const s = this.state.currentStep - 1;\n\n this.setState({\n currentStep: s < 0 ? 0 : s\n });\n }\n onClick(currentStep) {\n console.log(currentStep);\n\n this.setState({\n currentStep: currentStep\n });\n }\n onStepTypeChange(value) {\n this.setState({ stepType: value });\n }\n onStepAnimation(value) {\n this.setState({ stepAnimation: value });\n }\n onLabelPlacementChange(value) {\n this.setState({ labelPlacement: value });\n }\n render() {\n const {currentStep} = this.state;\n\n return (\n
    \n
    \n \n\n \n\n\n \n
    \n\n \n \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".custom-step-option {\n margin-bottom: 20px;\n}\n\n.custom-select {\n margin-right: 20px;\n}\n"},"body":"\n\n\n````jsx\nimport { Step, Button, Select } from '@alifd/next';\n\nconst StepItem = Step.Item, ButtonGroup = Button.Group;\n\nclass Component extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n currentStep: 3,\n stepType: 'circle',\n stepAnimation: true,\n labelPlacement: 'ver'\n };\n\n this.onClick = this.onClick.bind(this);\n }\n next() {\n const s = this.state.currentStep + 1;\n\n this.setState({\n currentStep: s > 6 ? 6 : s\n });\n }\n prev() {\n const s = this.state.currentStep - 1;\n\n this.setState({\n currentStep: s < 0 ? 0 : s\n });\n }\n onClick(currentStep) {\n console.log(currentStep);\n\n this.setState({\n currentStep: currentStep\n });\n }\n onStepTypeChange(value) {\n this.setState({ stepType: value });\n }\n onStepAnimation(value) {\n this.setState({ stepAnimation: value });\n }\n onLabelPlacementChange(value) {\n this.setState({ labelPlacement: value });\n }\n render() {\n const {currentStep} = this.state;\n\n return (\n
    \n
    \n \n\n \n\n\n \n
    \n\n \n \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.custom-step-option {\n margin-bottom: 20px;\n}\n\n.custom-select {\n margin-right: 20px;\n}\n````","html":"
    import { Step, Button, Select } from '@alifd/next';\n\nconst StepItem = Step.Item, ButtonGroup = Button.Group;\n\nclass Component extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            currentStep: 3,\n            stepType: 'circle',\n            stepAnimation: true,\n            labelPlacement: 'ver'\n        };\n\n        this.onClick = this.onClick.bind(this);\n    }\n    next() {\n        const s = this.state.currentStep + 1;\n\n        this.setState({\n            currentStep: s > 6 ? 6 : s\n        });\n    }\n    prev() {\n        const s = this.state.currentStep - 1;\n\n        this.setState({\n            currentStep: s < 0 ? 0 : s\n        });\n    }\n    onClick(currentStep) {\n        console.log(currentStep);\n\n        this.setState({\n            currentStep: currentStep\n        });\n    }\n    onStepTypeChange(value) {\n        this.setState({ stepType: value });\n    }\n    onStepAnimation(value) {\n        this.setState({ stepAnimation: value });\n    }\n    onLabelPlacementChange(value) {\n        this.setState({ labelPlacement: value });\n    }\n    render() {\n        const {currentStep} = this.state;\n\n        return (\n            <div>\n                <div className=\"custom-step-option\">\n                    <Select placeholder=\"Choose the dispaly type\" onChange={this.onStepTypeChange.bind(this)} className=\"custom-select\" defaultValue=\"circle\">\n                        {\n                            ['circle', 'arrow', 'dot'].map(item => <Select.Option value={item} key={item}>{item}</Select.Option>)\n                        }\n                    </Select>\n\n                    <Select placeholder=\"Label placement\" onChange={this.onLabelPlacementChange.bind(this)} className=\"custom-select\" defaultValue=\"ver\">\n                        {\n                            ['hoz', 'ver'].map(item => <Select.Option value={item} key={item}>{item}</Select.Option>)\n                        }\n                    </Select>\n\n\n                    <Select placeholder=\"Enable animation\" onChange={this.onStepAnimation.bind(this)} className=\"custom-select\" defaultValue>\n                        {\n                            [true, false].map((item, index) => <Select.Option value={item} key={index}>{item ? 'animation on' : 'animation off'}</Select.Option>)\n                        }\n                    </Select>\n                </div>\n\n                <Step current={currentStep} shape={this.state.stepType} animation={this.state.stepAnimation} labelPlacement={this.state.labelPlacement}>\n                    <StepItem title=\"Step 1\" onClick={this.onClick} content=\"Description\" />\n                    <StepItem title=\"Step 2\" onClick={this.onClick} content=\"Description\" />\n                    <StepItem title=\"Step 3\" onClick={this.onClick} content=\"Description\" />\n                    <StepItem title=\"Step 4\" onClick={this.onClick} content=\"Description\" />\n                    <StepItem title=\"Step 5\" onClick={this.onClick} content=\"Description\" />\n                    <StepItem title=\"Step 6\" onClick={this.onClick} content=\"Description\" />\n                </Step>\n                <br />\n                <br />\n                <ButtonGroup>\n                    <Button onClick={this.prev.bind(this)} type=\"primary\" disabled={currentStep === 0}>Backward</Button>\n                    <Button onClick={this.next.bind(this)} type=\"primary\" disabled={currentStep === 6}>Forward</Button>\n                </ButtonGroup>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Component />, mountNode);
    .custom-step-option {\n    margin-bottom: 20px;\n}\n\n.custom-select {\n    margin-right: 20px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/step/demo/custom-step-item.en-us.md b/compiled_docs/step/demo/custom-step-item.en-us.md new file mode 100644 index 0000000000..030c1f6a8d --- /dev/null +++ b/compiled_docs/step/demo/custom-step-item.en-us.md @@ -0,0 +1 @@ +{"title":"Step.Item custom step node render function","meta":{"title":"Step.Item custom step node render function","description":"\n

    Step.Item has three states by default, which are wait, process, finish.\nUsers can customize rendering by passing the itemRender property.

    \n","order":"4"},"codes":{"jsx":"import { Step, Icon } from '@alifd/next';\n\nconst steps = ['one', 'two', 'three', 'four'];\n\nfunction itemRender(index) {\n return
    {index + 1}
    ;\n}\n\nfunction itemRender2(index, status) {\n return
    {status === 'finish' ? : {index + 1}}
    ;\n}\n\nReactDOM.render(
    \n
    \n \n {\n steps.map(item => )\n }\n \n
    \n\n
    \n \n {\n steps.map(item => )\n }\n \n
    \n
    , mountNode);\n","css":".fusion-demo-item {\n margin: 15px 0;\n}\n.custom-node1 {\n height: 100%;\n width: 100%;\n border-radius: 20%;\n border: 1px dashed #3E71F1;\n text-align: center;\n}\n.custom-node1 span {\n font-size: 12px;\n\n position: absolute;\n top: 50%;\n text-align: center;\n width: 100%;\n left: 0;\n transform: translateY(-50%);\n}\n.custom-node2 {\n height: 100%;\n width: 100%;\n border-radius: 20%;\n border: 1px dashed #3E71F1;\n text-align: center;\n background: #3E71F1;\n color: #fff;\n position: relative;\n}\n\n.custom-node2 span, .custom-node2 i {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 0;\n width: 100%;\n text-align: center;\n}\n"},"body":"\n````jsx\nimport { Step, Icon } from '@alifd/next';\n\nconst steps = ['one', 'two', 'three', 'four'];\n\nfunction itemRender(index) {\n return
    {index + 1}
    ;\n}\n\nfunction itemRender2(index, status) {\n return
    {status === 'finish' ? : {index + 1}}
    ;\n}\n\nReactDOM.render(
    \n
    \n \n {\n steps.map(item => )\n }\n \n
    \n\n
    \n \n {\n steps.map(item => )\n }\n \n
    \n
    , mountNode);\n````\n\n````css\n.fusion-demo-item {\n margin: 15px 0;\n}\n.custom-node1 {\n height: 100%;\n width: 100%;\n border-radius: 20%;\n border: 1px dashed #3E71F1;\n text-align: center;\n}\n.custom-node1 span {\n font-size: 12px;\n\n position: absolute;\n top: 50%;\n text-align: center;\n width: 100%;\n left: 0;\n transform: translateY(-50%);\n}\n.custom-node2 {\n height: 100%;\n width: 100%;\n border-radius: 20%;\n border: 1px dashed #3E71F1;\n text-align: center;\n background: #3E71F1;\n color: #fff;\n position: relative;\n}\n\n.custom-node2 span, .custom-node2 i {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 0;\n width: 100%;\n text-align: center;\n}\n````","html":"
    import { Step, Icon } from '@alifd/next';\n\nconst steps = ['one', 'two', 'three', 'four'];\n\nfunction itemRender(index) {\n    return <div className=\"custom-node1\"><span>{index + 1}</span></div>;\n}\n\nfunction itemRender2(index, status) {\n    return <div className=\"custom-node2\">{status === 'finish' ? <Icon type=\"success\" /> : <span>{index + 1}</span>} </div>;\n}\n\nReactDOM.render(<div className=\"fusion-demo\">\n    <div className=\"fusion-demo-item\">\n        <Step current={2} animation={false} itemRender={itemRender}>\n            {\n                steps.map(item => <Step.Item key={item} title={item} />)\n            }\n        </Step>\n    </div>\n\n    <div className=\"fusion-demo-item\">\n        <Step current={2} animation={false} itemRender={itemRender2}>\n            {\n                steps.map(item => <Step.Item key={item} title={item} />)\n            }\n        </Step>\n    </div>\n</div>, mountNode);
    .fusion-demo-item {\n    margin: 15px 0;\n}\n.custom-node1 {\n    height: 100%;\n    width: 100%;\n    border-radius: 20%;\n    border: 1px dashed #3E71F1;\n    text-align: center;\n}\n.custom-node1 span {\n    font-size: 12px;\n\n    position: absolute;\n    top: 50%;\n    text-align: center;\n    width: 100%;\n    left: 0;\n    transform: translateY(-50%);\n}\n.custom-node2 {\n    height: 100%;\n    width: 100%;\n    border-radius: 20%;\n    border: 1px dashed #3E71F1;\n    text-align: center;\n    background: #3E71F1;\n    color: #fff;\n    position: relative;\n}\n\n.custom-node2 span, .custom-node2 i {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 0;\n    width: 100%;\n    text-align: center;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/step/demo/custom-step-item.md b/compiled_docs/step/demo/custom-step-item.md new file mode 100644 index 0000000000..740829de6f --- /dev/null +++ b/compiled_docs/step/demo/custom-step-item.md @@ -0,0 +1 @@ +{"title":"Step.Item 自定义渲染","meta":{"title":"Step.Item 自定义渲染","description":"\n

    Step.Item 默认有三种状态，分别是 wait, process, finish。\n用户可以通过传递 itemRender 属性进行自定义的渲染。

    \n","order":"4"},"codes":{"jsx":"import { Step, Icon } from '@alifd/next';\n\nconst steps = ['one', 'two', 'three', 'four'];\n\nfunction itemRender(index) {\n return
    {index + 1}
    ;\n}\n\nfunction itemRender2(index, status) {\n return
    {status === 'finish' ? : {index + 1}}
    ;\n}\n\nReactDOM.render(
    \n
    \n \n {\n steps.map(item => )\n }\n \n
    \n\n
    \n \n {\n steps.map(item => )\n }\n \n
    \n
    , mountNode);\n","css":".fusion-demo-item {\n margin: 15px 0;\n}\n.custom-node1 {\n height: 100%;\n width: 100%;\n border-radius: 20%;\n border: 1px dashed #3E71F1;\n text-align: center;\n}\n.custom-node1 span {\n font-size: 12px;\n\n position: absolute;\n top: 50%;\n text-align: center;\n width: 100%;\n left: 0;\n transform: translateY(-50%);\n}\n.custom-node2 {\n height: 100%;\n width: 100%;\n border-radius: 20%;\n border: 1px dashed #3E71F1;\n text-align: center;\n background: #3E71F1;\n color: #fff;\n position: relative;\n}\n\n.custom-node2 span, .custom-node2 i {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 0;\n width: 100%;\n text-align: center;\n}\n"},"body":"\n\n\n````jsx\nimport { Step, Icon } from '@alifd/next';\n\nconst steps = ['one', 'two', 'three', 'four'];\n\nfunction itemRender(index) {\n return
    {index + 1}
    ;\n}\n\nfunction itemRender2(index, status) {\n return
    {status === 'finish' ? : {index + 1}}
    ;\n}\n\nReactDOM.render(
    \n
    \n \n {\n steps.map(item => )\n }\n \n
    \n\n
    \n \n {\n steps.map(item => )\n }\n \n
    \n
    , mountNode);\n````\n\n````css\n.fusion-demo-item {\n margin: 15px 0;\n}\n.custom-node1 {\n height: 100%;\n width: 100%;\n border-radius: 20%;\n border: 1px dashed #3E71F1;\n text-align: center;\n}\n.custom-node1 span {\n font-size: 12px;\n\n position: absolute;\n top: 50%;\n text-align: center;\n width: 100%;\n left: 0;\n transform: translateY(-50%);\n}\n.custom-node2 {\n height: 100%;\n width: 100%;\n border-radius: 20%;\n border: 1px dashed #3E71F1;\n text-align: center;\n background: #3E71F1;\n color: #fff;\n position: relative;\n}\n\n.custom-node2 span, .custom-node2 i {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 0;\n width: 100%;\n text-align: center;\n}\n````","html":"
    import { Step, Icon } from '@alifd/next';\n\nconst steps = ['one', 'two', 'three', 'four'];\n\nfunction itemRender(index) {\n    return <div className=\"custom-node1\"><span>{index + 1}</span></div>;\n}\n\nfunction itemRender2(index, status) {\n    return <div className=\"custom-node2\">{status === 'finish' ? <Icon type=\"success\" /> : <span>{index + 1}</span>} </div>;\n}\n\nReactDOM.render(<div className=\"fusion-demo\">\n    <div className=\"fusion-demo-item\">\n        <Step current={2} animation={false} itemRender={itemRender}>\n            {\n                steps.map(item => <Step.Item key={item} title={item} />)\n            }\n        </Step>\n    </div>\n\n    <div className=\"fusion-demo-item\">\n        <Step current={2} animation={false} itemRender={itemRender2}>\n            {\n                steps.map(item => <Step.Item key={item} title={item} />)\n            }\n        </Step>\n    </div>\n</div>, mountNode);
    .fusion-demo-item {\n    margin: 15px 0;\n}\n.custom-node1 {\n    height: 100%;\n    width: 100%;\n    border-radius: 20%;\n    border: 1px dashed #3E71F1;\n    text-align: center;\n}\n.custom-node1 span {\n    font-size: 12px;\n\n    position: absolute;\n    top: 50%;\n    text-align: center;\n    width: 100%;\n    left: 0;\n    transform: translateY(-50%);\n}\n.custom-node2 {\n    height: 100%;\n    width: 100%;\n    border-radius: 20%;\n    border: 1px dashed #3E71F1;\n    text-align: center;\n    background: #3E71F1;\n    color: #fff;\n    position: relative;\n}\n\n.custom-node2 span, .custom-node2 i {\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 0;\n    width: 100%;\n    text-align: center;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/step/demo/direction.en-us.md b/compiled_docs/step/demo/direction.en-us.md new file mode 100644 index 0000000000..419d1c78e1 --- /dev/null +++ b/compiled_docs/step/demo/direction.en-us.md @@ -0,0 +1 @@ +{"title":"Vertical mode","meta":{"title":"Vertical mode","description":"\n

    For type dot and circle Step components, you can set their orientation to vertical by setting the direction property.\nWhile, type arrows do not support vertical mode.

    \n","order":"1"},"codes":{"jsx":"import { Step } from '@alifd/next';\n\nReactDOM.render(
    \n \n \n \n \n \n\n

    \n \n \n \n \n \n
    , mountNode);\n"},"body":"\n````jsx\nimport { Step } from '@alifd/next';\n\nReactDOM.render(
    \n \n \n \n \n \n\n

    \n \n \n \n \n \n
    , mountNode);\n````","html":"
    import { Step } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Step current={1} direction=\"ver\" animation={false}>\n        <Step.Item title=\"Step 1\" content=\"Open the refrigerator door\" />\n        <Step.Item title=\"Step 2\" content=\"Put the elephant in the refrigerator\" />\n        <Step.Item title=\"Step 3\" content=\"Close the refrigerator door\" />\n    </Step>\n\n    <br /><br />\n    <Step current={1} direction=\"ver\" shape=\"dot\" animation={false}>\n        <Step.Item title=\"Step 1\" content=\"Open the refrigerator door\" />\n        <Step.Item title=\"Step 2\" content=\"Put the elephant in the refrigerator\" />\n        <Step.Item title=\"Step 3\" content=\"Close the refrigerator door\" />\n    </Step>\n</div>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/step/demo/direction.md b/compiled_docs/step/demo/direction.md new file mode 100644 index 0000000000..cf3cf4334c --- /dev/null +++ b/compiled_docs/step/demo/direction.md @@ -0,0 +1 @@ +{"title":"垂直模式","meta":{"title":"垂直模式","description":"\n

    对于点型和圆圈型的 Step 组件而言，可以通过设置 direction 属性设置其展示方向为垂直。\n箭头形不支持垂直模式。

    \n","order":"1"},"codes":{"jsx":"import { Step } from '@alifd/next';\n\nReactDOM.render(
    \n \n \n \n \n \n\n

    \n \n \n \n \n \n
    , mountNode);\n"},"body":"\n\n````jsx\nimport { Step } from '@alifd/next';\n\nReactDOM.render(
    \n \n \n \n \n \n\n

    \n \n \n \n \n \n
    , mountNode);\n````","html":"
    import { Step } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Step current={1} direction=\"ver\" animation={false}>\n        <Step.Item title=\"Step 1\" content=\"Open the refrigerator door\" />\n        <Step.Item title=\"Step 2\" content=\"Put the elephant in the refrigerator\" />\n        <Step.Item title=\"Step 3\" content=\"Close the refrigerator door\" />\n    </Step>\n\n    <br /><br />\n    <Step current={1} direction=\"ver\" shape=\"dot\" animation={false}>\n        <Step.Item title=\"Step 1\" content=\"Open the refrigerator door\" />\n        <Step.Item title=\"Step 2\" content=\"Put the elephant in the refrigerator\" />\n        <Step.Item title=\"Step 3\" content=\"Close the refrigerator door\" />\n    </Step>\n</div>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/step/demo/disable.en-us.md b/compiled_docs/step/demo/disable.en-us.md new file mode 100644 index 0000000000..3711d63057 --- /dev/null +++ b/compiled_docs/step/demo/disable.en-us.md @@ -0,0 +1 @@ +{"title":"Disable Step","meta":{"title":"Disable Step","description":"\n

    You can disable a step by setting the disabled attribute on Step.Item.

    \n","order":"3"},"codes":{"jsx":"import { Step } from '@alifd/next';\n\nReactDOM.render(
    \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n \n
    , mountNode);\n"},"body":"\n````jsx\nimport { Step } from '@alifd/next';\n\nReactDOM.render(
    \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n \n
    , mountNode);\n````","html":"
    import { Step } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Step current={1} shape=\"arrow\">\n        <Step.Item title=\"Step 1\" />\n        <Step.Item title=\"Step 2\" />\n        <Step.Item title=\"Step 3\" disabled />\n        <Step.Item title=\"Step 4\" />\n    </Step>\n    <br />\n    <br />\n    <Step current={1} shape=\"dot\">\n        <Step.Item title=\"Step 1\" />\n        <Step.Item title=\"Step 2\" />\n        <Step.Item title=\"Step 3\" disabled />\n        <Step.Item title=\"Step 4\" />\n    </Step>\n    <br />\n    <br />\n    <Step current={1} shape=\"circle\">\n        <Step.Item title=\"Step 1\" />\n        <Step.Item title=\"Step 2\" />\n        <Step.Item title=\"Step 3\" disabled />\n        <Step.Item title=\"Step 4\" />\n    </Step>\n</div>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/step/demo/disable.md b/compiled_docs/step/demo/disable.md new file mode 100644 index 0000000000..96a47127fe --- /dev/null +++ b/compiled_docs/step/demo/disable.md @@ -0,0 +1 @@ +{"title":"禁用步骤项","meta":{"title":"禁用步骤项","description":"\n

    可以通过在 Step.Item 上设置 disabled 属性来禁用某个步骤。

    \n","order":"3"},"codes":{"jsx":"import { Step } from '@alifd/next';\n\nReactDOM.render(
    \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n \n
    , mountNode);\n"},"body":"\n\n\n````jsx\nimport { Step } from '@alifd/next';\n\nReactDOM.render(
    \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n \n
    , mountNode);\n````","html":"
    import { Step } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Step current={1} shape=\"arrow\">\n        <Step.Item title=\"Step 1\" />\n        <Step.Item title=\"Step 2\" />\n        <Step.Item title=\"Step 3\" disabled />\n        <Step.Item title=\"Step 4\" />\n    </Step>\n    <br />\n    <br />\n    <Step current={1} shape=\"dot\">\n        <Step.Item title=\"Step 1\" />\n        <Step.Item title=\"Step 2\" />\n        <Step.Item title=\"Step 3\" disabled />\n        <Step.Item title=\"Step 4\" />\n    </Step>\n    <br />\n    <br />\n    <Step current={1} shape=\"circle\">\n        <Step.Item title=\"Step 1\" />\n        <Step.Item title=\"Step 2\" />\n        <Step.Item title=\"Step 3\" disabled />\n        <Step.Item title=\"Step 4\" />\n    </Step>\n</div>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/step/demo/percent.en-us.md b/compiled_docs/step/demo/percent.en-us.md new file mode 100644 index 0000000000..25abd05efe --- /dev/null +++ b/compiled_docs/step/demo/percent.en-us.md @@ -0,0 +1 @@ +{"title":"Icons and percentages","meta":{"title":"Icons and percentages","description":"\n

    You can use icons in dot and circle step, and circle step also support percentages.

    \n","order":"2"},"codes":{"jsx":"import { Step } from '@alifd/next';\n\nReactDOM.render(
    \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n
    , mountNode);\n"},"body":"\n````jsx\nimport { Step } from '@alifd/next';\n\nReactDOM.render(
    \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n
    , mountNode);\n````","html":"
    import { Step } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Step current={1} animation={false} shape=\"dot\">\n        <Step.Item title=\"Step 1\" content=\"Open the refrigerator door\" icon=\"calendar\" />\n        <Step.Item title=\"Step 2\" content=\"Put the elephant in the refrigerator\" percent={40}/>\n        <Step.Item title=\"Step 3\" content=\"Close the refrigerator door\" icon=\"smile\" />\n    </Step>\n    <br />\n    <br />\n    <Step current={1} animation={false}>\n        <Step.Item title=\"Step 1\" content=\"Open the refrigerator door\" icon=\"calendar\" />\n        <Step.Item title=\"Step 2\" content=\"Put the elephant in the refrigerator\" percent={40}/>\n        <Step.Item title=\"Step 3\" content=\"Close the refrigerator door\" icon=\"smile\" />\n    </Step>\n</div>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/step/demo/percent.md b/compiled_docs/step/demo/percent.md new file mode 100644 index 0000000000..8b3960d932 --- /dev/null +++ b/compiled_docs/step/demo/percent.md @@ -0,0 +1 @@ +{"title":"图标和百分比","meta":{"title":"图标和百分比","description":"\n

    可以在点型和圆形步骤条中使用图标，圆形步骤条还支持使用百分比。

    \n","order":"2"},"codes":{"jsx":"import { Step } from '@alifd/next';\n\nReactDOM.render(
    \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n
    , mountNode);\n"},"body":"\n\n\n````jsx\nimport { Step } from '@alifd/next';\n\nReactDOM.render(
    \n \n \n \n \n \n
    \n
    \n \n \n \n \n \n
    , mountNode);\n````","html":"
    import { Step } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Step current={1} animation={false} shape=\"dot\">\n        <Step.Item title=\"Step 1\" content=\"Open the refrigerator door\" icon=\"calendar\" />\n        <Step.Item title=\"Step 2\" content=\"Put the elephant in the refrigerator\" percent={40}/>\n        <Step.Item title=\"Step 3\" content=\"Close the refrigerator door\" icon=\"smile\" />\n    </Step>\n    <br />\n    <br />\n    <Step current={1} animation={false}>\n        <Step.Item title=\"Step 1\" content=\"Open the refrigerator door\" icon=\"calendar\" />\n        <Step.Item title=\"Step 2\" content=\"Put the elephant in the refrigerator\" percent={40}/>\n        <Step.Item title=\"Step 3\" content=\"Close the refrigerator door\" icon=\"smile\" />\n    </Step>\n</div>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/step/demo/read-only.en-us.md b/compiled_docs/step/demo/read-only.en-us.md new file mode 100644 index 0000000000..ccc90035b0 --- /dev/null +++ b/compiled_docs/step/demo/read-only.en-us.md @@ -0,0 +1 @@ +{"title":"Readonly mode","meta":{"title":"Readonly mode","description":"\n

    In read-only mode, callbacks cannot be triggered.

    \n","order":"5"},"codes":{"jsx":"import { Step, Button } from '@alifd/next';\n\nconst StepItem = Step.Item, ButtonGroup = Button.Group;\nclass Component extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n currentStep: 3\n };\n }\n next() {\n const s = this.state.currentStep + 1;\n\n this.setState({\n currentStep: s > 6 ? 6 : s\n });\n }\n prev() {\n const s = this.state.currentStep - 1;\n\n this.setState({\n currentStep: s < 0 ? 0 : s\n });\n }\n onClick(currentStep) {\n console.log(currentStep);\n\n this.setState({\n currentStep: currentStep\n });\n }\n render() {\n const {currentStep} = this.state;\n\n return (\n
    \n \n \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Step, Button } from '@alifd/next';\n\nconst StepItem = Step.Item, ButtonGroup = Button.Group;\nclass Component extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n currentStep: 3\n };\n }\n next() {\n const s = this.state.currentStep + 1;\n\n this.setState({\n currentStep: s > 6 ? 6 : s\n });\n }\n prev() {\n const s = this.state.currentStep - 1;\n\n this.setState({\n currentStep: s < 0 ? 0 : s\n });\n }\n onClick(currentStep) {\n console.log(currentStep);\n\n this.setState({\n currentStep: currentStep\n });\n }\n render() {\n const {currentStep} = this.state;\n\n return (\n
    \n \n \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Step, Button } from '@alifd/next';\n\nconst StepItem = Step.Item, ButtonGroup = Button.Group;\nclass Component extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            currentStep: 3\n        };\n    }\n    next() {\n        const s = this.state.currentStep + 1;\n\n        this.setState({\n            currentStep: s > 6 ? 6 : s\n        });\n    }\n    prev() {\n        const s = this.state.currentStep - 1;\n\n        this.setState({\n            currentStep: s < 0 ? 0 : s\n        });\n    }\n    onClick(currentStep) {\n        console.log(currentStep);\n\n        this.setState({\n            currentStep: currentStep\n        });\n    }\n    render() {\n        const {currentStep} = this.state;\n\n        return (\n            <div>\n                <Step current={currentStep} readOnly>\n                    <StepItem title=\"Step 1\" onClick={this.onClick.bind(this)} />\n                    <StepItem title=\"Step 2\" onClick={this.onClick.bind(this)} />\n                    <StepItem title=\"Step 3\" onClick={this.onClick.bind(this)} />\n                    <StepItem title=\"Step 4\" onClick={this.onClick.bind(this)} />\n                    <StepItem title=\"Step 5\" onClick={this.onClick.bind(this)} />\n                    <StepItem title=\"Step 6\" onClick={this.onClick.bind(this)} />\n                </Step>\n                <br />\n                <br />\n                <ButtonGroup>\n                    <Button onClick={this.prev.bind(this)} type=\"primary\" disabled={currentStep === 0}>Backward</Button>\n                    <Button onClick={this.next.bind(this)} type=\"primary\" disabled={currentStep === 6}>Forward</Button>\n                </ButtonGroup>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Component />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/step/demo/read-only.md b/compiled_docs/step/demo/read-only.md new file mode 100644 index 0000000000..7aff9e2faa --- /dev/null +++ b/compiled_docs/step/demo/read-only.md @@ -0,0 +1 @@ +{"title":"只读模式","meta":{"title":"只读模式","description":"\n

    只读模式，不可触发回调。

    \n","order":"5"},"codes":{"jsx":"import { Step, Button } from '@alifd/next';\n\nconst StepItem = Step.Item, ButtonGroup = Button.Group;\nclass Component extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n currentStep: 3\n };\n }\n next() {\n const s = this.state.currentStep + 1;\n\n this.setState({\n currentStep: s > 6 ? 6 : s\n });\n }\n prev() {\n const s = this.state.currentStep - 1;\n\n this.setState({\n currentStep: s < 0 ? 0 : s\n });\n }\n onClick(currentStep) {\n console.log(currentStep);\n\n this.setState({\n currentStep: currentStep\n });\n }\n render() {\n const {currentStep} = this.state;\n\n return (\n
    \n \n \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n\n````jsx\nimport { Step, Button } from '@alifd/next';\n\nconst StepItem = Step.Item, ButtonGroup = Button.Group;\nclass Component extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n currentStep: 3\n };\n }\n next() {\n const s = this.state.currentStep + 1;\n\n this.setState({\n currentStep: s > 6 ? 6 : s\n });\n }\n prev() {\n const s = this.state.currentStep - 1;\n\n this.setState({\n currentStep: s < 0 ? 0 : s\n });\n }\n onClick(currentStep) {\n console.log(currentStep);\n\n this.setState({\n currentStep: currentStep\n });\n }\n render() {\n const {currentStep} = this.state;\n\n return (\n
    \n \n \n \n \n \n \n \n \n
    \n
    \n \n \n \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Step, Button } from '@alifd/next';\n\nconst StepItem = Step.Item, ButtonGroup = Button.Group;\nclass Component extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            currentStep: 3\n        };\n    }\n    next() {\n        const s = this.state.currentStep + 1;\n\n        this.setState({\n            currentStep: s > 6 ? 6 : s\n        });\n    }\n    prev() {\n        const s = this.state.currentStep - 1;\n\n        this.setState({\n            currentStep: s < 0 ? 0 : s\n        });\n    }\n    onClick(currentStep) {\n        console.log(currentStep);\n\n        this.setState({\n            currentStep: currentStep\n        });\n    }\n    render() {\n        const {currentStep} = this.state;\n\n        return (\n            <div>\n                <Step current={currentStep} readOnly>\n                    <StepItem title=\"Step 1\" onClick={this.onClick.bind(this)} />\n                    <StepItem title=\"Step 2\" onClick={this.onClick.bind(this)} />\n                    <StepItem title=\"Step 3\" onClick={this.onClick.bind(this)} />\n                    <StepItem title=\"Step 4\" onClick={this.onClick.bind(this)} />\n                    <StepItem title=\"Step 5\" onClick={this.onClick.bind(this)} />\n                    <StepItem title=\"Step 6\" onClick={this.onClick.bind(this)} />\n                </Step>\n                <br />\n                <br />\n                <ButtonGroup>\n                    <Button onClick={this.prev.bind(this)} type=\"primary\" disabled={currentStep === 0}>Backward</Button>\n                    <Button onClick={this.next.bind(this)} type=\"primary\" disabled={currentStep === 6}>Forward</Button>\n                </ButtonGroup>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Component />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/step/index.en-us.md b/compiled_docs/step/index.en-us.md new file mode 100644 index 0000000000..d6807b1771 --- /dev/null +++ b/compiled_docs/step/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

    API#

    ","api":"

    Step#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    currentcurrent stepNumber0
    shapeshape

    optional:
    'circle', 'arrow', 'dot'    		Enum'circle'
    directiondispaly direction

    optional:
    'horizontal', 'vertical'    		Enum'horizontal'
    labelPlacementContent arrangement in horizontal layout

    optional:
    'horizontal', 'vertical'    		Enum'vertical'
    readOnlyenable read-only modeBoolean-
    animationenable animationBooleantrue
    itemRendercustom node render function

    Function signature:
    Function(index: Number, status: String) => Node    		Function-
    \n

    Step.Item#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    statusThe status of a step, if not passed, is generated based on the current attribute of the outer Step, with optional values wait, process, finish

    optional:
    'wait', 'process', 'finish'    		Enum-
    titletitleReactNode-
    percentpercentNumber-
    iconiconString-
    contentContent for vertical content fillingReactNode-
    disableddisable step nodeBoolean-
    itemRendercustom node render function (it will overwirde Step's itemRender)
    Function signature:
    Function(index: Number, status: String) => Node    		Function-
    onClickthe callback when click to step node

    Function signature:
    Function(index: Number) => void
    Parameters:
    index: {Number} node index    		Function() => { }
    \n"} \ No newline at end of file diff --git a/compiled_docs/step/index.md b/compiled_docs/step/index.md new file mode 100644 index 0000000000..8dc5339b8f --- /dev/null +++ b/compiled_docs/step/index.md @@ -0,0 +1 @@ +{"meta":"

    API#

    ","api":"

    Step#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    current当前步骤Number0
    shape类型

    可选值:
    'circle', 'arrow', 'dot'    		Enum'circle'
    direction展示方向

    可选值:
    'hoz', 'ver'    		Enum'hoz'
    labelPlacement横向布局时的内容排列

    可选值:
    'hoz', 'ver'    		Enum'ver'
    readOnly是否只读模式Boolean-
    animation是否开启动效Booleantrue
    itemRenderStepItem 的自定义渲染

    签名:
    Function(index: Number, status: String) => Node
    参数:
    index: {Number} 节点索引
    status: {String} 节点状态
    返回值:
    {Node} 节点的渲染结果
    		Functionnull
    \n

    Step.Item#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    status步骤的状态，如不传，会根据外层的 Step 的 current 属性生成，可选值为 wait, process, finish

    可选值:
    'wait', 'process', 'finish'    		Enum-
    title标题ReactNode-
    icon图标String-
    content内容，用于垂直状态下的内容填充ReactNode-
    itemRenderStepItem 的自定义渲染, 会覆盖父节点设置的itemRender

    签名:
    Function(index: Number, status: String) => Node
    参数:
    index: {Number} 节点索引
    status: {String} 节点状态
    返回值:
    {Node} 节点的渲染结果
    		Function-
    percent百分比Number-
    disabled是否禁用Boolean-
    onClick点击步骤时的回调

    签名:
    Function(index: Number) => void
    参数:
    index: {Number} 节点索引    		Function() => {}
    \n"} \ No newline at end of file diff --git a/compiled_docs/switch/demo/accessibility.en-us.md b/compiled_docs/switch/demo/accessibility.en-us.md new file mode 100644 index 0000000000..76ebb6df84 --- /dev/null +++ b/compiled_docs/switch/demo/accessibility.en-us.md @@ -0,0 +1 @@ +{"title":"Accessibility","meta":{"title":"Accessibility","description":"\n

    Components inside has support for accessibility, set aria-label on component is described.

    \n","order":"3"},"codes":{"jsx":"import { Switch } from '@alifd/next';\n\n\nfunction onChange(checked) {\n console.log(`switch to ${checked}`);\n}\n\nReactDOM.render(
    \n \n\n
    ,\nmountNode);\n","css":".large-width {\n width: 100px;\n}\n"},"body":"\n````jsx\nimport { Switch } from '@alifd/next';\n\n\nfunction onChange(checked) {\n console.log(`switch to ${checked}`);\n}\n\nReactDOM.render(
    \n \n\n
    ,\nmountNode);\n````\n\n````css\n.large-width {\n width: 100px;\n}\n````","html":"
    import { Switch } from '@alifd/next';\n\n\nfunction onChange(checked) {\n    console.log(`switch to ${checked}`);\n}\n\nReactDOM.render(<div>\n    <Switch checkedChildren=\"on\" onChange={onChange} unCheckedChildren=\"off\" aria-label=\"accessible switch\"/>\n\n</div>,\nmountNode);
    .large-width {\n    width: 100px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/switch/demo/accessibility.md b/compiled_docs/switch/demo/accessibility.md new file mode 100644 index 0000000000..cc0a61d06d --- /dev/null +++ b/compiled_docs/switch/demo/accessibility.md @@ -0,0 +1 @@ +{"title":"无障碍","meta":{"title":"无障碍","description":"\n

    组件内部已支持无障碍，设置aria-label对组件进行描述。

    \n","order":"3"},"codes":{"jsx":"import { Switch } from '@alifd/next';\n\n\nfunction onChange(checked) {\n console.log(`switch to ${checked}`);\n}\n\nReactDOM.render(
    \n \n\n
    ,\nmountNode);\n","css":".large-width {\n width: 100px;\n}\n"},"body":"\n````jsx\nimport { Switch } from '@alifd/next';\n\n\nfunction onChange(checked) {\n console.log(`switch to ${checked}`);\n}\n\nReactDOM.render(
    \n \n\n
    ,\nmountNode);\n````\n\n````css\n.large-width {\n width: 100px;\n}\n````","html":"
    import { Switch } from '@alifd/next';\n\n\nfunction onChange(checked) {\n    console.log(`switch to ${checked}`);\n}\n\nReactDOM.render(<div>\n    <Switch checkedChildren=\"on\" onChange={onChange} unCheckedChildren=\"off\" aria-label=\"accessible switch\"/>\n\n</div>,\nmountNode);
    .large-width {\n    width: 100px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/switch/demo/basic.en-us.md b/compiled_docs/switch/demo/basic.en-us.md new file mode 100644 index 0000000000..796d977ad3 --- /dev/null +++ b/compiled_docs/switch/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

    Basic usage where size is set.

    \n","order":"0"},"codes":{"jsx":"import { Switch } from '@alifd/next';\n\n\nfunction onChange(checked) {\n console.log(`switch to ${checked}`);\n}\n\nReactDOM.render(
    \n \n
    \n \n
    \n \n
    ,\nmountNode);\n","css":".large-width {\n width: 100px;\n}\n"},"body":"\n````jsx\nimport { Switch } from '@alifd/next';\n\n\nfunction onChange(checked) {\n console.log(`switch to ${checked}`);\n}\n\nReactDOM.render(
    \n \n
    \n \n
    \n \n
    ,\nmountNode);\n````\n\n````css\n.large-width {\n width: 100px;\n}\n````","html":"
    import { Switch } from '@alifd/next';\n\n\nfunction onChange(checked) {\n    console.log(`switch to ${checked}`);\n}\n\nReactDOM.render(<div>\n    <Switch checkedChildren=\"on\" onChange={onChange} unCheckedChildren=\"off\" />\n    <br />\n    <Switch defaultChecked={false} onChange={onChange} size=\"small\" />\n    <br />\n    <Switch className=\"large-width\" checkedChildren=\"on\" onChange={onChange} unCheckedChildren=\"off please\" />\n</div>,\nmountNode);
    .large-width {\n    width: 100px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/switch/demo/basic.md b/compiled_docs/switch/demo/basic.md new file mode 100644 index 0000000000..1f7f406afc --- /dev/null +++ b/compiled_docs/switch/demo/basic.md @@ -0,0 +1 @@ +{"title":"简单","meta":{"title":"简单","description":"\n

    最简单的用法,size可设置大小。

    \n","order":"0"},"codes":{"jsx":"import { Switch } from '@alifd/next';\n\n\nfunction onChange(checked) {\n console.log(`switch to ${checked}`);\n}\n\nReactDOM.render(
    \n \n
    \n \n
    \n \n
    ,\nmountNode);\n","css":".large-width {\n width: 100px;\n}\n"},"body":"\n\n````jsx\nimport { Switch } from '@alifd/next';\n\n\nfunction onChange(checked) {\n console.log(`switch to ${checked}`);\n}\n\nReactDOM.render(
    \n \n
    \n \n
    \n \n
    ,\nmountNode);\n````\n\n````css\n.large-width {\n width: 100px;\n}\n````","html":"
    import { Switch } from '@alifd/next';\n\n\nfunction onChange(checked) {\n    console.log(`switch to ${checked}`);\n}\n\nReactDOM.render(<div>\n    <Switch checkedChildren=\"on\" onChange={onChange} unCheckedChildren=\"off\" />\n    <br />\n    <Switch defaultChecked={false} onChange={onChange} size=\"small\" />\n    <br />\n    <Switch className=\"large-width\" checkedChildren=\"on\" onChange={onChange} unCheckedChildren=\"off please\" />\n</div>,\nmountNode);
    .large-width {\n    width: 100px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/switch/demo/control.en-us.md b/compiled_docs/switch/demo/control.en-us.md new file mode 100644 index 0000000000..f294589497 --- /dev/null +++ b/compiled_docs/switch/demo/control.en-us.md @@ -0,0 +1 @@ +{"title":"Controlled","meta":{"title":"Controlled","description":"\n

    A controlled switch is a switch with value prop, whose state is controlled by its parent component and can't be updated by itself.

    \n","order":"1"},"codes":{"jsx":"import { Switch } from '@alifd/next';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n checked: false\n };\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(checked) {\n this.setState({checked});\n }\n\n render() {\n return (
    \n
    value of switch: {this.state.checked ? 'true' : 'false'}
    \n
    \n \n \n
    \n
    );\n }\n}\n\nReactDOM.render(\n ,\n mountNode\n);\n","css":".line {\n margin-bottom: 10px;\n}\n.next-switch {\n margin-right: 20px;\n}\n"},"body":"\n````jsx\nimport { Switch } from '@alifd/next';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n checked: false\n };\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(checked) {\n this.setState({checked});\n }\n\n render() {\n return (
    \n
    value of switch: {this.state.checked ? 'true' : 'false'}
    \n
    \n \n \n
    \n
    );\n }\n}\n\nReactDOM.render(\n ,\n mountNode\n);\n````\n\n````css\n.line {\n margin-bottom: 10px;\n}\n.next-switch {\n margin-right: 20px;\n}\n````","html":"
    import { Switch } from '@alifd/next';\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            checked: false\n        };\n        this.onChange = this.onChange.bind(this);\n    }\n\n    onChange(checked) {\n        this.setState({checked});\n    }\n\n    render() {\n        return (<div>\n            <div className=\"line\">value of switch: {this.state.checked ? 'true' : 'false'}</div>\n            <div className=\"line\">\n                <Switch checked={this.state.checked} onChange={this.onChange} />\n                <Switch checked={this.state.checked} onChange={this.onChange} disabled />\n            </div>\n        </div>);\n    }\n}\n\nReactDOM.render(\n    <App />,\n    mountNode\n);
    .line {\n  margin-bottom: 10px;\n}\n.next-switch {\n  margin-right: 20px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/switch/demo/control.md b/compiled_docs/switch/demo/control.md new file mode 100644 index 0000000000..e0d44fc120 --- /dev/null +++ b/compiled_docs/switch/demo/control.md @@ -0,0 +1 @@ +{"title":"受控开关","meta":{"title":"受控开关","description":"\n

    受控开关, 是指组件的值由上层组件决定, 如果开关定义了 value 属性, 就表示此开关是受控开关.

    \n

    对于受控开关, 每一次 React 数据渲染时, 都会使用传入的值来更新开关, 开关本身是不能更新自己的状态的.

    \n","order":"1"},"codes":{"jsx":"import { Switch } from '@alifd/next';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n checked: false\n };\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(checked) {\n this.setState({checked});\n }\n\n render() {\n return (
    \n
    value of switch: {this.state.checked ? 'true' : 'false'}
    \n
    \n \n \n
    \n
    );\n }\n}\n\nReactDOM.render(\n ,\n mountNode\n);\n","css":".line {\n margin-bottom: 10px;\n}\n.next-switch {\n margin-right: 20px;\n}\n"},"body":"\n\n````jsx\nimport { Switch } from '@alifd/next';\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n checked: false\n };\n this.onChange = this.onChange.bind(this);\n }\n\n onChange(checked) {\n this.setState({checked});\n }\n\n render() {\n return (
    \n
    value of switch: {this.state.checked ? 'true' : 'false'}
    \n
    \n \n \n
    \n
    );\n }\n}\n\nReactDOM.render(\n ,\n mountNode\n);\n````\n\n````css\n.line {\n margin-bottom: 10px;\n}\n.next-switch {\n margin-right: 20px;\n}\n````","html":"
    import { Switch } from '@alifd/next';\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            checked: false\n        };\n        this.onChange = this.onChange.bind(this);\n    }\n\n    onChange(checked) {\n        this.setState({checked});\n    }\n\n    render() {\n        return (<div>\n            <div className=\"line\">value of switch: {this.state.checked ? 'true' : 'false'}</div>\n            <div className=\"line\">\n                <Switch checked={this.state.checked} onChange={this.onChange} />\n                <Switch checked={this.state.checked} onChange={this.onChange} disabled />\n            </div>\n        </div>);\n    }\n}\n\nReactDOM.render(\n    <App />,\n    mountNode\n);
    .line {\n  margin-bottom: 10px;\n}\n.next-switch {\n  margin-right: 20px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/switch/demo/disabled.en-us.md b/compiled_docs/switch/demo/disabled.en-us.md new file mode 100644 index 0000000000..0fe0797196 --- /dev/null +++ b/compiled_docs/switch/demo/disabled.en-us.md @@ -0,0 +1 @@ +{"title":"disabled","meta":{"title":"disabled","description":"\n

    Disabled switch.

    \n","order":"2"},"codes":{"jsx":"import { Button, Icon, Switch } from '@alifd/next';\n\n\n\nclass Test extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n disabled: true\n };\n }\n\n toggle() {\n this.setState(Object.assign({}, this.state, {\n disabled: !this.state.disabled\n }));\n }\n\n render() {\n return (
    \n }\n unCheckedChildren={} disabled={this.state.disabled} />\n \n
    \n
    \n \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Button, Icon, Switch } from '@alifd/next';\n\n\n\nclass Test extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n disabled: true\n };\n }\n\n toggle() {\n this.setState(Object.assign({}, this.state, {\n disabled: !this.state.disabled\n }));\n }\n\n render() {\n return (
    \n }\n unCheckedChildren={} disabled={this.state.disabled} />\n \n
    \n
    \n \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Button, Icon, Switch } from '@alifd/next';\n\n\n\nclass Test extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            disabled: true\n        };\n    }\n\n    toggle() {\n        this.setState(Object.assign({}, this.state, {\n            disabled: !this.state.disabled\n        }));\n    }\n\n    render() {\n        return (<div>\n            <Switch checkedChildren={<Icon type=\"select\" size=\"small\" />}\n                unCheckedChildren={<Icon type=\"close\" size=\"small\" />} disabled={this.state.disabled} />\n            <Switch checkedChildren=\"on\" unCheckedChildren=\"off\" disabled={this.state.disabled} />\n            <br />\n            <br />\n            <Button type=\"primary\" onClick={this.toggle.bind(this)}>Toggle disabled</Button>\n        </div>);\n    }\n}\n\nReactDOM.render(<Test />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/switch/demo/disabled.md b/compiled_docs/switch/demo/disabled.md new file mode 100644 index 0000000000..6e08dc4436 --- /dev/null +++ b/compiled_docs/switch/demo/disabled.md @@ -0,0 +1 @@ +{"title":"不可用","meta":{"title":"不可用","description":"\n

    Switch 失效状态。

    \n","order":"2"},"codes":{"jsx":"import { Button, Icon, Switch } from '@alifd/next';\n\n\n\nclass Test extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n disabled: true\n };\n }\n\n toggle() {\n this.setState(Object.assign({}, this.state, {\n disabled: !this.state.disabled\n }));\n }\n\n render() {\n return (
    \n }\n unCheckedChildren={} disabled={this.state.disabled} />\n \n
    \n
    \n \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Button, Icon, Switch } from '@alifd/next';\n\n\n\nclass Test extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n disabled: true\n };\n }\n\n toggle() {\n this.setState(Object.assign({}, this.state, {\n disabled: !this.state.disabled\n }));\n }\n\n render() {\n return (
    \n }\n unCheckedChildren={} disabled={this.state.disabled} />\n \n
    \n
    \n \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Button, Icon, Switch } from '@alifd/next';\n\n\n\nclass Test extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            disabled: true\n        };\n    }\n\n    toggle() {\n        this.setState(Object.assign({}, this.state, {\n            disabled: !this.state.disabled\n        }));\n    }\n\n    render() {\n        return (<div>\n            <Switch checkedChildren={<Icon type=\"select\" size=\"small\" />}\n                unCheckedChildren={<Icon type=\"close\" size=\"small\" />} disabled={this.state.disabled} />\n            <Switch checkedChildren=\"on\" unCheckedChildren=\"off\" disabled={this.state.disabled} />\n            <br />\n            <br />\n            <Button type=\"primary\" onClick={this.toggle.bind(this)}>Toggle disabled</Button>\n        </div>);\n    }\n}\n\nReactDOM.render(<Test />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/switch/index.en-us.md b/compiled_docs/switch/index.en-us.md new file mode 100644 index 0000000000..9a536cca54 --- /dev/null +++ b/compiled_docs/switch/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

    Guide#

    Switch Component

    \n

    When To Use#

    The Switch Component toggles the state. The options in the switch, as well as its state, should be clearly displayed with the accompanying inline label. Switch acts the same as the radio button, yet we should prefer switch cuz the latter is obsolete.

    \n

    Note#

      \n
    • We should take into account the font size when using custom checkChildren and unCheckedChildren，cuz the width is limited and defaults to be 2 characters.
      • \n
    \n

    API#

    ","api":"

    Switch#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    \n

    | size | size of switch

    option:
    'medium'
    'small' | Enum | 'medium' |\n| checkedChildren | content of 'on' state | any | - |\n| unCheckedChildren | content of 'off' state | any | - |\n| onChange | callback triggered when state is toggled

    signature:
    Function(checked: Boolean, e: Event) => void
    parameter:
    checked: {Boolean} whether on
    _e_: {Event} DOM Event | Function | () => { } |\n| checked | current value (for controlled one) | Boolean | - |\n| defaultChecked | default value (for uncontrolled one) | Boolean | - |\n| disabled | disabled | Boolean | false |\n| onClick | callback triggered when clicked

    signature:
    Function(e: Event) => void
    parameter:
    _e_: {Event} DOM Event | Function | - |\n| onKeyDown | callback triggered when key is pressed

    signature:
    Function(e: Event) => void
    parameter:
    _e_: {Event} DOM Event | Function | - |

    \n

    Keyboard Support#

      \n
    • press enter to switch when focused
      • \n
    \n

    ARIA and KeyBoard#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyBoardDescripiton
    Entertoggle checked
    Spacetoggle checked
    \n"} \ No newline at end of file diff --git a/compiled_docs/switch/index.md b/compiled_docs/switch/index.md new file mode 100644 index 0000000000..16c2e5e4ae --- /dev/null +++ b/compiled_docs/switch/index.md @@ -0,0 +1 @@ +{"meta":"

    开发指南#

    开关组件

    \n

    何时使用#

    开/关切换器切换单个设置选项的状态。开关控制器中的选项，以及它所在的状态，应该用伴随的内联标签显示清楚。开关选择器具有和单选按钮一样的视觉属性。使用文本“开”和“关”滑动切换已经过时了。使用这里显示的开关选择器代替。

    \n

    使用注意#

      \n
    • 对于checkChildren和unCheckedChildren的自定义要考虑文字大小，因为switch的宽度有限，默认一个汉字大小。如果设置成多个字或者英文要注意宽度控制。
      • \n
    \n

    API#

    ","api":"

    Switch#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    checkedChildren打开时的内容any-
    sizeswitch的尺寸

    可选值:
    'medium'(正常大小)
    'small'(缩小版大小)    		Enum'medium'
    unCheckedChildren关闭时的内容any-
    onChange开关状态改变是触发此事件

    签名:
    Function(checked: Boolean, e: Event) => void
    参数:
    checked: {Boolean} 是否为打开状态
    _e_: {Event} DOM事件对象    		Function() => {}
    checked开关当前的值(针对受控组件)Boolean-
    defaultChecked开关默认值 (针对非受控组件)Booleanfalse
    disabled表示开关被禁用Booleanfalse
    onClick鼠标点击事件

    签名:
    Function(e: Event) => void
    参数:
    _e_: {Event} DOM事件对象    		Function-
    onKeyDown键盘按键事件

    签名:
    Function(e: Event) => void
    参数:
    _e_: {Event} DOM事件对象    		Function-
    \n

    键盘支持#

      \n
    • 支持键盘控制，tab选中后按回车进行状态切换。
      • \n
    \n

    ARIA and KeyBoard#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    按键说明
    Enter切换选中状态
    SPACE切换选中状态
    \n"} \ No newline at end of file diff --git a/compiled_docs/tab/demo/basic.en-us.md b/compiled_docs/tab/demo/basic.en-us.md new file mode 100644 index 0000000000..18a97f8c3d --- /dev/null +++ b/compiled_docs/tab/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

    A simple case.

    \n","order":"0"},"codes":{"jsx":"import { Tab } from '@alifd/next';\n\nReactDOM.render(\n \n Home content\n Doc content\n Help Content\n \n , mountNode);\n","css":".next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n"},"body":"\n````jsx\nimport { Tab } from '@alifd/next';\n\nReactDOM.render(\n \n Home content\n Doc content\n Help Content\n \n , mountNode);\n````\n\n````css\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n````","html":"
    import { Tab } from '@alifd/next';\n\nReactDOM.render(\n    <Tab>\n        <Tab.Item title=\"Home\" key=\"1\">Home content</Tab.Item>\n        <Tab.Item title=\"Documentation\" key=\"2\">Doc content</Tab.Item>\n        <Tab.Item title=\"Help\" key=\"3\">Help Content</Tab.Item>\n    </Tab>\n    , mountNode);
    .next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/basic.md b/compiled_docs/tab/demo/basic.md new file mode 100644 index 0000000000..dc0a5cfc69 --- /dev/null +++ b/compiled_docs/tab/demo/basic.md @@ -0,0 +1 @@ +{"title":"简单用法","meta":{"title":"简单用法","description":"\n

    使用 Tab 最简单的例子。

    \n","order":"0"},"codes":{"jsx":"import { Tab } from '@alifd/next';\n\nReactDOM.render(\n \n Home content\n Doc content\n Help Content\n \n , mountNode);\n","css":".next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n"},"body":"\n\n````jsx\nimport { Tab } from '@alifd/next';\n\nReactDOM.render(\n \n Home content\n Doc content\n Help Content\n \n , mountNode);\n````\n\n````css\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n````","html":"
    import { Tab } from '@alifd/next';\n\nReactDOM.render(\n    <Tab>\n        <Tab.Item title=\"Home\" key=\"1\">Home content</Tab.Item>\n        <Tab.Item title=\"Documentation\" key=\"2\">Doc content</Tab.Item>\n        <Tab.Item title=\"Help\" key=\"3\">Help Content</Tab.Item>\n    </Tab>\n    , mountNode);
    .next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/closable.en-us.md b/compiled_docs/tab/demo/closable.en-us.md new file mode 100644 index 0000000000..659a9353e8 --- /dev/null +++ b/compiled_docs/tab/demo/closable.en-us.md @@ -0,0 +1 @@ +{"title":"Closeable","meta":{"title":"Closeable","description":"\n

    Creating closeable tabs by pass attribute closeable to Tab.Item.

    \n","order":"6"},"codes":{"jsx":"import { Tab, Button, Icon } from '@alifd/next';\n\nconst panes = [\n { tab: 'Mail', key: 1, closeable: false },\n { tab: 'Message', key: 2, closeable: true },\n { tab: 'Setting', key: 3, closeable: true },\n { tab: 'Unread', key: 4, closeable: true }\n];\n\nclass CloseableTab extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n panes: panes,\n activeKey: panes[0].key\n };\n }\n\n /*eslint-disable eqeqeq */\n remove(targetKey) {\n let activeKey = this.state.activeKey;\n const panes = [];\n this.state.panes.forEach(pane => {\n if (pane.key != targetKey) {\n panes.push(pane);\n }\n });\n\n if (targetKey == activeKey) {\n activeKey = panes[0].key;\n }\n this.setState({ panes, activeKey });\n }\n\n onClose = (targetKey) => {\n this.remove(targetKey);\n }\n\n onChange = (activeKey) => {\n this.setState({ activeKey });\n }\n\n addTabpane = () => {\n this.setState(prevState => {\n const { panes } = prevState;\n panes.push({ tab: 'new tab', key: Math.random(), closeable: true });\n return { panes };\n });\n }\n\n render() {\n const state = this.state;\n return (\n
    \n \n\n \n {state.panes.map(item => {item.tab} content)}\n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".custom-tab {\n margin-top: 14px;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n"},"body":"\n````jsx\nimport { Tab, Button, Icon } from '@alifd/next';\n\nconst panes = [\n { tab: 'Mail', key: 1, closeable: false },\n { tab: 'Message', key: 2, closeable: true },\n { tab: 'Setting', key: 3, closeable: true },\n { tab: 'Unread', key: 4, closeable: true }\n];\n\nclass CloseableTab extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n panes: panes,\n activeKey: panes[0].key\n };\n }\n\n /*eslint-disable eqeqeq */\n remove(targetKey) {\n let activeKey = this.state.activeKey;\n const panes = [];\n this.state.panes.forEach(pane => {\n if (pane.key != targetKey) {\n panes.push(pane);\n }\n });\n\n if (targetKey == activeKey) {\n activeKey = panes[0].key;\n }\n this.setState({ panes, activeKey });\n }\n\n onClose = (targetKey) => {\n this.remove(targetKey);\n }\n\n onChange = (activeKey) => {\n this.setState({ activeKey });\n }\n\n addTabpane = () => {\n this.setState(prevState => {\n const { panes } = prevState;\n panes.push({ tab: 'new tab', key: Math.random(), closeable: true });\n return { panes };\n });\n }\n\n render() {\n const state = this.state;\n return (\n
    \n \n\n \n {state.panes.map(item => {item.tab} content)}\n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.custom-tab {\n margin-top: 14px;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n````","html":"
    import { Tab, Button, Icon } from '@alifd/next';\n\nconst panes = [\n    { tab: 'Mail', key: 1, closeable: false },\n    { tab: 'Message', key: 2, closeable: true },\n    { tab: 'Setting', key: 3, closeable: true },\n    { tab: 'Unread', key: 4, closeable: true }\n];\n\nclass CloseableTab extends React.Component {\n\n    constructor(props) {\n        super(props);\n        this.state = {\n            panes: panes,\n            activeKey: panes[0].key\n        };\n    }\n\n    /*eslint-disable eqeqeq */\n    remove(targetKey) {\n        let activeKey = this.state.activeKey;\n        const panes = [];\n        this.state.panes.forEach(pane => {\n            if (pane.key != targetKey) {\n                panes.push(pane);\n            }\n        });\n\n        if (targetKey == activeKey) {\n            activeKey = panes[0].key;\n        }\n        this.setState({ panes, activeKey });\n    }\n\n    onClose = (targetKey) => {\n        this.remove(targetKey);\n    }\n\n    onChange = (activeKey) => {\n        this.setState({ activeKey });\n    }\n\n    addTabpane = () => {\n        this.setState(prevState => {\n            const { panes } = prevState;\n            panes.push({ tab: 'new tab', key: Math.random(), closeable: true });\n            return { panes };\n        });\n    }\n\n    render() {\n        const state = this.state;\n        return (\n            <div>\n                <Button onClick={this.addTabpane} size=\"large\" type=\"primary\"><Icon type=\"add\"/> New Tab</Button>\n\n                <Tab\n                    shape=\"wrapped\"\n                    activeKey={state.activeKey}\n                    onChange={this.onChange}\n                    onClose={this.onClose}\n                    className=\"custom-tab\">\n                    {state.panes.map(item => <Tab.Item title={item.tab} key={item.key} closeable={item.closeable}>{item.tab} content</Tab.Item>)}\n                </Tab>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<CloseableTab />, mountNode);
    .custom-tab {\n    margin-top: 14px;\n}\n\n.next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/closable.md b/compiled_docs/tab/demo/closable.md new file mode 100644 index 0000000000..289da21f7d --- /dev/null +++ b/compiled_docs/tab/demo/closable.md @@ -0,0 +1 @@ +{"title":"可关闭选项卡","meta":{"title":"可关闭选项卡","description":"\n

    可关闭选项卡，可以通过在 Tab.Item 上设置 closeable 属性设置该选项卡是否可关闭。

    \n","order":"6"},"codes":{"jsx":"import { Tab, Button, Icon } from '@alifd/next';\n\nconst panes = [\n { tab: 'Mail', key: 1, closeable: false },\n { tab: 'Message', key: 2, closeable: true },\n { tab: 'Setting', key: 3, closeable: true },\n { tab: 'Unread', key: 4, closeable: true }\n];\n\nclass CloseableTab extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n panes: panes,\n activeKey: panes[0].key\n };\n }\n\n /*eslint-disable eqeqeq */\n remove(targetKey) {\n let activeKey = this.state.activeKey;\n const panes = [];\n this.state.panes.forEach(pane => {\n if (pane.key != targetKey) {\n panes.push(pane);\n }\n });\n\n if (targetKey == activeKey) {\n activeKey = panes[0].key;\n }\n this.setState({ panes, activeKey });\n }\n\n onClose = (targetKey) => {\n this.remove(targetKey);\n }\n\n onChange = (activeKey) => {\n this.setState({ activeKey });\n }\n\n addTabpane = () => {\n this.setState(prevState => {\n const { panes } = prevState;\n panes.push({ tab: 'new tab', key: Math.random(), closeable: true });\n return { panes };\n });\n }\n\n render() {\n const state = this.state;\n return (\n
    \n \n\n \n {state.panes.map(item => {item.tab} content)}\n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".custom-tab {\n margin-top: 14px;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n"},"body":"\n\n````jsx\nimport { Tab, Button, Icon } from '@alifd/next';\n\nconst panes = [\n { tab: 'Mail', key: 1, closeable: false },\n { tab: 'Message', key: 2, closeable: true },\n { tab: 'Setting', key: 3, closeable: true },\n { tab: 'Unread', key: 4, closeable: true }\n];\n\nclass CloseableTab extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n panes: panes,\n activeKey: panes[0].key\n };\n }\n\n /*eslint-disable eqeqeq */\n remove(targetKey) {\n let activeKey = this.state.activeKey;\n const panes = [];\n this.state.panes.forEach(pane => {\n if (pane.key != targetKey) {\n panes.push(pane);\n }\n });\n\n if (targetKey == activeKey) {\n activeKey = panes[0].key;\n }\n this.setState({ panes, activeKey });\n }\n\n onClose = (targetKey) => {\n this.remove(targetKey);\n }\n\n onChange = (activeKey) => {\n this.setState({ activeKey });\n }\n\n addTabpane = () => {\n this.setState(prevState => {\n const { panes } = prevState;\n panes.push({ tab: 'new tab', key: Math.random(), closeable: true });\n return { panes };\n });\n }\n\n render() {\n const state = this.state;\n return (\n
    \n \n\n \n {state.panes.map(item => {item.tab} content)}\n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.custom-tab {\n margin-top: 14px;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n````","html":"
    import { Tab, Button, Icon } from '@alifd/next';\n\nconst panes = [\n    { tab: 'Mail', key: 1, closeable: false },\n    { tab: 'Message', key: 2, closeable: true },\n    { tab: 'Setting', key: 3, closeable: true },\n    { tab: 'Unread', key: 4, closeable: true }\n];\n\nclass CloseableTab extends React.Component {\n\n    constructor(props) {\n        super(props);\n        this.state = {\n            panes: panes,\n            activeKey: panes[0].key\n        };\n    }\n\n    /*eslint-disable eqeqeq */\n    remove(targetKey) {\n        let activeKey = this.state.activeKey;\n        const panes = [];\n        this.state.panes.forEach(pane => {\n            if (pane.key != targetKey) {\n                panes.push(pane);\n            }\n        });\n\n        if (targetKey == activeKey) {\n            activeKey = panes[0].key;\n        }\n        this.setState({ panes, activeKey });\n    }\n\n    onClose = (targetKey) => {\n        this.remove(targetKey);\n    }\n\n    onChange = (activeKey) => {\n        this.setState({ activeKey });\n    }\n\n    addTabpane = () => {\n        this.setState(prevState => {\n            const { panes } = prevState;\n            panes.push({ tab: 'new tab', key: Math.random(), closeable: true });\n            return { panes };\n        });\n    }\n\n    render() {\n        const state = this.state;\n        return (\n            <div>\n                <Button onClick={this.addTabpane} size=\"large\" type=\"primary\"><Icon type=\"add\"/> New Tab</Button>\n\n                <Tab\n                    shape=\"wrapped\"\n                    activeKey={state.activeKey}\n                    onChange={this.onChange}\n                    onClose={this.onClose}\n                    className=\"custom-tab\">\n                    {state.panes.map(item => <Tab.Item title={item.tab} key={item.key} closeable={item.closeable}>{item.tab} content</Tab.Item>)}\n                </Tab>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<CloseableTab />, mountNode);
    .custom-tab {\n    margin-top: 14px;\n}\n\n.next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/custom-style.en-us.md b/compiled_docs/tab/demo/custom-style.en-us.md new file mode 100644 index 0000000000..17bb2463b5 --- /dev/null +++ b/compiled_docs/tab/demo/custom-style.en-us.md @@ -0,0 +1 @@ +{"title":"Custom style","meta":{"title":"Custom style","description":"\n

    Customize Tab style by contentStyle, contentClassName.

    \n","order":"9"},"codes":{"jsx":"import { Tab } from '@alifd/next';\n\nconst panes = [\n {\n tab: 'Todo Tasks',\n key: 0\n },\n {\n tab: 'Finished Tasks',\n key: 1\n },\n {\n tab: 'Unread Messages',\n key: 2\n },\n {\n tab: 'Past Messages',\n key: 3\n },\n {\n tab: 'All Messages',\n key: 4\n }\n];\n\nconst detachedContentStyle = {\n border: '1px solid #DCDEE3',\n padding: '20px'\n};\n\nReactDOM.render(
    \n
    Customize with contentStyle or contentClassName
    \n \n {\n panes.map(pane => {pane.tab})\n }\n \n\n
    Setting className and style in Tab.Item
    \n \n {\n panes.map(pane => {\n return ({pane.tab}\n );\n })\n }\n \n\n
    Tabs with equal width
    \n \n {\n panes.map(pane => {pane.tab})\n }\n \n
    \n , mountNode);\n","css":".fusion-demo .demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 14px 0;\n}\n\n.custom-content {\n padding: 15px;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n\n.custom-tab-item {\n margin-right: -1px !important;\n}\n\n.justify-tabs-tab {\n width: 140px;\n text-align: center;\n}\n"},"body":"\n````jsx\nimport { Tab } from '@alifd/next';\n\nconst panes = [\n {\n tab: 'Todo Tasks',\n key: 0\n },\n {\n tab: 'Finished Tasks',\n key: 1\n },\n {\n tab: 'Unread Messages',\n key: 2\n },\n {\n tab: 'Past Messages',\n key: 3\n },\n {\n tab: 'All Messages',\n key: 4\n }\n];\n\nconst detachedContentStyle = {\n border: '1px solid #DCDEE3',\n padding: '20px'\n};\n\nReactDOM.render(
    \n
    Customize with contentStyle or contentClassName
    \n \n {\n panes.map(pane => {pane.tab})\n }\n \n\n
    Setting className and style in Tab.Item
    \n \n {\n panes.map(pane => {\n return ({pane.tab}\n );\n })\n }\n \n\n
    Tabs with equal width
    \n \n {\n panes.map(pane => {pane.tab})\n }\n \n
    \n , mountNode);\n````\n\n````css\n.fusion-demo .demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 14px 0;\n}\n\n.custom-content {\n padding: 15px;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n\n.custom-tab-item {\n margin-right: -1px !important;\n}\n\n.justify-tabs-tab {\n width: 140px;\n text-align: center;\n}\n````","html":"
    import { Tab } from '@alifd/next';\n\nconst panes = [\n    {\n        tab: 'Todo Tasks',\n        key: 0\n    },\n    {\n        tab: 'Finished Tasks',\n        key: 1\n    },\n    {\n        tab: 'Unread Messages',\n        key: 2\n    },\n    {\n        tab: 'Past Messages',\n        key: 3\n    },\n    {\n        tab: 'All Messages',\n        key: 4\n    }\n];\n\nconst detachedContentStyle = {\n    border: '1px solid #DCDEE3',\n    padding: '20px'\n};\n\nReactDOM.render(<div className=\"fusion-demo\">\n    <div className=\"demo-item-title\">Customize with contentStyle or contentClassName</div>\n    <Tab shape=\"wrapped\" contentStyle={detachedContentStyle}>\n        {\n            panes.map(pane => <Tab.Item title={pane.tab} key={pane.key}>{pane.tab}</Tab.Item>)\n        }\n    </Tab>\n\n    <div className=\"demo-item-title\">Setting className and style in Tab.Item</div>\n    <Tab shape=\"wrapped\" navStyle={{ background: '#DEE8FF' }}>\n        {\n            panes.map(pane => {\n                return (<Tab.Item\n                    title={pane.tab}\n                    key={pane.key}\n                    className=\"custom-tab-item\"\n                    style={{background: '#FFF'}}>{pane.tab}</Tab.Item>\n                );\n            })\n        }\n    </Tab>\n\n    <div className=\"demo-item-title\">Tabs with equal width</div>\n    <Tab shape=\"capsule\">\n        {\n            panes.map(pane => <Tab.Item title={pane.tab} key={pane.key} className=\"justify-tabs-tab\">{pane.tab}</Tab.Item>)\n        }\n    </Tab>\n</div>\n    , mountNode);
    .fusion-demo .demo-item-title {\n    font-size: 16px;\n    color: #333;\n    padding: 8px;\n    margin: 14px 0;\n}\n\n.custom-content {\n    padding: 15px;\n}\n\n.next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}\n\n.custom-tab-item {\n    margin-right: -1px !important;\n}\n\n.justify-tabs-tab {\n    width: 140px;\n    text-align: center;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/custom-style.md b/compiled_docs/tab/demo/custom-style.md new file mode 100644 index 0000000000..fbc4c539b0 --- /dev/null +++ b/compiled_docs/tab/demo/custom-style.md @@ -0,0 +1 @@ +{"title":"自定义样式","meta":{"title":"自定义样式","description":"\n

    在 Tab 已有样式的基础上，可以通过 contentStyle, contentClassName 等属性自由的进行样式自定义。

    \n","order":"9"},"codes":{"jsx":"import { Tab } from '@alifd/next';\n\nconst panes = [\n {\n tab: 'Todo Tasks',\n key: 0\n },\n {\n tab: 'Finished Tasks',\n key: 1\n },\n {\n tab: 'Unread Messages',\n key: 2\n },\n {\n tab: 'Past Messages',\n key: 3\n },\n {\n tab: 'All Messages',\n key: 4\n }\n];\n\nconst detachedContentStyle = {\n border: '1px solid #DCDEE3',\n padding: '20px'\n};\n\nReactDOM.render(
    \n
    Customize with contentStyle or contentClassName
    \n \n {\n panes.map(pane => {pane.tab})\n }\n \n\n
    Setting className and style in Tab.Item
    \n \n {\n panes.map(pane => {\n return ({pane.tab}\n );\n })\n }\n \n\n
    Tabs with equal width
    \n \n {\n panes.map(pane => {pane.tab})\n }\n \n
    \n , mountNode);\n","css":".fusion-demo .demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 14px 0;\n}\n\n.custom-content {\n padding: 15px;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n\n.custom-tab-item {\n margin-right: -1px !important;\n}\n\n.justify-tabs-tab {\n width: 140px;\n text-align: center;\n}\n"},"body":"\n\n````jsx\nimport { Tab } from '@alifd/next';\n\nconst panes = [\n {\n tab: 'Todo Tasks',\n key: 0\n },\n {\n tab: 'Finished Tasks',\n key: 1\n },\n {\n tab: 'Unread Messages',\n key: 2\n },\n {\n tab: 'Past Messages',\n key: 3\n },\n {\n tab: 'All Messages',\n key: 4\n }\n];\n\nconst detachedContentStyle = {\n border: '1px solid #DCDEE3',\n padding: '20px'\n};\n\nReactDOM.render(
    \n
    Customize with contentStyle or contentClassName
    \n \n {\n panes.map(pane => {pane.tab})\n }\n \n\n
    Setting className and style in Tab.Item
    \n \n {\n panes.map(pane => {\n return ({pane.tab}\n );\n })\n }\n \n\n
    Tabs with equal width
    \n \n {\n panes.map(pane => {pane.tab})\n }\n \n
    \n , mountNode);\n````\n\n````css\n.fusion-demo .demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 14px 0;\n}\n\n.custom-content {\n padding: 15px;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n\n.custom-tab-item {\n margin-right: -1px !important;\n}\n\n.justify-tabs-tab {\n width: 140px;\n text-align: center;\n}\n````","html":"
    import { Tab } from '@alifd/next';\n\nconst panes = [\n    {\n        tab: 'Todo Tasks',\n        key: 0\n    },\n    {\n        tab: 'Finished Tasks',\n        key: 1\n    },\n    {\n        tab: 'Unread Messages',\n        key: 2\n    },\n    {\n        tab: 'Past Messages',\n        key: 3\n    },\n    {\n        tab: 'All Messages',\n        key: 4\n    }\n];\n\nconst detachedContentStyle = {\n    border: '1px solid #DCDEE3',\n    padding: '20px'\n};\n\nReactDOM.render(<div className=\"fusion-demo\">\n    <div className=\"demo-item-title\">Customize with contentStyle or contentClassName</div>\n    <Tab shape=\"wrapped\" contentStyle={detachedContentStyle}>\n        {\n            panes.map(pane => <Tab.Item title={pane.tab} key={pane.key}>{pane.tab}</Tab.Item>)\n        }\n    </Tab>\n\n    <div className=\"demo-item-title\">Setting className and style in Tab.Item</div>\n    <Tab shape=\"wrapped\" navStyle={{ background: '#DEE8FF' }}>\n        {\n            panes.map(pane => {\n                return (<Tab.Item\n                    title={pane.tab}\n                    key={pane.key}\n                    className=\"custom-tab-item\"\n                    style={{background: '#FFF'}}>{pane.tab}</Tab.Item>\n                );\n            })\n        }\n    </Tab>\n\n    <div className=\"demo-item-title\">Tabs with equal width</div>\n    <Tab shape=\"capsule\">\n        {\n            panes.map(pane => <Tab.Item title={pane.tab} key={pane.key} className=\"justify-tabs-tab\">{pane.tab}</Tab.Item>)\n        }\n    </Tab>\n</div>\n    , mountNode);
    .fusion-demo .demo-item-title {\n    font-size: 16px;\n    color: #333;\n    padding: 8px;\n    margin: 14px 0;\n}\n\n.custom-content {\n    padding: 15px;\n}\n\n.next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}\n\n.custom-tab-item {\n    margin-right: -1px !important;\n}\n\n.justify-tabs-tab {\n    width: 140px;\n    text-align: center;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/custom-tab.en-us.md b/compiled_docs/tab/demo/custom-tab.en-us.md new file mode 100644 index 0000000000..6d564a8b1a --- /dev/null +++ b/compiled_docs/tab/demo/custom-tab.en-us.md @@ -0,0 +1 @@ +{"title":"Custom tab","meta":{"title":"Custom tab","description":"\n

    By default, tabs are rendered by a default template function. Howerver, you can pass your template function to tabRender.

    \n","order":"10"},"codes":{"jsx":"import { Tab } from '@alifd/next';\n\nfunction CustomTabItem({ title, desc }) {\n return (
    \n
    {title}
    \n
    {desc}
    \n
    );\n}\n\nconst panes = [\n { key: 'e-checking', title: 'Alipay', desc: 'The fee to be paid is $15' },\n { key: 'brand-card', title: 'Bank Card', desc: 'The fee to be paid is $17' }\n];\n\nReactDOM.render(\n }>\n {\n panes.map(pane => {pane.desc})\n }\n \n , mountNode);\n","css":".custom-tab-item {\n padding: 10px;\n}\n\n.tab-title {\n font-size: 20px;\n}\n.tab-desc {\n margin: 10px 0 0 0;\n font-size: 12px;\n}\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n"},"body":"\n````jsx\nimport { Tab } from '@alifd/next';\n\nfunction CustomTabItem({ title, desc }) {\n return (
    \n
    {title}
    \n
    {desc}
    \n
    );\n}\n\nconst panes = [\n { key: 'e-checking', title: 'Alipay', desc: 'The fee to be paid is $15' },\n { key: 'brand-card', title: 'Bank Card', desc: 'The fee to be paid is $17' }\n];\n\nReactDOM.render(\n }>\n {\n panes.map(pane => {pane.desc})\n }\n \n , mountNode);\n````\n\n````css\n.custom-tab-item {\n padding: 10px;\n}\n\n.tab-title {\n font-size: 20px;\n}\n.tab-desc {\n margin: 10px 0 0 0;\n font-size: 12px;\n}\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n````","html":"
    import { Tab } from '@alifd/next';\n\nfunction CustomTabItem({ title, desc }) {\n    return (<div className=\"custom-tab-item\">\n        <div className=\"tab-title\">{title}</div>\n        <div className=\"tab-desc\">{desc}</div>\n    </div>);\n}\n\nconst panes = [\n    { key: 'e-checking', title: 'Alipay', desc: 'The fee to be paid is $15' },\n    { key: 'brand-card', title: 'Bank Card', desc: 'The fee to be paid is $17' }\n];\n\nReactDOM.render(\n    <Tab shape=\"wrapped\" tabRender={(key, props) => <CustomTabItem key={key} {...props} />}>\n        {\n            panes.map(pane => <Tab.Item key={pane.key} {...pane} tabStyle={{ height: '60px' }}>{pane.desc}</Tab.Item>)\n        }\n    </Tab>\n    , mountNode);
    .custom-tab-item {\n    padding: 10px;\n}\n\n.tab-title {\n    font-size: 20px;\n}\n.tab-desc {\n    margin: 10px 0 0 0;\n    font-size: 12px;\n}\n.next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/custom-tab.md b/compiled_docs/tab/demo/custom-tab.md new file mode 100644 index 0000000000..7942a3203b --- /dev/null +++ b/compiled_docs/tab/demo/custom-tab.md @@ -0,0 +1 @@ +{"title":"自定义选项卡","meta":{"title":"自定义选项卡","description":"\n

    Tab 支持使用 tabRender 属性返回自定义组件作为选项卡内容，注意该属性接收函数作为属性值。

    \n","order":"10"},"codes":{"jsx":"import { Tab } from '@alifd/next';\n\nfunction CustomTabItem({ title, desc }) {\n return (
    \n
    {title}
    \n
    {desc}
    \n
    );\n}\n\nconst panes = [\n { key: 'e-checking', title: 'Alipay', desc: 'The fee to be paid is $15' },\n { key: 'brand-card', title: 'Bank Card', desc: 'The fee to be paid is $17' }\n];\n\nReactDOM.render(\n }>\n {\n panes.map(pane => {pane.desc})\n }\n \n , mountNode);\n","css":".custom-tab-item {\n padding: 10px;\n}\n\n.tab-title {\n font-size: 20px;\n}\n.tab-desc {\n margin: 10px 0 0 0;\n font-size: 12px;\n}\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n"},"body":"\n\n````jsx\nimport { Tab } from '@alifd/next';\n\nfunction CustomTabItem({ title, desc }) {\n return (
    \n
    {title}
    \n
    {desc}
    \n
    );\n}\n\nconst panes = [\n { key: 'e-checking', title: 'Alipay', desc: 'The fee to be paid is $15' },\n { key: 'brand-card', title: 'Bank Card', desc: 'The fee to be paid is $17' }\n];\n\nReactDOM.render(\n }>\n {\n panes.map(pane => {pane.desc})\n }\n \n , mountNode);\n````\n\n````css\n.custom-tab-item {\n padding: 10px;\n}\n\n.tab-title {\n font-size: 20px;\n}\n.tab-desc {\n margin: 10px 0 0 0;\n font-size: 12px;\n}\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n````","html":"
    import { Tab } from '@alifd/next';\n\nfunction CustomTabItem({ title, desc }) {\n    return (<div className=\"custom-tab-item\">\n        <div className=\"tab-title\">{title}</div>\n        <div className=\"tab-desc\">{desc}</div>\n    </div>);\n}\n\nconst panes = [\n    { key: 'e-checking', title: 'Alipay', desc: 'The fee to be paid is $15' },\n    { key: 'brand-card', title: 'Bank Card', desc: 'The fee to be paid is $17' }\n];\n\nReactDOM.render(\n    <Tab shape=\"wrapped\" tabRender={(key, props) => <CustomTabItem key={key} {...props} />}>\n        {\n            panes.map(pane => <Tab.Item key={pane.key} {...pane} tabStyle={{ height: '60px' }}>{pane.desc}</Tab.Item>)\n        }\n    </Tab>\n    , mountNode);
    .custom-tab-item {\n    padding: 10px;\n}\n\n.tab-title {\n    font-size: 20px;\n}\n.tab-desc {\n    margin: 10px 0 0 0;\n    font-size: 12px;\n}\n.next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/disabled.en-us.md b/compiled_docs/tab/demo/disabled.en-us.md new file mode 100644 index 0000000000..802db1ca4c --- /dev/null +++ b/compiled_docs/tab/demo/disabled.en-us.md @@ -0,0 +1 @@ +{"title":"Disable","meta":{"title":"Disable","description":"\n

    Disable tabs by passing disabled to Tab.Item.

    \n","order":"8"},"codes":{"jsx":"import { Tab } from '@alifd/next';\n\nReactDOM.render(\n \n Tab 1 content\n Tab 2 content\n Tab 3 content\n \n , mountNode);\n","css":".next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n"},"body":"\n````jsx\nimport { Tab } from '@alifd/next';\n\nReactDOM.render(\n \n Tab 1 content\n Tab 2 content\n Tab 3 content\n \n , mountNode);\n````\n\n````css\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n````","html":"
    import { Tab } from '@alifd/next';\n\nReactDOM.render(\n    <Tab>\n        <Tab.Item title=\"Tab 1\" disabled key=\"1\">Tab 1 content</Tab.Item>\n        <Tab.Item title=\"Tab 2\" key=\"2\">Tab 2 content</Tab.Item>\n        <Tab.Item title=\"Tab 3\" key=\"3\">Tab 3 content</Tab.Item>\n    </Tab>\n    , mountNode);
    .next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/disabled.md b/compiled_docs/tab/demo/disabled.md new file mode 100644 index 0000000000..96b400321f --- /dev/null +++ b/compiled_docs/tab/demo/disabled.md @@ -0,0 +1 @@ +{"title":"禁用","meta":{"title":"禁用","description":"\n

    可以通过 disabled 属性禁用某一个选型卡。

    \n","order":"8"},"codes":{"jsx":"import { Tab } from '@alifd/next';\n\nReactDOM.render(\n \n Tab 1 content\n Tab 2 content\n Tab 3 content\n \n , mountNode);\n","css":".next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n"},"body":"\n\n````jsx\nimport { Tab } from '@alifd/next';\n\nReactDOM.render(\n \n Tab 1 content\n Tab 2 content\n Tab 3 content\n \n , mountNode);\n````\n\n````css\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n````","html":"
    import { Tab } from '@alifd/next';\n\nReactDOM.render(\n    <Tab>\n        <Tab.Item title=\"Tab 1\" disabled key=\"1\">Tab 1 content</Tab.Item>\n        <Tab.Item title=\"Tab 2\" key=\"2\">Tab 2 content</Tab.Item>\n        <Tab.Item title=\"Tab 3\" key=\"3\">Tab 3 content</Tab.Item>\n    </Tab>\n    , mountNode);
    .next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/editable-tab.en-us.md b/compiled_docs/tab/demo/editable-tab.en-us.md new file mode 100644 index 0000000000..bc16dcc2dc --- /dev/null +++ b/compiled_docs/tab/demo/editable-tab.en-us.md @@ -0,0 +1 @@ +{"title":"Editable tab","meta":{"title":"Editable tab","description":"\n

    Create an editable tab.

    \n","order":"12"},"codes":{"jsx":"import { Tab, Input } from '@alifd/next';\n\nclass EditableTabPane extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n tabTitle: props.defaultTitle,\n editable: false\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (nextProps.defaultTitle !== this.state.tabTitle) {\n this.setState({\n tabTitle: nextProps.defaultTitle\n });\n }\n }\n\n onKeyDown = (e) => {\n const { keyCode } = e;\n // Stop bubble up the events of keyUp, keyDown, keyLeft, and keyRight\n if (keyCode > 36 && keyCode < 41) {\n e.stopPropagation();\n }\n }\n\n onBlur = (e) => {\n this.setState({\n editable: false,\n tabTitle: e.target.value\n });\n }\n\n onDblClick = () => {\n this.setState({\n editable: true\n });\n }\n\n render() {\n const { tabTitle, editable } = this.state;\n if (editable) {\n return ;\n }\n return {tabTitle};\n }\n}\n\nconst tabRender = (key, { title }) => (
    \n \n
    );\n\nReactDOM.render(\n Editable tab\n Editable tab\n, mountNode);\n","css":".editable-tab-wrapper {\n padding: 10px;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n\n"},"body":"\n````jsx\nimport { Tab, Input } from '@alifd/next';\n\nclass EditableTabPane extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n tabTitle: props.defaultTitle,\n editable: false\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (nextProps.defaultTitle !== this.state.tabTitle) {\n this.setState({\n tabTitle: nextProps.defaultTitle\n });\n }\n }\n\n onKeyDown = (e) => {\n const { keyCode } = e;\n // Stop bubble up the events of keyUp, keyDown, keyLeft, and keyRight\n if (keyCode > 36 && keyCode < 41) {\n e.stopPropagation();\n }\n }\n\n onBlur = (e) => {\n this.setState({\n editable: false,\n tabTitle: e.target.value\n });\n }\n\n onDblClick = () => {\n this.setState({\n editable: true\n });\n }\n\n render() {\n const { tabTitle, editable } = this.state;\n if (editable) {\n return ;\n }\n return {tabTitle};\n }\n}\n\nconst tabRender = (key, { title }) => (
    \n \n
    );\n\nReactDOM.render(\n Editable tab\n Editable tab\n, mountNode);\n````\n\n````css\n.editable-tab-wrapper {\n padding: 10px;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n\n````","html":"
    import { Tab, Input } from '@alifd/next';\n\nclass EditableTabPane extends React.Component {\n\n    constructor(props) {\n        super(props);\n        this.state = {\n            tabTitle: props.defaultTitle,\n            editable: false\n        };\n    }\n\n    componentWillReceiveProps(nextProps) {\n        if (nextProps.defaultTitle !== this.state.tabTitle) {\n            this.setState({\n                tabTitle: nextProps.defaultTitle\n            });\n        }\n    }\n\n    onKeyDown = (e) => {\n        const { keyCode } = e;\n        // Stop bubble up the events of keyUp, keyDown, keyLeft, and keyRight\n        if (keyCode > 36 && keyCode < 41) {\n            e.stopPropagation();\n        }\n    }\n\n    onBlur = (e) => {\n        this.setState({\n            editable: false,\n            tabTitle: e.target.value\n        });\n    }\n\n    onDblClick = () => {\n        this.setState({\n            editable: true\n        });\n    }\n\n    render() {\n        const { tabTitle, editable } = this.state;\n        if (editable) {\n            return <Input defaultValue={tabTitle} onKeyDown={this.onKeyDown} onBlur={this.onBlur} />;\n        }\n        return <span onDoubleClick={this.onDblClick}>{tabTitle}</span>;\n    }\n}\n\nconst tabRender = (key, { title }) => (<div key={key} className=\"editable-tab-wrapper\">\n    <EditableTabPane defaultTitle={title} />\n</div>);\n\nReactDOM.render(<Tab defaultActiveKey=\"1\" tabRender={tabRender}>\n    <Tab.Item title=\"Double Click To Edit Me\" key=\"1\">Editable tab</Tab.Item>\n    <Tab.Item title=\"Double Click To Edit Me\" key=\"2\">Editable tab</Tab.Item>\n</Tab>, mountNode);
    .editable-tab-wrapper {\n    padding: 10px;\n}\n\n.next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}\n
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/editable-tab.md b/compiled_docs/tab/demo/editable-tab.md new file mode 100644 index 0000000000..0a8146759c --- /dev/null +++ b/compiled_docs/tab/demo/editable-tab.md @@ -0,0 +1 @@ +{"title":"可编辑的 Tab","meta":{"title":"可编辑的 Tab","description":"\n

    Tab 允许开发者在上层进行自由的行为控制，例如用户可以基于 Tab 开发一个标题部分双击可编辑的 Tab ，\n此时用户只要传入自定义组件给 TabPane 即可，Tab 可以将底层事件对象传递给用户的自定义组件。

    \n","order":"12"},"codes":{"jsx":"import { Tab, Input } from '@alifd/next';\n\nclass EditableTabPane extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n tabTitle: props.defaultTitle,\n editable: false\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (nextProps.defaultTitle !== this.state.tabTitle) {\n this.setState({\n tabTitle: nextProps.defaultTitle\n });\n }\n }\n\n onKeyDown = (e) => {\n const { keyCode } = e;\n // Stop bubble up the events of keyUp, keyDown, keyLeft, and keyRight\n if (keyCode > 36 && keyCode < 41) {\n e.stopPropagation();\n }\n }\n\n onBlur = (e) => {\n this.setState({\n editable: false,\n tabTitle: e.target.value\n });\n }\n\n onDblClick = () => {\n this.setState({\n editable: true\n });\n }\n\n render() {\n const { tabTitle, editable } = this.state;\n if (editable) {\n return ;\n }\n return {tabTitle};\n }\n}\n\nconst tabRender = (key, { title }) => (
    \n \n
    );\n\nReactDOM.render(\n Editable tab\n Editable tab\n, mountNode);\n","css":".editable-tab-wrapper {\n padding: 10px;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n\n"},"body":"\n\n````jsx\nimport { Tab, Input } from '@alifd/next';\n\nclass EditableTabPane extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n tabTitle: props.defaultTitle,\n editable: false\n };\n }\n\n componentWillReceiveProps(nextProps) {\n if (nextProps.defaultTitle !== this.state.tabTitle) {\n this.setState({\n tabTitle: nextProps.defaultTitle\n });\n }\n }\n\n onKeyDown = (e) => {\n const { keyCode } = e;\n // Stop bubble up the events of keyUp, keyDown, keyLeft, and keyRight\n if (keyCode > 36 && keyCode < 41) {\n e.stopPropagation();\n }\n }\n\n onBlur = (e) => {\n this.setState({\n editable: false,\n tabTitle: e.target.value\n });\n }\n\n onDblClick = () => {\n this.setState({\n editable: true\n });\n }\n\n render() {\n const { tabTitle, editable } = this.state;\n if (editable) {\n return ;\n }\n return {tabTitle};\n }\n}\n\nconst tabRender = (key, { title }) => (
    \n \n
    );\n\nReactDOM.render(\n Editable tab\n Editable tab\n, mountNode);\n````\n\n````css\n.editable-tab-wrapper {\n padding: 10px;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n\n````","html":"
    import { Tab, Input } from '@alifd/next';\n\nclass EditableTabPane extends React.Component {\n\n    constructor(props) {\n        super(props);\n        this.state = {\n            tabTitle: props.defaultTitle,\n            editable: false\n        };\n    }\n\n    componentWillReceiveProps(nextProps) {\n        if (nextProps.defaultTitle !== this.state.tabTitle) {\n            this.setState({\n                tabTitle: nextProps.defaultTitle\n            });\n        }\n    }\n\n    onKeyDown = (e) => {\n        const { keyCode } = e;\n        // Stop bubble up the events of keyUp, keyDown, keyLeft, and keyRight\n        if (keyCode > 36 && keyCode < 41) {\n            e.stopPropagation();\n        }\n    }\n\n    onBlur = (e) => {\n        this.setState({\n            editable: false,\n            tabTitle: e.target.value\n        });\n    }\n\n    onDblClick = () => {\n        this.setState({\n            editable: true\n        });\n    }\n\n    render() {\n        const { tabTitle, editable } = this.state;\n        if (editable) {\n            return <Input defaultValue={tabTitle} onKeyDown={this.onKeyDown} onBlur={this.onBlur} />;\n        }\n        return <span onDoubleClick={this.onDblClick}>{tabTitle}</span>;\n    }\n}\n\nconst tabRender = (key, { title }) => (<div key={key} className=\"editable-tab-wrapper\">\n    <EditableTabPane defaultTitle={title} />\n</div>);\n\nReactDOM.render(<Tab defaultActiveKey=\"1\" tabRender={tabRender}>\n    <Tab.Item title=\"Double Click To Edit Me\" key=\"1\">Editable tab</Tab.Item>\n    <Tab.Item title=\"Double Click To Edit Me\" key=\"2\">Editable tab</Tab.Item>\n</Tab>, mountNode);
    .editable-tab-wrapper {\n    padding: 10px;\n}\n\n.next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}\n
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/excess-mode.en-us.md b/compiled_docs/tab/demo/excess-mode.en-us.md new file mode 100644 index 0000000000..41d7f5dd3b --- /dev/null +++ b/compiled_docs/tab/demo/excess-mode.en-us.md @@ -0,0 +1 @@ +{"title":"Excess mode","meta":{"title":"Excess mode","description":"\n

    If your Tab excess the range, you can setting excessMode to dropdown for vertical display, or slide for horizontal display, just note that this excessMode will only be effective when tabPosition is set to be top or bottom.

    \n","order":"5"},"codes":{"jsx":"import { Tab } from '@alifd/next';\n\nconst tabs = [\n { tab: 'Home', key: 1 },\n { tab: 'Documnet', key: 2 },\n { tab: 'Setting', key: 3 },\n { tab: 'Help', key: 4 },\n { tab: 'Admin', key: 5 },\n { tab: 'More 1', key: 6 },\n { tab: 'More 2', key: 7 },\n { tab: 'More 3', key: 8 },\n { tab: 'More 4', key: 9 },\n { tab: 'More 5', key: 10 },\n { tab: 'More 6', key: 11 },\n { tab: 'More 7', key: 12 },\n { tab: 'More 8', key: 13 },\n { tab: 'More 9', key: 14 },\n { tab: 'More 10', key: 15 },\n { tab: 'More 11', key: 16 }\n];\n\nfunction onClick(key) {\n console.log(key);\n}\n\nReactDOM.render(
    \n
    Dropdown mode
    \n \n {\n tabs.map(item => {item.tab} content, content, content)\n }\n \n\n
    Slide mode
    \n \n {\n tabs.map(item => {item.tab} content, content, content)\n }\n \n
    \n , mountNode);\n","css":".fusion-demo .demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 14px 0;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n"},"body":"\n````jsx\nimport { Tab } from '@alifd/next';\n\nconst tabs = [\n { tab: 'Home', key: 1 },\n { tab: 'Documnet', key: 2 },\n { tab: 'Setting', key: 3 },\n { tab: 'Help', key: 4 },\n { tab: 'Admin', key: 5 },\n { tab: 'More 1', key: 6 },\n { tab: 'More 2', key: 7 },\n { tab: 'More 3', key: 8 },\n { tab: 'More 4', key: 9 },\n { tab: 'More 5', key: 10 },\n { tab: 'More 6', key: 11 },\n { tab: 'More 7', key: 12 },\n { tab: 'More 8', key: 13 },\n { tab: 'More 9', key: 14 },\n { tab: 'More 10', key: 15 },\n { tab: 'More 11', key: 16 }\n];\n\nfunction onClick(key) {\n console.log(key);\n}\n\nReactDOM.render(
    \n
    Dropdown mode
    \n \n {\n tabs.map(item => {item.tab} content, content, content)\n }\n \n\n
    Slide mode
    \n \n {\n tabs.map(item => {item.tab} content, content, content)\n }\n \n
    \n , mountNode);\n````\n\n````css\n.fusion-demo .demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 14px 0;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n````","html":"
    import { Tab } from '@alifd/next';\n\nconst tabs = [\n    { tab: 'Home', key: 1 },\n    { tab: 'Documnet', key: 2 },\n    { tab: 'Setting', key: 3 },\n    { tab: 'Help', key: 4 },\n    { tab: 'Admin', key: 5 },\n    { tab: 'More 1', key: 6 },\n    { tab: 'More 2', key: 7 },\n    { tab: 'More 3', key: 8 },\n    { tab: 'More 4', key: 9 },\n    { tab: 'More 5', key: 10 },\n    { tab: 'More 6', key: 11 },\n    { tab: 'More 7', key: 12 },\n    { tab: 'More 8', key: 13 },\n    { tab: 'More 9', key: 14 },\n    { tab: 'More 10', key: 15 },\n    { tab: 'More 11', key: 16 }\n];\n\nfunction onClick(key) {\n    console.log(key);\n}\n\nReactDOM.render(<div className=\"fusion-demo\" style={{ maxWidth: '520px' }}>\n    <div className=\"demo-item-title\">Dropdown mode</div>\n    <Tab excessMode=\"dropdown\">\n        {\n            tabs.map(item => <Tab.Item key={item.key} title={item.tab} onClick={onClick}>{item.tab} content, content, content</Tab.Item>)\n        }\n    </Tab>\n\n    <div className=\"demo-item-title\">Slide mode</div>\n    <Tab excessMode=\"slide\">\n        {\n            tabs.map(item => <Tab.Item key={item.key} title={item.tab} onClick={onClick}>{item.tab} content, content, content</Tab.Item>)\n        }\n    </Tab>\n</div>\n    , mountNode);
    .fusion-demo .demo-item-title {\n    font-size: 16px;\n    color: #333;\n    padding: 8px;\n    margin: 14px 0;\n}\n\n.next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/excess-mode.md b/compiled_docs/tab/demo/excess-mode.md new file mode 100644 index 0000000000..a7efc2291f --- /dev/null +++ b/compiled_docs/tab/demo/excess-mode.md @@ -0,0 +1 @@ +{"title":"超出时滑动","meta":{"title":"超出时滑动","description":"\n

    当 Tab 标签非常多时，组件会自动增加滑动支持。可以用过 excessMode 属性切换滑动模式，该属性仅在tabPosition为top或者bottom时生效。

    \n","order":"5"},"codes":{"jsx":"import { Tab } from '@alifd/next';\n\nconst tabs = [\n { tab: 'Home', key: 1 },\n { tab: 'Documnet', key: 2 },\n { tab: 'Setting', key: 3 },\n { tab: 'Help', key: 4 },\n { tab: 'Admin', key: 5 },\n { tab: 'More 1', key: 6 },\n { tab: 'More 2', key: 7 },\n { tab: 'More 3', key: 8 },\n { tab: 'More 4', key: 9 },\n { tab: 'More 5', key: 10 },\n { tab: 'More 6', key: 11 },\n { tab: 'More 7', key: 12 },\n { tab: 'More 8', key: 13 },\n { tab: 'More 9', key: 14 },\n { tab: 'More 10', key: 15 },\n { tab: 'More 11', key: 16 }\n];\n\nfunction onClick(key) {\n console.log(key);\n}\n\nReactDOM.render(
    \n
    Dropdown mode
    \n \n {\n tabs.map(item => {item.tab} content, content, content)\n }\n \n\n
    Slide mode
    \n \n {\n tabs.map(item => {item.tab} content, content, content)\n }\n \n
    \n , mountNode);\n","css":".fusion-demo .demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 14px 0;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n"},"body":"\n\n````jsx\nimport { Tab } from '@alifd/next';\n\nconst tabs = [\n { tab: 'Home', key: 1 },\n { tab: 'Documnet', key: 2 },\n { tab: 'Setting', key: 3 },\n { tab: 'Help', key: 4 },\n { tab: 'Admin', key: 5 },\n { tab: 'More 1', key: 6 },\n { tab: 'More 2', key: 7 },\n { tab: 'More 3', key: 8 },\n { tab: 'More 4', key: 9 },\n { tab: 'More 5', key: 10 },\n { tab: 'More 6', key: 11 },\n { tab: 'More 7', key: 12 },\n { tab: 'More 8', key: 13 },\n { tab: 'More 9', key: 14 },\n { tab: 'More 10', key: 15 },\n { tab: 'More 11', key: 16 }\n];\n\nfunction onClick(key) {\n console.log(key);\n}\n\nReactDOM.render(
    \n
    Dropdown mode
    \n \n {\n tabs.map(item => {item.tab} content, content, content)\n }\n \n\n
    Slide mode
    \n \n {\n tabs.map(item => {item.tab} content, content, content)\n }\n \n
    \n , mountNode);\n````\n\n````css\n.fusion-demo .demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 14px 0;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n````","html":"
    import { Tab } from '@alifd/next';\n\nconst tabs = [\n    { tab: 'Home', key: 1 },\n    { tab: 'Documnet', key: 2 },\n    { tab: 'Setting', key: 3 },\n    { tab: 'Help', key: 4 },\n    { tab: 'Admin', key: 5 },\n    { tab: 'More 1', key: 6 },\n    { tab: 'More 2', key: 7 },\n    { tab: 'More 3', key: 8 },\n    { tab: 'More 4', key: 9 },\n    { tab: 'More 5', key: 10 },\n    { tab: 'More 6', key: 11 },\n    { tab: 'More 7', key: 12 },\n    { tab: 'More 8', key: 13 },\n    { tab: 'More 9', key: 14 },\n    { tab: 'More 10', key: 15 },\n    { tab: 'More 11', key: 16 }\n];\n\nfunction onClick(key) {\n    console.log(key);\n}\n\nReactDOM.render(<div className=\"fusion-demo\" style={{ maxWidth: '520px' }}>\n    <div className=\"demo-item-title\">Dropdown mode</div>\n    <Tab excessMode=\"dropdown\">\n        {\n            tabs.map(item => <Tab.Item key={item.key} title={item.tab} onClick={onClick}>{item.tab} content, content, content</Tab.Item>)\n        }\n    </Tab>\n\n    <div className=\"demo-item-title\">Slide mode</div>\n    <Tab excessMode=\"slide\">\n        {\n            tabs.map(item => <Tab.Item key={item.key} title={item.tab} onClick={onClick}>{item.tab} content, content, content</Tab.Item>)\n        }\n    </Tab>\n</div>\n    , mountNode);
    .fusion-demo .demo-item-title {\n    font-size: 16px;\n    color: #333;\n    padding: 8px;\n    margin: 14px 0;\n}\n\n.next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/extra.en-us.md b/compiled_docs/tab/demo/extra.en-us.md new file mode 100644 index 0000000000..7e8c520f90 --- /dev/null +++ b/compiled_docs/tab/demo/extra.en-us.md @@ -0,0 +1 @@ +{"title":"Extra","meta":{"title":"Extra","description":"\n

    Pass your custom contents to extra, please consider using this when the tab-items are limited, since it is not designed to be used in combination with excess-mode.

    \n","order":"11"},"codes":{"jsx":"import { Tab, Button } from '@alifd/next';\n\nfunction handleChange(key) {\n console.log(key);\n}\n\nfunction handleClick() {\n console.log('hello world');\n}\n\nconst extraContent = ;\n\nReactDOM.render(\n
    \n
    Extra in Horizontal
    \n \n Tab 1 Content\n Tab 2 Content\n Tab 3 Content\n \n\n
    Extra in Vertical
    \n \n Tab 1 Content\n Tab 2 Content\n Tab 3 Content\n \n
    \n , mountNode);\n","css":".fusion-demo .demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 14px 0;\n}\n\n.custom-tab-content {\n min-height: 150px;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n\n\n"},"body":"\n````jsx\nimport { Tab, Button } from '@alifd/next';\n\nfunction handleChange(key) {\n console.log(key);\n}\n\nfunction handleClick() {\n console.log('hello world');\n}\n\nconst extraContent = ;\n\nReactDOM.render(\n
    \n
    Extra in Horizontal
    \n \n Tab 1 Content\n Tab 2 Content\n Tab 3 Content\n \n\n
    Extra in Vertical
    \n \n Tab 1 Content\n Tab 2 Content\n Tab 3 Content\n \n
    \n , mountNode);\n````\n\n````css\n.fusion-demo .demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 14px 0;\n}\n\n.custom-tab-content {\n min-height: 150px;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n\n\n````","html":"
    import { Tab, Button } from '@alifd/next';\n\nfunction handleChange(key) {\n    console.log(key);\n}\n\nfunction handleClick() {\n    console.log('hello world');\n}\n\nconst extraContent = <Button type=\"primary\" onClick={handleClick}>Hello world</Button>;\n\nReactDOM.render(\n    <div className=\"fusion-demo\">\n        <div className=\"demo-item-title\">Extra in Horizontal</div>\n        <Tab shape=\"wrapped\" onChange={handleChange} extra={extraContent}>\n            <Tab.Item title=\"Tab 1\" key=\"1\">Tab 1 Content</Tab.Item>\n            <Tab.Item title=\"Tab 2\" key=\"2\">Tab 2 Content</Tab.Item>\n            <Tab.Item title=\"Tab 3\" key=\"3\">Tab 3 Content</Tab.Item>\n        </Tab>\n\n        <div className=\"demo-item-title\">Extra in Vertical</div>\n        <Tab shape=\"wrapped\" tabPosition=\"left\" onChange={handleChange} extra={extraContent} contentClassName=\"custom-tab-content\">\n            <Tab.Item title=\"Tab 1\" key=\"1\">Tab 1 Content</Tab.Item>\n            <Tab.Item title=\"Tab 2\" key=\"2\">Tab 2 Content</Tab.Item>\n            <Tab.Item title=\"Tab 3\" key=\"3\">Tab 3 Content</Tab.Item>\n        </Tab>\n    </div>\n    , mountNode);
    .fusion-demo .demo-item-title {\n    font-size: 16px;\n    color: #333;\n    padding: 8px;\n    margin: 14px 0;\n}\n\n.custom-tab-content {\n    min-height: 150px;\n}\n\n.next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}\n\n
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/extra.md b/compiled_docs/tab/demo/extra.md new file mode 100644 index 0000000000..46ee8c847f --- /dev/null +++ b/compiled_docs/tab/demo/extra.md @@ -0,0 +1 @@ +{"title":"附加额外内容","meta":{"title":"附加额外内容","description":"\n

    通过 extra 属性添加附加内容，请确保只在有限选项卡的情况下才使用附加内容, 该功能在选项卡溢出时会和溢出导航的按钮冲突。

    \n","order":"11"},"codes":{"jsx":"import { Tab, Button } from '@alifd/next';\n\nfunction handleChange(key) {\n console.log(key);\n}\n\nfunction handleClick() {\n console.log('hello world');\n}\n\nconst extraContent = ;\n\nReactDOM.render(\n
    \n
    Extra in Horizontal
    \n \n Tab 1 Content\n Tab 2 Content\n Tab 3 Content\n \n\n
    Extra in Vertical
    \n \n Tab 1 Content\n Tab 2 Content\n Tab 3 Content\n \n
    \n , mountNode);\n","css":".fusion-demo .demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 14px 0;\n}\n\n.custom-tab-content {\n min-height: 150px;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n\n\n"},"body":"\n\n````jsx\nimport { Tab, Button } from '@alifd/next';\n\nfunction handleChange(key) {\n console.log(key);\n}\n\nfunction handleClick() {\n console.log('hello world');\n}\n\nconst extraContent = ;\n\nReactDOM.render(\n
    \n
    Extra in Horizontal
    \n \n Tab 1 Content\n Tab 2 Content\n Tab 3 Content\n \n\n
    Extra in Vertical
    \n \n Tab 1 Content\n Tab 2 Content\n Tab 3 Content\n \n
    \n , mountNode);\n````\n\n````css\n.fusion-demo .demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 14px 0;\n}\n\n.custom-tab-content {\n min-height: 150px;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n\n\n````","html":"
    import { Tab, Button } from '@alifd/next';\n\nfunction handleChange(key) {\n    console.log(key);\n}\n\nfunction handleClick() {\n    console.log('hello world');\n}\n\nconst extraContent = <Button type=\"primary\" onClick={handleClick}>Hello world</Button>;\n\nReactDOM.render(\n    <div className=\"fusion-demo\">\n        <div className=\"demo-item-title\">Extra in Horizontal</div>\n        <Tab shape=\"wrapped\" onChange={handleChange} extra={extraContent}>\n            <Tab.Item title=\"Tab 1\" key=\"1\">Tab 1 Content</Tab.Item>\n            <Tab.Item title=\"Tab 2\" key=\"2\">Tab 2 Content</Tab.Item>\n            <Tab.Item title=\"Tab 3\" key=\"3\">Tab 3 Content</Tab.Item>\n        </Tab>\n\n        <div className=\"demo-item-title\">Extra in Vertical</div>\n        <Tab shape=\"wrapped\" tabPosition=\"left\" onChange={handleChange} extra={extraContent} contentClassName=\"custom-tab-content\">\n            <Tab.Item title=\"Tab 1\" key=\"1\">Tab 1 Content</Tab.Item>\n            <Tab.Item title=\"Tab 2\" key=\"2\">Tab 2 Content</Tab.Item>\n            <Tab.Item title=\"Tab 3\" key=\"3\">Tab 3 Content</Tab.Item>\n        </Tab>\n    </div>\n    , mountNode);
    .fusion-demo .demo-item-title {\n    font-size: 16px;\n    color: #333;\n    padding: 8px;\n    margin: 14px 0;\n}\n\n.custom-tab-content {\n    min-height: 150px;\n}\n\n.next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}\n\n
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/lazy-load.en-us.md b/compiled_docs/tab/demo/lazy-load.en-us.md new file mode 100644 index 0000000000..cdeaba23d7 --- /dev/null +++ b/compiled_docs/tab/demo/lazy-load.en-us.md @@ -0,0 +1 @@ +{"title":"LazyLoad and AutoUnmount","meta":{"title":"LazyLoad and AutoUnmount","description":"\n

    Disable lazy load by setting lazyLoad={false}, and enable auto unmount inactive tabs by setting unmountInactiveTabs.

    \n","order":"3"},"codes":{"jsx":"import { Tab } from '@alifd/next';\n\nconst tabs = [\n { tab: 'Home', key: 0, content: 'This is home page' },\n { tab: 'Document', key: 1, content: 'This is document page' },\n { tab: 'API', key: 2, content: 'This is api page' }\n];\n\nReactDOM.render(\n
    \n
    Render all tab contents
    \n \n {\n tabs.map(item => {item.content})\n }\n \n\n
    Unmount inactive tabs
    \n \n {\n tabs.map(item => {item.content})\n }\n \n
    \n , mountNode);\n","css":".next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n"},"body":"\n````jsx\nimport { Tab } from '@alifd/next';\n\nconst tabs = [\n { tab: 'Home', key: 0, content: 'This is home page' },\n { tab: 'Document', key: 1, content: 'This is document page' },\n { tab: 'API', key: 2, content: 'This is api page' }\n];\n\nReactDOM.render(\n
    \n
    Render all tab contents
    \n \n {\n tabs.map(item => {item.content})\n }\n \n\n
    Unmount inactive tabs
    \n \n {\n tabs.map(item => {item.content})\n }\n \n
    \n , mountNode);\n````\n\n````css\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n````","html":"
    import { Tab } from '@alifd/next';\n\nconst tabs = [\n    { tab: 'Home', key: 0, content: 'This is home page' },\n    { tab: 'Document', key: 1, content: 'This is document page' },\n    { tab: 'API', key: 2, content: 'This is api page' }\n];\n\nReactDOM.render(\n    <div>\n        <div>Render all tab contents</div>\n        <Tab lazyLoad={false}>\n            {\n                tabs.map(item => <Tab.Item key={item.key} title={item.tab}>{item.content}</Tab.Item>)\n            }\n        </Tab>\n\n        <div>Unmount inactive tabs</div>\n        <Tab unmountInactiveTabs>\n            {\n                tabs.map(item => <Tab.Item key={item.key} title={item.tab}>{item.content}</Tab.Item>)\n            }\n        </Tab>\n    </div>\n    , mountNode);
    .next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/lazy-load.md b/compiled_docs/tab/demo/lazy-load.md new file mode 100644 index 0000000000..5aa5960e0f --- /dev/null +++ b/compiled_docs/tab/demo/lazy-load.md @@ -0,0 +1 @@ +{"title":"按需加载和自动卸载","meta":{"title":"按需加载和自动卸载","description":"\n

    默认情况 Tab 不会提前渲染好所有的内容，而是根据 Tab 的激活情况依次进行渲染。某些时候，如果你想一次渲染好所有内容，可以设置 lazyLoad={false} 进行关闭。此外，某些时候，如果你想每次切换选项卡时自动卸载未激活的 Tab，可以设置 unmountInactiveTabs 开启。

    \n","order":"3"},"codes":{"jsx":"import { Tab } from '@alifd/next';\n\nconst tabs = [\n { tab: 'Home', key: 0, content: 'This is home page' },\n { tab: 'Document', key: 1, content: 'This is document page' },\n { tab: 'API', key: 2, content: 'This is api page' }\n];\n\nReactDOM.render(\n
    \n
    Render all tab contents
    \n \n {\n tabs.map(item => {item.content})\n }\n \n\n
    Unmount inactive tabs
    \n \n {\n tabs.map(item => {item.content})\n }\n \n
    \n , mountNode);\n","css":".next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n"},"body":"\n\n````jsx\nimport { Tab } from '@alifd/next';\n\nconst tabs = [\n { tab: 'Home', key: 0, content: 'This is home page' },\n { tab: 'Document', key: 1, content: 'This is document page' },\n { tab: 'API', key: 2, content: 'This is api page' }\n];\n\nReactDOM.render(\n
    \n
    Render all tab contents
    \n \n {\n tabs.map(item => {item.content})\n }\n \n\n
    Unmount inactive tabs
    \n \n {\n tabs.map(item => {item.content})\n }\n \n
    \n , mountNode);\n````\n\n````css\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n````","html":"
    import { Tab } from '@alifd/next';\n\nconst tabs = [\n    { tab: 'Home', key: 0, content: 'This is home page' },\n    { tab: 'Document', key: 1, content: 'This is document page' },\n    { tab: 'API', key: 2, content: 'This is api page' }\n];\n\nReactDOM.render(\n    <div>\n        <div>Render all tab contents</div>\n        <Tab lazyLoad={false}>\n            {\n                tabs.map(item => <Tab.Item key={item.key} title={item.tab}>{item.content}</Tab.Item>)\n            }\n        </Tab>\n\n        <div>Unmount inactive tabs</div>\n        <Tab unmountInactiveTabs>\n            {\n                tabs.map(item => <Tab.Item key={item.key} title={item.tab}>{item.content}</Tab.Item>)\n            }\n        </Tab>\n    </div>\n    , mountNode);
    .next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/nested.en-us.md b/compiled_docs/tab/demo/nested.en-us.md new file mode 100644 index 0000000000..7211482b7f --- /dev/null +++ b/compiled_docs/tab/demo/nested.en-us.md @@ -0,0 +1 @@ +{"title":"Nest tabs","meta":{"title":"Nest tabs","description":"\n

    Nest multiple Tabs.

    \n","order":"14"},"codes":{"jsx":"import { Tab } from '@alifd/next';\n\nfunction callback(key) {\n console.log(key);\n}\n\nReactDOM.render(\n \n \n \n 1-1\n 1-2\n 1-3\n \n \n \n \n 2-1\n 2-2\n 2-3\n \n \n \n \n 3-1\n 3-2\n 3-3\n \n \n \n \n 4-1\n 4-2\n 4-3\n \n \n \n , mountNode);\n","css":".next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n"},"body":"\n````jsx\nimport { Tab } from '@alifd/next';\n\nfunction callback(key) {\n console.log(key);\n}\n\nReactDOM.render(\n \n \n \n 1-1\n 1-2\n 1-3\n \n \n \n \n 2-1\n 2-2\n 2-3\n \n \n \n \n 3-1\n 3-2\n 3-3\n \n \n \n \n 4-1\n 4-2\n 4-3\n \n \n \n , mountNode);\n````\n\n````css\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n````","html":"
    import { Tab } from '@alifd/next';\n\nfunction callback(key) {\n    console.log(key);\n}\n\nReactDOM.render(\n    <Tab onChange={callback} shape=\"wrapped\">\n        <Tab.Item title=\"Tab 1\" key=\"1\">\n            <Tab shape=\"wrapped\">\n                <Tab.Item title=\"1-1\" key=\"11\">1-1</Tab.Item>\n                <Tab.Item title=\"1-2\" key=\"12\">1-2</Tab.Item>\n                <Tab.Item title=\"1-3\" key=\"13\">1-3</Tab.Item>\n            </Tab>\n        </Tab.Item>\n        <Tab.Item title=\"Tab 2\" key=\"2\">\n            <Tab shape=\"pure\">\n                <Tab.Item title=\"2-1\" key=\"21\">2-1</Tab.Item>\n                <Tab.Item title=\"2-2\" key=\"22\">2-2</Tab.Item>\n                <Tab.Item title=\"3-3\" key=\"23\">2-3</Tab.Item>\n            </Tab>\n        </Tab.Item>\n        <Tab.Item title=\"Tab 3\" key=\"3\">\n            <Tab shape=\"capsule\">\n                <Tab.Item title=\"3-1\" key=\"31\">3-1</Tab.Item>\n                <Tab.Item title=\"3-2\" key=\"32\">3-2</Tab.Item>\n                <Tab.Item title=\"3-3\" key=\"33\">3-3</Tab.Item>\n            </Tab>\n        </Tab.Item>\n        <Tab.Item title=\"Tab 4\" key=\"4\">\n            <Tab shape=\"text\">\n                <Tab.Item title=\"4-1\" key=\"41\">4-1</Tab.Item>\n                <Tab.Item title=\"4-2\" key=\"42\">4-2</Tab.Item>\n                <Tab.Item title=\"4-3\" key=\"43\">4-3</Tab.Item>\n            </Tab>\n        </Tab.Item>\n    </Tab>\n    , mountNode);
    .next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/nested.md b/compiled_docs/tab/demo/nested.md new file mode 100644 index 0000000000..9fa34885b3 --- /dev/null +++ b/compiled_docs/tab/demo/nested.md @@ -0,0 +1 @@ +{"title":"选项卡嵌套","meta":{"title":"选项卡嵌套","description":"\n

    可以将不同类型的选项卡进行嵌套

    \n","order":"14"},"codes":{"jsx":"import { Tab } from '@alifd/next';\n\nfunction callback(key) {\n console.log(key);\n}\n\nReactDOM.render(\n \n \n \n 1-1\n 1-2\n 1-3\n \n \n \n \n 2-1\n 2-2\n 2-3\n \n \n \n \n 3-1\n 3-2\n 3-3\n \n \n \n \n 4-1\n 4-2\n 4-3\n \n \n \n , mountNode);\n","css":".next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n"},"body":"\n\n````jsx\nimport { Tab } from '@alifd/next';\n\nfunction callback(key) {\n console.log(key);\n}\n\nReactDOM.render(\n \n \n \n 1-1\n 1-2\n 1-3\n \n \n \n \n 2-1\n 2-2\n 2-3\n \n \n \n \n 3-1\n 3-2\n 3-3\n \n \n \n \n 4-1\n 4-2\n 4-3\n \n \n \n , mountNode);\n````\n\n````css\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n````","html":"
    import { Tab } from '@alifd/next';\n\nfunction callback(key) {\n    console.log(key);\n}\n\nReactDOM.render(\n    <Tab onChange={callback} shape=\"wrapped\">\n        <Tab.Item title=\"Tab 1\" key=\"1\">\n            <Tab shape=\"wrapped\">\n                <Tab.Item title=\"1-1\" key=\"11\">1-1</Tab.Item>\n                <Tab.Item title=\"1-2\" key=\"12\">1-2</Tab.Item>\n                <Tab.Item title=\"1-3\" key=\"13\">1-3</Tab.Item>\n            </Tab>\n        </Tab.Item>\n        <Tab.Item title=\"Tab 2\" key=\"2\">\n            <Tab shape=\"pure\">\n                <Tab.Item title=\"2-1\" key=\"21\">2-1</Tab.Item>\n                <Tab.Item title=\"2-2\" key=\"22\">2-2</Tab.Item>\n                <Tab.Item title=\"3-3\" key=\"23\">2-3</Tab.Item>\n            </Tab>\n        </Tab.Item>\n        <Tab.Item title=\"Tab 3\" key=\"3\">\n            <Tab shape=\"capsule\">\n                <Tab.Item title=\"3-1\" key=\"31\">3-1</Tab.Item>\n                <Tab.Item title=\"3-2\" key=\"32\">3-2</Tab.Item>\n                <Tab.Item title=\"3-3\" key=\"33\">3-3</Tab.Item>\n            </Tab>\n        </Tab.Item>\n        <Tab.Item title=\"Tab 4\" key=\"4\">\n            <Tab shape=\"text\">\n                <Tab.Item title=\"4-1\" key=\"41\">4-1</Tab.Item>\n                <Tab.Item title=\"4-2\" key=\"42\">4-2</Tab.Item>\n                <Tab.Item title=\"4-3\" key=\"43\">4-3</Tab.Item>\n            </Tab>\n        </Tab.Item>\n    </Tab>\n    , mountNode);
    .next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/position.en-us.md b/compiled_docs/tab/demo/position.en-us.md new file mode 100644 index 0000000000..4700038653 --- /dev/null +++ b/compiled_docs/tab/demo/position.en-us.md @@ -0,0 +1 @@ +{"title":"Positon","meta":{"title":"Positon","description":"\n

    Change tab position by tabPosition, values top | right | bottom | left.

    \n","order":"4"},"codes":{"jsx":"import { Tab, Select } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n state = {\n position: 'top'\n }\n\n changePosition = (val) => {\n this.setState({\n position: val\n });\n }\n\n render() {\n return (
    \n

    \n \n Tab 1 Content\n Tab 2 Content\n Tab 3 Content\n \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".custom-tab-content {\n min-height: 50px;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n"},"body":"\n````jsx\nimport { Tab, Select } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n state = {\n position: 'top'\n }\n\n changePosition = (val) => {\n this.setState({\n position: val\n });\n }\n\n render() {\n return (
    \n

    \n \n Tab 1 Content\n Tab 2 Content\n Tab 3 Content\n \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.custom-tab-content {\n min-height: 50px;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n````","html":"
    import { Tab, Select } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n    state = {\n        position: 'top'\n    }\n\n    changePosition = (val) => {\n        this.setState({\n            position: val\n        });\n    }\n\n    render() {\n        return (<div>\n            <Select onChange={this.changePosition} placeholder=\"Choose Positon of Tab\">\n                {\n                    ['top', 'bottom', 'left', 'right'].map(item => <Select.Option value={item} key={item}>{item}</Select.Option>)\n                }\n            </Select><br /><br />\n            <Tab tabPosition={this.state.position} shape=\"wrapped\" contentClassName=\"custom-tab-content\">\n                <Tab.Item title=\"Tab 1\" key=\"1\">Tab 1 Content</Tab.Item>\n                <Tab.Item title=\"Tab 2\" key=\"2\">Tab 2 Content</Tab.Item>\n                <Tab.Item title=\"Tab 3\" key=\"3\">Tab 3 Content</Tab.Item>\n            </Tab>\n        </div>);\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    .custom-tab-content {\n    min-height: 50px;\n}\n\n.next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/position.md b/compiled_docs/tab/demo/position.md new file mode 100644 index 0000000000..f43ad49823 --- /dev/null +++ b/compiled_docs/tab/demo/position.md @@ -0,0 +1 @@ +{"title":"位置","meta":{"title":"位置","description":"\n

    包裹型选项卡支持通过 tabPosition 属性设置选项卡的位置，支持 top | right | bottom | left 四个方向。

    \n","order":"4"},"codes":{"jsx":"import { Tab, Select } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n state = {\n position: 'top'\n }\n\n changePosition = (val) => {\n this.setState({\n position: val\n });\n }\n\n render() {\n return (
    \n

    \n \n Tab 1 Content\n Tab 2 Content\n Tab 3 Content\n \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".custom-tab-content {\n min-height: 50px;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n"},"body":"\n\n````jsx\nimport { Tab, Select } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n state = {\n position: 'top'\n }\n\n changePosition = (val) => {\n this.setState({\n position: val\n });\n }\n\n render() {\n return (
    \n

    \n \n Tab 1 Content\n Tab 2 Content\n Tab 3 Content\n \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.custom-tab-content {\n min-height: 50px;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n````","html":"
    import { Tab, Select } from '@alifd/next';\n\nclass Demo extends React.Component {\n\n    state = {\n        position: 'top'\n    }\n\n    changePosition = (val) => {\n        this.setState({\n            position: val\n        });\n    }\n\n    render() {\n        return (<div>\n            <Select onChange={this.changePosition} placeholder=\"Choose Positon of Tab\">\n                {\n                    ['top', 'bottom', 'left', 'right'].map(item => <Select.Option value={item} key={item}>{item}</Select.Option>)\n                }\n            </Select><br /><br />\n            <Tab tabPosition={this.state.position} shape=\"wrapped\" contentClassName=\"custom-tab-content\">\n                <Tab.Item title=\"Tab 1\" key=\"1\">Tab 1 Content</Tab.Item>\n                <Tab.Item title=\"Tab 2\" key=\"2\">Tab 2 Content</Tab.Item>\n                <Tab.Item title=\"Tab 3\" key=\"3\">Tab 3 Content</Tab.Item>\n            </Tab>\n        </div>);\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    .custom-tab-content {\n    min-height: 50px;\n}\n\n.next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/shape.en-us.md b/compiled_docs/tab/demo/shape.en-us.md new file mode 100644 index 0000000000..2a62686174 --- /dev/null +++ b/compiled_docs/tab/demo/shape.en-us.md @@ -0,0 +1 @@ +{"title":"Shape","meta":{"title":"Shape","description":"\n

    Change shape of Tab by shape.

    \n","order":"1"},"codes":{"jsx":"import { Tab } from '@alifd/next';\n\nfunction onChange(key) {\n console.log(key);\n}\n\nconst tabs = [\n { tab: 'Home', key: 'home', content: 'This is home page' },\n { tab: 'Document', key: 'doc', content: 'This is document page' },\n { tab: 'API', key: 'api', content: 'This is api page' },\n { tab: 'Repo', key: 'repo', content: 'This ia repo link' }\n];\n\nconst shapes = ['pure', 'wrapped', 'text', 'capsule'];\n\nReactDOM.render(\n
    \n {\n shapes.map(shape => (
    \n \n {\n tabs.map(tab => {tab.content})\n }\n \n
    ))\n }\n
    \n , mountNode);\n","css":".fusion-demo-item {\n margin: 14px 0;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n"},"body":"\n````jsx\nimport { Tab } from '@alifd/next';\n\nfunction onChange(key) {\n console.log(key);\n}\n\nconst tabs = [\n { tab: 'Home', key: 'home', content: 'This is home page' },\n { tab: 'Document', key: 'doc', content: 'This is document page' },\n { tab: 'API', key: 'api', content: 'This is api page' },\n { tab: 'Repo', key: 'repo', content: 'This ia repo link' }\n];\n\nconst shapes = ['pure', 'wrapped', 'text', 'capsule'];\n\nReactDOM.render(\n
    \n {\n shapes.map(shape => (
    \n \n {\n tabs.map(tab => {tab.content})\n }\n \n
    ))\n }\n
    \n , mountNode);\n````\n\n````css\n.fusion-demo-item {\n margin: 14px 0;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n````","html":"
    import { Tab } from '@alifd/next';\n\nfunction onChange(key) {\n    console.log(key);\n}\n\nconst tabs = [\n    { tab: 'Home', key: 'home', content: 'This is home page' },\n    { tab: 'Document', key: 'doc', content: 'This is document page' },\n    { tab: 'API', key: 'api', content: 'This is api page' },\n    { tab: 'Repo', key: 'repo', content: 'This ia repo link' }\n];\n\nconst shapes = ['pure', 'wrapped', 'text', 'capsule'];\n\nReactDOM.render(\n    <div className=\"fusion-demo\">\n        {\n            shapes.map(shape => (<div key={shape} className=\"fusion-demo-item\">\n                <Tab shape={shape} onChange={onChange}>\n                    {\n                        tabs.map(tab => <Tab.Item title={tab.tab} key={tab.key}>{tab.content}</Tab.Item>)\n                    }\n                </Tab>\n            </div>))\n        }\n    </div>\n    , mountNode);
    .fusion-demo-item {\n    margin: 14px 0;\n}\n\n.next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/shape.md b/compiled_docs/tab/demo/shape.md new file mode 100644 index 0000000000..22ad8ce19c --- /dev/null +++ b/compiled_docs/tab/demo/shape.md @@ -0,0 +1 @@ +{"title":"形态","meta":{"title":"形态","description":"\n

    根据使用场景及触发控件的类型，可以通过 shape 属性配置选项卡的类型，主要包括：

    \n
      \n
    • pure 普通选项卡（默认）
      • \n
    • wrapped 包裹型选项卡
      • \n
    • text 文本型选项卡
      • \n
    • capsule 胶囊型选项卡
      • \n
    \n","order":"1"},"codes":{"jsx":"import { Tab } from '@alifd/next';\n\nfunction onChange(key) {\n console.log(key);\n}\n\nconst tabs = [\n { tab: 'Home', key: 'home', content: 'This is home page' },\n { tab: 'Document', key: 'doc', content: 'This is document page' },\n { tab: 'API', key: 'api', content: 'This is api page' },\n { tab: 'Repo', key: 'repo', content: 'This ia repo link' }\n];\n\nconst shapes = ['pure', 'wrapped', 'text', 'capsule'];\n\nReactDOM.render(\n
    \n {\n shapes.map(shape => (
    \n \n {\n tabs.map(tab => {tab.content})\n }\n \n
    ))\n }\n
    \n , mountNode);\n","css":".fusion-demo-item {\n margin: 14px 0;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n"},"body":"\n\n````jsx\nimport { Tab } from '@alifd/next';\n\nfunction onChange(key) {\n console.log(key);\n}\n\nconst tabs = [\n { tab: 'Home', key: 'home', content: 'This is home page' },\n { tab: 'Document', key: 'doc', content: 'This is document page' },\n { tab: 'API', key: 'api', content: 'This is api page' },\n { tab: 'Repo', key: 'repo', content: 'This ia repo link' }\n];\n\nconst shapes = ['pure', 'wrapped', 'text', 'capsule'];\n\nReactDOM.render(\n
    \n {\n shapes.map(shape => (
    \n \n {\n tabs.map(tab => {tab.content})\n }\n \n
    ))\n }\n
    \n , mountNode);\n````\n\n````css\n.fusion-demo-item {\n margin: 14px 0;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n````","html":"
    import { Tab } from '@alifd/next';\n\nfunction onChange(key) {\n    console.log(key);\n}\n\nconst tabs = [\n    { tab: 'Home', key: 'home', content: 'This is home page' },\n    { tab: 'Document', key: 'doc', content: 'This is document page' },\n    { tab: 'API', key: 'api', content: 'This is api page' },\n    { tab: 'Repo', key: 'repo', content: 'This ia repo link' }\n];\n\nconst shapes = ['pure', 'wrapped', 'text', 'capsule'];\n\nReactDOM.render(\n    <div className=\"fusion-demo\">\n        {\n            shapes.map(shape => (<div key={shape} className=\"fusion-demo-item\">\n                <Tab shape={shape} onChange={onChange}>\n                    {\n                        tabs.map(tab => <Tab.Item title={tab.tab} key={tab.key}>{tab.content}</Tab.Item>)\n                    }\n                </Tab>\n            </div>))\n        }\n    </div>\n    , mountNode);
    .fusion-demo-item {\n    margin: 14px 0;\n}\n\n.next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/size.en-us.md b/compiled_docs/tab/demo/size.en-us.md new file mode 100644 index 0000000000..e0395fca41 --- /dev/null +++ b/compiled_docs/tab/demo/size.en-us.md @@ -0,0 +1 @@ +{"title":"Size","meta":{"title":"Size","description":"\n

    Change the Tab size by size.

    \n","order":"2"},"codes":{"jsx":"import { Tab } from '@alifd/next';\n\nconst tabs = [\n { tab: 'Home', key: 'home', content: 'This is home page' },\n { tab: 'Document', key: 'doc', content: 'This is document page' },\n { tab: 'API', key: 'api', content: 'This is api page' }\n];\n\nReactDOM.render(\n
    \n \n {tabs.map(item => {item.content})}\n \n
    \n \n {tabs.map(item => {item.content})}\n \n
    \n \n {tabs.map(item => {item.content})}\n \n
    \n \n {tabs.map(item => {item.content})}\n \n\n
    , mountNode);\n","css":".next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n"},"body":"\n````jsx\nimport { Tab } from '@alifd/next';\n\nconst tabs = [\n { tab: 'Home', key: 'home', content: 'This is home page' },\n { tab: 'Document', key: 'doc', content: 'This is document page' },\n { tab: 'API', key: 'api', content: 'This is api page' }\n];\n\nReactDOM.render(\n
    \n \n {tabs.map(item => {item.content})}\n \n
    \n \n {tabs.map(item => {item.content})}\n \n
    \n \n {tabs.map(item => {item.content})}\n \n
    \n \n {tabs.map(item => {item.content})}\n \n\n
    , mountNode);\n````\n\n````css\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n````","html":"
    import { Tab } from '@alifd/next';\n\nconst tabs = [\n    { tab: 'Home', key: 'home', content: 'This is home page' },\n    { tab: 'Document', key: 'doc', content: 'This is document page' },\n    { tab: 'API', key: 'api', content: 'This is api page' }\n];\n\nReactDOM.render(\n    <div>\n        <Tab size=\"small\">\n            {tabs.map(item => <Tab.Item key={item.key} title={item.tab}>{item.content}</Tab.Item>)}\n        </Tab>\n        <br />\n        <Tab size=\"small\" shape=\"wrapped\">\n            {tabs.map(item => <Tab.Item key={item.key} title={item.tab}>{item.content}</Tab.Item>)}\n        </Tab>\n        <br />\n        <Tab size=\"small\" shape=\"text\">\n            {tabs.map(item => <Tab.Item key={item.key} title={item.tab}>{item.content}</Tab.Item>)}\n        </Tab>\n        <br />\n        <Tab size=\"small\" shape=\"capsule\">\n            {tabs.map(item => <Tab.Item key={item.key} title={item.tab}>{item.content}</Tab.Item>)}\n        </Tab>\n\n    </div>, mountNode);
    .next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/size.md b/compiled_docs/tab/demo/size.md new file mode 100644 index 0000000000..7c998f4e81 --- /dev/null +++ b/compiled_docs/tab/demo/size.md @@ -0,0 +1 @@ +{"title":"尺寸","meta":{"title":"尺寸","description":"\n

    组件尺寸，可以通过size属性设置，提供medium(默认)和small两种尺寸，\nsmall尺寸的选项卡组件可以用在弹出框等较狭窄的容器内。

    \n","order":"2"},"codes":{"jsx":"import { Tab } from '@alifd/next';\n\nconst tabs = [\n { tab: 'Home', key: 'home', content: 'This is home page' },\n { tab: 'Document', key: 'doc', content: 'This is document page' },\n { tab: 'API', key: 'api', content: 'This is api page' }\n];\n\nReactDOM.render(\n
    \n \n {tabs.map(item => {item.content})}\n \n
    \n \n {tabs.map(item => {item.content})}\n \n
    \n \n {tabs.map(item => {item.content})}\n \n
    \n \n {tabs.map(item => {item.content})}\n \n\n
    , mountNode);\n","css":".next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n"},"body":"\n\n````jsx\nimport { Tab } from '@alifd/next';\n\nconst tabs = [\n { tab: 'Home', key: 'home', content: 'This is home page' },\n { tab: 'Document', key: 'doc', content: 'This is document page' },\n { tab: 'API', key: 'api', content: 'This is api page' }\n];\n\nReactDOM.render(\n
    \n \n {tabs.map(item => {item.content})}\n \n
    \n \n {tabs.map(item => {item.content})}\n \n
    \n \n {tabs.map(item => {item.content})}\n \n
    \n \n {tabs.map(item => {item.content})}\n \n\n
    , mountNode);\n````\n\n````css\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n````","html":"
    import { Tab } from '@alifd/next';\n\nconst tabs = [\n    { tab: 'Home', key: 'home', content: 'This is home page' },\n    { tab: 'Document', key: 'doc', content: 'This is document page' },\n    { tab: 'API', key: 'api', content: 'This is api page' }\n];\n\nReactDOM.render(\n    <div>\n        <Tab size=\"small\">\n            {tabs.map(item => <Tab.Item key={item.key} title={item.tab}>{item.content}</Tab.Item>)}\n        </Tab>\n        <br />\n        <Tab size=\"small\" shape=\"wrapped\">\n            {tabs.map(item => <Tab.Item key={item.key} title={item.tab}>{item.content}</Tab.Item>)}\n        </Tab>\n        <br />\n        <Tab size=\"small\" shape=\"text\">\n            {tabs.map(item => <Tab.Item key={item.key} title={item.tab}>{item.content}</Tab.Item>)}\n        </Tab>\n        <br />\n        <Tab size=\"small\" shape=\"capsule\">\n            {tabs.map(item => <Tab.Item key={item.key} title={item.tab}>{item.content}</Tab.Item>)}\n        </Tab>\n\n    </div>, mountNode);
    .next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/tab-in-grid.en-us.md b/compiled_docs/tab/demo/tab-in-grid.en-us.md new file mode 100644 index 0000000000..16168d7b17 --- /dev/null +++ b/compiled_docs/tab/demo/tab-in-grid.en-us.md @@ -0,0 +1 @@ +{"title":"Tab in Grid","meta":{"title":"Tab in Grid","description":"\n

    Use Tab in Grid should adding overflow: hidden to the container.

    \n","order":"13"},"codes":{"jsx":"import { Tab, Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nconst tabs = function(length) {\n const arr = [];\n for (let i = 1; i < length; i++) {\n arr.push({ tab: `tab ${i}`, key: i, content: `tab ${i} content` });\n }\n return arr;\n}(15);\n\nReactDOM.render(\n
    \n \n Sidebar\n \n \n {\n tabs.map(item => {item.content})\n }\n \n \n \n
    \n , mountNode);\n","css":".custom-row {\n border: 1px solid #ccc;\n}\n\n.custom-col-sidebar {\n border-right: 1px solid #ccc;\n height: 130px;\n line-height: 130px;\n text-align: center;\n}\n\n.custom-col-content {\n overflow: hidden;\n}\n"},"body":"\n````jsx\nimport { Tab, Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nconst tabs = function(length) {\n const arr = [];\n for (let i = 1; i < length; i++) {\n arr.push({ tab: `tab ${i}`, key: i, content: `tab ${i} content` });\n }\n return arr;\n}(15);\n\nReactDOM.render(\n
    \n \n Sidebar\n \n \n {\n tabs.map(item => {item.content})\n }\n \n \n \n
    \n , mountNode);\n````\n\n````css\n.custom-row {\n border: 1px solid #ccc;\n}\n\n.custom-col-sidebar {\n border-right: 1px solid #ccc;\n height: 130px;\n line-height: 130px;\n text-align: center;\n}\n\n.custom-col-content {\n overflow: hidden;\n}\n````","html":"
    import { Tab, Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nconst tabs = function(length) {\n    const arr = [];\n    for (let i = 1; i < length; i++) {\n        arr.push({ tab: `tab ${i}`, key: i, content: `tab ${i} content` });\n    }\n    return arr;\n}(15);\n\nReactDOM.render(\n    <div className=\"custom-wrapper\">\n        <Row className=\"custom-row\">\n            <Col fixedSpan=\"12\" className=\"custom-col-sidebar\">Sidebar</Col>\n            <Col className=\"custom-col-content\">\n                <Tab>\n                    {\n                        tabs.map(item => <Tab.Item key={item.key} title={item.tab}>{item.content}</Tab.Item>)\n                    }\n                </Tab>\n            </Col>\n        </Row>\n    </div>\n    , mountNode);
    .custom-row {\n    border: 1px solid #ccc;\n}\n\n.custom-col-sidebar {\n    border-right: 1px solid #ccc;\n    height: 130px;\n    line-height: 130px;\n    text-align: center;\n}\n\n.custom-col-content {\n    overflow: hidden;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/tab-in-grid.md b/compiled_docs/tab/demo/tab-in-grid.md new file mode 100644 index 0000000000..d29ccb1614 --- /dev/null +++ b/compiled_docs/tab/demo/tab-in-grid.md @@ -0,0 +1 @@ +{"title":"在 Grid 中使用 Tab","meta":{"title":"在 Grid 中使用 Tab","description":"\n

    当 Tab 位于 Grid 组件的布局中时，由于 Grid 默认使用 flex 布局方式，当选项卡数量过多时，会导致内层元素撑起整个 flex 容器，此时需要给容器添加自定义样式 overflow: hidden。

    \n","order":"13"},"codes":{"jsx":"import { Tab, Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nconst tabs = function(length) {\n const arr = [];\n for (let i = 1; i < length; i++) {\n arr.push({ tab: `tab ${i}`, key: i, content: `tab ${i} content` });\n }\n return arr;\n}(15);\n\nReactDOM.render(\n
    \n \n Sidebar\n \n \n {\n tabs.map(item => {item.content})\n }\n \n \n \n
    \n , mountNode);\n","css":".custom-row {\n border: 1px solid #ccc;\n}\n\n.custom-col-sidebar {\n border-right: 1px solid #ccc;\n height: 130px;\n line-height: 130px;\n text-align: center;\n}\n\n.custom-col-content {\n overflow: hidden;\n}\n"},"body":"\n\n````jsx\nimport { Tab, Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nconst tabs = function(length) {\n const arr = [];\n for (let i = 1; i < length; i++) {\n arr.push({ tab: `tab ${i}`, key: i, content: `tab ${i} content` });\n }\n return arr;\n}(15);\n\nReactDOM.render(\n
    \n \n Sidebar\n \n \n {\n tabs.map(item => {item.content})\n }\n \n \n \n
    \n , mountNode);\n````\n\n````css\n.custom-row {\n border: 1px solid #ccc;\n}\n\n.custom-col-sidebar {\n border-right: 1px solid #ccc;\n height: 130px;\n line-height: 130px;\n text-align: center;\n}\n\n.custom-col-content {\n overflow: hidden;\n}\n````","html":"
    import { Tab, Grid } from '@alifd/next';\n\nconst { Row, Col } = Grid;\n\nconst tabs = function(length) {\n    const arr = [];\n    for (let i = 1; i < length; i++) {\n        arr.push({ tab: `tab ${i}`, key: i, content: `tab ${i} content` });\n    }\n    return arr;\n}(15);\n\nReactDOM.render(\n    <div className=\"custom-wrapper\">\n        <Row className=\"custom-row\">\n            <Col fixedSpan=\"12\" className=\"custom-col-sidebar\">Sidebar</Col>\n            <Col className=\"custom-col-content\">\n                <Tab>\n                    {\n                        tabs.map(item => <Tab.Item key={item.key} title={item.tab}>{item.content}</Tab.Item>)\n                    }\n                </Tab>\n            </Col>\n        </Row>\n    </div>\n    , mountNode);
    .custom-row {\n    border: 1px solid #ccc;\n}\n\n.custom-col-sidebar {\n    border-right: 1px solid #ccc;\n    height: 130px;\n    line-height: 130px;\n    text-align: center;\n}\n\n.custom-col-content {\n    overflow: hidden;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/trigger-type.en-us.md b/compiled_docs/tab/demo/trigger-type.en-us.md new file mode 100644 index 0000000000..0ea98face8 --- /dev/null +++ b/compiled_docs/tab/demo/trigger-type.en-us.md @@ -0,0 +1 @@ +{"title":"Trigger type","meta":{"title":"Trigger type","description":"\n

    Change default tirgger type by triggerType.

    \n","order":"7"},"codes":{"jsx":"import { Tab } from '@alifd/next';\n\nconst tabs = [\n { tab: 'Home', key: 0, content: 'This is home page' },\n { tab: 'Document', key: 1, content: 'This is document page' },\n { tab: 'API', key: 2, content: 'This is api page' }\n];\n\nfunction onChange(key) {\n console.log('change', key);\n}\n\nfunction handleClick(key) {\n console.log('click', key);\n}\n\nfunction onMouseEnter(key, e) {\n console.log('enter', e.target, key);\n}\n\nfunction onMouseLeave(key, e) {\n console.log('leave', e.target, key);\n}\n\nReactDOM.render(\n
    \n
    Click to trigger change
    \n \n {\n tabs.map(item => {item.content})\n }\n \n
    Hover to trigger change
    \n \n {\n tabs.map(item => (\n {item.content}\n ))\n }\n \n
    \n , mountNode);\n","css":".fusion-demo .demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 14px 0;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n"},"body":"\n````jsx\nimport { Tab } from '@alifd/next';\n\nconst tabs = [\n { tab: 'Home', key: 0, content: 'This is home page' },\n { tab: 'Document', key: 1, content: 'This is document page' },\n { tab: 'API', key: 2, content: 'This is api page' }\n];\n\nfunction onChange(key) {\n console.log('change', key);\n}\n\nfunction handleClick(key) {\n console.log('click', key);\n}\n\nfunction onMouseEnter(key, e) {\n console.log('enter', e.target, key);\n}\n\nfunction onMouseLeave(key, e) {\n console.log('leave', e.target, key);\n}\n\nReactDOM.render(\n
    \n
    Click to trigger change
    \n \n {\n tabs.map(item => {item.content})\n }\n \n
    Hover to trigger change
    \n \n {\n tabs.map(item => (\n {item.content}\n ))\n }\n \n
    \n , mountNode);\n````\n\n````css\n.fusion-demo .demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 14px 0;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n````","html":"
    import { Tab } from '@alifd/next';\n\nconst tabs = [\n    { tab: 'Home', key: 0, content: 'This is home page' },\n    { tab: 'Document', key: 1, content: 'This is document page' },\n    { tab: 'API', key: 2, content: 'This is api page' }\n];\n\nfunction onChange(key) {\n    console.log('change', key);\n}\n\nfunction handleClick(key) {\n    console.log('click', key);\n}\n\nfunction onMouseEnter(key, e) {\n    console.log('enter', e.target, key);\n}\n\nfunction onMouseLeave(key, e) {\n    console.log('leave', e.target, key);\n}\n\nReactDOM.render(\n    <div className=\"fusion-demo\">\n        <div className=\"demo-item-title\">Click to trigger change</div>\n        <Tab triggerType=\"click\" onChange={onChange}>\n            {\n                tabs.map(item => <Tab.Item key={item.key} title={item.tab} onClick={handleClick}>{item.content}</Tab.Item>)\n            }\n        </Tab>\n        <div className=\"demo-item-title\">Hover to trigger change</div>\n        <Tab triggerType=\"hover\" onChange={onChange}>\n            {\n                tabs.map(item => (<Tab.Item\n                    key={item.key}\n                    title={item.tab}\n                    onClick={handleClick}\n                    onMouseEnter={onMouseEnter}\n                    onMouseLeave={onMouseLeave}>\n                    {item.content}\n                </Tab.Item>))\n            }\n        </Tab>\n    </div>\n    , mountNode);
    .fusion-demo .demo-item-title {\n    font-size: 16px;\n    color: #333;\n    padding: 8px;\n    margin: 14px 0;\n}\n\n.next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/demo/trigger-type.md b/compiled_docs/tab/demo/trigger-type.md new file mode 100644 index 0000000000..7c49a764a0 --- /dev/null +++ b/compiled_docs/tab/demo/trigger-type.md @@ -0,0 +1 @@ +{"title":"触发类型","meta":{"title":"触发类型","description":"\n

    Tab 支持 click 切换和 hover 切换两种触发类型，默认为 click 触发，您可以使用 triggerType 属性修改默认的触发类型。

    \n","order":"7"},"codes":{"jsx":"import { Tab } from '@alifd/next';\n\nconst tabs = [\n { tab: 'Home', key: 0, content: 'This is home page' },\n { tab: 'Document', key: 1, content: 'This is document page' },\n { tab: 'API', key: 2, content: 'This is api page' }\n];\n\nfunction onChange(key) {\n console.log('change', key);\n}\n\nfunction handleClick(key) {\n console.log('click', key);\n}\n\nfunction onMouseEnter(key, e) {\n console.log('enter', e.target, key);\n}\n\nfunction onMouseLeave(key, e) {\n console.log('leave', e.target, key);\n}\n\nReactDOM.render(\n
    \n
    Click to trigger change
    \n \n {\n tabs.map(item => {item.content})\n }\n \n
    Hover to trigger change
    \n \n {\n tabs.map(item => (\n {item.content}\n ))\n }\n \n
    \n , mountNode);\n","css":".fusion-demo .demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 14px 0;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n"},"body":"\n\n````jsx\nimport { Tab } from '@alifd/next';\n\nconst tabs = [\n { tab: 'Home', key: 0, content: 'This is home page' },\n { tab: 'Document', key: 1, content: 'This is document page' },\n { tab: 'API', key: 2, content: 'This is api page' }\n];\n\nfunction onChange(key) {\n console.log('change', key);\n}\n\nfunction handleClick(key) {\n console.log('click', key);\n}\n\nfunction onMouseEnter(key, e) {\n console.log('enter', e.target, key);\n}\n\nfunction onMouseLeave(key, e) {\n console.log('leave', e.target, key);\n}\n\nReactDOM.render(\n
    \n
    Click to trigger change
    \n \n {\n tabs.map(item => {item.content})\n }\n \n
    Hover to trigger change
    \n \n {\n tabs.map(item => (\n {item.content}\n ))\n }\n \n
    \n , mountNode);\n````\n\n````css\n.fusion-demo .demo-item-title {\n font-size: 16px;\n color: #333;\n padding: 8px;\n margin: 14px 0;\n}\n\n.next-tabs-content {\n color: #333;\n font-size: 12px;\n padding: 12px;\n}\n````","html":"
    import { Tab } from '@alifd/next';\n\nconst tabs = [\n    { tab: 'Home', key: 0, content: 'This is home page' },\n    { tab: 'Document', key: 1, content: 'This is document page' },\n    { tab: 'API', key: 2, content: 'This is api page' }\n];\n\nfunction onChange(key) {\n    console.log('change', key);\n}\n\nfunction handleClick(key) {\n    console.log('click', key);\n}\n\nfunction onMouseEnter(key, e) {\n    console.log('enter', e.target, key);\n}\n\nfunction onMouseLeave(key, e) {\n    console.log('leave', e.target, key);\n}\n\nReactDOM.render(\n    <div className=\"fusion-demo\">\n        <div className=\"demo-item-title\">Click to trigger change</div>\n        <Tab triggerType=\"click\" onChange={onChange}>\n            {\n                tabs.map(item => <Tab.Item key={item.key} title={item.tab} onClick={handleClick}>{item.content}</Tab.Item>)\n            }\n        </Tab>\n        <div className=\"demo-item-title\">Hover to trigger change</div>\n        <Tab triggerType=\"hover\" onChange={onChange}>\n            {\n                tabs.map(item => (<Tab.Item\n                    key={item.key}\n                    title={item.tab}\n                    onClick={handleClick}\n                    onMouseEnter={onMouseEnter}\n                    onMouseLeave={onMouseLeave}>\n                    {item.content}\n                </Tab.Item>))\n            }\n        </Tab>\n    </div>\n    , mountNode);
    .fusion-demo .demo-item-title {\n    font-size: 16px;\n    color: #333;\n    padding: 8px;\n    margin: 14px 0;\n}\n\n.next-tabs-content {\n    color: #333;\n    font-size: 12px;\n    padding: 12px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tab/index.en-us.md b/compiled_docs/tab/index.en-us.md new file mode 100644 index 0000000000..4175598bed --- /dev/null +++ b/compiled_docs/tab/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

    Guide#

    Tabs mke it easy to explore and switch betweeen different views or functional aspects of an app or to browse categories data sets.

    \n

    Animation#

    Disable animation with animation={false}

    \n

    API#

    ","api":"

    Tab#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    activeKeyKey of the current active tab
    This prop will make tab a 'controlled component', end user will be unable to change tabs    		Number/String-
    sizeSize of tab

    option:
    'small', 'medium'    		Enum'medium'
    shapeShape of tab

    option:
    'pure', 'wrapped', 'text', 'capsule'    		Enum'pure'
    defaultActiveKeyKey of default active tabNumber/String-
    animationEnable animationBooleantrue
    excessModeExcess mode for extra tabs

    option:
    'slide', 'dropdown'    		Enum'slide'
    tabPositionPosition of tabs

    option:
    'top', 'bottom', 'left', 'right'    		Enum'top'
    triggerTypeTrigger type to change active tab

    option:
    'hover', 'click'    		Enum'click'
    lazyLoadLazy mount tabsBooleantrue
    unmountInactiveTabsAuto unmount inactive tabsBooleanfalse
    navStyleCustom style of navObject-
    navClassNameCustom className of navString-
    contentStyleCustom style of contentObject-
    contentClassNameCustom className of contentString-
    extraExtra content of tab, ensure the item won't excess when using thisReactNode-
    onClickCallback when click tabFunction() => {}
    onChangeCallback when active tab changes

    signature:
    Function(key: String/Number)) => void
    parameter:
    key: {String/Number)} theActiveKey    		Function() => {}
    onCloseCallback when close the tab

    signature:
    Function(key: String/Number)) => void
    parameter:
    key: {String/Number)} theClosedKey    		Function() => {}
    tabRenderCustom template render for tab

    signature:
    Function(key: String, props: Object) => ReactNode
    parameter:
    key: {String} tabKey
    props: {Object} propsOfTabItem
    return:
    {ReactNode} the rendered tab item
    		Function-
    popupPropsproperties pass down to Popup Menu in dropdown excess modeObject-
    \n

    Tab.Item#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    titleTitle of tabReactNode-
    closeableIf tab is closeableBooleanfalse
    disabledIf tab is disabledBooleanfalse
    \n

    ARIA and KeyBoard#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyBoardDescripiton
    Right Arrowswitch to previous Tab.Item
    Left Arrowswitch to next Tab.Item
    \n"} \ No newline at end of file diff --git a/compiled_docs/tab/index.md b/compiled_docs/tab/index.md new file mode 100644 index 0000000000..c3cc86aa54 --- /dev/null +++ b/compiled_docs/tab/index.md @@ -0,0 +1 @@ +{"meta":"

    Guide#

    TAB 让用户可以在不同子任务、视图、模式之间切换，它具有全局导航的作用，\n是全局功能的主要展示和切换区域，一个TAB标记一个核心功能，TAB之间可以快速点击切换。\n该窗口包含2个以上的选项卡，所有选项卡可以排列在一行中，即使该用户界面被本地化后也是如此。\n提供平级的区域将大块内容进行收纳和展现，保持界面整洁。

    \n

    何时使用#

    Fusion 提供了三级选项卡，分别用于不同的场景。

    \n
      \n
    • 普通选项卡，引领整页面的内容，起导航的作用。
      • \n
    • 文本型选项卡。
      • \n
    • 包裹型选项卡，在页面结构中，只是局部展示，需要和其他内容结合出现。
      • \n
    • 胶囊型选项卡。
      • \n
    \n

    关于动效#

    如果您不想开启动效，可以通过设置 animation 属性值为 false 来关闭。

    \n

    API#

    ","api":"

    Tab#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    activeKey被激活的选项卡的 key, 赋值则tab为受控组件, 用户无法切换Number/String-
    size尺寸

    可选值:
    'small', 'medium'    		Enum'medium'
    shape外观形态

    可选值:
    'pure', 'wrapped', 'text', 'capsule'    		Enum'pure'
    defaultActiveKey初始化时被激活的选项卡的 keyNumber/String-
    animation是否开启动效Booleantrue
    excessMode选项卡过多时的滑动模式

    可选值:
    'slide', 'dropdown'    		Enum'slide'
    tabPosition导航选项卡的位置，只适用于包裹型（wrapped）选项卡

    可选值:
    'top', 'bottom', 'left', 'right'    		Enum'top'
    triggerType激活选项卡的触发方式

    可选值:
    'hover', 'click'    		Enum'click'
    lazyLoad是否延迟加载 TabPane 的内容, 默认开启, 即不提前渲染Booleantrue
    unmountInactiveTabs是否自动卸载未处于激活状态的选项卡Booleanfalse
    navStyle导航条的自定义样式Object-
    navClassName导航条的自定义样式类String-
    contentStyle内容区容器的自定义样式Object-
    contentClassName内容区容器的自定义样式类String-
    extra导航栏附加内容ReactNode-
    onClick点击单个选项卡时触发的回调

    签名:
    Function() => void    		Function() => {}
    onChange选项卡发生切换时的事件回调

    签名:
    Function(key: String/Number) => void
    参数:
    key: {String/Number} 改变后的 key    		Function() => {}
    onClose选项卡被关闭时的事件回调

    签名:
    Function(key: String/Number) => void
    参数:
    key: {String/Number} 关闭的选项卡的 key    		Function() => {}
    tabRender自定义选项卡模板渲染函数

    签名:
    Function(key: String, props: Object) => ReactNode
    参数:
    key: {String} 当前 Tab.Item 的 key 值
    props: {Object} 传给 Tab.Item 的所有属性键值对
    返回值:
    {ReactNode} 返回自定义组件
    		Function-
    popupProps弹层属性透传, 只有当 excessMode 为 dropdown 时生效Object-
    \n

    Tab.Item#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    title选项卡标题ReactNode-
    closeable单个选项卡是否可关闭Booleanfalse
    disabled选项卡是否被禁用Boolean-
    \n

    ARIA and KeyBoard#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    按键说明
    Right Arrow切换至前一项Tab.Item
    Left Arrow切换至后一项Tab.Item
    \n"} \ No newline at end of file diff --git a/compiled_docs/table/demo/accessibility.en-us.md b/compiled_docs/table/demo/accessibility.en-us.md new file mode 100644 index 0000000000..841f6d9b2c --- /dev/null +++ b/compiled_docs/table/demo/accessibility.en-us.md @@ -0,0 +1 @@ +{"title":"Accessibility","meta":{"title":"Accessibility","description":"\n

    Browse the table by keyboard arrow keys.

    \n","order":"23"},"codes":{"jsx":"import { Table } from '@alifd/next';\n\nconst result = [{\n id: '001',\n time: 1951,\n title: {name: 'The Old Man and the Sea'},\n}, {\n id: '002',\n time: 1925,\n title: {name: 'the great gatsby'},\n}, {\n id: '003',\n time: 1719,\n title: {name: 'The adventures of Robinson Crusoe'},\n}];\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n dataSource: result,\n id:''\n };\n this.onclick = this.onclick.bind(this);\n this.render = this.render.bind(this);\n }\n onclick(v) {\n let k;\n for (let i = 0; i < result.length; i++) {\n if (v === result[i].id) {\n k = i;\n break;\n }\n }\n result.splice(k, 1);\n }\n getRow(item) {\n this.setState({ id: item.id });\n }\n render() {\n return (
    \n \n \n \n \n this.onclick(this.state.id)}>Remove}/>\n
    \n
    );\n }\n}\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Table } from '@alifd/next';\n\nconst result = [{\n id: '001',\n time: 1951,\n title: {name: 'The Old Man and the Sea'},\n}, {\n id: '002',\n time: 1925,\n title: {name: 'the great gatsby'},\n}, {\n id: '003',\n time: 1719,\n title: {name: 'The adventures of Robinson Crusoe'},\n}];\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n dataSource: result,\n id:''\n };\n this.onclick = this.onclick.bind(this);\n this.render = this.render.bind(this);\n }\n onclick(v) {\n let k;\n for (let i = 0; i < result.length; i++) {\n if (v === result[i].id) {\n k = i;\n break;\n }\n }\n result.splice(k, 1);\n }\n getRow(item) {\n this.setState({ id: item.id });\n }\n render() {\n return (
    \n \n \n \n \n this.onclick(this.state.id)}>Remove}/>\n
    \n
    );\n }\n}\nReactDOM.render(, mountNode);\n````","html":"
    import { Table } from '@alifd/next';\n\nconst result = [{\n    id: '001',\n    time: 1951,\n    title: {name: 'The Old Man and the Sea'},\n}, {\n    id: '002',\n    time: 1925,\n    title: {name: 'the great gatsby'},\n}, {\n    id: '003',\n    time: 1719,\n    title: {name: 'The adventures of Robinson Crusoe'},\n}];\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            dataSource: result,\n            id:''\n        };\n        this.onclick = this.onclick.bind(this);\n        this.render = this.render.bind(this);\n    }\n    onclick(v) {\n        let k;\n        for (let i = 0; i < result.length; i++) {\n            if (v === result[i].id) {\n                k = i;\n                break;\n            }\n        }\n        result.splice(k, 1);\n    }\n    getRow(item) {\n        this.setState({ id: item.id });\n    }\n    render() {\n        return (<div>\n            <Table dataSource={this.state.dataSource}  onRowClick={this.getRow.bind(this)}>\n                <Table.Column title=\"Id\" dataIndex=\"id\"/>\n                <Table.Column title=\"Title\" dataIndex=\"title.name\" />\n                <Table.Column title=\"Time\" dataIndex=\"time\"/>\n                <Table.Column title=\"operate\" cell={<a href=\"javascript:;\" onClick={() => this.onclick(this.state.id)}>Remove</a>}/>\n            </Table>\n        </div>);\n    }\n}\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/accessibility.md b/compiled_docs/table/demo/accessibility.md new file mode 100644 index 0000000000..b04cfe66df --- /dev/null +++ b/compiled_docs/table/demo/accessibility.md @@ -0,0 +1 @@ +{"title":"无障碍","meta":{"title":"无障碍","description":"\n

    通过键盘方向键浏览表格。

    \n","order":"23"},"codes":{"jsx":"import { Table } from '@alifd/next';\n\nconst result = [{\n id: '001',\n time: 1951,\n title: {name: 'The Old Man and the Sea'},\n}, {\n id: '002',\n time: 1925,\n title: {name: 'the great gatsby'},\n}, {\n id: '003',\n time: 1719,\n title: {name: 'The adventures of Robinson Crusoe'},\n}];\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n dataSource: result,\n id:''\n };\n this.onclick = this.onclick.bind(this);\n this.render = this.render.bind(this);\n }\n onclick(v) {\n let k;\n for (let i = 0; i < result.length; i++) {\n if (v === result[i].id) {\n k = i;\n break;\n }\n }\n result.splice(k, 1);\n }\n getRow(item) {\n this.setState({ id: item.id });\n }\n render() {\n return (
    \n \n \n \n \n this.onclick(this.state.id)}>Remove}/>\n
    \n
    );\n }\n}\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Table } from '@alifd/next';\n\nconst result = [{\n id: '001',\n time: 1951,\n title: {name: 'The Old Man and the Sea'},\n}, {\n id: '002',\n time: 1925,\n title: {name: 'the great gatsby'},\n}, {\n id: '003',\n time: 1719,\n title: {name: 'The adventures of Robinson Crusoe'},\n}];\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n dataSource: result,\n id:''\n };\n this.onclick = this.onclick.bind(this);\n this.render = this.render.bind(this);\n }\n onclick(v) {\n let k;\n for (let i = 0; i < result.length; i++) {\n if (v === result[i].id) {\n k = i;\n break;\n }\n }\n result.splice(k, 1);\n }\n getRow(item) {\n this.setState({ id: item.id });\n }\n render() {\n return (
    \n \n \n \n \n this.onclick(this.state.id)}>Remove}/>\n
    \n
    );\n }\n}\nReactDOM.render(, mountNode);\n````","html":"
    import { Table } from '@alifd/next';\n\nconst result = [{\n    id: '001',\n    time: 1951,\n    title: {name: 'The Old Man and the Sea'},\n}, {\n    id: '002',\n    time: 1925,\n    title: {name: 'the great gatsby'},\n}, {\n    id: '003',\n    time: 1719,\n    title: {name: 'The adventures of Robinson Crusoe'},\n}];\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            dataSource: result,\n            id:''\n        };\n        this.onclick = this.onclick.bind(this);\n        this.render = this.render.bind(this);\n    }\n    onclick(v) {\n        let k;\n        for (let i = 0; i < result.length; i++) {\n            if (v === result[i].id) {\n                k = i;\n                break;\n            }\n        }\n        result.splice(k, 1);\n    }\n    getRow(item) {\n        this.setState({ id: item.id });\n    }\n    render() {\n        return (<div>\n            <Table dataSource={this.state.dataSource}  onRowClick={this.getRow.bind(this)}>\n                <Table.Column title=\"Id\" dataIndex=\"id\"/>\n                <Table.Column title=\"Title\" dataIndex=\"title.name\" />\n                <Table.Column title=\"Time\" dataIndex=\"time\"/>\n                <Table.Column title=\"operate\" cell={<a href=\"javascript:;\" onClick={() => this.onclick(this.state.id)}>Remove</a>}/>\n            </Table>\n        </div>);\n    }\n}\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/advanced.en-us.md b/compiled_docs/table/demo/advanced.en-us.md new file mode 100644 index 0000000000..a1cc52e93e --- /dev/null +++ b/compiled_docs/table/demo/advanced.en-us.md @@ -0,0 +1 @@ +{"title":"Extended","meta":{"title":"Extended","description":"\n

    You can extend Table through subcomponents exposed by Table.

    \n","order":"17"},"codes":{"jsx":"import { Table } from '@alifd/next';\nimport PropTypes from 'prop-types';\n/* eslint-disable react/no-multi-comp,react/prop-types */\nconst {Header, Cell} = Table;\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n};\n\nconst AppHeader = (props, context) => {\n const {columns} = props;\n const {onChange} = context;\n const length = columns[columns.length - 1].length;\n return (
    \n \n \n onChange(true)} href=\"javascript:;\">Select all \n onChange(false)} href=\"javascript:;\">Unselect all\n \n \n
    );\n};\n\nAppHeader.contextTypes = {\n onChange: PropTypes.func\n};\n\nclass App extends React.Component {\n static childContextTypes = {\n onChange: PropTypes.func\n }\n state = {\n selectedKeys: []\n }\n getChildContext() {\n return {\n onChange: this.onChange\n };\n }\n dataSource = dataSource()\n onChange = (checked) => {\n let selectedKeys = [];\n if (checked) {\n selectedKeys = this.dataSource.map(item => item.id);\n }\n this.onRowChange(selectedKeys);\n }\n onRowChange = (selectedKeys) => {\n this.setState({\n selectedKeys\n });\n }\n render() {\n return (\n \n \n \n \n
    \n     );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Table } from '@alifd/next';\nimport PropTypes from 'prop-types';\n/* eslint-disable react/no-multi-comp,react/prop-types */\nconst {Header, Cell} = Table;\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n};\n\nconst AppHeader = (props, context) => {\n const {columns} = props;\n const {onChange} = context;\n const length = columns[columns.length - 1].length;\n return (
    \n \n \n onChange(true)} href=\"javascript:;\">Select all \n onChange(false)} href=\"javascript:;\">Unselect all\n \n \n
    );\n};\n\nAppHeader.contextTypes = {\n onChange: PropTypes.func\n};\n\nclass App extends React.Component {\n static childContextTypes = {\n onChange: PropTypes.func\n }\n state = {\n selectedKeys: []\n }\n getChildContext() {\n return {\n onChange: this.onChange\n };\n }\n dataSource = dataSource()\n onChange = (checked) => {\n let selectedKeys = [];\n if (checked) {\n selectedKeys = this.dataSource.map(item => item.id);\n }\n this.onRowChange(selectedKeys);\n }\n onRowChange = (selectedKeys) => {\n this.setState({\n selectedKeys\n });\n }\n render() {\n return (\n \n \n \n \n
    \n     );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Table } from '@alifd/next';\nimport PropTypes from 'prop-types';\n/* eslint-disable react/no-multi-comp,react/prop-types */\nconst {Header, Cell} = Table;\nconst dataSource = () => {\n    const result = [];\n    for (let i = 0; i < 5; i++) {\n        result.push({\n            title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n            id: 100306660940 + i,\n            time: 2000 + i\n        });\n    }\n    return result;\n};\n\nconst AppHeader = (props, context) => {\n    const {columns} = props;\n    const {onChange} = context;\n    const length = columns[columns.length - 1].length;\n    return (<Header {...props}>\n        <tr>\n            <Cell colSpan={length}>\n                <a onClick={() => onChange(true)} href=\"javascript:;\">Select all</a>&nbsp;\n                <a onClick={() => onChange(false)} href=\"javascript:;\">Unselect all</a>\n            </Cell>\n        </tr>\n    </Header>);\n};\n\nAppHeader.contextTypes = {\n    onChange: PropTypes.func\n};\n\nclass App extends React.Component {\n    static childContextTypes = {\n        onChange: PropTypes.func\n    }\n    state = {\n        selectedKeys: []\n    }\n    getChildContext() {\n        return {\n            onChange: this.onChange\n        };\n    }\n    dataSource = dataSource()\n    onChange = (checked) => {\n        let selectedKeys = [];\n        if (checked) {\n            selectedKeys = this.dataSource.map(item => item.id);\n        }\n        this.onRowChange(selectedKeys);\n    }\n    onRowChange = (selectedKeys) => {\n        this.setState({\n            selectedKeys\n        });\n    }\n    render() {\n        return (<span>\n            <Table dataSource={this.dataSource}\n                components={{\n                    Header: AppHeader\n                }}\n                rowSelection={{\n                    selectedRowKeys: this.state.selectedKeys,\n                    onChange: this.onRowChange\n                }}>\n                <Table.Column title=\"Id\" dataIndex=\"id\" />\n                <Table.Column title=\"Title\" dataIndex=\"title\"/>\n                <Table.Column title=\"Time\" dataIndex=\"time\"/>\n            </Table>\n        </span>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/advanced.md b/compiled_docs/table/demo/advanced.md new file mode 100644 index 0000000000..c113b22e59 --- /dev/null +++ b/compiled_docs/table/demo/advanced.md @@ -0,0 +1 @@ +{"title":"扩展","meta":{"title":"扩展","description":"\n

    通过Table暴露的子组件进行扩展

    \n","order":"17"},"codes":{"jsx":"import { Table } from '@alifd/next';\nimport PropTypes from 'prop-types';\n/* eslint-disable react/no-multi-comp,react/prop-types */\nconst {Header, Cell} = Table;\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n};\n\nconst AppHeader = (props, context) => {\n const {columns} = props;\n const {onChange} = context;\n const length = columns[columns.length - 1].length;\n return (
    \n \n \n onChange(true)} href=\"javascript:;\">Select all \n onChange(false)} href=\"javascript:;\">Unselect all\n \n \n
    );\n};\n\nAppHeader.contextTypes = {\n onChange: PropTypes.func\n};\n\nclass App extends React.Component {\n static childContextTypes = {\n onChange: PropTypes.func\n }\n state = {\n selectedKeys: []\n }\n getChildContext() {\n return {\n onChange: this.onChange\n };\n }\n dataSource = dataSource()\n onChange = (checked) => {\n let selectedKeys = [];\n if (checked) {\n selectedKeys = this.dataSource.map(item => item.id);\n }\n this.onRowChange(selectedKeys);\n }\n onRowChange = (selectedKeys) => {\n this.setState({\n selectedKeys\n });\n }\n render() {\n return (\n \n \n \n \n
    \n     );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Table } from '@alifd/next';\nimport PropTypes from 'prop-types';\n/* eslint-disable react/no-multi-comp,react/prop-types */\nconst {Header, Cell} = Table;\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n};\n\nconst AppHeader = (props, context) => {\n const {columns} = props;\n const {onChange} = context;\n const length = columns[columns.length - 1].length;\n return (
    \n \n \n onChange(true)} href=\"javascript:;\">Select all \n onChange(false)} href=\"javascript:;\">Unselect all\n \n \n
    );\n};\n\nAppHeader.contextTypes = {\n onChange: PropTypes.func\n};\n\nclass App extends React.Component {\n static childContextTypes = {\n onChange: PropTypes.func\n }\n state = {\n selectedKeys: []\n }\n getChildContext() {\n return {\n onChange: this.onChange\n };\n }\n dataSource = dataSource()\n onChange = (checked) => {\n let selectedKeys = [];\n if (checked) {\n selectedKeys = this.dataSource.map(item => item.id);\n }\n this.onRowChange(selectedKeys);\n }\n onRowChange = (selectedKeys) => {\n this.setState({\n selectedKeys\n });\n }\n render() {\n return (\n \n \n \n \n
    \n     );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Table } from '@alifd/next';\nimport PropTypes from 'prop-types';\n/* eslint-disable react/no-multi-comp,react/prop-types */\nconst {Header, Cell} = Table;\nconst dataSource = () => {\n    const result = [];\n    for (let i = 0; i < 5; i++) {\n        result.push({\n            title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n            id: 100306660940 + i,\n            time: 2000 + i\n        });\n    }\n    return result;\n};\n\nconst AppHeader = (props, context) => {\n    const {columns} = props;\n    const {onChange} = context;\n    const length = columns[columns.length - 1].length;\n    return (<Header {...props}>\n        <tr>\n            <Cell colSpan={length}>\n                <a onClick={() => onChange(true)} href=\"javascript:;\">Select all</a>&nbsp;\n                <a onClick={() => onChange(false)} href=\"javascript:;\">Unselect all</a>\n            </Cell>\n        </tr>\n    </Header>);\n};\n\nAppHeader.contextTypes = {\n    onChange: PropTypes.func\n};\n\nclass App extends React.Component {\n    static childContextTypes = {\n        onChange: PropTypes.func\n    }\n    state = {\n        selectedKeys: []\n    }\n    getChildContext() {\n        return {\n            onChange: this.onChange\n        };\n    }\n    dataSource = dataSource()\n    onChange = (checked) => {\n        let selectedKeys = [];\n        if (checked) {\n            selectedKeys = this.dataSource.map(item => item.id);\n        }\n        this.onRowChange(selectedKeys);\n    }\n    onRowChange = (selectedKeys) => {\n        this.setState({\n            selectedKeys\n        });\n    }\n    render() {\n        return (<span>\n            <Table dataSource={this.dataSource}\n                components={{\n                    Header: AppHeader\n                }}\n                rowSelection={{\n                    selectedRowKeys: this.state.selectedKeys,\n                    onChange: this.onRowChange\n                }}>\n                <Table.Column title=\"Id\" dataIndex=\"id\" />\n                <Table.Column title=\"Title\" dataIndex=\"title\"/>\n                <Table.Column title=\"Time\" dataIndex=\"time\"/>\n            </Table>\n        </span>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/basic.en-us.md b/compiled_docs/table/demo/basic.en-us.md new file mode 100644 index 0000000000..6327119290 --- /dev/null +++ b/compiled_docs/table/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Simple","meta":{"title":"Simple","description":"\n

    Simple table usage.

    \n","order":"0"},"codes":{"jsx":"import { Table } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n};\nconst render = (value, index, record) => {\n return Remove({record.id});\n};\nReactDOM.render(\n \n \n \n \n
    , mountNode);\n"},"body":"\n````jsx\nimport { Table } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n};\nconst render = (value, index, record) => {\n return Remove({record.id});\n};\nReactDOM.render(\n \n \n \n \n
    , mountNode);\n````","html":"
    import { Table } from '@alifd/next';\n\nconst dataSource = () => {\n    const result = [];\n    for (let i = 0; i < 5; i++) {\n        result.push({\n            title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n            id: 100306660940 + i,\n            time: 2000 + i\n        });\n    }\n    return result;\n};\nconst render = (value, index, record) => {\n    return <a href=\"javascript:;\">Remove({record.id})</a>;\n};\nReactDOM.render(<Table dataSource={dataSource()}>\n    <Table.Column title=\"Id\" dataIndex=\"id\"/>\n    <Table.Column title=\"Title\" dataIndex=\"title.name\" />\n    <Table.Column title=\"Time\" dataIndex=\"time\"/>\n    <Table.Column cell={render}/>\n</Table>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/basic.md b/compiled_docs/table/demo/basic.md new file mode 100644 index 0000000000..1ad943b27e --- /dev/null +++ b/compiled_docs/table/demo/basic.md @@ -0,0 +1 @@ +{"title":"简单","meta":{"title":"简单","description":"\n

    简单的表格渲染

    \n","order":"0"},"codes":{"jsx":"import { Table } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n};\nconst render = (value, index, record) => {\n return Remove({record.id});\n};\nReactDOM.render(\n \n \n \n \n
    , mountNode);\n"},"body":"\n\n````jsx\nimport { Table } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n};\nconst render = (value, index, record) => {\n return Remove({record.id});\n};\nReactDOM.render(\n \n \n \n \n
    , mountNode);\n````","html":"
    import { Table } from '@alifd/next';\n\nconst dataSource = () => {\n    const result = [];\n    for (let i = 0; i < 5; i++) {\n        result.push({\n            title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n            id: 100306660940 + i,\n            time: 2000 + i\n        });\n    }\n    return result;\n};\nconst render = (value, index, record) => {\n    return <a href=\"javascript:;\">Remove({record.id})</a>;\n};\nReactDOM.render(<Table dataSource={dataSource()}>\n    <Table.Column title=\"Id\" dataIndex=\"id\"/>\n    <Table.Column title=\"Title\" dataIndex=\"title.name\" />\n    <Table.Column title=\"Time\" dataIndex=\"time\"/>\n    <Table.Column cell={render}/>\n</Table>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/clear-selection.en-us.md b/compiled_docs/table/demo/clear-selection.en-us.md new file mode 100644 index 0000000000..8170646ec2 --- /dev/null +++ b/compiled_docs/table/demo/clear-selection.en-us.md @@ -0,0 +1 @@ +{"title":"Selection under control","meta":{"title":"Selection under control","description":"\n

    Demo all selection and single selection under control.

    \n","order":"2"},"codes":{"jsx":"import { Table, Button } from '@alifd/next';\n\nconst dataSource = (i, j) => {\n const result = [];\n for (let a = i; a < j; a++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + a,\n time: 2000 + a\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n rowSelection: {\n onChange: this.onChange.bind(this),\n onSelect: function(selected, record, records) {\n console.log('onSelect', selected, record, records);\n },\n onSelectAll: function(selected, records) {\n console.log('onSelectAll', selected, records);\n },\n selectedRowKeys: [100306660940, 100306660941],\n getProps: (record) => {\n return {\n disabled: record.id === 100306660941\n };\n }\n },\n dataSource: dataSource(0, 5)\n };\n }\n onChange(ids, records) {\n const {rowSelection} = this.state;\n rowSelection.selectedRowKeys = ids;\n console.log('onChange', ids, records);\n this.setState({ rowSelection });\n }\n clear() {\n const {rowSelection} = this.state;\n rowSelection.selectedRowKeys = [];\n this.setState({ rowSelection });\n }\n toggleLoading() {\n this.setState({loading: !this.state.loading});\n }\n changeMode() {\n const {rowSelection} = this.state;\n const mode = rowSelection.mode;\n const selectedRowKeys = rowSelection.selectedRowKeys;\n rowSelection.mode = mode === 'single' ? 'multiple' : 'single';\n rowSelection.selectedRowKeys = selectedRowKeys.length === 1 ? selectedRowKeys : [];\n this.setState({ rowSelection });\n }\n modifyDataSource() {\n this.setState({\n dataSource: dataSource(9, 14)\n });\n }\n render () {\n return (\n
    \n

    \n  \n  \n  \n \n

    \n \n \n \n \n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Table, Button } from '@alifd/next';\n\nconst dataSource = (i, j) => {\n const result = [];\n for (let a = i; a < j; a++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + a,\n time: 2000 + a\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n rowSelection: {\n onChange: this.onChange.bind(this),\n onSelect: function(selected, record, records) {\n console.log('onSelect', selected, record, records);\n },\n onSelectAll: function(selected, records) {\n console.log('onSelectAll', selected, records);\n },\n selectedRowKeys: [100306660940, 100306660941],\n getProps: (record) => {\n return {\n disabled: record.id === 100306660941\n };\n }\n },\n dataSource: dataSource(0, 5)\n };\n }\n onChange(ids, records) {\n const {rowSelection} = this.state;\n rowSelection.selectedRowKeys = ids;\n console.log('onChange', ids, records);\n this.setState({ rowSelection });\n }\n clear() {\n const {rowSelection} = this.state;\n rowSelection.selectedRowKeys = [];\n this.setState({ rowSelection });\n }\n toggleLoading() {\n this.setState({loading: !this.state.loading});\n }\n changeMode() {\n const {rowSelection} = this.state;\n const mode = rowSelection.mode;\n const selectedRowKeys = rowSelection.selectedRowKeys;\n rowSelection.mode = mode === 'single' ? 'multiple' : 'single';\n rowSelection.selectedRowKeys = selectedRowKeys.length === 1 ? selectedRowKeys : [];\n this.setState({ rowSelection });\n }\n modifyDataSource() {\n this.setState({\n dataSource: dataSource(9, 14)\n });\n }\n render () {\n return (\n
    \n

    \n  \n  \n  \n \n

    \n \n \n \n \n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Table, Button } from '@alifd/next';\n\nconst dataSource = (i, j) => {\n        const result = [];\n        for (let a = i; a < j; a++) {\n            result.push({\n                title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n                id: 100306660940 + a,\n                time: 2000 + a\n            });\n        }\n        return result;\n    },\n    render = (value, index, record) => {\n        return <a href=\"javascript:;\">Remove({record.id})</a>;\n    };\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            rowSelection: {\n                onChange: this.onChange.bind(this),\n                onSelect: function(selected, record, records) {\n                    console.log('onSelect', selected, record, records);\n                },\n                onSelectAll: function(selected, records) {\n                    console.log('onSelectAll', selected, records);\n                },\n                selectedRowKeys: [100306660940, 100306660941],\n                getProps: (record) => {\n                    return {\n                        disabled: record.id === 100306660941\n                    };\n                }\n            },\n            dataSource: dataSource(0, 5)\n        };\n    }\n    onChange(ids, records) {\n        const {rowSelection} = this.state;\n        rowSelection.selectedRowKeys = ids;\n        console.log('onChange', ids, records);\n        this.setState({ rowSelection });\n    }\n    clear() {\n        const {rowSelection} = this.state;\n        rowSelection.selectedRowKeys = [];\n        this.setState({ rowSelection });\n    }\n    toggleLoading() {\n        this.setState({loading: !this.state.loading});\n    }\n    changeMode() {\n        const {rowSelection} = this.state;\n        const mode = rowSelection.mode;\n        const selectedRowKeys = rowSelection.selectedRowKeys;\n        rowSelection.mode = mode === 'single' ? 'multiple' : 'single';\n        rowSelection.selectedRowKeys = selectedRowKeys.length === 1 ? selectedRowKeys : [];\n        this.setState({ rowSelection });\n    }\n    modifyDataSource() {\n        this.setState({\n            dataSource: dataSource(9, 14)\n        });\n    }\n    render () {\n        return (\n            <div>\n                <p>\n                    <Button onClick={this.clear.bind(this)}>Clear Selection</Button>&nbsp;\n                    <Button onClick={this.changeMode.bind(this)}>Change mode</Button>&nbsp;\n                    <Button onClick={this.toggleLoading.bind(this)}>Toggle loading</Button>&nbsp;\n                    <Button onClick={this.modifyDataSource.bind(this)}>Modify dataSource</Button>\n                </p>\n                <Table dataSource={this.state.dataSource}\n                    loading={this.state.loading}\n                    rowSelection={this.state.rowSelection}>\n                    <Table.Column title=\"Id\" dataIndex=\"id\"/>\n                    <Table.Column title=\"Title\" dataIndex=\"title.name\" />\n                    <Table.Column title=\"Time\" dataIndex=\"time\"/>\n                    <Table.Column cell={render} width={200}/>\n                </Table>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/clear-selection.md b/compiled_docs/table/demo/clear-selection.md new file mode 100644 index 0000000000..8f8683c903 --- /dev/null +++ b/compiled_docs/table/demo/clear-selection.md @@ -0,0 +1 @@ +{"title":"选择可控","meta":{"title":"选择可控","description":"\n

    演示全选和单选受控的功能

    \n","order":"2"},"codes":{"jsx":"import { Table, Button } from '@alifd/next';\n\nconst dataSource = (i, j) => {\n const result = [];\n for (let a = i; a < j; a++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + a,\n time: 2000 + a\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n rowSelection: {\n onChange: this.onChange.bind(this),\n onSelect: function(selected, record, records) {\n console.log('onSelect', selected, record, records);\n },\n onSelectAll: function(selected, records) {\n console.log('onSelectAll', selected, records);\n },\n selectedRowKeys: [100306660940, 100306660941],\n getProps: (record) => {\n return {\n disabled: record.id === 100306660941\n };\n }\n },\n dataSource: dataSource(0, 5)\n };\n }\n onChange(ids, records) {\n const {rowSelection} = this.state;\n rowSelection.selectedRowKeys = ids;\n console.log('onChange', ids, records);\n this.setState({ rowSelection });\n }\n clear() {\n const {rowSelection} = this.state;\n rowSelection.selectedRowKeys = [];\n this.setState({ rowSelection });\n }\n toggleLoading() {\n this.setState({loading: !this.state.loading});\n }\n changeMode() {\n const {rowSelection} = this.state;\n const mode = rowSelection.mode;\n const selectedRowKeys = rowSelection.selectedRowKeys;\n rowSelection.mode = mode === 'single' ? 'multiple' : 'single';\n rowSelection.selectedRowKeys = selectedRowKeys.length === 1 ? selectedRowKeys : [];\n this.setState({ rowSelection });\n }\n modifyDataSource() {\n this.setState({\n dataSource: dataSource(9, 14)\n });\n }\n render () {\n return (\n
    \n

    \n  \n  \n  \n \n

    \n \n \n \n \n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Table, Button } from '@alifd/next';\n\nconst dataSource = (i, j) => {\n const result = [];\n for (let a = i; a < j; a++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + a,\n time: 2000 + a\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n rowSelection: {\n onChange: this.onChange.bind(this),\n onSelect: function(selected, record, records) {\n console.log('onSelect', selected, record, records);\n },\n onSelectAll: function(selected, records) {\n console.log('onSelectAll', selected, records);\n },\n selectedRowKeys: [100306660940, 100306660941],\n getProps: (record) => {\n return {\n disabled: record.id === 100306660941\n };\n }\n },\n dataSource: dataSource(0, 5)\n };\n }\n onChange(ids, records) {\n const {rowSelection} = this.state;\n rowSelection.selectedRowKeys = ids;\n console.log('onChange', ids, records);\n this.setState({ rowSelection });\n }\n clear() {\n const {rowSelection} = this.state;\n rowSelection.selectedRowKeys = [];\n this.setState({ rowSelection });\n }\n toggleLoading() {\n this.setState({loading: !this.state.loading});\n }\n changeMode() {\n const {rowSelection} = this.state;\n const mode = rowSelection.mode;\n const selectedRowKeys = rowSelection.selectedRowKeys;\n rowSelection.mode = mode === 'single' ? 'multiple' : 'single';\n rowSelection.selectedRowKeys = selectedRowKeys.length === 1 ? selectedRowKeys : [];\n this.setState({ rowSelection });\n }\n modifyDataSource() {\n this.setState({\n dataSource: dataSource(9, 14)\n });\n }\n render () {\n return (\n
    \n

    \n  \n  \n  \n \n

    \n \n \n \n \n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Table, Button } from '@alifd/next';\n\nconst dataSource = (i, j) => {\n        const result = [];\n        for (let a = i; a < j; a++) {\n            result.push({\n                title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n                id: 100306660940 + a,\n                time: 2000 + a\n            });\n        }\n        return result;\n    },\n    render = (value, index, record) => {\n        return <a href=\"javascript:;\">Remove({record.id})</a>;\n    };\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            rowSelection: {\n                onChange: this.onChange.bind(this),\n                onSelect: function(selected, record, records) {\n                    console.log('onSelect', selected, record, records);\n                },\n                onSelectAll: function(selected, records) {\n                    console.log('onSelectAll', selected, records);\n                },\n                selectedRowKeys: [100306660940, 100306660941],\n                getProps: (record) => {\n                    return {\n                        disabled: record.id === 100306660941\n                    };\n                }\n            },\n            dataSource: dataSource(0, 5)\n        };\n    }\n    onChange(ids, records) {\n        const {rowSelection} = this.state;\n        rowSelection.selectedRowKeys = ids;\n        console.log('onChange', ids, records);\n        this.setState({ rowSelection });\n    }\n    clear() {\n        const {rowSelection} = this.state;\n        rowSelection.selectedRowKeys = [];\n        this.setState({ rowSelection });\n    }\n    toggleLoading() {\n        this.setState({loading: !this.state.loading});\n    }\n    changeMode() {\n        const {rowSelection} = this.state;\n        const mode = rowSelection.mode;\n        const selectedRowKeys = rowSelection.selectedRowKeys;\n        rowSelection.mode = mode === 'single' ? 'multiple' : 'single';\n        rowSelection.selectedRowKeys = selectedRowKeys.length === 1 ? selectedRowKeys : [];\n        this.setState({ rowSelection });\n    }\n    modifyDataSource() {\n        this.setState({\n            dataSource: dataSource(9, 14)\n        });\n    }\n    render () {\n        return (\n            <div>\n                <p>\n                    <Button onClick={this.clear.bind(this)}>Clear Selection</Button>&nbsp;\n                    <Button onClick={this.changeMode.bind(this)}>Change mode</Button>&nbsp;\n                    <Button onClick={this.toggleLoading.bind(this)}>Toggle loading</Button>&nbsp;\n                    <Button onClick={this.modifyDataSource.bind(this)}>Modify dataSource</Button>\n                </p>\n                <Table dataSource={this.state.dataSource}\n                    loading={this.state.loading}\n                    rowSelection={this.state.rowSelection}>\n                    <Table.Column title=\"Id\" dataIndex=\"id\"/>\n                    <Table.Column title=\"Title\" dataIndex=\"title.name\" />\n                    <Table.Column title=\"Time\" dataIndex=\"time\"/>\n                    <Table.Column cell={render} width={200}/>\n                </Table>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/colspan.en-us.md b/compiled_docs/table/demo/colspan.en-us.md new file mode 100644 index 0000000000..974883e782 --- /dev/null +++ b/compiled_docs/table/demo/colspan.en-us.md @@ -0,0 +1 @@ +{"title":"Consolidation","meta":{"title":"Consolidation","description":"\n

    Merging column through getCellProps.

    \n","order":"7"},"codes":{"jsx":"import { Table } from '@alifd/next';\n\nconst onRowClick = function (record, index, e) {\n console.log(record, index, e);\n },\n dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n },\n getCellProps = (rowIndex, colIndex) => {\n if (rowIndex === 2 && colIndex === 1) {\n return {\n colSpan: 2,\n rowSpan: 3\n };\n }\n if (rowIndex === 1 && colIndex === 2) {\n return {\n colSpan: 2,\n rowSpan: 1\n };\n }\n };\n\nReactDOM.render(\n \n \n \n \n
    , mountNode);\n"},"body":"\n````jsx\nimport { Table } from '@alifd/next';\n\nconst onRowClick = function (record, index, e) {\n console.log(record, index, e);\n },\n dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n },\n getCellProps = (rowIndex, colIndex) => {\n if (rowIndex === 2 && colIndex === 1) {\n return {\n colSpan: 2,\n rowSpan: 3\n };\n }\n if (rowIndex === 1 && colIndex === 2) {\n return {\n colSpan: 2,\n rowSpan: 1\n };\n }\n };\n\nReactDOM.render(\n \n \n \n \n
    , mountNode);\n````","html":"
    import { Table } from '@alifd/next';\n\nconst onRowClick = function (record, index, e) {\n        console.log(record, index, e);\n    },\n    dataSource = () => {\n        const result = [];\n        for (let i = 0; i < 5; i++) {\n            result.push({\n                title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n                id: 100306660940 + i,\n                time: 2000 + i\n            });\n        }\n        return result;\n    },\n    render = (value, index, record) => {\n        return <a>Remove({record.id})</a>;\n    },\n    getCellProps = (rowIndex, colIndex) => {\n        if (rowIndex === 2 && colIndex === 1) {\n            return {\n                colSpan: 2,\n                rowSpan: 3\n            };\n        }\n        if (rowIndex === 1 && colIndex === 2) {\n            return {\n                colSpan: 2,\n                rowSpan: 1\n            };\n        }\n    };\n\nReactDOM.render(<Table dataSource={dataSource()} onRowClick={onRowClick} getCellProps={getCellProps}>\n    <Table.Column title=\"Id\" dataIndex=\"id\"/>\n    <Table.Column title=\"Title\" dataIndex=\"title.name\" />\n    <Table.Column title=\"Time\" dataIndex=\"time\"/>\n    <Table.Column cell={render} width={200}/>\n</Table>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/colspan.md b/compiled_docs/table/demo/colspan.md new file mode 100644 index 0000000000..e5dbd7e5b2 --- /dev/null +++ b/compiled_docs/table/demo/colspan.md @@ -0,0 +1 @@ +{"title":"行列合并","meta":{"title":"行列合并","description":"\n

    通过getCellProps进行列合并。

    \n","order":"7"},"codes":{"jsx":"import { Table } from '@alifd/next';\n\nconst onRowClick = function (record, index, e) {\n console.log(record, index, e);\n },\n dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n },\n getCellProps = (rowIndex, colIndex) => {\n if (rowIndex === 2 && colIndex === 1) {\n return {\n colSpan: 2,\n rowSpan: 3\n };\n }\n if (rowIndex === 1 && colIndex === 2) {\n return {\n colSpan: 2,\n rowSpan: 1\n };\n }\n };\n\nReactDOM.render(\n \n \n \n \n
    , mountNode);\n"},"body":"\n\n````jsx\nimport { Table } from '@alifd/next';\n\nconst onRowClick = function (record, index, e) {\n console.log(record, index, e);\n },\n dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n },\n getCellProps = (rowIndex, colIndex) => {\n if (rowIndex === 2 && colIndex === 1) {\n return {\n colSpan: 2,\n rowSpan: 3\n };\n }\n if (rowIndex === 1 && colIndex === 2) {\n return {\n colSpan: 2,\n rowSpan: 1\n };\n }\n };\n\nReactDOM.render(\n \n \n \n \n
    , mountNode);\n````","html":"
    import { Table } from '@alifd/next';\n\nconst onRowClick = function (record, index, e) {\n        console.log(record, index, e);\n    },\n    dataSource = () => {\n        const result = [];\n        for (let i = 0; i < 5; i++) {\n            result.push({\n                title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n                id: 100306660940 + i,\n                time: 2000 + i\n            });\n        }\n        return result;\n    },\n    render = (value, index, record) => {\n        return <a>Remove({record.id})</a>;\n    },\n    getCellProps = (rowIndex, colIndex) => {\n        if (rowIndex === 2 && colIndex === 1) {\n            return {\n                colSpan: 2,\n                rowSpan: 3\n            };\n        }\n        if (rowIndex === 1 && colIndex === 2) {\n            return {\n                colSpan: 2,\n                rowSpan: 1\n            };\n        }\n    };\n\nReactDOM.render(<Table dataSource={dataSource()} onRowClick={onRowClick} getCellProps={getCellProps}>\n    <Table.Column title=\"Id\" dataIndex=\"id\"/>\n    <Table.Column title=\"Title\" dataIndex=\"title.name\" />\n    <Table.Column title=\"Time\" dataIndex=\"time\"/>\n    <Table.Column cell={render} width={200}/>\n</Table>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/column.en-us.md b/compiled_docs/table/demo/column.en-us.md new file mode 100644 index 0000000000..5669c66d03 --- /dev/null +++ b/compiled_docs/table/demo/column.en-us.md @@ -0,0 +1 @@ +{"title":"Customize columns","meta":{"title":"Customize columns","description":"\n

    Customized number of table columns.

    \n","order":"15"},"codes":{"jsx":"import { Table, Button, Dialog, Checkbox } from '@alifd/next';\n\nconst {Group} = Checkbox;\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n cols = [{\n title: 'id',\n dataIndex: 'id'\n }, {\n title: 'Title',\n dataIndex: 'title'\n }, {\n title: 'Time',\n dataIndex: 'time'\n }];\n\nclass App extends React.Component {\n constructor (props) {\n super(props);\n this.state = {\n dataSource: dataSource(),\n cols: cols\n };\n }\n openDialog = () => {\n Dialog.alert({\n content: this.renderControlContent(),\n title: 'Select columns',\n onOk: () => {\n this.setState({\n cols: this.changedCols || this.state.cols\n });\n return true;\n }\n });\n }\n\n renderControlContent() {\n const groupSource = cols.map(col => {\n return {\n label: col.title,\n value: col.dataIndex\n };\n }), defaultValue = this.state.cols.map(col => col.dataIndex);\n return ;\n }\n\n onChange = (value) => {\n this.changedCols = cols.filter(col => value.indexOf(col.dataIndex) > -1);\n }\n\n renderCols() {\n const {cols} = this.state;\n return cols.map(col => {\n return ;\n });\n }\n\n render() {\n return (\n
    \n

    \n \n {this.renderCols()}\n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Table, Button, Dialog, Checkbox } from '@alifd/next';\n\nconst {Group} = Checkbox;\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n cols = [{\n title: 'id',\n dataIndex: 'id'\n }, {\n title: 'Title',\n dataIndex: 'title'\n }, {\n title: 'Time',\n dataIndex: 'time'\n }];\n\nclass App extends React.Component {\n constructor (props) {\n super(props);\n this.state = {\n dataSource: dataSource(),\n cols: cols\n };\n }\n openDialog = () => {\n Dialog.alert({\n content: this.renderControlContent(),\n title: 'Select columns',\n onOk: () => {\n this.setState({\n cols: this.changedCols || this.state.cols\n });\n return true;\n }\n });\n }\n\n renderControlContent() {\n const groupSource = cols.map(col => {\n return {\n label: col.title,\n value: col.dataIndex\n };\n }), defaultValue = this.state.cols.map(col => col.dataIndex);\n return ;\n }\n\n onChange = (value) => {\n this.changedCols = cols.filter(col => value.indexOf(col.dataIndex) > -1);\n }\n\n renderCols() {\n const {cols} = this.state;\n return cols.map(col => {\n return ;\n });\n }\n\n render() {\n return (\n
    \n

    \n \n {this.renderCols()}\n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Table, Button, Dialog, Checkbox } from '@alifd/next';\n\nconst {Group} = Checkbox;\nconst dataSource = () => {\n        const result = [];\n        for (let i = 0; i < 5; i++) {\n            result.push({\n                title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n                id: 100306660940 + i,\n                time: 2000 + i\n            });\n        }\n        return result;\n    },\n    cols = [{\n        title: 'id',\n        dataIndex: 'id'\n    }, {\n        title: 'Title',\n        dataIndex: 'title'\n    }, {\n        title: 'Time',\n        dataIndex: 'time'\n    }];\n\nclass App extends React.Component {\n    constructor (props) {\n        super(props);\n        this.state = {\n            dataSource: dataSource(),\n            cols: cols\n        };\n    }\n    openDialog = () => {\n        Dialog.alert({\n            content: this.renderControlContent(),\n            title: 'Select columns',\n            onOk: () => {\n                this.setState({\n                    cols: this.changedCols || this.state.cols\n                });\n                return true;\n            }\n        });\n    }\n\n    renderControlContent() {\n        const groupSource = cols.map(col => {\n                return {\n                    label: col.title,\n                    value: col.dataIndex\n                };\n            }), defaultValue = this.state.cols.map(col => col.dataIndex);\n        return <Group dataSource={groupSource} onChange={this.onChange} defaultValue={defaultValue}/>;\n    }\n\n    onChange = (value) => {\n        this.changedCols = cols.filter(col => value.indexOf(col.dataIndex) > -1);\n    }\n\n    renderCols() {\n        const {cols} = this.state;\n        return cols.map(col => {\n            return <Table.Column title={col.title} dataIndex={col.dataIndex} key={col.dataIndex} />;\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <p><Button onClick={this.openDialog}> Select columns </Button></p>\n                <Table dataSource={this.state.dataSource}>\n                    {this.renderCols()}\n                </Table>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/column.md b/compiled_docs/table/demo/column.md new file mode 100644 index 0000000000..da197099cf --- /dev/null +++ b/compiled_docs/table/demo/column.md @@ -0,0 +1 @@ +{"title":"定制列","meta":{"title":"定制列","description":"\n

    定制显示的表格列数

    \n","order":"15"},"codes":{"jsx":"import { Table, Button, Dialog, Checkbox } from '@alifd/next';\n\nconst {Group} = Checkbox;\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n cols = [{\n title: 'id',\n dataIndex: 'id'\n }, {\n title: 'Title',\n dataIndex: 'title'\n }, {\n title: 'Time',\n dataIndex: 'time'\n }];\n\nclass App extends React.Component {\n constructor (props) {\n super(props);\n this.state = {\n dataSource: dataSource(),\n cols: cols\n };\n }\n openDialog = () => {\n Dialog.alert({\n content: this.renderControlContent(),\n title: 'Select columns',\n onOk: () => {\n this.setState({\n cols: this.changedCols || this.state.cols\n });\n return true;\n }\n });\n }\n\n renderControlContent() {\n const groupSource = cols.map(col => {\n return {\n label: col.title,\n value: col.dataIndex\n };\n }), defaultValue = this.state.cols.map(col => col.dataIndex);\n return ;\n }\n\n onChange = (value) => {\n this.changedCols = cols.filter(col => value.indexOf(col.dataIndex) > -1);\n }\n\n renderCols() {\n const {cols} = this.state;\n return cols.map(col => {\n return ;\n });\n }\n\n render() {\n return (\n
    \n

    \n \n {this.renderCols()}\n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Table, Button, Dialog, Checkbox } from '@alifd/next';\n\nconst {Group} = Checkbox;\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n cols = [{\n title: 'id',\n dataIndex: 'id'\n }, {\n title: 'Title',\n dataIndex: 'title'\n }, {\n title: 'Time',\n dataIndex: 'time'\n }];\n\nclass App extends React.Component {\n constructor (props) {\n super(props);\n this.state = {\n dataSource: dataSource(),\n cols: cols\n };\n }\n openDialog = () => {\n Dialog.alert({\n content: this.renderControlContent(),\n title: 'Select columns',\n onOk: () => {\n this.setState({\n cols: this.changedCols || this.state.cols\n });\n return true;\n }\n });\n }\n\n renderControlContent() {\n const groupSource = cols.map(col => {\n return {\n label: col.title,\n value: col.dataIndex\n };\n }), defaultValue = this.state.cols.map(col => col.dataIndex);\n return ;\n }\n\n onChange = (value) => {\n this.changedCols = cols.filter(col => value.indexOf(col.dataIndex) > -1);\n }\n\n renderCols() {\n const {cols} = this.state;\n return cols.map(col => {\n return ;\n });\n }\n\n render() {\n return (\n
    \n

    \n \n {this.renderCols()}\n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Table, Button, Dialog, Checkbox } from '@alifd/next';\n\nconst {Group} = Checkbox;\nconst dataSource = () => {\n        const result = [];\n        for (let i = 0; i < 5; i++) {\n            result.push({\n                title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n                id: 100306660940 + i,\n                time: 2000 + i\n            });\n        }\n        return result;\n    },\n    cols = [{\n        title: 'id',\n        dataIndex: 'id'\n    }, {\n        title: 'Title',\n        dataIndex: 'title'\n    }, {\n        title: 'Time',\n        dataIndex: 'time'\n    }];\n\nclass App extends React.Component {\n    constructor (props) {\n        super(props);\n        this.state = {\n            dataSource: dataSource(),\n            cols: cols\n        };\n    }\n    openDialog = () => {\n        Dialog.alert({\n            content: this.renderControlContent(),\n            title: 'Select columns',\n            onOk: () => {\n                this.setState({\n                    cols: this.changedCols || this.state.cols\n                });\n                return true;\n            }\n        });\n    }\n\n    renderControlContent() {\n        const groupSource = cols.map(col => {\n                return {\n                    label: col.title,\n                    value: col.dataIndex\n                };\n            }), defaultValue = this.state.cols.map(col => col.dataIndex);\n        return <Group dataSource={groupSource} onChange={this.onChange} defaultValue={defaultValue}/>;\n    }\n\n    onChange = (value) => {\n        this.changedCols = cols.filter(col => value.indexOf(col.dataIndex) > -1);\n    }\n\n    renderCols() {\n        const {cols} = this.state;\n        return cols.map(col => {\n            return <Table.Column title={col.title} dataIndex={col.dataIndex} key={col.dataIndex} />;\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <p><Button onClick={this.openDialog}> Select columns </Button></p>\n                <Table dataSource={this.state.dataSource}>\n                    {this.renderCols()}\n                </Table>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/crud.en-us.md b/compiled_docs/table/demo/crud.en-us.md new file mode 100644 index 0000000000..d7ef9626bf --- /dev/null +++ b/compiled_docs/table/demo/crud.en-us.md @@ -0,0 +1 @@ +{"title":"Add, delete and change","meta":{"title":"Add, delete and change","description":"\n

    Demo the addition, deletion and change of the table.

    \n","order":"8"},"codes":{"jsx":"import { Table, Button } from '@alifd/next';\n\nconst onRowClick = function(record, index, e) {\n console.log(record, index, e);\n },\n dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n };\n\nclass App extends React.Component {\n state = {\n dataSource: dataSource()\n }\n onAdd = () => {\n const {dataSource} = this.state;\n dataSource.push({\n title: {\n name: 'Quotation for 1PCS Nano controller compatible'\n },\n id: Date.now(),\n time: 2000\n });\n this.setState({\n dataSource\n });\n }\n\n onRemove = (id) => {\n const {dataSource} = this.state;\n let index = -1;\n dataSource.forEach((item, i) => {\n if (item.id === id) {\n index = i;\n }\n });\n if (index !== -1) {\n dataSource.splice(index, 1);\n this.setState({\n dataSource\n });\n }\n }\n\n render() {\n const renderOper = (value, index, record) => {\n return Remove({record.id});\n };\n return (
    \n

    \n \n \n \n \n \n
    \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Table, Button } from '@alifd/next';\n\nconst onRowClick = function(record, index, e) {\n console.log(record, index, e);\n },\n dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n };\n\nclass App extends React.Component {\n state = {\n dataSource: dataSource()\n }\n onAdd = () => {\n const {dataSource} = this.state;\n dataSource.push({\n title: {\n name: 'Quotation for 1PCS Nano controller compatible'\n },\n id: Date.now(),\n time: 2000\n });\n this.setState({\n dataSource\n });\n }\n\n onRemove = (id) => {\n const {dataSource} = this.state;\n let index = -1;\n dataSource.forEach((item, i) => {\n if (item.id === id) {\n index = i;\n }\n });\n if (index !== -1) {\n dataSource.splice(index, 1);\n this.setState({\n dataSource\n });\n }\n }\n\n render() {\n const renderOper = (value, index, record) => {\n return Remove({record.id});\n };\n return (
    \n

    \n \n \n \n \n \n
    \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Table, Button } from '@alifd/next';\n\nconst onRowClick = function(record, index, e) {\n        console.log(record, index, e);\n    },\n    dataSource = () => {\n        const result = [];\n        for (let i = 0; i < 5; i++) {\n            result.push({\n                title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n                id: 100306660940 + i,\n                time: 2000 + i\n            });\n        }\n        return result;\n    };\n\nclass App extends React.Component {\n    state = {\n        dataSource: dataSource()\n    }\n    onAdd = () => {\n        const {dataSource} = this.state;\n        dataSource.push({\n            title: {\n                name: 'Quotation for 1PCS Nano controller compatible'\n            },\n            id: Date.now(),\n            time: 2000\n        });\n        this.setState({\n            dataSource\n        });\n    }\n\n    onRemove = (id) => {\n        const {dataSource} = this.state;\n        let index = -1;\n        dataSource.forEach((item, i) => {\n            if (item.id === id) {\n                index = i;\n            }\n        });\n        if (index !== -1) {\n            dataSource.splice(index, 1);\n            this.setState({\n                dataSource\n            });\n        }\n    }\n\n    render() {\n        const renderOper = (value, index, record) => {\n            return <a onClick={this.onRemove.bind(this, record.id)}>Remove({record.id})</a>;\n        };\n        return (<div>\n            <p><Button onClick={this.onAdd}>Add Item</Button></p>\n            <Table dataSource={this.state.dataSource} onRowClick={onRowClick}>\n                <Table.Column title=\"Id\" dataIndex=\"id\"/>\n                <Table.Column title=\"Title\" dataIndex=\"title.name\" />\n                <Table.Column title=\"Time\" dataIndex=\"time\"/>\n                <Table.Column cell={renderOper} width=\"20%\"/>\n            </Table>\n        </div>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/crud.md b/compiled_docs/table/demo/crud.md new file mode 100644 index 0000000000..5b7f7e1f7d --- /dev/null +++ b/compiled_docs/table/demo/crud.md @@ -0,0 +1 @@ +{"title":"增删改查","meta":{"title":"增删改查","description":"\n

    演示对表格的增删改查

    \n","order":"8"},"codes":{"jsx":"import { Table, Button } from '@alifd/next';\n\nconst onRowClick = function(record, index, e) {\n console.log(record, index, e);\n },\n dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n };\n\nclass App extends React.Component {\n state = {\n dataSource: dataSource()\n }\n onAdd = () => {\n const {dataSource} = this.state;\n dataSource.push({\n title: {\n name: 'Quotation for 1PCS Nano controller compatible'\n },\n id: Date.now(),\n time: 2000\n });\n this.setState({\n dataSource\n });\n }\n\n onRemove = (id) => {\n const {dataSource} = this.state;\n let index = -1;\n dataSource.forEach((item, i) => {\n if (item.id === id) {\n index = i;\n }\n });\n if (index !== -1) {\n dataSource.splice(index, 1);\n this.setState({\n dataSource\n });\n }\n }\n\n render() {\n const renderOper = (value, index, record) => {\n return Remove({record.id});\n };\n return (
    \n

    \n \n \n \n \n \n
    \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Table, Button } from '@alifd/next';\n\nconst onRowClick = function(record, index, e) {\n console.log(record, index, e);\n },\n dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n };\n\nclass App extends React.Component {\n state = {\n dataSource: dataSource()\n }\n onAdd = () => {\n const {dataSource} = this.state;\n dataSource.push({\n title: {\n name: 'Quotation for 1PCS Nano controller compatible'\n },\n id: Date.now(),\n time: 2000\n });\n this.setState({\n dataSource\n });\n }\n\n onRemove = (id) => {\n const {dataSource} = this.state;\n let index = -1;\n dataSource.forEach((item, i) => {\n if (item.id === id) {\n index = i;\n }\n });\n if (index !== -1) {\n dataSource.splice(index, 1);\n this.setState({\n dataSource\n });\n }\n }\n\n render() {\n const renderOper = (value, index, record) => {\n return Remove({record.id});\n };\n return (
    \n

    \n \n \n \n \n \n
    \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Table, Button } from '@alifd/next';\n\nconst onRowClick = function(record, index, e) {\n        console.log(record, index, e);\n    },\n    dataSource = () => {\n        const result = [];\n        for (let i = 0; i < 5; i++) {\n            result.push({\n                title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n                id: 100306660940 + i,\n                time: 2000 + i\n            });\n        }\n        return result;\n    };\n\nclass App extends React.Component {\n    state = {\n        dataSource: dataSource()\n    }\n    onAdd = () => {\n        const {dataSource} = this.state;\n        dataSource.push({\n            title: {\n                name: 'Quotation for 1PCS Nano controller compatible'\n            },\n            id: Date.now(),\n            time: 2000\n        });\n        this.setState({\n            dataSource\n        });\n    }\n\n    onRemove = (id) => {\n        const {dataSource} = this.state;\n        let index = -1;\n        dataSource.forEach((item, i) => {\n            if (item.id === id) {\n                index = i;\n            }\n        });\n        if (index !== -1) {\n            dataSource.splice(index, 1);\n            this.setState({\n                dataSource\n            });\n        }\n    }\n\n    render() {\n        const renderOper = (value, index, record) => {\n            return <a onClick={this.onRemove.bind(this, record.id)}>Remove({record.id})</a>;\n        };\n        return (<div>\n            <p><Button onClick={this.onAdd}>Add Item</Button></p>\n            <Table dataSource={this.state.dataSource} onRowClick={onRowClick}>\n                <Table.Column title=\"Id\" dataIndex=\"id\"/>\n                <Table.Column title=\"Title\" dataIndex=\"title.name\" />\n                <Table.Column title=\"Time\" dataIndex=\"time\"/>\n                <Table.Column cell={renderOper} width=\"20%\"/>\n            </Table>\n        </div>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/custom-loading.en-us.md b/compiled_docs/table/demo/custom-loading.en-us.md new file mode 100644 index 0000000000..116e6fdaba --- /dev/null +++ b/compiled_docs/table/demo/custom-loading.en-us.md @@ -0,0 +1 @@ +{"title":"Customize Loading Component","meta":{"title":"Customize Loading Component","description":"\n","order":"20"},"codes":{"jsx":"import { Table, Loading, Icon } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n};\n\nconst render = (value, index, record) => {\n return Remove({record.id});\n};\n\nconst indicator = (\n
    \n \n
    \n);\n\nconst CustomLoading = (props) => (\n \n);\n\nReactDOM.render(\n \n \n \n \n \n ,\n mountNode\n);\n"},"body":"\n````jsx\nimport { Table, Loading, Icon } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n};\n\nconst render = (value, index, record) => {\n return Remove({record.id});\n};\n\nconst indicator = (\n
    \n \n
    \n);\n\nconst CustomLoading = (props) => (\n \n);\n\nReactDOM.render(\n \n \n \n \n \n ,\n mountNode\n);\n````","html":"
    import { Table, Loading, Icon } from '@alifd/next';\n\nconst dataSource = () => {\n    const result = [];\n    for (let i = 0; i < 5; i++) {\n        result.push({\n            title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n            id: 100306660940 + i,\n            time: 2000 + i\n        });\n    }\n    return result;\n};\n\nconst render = (value, index, record) => {\n    return <a href=\"javascript:;\">Remove({record.id})</a>;\n};\n\nconst indicator = (\n    <div>\n        <Icon type=\"loading\" />\n    </div>\n);\n\nconst CustomLoading = (props) => (\n    <Loading\n        indicator={indicator}\n        {...props}\n    />\n);\n\nReactDOM.render(\n    <Table\n        dataSource={dataSource()}\n        loading\n        loadingComponent={CustomLoading}\n    >\n        <Table.Column title=\"Id\" dataIndex=\"id\"/>\n        <Table.Column title=\"Title\" dataIndex=\"title.name\" />\n        <Table.Column title=\"Time\" dataIndex=\"time\"/>\n        <Table.Column cell={render}/>\n    </Table>,\n    mountNode\n);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/custom-loading.md b/compiled_docs/table/demo/custom-loading.md new file mode 100644 index 0000000000..8e4d3291c6 --- /dev/null +++ b/compiled_docs/table/demo/custom-loading.md @@ -0,0 +1 @@ +{"title":"自定义 Loading 组件","meta":{"title":"自定义 Loading 组件","description":"\n","order":"20"},"codes":{"jsx":"import { Table, Loading, Icon } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n};\n\nconst render = (value, index, record) => {\n return Remove({record.id});\n};\n\nconst indicator = (\n
    \n \n
    \n);\n\nconst CustomLoading = (props) => (\n \n);\n\nReactDOM.render(\n \n \n \n \n \n ,\n mountNode\n);\n"},"body":"\n\n````jsx\nimport { Table, Loading, Icon } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n};\n\nconst render = (value, index, record) => {\n return Remove({record.id});\n};\n\nconst indicator = (\n
    \n \n
    \n);\n\nconst CustomLoading = (props) => (\n \n);\n\nReactDOM.render(\n \n \n \n \n \n ,\n mountNode\n);\n````","html":"
    import { Table, Loading, Icon } from '@alifd/next';\n\nconst dataSource = () => {\n    const result = [];\n    for (let i = 0; i < 5; i++) {\n        result.push({\n            title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n            id: 100306660940 + i,\n            time: 2000 + i\n        });\n    }\n    return result;\n};\n\nconst render = (value, index, record) => {\n    return <a href=\"javascript:;\">Remove({record.id})</a>;\n};\n\nconst indicator = (\n    <div>\n        <Icon type=\"loading\" />\n    </div>\n);\n\nconst CustomLoading = (props) => (\n    <Loading\n        indicator={indicator}\n        {...props}\n    />\n);\n\nReactDOM.render(\n    <Table\n        dataSource={dataSource()}\n        loading\n        loadingComponent={CustomLoading}\n    >\n        <Table.Column title=\"Id\" dataIndex=\"id\"/>\n        <Table.Column title=\"Title\" dataIndex=\"title.name\" />\n        <Table.Column title=\"Time\" dataIndex=\"time\"/>\n        <Table.Column cell={render}/>\n    </Table>,\n    mountNode\n);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/expanded-complex.en-us.md b/compiled_docs/table/demo/expanded-complex.en-us.md new file mode 100644 index 0000000000..e10958ff41 --- /dev/null +++ b/compiled_docs/table/demo/expanded-complex.en-us.md @@ -0,0 +1 @@ +{"title":"Expandable - Complex","meta":{"title":"Expandable - Complex","description":"\n

    You can render expanded row by expandedRowRender, but will contain complex components.

    \n","order":"6"},"codes":{"jsx":"import { Table, Button } from '@alifd/next';\n/*eslint-disable react/prop-types, react/no-multi-comp*/\nclass ExpandedApp extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: this.props.dataSource\n };\n }\n load() {\n let {dataSource} = this.state;\n dataSource = dataSource.concat(dataSource);\n this.setState({dataSource});\n }\n render() {\n const style = {\n borderTop: '1px solid #eee',\n textAlign: 'center',\n background: '#f8f8f8',\n lineHeight: '28px'\n };\n return (\n
    \n \n \n \n
    \n

    {this.props.index}: Load more data.

    \n
    \n );\n }\n}\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n id: 100306660940 + i,\n time: 2000 + i,\n children: [{\n title: `Sub title for Quotation ${3 + i}`,\n time: 2000 + i\n }, {\n title: `Sub2 title for Quotation ${3 + i}`,\n time: 2000 + i\n }]\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n },\n expandedRowRender = (record, index) => {\n const children = record.children;\n return ;\n };\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: dataSource(),\n hasBorder: false,\n openRowKeys: []\n };\n }\n onSort(dataIndex, order) {\n const dataSource = this.state.dataSource.sort(function(a, b) {\n const result = a[dataIndex] - b[dataIndex];\n return (order === 'asc') ? (result > 0 ? 1 : -1) : (result > 0 ? -1 : 1);\n });\n this.setState({\n dataSource\n });\n }\n disabledExpandedCol() {\n this.setState({\n getExpandedColProps: (record, index) => {\n console.log(index);\n if (index === 3) {\n return {\n disabled: true\n };\n }\n }\n });\n }\n toggleCol() {\n this.setState({\n hasExpandedRowCtrl: false\n });\n }\n onRowOpen(openRowKeys) {\n this.setState({ openRowKeys});\n }\n toggleExpand(record) {\n const key = record.id,\n { openRowKeys } = this.state,\n index = openRowKeys.indexOf(key);\n if (index > -1) {\n openRowKeys.splice(index, 1);\n } else {\n openRowKeys.push(key);\n }\n this.setState({\n openRowKeys: openRowKeys\n });\n }\n getRowProps(record, index) {\n console.log('getRowProps', record, index);\n return {className: `next-myclass-${index}`};\n }\n onExpandedRowClick(record, index) {\n console.log('onExpandedRowClick', record, index);\n }\n render() {\n const renderTitle = (value, index, record) => {\n return
    {value}index:{index} +++++
    ;\n };\n return (\n \n

     \n

    \n \n \n \n \n \n
    \n     \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Table, Button } from '@alifd/next';\n/*eslint-disable react/prop-types, react/no-multi-comp*/\nclass ExpandedApp extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: this.props.dataSource\n };\n }\n load() {\n let {dataSource} = this.state;\n dataSource = dataSource.concat(dataSource);\n this.setState({dataSource});\n }\n render() {\n const style = {\n borderTop: '1px solid #eee',\n textAlign: 'center',\n background: '#f8f8f8',\n lineHeight: '28px'\n };\n return (\n
    \n \n \n \n
    \n

    {this.props.index}: Load more data.

    \n
    \n );\n }\n}\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n id: 100306660940 + i,\n time: 2000 + i,\n children: [{\n title: `Sub title for Quotation ${3 + i}`,\n time: 2000 + i\n }, {\n title: `Sub2 title for Quotation ${3 + i}`,\n time: 2000 + i\n }]\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n },\n expandedRowRender = (record, index) => {\n const children = record.children;\n return ;\n };\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: dataSource(),\n hasBorder: false,\n openRowKeys: []\n };\n }\n onSort(dataIndex, order) {\n const dataSource = this.state.dataSource.sort(function(a, b) {\n const result = a[dataIndex] - b[dataIndex];\n return (order === 'asc') ? (result > 0 ? 1 : -1) : (result > 0 ? -1 : 1);\n });\n this.setState({\n dataSource\n });\n }\n disabledExpandedCol() {\n this.setState({\n getExpandedColProps: (record, index) => {\n console.log(index);\n if (index === 3) {\n return {\n disabled: true\n };\n }\n }\n });\n }\n toggleCol() {\n this.setState({\n hasExpandedRowCtrl: false\n });\n }\n onRowOpen(openRowKeys) {\n this.setState({ openRowKeys});\n }\n toggleExpand(record) {\n const key = record.id,\n { openRowKeys } = this.state,\n index = openRowKeys.indexOf(key);\n if (index > -1) {\n openRowKeys.splice(index, 1);\n } else {\n openRowKeys.push(key);\n }\n this.setState({\n openRowKeys: openRowKeys\n });\n }\n getRowProps(record, index) {\n console.log('getRowProps', record, index);\n return {className: `next-myclass-${index}`};\n }\n onExpandedRowClick(record, index) {\n console.log('onExpandedRowClick', record, index);\n }\n render() {\n const renderTitle = (value, index, record) => {\n return
    {value}index:{index} +++++
    ;\n };\n return (\n \n

     \n

    \n \n \n \n \n \n
    \n     \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Table, Button } from '@alifd/next';\n/*eslint-disable react/prop-types, react/no-multi-comp*/\nclass ExpandedApp extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            dataSource: this.props.dataSource\n        };\n    }\n    load() {\n        let {dataSource} = this.state;\n        dataSource = dataSource.concat(dataSource);\n        this.setState({dataSource});\n    }\n    render() {\n        const style = {\n            borderTop: '1px solid #eee',\n            textAlign: 'center',\n            background: '#f8f8f8',\n            lineHeight: '28px'\n        };\n        return (\n            <div style={{marginTop: 10}}>\n                <Table dataSource={this.state.dataSource} hasHeader={false} hasBorder={false}>\n                    <Table.Column title=\"Title\" dataIndex=\"title\"/>\n                    <Table.Column title=\"Time\" dataIndex=\"time\" width={200}/>\n                </Table>\n                <p style={style}\n                    onClick={this.load.bind(this)}>{this.props.index}: Load more data. </p>\n            </div>\n        );\n    }\n}\n\nconst dataSource = () => {\n        const result = [];\n        for (let i = 0; i < 5; i++) {\n            result.push({\n                title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n                id: 100306660940 + i,\n                time: 2000 + i,\n                children: [{\n                    title: `Sub title for Quotation ${3 + i}`,\n                    time: 2000 + i\n                }, {\n                    title: `Sub2 title for Quotation ${3 + i}`,\n                    time: 2000 + i\n                }]\n            });\n        }\n        return result;\n    },\n    render = (value, index, record) => {\n        return <a>Remove({record.id})</a>;\n    },\n    expandedRowRender = (record, index) => {\n        const children = record.children;\n        return <ExpandedApp dataSource={children} index={index}/>;\n    };\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            dataSource: dataSource(),\n            hasBorder: false,\n            openRowKeys: []\n        };\n    }\n    onSort(dataIndex, order) {\n        const dataSource = this.state.dataSource.sort(function(a, b) {\n            const result = a[dataIndex] - b[dataIndex];\n            return (order === 'asc') ? (result > 0 ? 1 : -1) : (result > 0 ? -1 : 1);\n        });\n        this.setState({\n            dataSource\n        });\n    }\n    disabledExpandedCol() {\n        this.setState({\n            getExpandedColProps: (record, index) => {\n                console.log(index);\n                if (index === 3) {\n                    return {\n                        disabled: true\n                    };\n                }\n            }\n        });\n    }\n    toggleCol() {\n        this.setState({\n            hasExpandedRowCtrl: false\n        });\n    }\n    onRowOpen(openRowKeys) {\n        this.setState({ openRowKeys});\n    }\n    toggleExpand(record) {\n        const key = record.id,\n            { openRowKeys } = this.state,\n            index = openRowKeys.indexOf(key);\n        if (index > -1) {\n            openRowKeys.splice(index, 1);\n        } else {\n            openRowKeys.push(key);\n        }\n        this.setState({\n            openRowKeys: openRowKeys\n        });\n    }\n    getRowProps(record, index) {\n        console.log('getRowProps', record, index);\n        return {className: `next-myclass-${index}`};\n    }\n    onExpandedRowClick(record, index) {\n        console.log('onExpandedRowClick', record, index);\n    }\n    render() {\n        const renderTitle = (value, index, record) => {\n            return <div>{value}<span onClick={this.toggleExpand.bind(this, record)}>index:{index} +++++</span></div>;\n        };\n        return (\n            <span>\n                <p> <Button onClick={this.disabledExpandedCol.bind(this)}> disable fourth row </Button> &nbsp;\n                    <Button onClick={this.toggleCol.bind(this)}> hide + </Button></p>\n                <Table dataSource={this.state.dataSource}\n                    expandedIndexSimulate\n                    isZebra={this.state.isZebra}\n                    hasBorder={this.state.hasBorder}\n                    onSort={this.onSort.bind(this)}\n                    expandedRowRender={expandedRowRender}\n                    expandedRowIndent={[1, 1]}\n                    openRowKeys={this.state.openRowKeys}\n                    getExpandedColProps={this.state.getExpandedColProps}\n                    hasExpandedRowCtrl={this.state.hasExpandedRowCtrl}\n                    onRowOpen={this.onRowOpen.bind(this)}\n                    getRowProps={this.getRowProps.bind(this)}\n                    onExpandedRowClick={this.onExpandedRowClick.bind(this)}\n                >\n                    <Table.Column title=\"Id\" dataIndex=\"id\" sortable/>\n                    <Table.Column title=\"Title\" dataIndex=\"title\" cell={renderTitle}/>\n                    <Table.Column title=\"Time\" dataIndex=\"time\" width={200}/>\n                    <Table.Column cell={render} width={200}/>\n                </Table>\n            </span>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/expanded-complex.md b/compiled_docs/table/demo/expanded-complex.md new file mode 100644 index 0000000000..5908e491a3 --- /dev/null +++ b/compiled_docs/table/demo/expanded-complex.md @@ -0,0 +1 @@ +{"title":"可展开-复杂","meta":{"title":"可展开-复杂","description":"\n

    可以通过 expandedRowRender 额外渲染行，但是会包含复杂的组件, 可通过 expandedIndexSimulate 设置 index 类型

    \n","order":"6"},"codes":{"jsx":"import { Table, Button } from '@alifd/next';\n/*eslint-disable react/prop-types, react/no-multi-comp*/\nclass ExpandedApp extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: this.props.dataSource\n };\n }\n load() {\n let {dataSource} = this.state;\n dataSource = dataSource.concat(dataSource);\n this.setState({dataSource});\n }\n render() {\n const style = {\n borderTop: '1px solid #eee',\n textAlign: 'center',\n background: '#f8f8f8',\n lineHeight: '28px'\n };\n return (\n
    \n \n \n \n
    \n

    {this.props.index}: Load more data.

    \n
    \n );\n }\n}\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n id: 100306660940 + i,\n time: 2000 + i,\n children: [{\n title: `Sub title for Quotation ${3 + i}`,\n time: 2000 + i\n }, {\n title: `Sub2 title for Quotation ${3 + i}`,\n time: 2000 + i\n }]\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n },\n expandedRowRender = (record, index) => {\n const children = record.children;\n return ;\n };\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: dataSource(),\n hasBorder: false,\n openRowKeys: []\n };\n }\n onSort(dataIndex, order) {\n const dataSource = this.state.dataSource.sort(function(a, b) {\n const result = a[dataIndex] - b[dataIndex];\n return (order === 'asc') ? (result > 0 ? 1 : -1) : (result > 0 ? -1 : 1);\n });\n this.setState({\n dataSource\n });\n }\n disabledExpandedCol() {\n this.setState({\n getExpandedColProps: (record, index) => {\n console.log(index);\n if (index === 3) {\n return {\n disabled: true\n };\n }\n }\n });\n }\n toggleCol() {\n this.setState({\n hasExpandedRowCtrl: false\n });\n }\n onRowOpen(openRowKeys) {\n this.setState({ openRowKeys});\n }\n toggleExpand(record) {\n const key = record.id,\n { openRowKeys } = this.state,\n index = openRowKeys.indexOf(key);\n if (index > -1) {\n openRowKeys.splice(index, 1);\n } else {\n openRowKeys.push(key);\n }\n this.setState({\n openRowKeys: openRowKeys\n });\n }\n getRowProps(record, index) {\n console.log('getRowProps', record, index);\n return {className: `next-myclass-${index}`};\n }\n onExpandedRowClick(record, index) {\n console.log('onExpandedRowClick', record, index);\n }\n render() {\n const renderTitle = (value, index, record) => {\n return
    {value}index:{index} +++++
    ;\n };\n return (\n \n

     \n

    \n \n \n \n \n \n
    \n     \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Table, Button } from '@alifd/next';\n/*eslint-disable react/prop-types, react/no-multi-comp*/\nclass ExpandedApp extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: this.props.dataSource\n };\n }\n load() {\n let {dataSource} = this.state;\n dataSource = dataSource.concat(dataSource);\n this.setState({dataSource});\n }\n render() {\n const style = {\n borderTop: '1px solid #eee',\n textAlign: 'center',\n background: '#f8f8f8',\n lineHeight: '28px'\n };\n return (\n
    \n \n \n \n
    \n

    {this.props.index}: Load more data.

    \n
    \n );\n }\n}\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n id: 100306660940 + i,\n time: 2000 + i,\n children: [{\n title: `Sub title for Quotation ${3 + i}`,\n time: 2000 + i\n }, {\n title: `Sub2 title for Quotation ${3 + i}`,\n time: 2000 + i\n }]\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n },\n expandedRowRender = (record, index) => {\n const children = record.children;\n return ;\n };\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: dataSource(),\n hasBorder: false,\n openRowKeys: []\n };\n }\n onSort(dataIndex, order) {\n const dataSource = this.state.dataSource.sort(function(a, b) {\n const result = a[dataIndex] - b[dataIndex];\n return (order === 'asc') ? (result > 0 ? 1 : -1) : (result > 0 ? -1 : 1);\n });\n this.setState({\n dataSource\n });\n }\n disabledExpandedCol() {\n this.setState({\n getExpandedColProps: (record, index) => {\n console.log(index);\n if (index === 3) {\n return {\n disabled: true\n };\n }\n }\n });\n }\n toggleCol() {\n this.setState({\n hasExpandedRowCtrl: false\n });\n }\n onRowOpen(openRowKeys) {\n this.setState({ openRowKeys});\n }\n toggleExpand(record) {\n const key = record.id,\n { openRowKeys } = this.state,\n index = openRowKeys.indexOf(key);\n if (index > -1) {\n openRowKeys.splice(index, 1);\n } else {\n openRowKeys.push(key);\n }\n this.setState({\n openRowKeys: openRowKeys\n });\n }\n getRowProps(record, index) {\n console.log('getRowProps', record, index);\n return {className: `next-myclass-${index}`};\n }\n onExpandedRowClick(record, index) {\n console.log('onExpandedRowClick', record, index);\n }\n render() {\n const renderTitle = (value, index, record) => {\n return
    {value}index:{index} +++++
    ;\n };\n return (\n \n

     \n

    \n \n \n \n \n \n
    \n     \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Table, Button } from '@alifd/next';\n/*eslint-disable react/prop-types, react/no-multi-comp*/\nclass ExpandedApp extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            dataSource: this.props.dataSource\n        };\n    }\n    load() {\n        let {dataSource} = this.state;\n        dataSource = dataSource.concat(dataSource);\n        this.setState({dataSource});\n    }\n    render() {\n        const style = {\n            borderTop: '1px solid #eee',\n            textAlign: 'center',\n            background: '#f8f8f8',\n            lineHeight: '28px'\n        };\n        return (\n            <div style={{marginTop: 10}}>\n                <Table dataSource={this.state.dataSource} hasHeader={false} hasBorder={false}>\n                    <Table.Column title=\"Title\" dataIndex=\"title\"/>\n                    <Table.Column title=\"Time\" dataIndex=\"time\" width={200}/>\n                </Table>\n                <p style={style}\n                    onClick={this.load.bind(this)}>{this.props.index}: Load more data. </p>\n            </div>\n        );\n    }\n}\n\nconst dataSource = () => {\n        const result = [];\n        for (let i = 0; i < 5; i++) {\n            result.push({\n                title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n                id: 100306660940 + i,\n                time: 2000 + i,\n                children: [{\n                    title: `Sub title for Quotation ${3 + i}`,\n                    time: 2000 + i\n                }, {\n                    title: `Sub2 title for Quotation ${3 + i}`,\n                    time: 2000 + i\n                }]\n            });\n        }\n        return result;\n    },\n    render = (value, index, record) => {\n        return <a>Remove({record.id})</a>;\n    },\n    expandedRowRender = (record, index) => {\n        const children = record.children;\n        return <ExpandedApp dataSource={children} index={index}/>;\n    };\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            dataSource: dataSource(),\n            hasBorder: false,\n            openRowKeys: []\n        };\n    }\n    onSort(dataIndex, order) {\n        const dataSource = this.state.dataSource.sort(function(a, b) {\n            const result = a[dataIndex] - b[dataIndex];\n            return (order === 'asc') ? (result > 0 ? 1 : -1) : (result > 0 ? -1 : 1);\n        });\n        this.setState({\n            dataSource\n        });\n    }\n    disabledExpandedCol() {\n        this.setState({\n            getExpandedColProps: (record, index) => {\n                console.log(index);\n                if (index === 3) {\n                    return {\n                        disabled: true\n                    };\n                }\n            }\n        });\n    }\n    toggleCol() {\n        this.setState({\n            hasExpandedRowCtrl: false\n        });\n    }\n    onRowOpen(openRowKeys) {\n        this.setState({ openRowKeys});\n    }\n    toggleExpand(record) {\n        const key = record.id,\n            { openRowKeys } = this.state,\n            index = openRowKeys.indexOf(key);\n        if (index > -1) {\n            openRowKeys.splice(index, 1);\n        } else {\n            openRowKeys.push(key);\n        }\n        this.setState({\n            openRowKeys: openRowKeys\n        });\n    }\n    getRowProps(record, index) {\n        console.log('getRowProps', record, index);\n        return {className: `next-myclass-${index}`};\n    }\n    onExpandedRowClick(record, index) {\n        console.log('onExpandedRowClick', record, index);\n    }\n    render() {\n        const renderTitle = (value, index, record) => {\n            return <div>{value}<span onClick={this.toggleExpand.bind(this, record)}>index:{index} +++++</span></div>;\n        };\n        return (\n            <span>\n                <p> <Button onClick={this.disabledExpandedCol.bind(this)}> disable fourth row </Button> &nbsp;\n                    <Button onClick={this.toggleCol.bind(this)}> hide + </Button></p>\n                <Table dataSource={this.state.dataSource}\n                    expandedIndexSimulate\n                    isZebra={this.state.isZebra}\n                    hasBorder={this.state.hasBorder}\n                    onSort={this.onSort.bind(this)}\n                    expandedRowRender={expandedRowRender}\n                    expandedRowIndent={[1, 1]}\n                    openRowKeys={this.state.openRowKeys}\n                    getExpandedColProps={this.state.getExpandedColProps}\n                    hasExpandedRowCtrl={this.state.hasExpandedRowCtrl}\n                    onRowOpen={this.onRowOpen.bind(this)}\n                    getRowProps={this.getRowProps.bind(this)}\n                    onExpandedRowClick={this.onExpandedRowClick.bind(this)}\n                >\n                    <Table.Column title=\"Id\" dataIndex=\"id\" sortable/>\n                    <Table.Column title=\"Title\" dataIndex=\"title\" cell={renderTitle}/>\n                    <Table.Column title=\"Time\" dataIndex=\"time\" width={200}/>\n                    <Table.Column cell={render} width={200}/>\n                </Table>\n            </span>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/expanded.en-us.md b/compiled_docs/table/demo/expanded.en-us.md new file mode 100644 index 0000000000..b0b2e0fe93 --- /dev/null +++ b/compiled_docs/table/demo/expanded.en-us.md @@ -0,0 +1 @@ +{"title":"Expandable","meta":{"title":"Expandable","description":"\n

    You can render expanded row by expandedRowRender.

    \n","order":"5"},"codes":{"jsx":"import { Table, Button } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: dataSource()\n };\n }\n onSort(dataIndex, order) {\n const dataSource = this.state.dataSource.sort(function(a, b) {\n const result = a[dataIndex] - b[dataIndex];\n return (order === 'asc') ? (result > 0 ? 1 : -1) : (result > 0 ? -1 : 1);\n });\n this.setState({\n dataSource\n });\n }\n toggleIndent() {\n this.setState({\n expandedRowIndent: [2, 1]\n });\n }\n toggleCol() {\n this.setState({\n hasExpandedRowCtrl: false\n });\n }\n render() {\n return (
    \n

    \n \n

    \n record.title}\n onRowClick={() => console.log('rowClick')}\n onExpandedRowClick={() => console.log('expandedRowClick')}\n expandedRowIndent={this.state.expandedRowIndent}\n >\n \n \n \n \n
    \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Table, Button } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: dataSource()\n };\n }\n onSort(dataIndex, order) {\n const dataSource = this.state.dataSource.sort(function(a, b) {\n const result = a[dataIndex] - b[dataIndex];\n return (order === 'asc') ? (result > 0 ? 1 : -1) : (result > 0 ? -1 : 1);\n });\n this.setState({\n dataSource\n });\n }\n toggleIndent() {\n this.setState({\n expandedRowIndent: [2, 1]\n });\n }\n toggleCol() {\n this.setState({\n hasExpandedRowCtrl: false\n });\n }\n render() {\n return (
    \n

    \n \n

    \n record.title}\n onRowClick={() => console.log('rowClick')}\n onExpandedRowClick={() => console.log('expandedRowClick')}\n expandedRowIndent={this.state.expandedRowIndent}\n >\n \n \n \n \n
    \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Table, Button } from '@alifd/next';\n\nconst dataSource = () => {\n        const result = [];\n        for (let i = 0; i < 5; i++) {\n            result.push({\n                title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n                id: 100306660940 + i,\n                time: 2000 + i\n            });\n        }\n        return result;\n    },\n    render = (value, index, record) => {\n        return <a>Remove({record.id})</a>;\n    };\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            dataSource: dataSource()\n        };\n    }\n    onSort(dataIndex, order) {\n        const dataSource = this.state.dataSource.sort(function(a, b) {\n            const result = a[dataIndex] - b[dataIndex];\n            return (order === 'asc') ? (result > 0 ? 1 : -1) : (result > 0 ? -1 : 1);\n        });\n        this.setState({\n            dataSource\n        });\n    }\n    toggleIndent() {\n        this.setState({\n            expandedRowIndent: [2, 1]\n        });\n    }\n    toggleCol() {\n        this.setState({\n            hasExpandedRowCtrl: false\n        });\n    }\n    render() {\n        return (<div>\n            <p>\n                <Button onClick={this.toggleIndent.bind(this)}> Update indent </Button>\n            </p>\n            <Table dataSource={this.state.dataSource}\n                isZebra={this.state.isZebra}\n                hasBorder={false}\n                onSort={this.onSort.bind(this)}\n                expandedRowRender={(record) => record.title}\n                onRowClick={() => console.log('rowClick')}\n                onExpandedRowClick={() => console.log('expandedRowClick')}\n                expandedRowIndent={this.state.expandedRowIndent}\n            >\n                <Table.Column title=\"Id\" dataIndex=\"id\" sortable/>\n                <Table.Column title=\"Title\" dataIndex=\"title\"/>\n                <Table.Column title=\"Time\" dataIndex=\"time\"/>\n                <Table.Column cell={render} width={200}/>\n            </Table>\n        </div>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/expanded.md b/compiled_docs/table/demo/expanded.md new file mode 100644 index 0000000000..090e1c357b --- /dev/null +++ b/compiled_docs/table/demo/expanded.md @@ -0,0 +1 @@ +{"title":"可展开","meta":{"title":"可展开","description":"\n

    可以通过 expandedRowRender 额外渲染行

    \n","order":"5"},"codes":{"jsx":"import { Table, Button } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: dataSource()\n };\n }\n onSort(dataIndex, order) {\n const dataSource = this.state.dataSource.sort(function(a, b) {\n const result = a[dataIndex] - b[dataIndex];\n return (order === 'asc') ? (result > 0 ? 1 : -1) : (result > 0 ? -1 : 1);\n });\n this.setState({\n dataSource\n });\n }\n toggleIndent() {\n this.setState({\n expandedRowIndent: [2, 1]\n });\n }\n toggleCol() {\n this.setState({\n hasExpandedRowCtrl: false\n });\n }\n render() {\n return (
    \n

    \n \n

    \n record.title}\n onRowClick={() => console.log('rowClick')}\n onExpandedRowClick={() => console.log('expandedRowClick')}\n expandedRowIndent={this.state.expandedRowIndent}\n >\n \n \n \n \n
    \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Table, Button } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: dataSource()\n };\n }\n onSort(dataIndex, order) {\n const dataSource = this.state.dataSource.sort(function(a, b) {\n const result = a[dataIndex] - b[dataIndex];\n return (order === 'asc') ? (result > 0 ? 1 : -1) : (result > 0 ? -1 : 1);\n });\n this.setState({\n dataSource\n });\n }\n toggleIndent() {\n this.setState({\n expandedRowIndent: [2, 1]\n });\n }\n toggleCol() {\n this.setState({\n hasExpandedRowCtrl: false\n });\n }\n render() {\n return (
    \n

    \n \n

    \n record.title}\n onRowClick={() => console.log('rowClick')}\n onExpandedRowClick={() => console.log('expandedRowClick')}\n expandedRowIndent={this.state.expandedRowIndent}\n >\n \n \n \n \n
    \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Table, Button } from '@alifd/next';\n\nconst dataSource = () => {\n        const result = [];\n        for (let i = 0; i < 5; i++) {\n            result.push({\n                title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n                id: 100306660940 + i,\n                time: 2000 + i\n            });\n        }\n        return result;\n    },\n    render = (value, index, record) => {\n        return <a>Remove({record.id})</a>;\n    };\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            dataSource: dataSource()\n        };\n    }\n    onSort(dataIndex, order) {\n        const dataSource = this.state.dataSource.sort(function(a, b) {\n            const result = a[dataIndex] - b[dataIndex];\n            return (order === 'asc') ? (result > 0 ? 1 : -1) : (result > 0 ? -1 : 1);\n        });\n        this.setState({\n            dataSource\n        });\n    }\n    toggleIndent() {\n        this.setState({\n            expandedRowIndent: [2, 1]\n        });\n    }\n    toggleCol() {\n        this.setState({\n            hasExpandedRowCtrl: false\n        });\n    }\n    render() {\n        return (<div>\n            <p>\n                <Button onClick={this.toggleIndent.bind(this)}> Update indent </Button>\n            </p>\n            <Table dataSource={this.state.dataSource}\n                isZebra={this.state.isZebra}\n                hasBorder={false}\n                onSort={this.onSort.bind(this)}\n                expandedRowRender={(record) => record.title}\n                onRowClick={() => console.log('rowClick')}\n                onExpandedRowClick={() => console.log('expandedRowClick')}\n                expandedRowIndent={this.state.expandedRowIndent}\n            >\n                <Table.Column title=\"Id\" dataIndex=\"id\" sortable/>\n                <Table.Column title=\"Title\" dataIndex=\"title\"/>\n                <Table.Column title=\"Time\" dataIndex=\"time\"/>\n                <Table.Column cell={render} width={200}/>\n            </Table>\n        </div>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/filter&sort.en-us.md b/compiled_docs/table/demo/filter&sort.en-us.md new file mode 100644 index 0000000000..9989ab8830 --- /dev/null +++ b/compiled_docs/table/demo/filter&sort.en-us.md @@ -0,0 +1 @@ +{"title":"Sorting and filtering","meta":{"title":"Sorting and filtering","description":"\n

    Demo the function of sorting and filtering.

    \n","order":"3"},"codes":{"jsx":"import { Table, Button, Icon } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: dataSource(),\n filterMode: 'multiple'\n };\n }\n onSort(dataIndex, order) {\n const dataSource = this.state.dataSource.sort(function(a, b) {\n const result = a[dataIndex] - b[dataIndex];\n return (order === 'asc') ? (result > 0 ? 1 : -1) : (result > 0 ? -1 : 1);\n });\n this.setState({\n dataSource,\n sort: {id: order}\n });\n }\n onFilter(filterParams) {\n let ds = dataSource();\n Object.keys(filterParams).forEach(key => {\n const selectedKeys = filterParams[key].selectedKeys;\n if (selectedKeys.length) {\n ds = ds.filter(record => {\n return selectedKeys.some(value => {\n return record[key].indexOf(value) > -1;\n });\n });\n }\n });\n this.setState({dataSource: ds});\n }\n changeMode() {\n this.setState({\n filterMode: 'single'\n });\n }\n render() {\n const filters = [{\n label: 'Nano 3',\n value: 3\n }, {\n label: 'Nano 678',\n value: 678,\n children: [{\n label: 'Nano 67',\n value: 67,\n children: [{\n label: 'Nano 6',\n value: 6\n }, {\n label: 'Nano 7',\n value: 7\n }]\n }, {\n label: 'Nano 8',\n value: 8\n }]\n }, {\n label: 'Other',\n value: 'other',\n children: [{\n label: 'Nano 4',\n value: 4\n }, {\n label: 'Nano 5',\n value: 5\n }]\n }];\n return (\n
    \n

    \n \n \n \n \n \n
    \n
    \n Customize sortIcons:\n
    \n {}}\n sortIcons={{\n desc: ,\n asc: \n }}>\n \n \n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Table, Button, Icon } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: dataSource(),\n filterMode: 'multiple'\n };\n }\n onSort(dataIndex, order) {\n const dataSource = this.state.dataSource.sort(function(a, b) {\n const result = a[dataIndex] - b[dataIndex];\n return (order === 'asc') ? (result > 0 ? 1 : -1) : (result > 0 ? -1 : 1);\n });\n this.setState({\n dataSource,\n sort: {id: order}\n });\n }\n onFilter(filterParams) {\n let ds = dataSource();\n Object.keys(filterParams).forEach(key => {\n const selectedKeys = filterParams[key].selectedKeys;\n if (selectedKeys.length) {\n ds = ds.filter(record => {\n return selectedKeys.some(value => {\n return record[key].indexOf(value) > -1;\n });\n });\n }\n });\n this.setState({dataSource: ds});\n }\n changeMode() {\n this.setState({\n filterMode: 'single'\n });\n }\n render() {\n const filters = [{\n label: 'Nano 3',\n value: 3\n }, {\n label: 'Nano 678',\n value: 678,\n children: [{\n label: 'Nano 67',\n value: 67,\n children: [{\n label: 'Nano 6',\n value: 6\n }, {\n label: 'Nano 7',\n value: 7\n }]\n }, {\n label: 'Nano 8',\n value: 8\n }]\n }, {\n label: 'Other',\n value: 'other',\n children: [{\n label: 'Nano 4',\n value: 4\n }, {\n label: 'Nano 5',\n value: 5\n }]\n }];\n return (\n
    \n

    \n \n \n \n \n \n
    \n
    \n Customize sortIcons:\n
    \n {}}\n sortIcons={{\n desc: ,\n asc: \n }}>\n \n \n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Table, Button, Icon } from '@alifd/next';\n\nconst dataSource = () => {\n        const result = [];\n        for (let i = 0; i < 5; i++) {\n            result.push({\n                title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n                id: 100306660940 + i,\n                time: 2000 + i\n            });\n        }\n        return result;\n    },\n    render = (value, index, record) => {\n        return <a href=\"javascript:;\">Remove({record.id})</a>;\n    };\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            dataSource: dataSource(),\n            filterMode: 'multiple'\n        };\n    }\n    onSort(dataIndex, order) {\n        const dataSource = this.state.dataSource.sort(function(a, b) {\n            const result = a[dataIndex] - b[dataIndex];\n            return (order === 'asc') ? (result > 0 ? 1 : -1) : (result > 0 ? -1 : 1);\n        });\n        this.setState({\n            dataSource,\n            sort: {id: order}\n        });\n    }\n    onFilter(filterParams) {\n        let ds = dataSource();\n        Object.keys(filterParams).forEach(key => {\n            const selectedKeys = filterParams[key].selectedKeys;\n            if (selectedKeys.length) {\n                ds = ds.filter(record => {\n                    return selectedKeys.some(value => {\n                        return record[key].indexOf(value) > -1;\n                    });\n                });\n            }\n        });\n        this.setState({dataSource: ds});\n    }\n    changeMode() {\n        this.setState({\n            filterMode: 'single'\n        });\n    }\n    render() {\n        const filters = [{\n            label: 'Nano 3',\n            value: 3\n        }, {\n            label: 'Nano 678',\n            value: 678,\n            children: [{\n                label: 'Nano 67',\n                value: 67,\n                children: [{\n                    label: 'Nano 6',\n                    value: 6\n                }, {\n                    label: 'Nano 7',\n                    value: 7\n                }]\n            }, {\n                label: 'Nano 8',\n                value: 8\n            }]\n        }, {\n            label: 'Other',\n            value: 'other',\n            children: [{\n                label: 'Nano 4',\n                value: 4\n            }, {\n                label: 'Nano 5',\n                value: 5\n            }]\n        }];\n        return (\n            <div>\n                <p><Button onClick={this.changeMode.bind(this)}>Change filter menu to single select</Button></p>\n                <Table dataSource={this.state.dataSource}\n                    onSort={this.onSort.bind(this)}\n                    onFilter={this.onFilter.bind(this)}>\n                    <Table.Column title=\"Id\" dataIndex=\"id\" sortable/>\n                    <Table.Column title=\"Title\" dataIndex=\"title\" filters={filters} filterMode={this.state.filterMode}/>\n                    <Table.Column title=\"Time\" dataIndex=\"time\"/>\n                    <Table.Column cell={render} width={200}/>\n                </Table>\n                <br />\n                Customize sortIcons:\n                <br />\n                <Table dataSource={[]}\n                    onSort={() => {}}\n                    sortIcons={{\n                        desc: <Icon style={{top: '6px', left: '4px'}} type={'arrow-down'} size=\"small\" />,\n                        asc: <Icon style={{top: '-6px', left: '4px'}} type={'arrow-up'} size=\"small\" />\n                    }}>\n                    <Table.Column title=\"Id\" dataIndex=\"id\" sortable/>\n                    <Table.Column title=\"Title\" dataIndex=\"title\" filters={filters} filterMode={this.state.filterMode}/>\n                    <Table.Column title=\"Time\" dataIndex=\"time\"/>\n                </Table>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/filter&sort.md b/compiled_docs/table/demo/filter&sort.md new file mode 100644 index 0000000000..3e9453d6e2 --- /dev/null +++ b/compiled_docs/table/demo/filter&sort.md @@ -0,0 +1 @@ +{"title":"排序与过滤","meta":{"title":"排序与过滤","description":"\n

    示例演示了排序和过滤的特性

    \n","order":"3"},"codes":{"jsx":"import { Table, Button, Icon } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: dataSource(),\n filterMode: 'multiple'\n };\n }\n onSort(dataIndex, order) {\n const dataSource = this.state.dataSource.sort(function(a, b) {\n const result = a[dataIndex] - b[dataIndex];\n return (order === 'asc') ? (result > 0 ? 1 : -1) : (result > 0 ? -1 : 1);\n });\n this.setState({\n dataSource,\n sort: {id: order}\n });\n }\n onFilter(filterParams) {\n let ds = dataSource();\n Object.keys(filterParams).forEach(key => {\n const selectedKeys = filterParams[key].selectedKeys;\n if (selectedKeys.length) {\n ds = ds.filter(record => {\n return selectedKeys.some(value => {\n return record[key].indexOf(value) > -1;\n });\n });\n }\n });\n this.setState({dataSource: ds});\n }\n changeMode() {\n this.setState({\n filterMode: 'single'\n });\n }\n render() {\n const filters = [{\n label: 'Nano 3',\n value: 3\n }, {\n label: 'Nano 678',\n value: 678,\n children: [{\n label: 'Nano 67',\n value: 67,\n children: [{\n label: 'Nano 6',\n value: 6\n }, {\n label: 'Nano 7',\n value: 7\n }]\n }, {\n label: 'Nano 8',\n value: 8\n }]\n }, {\n label: 'Other',\n value: 'other',\n children: [{\n label: 'Nano 4',\n value: 4\n }, {\n label: 'Nano 5',\n value: 5\n }]\n }];\n return (\n
    \n

    \n \n \n \n \n \n
    \n
    \n Customize sortIcons:\n
    \n {}}\n sortIcons={{\n desc: ,\n asc: \n }}>\n \n \n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Table, Button, Icon } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: dataSource(),\n filterMode: 'multiple'\n };\n }\n onSort(dataIndex, order) {\n const dataSource = this.state.dataSource.sort(function(a, b) {\n const result = a[dataIndex] - b[dataIndex];\n return (order === 'asc') ? (result > 0 ? 1 : -1) : (result > 0 ? -1 : 1);\n });\n this.setState({\n dataSource,\n sort: {id: order}\n });\n }\n onFilter(filterParams) {\n let ds = dataSource();\n Object.keys(filterParams).forEach(key => {\n const selectedKeys = filterParams[key].selectedKeys;\n if (selectedKeys.length) {\n ds = ds.filter(record => {\n return selectedKeys.some(value => {\n return record[key].indexOf(value) > -1;\n });\n });\n }\n });\n this.setState({dataSource: ds});\n }\n changeMode() {\n this.setState({\n filterMode: 'single'\n });\n }\n render() {\n const filters = [{\n label: 'Nano 3',\n value: 3\n }, {\n label: 'Nano 678',\n value: 678,\n children: [{\n label: 'Nano 67',\n value: 67,\n children: [{\n label: 'Nano 6',\n value: 6\n }, {\n label: 'Nano 7',\n value: 7\n }]\n }, {\n label: 'Nano 8',\n value: 8\n }]\n }, {\n label: 'Other',\n value: 'other',\n children: [{\n label: 'Nano 4',\n value: 4\n }, {\n label: 'Nano 5',\n value: 5\n }]\n }];\n return (\n
    \n

    \n \n \n \n \n \n
    \n
    \n Customize sortIcons:\n
    \n {}}\n sortIcons={{\n desc: ,\n asc: \n }}>\n \n \n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Table, Button, Icon } from '@alifd/next';\n\nconst dataSource = () => {\n        const result = [];\n        for (let i = 0; i < 5; i++) {\n            result.push({\n                title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n                id: 100306660940 + i,\n                time: 2000 + i\n            });\n        }\n        return result;\n    },\n    render = (value, index, record) => {\n        return <a href=\"javascript:;\">Remove({record.id})</a>;\n    };\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            dataSource: dataSource(),\n            filterMode: 'multiple'\n        };\n    }\n    onSort(dataIndex, order) {\n        const dataSource = this.state.dataSource.sort(function(a, b) {\n            const result = a[dataIndex] - b[dataIndex];\n            return (order === 'asc') ? (result > 0 ? 1 : -1) : (result > 0 ? -1 : 1);\n        });\n        this.setState({\n            dataSource,\n            sort: {id: order}\n        });\n    }\n    onFilter(filterParams) {\n        let ds = dataSource();\n        Object.keys(filterParams).forEach(key => {\n            const selectedKeys = filterParams[key].selectedKeys;\n            if (selectedKeys.length) {\n                ds = ds.filter(record => {\n                    return selectedKeys.some(value => {\n                        return record[key].indexOf(value) > -1;\n                    });\n                });\n            }\n        });\n        this.setState({dataSource: ds});\n    }\n    changeMode() {\n        this.setState({\n            filterMode: 'single'\n        });\n    }\n    render() {\n        const filters = [{\n            label: 'Nano 3',\n            value: 3\n        }, {\n            label: 'Nano 678',\n            value: 678,\n            children: [{\n                label: 'Nano 67',\n                value: 67,\n                children: [{\n                    label: 'Nano 6',\n                    value: 6\n                }, {\n                    label: 'Nano 7',\n                    value: 7\n                }]\n            }, {\n                label: 'Nano 8',\n                value: 8\n            }]\n        }, {\n            label: 'Other',\n            value: 'other',\n            children: [{\n                label: 'Nano 4',\n                value: 4\n            }, {\n                label: 'Nano 5',\n                value: 5\n            }]\n        }];\n        return (\n            <div>\n                <p><Button onClick={this.changeMode.bind(this)}>Change filter menu to single select</Button></p>\n                <Table dataSource={this.state.dataSource}\n                    onSort={this.onSort.bind(this)}\n                    onFilter={this.onFilter.bind(this)}>\n                    <Table.Column title=\"Id\" dataIndex=\"id\" sortable/>\n                    <Table.Column title=\"Title\" dataIndex=\"title\" filters={filters} filterMode={this.state.filterMode}/>\n                    <Table.Column title=\"Time\" dataIndex=\"time\"/>\n                    <Table.Column cell={render} width={200}/>\n                </Table>\n                <br />\n                Customize sortIcons:\n                <br />\n                <Table dataSource={[]}\n                    onSort={() => {}}\n                    sortIcons={{\n                        desc: <Icon style={{top: '6px', left: '4px'}} type={'arrow-down'} size=\"small\" />,\n                        asc: <Icon style={{top: '-6px', left: '4px'}} type={'arrow-up'} size=\"small\" />\n                    }}>\n                    <Table.Column title=\"Id\" dataIndex=\"id\" sortable/>\n                    <Table.Column title=\"Title\" dataIndex=\"title\" filters={filters} filterMode={this.state.filterMode}/>\n                    <Table.Column title=\"Time\" dataIndex=\"time\"/>\n                </Table>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/fixed-header.en-us.md b/compiled_docs/table/demo/fixed-header.en-us.md new file mode 100644 index 0000000000..db9511f0a1 --- /dev/null +++ b/compiled_docs/table/demo/fixed-header.en-us.md @@ -0,0 +1 @@ +{"title":"Fixed table header","meta":{"title":"Fixed table header","description":"\n

    Table header can be fixed, support sticky.

    \n","order":"9"},"codes":{"jsx":"import { Table, Button } from '@alifd/next';\n\nconst dataSource = (length) => {\n const result = [];\n for (let i = 0; i < length; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n};\n\nclass App extends React.Component {\n state = {\n sticky: false,\n lock: false,\n dataSource: dataSource(50),\n }\n onSwitch(tag) {\n const props = {};\n switch (tag) {\n case 'sticky':\n props.sticky = true;\n break;\n case 'lock':\n props.lock = true;\n break;\n case 'dataSource':\n props.dataSource = this.state.dataSource.length > 0 ? [] : dataSource(50);\n break;\n default:\n break;\n }\n\n this.setState(props);\n }\n render() {\n return (
    \n

    \n  \n  \n \n

    \n \n \n \n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Table, Button } from '@alifd/next';\n\nconst dataSource = (length) => {\n const result = [];\n for (let i = 0; i < length; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n};\n\nclass App extends React.Component {\n state = {\n sticky: false,\n lock: false,\n dataSource: dataSource(50),\n }\n onSwitch(tag) {\n const props = {};\n switch (tag) {\n case 'sticky':\n props.sticky = true;\n break;\n case 'lock':\n props.lock = true;\n break;\n case 'dataSource':\n props.dataSource = this.state.dataSource.length > 0 ? [] : dataSource(50);\n break;\n default:\n break;\n }\n\n this.setState(props);\n }\n render() {\n return (
    \n

    \n  \n  \n \n

    \n \n \n \n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Table, Button } from '@alifd/next';\n\nconst dataSource = (length) => {\n    const result = [];\n    for (let i = 0; i < length; i++) {\n        result.push({\n            title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n            id: 100306660940 + i,\n            time: 2000 + i\n        });\n    }\n    return result;\n};\n\nclass App extends React.Component {\n    state = {\n        sticky: false,\n        lock: false,\n        dataSource: dataSource(50),\n    }\n    onSwitch(tag) {\n        const props = {};\n        switch (tag) {\n            case 'sticky':\n                props.sticky = true;\n                break;\n            case 'lock':\n                props.lock = true;\n                break;\n            case 'dataSource':\n                props.dataSource = this.state.dataSource.length > 0 ? [] : dataSource(50);\n                break;\n            default:\n                break;\n        }\n\n        this.setState(props);\n    }\n    render() {\n        return (<div>\n            <p>\n                <Button onClick={this.onSwitch.bind(this, 'sticky')}>enable sticky</Button>  &nbsp;\n                <Button onClick={this.onSwitch.bind(this, 'lock')}>enable lock</Button>  &nbsp;\n                <Button onClick={this.onSwitch.bind(this, 'dataSource')}>toggle dataSource</Button>\n            </p>\n            <Table dataSource={this.state.dataSource} fixedHeader stickyHeader={this.state.sticky}>\n                <Table.Column title=\"Id\" dataIndex=\"id\" width={200} lock={this.state.lock}/>\n                <Table.Column title=\"Title\" dataIndex=\"title.name\" width={200}/>\n                <Table.Column title=\"Time\" dataIndex=\"time\" width={200}/>\n            </Table>\n        </div>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/fixed-header.md b/compiled_docs/table/demo/fixed-header.md new file mode 100644 index 0000000000..0676c631b8 --- /dev/null +++ b/compiled_docs/table/demo/fixed-header.md @@ -0,0 +1 @@ +{"title":"固定表头","meta":{"title":"固定表头","description":"\n

    表格可以固定表头,支持sticky方式

    \n","order":"9"},"codes":{"jsx":"import { Table, Button } from '@alifd/next';\n\nconst dataSource = (length) => {\n const result = [];\n for (let i = 0; i < length; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n};\n\nclass App extends React.Component {\n state = {\n sticky: false,\n lock: false,\n dataSource: dataSource(50),\n }\n onSwitch(tag) {\n const props = {};\n switch (tag) {\n case 'sticky':\n props.sticky = true;\n break;\n case 'lock':\n props.lock = true;\n break;\n case 'dataSource':\n props.dataSource = this.state.dataSource.length > 0 ? [] : dataSource(50);\n break;\n default:\n break;\n }\n\n this.setState(props);\n }\n render() {\n return (
    \n

    \n  \n  \n \n

    \n \n \n \n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Table, Button } from '@alifd/next';\n\nconst dataSource = (length) => {\n const result = [];\n for (let i = 0; i < length; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n};\n\nclass App extends React.Component {\n state = {\n sticky: false,\n lock: false,\n dataSource: dataSource(50),\n }\n onSwitch(tag) {\n const props = {};\n switch (tag) {\n case 'sticky':\n props.sticky = true;\n break;\n case 'lock':\n props.lock = true;\n break;\n case 'dataSource':\n props.dataSource = this.state.dataSource.length > 0 ? [] : dataSource(50);\n break;\n default:\n break;\n }\n\n this.setState(props);\n }\n render() {\n return (
    \n

    \n  \n  \n \n

    \n \n \n \n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Table, Button } from '@alifd/next';\n\nconst dataSource = (length) => {\n    const result = [];\n    for (let i = 0; i < length; i++) {\n        result.push({\n            title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n            id: 100306660940 + i,\n            time: 2000 + i\n        });\n    }\n    return result;\n};\n\nclass App extends React.Component {\n    state = {\n        sticky: false,\n        lock: false,\n        dataSource: dataSource(50),\n    }\n    onSwitch(tag) {\n        const props = {};\n        switch (tag) {\n            case 'sticky':\n                props.sticky = true;\n                break;\n            case 'lock':\n                props.lock = true;\n                break;\n            case 'dataSource':\n                props.dataSource = this.state.dataSource.length > 0 ? [] : dataSource(50);\n                break;\n            default:\n                break;\n        }\n\n        this.setState(props);\n    }\n    render() {\n        return (<div>\n            <p>\n                <Button onClick={this.onSwitch.bind(this, 'sticky')}>enable sticky</Button>  &nbsp;\n                <Button onClick={this.onSwitch.bind(this, 'lock')}>enable lock</Button>  &nbsp;\n                <Button onClick={this.onSwitch.bind(this, 'dataSource')}>toggle dataSource</Button>\n            </p>\n            <Table dataSource={this.state.dataSource} fixedHeader stickyHeader={this.state.sticky}>\n                <Table.Column title=\"Id\" dataIndex=\"id\" width={200} lock={this.state.lock}/>\n                <Table.Column title=\"Title\" dataIndex=\"title.name\" width={200}/>\n                <Table.Column title=\"Time\" dataIndex=\"time\" width={200}/>\n            </Table>\n        </div>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/get-row-props.en-us.md b/compiled_docs/table/demo/get-row-props.en-us.md new file mode 100644 index 0000000000..9ddadd50c9 --- /dev/null +++ b/compiled_docs/table/demo/get-row-props.en-us.md @@ -0,0 +1 @@ +{"title":"custom Row/Cell","meta":{"title":"custom Row/Cell","description":"\n"},"codes":{"jsx":"import { Table } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n};\n\nconst propsConf = {\n className: 'next-myclass',\n style: {background: 'black', color: 'white'},\n onDoubleClick: () => {\n console.log('doubleClicked');\n }\n};\n\nconst setRowProps = (record, index) => {\n if (index === 2) {\n return propsConf;\n }\n};\n\nconst setCellProps = (rowIndex, colIndex, dataIndex, record) => {\n if (rowIndex === 0 && colIndex === 0) {\n console.log(record);\n return propsConf;\n }\n};\n\nReactDOM.render(\n \n \n \n
    , mountNode);\n"},"body":"\n````jsx\nimport { Table } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n};\n\nconst propsConf = {\n className: 'next-myclass',\n style: {background: 'black', color: 'white'},\n onDoubleClick: () => {\n console.log('doubleClicked');\n }\n};\n\nconst setRowProps = (record, index) => {\n if (index === 2) {\n return propsConf;\n }\n};\n\nconst setCellProps = (rowIndex, colIndex, dataIndex, record) => {\n if (rowIndex === 0 && colIndex === 0) {\n console.log(record);\n return propsConf;\n }\n};\n\nReactDOM.render(\n \n \n \n
    , mountNode);\n````","html":"
    import { Table } from '@alifd/next';\n\nconst dataSource = () => {\n    const result = [];\n    for (let i = 0; i < 5; i++) {\n        result.push({\n            title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n            id: 100306660940 + i,\n            time: 2000 + i\n        });\n    }\n    return result;\n};\n\nconst propsConf = {\n    className: 'next-myclass',\n    style: {background: 'black', color: 'white'},\n    onDoubleClick: () => {\n        console.log('doubleClicked');\n    }\n};\n\nconst setRowProps = (record, index) => {\n    if (index === 2) {\n        return propsConf;\n    }\n};\n\nconst setCellProps = (rowIndex, colIndex, dataIndex, record) => {\n    if (rowIndex === 0 && colIndex === 0) {\n        console.log(record);\n        return propsConf;\n    }\n};\n\nReactDOM.render(<Table dataSource={dataSource()} getRowProps={setRowProps} getCellProps={setCellProps}>\n    <Table.Column title=\"Id\" dataIndex=\"id\"/>\n    <Table.Column title=\"Title\" dataIndex=\"title.name\" />\n    <Table.Column title=\"Time\" dataIndex=\"time\"/>\n</Table>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/get-row-props.md b/compiled_docs/table/demo/get-row-props.md new file mode 100644 index 0000000000..00f9e66080 --- /dev/null +++ b/compiled_docs/table/demo/get-row-props.md @@ -0,0 +1 @@ +{"title":"自定义Row/Cell","meta":{"title":"自定义Row/Cell","description":"\n

    可以重写部分原生属性，比如className style onDoubleClick等。

    \n","order":"21"},"codes":{"jsx":"import { Table } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n};\n\nconst propsConf = {\n className: 'next-myclass',\n style: {background: 'black', color: 'white'},\n onDoubleClick: () => {\n console.log('doubleClicked');\n }\n};\n\nconst setRowProps = (record, index) => {\n if (index === 2) {\n return propsConf;\n }\n};\n\nconst setCellProps = (rowIndex, colIndex, dataIndex, record) => {\n if (rowIndex === 0 && colIndex === 0) {\n console.log(record);\n return propsConf;\n }\n};\n\nReactDOM.render(\n \n \n \n
    , mountNode);\n"},"body":"\n\n````jsx\nimport { Table } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n};\n\nconst propsConf = {\n className: 'next-myclass',\n style: {background: 'black', color: 'white'},\n onDoubleClick: () => {\n console.log('doubleClicked');\n }\n};\n\nconst setRowProps = (record, index) => {\n if (index === 2) {\n return propsConf;\n }\n};\n\nconst setCellProps = (rowIndex, colIndex, dataIndex, record) => {\n if (rowIndex === 0 && colIndex === 0) {\n console.log(record);\n return propsConf;\n }\n};\n\nReactDOM.render(\n \n \n \n
    , mountNode);\n````","html":"
    import { Table } from '@alifd/next';\n\nconst dataSource = () => {\n    const result = [];\n    for (let i = 0; i < 5; i++) {\n        result.push({\n            title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n            id: 100306660940 + i,\n            time: 2000 + i\n        });\n    }\n    return result;\n};\n\nconst propsConf = {\n    className: 'next-myclass',\n    style: {background: 'black', color: 'white'},\n    onDoubleClick: () => {\n        console.log('doubleClicked');\n    }\n};\n\nconst setRowProps = (record, index) => {\n    if (index === 2) {\n        return propsConf;\n    }\n};\n\nconst setCellProps = (rowIndex, colIndex, dataIndex, record) => {\n    if (rowIndex === 0 && colIndex === 0) {\n        console.log(record);\n        return propsConf;\n    }\n};\n\nReactDOM.render(<Table dataSource={dataSource()} getRowProps={setRowProps} getCellProps={setCellProps}>\n    <Table.Column title=\"Id\" dataIndex=\"id\"/>\n    <Table.Column title=\"Title\" dataIndex=\"title.name\" />\n    <Table.Column title=\"Time\" dataIndex=\"time\"/>\n</Table>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/list.en-us.md b/compiled_docs/table/demo/list.en-us.md new file mode 100644 index 0000000000..509d269d86 --- /dev/null +++ b/compiled_docs/table/demo/list.en-us.md @@ -0,0 +1 @@ +{"title":"Group list","meta":{"title":"Group list","description":"\n

    Demo the Group list.

    \n","order":"10"},"codes":{"jsx":"import { Table, Button } from '@alifd/next';\n\nconst dataSource = [{\n price: 'US $1',\n status: 1,\n parent: 'root',\n id: 1,\n product: [{\n title: '2014 New Fashion Novelty Tank Slim Women\\'s Fashion Dresses With Lace',\n avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg'\n }],\n children: [{\n price: 'US $1-1',\n status: 11,\n id: 2,\n parent: 0,\n index: 0,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $1-2',\n status: 12,\n id: 3,\n parent: 0,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $1-3',\n status: 13,\n id: 7,\n parent: 0,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }]\n }, {\n price: 'US $3',\n status: 3,\n parent: 'root',\n id: 3,\n product: [{\n title: '2014 New Fashion Novelty Tank Slim Women\\'s Fashion Dresses With Lace',\n avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg'\n }],\n children: [{\n price: 'US $3-1',\n status: 31,\n id: 31,\n parent: 1,\n index: 0,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $3-2',\n status: 32,\n id: 32,\n parent: 1,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $3-3',\n status: 33,\n id: 33,\n parent: 1,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $3-4',\n status: 34,\n id: 34,\n parent: 1,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }]\n }, {\n price: 'US $4',\n status: 4,\n parent: 'root',\n id: 4,\n product: [{\n title: '2014 New Fashion Novelty Tank Slim Women\\'s Fashion Dresses With Lace',\n avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg'\n }],\n children: [{\n price: 'US $4-1',\n status: 31,\n id: 31,\n parent: 2,\n index: 0,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $4-2',\n status: 32,\n id: 32,\n parent: 2,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $4-3',\n status: 33,\n id: 33,\n parent: 2,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }]\n }],\n productRender = function(product) {\n return (
    \n \n
    {product[0].title}
    \n
    );\n },\n priceRender = function(price) {\n return {price};\n },\n statusRender = function(status) {\n if (status) {\n return 'Already Priced';\n } else {\n return 'No Priced';\n }\n },\n operRender = function() {\n return View;\n },\n groupHeaderRender = function(record) {\n return
    {record.product[0].title}
    ;\n },\n rowSelection = {\n onChange: function(selectedKeys) {\n console.log(selectedKeys);\n }\n };\n\nconst getCellProps = (rowIndex, colIndex, dataIndex, record) => {\n if (colIndex === 3 && record.index === 0 ) {\n\t\treturn {\n rowSpan: dataSource[record.parent].children.length\n };\n }\n\n if (colIndex === 4 && record.index === 0 ) {\n\t\treturn {\n rowSpan: dataSource[record.parent].children.length\n };\n }\n};\n\nclass App extends React.Component {\n state = {\n hasSelection: false\n }\n\n toggleGroupSelection = () => {\n this.setState({\n hasSelection: !this.state.hasSelection\n });\n }\n render() {\n return (\n
    \n

    \n \n \n \n \n \n \n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".media-side{\n width:48px;\n height:48px;\n float:left;\n margin-right:10px;\n}\n.media-content{\n overflow: hidden;\n vertical-align: top;\n}\n.media{\n overflow: hidden;\n}\n"},"body":"\n````jsx\nimport { Table, Button } from '@alifd/next';\n\nconst dataSource = [{\n price: 'US $1',\n status: 1,\n parent: 'root',\n id: 1,\n product: [{\n title: '2014 New Fashion Novelty Tank Slim Women\\'s Fashion Dresses With Lace',\n avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg'\n }],\n children: [{\n price: 'US $1-1',\n status: 11,\n id: 2,\n parent: 0,\n index: 0,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $1-2',\n status: 12,\n id: 3,\n parent: 0,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $1-3',\n status: 13,\n id: 7,\n parent: 0,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }]\n }, {\n price: 'US $3',\n status: 3,\n parent: 'root',\n id: 3,\n product: [{\n title: '2014 New Fashion Novelty Tank Slim Women\\'s Fashion Dresses With Lace',\n avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg'\n }],\n children: [{\n price: 'US $3-1',\n status: 31,\n id: 31,\n parent: 1,\n index: 0,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $3-2',\n status: 32,\n id: 32,\n parent: 1,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $3-3',\n status: 33,\n id: 33,\n parent: 1,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $3-4',\n status: 34,\n id: 34,\n parent: 1,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }]\n }, {\n price: 'US $4',\n status: 4,\n parent: 'root',\n id: 4,\n product: [{\n title: '2014 New Fashion Novelty Tank Slim Women\\'s Fashion Dresses With Lace',\n avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg'\n }],\n children: [{\n price: 'US $4-1',\n status: 31,\n id: 31,\n parent: 2,\n index: 0,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $4-2',\n status: 32,\n id: 32,\n parent: 2,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $4-3',\n status: 33,\n id: 33,\n parent: 2,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }]\n }],\n productRender = function(product) {\n return (
    \n \n
    {product[0].title}
    \n
    );\n },\n priceRender = function(price) {\n return {price};\n },\n statusRender = function(status) {\n if (status) {\n return 'Already Priced';\n } else {\n return 'No Priced';\n }\n },\n operRender = function() {\n return View;\n },\n groupHeaderRender = function(record) {\n return
    {record.product[0].title}
    ;\n },\n rowSelection = {\n onChange: function(selectedKeys) {\n console.log(selectedKeys);\n }\n };\n\nconst getCellProps = (rowIndex, colIndex, dataIndex, record) => {\n if (colIndex === 3 && record.index === 0 ) {\n\t\treturn {\n rowSpan: dataSource[record.parent].children.length\n };\n }\n\n if (colIndex === 4 && record.index === 0 ) {\n\t\treturn {\n rowSpan: dataSource[record.parent].children.length\n };\n }\n};\n\nclass App extends React.Component {\n state = {\n hasSelection: false\n }\n\n toggleGroupSelection = () => {\n this.setState({\n hasSelection: !this.state.hasSelection\n });\n }\n render() {\n return (\n
    \n

    \n \n \n \n \n \n \n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.media-side{\n width:48px;\n height:48px;\n float:left;\n margin-right:10px;\n}\n.media-content{\n overflow: hidden;\n vertical-align: top;\n}\n.media{\n overflow: hidden;\n}\n````","html":"
    import { Table, Button } from '@alifd/next';\n\nconst dataSource = [{\n        price: 'US $1',\n        status: 1,\n        parent: 'root',\n        id: 1,\n        product: [{\n            title: '2014 New Fashion Novelty Tank Slim Women\\'s Fashion Dresses With Lace',\n            avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg'\n        }],\n        children: [{\n            price: 'US $1-1',\n            status: 11,\n            id: 2,\n            parent: 0,\n            index: 0,\n            product: [{\n                title: 'Free shipping women Casual dresses lady dress plus size 2014',\n                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n            }]\n        }, {\n            price: 'US $1-2',\n            status: 12,\n            id: 3,\n            parent: 0,\n            product: [{\n                title: 'Free shipping women Casual dresses lady dress plus size 2014',\n                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n            }]\n        }, {\n            price: 'US $1-3',\n            status: 13,\n            id: 7,\n            parent: 0,\n            product: [{\n                title: 'Free shipping women Casual dresses lady dress plus size 2014',\n                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n            }]\n        }]\n    }, {\n        price: 'US $3',\n        status: 3,\n        parent: 'root',\n        id: 3,\n        product: [{\n            title: '2014 New Fashion Novelty Tank Slim Women\\'s Fashion Dresses With Lace',\n            avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg'\n        }],\n        children: [{\n            price: 'US $3-1',\n            status: 31,\n            id: 31,\n            parent: 1,\n            index: 0,\n            product: [{\n                title: 'Free shipping women Casual dresses lady dress plus size 2014',\n                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n            }]\n        }, {\n            price: 'US $3-2',\n            status: 32,\n            id: 32,\n            parent: 1,\n            product: [{\n                title: 'Free shipping women Casual dresses lady dress plus size 2014',\n                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n            }]\n        }, {\n            price: 'US $3-3',\n            status: 33,\n            id: 33,\n            parent: 1,\n            product: [{\n                title: 'Free shipping women Casual dresses lady dress plus size 2014',\n                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n            }]\n        }, {\n            price: 'US $3-4',\n            status: 34,\n            id: 34,\n            parent: 1,\n            product: [{\n                title: 'Free shipping women Casual dresses lady dress plus size 2014',\n                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n            }]\n        }]\n    }, {\n        price: 'US $4',\n        status: 4,\n        parent: 'root',\n        id: 4,\n        product: [{\n            title: '2014 New Fashion Novelty Tank Slim Women\\'s Fashion Dresses With Lace',\n            avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg'\n        }],\n        children: [{\n            price: 'US $4-1',\n            status: 31,\n            id: 31,\n            parent: 2,\n            index: 0,\n            product: [{\n                title: 'Free shipping women Casual dresses lady dress plus size 2014',\n                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n            }]\n        }, {\n            price: 'US $4-2',\n            status: 32,\n            id: 32,\n            parent: 2,\n            product: [{\n                title: 'Free shipping women Casual dresses lady dress plus size 2014',\n                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n            }]\n        }, {\n            price: 'US $4-3',\n            status: 33,\n            id: 33,\n            parent: 2,\n            product: [{\n                title: 'Free shipping women Casual dresses lady dress plus size 2014',\n                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n            }]\n        }]\n    }],\n    productRender = function(product) {\n        return (<div className=\"media\">\n            <img src={product[0].avatar} className=\"media-side\"/>\n            <div className=\"media-content\">{product[0].title}</div>\n        </div>);\n    },\n    priceRender = function(price) {\n        return <b>{price}</b>;\n    },\n    statusRender = function(status) {\n        if (status) {\n            return 'Already Priced';\n        } else {\n            return 'No Priced';\n        }\n    },\n    operRender = function() {\n        return <a href=\"javascript:;\">View</a>;\n    },\n    groupHeaderRender = function(record) {\n        return <div>{record.product[0].title}</div>;\n    },\n    rowSelection = {\n        onChange: function(selectedKeys) {\n            console.log(selectedKeys);\n        }\n    };\n\nconst getCellProps = (rowIndex, colIndex, dataIndex, record) => {\n    if (colIndex === 3 && record.index === 0 ) {\n        return {\n        rowSpan: dataSource[record.parent].children.length\n      };\n    }\n\n    if (colIndex === 4 && record.index === 0 ) {\n        return {\n        rowSpan: dataSource[record.parent].children.length\n      };\n    }\n};\n\nclass App extends React.Component {\n    state = {\n        hasSelection: false\n    }\n\n    toggleGroupSelection = () => {\n        this.setState({\n            hasSelection: !this.state.hasSelection\n        });\n    }\n    render() {\n        return (\n            <div>\n                <p><Button onClick={this.toggleGroupSelection}>Toggle GroupHeader Selection</Button></p>\n                <Table dataSource={dataSource} rowSelection={rowSelection} getCellProps={getCellProps}>\n                    <Table.GroupHeader cell={groupHeaderRender} hasChildrenSelection={this.state.hasSelection}/>\n                    <Table.GroupFooter cell={groupHeaderRender}/>\n                    <Table.Column cell={productRender} title=\"Product Details\" dataIndex=\"product\"/>\n                    <Table.Column cell={priceRender} title=\"Price\" dataIndex=\"price\" width={120}/>\n                    <Table.Column cell={statusRender} title=\"Status\" dataIndex=\"status\" width={100}/>\n                    <Table.Column cell={operRender} title=\"Operation\" width={100}/>\n                </Table>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    .media-side{\n    width:48px;\n    height:48px;\n    float:left;\n    margin-right:10px;\n}\n.media-content{\n    overflow: hidden;\n    vertical-align: top;\n}\n.media{\n    overflow: hidden;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/list.md b/compiled_docs/table/demo/list.md new file mode 100644 index 0000000000..fd727669e5 --- /dev/null +++ b/compiled_docs/table/demo/list.md @@ -0,0 +1 @@ +{"title":"分组列表","meta":{"title":"分组列表","description":"\n

    分组列表展现

    \n","order":"10"},"codes":{"jsx":"import { Table, Button } from '@alifd/next';\n\nconst dataSource = [{\n price: 'US $1',\n status: 1,\n parent: 'root',\n id: 1,\n product: [{\n title: '2014 New Fashion Novelty Tank Slim Women\\'s Fashion Dresses With Lace',\n avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg'\n }],\n children: [{\n price: 'US $1-1',\n status: 11,\n id: 2,\n parent: 0,\n index: 0,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $1-2',\n status: 12,\n id: 3,\n parent: 0,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $1-3',\n status: 13,\n id: 7,\n parent: 0,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }]\n }, {\n price: 'US $3',\n status: 3,\n parent: 'root',\n id: 3,\n product: [{\n title: '2014 New Fashion Novelty Tank Slim Women\\'s Fashion Dresses With Lace',\n avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg'\n }],\n children: [{\n price: 'US $3-1',\n status: 31,\n id: 31,\n parent: 1,\n index: 0,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $3-2',\n status: 32,\n id: 32,\n parent: 1,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $3-3',\n status: 33,\n id: 33,\n parent: 1,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $3-4',\n status: 34,\n id: 34,\n parent: 1,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }]\n }, {\n price: 'US $4',\n status: 4,\n parent: 'root',\n id: 4,\n product: [{\n title: '2014 New Fashion Novelty Tank Slim Women\\'s Fashion Dresses With Lace',\n avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg'\n }],\n children: [{\n price: 'US $4-1',\n status: 31,\n id: 31,\n parent: 2,\n index: 0,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $4-2',\n status: 32,\n id: 32,\n parent: 2,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $4-3',\n status: 33,\n id: 33,\n parent: 2,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }]\n }],\n productRender = function(product) {\n return (
    \n \n
    {product[0].title}
    \n
    );\n },\n priceRender = function(price) {\n return {price};\n },\n statusRender = function(status) {\n if (status) {\n return 'Already Priced';\n } else {\n return 'No Priced';\n }\n },\n operRender = function() {\n return View;\n },\n groupHeaderRender = function(record) {\n return
    {record.product[0].title}
    ;\n },\n rowSelection = {\n onChange: function(selectedKeys) {\n console.log(selectedKeys);\n }\n };\n\nconst getCellProps = (rowIndex, colIndex, dataIndex, record) => {\n if (colIndex === 3 && record.index === 0 ) {\n\t\treturn {\n rowSpan: dataSource[record.parent].children.length\n };\n }\n\n if (colIndex === 4 && record.index === 0 ) {\n\t\treturn {\n rowSpan: dataSource[record.parent].children.length\n };\n }\n};\n\nclass App extends React.Component {\n state = {\n hasSelection: false\n }\n\n toggleGroupSelection = () => {\n this.setState({\n hasSelection: !this.state.hasSelection\n });\n }\n render() {\n return (\n
    \n

    \n \n \n \n \n \n \n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".media-side{\n width:48px;\n height:48px;\n float:left;\n margin-right:10px;\n}\n.media-content{\n overflow: hidden;\n vertical-align: top;\n}\n.media{\n overflow: hidden;\n}\n"},"body":"\n\n````jsx\nimport { Table, Button } from '@alifd/next';\n\nconst dataSource = [{\n price: 'US $1',\n status: 1,\n parent: 'root',\n id: 1,\n product: [{\n title: '2014 New Fashion Novelty Tank Slim Women\\'s Fashion Dresses With Lace',\n avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg'\n }],\n children: [{\n price: 'US $1-1',\n status: 11,\n id: 2,\n parent: 0,\n index: 0,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $1-2',\n status: 12,\n id: 3,\n parent: 0,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $1-3',\n status: 13,\n id: 7,\n parent: 0,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }]\n }, {\n price: 'US $3',\n status: 3,\n parent: 'root',\n id: 3,\n product: [{\n title: '2014 New Fashion Novelty Tank Slim Women\\'s Fashion Dresses With Lace',\n avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg'\n }],\n children: [{\n price: 'US $3-1',\n status: 31,\n id: 31,\n parent: 1,\n index: 0,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $3-2',\n status: 32,\n id: 32,\n parent: 1,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $3-3',\n status: 33,\n id: 33,\n parent: 1,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $3-4',\n status: 34,\n id: 34,\n parent: 1,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }]\n }, {\n price: 'US $4',\n status: 4,\n parent: 'root',\n id: 4,\n product: [{\n title: '2014 New Fashion Novelty Tank Slim Women\\'s Fashion Dresses With Lace',\n avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg'\n }],\n children: [{\n price: 'US $4-1',\n status: 31,\n id: 31,\n parent: 2,\n index: 0,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $4-2',\n status: 32,\n id: 32,\n parent: 2,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }, {\n price: 'US $4-3',\n status: 33,\n id: 33,\n parent: 2,\n product: [{\n title: 'Free shipping women Casual dresses lady dress plus size 2014',\n avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n }]\n }]\n }],\n productRender = function(product) {\n return (
    \n \n
    {product[0].title}
    \n
    );\n },\n priceRender = function(price) {\n return {price};\n },\n statusRender = function(status) {\n if (status) {\n return 'Already Priced';\n } else {\n return 'No Priced';\n }\n },\n operRender = function() {\n return View;\n },\n groupHeaderRender = function(record) {\n return
    {record.product[0].title}
    ;\n },\n rowSelection = {\n onChange: function(selectedKeys) {\n console.log(selectedKeys);\n }\n };\n\nconst getCellProps = (rowIndex, colIndex, dataIndex, record) => {\n if (colIndex === 3 && record.index === 0 ) {\n\t\treturn {\n rowSpan: dataSource[record.parent].children.length\n };\n }\n\n if (colIndex === 4 && record.index === 0 ) {\n\t\treturn {\n rowSpan: dataSource[record.parent].children.length\n };\n }\n};\n\nclass App extends React.Component {\n state = {\n hasSelection: false\n }\n\n toggleGroupSelection = () => {\n this.setState({\n hasSelection: !this.state.hasSelection\n });\n }\n render() {\n return (\n
    \n

    \n \n \n \n \n \n \n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.media-side{\n width:48px;\n height:48px;\n float:left;\n margin-right:10px;\n}\n.media-content{\n overflow: hidden;\n vertical-align: top;\n}\n.media{\n overflow: hidden;\n}\n````","html":"
    import { Table, Button } from '@alifd/next';\n\nconst dataSource = [{\n        price: 'US $1',\n        status: 1,\n        parent: 'root',\n        id: 1,\n        product: [{\n            title: '2014 New Fashion Novelty Tank Slim Women\\'s Fashion Dresses With Lace',\n            avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg'\n        }],\n        children: [{\n            price: 'US $1-1',\n            status: 11,\n            id: 2,\n            parent: 0,\n            index: 0,\n            product: [{\n                title: 'Free shipping women Casual dresses lady dress plus size 2014',\n                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n            }]\n        }, {\n            price: 'US $1-2',\n            status: 12,\n            id: 3,\n            parent: 0,\n            product: [{\n                title: 'Free shipping women Casual dresses lady dress plus size 2014',\n                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n            }]\n        }, {\n            price: 'US $1-3',\n            status: 13,\n            id: 7,\n            parent: 0,\n            product: [{\n                title: 'Free shipping women Casual dresses lady dress plus size 2014',\n                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n            }]\n        }]\n    }, {\n        price: 'US $3',\n        status: 3,\n        parent: 'root',\n        id: 3,\n        product: [{\n            title: '2014 New Fashion Novelty Tank Slim Women\\'s Fashion Dresses With Lace',\n            avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg'\n        }],\n        children: [{\n            price: 'US $3-1',\n            status: 31,\n            id: 31,\n            parent: 1,\n            index: 0,\n            product: [{\n                title: 'Free shipping women Casual dresses lady dress plus size 2014',\n                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n            }]\n        }, {\n            price: 'US $3-2',\n            status: 32,\n            id: 32,\n            parent: 1,\n            product: [{\n                title: 'Free shipping women Casual dresses lady dress plus size 2014',\n                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n            }]\n        }, {\n            price: 'US $3-3',\n            status: 33,\n            id: 33,\n            parent: 1,\n            product: [{\n                title: 'Free shipping women Casual dresses lady dress plus size 2014',\n                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n            }]\n        }, {\n            price: 'US $3-4',\n            status: 34,\n            id: 34,\n            parent: 1,\n            product: [{\n                title: 'Free shipping women Casual dresses lady dress plus size 2014',\n                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n            }]\n        }]\n    }, {\n        price: 'US $4',\n        status: 4,\n        parent: 'root',\n        id: 4,\n        product: [{\n            title: '2014 New Fashion Novelty Tank Slim Women\\'s Fashion Dresses With Lace',\n            avatar: 'https://sc01.alicdn.com/kf/HTB1ravHKXXXXXccXVXXq6xXFXXXJ/Chinese-Style-Fashion-Custom-Digital-Print-Silk.jpg_220x220.jpg'\n        }],\n        children: [{\n            price: 'US $4-1',\n            status: 31,\n            id: 31,\n            parent: 2,\n            index: 0,\n            product: [{\n                title: 'Free shipping women Casual dresses lady dress plus size 2014',\n                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n            }]\n        }, {\n            price: 'US $4-2',\n            status: 32,\n            id: 32,\n            parent: 2,\n            product: [{\n                title: 'Free shipping women Casual dresses lady dress plus size 2014',\n                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n            }]\n        }, {\n            price: 'US $4-3',\n            status: 33,\n            id: 33,\n            parent: 2,\n            product: [{\n                title: 'Free shipping women Casual dresses lady dress plus size 2014',\n                avatar: 'https://sc02.alicdn.com/kf/HTB1efnNLVXXXXbtXpXXq6xXFXXXN/Light-100-acrylic-fashionabe-snood-shawl-weight.jpg_220x220.jpg'\n            }]\n        }]\n    }],\n    productRender = function(product) {\n        return (<div className=\"media\">\n            <img src={product[0].avatar} className=\"media-side\"/>\n            <div className=\"media-content\">{product[0].title}</div>\n        </div>);\n    },\n    priceRender = function(price) {\n        return <b>{price}</b>;\n    },\n    statusRender = function(status) {\n        if (status) {\n            return 'Already Priced';\n        } else {\n            return 'No Priced';\n        }\n    },\n    operRender = function() {\n        return <a href=\"javascript:;\">View</a>;\n    },\n    groupHeaderRender = function(record) {\n        return <div>{record.product[0].title}</div>;\n    },\n    rowSelection = {\n        onChange: function(selectedKeys) {\n            console.log(selectedKeys);\n        }\n    };\n\nconst getCellProps = (rowIndex, colIndex, dataIndex, record) => {\n    if (colIndex === 3 && record.index === 0 ) {\n        return {\n        rowSpan: dataSource[record.parent].children.length\n      };\n    }\n\n    if (colIndex === 4 && record.index === 0 ) {\n        return {\n        rowSpan: dataSource[record.parent].children.length\n      };\n    }\n};\n\nclass App extends React.Component {\n    state = {\n        hasSelection: false\n    }\n\n    toggleGroupSelection = () => {\n        this.setState({\n            hasSelection: !this.state.hasSelection\n        });\n    }\n    render() {\n        return (\n            <div>\n                <p><Button onClick={this.toggleGroupSelection}>Toggle GroupHeader Selection</Button></p>\n                <Table dataSource={dataSource} rowSelection={rowSelection} getCellProps={getCellProps}>\n                    <Table.GroupHeader cell={groupHeaderRender} hasChildrenSelection={this.state.hasSelection}/>\n                    <Table.GroupFooter cell={groupHeaderRender}/>\n                    <Table.Column cell={productRender} title=\"Product Details\" dataIndex=\"product\"/>\n                    <Table.Column cell={priceRender} title=\"Price\" dataIndex=\"price\" width={120}/>\n                    <Table.Column cell={statusRender} title=\"Status\" dataIndex=\"status\" width={100}/>\n                    <Table.Column cell={operRender} title=\"Operation\" width={100}/>\n                </Table>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    .media-side{\n    width:48px;\n    height:48px;\n    float:left;\n    margin-right:10px;\n}\n.media-content{\n    overflow: hidden;\n    vertical-align: top;\n}\n.media{\n    overflow: hidden;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/lock-column.en-us.md b/compiled_docs/table/demo/lock-column.en-us.md new file mode 100644 index 0000000000..b91746ecb0 --- /dev/null +++ b/compiled_docs/table/demo/lock-column.en-us.md @@ -0,0 +1 @@ +{"title":"Lock column","meta":{"title":"Lock column","description":"\n

    Demo the function of lock columns.

    \n","order":"14"},"codes":{"jsx":"import { Table, Button } from '@alifd/next';\n\nconst onRowClick = function(record, index, e) {\n console.log(record, index, e);\n },\n dataSource = () => {\n const result = [];\n for (let i = 0; i < 100; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n state = {\n dataSource: [],\n cols: [\n ,\n \n \n \n ,\n \n ],\n loading: true\n }\n componentDidMount() {\n setTimeout(() => {\n this.setState({\n dataSource: dataSource(),\n loading: false\n });\n }, 200);\n }\n reduceCol = () => {\n this.setState({\n cols: [,\n ]\n });\n }\n render() {\n return (\n
    \n

    \n \n \n {this.state.cols}\n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Table, Button } from '@alifd/next';\n\nconst onRowClick = function(record, index, e) {\n console.log(record, index, e);\n },\n dataSource = () => {\n const result = [];\n for (let i = 0; i < 100; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n state = {\n dataSource: [],\n cols: [\n ,\n \n \n \n ,\n \n ],\n loading: true\n }\n componentDidMount() {\n setTimeout(() => {\n this.setState({\n dataSource: dataSource(),\n loading: false\n });\n }, 200);\n }\n reduceCol = () => {\n this.setState({\n cols: [,\n ]\n });\n }\n render() {\n return (\n
    \n

    \n \n \n {this.state.cols}\n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Table, Button } from '@alifd/next';\n\nconst onRowClick = function(record, index, e) {\n        console.log(record, index, e);\n    },\n    dataSource = () => {\n        const result = [];\n        for (let i = 0; i < 100; i++) {\n            result.push({\n                title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n                id: 100306660940 + i,\n                time: 2000 + i\n            });\n        }\n        return result;\n    },\n    render = (value, index, record) => {\n        return <a>Remove({record.id})</a>;\n    };\n\nclass App extends React.Component {\n    state = {\n        dataSource: [],\n        cols: [\n            <Table.Column title=\"Title\" dataIndex=\"title.name\" width={400} key=\"name1\" lock/>,\n            <Table.ColumnGroup title=\"abc\" key=\"name-group\">\n                <Table.Column title=\"Title\" dataIndex=\"title.name\" width={100} key=\"name2\"/>\n                <Table.Column title=\"Title\" dataIndex=\"title.name\" width={400} key=\"name3\"/>\n            </Table.ColumnGroup>,\n            <Table.Column title=\"Time\" dataIndex=\"time\" width={500} key=\"time\"/>\n        ],\n        loading: true\n    }\n    componentDidMount() {\n        setTimeout(() => {\n            this.setState({\n                dataSource: dataSource(),\n                loading: false\n            });\n        }, 200);\n    }\n    reduceCol = () => {\n        this.setState({\n            cols: [<Table.Column title=\"Title\" dataIndex=\"title.name\" width={400} key=\"name1\" lock/>,\n                <Table.Column title=\"Time\" dataIndex=\"time\" width={100} key=\"time\"/>]\n        });\n    }\n    render() {\n        return (\n            <div>\n                <p><Button onClick={this.reduceCol}>Reduce Cols</Button></p>\n                <Table dataSource={this.state.dataSource} onRowClick={onRowClick} fixedHeader loading={this.state.loading}>\n                    <Table.Column title=\"Id-Id-Id-Id-Id-Id-Id-Id-Id-Id-Id-Id\" dataIndex=\"id\" lock width={140}/>\n                    {this.state.cols}\n                    <Table.Column cell={render} width={200}/>\n                </Table>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/lock-column.md b/compiled_docs/table/demo/lock-column.md new file mode 100644 index 0000000000..26b78f5bc5 --- /dev/null +++ b/compiled_docs/table/demo/lock-column.md @@ -0,0 +1 @@ +{"title":"锁列","meta":{"title":"锁列","description":"\n

    演示表格锁列的功能

    \n","order":"14"},"codes":{"jsx":"import { Table, Button } from '@alifd/next';\n\nconst onRowClick = function(record, index, e) {\n console.log(record, index, e);\n },\n dataSource = () => {\n const result = [];\n for (let i = 0; i < 100; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n state = {\n dataSource: [],\n cols: [\n ,\n \n \n \n ,\n \n ],\n loading: true\n }\n componentDidMount() {\n setTimeout(() => {\n this.setState({\n dataSource: dataSource(),\n loading: false\n });\n }, 200);\n }\n reduceCol = () => {\n this.setState({\n cols: [,\n ]\n });\n }\n render() {\n return (\n
    \n

    \n \n \n {this.state.cols}\n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Table, Button } from '@alifd/next';\n\nconst onRowClick = function(record, index, e) {\n console.log(record, index, e);\n },\n dataSource = () => {\n const result = [];\n for (let i = 0; i < 100; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n state = {\n dataSource: [],\n cols: [\n ,\n \n \n \n ,\n \n ],\n loading: true\n }\n componentDidMount() {\n setTimeout(() => {\n this.setState({\n dataSource: dataSource(),\n loading: false\n });\n }, 200);\n }\n reduceCol = () => {\n this.setState({\n cols: [,\n ]\n });\n }\n render() {\n return (\n
    \n

    \n \n \n {this.state.cols}\n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Table, Button } from '@alifd/next';\n\nconst onRowClick = function(record, index, e) {\n        console.log(record, index, e);\n    },\n    dataSource = () => {\n        const result = [];\n        for (let i = 0; i < 100; i++) {\n            result.push({\n                title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n                id: 100306660940 + i,\n                time: 2000 + i\n            });\n        }\n        return result;\n    },\n    render = (value, index, record) => {\n        return <a>Remove({record.id})</a>;\n    };\n\nclass App extends React.Component {\n    state = {\n        dataSource: [],\n        cols: [\n            <Table.Column title=\"Title\" dataIndex=\"title.name\" width={400} key=\"name1\" lock/>,\n            <Table.ColumnGroup title=\"abc\" key=\"name-group\">\n                <Table.Column title=\"Title\" dataIndex=\"title.name\" width={100} key=\"name2\"/>\n                <Table.Column title=\"Title\" dataIndex=\"title.name\" width={400} key=\"name3\"/>\n            </Table.ColumnGroup>,\n            <Table.Column title=\"Time\" dataIndex=\"time\" width={500} key=\"time\"/>\n        ],\n        loading: true\n    }\n    componentDidMount() {\n        setTimeout(() => {\n            this.setState({\n                dataSource: dataSource(),\n                loading: false\n            });\n        }, 200);\n    }\n    reduceCol = () => {\n        this.setState({\n            cols: [<Table.Column title=\"Title\" dataIndex=\"title.name\" width={400} key=\"name1\" lock/>,\n                <Table.Column title=\"Time\" dataIndex=\"time\" width={100} key=\"time\"/>]\n        });\n    }\n    render() {\n        return (\n            <div>\n                <p><Button onClick={this.reduceCol}>Reduce Cols</Button></p>\n                <Table dataSource={this.state.dataSource} onRowClick={onRowClick} fixedHeader loading={this.state.loading}>\n                    <Table.Column title=\"Id-Id-Id-Id-Id-Id-Id-Id-Id-Id-Id-Id\" dataIndex=\"id\" lock width={140}/>\n                    {this.state.cols}\n                    <Table.Column cell={render} width={200}/>\n                </Table>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/mix.en-us.md b/compiled_docs/table/demo/mix.en-us.md new file mode 100644 index 0000000000..b742ca58b1 --- /dev/null +++ b/compiled_docs/table/demo/mix.en-us.md @@ -0,0 +1 @@ +{"title":"Mixed mode","meta":{"title":"Mixed mode","description":"\n

    Demo mixing of tree mode and rowSelection mode.

    \n","order":"19"},"codes":{"jsx":"import { Table } from '@alifd/next';\n\nconst data = [{\n key: 1,\n name: 'a',\n age: 32,\n address: 'aa',\n children: [{\n key: 11,\n name: 'b',\n age: 33,\n address: 'bb'\n }, {\n key: 12,\n name: 'c',\n age: 33,\n address: 'cc',\n children: [{\n key: 121,\n name: 'd',\n age: 33,\n address: 'dd'\n }]\n }, {\n key: 13,\n name: 'e',\n age: 33,\n address: 'ee',\n children: [{\n key: 131,\n name: 'f',\n age: 33,\n address: 'ff',\n children: [{\n key: 1311,\n name: 'g',\n age: 33,\n address: 'gg'\n }, {\n key: 1312,\n name: 'h',\n age: 33,\n address: 'hh'\n }]\n }]\n }]\n}, {\n key: 2,\n name: 'i',\n age: 32,\n address: 'ii',\n children: []\n}];\n\nconst tableMixTree = ( {}}}>\n \n \n \n \n
    );\n\nconst tableMixExpanded = ( record.address}\n rowSelection={{onChange: () => {}}}>\n \n \n \n \n
    );\n\nconst tableMixSelectionTreeLock = (
    \n {}}} isTree>\n \n \n \n \n
    \n
    );\n\nconst tableMixLock = (
    \n {}}}>\n \n \n \n \n
    \n
    );\n\nconst tableMixExpandedLock = (
    \n {}}} expandedRowRender={(record) => record.address} expandedRowIndent={[3, 1]}>\n \n \n \n \n
    \n
    );\n\nconst tableMixTreeLock = (
    \n \n \n \n \n \n
    \n
    );\n\nReactDOM.render(
    \n
    \n

    tree & select

    \n {tableMixTree}\n
    \n
    \n

    extra & select

    \n {tableMixExpanded}\n
    \n
    \n

    tree & lock column & select

    \n {tableMixSelectionTreeLock}\n
    \n
    \n

    extra & lock column & select

    \n {tableMixExpandedLock}\n
    \n
    \n

    lock column & select

    \n {tableMixLock}\n
    \n
    \n

    tree & lock column

    \n {tableMixTreeLock}\n
    \n
    , mountNode);\n","css":".mix-demo .row {\n margin-top:10px;\n}\n"},"body":"\n````jsx\nimport { Table } from '@alifd/next';\n\nconst data = [{\n key: 1,\n name: 'a',\n age: 32,\n address: 'aa',\n children: [{\n key: 11,\n name: 'b',\n age: 33,\n address: 'bb'\n }, {\n key: 12,\n name: 'c',\n age: 33,\n address: 'cc',\n children: [{\n key: 121,\n name: 'd',\n age: 33,\n address: 'dd'\n }]\n }, {\n key: 13,\n name: 'e',\n age: 33,\n address: 'ee',\n children: [{\n key: 131,\n name: 'f',\n age: 33,\n address: 'ff',\n children: [{\n key: 1311,\n name: 'g',\n age: 33,\n address: 'gg'\n }, {\n key: 1312,\n name: 'h',\n age: 33,\n address: 'hh'\n }]\n }]\n }]\n}, {\n key: 2,\n name: 'i',\n age: 32,\n address: 'ii',\n children: []\n}];\n\nconst tableMixTree = ( {}}}>\n \n \n \n \n
    );\n\nconst tableMixExpanded = ( record.address}\n rowSelection={{onChange: () => {}}}>\n \n \n \n \n
    );\n\nconst tableMixSelectionTreeLock = (
    \n {}}} isTree>\n \n \n \n \n
    \n
    );\n\nconst tableMixLock = (
    \n {}}}>\n \n \n \n \n
    \n
    );\n\nconst tableMixExpandedLock = (
    \n {}}} expandedRowRender={(record) => record.address} expandedRowIndent={[3, 1]}>\n \n \n \n \n
    \n
    );\n\nconst tableMixTreeLock = (
    \n \n \n \n \n \n
    \n
    );\n\nReactDOM.render(
    \n
    \n

    tree & select

    \n {tableMixTree}\n
    \n
    \n

    extra & select

    \n {tableMixExpanded}\n
    \n
    \n

    tree & lock column & select

    \n {tableMixSelectionTreeLock}\n
    \n
    \n

    extra & lock column & select

    \n {tableMixExpandedLock}\n
    \n
    \n

    lock column & select

    \n {tableMixLock}\n
    \n
    \n

    tree & lock column

    \n {tableMixTreeLock}\n
    \n
    , mountNode);\n````\n\n````css\n.mix-demo .row {\n margin-top:10px;\n}\n````","html":"
    import { Table } from '@alifd/next';\n\nconst data = [{\n    key: 1,\n    name: 'a',\n    age: 32,\n    address: 'aa',\n    children: [{\n        key: 11,\n        name: 'b',\n        age: 33,\n        address: 'bb'\n    }, {\n        key: 12,\n        name: 'c',\n        age: 33,\n        address: 'cc',\n        children: [{\n            key: 121,\n            name: 'd',\n            age: 33,\n            address: 'dd'\n        }]\n    }, {\n        key: 13,\n        name: 'e',\n        age: 33,\n        address: 'ee',\n        children: [{\n            key: 131,\n            name: 'f',\n            age: 33,\n            address: 'ff',\n            children: [{\n                key: 1311,\n                name: 'g',\n                age: 33,\n                address: 'gg'\n            }, {\n                key: 1312,\n                name: 'h',\n                age: 33,\n                address: 'hh'\n            }]\n        }]\n    }]\n}, {\n    key: 2,\n    name: 'i',\n    age: 32,\n    address: 'ii',\n    children: []\n}];\n\nconst tableMixTree = (<Table dataSource={data} primaryKey=\"key\" isTree rowSelection={{onChange: () => {}}}>\n    <Table.Column title=\"Key\" dataIndex=\"key\"/>\n    <Table.Column title=\"Name\" dataIndex=\"name\"/>\n    <Table.Column title=\"Age\" dataIndex=\"age\" />\n    <Table.Column title=\"Address\" dataIndex=\"address\"/>\n</Table>);\n\nconst tableMixExpanded = (<Table dataSource={data}\n    primaryKey=\"key\"\n    expandedRowRender={(record) => record.address}\n    rowSelection={{onChange: () => {}}}>\n    <Table.Column title=\"Key\" dataIndex=\"key\"/>\n    <Table.Column title=\"Name\" dataIndex=\"name\"/>\n    <Table.Column title=\"Age\" dataIndex=\"age\" />\n    <Table.Column title=\"Address\" dataIndex=\"address\"/>\n</Table>);\n\nconst tableMixSelectionTreeLock = (<div style={{width: '500px'}}>\n    <Table dataSource={data} primaryKey=\"key\" rowSelection={{onChange: () => {}}} isTree>\n        <Table.Column title=\"Key\" dataIndex=\"key\" width={100}/>\n        <Table.Column title=\"Name\" dataIndex=\"name\" lock width={100}/>\n        <Table.Column title=\"Age\" dataIndex=\"age\" width={200} lock=\"right\"/>\n        <Table.Column title=\"Address\" dataIndex=\"address\" width={200}/>\n    </Table>\n</div>);\n\nconst tableMixLock = (<div style={{width: '500px'}}>\n    <Table dataSource={data} primaryKey=\"key\" rowSelection={{onChange: () => {}}}>\n        <Table.Column title=\"Key\" dataIndex=\"key\" width={100}/>\n        <Table.Column title=\"Name\" dataIndex=\"name\" lock width={100}/>\n        <Table.Column title=\"Age\" dataIndex=\"age\" width={200} lock=\"right\"/>\n        <Table.Column title=\"Address\" dataIndex=\"address\" width={200}/>\n    </Table>\n</div>);\n\nconst tableMixExpandedLock = (<div style={{width: '500px'}}>\n    <Table dataSource={data} primaryKey=\"key\" rowSelection={{onChange: () => {}}} expandedRowRender={(record) => record.address} expandedRowIndent={[3, 1]}>\n        <Table.Column title=\"Key\" dataIndex=\"key\" width={100}/>\n        <Table.Column title=\"Name\" dataIndex=\"name\" lock width={100}/>\n        <Table.Column title=\"Age\" dataIndex=\"age\" width={200} lock=\"right\"/>\n        <Table.Column title=\"Address\" dataIndex=\"address\" width={200}/>\n    </Table>\n</div>);\n\nconst tableMixTreeLock = (<div style={{width: '500px'}}>\n    <Table dataSource={data} primaryKey=\"key\" isTree>\n        <Table.Column title=\"Key\" dataIndex=\"key\" width={100}/>\n        <Table.Column title=\"Name\" dataIndex=\"name\" lock width={100}/>\n        <Table.Column title=\"Age\" dataIndex=\"age\" width={200} lock=\"right\"/>\n        <Table.Column title=\"Address\" dataIndex=\"address\" width={200}/>\n    </Table>\n</div>);\n\nReactDOM.render(<div className=\"mix-demo\">\n    <div className=\"row\">\n        <h4>tree & select</h4>\n        {tableMixTree}\n    </div>\n    <div className=\"row\">\n        <h4>extra & select</h4>\n        {tableMixExpanded}\n    </div>\n    <div className=\"row\">\n        <h4>tree & lock column & select</h4>\n        {tableMixSelectionTreeLock}\n    </div>\n    <div className=\"row\">\n        <h4>extra & lock column & select</h4>\n        {tableMixExpandedLock}\n    </div>\n    <div className=\"row\">\n        <h4>lock column & select</h4>\n        {tableMixLock}\n    </div>\n    <div className=\"row\">\n        <h4>tree & lock column</h4>\n        {tableMixTreeLock}\n    </div>\n</div>, mountNode);
    .mix-demo .row {\n  margin-top:10px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/mix.md b/compiled_docs/table/demo/mix.md new file mode 100644 index 0000000000..8ab4653f62 --- /dev/null +++ b/compiled_docs/table/demo/mix.md @@ -0,0 +1 @@ +{"title":"混合模式","meta":{"title":"混合模式","description":"\n

    演示了tree模式和rowSelection模式混合

    \n","order":"19"},"codes":{"jsx":"import { Table } from '@alifd/next';\n\nconst data = [{\n key: 1,\n name: 'a',\n age: 32,\n address: 'aa',\n children: [{\n key: 11,\n name: 'b',\n age: 33,\n address: 'bb'\n }, {\n key: 12,\n name: 'c',\n age: 33,\n address: 'cc',\n children: [{\n key: 121,\n name: 'd',\n age: 33,\n address: 'dd'\n }]\n }, {\n key: 13,\n name: 'e',\n age: 33,\n address: 'ee',\n children: [{\n key: 131,\n name: 'f',\n age: 33,\n address: 'ff',\n children: [{\n key: 1311,\n name: 'g',\n age: 33,\n address: 'gg'\n }, {\n key: 1312,\n name: 'h',\n age: 33,\n address: 'hh'\n }]\n }]\n }]\n}, {\n key: 2,\n name: 'i',\n age: 32,\n address: 'ii',\n children: []\n}];\n\nconst tableMixTree = ( {}}}>\n \n \n \n \n
    );\n\nconst tableMixExpanded = ( record.address}\n rowSelection={{onChange: () => {}}}>\n \n \n \n \n
    );\n\nconst tableMixSelectionTreeLock = (
    \n {}}} isTree>\n \n \n \n \n
    \n
    );\n\nconst tableMixLock = (
    \n {}}}>\n \n \n \n \n
    \n
    );\n\nconst tableMixExpandedLock = (
    \n {}}} expandedRowRender={(record) => record.address} expandedRowIndent={[3, 1]}>\n \n \n \n \n
    \n
    );\n\nconst tableMixTreeLock = (
    \n \n \n \n \n \n
    \n
    );\n\nReactDOM.render(
    \n
    \n

    tree & select

    \n {tableMixTree}\n
    \n
    \n

    extra & select

    \n {tableMixExpanded}\n
    \n
    \n

    tree & lock column & select

    \n {tableMixSelectionTreeLock}\n
    \n
    \n

    extra & lock column & select

    \n {tableMixExpandedLock}\n
    \n
    \n

    lock column & select

    \n {tableMixLock}\n
    \n
    \n

    tree & lock column

    \n {tableMixTreeLock}\n
    \n
    , mountNode);\n","css":".mix-demo .row {\n margin-top:10px;\n}\n"},"body":"\n\n````jsx\nimport { Table } from '@alifd/next';\n\nconst data = [{\n key: 1,\n name: 'a',\n age: 32,\n address: 'aa',\n children: [{\n key: 11,\n name: 'b',\n age: 33,\n address: 'bb'\n }, {\n key: 12,\n name: 'c',\n age: 33,\n address: 'cc',\n children: [{\n key: 121,\n name: 'd',\n age: 33,\n address: 'dd'\n }]\n }, {\n key: 13,\n name: 'e',\n age: 33,\n address: 'ee',\n children: [{\n key: 131,\n name: 'f',\n age: 33,\n address: 'ff',\n children: [{\n key: 1311,\n name: 'g',\n age: 33,\n address: 'gg'\n }, {\n key: 1312,\n name: 'h',\n age: 33,\n address: 'hh'\n }]\n }]\n }]\n}, {\n key: 2,\n name: 'i',\n age: 32,\n address: 'ii',\n children: []\n}];\n\nconst tableMixTree = ( {}}}>\n \n \n \n \n
    );\n\nconst tableMixExpanded = ( record.address}\n rowSelection={{onChange: () => {}}}>\n \n \n \n \n
    );\n\nconst tableMixSelectionTreeLock = (
    \n {}}} isTree>\n \n \n \n \n
    \n
    );\n\nconst tableMixLock = (
    \n {}}}>\n \n \n \n \n
    \n
    );\n\nconst tableMixExpandedLock = (
    \n {}}} expandedRowRender={(record) => record.address} expandedRowIndent={[3, 1]}>\n \n \n \n \n
    \n
    );\n\nconst tableMixTreeLock = (
    \n \n \n \n \n \n
    \n
    );\n\nReactDOM.render(
    \n
    \n

    tree & select

    \n {tableMixTree}\n
    \n
    \n

    extra & select

    \n {tableMixExpanded}\n
    \n
    \n

    tree & lock column & select

    \n {tableMixSelectionTreeLock}\n
    \n
    \n

    extra & lock column & select

    \n {tableMixExpandedLock}\n
    \n
    \n

    lock column & select

    \n {tableMixLock}\n
    \n
    \n

    tree & lock column

    \n {tableMixTreeLock}\n
    \n
    , mountNode);\n````\n\n````css\n.mix-demo .row {\n margin-top:10px;\n}\n````","html":"
    import { Table } from '@alifd/next';\n\nconst data = [{\n    key: 1,\n    name: 'a',\n    age: 32,\n    address: 'aa',\n    children: [{\n        key: 11,\n        name: 'b',\n        age: 33,\n        address: 'bb'\n    }, {\n        key: 12,\n        name: 'c',\n        age: 33,\n        address: 'cc',\n        children: [{\n            key: 121,\n            name: 'd',\n            age: 33,\n            address: 'dd'\n        }]\n    }, {\n        key: 13,\n        name: 'e',\n        age: 33,\n        address: 'ee',\n        children: [{\n            key: 131,\n            name: 'f',\n            age: 33,\n            address: 'ff',\n            children: [{\n                key: 1311,\n                name: 'g',\n                age: 33,\n                address: 'gg'\n            }, {\n                key: 1312,\n                name: 'h',\n                age: 33,\n                address: 'hh'\n            }]\n        }]\n    }]\n}, {\n    key: 2,\n    name: 'i',\n    age: 32,\n    address: 'ii',\n    children: []\n}];\n\nconst tableMixTree = (<Table dataSource={data} primaryKey=\"key\" isTree rowSelection={{onChange: () => {}}}>\n    <Table.Column title=\"Key\" dataIndex=\"key\"/>\n    <Table.Column title=\"Name\" dataIndex=\"name\"/>\n    <Table.Column title=\"Age\" dataIndex=\"age\" />\n    <Table.Column title=\"Address\" dataIndex=\"address\"/>\n</Table>);\n\nconst tableMixExpanded = (<Table dataSource={data}\n    primaryKey=\"key\"\n    expandedRowRender={(record) => record.address}\n    rowSelection={{onChange: () => {}}}>\n    <Table.Column title=\"Key\" dataIndex=\"key\"/>\n    <Table.Column title=\"Name\" dataIndex=\"name\"/>\n    <Table.Column title=\"Age\" dataIndex=\"age\" />\n    <Table.Column title=\"Address\" dataIndex=\"address\"/>\n</Table>);\n\nconst tableMixSelectionTreeLock = (<div style={{width: '500px'}}>\n    <Table dataSource={data} primaryKey=\"key\" rowSelection={{onChange: () => {}}} isTree>\n        <Table.Column title=\"Key\" dataIndex=\"key\" width={100}/>\n        <Table.Column title=\"Name\" dataIndex=\"name\" lock width={100}/>\n        <Table.Column title=\"Age\" dataIndex=\"age\" width={200} lock=\"right\"/>\n        <Table.Column title=\"Address\" dataIndex=\"address\" width={200}/>\n    </Table>\n</div>);\n\nconst tableMixLock = (<div style={{width: '500px'}}>\n    <Table dataSource={data} primaryKey=\"key\" rowSelection={{onChange: () => {}}}>\n        <Table.Column title=\"Key\" dataIndex=\"key\" width={100}/>\n        <Table.Column title=\"Name\" dataIndex=\"name\" lock width={100}/>\n        <Table.Column title=\"Age\" dataIndex=\"age\" width={200} lock=\"right\"/>\n        <Table.Column title=\"Address\" dataIndex=\"address\" width={200}/>\n    </Table>\n</div>);\n\nconst tableMixExpandedLock = (<div style={{width: '500px'}}>\n    <Table dataSource={data} primaryKey=\"key\" rowSelection={{onChange: () => {}}} expandedRowRender={(record) => record.address} expandedRowIndent={[3, 1]}>\n        <Table.Column title=\"Key\" dataIndex=\"key\" width={100}/>\n        <Table.Column title=\"Name\" dataIndex=\"name\" lock width={100}/>\n        <Table.Column title=\"Age\" dataIndex=\"age\" width={200} lock=\"right\"/>\n        <Table.Column title=\"Address\" dataIndex=\"address\" width={200}/>\n    </Table>\n</div>);\n\nconst tableMixTreeLock = (<div style={{width: '500px'}}>\n    <Table dataSource={data} primaryKey=\"key\" isTree>\n        <Table.Column title=\"Key\" dataIndex=\"key\" width={100}/>\n        <Table.Column title=\"Name\" dataIndex=\"name\" lock width={100}/>\n        <Table.Column title=\"Age\" dataIndex=\"age\" width={200} lock=\"right\"/>\n        <Table.Column title=\"Address\" dataIndex=\"address\" width={200}/>\n    </Table>\n</div>);\n\nReactDOM.render(<div className=\"mix-demo\">\n    <div className=\"row\">\n        <h4>tree & select</h4>\n        {tableMixTree}\n    </div>\n    <div className=\"row\">\n        <h4>extra & select</h4>\n        {tableMixExpanded}\n    </div>\n    <div className=\"row\">\n        <h4>tree & lock column & select</h4>\n        {tableMixSelectionTreeLock}\n    </div>\n    <div className=\"row\">\n        <h4>extra & lock column & select</h4>\n        {tableMixExpandedLock}\n    </div>\n    <div className=\"row\">\n        <h4>lock column & select</h4>\n        {tableMixLock}\n    </div>\n    <div className=\"row\">\n        <h4>tree & lock column</h4>\n        {tableMixTreeLock}\n    </div>\n</div>, mountNode);
    .mix-demo .row {\n  margin-top:10px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/multiple-header.en-us.md b/compiled_docs/table/demo/multiple-header.en-us.md new file mode 100644 index 0000000000..2c232226f5 --- /dev/null +++ b/compiled_docs/table/demo/multiple-header.en-us.md @@ -0,0 +1 @@ +{"title":"Multi table header","meta":{"title":"Multi table header","description":"\n

    Demo multiple table headers.

    \n","order":"12"},"codes":{"jsx":"import { Table, Button } from '@alifd/next';\n\nconst onRowClick = function(record, index, e) {\n console.log(record, index, e);\n },\n dataSource = (j) => {\n const result = [];\n for (let i = 0; i < j; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n\n state = {\n dataSource: dataSource(200)\n }\n onClick = () => {\n this.setState({\n dataSource: dataSource(4)\n });\n }\n render() {\n return (\n
    \n

    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Table, Button } from '@alifd/next';\n\nconst onRowClick = function(record, index, e) {\n console.log(record, index, e);\n },\n dataSource = (j) => {\n const result = [];\n for (let i = 0; i < j; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n\n state = {\n dataSource: dataSource(200)\n }\n onClick = () => {\n this.setState({\n dataSource: dataSource(4)\n });\n }\n render() {\n return (\n
    \n

    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Table, Button } from '@alifd/next';\n\nconst onRowClick = function(record, index, e) {\n        console.log(record, index, e);\n    },\n    dataSource = (j) => {\n        const result = [];\n        for (let i = 0; i < j; i++) {\n            result.push({\n                title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n                id: 100306660940 + i,\n                time: 2000 + i\n            });\n        }\n        return result;\n    },\n    render = (value, index, record) => {\n        return <a>Remove({record.id})</a>;\n    };\n\nclass App extends React.Component {\n\n    state = {\n        dataSource: dataSource(200)\n    }\n    onClick = () => {\n        this.setState({\n            dataSource: dataSource(4)\n        });\n    }\n    render() {\n        return (\n            <div>\n                <p><Button onClick={this.onClick}>Reduce count</Button></p>\n                <Table dataSource={this.state.dataSource} onRowClick={onRowClick} fixedHeader maxBodyHeight={400}>\n                    <Table.Column title=\"Title1\" dataIndex=\"id\" width={140}/>\n                    <Table.ColumnGroup title=\"Group2-7\">\n                        <Table.Column title=\"Title2\" dataIndex=\"id\" lock width={140}/>\n                        <Table.Column title=\"Title3\" dataIndex=\"title.name\" width={200}/>\n                        <Table.ColumnGroup title=\"Group4-7\">\n                            <Table.Column title=\"Title4\" dataIndex=\"title.name\" width={400}/>\n                            <Table.Column title=\"Title5\" dataIndex=\"title.name\" width={200}/>\n                            <Table.ColumnGroup title=\"Group6-7\">\n                                <Table.Column title=\"Title6\" dataIndex=\"title.name\" width={400}/>\n                                <Table.Column title=\"Title7\" dataIndex=\"title.name\" width={200}/>\n                            </Table.ColumnGroup>\n                        </Table.ColumnGroup>\n                    </Table.ColumnGroup>\n                    <Table.ColumnGroup>\n                        <Table.Column title=\"Time\" dataIndex=\"time\" width={500}/>\n                        <Table.Column cell={render} width={200} lock=\"right\"/>\n                    </Table.ColumnGroup>\n                </Table>\n            </div>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/multiple-header.md b/compiled_docs/table/demo/multiple-header.md new file mode 100644 index 0000000000..b7e15ce42d --- /dev/null +++ b/compiled_docs/table/demo/multiple-header.md @@ -0,0 +1 @@ +{"title":"多表头","meta":{"title":"多表头","description":"\n

    多个表头

    \n","order":"12"},"codes":{"jsx":"import { Table, Button } from '@alifd/next';\n\nconst onRowClick = function(record, index, e) {\n console.log(record, index, e);\n },\n dataSource = (j) => {\n const result = [];\n for (let i = 0; i < j; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n\n state = {\n dataSource: dataSource(200)\n }\n onClick = () => {\n this.setState({\n dataSource: dataSource(4)\n });\n }\n render() {\n return (\n
    \n

    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Table, Button } from '@alifd/next';\n\nconst onRowClick = function(record, index, e) {\n console.log(record, index, e);\n },\n dataSource = (j) => {\n const result = [];\n for (let i = 0; i < j; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n\n state = {\n dataSource: dataSource(200)\n }\n onClick = () => {\n this.setState({\n dataSource: dataSource(4)\n });\n }\n render() {\n return (\n
    \n

    \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
    \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Table, Button } from '@alifd/next';\n\nconst onRowClick = function(record, index, e) {\n        console.log(record, index, e);\n    },\n    dataSource = (j) => {\n        const result = [];\n        for (let i = 0; i < j; i++) {\n            result.push({\n                title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n                id: 100306660940 + i,\n                time: 2000 + i\n            });\n        }\n        return result;\n    },\n    render = (value, index, record) => {\n        return <a>Remove({record.id})</a>;\n    };\n\nclass App extends React.Component {\n\n    state = {\n        dataSource: dataSource(200)\n    }\n    onClick = () => {\n        this.setState({\n            dataSource: dataSource(4)\n        });\n    }\n    render() {\n        return (\n            <div>\n                <p><Button onClick={this.onClick}>Reduce count</Button></p>\n                <Table dataSource={this.state.dataSource} onRowClick={onRowClick} fixedHeader maxBodyHeight={400}>\n                    <Table.Column title=\"Title1\" dataIndex=\"id\" width={140}/>\n                    <Table.ColumnGroup title=\"Group2-7\">\n                        <Table.Column title=\"Title2\" dataIndex=\"id\" lock width={140}/>\n                        <Table.Column title=\"Title3\" dataIndex=\"title.name\" width={200}/>\n                        <Table.ColumnGroup title=\"Group4-7\">\n                            <Table.Column title=\"Title4\" dataIndex=\"title.name\" width={400}/>\n                            <Table.Column title=\"Title5\" dataIndex=\"title.name\" width={200}/>\n                            <Table.ColumnGroup title=\"Group6-7\">\n                                <Table.Column title=\"Title6\" dataIndex=\"title.name\" width={400}/>\n                                <Table.Column title=\"Title7\" dataIndex=\"title.name\" width={200}/>\n                            </Table.ColumnGroup>\n                        </Table.ColumnGroup>\n                    </Table.ColumnGroup>\n                    <Table.ColumnGroup>\n                        <Table.Column title=\"Time\" dataIndex=\"time\" width={500}/>\n                        <Table.Column cell={render} width={200} lock=\"right\"/>\n                    </Table.ColumnGroup>\n                </Table>\n            </div>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/pagination.en-us.md b/compiled_docs/table/demo/pagination.en-us.md new file mode 100644 index 0000000000..38f70a36fc --- /dev/null +++ b/compiled_docs/table/demo/pagination.en-us.md @@ -0,0 +1 @@ +{"title":"Pagination","meta":{"title":"Pagination","description":"\n

    Using with Pagination.

    \n","order":"11"},"codes":{"jsx":"import { Table, Pagination } from '@alifd/next';\n\nconst dataSource = (j) => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: { name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible` },\n id: 100306660940 + i + j,\n time: 2000 + j\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n dataSource: dataSource(5)\n };\n }\n\n onChange = (currentPage) => {\n this.setState({\n loading: true\n });\n setTimeout(() => {\n this.setState({\n dataSource: dataSource(currentPage * 5),\n loading: false\n });\n }, 200);\n }\n render() {\n return (\n
    \n \n \n \n \n
    \n \n
    );\n }\n}\nReactDOM.render(, mountNode);\n","css":".page-demo {\n margin-top:10px;\n}\n"},"body":"\n````jsx\nimport { Table, Pagination } from '@alifd/next';\n\nconst dataSource = (j) => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: { name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible` },\n id: 100306660940 + i + j,\n time: 2000 + j\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n dataSource: dataSource(5)\n };\n }\n\n onChange = (currentPage) => {\n this.setState({\n loading: true\n });\n setTimeout(() => {\n this.setState({\n dataSource: dataSource(currentPage * 5),\n loading: false\n });\n }, 200);\n }\n render() {\n return (\n
    \n \n \n \n \n
    \n \n
    );\n }\n}\nReactDOM.render(, mountNode);\n````\n````css\n.page-demo {\n margin-top:10px;\n}\n````","html":"
    import { Table, Pagination } from '@alifd/next';\n\nconst dataSource = (j) => {\n        const result = [];\n        for (let i = 0; i < 5; i++) {\n            result.push({\n                title: { name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible` },\n                id: 100306660940 + i + j,\n                time: 2000 + j\n            });\n        }\n        return result;\n    },\n    render = (value, index, record) => {\n        return <a href=\"javascript:;\">Remove({record.id})</a>;\n    };\n\nclass App extends React.Component {\n\n    constructor(props) {\n        super(props);\n        this.state = {\n            dataSource: dataSource(5)\n        };\n    }\n\n    onChange = (currentPage) => {\n        this.setState({\n            loading: true\n        });\n        setTimeout(() => {\n            this.setState({\n                dataSource: dataSource(currentPage * 5),\n                loading: false\n            });\n        }, 200);\n    }\n    render() {\n        return (\n            <div>\n                <Table dataSource={this.state.dataSource}\n                    loading={this.state.loading}>\n                    <Table.Column title=\"Id1\" dataIndex=\"id\" width={140} />\n                    <Table.Column title=\"Time\" dataIndex=\"time\" width={500} />\n                    <Table.Column cell={render} width={200} />\n                </Table>\n                <Pagination onChange={this.onChange} className=\"page-demo\" />\n            </div>);\n    }\n}\nReactDOM.render(<App />, mountNode);
    .page-demo {\n    margin-top:10px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/pagination.md b/compiled_docs/table/demo/pagination.md new file mode 100644 index 0000000000..0babd624ef --- /dev/null +++ b/compiled_docs/table/demo/pagination.md @@ -0,0 +1 @@ +{"title":"分页","meta":{"title":"分页","description":"\n

    与分页结合

    \n","order":"11"},"codes":{"jsx":"import { Table, Pagination } from '@alifd/next';\n\nconst dataSource = (j) => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: { name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible` },\n id: 100306660940 + i + j,\n time: 2000 + j\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n dataSource: dataSource(5)\n };\n }\n\n onChange = (currentPage) => {\n this.setState({\n loading: true\n });\n setTimeout(() => {\n this.setState({\n dataSource: dataSource(currentPage * 5),\n loading: false\n });\n }, 200);\n }\n render() {\n return (\n
    \n \n \n \n \n
    \n \n
    );\n }\n}\nReactDOM.render(, mountNode);\n","css":".page-demo {\n margin-top:10px;\n}\n"},"body":"\n\n````jsx\nimport { Table, Pagination } from '@alifd/next';\n\nconst dataSource = (j) => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: { name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible` },\n id: 100306660940 + i + j,\n time: 2000 + j\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n dataSource: dataSource(5)\n };\n }\n\n onChange = (currentPage) => {\n this.setState({\n loading: true\n });\n setTimeout(() => {\n this.setState({\n dataSource: dataSource(currentPage * 5),\n loading: false\n });\n }, 200);\n }\n render() {\n return (\n
    \n \n \n \n \n
    \n \n
    );\n }\n}\nReactDOM.render(, mountNode);\n````\n````css\n.page-demo {\n margin-top:10px;\n}\n````","html":"
    import { Table, Pagination } from '@alifd/next';\n\nconst dataSource = (j) => {\n        const result = [];\n        for (let i = 0; i < 5; i++) {\n            result.push({\n                title: { name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible` },\n                id: 100306660940 + i + j,\n                time: 2000 + j\n            });\n        }\n        return result;\n    },\n    render = (value, index, record) => {\n        return <a href=\"javascript:;\">Remove({record.id})</a>;\n    };\n\nclass App extends React.Component {\n\n    constructor(props) {\n        super(props);\n        this.state = {\n            dataSource: dataSource(5)\n        };\n    }\n\n    onChange = (currentPage) => {\n        this.setState({\n            loading: true\n        });\n        setTimeout(() => {\n            this.setState({\n                dataSource: dataSource(currentPage * 5),\n                loading: false\n            });\n        }, 200);\n    }\n    render() {\n        return (\n            <div>\n                <Table dataSource={this.state.dataSource}\n                    loading={this.state.loading}>\n                    <Table.Column title=\"Id1\" dataIndex=\"id\" width={140} />\n                    <Table.Column title=\"Time\" dataIndex=\"time\" width={500} />\n                    <Table.Column cell={render} width={200} />\n                </Table>\n                <Pagination onChange={this.onChange} className=\"page-demo\" />\n            </div>);\n    }\n}\nReactDOM.render(<App />, mountNode);
    .page-demo {\n    margin-top:10px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/resize.en-us.md b/compiled_docs/table/demo/resize.en-us.md new file mode 100644 index 0000000000..cfff40cd69 --- /dev/null +++ b/compiled_docs/table/demo/resize.en-us.md @@ -0,0 +1 @@ +{"title":"Resize the column","meta":{"title":"Resize the column","description":"\n

    Resize the column by onResizeChange.

    \n","order":"18"},"codes":{"jsx":"import { Table } from '@alifd/next';\n\nconst onChange = function(...args) {\n console.log(...args);\n },\n dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {\n name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`\n },\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n },\n rowSelection = {\n onChange: onChange,\n getProps: (record) => {\n return {\n disabled: record.id === 100306660942\n };\n }\n };\n\nclass App extends React.Component {\n state = {\n widths: {\n id: 100\n }\n }\n onResizeChange = (dataIndex, value) => {\n const {widths} = this.state;\n widths[dataIndex] = widths[dataIndex] + value;\n this.setState({\n widths\n });\n }\n render() {\n return (\n \n \n \n \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Table } from '@alifd/next';\n\nconst onChange = function(...args) {\n console.log(...args);\n },\n dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {\n name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`\n },\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n },\n rowSelection = {\n onChange: onChange,\n getProps: (record) => {\n return {\n disabled: record.id === 100306660942\n };\n }\n };\n\nclass App extends React.Component {\n state = {\n widths: {\n id: 100\n }\n }\n onResizeChange = (dataIndex, value) => {\n const {widths} = this.state;\n widths[dataIndex] = widths[dataIndex] + value;\n this.setState({\n widths\n });\n }\n render() {\n return (\n \n \n \n \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Table } from '@alifd/next';\n\nconst onChange = function(...args) {\n        console.log(...args);\n    },\n    dataSource = () => {\n        const result = [];\n        for (let i = 0; i < 5; i++) {\n            result.push({\n                title: {\n                    name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`\n                },\n                id: 100306660940 + i,\n                time: 2000 + i\n            });\n        }\n        return result;\n    },\n    render = (value, index, record) => {\n        return <a>Remove({record.id})</a>;\n    },\n    rowSelection = {\n        onChange: onChange,\n        getProps: (record) => {\n            return {\n                disabled: record.id === 100306660942\n            };\n        }\n    };\n\nclass App extends React.Component {\n    state = {\n        widths: {\n            id: 100\n        }\n    }\n    onResizeChange = (dataIndex, value) => {\n        const {widths} = this.state;\n        widths[dataIndex] = widths[dataIndex] + value;\n        this.setState({\n            widths\n        });\n    }\n    render() {\n        return (<Table dataSource={dataSource()}\n            rowSelection={rowSelection} onResizeChange={this.onResizeChange}>\n            <Table.Column title=\"Id\" dataIndex=\"id\" resizable width={this.state.widths.id}/>\n            <Table.Column title=\"Title\" dataIndex=\"title.name\" width={400}/>\n            <Table.Column title=\"Time\" dataIndex=\"time\" width={600}/>\n            <Table.Column cell={render} width={200}/>\n        </Table>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/resize.md b/compiled_docs/table/demo/resize.md new file mode 100644 index 0000000000..8dc19828f4 --- /dev/null +++ b/compiled_docs/table/demo/resize.md @@ -0,0 +1 @@ +{"title":"重设列的尺寸","meta":{"title":"重设列的尺寸","description":"\n

    通过onResizeChange来让列宽可以调整

    \n","order":"18"},"codes":{"jsx":"import { Table } from '@alifd/next';\n\nconst onChange = function(...args) {\n console.log(...args);\n },\n dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {\n name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`\n },\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n },\n rowSelection = {\n onChange: onChange,\n getProps: (record) => {\n return {\n disabled: record.id === 100306660942\n };\n }\n };\n\nclass App extends React.Component {\n state = {\n widths: {\n id: 100\n }\n }\n onResizeChange = (dataIndex, value) => {\n const {widths} = this.state;\n widths[dataIndex] = widths[dataIndex] + value;\n this.setState({\n widths\n });\n }\n render() {\n return (\n \n \n \n \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Table } from '@alifd/next';\n\nconst onChange = function(...args) {\n console.log(...args);\n },\n dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {\n name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`\n },\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n },\n rowSelection = {\n onChange: onChange,\n getProps: (record) => {\n return {\n disabled: record.id === 100306660942\n };\n }\n };\n\nclass App extends React.Component {\n state = {\n widths: {\n id: 100\n }\n }\n onResizeChange = (dataIndex, value) => {\n const {widths} = this.state;\n widths[dataIndex] = widths[dataIndex] + value;\n this.setState({\n widths\n });\n }\n render() {\n return (\n \n \n \n \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Table } from '@alifd/next';\n\nconst onChange = function(...args) {\n        console.log(...args);\n    },\n    dataSource = () => {\n        const result = [];\n        for (let i = 0; i < 5; i++) {\n            result.push({\n                title: {\n                    name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`\n                },\n                id: 100306660940 + i,\n                time: 2000 + i\n            });\n        }\n        return result;\n    },\n    render = (value, index, record) => {\n        return <a>Remove({record.id})</a>;\n    },\n    rowSelection = {\n        onChange: onChange,\n        getProps: (record) => {\n            return {\n                disabled: record.id === 100306660942\n            };\n        }\n    };\n\nclass App extends React.Component {\n    state = {\n        widths: {\n            id: 100\n        }\n    }\n    onResizeChange = (dataIndex, value) => {\n        const {widths} = this.state;\n        widths[dataIndex] = widths[dataIndex] + value;\n        this.setState({\n            widths\n        });\n    }\n    render() {\n        return (<Table dataSource={dataSource()}\n            rowSelection={rowSelection} onResizeChange={this.onResizeChange}>\n            <Table.Column title=\"Id\" dataIndex=\"id\" resizable width={this.state.widths.id}/>\n            <Table.Column title=\"Title\" dataIndex=\"title.name\" width={400}/>\n            <Table.Column title=\"Time\" dataIndex=\"time\" width={600}/>\n            <Table.Column cell={render} width={200}/>\n        </Table>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/row-selection-config.en-us.md b/compiled_docs/table/demo/row-selection-config.en-us.md new file mode 100644 index 0000000000..a8505a2018 --- /dev/null +++ b/compiled_docs/table/demo/row-selection-config.en-us.md @@ -0,0 +1 @@ +{"title":"Checkbox properties","meta":{"title":"Checkbox properties","description":"\n

    Controlling checkbox properties with rowSelection.getProps

    \n","order":"4"},"codes":{"jsx":"import { Table } from '@alifd/next';\n\nconst onChange = function(...args) {\n console.log(...args);\n },\n dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {\n name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`\n },\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n },\n rowSelection = {\n onChange: onChange,\n getProps: (record) => {\n return {\n disabled: record.id === 100306660942\n };\n }\n };\n\nReactDOM.render(\n \n \n \n \n
    , mountNode);\n"},"body":"\n````jsx\nimport { Table } from '@alifd/next';\n\nconst onChange = function(...args) {\n console.log(...args);\n },\n dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {\n name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`\n },\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n },\n rowSelection = {\n onChange: onChange,\n getProps: (record) => {\n return {\n disabled: record.id === 100306660942\n };\n }\n };\n\nReactDOM.render(\n \n \n \n \n
    , mountNode);\n````","html":"
    import { Table } from '@alifd/next';\n\nconst onChange = function(...args) {\n        console.log(...args);\n    },\n    dataSource = () => {\n        const result = [];\n        for (let i = 0; i < 5; i++) {\n            result.push({\n                title: {\n                    name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`\n                },\n                id: 100306660940 + i,\n                time: 2000 + i\n            });\n        }\n        return result;\n    },\n    render = (value, index, record) => {\n        return <a>Remove({record.id})</a>;\n    },\n    rowSelection = {\n        onChange: onChange,\n        getProps: (record) => {\n            return {\n                disabled: record.id === 100306660942\n            };\n        }\n    };\n\nReactDOM.render(<Table dataSource={dataSource()}\n    rowSelection={rowSelection}>\n    <Table.Column title=\"Id\" dataIndex=\"id\"/>\n    <Table.Column title=\"Title\" dataIndex=\"title.name\"/>\n    <Table.Column title=\"Time\" dataIndex=\"time\"/>\n    <Table.Column cell={render} width={200}/>\n</Table>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/row-selection-config.md b/compiled_docs/table/demo/row-selection-config.md new file mode 100644 index 0000000000..0f232d351c --- /dev/null +++ b/compiled_docs/table/demo/row-selection-config.md @@ -0,0 +1 @@ +{"title":"选择框属性","meta":{"title":"选择框属性","description":"\n

    通过 rowSelection.getProps 来控制选择框属性

    \n","order":"4"},"codes":{"jsx":"import { Table } from '@alifd/next';\n\nconst onChange = function(...args) {\n console.log(...args);\n },\n dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {\n name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`\n },\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n },\n rowSelection = {\n onChange: onChange,\n getProps: (record) => {\n return {\n disabled: record.id === 100306660942\n };\n }\n };\n\nReactDOM.render(\n \n \n \n \n
    , mountNode);\n"},"body":"\n\n````jsx\nimport { Table } from '@alifd/next';\n\nconst onChange = function(...args) {\n console.log(...args);\n },\n dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {\n name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`\n },\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n },\n rowSelection = {\n onChange: onChange,\n getProps: (record) => {\n return {\n disabled: record.id === 100306660942\n };\n }\n };\n\nReactDOM.render(\n \n \n \n \n
    , mountNode);\n````","html":"
    import { Table } from '@alifd/next';\n\nconst onChange = function(...args) {\n        console.log(...args);\n    },\n    dataSource = () => {\n        const result = [];\n        for (let i = 0; i < 5; i++) {\n            result.push({\n                title: {\n                    name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`\n                },\n                id: 100306660940 + i,\n                time: 2000 + i\n            });\n        }\n        return result;\n    },\n    render = (value, index, record) => {\n        return <a>Remove({record.id})</a>;\n    },\n    rowSelection = {\n        onChange: onChange,\n        getProps: (record) => {\n            return {\n                disabled: record.id === 100306660942\n            };\n        }\n    };\n\nReactDOM.render(<Table dataSource={dataSource()}\n    rowSelection={rowSelection}>\n    <Table.Column title=\"Id\" dataIndex=\"id\"/>\n    <Table.Column title=\"Title\" dataIndex=\"title.name\"/>\n    <Table.Column title=\"Time\" dataIndex=\"time\"/>\n    <Table.Column cell={render} width={200}/>\n</Table>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/selection.en-us.md b/compiled_docs/table/demo/selection.en-us.md new file mode 100644 index 0000000000..953a756ac5 --- /dev/null +++ b/compiled_docs/table/demo/selection.en-us.md @@ -0,0 +1 @@ +{"title":"Selectable","meta":{"title":"Selectable","description":"\n

    Demo the selectable table.

    \n","order":"1"},"codes":{"jsx":"import { Table } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n};\nconst render = (value, index, record) => {\n return Remove({record.id});\n};\nconst onChange = function(...args) {\n console.log(args);\n};\n\nReactDOM.render(\n \n \n \n \n
    , mountNode);\n"},"body":"\n````jsx\nimport { Table } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n};\nconst render = (value, index, record) => {\n return Remove({record.id});\n};\nconst onChange = function(...args) {\n console.log(args);\n};\n\nReactDOM.render(\n \n \n \n \n
    , mountNode);\n````","html":"
    import { Table } from '@alifd/next';\n\nconst dataSource = () => {\n    const result = [];\n    for (let i = 0; i < 5; i++) {\n        result.push({\n            title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n            id: 100306660940 + i,\n            time: 2000 + i\n        });\n    }\n    return result;\n};\nconst render = (value, index, record) => {\n    return <a href=\"javascript:;\">Remove({record.id})</a>;\n};\nconst onChange = function(...args) {\n    console.log(args);\n};\n\nReactDOM.render(<Table dataSource={dataSource()} rowSelection={{onChange: onChange}}>\n    <Table.Column title=\"Id\" dataIndex=\"id\"/>\n    <Table.Column title=\"Title\" dataIndex=\"title.name\" />\n    <Table.Column title=\"Time\" dataIndex=\"time\"/>\n    <Table.Column cell={render}/>\n</Table>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/selection.md b/compiled_docs/table/demo/selection.md new file mode 100644 index 0000000000..27ff56f174 --- /dev/null +++ b/compiled_docs/table/demo/selection.md @@ -0,0 +1 @@ +{"title":"可选择","meta":{"title":"可选择","description":"\n

    表格可选择功能

    \n","order":"1"},"codes":{"jsx":"import { Table } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n};\nconst render = (value, index, record) => {\n return Remove({record.id});\n};\nconst onChange = function(...args) {\n console.log(args);\n};\n\nReactDOM.render(\n \n \n \n \n
    , mountNode);\n"},"body":"\n\n````jsx\nimport { Table } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n};\nconst render = (value, index, record) => {\n return Remove({record.id});\n};\nconst onChange = function(...args) {\n console.log(args);\n};\n\nReactDOM.render(\n \n \n \n \n
    , mountNode);\n````","html":"
    import { Table } from '@alifd/next';\n\nconst dataSource = () => {\n    const result = [];\n    for (let i = 0; i < 5; i++) {\n        result.push({\n            title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n            id: 100306660940 + i,\n            time: 2000 + i\n        });\n    }\n    return result;\n};\nconst render = (value, index, record) => {\n    return <a href=\"javascript:;\">Remove({record.id})</a>;\n};\nconst onChange = function(...args) {\n    console.log(args);\n};\n\nReactDOM.render(<Table dataSource={dataSource()} rowSelection={{onChange: onChange}}>\n    <Table.Column title=\"Id\" dataIndex=\"id\"/>\n    <Table.Column title=\"Title\" dataIndex=\"title.name\" />\n    <Table.Column title=\"Time\" dataIndex=\"time\"/>\n    <Table.Column cell={render}/>\n</Table>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/style.en-us.md b/compiled_docs/table/demo/style.en-us.md new file mode 100644 index 0000000000..e7de618a9d --- /dev/null +++ b/compiled_docs/table/demo/style.en-us.md @@ -0,0 +1 @@ +{"title":"Style","meta":{"title":"Style","description":"\n

    Customize table borders

    \n","order":"16"},"codes":{"jsx":"import { Table, Button } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: dataSource(),\n className: '',\n align: 'left'\n };\n }\n toggleZebra() {\n this.setState({\n isZebra: !this.state.isZebra\n });\n }\n toggleBorder() {\n this.setState({\n hasBorder: !this.state.hasBorder\n });\n }\n makeBeauty() {\n this.setState({\n className: 'beauty'\n });\n }\n makeAlign() {\n this.setState({\n align: 'right'\n });\n }\n render() {\n return (\n

    \n  \n  \n  \n  \n

    \n \n \n \n \n \n
    \n     );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".beauty{\n background: #f7f7f7;\n}\n"},"body":"\n````jsx\nimport { Table, Button } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: dataSource(),\n className: '',\n align: 'left'\n };\n }\n toggleZebra() {\n this.setState({\n isZebra: !this.state.isZebra\n });\n }\n toggleBorder() {\n this.setState({\n hasBorder: !this.state.hasBorder\n });\n }\n makeBeauty() {\n this.setState({\n className: 'beauty'\n });\n }\n makeAlign() {\n this.setState({\n align: 'right'\n });\n }\n render() {\n return (\n

    \n  \n  \n  \n  \n

    \n \n \n \n \n \n
    \n     );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.beauty{\n background: #f7f7f7;\n}\n````","html":"
    import { Table, Button } from '@alifd/next';\n\nconst dataSource = () => {\n        const result = [];\n        for (let i = 0; i < 5; i++) {\n            result.push({\n                title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n                id: 100306660940 + i,\n                time: 2000 + i\n            });\n        }\n        return result;\n    },\n    render = (value, index, record) => {\n        return <a>Remove({record.id})</a>;\n    };\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            dataSource: dataSource(),\n            className: '',\n            align: 'left'\n        };\n    }\n    toggleZebra() {\n        this.setState({\n            isZebra: !this.state.isZebra\n        });\n    }\n    toggleBorder() {\n        this.setState({\n            hasBorder: !this.state.hasBorder\n        });\n    }\n    makeBeauty() {\n        this.setState({\n            className: 'beauty'\n        });\n    }\n    makeAlign() {\n        this.setState({\n            align: 'right'\n        });\n    }\n    render() {\n        return (<span>\n            <p>\n                <Button onClick={this.toggleZebra.bind(this)}> Toggle zebra </Button> &nbsp;\n                <Button onClick={this.toggleBorder.bind(this)}> Toggle border</Button> &nbsp;\n                <Button onClick={this.makeBeauty.bind(this)}> Make second column beauty </Button> &nbsp;\n                <Button onClick={this.makeAlign.bind(this)}> Make first column align right </Button> &nbsp;\n            </p>\n            <Table dataSource={this.state.dataSource}\n                isZebra={this.state.isZebra}\n                hasBorder={this.state.hasBorder}>\n                <Table.Column title=\"Id\" dataIndex=\"id\" alignHeader=\"center\"/>\n                <Table.Column title=\"Title\" dataIndex=\"title\" align={this.state.align} className={this.state.className}/>\n                <Table.Column title=\"Time\" dataIndex=\"time\"/>\n                <Table.Column cell={render} width={200}/>\n            </Table>\n        </span>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    .beauty{\n  background: #f7f7f7;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/style.md b/compiled_docs/table/demo/style.md new file mode 100644 index 0000000000..2e477bd406 --- /dev/null +++ b/compiled_docs/table/demo/style.md @@ -0,0 +1 @@ +{"title":"样式","meta":{"title":"样式","description":"\n

    自定义表格边框

    \n","order":"16"},"codes":{"jsx":"import { Table, Button } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: dataSource(),\n className: '',\n align: 'left'\n };\n }\n toggleZebra() {\n this.setState({\n isZebra: !this.state.isZebra\n });\n }\n toggleBorder() {\n this.setState({\n hasBorder: !this.state.hasBorder\n });\n }\n makeBeauty() {\n this.setState({\n className: 'beauty'\n });\n }\n makeAlign() {\n this.setState({\n align: 'right'\n });\n }\n render() {\n return (\n

    \n  \n  \n  \n  \n

    \n \n \n \n \n \n
    \n     );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".beauty{\n background: #f7f7f7;\n}\n"},"body":"\n\n````jsx\nimport { Table, Button } from '@alifd/next';\n\nconst dataSource = () => {\n const result = [];\n for (let i = 0; i < 5; i++) {\n result.push({\n title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n id: 100306660940 + i,\n time: 2000 + i\n });\n }\n return result;\n },\n render = (value, index, record) => {\n return Remove({record.id});\n };\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n dataSource: dataSource(),\n className: '',\n align: 'left'\n };\n }\n toggleZebra() {\n this.setState({\n isZebra: !this.state.isZebra\n });\n }\n toggleBorder() {\n this.setState({\n hasBorder: !this.state.hasBorder\n });\n }\n makeBeauty() {\n this.setState({\n className: 'beauty'\n });\n }\n makeAlign() {\n this.setState({\n align: 'right'\n });\n }\n render() {\n return (\n

    \n  \n  \n  \n  \n

    \n \n \n \n \n \n
    \n     );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.beauty{\n background: #f7f7f7;\n}\n````","html":"
    import { Table, Button } from '@alifd/next';\n\nconst dataSource = () => {\n        const result = [];\n        for (let i = 0; i < 5; i++) {\n            result.push({\n                title: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`,\n                id: 100306660940 + i,\n                time: 2000 + i\n            });\n        }\n        return result;\n    },\n    render = (value, index, record) => {\n        return <a>Remove({record.id})</a>;\n    };\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            dataSource: dataSource(),\n            className: '',\n            align: 'left'\n        };\n    }\n    toggleZebra() {\n        this.setState({\n            isZebra: !this.state.isZebra\n        });\n    }\n    toggleBorder() {\n        this.setState({\n            hasBorder: !this.state.hasBorder\n        });\n    }\n    makeBeauty() {\n        this.setState({\n            className: 'beauty'\n        });\n    }\n    makeAlign() {\n        this.setState({\n            align: 'right'\n        });\n    }\n    render() {\n        return (<span>\n            <p>\n                <Button onClick={this.toggleZebra.bind(this)}> Toggle zebra </Button> &nbsp;\n                <Button onClick={this.toggleBorder.bind(this)}> Toggle border</Button> &nbsp;\n                <Button onClick={this.makeBeauty.bind(this)}> Make second column beauty </Button> &nbsp;\n                <Button onClick={this.makeAlign.bind(this)}> Make first column align right </Button> &nbsp;\n            </p>\n            <Table dataSource={this.state.dataSource}\n                isZebra={this.state.isZebra}\n                hasBorder={this.state.hasBorder}>\n                <Table.Column title=\"Id\" dataIndex=\"id\" alignHeader=\"center\"/>\n                <Table.Column title=\"Title\" dataIndex=\"title\" align={this.state.align} className={this.state.className}/>\n                <Table.Column title=\"Time\" dataIndex=\"time\"/>\n                <Table.Column cell={render} width={200}/>\n            </Table>\n        </span>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    .beauty{\n  background: #f7f7f7;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/virtual.en-us.md b/compiled_docs/table/demo/virtual.en-us.md new file mode 100644 index 0000000000..01a7e064a0 --- /dev/null +++ b/compiled_docs/table/demo/virtual.en-us.md @@ -0,0 +1 @@ +{"title":"Virtual scroll","meta":{"title":"Virtual scroll","description":"\n

    Use useVirtual to enable virtual scrolling and scrollToRow scrolls to the specified column

    \n","order":"13"},"codes":{"jsx":"import { Table } from '@alifd/next';\n\nconst dataSource = (j) => {\n const result = [];\n for (let i = 0; i < j; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: `100306660940${i}`,\n time: 2000 + i,\n index: i\n });\n }\n return result;\n};\nconst render = (value, index, record) => {\n return Remove({record.id});\n};\n\nclass App extends React.Component {\n state = {\n scrollToRow: 20\n }\n onBodyScroll = (start) => {\n this.setState({\n scrollToRow: start\n });\n }\n render() {\n return (\n \n \n \n \n \n \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Table } from '@alifd/next';\n\nconst dataSource = (j) => {\n const result = [];\n for (let i = 0; i < j; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: `100306660940${i}`,\n time: 2000 + i,\n index: i\n });\n }\n return result;\n};\nconst render = (value, index, record) => {\n return Remove({record.id});\n};\n\nclass App extends React.Component {\n state = {\n scrollToRow: 20\n }\n onBodyScroll = (start) => {\n this.setState({\n scrollToRow: start\n });\n }\n render() {\n return (\n \n \n \n \n \n \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Table } from '@alifd/next';\n\nconst dataSource = (j) => {\n    const result = [];\n    for (let i = 0; i < j; i++) {\n        result.push({\n            title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n            id: `100306660940${i}`,\n            time: 2000 + i,\n            index: i\n        });\n    }\n    return result;\n};\nconst render = (value, index, record) => {\n    return <a>Remove({record.id})</a>;\n};\n\nclass App extends React.Component {\n    state = {\n        scrollToRow: 20\n    }\n    onBodyScroll = (start) => {\n        this.setState({\n            scrollToRow: start\n        });\n    }\n    render() {\n        return (<Table dataSource={dataSource(1000)} maxBodyHeight={400} useVirtual scrollToRow={this.state.scrollToRow} onBodyScroll={this.onBodyScroll}>\n            <Table.Column title=\"Id1\" dataIndex=\"id\" width={100}/>\n            <Table.Column title=\"Index\" dataIndex=\"index\" width={200}/>\n            <Table.Column title=\"Time\" dataIndex=\"time\" width={200}/>\n            <Table.Column title=\"Time\" dataIndex=\"time\" width={200}/>\n            <Table.Column title=\"Time\" dataIndex=\"time\" width={200} lock=\"right\"/>\n            <Table.Column cell={render} width={200} lock/>\n        </Table>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/demo/virtual.md b/compiled_docs/table/demo/virtual.md new file mode 100644 index 0000000000..ee3b4ea3fa --- /dev/null +++ b/compiled_docs/table/demo/virtual.md @@ -0,0 +1 @@ +{"title":"虚拟滚动","meta":{"title":"虚拟滚动","description":"\n

    使用 useVirtual 开启虚拟滚动，scrollToRow 滚动到指定列

    \n","order":"13"},"codes":{"jsx":"import { Table } from '@alifd/next';\n\nconst dataSource = (j) => {\n const result = [];\n for (let i = 0; i < j; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: `100306660940${i}`,\n time: 2000 + i,\n index: i\n });\n }\n return result;\n};\nconst render = (value, index, record) => {\n return Remove({record.id});\n};\n\nclass App extends React.Component {\n state = {\n scrollToRow: 20\n }\n onBodyScroll = (start) => {\n this.setState({\n scrollToRow: start\n });\n }\n render() {\n return (\n \n \n \n \n \n \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Table } from '@alifd/next';\n\nconst dataSource = (j) => {\n const result = [];\n for (let i = 0; i < j; i++) {\n result.push({\n title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n id: `100306660940${i}`,\n time: 2000 + i,\n index: i\n });\n }\n return result;\n};\nconst render = (value, index, record) => {\n return Remove({record.id});\n};\n\nclass App extends React.Component {\n state = {\n scrollToRow: 20\n }\n onBodyScroll = (start) => {\n this.setState({\n scrollToRow: start\n });\n }\n render() {\n return (\n \n \n \n \n \n \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Table } from '@alifd/next';\n\nconst dataSource = (j) => {\n    const result = [];\n    for (let i = 0; i < j; i++) {\n        result.push({\n            title: {name: `Quotation for 1PCS Nano ${3 + i}.0 controller compatible`},\n            id: `100306660940${i}`,\n            time: 2000 + i,\n            index: i\n        });\n    }\n    return result;\n};\nconst render = (value, index, record) => {\n    return <a>Remove({record.id})</a>;\n};\n\nclass App extends React.Component {\n    state = {\n        scrollToRow: 20\n    }\n    onBodyScroll = (start) => {\n        this.setState({\n            scrollToRow: start\n        });\n    }\n    render() {\n        return (<Table dataSource={dataSource(1000)} maxBodyHeight={400} useVirtual scrollToRow={this.state.scrollToRow} onBodyScroll={this.onBodyScroll}>\n            <Table.Column title=\"Id1\" dataIndex=\"id\" width={100}/>\n            <Table.Column title=\"Index\" dataIndex=\"index\" width={200}/>\n            <Table.Column title=\"Time\" dataIndex=\"time\" width={200}/>\n            <Table.Column title=\"Time\" dataIndex=\"time\" width={200}/>\n            <Table.Column title=\"Time\" dataIndex=\"time\" width={200} lock=\"right\"/>\n            <Table.Column cell={render} width={200} lock/>\n        </Table>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/table/index.en-us.md b/compiled_docs/table/index.en-us.md new file mode 100644 index 0000000000..67dc85cfb1 --- /dev/null +++ b/compiled_docs/table/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

    Guide#

    Table are responsible for presenting data as highly customizable and accessible HTML table whose core function is to present structured data in a tabular manner. Then you can use various parameters to add some features to the table, such as sorting, filtering, scrolling, lock columns, and so on.

    \n

    Basic Usage#

    The basic Table contains rows and columns, use Table.Column to define the column, use the dataSource property passed to create rows.

    \n

    The following code will create a two-column data table:

    \n
    import { Table } from '@alifd/next';\n\nconst dataSource = [{id: 1, time: '2016'}];\nReactDOM.render(\n    <Table dataSource={dataSource}>\n        <Table.Column title="Id" dataIndex="id"/>\n        <Table.Column title="Time" dataIndex="time"/>\n    </Table>, mountNode);

    Column Configuration#

    Table.Column provides a lot of configuration properties for custom columns, the most common is the use of cell custom cell rendering. Other configurations can refer to the following Table.Column API.

    \n

    The following code will make cells render different views based on values:

    \n
    import { Table } from '@alifd/next';\n\nconst dataSource = [{id: 1, time: '2016'}];\nconst renderTime = value => {\n    if (value === '2016') {\n        return 'this year';\n    }\n    return value;\n};\nReactDOM.render(\n    <Table dataSource={dataSource}>\n        <Table.Column title="Id" dataIndex="id"/>\n        <Table.Column title="Time" dataIndex="time" cell={renderTime}/>\n    </Table>, mountNode);

    Multiple Table Header#

    Use Table.ColumnGroup to wrap Table.Column to create a table with multiple headers:

    \n
    import { Table } from '@alifd/next';\n\nconst dataSource = [{id: 1, time: '2016'}];\nReactDOM.render(\n    <Table dataSource={dataSource}>\n        <Table.ColumnGroup>\n            <Table.Column title="Id" dataIndex="id"/>\n            <Table.Column title="Time" dataIndex="time"/>\n        </Table.ColumnGroup>\n        <Table.ColumnGroup>\n            <Table.Column title="Id" dataIndex="id"/>\n        </Table.ColumnGroup>\n    </Table>, mountNode);

    Know Issues#

    Group Table does not support displaying background color in hover state and selected state, unable to merge cells#

    Table can not merge cell if enable locking column#

    API#

    ","api":"

    Table#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    dataSourcedata source shown in the tableArray[]
    onRowClickcallback triggered when click each row

    signatures:
    Function(record: Object, index: Number, e: Event) => void
    params:
    record: {Object} the data corresponding to the row
    index: {Number} the index corresponding to the row
    _e_: {Event} event object    		Function() => { }
    onRowMouseEntercallback triggered when mouse enter each row

    signatures:
    Function(record: Object, index: Number, e: Event) => void
    params:
    record: {Object} the data corresponding to the row
    index: {Number} the index corresponding to the row
    _e_: {Event} event object    		Function() => { }
    onRowMouseLeavecallback triggered when mouse leave each row

    signatures:
    Function(record: Object, index: Number, e: Event) => void
    params:
    record: {Object} the data corresponding to the row
    index: {Number} the index corresponding to the row
    _e_: {Event} event object    		Function() => { }
    onSortcallback triggered when sort

    signatures:
    Function(dataIndex: String, order: String) => void
    params:
    dataIndex: {String} the specified sorted field
    order: {String} order, whether is 'desc' or 'asc'    		Function() => { }
    onFiltercallback triggered when click filter confirmation button

    signatures:
    Function(filterParams: Object) => void
    params:
    filterParams: {Object} filter params    		Function() => { }
    onResizeChangecallback triggered when resize column

    signatures:
    Function(dataIndex: String, value: Number) => void
    params:
    dataIndex: {String} the specify resize field
    value: {Number} column width variation    		Function() => { }
    getRowPropsget the properties of row, the return value will not work if it is in conflict with other properties

    signatures:
    Function(record: Object, index: Number) => Object
    params:
    record: {Object} the data corresponding to the row
    index: {Number} the index corresponding to the row
    returns:
    {Object} properties of Row
    		Function() => { }
    getCellPropsget the properties of cell, through which you can merge cells

    signatures:
    Function(rowIndex: Number, colIndex: Number, dataIndex: String, record: Object) => Object
    params:
    rowIndex: {Number} the index corresponding to the row
    colIndex: {Number} the index corresponding to the column
    dataIndex: {String} the field corresponding to the column
    record: {Object} the record corresponding to the row
    returns:
    {Object} properties of td
    		Function() => { }
    hasBorderwhether the table has a borderBooleantrue
    hasHeaderwhether the table has headerBooleantrue
    isZebrawhether the table has zebra styleBooleanfalse
    loadingwhether data is loadingBooleanfalse
    loadingComponentcustomized Loading component

    signatures:
    Function() => void    		Function-
    filterParamscurrently filtered keys, use this property to control which menu in the table's header filtering options is selected, in the format {dataIndex: {selectedKeys:[]}}
    Example:
    Suppose you want to control dataIndex as Select
    <Table filterParams={{id: {selectedKeys: ['one']}}}/> for the menu item whose key is one in the filtering menu of the id column.    		Object-
    sortthe currently sorted field, use this property to control the sorting of the table's fields in the format {dataIndex: 'asc'}Object-
    sortIconscustomize sortIcons, to set top and bottom layout e.g.{desc: <Icon style={{top: '6px', left: '4px'}} type={'arrow-down'} size="small" />, asc: <Icon style={{top: '-6px', left: '4px'}} type={'arrow-up'} size="small" />}Object-
    emptyContentcontent when the table is emptyReactNode-
    primaryKeythe primary key of data in the dataSource, if the attribute in the given data source does not contain the primary key, it will cause selecting allString'id'
    expandedRowRenderrendering function for expanded row

    signatures:
    Function(record: Object, index: Number) => Element
    params:
    record: {Object} the record corresponding to the row
    index: {Number} the index corresponding to the row
    returns:
    {Element} render content
    		Function-
    expandedRowIndentindent of expanded rowArray-
    openRowKeys(under control)keys of expanded rowArray-
    hasExpandedRowCtrlwhether to show the + button that clicks to expand additional rowBoolean-
    getExpandedColPropsget properties of expanded row

    signatures:
    Function() => void    		Function-
    onRowOpencallback triggered when expand row

    signatures:
    Function(openRowKeys: Array, currentRowKey: String, expanded: Boolean, currentRecord: Object) => void
    params:
    openRowKeys: {Array} key of expanded row
    currentRowKey: {String} key of current clicked row
    expanded: {Boolean} whether is expanded
    currentRecord: {Object} the data corresponding to the current clicked row    		Function-
    onExpandedRowClickcallback triggered when click the expanded row

    signatures:
    Function(record: Object, index: Number, e: Event) => void
    params:
    record: {Object} the data corresponding to the row
    index: {Number} the index corresponding to the row
    _e_: {Event} event object    		Function-
    fixedHeaderwhether the table header is fixed, this property is used with maxBodyHeight. When the height of the content area exceeds maxBodyHeight, a scroll bar appears in the content area.Boolean-
    maxBodyHeightthe height of the largest content area, when fixedHeader is true, scroll bars will appear above this heightNumber/String-
    rowSelectionwhether to enable selection mode

    properties:
    getProps: {Function} Function(record, index)=>Object get default attributes of selection
    onChange: {Function} Function(selectedRowKeys:Array, records:Array) callback triggered when selection change, Note: where records only contains the data of the current dataSource, it is likely to be less than the length of the selectedRowKeys.
    onSelect: {Function} Function(selected:Boolean, record:Object, records:Array) callback triggered when user select
    onSelectAll: {Function} Function(selected:Boolean, records:Array) callback triggered when user select all
    selectedRowKeys: {Array} if this property is set, the rowSelection is controlled, and the received value is the value of the primaryKey of the row's data.
    mode: {String} the mode of selection, the optional value is single, multiple, the default is multiple    		Object-
    stickyHeaderwhether the table header is stickyBoolean-
    offsetTopaffix triggered after the distance top reaches the specified offsetNumber-
    affixPropsproperties of AffixObject-
    indentindented in tree mode, work only when isTree is trueNumber-
    isTreeenable the tree mode of Table, the received data format contains children and renders it into a tree table.Boolean-
    useVirtualwhether use virtual scrollBoolean-
    rowHeightheight of the rowNumber/Function-
    onBodyScrollcallback triggered when body scroll

    signatures:
    Function() => void    		Function-
    \n

    Table.Column#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescriptionTypeDefault Value
    dataIndexspecify the column corresponding field, support the fast value of a.b formatString-
    cellcell rendering logic
    Function(value, index, record) => Element    		ReactElement/ReactNode/Function(value) => value
    titlecontent of table headerReactElement/ReactNode/Function-
    sortablewhether to support sortingBoolean-
    widthwidth of column，width needs to be set in lock styleNumber/String-
    alignalignment of cell

    options:
    'left', 'center', 'right'    		Enum-
    alignHeaderalignment of header cell, value of align by default

    options:
    'left', 'center', 'right'    		Enum-
    filtersgenerates a title filter menu in the format [{label:'xxx', value:'xxx'}]Array<Object>-
    filterModewhether the filtering mode is single or multiple selection

    options:
    'single', 'multiple'    		Enum'multiple'
    lockwhether the lock column is supported, the options are left, right, trueBoolean/String-
    resizablewhether to support column resizing, when this value is set to true, the layout of the table will be modified to fixedBooleanfalse
    \n

    Table.ColumnGroup#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescriptionTypeDefault Value
    titlecontent of table headerReactElement/ReactNode/Function'column-group'
    \n

    Table.GroupHeader#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescriptionTypeDefault Value
    cellcell rendering logicReactElement/ReactNode/Function() => ''
    hasChildrenSelectionwhether to render selection on ChildrenBooleanfalse
    hasSelectionwhether to render selection on GroupHeaderBooleantrue
    useFirstLevelDataWhenNoChildrenuse the first level data when there is no children in dataSouceBooleanfalse
    \n

    Table.GroupFooter#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescriptionTypeDefault Value
    cellcell rendering logicReactElement/ReactNode/Function() => ''
    \n"} \ No newline at end of file diff --git a/compiled_docs/table/index.md b/compiled_docs/table/index.md new file mode 100644 index 0000000000..77ccc5c290 --- /dev/null +++ b/compiled_docs/table/index.md @@ -0,0 +1 @@ +{"meta":"

    开发指南#

    Table 负责将数据呈现为高度可定制和具备可访问性的 HTML 表格，其核心功能为将结构化的数据使用表格的方式展现，然后可以使用各种参数来向表格中加入一些特性，比如排序，过滤，滚动，锁列等。

    \n

    基本使用#

    基本的 Table 包含行和列，使用 Table.Column 来定义列的信息，使用传入的 dataSource 属性数据来创建行。

    \n

    下面的代码将会创建一行两列的数据表：

    \n
    import { Table } from '@alifd/next';\n\nconst dataSource = [{id: 1, time: '2016'}];\nReactDOM.render(\n    <Table dataSource={dataSource}>\n        <Table.Column title="Id" dataIndex="id"/>\n        <Table.Column title="Time" dataIndex="time"/>\n    </Table>, mountNode);

    常见问题#

      \n
    • Q: 通过 rowSelection 开启了选择模式，为什么选择任意一个都是全选？
      \n A: 给定的数据源中的属性需要有一个唯一标示该条数据的主键，默认值为id，可通过 primaryKey 更改 e.g.<Table primaryKey='myId'></Table>
      • \n
    • Q: 还是 rowSelection 选择模式，如何设置默认选中/禁用呢？
      \n A: 通过受控模式，设置 rowSelection 属性的 selectedRowKeys 具体可搜索demo选择可控
      • \n
    • Q: 能用什么样的方式支持行的双击事件/设置每一行的样式？处理整行点击呢？
      \n A: 通过 getRowProps 属性，重写行支持的原生属性，比如className style onDoubleClick等；通过 onRowClick 处理整行点击
      • \n
    \n

    列配置#

    Table.Column 提供了非常多的配置属性用于自定义列，最常见的就是使用cell自定义单元格的渲染逻辑. 其他的配置选项可以参考下面的 Table.Column 的 API。

    \n

    下面的代码会让cell根据值渲染不同的视图：

    \n
    import { Table } from '@alifd/next';\n\nconst dataSource = [{id: 1, time: '2016'}];\nconst renderTime = value => {\n    if (value === '2016') {\n        return '今年';\n    }\n    return value;\n};\nReactDOM.render(\n    <Table dataSource={dataSource}>\n        <Table.Column title="Id" dataIndex="id"/>\n        <Table.Column title="Time" dataIndex="time" cell={renderTime}/>\n    </Table>, mountNode);

    多表头#

    使用 Table.ColumnGroup 包裹 Table.Column 来创建有多个表头的表格。

    \n
    import { Table } from '@alifd/next';\n\nconst dataSource = [{id: 1, time: '2016'}];\nReactDOM.render(\n    <Table dataSource={dataSource}>\n        <Table.ColumnGroup>\n            <Table.Column title="Id" dataIndex="id"/>\n            <Table.Column title="Time" dataIndex="time"/>\n        </Table.ColumnGroup>\n        <Table.ColumnGroup>\n            <Table.Column title="Id" dataIndex="id"/>\n        </Table.ColumnGroup>\n    </Table>, mountNode);

    已知问题#

    分组 Table 不支持在 Hover 状态和选中状态下显示背景色，无法合并单元格#

    Table 锁列特性下面无法使用合并单元格功能#

    API#

    ","api":"

    Table#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    dataSource表格展示的数据源Array[]
    onRowClick点击表格每一行触发的事件

    签名:
    Function(record: Object, index: Number, e: Event) => void
    参数:
    record: {Object} 该行所对应的数据
    index: {Number} 该行所对应的序列
    _e_: {Event} DOM事件对象    		Function() => {}
    onRowMouseEnter悬浮在表格每一行的时候触发的事件

    签名:
    Function(record: Object, index: Number, e: Event) => void
    参数:
    record: {Object} 该行所对应的数据
    index: {Number} 该行所对应的序列
    _e_: {Event} DOM事件对象    		Function() => {}
    onRowMouseLeave离开表格每一行的时候触发的事件

    签名:
    Function(record: Object, index: Number, e: Event) => void
    参数:
    record: {Object} 该行所对应的数据
    index: {Number} 该行所对应的序列
    _e_: {Event} DOM事件对象    		Function() => {}
    onSort点击列排序触发的事件

    签名:
    Function(dataIndex: String, order: String) => void
    参数:
    dataIndex: {String} 指定的排序的字段
    order: {String} 排序对应的顺序, 有desc和asc两种    		Function() => {}
    onFilter点击过滤确认按钮触发的事件

    签名:
    Function(filterParams: Object) => void
    参数:
    filterParams: {Object} 过滤的字段信息    		Function() => {}
    onResizeChange重设列尺寸的时候触发的事件

    签名:
    Function(dataIndex: String, value: Number) => void
    参数:
    dataIndex: {String} 指定重设的字段
    value: {Number} 列宽变动的数值    		Function() => {}
    getRowProps设置每一行的属性，如果返回值和其他针对行操作的属性冲突则无效。

    签名:
    Function(record: Object, index: Number) => Object
    参数:
    record: {Object} 该行所对应的数据
    index: {Number} 该行所对应的序列
    返回值:
    {Object} 需要设置的行属性
    		Function() => {}
    getCellProps设置单元格的属性，通过该属性可以进行合并单元格

    签名:
    Function(rowIndex: Number, colIndex: Number, dataIndex: String, record: Object) => Object
    参数:
    rowIndex: {Number} 该行所对应的序列
    colIndex: {Number} 该列所对应的序列
    dataIndex: {String} 该列所对应的字段名称
    record: {Object} 该行对应的记录
    返回值:
    {Object} 返回td元素的所支持的属性对象
    		Function() => {}
    hasBorder表格是否具有边框Booleantrue
    hasHeader表格是否具有头部Booleantrue
    isZebra表格是否是斑马线Booleanfalse
    loading表格是否在加载中Booleanfalse
    loadingComponent自定义 Loading 组件
    请务必传递 props, 使用方式： loadingComponent={props => <Loading {...props}/>}

    签名:
    Function(props: Object) => void
    参数:
    props: {Object} 当前点击行的key    		Function-
    filterParams当前过滤的的keys,使用此属性可以控制表格的头部的过滤选项中哪个菜单被选中,格式为 {dataIndex: {selectedKeys:[]}}
    示例:
    假设要控制dataIndex为id的列的过滤菜单中key为one的菜单项选中
    <Table filterParams={{id: {selectedKeys: ['one']}}}/>    		Object-
    sort当前排序的字段,使用此属性可以控制表格的字段的排序,格式为{dataIndex: 'asc'}Object-
    sortIcons自定义排序按钮，例如上下排布的: {desc: <Icon style={{top: '6px', left: '4px'}} type={'arrow-down'} size="small" />, asc: <Icon style={{top: '-6px', left: '4px'}} type={'arrow-up'} size="small" />}Object-
    emptyContent设置数据为空的时候的表格内容展现ReactNode-
    primaryKeydataSource当中数据的主键，如果给定的数据源中的属性不包含该主键，会造成选择状态全部选中String'id'
    expandedRowRender额外渲染行的渲染函数

    签名:
    Function(record: Object, index: Number) => Element
    参数:
    record: {Object} 该行所对应的数据
    index: {Number} 该行所对应的序列
    返回值:
    {Element} 渲染内容
    		Function-
    expandedRowIndent额外渲染行的缩进Array-
    openRowKeys默认情况下展开的渲染行或者Tree, 传入此属性为受控状态Array-
    hasExpandedRowCtrl是否显示点击展开额外渲染行的+号按钮Boolean-
    getExpandedColProps设置额外渲染行的属性

    签名:
    Function() => void    		Function-
    onRowOpen在额外渲染行或者Tree展开或者收起的时候触发的事件

    签名:
    Function(openRowKeys: Array, currentRowKey: String, expanded: Boolean, currentRecord: Object) => void
    参数:
    openRowKeys: {Array} 展开的渲染行的key
    currentRowKey: {String} 当前点击的渲染行的key
    expanded: {Boolean} 当前点击是展开还是收起
    currentRecord: {Object} 当前点击额外渲染行的记录    		Function-
    onExpandedRowClick点击额外渲染行触发的事件

    签名:
    Function(record: Object, index: Number, e: Event) => void
    参数:
    record: {Object} 该行所对应的数据
    index: {Number} 该行所对应的序列
    _e_: {Event} DOM事件对象    		Function-
    fixedHeader表头是否固定，该属性配合maxBodyHeight使用，当内容区域的高度超过maxBodyHeight的时候，在内容区域会出现滚动条Boolean-
    maxBodyHeight最大内容区域的高度,在fixedHeader为true的时候,超过这个高度会出现滚动条Number/String-
    rowSelection是否启用选择模式

    属性:
    getProps: {Function} Function(record, index)=>Object 获取selection的默认属性
    onChange: {Function} Function(selectedRowKeys:Array, records:Array) 选择改变的时候触发的事件，注意: 其中records只会包含当前dataSource的数据，很可能会小于selectedRowKeys的长度。
    onSelect: {Function} Function(selected:Boolean, record:Object, records:Array) 用户手动选择/取消选择某行的回调
    onSelectAll: {Function} Function(selected:Boolean, records:Array) 用户手动选择/取消选择所有行的回调
    selectedRowKeys: {Array} 设置了此属性,将rowSelection变为受控状态,接收值为该行数据的primaryKey的值
    mode: {String} 选择selection的模式, 可选值为single, multiple，默认为multiple    		Object-
    stickyHeader表头是否是stickyBoolean-
    offsetTop距离窗口顶部达到指定偏移量后触发Number-
    affixPropsaffix组件的的属性Object-
    indent在tree模式下的缩进尺寸， 仅在isTree为true时候有效Number-
    isTree开启Table的tree模式, 接收的数据格式中包含children则渲染成tree tableBoolean-
    useVirtual是否开启虚拟滚动Boolean-
    rowHeight设置行高Number/Function-
    onBodyScroll在内容区域滚动的时候触发的函数

    签名:
    Function() => void    		Function-
    expandedIndexSimulate开启时，getExpandedColProps() / getRowProps() / expandedRowRender() 的第二个参数 index (该行所对应的序列) 将按照01,2,3,4...的顺序返回，否则返回真实index(0,2,4,6... / 1,3,5,7...)Booleanfalse
    \n

    Table.Column#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    dataIndex指定列对应的字段，支持a.b形式的快速取值String-
    cell行渲染的逻辑
    value, rowIndex, record, context四个属性只可读不可被更改
    Function(value, index, record) => Element    		ReactElement/ReactNode/Functionvalue => value
    title表头显示的内容
    value, rowIndex, record, context四个属性只可读不可被更改    		ReactElement/ReactNode/Function-
    sortable是否支持排序Boolean-
    width列宽，注意在锁列的情况下一定需要配置宽度Number/String-
    align单元格的对齐方式

    可选值:
    'left', 'center', 'right'    		Enum-
    alignHeader单元格标题的对齐方式, 不配置默认读取align值

    可选值:
    'left', 'center', 'right'    		Enum-
    filters生成标题过滤的菜单, 格式为[{label:'xxx', value:'xxx'}]Array<Object>-
    filterMode过滤的模式是单选还是多选

    可选值:
    'single', 'multiple'    		Enum'multiple'
    lock是否支持锁列,可选值为left,right, trueBoolean/String-
    resizable是否支持列宽调整, 当该值设为true，table的布局方式会修改为fixed.Booleanfalse
    \n

    Table.ColumnGroup#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    title表头显示的内容ReactElement/ReactNode/Function'column-group'
    \n

    Table.GroupHeader#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    cell行渲染的逻辑ReactElement/ReactNode/Function() => ''
    hasChildrenSelection是否在Children上面渲染selectionBooleanfalse
    hasSelection是否在GroupHeader上面渲染selectionBooleantrue
    useFirstLevelDataWhenNoChildren当 dataSouce 里没有 children 时，是否使用内容作为数据Booleanfalse
    \n

    Table.GroupFooter#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    cell行渲染的逻辑ReactElement/ReactNode/Function() => ''
    \n"} \ No newline at end of file diff --git a/compiled_docs/tag/demo/accessibility.en-us.md b/compiled_docs/tag/demo/accessibility.en-us.md new file mode 100644 index 0000000000..dee18b40d7 --- /dev/null +++ b/compiled_docs/tag/demo/accessibility.en-us.md @@ -0,0 +1 @@ +{"title":"Accessibility","meta":{"title":"Accessibility","description":"\n

    Components already support accessibility.Please refer to ARIA and KeyBoard for keyboard operation.

    \n","order":"3"},"codes":{"jsx":"import { Tag, Icon } from '@alifd/next';\n\nconst {Group: TagGroup} = Tag;\n\n\nconst dataType = ['全部', '衣服', '手机', '化妆品'];\n\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n name:''\n };\n this.onclick = this.onclick.bind(this);\n }\n onclick(v) {\n this.setState({name: v.item});\n }\n render() {\n return (
    \n \n {dataType.map(item => this.onclick({item})} >{ item }) }\n \n {this.state.name}\n
    );\n }\n}\nReactDOM.render(, mountNode);\n\n"},"body":"\n````jsx\nimport { Tag, Icon } from '@alifd/next';\n\nconst {Group: TagGroup} = Tag;\n\n\nconst dataType = ['全部', '衣服', '手机', '化妆品'];\n\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n name:''\n };\n this.onclick = this.onclick.bind(this);\n }\n onclick(v) {\n this.setState({name: v.item});\n }\n render() {\n return (
    \n \n {dataType.map(item => this.onclick({item})} >{ item }) }\n \n {this.state.name}\n
    );\n }\n}\nReactDOM.render(, mountNode);\n\n````","html":"
    import { Tag, Icon } from '@alifd/next';\n\nconst {Group: TagGroup} = Tag;\n\n\nconst dataType = ['全部', '衣服', '手机', '化妆品'];\n\n\nclass Demo extends React.Component {\n\n    constructor(props) {\n        super(props);\n        this.state = {\n            name:''\n        };\n        this.onclick = this.onclick.bind(this);\n    }\n    onclick(v) {\n        this.setState({name: v.item});\n    }\n    render() {\n        return (<div>\n            <TagGroup>\n                {dataType.map(item => <Tag type=\"normal\" key={item} size=\"medium\"  onClick={() => this.onclick({item})} >{ item }</Tag>) }\n            </TagGroup>\n            {this.state.name}\n        </div>);\n    }\n}\nReactDOM.render(<Demo />, mountNode);\n
    "} \ No newline at end of file diff --git a/compiled_docs/tag/demo/accessibility.md b/compiled_docs/tag/demo/accessibility.md new file mode 100644 index 0000000000..40425c21f8 --- /dev/null +++ b/compiled_docs/tag/demo/accessibility.md @@ -0,0 +1 @@ +{"title":"无障碍","meta":{"title":"无障碍","description":"\n

    组件已支持无障碍。关于键盘操作请参考ARIA and KeyBoard。

    \n","order":"3"},"codes":{"jsx":"import { Tag, Icon } from '@alifd/next';\n\nconst {Group: TagGroup} = Tag;\n\n\nconst dataType = ['全部', '衣服', '手机', '化妆品'];\n\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n name:''\n };\n this.onclick = this.onclick.bind(this);\n }\n onclick(v) {\n this.setState({name: v.item});\n }\n render() {\n return (
    \n \n {dataType.map(item => this.onclick({item})} >{ item }) }\n \n {this.state.name}\n
    );\n }\n}\nReactDOM.render(, mountNode);\n\n"},"body":"\n````jsx\nimport { Tag, Icon } from '@alifd/next';\n\nconst {Group: TagGroup} = Tag;\n\n\nconst dataType = ['全部', '衣服', '手机', '化妆品'];\n\n\nclass Demo extends React.Component {\n\n constructor(props) {\n super(props);\n this.state = {\n name:''\n };\n this.onclick = this.onclick.bind(this);\n }\n onclick(v) {\n this.setState({name: v.item});\n }\n render() {\n return (
    \n \n {dataType.map(item => this.onclick({item})} >{ item }) }\n \n {this.state.name}\n
    );\n }\n}\nReactDOM.render(, mountNode);\n\n````","html":"
    import { Tag, Icon } from '@alifd/next';\n\nconst {Group: TagGroup} = Tag;\n\n\nconst dataType = ['全部', '衣服', '手机', '化妆品'];\n\n\nclass Demo extends React.Component {\n\n    constructor(props) {\n        super(props);\n        this.state = {\n            name:''\n        };\n        this.onclick = this.onclick.bind(this);\n    }\n    onclick(v) {\n        this.setState({name: v.item});\n    }\n    render() {\n        return (<div>\n            <TagGroup>\n                {dataType.map(item => <Tag type=\"normal\" key={item} size=\"medium\"  onClick={() => this.onclick({item})} >{ item }</Tag>) }\n            </TagGroup>\n            {this.state.name}\n        </div>);\n    }\n}\nReactDOM.render(<Demo />, mountNode);\n
    "} \ No newline at end of file diff --git a/compiled_docs/tag/demo/basic.en-us.md b/compiled_docs/tag/demo/basic.en-us.md new file mode 100644 index 0000000000..efa2a76f14 --- /dev/null +++ b/compiled_docs/tag/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic Usage","meta":{"title":"Basic Usage","description":"\n

    set attribute type to controll how it displays, options：normal, primary\nIt is not recommamd to use long text inside tag. the exceeding limit part will be repalced with ....

    \n","order":"0"},"codes":{"jsx":"import { Tag, Icon } from '@alifd/next';\n\nconst {Group: TagGroup} = Tag;\n\nReactDOM.render(
    \n

    large size

    \n \n Normal large Tag\n Primary large Tag\n Tag With Icon\n \n\n

    medium(default) size

    \n \n Normal Tag\n Primary Tag\n Tag With Icon\n \n\n

    small size

    \n \n Normal Small Tag\n Primary Small Tag\n Tag With Icon\n \n\n

    link tag

    \n \n normal Link Tag\n primary Link Tag\n Link Tag With Icon\n \n
    ,\nmountNode);\n"},"body":"\n````jsx\nimport { Tag, Icon } from '@alifd/next';\n\nconst {Group: TagGroup} = Tag;\n\nReactDOM.render(
    \n

    large size

    \n \n Normal large Tag\n Primary large Tag\n Tag With Icon\n \n\n

    medium(default) size

    \n \n Normal Tag\n Primary Tag\n Tag With Icon\n \n\n

    small size

    \n \n Normal Small Tag\n Primary Small Tag\n Tag With Icon\n \n\n

    link tag

    \n \n normal Link Tag\n primary Link Tag\n Link Tag With Icon\n \n
    ,\nmountNode);\n````","html":"
    import { Tag, Icon } from '@alifd/next';\n\nconst {Group: TagGroup} = Tag;\n\nReactDOM.render(<div className=\"tag-list\">\n    <h4>large size</h4>\n    <TagGroup>\n        <Tag type=\"normal\" size=\"large\">Normal large Tag</Tag>\n        <Tag type=\"primary\" size=\"large\">Primary large Tag</Tag>\n        <Tag size=\"large\"><Icon type=\"smile\" /> Tag With Icon</Tag>\n    </TagGroup>\n\n    <h4>medium(default) size</h4>\n    <TagGroup>\n        <Tag type=\"normal\" size=\"medium\">Normal Tag</Tag>\n        <Tag type=\"primary\">Primary Tag</Tag>\n        <Tag><Icon type=\"smile\" /> Tag With Icon</Tag>\n    </TagGroup>\n\n    <h4>small size</h4>\n    <TagGroup>\n        <Tag type=\"normal\" size=\"small\">Normal Small Tag</Tag>\n        <Tag type=\"primary\" size=\"small\">Primary Small Tag</Tag>\n        <Tag size=\"small\"><Icon type=\"smile\" /> Tag With Icon</Tag>\n    </TagGroup>\n\n    <h4>link tag</h4>\n    <TagGroup>\n        <Tag type=\"normal\"><a href=\"//www.alibaba.com\" target=\"_blank\">normal Link Tag</a></Tag>\n        <Tag type=\"primary\"><a href=\"//www.alibaba.com\" target=\"_blank\">primary Link Tag</a></Tag>\n        <Tag size=\"small\"><a href=\"//www.alibaba.com\" target=\"_blank\"><Icon type=\"smile\" /> Link Tag With Icon</a></Tag>\n    </TagGroup>\n</div>,\nmountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tag/demo/basic.md b/compiled_docs/tag/demo/basic.md new file mode 100644 index 0000000000..2b0e586f9c --- /dev/null +++ b/compiled_docs/tag/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本用法","meta":{"title":"基本用法","description":"\n

    通过设置 type 属性来控制标签的展示类型，可选值包括：normal, primary

    \n

    建议不要在标签中使用过长的文本，超出宽度的文本会使用 ... 表示。

    \n","order":"0"},"codes":{"jsx":"import { Tag, Icon } from '@alifd/next';\n\nconst {Group: TagGroup} = Tag;\n\nReactDOM.render(
    \n

    large size

    \n \n Normal large Tag\n Primary large Tag\n Tag With Icon\n \n\n

    medium(default) size

    \n \n Normal Tag\n Primary Tag\n Tag With Icon\n \n\n

    small size

    \n \n Normal Small Tag\n Primary Small Tag\n Tag With Icon\n \n\n

    link tag

    \n \n normal Link Tag\n primary Link Tag\n Link Tag With Icon\n \n
    ,\nmountNode);\n"},"body":"\n\n````jsx\nimport { Tag, Icon } from '@alifd/next';\n\nconst {Group: TagGroup} = Tag;\n\nReactDOM.render(
    \n

    large size

    \n \n Normal large Tag\n Primary large Tag\n Tag With Icon\n \n\n

    medium(default) size

    \n \n Normal Tag\n Primary Tag\n Tag With Icon\n \n\n

    small size

    \n \n Normal Small Tag\n Primary Small Tag\n Tag With Icon\n \n\n

    link tag

    \n \n normal Link Tag\n primary Link Tag\n Link Tag With Icon\n \n
    ,\nmountNode);\n````","html":"
    import { Tag, Icon } from '@alifd/next';\n\nconst {Group: TagGroup} = Tag;\n\nReactDOM.render(<div className=\"tag-list\">\n    <h4>large size</h4>\n    <TagGroup>\n        <Tag type=\"normal\" size=\"large\">Normal large Tag</Tag>\n        <Tag type=\"primary\" size=\"large\">Primary large Tag</Tag>\n        <Tag size=\"large\"><Icon type=\"smile\" /> Tag With Icon</Tag>\n    </TagGroup>\n\n    <h4>medium(default) size</h4>\n    <TagGroup>\n        <Tag type=\"normal\" size=\"medium\">Normal Tag</Tag>\n        <Tag type=\"primary\">Primary Tag</Tag>\n        <Tag><Icon type=\"smile\" /> Tag With Icon</Tag>\n    </TagGroup>\n\n    <h4>small size</h4>\n    <TagGroup>\n        <Tag type=\"normal\" size=\"small\">Normal Small Tag</Tag>\n        <Tag type=\"primary\" size=\"small\">Primary Small Tag</Tag>\n        <Tag size=\"small\"><Icon type=\"smile\" /> Tag With Icon</Tag>\n    </TagGroup>\n\n    <h4>link tag</h4>\n    <TagGroup>\n        <Tag type=\"normal\"><a href=\"//www.alibaba.com\" target=\"_blank\">normal Link Tag</a></Tag>\n        <Tag type=\"primary\"><a href=\"//www.alibaba.com\" target=\"_blank\">primary Link Tag</a></Tag>\n        <Tag size=\"small\"><a href=\"//www.alibaba.com\" target=\"_blank\"><Icon type=\"smile\" /> Link Tag With Icon</a></Tag>\n    </TagGroup>\n</div>,\nmountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tag/demo/closable.en-us.md b/compiled_docs/tag/demo/closable.en-us.md new file mode 100644 index 0000000000..e96187a62d --- /dev/null +++ b/compiled_docs/tag/demo/closable.en-us.md @@ -0,0 +1 @@ +{"title":"Closeable Tag","meta":{"title":"Closeable Tag","description":"\n

    Tag.Closeable can be used in some lightweight situations that needs check state.\nThese features do not meet the requirements for accessibility:\n1. closeArea=tail\n2. put a tag in Tag.Closeable

    \n","order":"2"},"codes":{"jsx":"import { Tag } from '@alifd/next';\n\nconst {Group: TagGroup, Closeable: CloseableTag} = Tag;\n\nconst handler = from => {\n console.log(`close from ${from}`);\n return false;\n};\n\nclass Demo extends React.Component {\n renderTagList (option) {\n return [\n {option.type},\n {option.type} {' disabled '}\n ];\n }\n\n renderCloseAreaTags () {\n return ['tag', 'tail'].reduce((prev, curr) => prev.concat([\n closeArea {curr},\n closeArea {curr}\n ]), []);\n }\n render() {\n return (\n
    \n

    type: 'normal'

    \n {this.renderTagList({type: 'normal'})}\n

    type: 'primary'

    \n {this.renderTagList({type: 'primary'})}\n

    closeArea: ['tag', 'tail']

    \n \n {this.renderCloseAreaTags()}\n \n

    close handler

    \n \n true}> onClose allow close\n false}> onClose prevent close\n onClose from \n console.log('after close')}>after Close\n \n

    closeable link tag

    \n \n Primary Link Tag\n normal Link Tag\n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Tag } from '@alifd/next';\n\nconst {Group: TagGroup, Closeable: CloseableTag} = Tag;\n\nconst handler = from => {\n console.log(`close from ${from}`);\n return false;\n};\n\nclass Demo extends React.Component {\n renderTagList (option) {\n return [\n {option.type},\n {option.type} {' disabled '}\n ];\n }\n\n renderCloseAreaTags () {\n return ['tag', 'tail'].reduce((prev, curr) => prev.concat([\n closeArea {curr},\n closeArea {curr}\n ]), []);\n }\n render() {\n return (\n
    \n

    type: 'normal'

    \n {this.renderTagList({type: 'normal'})}\n

    type: 'primary'

    \n {this.renderTagList({type: 'primary'})}\n

    closeArea: ['tag', 'tail']

    \n \n {this.renderCloseAreaTags()}\n \n

    close handler

    \n \n true}> onClose allow close\n false}> onClose prevent close\n onClose from \n console.log('after close')}>after Close\n \n

    closeable link tag

    \n \n Primary Link Tag\n normal Link Tag\n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Tag } from '@alifd/next';\n\nconst {Group: TagGroup, Closeable: CloseableTag} = Tag;\n\nconst handler = from => {\n    console.log(`close from ${from}`);\n    return false;\n};\n\nclass Demo extends React.Component {\n    renderTagList (option) {\n        return [\n            <CloseableTag key={'tag-1'} type={option.type}>{option.type}</CloseableTag>,\n            <CloseableTag key={'tag-2'} type={option.type} disabled>{option.type} {' disabled '}</CloseableTag>\n        ];\n    }\n\n    renderCloseAreaTags () {\n        return ['tag', 'tail'].reduce((prev, curr) => prev.concat([\n            <CloseableTag key={`tag-${curr}-1`} closeArea={curr}>closeArea {curr}</CloseableTag>,\n            <CloseableTag key={`tag-${curr}-2`} type=\"primary\" closeArea={curr}>closeArea {curr}</CloseableTag>\n        ]), []);\n    }\n    render() {\n        return (\n            <div className=\"tag-list\">\n                <h4>type: 'normal'</h4>\n                <TagGroup>{this.renderTagList({type: 'normal'})}</TagGroup>\n                <h4>type: 'primary'</h4>\n                <TagGroup>{this.renderTagList({type: 'primary'})}</TagGroup>\n                <h4>closeArea: ['tag', 'tail']</h4>\n                <TagGroup>\n                    {this.renderCloseAreaTags()}\n                </TagGroup>\n                <h4>close handler</h4>\n                <TagGroup>\n                    <CloseableTag onClose={() => true}> onClose allow close</CloseableTag>\n                    <CloseableTag onClose={() => false}> onClose prevent close</CloseableTag>\n                    <CloseableTag onClose={handler}> onClose from </CloseableTag>\n                    <CloseableTag afterClose={() => console.log('after close')}>after Close</CloseableTag>\n                </TagGroup>\n                <h4>closeable link tag</h4>\n                <TagGroup>\n                    <CloseableTag type=\"primary\"><a href=\"//www.alibaba.com\" target=\"_blank\">Primary Link Tag</a></CloseableTag>\n                    <CloseableTag type=\"normal\"><a href=\"//www.alibaba.com\" target=\"_blank\">normal Link Tag</a></CloseableTag>\n                </TagGroup>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tag/demo/closable.md b/compiled_docs/tag/demo/closable.md new file mode 100644 index 0000000000..6816fbbfc0 --- /dev/null +++ b/compiled_docs/tag/demo/closable.md @@ -0,0 +1 @@ +{"title":"可关闭标签","meta":{"title":"可关闭标签","description":"\n

    Tag.Closeable 可以用于一些轻量的需要选中状态的场景。\n特别注意: closeArea=tail 以及在Tag.Closeable中放入a标签 都与无障碍要求不符,请谨慎使用

    \n","order":"2"},"codes":{"jsx":"import { Tag } from '@alifd/next';\n\nconst {Group: TagGroup, Closeable: CloseableTag} = Tag;\n\nconst handler = from => {\n console.log(`close from ${from}`);\n return false;\n};\n\nclass Demo extends React.Component {\n renderTagList (option) {\n return [\n {option.type},\n {option.type} {' disabled '}\n ];\n }\n\n renderCloseAreaTags () {\n return ['tag', 'tail'].reduce((prev, curr) => prev.concat([\n closeArea {curr},\n closeArea {curr}\n ]), []);\n }\n render() {\n return (\n
    \n

    type: 'normal'

    \n {this.renderTagList({type: 'normal'})}\n

    type: 'primary'

    \n {this.renderTagList({type: 'primary'})}\n

    closeArea: ['tag', 'tail']

    \n \n {this.renderCloseAreaTags()}\n \n

    close handler

    \n \n true}> onClose allow close\n false}> onClose prevent close\n onClose from \n console.log('after close')}>after Close\n \n

    closeable link tag

    \n \n Primary Link Tag\n normal Link Tag\n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Tag } from '@alifd/next';\n\nconst {Group: TagGroup, Closeable: CloseableTag} = Tag;\n\nconst handler = from => {\n console.log(`close from ${from}`);\n return false;\n};\n\nclass Demo extends React.Component {\n renderTagList (option) {\n return [\n {option.type},\n {option.type} {' disabled '}\n ];\n }\n\n renderCloseAreaTags () {\n return ['tag', 'tail'].reduce((prev, curr) => prev.concat([\n closeArea {curr},\n closeArea {curr}\n ]), []);\n }\n render() {\n return (\n
    \n

    type: 'normal'

    \n {this.renderTagList({type: 'normal'})}\n

    type: 'primary'

    \n {this.renderTagList({type: 'primary'})}\n

    closeArea: ['tag', 'tail']

    \n \n {this.renderCloseAreaTags()}\n \n

    close handler

    \n \n true}> onClose allow close\n false}> onClose prevent close\n onClose from \n console.log('after close')}>after Close\n \n

    closeable link tag

    \n \n Primary Link Tag\n normal Link Tag\n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Tag } from '@alifd/next';\n\nconst {Group: TagGroup, Closeable: CloseableTag} = Tag;\n\nconst handler = from => {\n    console.log(`close from ${from}`);\n    return false;\n};\n\nclass Demo extends React.Component {\n    renderTagList (option) {\n        return [\n            <CloseableTag key={'tag-1'} type={option.type}>{option.type}</CloseableTag>,\n            <CloseableTag key={'tag-2'} type={option.type} disabled>{option.type} {' disabled '}</CloseableTag>\n        ];\n    }\n\n    renderCloseAreaTags () {\n        return ['tag', 'tail'].reduce((prev, curr) => prev.concat([\n            <CloseableTag key={`tag-${curr}-1`} closeArea={curr}>closeArea {curr}</CloseableTag>,\n            <CloseableTag key={`tag-${curr}-2`} type=\"primary\" closeArea={curr}>closeArea {curr}</CloseableTag>\n        ]), []);\n    }\n    render() {\n        return (\n            <div className=\"tag-list\">\n                <h4>type: 'normal'</h4>\n                <TagGroup>{this.renderTagList({type: 'normal'})}</TagGroup>\n                <h4>type: 'primary'</h4>\n                <TagGroup>{this.renderTagList({type: 'primary'})}</TagGroup>\n                <h4>closeArea: ['tag', 'tail']</h4>\n                <TagGroup>\n                    {this.renderCloseAreaTags()}\n                </TagGroup>\n                <h4>close handler</h4>\n                <TagGroup>\n                    <CloseableTag onClose={() => true}> onClose allow close</CloseableTag>\n                    <CloseableTag onClose={() => false}> onClose prevent close</CloseableTag>\n                    <CloseableTag onClose={handler}> onClose from </CloseableTag>\n                    <CloseableTag afterClose={() => console.log('after close')}>after Close</CloseableTag>\n                </TagGroup>\n                <h4>closeable link tag</h4>\n                <TagGroup>\n                    <CloseableTag type=\"primary\"><a href=\"//www.alibaba.com\" target=\"_blank\">Primary Link Tag</a></CloseableTag>\n                    <CloseableTag type=\"normal\"><a href=\"//www.alibaba.com\" target=\"_blank\">normal Link Tag</a></CloseableTag>\n                </TagGroup>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tag/demo/selectable.en-us.md b/compiled_docs/tag/demo/selectable.en-us.md new file mode 100644 index 0000000000..b2e06107ca --- /dev/null +++ b/compiled_docs/tag/demo/selectable.en-us.md @@ -0,0 +1 @@ +{"title":"Selectable Tag","meta":{"title":"Selectable Tag","description":"\n

    SelectableTag inherit from Tag, so the attributes like type、size、animation and so on, can be used the same to Tag 。

    \n"},"codes":{"jsx":"import { Tag } from '@alifd/next';\n\nconst {Group: TagGroup, Selectable: SelectableTag} = Tag;\nconst dataSource = ['selectable tag', 'I like orange', 'small tag', 'disabled', 'disabled & checked'];\n\nclass Demo extends React.Component {\n state = {\n value: ['I like orange', 'disabled & checked'],\n singleValue: 'selectable tag'\n };\n\n handleChange(name, checked) {\n const {value} = this.state;\n const next = checked ? [...value, name] : value.filter(n => n !== name);\n\n this.setState({value: next});\n }\n\n handleChangeSingle(name, checked) {\n const {singleValue} = this.state;\n const next = checked ? name : '';\n\n this.setState({singleValue: next});\n }\n\n renderTagList(props) {\n const {value} = this.state;\n\n return dataSource.map((name, i) => (\n -1}\n disabled={i > 2}\n size={i === 2 ? 'small' : undefined}\n onChange={this.handleChange.bind(this, name)}\n {...props}>{name}\n ));\n }\n\n renderTagListSingle(props) {\n const {singleValue} = this.state;\n\n return dataSource.map((name, i) => (\n 2}\n size={i === 2 ? 'small' : undefined}\n onChange={this.handleChangeSingle.bind(this, name)}\n {...props}>{name}\n ));\n }\n\n render() {\n return (\n
    \n

    type: 'default'

    \n {this.renderTagList({type: 'normal'})}\n

    type: 'primary'

    \n {this.renderTagList({type: 'primary'})}\n

    Controlled Tags: Only one selected at a time

    \n {this.renderTagListSingle({type: 'normal'})}\n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Tag } from '@alifd/next';\n\nconst {Group: TagGroup, Selectable: SelectableTag} = Tag;\nconst dataSource = ['selectable tag', 'I like orange', 'small tag', 'disabled', 'disabled & checked'];\n\nclass Demo extends React.Component {\n state = {\n value: ['I like orange', 'disabled & checked'],\n singleValue: 'selectable tag'\n };\n\n handleChange(name, checked) {\n const {value} = this.state;\n const next = checked ? [...value, name] : value.filter(n => n !== name);\n\n this.setState({value: next});\n }\n\n handleChangeSingle(name, checked) {\n const {singleValue} = this.state;\n const next = checked ? name : '';\n\n this.setState({singleValue: next});\n }\n\n renderTagList(props) {\n const {value} = this.state;\n\n return dataSource.map((name, i) => (\n -1}\n disabled={i > 2}\n size={i === 2 ? 'small' : undefined}\n onChange={this.handleChange.bind(this, name)}\n {...props}>{name}\n ));\n }\n\n renderTagListSingle(props) {\n const {singleValue} = this.state;\n\n return dataSource.map((name, i) => (\n 2}\n size={i === 2 ? 'small' : undefined}\n onChange={this.handleChangeSingle.bind(this, name)}\n {...props}>{name}\n ));\n }\n\n render() {\n return (\n
    \n

    type: 'default'

    \n {this.renderTagList({type: 'normal'})}\n

    type: 'primary'

    \n {this.renderTagList({type: 'primary'})}\n

    Controlled Tags: Only one selected at a time

    \n {this.renderTagListSingle({type: 'normal'})}\n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Tag } from '@alifd/next';\n\nconst {Group: TagGroup, Selectable: SelectableTag} = Tag;\nconst dataSource = ['selectable tag', 'I like orange', 'small tag', 'disabled', 'disabled & checked'];\n\nclass Demo extends React.Component {\n    state = {\n        value: ['I like orange', 'disabled & checked'],\n        singleValue: 'selectable tag'\n    };\n\n    handleChange(name, checked) {\n        const {value} = this.state;\n        const next = checked ? [...value, name] : value.filter(n => n !== name);\n\n        this.setState({value: next});\n    }\n\n    handleChangeSingle(name, checked) {\n        const {singleValue} = this.state;\n        const next = checked ? name : '';\n\n        this.setState({singleValue: next});\n    }\n\n    renderTagList(props) {\n        const {value} = this.state;\n\n        return dataSource.map((name, i) => (\n            <SelectableTag key={name}\n                checked={value.indexOf(name) > -1}\n                disabled={i > 2}\n                size={i === 2 ? 'small' : undefined}\n                onChange={this.handleChange.bind(this, name)}\n                {...props}>{name}</SelectableTag>\n        ));\n    }\n\n    renderTagListSingle(props) {\n        const {singleValue} = this.state;\n\n        return dataSource.map((name, i) => (\n            <SelectableTag key={name}\n                checked={singleValue === name}\n                disabled={i > 2}\n                size={i === 2 ? 'small' : undefined}\n                onChange={this.handleChangeSingle.bind(this, name)}\n                {...props}>{name}</SelectableTag>\n        ));\n    }\n\n    render() {\n        return (\n            <div className=\"tag-list\">\n                <h4>type: 'default'</h4>\n                <TagGroup>{this.renderTagList({type: 'normal'})}</TagGroup>\n                <h4>type: 'primary'</h4>\n                <TagGroup>{this.renderTagList({type: 'primary'})}</TagGroup>\n                <h4>Controlled Tags: Only one selected at a time</h4>\n                <TagGroup>{this.renderTagListSingle({type: 'normal'})}</TagGroup>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tag/demo/selectable.md b/compiled_docs/tag/demo/selectable.md new file mode 100644 index 0000000000..579fc0ee6d --- /dev/null +++ b/compiled_docs/tag/demo/selectable.md @@ -0,0 +1 @@ +{"title":"可选中标签","meta":{"title":"可选中标签","description":"\n

    Tag.Selectable 可以用于一些轻量的需要选中状态的场景，可作为 checkbox 使用。

    \n

    该组件提供了受控和非受控两种用法，但强烈建议以受控方式使用。

    \n

    SelectableTag 继承自 Tag，所以类型(type)、大小(size)、动效(animation)等参数的用法与 Tag 保持一致。

    \n","order":"1"},"codes":{"jsx":"import { Tag } from '@alifd/next';\n\nconst {Group: TagGroup, Selectable: SelectableTag} = Tag;\nconst dataSource = ['selectable tag', 'I like orange', 'small tag', 'disabled', 'disabled & checked'];\n\nclass Demo extends React.Component {\n state = {\n value: ['I like orange', 'disabled & checked'],\n singleValue: 'selectable tag'\n };\n\n handleChange(name, checked) {\n const {value} = this.state;\n const next = checked ? [...value, name] : value.filter(n => n !== name);\n\n this.setState({value: next});\n }\n\n handleChangeSingle(name, checked) {\n const {singleValue} = this.state;\n const next = checked ? name : '';\n\n this.setState({singleValue: next});\n }\n\n renderTagList(props) {\n const {value} = this.state;\n\n return dataSource.map((name, i) => (\n -1}\n disabled={i > 2}\n size={i === 2 ? 'small' : undefined}\n onChange={this.handleChange.bind(this, name)}\n {...props}>{name}\n ));\n }\n\n renderTagListSingle(props) {\n const {singleValue} = this.state;\n\n return dataSource.map((name, i) => (\n 2}\n size={i === 2 ? 'small' : undefined}\n onChange={this.handleChangeSingle.bind(this, name)}\n {...props}>{name}\n ));\n }\n\n render() {\n return (\n
    \n

    type: 'default'

    \n {this.renderTagList({type: 'normal'})}\n

    type: 'primary'

    \n {this.renderTagList({type: 'primary'})}\n

    Controlled Tags: Only one selected at a time

    \n {this.renderTagListSingle({type: 'normal'})}\n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Tag } from '@alifd/next';\n\nconst {Group: TagGroup, Selectable: SelectableTag} = Tag;\nconst dataSource = ['selectable tag', 'I like orange', 'small tag', 'disabled', 'disabled & checked'];\n\nclass Demo extends React.Component {\n state = {\n value: ['I like orange', 'disabled & checked'],\n singleValue: 'selectable tag'\n };\n\n handleChange(name, checked) {\n const {value} = this.state;\n const next = checked ? [...value, name] : value.filter(n => n !== name);\n\n this.setState({value: next});\n }\n\n handleChangeSingle(name, checked) {\n const {singleValue} = this.state;\n const next = checked ? name : '';\n\n this.setState({singleValue: next});\n }\n\n renderTagList(props) {\n const {value} = this.state;\n\n return dataSource.map((name, i) => (\n -1}\n disabled={i > 2}\n size={i === 2 ? 'small' : undefined}\n onChange={this.handleChange.bind(this, name)}\n {...props}>{name}\n ));\n }\n\n renderTagListSingle(props) {\n const {singleValue} = this.state;\n\n return dataSource.map((name, i) => (\n 2}\n size={i === 2 ? 'small' : undefined}\n onChange={this.handleChangeSingle.bind(this, name)}\n {...props}>{name}\n ));\n }\n\n render() {\n return (\n
    \n

    type: 'default'

    \n {this.renderTagList({type: 'normal'})}\n

    type: 'primary'

    \n {this.renderTagList({type: 'primary'})}\n

    Controlled Tags: Only one selected at a time

    \n {this.renderTagListSingle({type: 'normal'})}\n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Tag } from '@alifd/next';\n\nconst {Group: TagGroup, Selectable: SelectableTag} = Tag;\nconst dataSource = ['selectable tag', 'I like orange', 'small tag', 'disabled', 'disabled & checked'];\n\nclass Demo extends React.Component {\n    state = {\n        value: ['I like orange', 'disabled & checked'],\n        singleValue: 'selectable tag'\n    };\n\n    handleChange(name, checked) {\n        const {value} = this.state;\n        const next = checked ? [...value, name] : value.filter(n => n !== name);\n\n        this.setState({value: next});\n    }\n\n    handleChangeSingle(name, checked) {\n        const {singleValue} = this.state;\n        const next = checked ? name : '';\n\n        this.setState({singleValue: next});\n    }\n\n    renderTagList(props) {\n        const {value} = this.state;\n\n        return dataSource.map((name, i) => (\n            <SelectableTag key={name}\n                checked={value.indexOf(name) > -1}\n                disabled={i > 2}\n                size={i === 2 ? 'small' : undefined}\n                onChange={this.handleChange.bind(this, name)}\n                {...props}>{name}</SelectableTag>\n        ));\n    }\n\n    renderTagListSingle(props) {\n        const {singleValue} = this.state;\n\n        return dataSource.map((name, i) => (\n            <SelectableTag key={name}\n                checked={singleValue === name}\n                disabled={i > 2}\n                size={i === 2 ? 'small' : undefined}\n                onChange={this.handleChangeSingle.bind(this, name)}\n                {...props}>{name}</SelectableTag>\n        ));\n    }\n\n    render() {\n        return (\n            <div className=\"tag-list\">\n                <h4>type: 'default'</h4>\n                <TagGroup>{this.renderTagList({type: 'normal'})}</TagGroup>\n                <h4>type: 'primary'</h4>\n                <TagGroup>{this.renderTagList({type: 'primary'})}</TagGroup>\n                <h4>Controlled Tags: Only one selected at a time</h4>\n                <TagGroup>{this.renderTagListSingle({type: 'normal'})}</TagGroup>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tag/index.en-us.md b/compiled_docs/tag/index.en-us.md new file mode 100644 index 0000000000..4c59ddda34 --- /dev/null +++ b/compiled_docs/tag/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

    Guide#

    Tags are used to mark something for its atrribute, or to classify things

    \n

    When to use#

      \n
    • mark something
      • \n
    • classification
      • \n
    \n

    Attention#

      \n
    1. the attribute size can be set to large, but for compatible with form situation, size = large is actually equal to size = medium,
      2. \n
    2. it is not recommanded to use large text inside Tag;

      API#

      ","api":"
      3. \n
    \n

    Tag#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    sizesize of tag（large = medium for compatible with form situation ）

    optional:
    'small', 'medium', 'large'    		Enum'medium'
    typetype of tag

    optional:
    'normal', 'primary'    		Enum'normal'
    animationenable animation or notBooleanfalse
    afterAppearcallback when animation ends

    signatures:
    Function() => void    		Functionfunc.noop
    onClickcallback when it is clicked

    signatures:
    Function() => void    		Functionfunc.noop
    \n

    Tag.Closeable#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    closeAreaarea for responsing close action, tag: entire tag, tail(default): only the button at the end

    optional:
    'tag', 'tail'    		Enum-
    sizesize of tag（large = medium for compatible with form situation ）

    optional:
    'small', 'medium', 'large'    		Enum-
    onClosecallback when closeArea is clicked

    signatures:
    Function(from: String) => Boolean
    params:
    from: {String} clicked place, tag: entire, tail: button at the end
    returns:
    {Boolean} true to close tag, false to prevent the close action
    		Function-
    afterClosecallback when tag has been closed

    signatures:
    Function() => void    		Function-
    onClickcallback when tag is clicked

    signatures:
    Function() => void    		Function-
    \n

    Tag.Selectable#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    checkedcheck the tag, under controlled wayBoolean-
    defaultCheckedtag is checked by default, under uncontrolled wayBoolean-
    onChangecallback when check state changes

    signatures:
    Function(checked: Boolean, e: Event) => void
    params:
    checked: {Boolean} whether tag is checked or not
    _e_: {Event} Dom Event Object    		Functionfunc.noop
    disableddisable tagBoolean-
    \n

    ARIA and KeyBoard#

    \n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyBoardDescripiton
    SPACESelect,cancel or delete the current tag
    \n"} \ No newline at end of file diff --git a/compiled_docs/tag/index.md b/compiled_docs/tag/index.md new file mode 100644 index 0000000000..1c531ff978 --- /dev/null +++ b/compiled_docs/tag/index.md @@ -0,0 +1 @@ +{"meta":"

    Guide#

    标签用于标记事物的属性和维度，或者可以使用标签来对一组事物分类。

    \n

    何时使用#

      \n
    • 用于标记事物的属性和维度。
      • \n
    • 进行分类。
      • \n
    \n

    使用注意点#

      \n
    1. 虽然可以设置 size 属性取值 large，但该值只是为了兼容表单场景，实际取值时 large 等同于 medium。
      2. \n
    2. 不建议在 Tag 中使用大段文本。
      3. \n
    \n

    API#

    ","api":"

    Tag#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    size标签的尺寸（large 尺寸为兼容表单场景 large = medium）

    可选值:
    'small', 'medium', 'large'    		Enum'medium'
    type标签的类型

    可选值:
    'normal', 'primary'    		Enum'normal'
    animation是否开启动效Booleanfalse
    afterAppear标签出现动画结束后执行的回调

    签名:
    Function() => void    		Functionfunc.noop
    onClick点击回调

    签名:
    Function() => void    		Functionfunc.noop
    \n

    Tag.Closeable#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    closeAreacloseable 标签的 onClose 响应区域, tag: 标签体, tail(默认): 关闭按钮

    可选值:
    'tag', 'tail'    		Enum-
    size标签的尺寸（large 尺寸为兼容表单场景 large = medium）

    可选值:
    'small', 'medium', 'large'    		Enum-
    onClose点击关闭按钮时的回调

    签名:
    Function(from: String) => Boolean
    参数:
    from: {String} 事件来源, tag: 标签体点击, tail: 关闭按钮点击
    返回值:
    {Boolean} true则关闭, false阻止关闭
    		Function-
    afterClose标签关闭后执行的回调

    签名:
    Function() => void    		Function-
    onClick点击回调

    签名:
    Function() => void    		Function-
    \n

    Tag.Selectable#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    checked标签是否被选中，受控用法
    tag checked or not, a controlled way    		Boolean-
    defaultChecked标签是否默认被选中，非受控用法
    tag checked or not by default, a uncontrolled way    		Boolean-
    onChange选中状态变化时触发的事件

    签名:
    Function(checked: Boolean, e: Event) => void
    参数:
    checked: {Boolean} 是否选中
    _e_: {Event} Dom 事件对象    		Functionfunc.noop
    disabled标签是否被禁用Boolean-
    \n

    ARIA and KeyBoard#

    \n\n\n\n\n\n\n\n\n\n\n\n\n
    按键说明
    SPACE选择,取消或删除当前标签
    \n"} \ No newline at end of file diff --git a/compiled_docs/time-picker/demo/basic.en-us.md b/compiled_docs/time-picker/demo/basic.en-us.md new file mode 100644 index 0000000000..088263ec8e --- /dev/null +++ b/compiled_docs/time-picker/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

    Basic usage.

    \n","order":"0"},"codes":{"jsx":"import { TimePicker } from '@alifd/next';\n\nReactDOM.render( console.log(val)} />, mountNode);\n"},"body":"\n````jsx\nimport { TimePicker } from '@alifd/next';\n\nReactDOM.render( console.log(val)} />, mountNode);\n````","html":"
    import { TimePicker } from '@alifd/next';\n\nReactDOM.render(<TimePicker onChange={(val) => console.log(val)} />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/time-picker/demo/basic.md b/compiled_docs/time-picker/demo/basic.md new file mode 100644 index 0000000000..d9ca94ad27 --- /dev/null +++ b/compiled_docs/time-picker/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

    最简单的用法。

    \n","order":"0"},"codes":{"jsx":"import { TimePicker } from '@alifd/next';\n\nReactDOM.render( console.log(val)} />, mountNode);\n"},"body":"\n\n````jsx\nimport { TimePicker } from '@alifd/next';\n\nReactDOM.render( console.log(val)} />, mountNode);\n````","html":"
    import { TimePicker } from '@alifd/next';\n\nReactDOM.render(<TimePicker onChange={(val) => console.log(val)} />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/time-picker/demo/default-value.en-us.md b/compiled_docs/time-picker/demo/default-value.en-us.md new file mode 100644 index 0000000000..9a4d9da697 --- /dev/null +++ b/compiled_docs/time-picker/demo/default-value.en-us.md @@ -0,0 +1 @@ +{"title":"Default value","meta":{"title":"Default value","description":"\n

    Setting default value by passing defaultValue.

    \n","order":"1"},"codes":{"jsx":"import { TimePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst defaultVal = moment('12:00:00', 'HH:mm:ss', true);\n\nReactDOM.render(
    \n console.log(val)} />

    \n console.log(val)} />\n
    , mountNode);\n"},"body":"\n````jsx\nimport { TimePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst defaultVal = moment('12:00:00', 'HH:mm:ss', true);\n\nReactDOM.render(
    \n console.log(val)} />

    \n console.log(val)} />\n
    , mountNode);\n````","html":"
    import { TimePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst defaultVal = moment('12:00:00', 'HH:mm:ss', true);\n\nReactDOM.render(<div>\n    <TimePicker defaultValue={defaultVal} onChange={(val) => console.log(val)} /><br /><br />\n    <TimePicker defaultValue=\"12:00:00\" onChange={(val) => console.log(val)} />\n</div>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/time-picker/demo/default-value.md b/compiled_docs/time-picker/demo/default-value.md new file mode 100644 index 0000000000..582ba5aae8 --- /dev/null +++ b/compiled_docs/time-picker/demo/default-value.md @@ -0,0 +1 @@ +{"title":"默认值","meta":{"title":"默认值","description":"\n

    可以通过 defaultValue 传入默认时间值，并且可以通过选择改变该值。onChange 回调参数的值的类型取决于 defaultValue 的类型。

    \n","order":"1"},"codes":{"jsx":"import { TimePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst defaultVal = moment('12:00:00', 'HH:mm:ss', true);\n\nReactDOM.render(
    \n console.log(val)} />

    \n console.log(val)} />\n
    , mountNode);\n"},"body":"\n\n````jsx\nimport { TimePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst defaultVal = moment('12:00:00', 'HH:mm:ss', true);\n\nReactDOM.render(
    \n console.log(val)} />

    \n console.log(val)} />\n
    , mountNode);\n````","html":"
    import { TimePicker } from '@alifd/next';\nimport moment from 'moment';\n\nconst defaultVal = moment('12:00:00', 'HH:mm:ss', true);\n\nReactDOM.render(<div>\n    <TimePicker defaultValue={defaultVal} onChange={(val) => console.log(val)} /><br /><br />\n    <TimePicker defaultValue=\"12:00:00\" onChange={(val) => console.log(val)} />\n</div>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/time-picker/demo/disabled.en-us.md b/compiled_docs/time-picker/demo/disabled.en-us.md new file mode 100644 index 0000000000..ebf862f40d --- /dev/null +++ b/compiled_docs/time-picker/demo/disabled.en-us.md @@ -0,0 +1 @@ +{"title":"Disable cells","meta":{"title":"Disable cells","description":"\n

    Disable some time celles.

    \n","order":"3"},"codes":{"jsx":"import { TimePicker } from '@alifd/next';\n\nconst disabledHours = [1, 2, 3, 4, 5];\nconst disabledMinutes = [10, 20, 30, 40, 50];\nconst disabledSeconds = [10, 20, 30, 40, 50];\n\nconst disabledItems = (list) => (index) => {\n return list.indexOf(index) >= 0;\n};\n\nReactDOM.render(
    \n

    Disable TimePicker

    \n \n

    Disable Hours/Minutes/Seconds

    \n \n
    , mountNode);\n"},"body":"\n````jsx\nimport { TimePicker } from '@alifd/next';\n\nconst disabledHours = [1, 2, 3, 4, 5];\nconst disabledMinutes = [10, 20, 30, 40, 50];\nconst disabledSeconds = [10, 20, 30, 40, 50];\n\nconst disabledItems = (list) => (index) => {\n return list.indexOf(index) >= 0;\n};\n\nReactDOM.render(
    \n

    Disable TimePicker

    \n \n

    Disable Hours/Minutes/Seconds

    \n \n
    , mountNode);\n````","html":"
    import { TimePicker } from '@alifd/next';\n\nconst disabledHours = [1, 2, 3, 4, 5];\nconst disabledMinutes = [10, 20, 30, 40, 50];\nconst disabledSeconds = [10, 20, 30, 40, 50];\n\nconst disabledItems = (list) => (index) => {\n    return list.indexOf(index) >= 0;\n};\n\nReactDOM.render(<div>\n    <p>Disable TimePicker</p>\n    <TimePicker disabled />\n    <p>Disable Hours/Minutes/Seconds</p>\n    <TimePicker disabledHours={disabledItems(disabledHours)} disabledMinutes={disabledItems(disabledMinutes)} disabledSeconds={disabledItems(disabledSeconds)} />\n</div>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/time-picker/demo/disabled.md b/compiled_docs/time-picker/demo/disabled.md new file mode 100644 index 0000000000..e595d6be65 --- /dev/null +++ b/compiled_docs/time-picker/demo/disabled.md @@ -0,0 +1 @@ +{"title":"禁用时分秒","meta":{"title":"禁用时分秒","description":"\n

    禁用全部和禁用部分选择项

    \n","order":"3"},"codes":{"jsx":"import { TimePicker } from '@alifd/next';\n\nconst disabledHours = [1, 2, 3, 4, 5];\nconst disabledMinutes = [10, 20, 30, 40, 50];\nconst disabledSeconds = [10, 20, 30, 40, 50];\n\nconst disabledItems = (list) => (index) => {\n return list.indexOf(index) >= 0;\n};\n\nReactDOM.render(
    \n

    Disable TimePicker

    \n \n

    Disable Hours/Minutes/Seconds

    \n \n
    , mountNode);\n"},"body":"\n\n````jsx\nimport { TimePicker } from '@alifd/next';\n\nconst disabledHours = [1, 2, 3, 4, 5];\nconst disabledMinutes = [10, 20, 30, 40, 50];\nconst disabledSeconds = [10, 20, 30, 40, 50];\n\nconst disabledItems = (list) => (index) => {\n return list.indexOf(index) >= 0;\n};\n\nReactDOM.render(
    \n

    Disable TimePicker

    \n \n

    Disable Hours/Minutes/Seconds

    \n \n
    , mountNode);\n````","html":"
    import { TimePicker } from '@alifd/next';\n\nconst disabledHours = [1, 2, 3, 4, 5];\nconst disabledMinutes = [10, 20, 30, 40, 50];\nconst disabledSeconds = [10, 20, 30, 40, 50];\n\nconst disabledItems = (list) => (index) => {\n    return list.indexOf(index) >= 0;\n};\n\nReactDOM.render(<div>\n    <p>Disable TimePicker</p>\n    <TimePicker disabled />\n    <p>Disable Hours/Minutes/Seconds</p>\n    <TimePicker disabledHours={disabledItems(disabledHours)} disabledMinutes={disabledItems(disabledMinutes)} disabledSeconds={disabledItems(disabledSeconds)} />\n</div>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/time-picker/demo/field.en-us.md b/compiled_docs/time-picker/demo/field.en-us.md new file mode 100644 index 0000000000..12648f1c68 --- /dev/null +++ b/compiled_docs/time-picker/demo/field.en-us.md @@ -0,0 +1 @@ +{"title":"With Field","meta":{"title":"With Field","description":"\n

    Use TimePicker with Field.

    \n","order":"6"},"codes":{"jsx":"import { TimePicker, Field, Button } from '@alifd/next';\nimport moment from 'moment';\n\nclass Demo extends React.Component {\n field = new Field(this);\n\n onClick = () => {\n const value = this.field.getValue('time-picker');\n console.log(value.format('HH:mm:ss'));\n }\n\n render() {\n const { init } = this.field;\n\n const props = init('time-picker', {\n rules: [\n { required: true, message: 'Time Required' }\n ],\n initValue: moment('00:00:00', 'HH:mm:ss', true)\n });\n\n return (
    \n

    \n \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { TimePicker, Field, Button } from '@alifd/next';\nimport moment from 'moment';\n\nclass Demo extends React.Component {\n field = new Field(this);\n\n onClick = () => {\n const value = this.field.getValue('time-picker');\n console.log(value.format('HH:mm:ss'));\n }\n\n render() {\n const { init } = this.field;\n\n const props = init('time-picker', {\n rules: [\n { required: true, message: 'Time Required' }\n ],\n initValue: moment('00:00:00', 'HH:mm:ss', true)\n });\n\n return (
    \n

    \n \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { TimePicker, Field, Button } from '@alifd/next';\nimport moment from 'moment';\n\nclass Demo extends React.Component {\n    field = new Field(this);\n\n    onClick = () => {\n        const value = this.field.getValue('time-picker');\n        console.log(value.format('HH:mm:ss'));\n    }\n\n    render() {\n        const { init } = this.field;\n\n        const props = init('time-picker', {\n            rules: [\n                { required: true, message: 'Time Required' }\n            ],\n            initValue: moment('00:00:00', 'HH:mm:ss', true)\n        });\n\n        return (<div>\n            <TimePicker {...props} /> <br /><br />\n            <Button onClick={this.onClick}>Print Value in Console</Button>\n        </div>);\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/time-picker/demo/field.md b/compiled_docs/time-picker/demo/field.md new file mode 100644 index 0000000000..a380e12dae --- /dev/null +++ b/compiled_docs/time-picker/demo/field.md @@ -0,0 +1 @@ +{"title":"结合 Field 使用","meta":{"title":"结合 Field 使用","description":"\n

    配合 Field 使用

    \n","order":"6"},"codes":{"jsx":"import { TimePicker, Field, Button } from '@alifd/next';\nimport moment from 'moment';\n\nclass Demo extends React.Component {\n field = new Field(this);\n\n onClick = () => {\n const value = this.field.getValue('time-picker');\n console.log(value.format('HH:mm:ss'));\n }\n\n render() {\n const { init } = this.field;\n\n const props = init('time-picker', {\n rules: [\n { required: true, message: 'Time Required' }\n ],\n initValue: moment('00:00:00', 'HH:mm:ss', true)\n });\n\n return (
    \n

    \n \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { TimePicker, Field, Button } from '@alifd/next';\nimport moment from 'moment';\n\nclass Demo extends React.Component {\n field = new Field(this);\n\n onClick = () => {\n const value = this.field.getValue('time-picker');\n console.log(value.format('HH:mm:ss'));\n }\n\n render() {\n const { init } = this.field;\n\n const props = init('time-picker', {\n rules: [\n { required: true, message: 'Time Required' }\n ],\n initValue: moment('00:00:00', 'HH:mm:ss', true)\n });\n\n return (
    \n

    \n \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { TimePicker, Field, Button } from '@alifd/next';\nimport moment from 'moment';\n\nclass Demo extends React.Component {\n    field = new Field(this);\n\n    onClick = () => {\n        const value = this.field.getValue('time-picker');\n        console.log(value.format('HH:mm:ss'));\n    }\n\n    render() {\n        const { init } = this.field;\n\n        const props = init('time-picker', {\n            rules: [\n                { required: true, message: 'Time Required' }\n            ],\n            initValue: moment('00:00:00', 'HH:mm:ss', true)\n        });\n\n        return (<div>\n            <TimePicker {...props} /> <br /><br />\n            <Button onClick={this.onClick}>Print Value in Console</Button>\n        </div>);\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/time-picker/demo/format.en-us.md b/compiled_docs/time-picker/demo/format.en-us.md new file mode 100644 index 0000000000..d068e47a7b --- /dev/null +++ b/compiled_docs/time-picker/demo/format.en-us.md @@ -0,0 +1 @@ +{"title":"Time format","meta":{"title":"Time format","description":"\n

    You can control the time format by format, it will also effect the display of time panel.

    \n","order":"4"},"codes":{"jsx":"import { TimePicker } from '@alifd/next';\n\nReactDOM.render(
    \n

    Hide seconds

    \n \n

    Hide hours

    \n \n
    , mountNode);\n"},"body":"\n````jsx\nimport { TimePicker } from '@alifd/next';\n\nReactDOM.render(
    \n

    Hide seconds

    \n \n

    Hide hours

    \n \n
    , mountNode);\n````","html":"
    import { TimePicker } from '@alifd/next';\n\nReactDOM.render(<div>\n    <p>Hide seconds</p>\n    <TimePicker format=\"HH:mm\" />\n    <p>Hide hours</p>\n    <TimePicker format=\"mm:ss\" />\n</div>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/time-picker/demo/format.md b/compiled_docs/time-picker/demo/format.md new file mode 100644 index 0000000000..7aa9e76e6d --- /dev/null +++ b/compiled_docs/time-picker/demo/format.md @@ -0,0 +1 @@ +{"title":"时间格式","meta":{"title":"时间格式","description":"\n

    可以通过 format 属性格式化时间值，此外该属性还会影响到时间列的展示。

    \n","order":"4"},"codes":{"jsx":"import { TimePicker } from '@alifd/next';\n\nReactDOM.render(
    \n

    Hide seconds

    \n \n

    Hide hours

    \n \n
    , mountNode);\n"},"body":"\n\n````jsx\nimport { TimePicker } from '@alifd/next';\n\nReactDOM.render(
    \n

    Hide seconds

    \n \n

    Hide hours

    \n \n
    , mountNode);\n````","html":"
    import { TimePicker } from '@alifd/next';\n\nReactDOM.render(<div>\n    <p>Hide seconds</p>\n    <TimePicker format=\"HH:mm\" />\n    <p>Hide hours</p>\n    <TimePicker format=\"mm:ss\" />\n</div>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/time-picker/demo/size.en-us.md b/compiled_docs/time-picker/demo/size.en-us.md new file mode 100644 index 0000000000..a7a56e92f3 --- /dev/null +++ b/compiled_docs/time-picker/demo/size.en-us.md @@ -0,0 +1 @@ +{"title":"Size","meta":{"title":"Size","description":"\n

    Setting picker size by size.

    \n","order":"1"},"codes":{"jsx":"import { TimePicker } from '@alifd/next';\n\n\nReactDOM.render(
    \n   \n   \n \n
    , mountNode);\n"},"body":"\n````jsx\nimport { TimePicker } from '@alifd/next';\n\n\nReactDOM.render(
    \n   \n   \n \n
    , mountNode);\n````","html":"
    import { TimePicker } from '@alifd/next';\n\n\nReactDOM.render(<div>\n    <TimePicker size=\"large\" />&nbsp;&nbsp;\n    <TimePicker />&nbsp;&nbsp;\n    <TimePicker size=\"small\" />\n</div>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/time-picker/demo/size.md b/compiled_docs/time-picker/demo/size.md new file mode 100644 index 0000000000..6287b3eb33 --- /dev/null +++ b/compiled_docs/time-picker/demo/size.md @@ -0,0 +1 @@ +{"title":"尺寸","meta":{"title":"尺寸","description":"\n

    TimePicker 使用和 Input 组件相同的输入框尺寸，可以通过 size 属性进行设置。

    \n","order":"1"},"codes":{"jsx":"import { TimePicker } from '@alifd/next';\n\n\nReactDOM.render(
    \n   \n   \n \n
    , mountNode);\n"},"body":"\n\n````jsx\nimport { TimePicker } from '@alifd/next';\n\n\nReactDOM.render(
    \n   \n   \n \n
    , mountNode);\n````","html":"
    import { TimePicker } from '@alifd/next';\n\n\nReactDOM.render(<div>\n    <TimePicker size=\"large\" />&nbsp;&nbsp;\n    <TimePicker />&nbsp;&nbsp;\n    <TimePicker size=\"small\" />\n</div>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/time-picker/demo/step.en-us.md b/compiled_docs/time-picker/demo/step.en-us.md new file mode 100644 index 0000000000..6ddcb0d14a --- /dev/null +++ b/compiled_docs/time-picker/demo/step.en-us.md @@ -0,0 +1 @@ +{"title":"Time step","meta":{"title":"Time step","description":"\n

    Setting time interval by hourStep, minuteStep, secondStep.

    \n","order":"5"},"codes":{"jsx":"import { TimePicker } from '@alifd/next';\n\nReactDOM.render( console.log(val.format('HH:mm:ss'))} hourStep={2} minuteStep={5} secondStep={5} />, mountNode);\n"},"body":"\n````jsx\nimport { TimePicker } from '@alifd/next';\n\nReactDOM.render( console.log(val.format('HH:mm:ss'))} hourStep={2} minuteStep={5} secondStep={5} />, mountNode);\n````","html":"
    import { TimePicker } from '@alifd/next';\n\nReactDOM.render(<TimePicker onChange={(val) => console.log(val.format('HH:mm:ss'))} hourStep={2} minuteStep={5} secondStep={5} />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/time-picker/demo/step.md b/compiled_docs/time-picker/demo/step.md new file mode 100644 index 0000000000..da6ad70288 --- /dev/null +++ b/compiled_docs/time-picker/demo/step.md @@ -0,0 +1 @@ +{"title":"步长","meta":{"title":"步长","description":"\n

    可以通过 hourStep, minuteStep, secondStep 分别设置时分秒的选项间隔。

    \n","order":"5"},"codes":{"jsx":"import { TimePicker } from '@alifd/next';\n\nReactDOM.render( console.log(val.format('HH:mm:ss'))} hourStep={2} minuteStep={5} secondStep={5} />, mountNode);\n"},"body":"\n\n````jsx\nimport { TimePicker } from '@alifd/next';\n\nReactDOM.render( console.log(val.format('HH:mm:ss'))} hourStep={2} minuteStep={5} secondStep={5} />, mountNode);\n````","html":"
    import { TimePicker } from '@alifd/next';\n\nReactDOM.render(<TimePicker onChange={(val) => console.log(val.format('HH:mm:ss'))} hourStep={2} minuteStep={5} secondStep={5} />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/time-picker/demo/value.en-us.md b/compiled_docs/time-picker/demo/value.en-us.md new file mode 100644 index 0000000000..ec3239b446 --- /dev/null +++ b/compiled_docs/time-picker/demo/value.en-us.md @@ -0,0 +1 @@ +{"title":"Controlled","meta":{"title":"Controlled","description":"\n

    Creating controlled TimePikcer by value and onChange.

    \n","order":"2"},"codes":{"jsx":"import { TimePicker } from '@alifd/next';\nimport moment from 'moment';\n\nclass ControlledTimePicker extends React.Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n value: moment('12:00:00', 'HH:mm:ss', true)\n };\n }\n\n onSelect = (value) => {\n this.setState({ value });\n this.props.onChange(value);\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render( console.log(val.format('HH:mm:ss'))} />, mountNode);\n"},"body":"\n````jsx\nimport { TimePicker } from '@alifd/next';\nimport moment from 'moment';\n\nclass ControlledTimePicker extends React.Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n value: moment('12:00:00', 'HH:mm:ss', true)\n };\n }\n\n onSelect = (value) => {\n this.setState({ value });\n this.props.onChange(value);\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render( console.log(val.format('HH:mm:ss'))} />, mountNode);\n````","html":"
    import { TimePicker } from '@alifd/next';\nimport moment from 'moment';\n\nclass ControlledTimePicker extends React.Component {\n    constructor(props, context) {\n        super(props, context);\n        this.state = {\n            value: moment('12:00:00', 'HH:mm:ss', true)\n        };\n    }\n\n    onSelect = (value) => {\n        this.setState({ value });\n        this.props.onChange(value);\n    }\n\n    render() {\n        return <TimePicker value={this.state.value} onChange={this.onSelect} />;\n    }\n}\n\nReactDOM.render(<ControlledTimePicker onChange={(val) => console.log(val.format('HH:mm:ss'))} />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/time-picker/demo/value.md b/compiled_docs/time-picker/demo/value.md new file mode 100644 index 0000000000..b5c73b66ae --- /dev/null +++ b/compiled_docs/time-picker/demo/value.md @@ -0,0 +1 @@ +{"title":"受控","meta":{"title":"受控","description":"\n

    通过 value 和 onChange 实现受控，仅支持通过选择实现受控。

    \n","order":"2"},"codes":{"jsx":"import { TimePicker } from '@alifd/next';\nimport moment from 'moment';\n\nclass ControlledTimePicker extends React.Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n value: moment('12:00:00', 'HH:mm:ss', true)\n };\n }\n\n onSelect = (value) => {\n this.setState({ value });\n this.props.onChange(value);\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render( console.log(val.format('HH:mm:ss'))} />, mountNode);\n"},"body":"\n\n````jsx\nimport { TimePicker } from '@alifd/next';\nimport moment from 'moment';\n\nclass ControlledTimePicker extends React.Component {\n constructor(props, context) {\n super(props, context);\n this.state = {\n value: moment('12:00:00', 'HH:mm:ss', true)\n };\n }\n\n onSelect = (value) => {\n this.setState({ value });\n this.props.onChange(value);\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render( console.log(val.format('HH:mm:ss'))} />, mountNode);\n````","html":"
    import { TimePicker } from '@alifd/next';\nimport moment from 'moment';\n\nclass ControlledTimePicker extends React.Component {\n    constructor(props, context) {\n        super(props, context);\n        this.state = {\n            value: moment('12:00:00', 'HH:mm:ss', true)\n        };\n    }\n\n    onSelect = (value) => {\n        this.setState({ value });\n        this.props.onChange(value);\n    }\n\n    render() {\n        return <TimePicker value={this.state.value} onChange={this.onSelect} />;\n    }\n}\n\nReactDOM.render(<ControlledTimePicker onChange={(val) => console.log(val.format('HH:mm:ss'))} />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/time-picker/index.en-us.md b/compiled_docs/time-picker/index.en-us.md new file mode 100644 index 0000000000..9eee0fbdff --- /dev/null +++ b/compiled_docs/time-picker/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

    Guide#

    When To Use#

    A TimePicker is used to input a time by displaying an interface the user can interact with. The TimePicker panel only support 24h clock. Setting format with:

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    FormatExampleDescription
    H HH0..23Hour，24h
    m mm0..59Minute
    s ss0..59Second
    \n

    By default, TimePicker using moment instance as input value, which is the suggestion way. In addition, input value as string is also supported, e.g. "12:00:00". The type of the first parameter in the callback of onChange is based on the input value.

    \n

    API#

    ","api":"

    TimePicker#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    labelInset label of inputReactNode-
    sizeSize of input

    option:
    'small', 'medium', 'large'    		Enum'medium'
    stateState of input

    option:
    'error', 'success'    		Enum-
    placeholderPlaceholder of inputString-
    valueTime valuecustom-
    defaultValueDefualt time valuecustom-
    hasClearHas clear iconBooleantrue
    formattime format
    https://momentjs.com/docs/#/parsing/string-format/    		String'HH:mm:ss'
    hourStepStep of hourNumber-
    minuteStepStep of minuteNumber-
    secondStepStep of secondNumber-
    disabledHoursFunction to disable hours

    signature:
    Function(index: Number) => Boolean
    paramter:
    index: {Number} hour 0 - 23
    return:
    {Boolean} if disabled
    		Function-
    disabledMinutesFunction to disable minutes

    signature:
    Function(index: Number) => Boolean
    paramter:
    index: {Number} minute 0 - 59
    return:
    {Boolean} if disabled
    		Function-
    disabledSecondsFunction to disable seconds

    signature:
    Function(index: Number) => Boolean
    paramter:
    index: {Number} second 0 - 59
    return:
    {Boolean} if disabled
    		Function-
    visibleVisible state of popupBoolean-
    defaultVisibleDefault visible state of popupBoolean-
    popupContainerContainer of popup

    signature:
    Function(target: Object) => ReactNode
    paramter:
    target: {Object} target container
    return:
    {ReactNode} container element
    		Function-
    popupAlignAlign of popup, @see Overylay doc for detailString'tl tl'
    popupTriggerTypeTrigger type of popup

    option:
    'click', 'hover'    		Enum'click'
    onVisibleChangeCallback when visible changes

    signature:
    Function(visible: Boolean, reason: String) => void
    paramter:
    visible: {Boolean} visible of popup
    reason: {String} reason to change visible    		Functionfunc.noop
    popupStyleCustom style of popupObject-
    popupClassNameCustom className of popupString-
    popupPropsProps of popupObject-
    disabledDisable the pickerBooleanfalse
    onChangeCallback when date changes

    signature:
    Function(value: Object/String) => void
    paramter:
    value: {Object/String} date value    		Functionfunc.noop
    \n

    ARIA and KeyBoard#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    按键说明
    EnterOpen time select popup
    EscClose time select popup
    UpInput previous seconds （if disabledMinutes={true} is previous minutes or previous hours）
    DownInput next seconds （if disabledMinutes={true} is next minutes or next hours）
    Page UpInput previous minutes
    Page DownInput next minutes
    Alt + Page UpInput previous hours
    Alt + Page DownInput next hours
    \n"} \ No newline at end of file diff --git a/compiled_docs/time-picker/index.md b/compiled_docs/time-picker/index.md new file mode 100644 index 0000000000..27c3c8195c --- /dev/null +++ b/compiled_docs/time-picker/index.md @@ -0,0 +1 @@ +{"meta":"

    Guide#

    何时使用#

    当用户需要输入一个时间，可以点击输入框，在弹出的时间选择面板上操作。时间选择面板仅支持 24 小时制。format 支持的时间格式如下：

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    格式例子说明
    H HH0..23时，24 小时制
    m mm0..59分
    s ss0..59秒
    \n

    组件默认使用 moment 实例作为输入输出值，推荐使用结合 moment 的方式使用组件。此外，组件也支持传入时间字符串的方式，例如直接传入 "12:00:00"。用户传入什么类型的 value/defaultValue 值，就会在 onChange 中返回相应的类型。

    \n

    API#

    ","api":"

    TimePicker#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    label按钮的文案ReactNode-
    size时间选择框的尺寸

    可选值:
    'small', 'medium', 'large'    		Enum'medium'
    state输入框状态

    可选值:
    'error', 'success'    		Enum-
    placeholder输入框提示String-
    value时间值（moment 对象或时间字符串，受控状态使用）custom-
    defaultValue时间初值（moment 对象或时间字符串，非受控状态使用）custom-
    hasClear是否允许清空时间Booleantrue
    format时间的格式
    https://momentjs.com/docs/#/parsing/string-format/    		String'HH:mm:ss'
    hourStep小时选项步长Number-
    minuteStep分钟选项步长Number-
    secondStep秒钟选项步长Number-
    disabledHours禁用小时函数

    签名:
    Function(index: Number) => Boolean
    参数:
    index: {Number} 时 0 - 23
    返回值:
    {Boolean} 是否禁用
    		Function-
    disabledMinutes禁用分钟函数

    签名:
    Function(index: Number) => Boolean
    参数:
    index: {Number} 分 0 - 59
    返回值:
    {Boolean} 是否禁用
    		Function-
    disabledSeconds禁用秒钟函数

    签名:
    Function(index: Number) => Boolean
    参数:
    index: {Number} 秒 0 - 59
    返回值:
    {Boolean} 是否禁用
    		Function-
    visible弹层是否显示（受控）Boolean-
    defaultVisible弹层默认是否显示（非受控）Boolean-
    popupContainer弹层容器

    签名:
    Function(target: Object) => ReactNode
    参数:
    target: {Object} 目标节点
    返回值:
    {ReactNode} 容器节点
    		Function-
    popupAlign弹层对齐方式, 详情见Overlay 文档String'tl tl'
    popupTriggerType弹层触发方式

    可选值:
    'click', 'hover'    		Enum'click'
    onVisibleChange弹层展示状态变化时的回调

    签名:
    Function(visible: Boolean, reason: String) => void
    参数:
    visible: {Boolean} 弹层是否隐藏和显示
    reason: {String} 触发弹层显示和隐藏的来源    		Functionfunc.noop
    popupStyle弹层自定义样式Object-
    popupClassName弹层自定义样式类String-
    popupProps弹层属性Object-
    disabled是否禁用Booleanfalse
    onChange时间值改变时的回调

    签名:
    Function(value: Object/String) => void
    参数:
    value: {Object/String} 时间对象或时间字符串    		Functionfunc.noop
    \n

    ARIA and KeyBoard#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    按键说明
    Enter打开时间选择框
    Esc关闭时间选择框
    Up输入上一秒的时间 （如果 disabledMinutes={true} 则可能是上一分钟或者上一小时）
    Down输入下一秒的时间 （如果 disabledMinutes={true} 则可能是下一分钟或者下一小时）
    Page Up输入上一分钟的时间
    Page Down输入下一分钟的时间
    Alt + Page Up输入上一小时的时间
    Alt + Page Down输入下一小时的时间
    \n"} \ No newline at end of file diff --git a/compiled_docs/timeline/demo/basic.en-us.md b/compiled_docs/timeline/demo/basic.en-us.md new file mode 100644 index 0000000000..6d69a0769e --- /dev/null +++ b/compiled_docs/timeline/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

    The simplest usage.

    \n","order":"0"},"codes":{"jsx":"import { Timeline } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(\n \n \n \n, mountNode);\n"},"body":"\n````jsx\nimport { Timeline } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(\n \n \n \n, mountNode);\n````","html":"
    import { Timeline } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(<Timeline>\n    <TimelineItem title=\"Receipt\" state=\"process\"/>\n    <TimelineItem title=\"Ship\" />\n    <TimelineItem title=\"Order\" />\n</Timeline>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/timeline/demo/basic.md b/compiled_docs/timeline/demo/basic.md new file mode 100644 index 0000000000..6db4c4475e --- /dev/null +++ b/compiled_docs/timeline/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

    最简单的用法。

    \n","order":"0"},"codes":{"jsx":"import { Timeline } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(\n \n \n \n, mountNode);\n"},"body":"\n\n````jsx\nimport { Timeline } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(\n \n \n \n, mountNode);\n````","html":"
    import { Timeline } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(<Timeline>\n    <TimelineItem title=\"Receipt\" state=\"process\"/>\n    <TimelineItem title=\"Ship\" />\n    <TimelineItem title=\"Order\" />\n</Timeline>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/timeline/demo/content.en-us.md b/compiled_docs/timeline/demo/content.en-us.md new file mode 100644 index 0000000000..dd3b47cc08 --- /dev/null +++ b/compiled_docs/timeline/demo/content.en-us.md @@ -0,0 +1 @@ +{"title":"Content","meta":{"title":"Content","description":"\n

    With the use of content, add the effects of title, content, and icon, respectively.

    \n","order":"2"},"codes":{"jsx":"import { Timeline } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(\n \n \n \n \n \n \n \n \n \n, mountNode);\n"},"body":"\n````jsx\nimport { Timeline } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(\n \n \n \n \n \n \n \n \n \n, mountNode);\n````","html":"
    import { Timeline } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(<Timeline>\n    <TimelineItem title=\"Sign\" content=\"[Hangzhou] has received the sign, the signer is Alibaba Post Office, thank you for using STO, looking forward to serving you again\" time={'2016-06-10 10:30:00'} state=\"process\" />\n    <TimelineItem title=\"Delivery\" content=\"[Hangzhou]Express has reached Hangzhou Hangzhou Binjiang Company\" time={'2016-06-10 09:30:00'} />\n    <TimelineItem title=\"Delivery\" content=\"[Hangzhou] Zhejiang Hangzhou Binjiang Company dispatches members for you\" time={'2016-06-10 09:03:00'} />\n    <TimelineItem title=\"Transport\" content=\"[Hangzhou] Zhejiang Hangzhou Transshipment Center has been issued\" time={'2016-06-10 06:10:00'} />\n    <TimelineItem title=\"Transport\" content=\"[Dongguan City] Guangdong Dongguan Transshipment Center has been issued\" time={'2016-06-09 18:00:00'} />\n    <TimelineItem title=\"Processing\" content=\"[Dongguan City] Shentong Express Guangdong Fenggang Branch of Guangdong Province\" time={'2016-06-09 16:12:00'} />\n    <TimelineItem title=\"Processing\" content=\"[Dongguan City] The merchant is informing the express company to insert\" time={'2016-06-09 14:00:00'} />\n    <TimelineItem title=\"Processing\" content=\"[Dongguan City] Your order to be picked\" time={'2016-06-09 10:12:19'} />\n    <TimelineItem title=\"Processing\" content=\"[Dongguan] Your order starts processing\" time={'2016-06-09 10:01:09'} icon=\"atm\"/>\n</Timeline>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/timeline/demo/content.md b/compiled_docs/timeline/demo/content.md new file mode 100644 index 0000000000..48ea3f579c --- /dev/null +++ b/compiled_docs/timeline/demo/content.md @@ -0,0 +1 @@ +{"title":"内容","meta":{"title":"内容","description":"\n

    带内容的用法，分别添加title，content，icon的效果。

    \n","order":"2"},"codes":{"jsx":"import { Timeline } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(\n \n \n \n \n \n \n \n \n \n, mountNode);\n"},"body":"\n\n````jsx\nimport { Timeline } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(\n \n \n \n \n \n \n \n \n \n, mountNode);\n````","html":"
    import { Timeline } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(<Timeline>\n    <TimelineItem title=\"Sign\" content=\"[Hangzhou] has received the sign, the signer is Alibaba Post Office, thank you for using STO, looking forward to serving you again\" time={'2016-06-10 10:30:00'} state=\"process\" />\n    <TimelineItem title=\"Delivery\" content=\"[Hangzhou]Express has reached Hangzhou Hangzhou Binjiang Company\" time={'2016-06-10 09:30:00'} />\n    <TimelineItem title=\"Delivery\" content=\"[Hangzhou] Zhejiang Hangzhou Binjiang Company dispatches members for you\" time={'2016-06-10 09:03:00'} />\n    <TimelineItem title=\"Transport\" content=\"[Hangzhou] Zhejiang Hangzhou Transshipment Center has been issued\" time={'2016-06-10 06:10:00'} />\n    <TimelineItem title=\"Transport\" content=\"[Dongguan City] Guangdong Dongguan Transshipment Center has been issued\" time={'2016-06-09 18:00:00'} />\n    <TimelineItem title=\"Processing\" content=\"[Dongguan City] Shentong Express Guangdong Fenggang Branch of Guangdong Province\" time={'2016-06-09 16:12:00'} />\n    <TimelineItem title=\"Processing\" content=\"[Dongguan City] The merchant is informing the express company to insert\" time={'2016-06-09 14:00:00'} />\n    <TimelineItem title=\"Processing\" content=\"[Dongguan City] Your order to be picked\" time={'2016-06-09 10:12:19'} />\n    <TimelineItem title=\"Processing\" content=\"[Dongguan] Your order starts processing\" time={'2016-06-09 10:01:09'} icon=\"atm\"/>\n</Timeline>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/timeline/demo/custom.en-us.md b/compiled_docs/timeline/demo/custom.en-us.md new file mode 100644 index 0000000000..8893190f47 --- /dev/null +++ b/compiled_docs/timeline/demo/custom.en-us.md @@ -0,0 +1 @@ +{"title":"Custom timeline node","meta":{"title":"Custom timeline node","description":"\n

    Custom timeline node.

    \n","order":"4"},"codes":{"jsx":"import { Timeline, Icon } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(\n \n 😂 } state=\"success\" time=\"2017-10-22\"/>\n } content=\"Congratulations, successful orders!\" time=\"2017-10-23\"/>\n, mountNode);\n","css":".custom-node {\n color: #1DC11D;\n position: relative;\n left: 3px;\n font-size: 14px;\n}\n"},"body":"\n````jsx\nimport { Timeline, Icon } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(\n \n 😂 } state=\"success\" time=\"2017-10-22\"/>\n } content=\"Congratulations, successful orders!\" time=\"2017-10-23\"/>\n, mountNode);\n````\n\n````css\n.custom-node {\n color: #1DC11D;\n position: relative;\n left: 3px;\n font-size: 14px;\n}\n````","html":"
    import { Timeline, Icon } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(<Timeline>\n    <TimelineItem title=\"Receipt\" state=\"process\" icon=\"smile\" time=\"2017-10-21\"/>\n    <TimelineItem title=\"Ship\" dot={<span className=\"custom-node\"> 😂 </span>} state=\"success\" time=\"2017-10-22\"/>\n    <TimelineItem title=\"Order\" dot={<Icon type=\"success\" size=\"xl\" style={{ color: '#1DC11D' }}/>} content=\"Congratulations, successful orders!\" time=\"2017-10-23\"/>\n</Timeline>, mountNode);
    .custom-node {\n    color: #1DC11D;\n    position: relative;\n    left: 3px;\n    font-size: 14px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/timeline/demo/custom.md b/compiled_docs/timeline/demo/custom.md new file mode 100644 index 0000000000..5a6f03500b --- /dev/null +++ b/compiled_docs/timeline/demo/custom.md @@ -0,0 +1 @@ +{"title":"自定义时间轴节点","meta":{"title":"自定义时间轴节点","description":"\n

    自定义时间轴节点。

    \n","order":"4"},"codes":{"jsx":"import { Timeline, Icon } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(\n \n 😂 } state=\"success\" time=\"2017-10-22\"/>\n } content=\"Congratulations, successful orders!\" time=\"2017-10-23\"/>\n, mountNode);\n","css":".custom-node {\n color: #1DC11D;\n position: relative;\n left: 3px;\n font-size: 14px;\n}\n"},"body":"\n````jsx\nimport { Timeline, Icon } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(\n \n 😂 } state=\"success\" time=\"2017-10-22\"/>\n } content=\"Congratulations, successful orders!\" time=\"2017-10-23\"/>\n, mountNode);\n````\n\n````css\n.custom-node {\n color: #1DC11D;\n position: relative;\n left: 3px;\n font-size: 14px;\n}\n````","html":"
    import { Timeline, Icon } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(<Timeline>\n    <TimelineItem title=\"Receipt\" state=\"process\" icon=\"smile\" time=\"2017-10-21\"/>\n    <TimelineItem title=\"Ship\" dot={<span className=\"custom-node\"> 😂 </span>} state=\"success\" time=\"2017-10-22\"/>\n    <TimelineItem title=\"Order\" dot={<Icon type=\"success\" size=\"xl\" style={{ color: '#1DC11D' }}/>} content=\"Congratulations, successful orders!\" time=\"2017-10-23\"/>\n</Timeline>, mountNode);
    .custom-node {\n    color: #1DC11D;\n    position: relative;\n    left: 3px;\n    font-size: 14px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/timeline/demo/fold.en-us.md b/compiled_docs/timeline/demo/fold.en-us.md new file mode 100644 index 0000000000..b782304111 --- /dev/null +++ b/compiled_docs/timeline/demo/fold.en-us.md @@ -0,0 +1 @@ +{"title":"Fold","meta":{"title":"Fold","description":"\n

    Custom fold area.

    \n","order":"5"},"codes":{"jsx":"import { Timeline, Select } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n timelineAnimation: true\n };\n }\n\n onTimelineAnimation = (value) => {\n this.setState({ timelineAnimation: value });\n }\n\n render() {\n return (
    \n
    \n \n
    \n \n \n \n \n \n \n \n \n \n \n \n
    );\n }\n}\nReactDOM.render(, mountNode);\n","css":".custom-step-option {\n margin-bottom: 20px;\n}\n\n"},"body":"\n````jsx\nimport { Timeline, Select } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n timelineAnimation: true\n };\n }\n\n onTimelineAnimation = (value) => {\n this.setState({ timelineAnimation: value });\n }\n\n render() {\n return (
    \n
    \n \n
    \n \n \n \n \n \n \n \n \n \n \n \n
    );\n }\n}\nReactDOM.render(, mountNode);\n````\n\n````css\n.custom-step-option {\n margin-bottom: 20px;\n}\n\n````","html":"
    import { Timeline, Select } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            timelineAnimation: true\n        };\n    }\n\n    onTimelineAnimation = (value) => {\n        this.setState({ timelineAnimation: value });\n    }\n\n    render() {\n        return (<div>\n            <div className=\"custom-step-option\">\n                <Select placeholder=\"Whether to start animation\" onChange={this.onTimelineAnimation} className=\"custom-select\" defaultValue>\n                    {\n                        [true, false].map((item, index) => <Select.Option value={item} key={index}>{item ? 'Animation on' : 'Animation off'}</Select.Option>)\n                    }\n                </Select>\n            </div>\n            <Timeline animation={this.state.timelineAnimation} fold={[{ foldArea: [1, 2], foldShow: false }, { foldArea: [5], foldShow: false }]}>\n                <TimelineItem title=\"Sign\" content=\"[Hangzhou] has received the sign, the signer is Alibaba Post Office, thank you for using STO, looking forward to serving you again\" time={'2016-06-10 10:30:00'} state=\"process\" />\n                <TimelineItem title=\"Delivery\" content=\"[Hangzhou]Express has reached Hangzhou Hangzhou Binjiang Company\" time={'2016-06-10 09:30:00'} />\n                <TimelineItem title=\"Delivery\" content=\"[Hangzhou] Zhejiang Hangzhou Binjiang Company dispatches members for you\" time={'2016-06-10 09:03:00'} />\n                <TimelineItem title=\"Transport\" content=\"[Hangzhou] Zhejiang Hangzhou Transshipment Center has been issued\" time={'2016-06-10 06:10:00'} />\n                <TimelineItem title=\"Transport\" content=\"[Dongguan City] Guangdong Dongguan Transshipment Center has been issued\" time={'2016-06-09 18:00:00'} />\n                <TimelineItem title=\"Processing\" content=\"[Dongguan City] Shentong Express Guangdong Fenggang Branch of Guangdong Province\" time={'2016-06-09 16:12:00'} />\n                <TimelineItem title=\"Processing\" content=\"[Dongguan City] The merchant is informing the express company to insert\" time={'2016-06-09 14:00:00'} />\n                <TimelineItem title=\"Processing\" content=\"[Dongguan City] Your order to be picked\" time={'2016-06-09 10:12:19'} />\n                <TimelineItem title=\"Processing\" content=\"[Dongguan] Your order starts processing\" time={'2016-06-09 10:01:09'} />\n            </Timeline>\n        </div>);\n    }\n}\nReactDOM.render(<Demo />, mountNode);
    .custom-step-option {\n    margin-bottom: 20px;\n}\n
    "} \ No newline at end of file diff --git a/compiled_docs/timeline/demo/fold.md b/compiled_docs/timeline/demo/fold.md new file mode 100644 index 0000000000..f7e41ffd74 --- /dev/null +++ b/compiled_docs/timeline/demo/fold.md @@ -0,0 +1 @@ +{"title":"折叠","meta":{"title":"折叠","description":"\n

    自定义折叠区域。

    \n","order":"5"},"codes":{"jsx":"import { Timeline, Select } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n timelineAnimation: true\n };\n }\n\n onTimelineAnimation = (value) => {\n this.setState({ timelineAnimation: value });\n }\n\n render() {\n return (
    \n
    \n \n
    \n \n \n \n \n \n \n \n \n \n \n \n
    );\n }\n}\nReactDOM.render(, mountNode);\n","css":".custom-step-option {\n margin-bottom: 20px;\n}\n\n"},"body":"\n````jsx\nimport { Timeline, Select } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n timelineAnimation: true\n };\n }\n\n onTimelineAnimation = (value) => {\n this.setState({ timelineAnimation: value });\n }\n\n render() {\n return (
    \n
    \n \n
    \n \n \n \n \n \n \n \n \n \n \n \n
    );\n }\n}\nReactDOM.render(, mountNode);\n````\n\n````css\n.custom-step-option {\n margin-bottom: 20px;\n}\n\n````","html":"
    import { Timeline, Select } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            timelineAnimation: true\n        };\n    }\n\n    onTimelineAnimation = (value) => {\n        this.setState({ timelineAnimation: value });\n    }\n\n    render() {\n        return (<div>\n            <div className=\"custom-step-option\">\n                <Select placeholder=\"Whether to start animation\" onChange={this.onTimelineAnimation} className=\"custom-select\" defaultValue>\n                    {\n                        [true, false].map((item, index) => <Select.Option value={item} key={index}>{item ? 'Animation on' : 'Animation off'}</Select.Option>)\n                    }\n                </Select>\n            </div>\n            <Timeline animation={this.state.timelineAnimation} fold={[{ foldArea: [1, 2], foldShow: false }, { foldArea: [5], foldShow: false }]}>\n                <TimelineItem title=\"Sign\" content=\"[Hangzhou] has received the sign, the signer is Alibaba Post Office, thank you for using STO, looking forward to serving you again\" time={'2016-06-10 10:30:00'} state=\"process\" />\n                <TimelineItem title=\"Delivery\" content=\"[Hangzhou]Express has reached Hangzhou Hangzhou Binjiang Company\" time={'2016-06-10 09:30:00'} />\n                <TimelineItem title=\"Delivery\" content=\"[Hangzhou] Zhejiang Hangzhou Binjiang Company dispatches members for you\" time={'2016-06-10 09:03:00'} />\n                <TimelineItem title=\"Transport\" content=\"[Hangzhou] Zhejiang Hangzhou Transshipment Center has been issued\" time={'2016-06-10 06:10:00'} />\n                <TimelineItem title=\"Transport\" content=\"[Dongguan City] Guangdong Dongguan Transshipment Center has been issued\" time={'2016-06-09 18:00:00'} />\n                <TimelineItem title=\"Processing\" content=\"[Dongguan City] Shentong Express Guangdong Fenggang Branch of Guangdong Province\" time={'2016-06-09 16:12:00'} />\n                <TimelineItem title=\"Processing\" content=\"[Dongguan City] The merchant is informing the express company to insert\" time={'2016-06-09 14:00:00'} />\n                <TimelineItem title=\"Processing\" content=\"[Dongguan City] Your order to be picked\" time={'2016-06-09 10:12:19'} />\n                <TimelineItem title=\"Processing\" content=\"[Dongguan] Your order starts processing\" time={'2016-06-09 10:01:09'} />\n            </Timeline>\n        </div>);\n    }\n}\nReactDOM.render(<Demo />, mountNode);
    .custom-step-option {\n    margin-bottom: 20px;\n}\n
    "} \ No newline at end of file diff --git a/compiled_docs/timeline/demo/state.en-us.md b/compiled_docs/timeline/demo/state.en-us.md new file mode 100644 index 0000000000..4ba64fa794 --- /dev/null +++ b/compiled_docs/timeline/demo/state.en-us.md @@ -0,0 +1 @@ +{"title":"State","meta":{"title":"State","description":"\n

    Set different states for each node.

    \n","order":"1"},"codes":{"jsx":"import { Timeline } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(\n \n \n \n, mountNode);\n"},"body":"\n````jsx\nimport { Timeline } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(\n \n \n \n, mountNode);\n````","html":"
    import { Timeline } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(<Timeline>\n    <TimelineItem title=\"Cloudy\" time={'2016-06-10 10:30:00'} state=\"process\"/>\n    <TimelineItem title=\"Sunny\" time={'2016-06-11'} state=\"success\"/>\n    <TimelineItem title=\"Rainy\" time={'2016-06-09'} state=\"error\"/>\n</Timeline>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/timeline/demo/state.md b/compiled_docs/timeline/demo/state.md new file mode 100644 index 0000000000..2eb0fc54c4 --- /dev/null +++ b/compiled_docs/timeline/demo/state.md @@ -0,0 +1 @@ +{"title":"状态","meta":{"title":"状态","description":"\n

    设置每个节点不同的状态。

    \n","order":"1"},"codes":{"jsx":"import { Timeline } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(\n \n \n \n, mountNode);\n"},"body":"\n\n````jsx\nimport { Timeline } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(\n \n \n \n, mountNode);\n````","html":"
    import { Timeline } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(<Timeline>\n    <TimelineItem title=\"Cloudy\" time={'2016-06-10 10:30:00'} state=\"process\"/>\n    <TimelineItem title=\"Sunny\" time={'2016-06-11'} state=\"success\"/>\n    <TimelineItem title=\"Rainy\" time={'2016-06-09'} state=\"error\"/>\n</Timeline>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/timeline/demo/timeLeft.en-us.md b/compiled_docs/timeline/demo/timeLeft.en-us.md new file mode 100644 index 0000000000..8561b962af --- /dev/null +++ b/compiled_docs/timeline/demo/timeLeft.en-us.md @@ -0,0 +1 @@ +{"title":"Time in the left side of tiemline","meta":{"title":"Time in the left side of tiemline","description":"\n

    Set the left side of the timeline.

    \n","order":"3"},"codes":{"jsx":"import { Timeline } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(\n \n \n \n, mountNode);\n"},"body":"\n````jsx\nimport { Timeline } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(\n \n \n \n, mountNode);\n````","html":"
    import { Timeline } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(<Timeline>\n    <TimelineItem title=\"Sign\" state=\"process\" timeLeft=\"2016-10-03\" />\n    <TimelineItem title=\"Ship\" timeLeft=\"2016-10-02\" />\n    <TimelineItem title=\"Order\" timeLeft=\"2016-10-01\" />\n</Timeline>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/timeline/demo/timeLeft.md b/compiled_docs/timeline/demo/timeLeft.md new file mode 100644 index 0000000000..0b9eb20969 --- /dev/null +++ b/compiled_docs/timeline/demo/timeLeft.md @@ -0,0 +1 @@ +{"title":"时间在左","meta":{"title":"时间在左","description":"\n

    设置时间轴左边的内容。

    \n","order":"3"},"codes":{"jsx":"import { Timeline } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(\n \n \n \n, mountNode);\n"},"body":"\n\n````jsx\nimport { Timeline } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(\n \n \n \n, mountNode);\n````","html":"
    import { Timeline } from '@alifd/next';\n\nconst TimelineItem = Timeline.Item;\nReactDOM.render(<Timeline>\n    <TimelineItem title=\"Sign\" state=\"process\" timeLeft=\"2016-10-03\" />\n    <TimelineItem title=\"Ship\" timeLeft=\"2016-10-02\" />\n    <TimelineItem title=\"Order\" timeLeft=\"2016-10-01\" />\n</Timeline>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/timeline/index.en-us.md b/compiled_docs/timeline/index.en-us.md new file mode 100644 index 0000000000..cea178adac --- /dev/null +++ b/compiled_docs/timeline/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

    Guide#

    Vertical display of time flow information.

    \n

    When to use#

      \n
    • When there is a series of information that needs to be ordered from top to bottom.
      • \n
    • There is a need to carry out a series of visual timeline time.
      • \n
    \n

    API#

    ","api":"

    Timeline#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    foldcustom folding options, eg: [{foldArea: [startIndex, endIndex], foldShow: boolean}]Array[]
    \n

    Timeline.Item#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    statenode state

    optional:
    'done', 'process', 'error', 'success'    		Enum'done'
    iconiconString-
    dotcustom timeline nodeReactNode-
    timeformatted timeReactNode-
    titletitleReactNode-
    timeLeftthe time of timeline leftReactNode-
    contentthe content of timeline rightReactNode-
    animationanimationBooleantrue
    \n"} \ No newline at end of file diff --git a/compiled_docs/timeline/index.md b/compiled_docs/timeline/index.md new file mode 100644 index 0000000000..0cdd08db9d --- /dev/null +++ b/compiled_docs/timeline/index.md @@ -0,0 +1 @@ +{"meta":"

    Guide#

    垂直展示的时间流信息。

    \n

    何时使用#

      \n
    • 当有一系列信息需要从上至下按时间排列时。
      • \n
    • 需要有一条时间轴进行视觉上的串联时。
      • \n
    \n

    API#

    ","api":"

    Timeline#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    fold自定义折叠选项 示例[{foldArea: [startIndex, endIndex], foldShow: boolean}]Array[]
    \n"} \ No newline at end of file diff --git a/compiled_docs/transfer/demo/accessibility.en-us.md b/compiled_docs/transfer/demo/accessibility.en-us.md new file mode 100644 index 0000000000..eabb5a3099 --- /dev/null +++ b/compiled_docs/transfer/demo/accessibility.en-us.md @@ -0,0 +1 @@ +{"title":"Accessibility","meta":{"title":"Accessibility","description":"\n

    By setting the locale to modify on accessibility support,The default is set,Please refer to ARIA and KeyBoard. \nSet a unique id for accessibility support.

    \n","order":"6"},"codes":{"jsx":"import { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content${i}`,\n value: `${i}`,\n });\n }\n\n return dataSource;\n})();\n\nconst obj = {\n items: '项',\n item: '项',\n moveAll: '移动全部',\n searchPlaceholder: '请输入',\n moveToLeft: '撤销选中元素',\n moveToRight: '提交选中元素'\n};\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content${i}`,\n value: `${i}`,\n });\n }\n\n return dataSource;\n})();\n\nconst obj = {\n items: '项',\n item: '项',\n moveAll: '移动全部',\n searchPlaceholder: '请输入',\n moveToLeft: '撤销选中元素',\n moveToRight: '提交选中元素'\n};\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n    const dataSource = [];\n\n    for (let i = 0; i < 10; i++) {\n        dataSource.push({\n            label: `content${i}`,\n            value: `${i}`,\n        });\n    }\n\n    return dataSource;\n})();\n\nconst obj = {\n    items: '项',\n    item: '项',\n    moveAll: '移动全部',\n    searchPlaceholder: '请输入',\n    moveToLeft: '撤销选中元素',\n    moveToRight: '提交选中元素'\n};\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n    }\n\n    render() {\n        return (\n            <Transfer id=\"a11y-transfer\" defaultValue={['2']} dataSource={dataSource} defaultLeftChecked={['1']} locale={obj} onChange={this.handleChange} titles={['Title', 'Title']} />\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/transfer/demo/accessibility.md b/compiled_docs/transfer/demo/accessibility.md new file mode 100644 index 0000000000..c17a9e3d44 --- /dev/null +++ b/compiled_docs/transfer/demo/accessibility.md @@ -0,0 +1 @@ +{"title":"无障碍","meta":{"title":"无障碍","description":"\n

    通过设置locale去修改对无障碍支持，默认已经设置，请参考ARIA and KeyBoard。\n为保证可访问性，需要设置全局唯一的id

    \n","order":"6"},"codes":{"jsx":"import { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content${i}`,\n value: `${i}`,\n });\n }\n\n return dataSource;\n})();\n\nconst obj = {\n items: '项',\n item: '项',\n moveAll: '移动全部',\n searchPlaceholder: '请输入',\n moveToLeft: '撤销选中元素',\n moveToRight: '提交选中元素'\n};\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content${i}`,\n value: `${i}`,\n });\n }\n\n return dataSource;\n})();\n\nconst obj = {\n items: '项',\n item: '项',\n moveAll: '移动全部',\n searchPlaceholder: '请输入',\n moveToLeft: '撤销选中元素',\n moveToRight: '提交选中元素'\n};\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n    const dataSource = [];\n\n    for (let i = 0; i < 10; i++) {\n        dataSource.push({\n            label: `content${i}`,\n            value: `${i}`,\n        });\n    }\n\n    return dataSource;\n})();\n\nconst obj = {\n    items: '项',\n    item: '项',\n    moveAll: '移动全部',\n    searchPlaceholder: '请输入',\n    moveToLeft: '撤销选中元素',\n    moveToRight: '提交选中元素'\n};\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n    }\n\n    render() {\n        return (\n            <Transfer id=\"a11y-transfer\" defaultValue={['2']} dataSource={dataSource} defaultLeftChecked={['1']} locale={obj} onChange={this.handleChange} titles={['Title', 'Title']} />\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/transfer/demo/basic.en-us.md b/compiled_docs/transfer/demo/basic.en-us.md new file mode 100644 index 0000000000..b4c5abfe47 --- /dev/null +++ b/compiled_docs/transfer/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

    The simplest usage.

    \n","order":"0"},"codes":{"jsx":"import { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n    const dataSource = [];\n\n    for (let i = 0; i < 10; i++) {\n        dataSource.push({\n            label: `content${i}`,\n            value: `${i}`,\n            disabled: i % 4 === 0\n        });\n    }\n\n    return dataSource;\n})();\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n    }\n\n    render() {\n        return (\n            <Transfer defaultValue={['3']} dataSource={dataSource} defaultLeftChecked={['1']} onChange={this.handleChange} titles={['Title', 'Title']} />\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/transfer/demo/basic.md b/compiled_docs/transfer/demo/basic.md new file mode 100644 index 0000000000..4418f94591 --- /dev/null +++ b/compiled_docs/transfer/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

    最简单的用法。

    \n","order":"0"},"codes":{"jsx":"import { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n    const dataSource = [];\n\n    for (let i = 0; i < 10; i++) {\n        dataSource.push({\n            label: `content${i}`,\n            value: `${i}`,\n            disabled: i % 4 === 0\n        });\n    }\n\n    return dataSource;\n})();\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n    }\n\n    render() {\n        return (\n            <Transfer defaultValue={['3']} dataSource={dataSource} defaultLeftChecked={['1']} onChange={this.handleChange} titles={['Title', 'Title']} />\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/transfer/demo/control.en-us.md b/compiled_docs/transfer/demo/control.en-us.md new file mode 100644 index 0000000000..ea2a03950e --- /dev/null +++ b/compiled_docs/transfer/demo/control.en-us.md @@ -0,0 +1 @@ +{"title":"Control","meta":{"title":"Control","description":"\n

    Demo the control usage.

    \n","order":"1"},"codes":{"jsx":"import { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: ['3']\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n value\n });\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: ['3']\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n value\n });\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n    const dataSource = [];\n\n    for (let i = 0; i < 10; i++) {\n        dataSource.push({\n            label: `content${i}`,\n            value: `${i}`,\n            disabled: i % 4 === 0\n        });\n    }\n\n    return dataSource;\n})();\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: ['3']\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n\n        this.setState({\n            value\n        });\n    }\n\n    render() {\n        return <Transfer value={this.state.value} dataSource={dataSource} defaultLeftChecked={['1']} onChange={this.handleChange} titles={['Title', 'Title']} />;\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/transfer/demo/control.md b/compiled_docs/transfer/demo/control.md new file mode 100644 index 0000000000..7350a8e3e3 --- /dev/null +++ b/compiled_docs/transfer/demo/control.md @@ -0,0 +1 @@ +{"title":"受控","meta":{"title":"受控","description":"\n

    展示受控的用法。

    \n","order":"1"},"codes":{"jsx":"import { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: ['3']\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n value\n });\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: ['3']\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n\n this.setState({\n value\n });\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n    const dataSource = [];\n\n    for (let i = 0; i < 10; i++) {\n        dataSource.push({\n            label: `content${i}`,\n            value: `${i}`,\n            disabled: i % 4 === 0\n        });\n    }\n\n    return dataSource;\n})();\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: ['3']\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n\n        this.setState({\n            value\n        });\n    }\n\n    render() {\n        return <Transfer value={this.state.value} dataSource={dataSource} defaultLeftChecked={['1']} onChange={this.handleChange} titles={['Title', 'Title']} />;\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/transfer/demo/custom.en-us.md b/compiled_docs/transfer/demo/custom.en-us.md new file mode 100644 index 0000000000..70e8b44606 --- /dev/null +++ b/compiled_docs/transfer/demo/custom.en-us.md @@ -0,0 +1 @@ +{"title":"Customize","meta":{"title":"Customize","description":"\n

    Demo the customize style usage.

    \n","order":"5"},"codes":{"jsx":"import { Transfer, Button } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: i % 3 === 0 ? `content${i}contentcontentcontentcontentcontent` : `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return (\n Source, 'Target']} \n operations={['>>', '<<']} />\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Transfer, Button } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: i % 3 === 0 ? `content${i}contentcontentcontentcontentcontent` : `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return (\n Source, 'Target']} \n operations={['>>', '<<']} />\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Transfer, Button } from '@alifd/next';\n\nconst dataSource = (() => {\n    const dataSource = [];\n\n    for (let i = 0; i < 10; i++) {\n        dataSource.push({\n            label: i % 3 === 0 ? `content${i}contentcontentcontentcontentcontent` : `content${i}`,\n            value: `${i}`,\n            disabled: i % 4 === 0\n        });\n    }\n\n    return dataSource;\n})();\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n    }\n\n    render() {\n        return (\n            <Transfer \n                defaultValue={['3']} \n                dataSource={dataSource} \n                listStyle={{ width: '200px', height: '192px' }} \n                defaultLeftChecked={['1']} \n                onChange={this.handleChange} \n                titles={[<Button key='left' type='primary'>Source</Button>, 'Target']} \n                operations={['>>', '<<']} />\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/transfer/demo/custom.md b/compiled_docs/transfer/demo/custom.md new file mode 100644 index 0000000000..260ae77a04 --- /dev/null +++ b/compiled_docs/transfer/demo/custom.md @@ -0,0 +1 @@ +{"title":"自定义","meta":{"title":"自定义","description":"\n

    展示自定义样式的用法。

    \n","order":"5"},"codes":{"jsx":"import { Transfer, Button } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: i % 3 === 0 ? `content${i}contentcontentcontentcontentcontent` : `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return (\n Source, 'Target']} \n operations={['>>', '<<']} />\n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Transfer, Button } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: i % 3 === 0 ? `content${i}contentcontentcontentcontentcontent` : `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return (\n Source, 'Target']} \n operations={['>>', '<<']} />\n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Transfer, Button } from '@alifd/next';\n\nconst dataSource = (() => {\n    const dataSource = [];\n\n    for (let i = 0; i < 10; i++) {\n        dataSource.push({\n            label: i % 3 === 0 ? `content${i}contentcontentcontentcontentcontent` : `content${i}`,\n            value: `${i}`,\n            disabled: i % 4 === 0\n        });\n    }\n\n    return dataSource;\n})();\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n    }\n\n    render() {\n        return (\n            <Transfer \n                defaultValue={['3']} \n                dataSource={dataSource} \n                listStyle={{ width: '200px', height: '192px' }} \n                defaultLeftChecked={['1']} \n                onChange={this.handleChange} \n                titles={[<Button key='left' type='primary'>Source</Button>, 'Target']} \n                operations={['>>', '<<']} />\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/transfer/demo/search.en-us.md b/compiled_docs/transfer/demo/search.en-us.md new file mode 100644 index 0000000000..85857ae5ac --- /dev/null +++ b/compiled_docs/transfer/demo/search.en-us.md @@ -0,0 +1 @@ +{"title":"Search","meta":{"title":"Search","description":"\n

    Demo the search usage.

    \n","order":"3"},"codes":{"jsx":"import { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n    const dataSource = [];\n\n    for (let i = 0; i < 10; i++) {\n        dataSource.push({\n            label: `content${i}`,\n            value: `${i}`,\n            disabled: i % 4 === 0\n        });\n    }\n\n    return dataSource;\n})();\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n    }\n\n    render() {\n        return <Transfer showSearch defaultValue={['3']} dataSource={dataSource} defaultLeftChecked={['1']} onChange={this.handleChange} titles={['Searchable', 'Searchable']} />;\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/transfer/demo/search.md b/compiled_docs/transfer/demo/search.md new file mode 100644 index 0000000000..d3358d9c46 --- /dev/null +++ b/compiled_docs/transfer/demo/search.md @@ -0,0 +1 @@ +{"title":"搜索","meta":{"title":"搜索","description":"\n

    展示搜索的用法。

    \n","order":"3"},"codes":{"jsx":"import { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n    const dataSource = [];\n\n    for (let i = 0; i < 10; i++) {\n        dataSource.push({\n            label: `content${i}`,\n            value: `${i}`,\n            disabled: i % 4 === 0\n        });\n    }\n\n    return dataSource;\n})();\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n    }\n\n    render() {\n        return <Transfer showSearch defaultValue={['3']} dataSource={dataSource} defaultLeftChecked={['1']} onChange={this.handleChange} titles={['Searchable', 'Searchable']} />;\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/transfer/demo/simple.en-us.md b/compiled_docs/transfer/demo/simple.en-us.md new file mode 100644 index 0000000000..2fd38f1d28 --- /dev/null +++ b/compiled_docs/transfer/demo/simple.en-us.md @@ -0,0 +1 @@ +{"title":"Simple mode","meta":{"title":"Simple mode","description":"\n

    You can enable the simple mode and click the item to move by setting mode to 'simple'.

    \n","order":"2"},"codes":{"jsx":"import { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n    const dataSource = [];\n\n    for (let i = 0; i < 10; i++) {\n        dataSource.push({\n            label: `content${i}`,\n            value: `${i}`,\n            disabled: i % 4 === 0\n        });\n    }\n\n    return dataSource;\n})();\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n    }\n\n    render() {\n        return <Transfer mode=\"simple\" defaultValue={['3']} dataSource={dataSource} defaultLeftChecked={['1']} onChange={this.handleChange} titles={['Simple Mode', 'Simple Mode']} />;\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/transfer/demo/simple.md b/compiled_docs/transfer/demo/simple.md new file mode 100644 index 0000000000..4e03220d4c --- /dev/null +++ b/compiled_docs/transfer/demo/simple.md @@ -0,0 +1 @@ +{"title":"简单模式","meta":{"title":"简单模式","description":"\n

    通过设置 mode 为 'simple'，可以开启简单模式，点击选项即移动。

    \n","order":"2"},"codes":{"jsx":"import { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data, extra) {\n console.log(value, data, extra);\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n    const dataSource = [];\n\n    for (let i = 0; i < 10; i++) {\n        dataSource.push({\n            label: `content${i}`,\n            value: `${i}`,\n            disabled: i % 4 === 0\n        });\n    }\n\n    return dataSource;\n})();\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value, data, extra) {\n        console.log(value, data, extra);\n    }\n\n    render() {\n        return <Transfer mode=\"simple\" defaultValue={['3']} dataSource={dataSource} defaultLeftChecked={['1']} onChange={this.handleChange} titles={['Simple Mode', 'Simple Mode']} />;\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/transfer/demo/sortable.en-us.md b/compiled_docs/transfer/demo/sortable.en-us.md new file mode 100644 index 0000000000..0333c05ff7 --- /dev/null +++ b/compiled_docs/transfer/demo/sortable.en-us.md @@ -0,0 +1 @@ +{"title":"Drag and drop sort","meta":{"title":"Drag and drop sort","description":"\n

    After setting the sortable property to true, you can drag and drop the items.

    \n","order":"4"},"codes":{"jsx":"import { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleSort = this.handleSort.bind(this);\n }\n\n handleSort(value, position) {\n console.log(value, position);\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleSort = this.handleSort.bind(this);\n }\n\n handleSort(value, position) {\n console.log(value, position);\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n    const dataSource = [];\n\n    for (let i = 0; i < 10; i++) {\n        dataSource.push({\n            label: `content${i}`,\n            value: `${i}`,\n            disabled: i % 4 === 0\n        });\n    }\n\n    return dataSource;\n})();\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.handleSort = this.handleSort.bind(this);\n    }\n\n    handleSort(value, position) {\n        console.log(value, position);\n    }\n\n    render() {\n        return <Transfer sortable defaultValue={['3']} dataSource={dataSource} onSort={this.handleSort} titles={['Sortable', 'Sortable']} />;\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/transfer/demo/sortable.md b/compiled_docs/transfer/demo/sortable.md new file mode 100644 index 0000000000..b44a799f33 --- /dev/null +++ b/compiled_docs/transfer/demo/sortable.md @@ -0,0 +1 @@ +{"title":"拖拽排序","meta":{"title":"拖拽排序","description":"\n

    设置 \bsortable 属性为 true 后，可拖拽排序左右面板。

    \n","order":"4"},"codes":{"jsx":"import { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleSort = this.handleSort.bind(this);\n }\n\n handleSort(value, position) {\n console.log(value, position);\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n const dataSource = [];\n\n for (let i = 0; i < 10; i++) {\n dataSource.push({\n label: `content${i}`,\n value: `${i}`,\n disabled: i % 4 === 0\n });\n }\n\n return dataSource;\n})();\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleSort = this.handleSort.bind(this);\n }\n\n handleSort(value, position) {\n console.log(value, position);\n }\n\n render() {\n return ;\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Transfer } from '@alifd/next';\n\nconst dataSource = (() => {\n    const dataSource = [];\n\n    for (let i = 0; i < 10; i++) {\n        dataSource.push({\n            label: `content${i}`,\n            value: `${i}`,\n            disabled: i % 4 === 0\n        });\n    }\n\n    return dataSource;\n})();\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.handleSort = this.handleSort.bind(this);\n    }\n\n    handleSort(value, position) {\n        console.log(value, position);\n    }\n\n    render() {\n        return <Transfer sortable defaultValue={['3']} dataSource={dataSource} onSort={this.handleSort} titles={['Sortable', 'Sortable']} />;\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/transfer/index.en-us.md b/compiled_docs/transfer/index.en-us.md new file mode 100644 index 0000000000..92988645ea --- /dev/null +++ b/compiled_docs/transfer/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

    Guide#

    When To Use#

    Move the items in two panels in an intuitive way to select.

    \n

    API#

    ","api":"

    Transfer#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    modemove mode

    options:
    'normal', 'simple'    		Enum'normal'
    dataSourcedata sourceArray<Object>[]
    value(under controll) current valueArray<String>-
    defaultValue(under uncontroll) default valueArray<String>[]
    onChangecallback function triggered when value change

    signatures:
    Function(value: Array, data: Array, extra: Object) => void
    params:
    value: {Array} value of right panel
    data: {Array} data of right panel
    extra: {Object} extra parmas
    extra.leftValue: {Array} value of left panel
    extra.leftData: {Array} data of left panel
    extra.movedValue: {Array} moved value
    extra.movedData: {Object} moved data
    extra.direction: {String} move direction, 'left' or 'right'    		Function-
    itemRenderitem render function

    signatures:
    Function(data: Object) => ReactNode
    params:
    data: {Object} data
    returns:
    {ReactNode} content of item
    		Functiondata => data.label
    showSearchwhether to show the search boxBooleanfalse
    filtercustom search function

    signatures:
    Function(searchedValue: String, data: Object) => Boolean
    params:
    searchedValue: {String} search keyword
    data: {Object} data
    returns:
    {Boolean} whether is matched
    		Functionfilter by label
    onSearchcallback function triggered when search

    signatures:
    Function(searchedValue: String, position: String) => void
    params:
    searchedValue: {String} search keyword
    position: {String} position of the search box    		Function() => {}
    searchPlaceholderplaceholder of the search boxString-
    notFoundContentcontent when list is emptyReactNode'Not Found'
    titlestitles of left and right panelArray<ReactNode>[]
    operationstext of move buttonsArray<ReactNode>[<Icon type="arrow-right" />, <Icon type="arrow-left" />]
    defaultLeftCheckeddefault checked value of left panelArray<String>[]
    defaultRightCheckeddefault checked value of right panelArray<String>[]
    listClassNamecustom list class nameString-
    listStylecustom list styleObject-
    sortablewhether to allow drag and drop sortBooleanfalse
    onSortcallback function triggered when dragging sort

    signatures:
    Function(value: Array, position: String) => void
    params:
    value: {Array} sorted value
    position: {String} position of the sorted panel, 'left' or 'right'    		Function-
    disableddisable operations on transferBooleanfalse
    leftDisableddisable left panelBooleanfalse
    rightDisableddisable right panelBooleanfalse
    idunique id to make component accessibleString-
    \n

    ARIA and KeyBoard#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyBoardDescripiton
    Up ArrowGet the previous item focus of the current item
    Down ArrowGet the next item focus of the current item
    Enterthe item selected in the current list to move to another list
    SpaceSelect or cancel the current item or the item selected in the current list to move to another list
    \n"} \ No newline at end of file diff --git a/compiled_docs/transfer/index.md b/compiled_docs/transfer/index.md new file mode 100644 index 0000000000..f9d47c28ec --- /dev/null +++ b/compiled_docs/transfer/index.md @@ -0,0 +1 @@ +{"meta":"

    开发指南#

    何时使用#

    用直观的方式在两栏中移动元素，完成选择行为。

    \n

    API#

    ","api":"

    Transfer#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    mode移动选项模式

    可选值:
    'normal', 'simple'    		Enum'normal'
    dataSource数据源Array<Object>[]
    value（用于受控）当前值Array<String>-
    defaultValue（用于非受控）初始值Array<String>[]
    onChange值发生改变的时候触发的回调函数

    签名:
    Function(value: Array, data: Array, extra: Object) => void
    参数:
    value: {Array} 右面板值
    data: {Array} 右面板数据
    extra: {Object} 额外参数
    extra.leftValue: {Array} 左面板值
    extra.leftData: {Array} 左面板数据
    extra.movedValue: {Array} 发生移动的值
    extra.movedData: {Object} 发生移动的数据
    extra.direction: {String} 移动的方向，值为'left'或'right'    		Function-
    disabled是否禁用Booleanfalse
    leftDisabled是否禁用左侧面板Booleanfalse
    rightDisabled是否禁用右侧面板Booleanfalse
    itemRender列表项渲染函数

    签名:
    Function(data: Object) => ReactNode
    参数:
    data: {Object} 数据
    返回值:
    {ReactNode} 列表项内容
    		Functiondata => data.label
    showSearch是否显示搜索框Booleanfalse
    filter自定义搜索函数

    签名:
    Function(searchedValue: String, data: Object) => Boolean
    参数:
    searchedValue: {String} 搜索的内容
    data: {Object} 数据
    返回值:
    {Boolean} 是否匹配到
    		Function根据 label 属性匹配
    onSearch搜索框输入时触发的回调函数

    签名:
    Function(searchedValue: String, position: String) => void
    参数:
    searchedValue: {String} 搜索的内容
    position: {String} 搜索面板的位置    		Function() => {}
    searchPlaceholder搜索框占位符String-
    notFoundContent列表为空显示内容ReactNode'Not Found'
    titles左右面板标题Array<ReactNode>[]
    operations向右向左移动按钮显示内容Array<ReactNode>[<Icon type="arrow-right" />, <Icon type="arrow-left" />]
    defaultLeftChecked左面板默认选中值Array<String>[]
    defaultRightChecked右面板默认选中值Array<String>[]
    listClassName左右面板列表自定义样式类名String-
    listStyle左右面板列表自定义样式对象Object-
    sortable是否允许拖拽排序Booleanfalse
    onSort拖拽排序时触发的回调函数

    签名:
    Function(value: Array, position: String) => void
    参数:
    value: {Array} 排序后的值
    position: {String} 拖拽的面板位置，值为：left 或 right    		Function() => {}
    id请设置 id 以保证transfer的可访问性String-
    \n

    ARIA and KeyBoard#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    按键说明
    Up Arrow获取当前项的前一项焦点
    Down Arrow获取当前项的后一项焦点
    Enter当前列表选中的项移动到另一个列表
    SPACE选择/取消当前项或当前列表选中的项移动到另一个列表
    \n"} \ No newline at end of file diff --git a/compiled_docs/tree-select/demo/accessibility.en-us.md b/compiled_docs/tree-select/demo/accessibility.en-us.md new file mode 100644 index 0000000000..a9ab0646ce --- /dev/null +++ b/compiled_docs/tree-select/demo/accessibility.en-us.md @@ -0,0 +1 @@ +{"title":"Accessibility","meta":{"title":"Accessibility","description":"\n

    Description of components is through aria-labelledby. Please refer to ARIA and KeyBoard for keyboard operation.

    \n","order":"8"},"codes":{"jsx":"import { TreeSelect } from '@alifd/next';\n\nconst TreeNode = TreeSelect.Node;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n \n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data) {\n console.log(value, data);\n }\n\n render() {\n return (\n
    \n TreeSelect: \n \n \n \n \n \n \n \n \n \n \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n\n"},"body":"\n````jsx\nimport { TreeSelect } from '@alifd/next';\n\nconst TreeNode = TreeSelect.Node;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n \n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data) {\n console.log(value, data);\n }\n\n render() {\n return (\n
    \n TreeSelect: \n \n \n \n \n \n \n \n \n \n \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n\n````","html":"
    import { TreeSelect } from '@alifd/next';\n\nconst TreeNode = TreeSelect.Node;\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value, data) {\n        console.log(value, data);\n    }\n\n    render() {\n        return (\n            <div>\n                <span id=\"a11y-tree-select\">TreeSelect: </span>\n                <TreeSelect treeDefaultExpandAll aria-labelledby=\"a11y-tree-select\" onChange={this.handleChange} style={{ width: 200 }}>\n                    <TreeNode key=\"1\" value=\"1\" label=\"Component\">\n                        <TreeNode key=\"2\" value=\"2\" label=\"Form\">\n                            <TreeNode key=\"4\" value=\"4\" label=\"Input\" />\n                            <TreeNode key=\"5\" value=\"5\" label=\"Select\" disabled />\n                        </TreeNode>\n                        <TreeNode key=\"3\" value=\"3\" label=\"Display\">\n                            <TreeNode key=\"6\" value=\"6\" label=\"Table\" />\n                        </TreeNode>\n                    </TreeNode>\n                </TreeSelect>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);\n
    "} \ No newline at end of file diff --git a/compiled_docs/tree-select/demo/accessibility.md b/compiled_docs/tree-select/demo/accessibility.md new file mode 100644 index 0000000000..79027cfd47 --- /dev/null +++ b/compiled_docs/tree-select/demo/accessibility.md @@ -0,0 +1 @@ +{"title":"无障碍","meta":{"title":"无障碍","description":"\n

    通过aria-labelledby对组件进行描述。关于键盘操作请参考ARIA and KeyBoard。

    \n","order":"9"},"codes":{"jsx":"import { TreeSelect } from '@alifd/next';\n\nconst TreeNode = TreeSelect.Node;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n \n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data) {\n console.log(value, data);\n }\n\n render() {\n return (\n
    \n TreeSelect: \n \n \n \n \n \n \n \n \n \n \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n\n"},"body":"\n\n````jsx\nimport { TreeSelect } from '@alifd/next';\n\nconst TreeNode = TreeSelect.Node;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n \n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data) {\n console.log(value, data);\n }\n\n render() {\n return (\n
    \n TreeSelect: \n \n \n \n \n \n \n \n \n \n \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n\n````","html":"
    import { TreeSelect } from '@alifd/next';\n\nconst TreeNode = TreeSelect.Node;\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value, data) {\n        console.log(value, data);\n    }\n\n    render() {\n        return (\n            <div>\n                <span id=\"a11y-tree-select\">TreeSelect: </span>\n                <TreeSelect treeDefaultExpandAll aria-labelledby=\"a11y-tree-select\" onChange={this.handleChange} style={{ width: 200 }}>\n                    <TreeNode key=\"1\" value=\"1\" label=\"Component\">\n                        <TreeNode key=\"2\" value=\"2\" label=\"Form\">\n                            <TreeNode key=\"4\" value=\"4\" label=\"Input\" />\n                            <TreeNode key=\"5\" value=\"5\" label=\"Select\" disabled />\n                        </TreeNode>\n                        <TreeNode key=\"3\" value=\"3\" label=\"Display\">\n                            <TreeNode key=\"6\" value=\"6\" label=\"Table\" />\n                        </TreeNode>\n                    </TreeNode>\n                </TreeSelect>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);\n
    "} \ No newline at end of file diff --git a/compiled_docs/tree-select/demo/basic.en-us.md b/compiled_docs/tree-select/demo/basic.en-us.md new file mode 100644 index 0000000000..b4335f0fb8 --- /dev/null +++ b/compiled_docs/tree-select/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

    The simplest single select usage.

    \n","order":"0"},"codes":{"jsx":"import { TreeSelect } from '@alifd/next';\n\nconst TreeNode = TreeSelect.Node;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data) {\n console.log(value, data);\n }\n\n render() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { TreeSelect } from '@alifd/next';\n\nconst TreeNode = TreeSelect.Node;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data) {\n console.log(value, data);\n }\n\n render() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { TreeSelect } from '@alifd/next';\n\nconst TreeNode = TreeSelect.Node;\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value, data) {\n        console.log(value, data);\n    }\n\n    render() {\n        return (\n            <TreeSelect treeDefaultExpandAll onChange={this.handleChange} style={{ width: 200 }}>\n                <TreeNode key=\"1\" value=\"1\" label=\"Component\">\n                    <TreeNode key=\"2\" value=\"2\" label=\"Form\">\n                        <TreeNode key=\"4\" value=\"4\" label=\"Input\" />\n                        <TreeNode key=\"5\" value=\"5\" label=\"Select\" disabled />\n                    </TreeNode>\n                    <TreeNode key=\"3\" value=\"3\" label=\"Display\">\n                        <TreeNode key=\"6\" value=\"6\" label=\"Table\" />\n                    </TreeNode>\n                </TreeNode>\n            </TreeSelect>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tree-select/demo/basic.md b/compiled_docs/tree-select/demo/basic.md new file mode 100644 index 0000000000..4f46ca0f75 --- /dev/null +++ b/compiled_docs/tree-select/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

    最简单的单选用法。

    \n","order":"0"},"codes":{"jsx":"import { TreeSelect } from '@alifd/next';\n\nconst TreeNode = TreeSelect.Node;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data) {\n console.log(value, data);\n }\n\n render() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { TreeSelect } from '@alifd/next';\n\nconst TreeNode = TreeSelect.Node;\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data) {\n console.log(value, data);\n }\n\n render() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { TreeSelect } from '@alifd/next';\n\nconst TreeNode = TreeSelect.Node;\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value, data) {\n        console.log(value, data);\n    }\n\n    render() {\n        return (\n            <TreeSelect treeDefaultExpandAll onChange={this.handleChange} style={{ width: 200 }}>\n                <TreeNode key=\"1\" value=\"1\" label=\"Component\">\n                    <TreeNode key=\"2\" value=\"2\" label=\"Form\">\n                        <TreeNode key=\"4\" value=\"4\" label=\"Input\" />\n                        <TreeNode key=\"5\" value=\"5\" label=\"Select\" disabled />\n                    </TreeNode>\n                    <TreeNode key=\"3\" value=\"3\" label=\"Display\">\n                        <TreeNode key=\"6\" value=\"6\" label=\"Table\" />\n                    </TreeNode>\n                </TreeNode>\n            </TreeSelect>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tree-select/demo/check.en-us.md b/compiled_docs/tree-select/demo/check.en-us.md new file mode 100644 index 0000000000..41f4c825b6 --- /dev/null +++ b/compiled_docs/tree-select/demo/check.en-us.md @@ -0,0 +1 @@ +{"title":"Checkbox","meta":{"title":"Checkbox","description":"\n

    Demo the multiple select usage.

    \n","order":"2"},"codes":{"jsx":"import { TreeSelect } from '@alifd/next';\n\nconst treeData = [{\n label: 'Component',\n value: '1',\n children: [{\n label: 'Form',\n value: '2',\n children: [{\n label: 'Input',\n value: '4'\n }, {\n label: 'Select',\n value: '5'\n }]\n }, {\n label: 'Display',\n value: '3',\n children: [{\n label: 'Table',\n value: '6'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data) {\n console.log(value, data);\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { TreeSelect } from '@alifd/next';\n\nconst treeData = [{\n label: 'Component',\n value: '1',\n children: [{\n label: 'Form',\n value: '2',\n children: [{\n label: 'Input',\n value: '4'\n }, {\n label: 'Select',\n value: '5'\n }]\n }, {\n label: 'Display',\n value: '3',\n children: [{\n label: 'Table',\n value: '6'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data) {\n console.log(value, data);\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { TreeSelect } from '@alifd/next';\n\nconst treeData = [{\n    label: 'Component',\n    value: '1',\n    children: [{\n        label: 'Form',\n        value: '2',\n        children: [{\n            label: 'Input',\n            value: '4'\n        }, {\n            label: 'Select',\n            value: '5'\n        }]\n    }, {\n        label: 'Display',\n        value: '3',\n        children: [{\n            label: 'Table',\n            value: '6'\n        }]\n    }]\n}];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value, data) {\n        console.log(value, data);\n    }\n\n    render() {\n        return (\n            <TreeSelect treeDefaultExpandAll treeCheckable dataSource={treeData} onChange={this.handleChange} style={{ width: 200 }} />\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tree-select/demo/check.md b/compiled_docs/tree-select/demo/check.md new file mode 100644 index 0000000000..ab0db2adcb --- /dev/null +++ b/compiled_docs/tree-select/demo/check.md @@ -0,0 +1 @@ +{"title":"复选框多选","meta":{"title":"复选框多选","description":"\n

    展示复选框多选的功能。

    \n","order":"2"},"codes":{"jsx":"import { TreeSelect } from '@alifd/next';\n\nconst treeData = [{\n label: 'Component',\n value: '1',\n children: [{\n label: 'Form',\n value: '2',\n children: [{\n label: 'Input',\n value: '4'\n }, {\n label: 'Select',\n value: '5'\n }]\n }, {\n label: 'Display',\n value: '3',\n children: [{\n label: 'Table',\n value: '6'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data) {\n console.log(value, data);\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { TreeSelect } from '@alifd/next';\n\nconst treeData = [{\n label: 'Component',\n value: '1',\n children: [{\n label: 'Form',\n value: '2',\n children: [{\n label: 'Input',\n value: '4'\n }, {\n label: 'Select',\n value: '5'\n }]\n }, {\n label: 'Display',\n value: '3',\n children: [{\n label: 'Table',\n value: '6'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data) {\n console.log(value, data);\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { TreeSelect } from '@alifd/next';\n\nconst treeData = [{\n    label: 'Component',\n    value: '1',\n    children: [{\n        label: 'Form',\n        value: '2',\n        children: [{\n            label: 'Input',\n            value: '4'\n        }, {\n            label: 'Select',\n            value: '5'\n        }]\n    }, {\n        label: 'Display',\n        value: '3',\n        children: [{\n            label: 'Table',\n            value: '6'\n        }]\n    }]\n}];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value, data) {\n        console.log(value, data);\n    }\n\n    render() {\n        return (\n            <TreeSelect treeDefaultExpandAll treeCheckable dataSource={treeData} onChange={this.handleChange} style={{ width: 200 }} />\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tree-select/demo/control.en-us.md b/compiled_docs/tree-select/demo/control.en-us.md new file mode 100644 index 0000000000..a9492ce5d8 --- /dev/null +++ b/compiled_docs/tree-select/demo/control.en-us.md @@ -0,0 +1 @@ +{"title":"Control","meta":{"title":"Control","description":"\n

    Demo the control select usage.

    \n","order":"3"},"codes":{"jsx":"import { TreeSelect } from '@alifd/next';\n\nconst treeData = [{\n label: 'Component',\n value: '1',\n children: [{\n label: 'Form',\n value: '2',\n children: [{\n label: 'Input',\n value: '4'\n }, {\n label: 'Select',\n value: '5'\n }]\n }, {\n label: 'Display',\n value: '3',\n children: [{\n label: 'Table',\n value: '6'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: ['4', '6']\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data) {\n console.log(value, data);\n this.setState({\n value\n });\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { TreeSelect } from '@alifd/next';\n\nconst treeData = [{\n label: 'Component',\n value: '1',\n children: [{\n label: 'Form',\n value: '2',\n children: [{\n label: 'Input',\n value: '4'\n }, {\n label: 'Select',\n value: '5'\n }]\n }, {\n label: 'Display',\n value: '3',\n children: [{\n label: 'Table',\n value: '6'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: ['4', '6']\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data) {\n console.log(value, data);\n this.setState({\n value\n });\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { TreeSelect } from '@alifd/next';\n\nconst treeData = [{\n    label: 'Component',\n    value: '1',\n    children: [{\n        label: 'Form',\n        value: '2',\n        children: [{\n            label: 'Input',\n            value: '4'\n        }, {\n            label: 'Select',\n            value: '5'\n        }]\n    }, {\n        label: 'Display',\n        value: '3',\n        children: [{\n            label: 'Table',\n            value: '6'\n        }]\n    }]\n}];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: ['4', '6']\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value, data) {\n        console.log(value, data);\n        this.setState({\n            value\n        });\n    }\n\n    render() {\n        return (\n            <TreeSelect treeDefaultExpandAll treeCheckable dataSource={treeData} value={this.state.value} onChange={this.handleChange} style={{ width: 200 }} />\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tree-select/demo/control.md b/compiled_docs/tree-select/demo/control.md new file mode 100644 index 0000000000..5d17882b86 --- /dev/null +++ b/compiled_docs/tree-select/demo/control.md @@ -0,0 +1 @@ +{"title":"受控","meta":{"title":"受控","description":"\n

    展示树选择受控的用法。

    \n","order":"3"},"codes":{"jsx":"import { TreeSelect } from '@alifd/next';\n\nconst treeData = [{\n label: 'Component',\n value: '1',\n children: [{\n label: 'Form',\n value: '2',\n children: [{\n label: 'Input',\n value: '4'\n }, {\n label: 'Select',\n value: '5'\n }]\n }, {\n label: 'Display',\n value: '3',\n children: [{\n label: 'Table',\n value: '6'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: ['4', '6']\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data) {\n console.log(value, data);\n this.setState({\n value\n });\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { TreeSelect } from '@alifd/next';\n\nconst treeData = [{\n label: 'Component',\n value: '1',\n children: [{\n label: 'Form',\n value: '2',\n children: [{\n label: 'Input',\n value: '4'\n }, {\n label: 'Select',\n value: '5'\n }]\n }, {\n label: 'Display',\n value: '3',\n children: [{\n label: 'Table',\n value: '6'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: ['4', '6']\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data) {\n console.log(value, data);\n this.setState({\n value\n });\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { TreeSelect } from '@alifd/next';\n\nconst treeData = [{\n    label: 'Component',\n    value: '1',\n    children: [{\n        label: 'Form',\n        value: '2',\n        children: [{\n            label: 'Input',\n            value: '4'\n        }, {\n            label: 'Select',\n            value: '5'\n        }]\n    }, {\n        label: 'Display',\n        value: '3',\n        children: [{\n            label: 'Table',\n            value: '6'\n        }]\n    }]\n}];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: ['4', '6']\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value, data) {\n        console.log(value, data);\n        this.setState({\n            value\n        });\n    }\n\n    render() {\n        return (\n            <TreeSelect treeDefaultExpandAll treeCheckable dataSource={treeData} value={this.state.value} onChange={this.handleChange} style={{ width: 200 }} />\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tree-select/demo/data.en-us.md b/compiled_docs/tree-select/demo/data.en-us.md new file mode 100644 index 0000000000..c49c805dcc --- /dev/null +++ b/compiled_docs/tree-select/demo/data.en-us.md @@ -0,0 +1 @@ +{"title":"Render by dataSource","meta":{"title":"Render by dataSource","description":"\n

    Using the dataSource generate tree structure, in addition to setting the key, label, and children properties, you can pass in other TreeNode properties, including selectable, disabled, checked, checkboxDisabled, and isLeaf. It is recommended to use dataSource instead of manually generate a tree, which is easier to use and better performance.

    \n","order":"1"},"codes":{"jsx":"import { TreeSelect } from '@alifd/next';\n\nconst treeData = [{\n label: 'Component',\n value: '1',\n children: [{\n label: 'Form',\n value: '2',\n children: [{\n label: 'Input',\n value: '4'\n }, {\n label: 'Select',\n value: '5',\n disabled: true\n }]\n }, {\n label: 'Display',\n value: '3',\n children: [{\n label: 'Table',\n value: '6'\n }]\n }]\n}];\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data) {\n console.log(value, data);\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { TreeSelect } from '@alifd/next';\n\nconst treeData = [{\n label: 'Component',\n value: '1',\n children: [{\n label: 'Form',\n value: '2',\n children: [{\n label: 'Input',\n value: '4'\n }, {\n label: 'Select',\n value: '5',\n disabled: true\n }]\n }, {\n label: 'Display',\n value: '3',\n children: [{\n label: 'Table',\n value: '6'\n }]\n }]\n}];\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data) {\n console.log(value, data);\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { TreeSelect } from '@alifd/next';\n\nconst treeData = [{\n    label: 'Component',\n    value: '1',\n    children: [{\n        label: 'Form',\n        value: '2',\n        children: [{\n            label: 'Input',\n            value: '4'\n        }, {\n            label: 'Select',\n            value: '5',\n            disabled: true\n        }]\n    }, {\n        label: 'Display',\n        value: '3',\n        children: [{\n            label: 'Table',\n            value: '6'\n        }]\n    }]\n}];\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value, data) {\n        console.log(value, data);\n    }\n\n    render() {\n        return (\n            <TreeSelect treeDefaultExpandAll dataSource={treeData} onChange={this.handleChange} style={{ width: 200 }} />\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tree-select/demo/data.md b/compiled_docs/tree-select/demo/data.md new file mode 100644 index 0000000000..892f8eeb99 --- /dev/null +++ b/compiled_docs/tree-select/demo/data.md @@ -0,0 +1 @@ +{"title":"使用数据直接生成","meta":{"title":"使用数据直接生成","description":"\n

    使用 dataSource 生成树结构，除设置 label, value, key, children 属性外，还可传入 TreeNode 的其他属性，包括 selectable, disabled, checkboxDisabled, isLeaf，推荐使用 dataSource 而不是手动生成 TreeNode 的方式生成树，这样使用更简单，性能更好。

    \n","order":"1"},"codes":{"jsx":"import { TreeSelect } from '@alifd/next';\n\nconst treeData = [{\n label: 'Component',\n value: '1',\n children: [{\n label: 'Form',\n value: '2',\n children: [{\n label: 'Input',\n value: '4'\n }, {\n label: 'Select',\n value: '5',\n disabled: true\n }]\n }, {\n label: 'Display',\n value: '3',\n children: [{\n label: 'Table',\n value: '6'\n }]\n }]\n}];\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data) {\n console.log(value, data);\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { TreeSelect } from '@alifd/next';\n\nconst treeData = [{\n label: 'Component',\n value: '1',\n children: [{\n label: 'Form',\n value: '2',\n children: [{\n label: 'Input',\n value: '4'\n }, {\n label: 'Select',\n value: '5',\n disabled: true\n }]\n }, {\n label: 'Display',\n value: '3',\n children: [{\n label: 'Table',\n value: '6'\n }]\n }]\n}];\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data) {\n console.log(value, data);\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { TreeSelect } from '@alifd/next';\n\nconst treeData = [{\n    label: 'Component',\n    value: '1',\n    children: [{\n        label: 'Form',\n        value: '2',\n        children: [{\n            label: 'Input',\n            value: '4'\n        }, {\n            label: 'Select',\n            value: '5',\n            disabled: true\n        }]\n    }, {\n        label: 'Display',\n        value: '3',\n        children: [{\n            label: 'Table',\n            value: '6'\n        }]\n    }]\n}];\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value, data) {\n        console.log(value, data);\n    }\n\n    render() {\n        return (\n            <TreeSelect treeDefaultExpandAll dataSource={treeData} onChange={this.handleChange} style={{ width: 200 }} />\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tree-select/demo/search.en-us.md b/compiled_docs/tree-select/demo/search.en-us.md new file mode 100644 index 0000000000..002a809f54 --- /dev/null +++ b/compiled_docs/tree-select/demo/search.en-us.md @@ -0,0 +1 @@ +{"title":"Search usage","meta":{"title":"Search usage","description":"\n

    Demo the search usage.

    \n","order":"4"},"codes":{"jsx":"import { TreeSelect } from '@alifd/next';\n\nconst treeData = [{\n label: 'Component',\n value: '1',\n selectable: false,\n children: [{\n label: 'Form',\n value: '2',\n children: [{\n label: 'Input',\n value: '4'\n }, {\n label: 'Select',\n value: '5',\n disabled: true\n }]\n }, {\n label: 'Display',\n value: '3',\n children: [{\n label: 'Table',\n value: '6'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: ['4', '6']\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data) {\n console.log(value, data);\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { TreeSelect } from '@alifd/next';\n\nconst treeData = [{\n label: 'Component',\n value: '1',\n selectable: false,\n children: [{\n label: 'Form',\n value: '2',\n children: [{\n label: 'Input',\n value: '4'\n }, {\n label: 'Select',\n value: '5',\n disabled: true\n }]\n }, {\n label: 'Display',\n value: '3',\n children: [{\n label: 'Table',\n value: '6'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: ['4', '6']\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data) {\n console.log(value, data);\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { TreeSelect } from '@alifd/next';\n\nconst treeData = [{\n    label: 'Component',\n    value: '1',\n    selectable: false,\n    children: [{\n        label: 'Form',\n        value: '2',\n        children: [{\n            label: 'Input',\n            value: '4'\n        }, {\n            label: 'Select',\n            value: '5',\n            disabled: true\n        }]\n    }, {\n        label: 'Display',\n        value: '3',\n        children: [{\n            label: 'Table',\n            value: '6'\n        }]\n    }]\n}];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: ['4', '6']\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value, data) {\n        console.log(value, data);\n    }\n\n    render() {\n        return (\n            <TreeSelect treeDefaultExpandAll showSearch dataSource={treeData} onChange={this.handleChange} style={{ width: 200 }} />\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tree-select/demo/search.md b/compiled_docs/tree-select/demo/search.md new file mode 100644 index 0000000000..98e7226691 --- /dev/null +++ b/compiled_docs/tree-select/demo/search.md @@ -0,0 +1 @@ +{"title":"搜索用法","meta":{"title":"搜索用法","description":"\n

    展示树选择的搜索用法。

    \n","order":"4"},"codes":{"jsx":"import { TreeSelect } from '@alifd/next';\n\nconst treeData = [{\n label: 'Component',\n value: '1',\n selectable: false,\n children: [{\n label: 'Form',\n value: '2',\n children: [{\n label: 'Input',\n value: '4'\n }, {\n label: 'Select',\n value: '5',\n disabled: true\n }]\n }, {\n label: 'Display',\n value: '3',\n children: [{\n label: 'Table',\n value: '6'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: ['4', '6']\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data) {\n console.log(value, data);\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { TreeSelect } from '@alifd/next';\n\nconst treeData = [{\n label: 'Component',\n value: '1',\n selectable: false,\n children: [{\n label: 'Form',\n value: '2',\n children: [{\n label: 'Input',\n value: '4'\n }, {\n label: 'Select',\n value: '5',\n disabled: true\n }]\n }, {\n label: 'Display',\n value: '3',\n children: [{\n label: 'Table',\n value: '6'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n value: ['4', '6']\n };\n\n this.handleChange = this.handleChange.bind(this);\n }\n\n handleChange(value, data) {\n console.log(value, data);\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { TreeSelect } from '@alifd/next';\n\nconst treeData = [{\n    label: 'Component',\n    value: '1',\n    selectable: false,\n    children: [{\n        label: 'Form',\n        value: '2',\n        children: [{\n            label: 'Input',\n            value: '4'\n        }, {\n            label: 'Select',\n            value: '5',\n            disabled: true\n        }]\n    }, {\n        label: 'Display',\n        value: '3',\n        children: [{\n            label: 'Table',\n            value: '6'\n        }]\n    }]\n}];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            value: ['4', '6']\n        };\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value, data) {\n        console.log(value, data);\n    }\n\n    render() {\n        return (\n            <TreeSelect treeDefaultExpandAll showSearch dataSource={treeData} onChange={this.handleChange} style={{ width: 200 }} />\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tree-select/index.en-us.md b/compiled_docs/tree-select/index.en-us.md new file mode 100644 index 0000000000..92b82d56ae --- /dev/null +++ b/compiled_docs/tree-select/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

    Guide#

    When To Use#

    Like Select, TreeSelect can be used when the selected data structure is a tree structure, such as company hierarchy, subject system, category catalog, and so on.

    \n

    API#

    ","api":"

    TreeSelect#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    childrentree nodesReactNode-
    sizesize of selector

    options:
    'small', 'medium', 'large'    		Enum'medium'
    placeholderplaceholder of selectorString-
    disabledwhether selector is disabledBooleanfalse
    hasArrowwhether has arrow iconBooleantrue
    hasBorderwhether selector has borderBooleantrue
    labelcustom inline labelReactNode-
    readOnlywhether selector is read only, it can be expanded but cannot be selected under read only modeBoolean-
    autoWidthwhether the dropdown is aligned with the selectorBooleantrue
    dataSourcedata source, this property has a higher priority than childrenArray<Object>-
    value(under control) current valueString/Array<String>-
    defaultValue(under uncontrol) default valueString/Array<String>null
    onChangecallback triggered when value change

    signatures:
    Function(value: String/Array, data: Object/Array) => void
    params:
    value: {String/Array} selected value, a single value is returned when single select, and an array is returned when multiple select
    data: {Object/Array} selected data, including value, label, pos, and key properties, returns a single value when single select, returns an array when multiple select, parent and child nodes are selected at the same time, only the parent node is returned.    		Function() => {}
    showSearchwhether to show the search boxBooleanfalse
    onSearchcallback triggered when search

    signatures:
    Function(keyword: String) => void
    params:
    keyword: {String} input keyword    		Function() => {}
    notFoundContentcontent without dataReactNode'Not Found'
    multiplewhether it support multiple selectionBooleanfalse
    treeCheckablewhether the tree in the dropdown supports the checkbox of the nodeBooleanfalse
    treeCheckStrictlywhether the checkbox of the node is controlled strictly (selection of parent and child nodes are no longer related)Booleanfalse
    treeCheckedStrategydefining the way to backfill when checked node

    options:
    'all' (return all checked nodes)
    'parent' (only parent nodes are returned when parent and child nodes are checked)
    'child' (only child nodes are returned when parent and child nodes are checked)    		Enum'parent'
    treeDefaultExpandAllwhether to expand all nodes by defaultBooleanfalse
    treeDefaultExpandedKeyskeys of default expanded nodesArray<String>[]
    treeLoadDataasynchronous data loading function, Please refer to Tree's asynchronous loading data Demo

    signatures:
    Function(node: ReactElement) => void
    params:
    node: {ReactElement} clicked node    		Function-
    treePropsproperties of TreeObject{}
    defaultVisiblewhether the dropdown box is displayed in defaultBooleanfalse
    visiblewhether the dropdown box is displayed currentlyBoolean-
    onVisibleChangecallback triggered when open or close the dropdown

    signatures:
    Function(visible: Boolean, type: String) => void
    params:
    visible: {Boolean} whether is visible
    type: {String} trigger type    		Function() => {}
    popupStylestyle of dropdownObject-
    popupClassNameclass name of dropdownString-
    popupContainercontainer of dropdownString/Function-
    popupPropsproperties of PopupObject-
    \n\n

    TreeSelect.Node#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    childrentree nodesReactNode-
    labelcontent of nodeReactNode'---'
    selectableset whether to support selecting node, override the Tree's selectableBoolean-
    checkableset whether to support checking node, override the Tree's checkableBoolean-
    editableset whether to support editing node, override the Tree's editableBoolean-
    draggableset whether to support dragging node, override the Tree's draggableBoolean-
    disabledwhether node is disabledBooleanfalse
    checkboxDisabledwhether checkbox of node is disabledBooleanfalse
    isLeafwhether it is a leaf node and only works when loadData is setBooleanfalse
    \n

    Data structure of dataSource#

    const dataSource = [{\n    label: 'A',\n    value: '1',\n    key: '1',\n    selectable: false,\n    children: [{\n        label: 'AA',\n        value: '2',\n        key: '2',\n        children: [{\n            label: 'AAA',\n            value: '4',\n            key: '4',\n            disableCheckbox: true\n        }, {\n            label: 'AAB',\n            value: '5',\n            key: '5',\n            disabled: true\n        }]\n    }, {\n        label: 'AB',\n        value: '3',\n        key: '3',\n        children: [{\n            label: 'ABA',\n            value: '6',\n            key: '6'\n        }]\n    }]\n}];

    If you do not pass the key, TreeSelect will use the internally calculated position string as the key. If you want to set an property such as treeDefaultExpandedKeys, pass the custom key. It's a good way that make the key same as the value.

    \n\n

    ARIA and KeyBoard#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyBoardDescripiton
    EnterOpen the selection tree or select the current item
    Up ArrowGet the previous item focus of the current item of same level
    Down ArrowGet the next item focus of the current item of same level
    Right ArrowOpen the next subtree of the current element and focus on the first item
    Left ArrowReturn to the parent node of the current element and close the current subtree
    \n"} \ No newline at end of file diff --git a/compiled_docs/tree-select/index.md b/compiled_docs/tree-select/index.md new file mode 100644 index 0000000000..e0b6f8ccaa --- /dev/null +++ b/compiled_docs/tree-select/index.md @@ -0,0 +1 @@ +{"meta":"

    开发指南#

    何时使用#

    类似 Select 的选择控件，可选择的数据结构是一个树形结构时，可以使用 TreeSelect，例如公司层级、学科系统、分类目录等等。

    \n

    API#

    ","api":"

    TreeSelect#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    children树节点ReactNode-
    size选择框大小

    可选值:
    'small', 'medium', 'large'    		Enum'medium'
    placeholder选择框占位符String-
    disabled是否禁用Booleanfalse
    hasArrow是否有下拉箭头Booleantrue
    hasBorder是否有边框Booleantrue
    hasClear是否有清空按钮Booleanfalse
    label自定义内联 labelReactNode-
    readOnly是否只读，只读模式下可以展开弹层但不能选择Boolean-
    autoWidth下拉框是否与选择器对齐Booleantrue
    dataSource数据源，该属性优先级高于 childrenArray<Object>-
    value（受控）当前值String/Array<String>-
    defaultValue（非受控）默认值String/Array<String>null
    onChange选中值改变时触发的回调函数

    签名:
    Function(value: String/Array, data: Object/Array) => void
    参数:
    value: {String/Array} 选中的值，单选时返回单个值，多选时返回数组
    data: {Object/Array} 选中的数据，包括 value, label, pos, key属性，单选时返回单个值，多选时返回数组，父子节点选中关联时，同时选中，只返回父节点    		Function() => {}
    showSearch是否显示搜索框Booleanfalse
    onSearch在搜索框中输入时触发的回调函数

    签名:
    Function(keyword: String) => void
    参数:
    keyword: {String} 输入的关键字    		Function() => {}
    notFoundContent无数据时显示内容ReactNode'Not Found'
    multiple是否支持多选Booleanfalse
    treeCheckable下拉框中的树是否支持勾选节点的复选框Booleanfalse
    treeCheckStrictly下拉框中的树勾选节点复选框是否完全受控（父子节点选中状态不再关联）Booleanfalse
    treeCheckedStrategy定义选中时回填的方式

    可选值:
    'all'(返回所有选中的节点)
    'parent'(父子节点都选中时只返回父节点)
    'child'(父子节点都选中时只返回子节点)    		Enum'parent'
    treeDefaultExpandAll下拉框中的树是否默认展开所有节点Booleanfalse
    treeDefaultExpandedKeys下拉框中的树默认展开节点key的数组Array<String>[]
    treeLoadData下拉框中的树异步加载数据的函数，使用请参考Tree的异步加载数据Demo

    签名:
    Function(node: ReactElement) => void
    参数:
    node: {ReactElement} 被点击展开的节点    		Function-
    treeProps透传到 Tree 的属性对象Object{}
    defaultVisible初始下拉框是否显示Booleanfalse
    visible当前下拉框是否显示Boolean-
    onVisibleChange下拉框显示或关闭时触发事件的回调函数

    签名:
    Function(visible: Boolean, type: String) => void
    参数:
    visible: {Boolean} 是否显示
    type: {String} 触发显示关闭的操作类型    		Function() => {}
    popupStyle下拉框自定义样式对象Object-
    popupClassName下拉框样式自定义类名String-
    popupContainer下拉框挂载的容器节点String/Function-
    popupProps透传到 Popup 的属性对象Object-
    \n\n

    TreeSelect.Node#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    children树节点ReactNode-
    label节点文本内容ReactNode'---'
    selectable单独设置是否支持选中，覆盖 Tree 的 selectableBoolean-
    checkable单独设置是否出现复选框，覆盖 Tree 的 checkableBoolean-
    editable单独设置是否支持编辑，覆盖 Tree 的 editableBoolean-
    draggable单独设置是否支持拖拽，覆盖 Tree 的 draggableBoolean-
    disabled是否禁止节点响应Booleanfalse
    checkboxDisabled是否禁止勾选节点复选框Booleanfalse
    isLeaf是否是叶子节点，设置loadData时生效Booleanfalse
    \n

    dataSource 数据结构#

    const dataSource = [{\n    label: '服装',\n    value: '1',\n    key: '1',\n    selectable: false,\n    children: [{\n        label: '男装',\n        value: '2',\n        key: '2',\n        children: [{\n            label: '外套',\n            value: '4',\n            key: '4',\n            disableCheckbox: true\n        }, {\n            label: '夹克',\n            value: '5',\n            key: '5',\n            disabled: true\n        }]\n    }, {\n        label: '女装',\n        value: '3',\n        key: '3',\n        children: [{\n            label: '裙子',\n            value: '6',\n            key: '6'\n        }]\n    }]\n}];

    如果不传入 key，TreeSelect 会使用内部计算出来的位置字符串作为 key 值，如果你想指定诸如 treeDefaultExpandedKeys 这样的属性，请传入自定义的 key 值，让它和 value 是一个值，是一个很好的办法。

    \n\n

    ARIA and KeyBoard#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    按键说明
    Enter打开选择树或选择某一项
    Up Arrow获取同级当前项前一项焦点
    Down Arrow获取同级当前项后一项焦点
    Right Arrow打开当前元素的下一级子树并聚焦到第一项
    Left Arrow返回到当前元素的父节点并关闭当前子树
    \n"} \ No newline at end of file diff --git a/compiled_docs/tree/demo/basic.en-us.md b/compiled_docs/tree/demo/basic.en-us.md new file mode 100644 index 0000000000..940e32c564 --- /dev/null +++ b/compiled_docs/tree/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

    the simplest usage: can be expanded, selectable, checkable, editable, can be right-clicked, disabled, disabled-checked, default expanded, selected by default, checked by default, etc.

    \n","order":"0"},"codes":{"jsx":"import { Tree } from '@alifd/next';\n\nconst TreeNode = Tree.Node;\n\nclass Demo extends React.Component {\n onSelect(keys, info) {\n console.log('onSelect', keys, info);\n }\n\n onCheck(keys, info) {\n console.log('onCheck', keys, info);\n }\n\n onEditFinish(key, label, node) {\n console.log('onEditFinish', key, label, node);\n }\n\n onRightClick(info) {\n console.log('onRightClick', info);\n }\n\n render() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Tree } from '@alifd/next';\n\nconst TreeNode = Tree.Node;\n\nclass Demo extends React.Component {\n onSelect(keys, info) {\n console.log('onSelect', keys, info);\n }\n\n onCheck(keys, info) {\n console.log('onCheck', keys, info);\n }\n\n onEditFinish(key, label, node) {\n console.log('onEditFinish', key, label, node);\n }\n\n onRightClick(info) {\n console.log('onRightClick', info);\n }\n\n render() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Tree } from '@alifd/next';\n\nconst TreeNode = Tree.Node;\n\nclass Demo extends React.Component {\n    onSelect(keys, info) {\n        console.log('onSelect', keys, info);\n    }\n\n    onCheck(keys, info) {\n        console.log('onCheck', keys, info);\n    }\n\n    onEditFinish(key, label, node) {\n        console.log('onEditFinish', key, label, node);\n    }\n\n    onRightClick(info) {\n        console.log('onRightClick', info);\n    }\n\n    render() {\n        return (\n            <Tree checkable editable\n                defaultExpandedKeys={['2']}\n                defaultCheckedKeys={['2', '4', '5']}\n                onSelect={this.onSelect}\n                onCheck={this.onCheck}\n                onEditFinish={this.onEditFinish}\n                onRightClick={this.onRightClick}>\n                <TreeNode key=\"1\" label=\"Component\">\n                    <TreeNode key=\"2\" label=\"Form\" selectable={false}>\n                        <TreeNode key=\"4\" label=\"Input\" />\n                        <TreeNode key=\"5\" label=\"Select\" disabled />\n                    </TreeNode>\n                    <TreeNode key=\"3\" label=\"Display\">\n                        <TreeNode key=\"6\" label=\"Table\" />\n                    </TreeNode>\n                </TreeNode>\n            </Tree>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tree/demo/basic.md b/compiled_docs/tree/demo/basic.md new file mode 100644 index 0000000000..601de63a29 --- /dev/null +++ b/compiled_docs/tree/demo/basic.md @@ -0,0 +1 @@ +{"title":"基本","meta":{"title":"基本","description":"\n

    最简单的用法，展示可展开，可选中，可勾选，可编辑，可右键，禁用，禁用勾选，默认展开，默认选中，默认勾选等功能。

    \n","order":"0"},"codes":{"jsx":"import { Tree } from '@alifd/next';\n\nconst TreeNode = Tree.Node;\n\nclass Demo extends React.Component {\n onSelect(keys, info) {\n console.log('onSelect', keys, info);\n }\n\n onCheck(keys, info) {\n console.log('onCheck', keys, info);\n }\n\n onEditFinish(key, label, node) {\n console.log('onEditFinish', key, label, node);\n }\n\n onRightClick(info) {\n console.log('onRightClick', info);\n }\n\n render() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Tree } from '@alifd/next';\n\nconst TreeNode = Tree.Node;\n\nclass Demo extends React.Component {\n onSelect(keys, info) {\n console.log('onSelect', keys, info);\n }\n\n onCheck(keys, info) {\n console.log('onCheck', keys, info);\n }\n\n onEditFinish(key, label, node) {\n console.log('onEditFinish', key, label, node);\n }\n\n onRightClick(info) {\n console.log('onRightClick', info);\n }\n\n render() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Tree } from '@alifd/next';\n\nconst TreeNode = Tree.Node;\n\nclass Demo extends React.Component {\n    onSelect(keys, info) {\n        console.log('onSelect', keys, info);\n    }\n\n    onCheck(keys, info) {\n        console.log('onCheck', keys, info);\n    }\n\n    onEditFinish(key, label, node) {\n        console.log('onEditFinish', key, label, node);\n    }\n\n    onRightClick(info) {\n        console.log('onRightClick', info);\n    }\n\n    render() {\n        return (\n            <Tree checkable editable\n                defaultExpandedKeys={['2']}\n                defaultCheckedKeys={['2', '4', '5']}\n                onSelect={this.onSelect}\n                onCheck={this.onCheck}\n                onEditFinish={this.onEditFinish}\n                onRightClick={this.onRightClick}>\n                <TreeNode key=\"1\" label=\"Component\">\n                    <TreeNode key=\"2\" label=\"Form\" selectable={false}>\n                        <TreeNode key=\"4\" label=\"Input\" />\n                        <TreeNode key=\"5\" label=\"Select\" disabled />\n                    </TreeNode>\n                    <TreeNode key=\"3\" label=\"Display\">\n                        <TreeNode key=\"6\" label=\"Table\" />\n                    </TreeNode>\n                </TreeNode>\n            </Tree>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tree/demo/control-check.en-us.md b/compiled_docs/tree/demo/control-check.en-us.md new file mode 100644 index 0000000000..a52c562f17 --- /dev/null +++ b/compiled_docs/tree/demo/control-check.en-us.md @@ -0,0 +1 @@ +{"title":"Parent and child node checked is related","meta":{"title":"Parent and child node checked is related","description":"\n

    Demo whether parent and child node checked is related.

    \n","order":"5"},"codes":{"jsx":"import { Checkbox, Tree } from '@alifd/next';\n\nconst data = [{\n key: '0-0',\n label: '0-0',\n children: [{\n key: '0-0-0',\n label: '0-0-0',\n children: [{\n key: '0-0-0-0',\n label: '0-0-0-0',\n children: [{\n key: '0-0-0-0-0',\n label: '0-0-0-0-0'\n }]\n }, {\n key: '0-0-0-1',\n label: '0-0-0-1'\n }]\n }, {\n key: '0-0-1',\n label: '0-0-1',\n children: [{\n key: '0-0-1-0',\n label: '0-0-1-0'\n }, {\n key: '0-0-1-1',\n label: '0-0-1-1'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n checkedKeys: [],\n checkStrictly: false\n };\n this.handleCheck = this.handleCheck.bind(this);\n this.handleCheckStrictly = this.handleCheckStrictly.bind(this);\n }\n\n handleCheck(keys, info) {\n console.log(keys, info);\n\n this.setState({\n checkedKeys: keys\n });\n }\n\n handleCheckStrictly() {\n this.setState({\n checkStrictly: !this.state.checkStrictly,\n checkedKeys: []\n });\n }\n\n render() {\n const { checkedKeys, checkStrictly } = this.state;\n\n return (\n
    \n \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".control-check-demo .strictly-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.control-check-demo .strictly-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n"},"body":"\n````jsx\nimport { Checkbox, Tree } from '@alifd/next';\n\nconst data = [{\n key: '0-0',\n label: '0-0',\n children: [{\n key: '0-0-0',\n label: '0-0-0',\n children: [{\n key: '0-0-0-0',\n label: '0-0-0-0',\n children: [{\n key: '0-0-0-0-0',\n label: '0-0-0-0-0'\n }]\n }, {\n key: '0-0-0-1',\n label: '0-0-0-1'\n }]\n }, {\n key: '0-0-1',\n label: '0-0-1',\n children: [{\n key: '0-0-1-0',\n label: '0-0-1-0'\n }, {\n key: '0-0-1-1',\n label: '0-0-1-1'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n checkedKeys: [],\n checkStrictly: false\n };\n this.handleCheck = this.handleCheck.bind(this);\n this.handleCheckStrictly = this.handleCheckStrictly.bind(this);\n }\n\n handleCheck(keys, info) {\n console.log(keys, info);\n\n this.setState({\n checkedKeys: keys\n });\n }\n\n handleCheckStrictly() {\n this.setState({\n checkStrictly: !this.state.checkStrictly,\n checkedKeys: []\n });\n }\n\n render() {\n const { checkedKeys, checkStrictly } = this.state;\n\n return (\n
    \n \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.control-check-demo .strictly-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.control-check-demo .strictly-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n````","html":"
    import { Checkbox, Tree } from '@alifd/next';\n\nconst data = [{\n    key: '0-0',\n    label: '0-0',\n    children: [{\n        key: '0-0-0',\n        label: '0-0-0',\n        children: [{\n            key: '0-0-0-0',\n            label: '0-0-0-0',\n            children: [{\n                key: '0-0-0-0-0',\n                label: '0-0-0-0-0'\n            }]\n        }, {\n            key: '0-0-0-1',\n            label: '0-0-0-1'\n        }]\n    }, {\n        key: '0-0-1',\n        label: '0-0-1',\n        children: [{\n            key: '0-0-1-0',\n            label: '0-0-1-0'\n        }, {\n            key: '0-0-1-1',\n            label: '0-0-1-1'\n        }]\n    }]\n}];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            checkedKeys: [],\n            checkStrictly: false\n        };\n        this.handleCheck = this.handleCheck.bind(this);\n        this.handleCheckStrictly = this.handleCheckStrictly.bind(this);\n    }\n\n    handleCheck(keys, info) {\n        console.log(keys, info);\n\n        this.setState({\n            checkedKeys: keys\n        });\n    }\n\n    handleCheckStrictly() {\n        this.setState({\n            checkStrictly: !this.state.checkStrictly,\n            checkedKeys: []\n        });\n    }\n\n    render() {\n        const { checkedKeys, checkStrictly } = this.state;\n\n        return (\n            <div className=\"control-check-demo\">\n                <label className=\"strictly-check\">\n                    <Checkbox value={checkStrictly} onChange={this.handleCheckStrictly} />\n                    <span className=\"strictly-text\">Enable checkStrictly</span>\n                </label>\n                <Tree defaultExpandAll checkable checkStrictly={checkStrictly} checkedKeys={checkedKeys} onCheck={this.handleCheck} dataSource={data} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    .control-check-demo .strictly-check {\n    display: block;\n    margin-bottom: 10px;\n}\n\n.control-check-demo .strictly-text {\n    display: inline-block;\n    margin-left: 10px;\n    vertical-align: middle;\n    color: #666;\n    font-size: 14px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tree/demo/control-check.md b/compiled_docs/tree/demo/control-check.md new file mode 100644 index 0000000000..e0c6a2ec57 --- /dev/null +++ b/compiled_docs/tree/demo/control-check.md @@ -0,0 +1 @@ +{"title":"父子节点选中是否关联","meta":{"title":"父子节点选中是否关联","description":"\n

    展示父子节点选中是否关联的用法。

    \n","order":"5"},"codes":{"jsx":"import { Checkbox, Tree } from '@alifd/next';\n\nconst data = [{\n key: '0-0',\n label: '0-0',\n children: [{\n key: '0-0-0',\n label: '0-0-0',\n children: [{\n key: '0-0-0-0',\n label: '0-0-0-0',\n children: [{\n key: '0-0-0-0-0',\n label: '0-0-0-0-0'\n }]\n }, {\n key: '0-0-0-1',\n label: '0-0-0-1'\n }]\n }, {\n key: '0-0-1',\n label: '0-0-1',\n children: [{\n key: '0-0-1-0',\n label: '0-0-1-0'\n }, {\n key: '0-0-1-1',\n label: '0-0-1-1'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n checkedKeys: [],\n checkStrictly: false\n };\n this.handleCheck = this.handleCheck.bind(this);\n this.handleCheckStrictly = this.handleCheckStrictly.bind(this);\n }\n\n handleCheck(keys, info) {\n console.log(keys, info);\n\n this.setState({\n checkedKeys: keys\n });\n }\n\n handleCheckStrictly() {\n this.setState({\n checkStrictly: !this.state.checkStrictly,\n checkedKeys: []\n });\n }\n\n render() {\n const { checkedKeys, checkStrictly } = this.state;\n\n return (\n
    \n \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".control-check-demo .strictly-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.control-check-demo .strictly-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n"},"body":"\n\n````jsx\nimport { Checkbox, Tree } from '@alifd/next';\n\nconst data = [{\n key: '0-0',\n label: '0-0',\n children: [{\n key: '0-0-0',\n label: '0-0-0',\n children: [{\n key: '0-0-0-0',\n label: '0-0-0-0',\n children: [{\n key: '0-0-0-0-0',\n label: '0-0-0-0-0'\n }]\n }, {\n key: '0-0-0-1',\n label: '0-0-0-1'\n }]\n }, {\n key: '0-0-1',\n label: '0-0-1',\n children: [{\n key: '0-0-1-0',\n label: '0-0-1-0'\n }, {\n key: '0-0-1-1',\n label: '0-0-1-1'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n checkedKeys: [],\n checkStrictly: false\n };\n this.handleCheck = this.handleCheck.bind(this);\n this.handleCheckStrictly = this.handleCheckStrictly.bind(this);\n }\n\n handleCheck(keys, info) {\n console.log(keys, info);\n\n this.setState({\n checkedKeys: keys\n });\n }\n\n handleCheckStrictly() {\n this.setState({\n checkStrictly: !this.state.checkStrictly,\n checkedKeys: []\n });\n }\n\n render() {\n const { checkedKeys, checkStrictly } = this.state;\n\n return (\n
    \n \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.control-check-demo .strictly-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.control-check-demo .strictly-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n````","html":"
    import { Checkbox, Tree } from '@alifd/next';\n\nconst data = [{\n    key: '0-0',\n    label: '0-0',\n    children: [{\n        key: '0-0-0',\n        label: '0-0-0',\n        children: [{\n            key: '0-0-0-0',\n            label: '0-0-0-0',\n            children: [{\n                key: '0-0-0-0-0',\n                label: '0-0-0-0-0'\n            }]\n        }, {\n            key: '0-0-0-1',\n            label: '0-0-0-1'\n        }]\n    }, {\n        key: '0-0-1',\n        label: '0-0-1',\n        children: [{\n            key: '0-0-1-0',\n            label: '0-0-1-0'\n        }, {\n            key: '0-0-1-1',\n            label: '0-0-1-1'\n        }]\n    }]\n}];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            checkedKeys: [],\n            checkStrictly: false\n        };\n        this.handleCheck = this.handleCheck.bind(this);\n        this.handleCheckStrictly = this.handleCheckStrictly.bind(this);\n    }\n\n    handleCheck(keys, info) {\n        console.log(keys, info);\n\n        this.setState({\n            checkedKeys: keys\n        });\n    }\n\n    handleCheckStrictly() {\n        this.setState({\n            checkStrictly: !this.state.checkStrictly,\n            checkedKeys: []\n        });\n    }\n\n    render() {\n        const { checkedKeys, checkStrictly } = this.state;\n\n        return (\n            <div className=\"control-check-demo\">\n                <label className=\"strictly-check\">\n                    <Checkbox value={checkStrictly} onChange={this.handleCheckStrictly} />\n                    <span className=\"strictly-text\">Enable checkStrictly</span>\n                </label>\n                <Tree defaultExpandAll checkable checkStrictly={checkStrictly} checkedKeys={checkedKeys} onCheck={this.handleCheck} dataSource={data} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    .control-check-demo .strictly-check {\n    display: block;\n    margin-bottom: 10px;\n}\n\n.control-check-demo .strictly-text {\n    display: inline-block;\n    margin-left: 10px;\n    vertical-align: middle;\n    color: #666;\n    font-size: 14px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tree/demo/control-select.en-us.md b/compiled_docs/tree/demo/control-select.en-us.md new file mode 100644 index 0000000000..c7d049f254 --- /dev/null +++ b/compiled_docs/tree/demo/control-select.en-us.md @@ -0,0 +1 @@ +{"title":"Single and multiple selection","meta":{"title":"Single and multiple selection","description":"\n

    Demo single and multiple selection.

    \n","order":"4"},"codes":{"jsx":"import { Checkbox, Tree } from '@alifd/next';\n\nconst data = [{\n key: '0-0',\n label: '0-0',\n children: [{\n key: '0-0-0',\n label: '0-0-0',\n children: [{\n key: '0-0-0-0',\n label: '0-0-0-0',\n children: [{\n key: '0-0-0-0-0',\n label: '0-0-0-0-0'\n }]\n }, {\n key: '0-0-0-1',\n label: '0-0-0-1'\n }]\n }, {\n key: '0-0-1',\n label: '0-0-1',\n children: [{\n key: '0-0-1-0',\n label: '0-0-1-0'\n }, {\n key: '0-0-1-1',\n label: '0-0-1-1'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n selectedKeys: [],\n multiple: false\n };\n this.handleSelect = this.handleSelect.bind(this);\n this.handleCheck = this.handleCheck.bind(this);\n }\n\n handleSelect(keys, info) {\n console.log(keys, info);\n\n this.setState({\n selectedKeys: keys\n });\n }\n\n handleCheck() {\n this.setState({\n multiple: !this.state.multiple,\n selectedKeys: []\n });\n }\n\n render() {\n const { multiple, selectedKeys } = this.state;\n\n return (\n
    \n \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".control-select-demo .multiple-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.control-select-demo .multiple-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n"},"body":"\n````jsx\nimport { Checkbox, Tree } from '@alifd/next';\n\nconst data = [{\n key: '0-0',\n label: '0-0',\n children: [{\n key: '0-0-0',\n label: '0-0-0',\n children: [{\n key: '0-0-0-0',\n label: '0-0-0-0',\n children: [{\n key: '0-0-0-0-0',\n label: '0-0-0-0-0'\n }]\n }, {\n key: '0-0-0-1',\n label: '0-0-0-1'\n }]\n }, {\n key: '0-0-1',\n label: '0-0-1',\n children: [{\n key: '0-0-1-0',\n label: '0-0-1-0'\n }, {\n key: '0-0-1-1',\n label: '0-0-1-1'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n selectedKeys: [],\n multiple: false\n };\n this.handleSelect = this.handleSelect.bind(this);\n this.handleCheck = this.handleCheck.bind(this);\n }\n\n handleSelect(keys, info) {\n console.log(keys, info);\n\n this.setState({\n selectedKeys: keys\n });\n }\n\n handleCheck() {\n this.setState({\n multiple: !this.state.multiple,\n selectedKeys: []\n });\n }\n\n render() {\n const { multiple, selectedKeys } = this.state;\n\n return (\n
    \n \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.control-select-demo .multiple-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.control-select-demo .multiple-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n````","html":"
    import { Checkbox, Tree } from '@alifd/next';\n\nconst data = [{\n    key: '0-0',\n    label: '0-0',\n    children: [{\n        key: '0-0-0',\n        label: '0-0-0',\n        children: [{\n            key: '0-0-0-0',\n            label: '0-0-0-0',\n            children: [{\n                key: '0-0-0-0-0',\n                label: '0-0-0-0-0'\n            }]\n        }, {\n            key: '0-0-0-1',\n            label: '0-0-0-1'\n        }]\n    }, {\n        key: '0-0-1',\n        label: '0-0-1',\n        children: [{\n            key: '0-0-1-0',\n            label: '0-0-1-0'\n        }, {\n            key: '0-0-1-1',\n            label: '0-0-1-1'\n        }]\n    }]\n}];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            selectedKeys: [],\n            multiple: false\n        };\n        this.handleSelect = this.handleSelect.bind(this);\n        this.handleCheck = this.handleCheck.bind(this);\n    }\n\n    handleSelect(keys, info) {\n        console.log(keys, info);\n\n        this.setState({\n            selectedKeys: keys\n        });\n    }\n\n    handleCheck() {\n        this.setState({\n            multiple: !this.state.multiple,\n            selectedKeys: []\n        });\n    }\n\n    render() {\n        const { multiple, selectedKeys } = this.state;\n\n        return (\n            <div className=\"control-select-demo\">\n                <label className=\"multiple-check\">\n                    <Checkbox value={multiple} onChange={this.handleCheck} />\n                    <span className=\"multiple-text\">Enable multiple</span>\n                </label>\n                <Tree defaultExpandAll multiple={multiple} selectedKeys={selectedKeys} onSelect={this.handleSelect} dataSource={data} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    .control-select-demo .multiple-check {\n    display: block;\n    margin-bottom: 10px;\n}\n\n.control-select-demo .multiple-text {\n    display: inline-block;\n    margin-left: 10px;\n    vertical-align: middle;\n    color: #666;\n    font-size: 14px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tree/demo/control-select.md b/compiled_docs/tree/demo/control-select.md new file mode 100644 index 0000000000..511d823eb5 --- /dev/null +++ b/compiled_docs/tree/demo/control-select.md @@ -0,0 +1 @@ +{"title":"单选与多选","meta":{"title":"单选与多选","description":"\n

    展示单选与多选的用法。

    \n","order":"4"},"codes":{"jsx":"import { Checkbox, Tree } from '@alifd/next';\n\nconst data = [{\n key: '0-0',\n label: '0-0',\n children: [{\n key: '0-0-0',\n label: '0-0-0',\n children: [{\n key: '0-0-0-0',\n label: '0-0-0-0',\n children: [{\n key: '0-0-0-0-0',\n label: '0-0-0-0-0'\n }]\n }, {\n key: '0-0-0-1',\n label: '0-0-0-1'\n }]\n }, {\n key: '0-0-1',\n label: '0-0-1',\n children: [{\n key: '0-0-1-0',\n label: '0-0-1-0'\n }, {\n key: '0-0-1-1',\n label: '0-0-1-1'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n selectedKeys: [],\n multiple: false\n };\n this.handleSelect = this.handleSelect.bind(this);\n this.handleCheck = this.handleCheck.bind(this);\n }\n\n handleSelect(keys, info) {\n console.log(keys, info);\n\n this.setState({\n selectedKeys: keys\n });\n }\n\n handleCheck() {\n this.setState({\n multiple: !this.state.multiple,\n selectedKeys: []\n });\n }\n\n render() {\n const { multiple, selectedKeys } = this.state;\n\n return (\n
    \n \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".control-select-demo .multiple-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.control-select-demo .multiple-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n"},"body":"\n\n````jsx\nimport { Checkbox, Tree } from '@alifd/next';\n\nconst data = [{\n key: '0-0',\n label: '0-0',\n children: [{\n key: '0-0-0',\n label: '0-0-0',\n children: [{\n key: '0-0-0-0',\n label: '0-0-0-0',\n children: [{\n key: '0-0-0-0-0',\n label: '0-0-0-0-0'\n }]\n }, {\n key: '0-0-0-1',\n label: '0-0-0-1'\n }]\n }, {\n key: '0-0-1',\n label: '0-0-1',\n children: [{\n key: '0-0-1-0',\n label: '0-0-1-0'\n }, {\n key: '0-0-1-1',\n label: '0-0-1-1'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n selectedKeys: [],\n multiple: false\n };\n this.handleSelect = this.handleSelect.bind(this);\n this.handleCheck = this.handleCheck.bind(this);\n }\n\n handleSelect(keys, info) {\n console.log(keys, info);\n\n this.setState({\n selectedKeys: keys\n });\n }\n\n handleCheck() {\n this.setState({\n multiple: !this.state.multiple,\n selectedKeys: []\n });\n }\n\n render() {\n const { multiple, selectedKeys } = this.state;\n\n return (\n
    \n \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.control-select-demo .multiple-check {\n display: block;\n margin-bottom: 10px;\n}\n\n.control-select-demo .multiple-text {\n display: inline-block;\n margin-left: 10px;\n vertical-align: middle;\n color: #666;\n font-size: 14px;\n}\n````","html":"
    import { Checkbox, Tree } from '@alifd/next';\n\nconst data = [{\n    key: '0-0',\n    label: '0-0',\n    children: [{\n        key: '0-0-0',\n        label: '0-0-0',\n        children: [{\n            key: '0-0-0-0',\n            label: '0-0-0-0',\n            children: [{\n                key: '0-0-0-0-0',\n                label: '0-0-0-0-0'\n            }]\n        }, {\n            key: '0-0-0-1',\n            label: '0-0-0-1'\n        }]\n    }, {\n        key: '0-0-1',\n        label: '0-0-1',\n        children: [{\n            key: '0-0-1-0',\n            label: '0-0-1-0'\n        }, {\n            key: '0-0-1-1',\n            label: '0-0-1-1'\n        }]\n    }]\n}];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            selectedKeys: [],\n            multiple: false\n        };\n        this.handleSelect = this.handleSelect.bind(this);\n        this.handleCheck = this.handleCheck.bind(this);\n    }\n\n    handleSelect(keys, info) {\n        console.log(keys, info);\n\n        this.setState({\n            selectedKeys: keys\n        });\n    }\n\n    handleCheck() {\n        this.setState({\n            multiple: !this.state.multiple,\n            selectedKeys: []\n        });\n    }\n\n    render() {\n        const { multiple, selectedKeys } = this.state;\n\n        return (\n            <div className=\"control-select-demo\">\n                <label className=\"multiple-check\">\n                    <Checkbox value={multiple} onChange={this.handleCheck} />\n                    <span className=\"multiple-text\">Enable multiple</span>\n                </label>\n                <Tree defaultExpandAll multiple={multiple} selectedKeys={selectedKeys} onSelect={this.handleSelect} dataSource={data} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    .control-select-demo .multiple-check {\n    display: block;\n    margin-bottom: 10px;\n}\n\n.control-select-demo .multiple-text {\n    display: inline-block;\n    margin-left: 10px;\n    vertical-align: middle;\n    color: #666;\n    font-size: 14px;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/tree/demo/data.en-us.md b/compiled_docs/tree/demo/data.en-us.md new file mode 100644 index 0000000000..036e3a8e56 --- /dev/null +++ b/compiled_docs/tree/demo/data.en-us.md @@ -0,0 +1 @@ +{"title":"Render by dataSource","meta":{"title":"Render by dataSource","description":"\n

    Using the dataSource generate tree structure, in addition to setting the key, label, and children properties, you can pass in other TreeNode properties, including selectable, disabled, checked, checkboxDisabled, and isLeaf.

    \n","order":"1"},"codes":{"jsx":"import { Tree } from '@alifd/next';\n\nconst data = [{\n label: 'Component',\n key: '1',\n children: [{\n label: 'Form',\n key: '2',\n selectable: false,\n children: [{\n label: 'Input',\n key: '4'\n }, {\n label: 'Select',\n key: '5',\n disabled: true\n }]\n }, {\n label: 'Display',\n key: '3',\n children: [{\n label: 'Table',\n key: '6'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n onSelect(keys, info) {\n console.log('onSelect', keys, info);\n }\n\n onCheck(keys, info) {\n console.log('onCheck', keys, info);\n }\n\n onEditFinish(key, label, node) {\n console.log('onEditFinish', key, label, node);\n }\n\n onRightClick(info) {\n console.log('onRightClick', info);\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Tree } from '@alifd/next';\n\nconst data = [{\n label: 'Component',\n key: '1',\n children: [{\n label: 'Form',\n key: '2',\n selectable: false,\n children: [{\n label: 'Input',\n key: '4'\n }, {\n label: 'Select',\n key: '5',\n disabled: true\n }]\n }, {\n label: 'Display',\n key: '3',\n children: [{\n label: 'Table',\n key: '6'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n onSelect(keys, info) {\n console.log('onSelect', keys, info);\n }\n\n onCheck(keys, info) {\n console.log('onCheck', keys, info);\n }\n\n onEditFinish(key, label, node) {\n console.log('onEditFinish', key, label, node);\n }\n\n onRightClick(info) {\n console.log('onRightClick', info);\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Tree } from '@alifd/next';\n\nconst data = [{\n    label: 'Component',\n    key: '1',\n    children: [{\n        label: 'Form',\n        key: '2',\n        selectable: false,\n        children: [{\n            label: 'Input',\n            key: '4'\n        }, {\n            label: 'Select',\n            key: '5',\n            disabled: true\n        }]\n    }, {\n        label: 'Display',\n        key: '3',\n        children: [{\n            label: 'Table',\n            key: '6'\n        }]\n    }]\n}];\n\nclass Demo extends React.Component {\n    onSelect(keys, info) {\n        console.log('onSelect', keys, info);\n    }\n\n    onCheck(keys, info) {\n        console.log('onCheck', keys, info);\n    }\n\n    onEditFinish(key, label, node) {\n        console.log('onEditFinish', key, label, node);\n    }\n\n    onRightClick(info) {\n        console.log('onRightClick', info);\n    }\n\n    render() {\n        return (\n            <Tree checkable editable\n                defaultExpandedKeys={['2']}\n                defaultCheckedKeys={['2', '4', '5']}\n                onSelect={this.onSelect}\n                onCheck={this.onCheck}\n                onEditFinish={this.onEditFinish}\n                onRightClick={this.onRightClick}\n                dataSource={data} />\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tree/demo/data.md b/compiled_docs/tree/demo/data.md new file mode 100644 index 0000000000..4affee1a1d --- /dev/null +++ b/compiled_docs/tree/demo/data.md @@ -0,0 +1 @@ +{"title":"使用数据直接生成","meta":{"title":"使用数据直接生成","description":"\n

    使用 dataSource 生成树结构，除设置 key, label, children 属性外，还可传入 TreeNode 的其他属性，包括 selectable，disabled，checkable, checkboxDisabled, isLeaf 等。

    \n","order":"1"},"codes":{"jsx":"import { Tree } from '@alifd/next';\n\nconst data = [{\n label: 'Component',\n key: '1',\n children: [{\n label: 'Form',\n key: '2',\n selectable: false,\n children: [{\n label: 'Input',\n key: '4'\n }, {\n label: 'Select',\n key: '5',\n disabled: true\n }]\n }, {\n label: 'Display',\n key: '3',\n children: [{\n label: 'Table',\n key: '6'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n onSelect(keys, info) {\n console.log('onSelect', keys, info);\n }\n\n onCheck(keys, info) {\n console.log('onCheck', keys, info);\n }\n\n onEditFinish(key, label, node) {\n console.log('onEditFinish', key, label, node);\n }\n\n onRightClick(info) {\n console.log('onRightClick', info);\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Tree } from '@alifd/next';\n\nconst data = [{\n label: 'Component',\n key: '1',\n children: [{\n label: 'Form',\n key: '2',\n selectable: false,\n children: [{\n label: 'Input',\n key: '4'\n }, {\n label: 'Select',\n key: '5',\n disabled: true\n }]\n }, {\n label: 'Display',\n key: '3',\n children: [{\n label: 'Table',\n key: '6'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n onSelect(keys, info) {\n console.log('onSelect', keys, info);\n }\n\n onCheck(keys, info) {\n console.log('onCheck', keys, info);\n }\n\n onEditFinish(key, label, node) {\n console.log('onEditFinish', key, label, node);\n }\n\n onRightClick(info) {\n console.log('onRightClick', info);\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Tree } from '@alifd/next';\n\nconst data = [{\n    label: 'Component',\n    key: '1',\n    children: [{\n        label: 'Form',\n        key: '2',\n        selectable: false,\n        children: [{\n            label: 'Input',\n            key: '4'\n        }, {\n            label: 'Select',\n            key: '5',\n            disabled: true\n        }]\n    }, {\n        label: 'Display',\n        key: '3',\n        children: [{\n            label: 'Table',\n            key: '6'\n        }]\n    }]\n}];\n\nclass Demo extends React.Component {\n    onSelect(keys, info) {\n        console.log('onSelect', keys, info);\n    }\n\n    onCheck(keys, info) {\n        console.log('onCheck', keys, info);\n    }\n\n    onEditFinish(key, label, node) {\n        console.log('onEditFinish', key, label, node);\n    }\n\n    onRightClick(info) {\n        console.log('onRightClick', info);\n    }\n\n    render() {\n        return (\n            <Tree checkable editable\n                defaultExpandedKeys={['2']}\n                defaultCheckedKeys={['2', '4', '5']}\n                onSelect={this.onSelect}\n                onCheck={this.onCheck}\n                onEditFinish={this.onEditFinish}\n                onRightClick={this.onRightClick}\n                dataSource={data} />\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tree/demo/draggable.en-us.md b/compiled_docs/tree/demo/draggable.en-us.md new file mode 100644 index 0000000000..93368eb044 --- /dev/null +++ b/compiled_docs/tree/demo/draggable.en-us.md @@ -0,0 +1 @@ +{"title":"Drag","meta":{"title":"Drag","description":"\n

    Drag the node inside or around other nodes.

    \n","order":"8"},"codes":{"jsx":"import { Tree } from '@alifd/next';\n\nconst TreeNode = Tree.Node;\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ label: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n gData\n };\n }\n\n onDrop(info) {\n if (!info.dragNode) {\n return;\n }\n const dragKey = info.dragNode.props.eventKey;\n const dropKey = info.node.props.eventKey;\n const dropPosition = info.dropPosition;\n const loop = (data, key, callback) => {\n data.forEach((item, index, arr) => {\n if (item.key === key) {\n return callback(item, index, arr);\n }\n if (item.children) {\n return loop(item.children, key, callback);\n }\n });\n };\n const data = [...this.state.gData];\n let dragObj;\n loop(data, dragKey, (item, index, arr) => {\n arr.splice(index, 1);\n dragObj = item;\n });\n if (info.dropPosition === 0) {\n loop(data, dropKey, (item) => {\n item.children = item.children || [];\n item.children.push(dragObj);\n });\n } else {\n let ar;\n let i;\n loop(data, dropKey, (item, index, arr) => {\n ar = arr;\n i = index;\n });\n if (dropPosition === -1) {\n ar.splice(i, 0, dragObj);\n } else {\n ar.splice(i + 1, 0, dragObj);\n }\n }\n this.setState({\n gData: data\n });\n }\n render() {\n const loop = data => data.map(item => {\n if (item.children) {\n return {loop(item.children)};\n }\n return ;\n });\n\n return (\n \n {loop(this.state.gData)}\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Tree } from '@alifd/next';\n\nconst TreeNode = Tree.Node;\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ label: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n gData\n };\n }\n\n onDrop(info) {\n if (!info.dragNode) {\n return;\n }\n const dragKey = info.dragNode.props.eventKey;\n const dropKey = info.node.props.eventKey;\n const dropPosition = info.dropPosition;\n const loop = (data, key, callback) => {\n data.forEach((item, index, arr) => {\n if (item.key === key) {\n return callback(item, index, arr);\n }\n if (item.children) {\n return loop(item.children, key, callback);\n }\n });\n };\n const data = [...this.state.gData];\n let dragObj;\n loop(data, dragKey, (item, index, arr) => {\n arr.splice(index, 1);\n dragObj = item;\n });\n if (info.dropPosition === 0) {\n loop(data, dropKey, (item) => {\n item.children = item.children || [];\n item.children.push(dragObj);\n });\n } else {\n let ar;\n let i;\n loop(data, dropKey, (item, index, arr) => {\n ar = arr;\n i = index;\n });\n if (dropPosition === -1) {\n ar.splice(i, 0, dragObj);\n } else {\n ar.splice(i + 1, 0, dragObj);\n }\n }\n this.setState({\n gData: data\n });\n }\n render() {\n const loop = data => data.map(item => {\n if (item.children) {\n return {loop(item.children)};\n }\n return ;\n });\n\n return (\n \n {loop(this.state.gData)}\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Tree } from '@alifd/next';\n\nconst TreeNode = Tree.Node;\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n    const preKey = _preKey || '0';\n    const tns = _tns || gData;\n\n    const children = [];\n    for (let i = 0; i < x; i++) {\n        const key = `${preKey}-${i}`;\n        tns.push({ label: key, key });\n        if (i < y) {\n            children.push(key);\n        }\n    }\n    if (_level < 0) {\n        return tns;\n    }\n    const level = _level - 1;\n    children.forEach((key, index) => {\n        tns[index].children = [];\n        return generateData(level, key, tns[index].children);\n    });\n};\ngenerateData(z);\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            gData\n        };\n    }\n\n    onDrop(info) {\n        if (!info.dragNode) {\n            return;\n        }\n        const dragKey = info.dragNode.props.eventKey;\n        const dropKey = info.node.props.eventKey;\n        const dropPosition = info.dropPosition;\n        const loop = (data, key, callback) => {\n            data.forEach((item, index, arr) => {\n                if (item.key === key) {\n                    return callback(item, index, arr);\n                }\n                if (item.children) {\n                    return loop(item.children, key, callback);\n                }\n            });\n        };\n        const data = [...this.state.gData];\n        let dragObj;\n        loop(data, dragKey, (item, index, arr) => {\n            arr.splice(index, 1);\n            dragObj = item;\n        });\n        if (info.dropPosition === 0) {\n            loop(data, dropKey, (item) => {\n                item.children = item.children || [];\n                item.children.push(dragObj);\n            });\n        } else {\n            let ar;\n            let i;\n            loop(data, dropKey, (item, index, arr) => {\n                ar = arr;\n                i = index;\n            });\n            if (dropPosition === -1) {\n                ar.splice(i, 0, dragObj);\n            } else {\n                ar.splice(i + 1, 0, dragObj);\n            }\n        }\n        this.setState({\n            gData: data\n        });\n    }\n    render() {\n        const loop = data => data.map(item => {\n            if (item.children) {\n                return <TreeNode key={item.key} label={item.key}>{loop(item.children)}</TreeNode>;\n            }\n            return <TreeNode key={item.key} label={item.key} />;\n        });\n\n        return (\n            <Tree draggable selectable={false} isLabelBlock defaultExpandedKeys={['0-0', '0-0-0', '0-0-0-0']} onDrop={this.onDrop.bind(this)}>\n                {loop(this.state.gData)}\n            </Tree>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tree/demo/draggable.md b/compiled_docs/tree/demo/draggable.md new file mode 100644 index 0000000000..17628426d1 --- /dev/null +++ b/compiled_docs/tree/demo/draggable.md @@ -0,0 +1 @@ +{"title":"拖动","meta":{"title":"拖动","description":"\n

    将节点拖拽到其他节点内部或前后。

    \n","order":"8"},"codes":{"jsx":"import { Tree } from '@alifd/next';\n\nconst TreeNode = Tree.Node;\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ label: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n gData\n };\n }\n\n onDrop(info) {\n if (!info.dragNode) {\n return;\n }\n const dragKey = info.dragNode.props.eventKey;\n const dropKey = info.node.props.eventKey;\n const dropPosition = info.dropPosition;\n const loop = (data, key, callback) => {\n data.forEach((item, index, arr) => {\n if (item.key === key) {\n return callback(item, index, arr);\n }\n if (item.children) {\n return loop(item.children, key, callback);\n }\n });\n };\n const data = [...this.state.gData];\n let dragObj;\n loop(data, dragKey, (item, index, arr) => {\n arr.splice(index, 1);\n dragObj = item;\n });\n if (info.dropPosition === 0) {\n loop(data, dropKey, (item) => {\n item.children = item.children || [];\n item.children.push(dragObj);\n });\n } else {\n let ar;\n let i;\n loop(data, dropKey, (item, index, arr) => {\n ar = arr;\n i = index;\n });\n if (dropPosition === -1) {\n ar.splice(i, 0, dragObj);\n } else {\n ar.splice(i + 1, 0, dragObj);\n }\n }\n this.setState({\n gData: data\n });\n }\n render() {\n const loop = data => data.map(item => {\n if (item.children) {\n return {loop(item.children)};\n }\n return ;\n });\n\n return (\n \n {loop(this.state.gData)}\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Tree } from '@alifd/next';\n\nconst TreeNode = Tree.Node;\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n const preKey = _preKey || '0';\n const tns = _tns || gData;\n\n const children = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ label: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n gData\n };\n }\n\n onDrop(info) {\n if (!info.dragNode) {\n return;\n }\n const dragKey = info.dragNode.props.eventKey;\n const dropKey = info.node.props.eventKey;\n const dropPosition = info.dropPosition;\n const loop = (data, key, callback) => {\n data.forEach((item, index, arr) => {\n if (item.key === key) {\n return callback(item, index, arr);\n }\n if (item.children) {\n return loop(item.children, key, callback);\n }\n });\n };\n const data = [...this.state.gData];\n let dragObj;\n loop(data, dragKey, (item, index, arr) => {\n arr.splice(index, 1);\n dragObj = item;\n });\n if (info.dropPosition === 0) {\n loop(data, dropKey, (item) => {\n item.children = item.children || [];\n item.children.push(dragObj);\n });\n } else {\n let ar;\n let i;\n loop(data, dropKey, (item, index, arr) => {\n ar = arr;\n i = index;\n });\n if (dropPosition === -1) {\n ar.splice(i, 0, dragObj);\n } else {\n ar.splice(i + 1, 0, dragObj);\n }\n }\n this.setState({\n gData: data\n });\n }\n render() {\n const loop = data => data.map(item => {\n if (item.children) {\n return {loop(item.children)};\n }\n return ;\n });\n\n return (\n \n {loop(this.state.gData)}\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Tree } from '@alifd/next';\n\nconst TreeNode = Tree.Node;\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst gData = [];\n\nconst generateData = (_level, _preKey, _tns) => {\n    const preKey = _preKey || '0';\n    const tns = _tns || gData;\n\n    const children = [];\n    for (let i = 0; i < x; i++) {\n        const key = `${preKey}-${i}`;\n        tns.push({ label: key, key });\n        if (i < y) {\n            children.push(key);\n        }\n    }\n    if (_level < 0) {\n        return tns;\n    }\n    const level = _level - 1;\n    children.forEach((key, index) => {\n        tns[index].children = [];\n        return generateData(level, key, tns[index].children);\n    });\n};\ngenerateData(z);\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            gData\n        };\n    }\n\n    onDrop(info) {\n        if (!info.dragNode) {\n            return;\n        }\n        const dragKey = info.dragNode.props.eventKey;\n        const dropKey = info.node.props.eventKey;\n        const dropPosition = info.dropPosition;\n        const loop = (data, key, callback) => {\n            data.forEach((item, index, arr) => {\n                if (item.key === key) {\n                    return callback(item, index, arr);\n                }\n                if (item.children) {\n                    return loop(item.children, key, callback);\n                }\n            });\n        };\n        const data = [...this.state.gData];\n        let dragObj;\n        loop(data, dragKey, (item, index, arr) => {\n            arr.splice(index, 1);\n            dragObj = item;\n        });\n        if (info.dropPosition === 0) {\n            loop(data, dropKey, (item) => {\n                item.children = item.children || [];\n                item.children.push(dragObj);\n            });\n        } else {\n            let ar;\n            let i;\n            loop(data, dropKey, (item, index, arr) => {\n                ar = arr;\n                i = index;\n            });\n            if (dropPosition === -1) {\n                ar.splice(i, 0, dragObj);\n            } else {\n                ar.splice(i + 1, 0, dragObj);\n            }\n        }\n        this.setState({\n            gData: data\n        });\n    }\n    render() {\n        const loop = data => data.map(item => {\n            if (item.children) {\n                return <TreeNode key={item.key} label={item.key}>{loop(item.children)}</TreeNode>;\n            }\n            return <TreeNode key={item.key} label={item.key} />;\n        });\n\n        return (\n            <Tree draggable selectable={false} isLabelBlock defaultExpandedKeys={['0-0', '0-0-0', '0-0-0-0']} onDrop={this.onDrop.bind(this)}>\n                {loop(this.state.gData)}\n            </Tree>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tree/demo/dynamic.en-us.md b/compiled_docs/tree/demo/dynamic.en-us.md new file mode 100644 index 0000000000..3f4324e0f1 --- /dev/null +++ b/compiled_docs/tree/demo/dynamic.en-us.md @@ -0,0 +1 @@ +{"title":"Loading data asynchronously","meta":{"title":"Loading data asynchronously","description":"\n

    Click node to load data dynamically.

    \n","order":"7"},"codes":{"jsx":"import { Tree } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n data: [\n { label: 'Expand to load', key: '0' },\n { label: 'Expand to load', key: '1' },\n { label: 'Leaf', key: '2', isLeaf: true }\n ]\n };\n\n this.onLoadData = this.onLoadData.bind(this);\n }\n\n onLoadData(node) {\n return new Promise(resolve => {\n if (node.props.children) {\n return resolve();\n }\n\n const { eventKey, pos } = node.props;\n const item = this.getItemByPos(pos);\n setTimeout(() => {\n item.children = [\n { label: 'Child Tree', key: `${eventKey}-0` },\n { label: 'Child Tree', key: `${eventKey}-1` }\n ];\n this.setState({\n data: [...this.state.data]\n });\n resolve();\n }, 1000);\n });\n }\n\n getItemByPos(pos) {\n return pos.split('-').slice(1).reduce((ret, num) => ret.children[num], { children: this.state.data });\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Tree } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n data: [\n { label: 'Expand to load', key: '0' },\n { label: 'Expand to load', key: '1' },\n { label: 'Leaf', key: '2', isLeaf: true }\n ]\n };\n\n this.onLoadData = this.onLoadData.bind(this);\n }\n\n onLoadData(node) {\n return new Promise(resolve => {\n if (node.props.children) {\n return resolve();\n }\n\n const { eventKey, pos } = node.props;\n const item = this.getItemByPos(pos);\n setTimeout(() => {\n item.children = [\n { label: 'Child Tree', key: `${eventKey}-0` },\n { label: 'Child Tree', key: `${eventKey}-1` }\n ];\n this.setState({\n data: [...this.state.data]\n });\n resolve();\n }, 1000);\n });\n }\n\n getItemByPos(pos) {\n return pos.split('-').slice(1).reduce((ret, num) => ret.children[num], { children: this.state.data });\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Tree } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            data: [\n                { label: 'Expand to load', key: '0' },\n                { label: 'Expand to load', key: '1' },\n                { label: 'Leaf', key: '2', isLeaf: true }\n            ]\n        };\n\n        this.onLoadData = this.onLoadData.bind(this);\n    }\n\n    onLoadData(node) {\n        return new Promise(resolve => {\n            if (node.props.children) {\n                return resolve();\n            }\n\n            const { eventKey, pos } = node.props;\n            const item = this.getItemByPos(pos);\n            setTimeout(() => {\n                item.children = [\n                    { label: 'Child Tree', key: `${eventKey}-0` },\n                    { label: 'Child Tree', key: `${eventKey}-1` }\n                ];\n                this.setState({\n                    data: [...this.state.data]\n                });\n                resolve();\n            }, 1000);\n        });\n    }\n\n    getItemByPos(pos) {\n        return pos.split('-').slice(1).reduce((ret, num) => ret.children[num], { children: this.state.data });\n    }\n\n    render() {\n        return (\n            <Tree dataSource={this.state.data} loadData={this.onLoadData} />\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tree/demo/dynamic.md b/compiled_docs/tree/demo/dynamic.md new file mode 100644 index 0000000000..cadd0f93e3 --- /dev/null +++ b/compiled_docs/tree/demo/dynamic.md @@ -0,0 +1 @@ +{"title":"异步加载数据","meta":{"title":"异步加载数据","description":"\n

    点击展开节点，动态加载数据。

    \n","order":"7"},"codes":{"jsx":"import { Tree } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n data: [\n { label: 'Expand to load', key: '0' },\n { label: 'Expand to load', key: '1' },\n { label: 'Leaf', key: '2', isLeaf: true }\n ]\n };\n\n this.onLoadData = this.onLoadData.bind(this);\n }\n\n onLoadData(node) {\n return new Promise(resolve => {\n if (node.props.children) {\n return resolve();\n }\n\n const { eventKey, pos } = node.props;\n const item = this.getItemByPos(pos);\n setTimeout(() => {\n item.children = [\n { label: 'Child Tree', key: `${eventKey}-0` },\n { label: 'Child Tree', key: `${eventKey}-1` }\n ];\n this.setState({\n data: [...this.state.data]\n });\n resolve();\n }, 1000);\n });\n }\n\n getItemByPos(pos) {\n return pos.split('-').slice(1).reduce((ret, num) => ret.children[num], { children: this.state.data });\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Tree } from '@alifd/next';\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n data: [\n { label: 'Expand to load', key: '0' },\n { label: 'Expand to load', key: '1' },\n { label: 'Leaf', key: '2', isLeaf: true }\n ]\n };\n\n this.onLoadData = this.onLoadData.bind(this);\n }\n\n onLoadData(node) {\n return new Promise(resolve => {\n if (node.props.children) {\n return resolve();\n }\n\n const { eventKey, pos } = node.props;\n const item = this.getItemByPos(pos);\n setTimeout(() => {\n item.children = [\n { label: 'Child Tree', key: `${eventKey}-0` },\n { label: 'Child Tree', key: `${eventKey}-1` }\n ];\n this.setState({\n data: [...this.state.data]\n });\n resolve();\n }, 1000);\n });\n }\n\n getItemByPos(pos) {\n return pos.split('-').slice(1).reduce((ret, num) => ret.children[num], { children: this.state.data });\n }\n\n render() {\n return (\n \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Tree } from '@alifd/next';\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            data: [\n                { label: 'Expand to load', key: '0' },\n                { label: 'Expand to load', key: '1' },\n                { label: 'Leaf', key: '2', isLeaf: true }\n            ]\n        };\n\n        this.onLoadData = this.onLoadData.bind(this);\n    }\n\n    onLoadData(node) {\n        return new Promise(resolve => {\n            if (node.props.children) {\n                return resolve();\n            }\n\n            const { eventKey, pos } = node.props;\n            const item = this.getItemByPos(pos);\n            setTimeout(() => {\n                item.children = [\n                    { label: 'Child Tree', key: `${eventKey}-0` },\n                    { label: 'Child Tree', key: `${eventKey}-1` }\n                ];\n                this.setState({\n                    data: [...this.state.data]\n                });\n                resolve();\n            }, 1000);\n        });\n    }\n\n    getItemByPos(pos) {\n        return pos.split('-').slice(1).reduce((ret, num) => ret.children[num], { children: this.state.data });\n    }\n\n    render() {\n        return (\n            <Tree dataSource={this.state.data} loadData={this.onLoadData} />\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tree/demo/line.en-us.md b/compiled_docs/tree/demo/line.en-us.md new file mode 100644 index 0000000000..20bc328850 --- /dev/null +++ b/compiled_docs/tree/demo/line.en-us.md @@ -0,0 +1 @@ +{"title":"Show line","meta":{"title":"Show line","description":"\n

    Demo the tree with line.

    \n","order":"2"},"codes":{"jsx":"import { Tree } from '@alifd/next';\n\nconst TreeNode = Tree.Node;\n\nReactDOM.render(\n \n \n \n \n \n \n \n \n \n \n \n \n \n , mountNode);\n"},"body":"\n````jsx\nimport { Tree } from '@alifd/next';\n\nconst TreeNode = Tree.Node;\n\nReactDOM.render(\n \n \n \n \n \n \n \n \n \n \n \n \n \n , mountNode);\n````","html":"
    import { Tree } from '@alifd/next';\n\nconst TreeNode = Tree.Node;\n\nReactDOM.render(\n    <Tree defaultExpandAll showLine>\n        <TreeNode label=\"Trunk\">\n            <TreeNode label=\"Branch\">\n                <TreeNode label=\"Branch\">\n                    <TreeNode label=\"Leaf\" />\n                </TreeNode>\n                <TreeNode label=\"Leaf\" />\n            </TreeNode>\n            <TreeNode label=\"Branch\">\n                <TreeNode label=\"Leaf\" />\n                <TreeNode label=\"Leaf\" />\n            </TreeNode>\n        </TreeNode>\n    </Tree>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tree/demo/line.md b/compiled_docs/tree/demo/line.md new file mode 100644 index 0000000000..9d7aeaddfc --- /dev/null +++ b/compiled_docs/tree/demo/line.md @@ -0,0 +1 @@ +{"title":"带线样式","meta":{"title":"带线样式","description":"\n

    展示Tree组件带线的样式外观。

    \n","order":"2"},"codes":{"jsx":"import { Tree } from '@alifd/next';\n\nconst TreeNode = Tree.Node;\n\nReactDOM.render(\n \n \n \n \n \n \n \n \n \n \n \n \n \n , mountNode);\n"},"body":"\n\n````jsx\nimport { Tree } from '@alifd/next';\n\nconst TreeNode = Tree.Node;\n\nReactDOM.render(\n \n \n \n \n \n \n \n \n \n \n \n \n \n , mountNode);\n````","html":"
    import { Tree } from '@alifd/next';\n\nconst TreeNode = Tree.Node;\n\nReactDOM.render(\n    <Tree defaultExpandAll showLine>\n        <TreeNode label=\"Trunk\">\n            <TreeNode label=\"Branch\">\n                <TreeNode label=\"Branch\">\n                    <TreeNode label=\"Leaf\" />\n                </TreeNode>\n                <TreeNode label=\"Leaf\" />\n            </TreeNode>\n            <TreeNode label=\"Branch\">\n                <TreeNode label=\"Leaf\" />\n                <TreeNode label=\"Leaf\" />\n            </TreeNode>\n        </TreeNode>\n    </Tree>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tree/demo/node-block.en-us.md b/compiled_docs/tree/demo/node-block.en-us.md new file mode 100644 index 0000000000..7a9d986598 --- /dev/null +++ b/compiled_docs/tree/demo/node-block.en-us.md @@ -0,0 +1 @@ +{"title":"Tree node is block","meta":{"title":"Tree node is block","description":"\n

    You can set isNodeBlock to true to make the node block. The isNodeBlock can also pass in an object. You can set defaultPaddingLeft (the default left padding) and indent. Also note isNodeBlock will not work if you set showLine to true.

    \n","order":"3"},"codes":{"jsx":"import { Tree } from '@alifd/next';\n\nconst TreeNode = Tree.Node;\n\nReactDOM.render(\n \n \n \n \n \n \n \n \n \n \n \n \n \n , mountNode);\n"},"body":"\n````jsx\nimport { Tree } from '@alifd/next';\n\nconst TreeNode = Tree.Node;\n\nReactDOM.render(\n \n \n \n \n \n \n \n \n \n \n \n \n \n , mountNode);\n````","html":"
    import { Tree } from '@alifd/next';\n\nconst TreeNode = Tree.Node;\n\nReactDOM.render(\n    <Tree defaultExpandAll isNodeBlock={{ defaultPaddingLeft: 50 }} defaultSelectedKeys={['1']} style={{ width: '300px' }}>\n        <TreeNode label=\"Component\" key=\"0\">\n            <TreeNode label=\"Form\" key=\"1\" disabled>\n                <TreeNode label=\"Select\" key=\"2\">\n                    <TreeNode label=\"TreeSelect\" key=\"3\" />\n                </TreeNode>\n                <TreeNode label=\"Input\" key=\"4\" />\n            </TreeNode>\n            <TreeNode label=\"Display\" key=\"5\">\n                <TreeNode label=\"Card\" key=\"6\" />\n                <TreeNode label=\"Table\" key=\"7\" />\n            </TreeNode>\n        </TreeNode>\n    </Tree>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tree/demo/node-block.md b/compiled_docs/tree/demo/node-block.md new file mode 100644 index 0000000000..5304f6e68e --- /dev/null +++ b/compiled_docs/tree/demo/node-block.md @@ -0,0 +1 @@ +{"title":"树节点占满一行","meta":{"title":"树节点占满一行","description":"\n

    可以通过设置 isNodeBlock 为 true，来让树节点占满一行，isNodeBlock 也可传入一个对象，支持设置 defaultPaddingLeft（默认的左内边距）和 indent （缩进距离），另外注意 showLine \b在开启 isNodeBlock 时失效。

    \n","order":"3"},"codes":{"jsx":"import { Tree } from '@alifd/next';\n\nconst TreeNode = Tree.Node;\n\nReactDOM.render(\n \n \n \n \n \n \n \n \n \n \n \n \n \n , mountNode);\n"},"body":"\n\n````jsx\nimport { Tree } from '@alifd/next';\n\nconst TreeNode = Tree.Node;\n\nReactDOM.render(\n \n \n \n \n \n \n \n \n \n \n \n \n \n , mountNode);\n````","html":"
    import { Tree } from '@alifd/next';\n\nconst TreeNode = Tree.Node;\n\nReactDOM.render(\n    <Tree defaultExpandAll isNodeBlock={{ defaultPaddingLeft: 50 }} defaultSelectedKeys={['1']} style={{ width: '300px' }}>\n        <TreeNode label=\"Component\" key=\"0\">\n            <TreeNode label=\"Form\" key=\"1\" disabled>\n                <TreeNode label=\"Select\" key=\"2\">\n                    <TreeNode label=\"TreeSelect\" key=\"3\" />\n                </TreeNode>\n                <TreeNode label=\"Input\" key=\"4\" />\n            </TreeNode>\n            <TreeNode label=\"Display\" key=\"5\">\n                <TreeNode label=\"Card\" key=\"6\" />\n                <TreeNode label=\"Table\" key=\"7\" />\n            </TreeNode>\n        </TreeNode>\n    </Tree>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tree/demo/search-tree.en-us.md b/compiled_docs/tree/demo/search-tree.en-us.md new file mode 100644 index 0000000000..611b6fcd04 --- /dev/null +++ b/compiled_docs/tree/demo/search-tree.en-us.md @@ -0,0 +1 @@ +{"title":"Searchable","meta":{"title":"Searchable","description":"\n

    Demos the searchable tree.

    \n","order":"6"},"codes":{"jsx":"import { Search, Tree } from '@alifd/next';\n\nconst data = [{\n label: 'Component',\n key: '1',\n children: [{\n label: 'Form',\n key: '2',\n children: [{\n label: 'Input',\n key: '4'\n }, {\n label: 'Select',\n key: '5'\n }]\n }, {\n label: 'Display',\n key: '3',\n children: [{\n label: 'Table',\n key: '6'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n expandedKeys: ['2'],\n autoExpandParent: true\n };\n this.matchedKeys = [];\n this.handleSearch = this.handleSearch.bind(this);\n this.handleExpand = this.handleExpand.bind(this);\n }\n\n handleSearch(value) {\n value = value.trim();\n if (!value) {\n this.matchedKeys = null;\n return;\n }\n\n const matchedKeys = [];\n const loop = data => data.forEach(item => {\n if (item.label.indexOf(value) > -1) {\n matchedKeys.push(item.key);\n }\n if (item.children && item.children.length) {\n loop(item.children);\n }\n });\n loop(data);\n\n this.setState({\n expandedKeys: [...matchedKeys],\n autoExpandParent: true\n });\n this.matchedKeys = matchedKeys;\n }\n\n handleExpand(keys) {\n this.setState({\n expandedKeys: keys,\n autoExpandParent: false\n });\n }\n\n render() {\n const { expandedKeys, autoExpandParent } = this.state;\n const filterTreeNode = node => {\n return this.matchedKeys && this.matchedKeys.indexOf(node.props.eventKey) > -1;\n };\n\n return (\n
    \n \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Search, Tree } from '@alifd/next';\n\nconst data = [{\n label: 'Component',\n key: '1',\n children: [{\n label: 'Form',\n key: '2',\n children: [{\n label: 'Input',\n key: '4'\n }, {\n label: 'Select',\n key: '5'\n }]\n }, {\n label: 'Display',\n key: '3',\n children: [{\n label: 'Table',\n key: '6'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n expandedKeys: ['2'],\n autoExpandParent: true\n };\n this.matchedKeys = [];\n this.handleSearch = this.handleSearch.bind(this);\n this.handleExpand = this.handleExpand.bind(this);\n }\n\n handleSearch(value) {\n value = value.trim();\n if (!value) {\n this.matchedKeys = null;\n return;\n }\n\n const matchedKeys = [];\n const loop = data => data.forEach(item => {\n if (item.label.indexOf(value) > -1) {\n matchedKeys.push(item.key);\n }\n if (item.children && item.children.length) {\n loop(item.children);\n }\n });\n loop(data);\n\n this.setState({\n expandedKeys: [...matchedKeys],\n autoExpandParent: true\n });\n this.matchedKeys = matchedKeys;\n }\n\n handleExpand(keys) {\n this.setState({\n expandedKeys: keys,\n autoExpandParent: false\n });\n }\n\n render() {\n const { expandedKeys, autoExpandParent } = this.state;\n const filterTreeNode = node => {\n return this.matchedKeys && this.matchedKeys.indexOf(node.props.eventKey) > -1;\n };\n\n return (\n
    \n \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Search, Tree } from '@alifd/next';\n\nconst data = [{\n    label: 'Component',\n    key: '1',\n    children: [{\n        label: 'Form',\n        key: '2',\n        children: [{\n            label: 'Input',\n            key: '4'\n        }, {\n            label: 'Select',\n            key: '5'\n        }]\n    }, {\n        label: 'Display',\n        key: '3',\n        children: [{\n            label: 'Table',\n            key: '6'\n        }]\n    }]\n}];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            expandedKeys: ['2'],\n            autoExpandParent: true\n        };\n        this.matchedKeys = [];\n        this.handleSearch = this.handleSearch.bind(this);\n        this.handleExpand = this.handleExpand.bind(this);\n    }\n\n    handleSearch(value) {\n        value = value.trim();\n        if (!value) {\n            this.matchedKeys = null;\n            return;\n        }\n\n        const matchedKeys = [];\n        const loop = data => data.forEach(item => {\n            if (item.label.indexOf(value) > -1) {\n                matchedKeys.push(item.key);\n            }\n            if (item.children && item.children.length) {\n                loop(item.children);\n            }\n        });\n        loop(data);\n\n        this.setState({\n            expandedKeys: [...matchedKeys],\n            autoExpandParent: true\n        });\n        this.matchedKeys = matchedKeys;\n    }\n\n    handleExpand(keys) {\n        this.setState({\n            expandedKeys: keys,\n            autoExpandParent: false\n        });\n    }\n\n    render() {\n        const { expandedKeys, autoExpandParent } = this.state;\n        const filterTreeNode = node => {\n            return this.matchedKeys && this.matchedKeys.indexOf(node.props.eventKey) > -1;\n        };\n\n        return (\n            <div>\n                <Search shape=\"simple\" size=\"medium\" style={{ width: '200px', marginBottom: '10px' }} onChange={this.handleSearch} />\n                <Tree expandedKeys={expandedKeys} autoExpandParent={autoExpandParent} filterTreeNode={filterTreeNode} onExpand={this.handleExpand} dataSource={data} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tree/demo/search-tree.md b/compiled_docs/tree/demo/search-tree.md new file mode 100644 index 0000000000..e0fd4d0fd2 --- /dev/null +++ b/compiled_docs/tree/demo/search-tree.md @@ -0,0 +1 @@ +{"title":"可搜索的树","meta":{"title":"可搜索的树","description":"\n

    展示可搜索的树。

    \n","order":"6"},"codes":{"jsx":"import { Search, Tree } from '@alifd/next';\n\nconst data = [{\n label: 'Component',\n key: '1',\n children: [{\n label: 'Form',\n key: '2',\n children: [{\n label: 'Input',\n key: '4'\n }, {\n label: 'Select',\n key: '5'\n }]\n }, {\n label: 'Display',\n key: '3',\n children: [{\n label: 'Table',\n key: '6'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n expandedKeys: ['2'],\n autoExpandParent: true\n };\n this.matchedKeys = [];\n this.handleSearch = this.handleSearch.bind(this);\n this.handleExpand = this.handleExpand.bind(this);\n }\n\n handleSearch(value) {\n value = value.trim();\n if (!value) {\n this.matchedKeys = null;\n return;\n }\n\n const matchedKeys = [];\n const loop = data => data.forEach(item => {\n if (item.label.indexOf(value) > -1) {\n matchedKeys.push(item.key);\n }\n if (item.children && item.children.length) {\n loop(item.children);\n }\n });\n loop(data);\n\n this.setState({\n expandedKeys: [...matchedKeys],\n autoExpandParent: true\n });\n this.matchedKeys = matchedKeys;\n }\n\n handleExpand(keys) {\n this.setState({\n expandedKeys: keys,\n autoExpandParent: false\n });\n }\n\n render() {\n const { expandedKeys, autoExpandParent } = this.state;\n const filterTreeNode = node => {\n return this.matchedKeys && this.matchedKeys.indexOf(node.props.eventKey) > -1;\n };\n\n return (\n
    \n \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Search, Tree } from '@alifd/next';\n\nconst data = [{\n label: 'Component',\n key: '1',\n children: [{\n label: 'Form',\n key: '2',\n children: [{\n label: 'Input',\n key: '4'\n }, {\n label: 'Select',\n key: '5'\n }]\n }, {\n label: 'Display',\n key: '3',\n children: [{\n label: 'Table',\n key: '6'\n }]\n }]\n}];\n\nclass Demo extends React.Component {\n constructor(props) {\n super(props);\n\n this.state = {\n expandedKeys: ['2'],\n autoExpandParent: true\n };\n this.matchedKeys = [];\n this.handleSearch = this.handleSearch.bind(this);\n this.handleExpand = this.handleExpand.bind(this);\n }\n\n handleSearch(value) {\n value = value.trim();\n if (!value) {\n this.matchedKeys = null;\n return;\n }\n\n const matchedKeys = [];\n const loop = data => data.forEach(item => {\n if (item.label.indexOf(value) > -1) {\n matchedKeys.push(item.key);\n }\n if (item.children && item.children.length) {\n loop(item.children);\n }\n });\n loop(data);\n\n this.setState({\n expandedKeys: [...matchedKeys],\n autoExpandParent: true\n });\n this.matchedKeys = matchedKeys;\n }\n\n handleExpand(keys) {\n this.setState({\n expandedKeys: keys,\n autoExpandParent: false\n });\n }\n\n render() {\n const { expandedKeys, autoExpandParent } = this.state;\n const filterTreeNode = node => {\n return this.matchedKeys && this.matchedKeys.indexOf(node.props.eventKey) > -1;\n };\n\n return (\n
    \n \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Search, Tree } from '@alifd/next';\n\nconst data = [{\n    label: 'Component',\n    key: '1',\n    children: [{\n        label: 'Form',\n        key: '2',\n        children: [{\n            label: 'Input',\n            key: '4'\n        }, {\n            label: 'Select',\n            key: '5'\n        }]\n    }, {\n        label: 'Display',\n        key: '3',\n        children: [{\n            label: 'Table',\n            key: '6'\n        }]\n    }]\n}];\n\nclass Demo extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            expandedKeys: ['2'],\n            autoExpandParent: true\n        };\n        this.matchedKeys = [];\n        this.handleSearch = this.handleSearch.bind(this);\n        this.handleExpand = this.handleExpand.bind(this);\n    }\n\n    handleSearch(value) {\n        value = value.trim();\n        if (!value) {\n            this.matchedKeys = null;\n            return;\n        }\n\n        const matchedKeys = [];\n        const loop = data => data.forEach(item => {\n            if (item.label.indexOf(value) > -1) {\n                matchedKeys.push(item.key);\n            }\n            if (item.children && item.children.length) {\n                loop(item.children);\n            }\n        });\n        loop(data);\n\n        this.setState({\n            expandedKeys: [...matchedKeys],\n            autoExpandParent: true\n        });\n        this.matchedKeys = matchedKeys;\n    }\n\n    handleExpand(keys) {\n        this.setState({\n            expandedKeys: keys,\n            autoExpandParent: false\n        });\n    }\n\n    render() {\n        const { expandedKeys, autoExpandParent } = this.state;\n        const filterTreeNode = node => {\n            return this.matchedKeys && this.matchedKeys.indexOf(node.props.eventKey) > -1;\n        };\n\n        return (\n            <div>\n                <Search shape=\"simple\" size=\"medium\" style={{ width: '200px', marginBottom: '10px' }} onChange={this.handleSearch} />\n                <Tree expandedKeys={expandedKeys} autoExpandParent={autoExpandParent} filterTreeNode={filterTreeNode} onExpand={this.handleExpand} dataSource={data} />\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<Demo />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/tree/index.en-us.md b/compiled_docs/tree/index.en-us.md new file mode 100644 index 0000000000..f6503b21b2 --- /dev/null +++ b/compiled_docs/tree/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

    Guide#

    When To Use#

    Folders, organizational structures, taxonomy, countries, regions, etc. Most of the structures in the world are tree structures. The use of Tree can fully reveal the hierarchical relationships among them, and have interactive functions such as expanding and closing, selections.

    \n

    API#

    ","api":"

    Tree#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    childrentree nodesReactNode-
    dataSourcedata source, this property has a higher priority than childrenArray-
    showLinewhether to show the line of the treeBooleanfalse
    selectablewhether to support selecting nodeBooleantrue
    selectedKeys(under control) keys of current selected nodesArray<String>-
    defaultSelectedKeys(under uncontrol) keys of default selected nodesArray<String>[]
    onSelectcallback function triggered when select or unselect node

    signatures:
    Function(selectedKeys: Array, extra: Object) => void
    params:
    selectedKeys: {Array} keys of selected nodes
    extra: {Object} extra params
    extra.selectedNodes: {Array} selected nodes
    extra.node: {Object} current operation node
    extra.selected: {Boolean} whether is selected    		Function() => {}
    multiplewhether to support multiple selectionBooleanfalse
    checkablewhether to support checking checkbox of the nodeBooleanfalse
    checkedKeys(under control) keys of current checked nodes, it should be an array or an object like {checked: Array, indeterminate: Array}Array<String>/Object-
    defaultCheckedKeys(under uncontrol) keys of default checked nodesArray<String>[]
    checkStrictlywhether the checkbox of the node is controlled strictly (selection of parent and child nodes are no longer related)Booleanfalse
    checkedStrategydefining the way to backfill when checked node

    options:
    'all' (return all checked nodes)
    'parent' (only parent nodes are returned when parent and child nodes are checked)
    'child' (only child nodes are returned when parent and child nodes are checked)    		Enum'all'
    onCheckcallback function triggered when check or uncheck node

    signatures:
    Function(checkedKeys: Array, extra: Object) => void
    params:
    checkedKeys: {Array} keys of checked nodes
    extra: {Object} extra param
    extra.checkedNodes: {Array} checked nodes
    extra.checkedNodesPositions: {Array} an array containing objects with check box nodes and their locations
    extra.indeterminateKeys: {Array} keys of indeterminate nodes
    extra.node: {Object} current operation node
    extra.checked: {Boolean} whethre is checked    		Function() => {}
    expandedKeys(under control) keys of current expanded nodesArray<String>-
    defaultExpandedKeys(under uncontrol) keys of default expanded nodesArray<String>[]
    defaultExpandAllwhether to expand all nodes by defaultBooleanfalse
    autoExpandParentwhether to expand the parent node automaticallyBooleantrue
    onExpandcallback function triggered when expand or collapse node

    signatures:
    Function(expandedKeys: Array, extra: Object) => void
    params:
    expandedKeys: {Array} keys of expanded nodes
    extra: {Object} extra param
    extra.node: {Object} current operation node
    extra.expanded: {Boolean} whether is expanded    		Function() => {}
    editablewhether to support editing node contentBooleanfalse
    onEditFinishcallback function triggered after editing

    signatures:
    Function(key: String, label: String, node: Object) => void
    params:
    key: {String} key of editing node
    label: {String} label after editting
    node: {Object} editting node    		Function() => {}
    draggablewhether to support drag and drop nodesBooleanfalse
    onDragStartcallback function triggered when start to drag node

    signatures:
    Function(info: Object) => void
    params:
    info: {Object} drag and drop information
    info.event: {Object} event object
    info.node: {Object} drag node    		Function() => {}
    onDragEntercallback function triggered when the drag node enters the target node

    signatures:
    Function(info: Object) => void
    params:
    info: {Object} drag and drop information
    info.event: {Object} event object
    info.node: {Object} target node
    info.expandedKeys: {Array} keys of current expanded nodes    		Function() => {}
    onDragOvercallback function triggered when the drag node is moved on the target node

    signatures:
    Function(info: Object) => void
    params:
    info: {Object} drag and drop information
    info.event: {Object} event object
    info.node: {Object} target node    		Function() => {}
    onDragLeavecallback function triggered when the drag node leaves the target node

    signatures:
    Function(info: Object) => void
    params:
    info: {Object} drag and drop information
    info.event: {Object} event object
    info.node: {Object} target node    		Function() => {}
    onDragEndcallback function triggered after draging

    signatures:
    Function(info: Object) => void
    params:
    info: {Object} drag and drop information
    info.event: {Object} event object
    info.node: {Object} target node    		Function() => {}
    onDropcallback function triggered when drop the node

    signatures:
    Function(info: Object) => void
    params:
    info: {Object} drag and drop information
    info.event: {Object} event object
    info.node: {Object} target node
    info.dragNode: {Object} drag node
    info.dragNodesKeys: {Array} keys of drag node and its child nodes
    info.dropPosition: {Number} drop position, -1 means before the current node, 0 means in the current node, and 1 means after the current node    		Function() => {}
    canDropwhether the node can be used as a drag target node

    signatures:
    Function(info: Object) => Boolean
    params:
    info: {Object} drag and drop information
    info.node: {Object} target node
    info.dragNode: {Object} drag node
    info.dragNodesKeys: {Array} keys of drag node and its child nodes
    info.dropPosition: {Number} drop position, -1 means before the current node, 0 means in the current node, and 1 means after the current node
    returns:
    {Boolean} Can it be treated as a target node
    		Function() => true
    loadDataasynchronous data loading function

    signatures:
    Function(node: Object) => void
    params:
    node: {Object} node clicked to expand    		Function-
    filterTreeNodefilter highlight nodes

    signatures:
    Function(node: Object) => Boolean
    params:
    node: {Object} nodes to be filtered
    returns:
    {Boolean} whether is filtered
    		Function-
    onRightClickcallback function when right click

    signatures:
    Function(info: Object) => void
    params:
    info: {Object} information object
    info.event: {Object} event object
    info.node: {Object} clicked node    		Function-
    isLabelBlocksets whether or not the node occupies the remaining space, it is generally used to add elements to the right side of each node (base flex, only Internet Explorer 10+ is supported)Booleanfalse
    isNodeBlockset whether the node fills a rowBoolean/Objectfalse
    animationwhether to enable expand and collapse animationBooleantrue
    \n

    Tree.Node#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    childrentree nodesReactNode-
    labelcontent of nodeReactNode'---'
    selectableset whether to support selecting node, override the Tree's selectableBoolean-
    checkableset whether to support checking node, override the Tree's checkableBoolean-
    editableset whether to support editing node, override the Tree's editableBoolean-
    draggableset whether to support dragging node, override the Tree's draggableBoolean-
    disabledwhether node is disabledBooleanfalse
    checkboxDisabledwhether checkbox of node is disabledBooleanfalse
    isLeafwhether it is a leaf node and only works when loadData is setBooleanfalse
    \n\n

    You should set the key for Tree.Node: <TreeNode key="102894" label="Ladies" />, which is generally the id of the data, but it must be guaranteed globally unique. The default value of key is Tree's internally calculated position string.

    \n\n"} \ No newline at end of file diff --git a/compiled_docs/tree/index.md b/compiled_docs/tree/index.md new file mode 100644 index 0000000000..81a223e5a6 --- /dev/null +++ b/compiled_docs/tree/index.md @@ -0,0 +1 @@ +{"meta":"

    开发指南#

    何时使用#

    文件夹、组织架构、生物分类、国家地区等等，世间万物的大多数结构都是树形结构。使用树控件可以完整展现其中的层级关系，并具有展开收起选择等交互功能。

    \n

    API#

    ","api":"

    Tree#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    children树节点ReactNode-
    dataSource数据源，该属性优先级高于 childrenArray-
    showLine是否显示树的线Booleanfalse
    selectable是否支持选中节点Booleantrue
    selectedKeys（用于受控）当前选中节点 key 的数组Array<String>-
    defaultSelectedKeys（用于非受控）默认选中节点 key 的数组Array<String>[]
    onSelect选中或取消选中节点时触发的回调函数

    签名:
    Function(selectedKeys: Array, extra: Object) => void
    参数:
    selectedKeys: {Array} 选中节点key的数组
    extra: {Object} 额外参数
    extra.selectedNodes: {Array} 选中节点的数组
    extra.node: {Object} 当前操作的节点
    extra.selected: {Boolean} 当前操作是否是选中    		Functionfunc.noop
    multiple是否支持多选Booleanfalse
    checkable是否支持勾选节点的复选框Booleanfalse
    checkedKeys（用于受控）当前勾选复选框节点 key 的数组或 {checked: Array, indeterminate: Array} 的对象Array<String>/Object-
    defaultCheckedKeys（用于非受控）默认勾选复选框节点 key 的数组Array<String>[]
    checkStrictly勾选节点复选框是否完全受控（父子节点选中状态不再关联）Booleanfalse
    checkedStrategy定义选中时回填的方式

    可选值:
    'all'(返回所有选中的节点)
    'parent'(父子节点都选中时只返回父节点)
    'child'(父子节点都选中时只返回子节点)    		Enum'all'
    onCheck勾选或取消勾选复选框时触发的回调函数

    签名:
    Function(checkedKeys: Array, extra: Object) => void
    参数:
    checkedKeys: {Array} 勾选复选框节点key的数组
    extra: {Object} 额外参数
    extra.checkedNodes: {Array} 勾选复选框节点的数组
    extra.checkedNodesPositions: {Array} 包含有勾选复选框节点和其位置的对象的数组
    extra.indeterminateKeys: {Array} 半选复选框节点 key 的数组
    extra.node: {Object} 当前操作的节点
    extra.checked: {Boolean} 当前操作是否是勾选    		Functionfunc.noop
    expandedKeys（用于受控）当前展开的节点 key 的数组Array<String>-
    defaultExpandedKeys（用于非受控）默认展开的节点 key 的数组Array<String>[]
    defaultExpandAll是否默认展开所有节点Booleanfalse
    autoExpandParent是否自动展开父节点Booleantrue
    onExpand展开或收起节点时触发的回调函数

    签名:
    Function(expandedKeys: Array, extra: Object) => void
    参数:
    expandedKeys: {Array} 展开的节点key的数组
    extra: {Object} 额外参数
    extra.node: {Object} 当前操作的节点
    extra.expanded: {Boolean} 当前操作是否是展开    		Functionfunc.noop
    editable是否支持编辑节点内容Booleanfalse
    onEditFinish编辑节点内容完成时触发的回调函数

    签名:
    Function(key: String, label: String, node: Object) => void
    参数:
    key: {String} 编辑节点的 key
    label: {String} 编辑节点完成时节点的文本
    node: {Object} 当前编辑的节点    		Functionfunc.noop
    draggable是否支持拖拽节点Booleanfalse
    onDragStart开始拖拽节点时触发的回调函数

    签名:
    Function(info: Object) => void
    参数:
    info: {Object} 拖拽信息
    info.event: {Object} 事件对象
    info.node: {Object} 拖拽的节点    		Functionfunc.noop
    onDragEnter拖拽节点进入目标节点时触发的回调函数

    签名:
    Function(info: Object) => void
    参数:
    info: {Object} 拖拽信息
    info.event: {Object} 事件对象
    info.node: {Object} 目标节点
    info.expandedKeys: {Array} 当前展开的节点key的数组    		Functionfunc.noop
    onDragOver拖拽节点在目标节点上移动的时候触发的回调函数

    签名:
    Function(info: Object) => void
    参数:
    info: {Object} 拖拽信息
    info.event: {Object} 事件对象
    info.node: {Object} 目标节点    		Functionfunc.noop
    onDragLeave拖拽节点离开目标节点时触发的回调函数

    签名:
    Function(info: Object) => void
    参数:
    info: {Object} 拖拽信息
    info.event: {Object} 事件对象
    info.node: {Object} 目标节点    		Functionfunc.noop
    onDragEnd拖拽节点拖拽结束时触发的回调函数

    签名:
    Function(info: Object) => void
    参数:
    info: {Object} 拖拽信息
    info.event: {Object} 事件对象
    info.node: {Object} 目标节点    		Functionfunc.noop
    onDrop拖拽节点放入目标节点内或前后触发的回调函数

    签名:
    Function(info: Object) => void
    参数:
    info: {Object} 拖拽信息
    info.event: {Object} 事件对象
    info.node: {Object} 目标节点
    info.dragNode: {Object} 拖拽的节点
    info.dragNodesKeys: {Array} 拖拽的节点和其子节点 key 的数组
    info.dropPosition: {Number} 放置位置，-1代表当前节点前，0代表当前节点里，1代表当前节点后    		Functionfunc.noop
    canDrop节点是否可被作为拖拽的目标节点

    签名:
    Function(info: Object) => Boolean
    参数:
    info: {Object} 拖拽信息
    info.node: {Object} 目标节点
    info.dragNode: {Object} 拖拽的节点
    info.dragNodesKeys: {Array} 拖拽的节点和其子节点 key 的数组
    info.dropPosition: {Number} 放置位置，-1代表当前节点前，0代表当前节点里，1代表当前节点后
    返回值:
    {Boolean} 是否可以被当作目标节点
    		Function() => true
    loadData异步加载数据的函数

    签名:
    Function(node: Object) => void
    参数:
    node: {Object} 被点击展开的节点    		Function-
    filterTreeNode按需筛选高亮节点

    签名:
    Function(node: Object) => Boolean
    参数:
    node: {Object} 待筛选的节点
    返回值:
    {Boolean} 是否被筛选中
    		Function-
    onRightClick右键点击节点时触发的回调函数

    签名:
    Function(info: Object) => void
    参数:
    info: {Object} 信息对象
    info.event: {Object} 事件对象
    info.node: {Object} 点击的节点    		Functionfunc.noop
    isLabelBlock设置节点是否占满剩余空间，一般用于统一在各节点右侧添加元素(借助 flex 实现，暂时只支持 ie10+)Booleanfalse
    isNodeBlock设置节点是否占满一行Boolean/Objectfalse
    animation是否开启展开收起动画Booleantrue
    focusedKey当前获得焦点的子菜单或菜单项 key 值String-
    \n

    Tree.Node#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    children树节点ReactNode-
    label节点文本内容ReactNode'---'
    selectable单独设置是否支持选中，覆盖 Tree 的 selectableBoolean-
    checkable单独设置是否出现复选框，覆盖 Tree 的 checkableBoolean-
    editable单独设置是否支持编辑，覆盖 Tree 的 editableBoolean-
    draggable单独设置是否支持拖拽，覆盖 Tree 的 draggableBoolean-
    disabled是否禁止节点响应Booleanfalse
    checkboxDisabled是否禁止勾选节点复选框Booleanfalse
    isLeaf是否是叶子节点，设置loadData时生效Booleanfalse
    \n\n

    可以为 Tree.Node 设置 key 值：<TreeNode key="102894" label="女装" />，一般为数据的 id 值，但必需保证其全局唯一性，key 的默认值为 Tree 内部计算出的位置字符串。

    \n\n"} \ No newline at end of file diff --git a/compiled_docs/upload/demo/accessibility.en-us.md b/compiled_docs/upload/demo/accessibility.en-us.md new file mode 100644 index 0000000000..d0ca48b861 --- /dev/null +++ b/compiled_docs/upload/demo/accessibility.en-us.md @@ -0,0 +1 @@ +{"title":"Accessibility","meta":{"title":"Accessibility","description":"\n

    Waring: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload API:

    \n
    \n
      \n
    1. only for test & develop, Never Use in production enviroments
      2. \n
    \n
    \n
    \n
      \n
    1. only support upload images
      2. \n
    \n
    \n
    \n
      \n
    1. Please refer to ARIA and KeyBoard.
      2. \n
    \n
    \n","order":"16"},"codes":{"jsx":"import { Upload, Button } from '@alifd/next';\n\nReactDOM.render([\n {}}\n onChange={onChange}\n key=\"5\"\n >\n \n \n], mountNode);\nfunction onChange(info) {\n console.log('onChange callback : ', info);\n}\n\n"},"body":"\n````jsx\nimport { Upload, Button } from '@alifd/next';\n\nReactDOM.render([\n {}}\n onChange={onChange}\n key=\"5\"\n >\n \n \n], mountNode);\nfunction onChange(info) {\n console.log('onChange callback : ', info);\n}\n\n````","html":"
    import { Upload, Button } from '@alifd/next';\n\nReactDOM.render([\n    <Upload\n        listType=\"text\"\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\"\n        beforeUpload={() => {}}\n        onChange={onChange}\n        key=\"5\"\n    >\n        <Button type=\"secondary\" style={{margin: '0 0 10px'}}>upload </Button>\n    </Upload>\n], mountNode);\nfunction onChange(info) {\n    console.log('onChange callback : ', info);\n}\n
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/accessibility.md b/compiled_docs/upload/demo/accessibility.md new file mode 100644 index 0000000000..69cefb4936 --- /dev/null +++ b/compiled_docs/upload/demo/accessibility.md @@ -0,0 +1 @@ +{"title":"无障碍","meta":{"title":"无障碍","description":"\n

    提醒: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload接口:

    \n
    \n
      \n
    1. 该接口仅作为测试使用,业务请勿使用
      2. \n
    \n
    \n
    \n
      \n
    1. 该接口仅支持图片上传,其他文件类型接口请自备
      2. \n
    \n
    \n
    \n
      \n
    1. 请参考ARIA and KeyBoard。
      2. \n
    \n
    \n","order":"16"},"codes":{"jsx":"import { Upload, Button } from '@alifd/next';\n\nReactDOM.render([\n {}}\n onChange={onChange}\n key=\"5\"\n >\n \n \n], mountNode);\nfunction onChange(info) {\n console.log('onChange callback : ', info);\n}\n\n"},"body":"\n\n````jsx\nimport { Upload, Button } from '@alifd/next';\n\nReactDOM.render([\n {}}\n onChange={onChange}\n key=\"5\"\n >\n \n \n], mountNode);\nfunction onChange(info) {\n console.log('onChange callback : ', info);\n}\n\n````","html":"
    import { Upload, Button } from '@alifd/next';\n\nReactDOM.render([\n    <Upload\n        listType=\"text\"\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\"\n        beforeUpload={() => {}}\n        onChange={onChange}\n        key=\"5\"\n    >\n        <Button type=\"secondary\" style={{margin: '0 0 10px'}}>upload </Button>\n    </Upload>\n], mountNode);\nfunction onChange(info) {\n    console.log('onChange callback : ', info);\n}\n
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/base.en-us.md b/compiled_docs/upload/demo/base.en-us.md new file mode 100644 index 0000000000..1a2894eaed --- /dev/null +++ b/compiled_docs/upload/demo/base.en-us.md @@ -0,0 +1 @@ +{"title":"Basic Usage","meta":{"title":"Basic Usage","description":"\n

    Waring: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload API:

    \n
    \n
      \n
    1. only for test & develop, Never Use in production enviroments
      2. \n
    \n
    \n
    \n
      \n
    1. only support upload images
      2. \n
    \n
    \n","order":"0"},"codes":{"jsx":"import { Upload, Button, Icon } from '@alifd/next';\n\nReactDOM.render(
    \n \n \n \n
    \n \n Upload File\n \n \n
    \n \n
    \n Attachment\n
    \n
    \n     \n
    , mountNode);\n\nfunction beforeUpload(info) {\n console.log('beforeUpload : ', info);\n}\n\nfunction onChange(info) {\n console.log('onChange : ', info);\n}\n\nfunction onSuccess(info) {\n console.log('onSuccess : ', info);\n}\n"},"body":"\n````jsx\nimport { Upload, Button, Icon } from '@alifd/next';\n\nReactDOM.render(
    \n \n \n \n
    \n \n Upload File\n \n \n
    \n \n
    \n Attachment\n
    \n
    \n     \n
    , mountNode);\n\nfunction beforeUpload(info) {\n console.log('beforeUpload : ', info);\n}\n\nfunction onChange(info) {\n console.log('onChange : ', info);\n}\n\nfunction onSuccess(info) {\n console.log('onSuccess : ', info);\n}\n````","html":"
    import { Upload, Button, Icon } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Upload\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        beforeUpload={beforeUpload}\n        onChange={onChange}\n        onSuccess={onSuccess}\n        multiple\n        defaultValue={[{\n            name: 'IMG.png',\n            state: 'done',\n            size: 1024,\n            downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            fileURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n        }]}\n    >\n        <Button type=\"primary\" style={{margin: '0 0 10px'}}>Upload File</Button>\n    </Upload>\n    <br/>\n    <Upload shape=\"card\" style={{display: 'inline-block'}}>\n        Upload File\n    </Upload>\n    <Upload style={{display: 'inline-block', marginLeft: '5px'}}>\n        <div className=\"next-upload-card\">\n            <Icon type=\"attachment\" size=\"large\"/>\n            <div className=\"next-upload-text\">\n                Attachment\n            </div>\n        </div>\n    </Upload>\n</div>, mountNode);\n\nfunction beforeUpload(info) {\n    console.log('beforeUpload : ', info);\n}\n\nfunction onChange(info) {\n    console.log('onChange : ', info);\n}\n\nfunction onSuccess(info) {\n    console.log('onSuccess : ', info);\n}
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/base.md b/compiled_docs/upload/demo/base.md new file mode 100644 index 0000000000..df0a107c16 --- /dev/null +++ b/compiled_docs/upload/demo/base.md @@ -0,0 +1 @@ +{"title":"文件上传","meta":{"title":"文件上传","description":"\n

    提醒: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload接口:

    \n
    \n
      \n
    1. 该接口仅作为测试使用,业务请勿使用
      2. \n
    \n
    \n
    \n
      \n
    1. 该接口仅支持图片上传,其他文件类型接口请自备
      2. \n
    \n
    \n","order":"0"},"codes":{"jsx":"import { Upload, Button, Icon } from '@alifd/next';\n\nReactDOM.render(
    \n \n \n \n
    \n \n Upload File\n \n \n
    \n \n
    \n Attachment\n
    \n
    \n     \n
    , mountNode);\n\nfunction beforeUpload(info) {\n console.log('beforeUpload : ', info);\n}\n\nfunction onChange(info) {\n console.log('onChange : ', info);\n}\n\nfunction onSuccess(info) {\n console.log('onSuccess : ', info);\n}\n"},"body":"\n\n````jsx\nimport { Upload, Button, Icon } from '@alifd/next';\n\nReactDOM.render(
    \n \n \n \n
    \n \n Upload File\n \n \n
    \n \n
    \n Attachment\n
    \n
    \n     \n
    , mountNode);\n\nfunction beforeUpload(info) {\n console.log('beforeUpload : ', info);\n}\n\nfunction onChange(info) {\n console.log('onChange : ', info);\n}\n\nfunction onSuccess(info) {\n console.log('onSuccess : ', info);\n}\n````","html":"
    import { Upload, Button, Icon } from '@alifd/next';\n\nReactDOM.render(<div>\n    <Upload\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        beforeUpload={beforeUpload}\n        onChange={onChange}\n        onSuccess={onSuccess}\n        multiple\n        defaultValue={[{\n            name: 'IMG.png',\n            state: 'done',\n            size: 1024,\n            downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            fileURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n        }]}\n    >\n        <Button type=\"primary\" style={{margin: '0 0 10px'}}>Upload File</Button>\n    </Upload>\n    <br/>\n    <Upload shape=\"card\" style={{display: 'inline-block'}}>\n        Upload File\n    </Upload>\n    <Upload style={{display: 'inline-block', marginLeft: '5px'}}>\n        <div className=\"next-upload-card\">\n            <Icon type=\"attachment\" size=\"large\"/>\n            <div className=\"next-upload-text\">\n                Attachment\n            </div>\n        </div>\n    </Upload>\n</div>, mountNode);\n\nfunction beforeUpload(info) {\n    console.log('beforeUpload : ', info);\n}\n\nfunction onChange(info) {\n    console.log('onChange : ', info);\n}\n\nfunction onSuccess(info) {\n    console.log('onSuccess : ', info);\n}
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/beforeupload.en-us.md b/compiled_docs/upload/demo/beforeupload.en-us.md new file mode 100644 index 0000000000..5b26d70618 --- /dev/null +++ b/compiled_docs/upload/demo/beforeupload.en-us.md @@ -0,0 +1 @@ +{"title":"BeforeUpload","meta":{"title":"BeforeUpload","description":"\n

    use beforeUpload to control upload

    \n

    Waring: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload API:

    \n
    \n
      \n
    1. only for test & develop, Never Use in production enviroments
      2. \n
    \n
    \n
    \n
      \n
    1. only support upload images
      2. \n
    \n
    \n","order":"8"},"codes":{"jsx":"import { Upload, Button } from '@alifd/next';\n\nReactDOM.render([\n \n \n ,\n \n \n ,\n false}\n onChange={onChange}\n key=\"3\"\n >\n \n ,\n new Promise(resl => setTimeout(() => resl(false)))}\n onChange={onChange}\n key=\"4\"\n >\n \n ,\n {}}\n onChange={onChange}\n key=\"5\"\n >\n \n \n], mountNode);\n\nconst requestOpts = {\n action: 'https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload',\n data: {osstoken: 1234},\n headers: {'X-Requested-With': 12345}\n};\n\nasync function ajax() {\n return await new Promise(resolve => {\n setTimeout(() => {\n resolve(requestOpts);\n }, 1e3);\n });\n}\n\nfunction beforeUpload(file, options) {\n console.log('beforeUpload callback : ', file, options);\n return requestOpts;\n}\n\nasync function asyncBeforeUpload(file, options) {\n console.log('beforeUpload callback : ', file, options);\n return await ajax();\n}\n\nfunction onChange(file) {\n console.log('onChange callback : ', file);\n}\n\n\n"},"body":"\n````jsx\nimport { Upload, Button } from '@alifd/next';\n\nReactDOM.render([\n \n \n ,\n \n \n ,\n false}\n onChange={onChange}\n key=\"3\"\n >\n \n ,\n new Promise(resl => setTimeout(() => resl(false)))}\n onChange={onChange}\n key=\"4\"\n >\n \n ,\n {}}\n onChange={onChange}\n key=\"5\"\n >\n \n \n], mountNode);\n\nconst requestOpts = {\n action: 'https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload',\n data: {osstoken: 1234},\n headers: {'X-Requested-With': 12345}\n};\n\nasync function ajax() {\n return await new Promise(resolve => {\n setTimeout(() => {\n resolve(requestOpts);\n }, 1e3);\n });\n}\n\nfunction beforeUpload(file, options) {\n console.log('beforeUpload callback : ', file, options);\n return requestOpts;\n}\n\nasync function asyncBeforeUpload(file, options) {\n console.log('beforeUpload callback : ', file, options);\n return await ajax();\n}\n\nfunction onChange(file) {\n console.log('onChange callback : ', file);\n}\n\n\n````","html":"
    import { Upload, Button } from '@alifd/next';\n\nReactDOM.render([\n    <Upload\n        listType=\"text\"\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\"\n        beforeUpload={beforeUpload}\n        onChange={onChange}\n        key=\"1\"\n    >\n        <Button type=\"primary\" style={{margin: '0 0 10px'}}>Upload File</Button>\n    </Upload>,\n    <Upload\n        listType=\"text\"\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\"\n        beforeUpload={asyncBeforeUpload}\n        onChange={onChange}\n        key=\"2\"\n    >\n        <Button type=\"secondary\" style={{margin: '0 0 10px'}}>Async Call before Upload File</Button>\n    </Upload>,\n    <Upload\n        listType=\"text\"\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\"\n        beforeUpload={() => false}\n        onChange={onChange}\n        key=\"3\"\n    >\n        <Button type=\"normal\" style={{margin: '0 0 10px'}}>Prevent Upload</Button>\n    </Upload>,\n    <Upload\n        listType=\"text\"\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\"\n        beforeUpload={() => new Promise(resl => setTimeout(() => resl(false)))}\n        onChange={onChange}\n        key=\"4\"\n    >\n        <Button type=\"primary\" style={{margin: '0 0 10px'}}>Async Prevent Upload</Button>\n    </Upload>,\n    <Upload\n        listType=\"text\"\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\"\n        beforeUpload={() => {}}\n        onChange={onChange}\n        key=\"5\"\n    >\n        <Button type=\"secondary\" style={{margin: '0 0 10px'}}>Do nothing</Button>\n    </Upload>\n], mountNode);\n\nconst requestOpts = {\n    action: 'https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload',\n    data: {osstoken: 1234},\n    headers: {'X-Requested-With': 12345}\n};\n\nasync function ajax() {\n    return await new Promise(resolve => {\n        setTimeout(() => {\n            resolve(requestOpts);\n        }, 1e3);\n    });\n}\n\nfunction beforeUpload(file, options) {\n    console.log('beforeUpload callback : ', file, options);\n    return requestOpts;\n}\n\nasync function asyncBeforeUpload(file, options) {\n    console.log('beforeUpload callback : ', file, options);\n    return await ajax();\n}\n\nfunction onChange(file) {\n    console.log('onChange callback : ', file);\n}\n\n
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/beforeupload.md b/compiled_docs/upload/demo/beforeupload.md new file mode 100644 index 0000000000..2bf112afae --- /dev/null +++ b/compiled_docs/upload/demo/beforeupload.md @@ -0,0 +1 @@ +{"title":"上传前预处理","meta":{"title":"上传前预处理","description":"\n

    使用beforeUpload去控制上传行为

    \n

    提醒: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload接口:

    \n
    \n
      \n
    1. 该接口仅作为测试使用,业务请勿使用
      2. \n
    2. 该接口仅支持图片上传,其他文件类型接口请自备
      3. \n
    \n
    \n","order":"8"},"codes":{"jsx":"import { Upload, Button } from '@alifd/next';\n\nReactDOM.render([\n \n \n ,\n \n \n ,\n false}\n onChange={onChange}\n key=\"3\"\n >\n \n ,\n new Promise(resl => setTimeout(() => resl(false)))}\n onChange={onChange}\n key=\"4\"\n >\n \n ,\n {}}\n onChange={onChange}\n key=\"5\"\n >\n \n \n], mountNode);\n\nconst requestOpts = {\n action: 'https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload',\n data: {osstoken: 1234},\n headers: {'X-Requested-With': 12345}\n};\n\nasync function ajax() {\n return await new Promise(resolve => {\n setTimeout(() => {\n resolve(requestOpts);\n }, 1e3);\n });\n}\n\nfunction beforeUpload(file, options) {\n console.log('beforeUpload callback : ', file, options);\n return requestOpts;\n}\n\nasync function asyncBeforeUpload(file, options) {\n console.log('beforeUpload callback : ', file, options);\n return await ajax();\n}\n\nfunction onChange(file) {\n console.log('onChange callback : ', file);\n}\n\n\n"},"body":"\n\n````jsx\nimport { Upload, Button } from '@alifd/next';\n\nReactDOM.render([\n \n \n ,\n \n \n ,\n false}\n onChange={onChange}\n key=\"3\"\n >\n \n ,\n new Promise(resl => setTimeout(() => resl(false)))}\n onChange={onChange}\n key=\"4\"\n >\n \n ,\n {}}\n onChange={onChange}\n key=\"5\"\n >\n \n \n], mountNode);\n\nconst requestOpts = {\n action: 'https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload',\n data: {osstoken: 1234},\n headers: {'X-Requested-With': 12345}\n};\n\nasync function ajax() {\n return await new Promise(resolve => {\n setTimeout(() => {\n resolve(requestOpts);\n }, 1e3);\n });\n}\n\nfunction beforeUpload(file, options) {\n console.log('beforeUpload callback : ', file, options);\n return requestOpts;\n}\n\nasync function asyncBeforeUpload(file, options) {\n console.log('beforeUpload callback : ', file, options);\n return await ajax();\n}\n\nfunction onChange(file) {\n console.log('onChange callback : ', file);\n}\n\n\n````","html":"
    import { Upload, Button } from '@alifd/next';\n\nReactDOM.render([\n    <Upload\n        listType=\"text\"\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\"\n        beforeUpload={beforeUpload}\n        onChange={onChange}\n        key=\"1\"\n    >\n        <Button type=\"primary\" style={{margin: '0 0 10px'}}>Upload File</Button>\n    </Upload>,\n    <Upload\n        listType=\"text\"\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\"\n        beforeUpload={asyncBeforeUpload}\n        onChange={onChange}\n        key=\"2\"\n    >\n        <Button type=\"secondary\" style={{margin: '0 0 10px'}}>Async Call before Upload File</Button>\n    </Upload>,\n    <Upload\n        listType=\"text\"\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\"\n        beforeUpload={() => false}\n        onChange={onChange}\n        key=\"3\"\n    >\n        <Button type=\"normal\" style={{margin: '0 0 10px'}}>Prevent Upload</Button>\n    </Upload>,\n    <Upload\n        listType=\"text\"\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\"\n        beforeUpload={() => new Promise(resl => setTimeout(() => resl(false)))}\n        onChange={onChange}\n        key=\"4\"\n    >\n        <Button type=\"primary\" style={{margin: '0 0 10px'}}>Async Prevent Upload</Button>\n    </Upload>,\n    <Upload\n        listType=\"text\"\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\"\n        beforeUpload={() => {}}\n        onChange={onChange}\n        key=\"5\"\n    >\n        <Button type=\"secondary\" style={{margin: '0 0 10px'}}>Do nothing</Button>\n    </Upload>\n], mountNode);\n\nconst requestOpts = {\n    action: 'https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload',\n    data: {osstoken: 1234},\n    headers: {'X-Requested-With': 12345}\n};\n\nasync function ajax() {\n    return await new Promise(resolve => {\n        setTimeout(() => {\n            resolve(requestOpts);\n        }, 1e3);\n    });\n}\n\nfunction beforeUpload(file, options) {\n    console.log('beforeUpload callback : ', file, options);\n    return requestOpts;\n}\n\nasync function asyncBeforeUpload(file, options) {\n    console.log('beforeUpload callback : ', file, options);\n    return await ajax();\n}\n\nfunction onChange(file) {\n    console.log('onChange callback : ', file);\n}\n\n
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/card.en-us.md b/compiled_docs/upload/demo/card.en-us.md new file mode 100644 index 0000000000..29380fe4ec --- /dev/null +++ b/compiled_docs/upload/demo/card.en-us.md @@ -0,0 +1 @@ +{"title":"Card","meta":{"title":"Card","description":"\n

    Waring: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload API:

    \n
    \n
      \n
    1. only for test & develop, Never Use in production enviroments
      2. \n
    \n
    \n
    \n
      \n
    1. only support upload images
      2. \n
    \n
    \n","order":"3"},"codes":{"jsx":"import { Upload } from '@alifd/next';\n\nReactDOM.render(\n , mountNode);\n\nfunction onPreview(info) {\n console.log('onPreview callback : ', info);\n}\n\nfunction onChange(info) {\n console.log('onChange callback : ', info);\n}\n\nfunction onSuccess(res, file) {\n console.log('onSuccess callback : ', res, file);\n}\n\nfunction onError(file) {\n console.log('onError callback : ', file);\n}\n"},"body":"\n````jsx\nimport { Upload } from '@alifd/next';\n\nReactDOM.render(\n , mountNode);\n\nfunction onPreview(info) {\n console.log('onPreview callback : ', info);\n}\n\nfunction onChange(info) {\n console.log('onChange callback : ', info);\n}\n\nfunction onSuccess(res, file) {\n console.log('onSuccess callback : ', res, file);\n}\n\nfunction onError(file) {\n console.log('onError callback : ', file);\n}\n````","html":"
    import { Upload } from '@alifd/next';\n\nReactDOM.render(\n    <Upload.Card\n        listType=\"card\"\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\"\n        onPreview={onPreview}\n        onChange={onChange}\n        onSuccess={onSuccess}\n        onError={onError}\n        defaultValue={[{\n            uid: '0',\n            name: 'IMG.png',\n            state: 'done',\n            url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n        }, {\n            uid: '1',\n            name: 'IMG.png',\n            percent: 50,\n            state: 'uploading',\n            url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n        }, {\n            uid: '2',\n            name: 'IMG.png',\n            state: 'error',\n            url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n        }]}\n    />, mountNode);\n\nfunction onPreview(info) {\n    console.log('onPreview callback : ', info);\n}\n\nfunction onChange(info) {\n    console.log('onChange callback : ', info);\n}\n\nfunction onSuccess(res, file) {\n    console.log('onSuccess callback : ', res, file);\n}\n\nfunction onError(file) {\n    console.log('onError callback : ', file);\n}
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/card.md b/compiled_docs/upload/demo/card.md new file mode 100644 index 0000000000..28592a72ed --- /dev/null +++ b/compiled_docs/upload/demo/card.md @@ -0,0 +1 @@ +{"title":"卡片","meta":{"title":"卡片","description":"\n

    提醒: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload接口:

    \n
    \n
      \n
    1. 该接口仅作为测试使用,业务请勿使用
      2. \n
    \n
    \n
    \n
      \n
    1. 该接口仅支持图片上传,其他文件类型接口请自备
      2. \n
    \n
    \n","order":"3"},"codes":{"jsx":"import { Upload } from '@alifd/next';\n\nReactDOM.render(\n , mountNode);\n\nfunction onPreview(info) {\n console.log('onPreview callback : ', info);\n}\n\nfunction onChange(info) {\n console.log('onChange callback : ', info);\n}\n\nfunction onSuccess(res, file) {\n console.log('onSuccess callback : ', res, file);\n}\n\nfunction onError(file) {\n console.log('onError callback : ', file);\n}\n"},"body":"\n\n````jsx\nimport { Upload } from '@alifd/next';\n\nReactDOM.render(\n , mountNode);\n\nfunction onPreview(info) {\n console.log('onPreview callback : ', info);\n}\n\nfunction onChange(info) {\n console.log('onChange callback : ', info);\n}\n\nfunction onSuccess(res, file) {\n console.log('onSuccess callback : ', res, file);\n}\n\nfunction onError(file) {\n console.log('onError callback : ', file);\n}\n````","html":"
    import { Upload } from '@alifd/next';\n\nReactDOM.render(\n    <Upload.Card\n        listType=\"card\"\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\"\n        onPreview={onPreview}\n        onChange={onChange}\n        onSuccess={onSuccess}\n        onError={onError}\n        defaultValue={[{\n            uid: '0',\n            name: 'IMG.png',\n            state: 'done',\n            url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n        }, {\n            uid: '1',\n            name: 'IMG.png',\n            percent: 50,\n            state: 'uploading',\n            url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n        }, {\n            uid: '2',\n            name: 'IMG.png',\n            state: 'error',\n            url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n        }]}\n    />, mountNode);\n\nfunction onPreview(info) {\n    console.log('onPreview callback : ', info);\n}\n\nfunction onChange(info) {\n    console.log('onChange callback : ', info);\n}\n\nfunction onSuccess(res, file) {\n    console.log('onSuccess callback : ', res, file);\n}\n\nfunction onError(file) {\n    console.log('onError callback : ', file);\n}
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/crop.en-us.md b/compiled_docs/upload/demo/crop.en-us.md new file mode 100644 index 0000000000..3d91ee5614 --- /dev/null +++ b/compiled_docs/upload/demo/crop.en-us.md @@ -0,0 +1 @@ +{"title":"Crop","meta":{"title":"Crop","description":"\n

    Waring: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload API:

    \n
    \n
      \n
    1. only for test & develop, Never Use in production enviroments
      2. \n
    \n
    \n
    \n
      \n
    1. only support upload images
      2. \n
    \n
    \n","order":"10"},"codes":{"jsx":"import { Upload, Button, Dialog } from '@alifd/next';\nimport Cropper from 'react-cropper';\n\n\nfunction convertBase64UrlToFile(urlData) {\n\n const bytes = window.atob(urlData.split(',')[1]);\n\n const ab = new ArrayBuffer(bytes.length);\n const ia = new Uint8Array(ab);\n for (let i = 0; i < bytes.length; i++) {\n ia[i] = bytes.charCodeAt(i);\n }\n\n const blob = new Blob([ab], {type: 'image/png'});\n\n return new File([blob], 'test.png', {type: 'image/png'});\n}\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.uploader = new Upload.Uploader({\n action: 'https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload',\n onSuccess: this.onSuccess,\n name: 'file'\n });\n }\n\n state = {\n src: null,\n visible: false,\n img: null\n };\n\n onSuccess = (value) => {\n console.log(value);\n this.setState({\n img: value.url\n });\n };\n\n onSelect = (files) => {\n const reader = new FileReader();\n reader.onload = () => {\n this.setState({\n src: reader.result,\n visible: true\n });\n };\n reader.readAsDataURL(files[0]);\n };\n\n onCancel = () => {\n this.setState({\n visible: false\n });\n };\n\n onOk = () => {\n\n const data = this.cropperRef.getCroppedCanvas().toDataURL();\n\n const blob = convertBase64UrlToFile(data);\n const file = new File([blob], 'test.png', {type: 'image/png'});\n\n // start upload\n this.uploader.startUpload(file);\n\n this.setState({\n visible: false\n });\n };\n\n saveCropperrRef = (ref) => {\n this.cropperRef = ref;\n };\n\n render() {\n return (\n
    \n \n \n \n \n \n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Upload, Button, Dialog } from '@alifd/next';\nimport Cropper from 'react-cropper';\n\n\nfunction convertBase64UrlToFile(urlData) {\n\n const bytes = window.atob(urlData.split(',')[1]);\n\n const ab = new ArrayBuffer(bytes.length);\n const ia = new Uint8Array(ab);\n for (let i = 0; i < bytes.length; i++) {\n ia[i] = bytes.charCodeAt(i);\n }\n\n const blob = new Blob([ab], {type: 'image/png'});\n\n return new File([blob], 'test.png', {type: 'image/png'});\n}\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.uploader = new Upload.Uploader({\n action: 'https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload',\n onSuccess: this.onSuccess,\n name: 'file'\n });\n }\n\n state = {\n src: null,\n visible: false,\n img: null\n };\n\n onSuccess = (value) => {\n console.log(value);\n this.setState({\n img: value.url\n });\n };\n\n onSelect = (files) => {\n const reader = new FileReader();\n reader.onload = () => {\n this.setState({\n src: reader.result,\n visible: true\n });\n };\n reader.readAsDataURL(files[0]);\n };\n\n onCancel = () => {\n this.setState({\n visible: false\n });\n };\n\n onOk = () => {\n\n const data = this.cropperRef.getCroppedCanvas().toDataURL();\n\n const blob = convertBase64UrlToFile(data);\n const file = new File([blob], 'test.png', {type: 'image/png'});\n\n // start upload\n this.uploader.startUpload(file);\n\n this.setState({\n visible: false\n });\n };\n\n saveCropperrRef = (ref) => {\n this.cropperRef = ref;\n };\n\n render() {\n return (\n
    \n \n \n \n \n \n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Upload, Button, Dialog } from '@alifd/next';\nimport Cropper from 'react-cropper';\n\n\nfunction convertBase64UrlToFile(urlData) {\n\n    const bytes = window.atob(urlData.split(',')[1]);\n\n    const ab = new ArrayBuffer(bytes.length);\n    const ia = new Uint8Array(ab);\n    for (let i = 0; i < bytes.length; i++) {\n        ia[i] = bytes.charCodeAt(i);\n    }\n\n    const blob = new Blob([ab], {type: 'image/png'});\n\n    return new File([blob], 'test.png', {type: 'image/png'});\n}\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.uploader = new Upload.Uploader({\n            action: 'https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload',\n            onSuccess: this.onSuccess,\n            name: 'file'\n        });\n    }\n\n    state = {\n        src: null,\n        visible: false,\n        img: null\n    };\n\n    onSuccess = (value) => {\n        console.log(value);\n        this.setState({\n            img: value.url\n        });\n    };\n\n    onSelect = (files) => {\n        const reader = new FileReader();\n        reader.onload = () => {\n            this.setState({\n                src: reader.result,\n                visible: true\n            });\n        };\n        reader.readAsDataURL(files[0]);\n    };\n\n    onCancel = () => {\n        this.setState({\n            visible: false\n        });\n    };\n\n    onOk = () => {\n\n        const data = this.cropperRef.getCroppedCanvas().toDataURL();\n\n        const blob = convertBase64UrlToFile(data);\n        const file = new File([blob], 'test.png', {type: 'image/png'});\n\n        // start upload\n        this.uploader.startUpload(file);\n\n        this.setState({\n            visible: false\n        });\n    };\n\n    saveCropperrRef = (ref) => {\n        this.cropperRef = ref;\n    };\n\n    render() {\n        return (\n            <div>\n                <Upload.Selecter onSelect={this.onSelect}\n                >\n                    <Button>Select file</Button>\n                </Upload.Selecter>\n                <Dialog\n                    visible={this.state.visible}\n                    onCancel={this.onCancel}\n                    onOk={this.onOk}\n                    onClose={this.onCancel}\n                    isFullScreen>\n                    <Cropper\n                        ref={this.saveCropperrRef}\n                        src={this.state.src}\n                        style={{height: 300, width: 400}}\n                    />\n                </Dialog>\n                <div><img src={this.state.img} style={{width: 100}}/></div>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/crop.md b/compiled_docs/upload/demo/crop.md new file mode 100644 index 0000000000..f70a7446e9 --- /dev/null +++ b/compiled_docs/upload/demo/crop.md @@ -0,0 +1 @@ +{"title":"裁剪上传","meta":{"title":"裁剪上传","description":"\n

    提醒: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload接口:

    \n
    \n
      \n
    1. 该接口仅作为测试使用,业务请勿使用
      2. \n
    \n
    \n
    \n
      \n
    1. 该接口仅支持图片上传,其他文件类型接口请自备
      2. \n
    \n
    \n","order":"10"},"codes":{"jsx":"import { Upload, Button, Dialog } from '@alifd/next';\nimport Cropper from 'react-cropper';\n\n\nfunction convertBase64UrlToFile(urlData) {\n\n const bytes = window.atob(urlData.split(',')[1]);\n\n const ab = new ArrayBuffer(bytes.length);\n const ia = new Uint8Array(ab);\n for (let i = 0; i < bytes.length; i++) {\n ia[i] = bytes.charCodeAt(i);\n }\n\n const blob = new Blob([ab], {type: 'image/png'});\n\n return new File([blob], 'test.png', {type: 'image/png'});\n}\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.uploader = new Upload.Uploader({\n action: 'https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload',\n onSuccess: this.onSuccess,\n name: 'file'\n });\n }\n\n state = {\n src: null,\n visible: false,\n img: null\n };\n\n onSuccess = (value) => {\n console.log(value);\n this.setState({\n img: value.url\n });\n };\n\n onSelect = (files) => {\n const reader = new FileReader();\n reader.onload = () => {\n this.setState({\n src: reader.result,\n visible: true\n });\n };\n reader.readAsDataURL(files[0]);\n };\n\n onCancel = () => {\n this.setState({\n visible: false\n });\n };\n\n onOk = () => {\n\n const data = this.cropperRef.getCroppedCanvas().toDataURL();\n\n const blob = convertBase64UrlToFile(data);\n const file = new File([blob], 'test.png', {type: 'image/png'});\n\n // start upload\n this.uploader.startUpload(file);\n\n this.setState({\n visible: false\n });\n };\n\n saveCropperrRef = (ref) => {\n this.cropperRef = ref;\n };\n\n render() {\n return (\n
    \n \n \n \n \n \n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Upload, Button, Dialog } from '@alifd/next';\nimport Cropper from 'react-cropper';\n\n\nfunction convertBase64UrlToFile(urlData) {\n\n const bytes = window.atob(urlData.split(',')[1]);\n\n const ab = new ArrayBuffer(bytes.length);\n const ia = new Uint8Array(ab);\n for (let i = 0; i < bytes.length; i++) {\n ia[i] = bytes.charCodeAt(i);\n }\n\n const blob = new Blob([ab], {type: 'image/png'});\n\n return new File([blob], 'test.png', {type: 'image/png'});\n}\n\nclass App extends React.Component {\n constructor(props) {\n super(props);\n this.uploader = new Upload.Uploader({\n action: 'https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload',\n onSuccess: this.onSuccess,\n name: 'file'\n });\n }\n\n state = {\n src: null,\n visible: false,\n img: null\n };\n\n onSuccess = (value) => {\n console.log(value);\n this.setState({\n img: value.url\n });\n };\n\n onSelect = (files) => {\n const reader = new FileReader();\n reader.onload = () => {\n this.setState({\n src: reader.result,\n visible: true\n });\n };\n reader.readAsDataURL(files[0]);\n };\n\n onCancel = () => {\n this.setState({\n visible: false\n });\n };\n\n onOk = () => {\n\n const data = this.cropperRef.getCroppedCanvas().toDataURL();\n\n const blob = convertBase64UrlToFile(data);\n const file = new File([blob], 'test.png', {type: 'image/png'});\n\n // start upload\n this.uploader.startUpload(file);\n\n this.setState({\n visible: false\n });\n };\n\n saveCropperrRef = (ref) => {\n this.cropperRef = ref;\n };\n\n render() {\n return (\n
    \n \n \n \n \n \n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Upload, Button, Dialog } from '@alifd/next';\nimport Cropper from 'react-cropper';\n\n\nfunction convertBase64UrlToFile(urlData) {\n\n    const bytes = window.atob(urlData.split(',')[1]);\n\n    const ab = new ArrayBuffer(bytes.length);\n    const ia = new Uint8Array(ab);\n    for (let i = 0; i < bytes.length; i++) {\n        ia[i] = bytes.charCodeAt(i);\n    }\n\n    const blob = new Blob([ab], {type: 'image/png'});\n\n    return new File([blob], 'test.png', {type: 'image/png'});\n}\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.uploader = new Upload.Uploader({\n            action: 'https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload',\n            onSuccess: this.onSuccess,\n            name: 'file'\n        });\n    }\n\n    state = {\n        src: null,\n        visible: false,\n        img: null\n    };\n\n    onSuccess = (value) => {\n        console.log(value);\n        this.setState({\n            img: value.url\n        });\n    };\n\n    onSelect = (files) => {\n        const reader = new FileReader();\n        reader.onload = () => {\n            this.setState({\n                src: reader.result,\n                visible: true\n            });\n        };\n        reader.readAsDataURL(files[0]);\n    };\n\n    onCancel = () => {\n        this.setState({\n            visible: false\n        });\n    };\n\n    onOk = () => {\n\n        const data = this.cropperRef.getCroppedCanvas().toDataURL();\n\n        const blob = convertBase64UrlToFile(data);\n        const file = new File([blob], 'test.png', {type: 'image/png'});\n\n        // start upload\n        this.uploader.startUpload(file);\n\n        this.setState({\n            visible: false\n        });\n    };\n\n    saveCropperrRef = (ref) => {\n        this.cropperRef = ref;\n    };\n\n    render() {\n        return (\n            <div>\n                <Upload.Selecter onSelect={this.onSelect}\n                >\n                    <Button>Select file</Button>\n                </Upload.Selecter>\n                <Dialog\n                    visible={this.state.visible}\n                    onCancel={this.onCancel}\n                    onOk={this.onOk}\n                    onClose={this.onCancel}\n                    isFullScreen>\n                    <Cropper\n                        ref={this.saveCropperrRef}\n                        src={this.state.src}\n                        style={{height: 300, width: 400}}\n                    />\n                </Dialog>\n                <div><img src={this.state.img} style={{width: 100}}/></div>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/data.en-us.md b/compiled_docs/upload/demo/data.en-us.md new file mode 100644 index 0000000000..a76e0f4d5a --- /dev/null +++ b/compiled_docs/upload/demo/data.en-us.md @@ -0,0 +1 @@ +{"title":"Custom Upload Params","meta":{"title":"Custom Upload Params","description":"\n

    using data param to put custom params in.

    \n

    Waring: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload API:

    \n
    \n
      \n
    1. only for test & develop, Never Use in production enviroments
      2. \n
    \n
    \n
    \n
      \n
    1. only support upload images
      2. \n
    \n
    \n","order":"4"},"codes":{"jsx":"import { Upload, Button } from '@alifd/next';\n\nReactDOM.render((\n \n \n \n), mountNode);\n\nfunction beforeUpload(info) {\n console.log('beforeUpload callback : ', info);\n}\n\nfunction onChange(info) {\n console.log('onChange callback : ', info);\n}\n"},"body":"\n````jsx\nimport { Upload, Button } from '@alifd/next';\n\nReactDOM.render((\n \n \n \n), mountNode);\n\nfunction beforeUpload(info) {\n console.log('beforeUpload callback : ', info);\n}\n\nfunction onChange(info) {\n console.log('onChange callback : ', info);\n}\n````","html":"
    import { Upload, Button } from '@alifd/next';\n\nReactDOM.render((\n    <Upload\n        listType=\"text\"\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\"\n        data={{token: 'abcd'}}\n        beforeUpload={beforeUpload}\n        onChange={onChange}\n        defaultValue={[{\n            name: 'IMG.png',\n            state: 'done',\n            size: 1024,\n            downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n        }]}\n    >\n        <Button type=\"primary\" style={{margin: '0 0 10px'}}>Upload File</Button>\n    </Upload>\n), mountNode);\n\nfunction beforeUpload(info) {\n    console.log('beforeUpload callback : ', info);\n}\n\nfunction onChange(info) {\n    console.log('onChange callback : ', info);\n}
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/data.md b/compiled_docs/upload/demo/data.md new file mode 100644 index 0000000000..3b038c2d1a --- /dev/null +++ b/compiled_docs/upload/demo/data.md @@ -0,0 +1 @@ +{"title":"自定义上传参数","meta":{"title":"自定义上传参数","description":"\n

    通过 data 控制自定义参数

    \n

    提醒: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload接口:

    \n
    \n
      \n
    1. 该接口仅作为测试使用,业务请勿使用
      2. \n
    \n
    \n
    \n
      \n
    1. 该接口仅支持图片上传,其他文件类型接口请自备
      2. \n
    \n
    \n","order":"4"},"codes":{"jsx":"import { Upload, Button } from '@alifd/next';\n\nReactDOM.render((\n \n \n \n), mountNode);\n\nfunction beforeUpload(info) {\n console.log('beforeUpload callback : ', info);\n}\n\nfunction onChange(info) {\n console.log('onChange callback : ', info);\n}\n"},"body":"\n\n````jsx\nimport { Upload, Button } from '@alifd/next';\n\nReactDOM.render((\n \n \n \n), mountNode);\n\nfunction beforeUpload(info) {\n console.log('beforeUpload callback : ', info);\n}\n\nfunction onChange(info) {\n console.log('onChange callback : ', info);\n}\n````","html":"
    import { Upload, Button } from '@alifd/next';\n\nReactDOM.render((\n    <Upload\n        listType=\"text\"\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\"\n        data={{token: 'abcd'}}\n        beforeUpload={beforeUpload}\n        onChange={onChange}\n        defaultValue={[{\n            name: 'IMG.png',\n            state: 'done',\n            size: 1024,\n            downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n        }]}\n    >\n        <Button type=\"primary\" style={{margin: '0 0 10px'}}>Upload File</Button>\n    </Upload>\n), mountNode);\n\nfunction beforeUpload(info) {\n    console.log('beforeUpload callback : ', info);\n}\n\nfunction onChange(info) {\n    console.log('onChange callback : ', info);\n}
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/dragger.en-us.md b/compiled_docs/upload/demo/dragger.en-us.md new file mode 100644 index 0000000000..34cebf7e11 --- /dev/null +++ b/compiled_docs/upload/demo/dragger.en-us.md @@ -0,0 +1 @@ +{"title":"Drag to Upload","meta":{"title":"Drag to Upload","description":"\n

    Waring: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload API:

    \n
    \n
      \n
    1. only for test & develop, Never Use in production enviroments
      2. \n
    \n
    \n
    \n
      \n
    1. only support upload images
      2. \n
    \n
    \n

    Waring: Drag To Upload can not meet accessbility requirements

    \n","order":"4"},"codes":{"jsx":"import { Upload } from '@alifd/next';\n\nReactDOM.render((\n \n), mountNode);\n\nfunction onDragOver() {\n console.log('dragover callback');\n}\n\nfunction onDrop(fileList) {\n console.log('drop callback : ', fileList);\n}\n"},"body":"\n````jsx\nimport { Upload } from '@alifd/next';\n\nReactDOM.render((\n \n), mountNode);\n\nfunction onDragOver() {\n console.log('dragover callback');\n}\n\nfunction onDrop(fileList) {\n console.log('drop callback : ', fileList);\n}\n````","html":"
    import { Upload } from '@alifd/next';\n\nReactDOM.render((\n    <Upload.Dragger\n        listType=\"image\"\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\"\n        onDragOver={onDragOver}\n        onDrop={onDrop}\n    />\n), mountNode);\n\nfunction onDragOver() {\n    console.log('dragover callback');\n}\n\nfunction onDrop(fileList) {\n    console.log('drop callback : ', fileList);\n}
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/dragger.md b/compiled_docs/upload/demo/dragger.md new file mode 100644 index 0000000000..57193f3bd5 --- /dev/null +++ b/compiled_docs/upload/demo/dragger.md @@ -0,0 +1 @@ +{"title":"拖拽上传","meta":{"title":"拖拽上传","description":"\n

    提醒: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload接口:

    \n
    \n
      \n
    1. 该接口仅作为测试使用,业务请勿使用
      2. \n
    \n
    \n
    \n
      \n
    1. 该接口仅支持图片上传,其他文件类型接口请自备
      2. \n
    \n
    \n

    提醒: 拖拽上传不适合视障人士使用,有无障碍需求的项目慎用

    \n","order":"4"},"codes":{"jsx":"import { Upload } from '@alifd/next';\n\nReactDOM.render((\n \n), mountNode);\n\nfunction onDragOver() {\n console.log('dragover callback');\n}\n\nfunction onDrop(fileList) {\n console.log('drop callback : ', fileList);\n}\n"},"body":"\n\n````jsx\nimport { Upload } from '@alifd/next';\n\nReactDOM.render((\n \n), mountNode);\n\nfunction onDragOver() {\n console.log('dragover callback');\n}\n\nfunction onDrop(fileList) {\n console.log('drop callback : ', fileList);\n}\n````","html":"
    import { Upload } from '@alifd/next';\n\nReactDOM.render((\n    <Upload.Dragger\n        listType=\"image\"\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\"\n        onDragOver={onDragOver}\n        onDrop={onDrop}\n    />\n), mountNode);\n\nfunction onDragOver() {\n    console.log('dragover callback');\n}\n\nfunction onDrop(fileList) {\n    console.log('drop callback : ', fileList);\n}
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/error.en-us.md b/compiled_docs/upload/demo/error.en-us.md new file mode 100644 index 0000000000..63618c9059 --- /dev/null +++ b/compiled_docs/upload/demo/error.en-us.md @@ -0,0 +1 @@ +{"title":"Fail Status","meta":{"title":"Fail Status","description":"\n","order":"4"},"codes":{"jsx":"import { Upload, Button } from '@alifd/next';\n\n\nconst value = [\n {\n uid: '2',\n name: 'IMG.png',\n state: 'error',\n url:\n 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n downloadURL:\n 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n imgURL:\n 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n }\n];\n\nReactDOM.render(\n
    \n \n\n
    \n \n\n
    \n \n
    ,\n mountNode\n);\n"},"body":"\n````jsx\nimport { Upload, Button } from '@alifd/next';\n\n\nconst value = [\n {\n uid: '2',\n name: 'IMG.png',\n state: 'error',\n url:\n 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n downloadURL:\n 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n imgURL:\n 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n }\n];\n\nReactDOM.render(\n
    \n \n\n
    \n \n\n
    \n \n
    ,\n mountNode\n);\n````","html":"
    import { Upload, Button } from '@alifd/next';\n\n\nconst value = [\n    {\n        uid: '2',\n        name: 'IMG.png',\n        state: 'error',\n        url:\n            'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n        downloadURL:\n            'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n        imgURL:\n            'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n    }\n];\n\nReactDOM.render(\n    <div>\n        <Upload value={value} listType=\"text\"> <Button>Upload</Button></Upload>\n\n        <br />\n        <Upload value={value} listType=\"card\"> <Button>Upload</Button></Upload>\n\n        <br />\n        <Upload value={value} listType=\"image\"> <Button>Upload</Button></Upload>\n    </div>,\n    mountNode\n);
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/error.md b/compiled_docs/upload/demo/error.md new file mode 100644 index 0000000000..c18063a054 --- /dev/null +++ b/compiled_docs/upload/demo/error.md @@ -0,0 +1 @@ +{"title":"上传失败","meta":{"title":"上传失败","description":"\n","order":"12"},"codes":{"jsx":"import { Upload, Button } from '@alifd/next';\n\n\nconst value = [\n {\n uid: '2',\n name: 'IMG.png',\n state: 'error',\n url:\n 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n downloadURL:\n 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n imgURL:\n 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n }\n];\n\nReactDOM.render(\n
    \n \n\n
    \n \n\n
    \n \n
    ,\n mountNode\n);\n"},"body":"\n\n````jsx\nimport { Upload, Button } from '@alifd/next';\n\n\nconst value = [\n {\n uid: '2',\n name: 'IMG.png',\n state: 'error',\n url:\n 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n downloadURL:\n 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n imgURL:\n 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n }\n];\n\nReactDOM.render(\n
    \n \n\n
    \n \n\n
    \n \n
    ,\n mountNode\n);\n````","html":"
    import { Upload, Button } from '@alifd/next';\n\n\nconst value = [\n    {\n        uid: '2',\n        name: 'IMG.png',\n        state: 'error',\n        url:\n            'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n        downloadURL:\n            'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n        imgURL:\n            'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n    }\n];\n\nReactDOM.render(\n    <div>\n        <Upload value={value} listType=\"text\"> <Button>Upload</Button></Upload>\n\n        <br />\n        <Upload value={value} listType=\"card\"> <Button>Upload</Button></Upload>\n\n        <br />\n        <Upload value={value} listType=\"image\"> <Button>Upload</Button></Upload>\n    </div>,\n    mountNode\n);
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/extra.en-us.md b/compiled_docs/upload/demo/extra.en-us.md new file mode 100644 index 0000000000..bd11d303a1 --- /dev/null +++ b/compiled_docs/upload/demo/extra.en-us.md @@ -0,0 +1 @@ +{"title":"Extra","meta":{"title":"Extra","description":"\n

    Waring: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload API:

    \n
    \n
      \n
    1. only for test & develop, Never Use in production enviroments
      2. \n
    \n
    \n
    \n
      \n
    1. only support upload images
      2. \n
    \n
    \n","order":"8"},"codes":{"jsx":"import { Upload, Button } from '@alifd/next';\n\nconst extraRender = (file) => {\n console.log(file);\n return ();\n};\n\nReactDOM.render((\n \n \n \n), mountNode);\n\nfunction beforeUpload(info) {\n console.log('beforeUpload callback : ', info);\n}\n\nfunction onChange(info) {\n console.log('onChange callback : ', info);\n}\n"},"body":"\n````jsx\nimport { Upload, Button } from '@alifd/next';\n\nconst extraRender = (file) => {\n console.log(file);\n return ();\n};\n\nReactDOM.render((\n \n \n \n), mountNode);\n\nfunction beforeUpload(info) {\n console.log('beforeUpload callback : ', info);\n}\n\nfunction onChange(info) {\n console.log('onChange callback : ', info);\n}\n````","html":"
    import { Upload, Button } from '@alifd/next';\n\nconst extraRender = (file) => {\n    console.log(file);\n    return (<Button style={{marginLeft: 4}}>extra</Button>);\n};\n\nReactDOM.render((\n    <Upload\n        listType=\"image\"\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\"\n        beforeUpload={beforeUpload}\n        onChange={onChange}\n        extraRender={extraRender}\n        defaultValue={[{\n            name: 'IMG.png',\n            state: 'done',\n            size: 100,\n            url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n        }]}\n    >\n        <Button type=\"primary\" style={{margin: '0 0 10px'}}>Upload File</Button>\n    </Upload>\n), mountNode);\n\nfunction beforeUpload(info) {\n    console.log('beforeUpload callback : ', info);\n}\n\nfunction onChange(info) {\n    console.log('onChange callback : ', info);\n}
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/extra.md b/compiled_docs/upload/demo/extra.md new file mode 100644 index 0000000000..a78f658221 --- /dev/null +++ b/compiled_docs/upload/demo/extra.md @@ -0,0 +1 @@ +{"title":"额外内容","meta":{"title":"额外内容","description":"\n

    提醒: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload接口:

    \n
    \n
      \n
    1. 该接口仅作为测试使用,业务请勿使用
      2. \n
    \n
    \n
    \n
      \n
    1. 该接口仅支持图片上传,其他文件类型接口请自备
      2. \n
    \n
    \n","order":"8"},"codes":{"jsx":"import { Upload, Button } from '@alifd/next';\n\nconst extraRender = (file) => {\n console.log(file);\n return ();\n};\n\nReactDOM.render((\n \n \n \n), mountNode);\n\nfunction beforeUpload(info) {\n console.log('beforeUpload callback : ', info);\n}\n\nfunction onChange(info) {\n console.log('onChange callback : ', info);\n}\n"},"body":"\n\n````jsx\nimport { Upload, Button } from '@alifd/next';\n\nconst extraRender = (file) => {\n console.log(file);\n return ();\n};\n\nReactDOM.render((\n \n \n \n), mountNode);\n\nfunction beforeUpload(info) {\n console.log('beforeUpload callback : ', info);\n}\n\nfunction onChange(info) {\n console.log('onChange callback : ', info);\n}\n````","html":"
    import { Upload, Button } from '@alifd/next';\n\nconst extraRender = (file) => {\n    console.log(file);\n    return (<Button style={{marginLeft: 4}}>extra</Button>);\n};\n\nReactDOM.render((\n    <Upload\n        listType=\"image\"\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\"\n        beforeUpload={beforeUpload}\n        onChange={onChange}\n        extraRender={extraRender}\n        defaultValue={[{\n            name: 'IMG.png',\n            state: 'done',\n            size: 100,\n            url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n        }]}\n    >\n        <Button type=\"primary\" style={{margin: '0 0 10px'}}>Upload File</Button>\n    </Upload>\n), mountNode);\n\nfunction beforeUpload(info) {\n    console.log('beforeUpload callback : ', info);\n}\n\nfunction onChange(info) {\n    console.log('onChange callback : ', info);\n}
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/image.en-us.md b/compiled_docs/upload/demo/image.en-us.md new file mode 100644 index 0000000000..fac1b035a7 --- /dev/null +++ b/compiled_docs/upload/demo/image.en-us.md @@ -0,0 +1 @@ +{"title":"Image List","meta":{"title":"Image List","description":"\n

    Waring: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload API:

    \n
    \n
      \n
    1. only for test & develop, Never Use in production enviroments
      2. \n
    \n
    \n
    \n
      \n
    1. only support upload images
      2. \n
    \n
    \n","order":"2"},"codes":{"jsx":"import { Upload, Button } from '@alifd/next';\n\nReactDOM.render(\n \n \n , mountNode);\n\nfunction beforeUpload(info) {\n console.log('beforeUpload callback : ', info);\n}\n\nfunction onChange(info) {\n console.log('onChange callback : ', info);\n}\n"},"body":"\n````jsx\nimport { Upload, Button } from '@alifd/next';\n\nReactDOM.render(\n \n \n , mountNode);\n\nfunction beforeUpload(info) {\n console.log('beforeUpload callback : ', info);\n}\n\nfunction onChange(info) {\n console.log('onChange callback : ', info);\n}\n````","html":"
    import { Upload, Button } from '@alifd/next';\n\nReactDOM.render(\n    <Upload\n        listType=\"image\"\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\"\n        beforeUpload={beforeUpload}\n        onChange={onChange}\n        defaultValue={[{\n            uid: '0',\n            name: 'IMG.png',\n            state: 'done',\n            url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            size: 2000\n        }, {\n            uid: '1',\n            name: 'IMG.png',\n            percent: 50,\n            state: 'uploading',\n            url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n        }, {\n            uid: '2',\n            name: 'IMG.png',\n            state: 'error',\n            url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n        }, {\n            uid: '3',\n            name: 'IMG.png',\n            state: 'error',\n            url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            errorMsg: 'Fail to Upload something'\n        }]}\n    >\n        <Button type=\"primary\" style={{margin: '0 0 10px'}}>Upload File</Button>\n    </Upload>, mountNode);\n\nfunction beforeUpload(info) {\n    console.log('beforeUpload callback : ', info);\n}\n\nfunction onChange(info) {\n    console.log('onChange callback : ', info);\n}
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/image.md b/compiled_docs/upload/demo/image.md new file mode 100644 index 0000000000..5d3b598524 --- /dev/null +++ b/compiled_docs/upload/demo/image.md @@ -0,0 +1 @@ +{"title":"图片列表","meta":{"title":"图片列表","description":"\n

    提醒: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload接口:

    \n
    \n
      \n
    1. 该接口仅作为测试使用,业务请勿使用
      2. \n
    \n
    \n
    \n
      \n
    1. 该接口仅支持图片上传,其他文件类型接口请自备
      2. \n
    \n
    \n","order":"2"},"codes":{"jsx":"import { Upload, Button } from '@alifd/next';\n\nReactDOM.render(\n \n \n , mountNode);\n\nfunction beforeUpload(info) {\n console.log('beforeUpload callback : ', info);\n}\n\nfunction onChange(info) {\n console.log('onChange callback : ', info);\n}\n"},"body":"\n\n````jsx\nimport { Upload, Button } from '@alifd/next';\n\nReactDOM.render(\n \n \n , mountNode);\n\nfunction beforeUpload(info) {\n console.log('beforeUpload callback : ', info);\n}\n\nfunction onChange(info) {\n console.log('onChange callback : ', info);\n}\n````","html":"
    import { Upload, Button } from '@alifd/next';\n\nReactDOM.render(\n    <Upload\n        listType=\"image\"\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        accept=\"image/png, image/jpg, image/jpeg, image/gif, image/bmp\"\n        beforeUpload={beforeUpload}\n        onChange={onChange}\n        defaultValue={[{\n            uid: '0',\n            name: 'IMG.png',\n            state: 'done',\n            url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            size: 2000\n        }, {\n            uid: '1',\n            name: 'IMG.png',\n            percent: 50,\n            state: 'uploading',\n            url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n        }, {\n            uid: '2',\n            name: 'IMG.png',\n            state: 'error',\n            url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n        }, {\n            uid: '3',\n            name: 'IMG.png',\n            state: 'error',\n            url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            errorMsg: 'Fail to Upload something'\n        }]}\n    >\n        <Button type=\"primary\" style={{margin: '0 0 10px'}}>Upload File</Button>\n    </Upload>, mountNode);\n\nfunction beforeUpload(info) {\n    console.log('beforeUpload callback : ', info);\n}\n\nfunction onChange(info) {\n    console.log('onChange callback : ', info);\n}
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/limit.en-us.md b/compiled_docs/upload/demo/limit.en-us.md new file mode 100644 index 0000000000..db412eb15f --- /dev/null +++ b/compiled_docs/upload/demo/limit.en-us.md @@ -0,0 +1 @@ +{"title":"limit file numbers","meta":{"title":"limit file numbers","description":"\n

    Waring: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload API:

    \n
    \n
      \n
    1. only for test & develop, Never Use in production enviroments
      2. \n
    \n
    \n
    \n
      \n
    1. only support upload images
      2. \n
    \n
    \n","order":"6"},"codes":{"jsx":"import { Upload, Button } from '@alifd/next';\n\nconst onError = (file, fileList) => {\n console.log('Exceed limit', file, fileList);\n};\n\nReactDOM.render((\n
    \n \n \n \n
    \n), mountNode);\n\n"},"body":"\n````jsx\nimport { Upload, Button } from '@alifd/next';\n\nconst onError = (file, fileList) => {\n console.log('Exceed limit', file, fileList);\n};\n\nReactDOM.render((\n
    \n \n \n \n
    \n), mountNode);\n\n````","html":"
    import { Upload, Button } from '@alifd/next';\n\nconst onError = (file, fileList) => {\n    console.log('Exceed limit', file, fileList);\n};\n\nReactDOM.render((\n    <div>\n        <Upload\n            action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n            limit={2}\n            multiple\n            listType=\"text\"\n            onError={onError}\n            defaultValue={[{\n                name: 'IMG.png',\n                state: 'done',\n                size: 1024,\n                downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n                fileURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n                imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n            }]}>\n            <Button type=\"primary\" style={{margin: '0 0 10px'}}>Upload File</Button>\n        </Upload>\n    </div>\n), mountNode);\n
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/limit.md b/compiled_docs/upload/demo/limit.md new file mode 100644 index 0000000000..62f0ceccb2 --- /dev/null +++ b/compiled_docs/upload/demo/limit.md @@ -0,0 +1 @@ +{"title":"个数限制","meta":{"title":"个数限制","description":"\n

    提醒: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload接口:

    \n
    \n
      \n
    1. 该接口仅作为测试使用,业务请勿使用
      2. \n
    \n
    \n
    \n
      \n
    1. 该接口仅支持图片上传,其他文件类型接口请自备
      2. \n
    \n
    \n","order":"6"},"codes":{"jsx":"import { Upload, Button } from '@alifd/next';\n\nconst onError = (file, fileList) => {\n console.log('Exceed limit', file, fileList);\n};\n\nReactDOM.render((\n
    \n \n \n \n
    \n), mountNode);\n\n"},"body":"\n\n````jsx\nimport { Upload, Button } from '@alifd/next';\n\nconst onError = (file, fileList) => {\n console.log('Exceed limit', file, fileList);\n};\n\nReactDOM.render((\n
    \n \n \n \n
    \n), mountNode);\n\n````","html":"
    import { Upload, Button } from '@alifd/next';\n\nconst onError = (file, fileList) => {\n    console.log('Exceed limit', file, fileList);\n};\n\nReactDOM.render((\n    <div>\n        <Upload\n            action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n            limit={2}\n            multiple\n            listType=\"text\"\n            onError={onError}\n            defaultValue={[{\n                name: 'IMG.png',\n                state: 'done',\n                size: 1024,\n                downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n                fileURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n                imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n            }]}>\n            <Button type=\"primary\" style={{margin: '0 0 10px'}}>Upload File</Button>\n        </Upload>\n    </div>\n), mountNode);\n
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/maxsize.en-us.md b/compiled_docs/upload/demo/maxsize.en-us.md new file mode 100644 index 0000000000..3d63101348 --- /dev/null +++ b/compiled_docs/upload/demo/maxsize.en-us.md @@ -0,0 +1 @@ +{"title":"size limit","meta":{"title":"size limit","description":"\n

    Waring: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload API:

    \n
    \n
      \n
    1. only for test & develop, Never Use in production enviroments
      2. \n
    \n
    \n
    \n
      \n
    1. only support upload images
      2. \n
    \n
    \n","order":"6"},"codes":{"jsx":"import { Upload, Dialog, Button } from '@alifd/next';\n\nconst beforeUpload = (file) => {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => {\n const img = new Image();\n img.onload = () => {\n if (img.width <= 1200) {\n resolve();\n } else {\n Dialog.alert({\n content: `Image width ${img.width}px, Exceed limits！`,\n closable: false,\n title: 'Warning'\n });\n reject();\n }\n };\n img.src = reader.result;\n };\n reader.readAsDataURL(file);\n });\n};\n\nReactDOM.render((\n \n \n \n), mountNode);\n\n"},"body":"\n````jsx\nimport { Upload, Dialog, Button } from '@alifd/next';\n\nconst beforeUpload = (file) => {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => {\n const img = new Image();\n img.onload = () => {\n if (img.width <= 1200) {\n resolve();\n } else {\n Dialog.alert({\n content: `Image width ${img.width}px, Exceed limits！`,\n closable: false,\n title: 'Warning'\n });\n reject();\n }\n };\n img.src = reader.result;\n };\n reader.readAsDataURL(file);\n });\n};\n\nReactDOM.render((\n \n \n \n), mountNode);\n\n````","html":"
    import { Upload, Dialog, Button } from '@alifd/next';\n\nconst beforeUpload = (file) => {\n    return new Promise((resolve, reject) => {\n        const reader = new FileReader();\n        reader.onload = () => {\n            const img = new Image();\n            img.onload = () => {\n                if (img.width <= 1200) {\n                    resolve();\n                } else {\n                    Dialog.alert({\n                        content: `Image width ${img.width}px, Exceed limits！`,\n                        closable: false,\n                        title: 'Warning'\n                    });\n                    reject();\n                }\n            };\n            img.src = reader.result;\n        };\n        reader.readAsDataURL(file);\n    });\n};\n\nReactDOM.render((\n    <Upload\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        limit={3}\n        multiple\n        beforeUpload={beforeUpload}\n        listType=\"text\"\n        defaultValue={[{\n            name: 'IMG.png',\n            state: 'done',\n            size: 1024,\n            downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            fileURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n        }]}\n    >\n        <Button type=\"primary\" style={{margin: '0 0 10px'}}>Upload file</Button>\n    </Upload>\n), mountNode);\n
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/maxsize.md b/compiled_docs/upload/demo/maxsize.md new file mode 100644 index 0000000000..f55c08fed0 --- /dev/null +++ b/compiled_docs/upload/demo/maxsize.md @@ -0,0 +1 @@ +{"title":"大小限制","meta":{"title":"大小限制","description":"\n

    提醒: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload接口:

    \n
    \n
      \n
    1. 该接口仅作为测试使用,业务请勿使用
      2. \n
    \n
    \n
    \n
      \n
    1. 该接口仅支持图片上传,其他文件类型接口请自备
      2. \n
    \n
    \n","order":"6"},"codes":{"jsx":"import { Upload, Dialog, Button } from '@alifd/next';\n\nconst beforeUpload = (file) => {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => {\n const img = new Image();\n img.onload = () => {\n if (img.width <= 1200) {\n resolve();\n } else {\n Dialog.alert({\n content: `Image width ${img.width}px, Exceed limits！`,\n closable: false,\n title: 'Warning'\n });\n reject();\n }\n };\n img.src = reader.result;\n };\n reader.readAsDataURL(file);\n });\n};\n\nReactDOM.render((\n \n \n \n), mountNode);\n\n"},"body":"\n\n````jsx\nimport { Upload, Dialog, Button } from '@alifd/next';\n\nconst beforeUpload = (file) => {\n return new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.onload = () => {\n const img = new Image();\n img.onload = () => {\n if (img.width <= 1200) {\n resolve();\n } else {\n Dialog.alert({\n content: `Image width ${img.width}px, Exceed limits！`,\n closable: false,\n title: 'Warning'\n });\n reject();\n }\n };\n img.src = reader.result;\n };\n reader.readAsDataURL(file);\n });\n};\n\nReactDOM.render((\n \n \n \n), mountNode);\n\n````","html":"
    import { Upload, Dialog, Button } from '@alifd/next';\n\nconst beforeUpload = (file) => {\n    return new Promise((resolve, reject) => {\n        const reader = new FileReader();\n        reader.onload = () => {\n            const img = new Image();\n            img.onload = () => {\n                if (img.width <= 1200) {\n                    resolve();\n                } else {\n                    Dialog.alert({\n                        content: `Image width ${img.width}px, Exceed limits！`,\n                        closable: false,\n                        title: 'Warning'\n                    });\n                    reject();\n                }\n            };\n            img.src = reader.result;\n        };\n        reader.readAsDataURL(file);\n    });\n};\n\nReactDOM.render((\n    <Upload\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        limit={3}\n        multiple\n        beforeUpload={beforeUpload}\n        listType=\"text\"\n        defaultValue={[{\n            name: 'IMG.png',\n            state: 'done',\n            size: 1024,\n            downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            fileURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n            imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n        }]}\n    >\n        <Button type=\"primary\" style={{margin: '0 0 10px'}}>Upload file</Button>\n    </Upload>\n), mountNode);\n
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/paste.en-us.md b/compiled_docs/upload/demo/paste.en-us.md new file mode 100644 index 0000000000..2b0c43c843 --- /dev/null +++ b/compiled_docs/upload/demo/paste.en-us.md @@ -0,0 +1 @@ +{"title":"paste to upload","meta":{"title":"paste to upload","description":"\n
    \n
      \n
    1. only for test & develop, Never Use in production enviroments
      2. \n
    \n
    \n
    \n
      \n
    1. only support upload images
      2. \n
    \n
    \n"},"codes":{"jsx":"import { Upload, Input } from '@alifd/next';\n\nclass App extends React.Component {\n onPaste = (e) => {\n e.preventDefault();\n const files = e.clipboardData.files;\n files.length && this.uploaderRef.selectFiles(files);\n };\n\n saveUploaderRef = (ref) => {\n this.uploaderRef = ref.getInstance();\n };\n\n onChange = (value) => {\n console.log(value);\n };\n\n render() {\n return (
    \n \n \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Upload, Input } from '@alifd/next';\n\nclass App extends React.Component {\n onPaste = (e) => {\n e.preventDefault();\n const files = e.clipboardData.files;\n files.length && this.uploaderRef.selectFiles(files);\n };\n\n saveUploaderRef = (ref) => {\n this.uploaderRef = ref.getInstance();\n };\n\n onChange = (value) => {\n console.log(value);\n };\n\n render() {\n return (
    \n \n \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Upload, Input } from '@alifd/next';\n\nclass App extends React.Component {\n    onPaste = (e) => {\n        e.preventDefault();\n        const files = e.clipboardData.files;\n        files.length && this.uploaderRef.selectFiles(files);\n    };\n\n    saveUploaderRef = (ref) => {\n        this.uploaderRef = ref.getInstance();\n    };\n\n    onChange = (value) => {\n        console.log(value);\n    };\n\n    render() {\n        return (<div>\n            <Input.TextArea style={{width: '100%', marginBottom: 10}} autoHeight={{minRows: 4}} onPaste={this.onPaste} />\n            <Upload\n                action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n                listType=\"image\"\n                onChange={this.onChange}\n                ref={this.saveUploaderRef}\n            />\n        </div>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/paste.md b/compiled_docs/upload/demo/paste.md new file mode 100644 index 0000000000..e461c111a3 --- /dev/null +++ b/compiled_docs/upload/demo/paste.md @@ -0,0 +1 @@ +{"title":"粘贴上传","meta":{"title":"粘贴上传","description":"\n

    提醒: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload接口:

    \n
    \n
      \n
    1. 该接口仅作为测试使用,业务请勿使用
      2. \n
    \n
    \n
    \n
      \n
    1. 该接口仅支持图片上传,其他文件类型接口请自备
      2. \n
    \n
    \n","order":"5"},"codes":{"jsx":"import { Upload, Input } from '@alifd/next';\n\nclass App extends React.Component {\n onPaste = (e) => {\n e.preventDefault();\n const files = e.clipboardData.files;\n files.length && this.uploaderRef.selectFiles(files);\n };\n\n saveUploaderRef = (ref) => {\n this.uploaderRef = ref.getInstance();\n };\n\n onChange = (value) => {\n console.log(value);\n };\n\n render() {\n return (
    \n \n \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Upload, Input } from '@alifd/next';\n\nclass App extends React.Component {\n onPaste = (e) => {\n e.preventDefault();\n const files = e.clipboardData.files;\n files.length && this.uploaderRef.selectFiles(files);\n };\n\n saveUploaderRef = (ref) => {\n this.uploaderRef = ref.getInstance();\n };\n\n onChange = (value) => {\n console.log(value);\n };\n\n render() {\n return (
    \n \n \n
    );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Upload, Input } from '@alifd/next';\n\nclass App extends React.Component {\n    onPaste = (e) => {\n        e.preventDefault();\n        const files = e.clipboardData.files;\n        files.length && this.uploaderRef.selectFiles(files);\n    };\n\n    saveUploaderRef = (ref) => {\n        this.uploaderRef = ref.getInstance();\n    };\n\n    onChange = (value) => {\n        console.log(value);\n    };\n\n    render() {\n        return (<div>\n            <Input.TextArea style={{width: '100%', marginBottom: 10}} autoHeight={{minRows: 4}} onPaste={this.onPaste} />\n            <Upload\n                action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n                listType=\"image\"\n                onChange={this.onChange}\n                ref={this.saveUploaderRef}\n            />\n        </div>);\n    }\n}\n\nReactDOM.render(<App/>, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/submit.en-us.md b/compiled_docs/upload/demo/submit.en-us.md new file mode 100644 index 0000000000..59f99711c8 --- /dev/null +++ b/compiled_docs/upload/demo/submit.en-us.md @@ -0,0 +1 @@ +{"title":"Submit Upload","meta":{"title":"Submit Upload","description":"\n
    \n
      \n
    1. only for test & develop, Never Use in production enviroments
      2. \n
    \n
    \n
    \n
      \n
    1. only support upload images\nClick a submit button to upload
      2. \n
    \n
    \n"},"codes":{"jsx":"import { Upload, Button } from '@alifd/next';\n\n\nclass App extends React.Component {\n\n saveUploaderRef = (ref) => {\n this.uploaderRef = ref.getInstance();\n };\n\n onSubmit = () => {\n this.uploaderRef.startUpload();\n }\n beforeUpload(info, options) {\n console.log('beforeUpload callback : ', info, options);\n return options;\n }\n render() {\n return (\n
    \n \n \n \n
    \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Upload, Button } from '@alifd/next';\n\n\nclass App extends React.Component {\n\n saveUploaderRef = (ref) => {\n this.uploaderRef = ref.getInstance();\n };\n\n onSubmit = () => {\n this.uploaderRef.startUpload();\n }\n beforeUpload(info, options) {\n console.log('beforeUpload callback : ', info, options);\n return options;\n }\n render() {\n return (\n
    \n \n \n \n
    \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Upload, Button } from '@alifd/next';\n\n\nclass App extends React.Component {\n\n    saveUploaderRef = (ref) => {\n        this.uploaderRef = ref.getInstance();\n    };\n\n    onSubmit = () => {\n        this.uploaderRef.startUpload();\n    }\n    beforeUpload(info, options) {\n        console.log('beforeUpload callback : ', info, options);\n        return options;\n    }\n    render() {\n        return (\n            <div>\n                <Upload\n                    action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n                    autoUpload={false}\n                    ref={this.saveUploaderRef}\n                    listType=\"card\"\n                    beforeUpload={this.beforeUpload}\n                    useDataURL\n                >\n                    <Button>Upload</Button>\n                </Upload>\n                <br />\n                <Button type=\"primary\" onClick={this.onSubmit}>Submit</Button>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/submit.md b/compiled_docs/upload/demo/submit.md new file mode 100644 index 0000000000..237061b789 --- /dev/null +++ b/compiled_docs/upload/demo/submit.md @@ -0,0 +1 @@ +{"title":"提交上传","meta":{"title":"提交上传","description":"\n

    通过按钮点击提交上传

    \n

    提醒: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload接口:

    \n
    \n
      \n
    1. 该接口仅作为测试使用,业务请勿使用
      2. \n
    \n
    \n
    \n
      \n
    1. 该接口仅支持图片上传,其他文件类型接口请自备
      2. \n
    \n
    \n","order":"5"},"codes":{"jsx":"import { Upload, Button } from '@alifd/next';\n\n\nclass App extends React.Component {\n\n saveUploaderRef = (ref) => {\n this.uploaderRef = ref.getInstance();\n };\n\n onSubmit = () => {\n this.uploaderRef.startUpload();\n }\n beforeUpload(info, options) {\n console.log('beforeUpload callback : ', info, options);\n return options;\n }\n render() {\n return (\n
    \n \n \n \n
    \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Upload, Button } from '@alifd/next';\n\n\nclass App extends React.Component {\n\n saveUploaderRef = (ref) => {\n this.uploaderRef = ref.getInstance();\n };\n\n onSubmit = () => {\n this.uploaderRef.startUpload();\n }\n beforeUpload(info, options) {\n console.log('beforeUpload callback : ', info, options);\n return options;\n }\n render() {\n return (\n
    \n \n \n \n
    \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Upload, Button } from '@alifd/next';\n\n\nclass App extends React.Component {\n\n    saveUploaderRef = (ref) => {\n        this.uploaderRef = ref.getInstance();\n    };\n\n    onSubmit = () => {\n        this.uploaderRef.startUpload();\n    }\n    beforeUpload(info, options) {\n        console.log('beforeUpload callback : ', info, options);\n        return options;\n    }\n    render() {\n        return (\n            <div>\n                <Upload\n                    action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n                    autoUpload={false}\n                    ref={this.saveUploaderRef}\n                    listType=\"card\"\n                    beforeUpload={this.beforeUpload}\n                    useDataURL\n                >\n                    <Button>Upload</Button>\n                </Upload>\n                <br />\n                <Button type=\"primary\" onClick={this.onSubmit}>Submit</Button>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/text.en-us.md b/compiled_docs/upload/demo/text.en-us.md new file mode 100644 index 0000000000..f0b6cc7cbb --- /dev/null +++ b/compiled_docs/upload/demo/text.en-us.md @@ -0,0 +1 @@ +{"title":"Submit Upload","meta":{"title":"Submit Upload","description":"\n

    Waring: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload API:

    \n
    \n
      \n
    1. only for test & develop, Never Use in production enviroments
      2. \n
    \n
    \n
    \n
      \n
    1. only support upload images
      2. \n
    \n
    \n","order":"1"},"codes":{"jsx":"import { Upload, Button } from '@alifd/next';\n\nconst defaultValue = [{\n uid: '0',\n name: 'IMG.png',\n state: 'done',\n url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n size: 2000\n}, {\n uid: '1',\n name: 'IMG.png',\n percent: 50,\n state: 'uploading',\n url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n}, {\n uid: '2',\n name: 'IMG.png',\n state: 'error',\n url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n errorMsg: 'fail to upload something'\n}, {\n uid: '3',\n name: 'IMG.png',\n state: 'error',\n url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n}];\n\nReactDOM.render(\n \n \n , mountNode);\n\nfunction beforeUpload(info) {\n console.log('beforeUpload : ', info);\n}\n\nfunction onChange(info) {\n console.log('onChange : ', info);\n}\n\nfunction onSuccess(info) {\n console.log('onSuccess : ', info);\n}\n"},"body":"\n````jsx\nimport { Upload, Button } from '@alifd/next';\n\nconst defaultValue = [{\n uid: '0',\n name: 'IMG.png',\n state: 'done',\n url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n size: 2000\n}, {\n uid: '1',\n name: 'IMG.png',\n percent: 50,\n state: 'uploading',\n url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n}, {\n uid: '2',\n name: 'IMG.png',\n state: 'error',\n url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n errorMsg: 'fail to upload something'\n}, {\n uid: '3',\n name: 'IMG.png',\n state: 'error',\n url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n}];\n\nReactDOM.render(\n \n \n , mountNode);\n\nfunction beforeUpload(info) {\n console.log('beforeUpload : ', info);\n}\n\nfunction onChange(info) {\n console.log('onChange : ', info);\n}\n\nfunction onSuccess(info) {\n console.log('onSuccess : ', info);\n}\n````","html":"
    import { Upload, Button } from '@alifd/next';\n\nconst defaultValue = [{\n    uid: '0',\n    name: 'IMG.png',\n    state: 'done',\n    url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n    downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n    imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n    size: 2000\n}, {\n    uid: '1',\n    name: 'IMG.png',\n    percent: 50,\n    state: 'uploading',\n    url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n    downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n    imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n}, {\n    uid: '2',\n    name: 'IMG.png',\n    state: 'error',\n    url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n    downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n    imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n    errorMsg: 'fail to upload something'\n}, {\n    uid: '3',\n    name: 'IMG.png',\n    state: 'error',\n    url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n    downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n    imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n}];\n\nReactDOM.render(\n    <Upload\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        beforeUpload={beforeUpload}\n        onChange={onChange}\n        onSuccess={onSuccess}\n        listType=\"text\"\n        defaultValue={defaultValue}>\n        <Button type=\"primary\" style={{margin: '0 0 10px'}}>Upload File</Button>\n    </Upload>, mountNode);\n\nfunction beforeUpload(info) {\n    console.log('beforeUpload : ', info);\n}\n\nfunction onChange(info) {\n    console.log('onChange : ', info);\n}\n\nfunction onSuccess(info) {\n    console.log('onSuccess : ', info);\n}
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/text.md b/compiled_docs/upload/demo/text.md new file mode 100644 index 0000000000..86f4beccb1 --- /dev/null +++ b/compiled_docs/upload/demo/text.md @@ -0,0 +1 @@ +{"title":"文字列表","meta":{"title":"文字列表","description":"\n

    提醒: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload接口:

    \n
    \n
      \n
    1. 该接口仅作为测试使用,业务请勿使用
      2. \n
    \n
    \n
    \n
      \n
    1. 该接口仅支持图片上传,其他文件类型接口请自备
      2. \n
    \n
    \n","order":"1"},"codes":{"jsx":"import { Upload, Button } from '@alifd/next';\n\nconst defaultValue = [{\n uid: '0',\n name: 'IMG.png',\n state: 'done',\n url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n size: 2000\n}, {\n uid: '1',\n name: 'IMG.png',\n percent: 50,\n state: 'uploading',\n url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n}, {\n uid: '2',\n name: 'IMG.png',\n state: 'error',\n url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n errorMsg: 'fail to upload something'\n}, {\n uid: '3',\n name: 'IMG.png',\n state: 'error',\n url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n}];\n\nReactDOM.render(\n \n \n , mountNode);\n\nfunction beforeUpload(info) {\n console.log('beforeUpload : ', info);\n}\n\nfunction onChange(info) {\n console.log('onChange : ', info);\n}\n\nfunction onSuccess(info) {\n console.log('onSuccess : ', info);\n}\n"},"body":"\n\n````jsx\nimport { Upload, Button } from '@alifd/next';\n\nconst defaultValue = [{\n uid: '0',\n name: 'IMG.png',\n state: 'done',\n url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n size: 2000\n}, {\n uid: '1',\n name: 'IMG.png',\n percent: 50,\n state: 'uploading',\n url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n}, {\n uid: '2',\n name: 'IMG.png',\n state: 'error',\n url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n errorMsg: 'fail to upload something'\n}, {\n uid: '3',\n name: 'IMG.png',\n state: 'error',\n url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n}];\n\nReactDOM.render(\n \n \n , mountNode);\n\nfunction beforeUpload(info) {\n console.log('beforeUpload : ', info);\n}\n\nfunction onChange(info) {\n console.log('onChange : ', info);\n}\n\nfunction onSuccess(info) {\n console.log('onSuccess : ', info);\n}\n````","html":"
    import { Upload, Button } from '@alifd/next';\n\nconst defaultValue = [{\n    uid: '0',\n    name: 'IMG.png',\n    state: 'done',\n    url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n    downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n    imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n    size: 2000\n}, {\n    uid: '1',\n    name: 'IMG.png',\n    percent: 50,\n    state: 'uploading',\n    url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n    downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n    imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n}, {\n    uid: '2',\n    name: 'IMG.png',\n    state: 'error',\n    url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n    downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n    imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n    errorMsg: 'fail to upload something'\n}, {\n    uid: '3',\n    name: 'IMG.png',\n    state: 'error',\n    url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n    downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n    imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n}];\n\nReactDOM.render(\n    <Upload\n        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n        beforeUpload={beforeUpload}\n        onChange={onChange}\n        onSuccess={onSuccess}\n        listType=\"text\"\n        defaultValue={defaultValue}>\n        <Button type=\"primary\" style={{margin: '0 0 10px'}}>Upload File</Button>\n    </Upload>, mountNode);\n\nfunction beforeUpload(info) {\n    console.log('beforeUpload : ', info);\n}\n\nfunction onChange(info) {\n    console.log('onChange : ', info);\n}\n\nfunction onSuccess(info) {\n    console.log('onSuccess : ', info);\n}
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/validation.en-us.md b/compiled_docs/upload/demo/validation.en-us.md new file mode 100644 index 0000000000..0522c9a787 --- /dev/null +++ b/compiled_docs/upload/demo/validation.en-us.md @@ -0,0 +1 @@ +{"title":"Submit Upload","meta":{"title":"Submit Upload","description":"\n

    afterSelect only works when autoUpload=false and it can be completely replace by beforeUpload method when autoUpload=true

    \n

    Waring: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload API:

    \n
    \n
      \n
    1. only for test & develop, Never Use in production enviroments
      2. \n
    \n
    \n
    \n
      \n
    1. only support upload images\nClick a submit button to upload
      2. \n
    \n
    \n","order":"5"},"codes":{"jsx":"import { Upload, Button } from '@alifd/next';\n\n\nclass App extends React.Component {\n\n saveUploaderRef = (ref) => {\n this.uploaderRef = ref.getInstance();\n };\n\n onSubmit = () => {\n this.uploaderRef.startUpload();\n }\n afterSelect(file) {\n console.log(file);\n return true; // return false will trigger onError warning & prevent upload\n }\n render() {\n return (\n
    \n \n \n \n
    \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Upload, Button } from '@alifd/next';\n\n\nclass App extends React.Component {\n\n saveUploaderRef = (ref) => {\n this.uploaderRef = ref.getInstance();\n };\n\n onSubmit = () => {\n this.uploaderRef.startUpload();\n }\n afterSelect(file) {\n console.log(file);\n return true; // return false will trigger onError warning & prevent upload\n }\n render() {\n return (\n
    \n \n \n \n
    \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Upload, Button } from '@alifd/next';\n\n\nclass App extends React.Component {\n\n    saveUploaderRef = (ref) => {\n        this.uploaderRef = ref.getInstance();\n    };\n\n    onSubmit = () => {\n        this.uploaderRef.startUpload();\n    }\n    afterSelect(file) {\n        console.log(file);\n        return true; // return false will trigger onError warning & prevent upload\n    }\n    render() {\n        return (\n            <div>\n                <Upload\n                    action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n                    autoUpload={false}\n                    ref={this.saveUploaderRef}\n                    listType=\"text\"\n                    afterSelect={this.afterSelect}\n                >\n                    <Button>Upload</Button>\n                </Upload>\n                <br />\n                <Button type=\"primary\" onClick={this.onSubmit}>Submit</Button>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/validation.md b/compiled_docs/upload/demo/validation.md new file mode 100644 index 0000000000..8109cc5056 --- /dev/null +++ b/compiled_docs/upload/demo/validation.md @@ -0,0 +1 @@ +{"title":"文件校验","meta":{"title":"文件校验","description":"\n

    afterSelect仅在 autoUpload=false 的时候生效\nautoUpload=true时,可以使用beforeUpload完全可以替代该功能.

    \n

    提醒: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload接口:

    \n
    \n
      \n
    1. 该接口仅作为测试使用,业务请勿使用
      2. \n
    2. 该接口仅支持图片上传,其他文件类型接口请自备
      3. \n
    \n
    \n","order":"12"},"codes":{"jsx":"import { Upload, Button } from '@alifd/next';\n\n\nclass App extends React.Component {\n\n saveUploaderRef = (ref) => {\n this.uploaderRef = ref.getInstance();\n };\n\n onSubmit = () => {\n this.uploaderRef.startUpload();\n }\n afterSelect(file) {\n console.log(file);\n return true; // return false will trigger onError warning & prevent upload\n }\n render() {\n return (\n
    \n \n \n \n
    \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Upload, Button } from '@alifd/next';\n\n\nclass App extends React.Component {\n\n saveUploaderRef = (ref) => {\n this.uploaderRef = ref.getInstance();\n };\n\n onSubmit = () => {\n this.uploaderRef.startUpload();\n }\n afterSelect(file) {\n console.log(file);\n return true; // return false will trigger onError warning & prevent upload\n }\n render() {\n return (\n
    \n \n \n \n
    \n \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Upload, Button } from '@alifd/next';\n\n\nclass App extends React.Component {\n\n    saveUploaderRef = (ref) => {\n        this.uploaderRef = ref.getInstance();\n    };\n\n    onSubmit = () => {\n        this.uploaderRef.startUpload();\n    }\n    afterSelect(file) {\n        console.log(file);\n        return true; // return false will trigger onError warning & prevent upload\n    }\n    render() {\n        return (\n            <div>\n                <Upload\n                    action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n                    autoUpload={false}\n                    ref={this.saveUploaderRef}\n                    listType=\"text\"\n                    afterSelect={this.afterSelect}\n                >\n                    <Button>Upload</Button>\n                </Upload>\n                <br />\n                <Button type=\"primary\" onClick={this.onSubmit}>Submit</Button>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/with-form.en-us.md b/compiled_docs/upload/demo/with-form.en-us.md new file mode 100644 index 0000000000..8aa2123472 --- /dev/null +++ b/compiled_docs/upload/demo/with-form.en-us.md @@ -0,0 +1 @@ +{"title":"Content fill","meta":{"title":"Content fill","description":"\n

    Waring: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload API:

    \n
    \n
      \n
    1. only for test & develop, Never Use in production enviroments
      2. \n
    \n
    \n
    \n
      \n
    1. only support upload images
      2. \n
    \n
    \n","order":"6"},"codes":{"jsx":"import { Upload, Button, Field, Form } from '@alifd/next';\n\nconst FormItem = Form.Item;\n\nconst value = [{\n name: 'pic.png',\n fileName: 'pic.png',\n state: 'done',\n size: 1000,\n downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n fileURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n}];\n\nclass App extends React.Component {\n\n field = new Field(this);\n\n setValues = () => {\n this.field.setValues({\n upload: [...value]\n });\n };\n\n getValues = () => {\n const values = this.field.getValues();\n console.log(values);\n };\n\n render() {\n\n return (\n
    \n \n \n \n \n \n
    \n   \n   \n   \n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n````jsx\nimport { Upload, Button, Field, Form } from '@alifd/next';\n\nconst FormItem = Form.Item;\n\nconst value = [{\n name: 'pic.png',\n fileName: 'pic.png',\n state: 'done',\n size: 1000,\n downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n fileURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n}];\n\nclass App extends React.Component {\n\n field = new Field(this);\n\n setValues = () => {\n this.field.setValues({\n upload: [...value]\n });\n };\n\n getValues = () => {\n const values = this.field.getValues();\n console.log(values);\n };\n\n render() {\n\n return (\n
    \n \n \n \n \n \n
    \n   \n   \n   \n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Upload, Button, Field, Form } from '@alifd/next';\n\nconst FormItem = Form.Item;\n\nconst value = [{\n    name: 'pic.png',\n    fileName: 'pic.png',\n    state: 'done',\n    size: 1000,\n    downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n    fileURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n    imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n}];\n\nclass App extends React.Component {\n\n    field = new Field(this);\n\n    setValues = () => {\n        this.field.setValues({\n            upload: [...value]\n        });\n    };\n\n    getValues = () => {\n        const values = this.field.getValues();\n        console.log(values);\n    };\n\n    render() {\n\n        return (\n            <Form field={this.field}>\n                <FormItem required>\n                    <Upload\n                        listType=\"text\"\n                        name=\"upload\"\n                        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n                        defaultValue={value}\n                    >\n                        <Button>Upload</Button>\n                    </Upload>\n                </FormItem>\n                <div>\n                    <Button onClick={this.setValues} type=\"primary\" style={{margin: '0 0 10px'}}>Set Data</Button>&nbsp;&nbsp;\n                    <Button onClick={this.getValues} type=\"primary\" style={{margin: '0 0 10px'}}>Get Data</Button>&nbsp;&nbsp;\n                    <Button onClick={() => this.field.reset()} type=\"primary\" style={{margin: '0 0 10px'}}>Reset</Button>&nbsp;&nbsp;\n                    <Button onClick={() => this.field.validate()} type=\"primary\" style={{margin: '0 0 10px'}}>Validate</Button>\n                </div>\n            </Form>\n        );\n    }\n}\n\nReactDOM.render(<App />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/upload/demo/with-form.md b/compiled_docs/upload/demo/with-form.md new file mode 100644 index 0000000000..e4e2162cc3 --- /dev/null +++ b/compiled_docs/upload/demo/with-form.md @@ -0,0 +1 @@ +{"title":"内容回填","meta":{"title":"内容回填","description":"\n

    提醒: https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload接口:

    \n
    \n
      \n
    1. 该接口仅作为测试使用,业务请勿使用
      2. \n
    \n
    \n
    \n
      \n
    1. 该接口仅支持图片上传,其他文件类型接口请自备
      2. \n
    \n
    \n","order":"6"},"codes":{"jsx":"import { Upload, Button, Field, Form } from '@alifd/next';\n\nconst FormItem = Form.Item;\n\nconst value = [{\n name: 'pic.png',\n fileName: 'pic.png',\n state: 'done',\n size: 1000,\n downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n fileURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n}];\n\nclass App extends React.Component {\n\n field = new Field(this);\n\n setValues = () => {\n this.field.setValues({\n upload: [...value]\n });\n };\n\n getValues = () => {\n const values = this.field.getValues();\n console.log(values);\n };\n\n render() {\n\n return (\n
    \n \n \n \n \n \n
    \n   \n   \n   \n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n"},"body":"\n\n````jsx\nimport { Upload, Button, Field, Form } from '@alifd/next';\n\nconst FormItem = Form.Item;\n\nconst value = [{\n name: 'pic.png',\n fileName: 'pic.png',\n state: 'done',\n size: 1000,\n downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n fileURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n}];\n\nclass App extends React.Component {\n\n field = new Field(this);\n\n setValues = () => {\n this.field.setValues({\n upload: [...value]\n });\n };\n\n getValues = () => {\n const values = this.field.getValues();\n console.log(values);\n };\n\n render() {\n\n return (\n
    \n \n \n \n \n \n
    \n   \n   \n   \n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````","html":"
    import { Upload, Button, Field, Form } from '@alifd/next';\n\nconst FormItem = Form.Item;\n\nconst value = [{\n    name: 'pic.png',\n    fileName: 'pic.png',\n    state: 'done',\n    size: 1000,\n    downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n    fileURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n    imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'\n}];\n\nclass App extends React.Component {\n\n    field = new Field(this);\n\n    setValues = () => {\n        this.field.setValues({\n            upload: [...value]\n        });\n    };\n\n    getValues = () => {\n        const values = this.field.getValues();\n        console.log(values);\n    };\n\n    render() {\n\n        return (\n            <Form field={this.field}>\n                <FormItem required>\n                    <Upload\n                        listType=\"text\"\n                        name=\"upload\"\n                        action=\"https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload\"\n                        defaultValue={value}\n                    >\n                        <Button>Upload</Button>\n                    </Upload>\n                </FormItem>\n                <div>\n                    <Button onClick={this.setValues} type=\"primary\" style={{margin: '0 0 10px'}}>Set Data</Button>&nbsp;&nbsp;\n                    <Button onClick={this.getValues} type=\"primary\" style={{margin: '0 0 10px'}}>Get Data</Button>&nbsp;&nbsp;\n                    <Button onClick={() => this.field.reset()} type=\"primary\" style={{margin: '0 0 10px'}}>Reset</Button>&nbsp;&nbsp;\n                    <Button onClick={() => this.field.validate()} type=\"primary\" style={{margin: '0 0 10px'}}>Validate</Button>\n                </div>\n            </Form>\n        );\n    }\n}\n\nReactDOM.render(<App />, mountNode);
    "} \ No newline at end of file diff --git a/compiled_docs/upload/index.en-us.md b/compiled_docs/upload/index.en-us.md new file mode 100644 index 0000000000..e470519baf --- /dev/null +++ b/compiled_docs/upload/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

    Develop Guide#

    When to Use#

    When user want to upload some file to server side or cloud storage, upload component could help user deal with it.

    \n

    API#

    ","api":"

    Upload#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    actionupload urlString-
    shapeupload button shape

    option:
    'card'    		Enum-
    acceptfile type you want to accept (image/png, image/jpg, .doc, .ppt) See input accept attributeString-
    dataextra upload dataObject/Function-
    headersupload request headersObject-
    withCredentialsAllow request with cookie or notBooleantrue
    beforeUploadcallback before upload start. returning null/undefined means do nothing, returning object will modify upload options,returning false will stop upload, null/undefined/object/false can be returned directly or wrapped by Promise

    signature:
    Function(file: Object, options: Object) => Bool/Object/Promise
    params:
    file: {Object}
    options: {Object}
    returns:
    {Bool/Object/Promise}
    		Functionfunc.noop
    onProgresscallback when upload progress change

    signaure:
    Function() => void    		Functionfunc.noop
    onSuccesscallback when upload success

    signaure:
    Function(file: Object, value: Array) => void
    params:
    file: {Object} file
    value: {Array} value    		Functionfunc.noop
    onErrorcallback when upload failed

    signaure:
    Function(file: Object, value: Array) => void
    params:
    file: {Object} file
    value: {Array} fileList    		func.noop
    childrenchildren elementReactNode-
    timeoutlimit request time, unit: msNumber-
    methodupload method

    option:
    'post', 'put'    		Enum'post'
    onSelectcallback when select

    signature:
    Function() => void    		Functionfunc.noop
    onDropcallback when drop file(s)

    signature:
    Function() => void    		Functionfunc.noop
    valuefile listArray-
    defaultValuedefault file listArray-
    listTypelist stye

    option:
    'text'
    'image'
    'card'    		Enum-
    formatterdata format function, for action response is not standard, required params for response,see formatter

    signature:
    Function() => void    		Function-
    limitlimit max number for upload fileNumberInfinity
    dragablesupport dragable or not, attention: this feature only works when ie10+。Boolean-
    disableddisable this upload componentBoolean-
    onChangecallback when uploaded file state chagnes

    signature:
    Function(info: Object) => void
    params:
    info: {Object} file info Object    		Functionfunc.noop
    onRemovecallback when file removed，See onRemove

    signature:
    Function() => void    		Functionfunc.noop
    autoUploadauto upload after select fileBooleantrue
    afterSelectcallback after select file, afterSelect only works when autoUpload=false; when autoUpload=true, use beforeUpload to replace it

    signaure:
    Function(file: Object) => Boolean
    params:
    file: {Object} null
    return:
    {Boolean} return false will prevent upload file
    return false will prevent upload
    		Functionfunc.noop
    requestcustom reuqest method

    signaure:
    Function(option: Object) => Object
    params:
    option: {Object} null
    returns:
    {Object} object with abort method
    		Function-
    progressPropsProgress propsObject-
    useDataURLuse dataurl for local previewBoolean-
    \n

    Upload.Card#

    \n

    Inherit from Upload API

    \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    onPreviewcallback when click image

    signature:
    Function() => void    		Functionfunc.noop
    onChangecallback when value changes

    signature:
    Function() => void    		Functionfunc.noop
    \n

    Upload.Drager#

    \n

    Only Supprt IE10+, Inherit from Upload API

    \n
    \n

    Upload.Selector#

    \n

    [Basic Ability] Custom Style for File Selector

    \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    disableddisable this upload componentBoolean-
    multipleselect more than one file at once, only works on ie10+. Press Ctrl to Select filesBooleanfalse
    dragablesupport dragable or not, attention: this feature only works when ie10+。Boolean-
    acceptfile type you want to accept (image/png, image/jpg, .doc, .ppt) See input accept attributeString-
    onSelectcallback when files are selected

    signature:
    Function() => void    		Functionfunc.noop
    onDragOvercallback when files are dragged over

    signature:
    Function() => void    		Functionfunc.noop
    onDragLeavecallback when files are dragged leave

    signature:
    Function() => void    		Functionfunc.noop
    onDropcallback when files are dropped

    signature:
    Function() => void    		Functionfunc.noop
    \n

    Method#

    Upload.Uploader#

    \n

    [Basic Ability] File Upload Core Ability\nlet uploader = new Upload.Uploader([options]);

    \n
    \n

    options#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ParamDescripitonTypeDefault Value
    actionupload urlString-
    dataextra upload dataObject/Function-
    headersupload request headersObject-
    withCredentialsAllow request with cookie or notBooleanfalse
    onProgresscallback when upload progress change

    signature:
    Function() => void    		Functionnoop
    onSuccesscallback when upload success

    signature:
    Function() => void    		Functionnoop
    onErrorcallback when upload failed

    signature:
    Function() => void    		Functionnoop
    \n

    Custom Request#

    某些场景下需要自定义Request,例如对接AWS S3 jd-sdk or aliyun oss sdk. Upload 支持 传入自定义的 request方法.\nUnder some circumstances, a developer may want to overriding default request call method， just like using AWS S3 jd-sdk or aliyun oss sdk. Upload has a prop named request.

    \n
    function customRequest(option) {\n    /* coding here */\n    return {abort() {/* coding here */}};\n}\n\n<Upload request={customRequest}/>

    a object named 'option' will be pass into customRequest method and it's schema:

    \n
        onProgress: (event: { percent: number }): void\n    onError: (event: Error, body?: Object): void\n    onSuccess: (body: Object): void\n    data: Object // 额外的数据\n    filename: String // 文件名\n    file: File // 原生File对象\n    withCredentials: Boolean // 是否携带cookie\n    action: String // 请求地址\n    method: String // 请求类型 post/put\n    timeout: Number // 超时\n    headers: Object // 请求头

    customRequest should return a object with a abort method which can abort a request

    \n
    abort(file?: File) => void: abort the uploading file

    customRequest implements reference: https://github.com/alibaba-fusion/next/blob/master/src/upload/runtime/request.jsx

    \n

    ErrorCode#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ErrorCodedescription
    EXCEED_LIMITwhen limit is set , selected files number + uploaded files number > limit
    BEFOREUPLOAD_REJECTBeforeUpload method returns false/Promise.resolve(false)/Promise.reject()
    RESPONSE_FAILResponse Error
    \n

    All the ErrorCode in Upload.ErrorCode.

    \n

    onChange Return Data Schema#

        {\n      uid: 'uid',       // file unique ID\n      name: 'xx.png'    // filename\n      state: 'done',    // selected uploading done error\n      response: {"success":true}  // server response\n      url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n      imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg', //optional\n      downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg' // optional\n    }\n\n

    API Response Data Schema#

        {\n      "success": true,\n      "message": "upload success",                           // display when success=false\n      "url": "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg"             // file url\n      "imgURL": "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",         // file preview url(optional)\n      "downloadURL": "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",    // file download url(optional)\n    }\n\n

    Server Side Response Format#

    Use formatter to transfer nonstandard data to standard data

    \n
      \n
    • Assume Server returns such data
      • \n
    \n
        {\n      "status": "success",\n      "img_src": "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",\n    }\n\n
      \n
    • transfer it
      • \n
    \n
        <Upload\n      action="http://127.0.0.1:3001/upload"\n      formatter={(res) => {\n        // check the res & return standard data\n        return {\n          success: res.status === 'success',\n          url: res.img_src,\n        }\n      }}\n    />\n\n

    Server side code example#

    Next Upload components upload files by sending multipart/form-data type request.

    \n

    It is no doubt that every kind of server side framework can deal with multipart/form-data type request and extract files from request body. Now we give out 2 examples

    \n\n

    IE9 Compatibility#

      \n
    • when enviroment < ie9, we use iframe as a no-refresh page upload solution, So You must keep the upload url domain and your page url domain the same.
      • \n
    • when enviroment < ie9, Server side response header, context-type must be text/html, and never be application/json
      • \n
    • if only top-level domains the same（taobao.com: top-level domain shop.taobao.com: second-level domain), you can use methods below to upload file。
      • \n
    \n

    Assume that your form page url domain：shop.taobao.com, while the file server url is upload.taobao.com. Server side should return data with a extra script tag

    \n
        <script>document.domain="taobao.com";</script>\n    {"status":1,"type":"ajax","name":"54.png","url":".\\/files\\/54.png"}\n\n

    iframe upload will request with a param _documentDomain. You can set your domain

    \n

    ARIA and KeyBoard#

    \n\n\n\n\n\n\n\n\n\n\n\n\n
    KeyBoardDescripiton
    Enter1. When the component gets the focus, press Enter to select the file upload 2. Delete uploaded image
    \n"} \ No newline at end of file diff --git a/compiled_docs/upload/index.md b/compiled_docs/upload/index.md new file mode 100644 index 0000000000..1f8db6fdca --- /dev/null +++ b/compiled_docs/upload/index.md @@ -0,0 +1 @@ +{"meta":"

    开发指南#

    何时使用#

    用户根据提示将自己本地的相应信息(包含本地和云储存)上传到网站，上传组件可以帮助用户对上传过程和上传结果有预期，并可以更改或撤销上传行为。
    参考文章:
    1. 组件的设计思想
    2. Fusion Upload组件对接阿里云OSS/七牛/又拍

    \n

    API#

    ","api":"

    Upload#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    action上传的地址String-
    shape上传按钮形状

    可选值:
    'card'    		Enum-
    accept接受上传的文件类型 (image/png, image/jpg, .doc, .ppt) 详见 input accept attributeString-
    data上传额外传参Object/Function-
    headers设置上传的请求头部Object-
    withCredentials是否允许请求携带 cookieBooleantrue
    beforeUpload可选参数, 详见 beforeUpload

    签名:
    Function(file: Object, options: Object) => Boolean/Object/Promise
    参数:
    file: {Object} 所有文件
    options: {Object} 参数
    返回值:
    {Boolean/Object/Promise} 返回值作用见demo
    		Functionfunc.noop
    onProgress上传中

    签名:
    Function() => void    		Functionfunc.noop
    onSuccess可选参数，上传成功回调函数，参数为请求下响应信息以及文件

    签名:
    Function(file: Object, value: Array) => void
    参数:
    file: {Object} 文件
    value: {Array} 值    		Functionfunc.noop
    onError可选参数，上传失败回调函数，参数为上传失败的信息、响应信息以及文件

    签名:
    Function(file: Object, value: Array) => void
    参数:
    file: {Object} 出错的文件
    value: {Array} 当前值    		Functionfunc.noop
    children子元素ReactNode-
    timeout设置上传超时,单位msNumber-
    method上传方法

    可选值:
    'post', 'put'    		Enum'post'
    request自定义上传方法

    签名:
    Function(option: Object) => Object
    参数:
    option: {Object} null
    返回值:
    {Object} object with abort method
    		Function-
    name文件名字段String-
    onSelect选择文件回调

    签名:
    Function() => void    		Functionfunc.noop
    onDrop放文件

    签名:
    Function() => void    		Functionfunc.noop
    value文件列表Array-
    defaultValue默认文件列表Array-
    listType上传列表的样式

    可选值:
    'text'(文字)
    'image'(图文)
    'card'(卡片)    		Enum-
    formatter数据格式化函数，配合自定义 action 使用，参数为服务器的响应数据，详见 formatter

    签名:
    Function(response: Object, file: File) => void
    参数:
    response: {Object} 返回
    file: {File} 文件对象    		Function-
    limit最大文件上传个数NumberInfinity
    dragable可选参数，是否支持拖拽上传，ie10+ 支持。Boolean-
    useDataURL可选参数，是否本地预览Boolean-
    disabled可选参数，是否禁用上传功能Boolean-
    onChange上传文件改变时的状态

    签名:
    Function(info: Object) => void
    参数:
    info: {Object} 文件事件对象    		Functionfunc.noop
    afterSelect可选参数, 用于校验文件,afterSelect仅在 autoUpload=false 的时候生效,autoUpload=true时,可以使用beforeUpload完全可以替代该功能.

    签名:
    Function(file: Object) => Boolean
    参数:
    file: {Object} null
    返回值:
    {Boolean} 返回false会阻止上传,其他则表示正常
    		Functionfunc.noop
    onRemove移除文件回调函数

    签名:
    Function(file: Object) => Boolean/Promise
    参数:
    file: {Object} 文件
    返回值:
    {Boolean/Promise} 返回 false、Promise.resolve(false)、 Promise.reject() 将阻止文件删除
    		Functionfunc.noop
    autoUpload自动上传Booleantrue
    progressProps透传给Progress propsObject-
    \n

    Upload.Card#

    \n

    继承 Upload 的 API，除非特别说明

    \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    onPreview点击图片回调

    签名:
    Function() => void    		Functionfunc.noop
    onChange改变时候的回调

    签名:
    Function() => void    		Functionfunc.noop
    onRemove点击移除的回调

    签名:
    Function() => void    		Function-
    onCancel取消上传的回调

    签名:
    Function() => void    		Function-
    \n

    Upload.Drager#

    \n

    IE10+ 支持。继承 Upload 的 API，除非特别说明

    \n
    \n

    Upload.Selecter#

    \n

    [底层能力] 可自定义样式的文件选择器

    \n
    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    disabled是否禁用上传功能Boolean-
    multiple是否支持多选文件，ie10+ 支持。开启后按住 ctrl 可选择多个文件Booleanfalse
    dragable是否支持拖拽上传，ie10+ 支持。Boolean-
    accept接受上传的文件类型 (image/png, image/jpg, .doc, .ppt) 详见 input accept attributeString-
    onSelect文件选择回调

    签名:
    Function() => void    		Functionfunc.noop
    onDragOver拖拽经过回调

    签名:
    Function() => void    		Functionfunc.noop
    onDragLeave拖拽离开回调

    签名:
    Function() => void    		Functionfunc.noop
    onDrop拖拽完成回调

    签名:
    Function() => void    		Functionfunc.noop
    \n

    Method#

    Upload.Uploader#

    \n

    [底层能力] 文件上传核心功能\nlet uploader = new Upload.Uploader([options]);

    \n
    \n

    options#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    action上传的地址String-
    data上传额外传参Object/Function-
    headers设置上传的请求头部Object-
    withCredentials是否允许请求携带 cookieBooleanfalse
    onProgress上传中

    签名:
    Function() => void    		Functionnoop
    onSuccess上传成功回调函数，参数为请求下响应信息以及文件

    签名:
    Function() => void    		Functionnoop
    onError可选参数，上传失败回调函数，参数为上传失败的信息、响应信息以及文件

    签名:
    Function() => void    		Functionnoop
    \n

    自定义Request#

    某些场景下需要自定义Request,例如对接AWS S3 jd-sdk or aliyun oss sdk,. Upload 支持 传入自定义的 request方法.

    \n
            function customRequest(option) {\n            /* coding here */\n            return {abort() {/* coding here */}};\n        }\n\n        <Upload request={customRequest}/>\n\n

    customRequest被传入一个 object,包含以下属性:

    \n
      \n
    • onProgress: (event: { percent: number }): void
      • \n
    • onError: (event: Error, body?: Object): void
      • \n
    • onSuccess: (body: Object): void
      • \n
    • data: Object // 额外的数据
      • \n
    • filename: String // 文件名
      • \n
    • file: File // 原生File对象
      • \n
    • withCredentials: Boolean // 是否携带cookie
      • \n
    • action: String // 请求地址
      • \n
    • method: String // 请求类型 post/put
      • \n
    • timeout: Number // 超时
      • \n
    • headers: Object // 请求头
      • \n
    \n

    request需要返回一个包含abort方法的对象,用于中断上传

    \n
      \n
    • abort(file?: File) => void: abort the uploading file
      • \n
    \n

    具体实现参照 Upload 默认request方法: https://github.com/alibaba-fusion/next/blob/master/src/upload/runtime/request.jsx

    \n

    ErrorCode#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    ErrorCode含义
    EXCEED_LIMIT当设置了limit, 选中的文件 + 已上传的文件 > limit 报错
    BEFOREUPLOAD_REJECTBeforeUpload中返回了 false/Promise.resolve(false)/Promise.reject()
    RESPONSE_FAIL返回提响应错误
    \n

    所有的值在Upload.ErrorCode.

    \n

    onChange 返回结构#

        {\n      uid: 'uid',       // 文件唯一标识\n      name: 'xx.png'    // 文件名\n      state: 'done',    // 状态有：selected uploading done error\n      response: {"success":true}  // 服务端响应内容\n      url: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg',\n      imgURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg', // 头像(可选)\n      downloadURL: 'https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg'   // 下载(可选)\n    }\n\n

    接口 response 返回数据格式要求#

        {\n      "success": true,\n      "message": "上传成功",                                  // success=false 时候可以展示错误\n      "url": "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg"             // 返回结果\n      "imgURL": "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",         // 图片预览地址 (非必须)\n      "downloadURL": "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",    // 文件下载地址 (非必须)\n    }\n\n

    后端数据格式化#

    通过 formatter 将来自后端的不规则数据转换为符合组件要求的数据格式

    \n
      \n
    • 假设 服务器的响应数据如下
      • \n
    \n
        {\n      "status": "success",                              // 上传成功返回码\n      "img_src": "https://img.alicdn.com/tps/TB19O79MVXXXXcZXVXXXXXXXXXX-1024-1024.jpg",   // 图片链接\n    }\n\n
      \n
    • 转换方法
      • \n
    \n
        <Upload\n      action="http://127.0.0.1:3001/upload"\n      formatter={(res, file) => {\n        // 函数里面根据当前服务器返回的响应数据\n        // 重新拼装符合组件要求的数据格式\n        return {\n          success: res.status === 'success',\n          url: res.img_src,\n        }\n      }}\n    />\n\n

    Upload 服务端代码样例#

    Next Upload组件上传文件使用的multipart/form-data方式上传文件,具体实现是在支持FormData对象的浏览器中使用xhr对象发送formdata。在不支持FormData对象的浏览器如IE9, 使用iframe原生表单实现。

    \n

    各个语言的服务端框架,必然是可以处理multipart/form-data类型的请求,并解析出文件。一下给出两种语言的样例代码

    \n\n

    IE9兼容性#

      \n
    • ie9 下用因为使用 iframe 作为无刷新上传方案，必须保证表单页面的域名和上传的服务器端的域名相同。
      • \n
    • ie9 下服务器端返回数据需要设置头部 context-type 为 text/html，不要设置为 application/json
      • \n
    • 如果只是一级域名相同（taobao.com 为一级域名 shop.taobao.com 为二级域名），可以通过降域的方式实现跨域上传。
      • \n
    \n

    假设你表单页面的域是：shop.taobao.com，而上传的服务器端路径却是 upload.taobao.com。服务端返回必须带额外script标签

    \n
        <script>document.domain="taobao.com";</script>\n    {"status":1,"type":"ajax","name":"54.png","url":".\\/files\\/54.png"}\n\n

    iframe上传会额外传递参数 _documentDomain 方便你设置域名

    \n

    ARIA and KeyBoard#

    \n\n\n\n\n\n\n\n\n\n\n\n\n
    按键说明
    Enter1.当组件获取焦点时，按下Enter就可以选择文件上传 2.删除上传图片
    \n"} \ No newline at end of file diff --git a/compiled_docs/virtual-list/demo/basic.en-us.md b/compiled_docs/virtual-list/demo/basic.en-us.md new file mode 100644 index 0000000000..f307a36955 --- /dev/null +++ b/compiled_docs/virtual-list/demo/basic.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

    A simple case.

    \n","order":"0"},"codes":{"jsx":"import { VirtualList } from '@alifd/next';\n\nconst dataSource = [];\n\nconst generateLi = (index = 'index') => {\n const data = [];\n if (index % 3 === 0) {\n return
  • key-{index}
    • ;\n } else {\n return
  • key-{index}
    • ;\n }\n};\n\nfor (let i = 0; i < 1000; i++) {\n dataSource.push(generateLi(i));\n}\n\nconst demo = (\n
    \n \n {dataSource}\n \n
    \n);\n\n\nReactDOM.render(demo, mountNode);\n","css":".virtual-box {\n height: 200px;\n width: 200px;\n border: 1px solid #ddd;\n overflow: auto;\n}\n.virtual-box ul {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n.virtual-box li {\n padding-left: 10px;\n border-bottom: 1px solid #333;\n}\n"},"body":"\n````jsx\nimport { VirtualList } from '@alifd/next';\n\nconst dataSource = [];\n\nconst generateLi = (index = 'index') => {\n const data = [];\n if (index % 3 === 0) {\n return
  • key-{index}
    • ;\n } else {\n return
  • key-{index}
    • ;\n }\n};\n\nfor (let i = 0; i < 1000; i++) {\n dataSource.push(generateLi(i));\n}\n\nconst demo = (\n
    \n \n {dataSource}\n \n
    \n);\n\n\nReactDOM.render(demo, mountNode);\n````\n\n````css\n.virtual-box {\n height: 200px;\n width: 200px;\n border: 1px solid #ddd;\n overflow: auto;\n}\n.virtual-box ul {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n.virtual-box li {\n padding-left: 10px;\n border-bottom: 1px solid #333;\n}\n````","html":"
    import { VirtualList } from '@alifd/next';\n\nconst dataSource = [];\n\nconst generateLi = (index = 'index') => {\n    const data = [];\n    if (index % 3 === 0) {\n        return <li key={`key-${index}`} style={{lineHeight: '30px', background: '#5f83ff', color: '#fff'}}>key-{index}</li>;\n    } else {\n        return <li key={`key-${index}`} style={{lineHeight: '20px'}}>key-{index}</li>;\n    }\n};\n\nfor (let i = 0; i < 1000; i++) {\n    dataSource.push(generateLi(i));\n}\n\nconst demo = (\n    <div className={'virtual-box'}>\n        <VirtualList>\n            {dataSource}\n        </VirtualList>\n    </div>\n);\n\n\nReactDOM.render(demo, mountNode);
    .virtual-box {\n    height: 200px;\n    width: 200px;\n    border: 1px solid #ddd;\n    overflow: auto;\n}\n.virtual-box ul {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n}\n.virtual-box li {\n    padding-left: 10px;\n    border-bottom: 1px solid #333;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/virtual-list/demo/basic.md b/compiled_docs/virtual-list/demo/basic.md new file mode 100644 index 0000000000..5e13a746d9 --- /dev/null +++ b/compiled_docs/virtual-list/demo/basic.md @@ -0,0 +1 @@ +{"title":"简单用法","meta":{"title":"简单用法","description":"\n

    使用 VirtualList 最简单的例子。

    \n","order":"0"},"codes":{"jsx":"import { VirtualList } from '@alifd/next';\n\nconst dataSource = [];\n\nconst generateLi = (index = 'index') => {\n const data = [];\n if (index % 3 === 0) {\n return
  • key-{index}
    • ;\n } else {\n return
  • key-{index}
    • ;\n }\n};\n\nfor (let i = 0; i < 1000; i++) {\n dataSource.push(generateLi(i));\n}\n\nconst demo = (\n
    \n \n {dataSource}\n \n
    \n);\n\n\nReactDOM.render(demo, mountNode);\n","css":".virtual-box {\n height: 200px;\n width: 200px;\n border: 1px solid #ddd;\n overflow: auto;\n}\n.virtual-box ul {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n.virtual-box li {\n padding-left: 10px;\n border-bottom: 1px solid #333;\n}\n"},"body":"\n\n````jsx\nimport { VirtualList } from '@alifd/next';\n\nconst dataSource = [];\n\nconst generateLi = (index = 'index') => {\n const data = [];\n if (index % 3 === 0) {\n return
  • key-{index}
    • ;\n } else {\n return
  • key-{index}
    • ;\n }\n};\n\nfor (let i = 0; i < 1000; i++) {\n dataSource.push(generateLi(i));\n}\n\nconst demo = (\n
    \n \n {dataSource}\n \n
    \n);\n\n\nReactDOM.render(demo, mountNode);\n````\n\n````css\n.virtual-box {\n height: 200px;\n width: 200px;\n border: 1px solid #ddd;\n overflow: auto;\n}\n.virtual-box ul {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n.virtual-box li {\n padding-left: 10px;\n border-bottom: 1px solid #333;\n}\n````","html":"
    import { VirtualList } from '@alifd/next';\n\nconst dataSource = [];\n\nconst generateLi = (index = 'index') => {\n    const data = [];\n    if (index % 3 === 0) {\n        return <li key={`key-${index}`} style={{lineHeight: '30px', background: '#5f83ff', color: '#fff'}}>key-{index}</li>;\n    } else {\n        return <li key={`key-${index}`} style={{lineHeight: '20px'}}>key-{index}</li>;\n    }\n};\n\nfor (let i = 0; i < 1000; i++) {\n    dataSource.push(generateLi(i));\n}\n\nconst demo = (\n    <div className={'virtual-box'}>\n        <VirtualList>\n            {dataSource}\n        </VirtualList>\n    </div>\n);\n\n\nReactDOM.render(demo, mountNode);
    .virtual-box {\n    height: 200px;\n    width: 200px;\n    border: 1px solid #ddd;\n    overflow: auto;\n}\n.virtual-box ul {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n}\n.virtual-box li {\n    padding-left: 10px;\n    border-bottom: 1px solid #333;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/virtual-list/demo/initial-index.en-us.md b/compiled_docs/virtual-list/demo/initial-index.en-us.md new file mode 100644 index 0000000000..1f5e1ffb96 --- /dev/null +++ b/compiled_docs/virtual-list/demo/initial-index.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

    Use jumpIndex to set first item.

    \n","order":"1"},"codes":{"jsx":"import { VirtualList } from '@alifd/next';\n\nconst dataSource = [];\n\nfunction generateLi(index) {\n return (
  • key-{index}
    • );\n}\nfunction generateData(len) {\n for (let i = 0; i < len; i++) {\n dataSource.push(generateLi(i));\n }\n}\n\nclass App extends React.Component {\n state = {\n initial: 50,\n dataSource: generateData(1000)\n }\n onClick() {\n this.setState({\n initial: this.state.initial + 20\n });\n }\n render() {\n return (\n
    \n \n
    \n
    \n
    \n \n {dataSource}\n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".virtual-box {\n height: 200px;\n width: 200px;\n border: 1px solid #ddd;\n overflow: auto;\n}\n.virtual-box ul {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n.virtual-box li {\n padding-left: 10px;\n border-bottom: 1px solid #333;\n}\n"},"body":"\n````jsx\nimport { VirtualList } from '@alifd/next';\n\nconst dataSource = [];\n\nfunction generateLi(index) {\n return (
  • key-{index}
    • );\n}\nfunction generateData(len) {\n for (let i = 0; i < len; i++) {\n dataSource.push(generateLi(i));\n }\n}\n\nclass App extends React.Component {\n state = {\n initial: 50,\n dataSource: generateData(1000)\n }\n onClick() {\n this.setState({\n initial: this.state.initial + 20\n });\n }\n render() {\n return (\n
    \n \n
    \n
    \n
    \n \n {dataSource}\n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.virtual-box {\n height: 200px;\n width: 200px;\n border: 1px solid #ddd;\n overflow: auto;\n}\n.virtual-box ul {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n.virtual-box li {\n padding-left: 10px;\n border-bottom: 1px solid #333;\n}\n````","html":"
    import { VirtualList } from '@alifd/next';\n\nconst dataSource = [];\n\nfunction generateLi(index) {\n    return (<li key={`key-${index}`} style={{lineHeight: '20px'}}>key-{index}</li>);\n}\nfunction generateData(len) {\n    for (let i = 0; i < len; i++) {\n        dataSource.push(generateLi(i));\n    }\n}\n\nclass App extends React.Component {\n    state = {\n        initial: 50,\n        dataSource: generateData(1000)\n    }\n    onClick() {\n        this.setState({\n            initial: this.state.initial + 20\n        });\n    }\n    render() {\n        return (\n            <div>\n                <button onClick={this.onClick.bind(this)}>jump to {this.state.initial + 20}</button>\n                <br/>\n                <br/>\n                <div className={'virtual-box'}>\n                    <VirtualList ref=\"virtual\" jumpIndex={this.state.initial}>\n                        {dataSource}\n                    </VirtualList>\n                </div>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App />, mountNode);
    .virtual-box {\n    height: 200px;\n    width: 200px;\n    border: 1px solid #ddd;\n    overflow: auto;\n}\n.virtual-box ul {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n}\n.virtual-box li {\n    padding-left: 10px;\n    border-bottom: 1px solid #333;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/virtual-list/demo/initial-index.md b/compiled_docs/virtual-list/demo/initial-index.md new file mode 100644 index 0000000000..27e0d59ced --- /dev/null +++ b/compiled_docs/virtual-list/demo/initial-index.md @@ -0,0 +1 @@ +{"title":"设置初始位置","meta":{"title":"设置初始位置","description":"\n

    使用 jumpIndex 设置初始位置

    \n","order":"1"},"codes":{"jsx":"import { VirtualList } from '@alifd/next';\n\nconst dataSource = [];\n\nfunction generateLi(index) {\n return (
  • key-{index}
    • );\n}\nfunction generateData(len) {\n for (let i = 0; i < len; i++) {\n dataSource.push(generateLi(i));\n }\n}\n\nclass App extends React.Component {\n state = {\n initial: 50,\n dataSource: generateData(1000)\n }\n onClick() {\n this.setState({\n initial: this.state.initial + 20\n });\n }\n render() {\n return (\n
    \n \n
    \n
    \n
    \n \n {dataSource}\n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".virtual-box {\n height: 200px;\n width: 200px;\n border: 1px solid #ddd;\n overflow: auto;\n}\n.virtual-box ul {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n.virtual-box li {\n padding-left: 10px;\n border-bottom: 1px solid #333;\n}\n"},"body":"\n\n````jsx\nimport { VirtualList } from '@alifd/next';\n\nconst dataSource = [];\n\nfunction generateLi(index) {\n return (
  • key-{index}
    • );\n}\nfunction generateData(len) {\n for (let i = 0; i < len; i++) {\n dataSource.push(generateLi(i));\n }\n}\n\nclass App extends React.Component {\n state = {\n initial: 50,\n dataSource: generateData(1000)\n }\n onClick() {\n this.setState({\n initial: this.state.initial + 20\n });\n }\n render() {\n return (\n
    \n \n
    \n
    \n
    \n \n {dataSource}\n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.virtual-box {\n height: 200px;\n width: 200px;\n border: 1px solid #ddd;\n overflow: auto;\n}\n.virtual-box ul {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n.virtual-box li {\n padding-left: 10px;\n border-bottom: 1px solid #333;\n}\n````","html":"
    import { VirtualList } from '@alifd/next';\n\nconst dataSource = [];\n\nfunction generateLi(index) {\n    return (<li key={`key-${index}`} style={{lineHeight: '20px'}}>key-{index}</li>);\n}\nfunction generateData(len) {\n    for (let i = 0; i < len; i++) {\n        dataSource.push(generateLi(i));\n    }\n}\n\nclass App extends React.Component {\n    state = {\n        initial: 50,\n        dataSource: generateData(1000)\n    }\n    onClick() {\n        this.setState({\n            initial: this.state.initial + 20\n        });\n    }\n    render() {\n        return (\n            <div>\n                <button onClick={this.onClick.bind(this)}>jump to {this.state.initial + 20}</button>\n                <br/>\n                <br/>\n                <div className={'virtual-box'}>\n                    <VirtualList ref=\"virtual\" jumpIndex={this.state.initial}>\n                        {dataSource}\n                    </VirtualList>\n                </div>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App />, mountNode);
    .virtual-box {\n    height: 200px;\n    width: 200px;\n    border: 1px solid #ddd;\n    overflow: auto;\n}\n.virtual-box ul {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n}\n.virtual-box li {\n    padding-left: 10px;\n    border-bottom: 1px solid #333;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/virtual-list/demo/item-size-getter.en-us.md b/compiled_docs/virtual-list/demo/item-size-getter.en-us.md new file mode 100644 index 0000000000..72abfaa9ae --- /dev/null +++ b/compiled_docs/virtual-list/demo/item-size-getter.en-us.md @@ -0,0 +1 @@ +{"title":"Basic","meta":{"title":"Basic","description":"\n

    Use jumpIndex and itemSizeGetter to set first item in visual area.

    \n","order":"2"},"codes":{"jsx":"import { VirtualList } from '@alifd/next';\n\nconst dataSource = [];\n\nfunction generateLi(index) {\n if (index % 3 === 0) {\n return (
  • key-{index}
    • );\n } else {\n return (
  • key-{index}
    • );\n }\n}\nfunction generateData(len) {\n for (let i = 0; i < len; i++) {\n dataSource.push(generateLi(i));\n }\n}\n\nclass App extends React.Component {\n state = {\n initial: 20,\n dataSource: generateData(1000)\n }\n\n componentDidMount() {\n setTimeout(() => {\n const instance = this.refs.virtual.getInstance();\n instance.scrollTo(50);\n }, 200);\n\n }\n\n getHeight(index) {\n return index % 3 === 0 ? 30 : 20;\n }\n\n onClick() {\n this.setState({\n initial: this.state.initial + 20\n });\n }\n\n render() {\n return (\n
    \n \n
    \n
    \n
    \n \n {dataSource}\n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".virtual-box {\n height: 200px;\n width: 200px;\n border: 1px solid #ddd;\n overflow: auto;\n}\n.virtual-box ul {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n.virtual-box li {\n padding-left: 10px;\n border-bottom: 1px solid #333;\n}\n"},"body":"\n````jsx\nimport { VirtualList } from '@alifd/next';\n\nconst dataSource = [];\n\nfunction generateLi(index) {\n if (index % 3 === 0) {\n return (
  • key-{index}
    • );\n } else {\n return (
  • key-{index}
    • );\n }\n}\nfunction generateData(len) {\n for (let i = 0; i < len; i++) {\n dataSource.push(generateLi(i));\n }\n}\n\nclass App extends React.Component {\n state = {\n initial: 20,\n dataSource: generateData(1000)\n }\n\n componentDidMount() {\n setTimeout(() => {\n const instance = this.refs.virtual.getInstance();\n instance.scrollTo(50);\n }, 200);\n\n }\n\n getHeight(index) {\n return index % 3 === 0 ? 30 : 20;\n }\n\n onClick() {\n this.setState({\n initial: this.state.initial + 20\n });\n }\n\n render() {\n return (\n
    \n \n
    \n
    \n
    \n \n {dataSource}\n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.virtual-box {\n height: 200px;\n width: 200px;\n border: 1px solid #ddd;\n overflow: auto;\n}\n.virtual-box ul {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n.virtual-box li {\n padding-left: 10px;\n border-bottom: 1px solid #333;\n}\n````","html":"
    import { VirtualList } from '@alifd/next';\n\nconst dataSource = [];\n\nfunction generateLi(index) {\n    if (index % 3 === 0) {\n        return (<li key={`key-${index}`} style={{lineHeight: '30px', background: '#5f83ff', color: '#fff'}}>key-{index}</li>);\n    } else {\n        return (<li key={`key-${index}`} style={{lineHeight: '20px'}}>key-{index}</li>);\n    }\n}\nfunction generateData(len) {\n    for (let i = 0; i < len; i++) {\n        dataSource.push(generateLi(i));\n    }\n}\n\nclass App extends React.Component {\n    state = {\n        initial: 20,\n        dataSource: generateData(1000)\n    }\n\n    componentDidMount() {\n        setTimeout(() => {\n            const instance = this.refs.virtual.getInstance();\n            instance.scrollTo(50);\n        }, 200);\n\n    }\n\n    getHeight(index) {\n        return index % 3 === 0 ? 30 : 20;\n    }\n\n    onClick() {\n        this.setState({\n            initial: this.state.initial + 20\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <button onClick={this.onClick.bind(this)}>jump to {this.state.initial + 20}</button>\n                <br/>\n                <br/>\n                <div className={'virtual-box'}>\n                    <VirtualList ref=\"virtual\" jumpIndex={this.state.initial} itemSizeGetter={this.getHeight.bind(this)}>\n                        {dataSource}\n                    </VirtualList>\n                </div>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App />, mountNode);
    .virtual-box {\n    height: 200px;\n    width: 200px;\n    border: 1px solid #ddd;\n    overflow: auto;\n}\n.virtual-box ul {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n}\n.virtual-box li {\n    padding-left: 10px;\n    border-bottom: 1px solid #333;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/virtual-list/demo/item-size-getter.md b/compiled_docs/virtual-list/demo/item-size-getter.md new file mode 100644 index 0000000000..f7b0c2a90d --- /dev/null +++ b/compiled_docs/virtual-list/demo/item-size-getter.md @@ -0,0 +1 @@ +{"title":"不等高的item","meta":{"title":"不等高的item","description":"\n

    使用 jumpIndex 设置初始位置, 并设置 itemSizeGetter

    \n","order":"2"},"codes":{"jsx":"import { VirtualList } from '@alifd/next';\n\nconst dataSource = [];\n\nfunction generateLi(index) {\n if (index % 3 === 0) {\n return (
  • key-{index}
    • );\n } else {\n return (
  • key-{index}
    • );\n }\n}\nfunction generateData(len) {\n for (let i = 0; i < len; i++) {\n dataSource.push(generateLi(i));\n }\n}\n\nclass App extends React.Component {\n state = {\n initial: 20,\n dataSource: generateData(1000)\n }\n\n componentDidMount() {\n setTimeout(() => {\n const instance = this.refs.virtual.getInstance();\n instance.scrollTo(50);\n }, 200);\n\n }\n\n getHeight(index) {\n return index % 3 === 0 ? 30 : 20;\n }\n\n onClick() {\n this.setState({\n initial: this.state.initial + 20\n });\n }\n\n render() {\n return (\n
    \n \n
    \n
    \n
    \n \n {dataSource}\n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n","css":".virtual-box {\n height: 200px;\n width: 200px;\n border: 1px solid #ddd;\n overflow: auto;\n}\n.virtual-box ul {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n.virtual-box li {\n padding-left: 10px;\n border-bottom: 1px solid #333;\n}\n"},"body":"\n\n````jsx\nimport { VirtualList } from '@alifd/next';\n\nconst dataSource = [];\n\nfunction generateLi(index) {\n if (index % 3 === 0) {\n return (
  • key-{index}
    • );\n } else {\n return (
  • key-{index}
    • );\n }\n}\nfunction generateData(len) {\n for (let i = 0; i < len; i++) {\n dataSource.push(generateLi(i));\n }\n}\n\nclass App extends React.Component {\n state = {\n initial: 20,\n dataSource: generateData(1000)\n }\n\n componentDidMount() {\n setTimeout(() => {\n const instance = this.refs.virtual.getInstance();\n instance.scrollTo(50);\n }, 200);\n\n }\n\n getHeight(index) {\n return index % 3 === 0 ? 30 : 20;\n }\n\n onClick() {\n this.setState({\n initial: this.state.initial + 20\n });\n }\n\n render() {\n return (\n
    \n \n
    \n
    \n
    \n \n {dataSource}\n \n
    \n
    \n );\n }\n}\n\nReactDOM.render(, mountNode);\n````\n\n````css\n.virtual-box {\n height: 200px;\n width: 200px;\n border: 1px solid #ddd;\n overflow: auto;\n}\n.virtual-box ul {\n padding: 0;\n margin: 0;\n list-style: none;\n}\n.virtual-box li {\n padding-left: 10px;\n border-bottom: 1px solid #333;\n}\n````","html":"
    import { VirtualList } from '@alifd/next';\n\nconst dataSource = [];\n\nfunction generateLi(index) {\n    if (index % 3 === 0) {\n        return (<li key={`key-${index}`} style={{lineHeight: '30px', background: '#5f83ff', color: '#fff'}}>key-{index}</li>);\n    } else {\n        return (<li key={`key-${index}`} style={{lineHeight: '20px'}}>key-{index}</li>);\n    }\n}\nfunction generateData(len) {\n    for (let i = 0; i < len; i++) {\n        dataSource.push(generateLi(i));\n    }\n}\n\nclass App extends React.Component {\n    state = {\n        initial: 20,\n        dataSource: generateData(1000)\n    }\n\n    componentDidMount() {\n        setTimeout(() => {\n            const instance = this.refs.virtual.getInstance();\n            instance.scrollTo(50);\n        }, 200);\n\n    }\n\n    getHeight(index) {\n        return index % 3 === 0 ? 30 : 20;\n    }\n\n    onClick() {\n        this.setState({\n            initial: this.state.initial + 20\n        });\n    }\n\n    render() {\n        return (\n            <div>\n                <button onClick={this.onClick.bind(this)}>jump to {this.state.initial + 20}</button>\n                <br/>\n                <br/>\n                <div className={'virtual-box'}>\n                    <VirtualList ref=\"virtual\" jumpIndex={this.state.initial} itemSizeGetter={this.getHeight.bind(this)}>\n                        {dataSource}\n                    </VirtualList>\n                </div>\n            </div>\n        );\n    }\n}\n\nReactDOM.render(<App />, mountNode);
    .virtual-box {\n    height: 200px;\n    width: 200px;\n    border: 1px solid #ddd;\n    overflow: auto;\n}\n.virtual-box ul {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n}\n.virtual-box li {\n    padding-left: 10px;\n    border-bottom: 1px solid #333;\n}
    "} \ No newline at end of file diff --git a/compiled_docs/virtual-list/index.en-us.md b/compiled_docs/virtual-list/index.en-us.md new file mode 100644 index 0000000000..752a2aa5fb --- /dev/null +++ b/compiled_docs/virtual-list/index.en-us.md @@ -0,0 +1 @@ +{"meta":"

    API#

    ","api":"

    VirtualList#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    childrenchild node to be renderedany-
    minSizemin count of items to be loadedNumber1
    pageSizethe number of items in one pageNumber10
    itemsRendereritems parent dom，by default (items, ref) =>
      {items}


    signature:
    Function() => void    		Function(items, ref) => <ul ref={ref}>{items}</ul>
    thresholdheight of thresholdNumber100
    itemSizeGetterget item's height

    signature:
    Function() => void    		Function-
    jumpIndexthe index you want to jump to, set itemSizeGetter if the height of items varyNumber0
    \n"} \ No newline at end of file diff --git a/compiled_docs/virtual-list/index.md b/compiled_docs/virtual-list/index.md new file mode 100644 index 0000000000..57d9cdf317 --- /dev/null +++ b/compiled_docs/virtual-list/index.md @@ -0,0 +1 @@ +{"meta":"

    开发指南#

    何时使用#

    主要用于解决大数据情况下的渲染速度问题。组件的设计思想可以看这篇文章 https://zhuanlan.zhihu.com/p/55329238

    \n

    API#

    ","api":"

    VirtualList#

    \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
    参数说明类型默认值
    children渲染的子节点any-
    minSize最小加载数量Number1
    pageSize一屏数量Number10
    itemsRenderer父渲染函数，默认为 (items, ref) =>
      {items}


    签名:
    Function() => void    		Function(items, ref) => <ul ref={ref}>{items}</ul>
    threshold缓冲区高度Number100
    itemSizeGetter获取item高度的函数

    签名:
    Function() => void    		Function-
    jumpIndex设置跳转位置，需要设置 itemSizeGetter 才能生效, 不设置认为元素等高并取第一个元素高度作为默认高Number0
    \n"} \ No newline at end of file diff --git a/demos/badge/build/index.css b/demos/badge/build/index.css new file mode 100644 index 0000000000..1e7628362a --- /dev/null +++ b/demos/badge/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-badge{position:relative;display:inline-block;vertical-align:middle;line-height:1}.next-badge,.next-badge *,.next-badge :after,.next-badge :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-badge .next-badge-count{color:#fff;background:#ff3000;text-align:center;white-space:nowrap;border-radius:8px;position:absolute;width:auto;height:16px;min-width:8px;padding:0 4px;font-size:12px;line-height:16px;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);top:-.5em}.next-badge .next-badge-count a,.next-badge .next-badge-count a:hover{color:#fff}.next-badge .next-badge-dot{color:#fff;background:#ff3000;text-align:center;white-space:nowrap;border-radius:8px;position:absolute;width:8px;height:8px;min-width:8px;padding:0;font-size:1px;line-height:1;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);top:-.5em}.next-badge .next-badge-dot a,.next-badge .next-badge-dot a:hover{color:#fff}.next-badge .next-badge-custom{line-height:1.166667;white-space:nowrap;font-size:12px;padding-left:4px;padding-right:4px;border-radius:3px;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.next-badge .next-badge-custom>*{line-height:1}.next-badge .next-badge-custom>.next-icon:before,.next-badge .next-badge-custom>i:before{font-size:inherit;width:auto;vertical-align:top}.next-badge .next-badge-scroll-number{position:absolute;top:-4px;z-index:10;overflow:hidden;-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}.next-badge-scroll-number-only{position:relative;display:inline-block;transition:transform .3s cubic-bezier(.645,.045,.355,1),-webkit-transform .3s cubic-bezier(.645,.045,.355,1);min-width:8px}.next-badge-scroll-number-only span{display:block;height:16px;line-height:16px;font-size:12px}.next-badge-not-a-wrapper .next-badge-count,.next-badge-not-a-wrapper .next-badge-custom,.next-badge-not-a-wrapper .next-badge-dot{position:relative;display:block;top:auto;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.next-badge-list-wrapper{margin-left:0}.next-badge-list-wrapper li{margin-bottom:0;list-style:none}.next-badge[dir=rtl] .next-badge-custom{padding-right:4px;padding-left:4px}.next-badge[dir=rtl] .next-badge-scroll-number{left:0;-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit} \ No newline at end of file diff --git a/demos/badge/deps.json b/demos/badge/deps.json new file mode 100644 index 0000000000..139f1c2946 --- /dev/null +++ b/demos/badge/deps.json @@ -0,0 +1 @@ +["animate","demo-helper","icon"] \ No newline at end of file diff --git a/demos/badge/index.html b/demos/badge/index.html new file mode 100644 index 0000000000..11d4792460 --- /dev/null +++ b/demos/badge/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/balloon/build/index.css b/demos/balloon/build/index.css new file mode 100644 index 0000000000..c3e34c43ee --- /dev/null +++ b/demos/balloon/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-overlay-wrapper .next-overlay-inner{z-index:1001}.next-overlay-wrapper .next-overlay-backdrop{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;background:#000;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0}.next-overlay-wrapper.opened .next-overlay-backdrop{opacity:.2}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-balloon{position:absolute;max-width:300px;border-style:solid;border-radius:3px;word-wrap:break-word;z-index:0}.next-balloon,.next-balloon *,.next-balloon :after,.next-balloon :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-balloon:focus,.next-balloon :focus{outline:0}.next-balloon-primary{color:#333;border-color:#4494f9;background-color:#e3f2fd;-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.12);box-shadow:0 1px 3px 0 rgba(0,0,0,.12);border-width:1px}.next-balloon-primary .next-balloon-close{position:absolute;top:12px;right:12px;font-size:12px;color:#999}.next-balloon-primary .next-balloon-close .next-icon{width:12px;height:12px;line-height:12px}.next-balloon-primary .next-balloon-close .next-icon:before{width:12px;height:12px;font-size:12px;line-height:12px}.next-balloon-primary .next-balloon-close :hover{color:#333}.next-balloon-primary:after{position:absolute;width:12px;height:12px;content:" ";-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-sizing:content-box!important;box-sizing:content-box!important;border:1px solid #4494f9;background-color:#e3f2fd;z-index:-1}.next-balloon-primary.next-balloon-top:after{top:-7px;left:calc(50% + -7px);border-right:none;border-bottom:none;-webkit-box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-right:after{top:calc(50% + -7px);right:-7px;border-left:none;border-bottom:none;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-bottom:after{bottom:-7px;left:calc(50% + -7px);border-top:none;border-left:none;-webkit-box-shadow:1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-left:after{top:calc(50% + -7px)}.next-balloon-primary.next-balloon-left-top:after,.next-balloon-primary.next-balloon-left:after{left:-7px;border-top:none;border-right:none;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-left-top:after{top:12px}.next-balloon-primary.next-balloon-left-bottom:after{bottom:12px;left:-7px;border-top:none;border-right:none;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-right-top:after{top:12px}.next-balloon-primary.next-balloon-right-bottom:after,.next-balloon-primary.next-balloon-right-top:after{right:-7px;border-bottom:none;border-left:none;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-right-bottom:after{bottom:12px}.next-balloon-primary.next-balloon-top-left:after{left:12px}.next-balloon-primary.next-balloon-top-left:after,.next-balloon-primary.next-balloon-top-right:after{top:-7px;border-right:none;border-bottom:none;-webkit-box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-top-right:after{right:12px}.next-balloon-primary.next-balloon-bottom-left:after{left:12px}.next-balloon-primary.next-balloon-bottom-left:after,.next-balloon-primary.next-balloon-bottom-right:after{bottom:-7px;border-top:none;border-left:none;-webkit-box-shadow:1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-bottom-right:after{right:12px}.next-balloon-normal{color:#333;border-color:#dcdee3;background-color:#fff;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-width:1px}.next-balloon-normal .next-balloon-close{position:absolute;top:12px;right:12px;font-size:12px;color:#999}.next-balloon-normal .next-balloon-close .next-icon{width:12px;height:12px;line-height:12px}.next-balloon-normal .next-balloon-close .next-icon:before{width:12px;height:12px;font-size:12px;line-height:12px}.next-balloon-normal .next-balloon-close :hover{color:#666}.next-balloon-normal:after{position:absolute;width:12px;height:12px;content:" ";-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-sizing:content-box!important;box-sizing:content-box!important;border:1px solid #dcdee3;background-color:#fff;z-index:-1}.next-balloon-normal.next-balloon-top:after{top:-7px;left:calc(50% + -7px);border-right:none;border-bottom:none;-webkit-box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-right:after{top:calc(50% + -7px);right:-7px;border-left:none;border-bottom:none;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-bottom:after{bottom:-7px;left:calc(50% + -7px);border-top:none;border-left:none;-webkit-box-shadow:1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-left:after{top:calc(50% + -7px)}.next-balloon-normal.next-balloon-left-top:after,.next-balloon-normal.next-balloon-left:after{left:-7px;border-top:none;border-right:none;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-left-top:after{top:12px}.next-balloon-normal.next-balloon-left-bottom:after{bottom:12px;left:-7px;border-top:none;border-right:none;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-right-top:after{top:12px}.next-balloon-normal.next-balloon-right-bottom:after,.next-balloon-normal.next-balloon-right-top:after{right:-7px;border-bottom:none;border-left:none;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-right-bottom:after{bottom:12px}.next-balloon-normal.next-balloon-top-left:after{left:12px}.next-balloon-normal.next-balloon-top-left:after,.next-balloon-normal.next-balloon-top-right:after{top:-7px;border-right:none;border-bottom:none;-webkit-box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-top-right:after{right:12px}.next-balloon-normal.next-balloon-bottom-left:after{left:12px}.next-balloon-normal.next-balloon-bottom-left:after,.next-balloon-normal.next-balloon-bottom-right:after{bottom:-7px;border-top:none;border-left:none;-webkit-box-shadow:1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-bottom-right:after{right:12px}.next-balloon.visible{display:block}.next-balloon.hidden{display:none}.next-balloon-medium{padding:16px}.next-balloon-closable{padding:16px 40px 16px 16px}.next-balloon-tooltip{position:absolute;max-width:300px;border-radius:3px;font-size:12px;z-index:0;color:#333;border:1px solid #dcdee3;background-color:#f2f3f7;-webkit-box-shadow:none;box-shadow:none}.next-balloon-tooltip,.next-balloon-tooltip *,.next-balloon-tooltip :after,.next-balloon-tooltip :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-balloon-tooltip:after{position:absolute;width:12px;height:12px;content:" ";-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-sizing:content-box!important;box-sizing:content-box!important;border:1px solid #dcdee3;background-color:#f2f3f7;z-index:-1}.next-balloon-tooltip-top:after{top:-7px;left:calc(50% + -7px);border-right:none;border-bottom:none}.next-balloon-tooltip-right:after{top:calc(50% + -7px);right:-7px;border-left:none;border-bottom:none}.next-balloon-tooltip-bottom:after{bottom:-7px;left:calc(50% + -7px);border-top:none;border-left:none}.next-balloon-tooltip-left:after{top:calc(50% + -7px);left:-7px;border-top:none;border-right:none}.next-balloon-tooltip-left-top:after{top:12px;left:-7px;border-top:none;border-right:none}.next-balloon-tooltip-left-bottom:after{bottom:12px;left:-7px;border-top:none;border-right:none}.next-balloon-tooltip-right-top:after{top:12px;right:-7px;border-bottom:none;border-left:none}.next-balloon-tooltip-right-bottom:after{right:-7px;bottom:12px;border-bottom:none;border-left:none}.next-balloon-tooltip-top-left:after{top:-7px;left:12px;border-right:none;border-bottom:none}.next-balloon-tooltip-top-right:after{top:-7px;right:12px;border-right:none;border-bottom:none}.next-balloon-tooltip-bottom-left:after{bottom:-7px;left:12px;border-top:none;border-left:none}.next-balloon-tooltip-bottom-right:after{right:12px;bottom:-7px;border-top:none;border-left:none}.next-balloon-tooltip.visible{display:block}.next-balloon-tooltip.hidden{display:none}.next-balloon-tooltip-medium{padding:8px}.next-balloon[dir=rtl].next-balloon-primary .next-balloon-close{left:12px;right:auto}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-right:after{left:-7px;right:auto;border-right:none;border-top:none;border-left:inherit;border-bottom:inherit;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-left-bottom:after,.next-balloon[dir=rtl].next-balloon-primary.next-balloon-left-top:after,.next-balloon[dir=rtl].next-balloon-primary.next-balloon-left:after{right:-7px;left:auto;border-left:none;border-bottom:none;border-right:inherit;border-top:inherit;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-right-bottom:after,.next-balloon[dir=rtl].next-balloon-primary.next-balloon-right-top:after{left:-7px;right:auto;border-right:none;border-top:none;border-bottom:inherit;border-left:inherit;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-top-left:after{right:12px;left:auto}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-top-right:after{right:auto;left:12px}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-bottom-left:after{right:12px;left:auto}.next-balloon[dir=rtl].next-balloon-normal .next-balloon-close,.next-balloon[dir=rtl].next-balloon-primary.next-balloon-bottom-right:after{left:12px;right:auto}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-right:after{left:-7px;right:auto;border-right:none;border-top:none;border-left:inherit;border-bottom:inherit;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-left-bottom:after,.next-balloon[dir=rtl].next-balloon-normal.next-balloon-left-top:after,.next-balloon[dir=rtl].next-balloon-normal.next-balloon-left:after{right:-7px;left:auto;border-left:none;border-bottom:none;border-right:inherit;border-top:inherit;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-right-bottom:after,.next-balloon[dir=rtl].next-balloon-normal.next-balloon-right-top:after{left:-7px;right:auto;border-right:none;border-top:none;border-bottom:inherit;border-left:inherit;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-top-left:after{right:12px;left:auto}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-top-right:after{right:auto;left:12px}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-bottom-left:after{right:12px;left:auto}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-bottom-right:after{left:12px;right:auto}.next-balloon[dir=rtl].next-balloon-closable{padding:16px 16px 16px 40px}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-right:after{left:-7px;right:auto;border-top:none;border-right:none;border-left:inherit;border-bottom:inherit}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-left-bottom:after,.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-left-top:after,.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-left:after{right:-7px;left:auto;border-top:inherit;border-right:inherit;border-left:none;border-bottom:none}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-right-bottom:after,.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-right-top:after{left:-7px;right:auto;border-top:none;border-right:none;border-left:inherit;border-bottom:inherit}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-top-left:after{right:12px;left:auto}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-top-right:after{left:12px;right:auto}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-bottom-left:after{right:12px;left:auto}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-bottom-right:after{left:12px;right:auto}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-medium{padding:8px} \ No newline at end of file diff --git a/demos/balloon/deps.json b/demos/balloon/deps.json new file mode 100644 index 0000000000..90bdd01350 --- /dev/null +++ b/demos/balloon/deps.json @@ -0,0 +1 @@ +["animate","overlay","icon","demo-helper"] \ No newline at end of file diff --git a/demos/balloon/index.html b/demos/balloon/index.html new file mode 100644 index 0000000000..d6a5420eda --- /dev/null +++ b/demos/balloon/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/breadcrumb/build/index.css b/demos/breadcrumb/build/index.css new file mode 100644 index 0000000000..e7da322044 --- /dev/null +++ b/demos/breadcrumb/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-breadcrumb{display:block;margin:0;padding:0;height:16px;line-height:16px}.next-breadcrumb .next-breadcrumb-item{display:inline-block}.next-breadcrumb .next-breadcrumb-item .next-breadcrumb-text{display:inline-block;text-decoration:none;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.next-breadcrumb .next-breadcrumb-item .next-breadcrumb-text>b{font-weight:400}.next-breadcrumb .next-breadcrumb-item .next-breadcrumb-separator{display:inline-block;vertical-align:top}.next-breadcrumb .next-breadcrumb-text{height:16px;min-width:16px;font-size:12px;line-height:16px}.next-breadcrumb .next-breadcrumb-separator{height:16px;margin:0 8px;font-size:8px;line-height:16px}.next-breadcrumb .next-breadcrumb-separator .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-breadcrumb .next-breadcrumb-separator .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-breadcrumb .next-breadcrumb-separator .next-icon:before{width:16px;font-size:16px}}.next-breadcrumb .next-breadcrumb-text-ellipsis{font-size:12px}.next-breadcrumb .next-breadcrumb-text{color:#666}.next-breadcrumb .next-breadcrumb-text>b{color:#5584ff}.next-breadcrumb .next-breadcrumb-text>a{color:#666;text-decoration:none;text-align:center}.next-breadcrumb .next-breadcrumb-text.activated,.next-breadcrumb .next-breadcrumb-text.activated>a{color:#333;font-weight:400}.next-breadcrumb .next-breadcrumb-text-ellipsis{color:#666;cursor:default}.next-breadcrumb .next-breadcrumb-separator{color:#a0a2ad}.next-breadcrumb .next-breadcrumb-text:not(.next-breadcrumb-text-ellipsis):hover>a,.next-breadcrumb a.next-breadcrumb-text.activated:hover>a,.next-breadcrumb a.next-breadcrumb-text:not(.next-breadcrumb-text-ellipsis):hover,.next-breadcrumb a.next-breadcrumb-text:not(.next-breadcrumb-text-ellipsis):hover>b{color:#5584ff}.next-breadcrumb a.next-breadcrumb-text.activated:hover{color:#5584ff;font-weight:400} \ No newline at end of file diff --git a/demos/breadcrumb/deps.json b/demos/breadcrumb/deps.json new file mode 100644 index 0000000000..5a64617e5a --- /dev/null +++ b/demos/breadcrumb/deps.json @@ -0,0 +1 @@ +["icon","demo-helper","field"] \ No newline at end of file diff --git a/demos/breadcrumb/index.html b/demos/breadcrumb/index.html new file mode 100644 index 0000000000..10c59ea4f0 --- /dev/null +++ b/demos/breadcrumb/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/button/build/index.css b/demos/button/build/index.css new file mode 100644 index 0000000000..d0fa855c3c --- /dev/null +++ b/demos/button/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-btn,.next-btn *,.next-btn :after,.next-btn :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-btn::-moz-focus-inner{border:0;padding:0}.next-btn,.next-btn:active,.next-btn:focus,.next-btn:hover{outline:0}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-btn{position:relative;display:inline-block;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;text-align:center;text-transform:none;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;cursor:pointer}.next-btn:after{text-align:center;position:absolute;opacity:0;visibility:hidden;-webkit-transition:opacity .5s ease;transition:opacity .5s ease}.next-btn .next-icon.next-xs:before{vertical-align:baseline}.next-btn.hover,.next-btn:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn.next-small{border-radius:3px;padding:0 8px;height:20px;line-height:18px;font-size:12px;border-width:1px}.next-btn.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-small>.next-btn-icon.next-icon-alone:before,.next-btn.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small.next-btn-loading{padding-left:24px}.next-btn.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:8px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-small.next-btn-loading>.next-icon{display:none}.next-btn.next-medium{border-radius:3px;padding:0 12px;height:28px;line-height:26px;font-size:12px;border-width:1px}.next-btn.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium.next-btn-loading{padding-left:28px}.next-btn.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:12px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-medium.next-btn-loading>.next-icon{display:none}.next-btn.next-large{border-radius:3px;padding:0 16px;height:40px;line-height:38px;font-size:16px;border-width:1px}.next-btn.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-large>.next-btn-icon.next-icon-alone:before,.next-btn.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large.next-btn-loading{padding-left:36px}.next-btn.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:16px;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn.next-large.next-btn-loading>.next-icon{display:none}.next-btn.next-btn-normal{border-style:solid;background-color:#fff;border-color:#c4c6cf}.next-btn.next-btn-normal,.next-btn.next-btn-normal.visited,.next-btn.next-btn-normal:link,.next-btn.next-btn-normal:visited{color:#333}.next-btn.next-btn-normal.active,.next-btn.next-btn-normal.hover,.next-btn.next-btn-normal:active,.next-btn.next-btn-normal:focus,.next-btn.next-btn-normal:hover{color:#333;background-color:#f2f3f7;border-color:#a0a2ad;text-decoration:none}.next-btn.next-btn-primary{border-style:solid;background-color:#5584ff;border-color:transparent}.next-btn.next-btn-primary,.next-btn.next-btn-primary.visited,.next-btn.next-btn-primary:link,.next-btn.next-btn-primary:visited{color:#fff}.next-btn.next-btn-primary.active,.next-btn.next-btn-primary.hover,.next-btn.next-btn-primary:active,.next-btn.next-btn-primary:focus,.next-btn.next-btn-primary:hover{color:#fff;background-color:#3e71f7;border-color:transparent;text-decoration:none}.next-btn.next-btn-secondary{border-style:solid;background-color:#fff;border-color:#5584ff}.next-btn.next-btn-secondary,.next-btn.next-btn-secondary.visited,.next-btn.next-btn-secondary:link,.next-btn.next-btn-secondary:visited{color:#5584ff}.next-btn.next-btn-secondary.active,.next-btn.next-btn-secondary.hover,.next-btn.next-btn-secondary:active,.next-btn.next-btn-secondary:focus,.next-btn.next-btn-secondary:hover{color:#fff;background-color:#3e71f7;border-color:#3e71f7;text-decoration:none}.next-btn.disabled,.next-btn[disabled]{cursor:not-allowed;background-color:#f7f8fa;border-color:#e6e7eb}.next-btn.disabled,.next-btn.disabled.visited,.next-btn.disabled:link,.next-btn.disabled:visited,.next-btn[disabled],.next-btn[disabled].visited,.next-btn[disabled]:link,.next-btn[disabled]:visited{color:#ccc}.next-btn.disabled.active,.next-btn.disabled.hover,.next-btn.disabled:active,.next-btn.disabled:focus,.next-btn.disabled:hover,.next-btn[disabled].active,.next-btn[disabled].hover,.next-btn[disabled]:active,.next-btn[disabled]:focus,.next-btn[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-warning{border-style:solid}.next-btn-warning.next-btn-primary{background-color:#ff3000;border-color:#ff3000}.next-btn-warning.next-btn-primary,.next-btn-warning.next-btn-primary.visited,.next-btn-warning.next-btn-primary:link,.next-btn-warning.next-btn-primary:visited{color:#fff}.next-btn-warning.next-btn-primary.active,.next-btn-warning.next-btn-primary.hover,.next-btn-warning.next-btn-primary:active,.next-btn-warning.next-btn-primary:focus,.next-btn-warning.next-btn-primary:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary[disabled]{background-color:#f7f8fa;border-color:#dcdee3}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary.disabled.visited,.next-btn-warning.next-btn-primary.disabled:link,.next-btn-warning.next-btn-primary.disabled:visited,.next-btn-warning.next-btn-primary[disabled],.next-btn-warning.next-btn-primary[disabled].visited,.next-btn-warning.next-btn-primary[disabled]:link,.next-btn-warning.next-btn-primary[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-primary.disabled.active,.next-btn-warning.next-btn-primary.disabled.hover,.next-btn-warning.next-btn-primary.disabled:active,.next-btn-warning.next-btn-primary.disabled:focus,.next-btn-warning.next-btn-primary.disabled:hover,.next-btn-warning.next-btn-primary[disabled].active,.next-btn-warning.next-btn-primary[disabled].hover,.next-btn-warning.next-btn-primary[disabled]:active,.next-btn-warning.next-btn-primary[disabled]:focus,.next-btn-warning.next-btn-primary[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#dcdee3;text-decoration:none}.next-btn-warning.next-btn-normal{background-color:#fff;border-color:#ff3000}.next-btn-warning.next-btn-normal,.next-btn-warning.next-btn-normal.visited,.next-btn-warning.next-btn-normal:link,.next-btn-warning.next-btn-normal:visited{color:#ff3000}.next-btn-warning.next-btn-normal.active,.next-btn-warning.next-btn-normal.hover,.next-btn-warning.next-btn-normal:active,.next-btn-warning.next-btn-normal:focus,.next-btn-warning.next-btn-normal:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal[disabled]{background-color:#f7f8fa;border-color:#e6e7eb}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal.disabled.visited,.next-btn-warning.next-btn-normal.disabled:link,.next-btn-warning.next-btn-normal.disabled:visited,.next-btn-warning.next-btn-normal[disabled],.next-btn-warning.next-btn-normal[disabled].visited,.next-btn-warning.next-btn-normal[disabled]:link,.next-btn-warning.next-btn-normal[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-normal.disabled.active,.next-btn-warning.next-btn-normal.disabled.hover,.next-btn-warning.next-btn-normal.disabled:active,.next-btn-warning.next-btn-normal.disabled:focus,.next-btn-warning.next-btn-normal.disabled:hover,.next-btn-warning.next-btn-normal[disabled].active,.next-btn-warning.next-btn-normal[disabled].hover,.next-btn-warning.next-btn-normal[disabled]:active,.next-btn-warning.next-btn-normal[disabled]:focus,.next-btn-warning.next-btn-normal[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-text{border-radius:0}.next-btn-text,.next-btn-text.hover,.next-btn-text:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn-text.next-btn-primary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-primary,.next-btn-text.next-btn-primary.visited,.next-btn-text.next-btn-primary:link,.next-btn-text.next-btn-primary:visited{color:#5584ff}.next-btn-text.next-btn-primary.active,.next-btn-text.next-btn-primary.hover,.next-btn-text.next-btn-primary:active,.next-btn-text.next-btn-primary:focus,.next-btn-text.next-btn-primary:hover{color:#3e71f7;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-secondary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-secondary,.next-btn-text.next-btn-secondary.visited,.next-btn-text.next-btn-secondary:link,.next-btn-text.next-btn-secondary:visited{color:#666}.next-btn-text.next-btn-secondary.active,.next-btn-text.next-btn-secondary.hover,.next-btn-text.next-btn-secondary:active,.next-btn-text.next-btn-secondary:focus,.next-btn-text.next-btn-secondary:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-normal{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-normal,.next-btn-text.next-btn-normal.visited,.next-btn-text.next-btn-normal:link,.next-btn-text.next-btn-normal:visited{color:#333}.next-btn-text.next-btn-normal.active,.next-btn-text.next-btn-normal.hover,.next-btn-text.next-btn-normal:active,.next-btn-text.next-btn-normal:focus,.next-btn-text.next-btn-normal:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-large{border-radius:0;padding:0;height:24px;line-height:24px;font-size:14px;border-width:0}.next-btn-text.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-large>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large.next-btn-loading{padding-left:20px}.next-btn-text.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:0;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn-text.next-large.next-btn-loading>.next-icon{display:none}.next-btn-text.next-medium{border-radius:0;padding:0;height:20px;line-height:20px;font-size:12px;border-width:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium.next-btn-loading{padding-left:16px}.next-btn-text.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-medium.next-btn-loading>.next-icon{display:none}.next-btn-text.next-small{border-radius:0;padding:0;height:16px;line-height:16px;font-size:12px;border-width:0}.next-btn-text.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-small>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small.next-btn-loading{padding-left:16px}.next-btn-text.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-small.next-btn-loading>.next-icon{display:none}.next-btn-text.disabled,.next-btn-text[disabled]{background-color:transparent;border-color:transparent}.next-btn-text.disabled,.next-btn-text.disabled.visited,.next-btn-text.disabled:link,.next-btn-text.disabled:visited,.next-btn-text[disabled],.next-btn-text[disabled].visited,.next-btn-text[disabled]:link,.next-btn-text[disabled]:visited{color:#ccc}.next-btn-text.disabled.active,.next-btn-text.disabled.hover,.next-btn-text.disabled:active,.next-btn-text.disabled:focus,.next-btn-text.disabled:hover,.next-btn-text[disabled].active,.next-btn-text[disabled].hover,.next-btn-text[disabled]:active,.next-btn-text[disabled]:focus,.next-btn-text[disabled]:hover{color:#ccc;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-loading{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-loading,.next-btn-text.next-btn-loading.visited,.next-btn-text.next-btn-loading:link,.next-btn-text.next-btn-loading:visited{color:#333}.next-btn-text.next-btn-loading.active,.next-btn-text.next-btn-loading.hover,.next-btn-text.next-btn-loading:active,.next-btn-text.next-btn-loading:focus,.next-btn-text.next-btn-loading:hover{color:#333;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-loading{pointer-events:none}.next-btn-loading:after{font-family:NextIcon;content:"\E646";opacity:1;visibility:visible;-webkit-animation:loadingCircle 2s infinite linear;animation:loadingCircle 2s infinite linear}.next-btn-ghost{-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-btn-ghost.next-btn-dark{background-color:transparent;border-color:#fff}.next-btn-ghost.next-btn-dark,.next-btn-ghost.next-btn-dark.visited,.next-btn-ghost.next-btn-dark:link,.next-btn-ghost.next-btn-dark:visited{color:#fff}.next-btn-ghost.next-btn-dark.active,.next-btn-ghost.next-btn-dark.hover,.next-btn-ghost.next-btn-dark:active,.next-btn-ghost.next-btn-dark:focus,.next-btn-ghost.next-btn-dark:hover{color:#fff;background-color:hsla(0,0%,100%,.8);border-color:#fff;text-decoration:none}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark[disabled]{background-color:transparent;border-color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark.disabled.visited,.next-btn-ghost.next-btn-dark.disabled:link,.next-btn-ghost.next-btn-dark.disabled:visited,.next-btn-ghost.next-btn-dark[disabled],.next-btn-ghost.next-btn-dark[disabled].visited,.next-btn-ghost.next-btn-dark[disabled]:link,.next-btn-ghost.next-btn-dark[disabled]:visited{color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled.active,.next-btn-ghost.next-btn-dark.disabled.hover,.next-btn-ghost.next-btn-dark.disabled:active,.next-btn-ghost.next-btn-dark.disabled:focus,.next-btn-ghost.next-btn-dark.disabled:hover,.next-btn-ghost.next-btn-dark[disabled].active,.next-btn-ghost.next-btn-dark[disabled].hover,.next-btn-ghost.next-btn-dark[disabled]:active,.next-btn-ghost.next-btn-dark[disabled]:focus,.next-btn-ghost.next-btn-dark[disabled]:hover{color:hsla(0,0%,100%,.4);background-color:transparent;border-color:hsla(0,0%,100%,.4);text-decoration:none}.next-btn-ghost.next-btn-light{background-color:transparent;border-color:#333}.next-btn-ghost.next-btn-light,.next-btn-ghost.next-btn-light.visited,.next-btn-ghost.next-btn-light:link,.next-btn-ghost.next-btn-light:visited{color:#333}.next-btn-ghost.next-btn-light.active,.next-btn-ghost.next-btn-light.hover,.next-btn-ghost.next-btn-light:active,.next-btn-ghost.next-btn-light:focus,.next-btn-ghost.next-btn-light:hover{color:#999;background-color:rgba(0,0,0,.92);border-color:#333;text-decoration:none}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light[disabled]{background-color:transparent;border-color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light.disabled.visited,.next-btn-ghost.next-btn-light.disabled:link,.next-btn-ghost.next-btn-light.disabled:visited,.next-btn-ghost.next-btn-light[disabled],.next-btn-ghost.next-btn-light[disabled].visited,.next-btn-ghost.next-btn-light[disabled]:link,.next-btn-ghost.next-btn-light[disabled]:visited{color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled.active,.next-btn-ghost.next-btn-light.disabled.hover,.next-btn-ghost.next-btn-light.disabled:active,.next-btn-ghost.next-btn-light.disabled:focus,.next-btn-ghost.next-btn-light.disabled:hover,.next-btn-ghost.next-btn-light[disabled].active,.next-btn-ghost.next-btn-light[disabled].hover,.next-btn-ghost.next-btn-light[disabled]:active,.next-btn-ghost.next-btn-light[disabled]:focus,.next-btn-ghost.next-btn-light[disabled]:hover{color:rgba(0,0,0,.1);background-color:transparent;border-color:rgba(0,0,0,.1);text-decoration:none}.next-btn-group{position:relative;display:inline-block;vertical-align:middle}.next-btn-group>.next-btn{position:relative;float:left;-webkit-box-shadow:none;box-shadow:none}.next-btn-group>.next-btn.active,.next-btn-group>.next-btn:active,.next-btn-group>.next-btn:focus,.next-btn-group>.next-btn:hover{z-index:1}.next-btn-group>.next-btn.disabled,.next-btn-group>.next-btn[disabled]{z-index:0}.next-btn-group .next-btn.next-btn{margin:0 0 0 -1px}.next-btn-group .next-btn:not(:first-child):not(:last-child){border-radius:0}.next-btn-group>.next-btn:first-child{margin:0}.next-btn-group>.next-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group>.next-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group>.next-btn-primary:not(:first-child){border-left-color:hsla(0,0%,100%,.2)}.next-btn-group>.next-btn-primary:not(:first-child):hover{border-left-color:transparent}.next-btn-group>.next-btn-primary:not(:first-child).disabled,.next-btn-group>.next-btn-primary:not(:first-child)[disabled]{border-left-color:#e6e7eb}.next-btn-group[dir=rtl]>.next-btn{float:right}.next-btn-group[dir=rtl] .next-btn.next-btn{margin:0 -1px 0 0}.next-btn-group[dir=rtl]>.next-btn:first-child:not(:last-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group[dir=rtl]>.next-btn:last-child:not(:first-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child){border-right-color:hsla(0,0%,100%,.2)}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child):hover{border-right-color:transparent}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child).disabled,.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child)[disabled]{border-right-color:#e6e7eb}.next-btn.next-small[dir=rtl]{border-radius:3px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl].next-btn-loading{padding-left:8px;padding-right:24px}.next-btn.next-small[dir=rtl].next-btn-loading:after{right:8px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-medium[dir=rtl]{border-radius:3px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl].next-btn-loading{padding-left:12px;padding-right:28px}.next-btn.next-medium[dir=rtl].next-btn-loading:after{right:12px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-large[dir=rtl]{border-radius:3px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl].next-btn-loading{padding-left:16px;padding-right:36px}.next-btn.next-large[dir=rtl].next-btn-loading:after{right:16px;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-large{border-radius:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large.next-btn-loading{padding-left:0;padding-right:20px}.next-btn-text[dir=rtl].next-large.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-medium{border-radius:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-medium.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-small{border-radius:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-small.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px} \ No newline at end of file diff --git a/demos/button/deps.json b/demos/button/deps.json new file mode 100644 index 0000000000..963cf92bcf --- /dev/null +++ b/demos/button/deps.json @@ -0,0 +1 @@ +["icon","demo-helper"] \ No newline at end of file diff --git a/demos/button/index.html b/demos/button/index.html new file mode 100644 index 0000000000..e5bb64d243 --- /dev/null +++ b/demos/button/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/calendar/build/index.css b/demos/calendar/build/index.css new file mode 100644 index 0000000000..70883401fa --- /dev/null +++ b/demos/calendar/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-overlay-wrapper .next-overlay-inner{z-index:1001}.next-overlay-wrapper .next-overlay-backdrop{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;background:#000;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0}.next-overlay-wrapper.opened .next-overlay-backdrop{opacity:.2}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-radio-button-large[dir=rtl]>label:first-child{margin-left:-1px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.next-radio-button-large[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large[dir=rtl] .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-wrapper[dir=rtl] .next-radio-label{margin-left:0;margin-right:4px}.next-radio-group[dir=rtl] .next-radio-label{margin-right:4px;margin-left:16px}.next-radio-button[dir=rtl]>label .next-radio-label{margin:0}.next-radio-wrapper{outline:0}.next-radio-wrapper .next-radio{display:inline-block;vertical-align:middle;position:relative;line-height:1}.next-radio-wrapper .next-radio,.next-radio-wrapper .next-radio *,.next-radio-wrapper .next-radio :after,.next-radio-wrapper .next-radio :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-radio-wrapper .next-radio input[type=radio]{opacity:0;position:absolute;vertical-align:middle;top:0;left:0;width:16px;height:16px;margin:0}.next-radio-wrapper .next-radio-inner{display:block;width:16px;height:16px;background:#fff;border-radius:50%;border:1px solid #c4c6cf;-webkit-transition:all .36s ease 0s;transition:all .36s ease 0s;-webkit-box-shadow:none;box-shadow:none}.next-radio-wrapper .next-radio-inner:after{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;border-radius:50%;top:50%;margin-top:-2px;left:50%;margin-left:-2px;background:#fff;content:" ";-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86)}.next-radio-wrapper.checked .next-radio-inner{border-color:#5584ff;background:#5584ff}.next-radio-wrapper.checked .next-radio-inner:after{width:4px;height:4px;font-weight:700;background:#fff;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.next-radio-wrapper.checked.hovered .next-radio-inner,.next-radio-wrapper.checked:hover .next-radio-inner{border-color:transparent}.next-radio-wrapper.disabled input[type=radio]{cursor:not-allowed}.next-radio-wrapper.disabled .next-radio-inner{border-color:#e6e7eb;background:#f7f8fa}.next-radio-wrapper.disabled.checked .next-radio-inner,.next-radio-wrapper.disabled .next-radio-inner.hovered,.next-radio-wrapper.disabled .next-radio-inner:hover{border-color:#e6e7eb}.next-radio-wrapper.disabled.checked .next-radio-inner:after{background:#ccc}.next-radio-wrapper:not(.disabled).focused .next-radio-inner,.next-radio-wrapper:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper:not(.disabled):focus .next-radio-inner,.next-radio-wrapper:not(.disabled):hover .next-radio-inner{border-color:#5584ff;background-color:#dee8ff}.next-radio-wrapper.checked.focused .next-radio-inner,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner{border-color:transparent;background:#3e71f7}.next-radio-wrapper.checked.focused .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner:after{background:#fff}.next-radio-button .next-radio,.next-radio-button input[type=radio]{width:0;height:0}.next-radio-button>label{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1;margin:0 0 0 -1px;border:1px solid #c4c6cf;background-color:#fff;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;vertical-align:middle}.next-radio-button>label .next-radio-label{display:block;color:#333;margin:0;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}.next-radio-button>label.hovered,.next-radio-button>label:focus,.next-radio-button>label:hover{z-index:10;border-color:#a0a2ad;background-color:#f2f3f7}.next-radio-button>label.hovered .next-radio-label,.next-radio-button>label:focus .next-radio-label,.next-radio-button>label:hover .next-radio-label{color:#333}.next-radio-button>label.checked{z-index:11;border-color:#5584ff;background-color:#fff}.next-radio-button>label.checked .next-radio-label{color:#5584ff}.next-radio-button>label.disabled{z-index:0;cursor:not-allowed;border-color:#e6e7eb;background-color:#f7f8fa}.next-radio-button>label.disabled .next-radio-label{color:#ccc}.next-radio-button>label.checked.disabled{z-index:0;border-color:#e6e7eb;background-color:#f2f3f7}.next-radio-button>label.checked.disabled .next-radio-label{color:#ccc}.next-radio-button-large>label{padding:0 8px;height:40px;line-height:40px}.next-radio-button-large>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-large .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium>label{padding:0 8px;height:28px;line-height:28px}.next-radio-button-medium>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-medium>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium .next-radio-label{height:26px;line-height:26px;font-size:12px}.next-radio-button-small>label{padding:0 8px;height:20px;line-height:20px}.next-radio-button-small>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small .next-radio-label{height:18px;line-height:18px;font-size:12px}.next-radio-single-input input[type=radio]{opacity:0;position:absolute;top:0;left:0;margin:0}.next-radio-group{display:inline-block}.next-radio-group .next-radio-label{color:#333;margin-right:16px}.next-radio-group.disabled .next-radio-label{color:#ccc}.next-radio-group-ver .next-radio-wrapper{display:block;margin-bottom:8px}.next-radio-label{margin:0;margin-left:4px;font-size:12px;vertical-align:middle;line-height:1}@-moz-document url-prefix(){.next-radio{margin-top:-1px}@supports ((-webkit-animation:calc(0s)) or (animation:calc(0s))){.next-radio{margin-top:-3px}}}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}@-webkit-keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}@keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}.next-tag>.next-tag-body{overflow:hidden;text-overflow:ellipsis}.next-tag-checkable.next-tag-level-secondary{color:#333;border-color:transparent;background-color:transparent}.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):hover{color:#5584ff}.next-tag-closable.next-tag-level-primary,.next-tag-default.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-primary,.disabled.next-tag-default.next-tag-level-primary,[disabled].next-tag-closable.next-tag-level-primary,[disabled].next-tag-default.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.disabled.next-tag-default.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-checkable.next-tag-level-primary,[disabled].next-tag-checkable.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary.checked{color:#fff;border-color:#5584ff;background-color:#5584ff}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover{color:#fff;border-color:#3e71f7;background-color:#3e71f7}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked>.next-tag-close-btn{color:#fff}.next-tag-default.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-default.next-tag-level-normal,[disabled].next-tag-default.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.disabled.next-tag-default.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-closable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-normal,[disabled].next-tag-closable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:transparent}.disabled.next-tag-closable.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-normal.checked,.next-tag-checkable.next-tag-level-secondary.checked{color:#5584ff;border-color:#5584ff;background-color:transparent}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover{color:#3e71f7;border-color:#3e71f7;background-color:transparent}.next-tag-checkable.next-tag-level-secondary.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-secondary.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-secondary.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-secondary.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-secondary.checked:after{color:#fff}.next-tag-checkable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#c4c6cf;background-color:transparent}.disabled.next-tag-checkable.next-tag-level-normal,[disabled].next-tag-checkable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-normal.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-normal.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-normal.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-normal.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-normal.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-normal.checked:after{color:#fff}.next-tag-closable.next-tag-level-normal:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#c4c6cf;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-closable.next-tag-level-normal:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E626";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:before{background-color:#a0a2ad}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-closable.next-tag-level-normal:disabled:before,[disabled].next-tag-closable.next-tag-level-normal:before{background-color:#e6e7eb}.next-tag-closable.next-tag-level-normal:disabled:after,[disabled].next-tag-closable.next-tag-level-normal:after{color:#fff}.next-tag-group .next-tag-large,.next-tag-group .next-tag-medium{margin-right:8px;margin-bottom:8px}.next-tag-group .next-tag-small{margin-right:4px;margin-bottom:4px}.next-tag{display:inline-block;max-width:100%;vertical-align:middle;border-width:1px;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid;overflow:hidden;white-space:nowrap;-webkit-transition:all .2s cubic-bezier(.23,1,.32,1);transition:all .2s cubic-bezier(.23,1,.32,1);font-size:0;outline:0}.next-tag,.next-tag *,.next-tag :after,.next-tag :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tag>.next-tag-body{position:relative;display:inline-block;height:100%;text-align:center;vertical-align:middle;max-width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.next-tag>.next-tag-body>a{text-decoration:none;color:inherit}.next-tag>.next-tag-body>a:before{content:" ";position:absolute;display:block;top:0;left:0;right:0;bottom:0}.next-tag>.next-tag-body .next-icon{line-height:1;vertical-align:middle}.next-tag>.next-tag-body .next-icon:before{font-size:inherit}.next-tag.next-tag-body-pointer{cursor:pointer}.next-tag.disabled,.next-tag[disabled]{cursor:not-allowed;pointer-events:none}.next-tag-large{height:40px;padding:0;line-height:38px;font-size:0}.next-tag-large>.next-tag-body{font-size:16px;padding:0 16px;min-width:48px}.next-tag-large.next-tag-closable>.next-tag-body{padding:0 0 0 16px}.next-tag-large[dir=rtl].next-tag-closable>.next-tag-body{padding:0 16px 0 0}.next-tag-large>.next-tag-close-btn{margin-left:12px;padding-right:16px}.next-tag-large>.next-tag-close-btn .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tag-large[dir=rtl]>.next-tag-close-btn{margin-right:12px;margin-left:0;padding-right:0;padding-left:16px}.next-tag-medium{height:28px;padding:0;line-height:26px;font-size:0}.next-tag-medium>.next-tag-body{font-size:14px;padding:0 12px;min-width:40px}.next-tag-medium.next-tag-closable>.next-tag-body{padding:0 0 0 12px}.next-tag-medium[dir=rtl].next-tag-closable>.next-tag-body{padding:0 12px 0 0}.next-tag-medium>.next-tag-close-btn{margin-left:8px;padding-right:12px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-medium>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-medium[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:12px}.next-tag-small{height:20px;padding:0;line-height:18px;font-size:0}.next-tag-small>.next-tag-body{font-size:12px;padding:0 8px;min-width:28px}.next-tag-small.next-tag-closable>.next-tag-body{padding:0 0 0 8px}.next-tag-small[dir=rtl].next-tag-closable>.next-tag-body{padding:0 8px 0 0}.next-tag-small>.next-tag-close-btn{margin-left:8px;padding-right:8px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-small>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-small[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:8px}.next-tag-default{cursor:default}.next-tag-closable{position:relative}.next-tag-closable.next-tag-large>.next-tag-body{max-width:calc(100% - 40px)}.next-tag-closable.next-tag-medium>.next-tag-body{max-width:calc(100% - 28px)}.next-tag-closable.next-tag-small>.next-tag-body{max-width:calc(100% - 20px)}.next-tag-closable>.next-tag-close-btn{display:inline-block;vertical-align:middle;height:100%;text-align:center;cursor:pointer}.next-tag-closable.next-tag-level-normal.disabled,.next-tag-closable.next-tag-level-normal[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable{cursor:pointer;position:relative;border-radius:3px}.next-tag-checkable.checked:before{-webkit-animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.checked:after{-webkit-animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86);animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):before{right:-10px;bottom:-10px;width:20px;height:20px}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):after{font-size:8px;line-height:8px;right:0;bottom:0}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):before{right:-14px;bottom:-14px;width:28px;height:28px}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):after{font-size:12px;line-height:12px;right:0;bottom:0}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):before{right:-18px;bottom:-18px;width:36px;height:36px}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):after{font-size:16px;line-height:16px;right:0;bottom:0}.next-tag-checkable.next-tag-level-primary.disabled,.next-tag-checkable.next-tag-level-primary[disabled]{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-secondary.disabled,.next-tag-checkable.next-tag-level-secondary[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-zoom-appear,.next-tag-zoom-enter{-webkit-animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-tag-zoom-leave{-webkit-animation:zoomOut .3s ease-in;animation:zoomOut .3s ease-in;-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-checkbox-wrapper[dir=rtl]{margin-right:8px;margin-left:0}.next-checkbox-wrapper[dir=rtl]:first-child{margin-right:0}.next-checkbox-wrapper[dir=rtl]>.next-checkbox-label{margin-right:4px;margin-left:0}.next-checkbox-wrapper,.next-checkbox-wrapper *,.next-checkbox-wrapper :after,.next-checkbox-wrapper :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-checkbox-wrapper .next-checkbox{display:inline-block;position:relative;line-height:1;vertical-align:middle}.next-checkbox-wrapper input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:16px;height:16px;margin:0}.next-checkbox-wrapper .next-checkbox-inner{display:block;width:16px;height:16px;background:#fff;border-radius:3px;border:1px solid #c4c6cf;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;text-align:left;-webkit-box-shadow:none;box-shadow:none}.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;top:0;opacity:0;line-height:16px;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);color:#fff;left:4px;margin-left:0}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{vertical-align:top;margin-top:0}.next-checkbox-wrapper.checked .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.checked .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);margin-left:0}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.indeterminate .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.indeterminate .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1);margin-left:0}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.disabled input[type=checkbox]{cursor:not-allowed}.next-checkbox-wrapper.disabled .next-checkbox-inner{border-color:#e6e7eb;background:#f7f8fa}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover{border-color:#e6e7eb}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner>.next-icon{color:#ccc;opacity:1}.next-checkbox-wrapper.focused .next-checkbox-inner,.next-checkbox-wrapper.hovered .next-checkbox-inner,.next-checkbox-wrapper:not(.disabled):hover .next-checkbox-inner{border-color:#5584ff;background-color:#dee8ff}.next-checkbox-wrapper.checked.focused .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner{border-color:transparent;background-color:#3e71f7}.next-checkbox-wrapper.checked.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner>.next-icon{color:#fff;opacity:1}.next-checkbox-group .next-checkbox-wrapper{margin-left:8px}.next-checkbox-group .next-checkbox-wrapper:first-child{margin-left:0}.next-checkbox-group-ver .next-checkbox-wrapper{display:block;margin-left:0;margin-right:0;margin-bottom:8px}.next-checkbox-label{font-size:12px;vertical-align:middle;margin:0;margin-left:4px;line-height:1}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-menu[dir=rtl] .next-menu-item-helper{float:left}.next-menu[dir=rtl] .next-menu-item .next-checkbox,.next-menu[dir=rtl] .next-menu-item .next-radio{margin-left:4px;margin-right:0}.next-menu[dir=rtl] .next-menu-hoz-right{float:left}.next-menu[dir=rtl] .next-menu-hoz-icon-arrow.next-icon{left:6px;right:auto}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon{margin-left:0;margin-right:-16px}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon.next-menu-icon-right{right:auto;left:4px}.next-menu[dir=rtl] .next-menu-icon-arrow.next-icon{left:10px;right:auto}.next-menu{position:relative;min-width:100px;padding:8px 0;margin:0;list-style:none;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;background:#fff;line-height:32px;font-size:12px}.next-menu,.next-menu *,.next-menu :after,.next-menu :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-menu:focus,.next-menu :focus{outline:0}.next-menu-embeddable,.next-menu-embeddable .next-menu-item.next-disabled,.next-menu-embeddable .next-menu-item.next-disabled .next-menu-item-text>a{background:initial;border:none}.next-menu-embeddable .next-menu-item-inner{height:100%}.next-menu-content{position:relative}.next-menu-content,.next-menu-sub-menu{padding:0;margin:0;list-style:none}.next-menu-sub-menu.next-expand-enter{overflow:hidden}.next-menu-sub-menu.next-expand-enter-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-sub-menu.next-expand-leave{overflow:hidden}.next-menu-sub-menu.next-expand-leave-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-item{position:relative;padding:0 20px;-webkit-transition:background .2s ease;transition:background .2s ease;color:#333;cursor:pointer}.next-menu-item-helper{float:right;color:#999;font-style:normal;font-size:12px}.next-menu-item .next-checkbox,.next-menu-item .next-radio{margin-right:4px}.next-menu-item.next-selected{color:#333;background-color:#fff}.next-menu-item.next-selected .next-menu-icon-arrow{color:#666}.next-menu-item.next-selected .next-menu-icon-selected{color:#5584ff}.next-menu-item.next-disabled,.next-menu-item.next-disabled .next-menu-item-text>a{color:#ccc;background-color:#fff;cursor:not-allowed}.next-menu-item.next-disabled .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-icon-selected,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-selected{color:#ccc}.next-menu-item:not(.next-disabled).next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover,.next-menu-item:not(.next-disabled).next-selected:focus,.next-menu-item:not(.next-disabled).next-selected:focus:hover,.next-menu-item:not(.next-disabled).next-selected:hover,.next-menu-item:not(.next-disabled):hover{color:#333;background-color:#f2f3f7}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled):hover .next-menu-icon-arrow{color:#333}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled):hover .next-menu-icon-selected{color:#5584ff}.next-menu-item-inner{height:32px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.next-menu-item-text{vertical-align:middle}.next-menu-item-text>a{display:inline-block;text-decoration:none;color:#333}.next-menu-item-text>a:before{position:absolute;background-color:transparent;top:0;left:0;bottom:0;right:0;content:""}.next-menu.next-hoz{padding:0}.next-menu.next-hoz .next-menu-content>.next-menu-item,.next-menu.next-hoz>.next-menu-item{display:inline-block;vertical-align:top}.next-menu.next-hoz .next-menu-content,.next-menu.next-hoz .next-menu-footer,.next-menu.next-hoz .next-menu-header{display:inline-block}.next-menu-hoz-right{float:right}.next-menu-group-label{padding:0 12px;color:#999}.next-menu-divider{margin:8px 12px;border-bottom:1px solid #e6e7eb}.next-menu .next-menu-icon-selected.next-icon{position:absolute;top:0;margin-left:-16px}.next-menu .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-icon-selected.next-icon.next-menu-icon-right{right:4px}.next-menu .next-menu-icon-arrow.next-icon{position:absolute;top:0;right:10px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-icon-arrow.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow.next-icon:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-icon-arrow-down.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:scale(.5) rotate(180deg);-ms-transform:scale(.5) rotate(180deg);transform:scale(.5) rotate(180deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-down.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.next-menu .next-menu-icon-arrow-right.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:scale(.5) rotate(-90deg);-ms-transform:scale(.5) rotate(-90deg);transform:scale(.5) rotate(-90deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-right.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-hoz-icon-arrow.next-icon{position:absolute;top:0;right:6px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-hoz-icon-arrow.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-hoz-icon-arrow.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-hoz-icon-arrow.next-open:before{width:12px;font-size:12px;line-height:inherit}.next-menu.next-context{line-height:24px}.next-menu.next-context .next-menu-item-inner{height:24px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-input{vertical-align:middle;display:inline-table;border-collapse:separate;font-size:0;line-height:1;width:200px;border-spacing:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;border:1px solid #c4c6cf;background-color:#fff}.next-input,.next-input *,.next-input :after,.next-input :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input input{height:100%}.next-input input[type=reset],.next-input input[type=submit]{-webkit-appearance:button;cursor:pointer}.next-input input::-moz-focus-inner{border:0;padding:0}.next-input input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset}.next-input textarea{resize:none}.next-input input,.next-input textarea{width:100%;border:none;outline:none;padding:0;margin:0;font-weight:400;vertical-align:middle;background-color:transparent;color:#333}.next-input input::-ms-clear,.next-input textarea::-ms-clear{display:none}.next-input.next-input-textarea{border-radius:3px;font-size:0}.next-input.next-input-textarea textarea{color:#333;padding:4px 8px;font-size:12px;border-radius:3px}.next-input.next-input-textarea .next-input-control{display:block;width:auto;border-radius:3px}.next-input.next-input-textarea .next-input-len{padding:0 8px 4px;display:block;text-align:right;width:auto}.next-input.next-small{height:20px;border-radius:3px}.next-input.next-small .next-input-label{padding-left:8px;font-size:12px}.next-input.next-small .next-input-inner{font-size:12px}.next-input.next-small .next-input-control{padding-right:4px}.next-input.next-small input{height:18px;line-height:18px \0;padding:0 4px;font-size:12px}.next-input.next-small input::-webkit-input-placeholder{font-size:12px}.next-input.next-small input::-moz-placeholder{font-size:12px}.next-input.next-small input::-ms-input-placeholder{font-size:12px}.next-input.next-small input::placeholder{font-size:12px}.next-input.next-small .next-input-text-field{padding:0 4px;font-size:12px;height:18px;line-height:18px}.next-input.next-small .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-small input{border-radius:3px}.next-input.next-small .next-input-control{border-radius:0 3px 3px 0}.next-input.next-medium{height:28px;border-radius:3px}.next-input.next-medium .next-input-label{padding-left:8px;font-size:12px}.next-input.next-medium .next-input-inner{font-size:12px}.next-input.next-medium .next-input-control{padding-right:8px}.next-input.next-medium input{height:26px;line-height:26px \0;padding:0 8px;font-size:12px}.next-input.next-medium input::-webkit-input-placeholder{font-size:12px}.next-input.next-medium input::-moz-placeholder{font-size:12px}.next-input.next-medium input::-ms-input-placeholder{font-size:12px}.next-input.next-medium input::placeholder{font-size:12px}.next-input.next-medium .next-input-text-field{padding:0 8px;font-size:12px;height:26px;line-height:26px}.next-input.next-medium .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-medium input{border-radius:3px}.next-input.next-medium .next-input-control{border-radius:0 3px 3px 0}.next-input.next-large{height:40px;border-radius:3px}.next-input.next-large .next-input-label{padding-left:12px;font-size:16px}.next-input.next-large .next-input-inner{font-size:16px}.next-input.next-large .next-input-control{padding-right:8px}.next-input.next-large input{height:38px;line-height:38px \0;padding:0 12px;font-size:16px}.next-input.next-large input::-webkit-input-placeholder{font-size:16px}.next-input.next-large input::-moz-placeholder{font-size:16px}.next-input.next-large input::-ms-input-placeholder{font-size:16px}.next-input.next-large input::placeholder{font-size:16px}.next-input.next-large .next-input-text-field{padding:0 12px;font-size:16px;height:38px;line-height:38px}.next-input.next-large .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-input.next-large input{border-radius:3px}.next-input.next-large .next-input-control{border-radius:0 3px 3px 0}.next-input-hint-wrap{color:#999;position:relative}.next-input-hint-wrap .next-input-clear{opacity:0;z-index:1;position:absolute}.next-input-hint-wrap .next-input-hint{opacity:1}.next-input .next-icon-delete-filling:hover{cursor:pointer;color:#666}.next-input.next-focus,.next-input:hover{border-color:#a0a2ad;background-color:#fff}.next-input.next-focus .next-input-clear,.next-input:hover .next-input-clear{opacity:1}.next-input.next-focus .next-input-clear+.next-input-hint,.next-input:hover .next-input-clear+.next-input-hint{opacity:0}.next-input .next-input-clear:focus{opacity:1}.next-input .next-input-clear:focus+.next-input-hint{opacity:0}.next-input.next-focus{border-color:#5584ff;background-color:#fff}.next-input.next-error,.next-input.next-error.next-focus,.next-input.next-error:hover{border-color:#ff3000}.next-input.next-hidden{display:none}.next-input.next-noborder{border:none}.next-input-control .next-input-len{font-size:12px;line-height:12px;color:#999;display:table-cell;width:1px;vertical-align:bottom}.next-input-control .next-input-len.next-error{color:#ff3000}.next-input-control>*{display:table-cell;width:1%;top:0}.next-input-control>:not(:last-child){padding-right:4px}.next-input-control .next-icon{-webkit-transition:all .3s ease-out;transition:all .3s ease-out;color:#999}.next-input-control .next-icon-success-filling{color:#46bc15}.next-input-control .next-icon-loading{color:#4494f9}.next-input-label{color:#666}.next-input input::-moz-placeholder,.next-input textarea::-moz-placeholder{color:#999;opacity:1}.next-input input:-ms-input-placeholder,.next-input textarea:-ms-input-placeholder{color:#999}.next-input input::-webkit-input-placeholder,.next-input textarea::-webkit-input-placeholder{color:#999}.next-input.next-disabled{color:#ccc;cursor:not-allowed}.next-input.next-disabled,.next-input.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled input::-moz-placeholder,.next-input.next-disabled textarea::-moz-placeholder{color:#ccc;opacity:1}.next-input.next-disabled input:-ms-input-placeholder,.next-input.next-disabled textarea:-ms-input-placeholder{color:#ccc}.next-input.next-disabled input::-webkit-input-placeholder,.next-input.next-disabled textarea::-webkit-input-placeholder{color:#ccc}.next-input.next-disabled .next-input-label,.next-input.next-disabled .next-input-len{color:#ccc}.next-input.next-disabled input,.next-input.next-disabled textarea{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa;cursor:not-allowed}.next-input.next-disabled input:hover,.next-input.next-disabled textarea:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled .next-input-hint-wrap{color:#ccc}.next-input.next-disabled .next-input-hint-wrap .next-input-clear{opacity:0}.next-input.next-disabled .next-input-hint-wrap .next-input-hint{opacity:1}.next-input.next-disabled .next-input-hint-wrap .next-icon-delete-filling:hover{cursor:not-allowed;color:#ccc}.next-input.next-disabled .next-icon{color:#ccc}.next-input-control,.next-input-inner,.next-input-label{display:table-cell;width:1px;vertical-align:middle;line-height:1;background-color:transparent;white-space:nowrap}.next-input-group{display:inline-table;border-collapse:separate;border-spacing:0;line-height:0;width:100%}.next-input-group,.next-input-group *,.next-input-group :after,.next-input-group :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input-group-auto-width{width:100%;border-radius:0!important}.next-input-group>.next-input:first-child.next-large,.next-input-group>.next-input:first-child.next-medium,.next-input-group>.next-input:first-child.next-small{border-top-left-radius:3px!important;border-bottom-left-radius:3px!important}.next-input-group>.next-input:last-child.next-large,.next-input-group>.next-input:last-child.next-medium,.next-input-group>.next-input:last-child.next-small{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.next-input-group-addon{width:1px;display:table-cell;vertical-align:middle;white-space:nowrap}.next-input-group-addon:first-child,.next-input-group-addon:first-child>*{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group-addon:last-child,.next-input-group-addon:last-child>*{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group-text{color:#999;background-color:#f2f3f7;text-align:center;border:1px solid #c4c6cf;padding:0 8px}.next-input-group-text:first-child{border-right-width:0}.next-input-group-text:last-child{border-left-width:0}.next-input-group-text.next-disabled{color:#ccc;cursor:not-allowed}.next-input-group-text.next-disabled,.next-input-group-text.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input-group-text.next-medium,.next-input-group-text.next-small{font-size:12px;border-radius:3px}.next-input-group-text.next-large{font-size:16px;border-radius:3px}.next-input[dir=rtl].next-small .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-small .next-input-control{padding-right:0;padding-left:4px}.next-input[dir=rtl].next-medium .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-medium .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-large .next-input-label{padding-left:0;padding-right:12px}.next-input[dir=rtl].next-large .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-input-textarea .next-input-len{text-align:left}.next-input[dir=rtl] .next-input-control>:not(:last-child){padding-left:4px;padding-right:0}.next-input-group[dir=rtl] .next-input-group-addon:first-child{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-small{border-bottom-right-radius:3px!important;border-top-right-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-small{border-bottom-left-radius:3px!important;border-top-left-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-text:first-child{border-right-width:1px;border-left:0}.next-input-group[dir=rtl] .next-input-group-text:last-child{border-left-width:1px;border-right:0}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-select{display:inline-block;font-size:0;vertical-align:middle}.next-select,.next-select *,.next-select :after,.next-select :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-select-trigger{min-width:100px;outline:0;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-trigger .next-input-label{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-select-values{display:block;width:100%;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow:hidden}.next-select-trigger .next-select-values>em{font-style:inherit}.next-select-trigger .next-select-values input{padding-left:0;padding-right:0}.next-select-trigger .next-input-control{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-input-control>*{display:inline-block;width:auto}.next-select-trigger .next-input-control>.next-select-arrow{padding-right:0}.next-select-trigger .next-input.next-disabled em{color:#ccc}.next-select-trigger .next-input.next-disabled .next-select-arrow{cursor:not-allowed}.next-select-trigger .next-select-clear{display:none}.next-select-trigger.next-has-clear:hover .next-select-clear{display:inline-block}.next-select-trigger.next-has-clear:hover .next-select-arrow{display:none}.next-select .next-select-inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;min-width:100px;outline:0;color:#333}.next-select .next-select-inner .next-tag{line-height:1;margin-right:4px;margin-bottom:3px;padding-left:4px;padding-right:4px}.next-select-trigger-search{position:relative;display:inline-block;vertical-align:top;overflow:hidden;width:100%;max-width:100%}.next-select-trigger-search>input,.next-select-trigger-search>span{display:block;font-size:inherit;font-family:inherit;letter-spacing:inherit;white-space:nowrap;overflow:hidden}.next-select-trigger-search input{position:absolute;background-color:transparent;width:100%;height:100%!important;z-index:1;left:0;border:0;outline:0;margin:0;padding:0;cursor:inherit}.next-select-trigger-search>span{position:relative;visibility:hidden;white-space:pre;max-width:100%;z-index:-1}.next-select-single.next-no-search{cursor:pointer}.next-select-single.next-has-search.next-active .next-select-values>em{display:none}.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{width:1px;opacity:0;filter:alpha(opacity=0)}.next-select-single.next-inactive .next-select-trigger-search input,.next-select-single.next-no-search .next-select-trigger-search input{color:transparent}.next-select-single .next-select-values{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.next-select-single .next-select-values>em{vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.next-select-multiple .next-select-values,.next-select-tag .next-select-values{margin-bottom:-3px;height:auto!important}.next-select-multiple .next-select-trigger-search,.next-select-tag .next-select-trigger-search{margin-bottom:3px}.next-select-multiple .next-tag+.next-select-trigger-search,.next-select-tag .next-tag+.next-select-trigger-search{width:auto;min-width:1px}.next-select-multiple .next-input,.next-select-tag .next-input{height:auto;-webkit-box-align:start;-ms-flex-align:start;align-items:start}.next-select-multiple.next-small .next-select-values,.next-select-tag.next-small .next-select-values{min-height:18px;padding-top:2px;padding-bottom:2px;line-height:14px}.next-select-multiple.next-small .next-tag,.next-select-tag.next-small .next-tag{border:0;padding-top:0;padding-bottom:0;height:14px}.next-select-multiple.next-small .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-close-btn,.next-select-tag.next-small .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-close-btn{line-height:14px}.next-select-multiple.next-small .next-input-control,.next-select-multiple.next-small .next-input-label,.next-select-tag.next-small .next-input-control,.next-select-tag.next-small .next-input-label{line-height:18px}.next-select-multiple.next-medium .next-select-values,.next-select-tag.next-medium .next-select-values{min-height:26px;padding-top:3px;padding-bottom:3px;line-height:20px}.next-select-multiple.next-medium .next-tag,.next-select-tag.next-medium .next-tag{padding-top:1px;padding-bottom:1px;height:20px}.next-select-multiple.next-medium .next-tag .next-tag-body,.next-select-multiple.next-medium .next-tag .next-tag-close-btn,.next-select-tag.next-medium .next-tag .next-tag-body,.next-select-tag.next-medium .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-medium .next-input-control,.next-select-multiple.next-medium .next-input-label,.next-select-tag.next-medium .next-input-control,.next-select-tag.next-medium .next-input-label{line-height:26px}.next-select-multiple.next-large .next-select-values,.next-select-tag.next-large .next-select-values{min-height:38px;padding-top:7px;padding-bottom:7px;line-height:24px}.next-select-multiple.next-large .next-tag,.next-select-tag.next-large .next-tag{padding-top:3px;padding-bottom:3px;height:24px}.next-select-multiple.next-large .next-tag .next-tag-body,.next-select-multiple.next-large .next-tag .next-tag-close-btn,.next-select-tag.next-large .next-tag .next-tag-body,.next-select-tag.next-large .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-large .next-input-control,.next-select-multiple.next-large .next-input-label,.next-select-tag.next-large .next-input-control,.next-select-tag.next-large .next-input-label{line-height:38px}.next-select.next-no-search .next-select-trigger-search input{color:transparent}.next-select-auto-complete{width:160px}.next-select-auto-complete .next-input{width:100%}.next-select-auto-complete .next-input .next-input-hint-wrap{padding-right:1px}.next-select-auto-complete .next-input .next-select-arrow{padding-left:0}.next-select.next-active .next-select-arrow{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-select-arrow{cursor:pointer;width:auto!important;text-align:center;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-menu-wrapper{max-height:260px;overflow:auto;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none}.next-select-menu-wrapper .next-select-menu{max-height:none;border:none}.next-select-menu{max-height:260px;overflow:auto}.next-select-menu .next-select-menu-empty-content{padding-left:8px;padding-right:8px;color:#999}.next-select-menu.next-select-auto-complete-menu.next-select-menu-empty{display:none}.next-select-menu .next-menu-item-text .next-icon{vertical-align:middle}.next-select-all{display:block;cursor:pointer;padding:0 8px;margin:0 12px 8px;border-bottom:1px solid #dcdee3}.next-select-all:hover{color:#3e71f7}.next-select-all .next-menu-icon-selected.next-icon{display:inline-block!important;top:auto;color:#5584ff}.next-select-highlight{color:#5584ff;font-size:12px}.next-select-in-ie.next-select-trigger .next-select-values{overflow:visible}.next-select-in-ie.next-select-trigger .next-input-control,.next-select-in-ie.next-select-trigger .next-input-label{width:1px}.next-select-in-ie.next-select-trigger .next-input-control>*{display:table-cell;width:1%}.next-select-in-ie.next-select-trigger .next-select-arrow{display:table-cell}.next-select-in-ie.next-select-trigger .next-select-clear{display:none}.next-select-in-ie.next-select-trigger.next-select-multiple .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-tag .next-select-inner{vertical-align:top}.next-select-in-ie.next-select-trigger .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-single .next-select-values{display:inline-table}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-small .next-select-values{line-height:20px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-medium .next-select-values{line-height:28px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-large .next-select-values{line-height:40px}.next-select-in-ie.next-select-trigger .next-select-trigger-search>span{max-width:100px}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values{position:relative}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values>em{position:absolute;display:inline-block;height:100%;line-height:1;vertical-align:middle;overflow:hidden;left:4px;right:0;top:30%}.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{filter:alpha(opacity=0);font-size:0}.next-select-in-ie.next-select-trigger.next-no-search .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-trigger-search input{color:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-calendar,.next-calendar *,.next-calendar :after,.next-calendar :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-calendar table{border-collapse:collapse;border-spacing:0}.next-calendar td,.next-calendar th{padding:0}@-webkit-keyframes cellZoomIn{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes cellZoomIn{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes cellHover{0%{opacity:0}to{opacity:1}}@keyframes cellHover{0%{opacity:0}to{opacity:1}}@-webkit-keyframes enterToLeft{0%{-webkit-transform:translate(-40%);transform:translate(-40%);opacity:0}50%{opacity:.6}to{opacity:1;-webkit-transform:translate(0);transform:translate(0)}}@keyframes enterToLeft{0%{-webkit-transform:translate(-40%);transform:translate(-40%);opacity:0}50%{opacity:.6}to{opacity:1;-webkit-transform:translate(0);transform:translate(0)}}@-webkit-keyframes enterToRight{0%{-webkit-transform:translate(40%);transform:translate(40%);opacity:0}50%{opacity:.6}to{opacity:1;-webkit-transform:translate(0);transform:translate(0)}}@keyframes enterToRight{0%{-webkit-transform:translate(40%);transform:translate(40%);opacity:0}50%{opacity:.6}to{opacity:1;-webkit-transform:translate(0);transform:translate(0)}}.next-calendar-card .next-calendar-header,.next-calendar-fullscreen .next-calendar-header{text-align:right}.next-calendar-card .next-calendar-header .next-select,.next-calendar-fullscreen .next-calendar-header .next-select{margin-right:4px;vertical-align:top}.next-calendar-card .next-calendar-header .next-menu,.next-calendar-fullscreen .next-calendar-header .next-menu{text-align:left}.next-calendar-card .next-calendar-header,.next-calendar-fullscreen .next-calendar-header{margin-bottom:8px}.next-calendar-panel-header{position:relative;background:#5584ff;margin-bottom:8px;border-bottom:1px solid transparent}.next-calendar-panel-header-full,.next-calendar-panel-header-left,.next-calendar-panel-header-right{height:32px;line-height:32px}.next-calendar-panel-header-full .next-calendar-btn,.next-calendar-panel-header-left .next-calendar-btn,.next-calendar-panel-header-right .next-calendar-btn{vertical-align:top;font-weight:700;margin:0 4px;background-color:transparent;border-color:transparent}.next-calendar-panel-header-full .next-calendar-btn,.next-calendar-panel-header-full .next-calendar-btn.visited,.next-calendar-panel-header-full .next-calendar-btn:link,.next-calendar-panel-header-full .next-calendar-btn:visited,.next-calendar-panel-header-left .next-calendar-btn,.next-calendar-panel-header-left .next-calendar-btn.visited,.next-calendar-panel-header-left .next-calendar-btn:link,.next-calendar-panel-header-left .next-calendar-btn:visited,.next-calendar-panel-header-right .next-calendar-btn,.next-calendar-panel-header-right .next-calendar-btn.visited,.next-calendar-panel-header-right .next-calendar-btn:link,.next-calendar-panel-header-right .next-calendar-btn:visited{color:#fff}.next-calendar-panel-header-full .next-calendar-btn.active,.next-calendar-panel-header-full .next-calendar-btn.hover,.next-calendar-panel-header-full .next-calendar-btn:active,.next-calendar-panel-header-full .next-calendar-btn:focus,.next-calendar-panel-header-full .next-calendar-btn:hover,.next-calendar-panel-header-left .next-calendar-btn.active,.next-calendar-panel-header-left .next-calendar-btn.hover,.next-calendar-panel-header-left .next-calendar-btn:active,.next-calendar-panel-header-left .next-calendar-btn:focus,.next-calendar-panel-header-left .next-calendar-btn:hover,.next-calendar-panel-header-right .next-calendar-btn.active,.next-calendar-panel-header-right .next-calendar-btn.hover,.next-calendar-panel-header-right .next-calendar-btn:active,.next-calendar-panel-header-right .next-calendar-btn:focus,.next-calendar-panel-header-right .next-calendar-btn:hover{color:#fff;background-color:transparent;border-color:transparent;text-decoration:none}.next-calendar-panel-header-left,.next-calendar-panel-header-right{display:inline-block;width:50%;text-align:center}.next-calendar-panel-header-full{width:100%;text-align:center}.next-calendar-btn{cursor:pointer;padding:0;margin:0;border:0;background:transparent;outline:none;height:100%}.next-calendar-btn>.next-icon.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-calendar-btn-next-decade,.next-calendar-btn-next-month,.next-calendar-btn-next-year,.next-calendar-btn-prev-decade,.next-calendar-btn-prev-month,.next-calendar-btn-prev-year{position:absolute;top:0;background-color:transparent;border-color:transparent}.next-calendar-btn-next-decade,.next-calendar-btn-next-decade.visited,.next-calendar-btn-next-decade:link,.next-calendar-btn-next-decade:visited,.next-calendar-btn-next-month,.next-calendar-btn-next-month.visited,.next-calendar-btn-next-month:link,.next-calendar-btn-next-month:visited,.next-calendar-btn-next-year,.next-calendar-btn-next-year.visited,.next-calendar-btn-next-year:link,.next-calendar-btn-next-year:visited,.next-calendar-btn-prev-decade,.next-calendar-btn-prev-decade.visited,.next-calendar-btn-prev-decade:link,.next-calendar-btn-prev-decade:visited,.next-calendar-btn-prev-month,.next-calendar-btn-prev-month.visited,.next-calendar-btn-prev-month:link,.next-calendar-btn-prev-month:visited,.next-calendar-btn-prev-year,.next-calendar-btn-prev-year.visited,.next-calendar-btn-prev-year:link,.next-calendar-btn-prev-year:visited{color:#fff}.next-calendar-btn-next-decade.active,.next-calendar-btn-next-decade.hover,.next-calendar-btn-next-decade:active,.next-calendar-btn-next-decade:focus,.next-calendar-btn-next-decade:hover,.next-calendar-btn-next-month.active,.next-calendar-btn-next-month.hover,.next-calendar-btn-next-month:active,.next-calendar-btn-next-month:focus,.next-calendar-btn-next-month:hover,.next-calendar-btn-next-year.active,.next-calendar-btn-next-year.hover,.next-calendar-btn-next-year:active,.next-calendar-btn-next-year:focus,.next-calendar-btn-next-year:hover,.next-calendar-btn-prev-decade.active,.next-calendar-btn-prev-decade.hover,.next-calendar-btn-prev-decade:active,.next-calendar-btn-prev-decade:focus,.next-calendar-btn-prev-decade:hover,.next-calendar-btn-prev-month.active,.next-calendar-btn-prev-month.hover,.next-calendar-btn-prev-month:active,.next-calendar-btn-prev-month:focus,.next-calendar-btn-prev-month:hover,.next-calendar-btn-prev-year.active,.next-calendar-btn-prev-year.hover,.next-calendar-btn-prev-year:active,.next-calendar-btn-prev-year:focus,.next-calendar-btn-prev-year:hover{color:#fff;background-color:transparent;border-color:transparent;text-decoration:none}.next-calendar-btn-prev-decade,.next-calendar-btn-prev-year{left:8px}.next-calendar-btn-prev-month{left:28px}.next-calendar-btn-next-month{right:28px}.next-calendar-btn-next-decade,.next-calendar-btn-next-year{right:8px}.next-calendar-fullscreen .next-calendar-th{text-align:right;color:#333;font-size:16px;font-weight:700;padding-right:12px;padding-bottom:4px}.next-calendar-fullscreen .next-calendar-cell{font-size:14px}.next-calendar-fullscreen .next-calendar-cell.next-selected .next-calendar-date,.next-calendar-fullscreen .next-calendar-cell.next-selected .next-calendar-month{font-weight:700;background:#dee8ff;color:#5584ff;border-color:#5584ff}.next-calendar-fullscreen .next-calendar-cell.next-disabled .next-calendar-date,.next-calendar-fullscreen .next-calendar-cell.next-disabled .next-calendar-month{cursor:not-allowed;background:#f7f8fa;color:#ccc;border-color:#e6e7eb}.next-calendar-fullscreen .next-calendar-date,.next-calendar-fullscreen .next-calendar-month{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 4px;padding:4px 8px;min-height:80px;border-top:2px solid;-webkit-transition:background .3s ease;transition:background .3s ease;background:#fff;color:#333;border-color:#dcdee3}.next-calendar-fullscreen .next-calendar-date:hover,.next-calendar-fullscreen .next-calendar-month:hover{background:#dee8ff;color:#5584ff;border-color:#5584ff}.next-calendar-fullscreen .next-calendar-cell-next-month .next-calendar-date,.next-calendar-fullscreen .next-calendar-cell-prev-month .next-calendar-date{background:transparent;color:#ccc;border-color:transparent}.next-calendar-fullscreen .next-calendar-cell-current .next-calendar-date,.next-calendar-fullscreen .next-calendar-cell-current .next-calendar-month{font-weight:700;background:#fff;color:#5584ff;border-color:#5584ff}.next-calendar-card .next-calendar-th,.next-calendar-panel .next-calendar-th,.next-calendar-range .next-calendar-th{text-align:center;color:#999;font-size:12px;font-weight:400}.next-calendar-card .next-calendar-cell,.next-calendar-panel .next-calendar-cell,.next-calendar-range .next-calendar-cell{text-align:center;font-size:12px}.next-calendar-card .next-calendar-cell.next-selected .next-calendar-date,.next-calendar-card .next-calendar-cell.next-selected .next-calendar-month,.next-calendar-card .next-calendar-cell.next-selected .next-calendar-year,.next-calendar-panel .next-calendar-cell.next-selected .next-calendar-date,.next-calendar-panel .next-calendar-cell.next-selected .next-calendar-month,.next-calendar-panel .next-calendar-cell.next-selected .next-calendar-year,.next-calendar-range .next-calendar-cell.next-selected .next-calendar-date,.next-calendar-range .next-calendar-cell.next-selected .next-calendar-month,.next-calendar-range .next-calendar-cell.next-selected .next-calendar-year{-webkit-animation:cellZoomIn .4s cubic-bezier(.23,1,.32,1);animation:cellZoomIn .4s cubic-bezier(.23,1,.32,1);font-weight:700;background:#5584ff;color:#fff;border-color:#5584ff}.next-calendar-card .next-calendar-cell.next-disabled .next-calendar-date,.next-calendar-card .next-calendar-cell.next-disabled .next-calendar-month,.next-calendar-card .next-calendar-cell.next-disabled .next-calendar-year,.next-calendar-panel .next-calendar-cell.next-disabled .next-calendar-date,.next-calendar-panel .next-calendar-cell.next-disabled .next-calendar-month,.next-calendar-panel .next-calendar-cell.next-disabled .next-calendar-year,.next-calendar-range .next-calendar-cell.next-disabled .next-calendar-date,.next-calendar-range .next-calendar-cell.next-disabled .next-calendar-month,.next-calendar-range .next-calendar-cell.next-disabled .next-calendar-year{cursor:not-allowed;background:#f7f8fa;color:#ccc;border-color:#f7f8fa}.next-calendar-card .next-calendar-cell.next-inrange .next-calendar-date,.next-calendar-panel .next-calendar-cell.next-inrange .next-calendar-date,.next-calendar-range .next-calendar-cell.next-inrange .next-calendar-date{background:#dee8ff;color:#5584ff;border-color:#dee8ff}.next-calendar-card .next-calendar-date,.next-calendar-card .next-calendar-month,.next-calendar-card .next-calendar-year,.next-calendar-panel .next-calendar-date,.next-calendar-panel .next-calendar-month,.next-calendar-panel .next-calendar-year,.next-calendar-range .next-calendar-date,.next-calendar-range .next-calendar-month,.next-calendar-range .next-calendar-year{text-align:center;border:1px solid;background:#fff;color:#666;border-color:#fff}.next-calendar-card .next-calendar-date:hover,.next-calendar-card .next-calendar-month:hover,.next-calendar-card .next-calendar-year:hover,.next-calendar-panel .next-calendar-date:hover,.next-calendar-panel .next-calendar-month:hover,.next-calendar-panel .next-calendar-year:hover,.next-calendar-range .next-calendar-date:hover,.next-calendar-range .next-calendar-month:hover,.next-calendar-range .next-calendar-year:hover{cursor:pointer;background:#dee8ff;color:#5584ff;border-color:#dee8ff}.next-calendar-card .next-calendar-date,.next-calendar-panel .next-calendar-date,.next-calendar-range .next-calendar-date{width:24px;height:24px;line-height:22px;margin:4px auto;border-radius:3px}.next-calendar-card .next-calendar-month,.next-calendar-panel .next-calendar-month,.next-calendar-range .next-calendar-month{width:60px;height:24px;line-height:22px;margin:8px auto;border-radius:3px}.next-calendar-card .next-calendar-year,.next-calendar-panel .next-calendar-year,.next-calendar-range .next-calendar-year{width:48px;height:24px;line-height:22px;margin:8px auto;border-radius:3px}.next-calendar-card .next-calendar-cell-next-month .next-calendar-date,.next-calendar-card .next-calendar-cell-prev-month .next-calendar-date,.next-calendar-panel .next-calendar-cell-next-month .next-calendar-date,.next-calendar-panel .next-calendar-cell-prev-month .next-calendar-date,.next-calendar-range .next-calendar-cell-next-month .next-calendar-date,.next-calendar-range .next-calendar-cell-prev-month .next-calendar-date{background:#fff;color:#ccc;border-color:#fff}.next-calendar-card .next-calendar-cell-current .next-calendar-date,.next-calendar-card .next-calendar-cell-current .next-calendar-month,.next-calendar-card .next-calendar-cell-current .next-calendar-year,.next-calendar-panel .next-calendar-cell-current .next-calendar-date,.next-calendar-panel .next-calendar-cell-current .next-calendar-month,.next-calendar-panel .next-calendar-cell-current .next-calendar-year,.next-calendar-range .next-calendar-cell-current .next-calendar-date,.next-calendar-range .next-calendar-cell-current .next-calendar-month,.next-calendar-range .next-calendar-cell-current .next-calendar-year{font-weight:700;background:#fff;color:#5584ff;border-color:transparent}.next-calendar[dir=rtl] .next-calendar-header{text-align:left}.next-calendar[dir=rtl] .next-calendar-header .next-select{margin-right:0;margin-left:4px}.next-calendar[dir=rtl] .next-calendar-header .next-menu{text-align:right}.next-calendar[dir=rtl] .next-calendar-btn-prev-decade,.next-calendar[dir=rtl] .next-calendar-btn-prev-year{left:auto;right:8px}.next-calendar[dir=rtl] .next-calendar-btn-prev-month{left:auto;right:28px}.next-calendar[dir=rtl] .next-calendar-btn-next-month{right:auto;left:28px}.next-calendar[dir=rtl] .next-calendar-btn-next-decade,.next-calendar[dir=rtl] .next-calendar-btn-next-year{right:auto;left:8px}.next-calendar-fullscreen[dir=rtl] .next-calendar-th{text-align:left;padding-left:12px;padding-right:0}.next-calendar-fullscreen[dir=rtl] .next-calendar-date,.next-calendar-fullscreen[dir=rtl] .next-calendar-month{text-align:left}.next-calendar-range[dir=rtl] .next-calendar-body-left,.next-calendar-range[dir=rtl] .next-calendar-body-right{float:right}.next-calendar-range[dir=rtl] .next-calendar-body-left{padding-right:0;padding-left:8px}.next-calendar-range[dir=rtl] .next-calendar-body-right{padding-left:0;padding-right:8px}.next-calendar-table{width:100%;table-layout:fixed}.next-calendar-range .next-calendar-body-left,.next-calendar-range .next-calendar-body-right{float:left;width:50%}.next-calendar-range .next-calendar-body-left{padding-right:8px}.next-calendar-range .next-calendar-body-right{padding-left:8px}.next-calendar-range .next-calendar-body:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both} \ No newline at end of file diff --git a/demos/calendar/deps.json b/demos/calendar/deps.json new file mode 100644 index 0000000000..de0a86c057 --- /dev/null +++ b/demos/calendar/deps.json @@ -0,0 +1 @@ +["icon","radio","select","demo-helper"] \ No newline at end of file diff --git a/demos/calendar/index.html b/demos/calendar/index.html new file mode 100644 index 0000000000..65bda3e247 --- /dev/null +++ b/demos/calendar/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/card/build/index.css b/demos/card/build/index.css new file mode 100644 index 0000000000..a167fe5edd --- /dev/null +++ b/demos/card/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-btn,.next-btn *,.next-btn :after,.next-btn :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-btn::-moz-focus-inner{border:0;padding:0}.next-btn,.next-btn:active,.next-btn:focus,.next-btn:hover{outline:0}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-btn{position:relative;display:inline-block;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;text-align:center;text-transform:none;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;cursor:pointer}.next-btn:after{text-align:center;position:absolute;opacity:0;visibility:hidden;-webkit-transition:opacity .5s ease;transition:opacity .5s ease}.next-btn .next-icon.next-xs:before{vertical-align:baseline}.next-btn.hover,.next-btn:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn.next-small{border-radius:3px;padding:0 8px;height:20px;line-height:18px;font-size:12px;border-width:1px}.next-btn.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-small>.next-btn-icon.next-icon-alone:before,.next-btn.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small.next-btn-loading{padding-left:24px}.next-btn.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:8px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-small.next-btn-loading>.next-icon{display:none}.next-btn.next-medium{border-radius:3px;padding:0 12px;height:28px;line-height:26px;font-size:12px;border-width:1px}.next-btn.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium.next-btn-loading{padding-left:28px}.next-btn.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:12px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-medium.next-btn-loading>.next-icon{display:none}.next-btn.next-large{border-radius:3px;padding:0 16px;height:40px;line-height:38px;font-size:16px;border-width:1px}.next-btn.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-large>.next-btn-icon.next-icon-alone:before,.next-btn.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large.next-btn-loading{padding-left:36px}.next-btn.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:16px;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn.next-large.next-btn-loading>.next-icon{display:none}.next-btn.next-btn-normal{border-style:solid;background-color:#fff;border-color:#c4c6cf}.next-btn.next-btn-normal,.next-btn.next-btn-normal.visited,.next-btn.next-btn-normal:link,.next-btn.next-btn-normal:visited{color:#333}.next-btn.next-btn-normal.active,.next-btn.next-btn-normal.hover,.next-btn.next-btn-normal:active,.next-btn.next-btn-normal:focus,.next-btn.next-btn-normal:hover{color:#333;background-color:#f2f3f7;border-color:#a0a2ad;text-decoration:none}.next-btn.next-btn-primary{border-style:solid;background-color:#5584ff;border-color:transparent}.next-btn.next-btn-primary,.next-btn.next-btn-primary.visited,.next-btn.next-btn-primary:link,.next-btn.next-btn-primary:visited{color:#fff}.next-btn.next-btn-primary.active,.next-btn.next-btn-primary.hover,.next-btn.next-btn-primary:active,.next-btn.next-btn-primary:focus,.next-btn.next-btn-primary:hover{color:#fff;background-color:#3e71f7;border-color:transparent;text-decoration:none}.next-btn.next-btn-secondary{border-style:solid;background-color:#fff;border-color:#5584ff}.next-btn.next-btn-secondary,.next-btn.next-btn-secondary.visited,.next-btn.next-btn-secondary:link,.next-btn.next-btn-secondary:visited{color:#5584ff}.next-btn.next-btn-secondary.active,.next-btn.next-btn-secondary.hover,.next-btn.next-btn-secondary:active,.next-btn.next-btn-secondary:focus,.next-btn.next-btn-secondary:hover{color:#fff;background-color:#3e71f7;border-color:#3e71f7;text-decoration:none}.next-btn.disabled,.next-btn[disabled]{cursor:not-allowed;background-color:#f7f8fa;border-color:#e6e7eb}.next-btn.disabled,.next-btn.disabled.visited,.next-btn.disabled:link,.next-btn.disabled:visited,.next-btn[disabled],.next-btn[disabled].visited,.next-btn[disabled]:link,.next-btn[disabled]:visited{color:#ccc}.next-btn.disabled.active,.next-btn.disabled.hover,.next-btn.disabled:active,.next-btn.disabled:focus,.next-btn.disabled:hover,.next-btn[disabled].active,.next-btn[disabled].hover,.next-btn[disabled]:active,.next-btn[disabled]:focus,.next-btn[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-warning{border-style:solid}.next-btn-warning.next-btn-primary{background-color:#ff3000;border-color:#ff3000}.next-btn-warning.next-btn-primary,.next-btn-warning.next-btn-primary.visited,.next-btn-warning.next-btn-primary:link,.next-btn-warning.next-btn-primary:visited{color:#fff}.next-btn-warning.next-btn-primary.active,.next-btn-warning.next-btn-primary.hover,.next-btn-warning.next-btn-primary:active,.next-btn-warning.next-btn-primary:focus,.next-btn-warning.next-btn-primary:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary[disabled]{background-color:#f7f8fa;border-color:#dcdee3}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary.disabled.visited,.next-btn-warning.next-btn-primary.disabled:link,.next-btn-warning.next-btn-primary.disabled:visited,.next-btn-warning.next-btn-primary[disabled],.next-btn-warning.next-btn-primary[disabled].visited,.next-btn-warning.next-btn-primary[disabled]:link,.next-btn-warning.next-btn-primary[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-primary.disabled.active,.next-btn-warning.next-btn-primary.disabled.hover,.next-btn-warning.next-btn-primary.disabled:active,.next-btn-warning.next-btn-primary.disabled:focus,.next-btn-warning.next-btn-primary.disabled:hover,.next-btn-warning.next-btn-primary[disabled].active,.next-btn-warning.next-btn-primary[disabled].hover,.next-btn-warning.next-btn-primary[disabled]:active,.next-btn-warning.next-btn-primary[disabled]:focus,.next-btn-warning.next-btn-primary[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#dcdee3;text-decoration:none}.next-btn-warning.next-btn-normal{background-color:#fff;border-color:#ff3000}.next-btn-warning.next-btn-normal,.next-btn-warning.next-btn-normal.visited,.next-btn-warning.next-btn-normal:link,.next-btn-warning.next-btn-normal:visited{color:#ff3000}.next-btn-warning.next-btn-normal.active,.next-btn-warning.next-btn-normal.hover,.next-btn-warning.next-btn-normal:active,.next-btn-warning.next-btn-normal:focus,.next-btn-warning.next-btn-normal:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal[disabled]{background-color:#f7f8fa;border-color:#e6e7eb}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal.disabled.visited,.next-btn-warning.next-btn-normal.disabled:link,.next-btn-warning.next-btn-normal.disabled:visited,.next-btn-warning.next-btn-normal[disabled],.next-btn-warning.next-btn-normal[disabled].visited,.next-btn-warning.next-btn-normal[disabled]:link,.next-btn-warning.next-btn-normal[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-normal.disabled.active,.next-btn-warning.next-btn-normal.disabled.hover,.next-btn-warning.next-btn-normal.disabled:active,.next-btn-warning.next-btn-normal.disabled:focus,.next-btn-warning.next-btn-normal.disabled:hover,.next-btn-warning.next-btn-normal[disabled].active,.next-btn-warning.next-btn-normal[disabled].hover,.next-btn-warning.next-btn-normal[disabled]:active,.next-btn-warning.next-btn-normal[disabled]:focus,.next-btn-warning.next-btn-normal[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-text{border-radius:0}.next-btn-text,.next-btn-text.hover,.next-btn-text:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn-text.next-btn-primary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-primary,.next-btn-text.next-btn-primary.visited,.next-btn-text.next-btn-primary:link,.next-btn-text.next-btn-primary:visited{color:#5584ff}.next-btn-text.next-btn-primary.active,.next-btn-text.next-btn-primary.hover,.next-btn-text.next-btn-primary:active,.next-btn-text.next-btn-primary:focus,.next-btn-text.next-btn-primary:hover{color:#3e71f7;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-secondary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-secondary,.next-btn-text.next-btn-secondary.visited,.next-btn-text.next-btn-secondary:link,.next-btn-text.next-btn-secondary:visited{color:#666}.next-btn-text.next-btn-secondary.active,.next-btn-text.next-btn-secondary.hover,.next-btn-text.next-btn-secondary:active,.next-btn-text.next-btn-secondary:focus,.next-btn-text.next-btn-secondary:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-normal{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-normal,.next-btn-text.next-btn-normal.visited,.next-btn-text.next-btn-normal:link,.next-btn-text.next-btn-normal:visited{color:#333}.next-btn-text.next-btn-normal.active,.next-btn-text.next-btn-normal.hover,.next-btn-text.next-btn-normal:active,.next-btn-text.next-btn-normal:focus,.next-btn-text.next-btn-normal:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-large{border-radius:0;padding:0;height:24px;line-height:24px;font-size:14px;border-width:0}.next-btn-text.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-large>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large.next-btn-loading{padding-left:20px}.next-btn-text.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:0;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn-text.next-large.next-btn-loading>.next-icon{display:none}.next-btn-text.next-medium{border-radius:0;padding:0;height:20px;line-height:20px;font-size:12px;border-width:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium.next-btn-loading{padding-left:16px}.next-btn-text.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-medium.next-btn-loading>.next-icon{display:none}.next-btn-text.next-small{border-radius:0;padding:0;height:16px;line-height:16px;font-size:12px;border-width:0}.next-btn-text.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-small>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small.next-btn-loading{padding-left:16px}.next-btn-text.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-small.next-btn-loading>.next-icon{display:none}.next-btn-text.disabled,.next-btn-text[disabled]{background-color:transparent;border-color:transparent}.next-btn-text.disabled,.next-btn-text.disabled.visited,.next-btn-text.disabled:link,.next-btn-text.disabled:visited,.next-btn-text[disabled],.next-btn-text[disabled].visited,.next-btn-text[disabled]:link,.next-btn-text[disabled]:visited{color:#ccc}.next-btn-text.disabled.active,.next-btn-text.disabled.hover,.next-btn-text.disabled:active,.next-btn-text.disabled:focus,.next-btn-text.disabled:hover,.next-btn-text[disabled].active,.next-btn-text[disabled].hover,.next-btn-text[disabled]:active,.next-btn-text[disabled]:focus,.next-btn-text[disabled]:hover{color:#ccc;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-loading{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-loading,.next-btn-text.next-btn-loading.visited,.next-btn-text.next-btn-loading:link,.next-btn-text.next-btn-loading:visited{color:#333}.next-btn-text.next-btn-loading.active,.next-btn-text.next-btn-loading.hover,.next-btn-text.next-btn-loading:active,.next-btn-text.next-btn-loading:focus,.next-btn-text.next-btn-loading:hover{color:#333;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-loading{pointer-events:none}.next-btn-loading:after{font-family:NextIcon;content:"\E646";opacity:1;visibility:visible;-webkit-animation:loadingCircle 2s infinite linear;animation:loadingCircle 2s infinite linear}.next-btn-ghost{-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-btn-ghost.next-btn-dark{background-color:transparent;border-color:#fff}.next-btn-ghost.next-btn-dark,.next-btn-ghost.next-btn-dark.visited,.next-btn-ghost.next-btn-dark:link,.next-btn-ghost.next-btn-dark:visited{color:#fff}.next-btn-ghost.next-btn-dark.active,.next-btn-ghost.next-btn-dark.hover,.next-btn-ghost.next-btn-dark:active,.next-btn-ghost.next-btn-dark:focus,.next-btn-ghost.next-btn-dark:hover{color:#fff;background-color:hsla(0,0%,100%,.8);border-color:#fff;text-decoration:none}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark[disabled]{background-color:transparent;border-color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark.disabled.visited,.next-btn-ghost.next-btn-dark.disabled:link,.next-btn-ghost.next-btn-dark.disabled:visited,.next-btn-ghost.next-btn-dark[disabled],.next-btn-ghost.next-btn-dark[disabled].visited,.next-btn-ghost.next-btn-dark[disabled]:link,.next-btn-ghost.next-btn-dark[disabled]:visited{color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled.active,.next-btn-ghost.next-btn-dark.disabled.hover,.next-btn-ghost.next-btn-dark.disabled:active,.next-btn-ghost.next-btn-dark.disabled:focus,.next-btn-ghost.next-btn-dark.disabled:hover,.next-btn-ghost.next-btn-dark[disabled].active,.next-btn-ghost.next-btn-dark[disabled].hover,.next-btn-ghost.next-btn-dark[disabled]:active,.next-btn-ghost.next-btn-dark[disabled]:focus,.next-btn-ghost.next-btn-dark[disabled]:hover{color:hsla(0,0%,100%,.4);background-color:transparent;border-color:hsla(0,0%,100%,.4);text-decoration:none}.next-btn-ghost.next-btn-light{background-color:transparent;border-color:#333}.next-btn-ghost.next-btn-light,.next-btn-ghost.next-btn-light.visited,.next-btn-ghost.next-btn-light:link,.next-btn-ghost.next-btn-light:visited{color:#333}.next-btn-ghost.next-btn-light.active,.next-btn-ghost.next-btn-light.hover,.next-btn-ghost.next-btn-light:active,.next-btn-ghost.next-btn-light:focus,.next-btn-ghost.next-btn-light:hover{color:#999;background-color:rgba(0,0,0,.92);border-color:#333;text-decoration:none}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light[disabled]{background-color:transparent;border-color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light.disabled.visited,.next-btn-ghost.next-btn-light.disabled:link,.next-btn-ghost.next-btn-light.disabled:visited,.next-btn-ghost.next-btn-light[disabled],.next-btn-ghost.next-btn-light[disabled].visited,.next-btn-ghost.next-btn-light[disabled]:link,.next-btn-ghost.next-btn-light[disabled]:visited{color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled.active,.next-btn-ghost.next-btn-light.disabled.hover,.next-btn-ghost.next-btn-light.disabled:active,.next-btn-ghost.next-btn-light.disabled:focus,.next-btn-ghost.next-btn-light.disabled:hover,.next-btn-ghost.next-btn-light[disabled].active,.next-btn-ghost.next-btn-light[disabled].hover,.next-btn-ghost.next-btn-light[disabled]:active,.next-btn-ghost.next-btn-light[disabled]:focus,.next-btn-ghost.next-btn-light[disabled]:hover{color:rgba(0,0,0,.1);background-color:transparent;border-color:rgba(0,0,0,.1);text-decoration:none}.next-btn-group{position:relative;display:inline-block;vertical-align:middle}.next-btn-group>.next-btn{position:relative;float:left;-webkit-box-shadow:none;box-shadow:none}.next-btn-group>.next-btn.active,.next-btn-group>.next-btn:active,.next-btn-group>.next-btn:focus,.next-btn-group>.next-btn:hover{z-index:1}.next-btn-group>.next-btn.disabled,.next-btn-group>.next-btn[disabled]{z-index:0}.next-btn-group .next-btn.next-btn{margin:0 0 0 -1px}.next-btn-group .next-btn:not(:first-child):not(:last-child){border-radius:0}.next-btn-group>.next-btn:first-child{margin:0}.next-btn-group>.next-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group>.next-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group>.next-btn-primary:not(:first-child){border-left-color:hsla(0,0%,100%,.2)}.next-btn-group>.next-btn-primary:not(:first-child):hover{border-left-color:transparent}.next-btn-group>.next-btn-primary:not(:first-child).disabled,.next-btn-group>.next-btn-primary:not(:first-child)[disabled]{border-left-color:#e6e7eb}.next-btn-group[dir=rtl]>.next-btn{float:right}.next-btn-group[dir=rtl] .next-btn.next-btn{margin:0 -1px 0 0}.next-btn-group[dir=rtl]>.next-btn:first-child:not(:last-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group[dir=rtl]>.next-btn:last-child:not(:first-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child){border-right-color:hsla(0,0%,100%,.2)}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child):hover{border-right-color:transparent}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child).disabled,.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child)[disabled]{border-right-color:#e6e7eb}.next-btn.next-small[dir=rtl]{border-radius:3px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl].next-btn-loading{padding-left:8px;padding-right:24px}.next-btn.next-small[dir=rtl].next-btn-loading:after{right:8px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-medium[dir=rtl]{border-radius:3px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl].next-btn-loading{padding-left:12px;padding-right:28px}.next-btn.next-medium[dir=rtl].next-btn-loading:after{right:12px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-large[dir=rtl]{border-radius:3px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl].next-btn-loading{padding-left:16px;padding-right:36px}.next-btn.next-large[dir=rtl].next-btn-loading:after{right:16px;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-large{border-radius:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large.next-btn-loading{padding-left:0;padding-right:20px}.next-btn-text[dir=rtl].next-large.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-medium{border-radius:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-medium.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-small{border-radius:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-small.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-card,.next-card:after,.next-card:before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-card[dir=rtl] .next-card-extra{left:0;right:auto}.next-card[dir=rtl] .next-card-title:before{right:0;left:auto}.next-card[dir=rtl] .next-card-subtitle{float:left;padding-right:8px;padding-left:0}.next-card[dir=rtl] .next-card-head-show-bullet .next-card-title{padding-left:0;padding-right:8px}.next-card,.next-card *,.next-card :after,.next-card :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-card{min-width:100px;padding:0 16px;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none}.next-card,.next-card-head{background:#fff}.next-card-head-show-bullet .next-card-title{padding-left:8px}.next-card-head-show-bullet .next-card-title:before{content:"";display:inline-block;height:16px;width:3px;background:#5584ff;position:absolute;left:0;top:calc(50% - 16px / 2)}.next-card-head-main{position:relative;margin-top:8px;margin-bottom:0;height:40px;line-height:40px}.next-card-title{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80%;height:100%;color:#333;font-size:16px}.next-card-subtitle{font-size:12px;color:#666;padding-left:8px}.next-card-extra{position:absolute;right:0;top:0;height:100%;font-size:12px;color:#5584ff}.next-card-body{padding-bottom:12px}.next-card-show-divider .next-card-head{border-bottom:1px solid #e6e7eb}.next-card-show-divider .next-card-body{padding-top:12px}.next-card-hide-divider .next-card-body{padding-top:0}.next-card-content{overflow:hidden;-webkit-transition:all .3s cubic-bezier(.23,1,.32,1);transition:all .3s cubic-bezier(.23,1,.32,1);position:relative}.next-card-footer .next-icon{-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1)}.next-card-footer .next-icon.expand{-webkit-transform-origin:50% 47%;-ms-transform-origin:50% 47%;transform-origin:50% 47%;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)} \ No newline at end of file diff --git a/demos/card/deps.json b/demos/card/deps.json new file mode 100644 index 0000000000..946f97c9df --- /dev/null +++ b/demos/card/deps.json @@ -0,0 +1 @@ +["icon","button","demo-helper"] \ No newline at end of file diff --git a/demos/card/index.html b/demos/card/index.html new file mode 100644 index 0000000000..310b2723bf --- /dev/null +++ b/demos/card/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/cascader-select/build/index.css b/demos/cascader-select/build/index.css new file mode 100644 index 0000000000..6f5cf77841 --- /dev/null +++ b/demos/cascader-select/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-overlay-wrapper .next-overlay-inner{z-index:1001}.next-overlay-wrapper .next-overlay-backdrop{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;background:#000;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0}.next-overlay-wrapper.opened .next-overlay-backdrop{opacity:.2}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-radio-button-large[dir=rtl]>label:first-child{margin-left:-1px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.next-radio-button-large[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large[dir=rtl] .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-wrapper[dir=rtl] .next-radio-label{margin-left:0;margin-right:4px}.next-radio-group[dir=rtl] .next-radio-label{margin-right:4px;margin-left:16px}.next-radio-button[dir=rtl]>label .next-radio-label{margin:0}.next-radio-wrapper{outline:0}.next-radio-wrapper .next-radio{display:inline-block;vertical-align:middle;position:relative;line-height:1}.next-radio-wrapper .next-radio,.next-radio-wrapper .next-radio *,.next-radio-wrapper .next-radio :after,.next-radio-wrapper .next-radio :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-radio-wrapper .next-radio input[type=radio]{opacity:0;position:absolute;vertical-align:middle;top:0;left:0;width:16px;height:16px;margin:0}.next-radio-wrapper .next-radio-inner{display:block;width:16px;height:16px;background:#fff;border-radius:50%;border:1px solid #c4c6cf;-webkit-transition:all .36s ease 0s;transition:all .36s ease 0s;-webkit-box-shadow:none;box-shadow:none}.next-radio-wrapper .next-radio-inner:after{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;border-radius:50%;top:50%;margin-top:-2px;left:50%;margin-left:-2px;background:#fff;content:" ";-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86)}.next-radio-wrapper.checked .next-radio-inner{border-color:#5584ff;background:#5584ff}.next-radio-wrapper.checked .next-radio-inner:after{width:4px;height:4px;font-weight:700;background:#fff;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.next-radio-wrapper.checked.hovered .next-radio-inner,.next-radio-wrapper.checked:hover .next-radio-inner{border-color:transparent}.next-radio-wrapper.disabled input[type=radio]{cursor:not-allowed}.next-radio-wrapper.disabled .next-radio-inner{border-color:#e6e7eb;background:#f7f8fa}.next-radio-wrapper.disabled.checked .next-radio-inner,.next-radio-wrapper.disabled .next-radio-inner.hovered,.next-radio-wrapper.disabled .next-radio-inner:hover{border-color:#e6e7eb}.next-radio-wrapper.disabled.checked .next-radio-inner:after{background:#ccc}.next-radio-wrapper:not(.disabled).focused .next-radio-inner,.next-radio-wrapper:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper:not(.disabled):focus .next-radio-inner,.next-radio-wrapper:not(.disabled):hover .next-radio-inner{border-color:#5584ff;background-color:#dee8ff}.next-radio-wrapper.checked.focused .next-radio-inner,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner{border-color:transparent;background:#3e71f7}.next-radio-wrapper.checked.focused .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner:after{background:#fff}.next-radio-button .next-radio,.next-radio-button input[type=radio]{width:0;height:0}.next-radio-button>label{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1;margin:0 0 0 -1px;border:1px solid #c4c6cf;background-color:#fff;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;vertical-align:middle}.next-radio-button>label .next-radio-label{display:block;color:#333;margin:0;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}.next-radio-button>label.hovered,.next-radio-button>label:focus,.next-radio-button>label:hover{z-index:10;border-color:#a0a2ad;background-color:#f2f3f7}.next-radio-button>label.hovered .next-radio-label,.next-radio-button>label:focus .next-radio-label,.next-radio-button>label:hover .next-radio-label{color:#333}.next-radio-button>label.checked{z-index:11;border-color:#5584ff;background-color:#fff}.next-radio-button>label.checked .next-radio-label{color:#5584ff}.next-radio-button>label.disabled{z-index:0;cursor:not-allowed;border-color:#e6e7eb;background-color:#f7f8fa}.next-radio-button>label.disabled .next-radio-label{color:#ccc}.next-radio-button>label.checked.disabled{z-index:0;border-color:#e6e7eb;background-color:#f2f3f7}.next-radio-button>label.checked.disabled .next-radio-label{color:#ccc}.next-radio-button-large>label{padding:0 8px;height:40px;line-height:40px}.next-radio-button-large>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-large .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium>label{padding:0 8px;height:28px;line-height:28px}.next-radio-button-medium>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-medium>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium .next-radio-label{height:26px;line-height:26px;font-size:12px}.next-radio-button-small>label{padding:0 8px;height:20px;line-height:20px}.next-radio-button-small>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small .next-radio-label{height:18px;line-height:18px;font-size:12px}.next-radio-single-input input[type=radio]{opacity:0;position:absolute;top:0;left:0;margin:0}.next-radio-group{display:inline-block}.next-radio-group .next-radio-label{color:#333;margin-right:16px}.next-radio-group.disabled .next-radio-label{color:#ccc}.next-radio-group-ver .next-radio-wrapper{display:block;margin-bottom:8px}.next-radio-label{margin:0;margin-left:4px;font-size:12px;vertical-align:middle;line-height:1}@-moz-document url-prefix(){.next-radio{margin-top:-1px}@supports ((-webkit-animation:calc(0s)) or (animation:calc(0s))){.next-radio{margin-top:-3px}}}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}@-webkit-keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}@keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}.next-tag>.next-tag-body{overflow:hidden;text-overflow:ellipsis}.next-tag-checkable.next-tag-level-secondary{color:#333;border-color:transparent;background-color:transparent}.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):hover{color:#5584ff}.next-tag-closable.next-tag-level-primary,.next-tag-default.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-primary,.disabled.next-tag-default.next-tag-level-primary,[disabled].next-tag-closable.next-tag-level-primary,[disabled].next-tag-default.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.disabled.next-tag-default.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-checkable.next-tag-level-primary,[disabled].next-tag-checkable.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary.checked{color:#fff;border-color:#5584ff;background-color:#5584ff}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover{color:#fff;border-color:#3e71f7;background-color:#3e71f7}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked>.next-tag-close-btn{color:#fff}.next-tag-default.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-default.next-tag-level-normal,[disabled].next-tag-default.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.disabled.next-tag-default.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-closable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-normal,[disabled].next-tag-closable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:transparent}.disabled.next-tag-closable.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-normal.checked,.next-tag-checkable.next-tag-level-secondary.checked{color:#5584ff;border-color:#5584ff;background-color:transparent}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover{color:#3e71f7;border-color:#3e71f7;background-color:transparent}.next-tag-checkable.next-tag-level-secondary.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-secondary.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-secondary.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-secondary.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-secondary.checked:after{color:#fff}.next-tag-checkable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#c4c6cf;background-color:transparent}.disabled.next-tag-checkable.next-tag-level-normal,[disabled].next-tag-checkable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-normal.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-normal.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-normal.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-normal.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-normal.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-normal.checked:after{color:#fff}.next-tag-closable.next-tag-level-normal:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#c4c6cf;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-closable.next-tag-level-normal:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E626";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:before{background-color:#a0a2ad}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-closable.next-tag-level-normal:disabled:before,[disabled].next-tag-closable.next-tag-level-normal:before{background-color:#e6e7eb}.next-tag-closable.next-tag-level-normal:disabled:after,[disabled].next-tag-closable.next-tag-level-normal:after{color:#fff}.next-tag-group .next-tag-large,.next-tag-group .next-tag-medium{margin-right:8px;margin-bottom:8px}.next-tag-group .next-tag-small{margin-right:4px;margin-bottom:4px}.next-tag{display:inline-block;max-width:100%;vertical-align:middle;border-width:1px;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid;overflow:hidden;white-space:nowrap;-webkit-transition:all .2s cubic-bezier(.23,1,.32,1);transition:all .2s cubic-bezier(.23,1,.32,1);font-size:0;outline:0}.next-tag,.next-tag *,.next-tag :after,.next-tag :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tag>.next-tag-body{position:relative;display:inline-block;height:100%;text-align:center;vertical-align:middle;max-width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.next-tag>.next-tag-body>a{text-decoration:none;color:inherit}.next-tag>.next-tag-body>a:before{content:" ";position:absolute;display:block;top:0;left:0;right:0;bottom:0}.next-tag>.next-tag-body .next-icon{line-height:1;vertical-align:middle}.next-tag>.next-tag-body .next-icon:before{font-size:inherit}.next-tag.next-tag-body-pointer{cursor:pointer}.next-tag.disabled,.next-tag[disabled]{cursor:not-allowed;pointer-events:none}.next-tag-large{height:40px;padding:0;line-height:38px;font-size:0}.next-tag-large>.next-tag-body{font-size:16px;padding:0 16px;min-width:48px}.next-tag-large.next-tag-closable>.next-tag-body{padding:0 0 0 16px}.next-tag-large[dir=rtl].next-tag-closable>.next-tag-body{padding:0 16px 0 0}.next-tag-large>.next-tag-close-btn{margin-left:12px;padding-right:16px}.next-tag-large>.next-tag-close-btn .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tag-large[dir=rtl]>.next-tag-close-btn{margin-right:12px;margin-left:0;padding-right:0;padding-left:16px}.next-tag-medium{height:28px;padding:0;line-height:26px;font-size:0}.next-tag-medium>.next-tag-body{font-size:14px;padding:0 12px;min-width:40px}.next-tag-medium.next-tag-closable>.next-tag-body{padding:0 0 0 12px}.next-tag-medium[dir=rtl].next-tag-closable>.next-tag-body{padding:0 12px 0 0}.next-tag-medium>.next-tag-close-btn{margin-left:8px;padding-right:12px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-medium>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-medium[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:12px}.next-tag-small{height:20px;padding:0;line-height:18px;font-size:0}.next-tag-small>.next-tag-body{font-size:12px;padding:0 8px;min-width:28px}.next-tag-small.next-tag-closable>.next-tag-body{padding:0 0 0 8px}.next-tag-small[dir=rtl].next-tag-closable>.next-tag-body{padding:0 8px 0 0}.next-tag-small>.next-tag-close-btn{margin-left:8px;padding-right:8px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-small>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-small[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:8px}.next-tag-default{cursor:default}.next-tag-closable{position:relative}.next-tag-closable.next-tag-large>.next-tag-body{max-width:calc(100% - 40px)}.next-tag-closable.next-tag-medium>.next-tag-body{max-width:calc(100% - 28px)}.next-tag-closable.next-tag-small>.next-tag-body{max-width:calc(100% - 20px)}.next-tag-closable>.next-tag-close-btn{display:inline-block;vertical-align:middle;height:100%;text-align:center;cursor:pointer}.next-tag-closable.next-tag-level-normal.disabled,.next-tag-closable.next-tag-level-normal[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable{cursor:pointer;position:relative;border-radius:3px}.next-tag-checkable.checked:before{-webkit-animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.checked:after{-webkit-animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86);animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):before{right:-10px;bottom:-10px;width:20px;height:20px}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):after{font-size:8px;line-height:8px;right:0;bottom:0}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):before{right:-14px;bottom:-14px;width:28px;height:28px}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):after{font-size:12px;line-height:12px;right:0;bottom:0}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):before{right:-18px;bottom:-18px;width:36px;height:36px}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):after{font-size:16px;line-height:16px;right:0;bottom:0}.next-tag-checkable.next-tag-level-primary.disabled,.next-tag-checkable.next-tag-level-primary[disabled]{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-secondary.disabled,.next-tag-checkable.next-tag-level-secondary[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-zoom-appear,.next-tag-zoom-enter{-webkit-animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-tag-zoom-leave{-webkit-animation:zoomOut .3s ease-in;animation:zoomOut .3s ease-in;-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-checkbox-wrapper[dir=rtl]{margin-right:8px;margin-left:0}.next-checkbox-wrapper[dir=rtl]:first-child{margin-right:0}.next-checkbox-wrapper[dir=rtl]>.next-checkbox-label{margin-right:4px;margin-left:0}.next-checkbox-wrapper,.next-checkbox-wrapper *,.next-checkbox-wrapper :after,.next-checkbox-wrapper :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-checkbox-wrapper .next-checkbox{display:inline-block;position:relative;line-height:1;vertical-align:middle}.next-checkbox-wrapper input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:16px;height:16px;margin:0}.next-checkbox-wrapper .next-checkbox-inner{display:block;width:16px;height:16px;background:#fff;border-radius:3px;border:1px solid #c4c6cf;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;text-align:left;-webkit-box-shadow:none;box-shadow:none}.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;top:0;opacity:0;line-height:16px;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);color:#fff;left:4px;margin-left:0}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{vertical-align:top;margin-top:0}.next-checkbox-wrapper.checked .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.checked .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);margin-left:0}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.indeterminate .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.indeterminate .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1);margin-left:0}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.disabled input[type=checkbox]{cursor:not-allowed}.next-checkbox-wrapper.disabled .next-checkbox-inner{border-color:#e6e7eb;background:#f7f8fa}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover{border-color:#e6e7eb}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner>.next-icon{color:#ccc;opacity:1}.next-checkbox-wrapper.focused .next-checkbox-inner,.next-checkbox-wrapper.hovered .next-checkbox-inner,.next-checkbox-wrapper:not(.disabled):hover .next-checkbox-inner{border-color:#5584ff;background-color:#dee8ff}.next-checkbox-wrapper.checked.focused .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner{border-color:transparent;background-color:#3e71f7}.next-checkbox-wrapper.checked.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner>.next-icon{color:#fff;opacity:1}.next-checkbox-group .next-checkbox-wrapper{margin-left:8px}.next-checkbox-group .next-checkbox-wrapper:first-child{margin-left:0}.next-checkbox-group-ver .next-checkbox-wrapper{display:block;margin-left:0;margin-right:0;margin-bottom:8px}.next-checkbox-label{font-size:12px;vertical-align:middle;margin:0;margin-left:4px;line-height:1}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-menu[dir=rtl] .next-menu-item-helper{float:left}.next-menu[dir=rtl] .next-menu-item .next-checkbox,.next-menu[dir=rtl] .next-menu-item .next-radio{margin-left:4px;margin-right:0}.next-menu[dir=rtl] .next-menu-hoz-right{float:left}.next-menu[dir=rtl] .next-menu-hoz-icon-arrow.next-icon{left:6px;right:auto}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon{margin-left:0;margin-right:-16px}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon.next-menu-icon-right{right:auto;left:4px}.next-menu[dir=rtl] .next-menu-icon-arrow.next-icon{left:10px;right:auto}.next-menu{position:relative;min-width:100px;padding:8px 0;margin:0;list-style:none;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;background:#fff;line-height:32px;font-size:12px}.next-menu,.next-menu *,.next-menu :after,.next-menu :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-menu:focus,.next-menu :focus{outline:0}.next-menu-embeddable,.next-menu-embeddable .next-menu-item.next-disabled,.next-menu-embeddable .next-menu-item.next-disabled .next-menu-item-text>a{background:initial;border:none}.next-menu-embeddable .next-menu-item-inner{height:100%}.next-menu-content{position:relative}.next-menu-content,.next-menu-sub-menu{padding:0;margin:0;list-style:none}.next-menu-sub-menu.next-expand-enter{overflow:hidden}.next-menu-sub-menu.next-expand-enter-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-sub-menu.next-expand-leave{overflow:hidden}.next-menu-sub-menu.next-expand-leave-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-item{position:relative;padding:0 20px;-webkit-transition:background .2s ease;transition:background .2s ease;color:#333;cursor:pointer}.next-menu-item-helper{float:right;color:#999;font-style:normal;font-size:12px}.next-menu-item .next-checkbox,.next-menu-item .next-radio{margin-right:4px}.next-menu-item.next-selected{color:#333;background-color:#fff}.next-menu-item.next-selected .next-menu-icon-arrow{color:#666}.next-menu-item.next-selected .next-menu-icon-selected{color:#5584ff}.next-menu-item.next-disabled,.next-menu-item.next-disabled .next-menu-item-text>a{color:#ccc;background-color:#fff;cursor:not-allowed}.next-menu-item.next-disabled .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-icon-selected,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-selected{color:#ccc}.next-menu-item:not(.next-disabled).next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover,.next-menu-item:not(.next-disabled).next-selected:focus,.next-menu-item:not(.next-disabled).next-selected:focus:hover,.next-menu-item:not(.next-disabled).next-selected:hover,.next-menu-item:not(.next-disabled):hover{color:#333;background-color:#f2f3f7}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled):hover .next-menu-icon-arrow{color:#333}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled):hover .next-menu-icon-selected{color:#5584ff}.next-menu-item-inner{height:32px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.next-menu-item-text{vertical-align:middle}.next-menu-item-text>a{display:inline-block;text-decoration:none;color:#333}.next-menu-item-text>a:before{position:absolute;background-color:transparent;top:0;left:0;bottom:0;right:0;content:""}.next-menu.next-hoz{padding:0}.next-menu.next-hoz .next-menu-content>.next-menu-item,.next-menu.next-hoz>.next-menu-item{display:inline-block;vertical-align:top}.next-menu.next-hoz .next-menu-content,.next-menu.next-hoz .next-menu-footer,.next-menu.next-hoz .next-menu-header{display:inline-block}.next-menu-hoz-right{float:right}.next-menu-group-label{padding:0 12px;color:#999}.next-menu-divider{margin:8px 12px;border-bottom:1px solid #e6e7eb}.next-menu .next-menu-icon-selected.next-icon{position:absolute;top:0;margin-left:-16px}.next-menu .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-icon-selected.next-icon.next-menu-icon-right{right:4px}.next-menu .next-menu-icon-arrow.next-icon{position:absolute;top:0;right:10px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-icon-arrow.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow.next-icon:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-icon-arrow-down.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:scale(.5) rotate(180deg);-ms-transform:scale(.5) rotate(180deg);transform:scale(.5) rotate(180deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-down.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.next-menu .next-menu-icon-arrow-right.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:scale(.5) rotate(-90deg);-ms-transform:scale(.5) rotate(-90deg);transform:scale(.5) rotate(-90deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-right.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-hoz-icon-arrow.next-icon{position:absolute;top:0;right:6px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-hoz-icon-arrow.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-hoz-icon-arrow.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-hoz-icon-arrow.next-open:before{width:12px;font-size:12px;line-height:inherit}.next-menu.next-context{line-height:24px}.next-menu.next-context .next-menu-item-inner{height:24px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-input{vertical-align:middle;display:inline-table;border-collapse:separate;font-size:0;line-height:1;width:200px;border-spacing:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;border:1px solid #c4c6cf;background-color:#fff}.next-input,.next-input *,.next-input :after,.next-input :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input input{height:100%}.next-input input[type=reset],.next-input input[type=submit]{-webkit-appearance:button;cursor:pointer}.next-input input::-moz-focus-inner{border:0;padding:0}.next-input input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset}.next-input textarea{resize:none}.next-input input,.next-input textarea{width:100%;border:none;outline:none;padding:0;margin:0;font-weight:400;vertical-align:middle;background-color:transparent;color:#333}.next-input input::-ms-clear,.next-input textarea::-ms-clear{display:none}.next-input.next-input-textarea{border-radius:3px;font-size:0}.next-input.next-input-textarea textarea{color:#333;padding:4px 8px;font-size:12px;border-radius:3px}.next-input.next-input-textarea .next-input-control{display:block;width:auto;border-radius:3px}.next-input.next-input-textarea .next-input-len{padding:0 8px 4px;display:block;text-align:right;width:auto}.next-input.next-small{height:20px;border-radius:3px}.next-input.next-small .next-input-label{padding-left:8px;font-size:12px}.next-input.next-small .next-input-inner{font-size:12px}.next-input.next-small .next-input-control{padding-right:4px}.next-input.next-small input{height:18px;line-height:18px \0;padding:0 4px;font-size:12px}.next-input.next-small input::-webkit-input-placeholder{font-size:12px}.next-input.next-small input::-moz-placeholder{font-size:12px}.next-input.next-small input::-ms-input-placeholder{font-size:12px}.next-input.next-small input::placeholder{font-size:12px}.next-input.next-small .next-input-text-field{padding:0 4px;font-size:12px;height:18px;line-height:18px}.next-input.next-small .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-small input{border-radius:3px}.next-input.next-small .next-input-control{border-radius:0 3px 3px 0}.next-input.next-medium{height:28px;border-radius:3px}.next-input.next-medium .next-input-label{padding-left:8px;font-size:12px}.next-input.next-medium .next-input-inner{font-size:12px}.next-input.next-medium .next-input-control{padding-right:8px}.next-input.next-medium input{height:26px;line-height:26px \0;padding:0 8px;font-size:12px}.next-input.next-medium input::-webkit-input-placeholder{font-size:12px}.next-input.next-medium input::-moz-placeholder{font-size:12px}.next-input.next-medium input::-ms-input-placeholder{font-size:12px}.next-input.next-medium input::placeholder{font-size:12px}.next-input.next-medium .next-input-text-field{padding:0 8px;font-size:12px;height:26px;line-height:26px}.next-input.next-medium .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-medium input{border-radius:3px}.next-input.next-medium .next-input-control{border-radius:0 3px 3px 0}.next-input.next-large{height:40px;border-radius:3px}.next-input.next-large .next-input-label{padding-left:12px;font-size:16px}.next-input.next-large .next-input-inner{font-size:16px}.next-input.next-large .next-input-control{padding-right:8px}.next-input.next-large input{height:38px;line-height:38px \0;padding:0 12px;font-size:16px}.next-input.next-large input::-webkit-input-placeholder{font-size:16px}.next-input.next-large input::-moz-placeholder{font-size:16px}.next-input.next-large input::-ms-input-placeholder{font-size:16px}.next-input.next-large input::placeholder{font-size:16px}.next-input.next-large .next-input-text-field{padding:0 12px;font-size:16px;height:38px;line-height:38px}.next-input.next-large .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-input.next-large input{border-radius:3px}.next-input.next-large .next-input-control{border-radius:0 3px 3px 0}.next-input-hint-wrap{color:#999;position:relative}.next-input-hint-wrap .next-input-clear{opacity:0;z-index:1;position:absolute}.next-input-hint-wrap .next-input-hint{opacity:1}.next-input .next-icon-delete-filling:hover{cursor:pointer;color:#666}.next-input.next-focus,.next-input:hover{border-color:#a0a2ad;background-color:#fff}.next-input.next-focus .next-input-clear,.next-input:hover .next-input-clear{opacity:1}.next-input.next-focus .next-input-clear+.next-input-hint,.next-input:hover .next-input-clear+.next-input-hint{opacity:0}.next-input .next-input-clear:focus{opacity:1}.next-input .next-input-clear:focus+.next-input-hint{opacity:0}.next-input.next-focus{border-color:#5584ff;background-color:#fff}.next-input.next-error,.next-input.next-error.next-focus,.next-input.next-error:hover{border-color:#ff3000}.next-input.next-hidden{display:none}.next-input.next-noborder{border:none}.next-input-control .next-input-len{font-size:12px;line-height:12px;color:#999;display:table-cell;width:1px;vertical-align:bottom}.next-input-control .next-input-len.next-error{color:#ff3000}.next-input-control>*{display:table-cell;width:1%;top:0}.next-input-control>:not(:last-child){padding-right:4px}.next-input-control .next-icon{-webkit-transition:all .3s ease-out;transition:all .3s ease-out;color:#999}.next-input-control .next-icon-success-filling{color:#46bc15}.next-input-control .next-icon-loading{color:#4494f9}.next-input-label{color:#666}.next-input input::-moz-placeholder,.next-input textarea::-moz-placeholder{color:#999;opacity:1}.next-input input:-ms-input-placeholder,.next-input textarea:-ms-input-placeholder{color:#999}.next-input input::-webkit-input-placeholder,.next-input textarea::-webkit-input-placeholder{color:#999}.next-input.next-disabled{color:#ccc;cursor:not-allowed}.next-input.next-disabled,.next-input.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled input::-moz-placeholder,.next-input.next-disabled textarea::-moz-placeholder{color:#ccc;opacity:1}.next-input.next-disabled input:-ms-input-placeholder,.next-input.next-disabled textarea:-ms-input-placeholder{color:#ccc}.next-input.next-disabled input::-webkit-input-placeholder,.next-input.next-disabled textarea::-webkit-input-placeholder{color:#ccc}.next-input.next-disabled .next-input-label,.next-input.next-disabled .next-input-len{color:#ccc}.next-input.next-disabled input,.next-input.next-disabled textarea{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa;cursor:not-allowed}.next-input.next-disabled input:hover,.next-input.next-disabled textarea:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled .next-input-hint-wrap{color:#ccc}.next-input.next-disabled .next-input-hint-wrap .next-input-clear{opacity:0}.next-input.next-disabled .next-input-hint-wrap .next-input-hint{opacity:1}.next-input.next-disabled .next-input-hint-wrap .next-icon-delete-filling:hover{cursor:not-allowed;color:#ccc}.next-input.next-disabled .next-icon{color:#ccc}.next-input-control,.next-input-inner,.next-input-label{display:table-cell;width:1px;vertical-align:middle;line-height:1;background-color:transparent;white-space:nowrap}.next-input-group{display:inline-table;border-collapse:separate;border-spacing:0;line-height:0;width:100%}.next-input-group,.next-input-group *,.next-input-group :after,.next-input-group :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input-group-auto-width{width:100%;border-radius:0!important}.next-input-group>.next-input:first-child.next-large,.next-input-group>.next-input:first-child.next-medium,.next-input-group>.next-input:first-child.next-small{border-top-left-radius:3px!important;border-bottom-left-radius:3px!important}.next-input-group>.next-input:last-child.next-large,.next-input-group>.next-input:last-child.next-medium,.next-input-group>.next-input:last-child.next-small{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.next-input-group-addon{width:1px;display:table-cell;vertical-align:middle;white-space:nowrap}.next-input-group-addon:first-child,.next-input-group-addon:first-child>*{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group-addon:last-child,.next-input-group-addon:last-child>*{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group-text{color:#999;background-color:#f2f3f7;text-align:center;border:1px solid #c4c6cf;padding:0 8px}.next-input-group-text:first-child{border-right-width:0}.next-input-group-text:last-child{border-left-width:0}.next-input-group-text.next-disabled{color:#ccc;cursor:not-allowed}.next-input-group-text.next-disabled,.next-input-group-text.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input-group-text.next-medium,.next-input-group-text.next-small{font-size:12px;border-radius:3px}.next-input-group-text.next-large{font-size:16px;border-radius:3px}.next-input[dir=rtl].next-small .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-small .next-input-control{padding-right:0;padding-left:4px}.next-input[dir=rtl].next-medium .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-medium .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-large .next-input-label{padding-left:0;padding-right:12px}.next-input[dir=rtl].next-large .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-input-textarea .next-input-len{text-align:left}.next-input[dir=rtl] .next-input-control>:not(:last-child){padding-left:4px;padding-right:0}.next-input-group[dir=rtl] .next-input-group-addon:first-child{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-small{border-bottom-right-radius:3px!important;border-top-right-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-small{border-bottom-left-radius:3px!important;border-top-left-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-text:first-child{border-right-width:1px;border-left:0}.next-input-group[dir=rtl] .next-input-group-text:last-child{border-left-width:1px;border-right:0}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-select{display:inline-block;font-size:0;vertical-align:middle}.next-select,.next-select *,.next-select :after,.next-select :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-select-trigger{min-width:100px;outline:0;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-trigger .next-input-label{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-select-values{display:block;width:100%;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow:hidden}.next-select-trigger .next-select-values>em{font-style:inherit}.next-select-trigger .next-select-values input{padding-left:0;padding-right:0}.next-select-trigger .next-input-control{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-input-control>*{display:inline-block;width:auto}.next-select-trigger .next-input-control>.next-select-arrow{padding-right:0}.next-select-trigger .next-input.next-disabled em{color:#ccc}.next-select-trigger .next-input.next-disabled .next-select-arrow{cursor:not-allowed}.next-select-trigger .next-select-clear{display:none}.next-select-trigger.next-has-clear:hover .next-select-clear{display:inline-block}.next-select-trigger.next-has-clear:hover .next-select-arrow{display:none}.next-select .next-select-inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;min-width:100px;outline:0;color:#333}.next-select .next-select-inner .next-tag{line-height:1;margin-right:4px;margin-bottom:3px;padding-left:4px;padding-right:4px}.next-select-trigger-search{position:relative;display:inline-block;vertical-align:top;overflow:hidden;width:100%;max-width:100%}.next-select-trigger-search>input,.next-select-trigger-search>span{display:block;font-size:inherit;font-family:inherit;letter-spacing:inherit;white-space:nowrap;overflow:hidden}.next-select-trigger-search input{position:absolute;background-color:transparent;width:100%;height:100%!important;z-index:1;left:0;border:0;outline:0;margin:0;padding:0;cursor:inherit}.next-select-trigger-search>span{position:relative;visibility:hidden;white-space:pre;max-width:100%;z-index:-1}.next-select-single.next-no-search{cursor:pointer}.next-select-single.next-has-search.next-active .next-select-values>em{display:none}.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{width:1px;opacity:0;filter:alpha(opacity=0)}.next-select-single.next-inactive .next-select-trigger-search input,.next-select-single.next-no-search .next-select-trigger-search input{color:transparent}.next-select-single .next-select-values{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.next-select-single .next-select-values>em{vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.next-select-multiple .next-select-values,.next-select-tag .next-select-values{margin-bottom:-3px;height:auto!important}.next-select-multiple .next-select-trigger-search,.next-select-tag .next-select-trigger-search{margin-bottom:3px}.next-select-multiple .next-tag+.next-select-trigger-search,.next-select-tag .next-tag+.next-select-trigger-search{width:auto;min-width:1px}.next-select-multiple .next-input,.next-select-tag .next-input{height:auto;-webkit-box-align:start;-ms-flex-align:start;align-items:start}.next-select-multiple.next-small .next-select-values,.next-select-tag.next-small .next-select-values{min-height:18px;padding-top:2px;padding-bottom:2px;line-height:14px}.next-select-multiple.next-small .next-tag,.next-select-tag.next-small .next-tag{border:0;padding-top:0;padding-bottom:0;height:14px}.next-select-multiple.next-small .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-close-btn,.next-select-tag.next-small .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-close-btn{line-height:14px}.next-select-multiple.next-small .next-input-control,.next-select-multiple.next-small .next-input-label,.next-select-tag.next-small .next-input-control,.next-select-tag.next-small .next-input-label{line-height:18px}.next-select-multiple.next-medium .next-select-values,.next-select-tag.next-medium .next-select-values{min-height:26px;padding-top:3px;padding-bottom:3px;line-height:20px}.next-select-multiple.next-medium .next-tag,.next-select-tag.next-medium .next-tag{padding-top:1px;padding-bottom:1px;height:20px}.next-select-multiple.next-medium .next-tag .next-tag-body,.next-select-multiple.next-medium .next-tag .next-tag-close-btn,.next-select-tag.next-medium .next-tag .next-tag-body,.next-select-tag.next-medium .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-medium .next-input-control,.next-select-multiple.next-medium .next-input-label,.next-select-tag.next-medium .next-input-control,.next-select-tag.next-medium .next-input-label{line-height:26px}.next-select-multiple.next-large .next-select-values,.next-select-tag.next-large .next-select-values{min-height:38px;padding-top:7px;padding-bottom:7px;line-height:24px}.next-select-multiple.next-large .next-tag,.next-select-tag.next-large .next-tag{padding-top:3px;padding-bottom:3px;height:24px}.next-select-multiple.next-large .next-tag .next-tag-body,.next-select-multiple.next-large .next-tag .next-tag-close-btn,.next-select-tag.next-large .next-tag .next-tag-body,.next-select-tag.next-large .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-large .next-input-control,.next-select-multiple.next-large .next-input-label,.next-select-tag.next-large .next-input-control,.next-select-tag.next-large .next-input-label{line-height:38px}.next-select.next-no-search .next-select-trigger-search input{color:transparent}.next-select-auto-complete{width:160px}.next-select-auto-complete .next-input{width:100%}.next-select-auto-complete .next-input .next-input-hint-wrap{padding-right:1px}.next-select-auto-complete .next-input .next-select-arrow{padding-left:0}.next-select.next-active .next-select-arrow{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-select-arrow{cursor:pointer;width:auto!important;text-align:center;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-menu-wrapper{max-height:260px;overflow:auto;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none}.next-select-menu-wrapper .next-select-menu{max-height:none;border:none}.next-select-menu{max-height:260px;overflow:auto}.next-select-menu .next-select-menu-empty-content{padding-left:8px;padding-right:8px;color:#999}.next-select-menu.next-select-auto-complete-menu.next-select-menu-empty{display:none}.next-select-menu .next-menu-item-text .next-icon{vertical-align:middle}.next-select-all{display:block;cursor:pointer;padding:0 8px;margin:0 12px 8px;border-bottom:1px solid #dcdee3}.next-select-all:hover{color:#3e71f7}.next-select-all .next-menu-icon-selected.next-icon{display:inline-block!important;top:auto;color:#5584ff}.next-select-highlight{color:#5584ff;font-size:12px}.next-select-in-ie.next-select-trigger .next-select-values{overflow:visible}.next-select-in-ie.next-select-trigger .next-input-control,.next-select-in-ie.next-select-trigger .next-input-label{width:1px}.next-select-in-ie.next-select-trigger .next-input-control>*{display:table-cell;width:1%}.next-select-in-ie.next-select-trigger .next-select-arrow{display:table-cell}.next-select-in-ie.next-select-trigger .next-select-clear{display:none}.next-select-in-ie.next-select-trigger.next-select-multiple .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-tag .next-select-inner{vertical-align:top}.next-select-in-ie.next-select-trigger .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-single .next-select-values{display:inline-table}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-small .next-select-values{line-height:20px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-medium .next-select-values{line-height:28px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-large .next-select-values{line-height:40px}.next-select-in-ie.next-select-trigger .next-select-trigger-search>span{max-width:100px}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values{position:relative}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values>em{position:absolute;display:inline-block;height:100%;line-height:1;vertical-align:middle;overflow:hidden;left:4px;right:0;top:30%}.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{filter:alpha(opacity=0);font-size:0}.next-select-in-ie.next-select-trigger.next-no-search .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-trigger-search input{color:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-cascader{display:inline-block;overflow:auto;border:1px solid #dcdee3;border-radius:3px}.next-cascader,.next-cascader *,.next-cascader :after,.next-cascader :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-cascader-inner:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-cascader-menu-wrapper{float:left;overflow:auto;width:100px;height:192px}.next-cascader-menu-wrapper+.next-cascader-menu-wrapper{border-left:1px solid #dcdee3}.next-cascader-menu{position:relative;padding:0;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;min-width:auto;min-height:100%}.next-cascader-menu.next-has-right-border{border-right:1px solid #dcdee3}.next-cascader-menu-item.next-expanded{color:#333;background-color:#f2f3f7}.next-cascader-menu-icon-right{position:absolute;top:0;right:10px;color:#666}.next-cascader-menu-icon-right:hover{color:#333}.next-cascader-menu-icon-expand.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-cascader-menu-icon-expand.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-cascader-menu-icon-expand.next-icon:before{width:16px;font-size:16px}}.next-cascader-menu-icon-loading.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-cascader-menu-item.next-expanded .next-cascader-menu-icon-right{color:#333}.next-cascader-menu-item.next-expanded .next-cascader-menu-icon-loading{color:#5584ff}.next-cascader-filtered-list{height:192px;padding:0;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;overflow:auto}.next-cascader-filtered-list .next-menu-item-inner{overflow:visible}.next-cascader-filtered-item em{color:#5584ff;font-style:normal}.next-cascader[dir=rtl] .next-cascader-menu-wrapper{float:right;border-left:none;border-right:1px solid #dcdee3}.next-cascader[dir=rtl] .next-cascader-menu-wrapper:first-child{border-right:none}.next-cascader[dir=rtl] .next-cascader-menu.next-has-right-border{border-right:none;border-left:1px solid #dcdee3}.next-cascader[dir=rtl] .next-cascader-menu-icon-right{right:auto;left:10px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-cascader-select,.next-cascader-select *,.next-cascader-select-dropdown,.next-cascader-select :after,.next-cascader-select :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-cascader-select-dropdown{border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none}.next-cascader-select-dropdown *,.next-cascader-select-dropdown :after,.next-cascader-select-dropdown :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-cascader-select-dropdown .next-cascader{display:block;border:none;-webkit-box-shadow:none;box-shadow:none}.next-cascader-select-not-found{padding:0;border:none;-webkit-box-shadow:none;box-shadow:none;overflow:auto;color:#999}.next-cascader-select-not-found .next-menu-item:hover{color:#999;background:#fff;cursor:default} \ No newline at end of file diff --git a/demos/cascader-select/deps.json b/demos/cascader-select/deps.json new file mode 100644 index 0000000000..85b21f3b6c --- /dev/null +++ b/demos/cascader-select/deps.json @@ -0,0 +1 @@ +["select","cascader","demo-helper"] \ No newline at end of file diff --git a/demos/cascader-select/index.html b/demos/cascader-select/index.html new file mode 100644 index 0000000000..7acd2d865f --- /dev/null +++ b/demos/cascader-select/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/cascader/build/index.css b/demos/cascader/build/index.css new file mode 100644 index 0000000000..71fcc39433 --- /dev/null +++ b/demos/cascader/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-radio-button-large[dir=rtl]>label:first-child{margin-left:-1px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.next-radio-button-large[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large[dir=rtl] .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-wrapper[dir=rtl] .next-radio-label{margin-left:0;margin-right:4px}.next-radio-group[dir=rtl] .next-radio-label{margin-right:4px;margin-left:16px}.next-radio-button[dir=rtl]>label .next-radio-label{margin:0}.next-radio-wrapper{outline:0}.next-radio-wrapper .next-radio{display:inline-block;vertical-align:middle;position:relative;line-height:1}.next-radio-wrapper .next-radio,.next-radio-wrapper .next-radio *,.next-radio-wrapper .next-radio :after,.next-radio-wrapper .next-radio :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-radio-wrapper .next-radio input[type=radio]{opacity:0;position:absolute;vertical-align:middle;top:0;left:0;width:16px;height:16px;margin:0}.next-radio-wrapper .next-radio-inner{display:block;width:16px;height:16px;background:#fff;border-radius:50%;border:1px solid #c4c6cf;-webkit-transition:all .36s ease 0s;transition:all .36s ease 0s;-webkit-box-shadow:none;box-shadow:none}.next-radio-wrapper .next-radio-inner:after{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;border-radius:50%;top:50%;margin-top:-2px;left:50%;margin-left:-2px;background:#fff;content:" ";-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86)}.next-radio-wrapper.checked .next-radio-inner{border-color:#5584ff;background:#5584ff}.next-radio-wrapper.checked .next-radio-inner:after{width:4px;height:4px;font-weight:700;background:#fff;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.next-radio-wrapper.checked.hovered .next-radio-inner,.next-radio-wrapper.checked:hover .next-radio-inner{border-color:transparent}.next-radio-wrapper.disabled input[type=radio]{cursor:not-allowed}.next-radio-wrapper.disabled .next-radio-inner{border-color:#e6e7eb;background:#f7f8fa}.next-radio-wrapper.disabled.checked .next-radio-inner,.next-radio-wrapper.disabled .next-radio-inner.hovered,.next-radio-wrapper.disabled .next-radio-inner:hover{border-color:#e6e7eb}.next-radio-wrapper.disabled.checked .next-radio-inner:after{background:#ccc}.next-radio-wrapper:not(.disabled).focused .next-radio-inner,.next-radio-wrapper:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper:not(.disabled):focus .next-radio-inner,.next-radio-wrapper:not(.disabled):hover .next-radio-inner{border-color:#5584ff;background-color:#dee8ff}.next-radio-wrapper.checked.focused .next-radio-inner,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner{border-color:transparent;background:#3e71f7}.next-radio-wrapper.checked.focused .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner:after{background:#fff}.next-radio-button .next-radio,.next-radio-button input[type=radio]{width:0;height:0}.next-radio-button>label{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1;margin:0 0 0 -1px;border:1px solid #c4c6cf;background-color:#fff;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;vertical-align:middle}.next-radio-button>label .next-radio-label{display:block;color:#333;margin:0;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}.next-radio-button>label.hovered,.next-radio-button>label:focus,.next-radio-button>label:hover{z-index:10;border-color:#a0a2ad;background-color:#f2f3f7}.next-radio-button>label.hovered .next-radio-label,.next-radio-button>label:focus .next-radio-label,.next-radio-button>label:hover .next-radio-label{color:#333}.next-radio-button>label.checked{z-index:11;border-color:#5584ff;background-color:#fff}.next-radio-button>label.checked .next-radio-label{color:#5584ff}.next-radio-button>label.disabled{z-index:0;cursor:not-allowed;border-color:#e6e7eb;background-color:#f7f8fa}.next-radio-button>label.disabled .next-radio-label{color:#ccc}.next-radio-button>label.checked.disabled{z-index:0;border-color:#e6e7eb;background-color:#f2f3f7}.next-radio-button>label.checked.disabled .next-radio-label{color:#ccc}.next-radio-button-large>label{padding:0 8px;height:40px;line-height:40px}.next-radio-button-large>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-large .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium>label{padding:0 8px;height:28px;line-height:28px}.next-radio-button-medium>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-medium>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium .next-radio-label{height:26px;line-height:26px;font-size:12px}.next-radio-button-small>label{padding:0 8px;height:20px;line-height:20px}.next-radio-button-small>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small .next-radio-label{height:18px;line-height:18px;font-size:12px}.next-radio-single-input input[type=radio]{opacity:0;position:absolute;top:0;left:0;margin:0}.next-radio-group{display:inline-block}.next-radio-group .next-radio-label{color:#333;margin-right:16px}.next-radio-group.disabled .next-radio-label{color:#ccc}.next-radio-group-ver .next-radio-wrapper{display:block;margin-bottom:8px}.next-radio-label{margin:0;margin-left:4px;font-size:12px;vertical-align:middle;line-height:1}@-moz-document url-prefix(){.next-radio{margin-top:-1px}@supports ((-webkit-animation:calc(0s)) or (animation:calc(0s))){.next-radio{margin-top:-3px}}}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-checkbox-wrapper[dir=rtl]{margin-right:8px;margin-left:0}.next-checkbox-wrapper[dir=rtl]:first-child{margin-right:0}.next-checkbox-wrapper[dir=rtl]>.next-checkbox-label{margin-right:4px;margin-left:0}.next-checkbox-wrapper,.next-checkbox-wrapper *,.next-checkbox-wrapper :after,.next-checkbox-wrapper :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-checkbox-wrapper .next-checkbox{display:inline-block;position:relative;line-height:1;vertical-align:middle}.next-checkbox-wrapper input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:16px;height:16px;margin:0}.next-checkbox-wrapper .next-checkbox-inner{display:block;width:16px;height:16px;background:#fff;border-radius:3px;border:1px solid #c4c6cf;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;text-align:left;-webkit-box-shadow:none;box-shadow:none}.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;top:0;opacity:0;line-height:16px;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);color:#fff;left:4px;margin-left:0}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{vertical-align:top;margin-top:0}.next-checkbox-wrapper.checked .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.checked .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);margin-left:0}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.indeterminate .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.indeterminate .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1);margin-left:0}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.disabled input[type=checkbox]{cursor:not-allowed}.next-checkbox-wrapper.disabled .next-checkbox-inner{border-color:#e6e7eb;background:#f7f8fa}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover{border-color:#e6e7eb}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner>.next-icon{color:#ccc;opacity:1}.next-checkbox-wrapper.focused .next-checkbox-inner,.next-checkbox-wrapper.hovered .next-checkbox-inner,.next-checkbox-wrapper:not(.disabled):hover .next-checkbox-inner{border-color:#5584ff;background-color:#dee8ff}.next-checkbox-wrapper.checked.focused .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner{border-color:transparent;background-color:#3e71f7}.next-checkbox-wrapper.checked.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner>.next-icon{color:#fff;opacity:1}.next-checkbox-group .next-checkbox-wrapper{margin-left:8px}.next-checkbox-group .next-checkbox-wrapper:first-child{margin-left:0}.next-checkbox-group-ver .next-checkbox-wrapper{display:block;margin-left:0;margin-right:0;margin-bottom:8px}.next-checkbox-label{font-size:12px;vertical-align:middle;margin:0;margin-left:4px;line-height:1}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-menu[dir=rtl] .next-menu-item-helper{float:left}.next-menu[dir=rtl] .next-menu-item .next-checkbox,.next-menu[dir=rtl] .next-menu-item .next-radio{margin-left:4px;margin-right:0}.next-menu[dir=rtl] .next-menu-hoz-right{float:left}.next-menu[dir=rtl] .next-menu-hoz-icon-arrow.next-icon{left:6px;right:auto}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon{margin-left:0;margin-right:-16px}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon.next-menu-icon-right{right:auto;left:4px}.next-menu[dir=rtl] .next-menu-icon-arrow.next-icon{left:10px;right:auto}.next-menu{position:relative;min-width:100px;padding:8px 0;margin:0;list-style:none;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;background:#fff;line-height:32px;font-size:12px}.next-menu,.next-menu *,.next-menu :after,.next-menu :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-menu:focus,.next-menu :focus{outline:0}.next-menu-embeddable,.next-menu-embeddable .next-menu-item.next-disabled,.next-menu-embeddable .next-menu-item.next-disabled .next-menu-item-text>a{background:initial;border:none}.next-menu-embeddable .next-menu-item-inner{height:100%}.next-menu-content{position:relative}.next-menu-content,.next-menu-sub-menu{padding:0;margin:0;list-style:none}.next-menu-sub-menu.next-expand-enter{overflow:hidden}.next-menu-sub-menu.next-expand-enter-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-sub-menu.next-expand-leave{overflow:hidden}.next-menu-sub-menu.next-expand-leave-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-item{position:relative;padding:0 20px;-webkit-transition:background .2s ease;transition:background .2s ease;color:#333;cursor:pointer}.next-menu-item-helper{float:right;color:#999;font-style:normal;font-size:12px}.next-menu-item .next-checkbox,.next-menu-item .next-radio{margin-right:4px}.next-menu-item.next-selected{color:#333;background-color:#fff}.next-menu-item.next-selected .next-menu-icon-arrow{color:#666}.next-menu-item.next-selected .next-menu-icon-selected{color:#5584ff}.next-menu-item.next-disabled,.next-menu-item.next-disabled .next-menu-item-text>a{color:#ccc;background-color:#fff;cursor:not-allowed}.next-menu-item.next-disabled .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-icon-selected,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-selected{color:#ccc}.next-menu-item:not(.next-disabled).next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover,.next-menu-item:not(.next-disabled).next-selected:focus,.next-menu-item:not(.next-disabled).next-selected:focus:hover,.next-menu-item:not(.next-disabled).next-selected:hover,.next-menu-item:not(.next-disabled):hover{color:#333;background-color:#f2f3f7}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled):hover .next-menu-icon-arrow{color:#333}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled):hover .next-menu-icon-selected{color:#5584ff}.next-menu-item-inner{height:32px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.next-menu-item-text{vertical-align:middle}.next-menu-item-text>a{display:inline-block;text-decoration:none;color:#333}.next-menu-item-text>a:before{position:absolute;background-color:transparent;top:0;left:0;bottom:0;right:0;content:""}.next-menu.next-hoz{padding:0}.next-menu.next-hoz .next-menu-content>.next-menu-item,.next-menu.next-hoz>.next-menu-item{display:inline-block;vertical-align:top}.next-menu.next-hoz .next-menu-content,.next-menu.next-hoz .next-menu-footer,.next-menu.next-hoz .next-menu-header{display:inline-block}.next-menu-hoz-right{float:right}.next-menu-group-label{padding:0 12px;color:#999}.next-menu-divider{margin:8px 12px;border-bottom:1px solid #e6e7eb}.next-menu .next-menu-icon-selected.next-icon{position:absolute;top:0;margin-left:-16px}.next-menu .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-icon-selected.next-icon.next-menu-icon-right{right:4px}.next-menu .next-menu-icon-arrow.next-icon{position:absolute;top:0;right:10px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-icon-arrow.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow.next-icon:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-icon-arrow-down.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:scale(.5) rotate(180deg);-ms-transform:scale(.5) rotate(180deg);transform:scale(.5) rotate(180deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-down.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.next-menu .next-menu-icon-arrow-right.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:scale(.5) rotate(-90deg);-ms-transform:scale(.5) rotate(-90deg);transform:scale(.5) rotate(-90deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-right.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-hoz-icon-arrow.next-icon{position:absolute;top:0;right:6px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-hoz-icon-arrow.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-hoz-icon-arrow.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-hoz-icon-arrow.next-open:before{width:12px;font-size:12px;line-height:inherit}.next-menu.next-context{line-height:24px}.next-menu.next-context .next-menu-item-inner{height:24px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-cascader{display:inline-block;overflow:auto;border:1px solid #dcdee3;border-radius:3px}.next-cascader,.next-cascader *,.next-cascader :after,.next-cascader :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-cascader-inner:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-cascader-menu-wrapper{float:left;overflow:auto;width:100px;height:192px}.next-cascader-menu-wrapper+.next-cascader-menu-wrapper{border-left:1px solid #dcdee3}.next-cascader-menu{position:relative;padding:0;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;min-width:auto;min-height:100%}.next-cascader-menu.next-has-right-border{border-right:1px solid #dcdee3}.next-cascader-menu-item.next-expanded{color:#333;background-color:#f2f3f7}.next-cascader-menu-icon-right{position:absolute;top:0;right:10px;color:#666}.next-cascader-menu-icon-right:hover{color:#333}.next-cascader-menu-icon-expand.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-cascader-menu-icon-expand.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-cascader-menu-icon-expand.next-icon:before{width:16px;font-size:16px}}.next-cascader-menu-icon-loading.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-cascader-menu-item.next-expanded .next-cascader-menu-icon-right{color:#333}.next-cascader-menu-item.next-expanded .next-cascader-menu-icon-loading{color:#5584ff}.next-cascader-filtered-list{height:192px;padding:0;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;overflow:auto}.next-cascader-filtered-list .next-menu-item-inner{overflow:visible}.next-cascader-filtered-item em{color:#5584ff;font-style:normal}.next-cascader[dir=rtl] .next-cascader-menu-wrapper{float:right;border-left:none;border-right:1px solid #dcdee3}.next-cascader[dir=rtl] .next-cascader-menu-wrapper:first-child{border-right:none}.next-cascader[dir=rtl] .next-cascader-menu.next-has-right-border{border-right:none;border-left:1px solid #dcdee3}.next-cascader[dir=rtl] .next-cascader-menu-icon-right{right:auto;left:10px} \ No newline at end of file diff --git a/demos/cascader/deps.json b/demos/cascader/deps.json new file mode 100644 index 0000000000..3db4d08099 --- /dev/null +++ b/demos/cascader/deps.json @@ -0,0 +1 @@ +["menu","icon","demo-helper"] \ No newline at end of file diff --git a/demos/cascader/index.html b/demos/cascader/index.html new file mode 100644 index 0000000000..0563f4ebdf --- /dev/null +++ b/demos/cascader/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/checkbox/build/index.css b/demos/checkbox/build/index.css new file mode 100644 index 0000000000..4dfc46be3b --- /dev/null +++ b/demos/checkbox/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-checkbox-wrapper[dir=rtl]{margin-right:8px;margin-left:0}.next-checkbox-wrapper[dir=rtl]:first-child{margin-right:0}.next-checkbox-wrapper[dir=rtl]>.next-checkbox-label{margin-right:4px;margin-left:0}.next-checkbox-wrapper,.next-checkbox-wrapper *,.next-checkbox-wrapper :after,.next-checkbox-wrapper :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-checkbox-wrapper .next-checkbox{display:inline-block;position:relative;line-height:1;vertical-align:middle}.next-checkbox-wrapper input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:16px;height:16px;margin:0}.next-checkbox-wrapper .next-checkbox-inner{display:block;width:16px;height:16px;background:#fff;border-radius:3px;border:1px solid #c4c6cf;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;text-align:left;-webkit-box-shadow:none;box-shadow:none}.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;top:0;opacity:0;line-height:16px;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);color:#fff;left:4px;margin-left:0}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{vertical-align:top;margin-top:0}.next-checkbox-wrapper.checked .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.checked .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);margin-left:0}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.indeterminate .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.indeterminate .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1);margin-left:0}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.disabled input[type=checkbox]{cursor:not-allowed}.next-checkbox-wrapper.disabled .next-checkbox-inner{border-color:#e6e7eb;background:#f7f8fa}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover{border-color:#e6e7eb}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner>.next-icon{color:#ccc;opacity:1}.next-checkbox-wrapper.focused .next-checkbox-inner,.next-checkbox-wrapper.hovered .next-checkbox-inner,.next-checkbox-wrapper:not(.disabled):hover .next-checkbox-inner{border-color:#5584ff;background-color:#dee8ff}.next-checkbox-wrapper.checked.focused .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner{border-color:transparent;background-color:#3e71f7}.next-checkbox-wrapper.checked.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner>.next-icon{color:#fff;opacity:1}.next-checkbox-group .next-checkbox-wrapper{margin-left:8px}.next-checkbox-group .next-checkbox-wrapper:first-child{margin-left:0}.next-checkbox-group-ver .next-checkbox-wrapper{display:block;margin-left:0;margin-right:0;margin-bottom:8px}.next-checkbox-label{font-size:12px;vertical-align:middle;margin:0;margin-left:4px;line-height:1} \ No newline at end of file diff --git a/demos/checkbox/deps.json b/demos/checkbox/deps.json new file mode 100644 index 0000000000..caf0f7c5b8 --- /dev/null +++ b/demos/checkbox/deps.json @@ -0,0 +1 @@ +["icon","animate","demo-helper","field"] \ No newline at end of file diff --git a/demos/checkbox/index.html b/demos/checkbox/index.html new file mode 100644 index 0000000000..4c6d5cdbe4 --- /dev/null +++ b/demos/checkbox/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/collapse/build/index.css b/demos/collapse/build/index.css new file mode 100644 index 0000000000..74ac9e9030 --- /dev/null +++ b/demos/collapse/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-collapse[dir=rtl] .next-collapse-panel-title{padding:8px 28px 8px 0}.next-collapse[dir=rtl] .next-collapse-panel-icon{left:inherit;right:12px;-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg);margin-left:0;margin-right:0}.next-collapse[dir=rtl] .next-collapse-panel-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-collapse[dir=rtl] .next-collapse-panel-icon{-webkit-transform:scale(.5) rotate(270deg);-ms-transform:scale(.5) rotate(270deg);transform:scale(.5) rotate(270deg);margin-left:-4px;margin-right:-4px}.next-collapse[dir=rtl] .next-collapse-panel-icon:before{width:16px;font-size:16px}}.next-collapse{border:1px solid #dcdee3;border-radius:3px;overflow:hidden}.next-collapse,.next-collapse *,.next-collapse :after,.next-collapse :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-collapse:focus,.next-collapse :focus{outline:0}.next-collapse-panel:not(:first-child){border-top:1px solid #dcdee3}.next-collapse .next-collapse-panel-icon{position:absolute;color:#333;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;left:12px;margin-top:-2px;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);margin-left:0;margin-right:0}.next-collapse .next-collapse-panel-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-collapse .next-collapse-panel-icon{-webkit-transform:scale(.5) rotate(90deg);-ms-transform:scale(.5) rotate(90deg);transform:scale(.5) rotate(90deg);margin-left:-4px;margin-right:-4px}.next-collapse .next-collapse-panel-icon:before{width:16px;font-size:16px}}.next-collapse-panel-title{position:relative;line-height:20px;background:#f2f3f7;font-size:14px;font-weight:400;color:#333;cursor:pointer;padding:8px 0 8px 28px;-webkit-transition:background .2s ease;transition:background .2s ease}.next-collapse-panel-title:hover{background:#ebecf0;color:#333;font-weight:400}.next-collapse-panel-title:hover .next-collapse-panel-icon{color:#333}.next-collapse-panel-content{overflow:hidden;height:0;padding:0 16px;background:#fff;font-size:12px;color:#666;-webkit-transition:all .3s cubic-bezier(.23,1,.32,1);transition:all .3s cubic-bezier(.23,1,.32,1);opacity:0}.next-collapse-panel-expanded>.next-collapse-panel-content{display:block;padding:12px 16px;height:auto;opacity:1}.next-collapse .next-collapse-panel-icon.next-collapse-panel-icon-expanded{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);margin-left:0;margin-right:0}.next-collapse .next-collapse-panel-icon.next-collapse-panel-icon-expanded:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-collapse .next-collapse-panel-icon.next-collapse-panel-icon-expanded{-webkit-transform:scale(.5) rotate(180deg);-ms-transform:scale(.5) rotate(180deg);transform:scale(.5) rotate(180deg);margin-left:-4px;margin-right:-4px}.next-collapse .next-collapse-panel-icon.next-collapse-panel-icon-expanded:before{width:16px;font-size:16px}}.next-collapse-disabled{border-color:#e6e7eb}.next-collapse-panel-disabled{overflow:hidden}.next-collapse-panel-disabled:not(:first-child){border-color:#e6e7eb}.next-collapse-panel-disabled>.next-collapse-panel-title{cursor:not-allowed;color:#ccc;background:#f2f3f7}.next-collapse-panel-disabled .next-collapse-panel-icon{color:#ccc}.next-collapse-panel-disabled .next-collapse-panel-title:hover{font-weight:400}.next-collapse-panel-disabled .next-collapse-panel-title:hover .next-collapse-panel-icon{color:#ccc}.next-collapse-panel-disabled:hover{color:#ccc;background:#f2f3f7} \ No newline at end of file diff --git a/demos/collapse/deps.json b/demos/collapse/deps.json new file mode 100644 index 0000000000..963cf92bcf --- /dev/null +++ b/demos/collapse/deps.json @@ -0,0 +1 @@ +["icon","demo-helper"] \ No newline at end of file diff --git a/demos/collapse/index.html b/demos/collapse/index.html new file mode 100644 index 0000000000..bf79bc5020 --- /dev/null +++ b/demos/collapse/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/date-picker/build/index.css b/demos/date-picker/build/index.css new file mode 100644 index 0000000000..aae4d8523c --- /dev/null +++ b/demos/date-picker/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-overlay-wrapper .next-overlay-inner{z-index:1001}.next-overlay-wrapper .next-overlay-backdrop{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;background:#000;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0}.next-overlay-wrapper.opened .next-overlay-backdrop{opacity:.2}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-btn,.next-btn *,.next-btn :after,.next-btn :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-btn::-moz-focus-inner{border:0;padding:0}.next-btn,.next-btn:active,.next-btn:focus,.next-btn:hover{outline:0}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-btn{position:relative;display:inline-block;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;text-align:center;text-transform:none;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;cursor:pointer}.next-btn:after{text-align:center;position:absolute;opacity:0;visibility:hidden;-webkit-transition:opacity .5s ease;transition:opacity .5s ease}.next-btn .next-icon.next-xs:before{vertical-align:baseline}.next-btn.hover,.next-btn:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn.next-small{border-radius:3px;padding:0 8px;height:20px;line-height:18px;font-size:12px;border-width:1px}.next-btn.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-small>.next-btn-icon.next-icon-alone:before,.next-btn.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small.next-btn-loading{padding-left:24px}.next-btn.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:8px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-small.next-btn-loading>.next-icon{display:none}.next-btn.next-medium{border-radius:3px;padding:0 12px;height:28px;line-height:26px;font-size:12px;border-width:1px}.next-btn.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium.next-btn-loading{padding-left:28px}.next-btn.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:12px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-medium.next-btn-loading>.next-icon{display:none}.next-btn.next-large{border-radius:3px;padding:0 16px;height:40px;line-height:38px;font-size:16px;border-width:1px}.next-btn.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-large>.next-btn-icon.next-icon-alone:before,.next-btn.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large.next-btn-loading{padding-left:36px}.next-btn.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:16px;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn.next-large.next-btn-loading>.next-icon{display:none}.next-btn.next-btn-normal{border-style:solid;background-color:#fff;border-color:#c4c6cf}.next-btn.next-btn-normal,.next-btn.next-btn-normal.visited,.next-btn.next-btn-normal:link,.next-btn.next-btn-normal:visited{color:#333}.next-btn.next-btn-normal.active,.next-btn.next-btn-normal.hover,.next-btn.next-btn-normal:active,.next-btn.next-btn-normal:focus,.next-btn.next-btn-normal:hover{color:#333;background-color:#f2f3f7;border-color:#a0a2ad;text-decoration:none}.next-btn.next-btn-primary{border-style:solid;background-color:#5584ff;border-color:transparent}.next-btn.next-btn-primary,.next-btn.next-btn-primary.visited,.next-btn.next-btn-primary:link,.next-btn.next-btn-primary:visited{color:#fff}.next-btn.next-btn-primary.active,.next-btn.next-btn-primary.hover,.next-btn.next-btn-primary:active,.next-btn.next-btn-primary:focus,.next-btn.next-btn-primary:hover{color:#fff;background-color:#3e71f7;border-color:transparent;text-decoration:none}.next-btn.next-btn-secondary{border-style:solid;background-color:#fff;border-color:#5584ff}.next-btn.next-btn-secondary,.next-btn.next-btn-secondary.visited,.next-btn.next-btn-secondary:link,.next-btn.next-btn-secondary:visited{color:#5584ff}.next-btn.next-btn-secondary.active,.next-btn.next-btn-secondary.hover,.next-btn.next-btn-secondary:active,.next-btn.next-btn-secondary:focus,.next-btn.next-btn-secondary:hover{color:#fff;background-color:#3e71f7;border-color:#3e71f7;text-decoration:none}.next-btn.disabled,.next-btn[disabled]{cursor:not-allowed;background-color:#f7f8fa;border-color:#e6e7eb}.next-btn.disabled,.next-btn.disabled.visited,.next-btn.disabled:link,.next-btn.disabled:visited,.next-btn[disabled],.next-btn[disabled].visited,.next-btn[disabled]:link,.next-btn[disabled]:visited{color:#ccc}.next-btn.disabled.active,.next-btn.disabled.hover,.next-btn.disabled:active,.next-btn.disabled:focus,.next-btn.disabled:hover,.next-btn[disabled].active,.next-btn[disabled].hover,.next-btn[disabled]:active,.next-btn[disabled]:focus,.next-btn[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-warning{border-style:solid}.next-btn-warning.next-btn-primary{background-color:#ff3000;border-color:#ff3000}.next-btn-warning.next-btn-primary,.next-btn-warning.next-btn-primary.visited,.next-btn-warning.next-btn-primary:link,.next-btn-warning.next-btn-primary:visited{color:#fff}.next-btn-warning.next-btn-primary.active,.next-btn-warning.next-btn-primary.hover,.next-btn-warning.next-btn-primary:active,.next-btn-warning.next-btn-primary:focus,.next-btn-warning.next-btn-primary:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary[disabled]{background-color:#f7f8fa;border-color:#dcdee3}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary.disabled.visited,.next-btn-warning.next-btn-primary.disabled:link,.next-btn-warning.next-btn-primary.disabled:visited,.next-btn-warning.next-btn-primary[disabled],.next-btn-warning.next-btn-primary[disabled].visited,.next-btn-warning.next-btn-primary[disabled]:link,.next-btn-warning.next-btn-primary[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-primary.disabled.active,.next-btn-warning.next-btn-primary.disabled.hover,.next-btn-warning.next-btn-primary.disabled:active,.next-btn-warning.next-btn-primary.disabled:focus,.next-btn-warning.next-btn-primary.disabled:hover,.next-btn-warning.next-btn-primary[disabled].active,.next-btn-warning.next-btn-primary[disabled].hover,.next-btn-warning.next-btn-primary[disabled]:active,.next-btn-warning.next-btn-primary[disabled]:focus,.next-btn-warning.next-btn-primary[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#dcdee3;text-decoration:none}.next-btn-warning.next-btn-normal{background-color:#fff;border-color:#ff3000}.next-btn-warning.next-btn-normal,.next-btn-warning.next-btn-normal.visited,.next-btn-warning.next-btn-normal:link,.next-btn-warning.next-btn-normal:visited{color:#ff3000}.next-btn-warning.next-btn-normal.active,.next-btn-warning.next-btn-normal.hover,.next-btn-warning.next-btn-normal:active,.next-btn-warning.next-btn-normal:focus,.next-btn-warning.next-btn-normal:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal[disabled]{background-color:#f7f8fa;border-color:#e6e7eb}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal.disabled.visited,.next-btn-warning.next-btn-normal.disabled:link,.next-btn-warning.next-btn-normal.disabled:visited,.next-btn-warning.next-btn-normal[disabled],.next-btn-warning.next-btn-normal[disabled].visited,.next-btn-warning.next-btn-normal[disabled]:link,.next-btn-warning.next-btn-normal[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-normal.disabled.active,.next-btn-warning.next-btn-normal.disabled.hover,.next-btn-warning.next-btn-normal.disabled:active,.next-btn-warning.next-btn-normal.disabled:focus,.next-btn-warning.next-btn-normal.disabled:hover,.next-btn-warning.next-btn-normal[disabled].active,.next-btn-warning.next-btn-normal[disabled].hover,.next-btn-warning.next-btn-normal[disabled]:active,.next-btn-warning.next-btn-normal[disabled]:focus,.next-btn-warning.next-btn-normal[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-text{border-radius:0}.next-btn-text,.next-btn-text.hover,.next-btn-text:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn-text.next-btn-primary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-primary,.next-btn-text.next-btn-primary.visited,.next-btn-text.next-btn-primary:link,.next-btn-text.next-btn-primary:visited{color:#5584ff}.next-btn-text.next-btn-primary.active,.next-btn-text.next-btn-primary.hover,.next-btn-text.next-btn-primary:active,.next-btn-text.next-btn-primary:focus,.next-btn-text.next-btn-primary:hover{color:#3e71f7;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-secondary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-secondary,.next-btn-text.next-btn-secondary.visited,.next-btn-text.next-btn-secondary:link,.next-btn-text.next-btn-secondary:visited{color:#666}.next-btn-text.next-btn-secondary.active,.next-btn-text.next-btn-secondary.hover,.next-btn-text.next-btn-secondary:active,.next-btn-text.next-btn-secondary:focus,.next-btn-text.next-btn-secondary:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-normal{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-normal,.next-btn-text.next-btn-normal.visited,.next-btn-text.next-btn-normal:link,.next-btn-text.next-btn-normal:visited{color:#333}.next-btn-text.next-btn-normal.active,.next-btn-text.next-btn-normal.hover,.next-btn-text.next-btn-normal:active,.next-btn-text.next-btn-normal:focus,.next-btn-text.next-btn-normal:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-large{border-radius:0;padding:0;height:24px;line-height:24px;font-size:14px;border-width:0}.next-btn-text.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-large>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large.next-btn-loading{padding-left:20px}.next-btn-text.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:0;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn-text.next-large.next-btn-loading>.next-icon{display:none}.next-btn-text.next-medium{border-radius:0;padding:0;height:20px;line-height:20px;font-size:12px;border-width:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium.next-btn-loading{padding-left:16px}.next-btn-text.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-medium.next-btn-loading>.next-icon{display:none}.next-btn-text.next-small{border-radius:0;padding:0;height:16px;line-height:16px;font-size:12px;border-width:0}.next-btn-text.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-small>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small.next-btn-loading{padding-left:16px}.next-btn-text.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-small.next-btn-loading>.next-icon{display:none}.next-btn-text.disabled,.next-btn-text[disabled]{background-color:transparent;border-color:transparent}.next-btn-text.disabled,.next-btn-text.disabled.visited,.next-btn-text.disabled:link,.next-btn-text.disabled:visited,.next-btn-text[disabled],.next-btn-text[disabled].visited,.next-btn-text[disabled]:link,.next-btn-text[disabled]:visited{color:#ccc}.next-btn-text.disabled.active,.next-btn-text.disabled.hover,.next-btn-text.disabled:active,.next-btn-text.disabled:focus,.next-btn-text.disabled:hover,.next-btn-text[disabled].active,.next-btn-text[disabled].hover,.next-btn-text[disabled]:active,.next-btn-text[disabled]:focus,.next-btn-text[disabled]:hover{color:#ccc;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-loading{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-loading,.next-btn-text.next-btn-loading.visited,.next-btn-text.next-btn-loading:link,.next-btn-text.next-btn-loading:visited{color:#333}.next-btn-text.next-btn-loading.active,.next-btn-text.next-btn-loading.hover,.next-btn-text.next-btn-loading:active,.next-btn-text.next-btn-loading:focus,.next-btn-text.next-btn-loading:hover{color:#333;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-loading{pointer-events:none}.next-btn-loading:after{font-family:NextIcon;content:"\E646";opacity:1;visibility:visible;-webkit-animation:loadingCircle 2s infinite linear;animation:loadingCircle 2s infinite linear}.next-btn-ghost{-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-btn-ghost.next-btn-dark{background-color:transparent;border-color:#fff}.next-btn-ghost.next-btn-dark,.next-btn-ghost.next-btn-dark.visited,.next-btn-ghost.next-btn-dark:link,.next-btn-ghost.next-btn-dark:visited{color:#fff}.next-btn-ghost.next-btn-dark.active,.next-btn-ghost.next-btn-dark.hover,.next-btn-ghost.next-btn-dark:active,.next-btn-ghost.next-btn-dark:focus,.next-btn-ghost.next-btn-dark:hover{color:#fff;background-color:hsla(0,0%,100%,.8);border-color:#fff;text-decoration:none}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark[disabled]{background-color:transparent;border-color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark.disabled.visited,.next-btn-ghost.next-btn-dark.disabled:link,.next-btn-ghost.next-btn-dark.disabled:visited,.next-btn-ghost.next-btn-dark[disabled],.next-btn-ghost.next-btn-dark[disabled].visited,.next-btn-ghost.next-btn-dark[disabled]:link,.next-btn-ghost.next-btn-dark[disabled]:visited{color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled.active,.next-btn-ghost.next-btn-dark.disabled.hover,.next-btn-ghost.next-btn-dark.disabled:active,.next-btn-ghost.next-btn-dark.disabled:focus,.next-btn-ghost.next-btn-dark.disabled:hover,.next-btn-ghost.next-btn-dark[disabled].active,.next-btn-ghost.next-btn-dark[disabled].hover,.next-btn-ghost.next-btn-dark[disabled]:active,.next-btn-ghost.next-btn-dark[disabled]:focus,.next-btn-ghost.next-btn-dark[disabled]:hover{color:hsla(0,0%,100%,.4);background-color:transparent;border-color:hsla(0,0%,100%,.4);text-decoration:none}.next-btn-ghost.next-btn-light{background-color:transparent;border-color:#333}.next-btn-ghost.next-btn-light,.next-btn-ghost.next-btn-light.visited,.next-btn-ghost.next-btn-light:link,.next-btn-ghost.next-btn-light:visited{color:#333}.next-btn-ghost.next-btn-light.active,.next-btn-ghost.next-btn-light.hover,.next-btn-ghost.next-btn-light:active,.next-btn-ghost.next-btn-light:focus,.next-btn-ghost.next-btn-light:hover{color:#999;background-color:rgba(0,0,0,.92);border-color:#333;text-decoration:none}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light[disabled]{background-color:transparent;border-color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light.disabled.visited,.next-btn-ghost.next-btn-light.disabled:link,.next-btn-ghost.next-btn-light.disabled:visited,.next-btn-ghost.next-btn-light[disabled],.next-btn-ghost.next-btn-light[disabled].visited,.next-btn-ghost.next-btn-light[disabled]:link,.next-btn-ghost.next-btn-light[disabled]:visited{color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled.active,.next-btn-ghost.next-btn-light.disabled.hover,.next-btn-ghost.next-btn-light.disabled:active,.next-btn-ghost.next-btn-light.disabled:focus,.next-btn-ghost.next-btn-light.disabled:hover,.next-btn-ghost.next-btn-light[disabled].active,.next-btn-ghost.next-btn-light[disabled].hover,.next-btn-ghost.next-btn-light[disabled]:active,.next-btn-ghost.next-btn-light[disabled]:focus,.next-btn-ghost.next-btn-light[disabled]:hover{color:rgba(0,0,0,.1);background-color:transparent;border-color:rgba(0,0,0,.1);text-decoration:none}.next-btn-group{position:relative;display:inline-block;vertical-align:middle}.next-btn-group>.next-btn{position:relative;float:left;-webkit-box-shadow:none;box-shadow:none}.next-btn-group>.next-btn.active,.next-btn-group>.next-btn:active,.next-btn-group>.next-btn:focus,.next-btn-group>.next-btn:hover{z-index:1}.next-btn-group>.next-btn.disabled,.next-btn-group>.next-btn[disabled]{z-index:0}.next-btn-group .next-btn.next-btn{margin:0 0 0 -1px}.next-btn-group .next-btn:not(:first-child):not(:last-child){border-radius:0}.next-btn-group>.next-btn:first-child{margin:0}.next-btn-group>.next-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group>.next-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group>.next-btn-primary:not(:first-child){border-left-color:hsla(0,0%,100%,.2)}.next-btn-group>.next-btn-primary:not(:first-child):hover{border-left-color:transparent}.next-btn-group>.next-btn-primary:not(:first-child).disabled,.next-btn-group>.next-btn-primary:not(:first-child)[disabled]{border-left-color:#e6e7eb}.next-btn-group[dir=rtl]>.next-btn{float:right}.next-btn-group[dir=rtl] .next-btn.next-btn{margin:0 -1px 0 0}.next-btn-group[dir=rtl]>.next-btn:first-child:not(:last-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group[dir=rtl]>.next-btn:last-child:not(:first-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child){border-right-color:hsla(0,0%,100%,.2)}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child):hover{border-right-color:transparent}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child).disabled,.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child)[disabled]{border-right-color:#e6e7eb}.next-btn.next-small[dir=rtl]{border-radius:3px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl].next-btn-loading{padding-left:8px;padding-right:24px}.next-btn.next-small[dir=rtl].next-btn-loading:after{right:8px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-medium[dir=rtl]{border-radius:3px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl].next-btn-loading{padding-left:12px;padding-right:28px}.next-btn.next-medium[dir=rtl].next-btn-loading:after{right:12px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-large[dir=rtl]{border-radius:3px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl].next-btn-loading{padding-left:16px;padding-right:36px}.next-btn.next-large[dir=rtl].next-btn-loading:after{right:16px;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-large{border-radius:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large.next-btn-loading{padding-left:0;padding-right:20px}.next-btn-text[dir=rtl].next-large.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-medium{border-radius:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-medium.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-small{border-radius:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-small.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-radio-button-large[dir=rtl]>label:first-child{margin-left:-1px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.next-radio-button-large[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large[dir=rtl] .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-wrapper[dir=rtl] .next-radio-label{margin-left:0;margin-right:4px}.next-radio-group[dir=rtl] .next-radio-label{margin-right:4px;margin-left:16px}.next-radio-button[dir=rtl]>label .next-radio-label{margin:0}.next-radio-wrapper{outline:0}.next-radio-wrapper .next-radio{display:inline-block;vertical-align:middle;position:relative;line-height:1}.next-radio-wrapper .next-radio,.next-radio-wrapper .next-radio *,.next-radio-wrapper .next-radio :after,.next-radio-wrapper .next-radio :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-radio-wrapper .next-radio input[type=radio]{opacity:0;position:absolute;vertical-align:middle;top:0;left:0;width:16px;height:16px;margin:0}.next-radio-wrapper .next-radio-inner{display:block;width:16px;height:16px;background:#fff;border-radius:50%;border:1px solid #c4c6cf;-webkit-transition:all .36s ease 0s;transition:all .36s ease 0s;-webkit-box-shadow:none;box-shadow:none}.next-radio-wrapper .next-radio-inner:after{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;border-radius:50%;top:50%;margin-top:-2px;left:50%;margin-left:-2px;background:#fff;content:" ";-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86)}.next-radio-wrapper.checked .next-radio-inner{border-color:#5584ff;background:#5584ff}.next-radio-wrapper.checked .next-radio-inner:after{width:4px;height:4px;font-weight:700;background:#fff;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.next-radio-wrapper.checked.hovered .next-radio-inner,.next-radio-wrapper.checked:hover .next-radio-inner{border-color:transparent}.next-radio-wrapper.disabled input[type=radio]{cursor:not-allowed}.next-radio-wrapper.disabled .next-radio-inner{border-color:#e6e7eb;background:#f7f8fa}.next-radio-wrapper.disabled.checked .next-radio-inner,.next-radio-wrapper.disabled .next-radio-inner.hovered,.next-radio-wrapper.disabled .next-radio-inner:hover{border-color:#e6e7eb}.next-radio-wrapper.disabled.checked .next-radio-inner:after{background:#ccc}.next-radio-wrapper:not(.disabled).focused .next-radio-inner,.next-radio-wrapper:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper:not(.disabled):focus .next-radio-inner,.next-radio-wrapper:not(.disabled):hover .next-radio-inner{border-color:#5584ff;background-color:#dee8ff}.next-radio-wrapper.checked.focused .next-radio-inner,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner{border-color:transparent;background:#3e71f7}.next-radio-wrapper.checked.focused .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner:after{background:#fff}.next-radio-button .next-radio,.next-radio-button input[type=radio]{width:0;height:0}.next-radio-button>label{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1;margin:0 0 0 -1px;border:1px solid #c4c6cf;background-color:#fff;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;vertical-align:middle}.next-radio-button>label .next-radio-label{display:block;color:#333;margin:0;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}.next-radio-button>label.hovered,.next-radio-button>label:focus,.next-radio-button>label:hover{z-index:10;border-color:#a0a2ad;background-color:#f2f3f7}.next-radio-button>label.hovered .next-radio-label,.next-radio-button>label:focus .next-radio-label,.next-radio-button>label:hover .next-radio-label{color:#333}.next-radio-button>label.checked{z-index:11;border-color:#5584ff;background-color:#fff}.next-radio-button>label.checked .next-radio-label{color:#5584ff}.next-radio-button>label.disabled{z-index:0;cursor:not-allowed;border-color:#e6e7eb;background-color:#f7f8fa}.next-radio-button>label.disabled .next-radio-label{color:#ccc}.next-radio-button>label.checked.disabled{z-index:0;border-color:#e6e7eb;background-color:#f2f3f7}.next-radio-button>label.checked.disabled .next-radio-label{color:#ccc}.next-radio-button-large>label{padding:0 8px;height:40px;line-height:40px}.next-radio-button-large>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-large .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium>label{padding:0 8px;height:28px;line-height:28px}.next-radio-button-medium>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-medium>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium .next-radio-label{height:26px;line-height:26px;font-size:12px}.next-radio-button-small>label{padding:0 8px;height:20px;line-height:20px}.next-radio-button-small>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small .next-radio-label{height:18px;line-height:18px;font-size:12px}.next-radio-single-input input[type=radio]{opacity:0;position:absolute;top:0;left:0;margin:0}.next-radio-group{display:inline-block}.next-radio-group .next-radio-label{color:#333;margin-right:16px}.next-radio-group.disabled .next-radio-label{color:#ccc}.next-radio-group-ver .next-radio-wrapper{display:block;margin-bottom:8px}.next-radio-label{margin:0;margin-left:4px;font-size:12px;vertical-align:middle;line-height:1}@-moz-document url-prefix(){.next-radio{margin-top:-1px}@supports ((-webkit-animation:calc(0s)) or (animation:calc(0s))){.next-radio{margin-top:-3px}}}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}@-webkit-keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}@keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}.next-tag>.next-tag-body{overflow:hidden;text-overflow:ellipsis}.next-tag-checkable.next-tag-level-secondary{color:#333;border-color:transparent;background-color:transparent}.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):hover{color:#5584ff}.next-tag-closable.next-tag-level-primary,.next-tag-default.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-primary,.disabled.next-tag-default.next-tag-level-primary,[disabled].next-tag-closable.next-tag-level-primary,[disabled].next-tag-default.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.disabled.next-tag-default.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-checkable.next-tag-level-primary,[disabled].next-tag-checkable.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary.checked{color:#fff;border-color:#5584ff;background-color:#5584ff}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover{color:#fff;border-color:#3e71f7;background-color:#3e71f7}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked>.next-tag-close-btn{color:#fff}.next-tag-default.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-default.next-tag-level-normal,[disabled].next-tag-default.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.disabled.next-tag-default.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-closable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-normal,[disabled].next-tag-closable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:transparent}.disabled.next-tag-closable.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-normal.checked,.next-tag-checkable.next-tag-level-secondary.checked{color:#5584ff;border-color:#5584ff;background-color:transparent}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover{color:#3e71f7;border-color:#3e71f7;background-color:transparent}.next-tag-checkable.next-tag-level-secondary.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-secondary.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-secondary.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-secondary.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-secondary.checked:after{color:#fff}.next-tag-checkable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#c4c6cf;background-color:transparent}.disabled.next-tag-checkable.next-tag-level-normal,[disabled].next-tag-checkable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-normal.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-normal.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-normal.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-normal.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-normal.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-normal.checked:after{color:#fff}.next-tag-closable.next-tag-level-normal:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#c4c6cf;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-closable.next-tag-level-normal:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E626";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:before{background-color:#a0a2ad}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-closable.next-tag-level-normal:disabled:before,[disabled].next-tag-closable.next-tag-level-normal:before{background-color:#e6e7eb}.next-tag-closable.next-tag-level-normal:disabled:after,[disabled].next-tag-closable.next-tag-level-normal:after{color:#fff}.next-tag-group .next-tag-large,.next-tag-group .next-tag-medium{margin-right:8px;margin-bottom:8px}.next-tag-group .next-tag-small{margin-right:4px;margin-bottom:4px}.next-tag{display:inline-block;max-width:100%;vertical-align:middle;border-width:1px;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid;overflow:hidden;white-space:nowrap;-webkit-transition:all .2s cubic-bezier(.23,1,.32,1);transition:all .2s cubic-bezier(.23,1,.32,1);font-size:0;outline:0}.next-tag,.next-tag *,.next-tag :after,.next-tag :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tag>.next-tag-body{position:relative;display:inline-block;height:100%;text-align:center;vertical-align:middle;max-width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.next-tag>.next-tag-body>a{text-decoration:none;color:inherit}.next-tag>.next-tag-body>a:before{content:" ";position:absolute;display:block;top:0;left:0;right:0;bottom:0}.next-tag>.next-tag-body .next-icon{line-height:1;vertical-align:middle}.next-tag>.next-tag-body .next-icon:before{font-size:inherit}.next-tag.next-tag-body-pointer{cursor:pointer}.next-tag.disabled,.next-tag[disabled]{cursor:not-allowed;pointer-events:none}.next-tag-large{height:40px;padding:0;line-height:38px;font-size:0}.next-tag-large>.next-tag-body{font-size:16px;padding:0 16px;min-width:48px}.next-tag-large.next-tag-closable>.next-tag-body{padding:0 0 0 16px}.next-tag-large[dir=rtl].next-tag-closable>.next-tag-body{padding:0 16px 0 0}.next-tag-large>.next-tag-close-btn{margin-left:12px;padding-right:16px}.next-tag-large>.next-tag-close-btn .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tag-large[dir=rtl]>.next-tag-close-btn{margin-right:12px;margin-left:0;padding-right:0;padding-left:16px}.next-tag-medium{height:28px;padding:0;line-height:26px;font-size:0}.next-tag-medium>.next-tag-body{font-size:14px;padding:0 12px;min-width:40px}.next-tag-medium.next-tag-closable>.next-tag-body{padding:0 0 0 12px}.next-tag-medium[dir=rtl].next-tag-closable>.next-tag-body{padding:0 12px 0 0}.next-tag-medium>.next-tag-close-btn{margin-left:8px;padding-right:12px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-medium>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-medium[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:12px}.next-tag-small{height:20px;padding:0;line-height:18px;font-size:0}.next-tag-small>.next-tag-body{font-size:12px;padding:0 8px;min-width:28px}.next-tag-small.next-tag-closable>.next-tag-body{padding:0 0 0 8px}.next-tag-small[dir=rtl].next-tag-closable>.next-tag-body{padding:0 8px 0 0}.next-tag-small>.next-tag-close-btn{margin-left:8px;padding-right:8px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-small>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-small[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:8px}.next-tag-default{cursor:default}.next-tag-closable{position:relative}.next-tag-closable.next-tag-large>.next-tag-body{max-width:calc(100% - 40px)}.next-tag-closable.next-tag-medium>.next-tag-body{max-width:calc(100% - 28px)}.next-tag-closable.next-tag-small>.next-tag-body{max-width:calc(100% - 20px)}.next-tag-closable>.next-tag-close-btn{display:inline-block;vertical-align:middle;height:100%;text-align:center;cursor:pointer}.next-tag-closable.next-tag-level-normal.disabled,.next-tag-closable.next-tag-level-normal[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable{cursor:pointer;position:relative;border-radius:3px}.next-tag-checkable.checked:before{-webkit-animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.checked:after{-webkit-animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86);animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):before{right:-10px;bottom:-10px;width:20px;height:20px}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):after{font-size:8px;line-height:8px;right:0;bottom:0}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):before{right:-14px;bottom:-14px;width:28px;height:28px}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):after{font-size:12px;line-height:12px;right:0;bottom:0}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):before{right:-18px;bottom:-18px;width:36px;height:36px}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):after{font-size:16px;line-height:16px;right:0;bottom:0}.next-tag-checkable.next-tag-level-primary.disabled,.next-tag-checkable.next-tag-level-primary[disabled]{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-secondary.disabled,.next-tag-checkable.next-tag-level-secondary[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-zoom-appear,.next-tag-zoom-enter{-webkit-animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-tag-zoom-leave{-webkit-animation:zoomOut .3s ease-in;animation:zoomOut .3s ease-in;-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-checkbox-wrapper[dir=rtl]{margin-right:8px;margin-left:0}.next-checkbox-wrapper[dir=rtl]:first-child{margin-right:0}.next-checkbox-wrapper[dir=rtl]>.next-checkbox-label{margin-right:4px;margin-left:0}.next-checkbox-wrapper,.next-checkbox-wrapper *,.next-checkbox-wrapper :after,.next-checkbox-wrapper :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-checkbox-wrapper .next-checkbox{display:inline-block;position:relative;line-height:1;vertical-align:middle}.next-checkbox-wrapper input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:16px;height:16px;margin:0}.next-checkbox-wrapper .next-checkbox-inner{display:block;width:16px;height:16px;background:#fff;border-radius:3px;border:1px solid #c4c6cf;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;text-align:left;-webkit-box-shadow:none;box-shadow:none}.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;top:0;opacity:0;line-height:16px;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);color:#fff;left:4px;margin-left:0}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{vertical-align:top;margin-top:0}.next-checkbox-wrapper.checked .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.checked .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);margin-left:0}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.indeterminate .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.indeterminate .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1);margin-left:0}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.disabled input[type=checkbox]{cursor:not-allowed}.next-checkbox-wrapper.disabled .next-checkbox-inner{border-color:#e6e7eb;background:#f7f8fa}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover{border-color:#e6e7eb}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner>.next-icon{color:#ccc;opacity:1}.next-checkbox-wrapper.focused .next-checkbox-inner,.next-checkbox-wrapper.hovered .next-checkbox-inner,.next-checkbox-wrapper:not(.disabled):hover .next-checkbox-inner{border-color:#5584ff;background-color:#dee8ff}.next-checkbox-wrapper.checked.focused .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner{border-color:transparent;background-color:#3e71f7}.next-checkbox-wrapper.checked.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner>.next-icon{color:#fff;opacity:1}.next-checkbox-group .next-checkbox-wrapper{margin-left:8px}.next-checkbox-group .next-checkbox-wrapper:first-child{margin-left:0}.next-checkbox-group-ver .next-checkbox-wrapper{display:block;margin-left:0;margin-right:0;margin-bottom:8px}.next-checkbox-label{font-size:12px;vertical-align:middle;margin:0;margin-left:4px;line-height:1}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-menu[dir=rtl] .next-menu-item-helper{float:left}.next-menu[dir=rtl] .next-menu-item .next-checkbox,.next-menu[dir=rtl] .next-menu-item .next-radio{margin-left:4px;margin-right:0}.next-menu[dir=rtl] .next-menu-hoz-right{float:left}.next-menu[dir=rtl] .next-menu-hoz-icon-arrow.next-icon{left:6px;right:auto}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon{margin-left:0;margin-right:-16px}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon.next-menu-icon-right{right:auto;left:4px}.next-menu[dir=rtl] .next-menu-icon-arrow.next-icon{left:10px;right:auto}.next-menu{position:relative;min-width:100px;padding:8px 0;margin:0;list-style:none;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;background:#fff;line-height:32px;font-size:12px}.next-menu,.next-menu *,.next-menu :after,.next-menu :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-menu:focus,.next-menu :focus{outline:0}.next-menu-embeddable,.next-menu-embeddable .next-menu-item.next-disabled,.next-menu-embeddable .next-menu-item.next-disabled .next-menu-item-text>a{background:initial;border:none}.next-menu-embeddable .next-menu-item-inner{height:100%}.next-menu-content{position:relative}.next-menu-content,.next-menu-sub-menu{padding:0;margin:0;list-style:none}.next-menu-sub-menu.next-expand-enter{overflow:hidden}.next-menu-sub-menu.next-expand-enter-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-sub-menu.next-expand-leave{overflow:hidden}.next-menu-sub-menu.next-expand-leave-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-item{position:relative;padding:0 20px;-webkit-transition:background .2s ease;transition:background .2s ease;color:#333;cursor:pointer}.next-menu-item-helper{float:right;color:#999;font-style:normal;font-size:12px}.next-menu-item .next-checkbox,.next-menu-item .next-radio{margin-right:4px}.next-menu-item.next-selected{color:#333;background-color:#fff}.next-menu-item.next-selected .next-menu-icon-arrow{color:#666}.next-menu-item.next-selected .next-menu-icon-selected{color:#5584ff}.next-menu-item.next-disabled,.next-menu-item.next-disabled .next-menu-item-text>a{color:#ccc;background-color:#fff;cursor:not-allowed}.next-menu-item.next-disabled .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-icon-selected,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-selected{color:#ccc}.next-menu-item:not(.next-disabled).next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover,.next-menu-item:not(.next-disabled).next-selected:focus,.next-menu-item:not(.next-disabled).next-selected:focus:hover,.next-menu-item:not(.next-disabled).next-selected:hover,.next-menu-item:not(.next-disabled):hover{color:#333;background-color:#f2f3f7}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled):hover .next-menu-icon-arrow{color:#333}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled):hover .next-menu-icon-selected{color:#5584ff}.next-menu-item-inner{height:32px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.next-menu-item-text{vertical-align:middle}.next-menu-item-text>a{display:inline-block;text-decoration:none;color:#333}.next-menu-item-text>a:before{position:absolute;background-color:transparent;top:0;left:0;bottom:0;right:0;content:""}.next-menu.next-hoz{padding:0}.next-menu.next-hoz .next-menu-content>.next-menu-item,.next-menu.next-hoz>.next-menu-item{display:inline-block;vertical-align:top}.next-menu.next-hoz .next-menu-content,.next-menu.next-hoz .next-menu-footer,.next-menu.next-hoz .next-menu-header{display:inline-block}.next-menu-hoz-right{float:right}.next-menu-group-label{padding:0 12px;color:#999}.next-menu-divider{margin:8px 12px;border-bottom:1px solid #e6e7eb}.next-menu .next-menu-icon-selected.next-icon{position:absolute;top:0;margin-left:-16px}.next-menu .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-icon-selected.next-icon.next-menu-icon-right{right:4px}.next-menu .next-menu-icon-arrow.next-icon{position:absolute;top:0;right:10px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-icon-arrow.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow.next-icon:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-icon-arrow-down.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:scale(.5) rotate(180deg);-ms-transform:scale(.5) rotate(180deg);transform:scale(.5) rotate(180deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-down.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.next-menu .next-menu-icon-arrow-right.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:scale(.5) rotate(-90deg);-ms-transform:scale(.5) rotate(-90deg);transform:scale(.5) rotate(-90deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-right.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-hoz-icon-arrow.next-icon{position:absolute;top:0;right:6px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-hoz-icon-arrow.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-hoz-icon-arrow.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-hoz-icon-arrow.next-open:before{width:12px;font-size:12px;line-height:inherit}.next-menu.next-context{line-height:24px}.next-menu.next-context .next-menu-item-inner{height:24px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-input{vertical-align:middle;display:inline-table;border-collapse:separate;font-size:0;line-height:1;width:200px;border-spacing:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;border:1px solid #c4c6cf;background-color:#fff}.next-input,.next-input *,.next-input :after,.next-input :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input input{height:100%}.next-input input[type=reset],.next-input input[type=submit]{-webkit-appearance:button;cursor:pointer}.next-input input::-moz-focus-inner{border:0;padding:0}.next-input input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset}.next-input textarea{resize:none}.next-input input,.next-input textarea{width:100%;border:none;outline:none;padding:0;margin:0;font-weight:400;vertical-align:middle;background-color:transparent;color:#333}.next-input input::-ms-clear,.next-input textarea::-ms-clear{display:none}.next-input.next-input-textarea{border-radius:3px;font-size:0}.next-input.next-input-textarea textarea{color:#333;padding:4px 8px;font-size:12px;border-radius:3px}.next-input.next-input-textarea .next-input-control{display:block;width:auto;border-radius:3px}.next-input.next-input-textarea .next-input-len{padding:0 8px 4px;display:block;text-align:right;width:auto}.next-input.next-small{height:20px;border-radius:3px}.next-input.next-small .next-input-label{padding-left:8px;font-size:12px}.next-input.next-small .next-input-inner{font-size:12px}.next-input.next-small .next-input-control{padding-right:4px}.next-input.next-small input{height:18px;line-height:18px \0;padding:0 4px;font-size:12px}.next-input.next-small input::-webkit-input-placeholder{font-size:12px}.next-input.next-small input::-moz-placeholder{font-size:12px}.next-input.next-small input::-ms-input-placeholder{font-size:12px}.next-input.next-small input::placeholder{font-size:12px}.next-input.next-small .next-input-text-field{padding:0 4px;font-size:12px;height:18px;line-height:18px}.next-input.next-small .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-small input{border-radius:3px}.next-input.next-small .next-input-control{border-radius:0 3px 3px 0}.next-input.next-medium{height:28px;border-radius:3px}.next-input.next-medium .next-input-label{padding-left:8px;font-size:12px}.next-input.next-medium .next-input-inner{font-size:12px}.next-input.next-medium .next-input-control{padding-right:8px}.next-input.next-medium input{height:26px;line-height:26px \0;padding:0 8px;font-size:12px}.next-input.next-medium input::-webkit-input-placeholder{font-size:12px}.next-input.next-medium input::-moz-placeholder{font-size:12px}.next-input.next-medium input::-ms-input-placeholder{font-size:12px}.next-input.next-medium input::placeholder{font-size:12px}.next-input.next-medium .next-input-text-field{padding:0 8px;font-size:12px;height:26px;line-height:26px}.next-input.next-medium .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-medium input{border-radius:3px}.next-input.next-medium .next-input-control{border-radius:0 3px 3px 0}.next-input.next-large{height:40px;border-radius:3px}.next-input.next-large .next-input-label{padding-left:12px;font-size:16px}.next-input.next-large .next-input-inner{font-size:16px}.next-input.next-large .next-input-control{padding-right:8px}.next-input.next-large input{height:38px;line-height:38px \0;padding:0 12px;font-size:16px}.next-input.next-large input::-webkit-input-placeholder{font-size:16px}.next-input.next-large input::-moz-placeholder{font-size:16px}.next-input.next-large input::-ms-input-placeholder{font-size:16px}.next-input.next-large input::placeholder{font-size:16px}.next-input.next-large .next-input-text-field{padding:0 12px;font-size:16px;height:38px;line-height:38px}.next-input.next-large .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-input.next-large input{border-radius:3px}.next-input.next-large .next-input-control{border-radius:0 3px 3px 0}.next-input-hint-wrap{color:#999;position:relative}.next-input-hint-wrap .next-input-clear{opacity:0;z-index:1;position:absolute}.next-input-hint-wrap .next-input-hint{opacity:1}.next-input .next-icon-delete-filling:hover{cursor:pointer;color:#666}.next-input.next-focus,.next-input:hover{border-color:#a0a2ad;background-color:#fff}.next-input.next-focus .next-input-clear,.next-input:hover .next-input-clear{opacity:1}.next-input.next-focus .next-input-clear+.next-input-hint,.next-input:hover .next-input-clear+.next-input-hint{opacity:0}.next-input .next-input-clear:focus{opacity:1}.next-input .next-input-clear:focus+.next-input-hint{opacity:0}.next-input.next-focus{border-color:#5584ff;background-color:#fff}.next-input.next-error,.next-input.next-error.next-focus,.next-input.next-error:hover{border-color:#ff3000}.next-input.next-hidden{display:none}.next-input.next-noborder{border:none}.next-input-control .next-input-len{font-size:12px;line-height:12px;color:#999;display:table-cell;width:1px;vertical-align:bottom}.next-input-control .next-input-len.next-error{color:#ff3000}.next-input-control>*{display:table-cell;width:1%;top:0}.next-input-control>:not(:last-child){padding-right:4px}.next-input-control .next-icon{-webkit-transition:all .3s ease-out;transition:all .3s ease-out;color:#999}.next-input-control .next-icon-success-filling{color:#46bc15}.next-input-control .next-icon-loading{color:#4494f9}.next-input-label{color:#666}.next-input input::-moz-placeholder,.next-input textarea::-moz-placeholder{color:#999;opacity:1}.next-input input:-ms-input-placeholder,.next-input textarea:-ms-input-placeholder{color:#999}.next-input input::-webkit-input-placeholder,.next-input textarea::-webkit-input-placeholder{color:#999}.next-input.next-disabled{color:#ccc;cursor:not-allowed}.next-input.next-disabled,.next-input.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled input::-moz-placeholder,.next-input.next-disabled textarea::-moz-placeholder{color:#ccc;opacity:1}.next-input.next-disabled input:-ms-input-placeholder,.next-input.next-disabled textarea:-ms-input-placeholder{color:#ccc}.next-input.next-disabled input::-webkit-input-placeholder,.next-input.next-disabled textarea::-webkit-input-placeholder{color:#ccc}.next-input.next-disabled .next-input-label,.next-input.next-disabled .next-input-len{color:#ccc}.next-input.next-disabled input,.next-input.next-disabled textarea{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa;cursor:not-allowed}.next-input.next-disabled input:hover,.next-input.next-disabled textarea:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled .next-input-hint-wrap{color:#ccc}.next-input.next-disabled .next-input-hint-wrap .next-input-clear{opacity:0}.next-input.next-disabled .next-input-hint-wrap .next-input-hint{opacity:1}.next-input.next-disabled .next-input-hint-wrap .next-icon-delete-filling:hover{cursor:not-allowed;color:#ccc}.next-input.next-disabled .next-icon{color:#ccc}.next-input-control,.next-input-inner,.next-input-label{display:table-cell;width:1px;vertical-align:middle;line-height:1;background-color:transparent;white-space:nowrap}.next-input-group{display:inline-table;border-collapse:separate;border-spacing:0;line-height:0;width:100%}.next-input-group,.next-input-group *,.next-input-group :after,.next-input-group :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input-group-auto-width{width:100%;border-radius:0!important}.next-input-group>.next-input:first-child.next-large,.next-input-group>.next-input:first-child.next-medium,.next-input-group>.next-input:first-child.next-small{border-top-left-radius:3px!important;border-bottom-left-radius:3px!important}.next-input-group>.next-input:last-child.next-large,.next-input-group>.next-input:last-child.next-medium,.next-input-group>.next-input:last-child.next-small{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.next-input-group-addon{width:1px;display:table-cell;vertical-align:middle;white-space:nowrap}.next-input-group-addon:first-child,.next-input-group-addon:first-child>*{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group-addon:last-child,.next-input-group-addon:last-child>*{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group-text{color:#999;background-color:#f2f3f7;text-align:center;border:1px solid #c4c6cf;padding:0 8px}.next-input-group-text:first-child{border-right-width:0}.next-input-group-text:last-child{border-left-width:0}.next-input-group-text.next-disabled{color:#ccc;cursor:not-allowed}.next-input-group-text.next-disabled,.next-input-group-text.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input-group-text.next-medium,.next-input-group-text.next-small{font-size:12px;border-radius:3px}.next-input-group-text.next-large{font-size:16px;border-radius:3px}.next-input[dir=rtl].next-small .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-small .next-input-control{padding-right:0;padding-left:4px}.next-input[dir=rtl].next-medium .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-medium .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-large .next-input-label{padding-left:0;padding-right:12px}.next-input[dir=rtl].next-large .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-input-textarea .next-input-len{text-align:left}.next-input[dir=rtl] .next-input-control>:not(:last-child){padding-left:4px;padding-right:0}.next-input-group[dir=rtl] .next-input-group-addon:first-child{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-small{border-bottom-right-radius:3px!important;border-top-right-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-small{border-bottom-left-radius:3px!important;border-top-left-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-text:first-child{border-right-width:1px;border-left:0}.next-input-group[dir=rtl] .next-input-group-text:last-child{border-left-width:1px;border-right:0}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-select{display:inline-block;font-size:0;vertical-align:middle}.next-select,.next-select *,.next-select :after,.next-select :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-select-trigger{min-width:100px;outline:0;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-trigger .next-input-label{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-select-values{display:block;width:100%;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow:hidden}.next-select-trigger .next-select-values>em{font-style:inherit}.next-select-trigger .next-select-values input{padding-left:0;padding-right:0}.next-select-trigger .next-input-control{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-input-control>*{display:inline-block;width:auto}.next-select-trigger .next-input-control>.next-select-arrow{padding-right:0}.next-select-trigger .next-input.next-disabled em{color:#ccc}.next-select-trigger .next-input.next-disabled .next-select-arrow{cursor:not-allowed}.next-select-trigger .next-select-clear{display:none}.next-select-trigger.next-has-clear:hover .next-select-clear{display:inline-block}.next-select-trigger.next-has-clear:hover .next-select-arrow{display:none}.next-select .next-select-inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;min-width:100px;outline:0;color:#333}.next-select .next-select-inner .next-tag{line-height:1;margin-right:4px;margin-bottom:3px;padding-left:4px;padding-right:4px}.next-select-trigger-search{position:relative;display:inline-block;vertical-align:top;overflow:hidden;width:100%;max-width:100%}.next-select-trigger-search>input,.next-select-trigger-search>span{display:block;font-size:inherit;font-family:inherit;letter-spacing:inherit;white-space:nowrap;overflow:hidden}.next-select-trigger-search input{position:absolute;background-color:transparent;width:100%;height:100%!important;z-index:1;left:0;border:0;outline:0;margin:0;padding:0;cursor:inherit}.next-select-trigger-search>span{position:relative;visibility:hidden;white-space:pre;max-width:100%;z-index:-1}.next-select-single.next-no-search{cursor:pointer}.next-select-single.next-has-search.next-active .next-select-values>em{display:none}.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{width:1px;opacity:0;filter:alpha(opacity=0)}.next-select-single.next-inactive .next-select-trigger-search input,.next-select-single.next-no-search .next-select-trigger-search input{color:transparent}.next-select-single .next-select-values{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.next-select-single .next-select-values>em{vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.next-select-multiple .next-select-values,.next-select-tag .next-select-values{margin-bottom:-3px;height:auto!important}.next-select-multiple .next-select-trigger-search,.next-select-tag .next-select-trigger-search{margin-bottom:3px}.next-select-multiple .next-tag+.next-select-trigger-search,.next-select-tag .next-tag+.next-select-trigger-search{width:auto;min-width:1px}.next-select-multiple .next-input,.next-select-tag .next-input{height:auto;-webkit-box-align:start;-ms-flex-align:start;align-items:start}.next-select-multiple.next-small .next-select-values,.next-select-tag.next-small .next-select-values{min-height:18px;padding-top:2px;padding-bottom:2px;line-height:14px}.next-select-multiple.next-small .next-tag,.next-select-tag.next-small .next-tag{border:0;padding-top:0;padding-bottom:0;height:14px}.next-select-multiple.next-small .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-close-btn,.next-select-tag.next-small .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-close-btn{line-height:14px}.next-select-multiple.next-small .next-input-control,.next-select-multiple.next-small .next-input-label,.next-select-tag.next-small .next-input-control,.next-select-tag.next-small .next-input-label{line-height:18px}.next-select-multiple.next-medium .next-select-values,.next-select-tag.next-medium .next-select-values{min-height:26px;padding-top:3px;padding-bottom:3px;line-height:20px}.next-select-multiple.next-medium .next-tag,.next-select-tag.next-medium .next-tag{padding-top:1px;padding-bottom:1px;height:20px}.next-select-multiple.next-medium .next-tag .next-tag-body,.next-select-multiple.next-medium .next-tag .next-tag-close-btn,.next-select-tag.next-medium .next-tag .next-tag-body,.next-select-tag.next-medium .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-medium .next-input-control,.next-select-multiple.next-medium .next-input-label,.next-select-tag.next-medium .next-input-control,.next-select-tag.next-medium .next-input-label{line-height:26px}.next-select-multiple.next-large .next-select-values,.next-select-tag.next-large .next-select-values{min-height:38px;padding-top:7px;padding-bottom:7px;line-height:24px}.next-select-multiple.next-large .next-tag,.next-select-tag.next-large .next-tag{padding-top:3px;padding-bottom:3px;height:24px}.next-select-multiple.next-large .next-tag .next-tag-body,.next-select-multiple.next-large .next-tag .next-tag-close-btn,.next-select-tag.next-large .next-tag .next-tag-body,.next-select-tag.next-large .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-large .next-input-control,.next-select-multiple.next-large .next-input-label,.next-select-tag.next-large .next-input-control,.next-select-tag.next-large .next-input-label{line-height:38px}.next-select.next-no-search .next-select-trigger-search input{color:transparent}.next-select-auto-complete{width:160px}.next-select-auto-complete .next-input{width:100%}.next-select-auto-complete .next-input .next-input-hint-wrap{padding-right:1px}.next-select-auto-complete .next-input .next-select-arrow{padding-left:0}.next-select.next-active .next-select-arrow{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-select-arrow{cursor:pointer;width:auto!important;text-align:center;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-menu-wrapper{max-height:260px;overflow:auto;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none}.next-select-menu-wrapper .next-select-menu{max-height:none;border:none}.next-select-menu{max-height:260px;overflow:auto}.next-select-menu .next-select-menu-empty-content{padding-left:8px;padding-right:8px;color:#999}.next-select-menu.next-select-auto-complete-menu.next-select-menu-empty{display:none}.next-select-menu .next-menu-item-text .next-icon{vertical-align:middle}.next-select-all{display:block;cursor:pointer;padding:0 8px;margin:0 12px 8px;border-bottom:1px solid #dcdee3}.next-select-all:hover{color:#3e71f7}.next-select-all .next-menu-icon-selected.next-icon{display:inline-block!important;top:auto;color:#5584ff}.next-select-highlight{color:#5584ff;font-size:12px}.next-select-in-ie.next-select-trigger .next-select-values{overflow:visible}.next-select-in-ie.next-select-trigger .next-input-control,.next-select-in-ie.next-select-trigger .next-input-label{width:1px}.next-select-in-ie.next-select-trigger .next-input-control>*{display:table-cell;width:1%}.next-select-in-ie.next-select-trigger .next-select-arrow{display:table-cell}.next-select-in-ie.next-select-trigger .next-select-clear{display:none}.next-select-in-ie.next-select-trigger.next-select-multiple .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-tag .next-select-inner{vertical-align:top}.next-select-in-ie.next-select-trigger .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-single .next-select-values{display:inline-table}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-small .next-select-values{line-height:20px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-medium .next-select-values{line-height:28px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-large .next-select-values{line-height:40px}.next-select-in-ie.next-select-trigger .next-select-trigger-search>span{max-width:100px}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values{position:relative}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values>em{position:absolute;display:inline-block;height:100%;line-height:1;vertical-align:middle;overflow:hidden;left:4px;right:0;top:30%}.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{filter:alpha(opacity=0);font-size:0}.next-select-in-ie.next-select-trigger.next-no-search .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-trigger-search input{color:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-calendar,.next-calendar *,.next-calendar :after,.next-calendar :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-calendar table{border-collapse:collapse;border-spacing:0}.next-calendar td,.next-calendar th{padding:0}@-webkit-keyframes cellZoomIn{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes cellZoomIn{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes cellHover{0%{opacity:0}to{opacity:1}}@keyframes cellHover{0%{opacity:0}to{opacity:1}}@-webkit-keyframes enterToLeft{0%{-webkit-transform:translate(-40%);transform:translate(-40%);opacity:0}50%{opacity:.6}to{opacity:1;-webkit-transform:translate(0);transform:translate(0)}}@keyframes enterToLeft{0%{-webkit-transform:translate(-40%);transform:translate(-40%);opacity:0}50%{opacity:.6}to{opacity:1;-webkit-transform:translate(0);transform:translate(0)}}@-webkit-keyframes enterToRight{0%{-webkit-transform:translate(40%);transform:translate(40%);opacity:0}50%{opacity:.6}to{opacity:1;-webkit-transform:translate(0);transform:translate(0)}}@keyframes enterToRight{0%{-webkit-transform:translate(40%);transform:translate(40%);opacity:0}50%{opacity:.6}to{opacity:1;-webkit-transform:translate(0);transform:translate(0)}}.next-calendar-card .next-calendar-header,.next-calendar-fullscreen .next-calendar-header{text-align:right}.next-calendar-card .next-calendar-header .next-select,.next-calendar-fullscreen .next-calendar-header .next-select{margin-right:4px;vertical-align:top}.next-calendar-card .next-calendar-header .next-menu,.next-calendar-fullscreen .next-calendar-header .next-menu{text-align:left}.next-calendar-card .next-calendar-header,.next-calendar-fullscreen .next-calendar-header{margin-bottom:8px}.next-calendar-panel-header{position:relative;background:#5584ff;margin-bottom:8px;border-bottom:1px solid transparent}.next-calendar-panel-header-full,.next-calendar-panel-header-left,.next-calendar-panel-header-right{height:32px;line-height:32px}.next-calendar-panel-header-full .next-calendar-btn,.next-calendar-panel-header-left .next-calendar-btn,.next-calendar-panel-header-right .next-calendar-btn{vertical-align:top;font-weight:700;margin:0 4px;background-color:transparent;border-color:transparent}.next-calendar-panel-header-full .next-calendar-btn,.next-calendar-panel-header-full .next-calendar-btn.visited,.next-calendar-panel-header-full .next-calendar-btn:link,.next-calendar-panel-header-full .next-calendar-btn:visited,.next-calendar-panel-header-left .next-calendar-btn,.next-calendar-panel-header-left .next-calendar-btn.visited,.next-calendar-panel-header-left .next-calendar-btn:link,.next-calendar-panel-header-left .next-calendar-btn:visited,.next-calendar-panel-header-right .next-calendar-btn,.next-calendar-panel-header-right .next-calendar-btn.visited,.next-calendar-panel-header-right .next-calendar-btn:link,.next-calendar-panel-header-right .next-calendar-btn:visited{color:#fff}.next-calendar-panel-header-full .next-calendar-btn.active,.next-calendar-panel-header-full .next-calendar-btn.hover,.next-calendar-panel-header-full .next-calendar-btn:active,.next-calendar-panel-header-full .next-calendar-btn:focus,.next-calendar-panel-header-full .next-calendar-btn:hover,.next-calendar-panel-header-left .next-calendar-btn.active,.next-calendar-panel-header-left .next-calendar-btn.hover,.next-calendar-panel-header-left .next-calendar-btn:active,.next-calendar-panel-header-left .next-calendar-btn:focus,.next-calendar-panel-header-left .next-calendar-btn:hover,.next-calendar-panel-header-right .next-calendar-btn.active,.next-calendar-panel-header-right .next-calendar-btn.hover,.next-calendar-panel-header-right .next-calendar-btn:active,.next-calendar-panel-header-right .next-calendar-btn:focus,.next-calendar-panel-header-right .next-calendar-btn:hover{color:#fff;background-color:transparent;border-color:transparent;text-decoration:none}.next-calendar-panel-header-left,.next-calendar-panel-header-right{display:inline-block;width:50%;text-align:center}.next-calendar-panel-header-full{width:100%;text-align:center}.next-calendar-btn{cursor:pointer;padding:0;margin:0;border:0;background:transparent;outline:none;height:100%}.next-calendar-btn>.next-icon.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-calendar-btn-next-decade,.next-calendar-btn-next-month,.next-calendar-btn-next-year,.next-calendar-btn-prev-decade,.next-calendar-btn-prev-month,.next-calendar-btn-prev-year{position:absolute;top:0;background-color:transparent;border-color:transparent}.next-calendar-btn-next-decade,.next-calendar-btn-next-decade.visited,.next-calendar-btn-next-decade:link,.next-calendar-btn-next-decade:visited,.next-calendar-btn-next-month,.next-calendar-btn-next-month.visited,.next-calendar-btn-next-month:link,.next-calendar-btn-next-month:visited,.next-calendar-btn-next-year,.next-calendar-btn-next-year.visited,.next-calendar-btn-next-year:link,.next-calendar-btn-next-year:visited,.next-calendar-btn-prev-decade,.next-calendar-btn-prev-decade.visited,.next-calendar-btn-prev-decade:link,.next-calendar-btn-prev-decade:visited,.next-calendar-btn-prev-month,.next-calendar-btn-prev-month.visited,.next-calendar-btn-prev-month:link,.next-calendar-btn-prev-month:visited,.next-calendar-btn-prev-year,.next-calendar-btn-prev-year.visited,.next-calendar-btn-prev-year:link,.next-calendar-btn-prev-year:visited{color:#fff}.next-calendar-btn-next-decade.active,.next-calendar-btn-next-decade.hover,.next-calendar-btn-next-decade:active,.next-calendar-btn-next-decade:focus,.next-calendar-btn-next-decade:hover,.next-calendar-btn-next-month.active,.next-calendar-btn-next-month.hover,.next-calendar-btn-next-month:active,.next-calendar-btn-next-month:focus,.next-calendar-btn-next-month:hover,.next-calendar-btn-next-year.active,.next-calendar-btn-next-year.hover,.next-calendar-btn-next-year:active,.next-calendar-btn-next-year:focus,.next-calendar-btn-next-year:hover,.next-calendar-btn-prev-decade.active,.next-calendar-btn-prev-decade.hover,.next-calendar-btn-prev-decade:active,.next-calendar-btn-prev-decade:focus,.next-calendar-btn-prev-decade:hover,.next-calendar-btn-prev-month.active,.next-calendar-btn-prev-month.hover,.next-calendar-btn-prev-month:active,.next-calendar-btn-prev-month:focus,.next-calendar-btn-prev-month:hover,.next-calendar-btn-prev-year.active,.next-calendar-btn-prev-year.hover,.next-calendar-btn-prev-year:active,.next-calendar-btn-prev-year:focus,.next-calendar-btn-prev-year:hover{color:#fff;background-color:transparent;border-color:transparent;text-decoration:none}.next-calendar-btn-prev-decade,.next-calendar-btn-prev-year{left:8px}.next-calendar-btn-prev-month{left:28px}.next-calendar-btn-next-month{right:28px}.next-calendar-btn-next-decade,.next-calendar-btn-next-year{right:8px}.next-calendar-fullscreen .next-calendar-th{text-align:right;color:#333;font-size:16px;font-weight:700;padding-right:12px;padding-bottom:4px}.next-calendar-fullscreen .next-calendar-cell{font-size:14px}.next-calendar-fullscreen .next-calendar-cell.next-selected .next-calendar-date,.next-calendar-fullscreen .next-calendar-cell.next-selected .next-calendar-month{font-weight:700;background:#dee8ff;color:#5584ff;border-color:#5584ff}.next-calendar-fullscreen .next-calendar-cell.next-disabled .next-calendar-date,.next-calendar-fullscreen .next-calendar-cell.next-disabled .next-calendar-month{cursor:not-allowed;background:#f7f8fa;color:#ccc;border-color:#e6e7eb}.next-calendar-fullscreen .next-calendar-date,.next-calendar-fullscreen .next-calendar-month{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 4px;padding:4px 8px;min-height:80px;border-top:2px solid;-webkit-transition:background .3s ease;transition:background .3s ease;background:#fff;color:#333;border-color:#dcdee3}.next-calendar-fullscreen .next-calendar-date:hover,.next-calendar-fullscreen .next-calendar-month:hover{background:#dee8ff;color:#5584ff;border-color:#5584ff}.next-calendar-fullscreen .next-calendar-cell-next-month .next-calendar-date,.next-calendar-fullscreen .next-calendar-cell-prev-month .next-calendar-date{background:transparent;color:#ccc;border-color:transparent}.next-calendar-fullscreen .next-calendar-cell-current .next-calendar-date,.next-calendar-fullscreen .next-calendar-cell-current .next-calendar-month{font-weight:700;background:#fff;color:#5584ff;border-color:#5584ff}.next-calendar-card .next-calendar-th,.next-calendar-panel .next-calendar-th,.next-calendar-range .next-calendar-th{text-align:center;color:#999;font-size:12px;font-weight:400}.next-calendar-card .next-calendar-cell,.next-calendar-panel .next-calendar-cell,.next-calendar-range .next-calendar-cell{text-align:center;font-size:12px}.next-calendar-card .next-calendar-cell.next-selected .next-calendar-date,.next-calendar-card .next-calendar-cell.next-selected .next-calendar-month,.next-calendar-card .next-calendar-cell.next-selected .next-calendar-year,.next-calendar-panel .next-calendar-cell.next-selected .next-calendar-date,.next-calendar-panel .next-calendar-cell.next-selected .next-calendar-month,.next-calendar-panel .next-calendar-cell.next-selected .next-calendar-year,.next-calendar-range .next-calendar-cell.next-selected .next-calendar-date,.next-calendar-range .next-calendar-cell.next-selected .next-calendar-month,.next-calendar-range .next-calendar-cell.next-selected .next-calendar-year{-webkit-animation:cellZoomIn .4s cubic-bezier(.23,1,.32,1);animation:cellZoomIn .4s cubic-bezier(.23,1,.32,1);font-weight:700;background:#5584ff;color:#fff;border-color:#5584ff}.next-calendar-card .next-calendar-cell.next-disabled .next-calendar-date,.next-calendar-card .next-calendar-cell.next-disabled .next-calendar-month,.next-calendar-card .next-calendar-cell.next-disabled .next-calendar-year,.next-calendar-panel .next-calendar-cell.next-disabled .next-calendar-date,.next-calendar-panel .next-calendar-cell.next-disabled .next-calendar-month,.next-calendar-panel .next-calendar-cell.next-disabled .next-calendar-year,.next-calendar-range .next-calendar-cell.next-disabled .next-calendar-date,.next-calendar-range .next-calendar-cell.next-disabled .next-calendar-month,.next-calendar-range .next-calendar-cell.next-disabled .next-calendar-year{cursor:not-allowed;background:#f7f8fa;color:#ccc;border-color:#f7f8fa}.next-calendar-card .next-calendar-cell.next-inrange .next-calendar-date,.next-calendar-panel .next-calendar-cell.next-inrange .next-calendar-date,.next-calendar-range .next-calendar-cell.next-inrange .next-calendar-date{background:#dee8ff;color:#5584ff;border-color:#dee8ff}.next-calendar-card .next-calendar-date,.next-calendar-card .next-calendar-month,.next-calendar-card .next-calendar-year,.next-calendar-panel .next-calendar-date,.next-calendar-panel .next-calendar-month,.next-calendar-panel .next-calendar-year,.next-calendar-range .next-calendar-date,.next-calendar-range .next-calendar-month,.next-calendar-range .next-calendar-year{text-align:center;border:1px solid;background:#fff;color:#666;border-color:#fff}.next-calendar-card .next-calendar-date:hover,.next-calendar-card .next-calendar-month:hover,.next-calendar-card .next-calendar-year:hover,.next-calendar-panel .next-calendar-date:hover,.next-calendar-panel .next-calendar-month:hover,.next-calendar-panel .next-calendar-year:hover,.next-calendar-range .next-calendar-date:hover,.next-calendar-range .next-calendar-month:hover,.next-calendar-range .next-calendar-year:hover{cursor:pointer;background:#dee8ff;color:#5584ff;border-color:#dee8ff}.next-calendar-card .next-calendar-date,.next-calendar-panel .next-calendar-date,.next-calendar-range .next-calendar-date{width:24px;height:24px;line-height:22px;margin:4px auto;border-radius:3px}.next-calendar-card .next-calendar-month,.next-calendar-panel .next-calendar-month,.next-calendar-range .next-calendar-month{width:60px;height:24px;line-height:22px;margin:8px auto;border-radius:3px}.next-calendar-card .next-calendar-year,.next-calendar-panel .next-calendar-year,.next-calendar-range .next-calendar-year{width:48px;height:24px;line-height:22px;margin:8px auto;border-radius:3px}.next-calendar-card .next-calendar-cell-next-month .next-calendar-date,.next-calendar-card .next-calendar-cell-prev-month .next-calendar-date,.next-calendar-panel .next-calendar-cell-next-month .next-calendar-date,.next-calendar-panel .next-calendar-cell-prev-month .next-calendar-date,.next-calendar-range .next-calendar-cell-next-month .next-calendar-date,.next-calendar-range .next-calendar-cell-prev-month .next-calendar-date{background:#fff;color:#ccc;border-color:#fff}.next-calendar-card .next-calendar-cell-current .next-calendar-date,.next-calendar-card .next-calendar-cell-current .next-calendar-month,.next-calendar-card .next-calendar-cell-current .next-calendar-year,.next-calendar-panel .next-calendar-cell-current .next-calendar-date,.next-calendar-panel .next-calendar-cell-current .next-calendar-month,.next-calendar-panel .next-calendar-cell-current .next-calendar-year,.next-calendar-range .next-calendar-cell-current .next-calendar-date,.next-calendar-range .next-calendar-cell-current .next-calendar-month,.next-calendar-range .next-calendar-cell-current .next-calendar-year{font-weight:700;background:#fff;color:#5584ff;border-color:transparent}.next-calendar[dir=rtl] .next-calendar-header{text-align:left}.next-calendar[dir=rtl] .next-calendar-header .next-select{margin-right:0;margin-left:4px}.next-calendar[dir=rtl] .next-calendar-header .next-menu{text-align:right}.next-calendar[dir=rtl] .next-calendar-btn-prev-decade,.next-calendar[dir=rtl] .next-calendar-btn-prev-year{left:auto;right:8px}.next-calendar[dir=rtl] .next-calendar-btn-prev-month{left:auto;right:28px}.next-calendar[dir=rtl] .next-calendar-btn-next-month{right:auto;left:28px}.next-calendar[dir=rtl] .next-calendar-btn-next-decade,.next-calendar[dir=rtl] .next-calendar-btn-next-year{right:auto;left:8px}.next-calendar-fullscreen[dir=rtl] .next-calendar-th{text-align:left;padding-left:12px;padding-right:0}.next-calendar-fullscreen[dir=rtl] .next-calendar-date,.next-calendar-fullscreen[dir=rtl] .next-calendar-month{text-align:left}.next-calendar-range[dir=rtl] .next-calendar-body-left,.next-calendar-range[dir=rtl] .next-calendar-body-right{float:right}.next-calendar-range[dir=rtl] .next-calendar-body-left{padding-right:0;padding-left:8px}.next-calendar-range[dir=rtl] .next-calendar-body-right{padding-left:0;padding-right:8px}.next-calendar-table{width:100%;table-layout:fixed}.next-calendar-range .next-calendar-body-left,.next-calendar-range .next-calendar-body-right{float:left;width:50%}.next-calendar-range .next-calendar-body-left{padding-right:8px}.next-calendar-range .next-calendar-body-right{padding-left:8px}.next-calendar-range .next-calendar-body:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-time-picker-menu{float:left;text-align:center}.next-time-picker-menu:not(:last-child){border-right:1px solid #c4c6cf}.next-time-picker-menu-title{cursor:default;height:28px;line-height:28px;font-size:12px;font-weight:400;color:#999;background:#fff}.next-time-picker-menu ul{position:relative;overflow-y:auto;list-style:none;margin:0;padding:0;font-size:12px;height:196px}.next-time-picker-menu-item{cursor:pointer;height:28px;line-height:28px;-webkit-transition:background .3s ease-out;transition:background .3s ease-out;color:#666;background:#fff;outline:none}.next-time-picker-menu-item:hover{color:#333;background:#f2f3f7}.next-time-picker-menu-item.next-selected{font-weight:700;color:#666;background:#f2f3f7}.next-time-picker-menu-item.next-disabled{cursor:not-allowed;color:#ccc;background:#fff}.next-time-picker-panel,.next-time-picker-panel *,.next-time-picker-panel :after,.next-time-picker-panel :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-time-picker-panel:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-time-picker-panel-header{border-bottom:1px solid #dcdee3}.next-time-picker-panel-input.next-input{width:100%;padding:6px;border-color:transparent;vertical-align:middle}.next-time-picker-panel-col-3 .next-time-picker-menu{width:33.33333%}.next-time-picker-panel-col-2 .next-time-picker-menu{width:50%}.next-time-picker-body[dir=rtl] .next-time-picker-menu{float:right}.next-time-picker-body[dir=rtl] .next-time-picker-menu:not(:last-child){border-right:none;border-left:1px solid #c4c6cf}.next-time-picker{display:inline-block;width:200px}.next-time-picker,.next-time-picker *,.next-time-picker :after,.next-time-picker :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-time-picker-trigger .next-input{width:100%}.next-time-picker-body{overflow:hidden;width:200px;border:1px solid #dcdee3;border-radius:3px;background:#fff;-webkit-box-shadow:none;box-shadow:none}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-range-picker-panel-input-separator,.next-range-picker-trigger-separator{cursor:default;display:inline-block;text-align:center;color:#ccc;width:16px;font-size:12px;vertical-align:middle}.next-date-picker,.next-month-picker,.next-year-picker{display:inline-block;width:200px}.next-date-picker-input,.next-month-picker-input,.next-year-picker-input{width:100%}.next-date-picker-body,.next-month-picker-body,.next-year-picker-body{width:288px}.next-date-picker-panel-input.next-input,.next-month-picker-panel-input.next-input,.next-year-picker-panel-input.next-input{width:100%;background:transparent}.next-date-picker-body.next-date-picker-body-show-time .next-date-picker-panel-input.next-input{width:49%}.next-date-picker-body.next-date-picker-body-show-time .next-date-picker-panel-input.next-input:first-child{margin-right:2%}.next-range-picker{display:inline-block;width:336px}.next-range-picker-input{width:100%}.next-range-picker-trigger{border:1px solid #c4c6cf;background-color:#fff}.next-range-picker-trigger:hover{border-color:#a0a2ad;background-color:#fff}.next-range-picker-trigger.next-error{border-color:#ff3000}.next-range-picker-trigger-input.next-input{height:auto;width:calc((100% - 16px) / 2)}.next-range-picker.next-disabled .next-range-picker-trigger{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa;cursor:not-allowed}.next-range-picker.next-disabled .next-range-picker-trigger:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-range-picker.next-large .next-range-picker-panel-input,.next-range-picker.next-large .next-range-picker-trigger,.next-range-picker.next-medium .next-range-picker-panel-input,.next-range-picker.next-medium .next-range-picker-trigger,.next-range-picker.next-small .next-range-picker-panel-input,.next-range-picker.next-small .next-range-picker-trigger{border-radius:3px}.next-range-picker-body{width:600px}.next-range-picker-panel-input-end-date.next-input,.next-range-picker-panel-input-start-date.next-input{width:calc((100% - 16px) / 2)}.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-end-date,.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-end-time,.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-start-date,.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-start-time{width:calc((100% - 16px - 16px) / 4)}.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-start-date{margin-right:8px}.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-end-time{margin-left:8px}.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-end,.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-start{width:50%;float:left}.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-start{border-right:1px solid #dcdee3}.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-end{border-left:1px solid #dcdee3}.next-date-picker-body[dir=rtl] .next-date-picker-panel-footer{text-align:left}.next-date-picker-body[dir=rtl] .next-date-picker-panel-footer>.next-btn:not(:last-child){margin-right:0;margin-left:16px}.next-date-picker-body[dir=rtl].next-date-picker-body-show-time .next-date-picker-panel-input.next-input:first-child{margin-left:2%;margin-right:0}.next-date-picker-body[dir=rtl].next-date-picker-body-show-time .next-time-picker-menu{float:right}.next-date-picker-body[dir=rtl].next-date-picker-body-show-time .next-time-picker-menu:not(:last-child){border-right:none;border-left:1px solid #c4c6cf}.next-range-picker-body[dir=rtl] .next-range-picker-panel-input{text-align:right}.next-range-picker-body[dir=rtl] .next-date-picker-panel-footer{text-align:left}.next-range-picker-body[dir=rtl] .next-date-picker-panel-footer>.next-btn:not(:last-child){margin-right:0;margin-left:16px}.next-range-picker-body[dir=rtl].next-range-picker-body-show-time .next-range-picker-panel-input-start-date{margin-right:0;margin-left:8px}.next-range-picker-body[dir=rtl].next-range-picker-body-show-time .next-range-picker-panel-input-end-time{margin-left:0;margin-right:8px}.next-range-picker-body[dir=rtl].next-range-picker-body-show-time .next-range-picker-panel-time-end,.next-range-picker-body[dir=rtl].next-range-picker-body-show-time .next-range-picker-panel-time-start{float:right}.next-range-picker-body[dir=rtl].next-range-picker-body-show-time .next-range-picker-panel-time-start{border-right:none;border-left:1px solid #dcdee3}.next-range-picker-body[dir=rtl].next-range-picker-body-show-time .next-range-picker-panel-time-end{border-left:none;border-right:1px solid #dcdee3}.next-range-picker-body[dir=rtl].next-range-picker-body-show-time .next-time-picker-menu{float:right}.next-range-picker-body[dir=rtl].next-range-picker-body-show-time .next-time-picker-menu:not(:last-child){border-right:none;border-left:1px solid #c4c6cf}.next-date-picker,.next-date-picker *,.next-date-picker :after,.next-date-picker :before,.next-month-picker,.next-month-picker *,.next-month-picker :after,.next-month-picker :before,.next-range-picker,.next-range-picker *,.next-range-picker :after,.next-range-picker :before,.next-year-picker,.next-year-picker *,.next-year-picker :after,.next-year-picker :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-date-picker-body,.next-month-picker-body,.next-range-picker-body,.next-year-picker-body{border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;background:#fff}.next-date-picker-panel-header,.next-month-picker-panel-header,.next-range-picker-panel-header,.next-year-picker-panel-header{padding:6px;text-align:center}.next-date-picker-panel-time,.next-month-picker-panel-time,.next-range-picker-panel-time,.next-year-picker-panel-time{border-top:1px solid #dcdee3}.next-date-picker-panel-footer,.next-month-picker-panel-footer,.next-range-picker-panel-footer,.next-year-picker-panel-footer{text-align:right;padding:8px 20px;border-top:1px solid #dcdee3}.next-date-picker-panel-footer>.next-btn:not(:last-child),.next-month-picker-panel-footer>.next-btn:not(:last-child),.next-range-picker-panel-footer>.next-btn:not(:last-child),.next-year-picker-panel-footer>.next-btn:not(:last-child){margin-right:16px}.next-date-picker .next-calendar-panel-header,.next-month-picker .next-calendar-panel-header,.next-range-picker .next-calendar-panel-header,.next-year-picker .next-calendar-panel-header{margin-left:-1px;margin-right:-1px}.next-date-picker .next-input input,.next-month-picker .next-input input,.next-range-picker .next-input input,.next-year-picker .next-input input{vertical-align:baseline} \ No newline at end of file diff --git a/demos/date-picker/deps.json b/demos/date-picker/deps.json new file mode 100644 index 0000000000..036537a25c --- /dev/null +++ b/demos/date-picker/deps.json @@ -0,0 +1 @@ +["input","overlay","calendar","time-picker","button","demo-helper"] \ No newline at end of file diff --git a/demos/date-picker/index.html b/demos/date-picker/index.html new file mode 100644 index 0000000000..78a3acdb62 --- /dev/null +++ b/demos/date-picker/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/dialog/build/index.css b/demos/dialog/build/index.css new file mode 100644 index 0000000000..dd76b732d8 --- /dev/null +++ b/demos/dialog/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-overlay-wrapper .next-overlay-inner{z-index:1001}.next-overlay-wrapper .next-overlay-backdrop{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;background:#000;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0}.next-overlay-wrapper.opened .next-overlay-backdrop{opacity:.2}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-btn,.next-btn *,.next-btn :after,.next-btn :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-btn::-moz-focus-inner{border:0;padding:0}.next-btn,.next-btn:active,.next-btn:focus,.next-btn:hover{outline:0}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-btn{position:relative;display:inline-block;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;text-align:center;text-transform:none;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;cursor:pointer}.next-btn:after{text-align:center;position:absolute;opacity:0;visibility:hidden;-webkit-transition:opacity .5s ease;transition:opacity .5s ease}.next-btn .next-icon.next-xs:before{vertical-align:baseline}.next-btn.hover,.next-btn:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn.next-small{border-radius:3px;padding:0 8px;height:20px;line-height:18px;font-size:12px;border-width:1px}.next-btn.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-small>.next-btn-icon.next-icon-alone:before,.next-btn.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small.next-btn-loading{padding-left:24px}.next-btn.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:8px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-small.next-btn-loading>.next-icon{display:none}.next-btn.next-medium{border-radius:3px;padding:0 12px;height:28px;line-height:26px;font-size:12px;border-width:1px}.next-btn.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium.next-btn-loading{padding-left:28px}.next-btn.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:12px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-medium.next-btn-loading>.next-icon{display:none}.next-btn.next-large{border-radius:3px;padding:0 16px;height:40px;line-height:38px;font-size:16px;border-width:1px}.next-btn.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-large>.next-btn-icon.next-icon-alone:before,.next-btn.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large.next-btn-loading{padding-left:36px}.next-btn.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:16px;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn.next-large.next-btn-loading>.next-icon{display:none}.next-btn.next-btn-normal{border-style:solid;background-color:#fff;border-color:#c4c6cf}.next-btn.next-btn-normal,.next-btn.next-btn-normal.visited,.next-btn.next-btn-normal:link,.next-btn.next-btn-normal:visited{color:#333}.next-btn.next-btn-normal.active,.next-btn.next-btn-normal.hover,.next-btn.next-btn-normal:active,.next-btn.next-btn-normal:focus,.next-btn.next-btn-normal:hover{color:#333;background-color:#f2f3f7;border-color:#a0a2ad;text-decoration:none}.next-btn.next-btn-primary{border-style:solid;background-color:#5584ff;border-color:transparent}.next-btn.next-btn-primary,.next-btn.next-btn-primary.visited,.next-btn.next-btn-primary:link,.next-btn.next-btn-primary:visited{color:#fff}.next-btn.next-btn-primary.active,.next-btn.next-btn-primary.hover,.next-btn.next-btn-primary:active,.next-btn.next-btn-primary:focus,.next-btn.next-btn-primary:hover{color:#fff;background-color:#3e71f7;border-color:transparent;text-decoration:none}.next-btn.next-btn-secondary{border-style:solid;background-color:#fff;border-color:#5584ff}.next-btn.next-btn-secondary,.next-btn.next-btn-secondary.visited,.next-btn.next-btn-secondary:link,.next-btn.next-btn-secondary:visited{color:#5584ff}.next-btn.next-btn-secondary.active,.next-btn.next-btn-secondary.hover,.next-btn.next-btn-secondary:active,.next-btn.next-btn-secondary:focus,.next-btn.next-btn-secondary:hover{color:#fff;background-color:#3e71f7;border-color:#3e71f7;text-decoration:none}.next-btn.disabled,.next-btn[disabled]{cursor:not-allowed;background-color:#f7f8fa;border-color:#e6e7eb}.next-btn.disabled,.next-btn.disabled.visited,.next-btn.disabled:link,.next-btn.disabled:visited,.next-btn[disabled],.next-btn[disabled].visited,.next-btn[disabled]:link,.next-btn[disabled]:visited{color:#ccc}.next-btn.disabled.active,.next-btn.disabled.hover,.next-btn.disabled:active,.next-btn.disabled:focus,.next-btn.disabled:hover,.next-btn[disabled].active,.next-btn[disabled].hover,.next-btn[disabled]:active,.next-btn[disabled]:focus,.next-btn[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-warning{border-style:solid}.next-btn-warning.next-btn-primary{background-color:#ff3000;border-color:#ff3000}.next-btn-warning.next-btn-primary,.next-btn-warning.next-btn-primary.visited,.next-btn-warning.next-btn-primary:link,.next-btn-warning.next-btn-primary:visited{color:#fff}.next-btn-warning.next-btn-primary.active,.next-btn-warning.next-btn-primary.hover,.next-btn-warning.next-btn-primary:active,.next-btn-warning.next-btn-primary:focus,.next-btn-warning.next-btn-primary:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary[disabled]{background-color:#f7f8fa;border-color:#dcdee3}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary.disabled.visited,.next-btn-warning.next-btn-primary.disabled:link,.next-btn-warning.next-btn-primary.disabled:visited,.next-btn-warning.next-btn-primary[disabled],.next-btn-warning.next-btn-primary[disabled].visited,.next-btn-warning.next-btn-primary[disabled]:link,.next-btn-warning.next-btn-primary[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-primary.disabled.active,.next-btn-warning.next-btn-primary.disabled.hover,.next-btn-warning.next-btn-primary.disabled:active,.next-btn-warning.next-btn-primary.disabled:focus,.next-btn-warning.next-btn-primary.disabled:hover,.next-btn-warning.next-btn-primary[disabled].active,.next-btn-warning.next-btn-primary[disabled].hover,.next-btn-warning.next-btn-primary[disabled]:active,.next-btn-warning.next-btn-primary[disabled]:focus,.next-btn-warning.next-btn-primary[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#dcdee3;text-decoration:none}.next-btn-warning.next-btn-normal{background-color:#fff;border-color:#ff3000}.next-btn-warning.next-btn-normal,.next-btn-warning.next-btn-normal.visited,.next-btn-warning.next-btn-normal:link,.next-btn-warning.next-btn-normal:visited{color:#ff3000}.next-btn-warning.next-btn-normal.active,.next-btn-warning.next-btn-normal.hover,.next-btn-warning.next-btn-normal:active,.next-btn-warning.next-btn-normal:focus,.next-btn-warning.next-btn-normal:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal[disabled]{background-color:#f7f8fa;border-color:#e6e7eb}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal.disabled.visited,.next-btn-warning.next-btn-normal.disabled:link,.next-btn-warning.next-btn-normal.disabled:visited,.next-btn-warning.next-btn-normal[disabled],.next-btn-warning.next-btn-normal[disabled].visited,.next-btn-warning.next-btn-normal[disabled]:link,.next-btn-warning.next-btn-normal[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-normal.disabled.active,.next-btn-warning.next-btn-normal.disabled.hover,.next-btn-warning.next-btn-normal.disabled:active,.next-btn-warning.next-btn-normal.disabled:focus,.next-btn-warning.next-btn-normal.disabled:hover,.next-btn-warning.next-btn-normal[disabled].active,.next-btn-warning.next-btn-normal[disabled].hover,.next-btn-warning.next-btn-normal[disabled]:active,.next-btn-warning.next-btn-normal[disabled]:focus,.next-btn-warning.next-btn-normal[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-text{border-radius:0}.next-btn-text,.next-btn-text.hover,.next-btn-text:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn-text.next-btn-primary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-primary,.next-btn-text.next-btn-primary.visited,.next-btn-text.next-btn-primary:link,.next-btn-text.next-btn-primary:visited{color:#5584ff}.next-btn-text.next-btn-primary.active,.next-btn-text.next-btn-primary.hover,.next-btn-text.next-btn-primary:active,.next-btn-text.next-btn-primary:focus,.next-btn-text.next-btn-primary:hover{color:#3e71f7;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-secondary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-secondary,.next-btn-text.next-btn-secondary.visited,.next-btn-text.next-btn-secondary:link,.next-btn-text.next-btn-secondary:visited{color:#666}.next-btn-text.next-btn-secondary.active,.next-btn-text.next-btn-secondary.hover,.next-btn-text.next-btn-secondary:active,.next-btn-text.next-btn-secondary:focus,.next-btn-text.next-btn-secondary:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-normal{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-normal,.next-btn-text.next-btn-normal.visited,.next-btn-text.next-btn-normal:link,.next-btn-text.next-btn-normal:visited{color:#333}.next-btn-text.next-btn-normal.active,.next-btn-text.next-btn-normal.hover,.next-btn-text.next-btn-normal:active,.next-btn-text.next-btn-normal:focus,.next-btn-text.next-btn-normal:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-large{border-radius:0;padding:0;height:24px;line-height:24px;font-size:14px;border-width:0}.next-btn-text.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-large>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large.next-btn-loading{padding-left:20px}.next-btn-text.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:0;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn-text.next-large.next-btn-loading>.next-icon{display:none}.next-btn-text.next-medium{border-radius:0;padding:0;height:20px;line-height:20px;font-size:12px;border-width:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium.next-btn-loading{padding-left:16px}.next-btn-text.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-medium.next-btn-loading>.next-icon{display:none}.next-btn-text.next-small{border-radius:0;padding:0;height:16px;line-height:16px;font-size:12px;border-width:0}.next-btn-text.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-small>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small.next-btn-loading{padding-left:16px}.next-btn-text.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-small.next-btn-loading>.next-icon{display:none}.next-btn-text.disabled,.next-btn-text[disabled]{background-color:transparent;border-color:transparent}.next-btn-text.disabled,.next-btn-text.disabled.visited,.next-btn-text.disabled:link,.next-btn-text.disabled:visited,.next-btn-text[disabled],.next-btn-text[disabled].visited,.next-btn-text[disabled]:link,.next-btn-text[disabled]:visited{color:#ccc}.next-btn-text.disabled.active,.next-btn-text.disabled.hover,.next-btn-text.disabled:active,.next-btn-text.disabled:focus,.next-btn-text.disabled:hover,.next-btn-text[disabled].active,.next-btn-text[disabled].hover,.next-btn-text[disabled]:active,.next-btn-text[disabled]:focus,.next-btn-text[disabled]:hover{color:#ccc;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-loading{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-loading,.next-btn-text.next-btn-loading.visited,.next-btn-text.next-btn-loading:link,.next-btn-text.next-btn-loading:visited{color:#333}.next-btn-text.next-btn-loading.active,.next-btn-text.next-btn-loading.hover,.next-btn-text.next-btn-loading:active,.next-btn-text.next-btn-loading:focus,.next-btn-text.next-btn-loading:hover{color:#333;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-loading{pointer-events:none}.next-btn-loading:after{font-family:NextIcon;content:"\E646";opacity:1;visibility:visible;-webkit-animation:loadingCircle 2s infinite linear;animation:loadingCircle 2s infinite linear}.next-btn-ghost{-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-btn-ghost.next-btn-dark{background-color:transparent;border-color:#fff}.next-btn-ghost.next-btn-dark,.next-btn-ghost.next-btn-dark.visited,.next-btn-ghost.next-btn-dark:link,.next-btn-ghost.next-btn-dark:visited{color:#fff}.next-btn-ghost.next-btn-dark.active,.next-btn-ghost.next-btn-dark.hover,.next-btn-ghost.next-btn-dark:active,.next-btn-ghost.next-btn-dark:focus,.next-btn-ghost.next-btn-dark:hover{color:#fff;background-color:hsla(0,0%,100%,.8);border-color:#fff;text-decoration:none}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark[disabled]{background-color:transparent;border-color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark.disabled.visited,.next-btn-ghost.next-btn-dark.disabled:link,.next-btn-ghost.next-btn-dark.disabled:visited,.next-btn-ghost.next-btn-dark[disabled],.next-btn-ghost.next-btn-dark[disabled].visited,.next-btn-ghost.next-btn-dark[disabled]:link,.next-btn-ghost.next-btn-dark[disabled]:visited{color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled.active,.next-btn-ghost.next-btn-dark.disabled.hover,.next-btn-ghost.next-btn-dark.disabled:active,.next-btn-ghost.next-btn-dark.disabled:focus,.next-btn-ghost.next-btn-dark.disabled:hover,.next-btn-ghost.next-btn-dark[disabled].active,.next-btn-ghost.next-btn-dark[disabled].hover,.next-btn-ghost.next-btn-dark[disabled]:active,.next-btn-ghost.next-btn-dark[disabled]:focus,.next-btn-ghost.next-btn-dark[disabled]:hover{color:hsla(0,0%,100%,.4);background-color:transparent;border-color:hsla(0,0%,100%,.4);text-decoration:none}.next-btn-ghost.next-btn-light{background-color:transparent;border-color:#333}.next-btn-ghost.next-btn-light,.next-btn-ghost.next-btn-light.visited,.next-btn-ghost.next-btn-light:link,.next-btn-ghost.next-btn-light:visited{color:#333}.next-btn-ghost.next-btn-light.active,.next-btn-ghost.next-btn-light.hover,.next-btn-ghost.next-btn-light:active,.next-btn-ghost.next-btn-light:focus,.next-btn-ghost.next-btn-light:hover{color:#999;background-color:rgba(0,0,0,.92);border-color:#333;text-decoration:none}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light[disabled]{background-color:transparent;border-color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light.disabled.visited,.next-btn-ghost.next-btn-light.disabled:link,.next-btn-ghost.next-btn-light.disabled:visited,.next-btn-ghost.next-btn-light[disabled],.next-btn-ghost.next-btn-light[disabled].visited,.next-btn-ghost.next-btn-light[disabled]:link,.next-btn-ghost.next-btn-light[disabled]:visited{color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled.active,.next-btn-ghost.next-btn-light.disabled.hover,.next-btn-ghost.next-btn-light.disabled:active,.next-btn-ghost.next-btn-light.disabled:focus,.next-btn-ghost.next-btn-light.disabled:hover,.next-btn-ghost.next-btn-light[disabled].active,.next-btn-ghost.next-btn-light[disabled].hover,.next-btn-ghost.next-btn-light[disabled]:active,.next-btn-ghost.next-btn-light[disabled]:focus,.next-btn-ghost.next-btn-light[disabled]:hover{color:rgba(0,0,0,.1);background-color:transparent;border-color:rgba(0,0,0,.1);text-decoration:none}.next-btn-group{position:relative;display:inline-block;vertical-align:middle}.next-btn-group>.next-btn{position:relative;float:left;-webkit-box-shadow:none;box-shadow:none}.next-btn-group>.next-btn.active,.next-btn-group>.next-btn:active,.next-btn-group>.next-btn:focus,.next-btn-group>.next-btn:hover{z-index:1}.next-btn-group>.next-btn.disabled,.next-btn-group>.next-btn[disabled]{z-index:0}.next-btn-group .next-btn.next-btn{margin:0 0 0 -1px}.next-btn-group .next-btn:not(:first-child):not(:last-child){border-radius:0}.next-btn-group>.next-btn:first-child{margin:0}.next-btn-group>.next-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group>.next-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group>.next-btn-primary:not(:first-child){border-left-color:hsla(0,0%,100%,.2)}.next-btn-group>.next-btn-primary:not(:first-child):hover{border-left-color:transparent}.next-btn-group>.next-btn-primary:not(:first-child).disabled,.next-btn-group>.next-btn-primary:not(:first-child)[disabled]{border-left-color:#e6e7eb}.next-btn-group[dir=rtl]>.next-btn{float:right}.next-btn-group[dir=rtl] .next-btn.next-btn{margin:0 -1px 0 0}.next-btn-group[dir=rtl]>.next-btn:first-child:not(:last-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group[dir=rtl]>.next-btn:last-child:not(:first-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child){border-right-color:hsla(0,0%,100%,.2)}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child):hover{border-right-color:transparent}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child).disabled,.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child)[disabled]{border-right-color:#e6e7eb}.next-btn.next-small[dir=rtl]{border-radius:3px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl].next-btn-loading{padding-left:8px;padding-right:24px}.next-btn.next-small[dir=rtl].next-btn-loading:after{right:8px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-medium[dir=rtl]{border-radius:3px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl].next-btn-loading{padding-left:12px;padding-right:28px}.next-btn.next-medium[dir=rtl].next-btn-loading:after{right:12px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-large[dir=rtl]{border-radius:3px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl].next-btn-loading{padding-left:16px;padding-right:36px}.next-btn.next-large[dir=rtl].next-btn-loading:after{right:16px;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-large{border-radius:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large.next-btn-loading{padding-left:0;padding-right:20px}.next-btn-text[dir=rtl].next-large.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-medium{border-radius:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-medium.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-small{border-radius:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-small.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-message{position:relative;display:block;vertical-align:baseline}.next-message,.next-message *,.next-message :after,.next-message :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-message:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-message .next-message-close{color:#999;font-size:0;position:absolute}.next-message .next-message-close .next-icon-close{width:12px;height:12px;line-height:12px}.next-message .next-message-close .next-icon-close:before{width:12px;height:12px;font-size:12px;line-height:12px}.next-message .next-message-close:hover{color:#666}.next-message.next-message-success.next-inline{background-color:#e4fdda;border-color:#e4fdda;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-success.next-inline .next-message-title{color:#333}.next-message.next-message-success.next-inline .next-message-content{color:#666}.next-message.next-message-success.next-inline .next-message-symbol{color:#46bc15}.next-message.next-message-success.next-inline .next-message-symbol-icon:before{content:"\E60A"}.next-message.next-message-success.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-success.next-addon .next-message-title{color:#333}.next-message.next-message-success.next-addon .next-message-content{color:#666}.next-message.next-message-success.next-addon .next-message-symbol{color:#46bc15}.next-message.next-message-success.next-addon .next-message-symbol-icon:before{content:"\E60A"}.next-message.next-message-success.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-success.next-toast .next-message-title{color:#333}.next-message.next-message-success.next-toast .next-message-content{color:#666}.next-message.next-message-success.next-toast .next-message-symbol{color:#46bc15}.next-message.next-message-success.next-toast .next-message-symbol-icon:before{content:"\E60A"}.next-message.next-message-warning.next-inline{background-color:#fff3e0;border-color:#fff3e0;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-warning.next-inline .next-message-title{color:#333}.next-message.next-message-warning.next-inline .next-message-content{color:#666}.next-message.next-message-warning.next-inline .next-message-symbol{color:#ff9300}.next-message.next-message-warning.next-inline .next-message-symbol-icon:before{content:"\E60B"}.next-message.next-message-warning.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-warning.next-addon .next-message-title{color:#333}.next-message.next-message-warning.next-addon .next-message-content{color:#666}.next-message.next-message-warning.next-addon .next-message-symbol{color:#ff9300}.next-message.next-message-warning.next-addon .next-message-symbol-icon:before{content:"\E60B"}.next-message.next-message-warning.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-warning.next-toast .next-message-title{color:#333}.next-message.next-message-warning.next-toast .next-message-content{color:#666}.next-message.next-message-warning.next-toast .next-message-symbol{color:#ff9300}.next-message.next-message-warning.next-toast .next-message-symbol-icon:before{content:"\E60B"}.next-message.next-message-error.next-inline{background-color:#ffece4;border-color:#ffece4;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-error.next-inline .next-message-title{color:#333}.next-message.next-message-error.next-inline .next-message-content{color:#666}.next-message.next-message-error.next-inline .next-message-symbol{color:#ff3000}.next-message.next-message-error.next-inline .next-message-symbol-icon:before{content:"\E60D"}.next-message.next-message-error.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-error.next-addon .next-message-title{color:#333}.next-message.next-message-error.next-addon .next-message-content{color:#666}.next-message.next-message-error.next-addon .next-message-symbol{color:#ff3000}.next-message.next-message-error.next-addon .next-message-symbol-icon:before{content:"\E60D"}.next-message.next-message-error.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-error.next-toast .next-message-title{color:#333}.next-message.next-message-error.next-toast .next-message-content{color:#666}.next-message.next-message-error.next-toast .next-message-symbol{color:#ff3000}.next-message.next-message-error.next-toast .next-message-symbol-icon:before{content:"\E60D"}.next-message.next-message-notice.next-inline{background-color:#e3f2fd;border-color:#e3f2fd;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-notice.next-inline .next-message-title{color:#333}.next-message.next-message-notice.next-inline .next-message-content{color:#666}.next-message.next-message-notice.next-inline .next-message-symbol{color:#4494f9}.next-message.next-message-notice.next-inline .next-message-symbol-icon:before{content:"\E60C"}.next-message.next-message-notice.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-notice.next-addon .next-message-title{color:#333}.next-message.next-message-notice.next-addon .next-message-content{color:#666}.next-message.next-message-notice.next-addon .next-message-symbol{color:#4494f9}.next-message.next-message-notice.next-addon .next-message-symbol-icon:before{content:"\E60C"}.next-message.next-message-notice.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-notice.next-toast .next-message-title{color:#333}.next-message.next-message-notice.next-toast .next-message-content{color:#666}.next-message.next-message-notice.next-toast .next-message-symbol{color:#4494f9}.next-message.next-message-notice.next-toast .next-message-symbol-icon:before{content:"\E60C"}.next-message.next-message-help.next-inline{background-color:#e3fff8;border-color:#e3fff8;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-help.next-inline .next-message-title{color:#333}.next-message.next-message-help.next-inline .next-message-content{color:#666}.next-message.next-message-help.next-inline .next-message-symbol{color:#01c1b2}.next-message.next-message-help.next-inline .next-message-symbol-icon:before{content:"\E673"}.next-message.next-message-help.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-help.next-addon .next-message-title{color:#333}.next-message.next-message-help.next-addon .next-message-content{color:#666}.next-message.next-message-help.next-addon .next-message-symbol{color:#01c1b2}.next-message.next-message-help.next-addon .next-message-symbol-icon:before{content:"\E673"}.next-message.next-message-help.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-help.next-toast .next-message-title{color:#333}.next-message.next-message-help.next-toast .next-message-content{color:#666}.next-message.next-message-help.next-toast .next-message-symbol{color:#01c1b2}.next-message.next-message-help.next-toast .next-message-symbol-icon:before{content:"\E673"}.next-message.next-message-loading.next-inline{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-loading.next-inline .next-message-title{color:#333}.next-message.next-message-loading.next-inline .next-message-content{color:#666}.next-message.next-message-loading.next-inline .next-message-symbol{color:#5584ff}.next-message.next-message-loading.next-inline .next-message-symbol-icon:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}.next-message.next-message-loading.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-loading.next-addon .next-message-title{color:#333}.next-message.next-message-loading.next-addon .next-message-content{color:#666}.next-message.next-message-loading.next-addon .next-message-symbol{color:#5584ff}.next-message.next-message-loading.next-addon .next-message-symbol-icon:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}.next-message.next-message-loading.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-loading.next-toast .next-message-title{color:#333}.next-message.next-message-loading.next-toast .next-message-content{color:#666}.next-message.next-message-loading.next-toast .next-message-symbol{color:#5584ff}.next-message.next-message-loading.next-toast .next-message-symbol-icon:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}.next-message.next-medium{border-width:1px;padding:12px}.next-message.next-medium .next-message-symbol{float:left;line-height:16px}.next-message.next-medium .next-message-symbol:before{width:16px;font-size:16px;line-height:inherit}.next-message.next-medium .next-message-title{padding:0 20px 0 24px;font-size:16px;line-height:16px}.next-message.next-medium .next-message-content{margin-top:8px;padding:0 20px 0 24px;font-size:12px;line-height:12px}.next-message.next-medium .next-message-symbol+.next-message-content{margin-top:0}.next-message.next-medium.next-only-content .next-message-content{line-height:16px}.next-message.next-medium .next-message-close{top:12px;right:12px}.next-message.next-large{border-width:2px;padding:16px;line-height:18px}.next-message.next-large .next-message-symbol{float:left;line-height:24px}.next-message.next-large .next-message-symbol:before{width:24px;font-size:24px;line-height:inherit}.next-message.next-large .next-message-title{padding:0 20px 0 36px;font-size:20px;line-height:20px}.next-message.next-large .next-message-content{margin-top:8px;padding:0 20px 0 36px;font-size:12px;line-height:12px}.next-message.next-large .next-message-symbol+.next-message-content{margin-top:0}.next-message.next-large.next-only-content .next-message-content,.next-message.next-large.next-title-content .next-message-title{line-height:24px}.next-message.next-large .next-message-close{top:16px;right:16px}.next-message[dir=rtl] .next-message-symbol{float:right}.next-message[dir=rtl].next-medium .next-message-title{padding:0 24px 0 20px}.next-message[dir=rtl].next-medium .next-message-close{left:12px;right:auto}.next-message[dir=rtl].next-large .next-message-title{padding:0 36px 0 20px}.next-message[dir=rtl].next-large .next-message-close{left:16px;right:auto}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-dialog[dir=rtl],.next-dialog[dir=rtl] .next-dialog-footer.next-align-left{text-align:right}.next-dialog[dir=rtl] .next-dialog-footer.next-align-center{text-align:center}.next-dialog[dir=rtl] .next-dialog-footer.next-align-right{text-align:left}.next-dialog[dir=rtl] .next-dialog-btn+.next-dialog-btn{margin-right:4px;margin-left:0}.next-dialog[dir=rtl] .next-dialog-close{left:16px;right:auto}.next-dialog{position:fixed;z-index:1001;background:#fff;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);text-align:left}.next-dialog,.next-dialog *,.next-dialog :after,.next-dialog :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-dialog-header{padding:12px 20px;border-bottom:0 solid transparent;font-size:16px;background:transparent;color:#333}.next-dialog-body{padding:20px;font-size:12px;color:#666}.next-dialog-footer{padding:12px 20px;border-top:0 solid transparent;background:transparent}.next-dialog-footer.next-align-left{text-align:left}.next-dialog-footer.next-align-center{text-align:center}.next-dialog-footer.next-align-right{text-align:right}.next-dialog-footer-fixed-height{position:absolute;width:100%;bottom:0}.next-dialog-btn+.next-dialog-btn{margin-left:4px}.next-dialog-close{position:absolute;top:16px;right:16px;width:16px}.next-dialog-close,.next-dialog-close:link,.next-dialog-close:visited{height:16px;color:#999}.next-dialog-close:hover{background:transparent;color:#333}.next-dialog-close .next-dialog-close-icon.next-icon{position:absolute;top:50%;left:50%;margin-top:-6px;margin-left:-6px;width:12px;height:12px;line-height:12px}.next-dialog-close .next-dialog-close-icon.next-icon:before{width:12px;height:12px;font-size:12px;line-height:12px}.next-dialog-container{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1001;padding:40px;overflow:auto;text-align:center}.next-dialog-container:before{display:inline-block;vertical-align:middle;width:0;height:100%;content:""}.next-dialog-container .next-dialog{display:inline-block;position:relative;vertical-align:middle}.next-dialog-quick .next-dialog-body{padding:20px}.next-dialog .next-dialog-message.next-message{min-width:300px;padding:0} \ No newline at end of file diff --git a/demos/dialog/deps.json b/demos/dialog/deps.json new file mode 100644 index 0000000000..89d9e4d0cc --- /dev/null +++ b/demos/dialog/deps.json @@ -0,0 +1 @@ +["overlay","message","button","icon","demo-helper"] \ No newline at end of file diff --git a/demos/dialog/index.html b/demos/dialog/index.html new file mode 100644 index 0000000000..5a23c320a3 --- /dev/null +++ b/demos/dialog/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/form-element/build/index.css b/demos/form-element/build/index.css new file mode 100644 index 0000000000..9599c92946 --- /dev/null +++ b/demos/form-element/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-overlay-wrapper .next-overlay-inner{z-index:1001}.next-overlay-wrapper .next-overlay-backdrop{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;background:#000;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0}.next-overlay-wrapper.opened .next-overlay-backdrop{opacity:.2}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-radio-button-large[dir=rtl]>label:first-child{margin-left:-1px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.next-radio-button-large[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large[dir=rtl] .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-wrapper[dir=rtl] .next-radio-label{margin-left:0;margin-right:4px}.next-radio-group[dir=rtl] .next-radio-label{margin-right:4px;margin-left:16px}.next-radio-button[dir=rtl]>label .next-radio-label{margin:0}.next-radio-wrapper{outline:0}.next-radio-wrapper .next-radio{display:inline-block;vertical-align:middle;position:relative;line-height:1}.next-radio-wrapper .next-radio,.next-radio-wrapper .next-radio *,.next-radio-wrapper .next-radio :after,.next-radio-wrapper .next-radio :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-radio-wrapper .next-radio input[type=radio]{opacity:0;position:absolute;vertical-align:middle;top:0;left:0;width:16px;height:16px;margin:0}.next-radio-wrapper .next-radio-inner{display:block;width:16px;height:16px;background:#fff;border-radius:50%;border:1px solid #c4c6cf;-webkit-transition:all .36s ease 0s;transition:all .36s ease 0s;-webkit-box-shadow:none;box-shadow:none}.next-radio-wrapper .next-radio-inner:after{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;border-radius:50%;top:50%;margin-top:-2px;left:50%;margin-left:-2px;background:#fff;content:" ";-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86)}.next-radio-wrapper.checked .next-radio-inner{border-color:#5584ff;background:#5584ff}.next-radio-wrapper.checked .next-radio-inner:after{width:4px;height:4px;font-weight:700;background:#fff;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.next-radio-wrapper.checked.hovered .next-radio-inner,.next-radio-wrapper.checked:hover .next-radio-inner{border-color:transparent}.next-radio-wrapper.disabled input[type=radio]{cursor:not-allowed}.next-radio-wrapper.disabled .next-radio-inner{border-color:#e6e7eb;background:#f7f8fa}.next-radio-wrapper.disabled.checked .next-radio-inner,.next-radio-wrapper.disabled .next-radio-inner.hovered,.next-radio-wrapper.disabled .next-radio-inner:hover{border-color:#e6e7eb}.next-radio-wrapper.disabled.checked .next-radio-inner:after{background:#ccc}.next-radio-wrapper:not(.disabled).focused .next-radio-inner,.next-radio-wrapper:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper:not(.disabled):focus .next-radio-inner,.next-radio-wrapper:not(.disabled):hover .next-radio-inner{border-color:#5584ff;background-color:#dee8ff}.next-radio-wrapper.checked.focused .next-radio-inner,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner{border-color:transparent;background:#3e71f7}.next-radio-wrapper.checked.focused .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner:after{background:#fff}.next-radio-button .next-radio,.next-radio-button input[type=radio]{width:0;height:0}.next-radio-button>label{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1;margin:0 0 0 -1px;border:1px solid #c4c6cf;background-color:#fff;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;vertical-align:middle}.next-radio-button>label .next-radio-label{display:block;color:#333;margin:0;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}.next-radio-button>label.hovered,.next-radio-button>label:focus,.next-radio-button>label:hover{z-index:10;border-color:#a0a2ad;background-color:#f2f3f7}.next-radio-button>label.hovered .next-radio-label,.next-radio-button>label:focus .next-radio-label,.next-radio-button>label:hover .next-radio-label{color:#333}.next-radio-button>label.checked{z-index:11;border-color:#5584ff;background-color:#fff}.next-radio-button>label.checked .next-radio-label{color:#5584ff}.next-radio-button>label.disabled{z-index:0;cursor:not-allowed;border-color:#e6e7eb;background-color:#f7f8fa}.next-radio-button>label.disabled .next-radio-label{color:#ccc}.next-radio-button>label.checked.disabled{z-index:0;border-color:#e6e7eb;background-color:#f2f3f7}.next-radio-button>label.checked.disabled .next-radio-label{color:#ccc}.next-radio-button-large>label{padding:0 8px;height:40px;line-height:40px}.next-radio-button-large>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-large .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium>label{padding:0 8px;height:28px;line-height:28px}.next-radio-button-medium>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-medium>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium .next-radio-label{height:26px;line-height:26px;font-size:12px}.next-radio-button-small>label{padding:0 8px;height:20px;line-height:20px}.next-radio-button-small>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small .next-radio-label{height:18px;line-height:18px;font-size:12px}.next-radio-single-input input[type=radio]{opacity:0;position:absolute;top:0;left:0;margin:0}.next-radio-group{display:inline-block}.next-radio-group .next-radio-label{color:#333;margin-right:16px}.next-radio-group.disabled .next-radio-label{color:#ccc}.next-radio-group-ver .next-radio-wrapper{display:block;margin-bottom:8px}.next-radio-label{margin:0;margin-left:4px;font-size:12px;vertical-align:middle;line-height:1}@-moz-document url-prefix(){.next-radio{margin-top:-1px}@supports ((-webkit-animation:calc(0s)) or (animation:calc(0s))){.next-radio{margin-top:-3px}}}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}@-webkit-keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}@keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}.next-tag>.next-tag-body{overflow:hidden;text-overflow:ellipsis}.next-tag-checkable.next-tag-level-secondary{color:#333;border-color:transparent;background-color:transparent}.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):hover{color:#5584ff}.next-tag-closable.next-tag-level-primary,.next-tag-default.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-primary,.disabled.next-tag-default.next-tag-level-primary,[disabled].next-tag-closable.next-tag-level-primary,[disabled].next-tag-default.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.disabled.next-tag-default.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-checkable.next-tag-level-primary,[disabled].next-tag-checkable.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary.checked{color:#fff;border-color:#5584ff;background-color:#5584ff}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover{color:#fff;border-color:#3e71f7;background-color:#3e71f7}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked>.next-tag-close-btn{color:#fff}.next-tag-default.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-default.next-tag-level-normal,[disabled].next-tag-default.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.disabled.next-tag-default.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-closable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-normal,[disabled].next-tag-closable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:transparent}.disabled.next-tag-closable.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-normal.checked,.next-tag-checkable.next-tag-level-secondary.checked{color:#5584ff;border-color:#5584ff;background-color:transparent}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover{color:#3e71f7;border-color:#3e71f7;background-color:transparent}.next-tag-checkable.next-tag-level-secondary.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-secondary.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-secondary.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-secondary.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-secondary.checked:after{color:#fff}.next-tag-checkable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#c4c6cf;background-color:transparent}.disabled.next-tag-checkable.next-tag-level-normal,[disabled].next-tag-checkable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-normal.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-normal.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-normal.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-normal.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-normal.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-normal.checked:after{color:#fff}.next-tag-closable.next-tag-level-normal:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#c4c6cf;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-closable.next-tag-level-normal:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E626";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:before{background-color:#a0a2ad}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-closable.next-tag-level-normal:disabled:before,[disabled].next-tag-closable.next-tag-level-normal:before{background-color:#e6e7eb}.next-tag-closable.next-tag-level-normal:disabled:after,[disabled].next-tag-closable.next-tag-level-normal:after{color:#fff}.next-tag-group .next-tag-large,.next-tag-group .next-tag-medium{margin-right:8px;margin-bottom:8px}.next-tag-group .next-tag-small{margin-right:4px;margin-bottom:4px}.next-tag{display:inline-block;max-width:100%;vertical-align:middle;border-width:1px;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid;overflow:hidden;white-space:nowrap;-webkit-transition:all .2s cubic-bezier(.23,1,.32,1);transition:all .2s cubic-bezier(.23,1,.32,1);font-size:0;outline:0}.next-tag,.next-tag *,.next-tag :after,.next-tag :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tag>.next-tag-body{position:relative;display:inline-block;height:100%;text-align:center;vertical-align:middle;max-width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.next-tag>.next-tag-body>a{text-decoration:none;color:inherit}.next-tag>.next-tag-body>a:before{content:" ";position:absolute;display:block;top:0;left:0;right:0;bottom:0}.next-tag>.next-tag-body .next-icon{line-height:1;vertical-align:middle}.next-tag>.next-tag-body .next-icon:before{font-size:inherit}.next-tag.next-tag-body-pointer{cursor:pointer}.next-tag.disabled,.next-tag[disabled]{cursor:not-allowed;pointer-events:none}.next-tag-large{height:40px;padding:0;line-height:38px;font-size:0}.next-tag-large>.next-tag-body{font-size:16px;padding:0 16px;min-width:48px}.next-tag-large.next-tag-closable>.next-tag-body{padding:0 0 0 16px}.next-tag-large[dir=rtl].next-tag-closable>.next-tag-body{padding:0 16px 0 0}.next-tag-large>.next-tag-close-btn{margin-left:12px;padding-right:16px}.next-tag-large>.next-tag-close-btn .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tag-large[dir=rtl]>.next-tag-close-btn{margin-right:12px;margin-left:0;padding-right:0;padding-left:16px}.next-tag-medium{height:28px;padding:0;line-height:26px;font-size:0}.next-tag-medium>.next-tag-body{font-size:14px;padding:0 12px;min-width:40px}.next-tag-medium.next-tag-closable>.next-tag-body{padding:0 0 0 12px}.next-tag-medium[dir=rtl].next-tag-closable>.next-tag-body{padding:0 12px 0 0}.next-tag-medium>.next-tag-close-btn{margin-left:8px;padding-right:12px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-medium>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-medium[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:12px}.next-tag-small{height:20px;padding:0;line-height:18px;font-size:0}.next-tag-small>.next-tag-body{font-size:12px;padding:0 8px;min-width:28px}.next-tag-small.next-tag-closable>.next-tag-body{padding:0 0 0 8px}.next-tag-small[dir=rtl].next-tag-closable>.next-tag-body{padding:0 8px 0 0}.next-tag-small>.next-tag-close-btn{margin-left:8px;padding-right:8px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-small>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-small[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:8px}.next-tag-default{cursor:default}.next-tag-closable{position:relative}.next-tag-closable.next-tag-large>.next-tag-body{max-width:calc(100% - 40px)}.next-tag-closable.next-tag-medium>.next-tag-body{max-width:calc(100% - 28px)}.next-tag-closable.next-tag-small>.next-tag-body{max-width:calc(100% - 20px)}.next-tag-closable>.next-tag-close-btn{display:inline-block;vertical-align:middle;height:100%;text-align:center;cursor:pointer}.next-tag-closable.next-tag-level-normal.disabled,.next-tag-closable.next-tag-level-normal[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable{cursor:pointer;position:relative;border-radius:3px}.next-tag-checkable.checked:before{-webkit-animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.checked:after{-webkit-animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86);animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):before{right:-10px;bottom:-10px;width:20px;height:20px}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):after{font-size:8px;line-height:8px;right:0;bottom:0}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):before{right:-14px;bottom:-14px;width:28px;height:28px}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):after{font-size:12px;line-height:12px;right:0;bottom:0}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):before{right:-18px;bottom:-18px;width:36px;height:36px}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):after{font-size:16px;line-height:16px;right:0;bottom:0}.next-tag-checkable.next-tag-level-primary.disabled,.next-tag-checkable.next-tag-level-primary[disabled]{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-secondary.disabled,.next-tag-checkable.next-tag-level-secondary[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-zoom-appear,.next-tag-zoom-enter{-webkit-animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-tag-zoom-leave{-webkit-animation:zoomOut .3s ease-in;animation:zoomOut .3s ease-in;-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-checkbox-wrapper[dir=rtl]{margin-right:8px;margin-left:0}.next-checkbox-wrapper[dir=rtl]:first-child{margin-right:0}.next-checkbox-wrapper[dir=rtl]>.next-checkbox-label{margin-right:4px;margin-left:0}.next-checkbox-wrapper,.next-checkbox-wrapper *,.next-checkbox-wrapper :after,.next-checkbox-wrapper :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-checkbox-wrapper .next-checkbox{display:inline-block;position:relative;line-height:1;vertical-align:middle}.next-checkbox-wrapper input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:16px;height:16px;margin:0}.next-checkbox-wrapper .next-checkbox-inner{display:block;width:16px;height:16px;background:#fff;border-radius:3px;border:1px solid #c4c6cf;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;text-align:left;-webkit-box-shadow:none;box-shadow:none}.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;top:0;opacity:0;line-height:16px;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);color:#fff;left:4px;margin-left:0}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{vertical-align:top;margin-top:0}.next-checkbox-wrapper.checked .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.checked .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);margin-left:0}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.indeterminate .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.indeterminate .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1);margin-left:0}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.disabled input[type=checkbox]{cursor:not-allowed}.next-checkbox-wrapper.disabled .next-checkbox-inner{border-color:#e6e7eb;background:#f7f8fa}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover{border-color:#e6e7eb}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner>.next-icon{color:#ccc;opacity:1}.next-checkbox-wrapper.focused .next-checkbox-inner,.next-checkbox-wrapper.hovered .next-checkbox-inner,.next-checkbox-wrapper:not(.disabled):hover .next-checkbox-inner{border-color:#5584ff;background-color:#dee8ff}.next-checkbox-wrapper.checked.focused .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner{border-color:transparent;background-color:#3e71f7}.next-checkbox-wrapper.checked.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner>.next-icon{color:#fff;opacity:1}.next-checkbox-group .next-checkbox-wrapper{margin-left:8px}.next-checkbox-group .next-checkbox-wrapper:first-child{margin-left:0}.next-checkbox-group-ver .next-checkbox-wrapper{display:block;margin-left:0;margin-right:0;margin-bottom:8px}.next-checkbox-label{font-size:12px;vertical-align:middle;margin:0;margin-left:4px;line-height:1}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-menu[dir=rtl] .next-menu-item-helper{float:left}.next-menu[dir=rtl] .next-menu-item .next-checkbox,.next-menu[dir=rtl] .next-menu-item .next-radio{margin-left:4px;margin-right:0}.next-menu[dir=rtl] .next-menu-hoz-right{float:left}.next-menu[dir=rtl] .next-menu-hoz-icon-arrow.next-icon{left:6px;right:auto}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon{margin-left:0;margin-right:-16px}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon.next-menu-icon-right{right:auto;left:4px}.next-menu[dir=rtl] .next-menu-icon-arrow.next-icon{left:10px;right:auto}.next-menu{position:relative;min-width:100px;padding:8px 0;margin:0;list-style:none;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;background:#fff;line-height:32px;font-size:12px}.next-menu,.next-menu *,.next-menu :after,.next-menu :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-menu:focus,.next-menu :focus{outline:0}.next-menu-embeddable,.next-menu-embeddable .next-menu-item.next-disabled,.next-menu-embeddable .next-menu-item.next-disabled .next-menu-item-text>a{background:initial;border:none}.next-menu-embeddable .next-menu-item-inner{height:100%}.next-menu-content{position:relative}.next-menu-content,.next-menu-sub-menu{padding:0;margin:0;list-style:none}.next-menu-sub-menu.next-expand-enter{overflow:hidden}.next-menu-sub-menu.next-expand-enter-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-sub-menu.next-expand-leave{overflow:hidden}.next-menu-sub-menu.next-expand-leave-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-item{position:relative;padding:0 20px;-webkit-transition:background .2s ease;transition:background .2s ease;color:#333;cursor:pointer}.next-menu-item-helper{float:right;color:#999;font-style:normal;font-size:12px}.next-menu-item .next-checkbox,.next-menu-item .next-radio{margin-right:4px}.next-menu-item.next-selected{color:#333;background-color:#fff}.next-menu-item.next-selected .next-menu-icon-arrow{color:#666}.next-menu-item.next-selected .next-menu-icon-selected{color:#5584ff}.next-menu-item.next-disabled,.next-menu-item.next-disabled .next-menu-item-text>a{color:#ccc;background-color:#fff;cursor:not-allowed}.next-menu-item.next-disabled .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-icon-selected,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-selected{color:#ccc}.next-menu-item:not(.next-disabled).next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover,.next-menu-item:not(.next-disabled).next-selected:focus,.next-menu-item:not(.next-disabled).next-selected:focus:hover,.next-menu-item:not(.next-disabled).next-selected:hover,.next-menu-item:not(.next-disabled):hover{color:#333;background-color:#f2f3f7}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled):hover .next-menu-icon-arrow{color:#333}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled):hover .next-menu-icon-selected{color:#5584ff}.next-menu-item-inner{height:32px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.next-menu-item-text{vertical-align:middle}.next-menu-item-text>a{display:inline-block;text-decoration:none;color:#333}.next-menu-item-text>a:before{position:absolute;background-color:transparent;top:0;left:0;bottom:0;right:0;content:""}.next-menu.next-hoz{padding:0}.next-menu.next-hoz .next-menu-content>.next-menu-item,.next-menu.next-hoz>.next-menu-item{display:inline-block;vertical-align:top}.next-menu.next-hoz .next-menu-content,.next-menu.next-hoz .next-menu-footer,.next-menu.next-hoz .next-menu-header{display:inline-block}.next-menu-hoz-right{float:right}.next-menu-group-label{padding:0 12px;color:#999}.next-menu-divider{margin:8px 12px;border-bottom:1px solid #e6e7eb}.next-menu .next-menu-icon-selected.next-icon{position:absolute;top:0;margin-left:-16px}.next-menu .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-icon-selected.next-icon.next-menu-icon-right{right:4px}.next-menu .next-menu-icon-arrow.next-icon{position:absolute;top:0;right:10px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-icon-arrow.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow.next-icon:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-icon-arrow-down.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:scale(.5) rotate(180deg);-ms-transform:scale(.5) rotate(180deg);transform:scale(.5) rotate(180deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-down.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.next-menu .next-menu-icon-arrow-right.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:scale(.5) rotate(-90deg);-ms-transform:scale(.5) rotate(-90deg);transform:scale(.5) rotate(-90deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-right.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-hoz-icon-arrow.next-icon{position:absolute;top:0;right:6px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-hoz-icon-arrow.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-hoz-icon-arrow.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-hoz-icon-arrow.next-open:before{width:12px;font-size:12px;line-height:inherit}.next-menu.next-context{line-height:24px}.next-menu.next-context .next-menu-item-inner{height:24px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-input{vertical-align:middle;display:inline-table;border-collapse:separate;font-size:0;line-height:1;width:200px;border-spacing:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;border:1px solid #c4c6cf;background-color:#fff}.next-input,.next-input *,.next-input :after,.next-input :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input input{height:100%}.next-input input[type=reset],.next-input input[type=submit]{-webkit-appearance:button;cursor:pointer}.next-input input::-moz-focus-inner{border:0;padding:0}.next-input input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset}.next-input textarea{resize:none}.next-input input,.next-input textarea{width:100%;border:none;outline:none;padding:0;margin:0;font-weight:400;vertical-align:middle;background-color:transparent;color:#333}.next-input input::-ms-clear,.next-input textarea::-ms-clear{display:none}.next-input.next-input-textarea{border-radius:3px;font-size:0}.next-input.next-input-textarea textarea{color:#333;padding:4px 8px;font-size:12px;border-radius:3px}.next-input.next-input-textarea .next-input-control{display:block;width:auto;border-radius:3px}.next-input.next-input-textarea .next-input-len{padding:0 8px 4px;display:block;text-align:right;width:auto}.next-input.next-small{height:20px;border-radius:3px}.next-input.next-small .next-input-label{padding-left:8px;font-size:12px}.next-input.next-small .next-input-inner{font-size:12px}.next-input.next-small .next-input-control{padding-right:4px}.next-input.next-small input{height:18px;line-height:18px \0;padding:0 4px;font-size:12px}.next-input.next-small input::-webkit-input-placeholder{font-size:12px}.next-input.next-small input::-moz-placeholder{font-size:12px}.next-input.next-small input::-ms-input-placeholder{font-size:12px}.next-input.next-small input::placeholder{font-size:12px}.next-input.next-small .next-input-text-field{padding:0 4px;font-size:12px;height:18px;line-height:18px}.next-input.next-small .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-small input{border-radius:3px}.next-input.next-small .next-input-control{border-radius:0 3px 3px 0}.next-input.next-medium{height:28px;border-radius:3px}.next-input.next-medium .next-input-label{padding-left:8px;font-size:12px}.next-input.next-medium .next-input-inner{font-size:12px}.next-input.next-medium .next-input-control{padding-right:8px}.next-input.next-medium input{height:26px;line-height:26px \0;padding:0 8px;font-size:12px}.next-input.next-medium input::-webkit-input-placeholder{font-size:12px}.next-input.next-medium input::-moz-placeholder{font-size:12px}.next-input.next-medium input::-ms-input-placeholder{font-size:12px}.next-input.next-medium input::placeholder{font-size:12px}.next-input.next-medium .next-input-text-field{padding:0 8px;font-size:12px;height:26px;line-height:26px}.next-input.next-medium .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-medium input{border-radius:3px}.next-input.next-medium .next-input-control{border-radius:0 3px 3px 0}.next-input.next-large{height:40px;border-radius:3px}.next-input.next-large .next-input-label{padding-left:12px;font-size:16px}.next-input.next-large .next-input-inner{font-size:16px}.next-input.next-large .next-input-control{padding-right:8px}.next-input.next-large input{height:38px;line-height:38px \0;padding:0 12px;font-size:16px}.next-input.next-large input::-webkit-input-placeholder{font-size:16px}.next-input.next-large input::-moz-placeholder{font-size:16px}.next-input.next-large input::-ms-input-placeholder{font-size:16px}.next-input.next-large input::placeholder{font-size:16px}.next-input.next-large .next-input-text-field{padding:0 12px;font-size:16px;height:38px;line-height:38px}.next-input.next-large .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-input.next-large input{border-radius:3px}.next-input.next-large .next-input-control{border-radius:0 3px 3px 0}.next-input-hint-wrap{color:#999;position:relative}.next-input-hint-wrap .next-input-clear{opacity:0;z-index:1;position:absolute}.next-input-hint-wrap .next-input-hint{opacity:1}.next-input .next-icon-delete-filling:hover{cursor:pointer;color:#666}.next-input.next-focus,.next-input:hover{border-color:#a0a2ad;background-color:#fff}.next-input.next-focus .next-input-clear,.next-input:hover .next-input-clear{opacity:1}.next-input.next-focus .next-input-clear+.next-input-hint,.next-input:hover .next-input-clear+.next-input-hint{opacity:0}.next-input .next-input-clear:focus{opacity:1}.next-input .next-input-clear:focus+.next-input-hint{opacity:0}.next-input.next-focus{border-color:#5584ff;background-color:#fff}.next-input.next-error,.next-input.next-error.next-focus,.next-input.next-error:hover{border-color:#ff3000}.next-input.next-hidden{display:none}.next-input.next-noborder{border:none}.next-input-control .next-input-len{font-size:12px;line-height:12px;color:#999;display:table-cell;width:1px;vertical-align:bottom}.next-input-control .next-input-len.next-error{color:#ff3000}.next-input-control>*{display:table-cell;width:1%;top:0}.next-input-control>:not(:last-child){padding-right:4px}.next-input-control .next-icon{-webkit-transition:all .3s ease-out;transition:all .3s ease-out;color:#999}.next-input-control .next-icon-success-filling{color:#46bc15}.next-input-control .next-icon-loading{color:#4494f9}.next-input-label{color:#666}.next-input input::-moz-placeholder,.next-input textarea::-moz-placeholder{color:#999;opacity:1}.next-input input:-ms-input-placeholder,.next-input textarea:-ms-input-placeholder{color:#999}.next-input input::-webkit-input-placeholder,.next-input textarea::-webkit-input-placeholder{color:#999}.next-input.next-disabled{color:#ccc;cursor:not-allowed}.next-input.next-disabled,.next-input.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled input::-moz-placeholder,.next-input.next-disabled textarea::-moz-placeholder{color:#ccc;opacity:1}.next-input.next-disabled input:-ms-input-placeholder,.next-input.next-disabled textarea:-ms-input-placeholder{color:#ccc}.next-input.next-disabled input::-webkit-input-placeholder,.next-input.next-disabled textarea::-webkit-input-placeholder{color:#ccc}.next-input.next-disabled .next-input-label,.next-input.next-disabled .next-input-len{color:#ccc}.next-input.next-disabled input,.next-input.next-disabled textarea{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa;cursor:not-allowed}.next-input.next-disabled input:hover,.next-input.next-disabled textarea:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled .next-input-hint-wrap{color:#ccc}.next-input.next-disabled .next-input-hint-wrap .next-input-clear{opacity:0}.next-input.next-disabled .next-input-hint-wrap .next-input-hint{opacity:1}.next-input.next-disabled .next-input-hint-wrap .next-icon-delete-filling:hover{cursor:not-allowed;color:#ccc}.next-input.next-disabled .next-icon{color:#ccc}.next-input-control,.next-input-inner,.next-input-label{display:table-cell;width:1px;vertical-align:middle;line-height:1;background-color:transparent;white-space:nowrap}.next-input-group{display:inline-table;border-collapse:separate;border-spacing:0;line-height:0;width:100%}.next-input-group,.next-input-group *,.next-input-group :after,.next-input-group :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input-group-auto-width{width:100%;border-radius:0!important}.next-input-group>.next-input:first-child.next-large,.next-input-group>.next-input:first-child.next-medium,.next-input-group>.next-input:first-child.next-small{border-top-left-radius:3px!important;border-bottom-left-radius:3px!important}.next-input-group>.next-input:last-child.next-large,.next-input-group>.next-input:last-child.next-medium,.next-input-group>.next-input:last-child.next-small{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.next-input-group-addon{width:1px;display:table-cell;vertical-align:middle;white-space:nowrap}.next-input-group-addon:first-child,.next-input-group-addon:first-child>*{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group-addon:last-child,.next-input-group-addon:last-child>*{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group-text{color:#999;background-color:#f2f3f7;text-align:center;border:1px solid #c4c6cf;padding:0 8px}.next-input-group-text:first-child{border-right-width:0}.next-input-group-text:last-child{border-left-width:0}.next-input-group-text.next-disabled{color:#ccc;cursor:not-allowed}.next-input-group-text.next-disabled,.next-input-group-text.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input-group-text.next-medium,.next-input-group-text.next-small{font-size:12px;border-radius:3px}.next-input-group-text.next-large{font-size:16px;border-radius:3px}.next-input[dir=rtl].next-small .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-small .next-input-control{padding-right:0;padding-left:4px}.next-input[dir=rtl].next-medium .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-medium .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-large .next-input-label{padding-left:0;padding-right:12px}.next-input[dir=rtl].next-large .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-input-textarea .next-input-len{text-align:left}.next-input[dir=rtl] .next-input-control>:not(:last-child){padding-left:4px;padding-right:0}.next-input-group[dir=rtl] .next-input-group-addon:first-child{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-small{border-bottom-right-radius:3px!important;border-top-right-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-small{border-bottom-left-radius:3px!important;border-top-left-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-text:first-child{border-right-width:1px;border-left:0}.next-input-group[dir=rtl] .next-input-group-text:last-child{border-left-width:1px;border-right:0}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-select{display:inline-block;font-size:0;vertical-align:middle}.next-select,.next-select *,.next-select :after,.next-select :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-select-trigger{min-width:100px;outline:0;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-trigger .next-input-label{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-select-values{display:block;width:100%;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow:hidden}.next-select-trigger .next-select-values>em{font-style:inherit}.next-select-trigger .next-select-values input{padding-left:0;padding-right:0}.next-select-trigger .next-input-control{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-input-control>*{display:inline-block;width:auto}.next-select-trigger .next-input-control>.next-select-arrow{padding-right:0}.next-select-trigger .next-input.next-disabled em{color:#ccc}.next-select-trigger .next-input.next-disabled .next-select-arrow{cursor:not-allowed}.next-select-trigger .next-select-clear{display:none}.next-select-trigger.next-has-clear:hover .next-select-clear{display:inline-block}.next-select-trigger.next-has-clear:hover .next-select-arrow{display:none}.next-select .next-select-inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;min-width:100px;outline:0;color:#333}.next-select .next-select-inner .next-tag{line-height:1;margin-right:4px;margin-bottom:3px;padding-left:4px;padding-right:4px}.next-select-trigger-search{position:relative;display:inline-block;vertical-align:top;overflow:hidden;width:100%;max-width:100%}.next-select-trigger-search>input,.next-select-trigger-search>span{display:block;font-size:inherit;font-family:inherit;letter-spacing:inherit;white-space:nowrap;overflow:hidden}.next-select-trigger-search input{position:absolute;background-color:transparent;width:100%;height:100%!important;z-index:1;left:0;border:0;outline:0;margin:0;padding:0;cursor:inherit}.next-select-trigger-search>span{position:relative;visibility:hidden;white-space:pre;max-width:100%;z-index:-1}.next-select-single.next-no-search{cursor:pointer}.next-select-single.next-has-search.next-active .next-select-values>em{display:none}.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{width:1px;opacity:0;filter:alpha(opacity=0)}.next-select-single.next-inactive .next-select-trigger-search input,.next-select-single.next-no-search .next-select-trigger-search input{color:transparent}.next-select-single .next-select-values{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.next-select-single .next-select-values>em{vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.next-select-multiple .next-select-values,.next-select-tag .next-select-values{margin-bottom:-3px;height:auto!important}.next-select-multiple .next-select-trigger-search,.next-select-tag .next-select-trigger-search{margin-bottom:3px}.next-select-multiple .next-tag+.next-select-trigger-search,.next-select-tag .next-tag+.next-select-trigger-search{width:auto;min-width:1px}.next-select-multiple .next-input,.next-select-tag .next-input{height:auto;-webkit-box-align:start;-ms-flex-align:start;align-items:start}.next-select-multiple.next-small .next-select-values,.next-select-tag.next-small .next-select-values{min-height:18px;padding-top:2px;padding-bottom:2px;line-height:14px}.next-select-multiple.next-small .next-tag,.next-select-tag.next-small .next-tag{border:0;padding-top:0;padding-bottom:0;height:14px}.next-select-multiple.next-small .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-close-btn,.next-select-tag.next-small .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-close-btn{line-height:14px}.next-select-multiple.next-small .next-input-control,.next-select-multiple.next-small .next-input-label,.next-select-tag.next-small .next-input-control,.next-select-tag.next-small .next-input-label{line-height:18px}.next-select-multiple.next-medium .next-select-values,.next-select-tag.next-medium .next-select-values{min-height:26px;padding-top:3px;padding-bottom:3px;line-height:20px}.next-select-multiple.next-medium .next-tag,.next-select-tag.next-medium .next-tag{padding-top:1px;padding-bottom:1px;height:20px}.next-select-multiple.next-medium .next-tag .next-tag-body,.next-select-multiple.next-medium .next-tag .next-tag-close-btn,.next-select-tag.next-medium .next-tag .next-tag-body,.next-select-tag.next-medium .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-medium .next-input-control,.next-select-multiple.next-medium .next-input-label,.next-select-tag.next-medium .next-input-control,.next-select-tag.next-medium .next-input-label{line-height:26px}.next-select-multiple.next-large .next-select-values,.next-select-tag.next-large .next-select-values{min-height:38px;padding-top:7px;padding-bottom:7px;line-height:24px}.next-select-multiple.next-large .next-tag,.next-select-tag.next-large .next-tag{padding-top:3px;padding-bottom:3px;height:24px}.next-select-multiple.next-large .next-tag .next-tag-body,.next-select-multiple.next-large .next-tag .next-tag-close-btn,.next-select-tag.next-large .next-tag .next-tag-body,.next-select-tag.next-large .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-large .next-input-control,.next-select-multiple.next-large .next-input-label,.next-select-tag.next-large .next-input-control,.next-select-tag.next-large .next-input-label{line-height:38px}.next-select.next-no-search .next-select-trigger-search input{color:transparent}.next-select-auto-complete{width:160px}.next-select-auto-complete .next-input{width:100%}.next-select-auto-complete .next-input .next-input-hint-wrap{padding-right:1px}.next-select-auto-complete .next-input .next-select-arrow{padding-left:0}.next-select.next-active .next-select-arrow{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-select-arrow{cursor:pointer;width:auto!important;text-align:center;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-menu-wrapper{max-height:260px;overflow:auto;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none}.next-select-menu-wrapper .next-select-menu{max-height:none;border:none}.next-select-menu{max-height:260px;overflow:auto}.next-select-menu .next-select-menu-empty-content{padding-left:8px;padding-right:8px;color:#999}.next-select-menu.next-select-auto-complete-menu.next-select-menu-empty{display:none}.next-select-menu .next-menu-item-text .next-icon{vertical-align:middle}.next-select-all{display:block;cursor:pointer;padding:0 8px;margin:0 12px 8px;border-bottom:1px solid #dcdee3}.next-select-all:hover{color:#3e71f7}.next-select-all .next-menu-icon-selected.next-icon{display:inline-block!important;top:auto;color:#5584ff}.next-select-highlight{color:#5584ff;font-size:12px}.next-select-in-ie.next-select-trigger .next-select-values{overflow:visible}.next-select-in-ie.next-select-trigger .next-input-control,.next-select-in-ie.next-select-trigger .next-input-label{width:1px}.next-select-in-ie.next-select-trigger .next-input-control>*{display:table-cell;width:1%}.next-select-in-ie.next-select-trigger .next-select-arrow{display:table-cell}.next-select-in-ie.next-select-trigger .next-select-clear{display:none}.next-select-in-ie.next-select-trigger.next-select-multiple .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-tag .next-select-inner{vertical-align:top}.next-select-in-ie.next-select-trigger .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-single .next-select-values{display:inline-table}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-small .next-select-values{line-height:20px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-medium .next-select-values{line-height:28px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-large .next-select-values{line-height:40px}.next-select-in-ie.next-select-trigger .next-select-trigger-search>span{max-width:100px}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values{position:relative}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values>em{position:absolute;display:inline-block;height:100%;line-height:1;vertical-align:middle;overflow:hidden;left:4px;right:0;top:30%}.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{filter:alpha(opacity=0);font-size:0}.next-select-in-ie.next-select-trigger.next-no-search .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-trigger-search input{color:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-time-picker-menu{float:left;text-align:center}.next-time-picker-menu:not(:last-child){border-right:1px solid #c4c6cf}.next-time-picker-menu-title{cursor:default;height:28px;line-height:28px;font-size:12px;font-weight:400;color:#999;background:#fff}.next-time-picker-menu ul{position:relative;overflow-y:auto;list-style:none;margin:0;padding:0;font-size:12px;height:196px}.next-time-picker-menu-item{cursor:pointer;height:28px;line-height:28px;-webkit-transition:background .3s ease-out;transition:background .3s ease-out;color:#666;background:#fff;outline:none}.next-time-picker-menu-item:hover{color:#333;background:#f2f3f7}.next-time-picker-menu-item.next-selected{font-weight:700;color:#666;background:#f2f3f7}.next-time-picker-menu-item.next-disabled{cursor:not-allowed;color:#ccc;background:#fff}.next-time-picker-panel,.next-time-picker-panel *,.next-time-picker-panel :after,.next-time-picker-panel :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-time-picker-panel:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-time-picker-panel-header{border-bottom:1px solid #dcdee3}.next-time-picker-panel-input.next-input{width:100%;padding:6px;border-color:transparent;vertical-align:middle}.next-time-picker-panel-col-3 .next-time-picker-menu{width:33.33333%}.next-time-picker-panel-col-2 .next-time-picker-menu{width:50%}.next-time-picker-body[dir=rtl] .next-time-picker-menu{float:right}.next-time-picker-body[dir=rtl] .next-time-picker-menu:not(:last-child){border-right:none;border-left:1px solid #c4c6cf}.next-time-picker{display:inline-block;width:200px}.next-time-picker,.next-time-picker *,.next-time-picker :after,.next-time-picker :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-time-picker-trigger .next-input{width:100%}.next-time-picker-body{overflow:hidden;width:200px;border:1px solid #dcdee3;border-radius:3px;background:#fff;-webkit-box-shadow:none;box-shadow:none}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.demo-body table{width:100%}.next-form-element.next-input.next-small,.next-form-element.next-select .next-input.next-small,.next-form-element.next-time-picker .next-input.next-small{height:20px;border-radius:3px}.next-form-element.next-input.next-small .next-input-label,.next-form-element.next-select .next-input.next-small .next-input-label,.next-form-element.next-time-picker .next-input.next-small .next-input-label{padding-left:8px;font-size:12px}.next-form-element.next-input.next-small .next-input-inner,.next-form-element.next-select .next-input.next-small .next-input-inner,.next-form-element.next-time-picker .next-input.next-small .next-input-inner{font-size:12px}.next-form-element.next-input.next-small .next-input-control,.next-form-element.next-select .next-input.next-small .next-input-control,.next-form-element.next-time-picker .next-input.next-small .next-input-control{padding-right:4px}.next-form-element.next-input.next-small input,.next-form-element.next-select .next-input.next-small input,.next-form-element.next-time-picker .next-input.next-small input{height:18px;line-height:18px \0;padding:0 4px;font-size:12px}.next-form-element.next-input.next-small input::-webkit-input-placeholder,.next-form-element.next-select .next-input.next-small input::-webkit-input-placeholder,.next-form-element.next-time-picker .next-input.next-small input::-webkit-input-placeholder{font-size:12px}.next-form-element.next-input.next-small input::-moz-placeholder,.next-form-element.next-select .next-input.next-small input::-moz-placeholder,.next-form-element.next-time-picker .next-input.next-small input::-moz-placeholder{font-size:12px}.next-form-element.next-input.next-small input::-ms-input-placeholder,.next-form-element.next-select .next-input.next-small input::-ms-input-placeholder,.next-form-element.next-time-picker .next-input.next-small input::-ms-input-placeholder{font-size:12px}.next-form-element.next-input.next-small input::placeholder,.next-form-element.next-select .next-input.next-small input::placeholder,.next-form-element.next-time-picker .next-input.next-small input::placeholder{font-size:12px}.next-form-element.next-input.next-small .next-input-text-field,.next-form-element.next-select .next-input.next-small .next-input-text-field,.next-form-element.next-time-picker .next-input.next-small .next-input-text-field{padding:0 4px;font-size:12px;height:18px;line-height:18px}.next-form-element.next-input.next-small .next-icon:before,.next-form-element.next-select .next-input.next-small .next-icon:before,.next-form-element.next-time-picker .next-input.next-small .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-form-element.next-input.next-small input,.next-form-element.next-select .next-input.next-small input,.next-form-element.next-time-picker .next-input.next-small input{border-radius:3px}.next-form-element.next-input.next-small .next-input-control,.next-form-element.next-select .next-input.next-small .next-input-control,.next-form-element.next-time-picker .next-input.next-small .next-input-control{border-radius:0 3px 3px 0}.next-form-element.next-input.next-medium,.next-form-element.next-select .next-input.next-medium,.next-form-element.next-time-picker .next-input.next-medium{height:28px;border-radius:3px}.next-form-element.next-input.next-medium .next-input-label,.next-form-element.next-select .next-input.next-medium .next-input-label,.next-form-element.next-time-picker .next-input.next-medium .next-input-label{padding-left:8px;font-size:12px}.next-form-element.next-input.next-medium .next-input-inner,.next-form-element.next-select .next-input.next-medium .next-input-inner,.next-form-element.next-time-picker .next-input.next-medium .next-input-inner{font-size:12px}.next-form-element.next-input.next-medium .next-input-control,.next-form-element.next-select .next-input.next-medium .next-input-control,.next-form-element.next-time-picker .next-input.next-medium .next-input-control{padding-right:8px}.next-form-element.next-input.next-medium input,.next-form-element.next-select .next-input.next-medium input,.next-form-element.next-time-picker .next-input.next-medium input{height:26px;line-height:26px \0;padding:0 8px;font-size:12px}.next-form-element.next-input.next-medium input::-webkit-input-placeholder,.next-form-element.next-select .next-input.next-medium input::-webkit-input-placeholder,.next-form-element.next-time-picker .next-input.next-medium input::-webkit-input-placeholder{font-size:12px}.next-form-element.next-input.next-medium input::-moz-placeholder,.next-form-element.next-select .next-input.next-medium input::-moz-placeholder,.next-form-element.next-time-picker .next-input.next-medium input::-moz-placeholder{font-size:12px}.next-form-element.next-input.next-medium input::-ms-input-placeholder,.next-form-element.next-select .next-input.next-medium input::-ms-input-placeholder,.next-form-element.next-time-picker .next-input.next-medium input::-ms-input-placeholder{font-size:12px}.next-form-element.next-input.next-medium input::placeholder,.next-form-element.next-select .next-input.next-medium input::placeholder,.next-form-element.next-time-picker .next-input.next-medium input::placeholder{font-size:12px}.next-form-element.next-input.next-medium .next-input-text-field,.next-form-element.next-select .next-input.next-medium .next-input-text-field,.next-form-element.next-time-picker .next-input.next-medium .next-input-text-field{padding:0 8px;font-size:12px;height:26px;line-height:26px}.next-form-element.next-input.next-medium .next-icon:before,.next-form-element.next-select .next-input.next-medium .next-icon:before,.next-form-element.next-time-picker .next-input.next-medium .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-form-element.next-input.next-medium input,.next-form-element.next-select .next-input.next-medium input,.next-form-element.next-time-picker .next-input.next-medium input{border-radius:3px}.next-form-element.next-input.next-medium .next-input-control,.next-form-element.next-select .next-input.next-medium .next-input-control,.next-form-element.next-time-picker .next-input.next-medium .next-input-control{border-radius:0 3px 3px 0}.next-form-element.next-input.next-large,.next-form-element.next-select .next-input.next-large,.next-form-element.next-time-picker .next-input.next-large{height:40px;border-radius:3px}.next-form-element.next-input.next-large .next-input-label,.next-form-element.next-select .next-input.next-large .next-input-label,.next-form-element.next-time-picker .next-input.next-large .next-input-label{padding-left:12px;font-size:16px}.next-form-element.next-input.next-large .next-input-inner,.next-form-element.next-select .next-input.next-large .next-input-inner,.next-form-element.next-time-picker .next-input.next-large .next-input-inner{font-size:16px}.next-form-element.next-input.next-large .next-input-control,.next-form-element.next-select .next-input.next-large .next-input-control,.next-form-element.next-time-picker .next-input.next-large .next-input-control{padding-right:8px}.next-form-element.next-input.next-large input,.next-form-element.next-select .next-input.next-large input,.next-form-element.next-time-picker .next-input.next-large input{height:38px;line-height:38px \0;padding:0 12px;font-size:16px}.next-form-element.next-input.next-large input::-webkit-input-placeholder,.next-form-element.next-select .next-input.next-large input::-webkit-input-placeholder,.next-form-element.next-time-picker .next-input.next-large input::-webkit-input-placeholder{font-size:16px}.next-form-element.next-input.next-large input::-moz-placeholder,.next-form-element.next-select .next-input.next-large input::-moz-placeholder,.next-form-element.next-time-picker .next-input.next-large input::-moz-placeholder{font-size:16px}.next-form-element.next-input.next-large input::-ms-input-placeholder,.next-form-element.next-select .next-input.next-large input::-ms-input-placeholder,.next-form-element.next-time-picker .next-input.next-large input::-ms-input-placeholder{font-size:16px}.next-form-element.next-input.next-large input::placeholder,.next-form-element.next-select .next-input.next-large input::placeholder,.next-form-element.next-time-picker .next-input.next-large input::placeholder{font-size:16px}.next-form-element.next-input.next-large .next-input-text-field,.next-form-element.next-select .next-input.next-large .next-input-text-field,.next-form-element.next-time-picker .next-input.next-large .next-input-text-field{padding:0 12px;font-size:16px;height:38px;line-height:38px}.next-form-element.next-input.next-large .next-icon:before,.next-form-element.next-select .next-input.next-large .next-icon:before,.next-form-element.next-time-picker .next-input.next-large .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-form-element.next-input.next-large input,.next-form-element.next-select .next-input.next-large input,.next-form-element.next-time-picker .next-input.next-large input{border-radius:3px}.next-form-element.next-input.next-large .next-input-control,.next-form-element.next-select .next-input.next-large .next-input-control,.next-form-element.next-time-picker .next-input.next-large .next-input-control{border-radius:0 3px 3px 0}.next-form-element.next-input .next-select-values input,.next-form-element.next-select .next-input .next-select-values input,.next-form-element.next-time-picker .next-input .next-select-values input{padding-left:0;padding-right:0} \ No newline at end of file diff --git a/demos/form-element/deps.json b/demos/form-element/deps.json new file mode 100644 index 0000000000..76ab594133 --- /dev/null +++ b/demos/form-element/deps.json @@ -0,0 +1 @@ +["demo-helper","input","select","time-picker"] \ No newline at end of file diff --git a/demos/form-element/index.html b/demos/form-element/index.html new file mode 100644 index 0000000000..8ff1a35b80 --- /dev/null +++ b/demos/form-element/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/form/build/index.css b/demos/form/build/index.css new file mode 100644 index 0000000000..eeed9472c5 --- /dev/null +++ b/demos/form/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-overlay-wrapper .next-overlay-inner{z-index:1001}.next-overlay-wrapper .next-overlay-backdrop{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;background:#000;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0}.next-overlay-wrapper.opened .next-overlay-backdrop{opacity:.2}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-btn,.next-btn *,.next-btn :after,.next-btn :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-btn::-moz-focus-inner{border:0;padding:0}.next-btn,.next-btn:active,.next-btn:focus,.next-btn:hover{outline:0}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-btn{position:relative;display:inline-block;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;text-align:center;text-transform:none;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;cursor:pointer}.next-btn:after{text-align:center;position:absolute;opacity:0;visibility:hidden;-webkit-transition:opacity .5s ease;transition:opacity .5s ease}.next-btn .next-icon.next-xs:before{vertical-align:baseline}.next-btn.hover,.next-btn:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn.next-small{border-radius:3px;padding:0 8px;height:20px;line-height:18px;font-size:12px;border-width:1px}.next-btn.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-small>.next-btn-icon.next-icon-alone:before,.next-btn.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small.next-btn-loading{padding-left:24px}.next-btn.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:8px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-small.next-btn-loading>.next-icon{display:none}.next-btn.next-medium{border-radius:3px;padding:0 12px;height:28px;line-height:26px;font-size:12px;border-width:1px}.next-btn.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium.next-btn-loading{padding-left:28px}.next-btn.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:12px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-medium.next-btn-loading>.next-icon{display:none}.next-btn.next-large{border-radius:3px;padding:0 16px;height:40px;line-height:38px;font-size:16px;border-width:1px}.next-btn.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-large>.next-btn-icon.next-icon-alone:before,.next-btn.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large.next-btn-loading{padding-left:36px}.next-btn.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:16px;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn.next-large.next-btn-loading>.next-icon{display:none}.next-btn.next-btn-normal{border-style:solid;background-color:#fff;border-color:#c4c6cf}.next-btn.next-btn-normal,.next-btn.next-btn-normal.visited,.next-btn.next-btn-normal:link,.next-btn.next-btn-normal:visited{color:#333}.next-btn.next-btn-normal.active,.next-btn.next-btn-normal.hover,.next-btn.next-btn-normal:active,.next-btn.next-btn-normal:focus,.next-btn.next-btn-normal:hover{color:#333;background-color:#f2f3f7;border-color:#a0a2ad;text-decoration:none}.next-btn.next-btn-primary{border-style:solid;background-color:#5584ff;border-color:transparent}.next-btn.next-btn-primary,.next-btn.next-btn-primary.visited,.next-btn.next-btn-primary:link,.next-btn.next-btn-primary:visited{color:#fff}.next-btn.next-btn-primary.active,.next-btn.next-btn-primary.hover,.next-btn.next-btn-primary:active,.next-btn.next-btn-primary:focus,.next-btn.next-btn-primary:hover{color:#fff;background-color:#3e71f7;border-color:transparent;text-decoration:none}.next-btn.next-btn-secondary{border-style:solid;background-color:#fff;border-color:#5584ff}.next-btn.next-btn-secondary,.next-btn.next-btn-secondary.visited,.next-btn.next-btn-secondary:link,.next-btn.next-btn-secondary:visited{color:#5584ff}.next-btn.next-btn-secondary.active,.next-btn.next-btn-secondary.hover,.next-btn.next-btn-secondary:active,.next-btn.next-btn-secondary:focus,.next-btn.next-btn-secondary:hover{color:#fff;background-color:#3e71f7;border-color:#3e71f7;text-decoration:none}.next-btn.disabled,.next-btn[disabled]{cursor:not-allowed;background-color:#f7f8fa;border-color:#e6e7eb}.next-btn.disabled,.next-btn.disabled.visited,.next-btn.disabled:link,.next-btn.disabled:visited,.next-btn[disabled],.next-btn[disabled].visited,.next-btn[disabled]:link,.next-btn[disabled]:visited{color:#ccc}.next-btn.disabled.active,.next-btn.disabled.hover,.next-btn.disabled:active,.next-btn.disabled:focus,.next-btn.disabled:hover,.next-btn[disabled].active,.next-btn[disabled].hover,.next-btn[disabled]:active,.next-btn[disabled]:focus,.next-btn[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-warning{border-style:solid}.next-btn-warning.next-btn-primary{background-color:#ff3000;border-color:#ff3000}.next-btn-warning.next-btn-primary,.next-btn-warning.next-btn-primary.visited,.next-btn-warning.next-btn-primary:link,.next-btn-warning.next-btn-primary:visited{color:#fff}.next-btn-warning.next-btn-primary.active,.next-btn-warning.next-btn-primary.hover,.next-btn-warning.next-btn-primary:active,.next-btn-warning.next-btn-primary:focus,.next-btn-warning.next-btn-primary:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary[disabled]{background-color:#f7f8fa;border-color:#dcdee3}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary.disabled.visited,.next-btn-warning.next-btn-primary.disabled:link,.next-btn-warning.next-btn-primary.disabled:visited,.next-btn-warning.next-btn-primary[disabled],.next-btn-warning.next-btn-primary[disabled].visited,.next-btn-warning.next-btn-primary[disabled]:link,.next-btn-warning.next-btn-primary[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-primary.disabled.active,.next-btn-warning.next-btn-primary.disabled.hover,.next-btn-warning.next-btn-primary.disabled:active,.next-btn-warning.next-btn-primary.disabled:focus,.next-btn-warning.next-btn-primary.disabled:hover,.next-btn-warning.next-btn-primary[disabled].active,.next-btn-warning.next-btn-primary[disabled].hover,.next-btn-warning.next-btn-primary[disabled]:active,.next-btn-warning.next-btn-primary[disabled]:focus,.next-btn-warning.next-btn-primary[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#dcdee3;text-decoration:none}.next-btn-warning.next-btn-normal{background-color:#fff;border-color:#ff3000}.next-btn-warning.next-btn-normal,.next-btn-warning.next-btn-normal.visited,.next-btn-warning.next-btn-normal:link,.next-btn-warning.next-btn-normal:visited{color:#ff3000}.next-btn-warning.next-btn-normal.active,.next-btn-warning.next-btn-normal.hover,.next-btn-warning.next-btn-normal:active,.next-btn-warning.next-btn-normal:focus,.next-btn-warning.next-btn-normal:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal[disabled]{background-color:#f7f8fa;border-color:#e6e7eb}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal.disabled.visited,.next-btn-warning.next-btn-normal.disabled:link,.next-btn-warning.next-btn-normal.disabled:visited,.next-btn-warning.next-btn-normal[disabled],.next-btn-warning.next-btn-normal[disabled].visited,.next-btn-warning.next-btn-normal[disabled]:link,.next-btn-warning.next-btn-normal[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-normal.disabled.active,.next-btn-warning.next-btn-normal.disabled.hover,.next-btn-warning.next-btn-normal.disabled:active,.next-btn-warning.next-btn-normal.disabled:focus,.next-btn-warning.next-btn-normal.disabled:hover,.next-btn-warning.next-btn-normal[disabled].active,.next-btn-warning.next-btn-normal[disabled].hover,.next-btn-warning.next-btn-normal[disabled]:active,.next-btn-warning.next-btn-normal[disabled]:focus,.next-btn-warning.next-btn-normal[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-text{border-radius:0}.next-btn-text,.next-btn-text.hover,.next-btn-text:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn-text.next-btn-primary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-primary,.next-btn-text.next-btn-primary.visited,.next-btn-text.next-btn-primary:link,.next-btn-text.next-btn-primary:visited{color:#5584ff}.next-btn-text.next-btn-primary.active,.next-btn-text.next-btn-primary.hover,.next-btn-text.next-btn-primary:active,.next-btn-text.next-btn-primary:focus,.next-btn-text.next-btn-primary:hover{color:#3e71f7;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-secondary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-secondary,.next-btn-text.next-btn-secondary.visited,.next-btn-text.next-btn-secondary:link,.next-btn-text.next-btn-secondary:visited{color:#666}.next-btn-text.next-btn-secondary.active,.next-btn-text.next-btn-secondary.hover,.next-btn-text.next-btn-secondary:active,.next-btn-text.next-btn-secondary:focus,.next-btn-text.next-btn-secondary:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-normal{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-normal,.next-btn-text.next-btn-normal.visited,.next-btn-text.next-btn-normal:link,.next-btn-text.next-btn-normal:visited{color:#333}.next-btn-text.next-btn-normal.active,.next-btn-text.next-btn-normal.hover,.next-btn-text.next-btn-normal:active,.next-btn-text.next-btn-normal:focus,.next-btn-text.next-btn-normal:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-large{border-radius:0;padding:0;height:24px;line-height:24px;font-size:14px;border-width:0}.next-btn-text.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-large>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large.next-btn-loading{padding-left:20px}.next-btn-text.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:0;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn-text.next-large.next-btn-loading>.next-icon{display:none}.next-btn-text.next-medium{border-radius:0;padding:0;height:20px;line-height:20px;font-size:12px;border-width:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium.next-btn-loading{padding-left:16px}.next-btn-text.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-medium.next-btn-loading>.next-icon{display:none}.next-btn-text.next-small{border-radius:0;padding:0;height:16px;line-height:16px;font-size:12px;border-width:0}.next-btn-text.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-small>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small.next-btn-loading{padding-left:16px}.next-btn-text.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-small.next-btn-loading>.next-icon{display:none}.next-btn-text.disabled,.next-btn-text[disabled]{background-color:transparent;border-color:transparent}.next-btn-text.disabled,.next-btn-text.disabled.visited,.next-btn-text.disabled:link,.next-btn-text.disabled:visited,.next-btn-text[disabled],.next-btn-text[disabled].visited,.next-btn-text[disabled]:link,.next-btn-text[disabled]:visited{color:#ccc}.next-btn-text.disabled.active,.next-btn-text.disabled.hover,.next-btn-text.disabled:active,.next-btn-text.disabled:focus,.next-btn-text.disabled:hover,.next-btn-text[disabled].active,.next-btn-text[disabled].hover,.next-btn-text[disabled]:active,.next-btn-text[disabled]:focus,.next-btn-text[disabled]:hover{color:#ccc;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-loading{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-loading,.next-btn-text.next-btn-loading.visited,.next-btn-text.next-btn-loading:link,.next-btn-text.next-btn-loading:visited{color:#333}.next-btn-text.next-btn-loading.active,.next-btn-text.next-btn-loading.hover,.next-btn-text.next-btn-loading:active,.next-btn-text.next-btn-loading:focus,.next-btn-text.next-btn-loading:hover{color:#333;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-loading{pointer-events:none}.next-btn-loading:after{font-family:NextIcon;content:"\E646";opacity:1;visibility:visible;-webkit-animation:loadingCircle 2s infinite linear;animation:loadingCircle 2s infinite linear}.next-btn-ghost{-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-btn-ghost.next-btn-dark{background-color:transparent;border-color:#fff}.next-btn-ghost.next-btn-dark,.next-btn-ghost.next-btn-dark.visited,.next-btn-ghost.next-btn-dark:link,.next-btn-ghost.next-btn-dark:visited{color:#fff}.next-btn-ghost.next-btn-dark.active,.next-btn-ghost.next-btn-dark.hover,.next-btn-ghost.next-btn-dark:active,.next-btn-ghost.next-btn-dark:focus,.next-btn-ghost.next-btn-dark:hover{color:#fff;background-color:hsla(0,0%,100%,.8);border-color:#fff;text-decoration:none}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark[disabled]{background-color:transparent;border-color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark.disabled.visited,.next-btn-ghost.next-btn-dark.disabled:link,.next-btn-ghost.next-btn-dark.disabled:visited,.next-btn-ghost.next-btn-dark[disabled],.next-btn-ghost.next-btn-dark[disabled].visited,.next-btn-ghost.next-btn-dark[disabled]:link,.next-btn-ghost.next-btn-dark[disabled]:visited{color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled.active,.next-btn-ghost.next-btn-dark.disabled.hover,.next-btn-ghost.next-btn-dark.disabled:active,.next-btn-ghost.next-btn-dark.disabled:focus,.next-btn-ghost.next-btn-dark.disabled:hover,.next-btn-ghost.next-btn-dark[disabled].active,.next-btn-ghost.next-btn-dark[disabled].hover,.next-btn-ghost.next-btn-dark[disabled]:active,.next-btn-ghost.next-btn-dark[disabled]:focus,.next-btn-ghost.next-btn-dark[disabled]:hover{color:hsla(0,0%,100%,.4);background-color:transparent;border-color:hsla(0,0%,100%,.4);text-decoration:none}.next-btn-ghost.next-btn-light{background-color:transparent;border-color:#333}.next-btn-ghost.next-btn-light,.next-btn-ghost.next-btn-light.visited,.next-btn-ghost.next-btn-light:link,.next-btn-ghost.next-btn-light:visited{color:#333}.next-btn-ghost.next-btn-light.active,.next-btn-ghost.next-btn-light.hover,.next-btn-ghost.next-btn-light:active,.next-btn-ghost.next-btn-light:focus,.next-btn-ghost.next-btn-light:hover{color:#999;background-color:rgba(0,0,0,.92);border-color:#333;text-decoration:none}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light[disabled]{background-color:transparent;border-color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light.disabled.visited,.next-btn-ghost.next-btn-light.disabled:link,.next-btn-ghost.next-btn-light.disabled:visited,.next-btn-ghost.next-btn-light[disabled],.next-btn-ghost.next-btn-light[disabled].visited,.next-btn-ghost.next-btn-light[disabled]:link,.next-btn-ghost.next-btn-light[disabled]:visited{color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled.active,.next-btn-ghost.next-btn-light.disabled.hover,.next-btn-ghost.next-btn-light.disabled:active,.next-btn-ghost.next-btn-light.disabled:focus,.next-btn-ghost.next-btn-light.disabled:hover,.next-btn-ghost.next-btn-light[disabled].active,.next-btn-ghost.next-btn-light[disabled].hover,.next-btn-ghost.next-btn-light[disabled]:active,.next-btn-ghost.next-btn-light[disabled]:focus,.next-btn-ghost.next-btn-light[disabled]:hover{color:rgba(0,0,0,.1);background-color:transparent;border-color:rgba(0,0,0,.1);text-decoration:none}.next-btn-group{position:relative;display:inline-block;vertical-align:middle}.next-btn-group>.next-btn{position:relative;float:left;-webkit-box-shadow:none;box-shadow:none}.next-btn-group>.next-btn.active,.next-btn-group>.next-btn:active,.next-btn-group>.next-btn:focus,.next-btn-group>.next-btn:hover{z-index:1}.next-btn-group>.next-btn.disabled,.next-btn-group>.next-btn[disabled]{z-index:0}.next-btn-group .next-btn.next-btn{margin:0 0 0 -1px}.next-btn-group .next-btn:not(:first-child):not(:last-child){border-radius:0}.next-btn-group>.next-btn:first-child{margin:0}.next-btn-group>.next-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group>.next-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group>.next-btn-primary:not(:first-child){border-left-color:hsla(0,0%,100%,.2)}.next-btn-group>.next-btn-primary:not(:first-child):hover{border-left-color:transparent}.next-btn-group>.next-btn-primary:not(:first-child).disabled,.next-btn-group>.next-btn-primary:not(:first-child)[disabled]{border-left-color:#e6e7eb}.next-btn-group[dir=rtl]>.next-btn{float:right}.next-btn-group[dir=rtl] .next-btn.next-btn{margin:0 -1px 0 0}.next-btn-group[dir=rtl]>.next-btn:first-child:not(:last-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group[dir=rtl]>.next-btn:last-child:not(:first-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child){border-right-color:hsla(0,0%,100%,.2)}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child):hover{border-right-color:transparent}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child).disabled,.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child)[disabled]{border-right-color:#e6e7eb}.next-btn.next-small[dir=rtl]{border-radius:3px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl].next-btn-loading{padding-left:8px;padding-right:24px}.next-btn.next-small[dir=rtl].next-btn-loading:after{right:8px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-medium[dir=rtl]{border-radius:3px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl].next-btn-loading{padding-left:12px;padding-right:28px}.next-btn.next-medium[dir=rtl].next-btn-loading:after{right:12px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-large[dir=rtl]{border-radius:3px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl].next-btn-loading{padding-left:16px;padding-right:36px}.next-btn.next-large[dir=rtl].next-btn-loading:after{right:16px;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-large{border-radius:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large.next-btn-loading{padding-left:0;padding-right:20px}.next-btn-text[dir=rtl].next-large.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-medium{border-radius:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-medium.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-small{border-radius:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-small.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-radio-button-large[dir=rtl]>label:first-child{margin-left:-1px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.next-radio-button-large[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large[dir=rtl] .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-wrapper[dir=rtl] .next-radio-label{margin-left:0;margin-right:4px}.next-radio-group[dir=rtl] .next-radio-label{margin-right:4px;margin-left:16px}.next-radio-button[dir=rtl]>label .next-radio-label{margin:0}.next-radio-wrapper{outline:0}.next-radio-wrapper .next-radio{display:inline-block;vertical-align:middle;position:relative;line-height:1}.next-radio-wrapper .next-radio,.next-radio-wrapper .next-radio *,.next-radio-wrapper .next-radio :after,.next-radio-wrapper .next-radio :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-radio-wrapper .next-radio input[type=radio]{opacity:0;position:absolute;vertical-align:middle;top:0;left:0;width:16px;height:16px;margin:0}.next-radio-wrapper .next-radio-inner{display:block;width:16px;height:16px;background:#fff;border-radius:50%;border:1px solid #c4c6cf;-webkit-transition:all .36s ease 0s;transition:all .36s ease 0s;-webkit-box-shadow:none;box-shadow:none}.next-radio-wrapper .next-radio-inner:after{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;border-radius:50%;top:50%;margin-top:-2px;left:50%;margin-left:-2px;background:#fff;content:" ";-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86)}.next-radio-wrapper.checked .next-radio-inner{border-color:#5584ff;background:#5584ff}.next-radio-wrapper.checked .next-radio-inner:after{width:4px;height:4px;font-weight:700;background:#fff;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.next-radio-wrapper.checked.hovered .next-radio-inner,.next-radio-wrapper.checked:hover .next-radio-inner{border-color:transparent}.next-radio-wrapper.disabled input[type=radio]{cursor:not-allowed}.next-radio-wrapper.disabled .next-radio-inner{border-color:#e6e7eb;background:#f7f8fa}.next-radio-wrapper.disabled.checked .next-radio-inner,.next-radio-wrapper.disabled .next-radio-inner.hovered,.next-radio-wrapper.disabled .next-radio-inner:hover{border-color:#e6e7eb}.next-radio-wrapper.disabled.checked .next-radio-inner:after{background:#ccc}.next-radio-wrapper:not(.disabled).focused .next-radio-inner,.next-radio-wrapper:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper:not(.disabled):focus .next-radio-inner,.next-radio-wrapper:not(.disabled):hover .next-radio-inner{border-color:#5584ff;background-color:#dee8ff}.next-radio-wrapper.checked.focused .next-radio-inner,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner{border-color:transparent;background:#3e71f7}.next-radio-wrapper.checked.focused .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner:after{background:#fff}.next-radio-button .next-radio,.next-radio-button input[type=radio]{width:0;height:0}.next-radio-button>label{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1;margin:0 0 0 -1px;border:1px solid #c4c6cf;background-color:#fff;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;vertical-align:middle}.next-radio-button>label .next-radio-label{display:block;color:#333;margin:0;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}.next-radio-button>label.hovered,.next-radio-button>label:focus,.next-radio-button>label:hover{z-index:10;border-color:#a0a2ad;background-color:#f2f3f7}.next-radio-button>label.hovered .next-radio-label,.next-radio-button>label:focus .next-radio-label,.next-radio-button>label:hover .next-radio-label{color:#333}.next-radio-button>label.checked{z-index:11;border-color:#5584ff;background-color:#fff}.next-radio-button>label.checked .next-radio-label{color:#5584ff}.next-radio-button>label.disabled{z-index:0;cursor:not-allowed;border-color:#e6e7eb;background-color:#f7f8fa}.next-radio-button>label.disabled .next-radio-label{color:#ccc}.next-radio-button>label.checked.disabled{z-index:0;border-color:#e6e7eb;background-color:#f2f3f7}.next-radio-button>label.checked.disabled .next-radio-label{color:#ccc}.next-radio-button-large>label{padding:0 8px;height:40px;line-height:40px}.next-radio-button-large>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-large .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium>label{padding:0 8px;height:28px;line-height:28px}.next-radio-button-medium>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-medium>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium .next-radio-label{height:26px;line-height:26px;font-size:12px}.next-radio-button-small>label{padding:0 8px;height:20px;line-height:20px}.next-radio-button-small>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small .next-radio-label{height:18px;line-height:18px;font-size:12px}.next-radio-single-input input[type=radio]{opacity:0;position:absolute;top:0;left:0;margin:0}.next-radio-group{display:inline-block}.next-radio-group .next-radio-label{color:#333;margin-right:16px}.next-radio-group.disabled .next-radio-label{color:#ccc}.next-radio-group-ver .next-radio-wrapper{display:block;margin-bottom:8px}.next-radio-label{margin:0;margin-left:4px;font-size:12px;vertical-align:middle;line-height:1}@-moz-document url-prefix(){.next-radio{margin-top:-1px}@supports ((-webkit-animation:calc(0s)) or (animation:calc(0s))){.next-radio{margin-top:-3px}}}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}@-webkit-keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}@keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}.next-tag>.next-tag-body{overflow:hidden;text-overflow:ellipsis}.next-tag-checkable.next-tag-level-secondary{color:#333;border-color:transparent;background-color:transparent}.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):hover{color:#5584ff}.next-tag-closable.next-tag-level-primary,.next-tag-default.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-primary,.disabled.next-tag-default.next-tag-level-primary,[disabled].next-tag-closable.next-tag-level-primary,[disabled].next-tag-default.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.disabled.next-tag-default.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-checkable.next-tag-level-primary,[disabled].next-tag-checkable.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary.checked{color:#fff;border-color:#5584ff;background-color:#5584ff}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover{color:#fff;border-color:#3e71f7;background-color:#3e71f7}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked>.next-tag-close-btn{color:#fff}.next-tag-default.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-default.next-tag-level-normal,[disabled].next-tag-default.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.disabled.next-tag-default.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-closable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-normal,[disabled].next-tag-closable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:transparent}.disabled.next-tag-closable.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-normal.checked,.next-tag-checkable.next-tag-level-secondary.checked{color:#5584ff;border-color:#5584ff;background-color:transparent}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover{color:#3e71f7;border-color:#3e71f7;background-color:transparent}.next-tag-checkable.next-tag-level-secondary.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-secondary.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-secondary.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-secondary.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-secondary.checked:after{color:#fff}.next-tag-checkable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#c4c6cf;background-color:transparent}.disabled.next-tag-checkable.next-tag-level-normal,[disabled].next-tag-checkable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-normal.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-normal.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-normal.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-normal.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-normal.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-normal.checked:after{color:#fff}.next-tag-closable.next-tag-level-normal:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#c4c6cf;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-closable.next-tag-level-normal:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E626";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:before{background-color:#a0a2ad}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-closable.next-tag-level-normal:disabled:before,[disabled].next-tag-closable.next-tag-level-normal:before{background-color:#e6e7eb}.next-tag-closable.next-tag-level-normal:disabled:after,[disabled].next-tag-closable.next-tag-level-normal:after{color:#fff}.next-tag-group .next-tag-large,.next-tag-group .next-tag-medium{margin-right:8px;margin-bottom:8px}.next-tag-group .next-tag-small{margin-right:4px;margin-bottom:4px}.next-tag{display:inline-block;max-width:100%;vertical-align:middle;border-width:1px;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid;overflow:hidden;white-space:nowrap;-webkit-transition:all .2s cubic-bezier(.23,1,.32,1);transition:all .2s cubic-bezier(.23,1,.32,1);font-size:0;outline:0}.next-tag,.next-tag *,.next-tag :after,.next-tag :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tag>.next-tag-body{position:relative;display:inline-block;height:100%;text-align:center;vertical-align:middle;max-width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.next-tag>.next-tag-body>a{text-decoration:none;color:inherit}.next-tag>.next-tag-body>a:before{content:" ";position:absolute;display:block;top:0;left:0;right:0;bottom:0}.next-tag>.next-tag-body .next-icon{line-height:1;vertical-align:middle}.next-tag>.next-tag-body .next-icon:before{font-size:inherit}.next-tag.next-tag-body-pointer{cursor:pointer}.next-tag.disabled,.next-tag[disabled]{cursor:not-allowed;pointer-events:none}.next-tag-large{height:40px;padding:0;line-height:38px;font-size:0}.next-tag-large>.next-tag-body{font-size:16px;padding:0 16px;min-width:48px}.next-tag-large.next-tag-closable>.next-tag-body{padding:0 0 0 16px}.next-tag-large[dir=rtl].next-tag-closable>.next-tag-body{padding:0 16px 0 0}.next-tag-large>.next-tag-close-btn{margin-left:12px;padding-right:16px}.next-tag-large>.next-tag-close-btn .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tag-large[dir=rtl]>.next-tag-close-btn{margin-right:12px;margin-left:0;padding-right:0;padding-left:16px}.next-tag-medium{height:28px;padding:0;line-height:26px;font-size:0}.next-tag-medium>.next-tag-body{font-size:14px;padding:0 12px;min-width:40px}.next-tag-medium.next-tag-closable>.next-tag-body{padding:0 0 0 12px}.next-tag-medium[dir=rtl].next-tag-closable>.next-tag-body{padding:0 12px 0 0}.next-tag-medium>.next-tag-close-btn{margin-left:8px;padding-right:12px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-medium>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-medium[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:12px}.next-tag-small{height:20px;padding:0;line-height:18px;font-size:0}.next-tag-small>.next-tag-body{font-size:12px;padding:0 8px;min-width:28px}.next-tag-small.next-tag-closable>.next-tag-body{padding:0 0 0 8px}.next-tag-small[dir=rtl].next-tag-closable>.next-tag-body{padding:0 8px 0 0}.next-tag-small>.next-tag-close-btn{margin-left:8px;padding-right:8px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-small>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-small[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:8px}.next-tag-default{cursor:default}.next-tag-closable{position:relative}.next-tag-closable.next-tag-large>.next-tag-body{max-width:calc(100% - 40px)}.next-tag-closable.next-tag-medium>.next-tag-body{max-width:calc(100% - 28px)}.next-tag-closable.next-tag-small>.next-tag-body{max-width:calc(100% - 20px)}.next-tag-closable>.next-tag-close-btn{display:inline-block;vertical-align:middle;height:100%;text-align:center;cursor:pointer}.next-tag-closable.next-tag-level-normal.disabled,.next-tag-closable.next-tag-level-normal[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable{cursor:pointer;position:relative;border-radius:3px}.next-tag-checkable.checked:before{-webkit-animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.checked:after{-webkit-animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86);animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):before{right:-10px;bottom:-10px;width:20px;height:20px}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):after{font-size:8px;line-height:8px;right:0;bottom:0}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):before{right:-14px;bottom:-14px;width:28px;height:28px}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):after{font-size:12px;line-height:12px;right:0;bottom:0}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):before{right:-18px;bottom:-18px;width:36px;height:36px}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):after{font-size:16px;line-height:16px;right:0;bottom:0}.next-tag-checkable.next-tag-level-primary.disabled,.next-tag-checkable.next-tag-level-primary[disabled]{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-secondary.disabled,.next-tag-checkable.next-tag-level-secondary[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-zoom-appear,.next-tag-zoom-enter{-webkit-animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-tag-zoom-leave{-webkit-animation:zoomOut .3s ease-in;animation:zoomOut .3s ease-in;-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-checkbox-wrapper[dir=rtl]{margin-right:8px;margin-left:0}.next-checkbox-wrapper[dir=rtl]:first-child{margin-right:0}.next-checkbox-wrapper[dir=rtl]>.next-checkbox-label{margin-right:4px;margin-left:0}.next-checkbox-wrapper,.next-checkbox-wrapper *,.next-checkbox-wrapper :after,.next-checkbox-wrapper :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-checkbox-wrapper .next-checkbox{display:inline-block;position:relative;line-height:1;vertical-align:middle}.next-checkbox-wrapper input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:16px;height:16px;margin:0}.next-checkbox-wrapper .next-checkbox-inner{display:block;width:16px;height:16px;background:#fff;border-radius:3px;border:1px solid #c4c6cf;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;text-align:left;-webkit-box-shadow:none;box-shadow:none}.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;top:0;opacity:0;line-height:16px;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);color:#fff;left:4px;margin-left:0}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{vertical-align:top;margin-top:0}.next-checkbox-wrapper.checked .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.checked .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);margin-left:0}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.indeterminate .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.indeterminate .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1);margin-left:0}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.disabled input[type=checkbox]{cursor:not-allowed}.next-checkbox-wrapper.disabled .next-checkbox-inner{border-color:#e6e7eb;background:#f7f8fa}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover{border-color:#e6e7eb}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner>.next-icon{color:#ccc;opacity:1}.next-checkbox-wrapper.focused .next-checkbox-inner,.next-checkbox-wrapper.hovered .next-checkbox-inner,.next-checkbox-wrapper:not(.disabled):hover .next-checkbox-inner{border-color:#5584ff;background-color:#dee8ff}.next-checkbox-wrapper.checked.focused .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner{border-color:transparent;background-color:#3e71f7}.next-checkbox-wrapper.checked.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner>.next-icon{color:#fff;opacity:1}.next-checkbox-group .next-checkbox-wrapper{margin-left:8px}.next-checkbox-group .next-checkbox-wrapper:first-child{margin-left:0}.next-checkbox-group-ver .next-checkbox-wrapper{display:block;margin-left:0;margin-right:0;margin-bottom:8px}.next-checkbox-label{font-size:12px;vertical-align:middle;margin:0;margin-left:4px;line-height:1}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-menu[dir=rtl] .next-menu-item-helper{float:left}.next-menu[dir=rtl] .next-menu-item .next-checkbox,.next-menu[dir=rtl] .next-menu-item .next-radio{margin-left:4px;margin-right:0}.next-menu[dir=rtl] .next-menu-hoz-right{float:left}.next-menu[dir=rtl] .next-menu-hoz-icon-arrow.next-icon{left:6px;right:auto}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon{margin-left:0;margin-right:-16px}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon.next-menu-icon-right{right:auto;left:4px}.next-menu[dir=rtl] .next-menu-icon-arrow.next-icon{left:10px;right:auto}.next-menu{position:relative;min-width:100px;padding:8px 0;margin:0;list-style:none;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;background:#fff;line-height:32px;font-size:12px}.next-menu,.next-menu *,.next-menu :after,.next-menu :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-menu:focus,.next-menu :focus{outline:0}.next-menu-embeddable,.next-menu-embeddable .next-menu-item.next-disabled,.next-menu-embeddable .next-menu-item.next-disabled .next-menu-item-text>a{background:initial;border:none}.next-menu-embeddable .next-menu-item-inner{height:100%}.next-menu-content{position:relative}.next-menu-content,.next-menu-sub-menu{padding:0;margin:0;list-style:none}.next-menu-sub-menu.next-expand-enter{overflow:hidden}.next-menu-sub-menu.next-expand-enter-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-sub-menu.next-expand-leave{overflow:hidden}.next-menu-sub-menu.next-expand-leave-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-item{position:relative;padding:0 20px;-webkit-transition:background .2s ease;transition:background .2s ease;color:#333;cursor:pointer}.next-menu-item-helper{float:right;color:#999;font-style:normal;font-size:12px}.next-menu-item .next-checkbox,.next-menu-item .next-radio{margin-right:4px}.next-menu-item.next-selected{color:#333;background-color:#fff}.next-menu-item.next-selected .next-menu-icon-arrow{color:#666}.next-menu-item.next-selected .next-menu-icon-selected{color:#5584ff}.next-menu-item.next-disabled,.next-menu-item.next-disabled .next-menu-item-text>a{color:#ccc;background-color:#fff;cursor:not-allowed}.next-menu-item.next-disabled .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-icon-selected,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-selected{color:#ccc}.next-menu-item:not(.next-disabled).next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover,.next-menu-item:not(.next-disabled).next-selected:focus,.next-menu-item:not(.next-disabled).next-selected:focus:hover,.next-menu-item:not(.next-disabled).next-selected:hover,.next-menu-item:not(.next-disabled):hover{color:#333;background-color:#f2f3f7}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled):hover .next-menu-icon-arrow{color:#333}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled):hover .next-menu-icon-selected{color:#5584ff}.next-menu-item-inner{height:32px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.next-menu-item-text{vertical-align:middle}.next-menu-item-text>a{display:inline-block;text-decoration:none;color:#333}.next-menu-item-text>a:before{position:absolute;background-color:transparent;top:0;left:0;bottom:0;right:0;content:""}.next-menu.next-hoz{padding:0}.next-menu.next-hoz .next-menu-content>.next-menu-item,.next-menu.next-hoz>.next-menu-item{display:inline-block;vertical-align:top}.next-menu.next-hoz .next-menu-content,.next-menu.next-hoz .next-menu-footer,.next-menu.next-hoz .next-menu-header{display:inline-block}.next-menu-hoz-right{float:right}.next-menu-group-label{padding:0 12px;color:#999}.next-menu-divider{margin:8px 12px;border-bottom:1px solid #e6e7eb}.next-menu .next-menu-icon-selected.next-icon{position:absolute;top:0;margin-left:-16px}.next-menu .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-icon-selected.next-icon.next-menu-icon-right{right:4px}.next-menu .next-menu-icon-arrow.next-icon{position:absolute;top:0;right:10px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-icon-arrow.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow.next-icon:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-icon-arrow-down.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:scale(.5) rotate(180deg);-ms-transform:scale(.5) rotate(180deg);transform:scale(.5) rotate(180deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-down.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.next-menu .next-menu-icon-arrow-right.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:scale(.5) rotate(-90deg);-ms-transform:scale(.5) rotate(-90deg);transform:scale(.5) rotate(-90deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-right.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-hoz-icon-arrow.next-icon{position:absolute;top:0;right:6px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-hoz-icon-arrow.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-hoz-icon-arrow.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-hoz-icon-arrow.next-open:before{width:12px;font-size:12px;line-height:inherit}.next-menu.next-context{line-height:24px}.next-menu.next-context .next-menu-item-inner{height:24px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-input{vertical-align:middle;display:inline-table;border-collapse:separate;font-size:0;line-height:1;width:200px;border-spacing:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;border:1px solid #c4c6cf;background-color:#fff}.next-input,.next-input *,.next-input :after,.next-input :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input input{height:100%}.next-input input[type=reset],.next-input input[type=submit]{-webkit-appearance:button;cursor:pointer}.next-input input::-moz-focus-inner{border:0;padding:0}.next-input input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset}.next-input textarea{resize:none}.next-input input,.next-input textarea{width:100%;border:none;outline:none;padding:0;margin:0;font-weight:400;vertical-align:middle;background-color:transparent;color:#333}.next-input input::-ms-clear,.next-input textarea::-ms-clear{display:none}.next-input.next-input-textarea{border-radius:3px;font-size:0}.next-input.next-input-textarea textarea{color:#333;padding:4px 8px;font-size:12px;border-radius:3px}.next-input.next-input-textarea .next-input-control{display:block;width:auto;border-radius:3px}.next-input.next-input-textarea .next-input-len{padding:0 8px 4px;display:block;text-align:right;width:auto}.next-input.next-small{height:20px;border-radius:3px}.next-input.next-small .next-input-label{padding-left:8px;font-size:12px}.next-input.next-small .next-input-inner{font-size:12px}.next-input.next-small .next-input-control{padding-right:4px}.next-input.next-small input{height:18px;line-height:18px \0;padding:0 4px;font-size:12px}.next-input.next-small input::-webkit-input-placeholder{font-size:12px}.next-input.next-small input::-moz-placeholder{font-size:12px}.next-input.next-small input::-ms-input-placeholder{font-size:12px}.next-input.next-small input::placeholder{font-size:12px}.next-input.next-small .next-input-text-field{padding:0 4px;font-size:12px;height:18px;line-height:18px}.next-input.next-small .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-small input{border-radius:3px}.next-input.next-small .next-input-control{border-radius:0 3px 3px 0}.next-input.next-medium{height:28px;border-radius:3px}.next-input.next-medium .next-input-label{padding-left:8px;font-size:12px}.next-input.next-medium .next-input-inner{font-size:12px}.next-input.next-medium .next-input-control{padding-right:8px}.next-input.next-medium input{height:26px;line-height:26px \0;padding:0 8px;font-size:12px}.next-input.next-medium input::-webkit-input-placeholder{font-size:12px}.next-input.next-medium input::-moz-placeholder{font-size:12px}.next-input.next-medium input::-ms-input-placeholder{font-size:12px}.next-input.next-medium input::placeholder{font-size:12px}.next-input.next-medium .next-input-text-field{padding:0 8px;font-size:12px;height:26px;line-height:26px}.next-input.next-medium .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-medium input{border-radius:3px}.next-input.next-medium .next-input-control{border-radius:0 3px 3px 0}.next-input.next-large{height:40px;border-radius:3px}.next-input.next-large .next-input-label{padding-left:12px;font-size:16px}.next-input.next-large .next-input-inner{font-size:16px}.next-input.next-large .next-input-control{padding-right:8px}.next-input.next-large input{height:38px;line-height:38px \0;padding:0 12px;font-size:16px}.next-input.next-large input::-webkit-input-placeholder{font-size:16px}.next-input.next-large input::-moz-placeholder{font-size:16px}.next-input.next-large input::-ms-input-placeholder{font-size:16px}.next-input.next-large input::placeholder{font-size:16px}.next-input.next-large .next-input-text-field{padding:0 12px;font-size:16px;height:38px;line-height:38px}.next-input.next-large .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-input.next-large input{border-radius:3px}.next-input.next-large .next-input-control{border-radius:0 3px 3px 0}.next-input-hint-wrap{color:#999;position:relative}.next-input-hint-wrap .next-input-clear{opacity:0;z-index:1;position:absolute}.next-input-hint-wrap .next-input-hint{opacity:1}.next-input .next-icon-delete-filling:hover{cursor:pointer;color:#666}.next-input.next-focus,.next-input:hover{border-color:#a0a2ad;background-color:#fff}.next-input.next-focus .next-input-clear,.next-input:hover .next-input-clear{opacity:1}.next-input.next-focus .next-input-clear+.next-input-hint,.next-input:hover .next-input-clear+.next-input-hint{opacity:0}.next-input .next-input-clear:focus{opacity:1}.next-input .next-input-clear:focus+.next-input-hint{opacity:0}.next-input.next-focus{border-color:#5584ff;background-color:#fff}.next-input.next-error,.next-input.next-error.next-focus,.next-input.next-error:hover{border-color:#ff3000}.next-input.next-hidden{display:none}.next-input.next-noborder{border:none}.next-input-control .next-input-len{font-size:12px;line-height:12px;color:#999;display:table-cell;width:1px;vertical-align:bottom}.next-input-control .next-input-len.next-error{color:#ff3000}.next-input-control>*{display:table-cell;width:1%;top:0}.next-input-control>:not(:last-child){padding-right:4px}.next-input-control .next-icon{-webkit-transition:all .3s ease-out;transition:all .3s ease-out;color:#999}.next-input-control .next-icon-success-filling{color:#46bc15}.next-input-control .next-icon-loading{color:#4494f9}.next-input-label{color:#666}.next-input input::-moz-placeholder,.next-input textarea::-moz-placeholder{color:#999;opacity:1}.next-input input:-ms-input-placeholder,.next-input textarea:-ms-input-placeholder{color:#999}.next-input input::-webkit-input-placeholder,.next-input textarea::-webkit-input-placeholder{color:#999}.next-input.next-disabled{color:#ccc;cursor:not-allowed}.next-input.next-disabled,.next-input.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled input::-moz-placeholder,.next-input.next-disabled textarea::-moz-placeholder{color:#ccc;opacity:1}.next-input.next-disabled input:-ms-input-placeholder,.next-input.next-disabled textarea:-ms-input-placeholder{color:#ccc}.next-input.next-disabled input::-webkit-input-placeholder,.next-input.next-disabled textarea::-webkit-input-placeholder{color:#ccc}.next-input.next-disabled .next-input-label,.next-input.next-disabled .next-input-len{color:#ccc}.next-input.next-disabled input,.next-input.next-disabled textarea{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa;cursor:not-allowed}.next-input.next-disabled input:hover,.next-input.next-disabled textarea:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled .next-input-hint-wrap{color:#ccc}.next-input.next-disabled .next-input-hint-wrap .next-input-clear{opacity:0}.next-input.next-disabled .next-input-hint-wrap .next-input-hint{opacity:1}.next-input.next-disabled .next-input-hint-wrap .next-icon-delete-filling:hover{cursor:not-allowed;color:#ccc}.next-input.next-disabled .next-icon{color:#ccc}.next-input-control,.next-input-inner,.next-input-label{display:table-cell;width:1px;vertical-align:middle;line-height:1;background-color:transparent;white-space:nowrap}.next-input-group{display:inline-table;border-collapse:separate;border-spacing:0;line-height:0;width:100%}.next-input-group,.next-input-group *,.next-input-group :after,.next-input-group :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input-group-auto-width{width:100%;border-radius:0!important}.next-input-group>.next-input:first-child.next-large,.next-input-group>.next-input:first-child.next-medium,.next-input-group>.next-input:first-child.next-small{border-top-left-radius:3px!important;border-bottom-left-radius:3px!important}.next-input-group>.next-input:last-child.next-large,.next-input-group>.next-input:last-child.next-medium,.next-input-group>.next-input:last-child.next-small{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.next-input-group-addon{width:1px;display:table-cell;vertical-align:middle;white-space:nowrap}.next-input-group-addon:first-child,.next-input-group-addon:first-child>*{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group-addon:last-child,.next-input-group-addon:last-child>*{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group-text{color:#999;background-color:#f2f3f7;text-align:center;border:1px solid #c4c6cf;padding:0 8px}.next-input-group-text:first-child{border-right-width:0}.next-input-group-text:last-child{border-left-width:0}.next-input-group-text.next-disabled{color:#ccc;cursor:not-allowed}.next-input-group-text.next-disabled,.next-input-group-text.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input-group-text.next-medium,.next-input-group-text.next-small{font-size:12px;border-radius:3px}.next-input-group-text.next-large{font-size:16px;border-radius:3px}.next-input[dir=rtl].next-small .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-small .next-input-control{padding-right:0;padding-left:4px}.next-input[dir=rtl].next-medium .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-medium .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-large .next-input-label{padding-left:0;padding-right:12px}.next-input[dir=rtl].next-large .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-input-textarea .next-input-len{text-align:left}.next-input[dir=rtl] .next-input-control>:not(:last-child){padding-left:4px;padding-right:0}.next-input-group[dir=rtl] .next-input-group-addon:first-child{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-small{border-bottom-right-radius:3px!important;border-top-right-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-small{border-bottom-left-radius:3px!important;border-top-left-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-text:first-child{border-right-width:1px;border-left:0}.next-input-group[dir=rtl] .next-input-group-text:last-child{border-left-width:1px;border-right:0}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-select{display:inline-block;font-size:0;vertical-align:middle}.next-select,.next-select *,.next-select :after,.next-select :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-select-trigger{min-width:100px;outline:0;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-trigger .next-input-label{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-select-values{display:block;width:100%;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow:hidden}.next-select-trigger .next-select-values>em{font-style:inherit}.next-select-trigger .next-select-values input{padding-left:0;padding-right:0}.next-select-trigger .next-input-control{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-input-control>*{display:inline-block;width:auto}.next-select-trigger .next-input-control>.next-select-arrow{padding-right:0}.next-select-trigger .next-input.next-disabled em{color:#ccc}.next-select-trigger .next-input.next-disabled .next-select-arrow{cursor:not-allowed}.next-select-trigger .next-select-clear{display:none}.next-select-trigger.next-has-clear:hover .next-select-clear{display:inline-block}.next-select-trigger.next-has-clear:hover .next-select-arrow{display:none}.next-select .next-select-inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;min-width:100px;outline:0;color:#333}.next-select .next-select-inner .next-tag{line-height:1;margin-right:4px;margin-bottom:3px;padding-left:4px;padding-right:4px}.next-select-trigger-search{position:relative;display:inline-block;vertical-align:top;overflow:hidden;width:100%;max-width:100%}.next-select-trigger-search>input,.next-select-trigger-search>span{display:block;font-size:inherit;font-family:inherit;letter-spacing:inherit;white-space:nowrap;overflow:hidden}.next-select-trigger-search input{position:absolute;background-color:transparent;width:100%;height:100%!important;z-index:1;left:0;border:0;outline:0;margin:0;padding:0;cursor:inherit}.next-select-trigger-search>span{position:relative;visibility:hidden;white-space:pre;max-width:100%;z-index:-1}.next-select-single.next-no-search{cursor:pointer}.next-select-single.next-has-search.next-active .next-select-values>em{display:none}.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{width:1px;opacity:0;filter:alpha(opacity=0)}.next-select-single.next-inactive .next-select-trigger-search input,.next-select-single.next-no-search .next-select-trigger-search input{color:transparent}.next-select-single .next-select-values{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.next-select-single .next-select-values>em{vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.next-select-multiple .next-select-values,.next-select-tag .next-select-values{margin-bottom:-3px;height:auto!important}.next-select-multiple .next-select-trigger-search,.next-select-tag .next-select-trigger-search{margin-bottom:3px}.next-select-multiple .next-tag+.next-select-trigger-search,.next-select-tag .next-tag+.next-select-trigger-search{width:auto;min-width:1px}.next-select-multiple .next-input,.next-select-tag .next-input{height:auto;-webkit-box-align:start;-ms-flex-align:start;align-items:start}.next-select-multiple.next-small .next-select-values,.next-select-tag.next-small .next-select-values{min-height:18px;padding-top:2px;padding-bottom:2px;line-height:14px}.next-select-multiple.next-small .next-tag,.next-select-tag.next-small .next-tag{border:0;padding-top:0;padding-bottom:0;height:14px}.next-select-multiple.next-small .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-close-btn,.next-select-tag.next-small .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-close-btn{line-height:14px}.next-select-multiple.next-small .next-input-control,.next-select-multiple.next-small .next-input-label,.next-select-tag.next-small .next-input-control,.next-select-tag.next-small .next-input-label{line-height:18px}.next-select-multiple.next-medium .next-select-values,.next-select-tag.next-medium .next-select-values{min-height:26px;padding-top:3px;padding-bottom:3px;line-height:20px}.next-select-multiple.next-medium .next-tag,.next-select-tag.next-medium .next-tag{padding-top:1px;padding-bottom:1px;height:20px}.next-select-multiple.next-medium .next-tag .next-tag-body,.next-select-multiple.next-medium .next-tag .next-tag-close-btn,.next-select-tag.next-medium .next-tag .next-tag-body,.next-select-tag.next-medium .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-medium .next-input-control,.next-select-multiple.next-medium .next-input-label,.next-select-tag.next-medium .next-input-control,.next-select-tag.next-medium .next-input-label{line-height:26px}.next-select-multiple.next-large .next-select-values,.next-select-tag.next-large .next-select-values{min-height:38px;padding-top:7px;padding-bottom:7px;line-height:24px}.next-select-multiple.next-large .next-tag,.next-select-tag.next-large .next-tag{padding-top:3px;padding-bottom:3px;height:24px}.next-select-multiple.next-large .next-tag .next-tag-body,.next-select-multiple.next-large .next-tag .next-tag-close-btn,.next-select-tag.next-large .next-tag .next-tag-body,.next-select-tag.next-large .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-large .next-input-control,.next-select-multiple.next-large .next-input-label,.next-select-tag.next-large .next-input-control,.next-select-tag.next-large .next-input-label{line-height:38px}.next-select.next-no-search .next-select-trigger-search input{color:transparent}.next-select-auto-complete{width:160px}.next-select-auto-complete .next-input{width:100%}.next-select-auto-complete .next-input .next-input-hint-wrap{padding-right:1px}.next-select-auto-complete .next-input .next-select-arrow{padding-left:0}.next-select.next-active .next-select-arrow{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-select-arrow{cursor:pointer;width:auto!important;text-align:center;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-menu-wrapper{max-height:260px;overflow:auto;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none}.next-select-menu-wrapper .next-select-menu{max-height:none;border:none}.next-select-menu{max-height:260px;overflow:auto}.next-select-menu .next-select-menu-empty-content{padding-left:8px;padding-right:8px;color:#999}.next-select-menu.next-select-auto-complete-menu.next-select-menu-empty{display:none}.next-select-menu .next-menu-item-text .next-icon{vertical-align:middle}.next-select-all{display:block;cursor:pointer;padding:0 8px;margin:0 12px 8px;border-bottom:1px solid #dcdee3}.next-select-all:hover{color:#3e71f7}.next-select-all .next-menu-icon-selected.next-icon{display:inline-block!important;top:auto;color:#5584ff}.next-select-highlight{color:#5584ff;font-size:12px}.next-select-in-ie.next-select-trigger .next-select-values{overflow:visible}.next-select-in-ie.next-select-trigger .next-input-control,.next-select-in-ie.next-select-trigger .next-input-label{width:1px}.next-select-in-ie.next-select-trigger .next-input-control>*{display:table-cell;width:1%}.next-select-in-ie.next-select-trigger .next-select-arrow{display:table-cell}.next-select-in-ie.next-select-trigger .next-select-clear{display:none}.next-select-in-ie.next-select-trigger.next-select-multiple .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-tag .next-select-inner{vertical-align:top}.next-select-in-ie.next-select-trigger .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-single .next-select-values{display:inline-table}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-small .next-select-values{line-height:20px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-medium .next-select-values{line-height:28px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-large .next-select-values{line-height:40px}.next-select-in-ie.next-select-trigger .next-select-trigger-search>span{max-width:100px}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values{position:relative}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values>em{position:absolute;display:inline-block;height:100%;line-height:1;vertical-align:middle;overflow:hidden;left:4px;right:0;top:30%}.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{filter:alpha(opacity=0);font-size:0}.next-select-in-ie.next-select-trigger.next-no-search .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-trigger-search input{color:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-row{display:-webkit-box;display:-ms-flexbox;display:flex}.next-row,.next-row *,.next-row :after,.next-row :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-row.next-row-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}@media (min-width:320px){.next-row.next-row-fixed{width:320px}}@media (min-width:480px){.next-row.next-row-fixed{width:480px}}@media (min-width:720px){.next-row.next-row-fixed{width:720px}}@media (min-width:990px){.next-row.next-row-fixed{width:990px}}@media (min-width:1200px){.next-row.next-row-fixed{width:1200px}}@media (min-width:1500px){.next-row.next-row-fixed{width:1500px}}.next-row.next-row-fixed-xxs{width:320px}.next-row.next-row-fixed-xs{width:480px}.next-row.next-row-fixed-s{width:720px}.next-row.next-row-fixed-m{width:990px}.next-row.next-row-fixed-l{width:1200px}.next-row.next-row-fixed-xl{width:1500px}.next-row.next-row-justify-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.next-row.next-row-justify-end{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.next-row.next-row-justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.next-row.next-row-justify-space-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.next-row.next-row-justify-space-around{-ms-flex-pack:distribute;justify-content:space-around}.next-row.next-row-align-top{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.next-row.next-row-align-bottom{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.next-row.next-row-align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.next-row.next-row-align-baseline{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.next-row.next-row-align-stretch{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.next-col{-webkit-box-flex:1;-ms-flex:1;flex:1}.next-col.next-col-top{-ms-flex-item-align:start;align-self:flex-start}.next-col.next-col-bottom{-ms-flex-item-align:end;align-self:flex-end}.next-col.next-col-center{-ms-flex-item-align:center;align-self:center}@media (min-width:0\0) and (min-resolution:0.001dpcm){.next-row{display:table;width:100%}.next-col{display:table-cell;vertical-align:top}}.next-col-1{-webkit-box-flex:0;-ms-flex:0 0 4.16667%;flex:0 0 4.16667%;width:4.16667%;max-width:4.16667%}.next-col-2{-webkit-box-flex:0;-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;width:8.33333%;max-width:8.33333%}.next-col-3{-webkit-box-flex:0;-ms-flex:0 0 12.5%;flex:0 0 12.5%;width:12.5%;max-width:12.5%}.next-col-4{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;width:16.66667%;max-width:16.66667%}.next-col-5{-webkit-box-flex:0;-ms-flex:0 0 20.83333%;flex:0 0 20.83333%;width:20.83333%;max-width:20.83333%}.next-col-6{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;width:25%;max-width:25%}.next-col-7{-webkit-box-flex:0;-ms-flex:0 0 29.16667%;flex:0 0 29.16667%;width:29.16667%;max-width:29.16667%}.next-col-8{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;width:33.33333%;max-width:33.33333%}.next-col-9{-webkit-box-flex:0;-ms-flex:0 0 37.5%;flex:0 0 37.5%;width:37.5%;max-width:37.5%}.next-col-10{-webkit-box-flex:0;-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;width:41.66667%;max-width:41.66667%}.next-col-11{-webkit-box-flex:0;-ms-flex:0 0 45.83333%;flex:0 0 45.83333%;width:45.83333%;max-width:45.83333%}.next-col-12{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;width:50%;max-width:50%}.next-col-13{-webkit-box-flex:0;-ms-flex:0 0 54.16667%;flex:0 0 54.16667%;width:54.16667%;max-width:54.16667%}.next-col-14{-webkit-box-flex:0;-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;width:58.33333%;max-width:58.33333%}.next-col-15{-webkit-box-flex:0;-ms-flex:0 0 62.5%;flex:0 0 62.5%;width:62.5%;max-width:62.5%}.next-col-16{-webkit-box-flex:0;-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;width:66.66667%;max-width:66.66667%}.next-col-17{-webkit-box-flex:0;-ms-flex:0 0 70.83333%;flex:0 0 70.83333%;width:70.83333%;max-width:70.83333%}.next-col-18{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;width:75%;max-width:75%}.next-col-19{-webkit-box-flex:0;-ms-flex:0 0 79.16667%;flex:0 0 79.16667%;width:79.16667%;max-width:79.16667%}.next-col-20{-webkit-box-flex:0;-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;width:83.33333%;max-width:83.33333%}.next-col-21{-webkit-box-flex:0;-ms-flex:0 0 87.5%;flex:0 0 87.5%;width:87.5%;max-width:87.5%}.next-col-22{-webkit-box-flex:0;-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;width:91.66667%;max-width:91.66667%}.next-col-23{-webkit-box-flex:0;-ms-flex:0 0 95.83333%;flex:0 0 95.83333%;width:95.83333%;max-width:95.83333%}.next-col-24{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}@media (min-width:320px){.next-col-xxs-1{-webkit-box-flex:0;-ms-flex:0 0 4.16667%;flex:0 0 4.16667%;width:4.16667%;max-width:4.16667%}.next-col-xxs-2{-webkit-box-flex:0;-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;width:8.33333%;max-width:8.33333%}.next-col-xxs-3{-webkit-box-flex:0;-ms-flex:0 0 12.5%;flex:0 0 12.5%;width:12.5%;max-width:12.5%}.next-col-xxs-4{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;width:16.66667%;max-width:16.66667%}.next-col-xxs-5{-webkit-box-flex:0;-ms-flex:0 0 20.83333%;flex:0 0 20.83333%;width:20.83333%;max-width:20.83333%}.next-col-xxs-6{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;width:25%;max-width:25%}.next-col-xxs-7{-webkit-box-flex:0;-ms-flex:0 0 29.16667%;flex:0 0 29.16667%;width:29.16667%;max-width:29.16667%}.next-col-xxs-8{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;width:33.33333%;max-width:33.33333%}.next-col-xxs-9{-webkit-box-flex:0;-ms-flex:0 0 37.5%;flex:0 0 37.5%;width:37.5%;max-width:37.5%}.next-col-xxs-10{-webkit-box-flex:0;-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;width:41.66667%;max-width:41.66667%}.next-col-xxs-11{-webkit-box-flex:0;-ms-flex:0 0 45.83333%;flex:0 0 45.83333%;width:45.83333%;max-width:45.83333%}.next-col-xxs-12{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;width:50%;max-width:50%}.next-col-xxs-13{-webkit-box-flex:0;-ms-flex:0 0 54.16667%;flex:0 0 54.16667%;width:54.16667%;max-width:54.16667%}.next-col-xxs-14{-webkit-box-flex:0;-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;width:58.33333%;max-width:58.33333%}.next-col-xxs-15{-webkit-box-flex:0;-ms-flex:0 0 62.5%;flex:0 0 62.5%;width:62.5%;max-width:62.5%}.next-col-xxs-16{-webkit-box-flex:0;-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;width:66.66667%;max-width:66.66667%}.next-col-xxs-17{-webkit-box-flex:0;-ms-flex:0 0 70.83333%;flex:0 0 70.83333%;width:70.83333%;max-width:70.83333%}.next-col-xxs-18{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;width:75%;max-width:75%}.next-col-xxs-19{-webkit-box-flex:0;-ms-flex:0 0 79.16667%;flex:0 0 79.16667%;width:79.16667%;max-width:79.16667%}.next-col-xxs-20{-webkit-box-flex:0;-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;width:83.33333%;max-width:83.33333%}.next-col-xxs-21{-webkit-box-flex:0;-ms-flex:0 0 87.5%;flex:0 0 87.5%;width:87.5%;max-width:87.5%}.next-col-xxs-22{-webkit-box-flex:0;-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;width:91.66667%;max-width:91.66667%}.next-col-xxs-23{-webkit-box-flex:0;-ms-flex:0 0 95.83333%;flex:0 0 95.83333%;width:95.83333%;max-width:95.83333%}.next-col-xxs-24{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:480px){.next-col-xs-1{-webkit-box-flex:0;-ms-flex:0 0 4.16667%;flex:0 0 4.16667%;width:4.16667%;max-width:4.16667%}.next-col-xs-2{-webkit-box-flex:0;-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;width:8.33333%;max-width:8.33333%}.next-col-xs-3{-webkit-box-flex:0;-ms-flex:0 0 12.5%;flex:0 0 12.5%;width:12.5%;max-width:12.5%}.next-col-xs-4{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;width:16.66667%;max-width:16.66667%}.next-col-xs-5{-webkit-box-flex:0;-ms-flex:0 0 20.83333%;flex:0 0 20.83333%;width:20.83333%;max-width:20.83333%}.next-col-xs-6{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;width:25%;max-width:25%}.next-col-xs-7{-webkit-box-flex:0;-ms-flex:0 0 29.16667%;flex:0 0 29.16667%;width:29.16667%;max-width:29.16667%}.next-col-xs-8{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;width:33.33333%;max-width:33.33333%}.next-col-xs-9{-webkit-box-flex:0;-ms-flex:0 0 37.5%;flex:0 0 37.5%;width:37.5%;max-width:37.5%}.next-col-xs-10{-webkit-box-flex:0;-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;width:41.66667%;max-width:41.66667%}.next-col-xs-11{-webkit-box-flex:0;-ms-flex:0 0 45.83333%;flex:0 0 45.83333%;width:45.83333%;max-width:45.83333%}.next-col-xs-12{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;width:50%;max-width:50%}.next-col-xs-13{-webkit-box-flex:0;-ms-flex:0 0 54.16667%;flex:0 0 54.16667%;width:54.16667%;max-width:54.16667%}.next-col-xs-14{-webkit-box-flex:0;-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;width:58.33333%;max-width:58.33333%}.next-col-xs-15{-webkit-box-flex:0;-ms-flex:0 0 62.5%;flex:0 0 62.5%;width:62.5%;max-width:62.5%}.next-col-xs-16{-webkit-box-flex:0;-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;width:66.66667%;max-width:66.66667%}.next-col-xs-17{-webkit-box-flex:0;-ms-flex:0 0 70.83333%;flex:0 0 70.83333%;width:70.83333%;max-width:70.83333%}.next-col-xs-18{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;width:75%;max-width:75%}.next-col-xs-19{-webkit-box-flex:0;-ms-flex:0 0 79.16667%;flex:0 0 79.16667%;width:79.16667%;max-width:79.16667%}.next-col-xs-20{-webkit-box-flex:0;-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;width:83.33333%;max-width:83.33333%}.next-col-xs-21{-webkit-box-flex:0;-ms-flex:0 0 87.5%;flex:0 0 87.5%;width:87.5%;max-width:87.5%}.next-col-xs-22{-webkit-box-flex:0;-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;width:91.66667%;max-width:91.66667%}.next-col-xs-23{-webkit-box-flex:0;-ms-flex:0 0 95.83333%;flex:0 0 95.83333%;width:95.83333%;max-width:95.83333%}.next-col-xs-24{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:720px){.next-col-s-1{-webkit-box-flex:0;-ms-flex:0 0 4.16667%;flex:0 0 4.16667%;width:4.16667%;max-width:4.16667%}.next-col-s-2{-webkit-box-flex:0;-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;width:8.33333%;max-width:8.33333%}.next-col-s-3{-webkit-box-flex:0;-ms-flex:0 0 12.5%;flex:0 0 12.5%;width:12.5%;max-width:12.5%}.next-col-s-4{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;width:16.66667%;max-width:16.66667%}.next-col-s-5{-webkit-box-flex:0;-ms-flex:0 0 20.83333%;flex:0 0 20.83333%;width:20.83333%;max-width:20.83333%}.next-col-s-6{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;width:25%;max-width:25%}.next-col-s-7{-webkit-box-flex:0;-ms-flex:0 0 29.16667%;flex:0 0 29.16667%;width:29.16667%;max-width:29.16667%}.next-col-s-8{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;width:33.33333%;max-width:33.33333%}.next-col-s-9{-webkit-box-flex:0;-ms-flex:0 0 37.5%;flex:0 0 37.5%;width:37.5%;max-width:37.5%}.next-col-s-10{-webkit-box-flex:0;-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;width:41.66667%;max-width:41.66667%}.next-col-s-11{-webkit-box-flex:0;-ms-flex:0 0 45.83333%;flex:0 0 45.83333%;width:45.83333%;max-width:45.83333%}.next-col-s-12{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;width:50%;max-width:50%}.next-col-s-13{-webkit-box-flex:0;-ms-flex:0 0 54.16667%;flex:0 0 54.16667%;width:54.16667%;max-width:54.16667%}.next-col-s-14{-webkit-box-flex:0;-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;width:58.33333%;max-width:58.33333%}.next-col-s-15{-webkit-box-flex:0;-ms-flex:0 0 62.5%;flex:0 0 62.5%;width:62.5%;max-width:62.5%}.next-col-s-16{-webkit-box-flex:0;-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;width:66.66667%;max-width:66.66667%}.next-col-s-17{-webkit-box-flex:0;-ms-flex:0 0 70.83333%;flex:0 0 70.83333%;width:70.83333%;max-width:70.83333%}.next-col-s-18{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;width:75%;max-width:75%}.next-col-s-19{-webkit-box-flex:0;-ms-flex:0 0 79.16667%;flex:0 0 79.16667%;width:79.16667%;max-width:79.16667%}.next-col-s-20{-webkit-box-flex:0;-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;width:83.33333%;max-width:83.33333%}.next-col-s-21{-webkit-box-flex:0;-ms-flex:0 0 87.5%;flex:0 0 87.5%;width:87.5%;max-width:87.5%}.next-col-s-22{-webkit-box-flex:0;-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;width:91.66667%;max-width:91.66667%}.next-col-s-23{-webkit-box-flex:0;-ms-flex:0 0 95.83333%;flex:0 0 95.83333%;width:95.83333%;max-width:95.83333%}.next-col-s-24{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:990px){.next-col-m-1{-webkit-box-flex:0;-ms-flex:0 0 4.16667%;flex:0 0 4.16667%;width:4.16667%;max-width:4.16667%}.next-col-m-2{-webkit-box-flex:0;-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;width:8.33333%;max-width:8.33333%}.next-col-m-3{-webkit-box-flex:0;-ms-flex:0 0 12.5%;flex:0 0 12.5%;width:12.5%;max-width:12.5%}.next-col-m-4{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;width:16.66667%;max-width:16.66667%}.next-col-m-5{-webkit-box-flex:0;-ms-flex:0 0 20.83333%;flex:0 0 20.83333%;width:20.83333%;max-width:20.83333%}.next-col-m-6{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;width:25%;max-width:25%}.next-col-m-7{-webkit-box-flex:0;-ms-flex:0 0 29.16667%;flex:0 0 29.16667%;width:29.16667%;max-width:29.16667%}.next-col-m-8{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;width:33.33333%;max-width:33.33333%}.next-col-m-9{-webkit-box-flex:0;-ms-flex:0 0 37.5%;flex:0 0 37.5%;width:37.5%;max-width:37.5%}.next-col-m-10{-webkit-box-flex:0;-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;width:41.66667%;max-width:41.66667%}.next-col-m-11{-webkit-box-flex:0;-ms-flex:0 0 45.83333%;flex:0 0 45.83333%;width:45.83333%;max-width:45.83333%}.next-col-m-12{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;width:50%;max-width:50%}.next-col-m-13{-webkit-box-flex:0;-ms-flex:0 0 54.16667%;flex:0 0 54.16667%;width:54.16667%;max-width:54.16667%}.next-col-m-14{-webkit-box-flex:0;-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;width:58.33333%;max-width:58.33333%}.next-col-m-15{-webkit-box-flex:0;-ms-flex:0 0 62.5%;flex:0 0 62.5%;width:62.5%;max-width:62.5%}.next-col-m-16{-webkit-box-flex:0;-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;width:66.66667%;max-width:66.66667%}.next-col-m-17{-webkit-box-flex:0;-ms-flex:0 0 70.83333%;flex:0 0 70.83333%;width:70.83333%;max-width:70.83333%}.next-col-m-18{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;width:75%;max-width:75%}.next-col-m-19{-webkit-box-flex:0;-ms-flex:0 0 79.16667%;flex:0 0 79.16667%;width:79.16667%;max-width:79.16667%}.next-col-m-20{-webkit-box-flex:0;-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;width:83.33333%;max-width:83.33333%}.next-col-m-21{-webkit-box-flex:0;-ms-flex:0 0 87.5%;flex:0 0 87.5%;width:87.5%;max-width:87.5%}.next-col-m-22{-webkit-box-flex:0;-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;width:91.66667%;max-width:91.66667%}.next-col-m-23{-webkit-box-flex:0;-ms-flex:0 0 95.83333%;flex:0 0 95.83333%;width:95.83333%;max-width:95.83333%}.next-col-m-24{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:1200px){.next-col-l-1{-webkit-box-flex:0;-ms-flex:0 0 4.16667%;flex:0 0 4.16667%;width:4.16667%;max-width:4.16667%}.next-col-l-2{-webkit-box-flex:0;-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;width:8.33333%;max-width:8.33333%}.next-col-l-3{-webkit-box-flex:0;-ms-flex:0 0 12.5%;flex:0 0 12.5%;width:12.5%;max-width:12.5%}.next-col-l-4{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;width:16.66667%;max-width:16.66667%}.next-col-l-5{-webkit-box-flex:0;-ms-flex:0 0 20.83333%;flex:0 0 20.83333%;width:20.83333%;max-width:20.83333%}.next-col-l-6{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;width:25%;max-width:25%}.next-col-l-7{-webkit-box-flex:0;-ms-flex:0 0 29.16667%;flex:0 0 29.16667%;width:29.16667%;max-width:29.16667%}.next-col-l-8{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;width:33.33333%;max-width:33.33333%}.next-col-l-9{-webkit-box-flex:0;-ms-flex:0 0 37.5%;flex:0 0 37.5%;width:37.5%;max-width:37.5%}.next-col-l-10{-webkit-box-flex:0;-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;width:41.66667%;max-width:41.66667%}.next-col-l-11{-webkit-box-flex:0;-ms-flex:0 0 45.83333%;flex:0 0 45.83333%;width:45.83333%;max-width:45.83333%}.next-col-l-12{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;width:50%;max-width:50%}.next-col-l-13{-webkit-box-flex:0;-ms-flex:0 0 54.16667%;flex:0 0 54.16667%;width:54.16667%;max-width:54.16667%}.next-col-l-14{-webkit-box-flex:0;-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;width:58.33333%;max-width:58.33333%}.next-col-l-15{-webkit-box-flex:0;-ms-flex:0 0 62.5%;flex:0 0 62.5%;width:62.5%;max-width:62.5%}.next-col-l-16{-webkit-box-flex:0;-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;width:66.66667%;max-width:66.66667%}.next-col-l-17{-webkit-box-flex:0;-ms-flex:0 0 70.83333%;flex:0 0 70.83333%;width:70.83333%;max-width:70.83333%}.next-col-l-18{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;width:75%;max-width:75%}.next-col-l-19{-webkit-box-flex:0;-ms-flex:0 0 79.16667%;flex:0 0 79.16667%;width:79.16667%;max-width:79.16667%}.next-col-l-20{-webkit-box-flex:0;-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;width:83.33333%;max-width:83.33333%}.next-col-l-21{-webkit-box-flex:0;-ms-flex:0 0 87.5%;flex:0 0 87.5%;width:87.5%;max-width:87.5%}.next-col-l-22{-webkit-box-flex:0;-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;width:91.66667%;max-width:91.66667%}.next-col-l-23{-webkit-box-flex:0;-ms-flex:0 0 95.83333%;flex:0 0 95.83333%;width:95.83333%;max-width:95.83333%}.next-col-l-24{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:1500px){.next-col-xl-1{-webkit-box-flex:0;-ms-flex:0 0 4.16667%;flex:0 0 4.16667%;width:4.16667%;max-width:4.16667%}.next-col-xl-2{-webkit-box-flex:0;-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;width:8.33333%;max-width:8.33333%}.next-col-xl-3{-webkit-box-flex:0;-ms-flex:0 0 12.5%;flex:0 0 12.5%;width:12.5%;max-width:12.5%}.next-col-xl-4{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;width:16.66667%;max-width:16.66667%}.next-col-xl-5{-webkit-box-flex:0;-ms-flex:0 0 20.83333%;flex:0 0 20.83333%;width:20.83333%;max-width:20.83333%}.next-col-xl-6{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;width:25%;max-width:25%}.next-col-xl-7{-webkit-box-flex:0;-ms-flex:0 0 29.16667%;flex:0 0 29.16667%;width:29.16667%;max-width:29.16667%}.next-col-xl-8{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;width:33.33333%;max-width:33.33333%}.next-col-xl-9{-webkit-box-flex:0;-ms-flex:0 0 37.5%;flex:0 0 37.5%;width:37.5%;max-width:37.5%}.next-col-xl-10{-webkit-box-flex:0;-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;width:41.66667%;max-width:41.66667%}.next-col-xl-11{-webkit-box-flex:0;-ms-flex:0 0 45.83333%;flex:0 0 45.83333%;width:45.83333%;max-width:45.83333%}.next-col-xl-12{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;width:50%;max-width:50%}.next-col-xl-13{-webkit-box-flex:0;-ms-flex:0 0 54.16667%;flex:0 0 54.16667%;width:54.16667%;max-width:54.16667%}.next-col-xl-14{-webkit-box-flex:0;-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;width:58.33333%;max-width:58.33333%}.next-col-xl-15{-webkit-box-flex:0;-ms-flex:0 0 62.5%;flex:0 0 62.5%;width:62.5%;max-width:62.5%}.next-col-xl-16{-webkit-box-flex:0;-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;width:66.66667%;max-width:66.66667%}.next-col-xl-17{-webkit-box-flex:0;-ms-flex:0 0 70.83333%;flex:0 0 70.83333%;width:70.83333%;max-width:70.83333%}.next-col-xl-18{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;width:75%;max-width:75%}.next-col-xl-19{-webkit-box-flex:0;-ms-flex:0 0 79.16667%;flex:0 0 79.16667%;width:79.16667%;max-width:79.16667%}.next-col-xl-20{-webkit-box-flex:0;-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;width:83.33333%;max-width:83.33333%}.next-col-xl-21{-webkit-box-flex:0;-ms-flex:0 0 87.5%;flex:0 0 87.5%;width:87.5%;max-width:87.5%}.next-col-xl-22{-webkit-box-flex:0;-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;width:91.66667%;max-width:91.66667%}.next-col-xl-23{-webkit-box-flex:0;-ms-flex:0 0 95.83333%;flex:0 0 95.83333%;width:95.83333%;max-width:95.83333%}.next-col-xl-24{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}.next-col-1p5{-webkit-box-flex:0;-ms-flex:0 0 20%;flex:0 0 20%;width:20%;max-width:20%}.next-col-2p5{-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%;width:40%;max-width:40%}.next-col-3p5{-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;width:60%;max-width:60%}.next-col-4p5{-webkit-box-flex:0;-ms-flex:0 0 80%;flex:0 0 80%;width:80%;max-width:80%}.next-col-5p5{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}@media (min-width:320px){.next-col-xxs-1p5{-webkit-box-flex:0;-ms-flex:0 0 20%;flex:0 0 20%;width:20%;max-width:20%}.next-col-xxs-2p5{-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%;width:40%;max-width:40%}.next-col-xxs-3p5{-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;width:60%;max-width:60%}.next-col-xxs-4p5{-webkit-box-flex:0;-ms-flex:0 0 80%;flex:0 0 80%;width:80%;max-width:80%}.next-col-xxs-5p5{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:480px){.next-col-xs-1p5{-webkit-box-flex:0;-ms-flex:0 0 20%;flex:0 0 20%;width:20%;max-width:20%}.next-col-xs-2p5{-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%;width:40%;max-width:40%}.next-col-xs-3p5{-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;width:60%;max-width:60%}.next-col-xs-4p5{-webkit-box-flex:0;-ms-flex:0 0 80%;flex:0 0 80%;width:80%;max-width:80%}.next-col-xs-5p5{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:720px){.next-col-s-1p5{-webkit-box-flex:0;-ms-flex:0 0 20%;flex:0 0 20%;width:20%;max-width:20%}.next-col-s-2p5{-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%;width:40%;max-width:40%}.next-col-s-3p5{-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;width:60%;max-width:60%}.next-col-s-4p5{-webkit-box-flex:0;-ms-flex:0 0 80%;flex:0 0 80%;width:80%;max-width:80%}.next-col-s-5p5{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:990px){.next-col-m-1p5{-webkit-box-flex:0;-ms-flex:0 0 20%;flex:0 0 20%;width:20%;max-width:20%}.next-col-m-2p5{-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%;width:40%;max-width:40%}.next-col-m-3p5{-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;width:60%;max-width:60%}.next-col-m-4p5{-webkit-box-flex:0;-ms-flex:0 0 80%;flex:0 0 80%;width:80%;max-width:80%}.next-col-m-5p5{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:1200px){.next-col-l-1p5{-webkit-box-flex:0;-ms-flex:0 0 20%;flex:0 0 20%;width:20%;max-width:20%}.next-col-l-2p5{-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%;width:40%;max-width:40%}.next-col-l-3p5{-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;width:60%;max-width:60%}.next-col-l-4p5{-webkit-box-flex:0;-ms-flex:0 0 80%;flex:0 0 80%;width:80%;max-width:80%}.next-col-l-5p5{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:1500px){.next-col-xl-1p5{-webkit-box-flex:0;-ms-flex:0 0 20%;flex:0 0 20%;width:20%;max-width:20%}.next-col-xl-2p5{-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%;width:40%;max-width:40%}.next-col-xl-3p5{-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;width:60%;max-width:60%}.next-col-xl-4p5{-webkit-box-flex:0;-ms-flex:0 0 80%;flex:0 0 80%;width:80%;max-width:80%}.next-col-xl-5p5{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}.next-col-fixed-1{-webkit-box-flex:0;-ms-flex:0 0 20px;flex:0 0 20px;width:20px;max-width:20px}.next-col-fixed-2{-webkit-box-flex:0;-ms-flex:0 0 40px;flex:0 0 40px;width:40px;max-width:40px}.next-col-fixed-3{-webkit-box-flex:0;-ms-flex:0 0 60px;flex:0 0 60px;width:60px;max-width:60px}.next-col-fixed-4{-webkit-box-flex:0;-ms-flex:0 0 80px;flex:0 0 80px;width:80px;max-width:80px}.next-col-fixed-5{-webkit-box-flex:0;-ms-flex:0 0 100px;flex:0 0 100px;width:100px;max-width:100px}.next-col-fixed-6{-webkit-box-flex:0;-ms-flex:0 0 120px;flex:0 0 120px;width:120px;max-width:120px}.next-col-fixed-7{-webkit-box-flex:0;-ms-flex:0 0 140px;flex:0 0 140px;width:140px;max-width:140px}.next-col-fixed-8{-webkit-box-flex:0;-ms-flex:0 0 160px;flex:0 0 160px;width:160px;max-width:160px}.next-col-fixed-9{-webkit-box-flex:0;-ms-flex:0 0 180px;flex:0 0 180px;width:180px;max-width:180px}.next-col-fixed-10{-webkit-box-flex:0;-ms-flex:0 0 200px;flex:0 0 200px;width:200px;max-width:200px}.next-col-fixed-11{-webkit-box-flex:0;-ms-flex:0 0 220px;flex:0 0 220px;width:220px;max-width:220px}.next-col-fixed-12{-webkit-box-flex:0;-ms-flex:0 0 240px;flex:0 0 240px;width:240px;max-width:240px}.next-col-fixed-13{-webkit-box-flex:0;-ms-flex:0 0 260px;flex:0 0 260px;width:260px;max-width:260px}.next-col-fixed-14{-webkit-box-flex:0;-ms-flex:0 0 280px;flex:0 0 280px;width:280px;max-width:280px}.next-col-fixed-15{-webkit-box-flex:0;-ms-flex:0 0 300px;flex:0 0 300px;width:300px;max-width:300px}.next-col-fixed-16{-webkit-box-flex:0;-ms-flex:0 0 320px;flex:0 0 320px;width:320px;max-width:320px}.next-col-fixed-17{-webkit-box-flex:0;-ms-flex:0 0 340px;flex:0 0 340px;width:340px;max-width:340px}.next-col-fixed-18{-webkit-box-flex:0;-ms-flex:0 0 360px;flex:0 0 360px;width:360px;max-width:360px}.next-col-fixed-19{-webkit-box-flex:0;-ms-flex:0 0 380px;flex:0 0 380px;width:380px;max-width:380px}.next-col-fixed-20{-webkit-box-flex:0;-ms-flex:0 0 400px;flex:0 0 400px;width:400px;max-width:400px}.next-col-fixed-21{-webkit-box-flex:0;-ms-flex:0 0 420px;flex:0 0 420px;width:420px;max-width:420px}.next-col-fixed-22{-webkit-box-flex:0;-ms-flex:0 0 440px;flex:0 0 440px;width:440px;max-width:440px}.next-col-fixed-23{-webkit-box-flex:0;-ms-flex:0 0 460px;flex:0 0 460px;width:460px;max-width:460px}.next-col-fixed-24{-webkit-box-flex:0;-ms-flex:0 0 480px;flex:0 0 480px;width:480px;max-width:480px}.next-col-fixed-25{-webkit-box-flex:0;-ms-flex:0 0 500px;flex:0 0 500px;width:500px;max-width:500px}.next-col-fixed-26{-webkit-box-flex:0;-ms-flex:0 0 520px;flex:0 0 520px;width:520px;max-width:520px}.next-col-fixed-27{-webkit-box-flex:0;-ms-flex:0 0 540px;flex:0 0 540px;width:540px;max-width:540px}.next-col-fixed-28{-webkit-box-flex:0;-ms-flex:0 0 560px;flex:0 0 560px;width:560px;max-width:560px}.next-col-fixed-29{-webkit-box-flex:0;-ms-flex:0 0 580px;flex:0 0 580px;width:580px;max-width:580px}.next-col-fixed-30{-webkit-box-flex:0;-ms-flex:0 0 600px;flex:0 0 600px;width:600px;max-width:600px}.next-col-offset-1{margin-left:4.16667%}.next-col-offset-2{margin-left:8.33333%}.next-col-offset-3{margin-left:12.5%}.next-col-offset-4{margin-left:16.66667%}.next-col-offset-5{margin-left:20.83333%}.next-col-offset-6{margin-left:25%}.next-col-offset-7{margin-left:29.16667%}.next-col-offset-8{margin-left:33.33333%}.next-col-offset-9{margin-left:37.5%}.next-col-offset-10{margin-left:41.66667%}.next-col-offset-11{margin-left:45.83333%}.next-col-offset-12{margin-left:50%}.next-col-offset-13{margin-left:54.16667%}.next-col-offset-14{margin-left:58.33333%}.next-col-offset-15{margin-left:62.5%}.next-col-offset-16{margin-left:66.66667%}.next-col-offset-17{margin-left:70.83333%}.next-col-offset-18{margin-left:75%}.next-col-offset-19{margin-left:79.16667%}.next-col-offset-20{margin-left:83.33333%}.next-col-offset-21{margin-left:87.5%}.next-col-offset-22{margin-left:91.66667%}.next-col-offset-23{margin-left:95.83333%}.next-col-offset-24{margin-left:100%}@media (min-width:320px){.next-col-xxs-offset-1{margin-left:4.16667%}.next-col-xxs-offset-2{margin-left:8.33333%}.next-col-xxs-offset-3{margin-left:12.5%}.next-col-xxs-offset-4{margin-left:16.66667%}.next-col-xxs-offset-5{margin-left:20.83333%}.next-col-xxs-offset-6{margin-left:25%}.next-col-xxs-offset-7{margin-left:29.16667%}.next-col-xxs-offset-8{margin-left:33.33333%}.next-col-xxs-offset-9{margin-left:37.5%}.next-col-xxs-offset-10{margin-left:41.66667%}.next-col-xxs-offset-11{margin-left:45.83333%}.next-col-xxs-offset-12{margin-left:50%}.next-col-xxs-offset-13{margin-left:54.16667%}.next-col-xxs-offset-14{margin-left:58.33333%}.next-col-xxs-offset-15{margin-left:62.5%}.next-col-xxs-offset-16{margin-left:66.66667%}.next-col-xxs-offset-17{margin-left:70.83333%}.next-col-xxs-offset-18{margin-left:75%}.next-col-xxs-offset-19{margin-left:79.16667%}.next-col-xxs-offset-20{margin-left:83.33333%}.next-col-xxs-offset-21{margin-left:87.5%}.next-col-xxs-offset-22{margin-left:91.66667%}.next-col-xxs-offset-23{margin-left:95.83333%}.next-col-xxs-offset-24{margin-left:100%}}@media (min-width:480px){.next-col-xs-offset-1{margin-left:4.16667%}.next-col-xs-offset-2{margin-left:8.33333%}.next-col-xs-offset-3{margin-left:12.5%}.next-col-xs-offset-4{margin-left:16.66667%}.next-col-xs-offset-5{margin-left:20.83333%}.next-col-xs-offset-6{margin-left:25%}.next-col-xs-offset-7{margin-left:29.16667%}.next-col-xs-offset-8{margin-left:33.33333%}.next-col-xs-offset-9{margin-left:37.5%}.next-col-xs-offset-10{margin-left:41.66667%}.next-col-xs-offset-11{margin-left:45.83333%}.next-col-xs-offset-12{margin-left:50%}.next-col-xs-offset-13{margin-left:54.16667%}.next-col-xs-offset-14{margin-left:58.33333%}.next-col-xs-offset-15{margin-left:62.5%}.next-col-xs-offset-16{margin-left:66.66667%}.next-col-xs-offset-17{margin-left:70.83333%}.next-col-xs-offset-18{margin-left:75%}.next-col-xs-offset-19{margin-left:79.16667%}.next-col-xs-offset-20{margin-left:83.33333%}.next-col-xs-offset-21{margin-left:87.5%}.next-col-xs-offset-22{margin-left:91.66667%}.next-col-xs-offset-23{margin-left:95.83333%}.next-col-xs-offset-24{margin-left:100%}}@media (min-width:720px){.next-col-s-offset-1{margin-left:4.16667%}.next-col-s-offset-2{margin-left:8.33333%}.next-col-s-offset-3{margin-left:12.5%}.next-col-s-offset-4{margin-left:16.66667%}.next-col-s-offset-5{margin-left:20.83333%}.next-col-s-offset-6{margin-left:25%}.next-col-s-offset-7{margin-left:29.16667%}.next-col-s-offset-8{margin-left:33.33333%}.next-col-s-offset-9{margin-left:37.5%}.next-col-s-offset-10{margin-left:41.66667%}.next-col-s-offset-11{margin-left:45.83333%}.next-col-s-offset-12{margin-left:50%}.next-col-s-offset-13{margin-left:54.16667%}.next-col-s-offset-14{margin-left:58.33333%}.next-col-s-offset-15{margin-left:62.5%}.next-col-s-offset-16{margin-left:66.66667%}.next-col-s-offset-17{margin-left:70.83333%}.next-col-s-offset-18{margin-left:75%}.next-col-s-offset-19{margin-left:79.16667%}.next-col-s-offset-20{margin-left:83.33333%}.next-col-s-offset-21{margin-left:87.5%}.next-col-s-offset-22{margin-left:91.66667%}.next-col-s-offset-23{margin-left:95.83333%}.next-col-s-offset-24{margin-left:100%}}@media (min-width:990px){.next-col-m-offset-1{margin-left:4.16667%}.next-col-m-offset-2{margin-left:8.33333%}.next-col-m-offset-3{margin-left:12.5%}.next-col-m-offset-4{margin-left:16.66667%}.next-col-m-offset-5{margin-left:20.83333%}.next-col-m-offset-6{margin-left:25%}.next-col-m-offset-7{margin-left:29.16667%}.next-col-m-offset-8{margin-left:33.33333%}.next-col-m-offset-9{margin-left:37.5%}.next-col-m-offset-10{margin-left:41.66667%}.next-col-m-offset-11{margin-left:45.83333%}.next-col-m-offset-12{margin-left:50%}.next-col-m-offset-13{margin-left:54.16667%}.next-col-m-offset-14{margin-left:58.33333%}.next-col-m-offset-15{margin-left:62.5%}.next-col-m-offset-16{margin-left:66.66667%}.next-col-m-offset-17{margin-left:70.83333%}.next-col-m-offset-18{margin-left:75%}.next-col-m-offset-19{margin-left:79.16667%}.next-col-m-offset-20{margin-left:83.33333%}.next-col-m-offset-21{margin-left:87.5%}.next-col-m-offset-22{margin-left:91.66667%}.next-col-m-offset-23{margin-left:95.83333%}.next-col-m-offset-24{margin-left:100%}}@media (min-width:1200px){.next-col-l-offset-1{margin-left:4.16667%}.next-col-l-offset-2{margin-left:8.33333%}.next-col-l-offset-3{margin-left:12.5%}.next-col-l-offset-4{margin-left:16.66667%}.next-col-l-offset-5{margin-left:20.83333%}.next-col-l-offset-6{margin-left:25%}.next-col-l-offset-7{margin-left:29.16667%}.next-col-l-offset-8{margin-left:33.33333%}.next-col-l-offset-9{margin-left:37.5%}.next-col-l-offset-10{margin-left:41.66667%}.next-col-l-offset-11{margin-left:45.83333%}.next-col-l-offset-12{margin-left:50%}.next-col-l-offset-13{margin-left:54.16667%}.next-col-l-offset-14{margin-left:58.33333%}.next-col-l-offset-15{margin-left:62.5%}.next-col-l-offset-16{margin-left:66.66667%}.next-col-l-offset-17{margin-left:70.83333%}.next-col-l-offset-18{margin-left:75%}.next-col-l-offset-19{margin-left:79.16667%}.next-col-l-offset-20{margin-left:83.33333%}.next-col-l-offset-21{margin-left:87.5%}.next-col-l-offset-22{margin-left:91.66667%}.next-col-l-offset-23{margin-left:95.83333%}.next-col-l-offset-24{margin-left:100%}}@media (min-width:1500px){.next-col-xl-offset-1{margin-left:4.16667%}.next-col-xl-offset-2{margin-left:8.33333%}.next-col-xl-offset-3{margin-left:12.5%}.next-col-xl-offset-4{margin-left:16.66667%}.next-col-xl-offset-5{margin-left:20.83333%}.next-col-xl-offset-6{margin-left:25%}.next-col-xl-offset-7{margin-left:29.16667%}.next-col-xl-offset-8{margin-left:33.33333%}.next-col-xl-offset-9{margin-left:37.5%}.next-col-xl-offset-10{margin-left:41.66667%}.next-col-xl-offset-11{margin-left:45.83333%}.next-col-xl-offset-12{margin-left:50%}.next-col-xl-offset-13{margin-left:54.16667%}.next-col-xl-offset-14{margin-left:58.33333%}.next-col-xl-offset-15{margin-left:62.5%}.next-col-xl-offset-16{margin-left:66.66667%}.next-col-xl-offset-17{margin-left:70.83333%}.next-col-xl-offset-18{margin-left:75%}.next-col-xl-offset-19{margin-left:79.16667%}.next-col-xl-offset-20{margin-left:83.33333%}.next-col-xl-offset-21{margin-left:87.5%}.next-col-xl-offset-22{margin-left:91.66667%}.next-col-xl-offset-23{margin-left:95.83333%}.next-col-xl-offset-24{margin-left:100%}}.next-col-offset-fixed-1{margin-left:20px}.next-col-offset-fixed-2{margin-left:40px}.next-col-offset-fixed-3{margin-left:60px}.next-col-offset-fixed-4{margin-left:80px}.next-col-offset-fixed-5{margin-left:100px}.next-col-offset-fixed-6{margin-left:120px}.next-col-offset-fixed-7{margin-left:140px}.next-col-offset-fixed-8{margin-left:160px}.next-col-offset-fixed-9{margin-left:180px}.next-col-offset-fixed-10{margin-left:200px}.next-col-offset-fixed-11{margin-left:220px}.next-col-offset-fixed-12{margin-left:240px}.next-col-offset-fixed-13{margin-left:260px}.next-col-offset-fixed-14{margin-left:280px}.next-col-offset-fixed-15{margin-left:300px}.next-col-offset-fixed-16{margin-left:320px}.next-col-offset-fixed-17{margin-left:340px}.next-col-offset-fixed-18{margin-left:360px}.next-col-offset-fixed-19{margin-left:380px}.next-col-offset-fixed-20{margin-left:400px}.next-col-offset-fixed-21{margin-left:420px}.next-col-offset-fixed-22{margin-left:440px}.next-col-offset-fixed-23{margin-left:460px}.next-col-offset-fixed-24{margin-left:480px}.next-col-offset-fixed-25{margin-left:500px}.next-col-offset-fixed-26{margin-left:520px}.next-col-offset-fixed-27{margin-left:540px}.next-col-offset-fixed-28{margin-left:560px}.next-col-offset-fixed-29{margin-left:580px}.next-col-offset-fixed-30{margin-left:600px}.next-col-offset-fixed-xxs-1{margin-left:20px}.next-col-offset-fixed-xxs-2{margin-left:40px}.next-col-offset-fixed-xxs-3{margin-left:60px}.next-col-offset-fixed-xxs-4{margin-left:80px}.next-col-offset-fixed-xxs-5{margin-left:100px}.next-col-offset-fixed-xxs-6{margin-left:120px}.next-col-offset-fixed-xxs-7{margin-left:140px}.next-col-offset-fixed-xxs-8{margin-left:160px}.next-col-offset-fixed-xxs-9{margin-left:180px}.next-col-offset-fixed-xxs-10{margin-left:200px}.next-col-offset-fixed-xxs-11{margin-left:220px}.next-col-offset-fixed-xxs-12{margin-left:240px}.next-col-offset-fixed-xxs-13{margin-left:260px}.next-col-offset-fixed-xxs-14{margin-left:280px}.next-col-offset-fixed-xxs-15{margin-left:300px}.next-col-offset-fixed-xxs-16{margin-left:320px}.next-col-offset-fixed-xxs-17{margin-left:340px}.next-col-offset-fixed-xxs-18{margin-left:360px}.next-col-offset-fixed-xxs-19{margin-left:380px}.next-col-offset-fixed-xxs-20{margin-left:400px}.next-col-offset-fixed-xxs-21{margin-left:420px}.next-col-offset-fixed-xxs-22{margin-left:440px}.next-col-offset-fixed-xxs-23{margin-left:460px}.next-col-offset-fixed-xxs-24{margin-left:480px}.next-col-offset-fixed-xxs-25{margin-left:500px}.next-col-offset-fixed-xxs-26{margin-left:520px}.next-col-offset-fixed-xxs-27{margin-left:540px}.next-col-offset-fixed-xxs-28{margin-left:560px}.next-col-offset-fixed-xxs-29{margin-left:580px}.next-col-offset-fixed-xxs-30{margin-left:600px}.next-col-offset-fixed-xs-1{margin-left:20px}.next-col-offset-fixed-xs-2{margin-left:40px}.next-col-offset-fixed-xs-3{margin-left:60px}.next-col-offset-fixed-xs-4{margin-left:80px}.next-col-offset-fixed-xs-5{margin-left:100px}.next-col-offset-fixed-xs-6{margin-left:120px}.next-col-offset-fixed-xs-7{margin-left:140px}.next-col-offset-fixed-xs-8{margin-left:160px}.next-col-offset-fixed-xs-9{margin-left:180px}.next-col-offset-fixed-xs-10{margin-left:200px}.next-col-offset-fixed-xs-11{margin-left:220px}.next-col-offset-fixed-xs-12{margin-left:240px}.next-col-offset-fixed-xs-13{margin-left:260px}.next-col-offset-fixed-xs-14{margin-left:280px}.next-col-offset-fixed-xs-15{margin-left:300px}.next-col-offset-fixed-xs-16{margin-left:320px}.next-col-offset-fixed-xs-17{margin-left:340px}.next-col-offset-fixed-xs-18{margin-left:360px}.next-col-offset-fixed-xs-19{margin-left:380px}.next-col-offset-fixed-xs-20{margin-left:400px}.next-col-offset-fixed-xs-21{margin-left:420px}.next-col-offset-fixed-xs-22{margin-left:440px}.next-col-offset-fixed-xs-23{margin-left:460px}.next-col-offset-fixed-xs-24{margin-left:480px}.next-col-offset-fixed-xs-25{margin-left:500px}.next-col-offset-fixed-xs-26{margin-left:520px}.next-col-offset-fixed-xs-27{margin-left:540px}.next-col-offset-fixed-xs-28{margin-left:560px}.next-col-offset-fixed-xs-29{margin-left:580px}.next-col-offset-fixed-xs-30{margin-left:600px}.next-col-offset-fixed-s-1{margin-left:20px}.next-col-offset-fixed-s-2{margin-left:40px}.next-col-offset-fixed-s-3{margin-left:60px}.next-col-offset-fixed-s-4{margin-left:80px}.next-col-offset-fixed-s-5{margin-left:100px}.next-col-offset-fixed-s-6{margin-left:120px}.next-col-offset-fixed-s-7{margin-left:140px}.next-col-offset-fixed-s-8{margin-left:160px}.next-col-offset-fixed-s-9{margin-left:180px}.next-col-offset-fixed-s-10{margin-left:200px}.next-col-offset-fixed-s-11{margin-left:220px}.next-col-offset-fixed-s-12{margin-left:240px}.next-col-offset-fixed-s-13{margin-left:260px}.next-col-offset-fixed-s-14{margin-left:280px}.next-col-offset-fixed-s-15{margin-left:300px}.next-col-offset-fixed-s-16{margin-left:320px}.next-col-offset-fixed-s-17{margin-left:340px}.next-col-offset-fixed-s-18{margin-left:360px}.next-col-offset-fixed-s-19{margin-left:380px}.next-col-offset-fixed-s-20{margin-left:400px}.next-col-offset-fixed-s-21{margin-left:420px}.next-col-offset-fixed-s-22{margin-left:440px}.next-col-offset-fixed-s-23{margin-left:460px}.next-col-offset-fixed-s-24{margin-left:480px}.next-col-offset-fixed-s-25{margin-left:500px}.next-col-offset-fixed-s-26{margin-left:520px}.next-col-offset-fixed-s-27{margin-left:540px}.next-col-offset-fixed-s-28{margin-left:560px}.next-col-offset-fixed-s-29{margin-left:580px}.next-col-offset-fixed-s-30{margin-left:600px}.next-col-offset-fixed-m-1{margin-left:20px}.next-col-offset-fixed-m-2{margin-left:40px}.next-col-offset-fixed-m-3{margin-left:60px}.next-col-offset-fixed-m-4{margin-left:80px}.next-col-offset-fixed-m-5{margin-left:100px}.next-col-offset-fixed-m-6{margin-left:120px}.next-col-offset-fixed-m-7{margin-left:140px}.next-col-offset-fixed-m-8{margin-left:160px}.next-col-offset-fixed-m-9{margin-left:180px}.next-col-offset-fixed-m-10{margin-left:200px}.next-col-offset-fixed-m-11{margin-left:220px}.next-col-offset-fixed-m-12{margin-left:240px}.next-col-offset-fixed-m-13{margin-left:260px}.next-col-offset-fixed-m-14{margin-left:280px}.next-col-offset-fixed-m-15{margin-left:300px}.next-col-offset-fixed-m-16{margin-left:320px}.next-col-offset-fixed-m-17{margin-left:340px}.next-col-offset-fixed-m-18{margin-left:360px}.next-col-offset-fixed-m-19{margin-left:380px}.next-col-offset-fixed-m-20{margin-left:400px}.next-col-offset-fixed-m-21{margin-left:420px}.next-col-offset-fixed-m-22{margin-left:440px}.next-col-offset-fixed-m-23{margin-left:460px}.next-col-offset-fixed-m-24{margin-left:480px}.next-col-offset-fixed-m-25{margin-left:500px}.next-col-offset-fixed-m-26{margin-left:520px}.next-col-offset-fixed-m-27{margin-left:540px}.next-col-offset-fixed-m-28{margin-left:560px}.next-col-offset-fixed-m-29{margin-left:580px}.next-col-offset-fixed-m-30{margin-left:600px}.next-col-offset-fixed-l-1{margin-left:20px}.next-col-offset-fixed-l-2{margin-left:40px}.next-col-offset-fixed-l-3{margin-left:60px}.next-col-offset-fixed-l-4{margin-left:80px}.next-col-offset-fixed-l-5{margin-left:100px}.next-col-offset-fixed-l-6{margin-left:120px}.next-col-offset-fixed-l-7{margin-left:140px}.next-col-offset-fixed-l-8{margin-left:160px}.next-col-offset-fixed-l-9{margin-left:180px}.next-col-offset-fixed-l-10{margin-left:200px}.next-col-offset-fixed-l-11{margin-left:220px}.next-col-offset-fixed-l-12{margin-left:240px}.next-col-offset-fixed-l-13{margin-left:260px}.next-col-offset-fixed-l-14{margin-left:280px}.next-col-offset-fixed-l-15{margin-left:300px}.next-col-offset-fixed-l-16{margin-left:320px}.next-col-offset-fixed-l-17{margin-left:340px}.next-col-offset-fixed-l-18{margin-left:360px}.next-col-offset-fixed-l-19{margin-left:380px}.next-col-offset-fixed-l-20{margin-left:400px}.next-col-offset-fixed-l-21{margin-left:420px}.next-col-offset-fixed-l-22{margin-left:440px}.next-col-offset-fixed-l-23{margin-left:460px}.next-col-offset-fixed-l-24{margin-left:480px}.next-col-offset-fixed-l-25{margin-left:500px}.next-col-offset-fixed-l-26{margin-left:520px}.next-col-offset-fixed-l-27{margin-left:540px}.next-col-offset-fixed-l-28{margin-left:560px}.next-col-offset-fixed-l-29{margin-left:580px}.next-col-offset-fixed-l-30{margin-left:600px}.next-col-offset-fixed-xl-1{margin-left:20px}.next-col-offset-fixed-xl-2{margin-left:40px}.next-col-offset-fixed-xl-3{margin-left:60px}.next-col-offset-fixed-xl-4{margin-left:80px}.next-col-offset-fixed-xl-5{margin-left:100px}.next-col-offset-fixed-xl-6{margin-left:120px}.next-col-offset-fixed-xl-7{margin-left:140px}.next-col-offset-fixed-xl-8{margin-left:160px}.next-col-offset-fixed-xl-9{margin-left:180px}.next-col-offset-fixed-xl-10{margin-left:200px}.next-col-offset-fixed-xl-11{margin-left:220px}.next-col-offset-fixed-xl-12{margin-left:240px}.next-col-offset-fixed-xl-13{margin-left:260px}.next-col-offset-fixed-xl-14{margin-left:280px}.next-col-offset-fixed-xl-15{margin-left:300px}.next-col-offset-fixed-xl-16{margin-left:320px}.next-col-offset-fixed-xl-17{margin-left:340px}.next-col-offset-fixed-xl-18{margin-left:360px}.next-col-offset-fixed-xl-19{margin-left:380px}.next-col-offset-fixed-xl-20{margin-left:400px}.next-col-offset-fixed-xl-21{margin-left:420px}.next-col-offset-fixed-xl-22{margin-left:440px}.next-col-offset-fixed-xl-23{margin-left:460px}.next-col-offset-fixed-xl-24{margin-left:480px}.next-col-offset-fixed-xl-25{margin-left:500px}.next-col-offset-fixed-xl-26{margin-left:520px}.next-col-offset-fixed-xl-27{margin-left:540px}.next-col-offset-fixed-xl-28{margin-left:560px}.next-col-offset-fixed-xl-29{margin-left:580px}.next-col-offset-fixed-xl-30{margin-left:600px}.next-col.next-col-hidden{display:none}@media (min-width:320px) and (max-width:479px){.next-col.next-col-xxs-hidden{display:none}}@media (min-width:480px) and (max-width:719px){.next-col.next-col-xs-hidden{display:none}}@media (min-width:720px) and (max-width:989px){.next-col.next-col-s-hidden{display:none}}@media (min-width:990px) and (max-width:1199px){.next-col.next-col-m-hidden{display:none}}@media (min-width:1200px) and (max-width:1499px){.next-col.next-col-l-hidden{display:none}}@media (min-width:1500px){.next-col.next-col-xl-hidden{display:none}}.next-row.next-row-hidden{display:none}@media (min-width:320px) and (max-width:479px){.next-row.next-row-xxs-hidden{display:none}}@media (min-width:480px) and (max-width:719px){.next-row.next-row-xs-hidden{display:none}}@media (min-width:720px) and (max-width:989px){.next-row.next-row-s-hidden{display:none}}@media (min-width:990px) and (max-width:1199px){.next-row.next-row-m-hidden{display:none}}@media (min-width:1200px) and (max-width:1499px){.next-row.next-row-l-hidden{display:none}}@media (min-width:1500px){.next-row.next-row-xl-hidden{display:none}}.next-col-offset-1[dir=rtl]{margin-right:4.16667%;margin-left:auto}.next-col-offset-2[dir=rtl]{margin-right:8.33333%;margin-left:auto}.next-col-offset-3[dir=rtl]{margin-right:12.5%;margin-left:auto}.next-col-offset-4[dir=rtl]{margin-right:16.66667%;margin-left:auto}.next-col-offset-5[dir=rtl]{margin-right:20.83333%;margin-left:auto}.next-col-offset-6[dir=rtl]{margin-right:25%;margin-left:auto}.next-col-offset-7[dir=rtl]{margin-right:29.16667%;margin-left:auto}.next-col-offset-8[dir=rtl]{margin-right:33.33333%;margin-left:auto}.next-col-offset-9[dir=rtl]{margin-right:37.5%;margin-left:auto}.next-col-offset-10[dir=rtl]{margin-right:41.66667%;margin-left:auto}.next-col-offset-11[dir=rtl]{margin-right:45.83333%;margin-left:auto}.next-col-offset-12[dir=rtl]{margin-right:50%;margin-left:auto}.next-col-offset-13[dir=rtl]{margin-right:54.16667%;margin-left:auto}.next-col-offset-14[dir=rtl]{margin-right:58.33333%;margin-left:auto}.next-col-offset-15[dir=rtl]{margin-right:62.5%;margin-left:auto}.next-col-offset-16[dir=rtl]{margin-right:66.66667%;margin-left:auto}.next-col-offset-17[dir=rtl]{margin-right:70.83333%;margin-left:auto}.next-col-offset-18[dir=rtl]{margin-right:75%;margin-left:auto}.next-col-offset-19[dir=rtl]{margin-right:79.16667%;margin-left:auto}.next-col-offset-20[dir=rtl]{margin-right:83.33333%;margin-left:auto}.next-col-offset-21[dir=rtl]{margin-right:87.5%;margin-left:auto}.next-col-offset-22[dir=rtl]{margin-right:91.66667%;margin-left:auto}.next-col-offset-23[dir=rtl]{margin-right:95.83333%;margin-left:auto}.next-col-offset-24[dir=rtl]{margin-right:100%;margin-left:auto}@media (min-width:320px){.next-col-xxs-offset-1[dir=rtl]{margin-right:4.16667%;margin-left:auto}.next-col-xxs-offset-2[dir=rtl]{margin-right:8.33333%;margin-left:auto}.next-col-xxs-offset-3[dir=rtl]{margin-right:12.5%;margin-left:auto}.next-col-xxs-offset-4[dir=rtl]{margin-right:16.66667%;margin-left:auto}.next-col-xxs-offset-5[dir=rtl]{margin-right:20.83333%;margin-left:auto}.next-col-xxs-offset-6[dir=rtl]{margin-right:25%;margin-left:auto}.next-col-xxs-offset-7[dir=rtl]{margin-right:29.16667%;margin-left:auto}.next-col-xxs-offset-8[dir=rtl]{margin-right:33.33333%;margin-left:auto}.next-col-xxs-offset-9[dir=rtl]{margin-right:37.5%;margin-left:auto}.next-col-xxs-offset-10[dir=rtl]{margin-right:41.66667%;margin-left:auto}.next-col-xxs-offset-11[dir=rtl]{margin-right:45.83333%;margin-left:auto}.next-col-xxs-offset-12[dir=rtl]{margin-right:50%;margin-left:auto}.next-col-xxs-offset-13[dir=rtl]{margin-right:54.16667%;margin-left:auto}.next-col-xxs-offset-14[dir=rtl]{margin-right:58.33333%;margin-left:auto}.next-col-xxs-offset-15[dir=rtl]{margin-right:62.5%;margin-left:auto}.next-col-xxs-offset-16[dir=rtl]{margin-right:66.66667%;margin-left:auto}.next-col-xxs-offset-17[dir=rtl]{margin-right:70.83333%;margin-left:auto}.next-col-xxs-offset-18[dir=rtl]{margin-right:75%;margin-left:auto}.next-col-xxs-offset-19[dir=rtl]{margin-right:79.16667%;margin-left:auto}.next-col-xxs-offset-20[dir=rtl]{margin-right:83.33333%;margin-left:auto}.next-col-xxs-offset-21[dir=rtl]{margin-right:87.5%;margin-left:auto}.next-col-xxs-offset-22[dir=rtl]{margin-right:91.66667%;margin-left:auto}.next-col-xxs-offset-23[dir=rtl]{margin-right:95.83333%;margin-left:auto}.next-col-xxs-offset-24[dir=rtl]{margin-right:100%;margin-left:auto}}@media (min-width:480px){.next-col-xs-offset-1[dir=rtl]{margin-right:4.16667%;margin-left:auto}.next-col-xs-offset-2[dir=rtl]{margin-right:8.33333%;margin-left:auto}.next-col-xs-offset-3[dir=rtl]{margin-right:12.5%;margin-left:auto}.next-col-xs-offset-4[dir=rtl]{margin-right:16.66667%;margin-left:auto}.next-col-xs-offset-5[dir=rtl]{margin-right:20.83333%;margin-left:auto}.next-col-xs-offset-6[dir=rtl]{margin-right:25%;margin-left:auto}.next-col-xs-offset-7[dir=rtl]{margin-right:29.16667%;margin-left:auto}.next-col-xs-offset-8[dir=rtl]{margin-right:33.33333%;margin-left:auto}.next-col-xs-offset-9[dir=rtl]{margin-right:37.5%;margin-left:auto}.next-col-xs-offset-10[dir=rtl]{margin-right:41.66667%;margin-left:auto}.next-col-xs-offset-11[dir=rtl]{margin-right:45.83333%;margin-left:auto}.next-col-xs-offset-12[dir=rtl]{margin-right:50%;margin-left:auto}.next-col-xs-offset-13[dir=rtl]{margin-right:54.16667%;margin-left:auto}.next-col-xs-offset-14[dir=rtl]{margin-right:58.33333%;margin-left:auto}.next-col-xs-offset-15[dir=rtl]{margin-right:62.5%;margin-left:auto}.next-col-xs-offset-16[dir=rtl]{margin-right:66.66667%;margin-left:auto}.next-col-xs-offset-17[dir=rtl]{margin-right:70.83333%;margin-left:auto}.next-col-xs-offset-18[dir=rtl]{margin-right:75%;margin-left:auto}.next-col-xs-offset-19[dir=rtl]{margin-right:79.16667%;margin-left:auto}.next-col-xs-offset-20[dir=rtl]{margin-right:83.33333%;margin-left:auto}.next-col-xs-offset-21[dir=rtl]{margin-right:87.5%;margin-left:auto}.next-col-xs-offset-22[dir=rtl]{margin-right:91.66667%;margin-left:auto}.next-col-xs-offset-23[dir=rtl]{margin-right:95.83333%;margin-left:auto}.next-col-xs-offset-24[dir=rtl]{margin-right:100%;margin-left:auto}}@media (min-width:720px){.next-col-s-offset-1[dir=rtl]{margin-right:4.16667%;margin-left:auto}.next-col-s-offset-2[dir=rtl]{margin-right:8.33333%;margin-left:auto}.next-col-s-offset-3[dir=rtl]{margin-right:12.5%;margin-left:auto}.next-col-s-offset-4[dir=rtl]{margin-right:16.66667%;margin-left:auto}.next-col-s-offset-5[dir=rtl]{margin-right:20.83333%;margin-left:auto}.next-col-s-offset-6[dir=rtl]{margin-right:25%;margin-left:auto}.next-col-s-offset-7[dir=rtl]{margin-right:29.16667%;margin-left:auto}.next-col-s-offset-8[dir=rtl]{margin-right:33.33333%;margin-left:auto}.next-col-s-offset-9[dir=rtl]{margin-right:37.5%;margin-left:auto}.next-col-s-offset-10[dir=rtl]{margin-right:41.66667%;margin-left:auto}.next-col-s-offset-11[dir=rtl]{margin-right:45.83333%;margin-left:auto}.next-col-s-offset-12[dir=rtl]{margin-right:50%;margin-left:auto}.next-col-s-offset-13[dir=rtl]{margin-right:54.16667%;margin-left:auto}.next-col-s-offset-14[dir=rtl]{margin-right:58.33333%;margin-left:auto}.next-col-s-offset-15[dir=rtl]{margin-right:62.5%;margin-left:auto}.next-col-s-offset-16[dir=rtl]{margin-right:66.66667%;margin-left:auto}.next-col-s-offset-17[dir=rtl]{margin-right:70.83333%;margin-left:auto}.next-col-s-offset-18[dir=rtl]{margin-right:75%;margin-left:auto}.next-col-s-offset-19[dir=rtl]{margin-right:79.16667%;margin-left:auto}.next-col-s-offset-20[dir=rtl]{margin-right:83.33333%;margin-left:auto}.next-col-s-offset-21[dir=rtl]{margin-right:87.5%;margin-left:auto}.next-col-s-offset-22[dir=rtl]{margin-right:91.66667%;margin-left:auto}.next-col-s-offset-23[dir=rtl]{margin-right:95.83333%;margin-left:auto}.next-col-s-offset-24[dir=rtl]{margin-right:100%;margin-left:auto}}@media (min-width:990px){.next-col-m-offset-1[dir=rtl]{margin-right:4.16667%;margin-left:auto}.next-col-m-offset-2[dir=rtl]{margin-right:8.33333%;margin-left:auto}.next-col-m-offset-3[dir=rtl]{margin-right:12.5%;margin-left:auto}.next-col-m-offset-4[dir=rtl]{margin-right:16.66667%;margin-left:auto}.next-col-m-offset-5[dir=rtl]{margin-right:20.83333%;margin-left:auto}.next-col-m-offset-6[dir=rtl]{margin-right:25%;margin-left:auto}.next-col-m-offset-7[dir=rtl]{margin-right:29.16667%;margin-left:auto}.next-col-m-offset-8[dir=rtl]{margin-right:33.33333%;margin-left:auto}.next-col-m-offset-9[dir=rtl]{margin-right:37.5%;margin-left:auto}.next-col-m-offset-10[dir=rtl]{margin-right:41.66667%;margin-left:auto}.next-col-m-offset-11[dir=rtl]{margin-right:45.83333%;margin-left:auto}.next-col-m-offset-12[dir=rtl]{margin-right:50%;margin-left:auto}.next-col-m-offset-13[dir=rtl]{margin-right:54.16667%;margin-left:auto}.next-col-m-offset-14[dir=rtl]{margin-right:58.33333%;margin-left:auto}.next-col-m-offset-15[dir=rtl]{margin-right:62.5%;margin-left:auto}.next-col-m-offset-16[dir=rtl]{margin-right:66.66667%;margin-left:auto}.next-col-m-offset-17[dir=rtl]{margin-right:70.83333%;margin-left:auto}.next-col-m-offset-18[dir=rtl]{margin-right:75%;margin-left:auto}.next-col-m-offset-19[dir=rtl]{margin-right:79.16667%;margin-left:auto}.next-col-m-offset-20[dir=rtl]{margin-right:83.33333%;margin-left:auto}.next-col-m-offset-21[dir=rtl]{margin-right:87.5%;margin-left:auto}.next-col-m-offset-22[dir=rtl]{margin-right:91.66667%;margin-left:auto}.next-col-m-offset-23[dir=rtl]{margin-right:95.83333%;margin-left:auto}.next-col-m-offset-24[dir=rtl]{margin-right:100%;margin-left:auto}}@media (min-width:1200px){.next-col-l-offset-1[dir=rtl]{margin-right:4.16667%;margin-left:auto}.next-col-l-offset-2[dir=rtl]{margin-right:8.33333%;margin-left:auto}.next-col-l-offset-3[dir=rtl]{margin-right:12.5%;margin-left:auto}.next-col-l-offset-4[dir=rtl]{margin-right:16.66667%;margin-left:auto}.next-col-l-offset-5[dir=rtl]{margin-right:20.83333%;margin-left:auto}.next-col-l-offset-6[dir=rtl]{margin-right:25%;margin-left:auto}.next-col-l-offset-7[dir=rtl]{margin-right:29.16667%;margin-left:auto}.next-col-l-offset-8[dir=rtl]{margin-right:33.33333%;margin-left:auto}.next-col-l-offset-9[dir=rtl]{margin-right:37.5%;margin-left:auto}.next-col-l-offset-10[dir=rtl]{margin-right:41.66667%;margin-left:auto}.next-col-l-offset-11[dir=rtl]{margin-right:45.83333%;margin-left:auto}.next-col-l-offset-12[dir=rtl]{margin-right:50%;margin-left:auto}.next-col-l-offset-13[dir=rtl]{margin-right:54.16667%;margin-left:auto}.next-col-l-offset-14[dir=rtl]{margin-right:58.33333%;margin-left:auto}.next-col-l-offset-15[dir=rtl]{margin-right:62.5%;margin-left:auto}.next-col-l-offset-16[dir=rtl]{margin-right:66.66667%;margin-left:auto}.next-col-l-offset-17[dir=rtl]{margin-right:70.83333%;margin-left:auto}.next-col-l-offset-18[dir=rtl]{margin-right:75%;margin-left:auto}.next-col-l-offset-19[dir=rtl]{margin-right:79.16667%;margin-left:auto}.next-col-l-offset-20[dir=rtl]{margin-right:83.33333%;margin-left:auto}.next-col-l-offset-21[dir=rtl]{margin-right:87.5%;margin-left:auto}.next-col-l-offset-22[dir=rtl]{margin-right:91.66667%;margin-left:auto}.next-col-l-offset-23[dir=rtl]{margin-right:95.83333%;margin-left:auto}.next-col-l-offset-24[dir=rtl]{margin-right:100%;margin-left:auto}}@media (min-width:1500px){.next-col-xl-offset-1[dir=rtl]{margin-right:4.16667%;margin-left:auto}.next-col-xl-offset-2[dir=rtl]{margin-right:8.33333%;margin-left:auto}.next-col-xl-offset-3[dir=rtl]{margin-right:12.5%;margin-left:auto}.next-col-xl-offset-4[dir=rtl]{margin-right:16.66667%;margin-left:auto}.next-col-xl-offset-5[dir=rtl]{margin-right:20.83333%;margin-left:auto}.next-col-xl-offset-6[dir=rtl]{margin-right:25%;margin-left:auto}.next-col-xl-offset-7[dir=rtl]{margin-right:29.16667%;margin-left:auto}.next-col-xl-offset-8[dir=rtl]{margin-right:33.33333%;margin-left:auto}.next-col-xl-offset-9[dir=rtl]{margin-right:37.5%;margin-left:auto}.next-col-xl-offset-10[dir=rtl]{margin-right:41.66667%;margin-left:auto}.next-col-xl-offset-11[dir=rtl]{margin-right:45.83333%;margin-left:auto}.next-col-xl-offset-12[dir=rtl]{margin-right:50%;margin-left:auto}.next-col-xl-offset-13[dir=rtl]{margin-right:54.16667%;margin-left:auto}.next-col-xl-offset-14[dir=rtl]{margin-right:58.33333%;margin-left:auto}.next-col-xl-offset-15[dir=rtl]{margin-right:62.5%;margin-left:auto}.next-col-xl-offset-16[dir=rtl]{margin-right:66.66667%;margin-left:auto}.next-col-xl-offset-17[dir=rtl]{margin-right:70.83333%;margin-left:auto}.next-col-xl-offset-18[dir=rtl]{margin-right:75%;margin-left:auto}.next-col-xl-offset-19[dir=rtl]{margin-right:79.16667%;margin-left:auto}.next-col-xl-offset-20[dir=rtl]{margin-right:83.33333%;margin-left:auto}.next-col-xl-offset-21[dir=rtl]{margin-right:87.5%;margin-left:auto}.next-col-xl-offset-22[dir=rtl]{margin-right:91.66667%;margin-left:auto}.next-col-xl-offset-23[dir=rtl]{margin-right:95.83333%;margin-left:auto}.next-col-xl-offset-24[dir=rtl]{margin-right:100%;margin-left:auto}}.next-col-offset-fixed-1[dir=rtl]{margin-right:20px;margin-left:auto}.next-col-offset-fixed-2[dir=rtl]{margin-right:40px;margin-left:auto}.next-col-offset-fixed-3[dir=rtl]{margin-right:60px;margin-left:auto}.next-col-offset-fixed-4[dir=rtl]{margin-right:80px;margin-left:auto}.next-col-offset-fixed-5[dir=rtl]{margin-right:100px;margin-left:auto}.next-col-offset-fixed-6[dir=rtl]{margin-right:120px;margin-left:auto}.next-col-offset-fixed-7[dir=rtl]{margin-right:140px;margin-left:auto}.next-col-offset-fixed-8[dir=rtl]{margin-right:160px;margin-left:auto}.next-col-offset-fixed-9[dir=rtl]{margin-right:180px;margin-left:auto}.next-col-offset-fixed-10[dir=rtl]{margin-right:200px;margin-left:auto}.next-col-offset-fixed-11[dir=rtl]{margin-right:220px;margin-left:auto}.next-col-offset-fixed-12[dir=rtl]{margin-right:240px;margin-left:auto}.next-col-offset-fixed-13[dir=rtl]{margin-right:260px;margin-left:auto}.next-col-offset-fixed-14[dir=rtl]{margin-right:280px;margin-left:auto}.next-col-offset-fixed-15[dir=rtl]{margin-right:300px;margin-left:auto}.next-col-offset-fixed-16[dir=rtl]{margin-right:320px;margin-left:auto}.next-col-offset-fixed-17[dir=rtl]{margin-right:340px;margin-left:auto}.next-col-offset-fixed-18[dir=rtl]{margin-right:360px;margin-left:auto}.next-col-offset-fixed-19[dir=rtl]{margin-right:380px;margin-left:auto}.next-col-offset-fixed-20[dir=rtl]{margin-right:400px;margin-left:auto}.next-col-offset-fixed-21[dir=rtl]{margin-right:420px;margin-left:auto}.next-col-offset-fixed-22[dir=rtl]{margin-right:440px;margin-left:auto}.next-col-offset-fixed-23[dir=rtl]{margin-right:460px;margin-left:auto}.next-col-offset-fixed-24[dir=rtl]{margin-right:480px;margin-left:auto}.next-col-offset-fixed-25[dir=rtl]{margin-right:500px;margin-left:auto}.next-col-offset-fixed-26[dir=rtl]{margin-right:520px;margin-left:auto}.next-col-offset-fixed-27[dir=rtl]{margin-right:540px;margin-left:auto}.next-col-offset-fixed-28[dir=rtl]{margin-right:560px;margin-left:auto}.next-col-offset-fixed-29[dir=rtl]{margin-right:580px;margin-left:auto}.next-col-offset-fixed-30[dir=rtl]{margin-right:600px;margin-left:auto}.next-col-offset-fixed-xxs-1[dir=rtl]{margin-right:20px;margin-left:auto}.next-col-offset-fixed-xxs-2[dir=rtl]{margin-right:40px;margin-left:auto}.next-col-offset-fixed-xxs-3[dir=rtl]{margin-right:60px;margin-left:auto}.next-col-offset-fixed-xxs-4[dir=rtl]{margin-right:80px;margin-left:auto}.next-col-offset-fixed-xxs-5[dir=rtl]{margin-right:100px;margin-left:auto}.next-col-offset-fixed-xxs-6[dir=rtl]{margin-right:120px;margin-left:auto}.next-col-offset-fixed-xxs-7[dir=rtl]{margin-right:140px;margin-left:auto}.next-col-offset-fixed-xxs-8[dir=rtl]{margin-right:160px;margin-left:auto}.next-col-offset-fixed-xxs-9[dir=rtl]{margin-right:180px;margin-left:auto}.next-col-offset-fixed-xxs-10[dir=rtl]{margin-right:200px;margin-left:auto}.next-col-offset-fixed-xxs-11[dir=rtl]{margin-right:220px;margin-left:auto}.next-col-offset-fixed-xxs-12[dir=rtl]{margin-right:240px;margin-left:auto}.next-col-offset-fixed-xxs-13[dir=rtl]{margin-right:260px;margin-left:auto}.next-col-offset-fixed-xxs-14[dir=rtl]{margin-right:280px;margin-left:auto}.next-col-offset-fixed-xxs-15[dir=rtl]{margin-right:300px;margin-left:auto}.next-col-offset-fixed-xxs-16[dir=rtl]{margin-right:320px;margin-left:auto}.next-col-offset-fixed-xxs-17[dir=rtl]{margin-right:340px;margin-left:auto}.next-col-offset-fixed-xxs-18[dir=rtl]{margin-right:360px;margin-left:auto}.next-col-offset-fixed-xxs-19[dir=rtl]{margin-right:380px;margin-left:auto}.next-col-offset-fixed-xxs-20[dir=rtl]{margin-right:400px;margin-left:auto}.next-col-offset-fixed-xxs-21[dir=rtl]{margin-right:420px;margin-left:auto}.next-col-offset-fixed-xxs-22[dir=rtl]{margin-right:440px;margin-left:auto}.next-col-offset-fixed-xxs-23[dir=rtl]{margin-right:460px;margin-left:auto}.next-col-offset-fixed-xxs-24[dir=rtl]{margin-right:480px;margin-left:auto}.next-col-offset-fixed-xxs-25[dir=rtl]{margin-right:500px;margin-left:auto}.next-col-offset-fixed-xxs-26[dir=rtl]{margin-right:520px;margin-left:auto}.next-col-offset-fixed-xxs-27[dir=rtl]{margin-right:540px;margin-left:auto}.next-col-offset-fixed-xxs-28[dir=rtl]{margin-right:560px;margin-left:auto}.next-col-offset-fixed-xxs-29[dir=rtl]{margin-right:580px;margin-left:auto}.next-col-offset-fixed-xxs-30[dir=rtl]{margin-right:600px;margin-left:auto}.next-col-offset-fixed-xs-1[dir=rtl]{margin-right:20px;margin-left:auto}.next-col-offset-fixed-xs-2[dir=rtl]{margin-right:40px;margin-left:auto}.next-col-offset-fixed-xs-3[dir=rtl]{margin-right:60px;margin-left:auto}.next-col-offset-fixed-xs-4[dir=rtl]{margin-right:80px;margin-left:auto}.next-col-offset-fixed-xs-5[dir=rtl]{margin-right:100px;margin-left:auto}.next-col-offset-fixed-xs-6[dir=rtl]{margin-right:120px;margin-left:auto}.next-col-offset-fixed-xs-7[dir=rtl]{margin-right:140px;margin-left:auto}.next-col-offset-fixed-xs-8[dir=rtl]{margin-right:160px;margin-left:auto}.next-col-offset-fixed-xs-9[dir=rtl]{margin-right:180px;margin-left:auto}.next-col-offset-fixed-xs-10[dir=rtl]{margin-right:200px;margin-left:auto}.next-col-offset-fixed-xs-11[dir=rtl]{margin-right:220px;margin-left:auto}.next-col-offset-fixed-xs-12[dir=rtl]{margin-right:240px;margin-left:auto}.next-col-offset-fixed-xs-13[dir=rtl]{margin-right:260px;margin-left:auto}.next-col-offset-fixed-xs-14[dir=rtl]{margin-right:280px;margin-left:auto}.next-col-offset-fixed-xs-15[dir=rtl]{margin-right:300px;margin-left:auto}.next-col-offset-fixed-xs-16[dir=rtl]{margin-right:320px;margin-left:auto}.next-col-offset-fixed-xs-17[dir=rtl]{margin-right:340px;margin-left:auto}.next-col-offset-fixed-xs-18[dir=rtl]{margin-right:360px;margin-left:auto}.next-col-offset-fixed-xs-19[dir=rtl]{margin-right:380px;margin-left:auto}.next-col-offset-fixed-xs-20[dir=rtl]{margin-right:400px;margin-left:auto}.next-col-offset-fixed-xs-21[dir=rtl]{margin-right:420px;margin-left:auto}.next-col-offset-fixed-xs-22[dir=rtl]{margin-right:440px;margin-left:auto}.next-col-offset-fixed-xs-23[dir=rtl]{margin-right:460px;margin-left:auto}.next-col-offset-fixed-xs-24[dir=rtl]{margin-right:480px;margin-left:auto}.next-col-offset-fixed-xs-25[dir=rtl]{margin-right:500px;margin-left:auto}.next-col-offset-fixed-xs-26[dir=rtl]{margin-right:520px;margin-left:auto}.next-col-offset-fixed-xs-27[dir=rtl]{margin-right:540px;margin-left:auto}.next-col-offset-fixed-xs-28[dir=rtl]{margin-right:560px;margin-left:auto}.next-col-offset-fixed-xs-29[dir=rtl]{margin-right:580px;margin-left:auto}.next-col-offset-fixed-xs-30[dir=rtl]{margin-right:600px;margin-left:auto}.next-col-offset-fixed-s-1[dir=rtl]{margin-right:20px;margin-left:auto}.next-col-offset-fixed-s-2[dir=rtl]{margin-right:40px;margin-left:auto}.next-col-offset-fixed-s-3[dir=rtl]{margin-right:60px;margin-left:auto}.next-col-offset-fixed-s-4[dir=rtl]{margin-right:80px;margin-left:auto}.next-col-offset-fixed-s-5[dir=rtl]{margin-right:100px;margin-left:auto}.next-col-offset-fixed-s-6[dir=rtl]{margin-right:120px;margin-left:auto}.next-col-offset-fixed-s-7[dir=rtl]{margin-right:140px;margin-left:auto}.next-col-offset-fixed-s-8[dir=rtl]{margin-right:160px;margin-left:auto}.next-col-offset-fixed-s-9[dir=rtl]{margin-right:180px;margin-left:auto}.next-col-offset-fixed-s-10[dir=rtl]{margin-right:200px;margin-left:auto}.next-col-offset-fixed-s-11[dir=rtl]{margin-right:220px;margin-left:auto}.next-col-offset-fixed-s-12[dir=rtl]{margin-right:240px;margin-left:auto}.next-col-offset-fixed-s-13[dir=rtl]{margin-right:260px;margin-left:auto}.next-col-offset-fixed-s-14[dir=rtl]{margin-right:280px;margin-left:auto}.next-col-offset-fixed-s-15[dir=rtl]{margin-right:300px;margin-left:auto}.next-col-offset-fixed-s-16[dir=rtl]{margin-right:320px;margin-left:auto}.next-col-offset-fixed-s-17[dir=rtl]{margin-right:340px;margin-left:auto}.next-col-offset-fixed-s-18[dir=rtl]{margin-right:360px;margin-left:auto}.next-col-offset-fixed-s-19[dir=rtl]{margin-right:380px;margin-left:auto}.next-col-offset-fixed-s-20[dir=rtl]{margin-right:400px;margin-left:auto}.next-col-offset-fixed-s-21[dir=rtl]{margin-right:420px;margin-left:auto}.next-col-offset-fixed-s-22[dir=rtl]{margin-right:440px;margin-left:auto}.next-col-offset-fixed-s-23[dir=rtl]{margin-right:460px;margin-left:auto}.next-col-offset-fixed-s-24[dir=rtl]{margin-right:480px;margin-left:auto}.next-col-offset-fixed-s-25[dir=rtl]{margin-right:500px;margin-left:auto}.next-col-offset-fixed-s-26[dir=rtl]{margin-right:520px;margin-left:auto}.next-col-offset-fixed-s-27[dir=rtl]{margin-right:540px;margin-left:auto}.next-col-offset-fixed-s-28[dir=rtl]{margin-right:560px;margin-left:auto}.next-col-offset-fixed-s-29[dir=rtl]{margin-right:580px;margin-left:auto}.next-col-offset-fixed-s-30[dir=rtl]{margin-right:600px;margin-left:auto}.next-col-offset-fixed-m-1[dir=rtl]{margin-right:20px;margin-left:auto}.next-col-offset-fixed-m-2[dir=rtl]{margin-right:40px;margin-left:auto}.next-col-offset-fixed-m-3[dir=rtl]{margin-right:60px;margin-left:auto}.next-col-offset-fixed-m-4[dir=rtl]{margin-right:80px;margin-left:auto}.next-col-offset-fixed-m-5[dir=rtl]{margin-right:100px;margin-left:auto}.next-col-offset-fixed-m-6[dir=rtl]{margin-right:120px;margin-left:auto}.next-col-offset-fixed-m-7[dir=rtl]{margin-right:140px;margin-left:auto}.next-col-offset-fixed-m-8[dir=rtl]{margin-right:160px;margin-left:auto}.next-col-offset-fixed-m-9[dir=rtl]{margin-right:180px;margin-left:auto}.next-col-offset-fixed-m-10[dir=rtl]{margin-right:200px;margin-left:auto}.next-col-offset-fixed-m-11[dir=rtl]{margin-right:220px;margin-left:auto}.next-col-offset-fixed-m-12[dir=rtl]{margin-right:240px;margin-left:auto}.next-col-offset-fixed-m-13[dir=rtl]{margin-right:260px;margin-left:auto}.next-col-offset-fixed-m-14[dir=rtl]{margin-right:280px;margin-left:auto}.next-col-offset-fixed-m-15[dir=rtl]{margin-right:300px;margin-left:auto}.next-col-offset-fixed-m-16[dir=rtl]{margin-right:320px;margin-left:auto}.next-col-offset-fixed-m-17[dir=rtl]{margin-right:340px;margin-left:auto}.next-col-offset-fixed-m-18[dir=rtl]{margin-right:360px;margin-left:auto}.next-col-offset-fixed-m-19[dir=rtl]{margin-right:380px;margin-left:auto}.next-col-offset-fixed-m-20[dir=rtl]{margin-right:400px;margin-left:auto}.next-col-offset-fixed-m-21[dir=rtl]{margin-right:420px;margin-left:auto}.next-col-offset-fixed-m-22[dir=rtl]{margin-right:440px;margin-left:auto}.next-col-offset-fixed-m-23[dir=rtl]{margin-right:460px;margin-left:auto}.next-col-offset-fixed-m-24[dir=rtl]{margin-right:480px;margin-left:auto}.next-col-offset-fixed-m-25[dir=rtl]{margin-right:500px;margin-left:auto}.next-col-offset-fixed-m-26[dir=rtl]{margin-right:520px;margin-left:auto}.next-col-offset-fixed-m-27[dir=rtl]{margin-right:540px;margin-left:auto}.next-col-offset-fixed-m-28[dir=rtl]{margin-right:560px;margin-left:auto}.next-col-offset-fixed-m-29[dir=rtl]{margin-right:580px;margin-left:auto}.next-col-offset-fixed-m-30[dir=rtl]{margin-right:600px;margin-left:auto}.next-col-offset-fixed-l-1[dir=rtl]{margin-right:20px;margin-left:auto}.next-col-offset-fixed-l-2[dir=rtl]{margin-right:40px;margin-left:auto}.next-col-offset-fixed-l-3[dir=rtl]{margin-right:60px;margin-left:auto}.next-col-offset-fixed-l-4[dir=rtl]{margin-right:80px;margin-left:auto}.next-col-offset-fixed-l-5[dir=rtl]{margin-right:100px;margin-left:auto}.next-col-offset-fixed-l-6[dir=rtl]{margin-right:120px;margin-left:auto}.next-col-offset-fixed-l-7[dir=rtl]{margin-right:140px;margin-left:auto}.next-col-offset-fixed-l-8[dir=rtl]{margin-right:160px;margin-left:auto}.next-col-offset-fixed-l-9[dir=rtl]{margin-right:180px;margin-left:auto}.next-col-offset-fixed-l-10[dir=rtl]{margin-right:200px;margin-left:auto}.next-col-offset-fixed-l-11[dir=rtl]{margin-right:220px;margin-left:auto}.next-col-offset-fixed-l-12[dir=rtl]{margin-right:240px;margin-left:auto}.next-col-offset-fixed-l-13[dir=rtl]{margin-right:260px;margin-left:auto}.next-col-offset-fixed-l-14[dir=rtl]{margin-right:280px;margin-left:auto}.next-col-offset-fixed-l-15[dir=rtl]{margin-right:300px;margin-left:auto}.next-col-offset-fixed-l-16[dir=rtl]{margin-right:320px;margin-left:auto}.next-col-offset-fixed-l-17[dir=rtl]{margin-right:340px;margin-left:auto}.next-col-offset-fixed-l-18[dir=rtl]{margin-right:360px;margin-left:auto}.next-col-offset-fixed-l-19[dir=rtl]{margin-right:380px;margin-left:auto}.next-col-offset-fixed-l-20[dir=rtl]{margin-right:400px;margin-left:auto}.next-col-offset-fixed-l-21[dir=rtl]{margin-right:420px;margin-left:auto}.next-col-offset-fixed-l-22[dir=rtl]{margin-right:440px;margin-left:auto}.next-col-offset-fixed-l-23[dir=rtl]{margin-right:460px;margin-left:auto}.next-col-offset-fixed-l-24[dir=rtl]{margin-right:480px;margin-left:auto}.next-col-offset-fixed-l-25[dir=rtl]{margin-right:500px;margin-left:auto}.next-col-offset-fixed-l-26[dir=rtl]{margin-right:520px;margin-left:auto}.next-col-offset-fixed-l-27[dir=rtl]{margin-right:540px;margin-left:auto}.next-col-offset-fixed-l-28[dir=rtl]{margin-right:560px;margin-left:auto}.next-col-offset-fixed-l-29[dir=rtl]{margin-right:580px;margin-left:auto}.next-col-offset-fixed-l-30[dir=rtl]{margin-right:600px;margin-left:auto}.next-col-offset-fixed-xl-1[dir=rtl]{margin-right:20px;margin-left:auto}.next-col-offset-fixed-xl-2[dir=rtl]{margin-right:40px;margin-left:auto}.next-col-offset-fixed-xl-3[dir=rtl]{margin-right:60px;margin-left:auto}.next-col-offset-fixed-xl-4[dir=rtl]{margin-right:80px;margin-left:auto}.next-col-offset-fixed-xl-5[dir=rtl]{margin-right:100px;margin-left:auto}.next-col-offset-fixed-xl-6[dir=rtl]{margin-right:120px;margin-left:auto}.next-col-offset-fixed-xl-7[dir=rtl]{margin-right:140px;margin-left:auto}.next-col-offset-fixed-xl-8[dir=rtl]{margin-right:160px;margin-left:auto}.next-col-offset-fixed-xl-9[dir=rtl]{margin-right:180px;margin-left:auto}.next-col-offset-fixed-xl-10[dir=rtl]{margin-right:200px;margin-left:auto}.next-col-offset-fixed-xl-11[dir=rtl]{margin-right:220px;margin-left:auto}.next-col-offset-fixed-xl-12[dir=rtl]{margin-right:240px;margin-left:auto}.next-col-offset-fixed-xl-13[dir=rtl]{margin-right:260px;margin-left:auto}.next-col-offset-fixed-xl-14[dir=rtl]{margin-right:280px;margin-left:auto}.next-col-offset-fixed-xl-15[dir=rtl]{margin-right:300px;margin-left:auto}.next-col-offset-fixed-xl-16[dir=rtl]{margin-right:320px;margin-left:auto}.next-col-offset-fixed-xl-17[dir=rtl]{margin-right:340px;margin-left:auto}.next-col-offset-fixed-xl-18[dir=rtl]{margin-right:360px;margin-left:auto}.next-col-offset-fixed-xl-19[dir=rtl]{margin-right:380px;margin-left:auto}.next-col-offset-fixed-xl-20[dir=rtl]{margin-right:400px;margin-left:auto}.next-col-offset-fixed-xl-21[dir=rtl]{margin-right:420px;margin-left:auto}.next-col-offset-fixed-xl-22[dir=rtl]{margin-right:440px;margin-left:auto}.next-col-offset-fixed-xl-23[dir=rtl]{margin-right:460px;margin-left:auto}.next-col-offset-fixed-xl-24[dir=rtl]{margin-right:480px;margin-left:auto}.next-col-offset-fixed-xl-25[dir=rtl]{margin-right:500px;margin-left:auto}.next-col-offset-fixed-xl-26[dir=rtl]{margin-right:520px;margin-left:auto}.next-col-offset-fixed-xl-27[dir=rtl]{margin-right:540px;margin-left:auto}.next-col-offset-fixed-xl-28[dir=rtl]{margin-right:560px;margin-left:auto}.next-col-offset-fixed-xl-29[dir=rtl]{margin-right:580px;margin-left:auto}.next-col-offset-fixed-xl-30[dir=rtl]{margin-right:600px;margin-left:auto}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-form,.next-form *,.next-form :after,.next-form :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-form-item{margin-bottom:16px}.next-form-item.has-error .next-form-item-help{color:#ff3000}.next-form-item .next-form-item-label,.next-form-item .next-form-text-align,.next-form-item p{line-height:28px}.next-form-item .next-form-text-align,.next-form-item p{margin:0}.next-form-item .next-checkbox-group,.next-form-item .next-checkbox-wrapper,.next-form-item .next-radio-group,.next-form-item .next-radio-wrapper{line-height:24px}.next-form-item .next-form-item-label{font-size:12px}.next-form-item.next-large{margin-bottom:20px}.next-form-item.next-large .next-form-item-label,.next-form-item.next-large .next-form-text-align,.next-form-item.next-large p{line-height:40px}.next-form-item.next-large .next-checkbox-group,.next-form-item.next-large .next-checkbox-wrapper,.next-form-item.next-large .next-radio-group,.next-form-item.next-large .next-radio-wrapper{line-height:39px}.next-form-item.next-large .next-switch{margin-top:7px}.next-form-item.next-large .next-form-item-label{font-size:16px}.next-form-item.next-small{margin-bottom:12px}.next-form-item.next-small .next-checkbox-group,.next-form-item.next-small .next-checkbox-wrapper,.next-form-item.next-small .next-form-item-label,.next-form-item.next-small .next-form-text-align,.next-form-item.next-small .next-radio-group,.next-form-item.next-small .next-radio-wrapper,.next-form-item.next-small p{line-height:20px}.next-form-item.next-small .next-form-item-label{font-size:12px}.next-form-item.next-top>.next-form-item-label{margin-bottom:2px}.next-form-item.next-inset .next-form-item-label{padding-right:0;padding-left:0;line-height:inherit}.next-form-item-control .next-form-text-align{margin:0}.next-form-item-control>.next-input,.next-form-item-control>.next-input-group{width:100%}.next-form-item-label{display:inline-block;vertical-align:top;color:#666;text-align:right;padding-right:12px}.next-form-item-label label[required]:before{margin-right:4px;content:"*";color:#ff3000}.next-form-item-label.next-left{text-align:left}.next-form-item-label.next-left>label[required]:before{display:none}.next-form-item-label.next-left>label[required]:after{margin-left:4px;content:"*";color:#ff3000}.next-form-item-help{margin-top:4px;font-size:12px;line-height:1.5;color:#999}.next-form.next-inline .next-form-item{display:inline-block;vertical-align:top}.next-form.next-inline .next-form-item.next-left .next-form-item-control{display:inline-block;vertical-align:top;line-height:0}.next-form.next-inline .next-form-item:not(:last-child){margin-right:20px}.next-form.next-inline .next-form-item.next-large:not(:last-child){margin-right:24px}.next-form.next-inline .next-form-item.next-small:not(:last-child){margin-right:16px}@media screen and (min-width:0\0) and (min-resolution:0.001dpcm){.next-form-item.next-left>.next-form-item-label,.next-form.next-inline .next-form-item.next-left .next-form-item-control{display:table-cell}}.next-form[dir=rtl] .next-form-item-label{text-align:left;padding-left:12px;padding-right:0}.next-form[dir=rtl].next-inline .next-form-item:not(:last-child){margin-left:20px;margin-right:0}.next-form[dir=rtl].next-inline .next-form-item.next-large:not(:last-child){margin-left:24px;margin-right:0}.next-form[dir=rtl].next-inline .next-form-item.next-small:not(:last-child){margin-left:16px;margin-right:0} \ No newline at end of file diff --git a/demos/form/deps.json b/demos/form/deps.json new file mode 100644 index 0000000000..cd7186b535 --- /dev/null +++ b/demos/form/deps.json @@ -0,0 +1 @@ +["grid","button","demo-helper","input","field","select"] \ No newline at end of file diff --git a/demos/form/index.html b/demos/form/index.html new file mode 100644 index 0000000000..92979faa05 --- /dev/null +++ b/demos/form/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/input/build/index.css b/demos/input/build/index.css new file mode 100644 index 0000000000..a181424bb2 --- /dev/null +++ b/demos/input/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-input{vertical-align:middle;display:inline-table;border-collapse:separate;font-size:0;line-height:1;width:200px;border-spacing:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;border:1px solid #c4c6cf;background-color:#fff}.next-input,.next-input *,.next-input :after,.next-input :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input input{height:100%}.next-input input[type=reset],.next-input input[type=submit]{-webkit-appearance:button;cursor:pointer}.next-input input::-moz-focus-inner{border:0;padding:0}.next-input input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset}.next-input textarea{resize:none}.next-input input,.next-input textarea{width:100%;border:none;outline:none;padding:0;margin:0;font-weight:400;vertical-align:middle;background-color:transparent;color:#333}.next-input input::-ms-clear,.next-input textarea::-ms-clear{display:none}.next-input.next-input-textarea{border-radius:3px;font-size:0}.next-input.next-input-textarea textarea{color:#333;padding:4px 8px;font-size:12px;border-radius:3px}.next-input.next-input-textarea .next-input-control{display:block;width:auto;border-radius:3px}.next-input.next-input-textarea .next-input-len{padding:0 8px 4px;display:block;text-align:right;width:auto}.next-input.next-small{height:20px;border-radius:3px}.next-input.next-small .next-input-label{padding-left:8px;font-size:12px}.next-input.next-small .next-input-inner{font-size:12px}.next-input.next-small .next-input-control{padding-right:4px}.next-input.next-small input{height:18px;line-height:18px \0;padding:0 4px;font-size:12px}.next-input.next-small input::-webkit-input-placeholder{font-size:12px}.next-input.next-small input::-moz-placeholder{font-size:12px}.next-input.next-small input::-ms-input-placeholder{font-size:12px}.next-input.next-small input::placeholder{font-size:12px}.next-input.next-small .next-input-text-field{padding:0 4px;font-size:12px;height:18px;line-height:18px}.next-input.next-small .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-small input{border-radius:3px}.next-input.next-small .next-input-control{border-radius:0 3px 3px 0}.next-input.next-medium{height:28px;border-radius:3px}.next-input.next-medium .next-input-label{padding-left:8px;font-size:12px}.next-input.next-medium .next-input-inner{font-size:12px}.next-input.next-medium .next-input-control{padding-right:8px}.next-input.next-medium input{height:26px;line-height:26px \0;padding:0 8px;font-size:12px}.next-input.next-medium input::-webkit-input-placeholder{font-size:12px}.next-input.next-medium input::-moz-placeholder{font-size:12px}.next-input.next-medium input::-ms-input-placeholder{font-size:12px}.next-input.next-medium input::placeholder{font-size:12px}.next-input.next-medium .next-input-text-field{padding:0 8px;font-size:12px;height:26px;line-height:26px}.next-input.next-medium .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-medium input{border-radius:3px}.next-input.next-medium .next-input-control{border-radius:0 3px 3px 0}.next-input.next-large{height:40px;border-radius:3px}.next-input.next-large .next-input-label{padding-left:12px;font-size:16px}.next-input.next-large .next-input-inner{font-size:16px}.next-input.next-large .next-input-control{padding-right:8px}.next-input.next-large input{height:38px;line-height:38px \0;padding:0 12px;font-size:16px}.next-input.next-large input::-webkit-input-placeholder{font-size:16px}.next-input.next-large input::-moz-placeholder{font-size:16px}.next-input.next-large input::-ms-input-placeholder{font-size:16px}.next-input.next-large input::placeholder{font-size:16px}.next-input.next-large .next-input-text-field{padding:0 12px;font-size:16px;height:38px;line-height:38px}.next-input.next-large .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-input.next-large input{border-radius:3px}.next-input.next-large .next-input-control{border-radius:0 3px 3px 0}.next-input-hint-wrap{color:#999;position:relative}.next-input-hint-wrap .next-input-clear{opacity:0;z-index:1;position:absolute}.next-input-hint-wrap .next-input-hint{opacity:1}.next-input .next-icon-delete-filling:hover{cursor:pointer;color:#666}.next-input.next-focus,.next-input:hover{border-color:#a0a2ad;background-color:#fff}.next-input.next-focus .next-input-clear,.next-input:hover .next-input-clear{opacity:1}.next-input.next-focus .next-input-clear+.next-input-hint,.next-input:hover .next-input-clear+.next-input-hint{opacity:0}.next-input .next-input-clear:focus{opacity:1}.next-input .next-input-clear:focus+.next-input-hint{opacity:0}.next-input.next-focus{border-color:#5584ff;background-color:#fff}.next-input.next-error,.next-input.next-error.next-focus,.next-input.next-error:hover{border-color:#ff3000}.next-input.next-hidden{display:none}.next-input.next-noborder{border:none}.next-input-control .next-input-len{font-size:12px;line-height:12px;color:#999;display:table-cell;width:1px;vertical-align:bottom}.next-input-control .next-input-len.next-error{color:#ff3000}.next-input-control>*{display:table-cell;width:1%;top:0}.next-input-control>:not(:last-child){padding-right:4px}.next-input-control .next-icon{-webkit-transition:all .3s ease-out;transition:all .3s ease-out;color:#999}.next-input-control .next-icon-success-filling{color:#46bc15}.next-input-control .next-icon-loading{color:#4494f9}.next-input-label{color:#666}.next-input input::-moz-placeholder,.next-input textarea::-moz-placeholder{color:#999;opacity:1}.next-input input:-ms-input-placeholder,.next-input textarea:-ms-input-placeholder{color:#999}.next-input input::-webkit-input-placeholder,.next-input textarea::-webkit-input-placeholder{color:#999}.next-input.next-disabled{color:#ccc;cursor:not-allowed}.next-input.next-disabled,.next-input.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled input::-moz-placeholder,.next-input.next-disabled textarea::-moz-placeholder{color:#ccc;opacity:1}.next-input.next-disabled input:-ms-input-placeholder,.next-input.next-disabled textarea:-ms-input-placeholder{color:#ccc}.next-input.next-disabled input::-webkit-input-placeholder,.next-input.next-disabled textarea::-webkit-input-placeholder{color:#ccc}.next-input.next-disabled .next-input-label,.next-input.next-disabled .next-input-len{color:#ccc}.next-input.next-disabled input,.next-input.next-disabled textarea{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa;cursor:not-allowed}.next-input.next-disabled input:hover,.next-input.next-disabled textarea:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled .next-input-hint-wrap{color:#ccc}.next-input.next-disabled .next-input-hint-wrap .next-input-clear{opacity:0}.next-input.next-disabled .next-input-hint-wrap .next-input-hint{opacity:1}.next-input.next-disabled .next-input-hint-wrap .next-icon-delete-filling:hover{cursor:not-allowed;color:#ccc}.next-input.next-disabled .next-icon{color:#ccc}.next-input-control,.next-input-inner,.next-input-label{display:table-cell;width:1px;vertical-align:middle;line-height:1;background-color:transparent;white-space:nowrap}.next-input-group{display:inline-table;border-collapse:separate;border-spacing:0;line-height:0;width:100%}.next-input-group,.next-input-group *,.next-input-group :after,.next-input-group :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input-group-auto-width{width:100%;border-radius:0!important}.next-input-group>.next-input:first-child.next-large,.next-input-group>.next-input:first-child.next-medium,.next-input-group>.next-input:first-child.next-small{border-top-left-radius:3px!important;border-bottom-left-radius:3px!important}.next-input-group>.next-input:last-child.next-large,.next-input-group>.next-input:last-child.next-medium,.next-input-group>.next-input:last-child.next-small{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.next-input-group-addon{width:1px;display:table-cell;vertical-align:middle;white-space:nowrap}.next-input-group-addon:first-child,.next-input-group-addon:first-child>*{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group-addon:last-child,.next-input-group-addon:last-child>*{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group-text{color:#999;background-color:#f2f3f7;text-align:center;border:1px solid #c4c6cf;padding:0 8px}.next-input-group-text:first-child{border-right-width:0}.next-input-group-text:last-child{border-left-width:0}.next-input-group-text.next-disabled{color:#ccc;cursor:not-allowed}.next-input-group-text.next-disabled,.next-input-group-text.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input-group-text.next-medium,.next-input-group-text.next-small{font-size:12px;border-radius:3px}.next-input-group-text.next-large{font-size:16px;border-radius:3px}.next-input[dir=rtl].next-small .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-small .next-input-control{padding-right:0;padding-left:4px}.next-input[dir=rtl].next-medium .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-medium .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-large .next-input-label{padding-left:0;padding-right:12px}.next-input[dir=rtl].next-large .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-input-textarea .next-input-len{text-align:left}.next-input[dir=rtl] .next-input-control>:not(:last-child){padding-left:4px;padding-right:0}.next-input-group[dir=rtl] .next-input-group-addon:first-child{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-small{border-bottom-right-radius:3px!important;border-top-right-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-small{border-bottom-left-radius:3px!important;border-top-left-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-text:first-child{border-right-width:1px;border-left:0}.next-input-group[dir=rtl] .next-input-group-text:last-child{border-left-width:1px;border-right:0} \ No newline at end of file diff --git a/demos/input/deps.json b/demos/input/deps.json new file mode 100644 index 0000000000..963cf92bcf --- /dev/null +++ b/demos/input/deps.json @@ -0,0 +1 @@ +["icon","demo-helper"] \ No newline at end of file diff --git a/demos/input/index.html b/demos/input/index.html new file mode 100644 index 0000000000..439c82f95f --- /dev/null +++ b/demos/input/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/loading/build/index.css b/demos/loading/build/index.css new file mode 100644 index 0000000000..60829a6c3c --- /dev/null +++ b/demos/loading/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-overlay-wrapper .next-overlay-inner{z-index:1001}.next-overlay-wrapper .next-overlay-backdrop{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;background:#000;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0}.next-overlay-wrapper.opened .next-overlay-backdrop{opacity:.2}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-loading-fusion-reactor[dir=rtl]{-webkit-animation-name:nextVectorRouteRTL;animation-name:nextVectorRouteRTL}@-webkit-keyframes nextVectorRouteRTL{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}5%{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}25%{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}30%{-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}50%{-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}55%{-webkit-transform:rotate(-270deg);-ms-transform:rotate(-270deg);transform:rotate(-270deg)}75%{-webkit-transform:rotate(-270deg);-ms-transform:rotate(-270deg);transform:rotate(-270deg)}80%{-webkit-transform:rotate(-1turn);-ms-transform:rotate(-1turn);transform:rotate(-1turn)}to{-webkit-transform:rotate(-1turn);-ms-transform:rotate(-1turn);transform:rotate(-1turn)}}@keyframes nextVectorRouteRTL{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}5%{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}25%{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}30%{-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}50%{-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}55%{-webkit-transform:rotate(-270deg);-ms-transform:rotate(-270deg);transform:rotate(-270deg)}75%{-webkit-transform:rotate(-270deg);-ms-transform:rotate(-270deg);transform:rotate(-270deg)}80%{-webkit-transform:rotate(-1turn);-ms-transform:rotate(-1turn);transform:rotate(-1turn)}to{-webkit-transform:rotate(-1turn);-ms-transform:rotate(-1turn);transform:rotate(-1turn)}}.next-loading{position:relative}.next-loading.next-open{pointer-events:none}.next-loading .next-loading-component{opacity:.7;-webkit-filter:blur(1px);filter:blur(1px);-webkit-filter:"progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false)";filter:"progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false)";position:relative;pointer-events:none}.next-loading-masker{position:absolute;top:0;bottom:0;left:0;right:0;z-index:99;opacity:.2;background:#fff}.next-loading-inline{display:inline-block}.next-loading-tip{display:block;position:absolute;top:50%;left:50%;z-index:4;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-align:center}.next-loading-tip-fullscreen{top:inherit;left:inherit;-webkit-transform:inherit;-ms-transform:inherit;transform:inherit}.next-loading-tip-placeholder{display:none}.next-loading-right-tip .next-loading-indicator{display:inline-block}.next-loading-right-tip .next-loading-tip-content{position:absolute;display:block;top:50%;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.next-loading-right-tip .next-loading-tip-placeholder{display:inline-block;visibility:hidden;margin-left:1em}.next-loading-fusion-reactor{display:inline-block;width:48px;height:48px;position:relative;margin:0;-webkit-animation-duration:5.6s;animation-duration:5.6s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:nextVectorRoute;animation-name:nextVectorRoute}.next-loading-fusion-reactor .next-loading-dot{position:absolute;margin:auto;width:12px;height:12px;border-radius:50%;background:#5584ff;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-duration:1.4s;animation-duration:1.4s}.next-loading-fusion-reactor .next-loading-dot:first-child{top:0;bottom:0;left:0;-webkit-animation-name:nextVectorDotsX;animation-name:nextVectorDotsX}.next-loading-fusion-reactor .next-loading-dot:nth-child(2){left:0;right:0;top:0;opacity:.8;-webkit-animation-name:nextVectorDotsY;animation-name:nextVectorDotsY}.next-loading-fusion-reactor .next-loading-dot:nth-child(3){top:0;bottom:0;right:0;opacity:.6;-webkit-animation-name:nextVectorDotsXR;animation-name:nextVectorDotsXR}.next-loading-fusion-reactor .next-loading-dot:nth-child(4){left:0;right:0;bottom:0;opacity:.2;-webkit-animation-name:nextVectorDotsYR;animation-name:nextVectorDotsYR}.next-loading-medium-fusion-reactor{width:32px;height:32px}.next-loading-medium-fusion-reactor .next-loading-dot{width:8px;height:8px}.next-loading-medium-fusion-reactor .next-loading-dot:first-child{-webkit-animation-name:nextVectorDotsX-medium;animation-name:nextVectorDotsX-medium}.next-loading-medium-fusion-reactor .next-loading-dot:nth-child(2){-webkit-animation-name:nextVectorDotsY-medium;animation-name:nextVectorDotsY-medium}.next-loading-medium-fusion-reactor .next-loading-dot:nth-child(3){-webkit-animation-name:nextVectorDotsXR-medium;animation-name:nextVectorDotsXR-medium}.next-loading-medium-fusion-reactor .next-loading-dot:nth-child(4){-webkit-animation-name:nextVectorDotsYR-medium;animation-name:nextVectorDotsYR-medium}@-webkit-keyframes nextVectorRoute{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}5%{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}25%{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}30%{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}50%{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}55%{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}75%{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}80%{-webkit-transform:rotate(1turn);-ms-transform:rotate(1turn);transform:rotate(1turn)}to{-webkit-transform:rotate(1turn);-ms-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes nextVectorRoute{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}5%{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}25%{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}30%{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}50%{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}55%{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}75%{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}80%{-webkit-transform:rotate(1turn);-ms-transform:rotate(1turn);transform:rotate(1turn)}to{-webkit-transform:rotate(1turn);-ms-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes nextVectorDotsYR{25%{bottom:0}45%,50%{bottom:16.8px;height:14.4px;width:14.4px}90%{bottom:0;height:12px;width:12px}}@keyframes nextVectorDotsYR{25%{bottom:0}45%,50%{bottom:16.8px;height:14.4px;width:14.4px}90%{bottom:0;height:12px;width:12px}}@-webkit-keyframes nextVectorDotsY{25%{top:0}45%,50%{top:16.8px;height:14.4px;width:14.4px}90%{top:0;height:12px;width:12px}}@keyframes nextVectorDotsY{25%{top:0}45%,50%{top:16.8px;height:14.4px;width:14.4px}90%{top:0;height:12px;width:12px}}@-webkit-keyframes nextVectorDotsX{25%{left:0}45%,50%{left:16.8px;width:14.4px;height:14.4px}90%{left:0;height:12px;width:12px}}@keyframes nextVectorDotsX{25%{left:0}45%,50%{left:16.8px;width:14.4px;height:14.4px}90%{left:0;height:12px;width:12px}}@-webkit-keyframes nextVectorDotsXR{25%{right:0}45%,50%{right:16.8px;width:14.4px;height:14.4px}90%{right:0;height:12px;width:12px}}@keyframes nextVectorDotsXR{25%{right:0}45%,50%{right:16.8px;width:14.4px;height:14.4px}90%{right:0;height:12px;width:12px}}@-webkit-keyframes nextVectorDotsYR-medium{25%{bottom:0}45%,50%{bottom:11.2px;height:9.6px;width:9.6px}90%{bottom:0;height:8px;width:8px}}@keyframes nextVectorDotsYR-medium{25%{bottom:0}45%,50%{bottom:11.2px;height:9.6px;width:9.6px}90%{bottom:0;height:8px;width:8px}}@-webkit-keyframes nextVectorDotsY-medium{25%{top:0}45%,50%{top:11.2px;height:9.6px;width:9.6px}90%{top:0;height:8px;width:8px}}@keyframes nextVectorDotsY-medium{25%{top:0}45%,50%{top:11.2px;height:9.6px;width:9.6px}90%{top:0;height:8px;width:8px}}@-webkit-keyframes nextVectorDotsX-medium{25%{left:0}45%,50%{left:11.2px;width:9.6px;height:9.6px}90%{left:0;height:8px;width:8px}}@keyframes nextVectorDotsX-medium{25%{left:0}45%,50%{left:11.2px;width:9.6px;height:9.6px}90%{left:0;height:8px;width:8px}}@-webkit-keyframes nextVectorDotsXR-medium{25%{right:0}45%,50%{right:11.2px;width:9.6px;height:9.6px}90%{right:0;height:8px;width:8px}}@keyframes nextVectorDotsXR-medium{25%{right:0}45%,50%{right:11.2px;width:9.6px;height:9.6px}90%{right:0;height:8px;width:8px}} \ No newline at end of file diff --git a/demos/loading/deps.json b/demos/loading/deps.json new file mode 100644 index 0000000000..035a8afa00 --- /dev/null +++ b/demos/loading/deps.json @@ -0,0 +1 @@ +["icon","animate","overlay","demo-helper"] \ No newline at end of file diff --git a/demos/loading/index.html b/demos/loading/index.html new file mode 100644 index 0000000000..077fe56c55 --- /dev/null +++ b/demos/loading/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/mask/build/index.css b/demos/mask/build/index.css new file mode 100644 index 0000000000..9d017b31b9 --- /dev/null +++ b/demos/mask/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-overlay-wrapper .next-overlay-inner{z-index:1001}.next-overlay-wrapper .next-overlay-backdrop{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;background:#000;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0}.next-overlay-wrapper.opened .next-overlay-backdrop{opacity:.2}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-btn,.next-btn *,.next-btn :after,.next-btn :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-btn::-moz-focus-inner{border:0;padding:0}.next-btn,.next-btn:active,.next-btn:focus,.next-btn:hover{outline:0}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-btn{position:relative;display:inline-block;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;text-align:center;text-transform:none;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;cursor:pointer}.next-btn:after{text-align:center;position:absolute;opacity:0;visibility:hidden;-webkit-transition:opacity .5s ease;transition:opacity .5s ease}.next-btn .next-icon.next-xs:before{vertical-align:baseline}.next-btn.hover,.next-btn:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn.next-small{border-radius:3px;padding:0 8px;height:20px;line-height:18px;font-size:12px;border-width:1px}.next-btn.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-small>.next-btn-icon.next-icon-alone:before,.next-btn.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small.next-btn-loading{padding-left:24px}.next-btn.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:8px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-small.next-btn-loading>.next-icon{display:none}.next-btn.next-medium{border-radius:3px;padding:0 12px;height:28px;line-height:26px;font-size:12px;border-width:1px}.next-btn.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium.next-btn-loading{padding-left:28px}.next-btn.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:12px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-medium.next-btn-loading>.next-icon{display:none}.next-btn.next-large{border-radius:3px;padding:0 16px;height:40px;line-height:38px;font-size:16px;border-width:1px}.next-btn.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-large>.next-btn-icon.next-icon-alone:before,.next-btn.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large.next-btn-loading{padding-left:36px}.next-btn.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:16px;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn.next-large.next-btn-loading>.next-icon{display:none}.next-btn.next-btn-normal{border-style:solid;background-color:#fff;border-color:#c4c6cf}.next-btn.next-btn-normal,.next-btn.next-btn-normal.visited,.next-btn.next-btn-normal:link,.next-btn.next-btn-normal:visited{color:#333}.next-btn.next-btn-normal.active,.next-btn.next-btn-normal.hover,.next-btn.next-btn-normal:active,.next-btn.next-btn-normal:focus,.next-btn.next-btn-normal:hover{color:#333;background-color:#f2f3f7;border-color:#a0a2ad;text-decoration:none}.next-btn.next-btn-primary{border-style:solid;background-color:#5584ff;border-color:transparent}.next-btn.next-btn-primary,.next-btn.next-btn-primary.visited,.next-btn.next-btn-primary:link,.next-btn.next-btn-primary:visited{color:#fff}.next-btn.next-btn-primary.active,.next-btn.next-btn-primary.hover,.next-btn.next-btn-primary:active,.next-btn.next-btn-primary:focus,.next-btn.next-btn-primary:hover{color:#fff;background-color:#3e71f7;border-color:transparent;text-decoration:none}.next-btn.next-btn-secondary{border-style:solid;background-color:#fff;border-color:#5584ff}.next-btn.next-btn-secondary,.next-btn.next-btn-secondary.visited,.next-btn.next-btn-secondary:link,.next-btn.next-btn-secondary:visited{color:#5584ff}.next-btn.next-btn-secondary.active,.next-btn.next-btn-secondary.hover,.next-btn.next-btn-secondary:active,.next-btn.next-btn-secondary:focus,.next-btn.next-btn-secondary:hover{color:#fff;background-color:#3e71f7;border-color:#3e71f7;text-decoration:none}.next-btn.disabled,.next-btn[disabled]{cursor:not-allowed;background-color:#f7f8fa;border-color:#e6e7eb}.next-btn.disabled,.next-btn.disabled.visited,.next-btn.disabled:link,.next-btn.disabled:visited,.next-btn[disabled],.next-btn[disabled].visited,.next-btn[disabled]:link,.next-btn[disabled]:visited{color:#ccc}.next-btn.disabled.active,.next-btn.disabled.hover,.next-btn.disabled:active,.next-btn.disabled:focus,.next-btn.disabled:hover,.next-btn[disabled].active,.next-btn[disabled].hover,.next-btn[disabled]:active,.next-btn[disabled]:focus,.next-btn[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-warning{border-style:solid}.next-btn-warning.next-btn-primary{background-color:#ff3000;border-color:#ff3000}.next-btn-warning.next-btn-primary,.next-btn-warning.next-btn-primary.visited,.next-btn-warning.next-btn-primary:link,.next-btn-warning.next-btn-primary:visited{color:#fff}.next-btn-warning.next-btn-primary.active,.next-btn-warning.next-btn-primary.hover,.next-btn-warning.next-btn-primary:active,.next-btn-warning.next-btn-primary:focus,.next-btn-warning.next-btn-primary:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary[disabled]{background-color:#f7f8fa;border-color:#dcdee3}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary.disabled.visited,.next-btn-warning.next-btn-primary.disabled:link,.next-btn-warning.next-btn-primary.disabled:visited,.next-btn-warning.next-btn-primary[disabled],.next-btn-warning.next-btn-primary[disabled].visited,.next-btn-warning.next-btn-primary[disabled]:link,.next-btn-warning.next-btn-primary[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-primary.disabled.active,.next-btn-warning.next-btn-primary.disabled.hover,.next-btn-warning.next-btn-primary.disabled:active,.next-btn-warning.next-btn-primary.disabled:focus,.next-btn-warning.next-btn-primary.disabled:hover,.next-btn-warning.next-btn-primary[disabled].active,.next-btn-warning.next-btn-primary[disabled].hover,.next-btn-warning.next-btn-primary[disabled]:active,.next-btn-warning.next-btn-primary[disabled]:focus,.next-btn-warning.next-btn-primary[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#dcdee3;text-decoration:none}.next-btn-warning.next-btn-normal{background-color:#fff;border-color:#ff3000}.next-btn-warning.next-btn-normal,.next-btn-warning.next-btn-normal.visited,.next-btn-warning.next-btn-normal:link,.next-btn-warning.next-btn-normal:visited{color:#ff3000}.next-btn-warning.next-btn-normal.active,.next-btn-warning.next-btn-normal.hover,.next-btn-warning.next-btn-normal:active,.next-btn-warning.next-btn-normal:focus,.next-btn-warning.next-btn-normal:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal[disabled]{background-color:#f7f8fa;border-color:#e6e7eb}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal.disabled.visited,.next-btn-warning.next-btn-normal.disabled:link,.next-btn-warning.next-btn-normal.disabled:visited,.next-btn-warning.next-btn-normal[disabled],.next-btn-warning.next-btn-normal[disabled].visited,.next-btn-warning.next-btn-normal[disabled]:link,.next-btn-warning.next-btn-normal[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-normal.disabled.active,.next-btn-warning.next-btn-normal.disabled.hover,.next-btn-warning.next-btn-normal.disabled:active,.next-btn-warning.next-btn-normal.disabled:focus,.next-btn-warning.next-btn-normal.disabled:hover,.next-btn-warning.next-btn-normal[disabled].active,.next-btn-warning.next-btn-normal[disabled].hover,.next-btn-warning.next-btn-normal[disabled]:active,.next-btn-warning.next-btn-normal[disabled]:focus,.next-btn-warning.next-btn-normal[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-text{border-radius:0}.next-btn-text,.next-btn-text.hover,.next-btn-text:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn-text.next-btn-primary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-primary,.next-btn-text.next-btn-primary.visited,.next-btn-text.next-btn-primary:link,.next-btn-text.next-btn-primary:visited{color:#5584ff}.next-btn-text.next-btn-primary.active,.next-btn-text.next-btn-primary.hover,.next-btn-text.next-btn-primary:active,.next-btn-text.next-btn-primary:focus,.next-btn-text.next-btn-primary:hover{color:#3e71f7;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-secondary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-secondary,.next-btn-text.next-btn-secondary.visited,.next-btn-text.next-btn-secondary:link,.next-btn-text.next-btn-secondary:visited{color:#666}.next-btn-text.next-btn-secondary.active,.next-btn-text.next-btn-secondary.hover,.next-btn-text.next-btn-secondary:active,.next-btn-text.next-btn-secondary:focus,.next-btn-text.next-btn-secondary:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-normal{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-normal,.next-btn-text.next-btn-normal.visited,.next-btn-text.next-btn-normal:link,.next-btn-text.next-btn-normal:visited{color:#333}.next-btn-text.next-btn-normal.active,.next-btn-text.next-btn-normal.hover,.next-btn-text.next-btn-normal:active,.next-btn-text.next-btn-normal:focus,.next-btn-text.next-btn-normal:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-large{border-radius:0;padding:0;height:24px;line-height:24px;font-size:14px;border-width:0}.next-btn-text.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-large>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large.next-btn-loading{padding-left:20px}.next-btn-text.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:0;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn-text.next-large.next-btn-loading>.next-icon{display:none}.next-btn-text.next-medium{border-radius:0;padding:0;height:20px;line-height:20px;font-size:12px;border-width:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium.next-btn-loading{padding-left:16px}.next-btn-text.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-medium.next-btn-loading>.next-icon{display:none}.next-btn-text.next-small{border-radius:0;padding:0;height:16px;line-height:16px;font-size:12px;border-width:0}.next-btn-text.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-small>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small.next-btn-loading{padding-left:16px}.next-btn-text.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-small.next-btn-loading>.next-icon{display:none}.next-btn-text.disabled,.next-btn-text[disabled]{background-color:transparent;border-color:transparent}.next-btn-text.disabled,.next-btn-text.disabled.visited,.next-btn-text.disabled:link,.next-btn-text.disabled:visited,.next-btn-text[disabled],.next-btn-text[disabled].visited,.next-btn-text[disabled]:link,.next-btn-text[disabled]:visited{color:#ccc}.next-btn-text.disabled.active,.next-btn-text.disabled.hover,.next-btn-text.disabled:active,.next-btn-text.disabled:focus,.next-btn-text.disabled:hover,.next-btn-text[disabled].active,.next-btn-text[disabled].hover,.next-btn-text[disabled]:active,.next-btn-text[disabled]:focus,.next-btn-text[disabled]:hover{color:#ccc;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-loading{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-loading,.next-btn-text.next-btn-loading.visited,.next-btn-text.next-btn-loading:link,.next-btn-text.next-btn-loading:visited{color:#333}.next-btn-text.next-btn-loading.active,.next-btn-text.next-btn-loading.hover,.next-btn-text.next-btn-loading:active,.next-btn-text.next-btn-loading:focus,.next-btn-text.next-btn-loading:hover{color:#333;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-loading{pointer-events:none}.next-btn-loading:after{font-family:NextIcon;content:"\E646";opacity:1;visibility:visible;-webkit-animation:loadingCircle 2s infinite linear;animation:loadingCircle 2s infinite linear}.next-btn-ghost{-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-btn-ghost.next-btn-dark{background-color:transparent;border-color:#fff}.next-btn-ghost.next-btn-dark,.next-btn-ghost.next-btn-dark.visited,.next-btn-ghost.next-btn-dark:link,.next-btn-ghost.next-btn-dark:visited{color:#fff}.next-btn-ghost.next-btn-dark.active,.next-btn-ghost.next-btn-dark.hover,.next-btn-ghost.next-btn-dark:active,.next-btn-ghost.next-btn-dark:focus,.next-btn-ghost.next-btn-dark:hover{color:#fff;background-color:hsla(0,0%,100%,.8);border-color:#fff;text-decoration:none}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark[disabled]{background-color:transparent;border-color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark.disabled.visited,.next-btn-ghost.next-btn-dark.disabled:link,.next-btn-ghost.next-btn-dark.disabled:visited,.next-btn-ghost.next-btn-dark[disabled],.next-btn-ghost.next-btn-dark[disabled].visited,.next-btn-ghost.next-btn-dark[disabled]:link,.next-btn-ghost.next-btn-dark[disabled]:visited{color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled.active,.next-btn-ghost.next-btn-dark.disabled.hover,.next-btn-ghost.next-btn-dark.disabled:active,.next-btn-ghost.next-btn-dark.disabled:focus,.next-btn-ghost.next-btn-dark.disabled:hover,.next-btn-ghost.next-btn-dark[disabled].active,.next-btn-ghost.next-btn-dark[disabled].hover,.next-btn-ghost.next-btn-dark[disabled]:active,.next-btn-ghost.next-btn-dark[disabled]:focus,.next-btn-ghost.next-btn-dark[disabled]:hover{color:hsla(0,0%,100%,.4);background-color:transparent;border-color:hsla(0,0%,100%,.4);text-decoration:none}.next-btn-ghost.next-btn-light{background-color:transparent;border-color:#333}.next-btn-ghost.next-btn-light,.next-btn-ghost.next-btn-light.visited,.next-btn-ghost.next-btn-light:link,.next-btn-ghost.next-btn-light:visited{color:#333}.next-btn-ghost.next-btn-light.active,.next-btn-ghost.next-btn-light.hover,.next-btn-ghost.next-btn-light:active,.next-btn-ghost.next-btn-light:focus,.next-btn-ghost.next-btn-light:hover{color:#999;background-color:rgba(0,0,0,.92);border-color:#333;text-decoration:none}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light[disabled]{background-color:transparent;border-color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light.disabled.visited,.next-btn-ghost.next-btn-light.disabled:link,.next-btn-ghost.next-btn-light.disabled:visited,.next-btn-ghost.next-btn-light[disabled],.next-btn-ghost.next-btn-light[disabled].visited,.next-btn-ghost.next-btn-light[disabled]:link,.next-btn-ghost.next-btn-light[disabled]:visited{color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled.active,.next-btn-ghost.next-btn-light.disabled.hover,.next-btn-ghost.next-btn-light.disabled:active,.next-btn-ghost.next-btn-light.disabled:focus,.next-btn-ghost.next-btn-light.disabled:hover,.next-btn-ghost.next-btn-light[disabled].active,.next-btn-ghost.next-btn-light[disabled].hover,.next-btn-ghost.next-btn-light[disabled]:active,.next-btn-ghost.next-btn-light[disabled]:focus,.next-btn-ghost.next-btn-light[disabled]:hover{color:rgba(0,0,0,.1);background-color:transparent;border-color:rgba(0,0,0,.1);text-decoration:none}.next-btn-group{position:relative;display:inline-block;vertical-align:middle}.next-btn-group>.next-btn{position:relative;float:left;-webkit-box-shadow:none;box-shadow:none}.next-btn-group>.next-btn.active,.next-btn-group>.next-btn:active,.next-btn-group>.next-btn:focus,.next-btn-group>.next-btn:hover{z-index:1}.next-btn-group>.next-btn.disabled,.next-btn-group>.next-btn[disabled]{z-index:0}.next-btn-group .next-btn.next-btn{margin:0 0 0 -1px}.next-btn-group .next-btn:not(:first-child):not(:last-child){border-radius:0}.next-btn-group>.next-btn:first-child{margin:0}.next-btn-group>.next-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group>.next-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group>.next-btn-primary:not(:first-child){border-left-color:hsla(0,0%,100%,.2)}.next-btn-group>.next-btn-primary:not(:first-child):hover{border-left-color:transparent}.next-btn-group>.next-btn-primary:not(:first-child).disabled,.next-btn-group>.next-btn-primary:not(:first-child)[disabled]{border-left-color:#e6e7eb}.next-btn-group[dir=rtl]>.next-btn{float:right}.next-btn-group[dir=rtl] .next-btn.next-btn{margin:0 -1px 0 0}.next-btn-group[dir=rtl]>.next-btn:first-child:not(:last-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group[dir=rtl]>.next-btn:last-child:not(:first-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child){border-right-color:hsla(0,0%,100%,.2)}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child):hover{border-right-color:transparent}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child).disabled,.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child)[disabled]{border-right-color:#e6e7eb}.next-btn.next-small[dir=rtl]{border-radius:3px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl].next-btn-loading{padding-left:8px;padding-right:24px}.next-btn.next-small[dir=rtl].next-btn-loading:after{right:8px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-medium[dir=rtl]{border-radius:3px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl].next-btn-loading{padding-left:12px;padding-right:28px}.next-btn.next-medium[dir=rtl].next-btn-loading:after{right:12px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-large[dir=rtl]{border-radius:3px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl].next-btn-loading{padding-left:16px;padding-right:36px}.next-btn.next-large[dir=rtl].next-btn-loading:after{right:16px;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-large{border-radius:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large.next-btn-loading{padding-left:0;padding-right:20px}.next-btn-text[dir=rtl].next-large.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-medium{border-radius:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-medium.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-small{border-radius:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-small.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-message{position:relative;display:block;vertical-align:baseline}.next-message,.next-message *,.next-message :after,.next-message :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-message:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-message .next-message-close{color:#999;font-size:0;position:absolute}.next-message .next-message-close .next-icon-close{width:12px;height:12px;line-height:12px}.next-message .next-message-close .next-icon-close:before{width:12px;height:12px;font-size:12px;line-height:12px}.next-message .next-message-close:hover{color:#666}.next-message.next-message-success.next-inline{background-color:#e4fdda;border-color:#e4fdda;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-success.next-inline .next-message-title{color:#333}.next-message.next-message-success.next-inline .next-message-content{color:#666}.next-message.next-message-success.next-inline .next-message-symbol{color:#46bc15}.next-message.next-message-success.next-inline .next-message-symbol-icon:before{content:"\E60A"}.next-message.next-message-success.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-success.next-addon .next-message-title{color:#333}.next-message.next-message-success.next-addon .next-message-content{color:#666}.next-message.next-message-success.next-addon .next-message-symbol{color:#46bc15}.next-message.next-message-success.next-addon .next-message-symbol-icon:before{content:"\E60A"}.next-message.next-message-success.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-success.next-toast .next-message-title{color:#333}.next-message.next-message-success.next-toast .next-message-content{color:#666}.next-message.next-message-success.next-toast .next-message-symbol{color:#46bc15}.next-message.next-message-success.next-toast .next-message-symbol-icon:before{content:"\E60A"}.next-message.next-message-warning.next-inline{background-color:#fff3e0;border-color:#fff3e0;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-warning.next-inline .next-message-title{color:#333}.next-message.next-message-warning.next-inline .next-message-content{color:#666}.next-message.next-message-warning.next-inline .next-message-symbol{color:#ff9300}.next-message.next-message-warning.next-inline .next-message-symbol-icon:before{content:"\E60B"}.next-message.next-message-warning.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-warning.next-addon .next-message-title{color:#333}.next-message.next-message-warning.next-addon .next-message-content{color:#666}.next-message.next-message-warning.next-addon .next-message-symbol{color:#ff9300}.next-message.next-message-warning.next-addon .next-message-symbol-icon:before{content:"\E60B"}.next-message.next-message-warning.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-warning.next-toast .next-message-title{color:#333}.next-message.next-message-warning.next-toast .next-message-content{color:#666}.next-message.next-message-warning.next-toast .next-message-symbol{color:#ff9300}.next-message.next-message-warning.next-toast .next-message-symbol-icon:before{content:"\E60B"}.next-message.next-message-error.next-inline{background-color:#ffece4;border-color:#ffece4;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-error.next-inline .next-message-title{color:#333}.next-message.next-message-error.next-inline .next-message-content{color:#666}.next-message.next-message-error.next-inline .next-message-symbol{color:#ff3000}.next-message.next-message-error.next-inline .next-message-symbol-icon:before{content:"\E60D"}.next-message.next-message-error.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-error.next-addon .next-message-title{color:#333}.next-message.next-message-error.next-addon .next-message-content{color:#666}.next-message.next-message-error.next-addon .next-message-symbol{color:#ff3000}.next-message.next-message-error.next-addon .next-message-symbol-icon:before{content:"\E60D"}.next-message.next-message-error.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-error.next-toast .next-message-title{color:#333}.next-message.next-message-error.next-toast .next-message-content{color:#666}.next-message.next-message-error.next-toast .next-message-symbol{color:#ff3000}.next-message.next-message-error.next-toast .next-message-symbol-icon:before{content:"\E60D"}.next-message.next-message-notice.next-inline{background-color:#e3f2fd;border-color:#e3f2fd;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-notice.next-inline .next-message-title{color:#333}.next-message.next-message-notice.next-inline .next-message-content{color:#666}.next-message.next-message-notice.next-inline .next-message-symbol{color:#4494f9}.next-message.next-message-notice.next-inline .next-message-symbol-icon:before{content:"\E60C"}.next-message.next-message-notice.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-notice.next-addon .next-message-title{color:#333}.next-message.next-message-notice.next-addon .next-message-content{color:#666}.next-message.next-message-notice.next-addon .next-message-symbol{color:#4494f9}.next-message.next-message-notice.next-addon .next-message-symbol-icon:before{content:"\E60C"}.next-message.next-message-notice.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-notice.next-toast .next-message-title{color:#333}.next-message.next-message-notice.next-toast .next-message-content{color:#666}.next-message.next-message-notice.next-toast .next-message-symbol{color:#4494f9}.next-message.next-message-notice.next-toast .next-message-symbol-icon:before{content:"\E60C"}.next-message.next-message-help.next-inline{background-color:#e3fff8;border-color:#e3fff8;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-help.next-inline .next-message-title{color:#333}.next-message.next-message-help.next-inline .next-message-content{color:#666}.next-message.next-message-help.next-inline .next-message-symbol{color:#01c1b2}.next-message.next-message-help.next-inline .next-message-symbol-icon:before{content:"\E673"}.next-message.next-message-help.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-help.next-addon .next-message-title{color:#333}.next-message.next-message-help.next-addon .next-message-content{color:#666}.next-message.next-message-help.next-addon .next-message-symbol{color:#01c1b2}.next-message.next-message-help.next-addon .next-message-symbol-icon:before{content:"\E673"}.next-message.next-message-help.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-help.next-toast .next-message-title{color:#333}.next-message.next-message-help.next-toast .next-message-content{color:#666}.next-message.next-message-help.next-toast .next-message-symbol{color:#01c1b2}.next-message.next-message-help.next-toast .next-message-symbol-icon:before{content:"\E673"}.next-message.next-message-loading.next-inline{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-loading.next-inline .next-message-title{color:#333}.next-message.next-message-loading.next-inline .next-message-content{color:#666}.next-message.next-message-loading.next-inline .next-message-symbol{color:#5584ff}.next-message.next-message-loading.next-inline .next-message-symbol-icon:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}.next-message.next-message-loading.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-loading.next-addon .next-message-title{color:#333}.next-message.next-message-loading.next-addon .next-message-content{color:#666}.next-message.next-message-loading.next-addon .next-message-symbol{color:#5584ff}.next-message.next-message-loading.next-addon .next-message-symbol-icon:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}.next-message.next-message-loading.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-loading.next-toast .next-message-title{color:#333}.next-message.next-message-loading.next-toast .next-message-content{color:#666}.next-message.next-message-loading.next-toast .next-message-symbol{color:#5584ff}.next-message.next-message-loading.next-toast .next-message-symbol-icon:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}.next-message.next-medium{border-width:1px;padding:12px}.next-message.next-medium .next-message-symbol{float:left;line-height:16px}.next-message.next-medium .next-message-symbol:before{width:16px;font-size:16px;line-height:inherit}.next-message.next-medium .next-message-title{padding:0 20px 0 24px;font-size:16px;line-height:16px}.next-message.next-medium .next-message-content{margin-top:8px;padding:0 20px 0 24px;font-size:12px;line-height:12px}.next-message.next-medium .next-message-symbol+.next-message-content{margin-top:0}.next-message.next-medium.next-only-content .next-message-content{line-height:16px}.next-message.next-medium .next-message-close{top:12px;right:12px}.next-message.next-large{border-width:2px;padding:16px;line-height:18px}.next-message.next-large .next-message-symbol{float:left;line-height:24px}.next-message.next-large .next-message-symbol:before{width:24px;font-size:24px;line-height:inherit}.next-message.next-large .next-message-title{padding:0 20px 0 36px;font-size:20px;line-height:20px}.next-message.next-large .next-message-content{margin-top:8px;padding:0 20px 0 36px;font-size:12px;line-height:12px}.next-message.next-large .next-message-symbol+.next-message-content{margin-top:0}.next-message.next-large.next-only-content .next-message-content,.next-message.next-large.next-title-content .next-message-title{line-height:24px}.next-message.next-large .next-message-close{top:16px;right:16px}.next-message[dir=rtl] .next-message-symbol{float:right}.next-message[dir=rtl].next-medium .next-message-title{padding:0 24px 0 20px}.next-message[dir=rtl].next-medium .next-message-close{left:12px;right:auto}.next-message[dir=rtl].next-large .next-message-title{padding:0 36px 0 20px}.next-message[dir=rtl].next-large .next-message-close{left:16px;right:auto}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-dialog[dir=rtl],.next-dialog[dir=rtl] .next-dialog-footer.next-align-left{text-align:right}.next-dialog[dir=rtl] .next-dialog-footer.next-align-center{text-align:center}.next-dialog[dir=rtl] .next-dialog-footer.next-align-right{text-align:left}.next-dialog[dir=rtl] .next-dialog-btn+.next-dialog-btn{margin-right:4px;margin-left:0}.next-dialog[dir=rtl] .next-dialog-close{left:16px;right:auto}.next-dialog{position:fixed;z-index:1001;background:#fff;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);text-align:left}.next-dialog,.next-dialog *,.next-dialog :after,.next-dialog :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-dialog-header{padding:12px 20px;border-bottom:0 solid transparent;font-size:16px;background:transparent;color:#333}.next-dialog-body{padding:20px;font-size:12px;color:#666}.next-dialog-footer{padding:12px 20px;border-top:0 solid transparent;background:transparent}.next-dialog-footer.next-align-left{text-align:left}.next-dialog-footer.next-align-center{text-align:center}.next-dialog-footer.next-align-right{text-align:right}.next-dialog-footer-fixed-height{position:absolute;width:100%;bottom:0}.next-dialog-btn+.next-dialog-btn{margin-left:4px}.next-dialog-close{position:absolute;top:16px;right:16px;width:16px}.next-dialog-close,.next-dialog-close:link,.next-dialog-close:visited{height:16px;color:#999}.next-dialog-close:hover{background:transparent;color:#333}.next-dialog-close .next-dialog-close-icon.next-icon{position:absolute;top:50%;left:50%;margin-top:-6px;margin-left:-6px;width:12px;height:12px;line-height:12px}.next-dialog-close .next-dialog-close-icon.next-icon:before{width:12px;height:12px;font-size:12px;line-height:12px}.next-dialog-container{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1001;padding:40px;overflow:auto;text-align:center}.next-dialog-container:before{display:inline-block;vertical-align:middle;width:0;height:100%;content:""}.next-dialog-container .next-dialog{display:inline-block;position:relative;vertical-align:middle}.next-dialog-quick .next-dialog-body{padding:20px}.next-dialog .next-dialog-message.next-message{min-width:300px;padding:0}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.demo-body table{width:100%}.demo.pc .demo-group>.wrap>div.demo-item{display:block}.next-dialog-container,.next-overlay-wrapper .next-overlay-backdrop{position:absolute}.next-overlay-wrapper.opened .next-overlay-backdrop.next-mask{background:#000;opacity:.2} \ No newline at end of file diff --git a/demos/mask/deps.json b/demos/mask/deps.json new file mode 100644 index 0000000000..29ffe731bc --- /dev/null +++ b/demos/mask/deps.json @@ -0,0 +1 @@ +["demo-helper","dialog"] \ No newline at end of file diff --git a/demos/mask/index.html b/demos/mask/index.html new file mode 100644 index 0000000000..3c056fce45 --- /dev/null +++ b/demos/mask/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/menu-button/build/index.css b/demos/menu-button/build/index.css new file mode 100644 index 0000000000..f3b637fdab --- /dev/null +++ b/demos/menu-button/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-overlay-wrapper .next-overlay-inner{z-index:1001}.next-overlay-wrapper .next-overlay-backdrop{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;background:#000;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0}.next-overlay-wrapper.opened .next-overlay-backdrop{opacity:.2}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-btn,.next-btn *,.next-btn :after,.next-btn :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-btn::-moz-focus-inner{border:0;padding:0}.next-btn,.next-btn:active,.next-btn:focus,.next-btn:hover{outline:0}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-btn{position:relative;display:inline-block;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;text-align:center;text-transform:none;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;cursor:pointer}.next-btn:after{text-align:center;position:absolute;opacity:0;visibility:hidden;-webkit-transition:opacity .5s ease;transition:opacity .5s ease}.next-btn .next-icon.next-xs:before{vertical-align:baseline}.next-btn.hover,.next-btn:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn.next-small{border-radius:3px;padding:0 8px;height:20px;line-height:18px;font-size:12px;border-width:1px}.next-btn.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-small>.next-btn-icon.next-icon-alone:before,.next-btn.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small.next-btn-loading{padding-left:24px}.next-btn.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:8px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-small.next-btn-loading>.next-icon{display:none}.next-btn.next-medium{border-radius:3px;padding:0 12px;height:28px;line-height:26px;font-size:12px;border-width:1px}.next-btn.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium.next-btn-loading{padding-left:28px}.next-btn.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:12px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-medium.next-btn-loading>.next-icon{display:none}.next-btn.next-large{border-radius:3px;padding:0 16px;height:40px;line-height:38px;font-size:16px;border-width:1px}.next-btn.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-large>.next-btn-icon.next-icon-alone:before,.next-btn.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large.next-btn-loading{padding-left:36px}.next-btn.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:16px;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn.next-large.next-btn-loading>.next-icon{display:none}.next-btn.next-btn-normal{border-style:solid;background-color:#fff;border-color:#c4c6cf}.next-btn.next-btn-normal,.next-btn.next-btn-normal.visited,.next-btn.next-btn-normal:link,.next-btn.next-btn-normal:visited{color:#333}.next-btn.next-btn-normal.active,.next-btn.next-btn-normal.hover,.next-btn.next-btn-normal:active,.next-btn.next-btn-normal:focus,.next-btn.next-btn-normal:hover{color:#333;background-color:#f2f3f7;border-color:#a0a2ad;text-decoration:none}.next-btn.next-btn-primary{border-style:solid;background-color:#5584ff;border-color:transparent}.next-btn.next-btn-primary,.next-btn.next-btn-primary.visited,.next-btn.next-btn-primary:link,.next-btn.next-btn-primary:visited{color:#fff}.next-btn.next-btn-primary.active,.next-btn.next-btn-primary.hover,.next-btn.next-btn-primary:active,.next-btn.next-btn-primary:focus,.next-btn.next-btn-primary:hover{color:#fff;background-color:#3e71f7;border-color:transparent;text-decoration:none}.next-btn.next-btn-secondary{border-style:solid;background-color:#fff;border-color:#5584ff}.next-btn.next-btn-secondary,.next-btn.next-btn-secondary.visited,.next-btn.next-btn-secondary:link,.next-btn.next-btn-secondary:visited{color:#5584ff}.next-btn.next-btn-secondary.active,.next-btn.next-btn-secondary.hover,.next-btn.next-btn-secondary:active,.next-btn.next-btn-secondary:focus,.next-btn.next-btn-secondary:hover{color:#fff;background-color:#3e71f7;border-color:#3e71f7;text-decoration:none}.next-btn.disabled,.next-btn[disabled]{cursor:not-allowed;background-color:#f7f8fa;border-color:#e6e7eb}.next-btn.disabled,.next-btn.disabled.visited,.next-btn.disabled:link,.next-btn.disabled:visited,.next-btn[disabled],.next-btn[disabled].visited,.next-btn[disabled]:link,.next-btn[disabled]:visited{color:#ccc}.next-btn.disabled.active,.next-btn.disabled.hover,.next-btn.disabled:active,.next-btn.disabled:focus,.next-btn.disabled:hover,.next-btn[disabled].active,.next-btn[disabled].hover,.next-btn[disabled]:active,.next-btn[disabled]:focus,.next-btn[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-warning{border-style:solid}.next-btn-warning.next-btn-primary{background-color:#ff3000;border-color:#ff3000}.next-btn-warning.next-btn-primary,.next-btn-warning.next-btn-primary.visited,.next-btn-warning.next-btn-primary:link,.next-btn-warning.next-btn-primary:visited{color:#fff}.next-btn-warning.next-btn-primary.active,.next-btn-warning.next-btn-primary.hover,.next-btn-warning.next-btn-primary:active,.next-btn-warning.next-btn-primary:focus,.next-btn-warning.next-btn-primary:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary[disabled]{background-color:#f7f8fa;border-color:#dcdee3}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary.disabled.visited,.next-btn-warning.next-btn-primary.disabled:link,.next-btn-warning.next-btn-primary.disabled:visited,.next-btn-warning.next-btn-primary[disabled],.next-btn-warning.next-btn-primary[disabled].visited,.next-btn-warning.next-btn-primary[disabled]:link,.next-btn-warning.next-btn-primary[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-primary.disabled.active,.next-btn-warning.next-btn-primary.disabled.hover,.next-btn-warning.next-btn-primary.disabled:active,.next-btn-warning.next-btn-primary.disabled:focus,.next-btn-warning.next-btn-primary.disabled:hover,.next-btn-warning.next-btn-primary[disabled].active,.next-btn-warning.next-btn-primary[disabled].hover,.next-btn-warning.next-btn-primary[disabled]:active,.next-btn-warning.next-btn-primary[disabled]:focus,.next-btn-warning.next-btn-primary[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#dcdee3;text-decoration:none}.next-btn-warning.next-btn-normal{background-color:#fff;border-color:#ff3000}.next-btn-warning.next-btn-normal,.next-btn-warning.next-btn-normal.visited,.next-btn-warning.next-btn-normal:link,.next-btn-warning.next-btn-normal:visited{color:#ff3000}.next-btn-warning.next-btn-normal.active,.next-btn-warning.next-btn-normal.hover,.next-btn-warning.next-btn-normal:active,.next-btn-warning.next-btn-normal:focus,.next-btn-warning.next-btn-normal:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal[disabled]{background-color:#f7f8fa;border-color:#e6e7eb}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal.disabled.visited,.next-btn-warning.next-btn-normal.disabled:link,.next-btn-warning.next-btn-normal.disabled:visited,.next-btn-warning.next-btn-normal[disabled],.next-btn-warning.next-btn-normal[disabled].visited,.next-btn-warning.next-btn-normal[disabled]:link,.next-btn-warning.next-btn-normal[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-normal.disabled.active,.next-btn-warning.next-btn-normal.disabled.hover,.next-btn-warning.next-btn-normal.disabled:active,.next-btn-warning.next-btn-normal.disabled:focus,.next-btn-warning.next-btn-normal.disabled:hover,.next-btn-warning.next-btn-normal[disabled].active,.next-btn-warning.next-btn-normal[disabled].hover,.next-btn-warning.next-btn-normal[disabled]:active,.next-btn-warning.next-btn-normal[disabled]:focus,.next-btn-warning.next-btn-normal[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-text{border-radius:0}.next-btn-text,.next-btn-text.hover,.next-btn-text:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn-text.next-btn-primary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-primary,.next-btn-text.next-btn-primary.visited,.next-btn-text.next-btn-primary:link,.next-btn-text.next-btn-primary:visited{color:#5584ff}.next-btn-text.next-btn-primary.active,.next-btn-text.next-btn-primary.hover,.next-btn-text.next-btn-primary:active,.next-btn-text.next-btn-primary:focus,.next-btn-text.next-btn-primary:hover{color:#3e71f7;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-secondary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-secondary,.next-btn-text.next-btn-secondary.visited,.next-btn-text.next-btn-secondary:link,.next-btn-text.next-btn-secondary:visited{color:#666}.next-btn-text.next-btn-secondary.active,.next-btn-text.next-btn-secondary.hover,.next-btn-text.next-btn-secondary:active,.next-btn-text.next-btn-secondary:focus,.next-btn-text.next-btn-secondary:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-normal{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-normal,.next-btn-text.next-btn-normal.visited,.next-btn-text.next-btn-normal:link,.next-btn-text.next-btn-normal:visited{color:#333}.next-btn-text.next-btn-normal.active,.next-btn-text.next-btn-normal.hover,.next-btn-text.next-btn-normal:active,.next-btn-text.next-btn-normal:focus,.next-btn-text.next-btn-normal:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-large{border-radius:0;padding:0;height:24px;line-height:24px;font-size:14px;border-width:0}.next-btn-text.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-large>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large.next-btn-loading{padding-left:20px}.next-btn-text.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:0;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn-text.next-large.next-btn-loading>.next-icon{display:none}.next-btn-text.next-medium{border-radius:0;padding:0;height:20px;line-height:20px;font-size:12px;border-width:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium.next-btn-loading{padding-left:16px}.next-btn-text.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-medium.next-btn-loading>.next-icon{display:none}.next-btn-text.next-small{border-radius:0;padding:0;height:16px;line-height:16px;font-size:12px;border-width:0}.next-btn-text.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-small>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small.next-btn-loading{padding-left:16px}.next-btn-text.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-small.next-btn-loading>.next-icon{display:none}.next-btn-text.disabled,.next-btn-text[disabled]{background-color:transparent;border-color:transparent}.next-btn-text.disabled,.next-btn-text.disabled.visited,.next-btn-text.disabled:link,.next-btn-text.disabled:visited,.next-btn-text[disabled],.next-btn-text[disabled].visited,.next-btn-text[disabled]:link,.next-btn-text[disabled]:visited{color:#ccc}.next-btn-text.disabled.active,.next-btn-text.disabled.hover,.next-btn-text.disabled:active,.next-btn-text.disabled:focus,.next-btn-text.disabled:hover,.next-btn-text[disabled].active,.next-btn-text[disabled].hover,.next-btn-text[disabled]:active,.next-btn-text[disabled]:focus,.next-btn-text[disabled]:hover{color:#ccc;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-loading{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-loading,.next-btn-text.next-btn-loading.visited,.next-btn-text.next-btn-loading:link,.next-btn-text.next-btn-loading:visited{color:#333}.next-btn-text.next-btn-loading.active,.next-btn-text.next-btn-loading.hover,.next-btn-text.next-btn-loading:active,.next-btn-text.next-btn-loading:focus,.next-btn-text.next-btn-loading:hover{color:#333;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-loading{pointer-events:none}.next-btn-loading:after{font-family:NextIcon;content:"\E646";opacity:1;visibility:visible;-webkit-animation:loadingCircle 2s infinite linear;animation:loadingCircle 2s infinite linear}.next-btn-ghost{-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-btn-ghost.next-btn-dark{background-color:transparent;border-color:#fff}.next-btn-ghost.next-btn-dark,.next-btn-ghost.next-btn-dark.visited,.next-btn-ghost.next-btn-dark:link,.next-btn-ghost.next-btn-dark:visited{color:#fff}.next-btn-ghost.next-btn-dark.active,.next-btn-ghost.next-btn-dark.hover,.next-btn-ghost.next-btn-dark:active,.next-btn-ghost.next-btn-dark:focus,.next-btn-ghost.next-btn-dark:hover{color:#fff;background-color:hsla(0,0%,100%,.8);border-color:#fff;text-decoration:none}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark[disabled]{background-color:transparent;border-color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark.disabled.visited,.next-btn-ghost.next-btn-dark.disabled:link,.next-btn-ghost.next-btn-dark.disabled:visited,.next-btn-ghost.next-btn-dark[disabled],.next-btn-ghost.next-btn-dark[disabled].visited,.next-btn-ghost.next-btn-dark[disabled]:link,.next-btn-ghost.next-btn-dark[disabled]:visited{color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled.active,.next-btn-ghost.next-btn-dark.disabled.hover,.next-btn-ghost.next-btn-dark.disabled:active,.next-btn-ghost.next-btn-dark.disabled:focus,.next-btn-ghost.next-btn-dark.disabled:hover,.next-btn-ghost.next-btn-dark[disabled].active,.next-btn-ghost.next-btn-dark[disabled].hover,.next-btn-ghost.next-btn-dark[disabled]:active,.next-btn-ghost.next-btn-dark[disabled]:focus,.next-btn-ghost.next-btn-dark[disabled]:hover{color:hsla(0,0%,100%,.4);background-color:transparent;border-color:hsla(0,0%,100%,.4);text-decoration:none}.next-btn-ghost.next-btn-light{background-color:transparent;border-color:#333}.next-btn-ghost.next-btn-light,.next-btn-ghost.next-btn-light.visited,.next-btn-ghost.next-btn-light:link,.next-btn-ghost.next-btn-light:visited{color:#333}.next-btn-ghost.next-btn-light.active,.next-btn-ghost.next-btn-light.hover,.next-btn-ghost.next-btn-light:active,.next-btn-ghost.next-btn-light:focus,.next-btn-ghost.next-btn-light:hover{color:#999;background-color:rgba(0,0,0,.92);border-color:#333;text-decoration:none}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light[disabled]{background-color:transparent;border-color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light.disabled.visited,.next-btn-ghost.next-btn-light.disabled:link,.next-btn-ghost.next-btn-light.disabled:visited,.next-btn-ghost.next-btn-light[disabled],.next-btn-ghost.next-btn-light[disabled].visited,.next-btn-ghost.next-btn-light[disabled]:link,.next-btn-ghost.next-btn-light[disabled]:visited{color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled.active,.next-btn-ghost.next-btn-light.disabled.hover,.next-btn-ghost.next-btn-light.disabled:active,.next-btn-ghost.next-btn-light.disabled:focus,.next-btn-ghost.next-btn-light.disabled:hover,.next-btn-ghost.next-btn-light[disabled].active,.next-btn-ghost.next-btn-light[disabled].hover,.next-btn-ghost.next-btn-light[disabled]:active,.next-btn-ghost.next-btn-light[disabled]:focus,.next-btn-ghost.next-btn-light[disabled]:hover{color:rgba(0,0,0,.1);background-color:transparent;border-color:rgba(0,0,0,.1);text-decoration:none}.next-btn-group{position:relative;display:inline-block;vertical-align:middle}.next-btn-group>.next-btn{position:relative;float:left;-webkit-box-shadow:none;box-shadow:none}.next-btn-group>.next-btn.active,.next-btn-group>.next-btn:active,.next-btn-group>.next-btn:focus,.next-btn-group>.next-btn:hover{z-index:1}.next-btn-group>.next-btn.disabled,.next-btn-group>.next-btn[disabled]{z-index:0}.next-btn-group .next-btn.next-btn{margin:0 0 0 -1px}.next-btn-group .next-btn:not(:first-child):not(:last-child){border-radius:0}.next-btn-group>.next-btn:first-child{margin:0}.next-btn-group>.next-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group>.next-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group>.next-btn-primary:not(:first-child){border-left-color:hsla(0,0%,100%,.2)}.next-btn-group>.next-btn-primary:not(:first-child):hover{border-left-color:transparent}.next-btn-group>.next-btn-primary:not(:first-child).disabled,.next-btn-group>.next-btn-primary:not(:first-child)[disabled]{border-left-color:#e6e7eb}.next-btn-group[dir=rtl]>.next-btn{float:right}.next-btn-group[dir=rtl] .next-btn.next-btn{margin:0 -1px 0 0}.next-btn-group[dir=rtl]>.next-btn:first-child:not(:last-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group[dir=rtl]>.next-btn:last-child:not(:first-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child){border-right-color:hsla(0,0%,100%,.2)}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child):hover{border-right-color:transparent}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child).disabled,.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child)[disabled]{border-right-color:#e6e7eb}.next-btn.next-small[dir=rtl]{border-radius:3px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl].next-btn-loading{padding-left:8px;padding-right:24px}.next-btn.next-small[dir=rtl].next-btn-loading:after{right:8px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-medium[dir=rtl]{border-radius:3px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl].next-btn-loading{padding-left:12px;padding-right:28px}.next-btn.next-medium[dir=rtl].next-btn-loading:after{right:12px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-large[dir=rtl]{border-radius:3px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl].next-btn-loading{padding-left:16px;padding-right:36px}.next-btn.next-large[dir=rtl].next-btn-loading:after{right:16px;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-large{border-radius:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large.next-btn-loading{padding-left:0;padding-right:20px}.next-btn-text[dir=rtl].next-large.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-medium{border-radius:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-medium.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-small{border-radius:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-small.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-radio-button-large[dir=rtl]>label:first-child{margin-left:-1px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.next-radio-button-large[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large[dir=rtl] .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-wrapper[dir=rtl] .next-radio-label{margin-left:0;margin-right:4px}.next-radio-group[dir=rtl] .next-radio-label{margin-right:4px;margin-left:16px}.next-radio-button[dir=rtl]>label .next-radio-label{margin:0}.next-radio-wrapper{outline:0}.next-radio-wrapper .next-radio{display:inline-block;vertical-align:middle;position:relative;line-height:1}.next-radio-wrapper .next-radio,.next-radio-wrapper .next-radio *,.next-radio-wrapper .next-radio :after,.next-radio-wrapper .next-radio :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-radio-wrapper .next-radio input[type=radio]{opacity:0;position:absolute;vertical-align:middle;top:0;left:0;width:16px;height:16px;margin:0}.next-radio-wrapper .next-radio-inner{display:block;width:16px;height:16px;background:#fff;border-radius:50%;border:1px solid #c4c6cf;-webkit-transition:all .36s ease 0s;transition:all .36s ease 0s;-webkit-box-shadow:none;box-shadow:none}.next-radio-wrapper .next-radio-inner:after{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;border-radius:50%;top:50%;margin-top:-2px;left:50%;margin-left:-2px;background:#fff;content:" ";-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86)}.next-radio-wrapper.checked .next-radio-inner{border-color:#5584ff;background:#5584ff}.next-radio-wrapper.checked .next-radio-inner:after{width:4px;height:4px;font-weight:700;background:#fff;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.next-radio-wrapper.checked.hovered .next-radio-inner,.next-radio-wrapper.checked:hover .next-radio-inner{border-color:transparent}.next-radio-wrapper.disabled input[type=radio]{cursor:not-allowed}.next-radio-wrapper.disabled .next-radio-inner{border-color:#e6e7eb;background:#f7f8fa}.next-radio-wrapper.disabled.checked .next-radio-inner,.next-radio-wrapper.disabled .next-radio-inner.hovered,.next-radio-wrapper.disabled .next-radio-inner:hover{border-color:#e6e7eb}.next-radio-wrapper.disabled.checked .next-radio-inner:after{background:#ccc}.next-radio-wrapper:not(.disabled).focused .next-radio-inner,.next-radio-wrapper:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper:not(.disabled):focus .next-radio-inner,.next-radio-wrapper:not(.disabled):hover .next-radio-inner{border-color:#5584ff;background-color:#dee8ff}.next-radio-wrapper.checked.focused .next-radio-inner,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner{border-color:transparent;background:#3e71f7}.next-radio-wrapper.checked.focused .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner:after{background:#fff}.next-radio-button .next-radio,.next-radio-button input[type=radio]{width:0;height:0}.next-radio-button>label{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1;margin:0 0 0 -1px;border:1px solid #c4c6cf;background-color:#fff;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;vertical-align:middle}.next-radio-button>label .next-radio-label{display:block;color:#333;margin:0;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}.next-radio-button>label.hovered,.next-radio-button>label:focus,.next-radio-button>label:hover{z-index:10;border-color:#a0a2ad;background-color:#f2f3f7}.next-radio-button>label.hovered .next-radio-label,.next-radio-button>label:focus .next-radio-label,.next-radio-button>label:hover .next-radio-label{color:#333}.next-radio-button>label.checked{z-index:11;border-color:#5584ff;background-color:#fff}.next-radio-button>label.checked .next-radio-label{color:#5584ff}.next-radio-button>label.disabled{z-index:0;cursor:not-allowed;border-color:#e6e7eb;background-color:#f7f8fa}.next-radio-button>label.disabled .next-radio-label{color:#ccc}.next-radio-button>label.checked.disabled{z-index:0;border-color:#e6e7eb;background-color:#f2f3f7}.next-radio-button>label.checked.disabled .next-radio-label{color:#ccc}.next-radio-button-large>label{padding:0 8px;height:40px;line-height:40px}.next-radio-button-large>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-large .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium>label{padding:0 8px;height:28px;line-height:28px}.next-radio-button-medium>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-medium>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium .next-radio-label{height:26px;line-height:26px;font-size:12px}.next-radio-button-small>label{padding:0 8px;height:20px;line-height:20px}.next-radio-button-small>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small .next-radio-label{height:18px;line-height:18px;font-size:12px}.next-radio-single-input input[type=radio]{opacity:0;position:absolute;top:0;left:0;margin:0}.next-radio-group{display:inline-block}.next-radio-group .next-radio-label{color:#333;margin-right:16px}.next-radio-group.disabled .next-radio-label{color:#ccc}.next-radio-group-ver .next-radio-wrapper{display:block;margin-bottom:8px}.next-radio-label{margin:0;margin-left:4px;font-size:12px;vertical-align:middle;line-height:1}@-moz-document url-prefix(){.next-radio{margin-top:-1px}@supports ((-webkit-animation:calc(0s)) or (animation:calc(0s))){.next-radio{margin-top:-3px}}}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-checkbox-wrapper[dir=rtl]{margin-right:8px;margin-left:0}.next-checkbox-wrapper[dir=rtl]:first-child{margin-right:0}.next-checkbox-wrapper[dir=rtl]>.next-checkbox-label{margin-right:4px;margin-left:0}.next-checkbox-wrapper,.next-checkbox-wrapper *,.next-checkbox-wrapper :after,.next-checkbox-wrapper :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-checkbox-wrapper .next-checkbox{display:inline-block;position:relative;line-height:1;vertical-align:middle}.next-checkbox-wrapper input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:16px;height:16px;margin:0}.next-checkbox-wrapper .next-checkbox-inner{display:block;width:16px;height:16px;background:#fff;border-radius:3px;border:1px solid #c4c6cf;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;text-align:left;-webkit-box-shadow:none;box-shadow:none}.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;top:0;opacity:0;line-height:16px;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);color:#fff;left:4px;margin-left:0}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{vertical-align:top;margin-top:0}.next-checkbox-wrapper.checked .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.checked .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);margin-left:0}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.indeterminate .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.indeterminate .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1);margin-left:0}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.disabled input[type=checkbox]{cursor:not-allowed}.next-checkbox-wrapper.disabled .next-checkbox-inner{border-color:#e6e7eb;background:#f7f8fa}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover{border-color:#e6e7eb}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner>.next-icon{color:#ccc;opacity:1}.next-checkbox-wrapper.focused .next-checkbox-inner,.next-checkbox-wrapper.hovered .next-checkbox-inner,.next-checkbox-wrapper:not(.disabled):hover .next-checkbox-inner{border-color:#5584ff;background-color:#dee8ff}.next-checkbox-wrapper.checked.focused .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner{border-color:transparent;background-color:#3e71f7}.next-checkbox-wrapper.checked.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner>.next-icon{color:#fff;opacity:1}.next-checkbox-group .next-checkbox-wrapper{margin-left:8px}.next-checkbox-group .next-checkbox-wrapper:first-child{margin-left:0}.next-checkbox-group-ver .next-checkbox-wrapper{display:block;margin-left:0;margin-right:0;margin-bottom:8px}.next-checkbox-label{font-size:12px;vertical-align:middle;margin:0;margin-left:4px;line-height:1}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-menu[dir=rtl] .next-menu-item-helper{float:left}.next-menu[dir=rtl] .next-menu-item .next-checkbox,.next-menu[dir=rtl] .next-menu-item .next-radio{margin-left:4px;margin-right:0}.next-menu[dir=rtl] .next-menu-hoz-right{float:left}.next-menu[dir=rtl] .next-menu-hoz-icon-arrow.next-icon{left:6px;right:auto}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon{margin-left:0;margin-right:-16px}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon.next-menu-icon-right{right:auto;left:4px}.next-menu[dir=rtl] .next-menu-icon-arrow.next-icon{left:10px;right:auto}.next-menu{position:relative;min-width:100px;padding:8px 0;margin:0;list-style:none;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;background:#fff;line-height:32px;font-size:12px}.next-menu,.next-menu *,.next-menu :after,.next-menu :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-menu:focus,.next-menu :focus{outline:0}.next-menu-embeddable,.next-menu-embeddable .next-menu-item.next-disabled,.next-menu-embeddable .next-menu-item.next-disabled .next-menu-item-text>a{background:initial;border:none}.next-menu-embeddable .next-menu-item-inner{height:100%}.next-menu-content{position:relative}.next-menu-content,.next-menu-sub-menu{padding:0;margin:0;list-style:none}.next-menu-sub-menu.next-expand-enter{overflow:hidden}.next-menu-sub-menu.next-expand-enter-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-sub-menu.next-expand-leave{overflow:hidden}.next-menu-sub-menu.next-expand-leave-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-item{position:relative;padding:0 20px;-webkit-transition:background .2s ease;transition:background .2s ease;color:#333;cursor:pointer}.next-menu-item-helper{float:right;color:#999;font-style:normal;font-size:12px}.next-menu-item .next-checkbox,.next-menu-item .next-radio{margin-right:4px}.next-menu-item.next-selected{color:#333;background-color:#fff}.next-menu-item.next-selected .next-menu-icon-arrow{color:#666}.next-menu-item.next-selected .next-menu-icon-selected{color:#5584ff}.next-menu-item.next-disabled,.next-menu-item.next-disabled .next-menu-item-text>a{color:#ccc;background-color:#fff;cursor:not-allowed}.next-menu-item.next-disabled .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-icon-selected,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-selected{color:#ccc}.next-menu-item:not(.next-disabled).next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover,.next-menu-item:not(.next-disabled).next-selected:focus,.next-menu-item:not(.next-disabled).next-selected:focus:hover,.next-menu-item:not(.next-disabled).next-selected:hover,.next-menu-item:not(.next-disabled):hover{color:#333;background-color:#f2f3f7}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled):hover .next-menu-icon-arrow{color:#333}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled):hover .next-menu-icon-selected{color:#5584ff}.next-menu-item-inner{height:32px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.next-menu-item-text{vertical-align:middle}.next-menu-item-text>a{display:inline-block;text-decoration:none;color:#333}.next-menu-item-text>a:before{position:absolute;background-color:transparent;top:0;left:0;bottom:0;right:0;content:""}.next-menu.next-hoz{padding:0}.next-menu.next-hoz .next-menu-content>.next-menu-item,.next-menu.next-hoz>.next-menu-item{display:inline-block;vertical-align:top}.next-menu.next-hoz .next-menu-content,.next-menu.next-hoz .next-menu-footer,.next-menu.next-hoz .next-menu-header{display:inline-block}.next-menu-hoz-right{float:right}.next-menu-group-label{padding:0 12px;color:#999}.next-menu-divider{margin:8px 12px;border-bottom:1px solid #e6e7eb}.next-menu .next-menu-icon-selected.next-icon{position:absolute;top:0;margin-left:-16px}.next-menu .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-icon-selected.next-icon.next-menu-icon-right{right:4px}.next-menu .next-menu-icon-arrow.next-icon{position:absolute;top:0;right:10px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-icon-arrow.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow.next-icon:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-icon-arrow-down.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:scale(.5) rotate(180deg);-ms-transform:scale(.5) rotate(180deg);transform:scale(.5) rotate(180deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-down.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.next-menu .next-menu-icon-arrow-right.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:scale(.5) rotate(-90deg);-ms-transform:scale(.5) rotate(-90deg);transform:scale(.5) rotate(-90deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-right.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-hoz-icon-arrow.next-icon{position:absolute;top:0;right:6px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-hoz-icon-arrow.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-hoz-icon-arrow.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-hoz-icon-arrow.next-open:before{width:12px;font-size:12px;line-height:inherit}.next-menu.next-context{line-height:24px}.next-menu.next-context .next-menu-item-inner{height:24px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-menu-btn{display:inline-block;-webkit-box-shadow:none;box-shadow:none}.next-menu-btn .next-icon{-webkit-transition:-webkit-transform .3s cubic-bezier(.645,.045,.355,1);transition:-webkit-transform .3s cubic-bezier(.645,.045,.355,1);transition:transform .3s cubic-bezier(.645,.045,.355,1);transition:transform .3s cubic-bezier(.645,.045,.355,1),-webkit-transform .3s cubic-bezier(.645,.045,.355,1)}.next-menu-btn.next-expand .next-menu-btn-arrow{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu-btn.next-btn-normal .next-menu-btn-arrow{color:#999}.next-menu-btn.next-btn-secondary .next-menu-btn-arrow{color:#5584ff}.next-menu-btn.next-btn-primary .next-menu-btn-arrow{color:#fff}.next-menu-btn.next-btn-text.next-btn-normal .next-menu-btn-arrow{color:#333}.next-menu-btn.next-btn-text.next-btn-primary .next-menu-btn-arrow{color:#5584ff}.next-menu-btn.next-btn-ghost.next-btn-light .next-menu-btn-arrow{color:#333}.next-menu-btn.next-btn-ghost.next-btn-dark .next-menu-btn-arrow{color:#fff}.next-menu-btn.disabled .next-menu-btn-arrow,.next-menu-btn.next-btn-text.disabled .next-menu-btn-arrow,.next-menu-btn.next-btn-text[disabled] .next-menu-btn-arrow,.next-menu-btn[disabled] .next-menu-btn-arrow{color:#ccc}.next-menu-btn[disabled].next-btn-ghost.next-btn-dark .next-menu-btn-arrow{color:hsla(0,0%,100%,.4)}.next-menu-btn[disabled].next-btn-ghost.next-btn-light .next-menu-btn-arrow{color:rgba(0,0,0,.1)} \ No newline at end of file diff --git a/demos/menu-button/deps.json b/demos/menu-button/deps.json new file mode 100644 index 0000000000..ae6239a74a --- /dev/null +++ b/demos/menu-button/deps.json @@ -0,0 +1 @@ +["icon","button","menu","overlay","demo-helper"] \ No newline at end of file diff --git a/demos/menu-button/index.html b/demos/menu-button/index.html new file mode 100644 index 0000000000..c7bd5ba063 --- /dev/null +++ b/demos/menu-button/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/menu/build/index.css b/demos/menu/build/index.css new file mode 100644 index 0000000000..cf3d36a4cd --- /dev/null +++ b/demos/menu/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-radio-button-large[dir=rtl]>label:first-child{margin-left:-1px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.next-radio-button-large[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large[dir=rtl] .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-wrapper[dir=rtl] .next-radio-label{margin-left:0;margin-right:4px}.next-radio-group[dir=rtl] .next-radio-label{margin-right:4px;margin-left:16px}.next-radio-button[dir=rtl]>label .next-radio-label{margin:0}.next-radio-wrapper{outline:0}.next-radio-wrapper .next-radio{display:inline-block;vertical-align:middle;position:relative;line-height:1}.next-radio-wrapper .next-radio,.next-radio-wrapper .next-radio *,.next-radio-wrapper .next-radio :after,.next-radio-wrapper .next-radio :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-radio-wrapper .next-radio input[type=radio]{opacity:0;position:absolute;vertical-align:middle;top:0;left:0;width:16px;height:16px;margin:0}.next-radio-wrapper .next-radio-inner{display:block;width:16px;height:16px;background:#fff;border-radius:50%;border:1px solid #c4c6cf;-webkit-transition:all .36s ease 0s;transition:all .36s ease 0s;-webkit-box-shadow:none;box-shadow:none}.next-radio-wrapper .next-radio-inner:after{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;border-radius:50%;top:50%;margin-top:-2px;left:50%;margin-left:-2px;background:#fff;content:" ";-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86)}.next-radio-wrapper.checked .next-radio-inner{border-color:#5584ff;background:#5584ff}.next-radio-wrapper.checked .next-radio-inner:after{width:4px;height:4px;font-weight:700;background:#fff;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.next-radio-wrapper.checked.hovered .next-radio-inner,.next-radio-wrapper.checked:hover .next-radio-inner{border-color:transparent}.next-radio-wrapper.disabled input[type=radio]{cursor:not-allowed}.next-radio-wrapper.disabled .next-radio-inner{border-color:#e6e7eb;background:#f7f8fa}.next-radio-wrapper.disabled.checked .next-radio-inner,.next-radio-wrapper.disabled .next-radio-inner.hovered,.next-radio-wrapper.disabled .next-radio-inner:hover{border-color:#e6e7eb}.next-radio-wrapper.disabled.checked .next-radio-inner:after{background:#ccc}.next-radio-wrapper:not(.disabled).focused .next-radio-inner,.next-radio-wrapper:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper:not(.disabled):focus .next-radio-inner,.next-radio-wrapper:not(.disabled):hover .next-radio-inner{border-color:#5584ff;background-color:#dee8ff}.next-radio-wrapper.checked.focused .next-radio-inner,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner{border-color:transparent;background:#3e71f7}.next-radio-wrapper.checked.focused .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner:after{background:#fff}.next-radio-button .next-radio,.next-radio-button input[type=radio]{width:0;height:0}.next-radio-button>label{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1;margin:0 0 0 -1px;border:1px solid #c4c6cf;background-color:#fff;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;vertical-align:middle}.next-radio-button>label .next-radio-label{display:block;color:#333;margin:0;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}.next-radio-button>label.hovered,.next-radio-button>label:focus,.next-radio-button>label:hover{z-index:10;border-color:#a0a2ad;background-color:#f2f3f7}.next-radio-button>label.hovered .next-radio-label,.next-radio-button>label:focus .next-radio-label,.next-radio-button>label:hover .next-radio-label{color:#333}.next-radio-button>label.checked{z-index:11;border-color:#5584ff;background-color:#fff}.next-radio-button>label.checked .next-radio-label{color:#5584ff}.next-radio-button>label.disabled{z-index:0;cursor:not-allowed;border-color:#e6e7eb;background-color:#f7f8fa}.next-radio-button>label.disabled .next-radio-label{color:#ccc}.next-radio-button>label.checked.disabled{z-index:0;border-color:#e6e7eb;background-color:#f2f3f7}.next-radio-button>label.checked.disabled .next-radio-label{color:#ccc}.next-radio-button-large>label{padding:0 8px;height:40px;line-height:40px}.next-radio-button-large>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-large .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium>label{padding:0 8px;height:28px;line-height:28px}.next-radio-button-medium>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-medium>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium .next-radio-label{height:26px;line-height:26px;font-size:12px}.next-radio-button-small>label{padding:0 8px;height:20px;line-height:20px}.next-radio-button-small>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small .next-radio-label{height:18px;line-height:18px;font-size:12px}.next-radio-single-input input[type=radio]{opacity:0;position:absolute;top:0;left:0;margin:0}.next-radio-group{display:inline-block}.next-radio-group .next-radio-label{color:#333;margin-right:16px}.next-radio-group.disabled .next-radio-label{color:#ccc}.next-radio-group-ver .next-radio-wrapper{display:block;margin-bottom:8px}.next-radio-label{margin:0;margin-left:4px;font-size:12px;vertical-align:middle;line-height:1}@-moz-document url-prefix(){.next-radio{margin-top:-1px}@supports ((-webkit-animation:calc(0s)) or (animation:calc(0s))){.next-radio{margin-top:-3px}}}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-checkbox-wrapper[dir=rtl]{margin-right:8px;margin-left:0}.next-checkbox-wrapper[dir=rtl]:first-child{margin-right:0}.next-checkbox-wrapper[dir=rtl]>.next-checkbox-label{margin-right:4px;margin-left:0}.next-checkbox-wrapper,.next-checkbox-wrapper *,.next-checkbox-wrapper :after,.next-checkbox-wrapper :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-checkbox-wrapper .next-checkbox{display:inline-block;position:relative;line-height:1;vertical-align:middle}.next-checkbox-wrapper input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:16px;height:16px;margin:0}.next-checkbox-wrapper .next-checkbox-inner{display:block;width:16px;height:16px;background:#fff;border-radius:3px;border:1px solid #c4c6cf;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;text-align:left;-webkit-box-shadow:none;box-shadow:none}.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;top:0;opacity:0;line-height:16px;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);color:#fff;left:4px;margin-left:0}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{vertical-align:top;margin-top:0}.next-checkbox-wrapper.checked .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.checked .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);margin-left:0}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.indeterminate .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.indeterminate .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1);margin-left:0}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.disabled input[type=checkbox]{cursor:not-allowed}.next-checkbox-wrapper.disabled .next-checkbox-inner{border-color:#e6e7eb;background:#f7f8fa}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover{border-color:#e6e7eb}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner>.next-icon{color:#ccc;opacity:1}.next-checkbox-wrapper.focused .next-checkbox-inner,.next-checkbox-wrapper.hovered .next-checkbox-inner,.next-checkbox-wrapper:not(.disabled):hover .next-checkbox-inner{border-color:#5584ff;background-color:#dee8ff}.next-checkbox-wrapper.checked.focused .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner{border-color:transparent;background-color:#3e71f7}.next-checkbox-wrapper.checked.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner>.next-icon{color:#fff;opacity:1}.next-checkbox-group .next-checkbox-wrapper{margin-left:8px}.next-checkbox-group .next-checkbox-wrapper:first-child{margin-left:0}.next-checkbox-group-ver .next-checkbox-wrapper{display:block;margin-left:0;margin-right:0;margin-bottom:8px}.next-checkbox-label{font-size:12px;vertical-align:middle;margin:0;margin-left:4px;line-height:1}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-menu[dir=rtl] .next-menu-item-helper{float:left}.next-menu[dir=rtl] .next-menu-item .next-checkbox,.next-menu[dir=rtl] .next-menu-item .next-radio{margin-left:4px;margin-right:0}.next-menu[dir=rtl] .next-menu-hoz-right{float:left}.next-menu[dir=rtl] .next-menu-hoz-icon-arrow.next-icon{left:6px;right:auto}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon{margin-left:0;margin-right:-16px}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon.next-menu-icon-right{right:auto;left:4px}.next-menu[dir=rtl] .next-menu-icon-arrow.next-icon{left:10px;right:auto}.next-menu{position:relative;min-width:100px;padding:8px 0;margin:0;list-style:none;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;background:#fff;line-height:32px;font-size:12px}.next-menu,.next-menu *,.next-menu :after,.next-menu :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-menu:focus,.next-menu :focus{outline:0}.next-menu-embeddable,.next-menu-embeddable .next-menu-item.next-disabled,.next-menu-embeddable .next-menu-item.next-disabled .next-menu-item-text>a{background:initial;border:none}.next-menu-embeddable .next-menu-item-inner{height:100%}.next-menu-content{position:relative}.next-menu-content,.next-menu-sub-menu{padding:0;margin:0;list-style:none}.next-menu-sub-menu.next-expand-enter{overflow:hidden}.next-menu-sub-menu.next-expand-enter-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-sub-menu.next-expand-leave{overflow:hidden}.next-menu-sub-menu.next-expand-leave-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-item{position:relative;padding:0 20px;-webkit-transition:background .2s ease;transition:background .2s ease;color:#333;cursor:pointer}.next-menu-item-helper{float:right;color:#999;font-style:normal;font-size:12px}.next-menu-item .next-checkbox,.next-menu-item .next-radio{margin-right:4px}.next-menu-item.next-selected{color:#333;background-color:#fff}.next-menu-item.next-selected .next-menu-icon-arrow{color:#666}.next-menu-item.next-selected .next-menu-icon-selected{color:#5584ff}.next-menu-item.next-disabled,.next-menu-item.next-disabled .next-menu-item-text>a{color:#ccc;background-color:#fff;cursor:not-allowed}.next-menu-item.next-disabled .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-icon-selected,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-selected{color:#ccc}.next-menu-item:not(.next-disabled).next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover,.next-menu-item:not(.next-disabled).next-selected:focus,.next-menu-item:not(.next-disabled).next-selected:focus:hover,.next-menu-item:not(.next-disabled).next-selected:hover,.next-menu-item:not(.next-disabled):hover{color:#333;background-color:#f2f3f7}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled):hover .next-menu-icon-arrow{color:#333}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled):hover .next-menu-icon-selected{color:#5584ff}.next-menu-item-inner{height:32px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.next-menu-item-text{vertical-align:middle}.next-menu-item-text>a{display:inline-block;text-decoration:none;color:#333}.next-menu-item-text>a:before{position:absolute;background-color:transparent;top:0;left:0;bottom:0;right:0;content:""}.next-menu.next-hoz{padding:0}.next-menu.next-hoz .next-menu-content>.next-menu-item,.next-menu.next-hoz>.next-menu-item{display:inline-block;vertical-align:top}.next-menu.next-hoz .next-menu-content,.next-menu.next-hoz .next-menu-footer,.next-menu.next-hoz .next-menu-header{display:inline-block}.next-menu-hoz-right{float:right}.next-menu-group-label{padding:0 12px;color:#999}.next-menu-divider{margin:8px 12px;border-bottom:1px solid #e6e7eb}.next-menu .next-menu-icon-selected.next-icon{position:absolute;top:0;margin-left:-16px}.next-menu .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-icon-selected.next-icon.next-menu-icon-right{right:4px}.next-menu .next-menu-icon-arrow.next-icon{position:absolute;top:0;right:10px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-icon-arrow.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow.next-icon:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-icon-arrow-down.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:scale(.5) rotate(180deg);-ms-transform:scale(.5) rotate(180deg);transform:scale(.5) rotate(180deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-down.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.next-menu .next-menu-icon-arrow-right.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:scale(.5) rotate(-90deg);-ms-transform:scale(.5) rotate(-90deg);transform:scale(.5) rotate(-90deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-right.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-hoz-icon-arrow.next-icon{position:absolute;top:0;right:6px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-hoz-icon-arrow.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-hoz-icon-arrow.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-hoz-icon-arrow.next-open:before{width:12px;font-size:12px;line-height:inherit}.next-menu.next-context{line-height:24px}.next-menu.next-context .next-menu-item-inner{height:24px} \ No newline at end of file diff --git a/demos/menu/deps.json b/demos/menu/deps.json new file mode 100644 index 0000000000..0bc4af2518 --- /dev/null +++ b/demos/menu/deps.json @@ -0,0 +1 @@ +["icon","animate","radio","checkbox","demo-helper"] \ No newline at end of file diff --git a/demos/menu/index.html b/demos/menu/index.html new file mode 100644 index 0000000000..a34b13f13c --- /dev/null +++ b/demos/menu/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/message/build/index.css b/demos/message/build/index.css new file mode 100644 index 0000000000..70b271ac4e --- /dev/null +++ b/demos/message/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-overlay-wrapper .next-overlay-inner{z-index:1001}.next-overlay-wrapper .next-overlay-backdrop{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;background:#000;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0}.next-overlay-wrapper.opened .next-overlay-backdrop{opacity:.2}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-message{position:relative;display:block;vertical-align:baseline}.next-message,.next-message *,.next-message :after,.next-message :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-message:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-message .next-message-close{color:#999;font-size:0;position:absolute}.next-message .next-message-close .next-icon-close{width:12px;height:12px;line-height:12px}.next-message .next-message-close .next-icon-close:before{width:12px;height:12px;font-size:12px;line-height:12px}.next-message .next-message-close:hover{color:#666}.next-message.next-message-success.next-inline{background-color:#e4fdda;border-color:#e4fdda;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-success.next-inline .next-message-title{color:#333}.next-message.next-message-success.next-inline .next-message-content{color:#666}.next-message.next-message-success.next-inline .next-message-symbol{color:#46bc15}.next-message.next-message-success.next-inline .next-message-symbol-icon:before{content:"\E60A"}.next-message.next-message-success.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-success.next-addon .next-message-title{color:#333}.next-message.next-message-success.next-addon .next-message-content{color:#666}.next-message.next-message-success.next-addon .next-message-symbol{color:#46bc15}.next-message.next-message-success.next-addon .next-message-symbol-icon:before{content:"\E60A"}.next-message.next-message-success.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-success.next-toast .next-message-title{color:#333}.next-message.next-message-success.next-toast .next-message-content{color:#666}.next-message.next-message-success.next-toast .next-message-symbol{color:#46bc15}.next-message.next-message-success.next-toast .next-message-symbol-icon:before{content:"\E60A"}.next-message.next-message-warning.next-inline{background-color:#fff3e0;border-color:#fff3e0;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-warning.next-inline .next-message-title{color:#333}.next-message.next-message-warning.next-inline .next-message-content{color:#666}.next-message.next-message-warning.next-inline .next-message-symbol{color:#ff9300}.next-message.next-message-warning.next-inline .next-message-symbol-icon:before{content:"\E60B"}.next-message.next-message-warning.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-warning.next-addon .next-message-title{color:#333}.next-message.next-message-warning.next-addon .next-message-content{color:#666}.next-message.next-message-warning.next-addon .next-message-symbol{color:#ff9300}.next-message.next-message-warning.next-addon .next-message-symbol-icon:before{content:"\E60B"}.next-message.next-message-warning.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-warning.next-toast .next-message-title{color:#333}.next-message.next-message-warning.next-toast .next-message-content{color:#666}.next-message.next-message-warning.next-toast .next-message-symbol{color:#ff9300}.next-message.next-message-warning.next-toast .next-message-symbol-icon:before{content:"\E60B"}.next-message.next-message-error.next-inline{background-color:#ffece4;border-color:#ffece4;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-error.next-inline .next-message-title{color:#333}.next-message.next-message-error.next-inline .next-message-content{color:#666}.next-message.next-message-error.next-inline .next-message-symbol{color:#ff3000}.next-message.next-message-error.next-inline .next-message-symbol-icon:before{content:"\E60D"}.next-message.next-message-error.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-error.next-addon .next-message-title{color:#333}.next-message.next-message-error.next-addon .next-message-content{color:#666}.next-message.next-message-error.next-addon .next-message-symbol{color:#ff3000}.next-message.next-message-error.next-addon .next-message-symbol-icon:before{content:"\E60D"}.next-message.next-message-error.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-error.next-toast .next-message-title{color:#333}.next-message.next-message-error.next-toast .next-message-content{color:#666}.next-message.next-message-error.next-toast .next-message-symbol{color:#ff3000}.next-message.next-message-error.next-toast .next-message-symbol-icon:before{content:"\E60D"}.next-message.next-message-notice.next-inline{background-color:#e3f2fd;border-color:#e3f2fd;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-notice.next-inline .next-message-title{color:#333}.next-message.next-message-notice.next-inline .next-message-content{color:#666}.next-message.next-message-notice.next-inline .next-message-symbol{color:#4494f9}.next-message.next-message-notice.next-inline .next-message-symbol-icon:before{content:"\E60C"}.next-message.next-message-notice.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-notice.next-addon .next-message-title{color:#333}.next-message.next-message-notice.next-addon .next-message-content{color:#666}.next-message.next-message-notice.next-addon .next-message-symbol{color:#4494f9}.next-message.next-message-notice.next-addon .next-message-symbol-icon:before{content:"\E60C"}.next-message.next-message-notice.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-notice.next-toast .next-message-title{color:#333}.next-message.next-message-notice.next-toast .next-message-content{color:#666}.next-message.next-message-notice.next-toast .next-message-symbol{color:#4494f9}.next-message.next-message-notice.next-toast .next-message-symbol-icon:before{content:"\E60C"}.next-message.next-message-help.next-inline{background-color:#e3fff8;border-color:#e3fff8;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-help.next-inline .next-message-title{color:#333}.next-message.next-message-help.next-inline .next-message-content{color:#666}.next-message.next-message-help.next-inline .next-message-symbol{color:#01c1b2}.next-message.next-message-help.next-inline .next-message-symbol-icon:before{content:"\E673"}.next-message.next-message-help.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-help.next-addon .next-message-title{color:#333}.next-message.next-message-help.next-addon .next-message-content{color:#666}.next-message.next-message-help.next-addon .next-message-symbol{color:#01c1b2}.next-message.next-message-help.next-addon .next-message-symbol-icon:before{content:"\E673"}.next-message.next-message-help.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-help.next-toast .next-message-title{color:#333}.next-message.next-message-help.next-toast .next-message-content{color:#666}.next-message.next-message-help.next-toast .next-message-symbol{color:#01c1b2}.next-message.next-message-help.next-toast .next-message-symbol-icon:before{content:"\E673"}.next-message.next-message-loading.next-inline{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-loading.next-inline .next-message-title{color:#333}.next-message.next-message-loading.next-inline .next-message-content{color:#666}.next-message.next-message-loading.next-inline .next-message-symbol{color:#5584ff}.next-message.next-message-loading.next-inline .next-message-symbol-icon:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}.next-message.next-message-loading.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-loading.next-addon .next-message-title{color:#333}.next-message.next-message-loading.next-addon .next-message-content{color:#666}.next-message.next-message-loading.next-addon .next-message-symbol{color:#5584ff}.next-message.next-message-loading.next-addon .next-message-symbol-icon:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}.next-message.next-message-loading.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-loading.next-toast .next-message-title{color:#333}.next-message.next-message-loading.next-toast .next-message-content{color:#666}.next-message.next-message-loading.next-toast .next-message-symbol{color:#5584ff}.next-message.next-message-loading.next-toast .next-message-symbol-icon:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}.next-message.next-medium{border-width:1px;padding:12px}.next-message.next-medium .next-message-symbol{float:left;line-height:16px}.next-message.next-medium .next-message-symbol:before{width:16px;font-size:16px;line-height:inherit}.next-message.next-medium .next-message-title{padding:0 20px 0 24px;font-size:16px;line-height:16px}.next-message.next-medium .next-message-content{margin-top:8px;padding:0 20px 0 24px;font-size:12px;line-height:12px}.next-message.next-medium .next-message-symbol+.next-message-content{margin-top:0}.next-message.next-medium.next-only-content .next-message-content{line-height:16px}.next-message.next-medium .next-message-close{top:12px;right:12px}.next-message.next-large{border-width:2px;padding:16px;line-height:18px}.next-message.next-large .next-message-symbol{float:left;line-height:24px}.next-message.next-large .next-message-symbol:before{width:24px;font-size:24px;line-height:inherit}.next-message.next-large .next-message-title{padding:0 20px 0 36px;font-size:20px;line-height:20px}.next-message.next-large .next-message-content{margin-top:8px;padding:0 20px 0 36px;font-size:12px;line-height:12px}.next-message.next-large .next-message-symbol+.next-message-content{margin-top:0}.next-message.next-large.next-only-content .next-message-content,.next-message.next-large.next-title-content .next-message-title{line-height:24px}.next-message.next-large .next-message-close{top:16px;right:16px}.next-message[dir=rtl] .next-message-symbol{float:right}.next-message[dir=rtl].next-medium .next-message-title{padding:0 24px 0 20px}.next-message[dir=rtl].next-medium .next-message-close{left:12px;right:auto}.next-message[dir=rtl].next-large .next-message-title{padding:0 36px 0 20px}.next-message[dir=rtl].next-large .next-message-close{left:16px;right:auto} \ No newline at end of file diff --git a/demos/message/deps.json b/demos/message/deps.json new file mode 100644 index 0000000000..035a8afa00 --- /dev/null +++ b/demos/message/deps.json @@ -0,0 +1 @@ +["icon","animate","overlay","demo-helper"] \ No newline at end of file diff --git a/demos/message/index.html b/demos/message/index.html new file mode 100644 index 0000000000..3a25724c08 --- /dev/null +++ b/demos/message/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/nav/build/index.css b/demos/nav/build/index.css new file mode 100644 index 0000000000..fe40852965 --- /dev/null +++ b/demos/nav/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-overlay-wrapper .next-overlay-inner{z-index:1001}.next-overlay-wrapper .next-overlay-backdrop{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;background:#000;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0}.next-overlay-wrapper.opened .next-overlay-backdrop{opacity:.2}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-balloon{position:absolute;max-width:300px;border-style:solid;border-radius:3px;word-wrap:break-word;z-index:0}.next-balloon,.next-balloon *,.next-balloon :after,.next-balloon :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-balloon:focus,.next-balloon :focus{outline:0}.next-balloon-primary{color:#333;border-color:#4494f9;background-color:#e3f2fd;-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.12);box-shadow:0 1px 3px 0 rgba(0,0,0,.12);border-width:1px}.next-balloon-primary .next-balloon-close{position:absolute;top:12px;right:12px;font-size:12px;color:#999}.next-balloon-primary .next-balloon-close .next-icon{width:12px;height:12px;line-height:12px}.next-balloon-primary .next-balloon-close .next-icon:before{width:12px;height:12px;font-size:12px;line-height:12px}.next-balloon-primary .next-balloon-close :hover{color:#333}.next-balloon-primary:after{position:absolute;width:12px;height:12px;content:" ";-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-sizing:content-box!important;box-sizing:content-box!important;border:1px solid #4494f9;background-color:#e3f2fd;z-index:-1}.next-balloon-primary.next-balloon-top:after{top:-7px;left:calc(50% + -7px);border-right:none;border-bottom:none;-webkit-box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-right:after{top:calc(50% + -7px);right:-7px;border-left:none;border-bottom:none;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-bottom:after{bottom:-7px;left:calc(50% + -7px);border-top:none;border-left:none;-webkit-box-shadow:1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-left:after{top:calc(50% + -7px)}.next-balloon-primary.next-balloon-left-top:after,.next-balloon-primary.next-balloon-left:after{left:-7px;border-top:none;border-right:none;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-left-top:after{top:12px}.next-balloon-primary.next-balloon-left-bottom:after{bottom:12px;left:-7px;border-top:none;border-right:none;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-right-top:after{top:12px}.next-balloon-primary.next-balloon-right-bottom:after,.next-balloon-primary.next-balloon-right-top:after{right:-7px;border-bottom:none;border-left:none;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-right-bottom:after{bottom:12px}.next-balloon-primary.next-balloon-top-left:after{left:12px}.next-balloon-primary.next-balloon-top-left:after,.next-balloon-primary.next-balloon-top-right:after{top:-7px;border-right:none;border-bottom:none;-webkit-box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-top-right:after{right:12px}.next-balloon-primary.next-balloon-bottom-left:after{left:12px}.next-balloon-primary.next-balloon-bottom-left:after,.next-balloon-primary.next-balloon-bottom-right:after{bottom:-7px;border-top:none;border-left:none;-webkit-box-shadow:1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-bottom-right:after{right:12px}.next-balloon-normal{color:#333;border-color:#dcdee3;background-color:#fff;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-width:1px}.next-balloon-normal .next-balloon-close{position:absolute;top:12px;right:12px;font-size:12px;color:#999}.next-balloon-normal .next-balloon-close .next-icon{width:12px;height:12px;line-height:12px}.next-balloon-normal .next-balloon-close .next-icon:before{width:12px;height:12px;font-size:12px;line-height:12px}.next-balloon-normal .next-balloon-close :hover{color:#666}.next-balloon-normal:after{position:absolute;width:12px;height:12px;content:" ";-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-sizing:content-box!important;box-sizing:content-box!important;border:1px solid #dcdee3;background-color:#fff;z-index:-1}.next-balloon-normal.next-balloon-top:after{top:-7px;left:calc(50% + -7px);border-right:none;border-bottom:none;-webkit-box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-right:after{top:calc(50% + -7px);right:-7px;border-left:none;border-bottom:none;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-bottom:after{bottom:-7px;left:calc(50% + -7px);border-top:none;border-left:none;-webkit-box-shadow:1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-left:after{top:calc(50% + -7px)}.next-balloon-normal.next-balloon-left-top:after,.next-balloon-normal.next-balloon-left:after{left:-7px;border-top:none;border-right:none;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-left-top:after{top:12px}.next-balloon-normal.next-balloon-left-bottom:after{bottom:12px;left:-7px;border-top:none;border-right:none;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-right-top:after{top:12px}.next-balloon-normal.next-balloon-right-bottom:after,.next-balloon-normal.next-balloon-right-top:after{right:-7px;border-bottom:none;border-left:none;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-right-bottom:after{bottom:12px}.next-balloon-normal.next-balloon-top-left:after{left:12px}.next-balloon-normal.next-balloon-top-left:after,.next-balloon-normal.next-balloon-top-right:after{top:-7px;border-right:none;border-bottom:none;-webkit-box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-top-right:after{right:12px}.next-balloon-normal.next-balloon-bottom-left:after{left:12px}.next-balloon-normal.next-balloon-bottom-left:after,.next-balloon-normal.next-balloon-bottom-right:after{bottom:-7px;border-top:none;border-left:none;-webkit-box-shadow:1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-bottom-right:after{right:12px}.next-balloon.visible{display:block}.next-balloon.hidden{display:none}.next-balloon-medium{padding:16px}.next-balloon-closable{padding:16px 40px 16px 16px}.next-balloon-tooltip{position:absolute;max-width:300px;border-radius:3px;font-size:12px;z-index:0;color:#333;border:1px solid #dcdee3;background-color:#f2f3f7;-webkit-box-shadow:none;box-shadow:none}.next-balloon-tooltip,.next-balloon-tooltip *,.next-balloon-tooltip :after,.next-balloon-tooltip :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-balloon-tooltip:after{position:absolute;width:12px;height:12px;content:" ";-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-sizing:content-box!important;box-sizing:content-box!important;border:1px solid #dcdee3;background-color:#f2f3f7;z-index:-1}.next-balloon-tooltip-top:after{top:-7px;left:calc(50% + -7px);border-right:none;border-bottom:none}.next-balloon-tooltip-right:after{top:calc(50% + -7px);right:-7px;border-left:none;border-bottom:none}.next-balloon-tooltip-bottom:after{bottom:-7px;left:calc(50% + -7px);border-top:none;border-left:none}.next-balloon-tooltip-left:after{top:calc(50% + -7px);left:-7px;border-top:none;border-right:none}.next-balloon-tooltip-left-top:after{top:12px;left:-7px;border-top:none;border-right:none}.next-balloon-tooltip-left-bottom:after{bottom:12px;left:-7px;border-top:none;border-right:none}.next-balloon-tooltip-right-top:after{top:12px;right:-7px;border-bottom:none;border-left:none}.next-balloon-tooltip-right-bottom:after{right:-7px;bottom:12px;border-bottom:none;border-left:none}.next-balloon-tooltip-top-left:after{top:-7px;left:12px;border-right:none;border-bottom:none}.next-balloon-tooltip-top-right:after{top:-7px;right:12px;border-right:none;border-bottom:none}.next-balloon-tooltip-bottom-left:after{bottom:-7px;left:12px;border-top:none;border-left:none}.next-balloon-tooltip-bottom-right:after{right:12px;bottom:-7px;border-top:none;border-left:none}.next-balloon-tooltip.visible{display:block}.next-balloon-tooltip.hidden{display:none}.next-balloon-tooltip-medium{padding:8px}.next-balloon[dir=rtl].next-balloon-primary .next-balloon-close{left:12px;right:auto}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-right:after{left:-7px;right:auto;border-right:none;border-top:none;border-left:inherit;border-bottom:inherit;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-left-bottom:after,.next-balloon[dir=rtl].next-balloon-primary.next-balloon-left-top:after,.next-balloon[dir=rtl].next-balloon-primary.next-balloon-left:after{right:-7px;left:auto;border-left:none;border-bottom:none;border-right:inherit;border-top:inherit;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-right-bottom:after,.next-balloon[dir=rtl].next-balloon-primary.next-balloon-right-top:after{left:-7px;right:auto;border-right:none;border-top:none;border-bottom:inherit;border-left:inherit;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-top-left:after{right:12px;left:auto}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-top-right:after{right:auto;left:12px}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-bottom-left:after{right:12px;left:auto}.next-balloon[dir=rtl].next-balloon-normal .next-balloon-close,.next-balloon[dir=rtl].next-balloon-primary.next-balloon-bottom-right:after{left:12px;right:auto}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-right:after{left:-7px;right:auto;border-right:none;border-top:none;border-left:inherit;border-bottom:inherit;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-left-bottom:after,.next-balloon[dir=rtl].next-balloon-normal.next-balloon-left-top:after,.next-balloon[dir=rtl].next-balloon-normal.next-balloon-left:after{right:-7px;left:auto;border-left:none;border-bottom:none;border-right:inherit;border-top:inherit;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-right-bottom:after,.next-balloon[dir=rtl].next-balloon-normal.next-balloon-right-top:after{left:-7px;right:auto;border-right:none;border-top:none;border-bottom:inherit;border-left:inherit;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-top-left:after{right:12px;left:auto}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-top-right:after{right:auto;left:12px}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-bottom-left:after{right:12px;left:auto}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-bottom-right:after{left:12px;right:auto}.next-balloon[dir=rtl].next-balloon-closable{padding:16px 16px 16px 40px}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-right:after{left:-7px;right:auto;border-top:none;border-right:none;border-left:inherit;border-bottom:inherit}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-left-bottom:after,.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-left-top:after,.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-left:after{right:-7px;left:auto;border-top:inherit;border-right:inherit;border-left:none;border-bottom:none}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-right-bottom:after,.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-right-top:after{left:-7px;right:auto;border-top:none;border-right:none;border-left:inherit;border-bottom:inherit}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-top-left:after{right:12px;left:auto}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-top-right:after{left:12px;right:auto}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-bottom-left:after{right:12px;left:auto}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-bottom-right:after{left:12px;right:auto}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-medium{padding:8px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-radio-button-large[dir=rtl]>label:first-child{margin-left:-1px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.next-radio-button-large[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large[dir=rtl] .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-wrapper[dir=rtl] .next-radio-label{margin-left:0;margin-right:4px}.next-radio-group[dir=rtl] .next-radio-label{margin-right:4px;margin-left:16px}.next-radio-button[dir=rtl]>label .next-radio-label{margin:0}.next-radio-wrapper{outline:0}.next-radio-wrapper .next-radio{display:inline-block;vertical-align:middle;position:relative;line-height:1}.next-radio-wrapper .next-radio,.next-radio-wrapper .next-radio *,.next-radio-wrapper .next-radio :after,.next-radio-wrapper .next-radio :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-radio-wrapper .next-radio input[type=radio]{opacity:0;position:absolute;vertical-align:middle;top:0;left:0;width:16px;height:16px;margin:0}.next-radio-wrapper .next-radio-inner{display:block;width:16px;height:16px;background:#fff;border-radius:50%;border:1px solid #c4c6cf;-webkit-transition:all .36s ease 0s;transition:all .36s ease 0s;-webkit-box-shadow:none;box-shadow:none}.next-radio-wrapper .next-radio-inner:after{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;border-radius:50%;top:50%;margin-top:-2px;left:50%;margin-left:-2px;background:#fff;content:" ";-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86)}.next-radio-wrapper.checked .next-radio-inner{border-color:#5584ff;background:#5584ff}.next-radio-wrapper.checked .next-radio-inner:after{width:4px;height:4px;font-weight:700;background:#fff;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.next-radio-wrapper.checked.hovered .next-radio-inner,.next-radio-wrapper.checked:hover .next-radio-inner{border-color:transparent}.next-radio-wrapper.disabled input[type=radio]{cursor:not-allowed}.next-radio-wrapper.disabled .next-radio-inner{border-color:#e6e7eb;background:#f7f8fa}.next-radio-wrapper.disabled.checked .next-radio-inner,.next-radio-wrapper.disabled .next-radio-inner.hovered,.next-radio-wrapper.disabled .next-radio-inner:hover{border-color:#e6e7eb}.next-radio-wrapper.disabled.checked .next-radio-inner:after{background:#ccc}.next-radio-wrapper:not(.disabled).focused .next-radio-inner,.next-radio-wrapper:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper:not(.disabled):focus .next-radio-inner,.next-radio-wrapper:not(.disabled):hover .next-radio-inner{border-color:#5584ff;background-color:#dee8ff}.next-radio-wrapper.checked.focused .next-radio-inner,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner{border-color:transparent;background:#3e71f7}.next-radio-wrapper.checked.focused .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner:after{background:#fff}.next-radio-button .next-radio,.next-radio-button input[type=radio]{width:0;height:0}.next-radio-button>label{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1;margin:0 0 0 -1px;border:1px solid #c4c6cf;background-color:#fff;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;vertical-align:middle}.next-radio-button>label .next-radio-label{display:block;color:#333;margin:0;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}.next-radio-button>label.hovered,.next-radio-button>label:focus,.next-radio-button>label:hover{z-index:10;border-color:#a0a2ad;background-color:#f2f3f7}.next-radio-button>label.hovered .next-radio-label,.next-radio-button>label:focus .next-radio-label,.next-radio-button>label:hover .next-radio-label{color:#333}.next-radio-button>label.checked{z-index:11;border-color:#5584ff;background-color:#fff}.next-radio-button>label.checked .next-radio-label{color:#5584ff}.next-radio-button>label.disabled{z-index:0;cursor:not-allowed;border-color:#e6e7eb;background-color:#f7f8fa}.next-radio-button>label.disabled .next-radio-label{color:#ccc}.next-radio-button>label.checked.disabled{z-index:0;border-color:#e6e7eb;background-color:#f2f3f7}.next-radio-button>label.checked.disabled .next-radio-label{color:#ccc}.next-radio-button-large>label{padding:0 8px;height:40px;line-height:40px}.next-radio-button-large>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-large .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium>label{padding:0 8px;height:28px;line-height:28px}.next-radio-button-medium>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-medium>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium .next-radio-label{height:26px;line-height:26px;font-size:12px}.next-radio-button-small>label{padding:0 8px;height:20px;line-height:20px}.next-radio-button-small>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small .next-radio-label{height:18px;line-height:18px;font-size:12px}.next-radio-single-input input[type=radio]{opacity:0;position:absolute;top:0;left:0;margin:0}.next-radio-group{display:inline-block}.next-radio-group .next-radio-label{color:#333;margin-right:16px}.next-radio-group.disabled .next-radio-label{color:#ccc}.next-radio-group-ver .next-radio-wrapper{display:block;margin-bottom:8px}.next-radio-label{margin:0;margin-left:4px;font-size:12px;vertical-align:middle;line-height:1}@-moz-document url-prefix(){.next-radio{margin-top:-1px}@supports ((-webkit-animation:calc(0s)) or (animation:calc(0s))){.next-radio{margin-top:-3px}}}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-checkbox-wrapper[dir=rtl]{margin-right:8px;margin-left:0}.next-checkbox-wrapper[dir=rtl]:first-child{margin-right:0}.next-checkbox-wrapper[dir=rtl]>.next-checkbox-label{margin-right:4px;margin-left:0}.next-checkbox-wrapper,.next-checkbox-wrapper *,.next-checkbox-wrapper :after,.next-checkbox-wrapper :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-checkbox-wrapper .next-checkbox{display:inline-block;position:relative;line-height:1;vertical-align:middle}.next-checkbox-wrapper input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:16px;height:16px;margin:0}.next-checkbox-wrapper .next-checkbox-inner{display:block;width:16px;height:16px;background:#fff;border-radius:3px;border:1px solid #c4c6cf;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;text-align:left;-webkit-box-shadow:none;box-shadow:none}.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;top:0;opacity:0;line-height:16px;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);color:#fff;left:4px;margin-left:0}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{vertical-align:top;margin-top:0}.next-checkbox-wrapper.checked .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.checked .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);margin-left:0}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.indeterminate .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.indeterminate .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1);margin-left:0}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.disabled input[type=checkbox]{cursor:not-allowed}.next-checkbox-wrapper.disabled .next-checkbox-inner{border-color:#e6e7eb;background:#f7f8fa}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover{border-color:#e6e7eb}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner>.next-icon{color:#ccc;opacity:1}.next-checkbox-wrapper.focused .next-checkbox-inner,.next-checkbox-wrapper.hovered .next-checkbox-inner,.next-checkbox-wrapper:not(.disabled):hover .next-checkbox-inner{border-color:#5584ff;background-color:#dee8ff}.next-checkbox-wrapper.checked.focused .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner{border-color:transparent;background-color:#3e71f7}.next-checkbox-wrapper.checked.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner>.next-icon{color:#fff;opacity:1}.next-checkbox-group .next-checkbox-wrapper{margin-left:8px}.next-checkbox-group .next-checkbox-wrapper:first-child{margin-left:0}.next-checkbox-group-ver .next-checkbox-wrapper{display:block;margin-left:0;margin-right:0;margin-bottom:8px}.next-checkbox-label{font-size:12px;vertical-align:middle;margin:0;margin-left:4px;line-height:1}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-menu[dir=rtl] .next-menu-item-helper{float:left}.next-menu[dir=rtl] .next-menu-item .next-checkbox,.next-menu[dir=rtl] .next-menu-item .next-radio{margin-left:4px;margin-right:0}.next-menu[dir=rtl] .next-menu-hoz-right{float:left}.next-menu[dir=rtl] .next-menu-hoz-icon-arrow.next-icon{left:6px;right:auto}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon{margin-left:0;margin-right:-16px}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon.next-menu-icon-right{right:auto;left:4px}.next-menu[dir=rtl] .next-menu-icon-arrow.next-icon{left:10px;right:auto}.next-menu{position:relative;min-width:100px;padding:8px 0;margin:0;list-style:none;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;background:#fff;line-height:32px;font-size:12px}.next-menu,.next-menu *,.next-menu :after,.next-menu :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-menu:focus,.next-menu :focus{outline:0}.next-menu-embeddable,.next-menu-embeddable .next-menu-item.next-disabled,.next-menu-embeddable .next-menu-item.next-disabled .next-menu-item-text>a{background:initial;border:none}.next-menu-embeddable .next-menu-item-inner{height:100%}.next-menu-content{position:relative}.next-menu-content,.next-menu-sub-menu{padding:0;margin:0;list-style:none}.next-menu-sub-menu.next-expand-enter{overflow:hidden}.next-menu-sub-menu.next-expand-enter-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-sub-menu.next-expand-leave{overflow:hidden}.next-menu-sub-menu.next-expand-leave-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-item{position:relative;padding:0 20px;-webkit-transition:background .2s ease;transition:background .2s ease;color:#333;cursor:pointer}.next-menu-item-helper{float:right;color:#999;font-style:normal;font-size:12px}.next-menu-item .next-checkbox,.next-menu-item .next-radio{margin-right:4px}.next-menu-item.next-selected{color:#333;background-color:#fff}.next-menu-item.next-selected .next-menu-icon-arrow{color:#666}.next-menu-item.next-selected .next-menu-icon-selected{color:#5584ff}.next-menu-item.next-disabled,.next-menu-item.next-disabled .next-menu-item-text>a{color:#ccc;background-color:#fff;cursor:not-allowed}.next-menu-item.next-disabled .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-icon-selected,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-selected{color:#ccc}.next-menu-item:not(.next-disabled).next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover,.next-menu-item:not(.next-disabled).next-selected:focus,.next-menu-item:not(.next-disabled).next-selected:focus:hover,.next-menu-item:not(.next-disabled).next-selected:hover,.next-menu-item:not(.next-disabled):hover{color:#333;background-color:#f2f3f7}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled):hover .next-menu-icon-arrow{color:#333}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled):hover .next-menu-icon-selected{color:#5584ff}.next-menu-item-inner{height:32px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.next-menu-item-text{vertical-align:middle}.next-menu-item-text>a{display:inline-block;text-decoration:none;color:#333}.next-menu-item-text>a:before{position:absolute;background-color:transparent;top:0;left:0;bottom:0;right:0;content:""}.next-menu.next-hoz{padding:0}.next-menu.next-hoz .next-menu-content>.next-menu-item,.next-menu.next-hoz>.next-menu-item{display:inline-block;vertical-align:top}.next-menu.next-hoz .next-menu-content,.next-menu.next-hoz .next-menu-footer,.next-menu.next-hoz .next-menu-header{display:inline-block}.next-menu-hoz-right{float:right}.next-menu-group-label{padding:0 12px;color:#999}.next-menu-divider{margin:8px 12px;border-bottom:1px solid #e6e7eb}.next-menu .next-menu-icon-selected.next-icon{position:absolute;top:0;margin-left:-16px}.next-menu .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-icon-selected.next-icon.next-menu-icon-right{right:4px}.next-menu .next-menu-icon-arrow.next-icon{position:absolute;top:0;right:10px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-icon-arrow.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow.next-icon:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-icon-arrow-down.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:scale(.5) rotate(180deg);-ms-transform:scale(.5) rotate(180deg);transform:scale(.5) rotate(180deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-down.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.next-menu .next-menu-icon-arrow-right.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:scale(.5) rotate(-90deg);-ms-transform:scale(.5) rotate(-90deg);transform:scale(.5) rotate(-90deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-right.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-hoz-icon-arrow.next-icon{position:absolute;top:0;right:6px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-hoz-icon-arrow.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-hoz-icon-arrow.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-hoz-icon-arrow.next-open:before{width:12px;font-size:12px;line-height:inherit}.next-menu.next-context{line-height:24px}.next-menu.next-context .next-menu-item-inner{height:24px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-nav{min-width:auto;padding:0;border-radius:0}.next-nav,.next-nav *,.next-nav :after,.next-nav :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-nav-icon.next-icon{margin-right:4px;font-weight:inherit}.next-nav-icon.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-nav-icon-placeholder{display:inline-block;width:16px;height:16px;margin-left:2px;margin-right:2px}.next-nav-group-label{height:40px;line-height:40px;font-size:16px}.next-nav-item .next-menu-item-text>span,.next-nav-item .next-nav-group-label>span{opacity:1;-webkit-transition:opacity .3s;transition:opacity .3s}.next-nav-item a{text-decoration:none;color:inherit}.next-nav-item.next-focused .next-menu-hoz-icon-arrow.next-icon,.next-nav-item.next-focused .next-menu-icon-arrow.next-icon,.next-nav-item .next-menu-hoz-icon-arrow.next-icon,.next-nav-item .next-menu-icon-arrow.next-icon,.next-nav-item.next-opened .next-menu-hoz-icon-arrow.next-icon,.next-nav-item.next-opened .next-menu-icon-arrow.next-icon,.next-nav-item.next-selected .next-menu-hoz-icon-arrow.next-icon,.next-nav-item.next-selected .next-menu-icon-arrow.next-icon,.next-nav-item:hover .next-menu-hoz-icon-arrow.next-icon,.next-nav-item:hover .next-menu-icon-arrow.next-icon{color:inherit;top:2px;-webkit-transform-origin:center 47%;-ms-transform-origin:center 47%;transform-origin:center 47%}.next-nav.next-active .next-nav-item:before{position:absolute;-webkit-transition:all .4s cubic-bezier(.23,1,.32,1);transition:all .4s cubic-bezier(.23,1,.32,1);content:""}.next-nav.next-hoz{height:44px;line-height:42px;font-size:12px}.next-nav.next-hoz .next-menu-item{margin-left:0;margin-right:0;padding:0 20px;border-radius:0}.next-nav.next-hoz .next-menu-item:before{height:2px}.next-nav.next-hoz .next-menu-item:not(:first-child),.next-nav.next-hoz .next-menu-sub-menu-wrapper:not(:first-child)>.next-menu-item{margin-top:0}.next-nav.next-hoz .next-menu-item:not(:last-child),.next-nav.next-hoz .next-menu-sub-menu-wrapper:not(:last-child)>.next-menu-item{margin-bottom:0}.next-nav.next-hoz .next-menu-item-inner{height:42px;font-size:12px}.next-nav.next-hoz .next-nav-group-label .next-menu-item-inner{height:40px;line-height:40px;font-size:16px}.next-nav.next-hoz .next-menu-header{float:left;height:42px}.next-nav.next-hoz .next-menu-footer{float:right;height:42px}.next-nav.next-hoz .next-nav-item:before{width:0;left:50%}.next-nav.next-hoz.next-top .next-nav-item:before{top:-1px}.next-nav.next-hoz.next-bottom .next-nav-item:before{bottom:-1px}.next-nav.next-hoz .next-selected.next-nav-item:before{width:100%;left:0}.next-nav.next-ver{-webkit-transition:width .3s;transition:width .3s;line-height:40px;font-size:12px}.next-nav.next-ver .next-menu-item{margin-left:0;margin-right:0;padding:0 20px;border-radius:0}.next-nav.next-ver .next-menu-item:before{width:2px}.next-nav.next-ver .next-menu-item:not(:first-child),.next-nav.next-ver .next-menu-sub-menu-wrapper:not(:first-child)>.next-menu-item{margin-top:0}.next-nav.next-ver .next-menu-item:not(:last-child),.next-nav.next-ver .next-menu-sub-menu-wrapper:not(:last-child)>.next-menu-item{margin-bottom:0}.next-nav.next-ver .next-menu-item-inner{height:40px;font-size:12px}.next-nav.next-ver .next-nav-group-label .next-menu-item-inner{height:40px;line-height:40px;font-size:16px}.next-nav.next-ver>.next-menu-item:first-child,.next-nav.next-ver>.next-menu-sub-menu-wrapper:first-child>.next-menu-item{margin-top:0}.next-nav.next-ver>.next-menu-item:last-child,.next-nav.next-ver>.next-menu-sub-menu-wrapper:last-child>.next-menu-item{margin-bottom:0}.next-nav.next-ver .next-menu-sub-menu .next-menu-item-inner{height:40px;line-height:40px;font-size:12px}.next-nav.next-ver .next-nav-item:before{height:0;top:50%}.next-nav.next-ver.next-left .next-nav-item:before{left:-1px}.next-nav.next-ver.next-right .next-nav-item:before{right:-1px}.next-nav.next-ver .next-selected.next-nav-item:before{height:100%;top:0}.next-nav.next-primary{border-width:0;background-color:#333;border-color:#333;color:#fff;font-weight:400;-webkit-box-shadow:2px 2px 4px 0 rgba(0,0,0,.12);box-shadow:2px 2px 4px 0 rgba(0,0,0,.12)}.next-nav.next-primary.next-hoz{line-height:44px}.next-nav.next-primary.next-hoz .next-menu-footer,.next-nav.next-primary.next-hoz .next-menu-header,.next-nav.next-primary.next-hoz .next-menu-item-inner{height:44px}.next-nav.next-primary.next-hoz.next-top .next-nav-item:before{top:0}.next-nav.next-primary.next-hoz.next-bottom .next-nav-item:before{bottom:0}.next-nav.next-primary.next-ver.next-left .next-nav-item:before{left:0}.next-nav.next-primary.next-ver.next-right .next-nav-item:before{right:0}.next-nav.next-primary .next-nav-item.next-menu-item{background-color:#333;color:#fff}.next-nav.next-primary .next-nav-item.next-menu-item.next-focused,.next-nav.next-primary .next-nav-item.next-menu-item:hover{background-color:#000;color:#fff}.next-nav.next-primary .next-nav-item.next-menu-item.next-selected{background-color:#000;color:#fff;font-weight:700}.next-nav.next-primary .next-nav-item.next-menu-item.next-opened{background-color:#000;color:#fff}.next-nav.next-primary .next-nav-item.next-menu-item:before{background-color:#5584ff}.next-nav.next-primary .next-menu-sub-menu .next-menu-item.next-opened{background-color:#000;color:#fff}.next-nav.next-primary .next-nav-group-label{color:#999;font-weight:400}.next-nav.next-primary .next-menu-sub-menu .next-menu-item{background-color:#333;color:#fff;font-weight:400}.next-nav.next-primary .next-menu-sub-menu .next-menu-item.next-focused,.next-nav.next-primary .next-menu-sub-menu .next-menu-item.next-selected,.next-nav.next-primary .next-menu-sub-menu .next-menu-item:hover{background-color:#000;color:#fff}.next-nav.next-secondary{border-width:0;background-color:#5584ff;border-color:#5584ff;color:#fff;font-weight:400;-webkit-box-shadow:2px 2px 4px 0 rgba(0,0,0,.12);box-shadow:2px 2px 4px 0 rgba(0,0,0,.12)}.next-nav.next-secondary.next-hoz{line-height:44px}.next-nav.next-secondary.next-hoz .next-menu-footer,.next-nav.next-secondary.next-hoz .next-menu-header,.next-nav.next-secondary.next-hoz .next-menu-item-inner{height:44px}.next-nav.next-secondary.next-hoz.next-top .next-nav-item:before{top:0}.next-nav.next-secondary.next-hoz.next-bottom .next-nav-item:before{bottom:0}.next-nav.next-secondary.next-ver.next-left .next-nav-item:before{left:0}.next-nav.next-secondary.next-ver.next-right .next-nav-item:before{right:0}.next-nav.next-secondary .next-nav-item.next-menu-item{background-color:#5584ff;color:#fff}.next-nav.next-secondary .next-nav-item.next-menu-item.next-focused,.next-nav.next-secondary .next-nav-item.next-menu-item:hover{background-color:#3e71f7;color:#fff}.next-nav.next-secondary .next-nav-item.next-menu-item.next-selected{background-color:#3e71f7;color:#fff;font-weight:700}.next-nav.next-secondary .next-nav-item.next-menu-item.next-opened{background-color:#3e71f7;color:#fff}.next-nav.next-secondary .next-nav-item.next-menu-item:before{background-color:#3e71f7}.next-nav.next-secondary .next-menu-sub-menu .next-menu-item.next-opened{background-color:#3e71f7;color:#fff}.next-nav.next-secondary .next-nav-group-label{color:#fff;font-weight:400}.next-nav.next-secondary .next-menu-sub-menu .next-menu-item{background-color:#5584ff;color:#fff;font-weight:400}.next-nav.next-secondary .next-menu-sub-menu .next-menu-item.next-focused,.next-nav.next-secondary .next-menu-sub-menu .next-menu-item.next-selected,.next-nav.next-secondary .next-menu-sub-menu .next-menu-item:hover{background-color:#3e71f7;color:#fff}.next-nav.next-normal{border-color:#dcdee3;font-weight:400;-webkit-box-shadow:2px 2px 4px 0 rgba(0,0,0,.12);box-shadow:2px 2px 4px 0 rgba(0,0,0,.12)}.next-nav.next-normal,.next-nav.next-normal .next-nav-item.next-menu-item{background-color:#fff;color:#333}.next-nav.next-normal .next-nav-item.next-menu-item.next-focused,.next-nav.next-normal .next-nav-item.next-menu-item:hover{background-color:#fff;color:#5584ff}.next-nav.next-normal .next-nav-item.next-menu-item.next-selected{background-color:#f2f3f7;color:#5584ff;font-weight:700}.next-nav.next-normal .next-nav-item.next-menu-item.next-opened{background-color:#f2f3f7;color:#5584ff}.next-nav.next-normal .next-nav-item.next-menu-item:before{background-color:#5584ff}.next-nav.next-normal .next-menu-sub-menu .next-menu-item.next-opened{background-color:#f2f3f7;color:#5584ff}.next-nav.next-normal .next-nav-group-label{color:#999;font-weight:400}.next-nav.next-normal .next-menu-sub-menu .next-menu-item{background-color:#fff;color:#333;font-weight:400}.next-nav.next-normal .next-menu-sub-menu .next-menu-item.next-focused,.next-nav.next-normal .next-menu-sub-menu .next-menu-item.next-selected,.next-nav.next-normal .next-menu-sub-menu .next-menu-item:hover{background-color:#f2f3f7;color:#5584ff}.next-nav.next-line{background-color:transparent;border-color:#dcdee3;color:#333;font-weight:400;-webkit-box-shadow:none;box-shadow:none}.next-nav.next-line.next-hoz{border-right-color:transparent}.next-nav.next-line.next-hoz,.next-nav.next-line.next-ver{border-top-color:transparent;border-left-color:transparent}.next-nav.next-line.next-ver{border-bottom-color:transparent}.next-nav.next-line .next-nav-item.next-menu-item{background-color:transparent;color:#333}.next-nav.next-line .next-nav-item.next-menu-item.next-focused,.next-nav.next-line .next-nav-item.next-menu-item:hover{background-color:transparent;color:#5584ff}.next-nav.next-line .next-nav-item.next-menu-item.next-selected{background-color:transparent;color:#5584ff;font-weight:700}.next-nav.next-line .next-nav-item.next-menu-item.next-opened{background-color:transparent;color:#5584ff}.next-nav.next-line .next-nav-item.next-menu-item:before{background-color:#5584ff}.next-nav.next-line .next-menu-sub-menu .next-menu-item.next-opened{background-color:transparent;color:#5584ff}.next-nav.next-line .next-nav-group-label{color:#999;font-weight:400}.next-nav.next-line .next-menu-sub-menu .next-menu-item{background-color:transparent;color:#333;font-weight:400}.next-nav.next-line .next-menu-sub-menu .next-menu-item.next-focused,.next-nav.next-line .next-menu-sub-menu .next-menu-item.next-selected,.next-nav.next-line .next-menu-sub-menu .next-menu-item:hover{background-color:transparent;color:#5584ff}.next-nav.next-icon-only .next-menu-item-inner{text-overflow:clip}.next-nav.next-icon-only .next-menu-item-text>span,.next-nav.next-icon-only .next-nav-group-label>.next-menu-item-inner>span{opacity:0}.next-nav.next-icon-only.next-normal .next-nav-icon.next-icon{margin-left:1px;margin-right:1px}.next-nav.next-icon-only.next-normal .next-nav-icon.next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-nav.next-icon-only.next-primary .next-nav-icon.next-icon{margin-left:2px;margin-right:2px}.next-nav.next-icon-only.next-primary .next-nav-icon.next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-nav.next-icon-only.next-secondary .next-nav-icon.next-icon{margin-left:2px;margin-right:2px}.next-nav.next-icon-only.next-secondary .next-nav-icon.next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-nav.next-icon-only .next-nav-icon-only-arrow.next-icon{margin-left:1px;-webkit-transition:all .3s ease;transition:all .3s ease;-webkit-transform-origin:center 46%;-ms-transform-origin:center 46%;transform-origin:center 46%}.next-nav.next-icon-only .next-nav-icon-only-arrow.next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-nav.next-icon-only .next-nav-item.next-opened .next-nav-icon-only-arrow.next-icon-arrow-down{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);margin-left:1px}.next-nav.next-icon-only .next-nav-item.next-opened .next-nav-icon-only-arrow.next-icon-arrow-down:before{width:16px;font-size:16px;line-height:inherit}.next-nav.next-icon-only .next-nav-item.next-selected .next-nav-icon.next-icon{-webkit-animation:pulse .3s cubic-bezier(.23,1,.32,1);animation:pulse .3s cubic-bezier(.23,1,.32,1)}.next-nav.next-icon-only .next-menu-hoz-icon-arrow,.next-nav.next-icon-only .next-menu-icon-arrow{display:none}.next-nav-embeddable.next-normal,.next-nav-embeddable.next-primary,.next-nav-embeddable.next-secondary{height:100%;background:initial;-webkit-box-shadow:none;box-shadow:none;border:none}.next-nav-embeddable.next-normal .next-menu-sub-menu .next-menu-item,.next-nav-embeddable.next-normal .next-nav-item.next-menu-item,.next-nav-embeddable.next-primary .next-menu-sub-menu .next-menu-item,.next-nav-embeddable.next-primary .next-nav-item.next-menu-item,.next-nav-embeddable.next-secondary .next-menu-sub-menu .next-menu-item,.next-nav-embeddable.next-secondary .next-nav-item.next-menu-item{background:initial}.next-nav-embeddable.next-nav.next-hoz .next-menu-item-inner,.next-nav-embeddable.next-nav.next-hoz .next-menu-sub-menu .next-menu-item,.next-nav-embeddable.next-nav.next-hoz .next-nav-item.next-menu-item{height:100%}.next-nav[dir=rtl] .next-nav-icon.next-icon{margin-left:4px;margin-right:0}.next-nav[dir=rtl] .next-nav-icon.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-nav[dir=rtl].next-hoz .next-menu-header{float:right}.next-nav[dir=rtl].next-hoz .next-menu-footer{float:left}.next-nav[dir=rtl].next-hoz .next-nav-item:before{width:0;left:50%}.next-nav[dir=rtl].next-hoz .next-selected.next-nav-item:before{width:100%;left:auto;right:0}.next-nav[dir=rtl].next-ver.next-left .next-nav-item:before{right:-1px;left:auto}.next-nav[dir=rtl].next-ver.next-right .next-nav-item:before{left:-1px;right:auto}.next-nav[dir=rtl].next-primary.next-ver.next-left .next-nav-item:before{right:0;left:auto}.next-nav[dir=rtl].next-primary.next-ver.next-right .next-nav-item:before{left:0;right:auto}.next-nav[dir=rtl].next-secondary.next-ver.next-left .next-nav-item:before{right:0;left:auto}.next-nav[dir=rtl].next-secondary.next-ver.next-right .next-nav-item:before{left:0;right:auto}.next-nav[dir=rtl] .next-nav.next-line.next-ver{border-top-color:transparent;border-right-color:transparent;border-left-color:none;border-bottom-color:transparent}.next-nav[dir=rtl].next-icon-only .next-nav-icon-only-arrow.next-icon,.next-nav[dir=rtl].next-icon-only .next-nav-icon.next-icon,.next-nav[dir=rtl].next-icon-only .next-nav-item.next-opened .next-nav-icon-only-arrow.next-icon-arrow-down{margin-left:0;margin-right:1px}.next-nav[dir=rtl].next-icon-only .next-nav-icon-only-arrow.next-icon:before,.next-nav[dir=rtl].next-icon-only .next-nav-icon.next-icon:before,.next-nav[dir=rtl].next-icon-only .next-nav-item.next-opened .next-nav-icon-only-arrow.next-icon-arrow-down:before{width:16px;font-size:16px;line-height:inherit} \ No newline at end of file diff --git a/demos/nav/deps.json b/demos/nav/deps.json new file mode 100644 index 0000000000..ff14afb3ef --- /dev/null +++ b/demos/nav/deps.json @@ -0,0 +1 @@ +["animate","menu","balloon","demo-helper"] \ No newline at end of file diff --git a/demos/nav/index.html b/demos/nav/index.html new file mode 100644 index 0000000000..aafcd4930c --- /dev/null +++ b/demos/nav/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/number-picker/build/index.css b/demos/number-picker/build/index.css new file mode 100644 index 0000000000..e432e52c3f --- /dev/null +++ b/demos/number-picker/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-btn,.next-btn *,.next-btn :after,.next-btn :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-btn::-moz-focus-inner{border:0;padding:0}.next-btn,.next-btn:active,.next-btn:focus,.next-btn:hover{outline:0}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-btn{position:relative;display:inline-block;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;text-align:center;text-transform:none;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;cursor:pointer}.next-btn:after{text-align:center;position:absolute;opacity:0;visibility:hidden;-webkit-transition:opacity .5s ease;transition:opacity .5s ease}.next-btn .next-icon.next-xs:before{vertical-align:baseline}.next-btn.hover,.next-btn:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn.next-small{border-radius:3px;padding:0 8px;height:20px;line-height:18px;font-size:12px;border-width:1px}.next-btn.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-small>.next-btn-icon.next-icon-alone:before,.next-btn.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small.next-btn-loading{padding-left:24px}.next-btn.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:8px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-small.next-btn-loading>.next-icon{display:none}.next-btn.next-medium{border-radius:3px;padding:0 12px;height:28px;line-height:26px;font-size:12px;border-width:1px}.next-btn.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium.next-btn-loading{padding-left:28px}.next-btn.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:12px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-medium.next-btn-loading>.next-icon{display:none}.next-btn.next-large{border-radius:3px;padding:0 16px;height:40px;line-height:38px;font-size:16px;border-width:1px}.next-btn.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-large>.next-btn-icon.next-icon-alone:before,.next-btn.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large.next-btn-loading{padding-left:36px}.next-btn.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:16px;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn.next-large.next-btn-loading>.next-icon{display:none}.next-btn.next-btn-normal{border-style:solid;background-color:#fff;border-color:#c4c6cf}.next-btn.next-btn-normal,.next-btn.next-btn-normal.visited,.next-btn.next-btn-normal:link,.next-btn.next-btn-normal:visited{color:#333}.next-btn.next-btn-normal.active,.next-btn.next-btn-normal.hover,.next-btn.next-btn-normal:active,.next-btn.next-btn-normal:focus,.next-btn.next-btn-normal:hover{color:#333;background-color:#f2f3f7;border-color:#a0a2ad;text-decoration:none}.next-btn.next-btn-primary{border-style:solid;background-color:#5584ff;border-color:transparent}.next-btn.next-btn-primary,.next-btn.next-btn-primary.visited,.next-btn.next-btn-primary:link,.next-btn.next-btn-primary:visited{color:#fff}.next-btn.next-btn-primary.active,.next-btn.next-btn-primary.hover,.next-btn.next-btn-primary:active,.next-btn.next-btn-primary:focus,.next-btn.next-btn-primary:hover{color:#fff;background-color:#3e71f7;border-color:transparent;text-decoration:none}.next-btn.next-btn-secondary{border-style:solid;background-color:#fff;border-color:#5584ff}.next-btn.next-btn-secondary,.next-btn.next-btn-secondary.visited,.next-btn.next-btn-secondary:link,.next-btn.next-btn-secondary:visited{color:#5584ff}.next-btn.next-btn-secondary.active,.next-btn.next-btn-secondary.hover,.next-btn.next-btn-secondary:active,.next-btn.next-btn-secondary:focus,.next-btn.next-btn-secondary:hover{color:#fff;background-color:#3e71f7;border-color:#3e71f7;text-decoration:none}.next-btn.disabled,.next-btn[disabled]{cursor:not-allowed;background-color:#f7f8fa;border-color:#e6e7eb}.next-btn.disabled,.next-btn.disabled.visited,.next-btn.disabled:link,.next-btn.disabled:visited,.next-btn[disabled],.next-btn[disabled].visited,.next-btn[disabled]:link,.next-btn[disabled]:visited{color:#ccc}.next-btn.disabled.active,.next-btn.disabled.hover,.next-btn.disabled:active,.next-btn.disabled:focus,.next-btn.disabled:hover,.next-btn[disabled].active,.next-btn[disabled].hover,.next-btn[disabled]:active,.next-btn[disabled]:focus,.next-btn[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-warning{border-style:solid}.next-btn-warning.next-btn-primary{background-color:#ff3000;border-color:#ff3000}.next-btn-warning.next-btn-primary,.next-btn-warning.next-btn-primary.visited,.next-btn-warning.next-btn-primary:link,.next-btn-warning.next-btn-primary:visited{color:#fff}.next-btn-warning.next-btn-primary.active,.next-btn-warning.next-btn-primary.hover,.next-btn-warning.next-btn-primary:active,.next-btn-warning.next-btn-primary:focus,.next-btn-warning.next-btn-primary:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary[disabled]{background-color:#f7f8fa;border-color:#dcdee3}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary.disabled.visited,.next-btn-warning.next-btn-primary.disabled:link,.next-btn-warning.next-btn-primary.disabled:visited,.next-btn-warning.next-btn-primary[disabled],.next-btn-warning.next-btn-primary[disabled].visited,.next-btn-warning.next-btn-primary[disabled]:link,.next-btn-warning.next-btn-primary[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-primary.disabled.active,.next-btn-warning.next-btn-primary.disabled.hover,.next-btn-warning.next-btn-primary.disabled:active,.next-btn-warning.next-btn-primary.disabled:focus,.next-btn-warning.next-btn-primary.disabled:hover,.next-btn-warning.next-btn-primary[disabled].active,.next-btn-warning.next-btn-primary[disabled].hover,.next-btn-warning.next-btn-primary[disabled]:active,.next-btn-warning.next-btn-primary[disabled]:focus,.next-btn-warning.next-btn-primary[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#dcdee3;text-decoration:none}.next-btn-warning.next-btn-normal{background-color:#fff;border-color:#ff3000}.next-btn-warning.next-btn-normal,.next-btn-warning.next-btn-normal.visited,.next-btn-warning.next-btn-normal:link,.next-btn-warning.next-btn-normal:visited{color:#ff3000}.next-btn-warning.next-btn-normal.active,.next-btn-warning.next-btn-normal.hover,.next-btn-warning.next-btn-normal:active,.next-btn-warning.next-btn-normal:focus,.next-btn-warning.next-btn-normal:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal[disabled]{background-color:#f7f8fa;border-color:#e6e7eb}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal.disabled.visited,.next-btn-warning.next-btn-normal.disabled:link,.next-btn-warning.next-btn-normal.disabled:visited,.next-btn-warning.next-btn-normal[disabled],.next-btn-warning.next-btn-normal[disabled].visited,.next-btn-warning.next-btn-normal[disabled]:link,.next-btn-warning.next-btn-normal[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-normal.disabled.active,.next-btn-warning.next-btn-normal.disabled.hover,.next-btn-warning.next-btn-normal.disabled:active,.next-btn-warning.next-btn-normal.disabled:focus,.next-btn-warning.next-btn-normal.disabled:hover,.next-btn-warning.next-btn-normal[disabled].active,.next-btn-warning.next-btn-normal[disabled].hover,.next-btn-warning.next-btn-normal[disabled]:active,.next-btn-warning.next-btn-normal[disabled]:focus,.next-btn-warning.next-btn-normal[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-text{border-radius:0}.next-btn-text,.next-btn-text.hover,.next-btn-text:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn-text.next-btn-primary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-primary,.next-btn-text.next-btn-primary.visited,.next-btn-text.next-btn-primary:link,.next-btn-text.next-btn-primary:visited{color:#5584ff}.next-btn-text.next-btn-primary.active,.next-btn-text.next-btn-primary.hover,.next-btn-text.next-btn-primary:active,.next-btn-text.next-btn-primary:focus,.next-btn-text.next-btn-primary:hover{color:#3e71f7;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-secondary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-secondary,.next-btn-text.next-btn-secondary.visited,.next-btn-text.next-btn-secondary:link,.next-btn-text.next-btn-secondary:visited{color:#666}.next-btn-text.next-btn-secondary.active,.next-btn-text.next-btn-secondary.hover,.next-btn-text.next-btn-secondary:active,.next-btn-text.next-btn-secondary:focus,.next-btn-text.next-btn-secondary:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-normal{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-normal,.next-btn-text.next-btn-normal.visited,.next-btn-text.next-btn-normal:link,.next-btn-text.next-btn-normal:visited{color:#333}.next-btn-text.next-btn-normal.active,.next-btn-text.next-btn-normal.hover,.next-btn-text.next-btn-normal:active,.next-btn-text.next-btn-normal:focus,.next-btn-text.next-btn-normal:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-large{border-radius:0;padding:0;height:24px;line-height:24px;font-size:14px;border-width:0}.next-btn-text.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-large>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large.next-btn-loading{padding-left:20px}.next-btn-text.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:0;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn-text.next-large.next-btn-loading>.next-icon{display:none}.next-btn-text.next-medium{border-radius:0;padding:0;height:20px;line-height:20px;font-size:12px;border-width:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium.next-btn-loading{padding-left:16px}.next-btn-text.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-medium.next-btn-loading>.next-icon{display:none}.next-btn-text.next-small{border-radius:0;padding:0;height:16px;line-height:16px;font-size:12px;border-width:0}.next-btn-text.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-small>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small.next-btn-loading{padding-left:16px}.next-btn-text.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-small.next-btn-loading>.next-icon{display:none}.next-btn-text.disabled,.next-btn-text[disabled]{background-color:transparent;border-color:transparent}.next-btn-text.disabled,.next-btn-text.disabled.visited,.next-btn-text.disabled:link,.next-btn-text.disabled:visited,.next-btn-text[disabled],.next-btn-text[disabled].visited,.next-btn-text[disabled]:link,.next-btn-text[disabled]:visited{color:#ccc}.next-btn-text.disabled.active,.next-btn-text.disabled.hover,.next-btn-text.disabled:active,.next-btn-text.disabled:focus,.next-btn-text.disabled:hover,.next-btn-text[disabled].active,.next-btn-text[disabled].hover,.next-btn-text[disabled]:active,.next-btn-text[disabled]:focus,.next-btn-text[disabled]:hover{color:#ccc;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-loading{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-loading,.next-btn-text.next-btn-loading.visited,.next-btn-text.next-btn-loading:link,.next-btn-text.next-btn-loading:visited{color:#333}.next-btn-text.next-btn-loading.active,.next-btn-text.next-btn-loading.hover,.next-btn-text.next-btn-loading:active,.next-btn-text.next-btn-loading:focus,.next-btn-text.next-btn-loading:hover{color:#333;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-loading{pointer-events:none}.next-btn-loading:after{font-family:NextIcon;content:"\E646";opacity:1;visibility:visible;-webkit-animation:loadingCircle 2s infinite linear;animation:loadingCircle 2s infinite linear}.next-btn-ghost{-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-btn-ghost.next-btn-dark{background-color:transparent;border-color:#fff}.next-btn-ghost.next-btn-dark,.next-btn-ghost.next-btn-dark.visited,.next-btn-ghost.next-btn-dark:link,.next-btn-ghost.next-btn-dark:visited{color:#fff}.next-btn-ghost.next-btn-dark.active,.next-btn-ghost.next-btn-dark.hover,.next-btn-ghost.next-btn-dark:active,.next-btn-ghost.next-btn-dark:focus,.next-btn-ghost.next-btn-dark:hover{color:#fff;background-color:hsla(0,0%,100%,.8);border-color:#fff;text-decoration:none}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark[disabled]{background-color:transparent;border-color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark.disabled.visited,.next-btn-ghost.next-btn-dark.disabled:link,.next-btn-ghost.next-btn-dark.disabled:visited,.next-btn-ghost.next-btn-dark[disabled],.next-btn-ghost.next-btn-dark[disabled].visited,.next-btn-ghost.next-btn-dark[disabled]:link,.next-btn-ghost.next-btn-dark[disabled]:visited{color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled.active,.next-btn-ghost.next-btn-dark.disabled.hover,.next-btn-ghost.next-btn-dark.disabled:active,.next-btn-ghost.next-btn-dark.disabled:focus,.next-btn-ghost.next-btn-dark.disabled:hover,.next-btn-ghost.next-btn-dark[disabled].active,.next-btn-ghost.next-btn-dark[disabled].hover,.next-btn-ghost.next-btn-dark[disabled]:active,.next-btn-ghost.next-btn-dark[disabled]:focus,.next-btn-ghost.next-btn-dark[disabled]:hover{color:hsla(0,0%,100%,.4);background-color:transparent;border-color:hsla(0,0%,100%,.4);text-decoration:none}.next-btn-ghost.next-btn-light{background-color:transparent;border-color:#333}.next-btn-ghost.next-btn-light,.next-btn-ghost.next-btn-light.visited,.next-btn-ghost.next-btn-light:link,.next-btn-ghost.next-btn-light:visited{color:#333}.next-btn-ghost.next-btn-light.active,.next-btn-ghost.next-btn-light.hover,.next-btn-ghost.next-btn-light:active,.next-btn-ghost.next-btn-light:focus,.next-btn-ghost.next-btn-light:hover{color:#999;background-color:rgba(0,0,0,.92);border-color:#333;text-decoration:none}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light[disabled]{background-color:transparent;border-color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light.disabled.visited,.next-btn-ghost.next-btn-light.disabled:link,.next-btn-ghost.next-btn-light.disabled:visited,.next-btn-ghost.next-btn-light[disabled],.next-btn-ghost.next-btn-light[disabled].visited,.next-btn-ghost.next-btn-light[disabled]:link,.next-btn-ghost.next-btn-light[disabled]:visited{color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled.active,.next-btn-ghost.next-btn-light.disabled.hover,.next-btn-ghost.next-btn-light.disabled:active,.next-btn-ghost.next-btn-light.disabled:focus,.next-btn-ghost.next-btn-light.disabled:hover,.next-btn-ghost.next-btn-light[disabled].active,.next-btn-ghost.next-btn-light[disabled].hover,.next-btn-ghost.next-btn-light[disabled]:active,.next-btn-ghost.next-btn-light[disabled]:focus,.next-btn-ghost.next-btn-light[disabled]:hover{color:rgba(0,0,0,.1);background-color:transparent;border-color:rgba(0,0,0,.1);text-decoration:none}.next-btn-group{position:relative;display:inline-block;vertical-align:middle}.next-btn-group>.next-btn{position:relative;float:left;-webkit-box-shadow:none;box-shadow:none}.next-btn-group>.next-btn.active,.next-btn-group>.next-btn:active,.next-btn-group>.next-btn:focus,.next-btn-group>.next-btn:hover{z-index:1}.next-btn-group>.next-btn.disabled,.next-btn-group>.next-btn[disabled]{z-index:0}.next-btn-group .next-btn.next-btn{margin:0 0 0 -1px}.next-btn-group .next-btn:not(:first-child):not(:last-child){border-radius:0}.next-btn-group>.next-btn:first-child{margin:0}.next-btn-group>.next-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group>.next-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group>.next-btn-primary:not(:first-child){border-left-color:hsla(0,0%,100%,.2)}.next-btn-group>.next-btn-primary:not(:first-child):hover{border-left-color:transparent}.next-btn-group>.next-btn-primary:not(:first-child).disabled,.next-btn-group>.next-btn-primary:not(:first-child)[disabled]{border-left-color:#e6e7eb}.next-btn-group[dir=rtl]>.next-btn{float:right}.next-btn-group[dir=rtl] .next-btn.next-btn{margin:0 -1px 0 0}.next-btn-group[dir=rtl]>.next-btn:first-child:not(:last-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group[dir=rtl]>.next-btn:last-child:not(:first-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child){border-right-color:hsla(0,0%,100%,.2)}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child):hover{border-right-color:transparent}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child).disabled,.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child)[disabled]{border-right-color:#e6e7eb}.next-btn.next-small[dir=rtl]{border-radius:3px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl].next-btn-loading{padding-left:8px;padding-right:24px}.next-btn.next-small[dir=rtl].next-btn-loading:after{right:8px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-medium[dir=rtl]{border-radius:3px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl].next-btn-loading{padding-left:12px;padding-right:28px}.next-btn.next-medium[dir=rtl].next-btn-loading:after{right:12px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-large[dir=rtl]{border-radius:3px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl].next-btn-loading{padding-left:16px;padding-right:36px}.next-btn.next-large[dir=rtl].next-btn-loading:after{right:16px;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-large{border-radius:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large.next-btn-loading{padding-left:0;padding-right:20px}.next-btn-text[dir=rtl].next-large.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-medium{border-radius:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-medium.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-small{border-radius:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-small.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-input{vertical-align:middle;display:inline-table;border-collapse:separate;font-size:0;line-height:1;width:200px;border-spacing:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;border:1px solid #c4c6cf;background-color:#fff}.next-input,.next-input *,.next-input :after,.next-input :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input input{height:100%}.next-input input[type=reset],.next-input input[type=submit]{-webkit-appearance:button;cursor:pointer}.next-input input::-moz-focus-inner{border:0;padding:0}.next-input input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset}.next-input textarea{resize:none}.next-input input,.next-input textarea{width:100%;border:none;outline:none;padding:0;margin:0;font-weight:400;vertical-align:middle;background-color:transparent;color:#333}.next-input input::-ms-clear,.next-input textarea::-ms-clear{display:none}.next-input.next-input-textarea{border-radius:3px;font-size:0}.next-input.next-input-textarea textarea{color:#333;padding:4px 8px;font-size:12px;border-radius:3px}.next-input.next-input-textarea .next-input-control{display:block;width:auto;border-radius:3px}.next-input.next-input-textarea .next-input-len{padding:0 8px 4px;display:block;text-align:right;width:auto}.next-input.next-small{height:20px;border-radius:3px}.next-input.next-small .next-input-label{padding-left:8px;font-size:12px}.next-input.next-small .next-input-inner{font-size:12px}.next-input.next-small .next-input-control{padding-right:4px}.next-input.next-small input{height:18px;line-height:18px \0;padding:0 4px;font-size:12px}.next-input.next-small input::-webkit-input-placeholder{font-size:12px}.next-input.next-small input::-moz-placeholder{font-size:12px}.next-input.next-small input::-ms-input-placeholder{font-size:12px}.next-input.next-small input::placeholder{font-size:12px}.next-input.next-small .next-input-text-field{padding:0 4px;font-size:12px;height:18px;line-height:18px}.next-input.next-small .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-small input{border-radius:3px}.next-input.next-small .next-input-control{border-radius:0 3px 3px 0}.next-input.next-medium{height:28px;border-radius:3px}.next-input.next-medium .next-input-label{padding-left:8px;font-size:12px}.next-input.next-medium .next-input-inner{font-size:12px}.next-input.next-medium .next-input-control{padding-right:8px}.next-input.next-medium input{height:26px;line-height:26px \0;padding:0 8px;font-size:12px}.next-input.next-medium input::-webkit-input-placeholder{font-size:12px}.next-input.next-medium input::-moz-placeholder{font-size:12px}.next-input.next-medium input::-ms-input-placeholder{font-size:12px}.next-input.next-medium input::placeholder{font-size:12px}.next-input.next-medium .next-input-text-field{padding:0 8px;font-size:12px;height:26px;line-height:26px}.next-input.next-medium .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-medium input{border-radius:3px}.next-input.next-medium .next-input-control{border-radius:0 3px 3px 0}.next-input.next-large{height:40px;border-radius:3px}.next-input.next-large .next-input-label{padding-left:12px;font-size:16px}.next-input.next-large .next-input-inner{font-size:16px}.next-input.next-large .next-input-control{padding-right:8px}.next-input.next-large input{height:38px;line-height:38px \0;padding:0 12px;font-size:16px}.next-input.next-large input::-webkit-input-placeholder{font-size:16px}.next-input.next-large input::-moz-placeholder{font-size:16px}.next-input.next-large input::-ms-input-placeholder{font-size:16px}.next-input.next-large input::placeholder{font-size:16px}.next-input.next-large .next-input-text-field{padding:0 12px;font-size:16px;height:38px;line-height:38px}.next-input.next-large .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-input.next-large input{border-radius:3px}.next-input.next-large .next-input-control{border-radius:0 3px 3px 0}.next-input-hint-wrap{color:#999;position:relative}.next-input-hint-wrap .next-input-clear{opacity:0;z-index:1;position:absolute}.next-input-hint-wrap .next-input-hint{opacity:1}.next-input .next-icon-delete-filling:hover{cursor:pointer;color:#666}.next-input.next-focus,.next-input:hover{border-color:#a0a2ad;background-color:#fff}.next-input.next-focus .next-input-clear,.next-input:hover .next-input-clear{opacity:1}.next-input.next-focus .next-input-clear+.next-input-hint,.next-input:hover .next-input-clear+.next-input-hint{opacity:0}.next-input .next-input-clear:focus{opacity:1}.next-input .next-input-clear:focus+.next-input-hint{opacity:0}.next-input.next-focus{border-color:#5584ff;background-color:#fff}.next-input.next-error,.next-input.next-error.next-focus,.next-input.next-error:hover{border-color:#ff3000}.next-input.next-hidden{display:none}.next-input.next-noborder{border:none}.next-input-control .next-input-len{font-size:12px;line-height:12px;color:#999;display:table-cell;width:1px;vertical-align:bottom}.next-input-control .next-input-len.next-error{color:#ff3000}.next-input-control>*{display:table-cell;width:1%;top:0}.next-input-control>:not(:last-child){padding-right:4px}.next-input-control .next-icon{-webkit-transition:all .3s ease-out;transition:all .3s ease-out;color:#999}.next-input-control .next-icon-success-filling{color:#46bc15}.next-input-control .next-icon-loading{color:#4494f9}.next-input-label{color:#666}.next-input input::-moz-placeholder,.next-input textarea::-moz-placeholder{color:#999;opacity:1}.next-input input:-ms-input-placeholder,.next-input textarea:-ms-input-placeholder{color:#999}.next-input input::-webkit-input-placeholder,.next-input textarea::-webkit-input-placeholder{color:#999}.next-input.next-disabled{color:#ccc;cursor:not-allowed}.next-input.next-disabled,.next-input.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled input::-moz-placeholder,.next-input.next-disabled textarea::-moz-placeholder{color:#ccc;opacity:1}.next-input.next-disabled input:-ms-input-placeholder,.next-input.next-disabled textarea:-ms-input-placeholder{color:#ccc}.next-input.next-disabled input::-webkit-input-placeholder,.next-input.next-disabled textarea::-webkit-input-placeholder{color:#ccc}.next-input.next-disabled .next-input-label,.next-input.next-disabled .next-input-len{color:#ccc}.next-input.next-disabled input,.next-input.next-disabled textarea{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa;cursor:not-allowed}.next-input.next-disabled input:hover,.next-input.next-disabled textarea:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled .next-input-hint-wrap{color:#ccc}.next-input.next-disabled .next-input-hint-wrap .next-input-clear{opacity:0}.next-input.next-disabled .next-input-hint-wrap .next-input-hint{opacity:1}.next-input.next-disabled .next-input-hint-wrap .next-icon-delete-filling:hover{cursor:not-allowed;color:#ccc}.next-input.next-disabled .next-icon{color:#ccc}.next-input-control,.next-input-inner,.next-input-label{display:table-cell;width:1px;vertical-align:middle;line-height:1;background-color:transparent;white-space:nowrap}.next-input-group{display:inline-table;border-collapse:separate;border-spacing:0;line-height:0;width:100%}.next-input-group,.next-input-group *,.next-input-group :after,.next-input-group :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input-group-auto-width{width:100%;border-radius:0!important}.next-input-group>.next-input:first-child.next-large,.next-input-group>.next-input:first-child.next-medium,.next-input-group>.next-input:first-child.next-small{border-top-left-radius:3px!important;border-bottom-left-radius:3px!important}.next-input-group>.next-input:last-child.next-large,.next-input-group>.next-input:last-child.next-medium,.next-input-group>.next-input:last-child.next-small{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.next-input-group-addon{width:1px;display:table-cell;vertical-align:middle;white-space:nowrap}.next-input-group-addon:first-child,.next-input-group-addon:first-child>*{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group-addon:last-child,.next-input-group-addon:last-child>*{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group-text{color:#999;background-color:#f2f3f7;text-align:center;border:1px solid #c4c6cf;padding:0 8px}.next-input-group-text:first-child{border-right-width:0}.next-input-group-text:last-child{border-left-width:0}.next-input-group-text.next-disabled{color:#ccc;cursor:not-allowed}.next-input-group-text.next-disabled,.next-input-group-text.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input-group-text.next-medium,.next-input-group-text.next-small{font-size:12px;border-radius:3px}.next-input-group-text.next-large{font-size:16px;border-radius:3px}.next-input[dir=rtl].next-small .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-small .next-input-control{padding-right:0;padding-left:4px}.next-input[dir=rtl].next-medium .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-medium .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-large .next-input-label{padding-left:0;padding-right:12px}.next-input[dir=rtl].next-large .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-input-textarea .next-input-len{text-align:left}.next-input[dir=rtl] .next-input-control>:not(:last-child){padding-left:4px;padding-right:0}.next-input-group[dir=rtl] .next-input-group-addon:first-child{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-small{border-bottom-right-radius:3px!important;border-top-right-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-small{border-bottom-left-radius:3px!important;border-top-left-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-text:first-child{border-right-width:1px;border-left:0}.next-input-group[dir=rtl] .next-input-group-text:last-child{border-left-width:1px;border-right:0}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-number-picker{display:inline-block}.next-number-picker,.next-number-picker *,.next-number-picker :after,.next-number-picker :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-number-picker .next-btn{padding:0!important;line-height:0!important;-webkit-box-shadow:none!important;box-shadow:none!important}.next-number-picker-normal{width:80px}.next-number-picker-normal .next-input{width:100%}.next-number-picker-normal .next-input input{padding-right:2px}.next-number-picker-normal .next-btn{display:block}.next-number-picker-normal .next-btn:hover{z-index:1}.next-number-picker-normal .next-btn:first-child{border-right:none;border-top:none;height:50%;border-top-left-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.next-number-picker-normal .next-btn:last-child{border-right:none;border-bottom:none;margin-top:-1px;height:calc(50% + 1px);border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:0}.next-number-picker-normal .next-number-picker-handler{opacity:0;-webkit-transition:opacity .24s linear .1s;transition:opacity .24s linear .1s;height:100%}.next-number-picker-normal:hover .next-number-picker-handler{opacity:1}.next-number-picker-normal .next-input.next-disabled .next-number-picker-handler{opacity:0}.next-number-picker-normal.next-medium .next-btn{width:20px}.next-number-picker-normal.next-medium .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-number-picker-normal.next-medium .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-number-picker-normal.next-medium .next-icon:before{width:16px;font-size:16px}}.next-number-picker-normal.next-large .next-btn{width:20px}.next-number-picker-normal.next-large .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-number-picker-normal.next-large .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-number-picker-normal.next-large .next-icon:before{width:16px;font-size:16px}}.next-number-picker-inline input{text-align:center}.next-number-picker-inline .next-input input{padding:0}.next-number-picker-inline.next-medium{width:100px}.next-number-picker-inline.next-medium .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-number-picker-inline.next-medium .next-btn:first-child{margin-right:2px}.next-number-picker-inline.next-medium .next-btn:last-child{margin-left:2px}.next-number-picker-inline.next-large{width:128px}.next-number-picker-inline.next-large .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-number-picker-inline.next-large .next-btn:first-child{margin-right:2px}.next-number-picker-inline.next-large .next-btn:last-child{margin-left:2px}.next-number-picker-inline .next-btn.next-medium{width:28px}.next-number-picker-inline .next-btn.next-large{width:40px}.next-number-picker-normal[dir=rtl] .next-btn:first-child{border-right:1px solid #c4c6cf;border-left:0;border-top-left-radius:3px;border-top-right-radius:0}.next-number-picker-normal[dir=rtl] .next-btn:last-child{border-right:1px solid #c4c6cf;border-left:0;border-bottom-left-radius:3px;border-bottom-right-radius:0}.next-number-picker-inline[dir=rtl] .next-btn{border-radius:0}.next-number-picker-inline[dir=rtl] .next-before .next-btn{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.next-number-picker-inline[dir=rtl] .next-after .next-btn{border-top-left-radius:3px!important;border-bottom-left-radius:3px!important} \ No newline at end of file diff --git a/demos/number-picker/deps.json b/demos/number-picker/deps.json new file mode 100644 index 0000000000..a4a272691d --- /dev/null +++ b/demos/number-picker/deps.json @@ -0,0 +1 @@ +["input","icon","button","demo-helper"] \ No newline at end of file diff --git a/demos/number-picker/index.html b/demos/number-picker/index.html new file mode 100644 index 0000000000..6fbcd487a9 --- /dev/null +++ b/demos/number-picker/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/pagination/build/index.css b/demos/pagination/build/index.css new file mode 100644 index 0000000000..0a2b45c1d1 --- /dev/null +++ b/demos/pagination/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-overlay-wrapper .next-overlay-inner{z-index:1001}.next-overlay-wrapper .next-overlay-backdrop{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;background:#000;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0}.next-overlay-wrapper.opened .next-overlay-backdrop{opacity:.2}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-btn,.next-btn *,.next-btn :after,.next-btn :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-btn::-moz-focus-inner{border:0;padding:0}.next-btn,.next-btn:active,.next-btn:focus,.next-btn:hover{outline:0}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-btn{position:relative;display:inline-block;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;text-align:center;text-transform:none;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;cursor:pointer}.next-btn:after{text-align:center;position:absolute;opacity:0;visibility:hidden;-webkit-transition:opacity .5s ease;transition:opacity .5s ease}.next-btn .next-icon.next-xs:before{vertical-align:baseline}.next-btn.hover,.next-btn:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn.next-small{border-radius:3px;padding:0 8px;height:20px;line-height:18px;font-size:12px;border-width:1px}.next-btn.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-small>.next-btn-icon.next-icon-alone:before,.next-btn.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small.next-btn-loading{padding-left:24px}.next-btn.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:8px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-small.next-btn-loading>.next-icon{display:none}.next-btn.next-medium{border-radius:3px;padding:0 12px;height:28px;line-height:26px;font-size:12px;border-width:1px}.next-btn.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium.next-btn-loading{padding-left:28px}.next-btn.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:12px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-medium.next-btn-loading>.next-icon{display:none}.next-btn.next-large{border-radius:3px;padding:0 16px;height:40px;line-height:38px;font-size:16px;border-width:1px}.next-btn.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-large>.next-btn-icon.next-icon-alone:before,.next-btn.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large.next-btn-loading{padding-left:36px}.next-btn.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:16px;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn.next-large.next-btn-loading>.next-icon{display:none}.next-btn.next-btn-normal{border-style:solid;background-color:#fff;border-color:#c4c6cf}.next-btn.next-btn-normal,.next-btn.next-btn-normal.visited,.next-btn.next-btn-normal:link,.next-btn.next-btn-normal:visited{color:#333}.next-btn.next-btn-normal.active,.next-btn.next-btn-normal.hover,.next-btn.next-btn-normal:active,.next-btn.next-btn-normal:focus,.next-btn.next-btn-normal:hover{color:#333;background-color:#f2f3f7;border-color:#a0a2ad;text-decoration:none}.next-btn.next-btn-primary{border-style:solid;background-color:#5584ff;border-color:transparent}.next-btn.next-btn-primary,.next-btn.next-btn-primary.visited,.next-btn.next-btn-primary:link,.next-btn.next-btn-primary:visited{color:#fff}.next-btn.next-btn-primary.active,.next-btn.next-btn-primary.hover,.next-btn.next-btn-primary:active,.next-btn.next-btn-primary:focus,.next-btn.next-btn-primary:hover{color:#fff;background-color:#3e71f7;border-color:transparent;text-decoration:none}.next-btn.next-btn-secondary{border-style:solid;background-color:#fff;border-color:#5584ff}.next-btn.next-btn-secondary,.next-btn.next-btn-secondary.visited,.next-btn.next-btn-secondary:link,.next-btn.next-btn-secondary:visited{color:#5584ff}.next-btn.next-btn-secondary.active,.next-btn.next-btn-secondary.hover,.next-btn.next-btn-secondary:active,.next-btn.next-btn-secondary:focus,.next-btn.next-btn-secondary:hover{color:#fff;background-color:#3e71f7;border-color:#3e71f7;text-decoration:none}.next-btn.disabled,.next-btn[disabled]{cursor:not-allowed;background-color:#f7f8fa;border-color:#e6e7eb}.next-btn.disabled,.next-btn.disabled.visited,.next-btn.disabled:link,.next-btn.disabled:visited,.next-btn[disabled],.next-btn[disabled].visited,.next-btn[disabled]:link,.next-btn[disabled]:visited{color:#ccc}.next-btn.disabled.active,.next-btn.disabled.hover,.next-btn.disabled:active,.next-btn.disabled:focus,.next-btn.disabled:hover,.next-btn[disabled].active,.next-btn[disabled].hover,.next-btn[disabled]:active,.next-btn[disabled]:focus,.next-btn[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-warning{border-style:solid}.next-btn-warning.next-btn-primary{background-color:#ff3000;border-color:#ff3000}.next-btn-warning.next-btn-primary,.next-btn-warning.next-btn-primary.visited,.next-btn-warning.next-btn-primary:link,.next-btn-warning.next-btn-primary:visited{color:#fff}.next-btn-warning.next-btn-primary.active,.next-btn-warning.next-btn-primary.hover,.next-btn-warning.next-btn-primary:active,.next-btn-warning.next-btn-primary:focus,.next-btn-warning.next-btn-primary:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary[disabled]{background-color:#f7f8fa;border-color:#dcdee3}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary.disabled.visited,.next-btn-warning.next-btn-primary.disabled:link,.next-btn-warning.next-btn-primary.disabled:visited,.next-btn-warning.next-btn-primary[disabled],.next-btn-warning.next-btn-primary[disabled].visited,.next-btn-warning.next-btn-primary[disabled]:link,.next-btn-warning.next-btn-primary[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-primary.disabled.active,.next-btn-warning.next-btn-primary.disabled.hover,.next-btn-warning.next-btn-primary.disabled:active,.next-btn-warning.next-btn-primary.disabled:focus,.next-btn-warning.next-btn-primary.disabled:hover,.next-btn-warning.next-btn-primary[disabled].active,.next-btn-warning.next-btn-primary[disabled].hover,.next-btn-warning.next-btn-primary[disabled]:active,.next-btn-warning.next-btn-primary[disabled]:focus,.next-btn-warning.next-btn-primary[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#dcdee3;text-decoration:none}.next-btn-warning.next-btn-normal{background-color:#fff;border-color:#ff3000}.next-btn-warning.next-btn-normal,.next-btn-warning.next-btn-normal.visited,.next-btn-warning.next-btn-normal:link,.next-btn-warning.next-btn-normal:visited{color:#ff3000}.next-btn-warning.next-btn-normal.active,.next-btn-warning.next-btn-normal.hover,.next-btn-warning.next-btn-normal:active,.next-btn-warning.next-btn-normal:focus,.next-btn-warning.next-btn-normal:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal[disabled]{background-color:#f7f8fa;border-color:#e6e7eb}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal.disabled.visited,.next-btn-warning.next-btn-normal.disabled:link,.next-btn-warning.next-btn-normal.disabled:visited,.next-btn-warning.next-btn-normal[disabled],.next-btn-warning.next-btn-normal[disabled].visited,.next-btn-warning.next-btn-normal[disabled]:link,.next-btn-warning.next-btn-normal[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-normal.disabled.active,.next-btn-warning.next-btn-normal.disabled.hover,.next-btn-warning.next-btn-normal.disabled:active,.next-btn-warning.next-btn-normal.disabled:focus,.next-btn-warning.next-btn-normal.disabled:hover,.next-btn-warning.next-btn-normal[disabled].active,.next-btn-warning.next-btn-normal[disabled].hover,.next-btn-warning.next-btn-normal[disabled]:active,.next-btn-warning.next-btn-normal[disabled]:focus,.next-btn-warning.next-btn-normal[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-text{border-radius:0}.next-btn-text,.next-btn-text.hover,.next-btn-text:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn-text.next-btn-primary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-primary,.next-btn-text.next-btn-primary.visited,.next-btn-text.next-btn-primary:link,.next-btn-text.next-btn-primary:visited{color:#5584ff}.next-btn-text.next-btn-primary.active,.next-btn-text.next-btn-primary.hover,.next-btn-text.next-btn-primary:active,.next-btn-text.next-btn-primary:focus,.next-btn-text.next-btn-primary:hover{color:#3e71f7;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-secondary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-secondary,.next-btn-text.next-btn-secondary.visited,.next-btn-text.next-btn-secondary:link,.next-btn-text.next-btn-secondary:visited{color:#666}.next-btn-text.next-btn-secondary.active,.next-btn-text.next-btn-secondary.hover,.next-btn-text.next-btn-secondary:active,.next-btn-text.next-btn-secondary:focus,.next-btn-text.next-btn-secondary:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-normal{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-normal,.next-btn-text.next-btn-normal.visited,.next-btn-text.next-btn-normal:link,.next-btn-text.next-btn-normal:visited{color:#333}.next-btn-text.next-btn-normal.active,.next-btn-text.next-btn-normal.hover,.next-btn-text.next-btn-normal:active,.next-btn-text.next-btn-normal:focus,.next-btn-text.next-btn-normal:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-large{border-radius:0;padding:0;height:24px;line-height:24px;font-size:14px;border-width:0}.next-btn-text.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-large>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large.next-btn-loading{padding-left:20px}.next-btn-text.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:0;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn-text.next-large.next-btn-loading>.next-icon{display:none}.next-btn-text.next-medium{border-radius:0;padding:0;height:20px;line-height:20px;font-size:12px;border-width:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium.next-btn-loading{padding-left:16px}.next-btn-text.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-medium.next-btn-loading>.next-icon{display:none}.next-btn-text.next-small{border-radius:0;padding:0;height:16px;line-height:16px;font-size:12px;border-width:0}.next-btn-text.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-small>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small.next-btn-loading{padding-left:16px}.next-btn-text.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-small.next-btn-loading>.next-icon{display:none}.next-btn-text.disabled,.next-btn-text[disabled]{background-color:transparent;border-color:transparent}.next-btn-text.disabled,.next-btn-text.disabled.visited,.next-btn-text.disabled:link,.next-btn-text.disabled:visited,.next-btn-text[disabled],.next-btn-text[disabled].visited,.next-btn-text[disabled]:link,.next-btn-text[disabled]:visited{color:#ccc}.next-btn-text.disabled.active,.next-btn-text.disabled.hover,.next-btn-text.disabled:active,.next-btn-text.disabled:focus,.next-btn-text.disabled:hover,.next-btn-text[disabled].active,.next-btn-text[disabled].hover,.next-btn-text[disabled]:active,.next-btn-text[disabled]:focus,.next-btn-text[disabled]:hover{color:#ccc;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-loading{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-loading,.next-btn-text.next-btn-loading.visited,.next-btn-text.next-btn-loading:link,.next-btn-text.next-btn-loading:visited{color:#333}.next-btn-text.next-btn-loading.active,.next-btn-text.next-btn-loading.hover,.next-btn-text.next-btn-loading:active,.next-btn-text.next-btn-loading:focus,.next-btn-text.next-btn-loading:hover{color:#333;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-loading{pointer-events:none}.next-btn-loading:after{font-family:NextIcon;content:"\E646";opacity:1;visibility:visible;-webkit-animation:loadingCircle 2s infinite linear;animation:loadingCircle 2s infinite linear}.next-btn-ghost{-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-btn-ghost.next-btn-dark{background-color:transparent;border-color:#fff}.next-btn-ghost.next-btn-dark,.next-btn-ghost.next-btn-dark.visited,.next-btn-ghost.next-btn-dark:link,.next-btn-ghost.next-btn-dark:visited{color:#fff}.next-btn-ghost.next-btn-dark.active,.next-btn-ghost.next-btn-dark.hover,.next-btn-ghost.next-btn-dark:active,.next-btn-ghost.next-btn-dark:focus,.next-btn-ghost.next-btn-dark:hover{color:#fff;background-color:hsla(0,0%,100%,.8);border-color:#fff;text-decoration:none}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark[disabled]{background-color:transparent;border-color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark.disabled.visited,.next-btn-ghost.next-btn-dark.disabled:link,.next-btn-ghost.next-btn-dark.disabled:visited,.next-btn-ghost.next-btn-dark[disabled],.next-btn-ghost.next-btn-dark[disabled].visited,.next-btn-ghost.next-btn-dark[disabled]:link,.next-btn-ghost.next-btn-dark[disabled]:visited{color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled.active,.next-btn-ghost.next-btn-dark.disabled.hover,.next-btn-ghost.next-btn-dark.disabled:active,.next-btn-ghost.next-btn-dark.disabled:focus,.next-btn-ghost.next-btn-dark.disabled:hover,.next-btn-ghost.next-btn-dark[disabled].active,.next-btn-ghost.next-btn-dark[disabled].hover,.next-btn-ghost.next-btn-dark[disabled]:active,.next-btn-ghost.next-btn-dark[disabled]:focus,.next-btn-ghost.next-btn-dark[disabled]:hover{color:hsla(0,0%,100%,.4);background-color:transparent;border-color:hsla(0,0%,100%,.4);text-decoration:none}.next-btn-ghost.next-btn-light{background-color:transparent;border-color:#333}.next-btn-ghost.next-btn-light,.next-btn-ghost.next-btn-light.visited,.next-btn-ghost.next-btn-light:link,.next-btn-ghost.next-btn-light:visited{color:#333}.next-btn-ghost.next-btn-light.active,.next-btn-ghost.next-btn-light.hover,.next-btn-ghost.next-btn-light:active,.next-btn-ghost.next-btn-light:focus,.next-btn-ghost.next-btn-light:hover{color:#999;background-color:rgba(0,0,0,.92);border-color:#333;text-decoration:none}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light[disabled]{background-color:transparent;border-color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light.disabled.visited,.next-btn-ghost.next-btn-light.disabled:link,.next-btn-ghost.next-btn-light.disabled:visited,.next-btn-ghost.next-btn-light[disabled],.next-btn-ghost.next-btn-light[disabled].visited,.next-btn-ghost.next-btn-light[disabled]:link,.next-btn-ghost.next-btn-light[disabled]:visited{color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled.active,.next-btn-ghost.next-btn-light.disabled.hover,.next-btn-ghost.next-btn-light.disabled:active,.next-btn-ghost.next-btn-light.disabled:focus,.next-btn-ghost.next-btn-light.disabled:hover,.next-btn-ghost.next-btn-light[disabled].active,.next-btn-ghost.next-btn-light[disabled].hover,.next-btn-ghost.next-btn-light[disabled]:active,.next-btn-ghost.next-btn-light[disabled]:focus,.next-btn-ghost.next-btn-light[disabled]:hover{color:rgba(0,0,0,.1);background-color:transparent;border-color:rgba(0,0,0,.1);text-decoration:none}.next-btn-group{position:relative;display:inline-block;vertical-align:middle}.next-btn-group>.next-btn{position:relative;float:left;-webkit-box-shadow:none;box-shadow:none}.next-btn-group>.next-btn.active,.next-btn-group>.next-btn:active,.next-btn-group>.next-btn:focus,.next-btn-group>.next-btn:hover{z-index:1}.next-btn-group>.next-btn.disabled,.next-btn-group>.next-btn[disabled]{z-index:0}.next-btn-group .next-btn.next-btn{margin:0 0 0 -1px}.next-btn-group .next-btn:not(:first-child):not(:last-child){border-radius:0}.next-btn-group>.next-btn:first-child{margin:0}.next-btn-group>.next-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group>.next-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group>.next-btn-primary:not(:first-child){border-left-color:hsla(0,0%,100%,.2)}.next-btn-group>.next-btn-primary:not(:first-child):hover{border-left-color:transparent}.next-btn-group>.next-btn-primary:not(:first-child).disabled,.next-btn-group>.next-btn-primary:not(:first-child)[disabled]{border-left-color:#e6e7eb}.next-btn-group[dir=rtl]>.next-btn{float:right}.next-btn-group[dir=rtl] .next-btn.next-btn{margin:0 -1px 0 0}.next-btn-group[dir=rtl]>.next-btn:first-child:not(:last-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group[dir=rtl]>.next-btn:last-child:not(:first-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child){border-right-color:hsla(0,0%,100%,.2)}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child):hover{border-right-color:transparent}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child).disabled,.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child)[disabled]{border-right-color:#e6e7eb}.next-btn.next-small[dir=rtl]{border-radius:3px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl].next-btn-loading{padding-left:8px;padding-right:24px}.next-btn.next-small[dir=rtl].next-btn-loading:after{right:8px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-medium[dir=rtl]{border-radius:3px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl].next-btn-loading{padding-left:12px;padding-right:28px}.next-btn.next-medium[dir=rtl].next-btn-loading:after{right:12px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-large[dir=rtl]{border-radius:3px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl].next-btn-loading{padding-left:16px;padding-right:36px}.next-btn.next-large[dir=rtl].next-btn-loading:after{right:16px;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-large{border-radius:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large.next-btn-loading{padding-left:0;padding-right:20px}.next-btn-text[dir=rtl].next-large.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-medium{border-radius:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-medium.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-small{border-radius:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-small.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-radio-button-large[dir=rtl]>label:first-child{margin-left:-1px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.next-radio-button-large[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large[dir=rtl] .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-wrapper[dir=rtl] .next-radio-label{margin-left:0;margin-right:4px}.next-radio-group[dir=rtl] .next-radio-label{margin-right:4px;margin-left:16px}.next-radio-button[dir=rtl]>label .next-radio-label{margin:0}.next-radio-wrapper{outline:0}.next-radio-wrapper .next-radio{display:inline-block;vertical-align:middle;position:relative;line-height:1}.next-radio-wrapper .next-radio,.next-radio-wrapper .next-radio *,.next-radio-wrapper .next-radio :after,.next-radio-wrapper .next-radio :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-radio-wrapper .next-radio input[type=radio]{opacity:0;position:absolute;vertical-align:middle;top:0;left:0;width:16px;height:16px;margin:0}.next-radio-wrapper .next-radio-inner{display:block;width:16px;height:16px;background:#fff;border-radius:50%;border:1px solid #c4c6cf;-webkit-transition:all .36s ease 0s;transition:all .36s ease 0s;-webkit-box-shadow:none;box-shadow:none}.next-radio-wrapper .next-radio-inner:after{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;border-radius:50%;top:50%;margin-top:-2px;left:50%;margin-left:-2px;background:#fff;content:" ";-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86)}.next-radio-wrapper.checked .next-radio-inner{border-color:#5584ff;background:#5584ff}.next-radio-wrapper.checked .next-radio-inner:after{width:4px;height:4px;font-weight:700;background:#fff;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.next-radio-wrapper.checked.hovered .next-radio-inner,.next-radio-wrapper.checked:hover .next-radio-inner{border-color:transparent}.next-radio-wrapper.disabled input[type=radio]{cursor:not-allowed}.next-radio-wrapper.disabled .next-radio-inner{border-color:#e6e7eb;background:#f7f8fa}.next-radio-wrapper.disabled.checked .next-radio-inner,.next-radio-wrapper.disabled .next-radio-inner.hovered,.next-radio-wrapper.disabled .next-radio-inner:hover{border-color:#e6e7eb}.next-radio-wrapper.disabled.checked .next-radio-inner:after{background:#ccc}.next-radio-wrapper:not(.disabled).focused .next-radio-inner,.next-radio-wrapper:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper:not(.disabled):focus .next-radio-inner,.next-radio-wrapper:not(.disabled):hover .next-radio-inner{border-color:#5584ff;background-color:#dee8ff}.next-radio-wrapper.checked.focused .next-radio-inner,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner{border-color:transparent;background:#3e71f7}.next-radio-wrapper.checked.focused .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner:after{background:#fff}.next-radio-button .next-radio,.next-radio-button input[type=radio]{width:0;height:0}.next-radio-button>label{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1;margin:0 0 0 -1px;border:1px solid #c4c6cf;background-color:#fff;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;vertical-align:middle}.next-radio-button>label .next-radio-label{display:block;color:#333;margin:0;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}.next-radio-button>label.hovered,.next-radio-button>label:focus,.next-radio-button>label:hover{z-index:10;border-color:#a0a2ad;background-color:#f2f3f7}.next-radio-button>label.hovered .next-radio-label,.next-radio-button>label:focus .next-radio-label,.next-radio-button>label:hover .next-radio-label{color:#333}.next-radio-button>label.checked{z-index:11;border-color:#5584ff;background-color:#fff}.next-radio-button>label.checked .next-radio-label{color:#5584ff}.next-radio-button>label.disabled{z-index:0;cursor:not-allowed;border-color:#e6e7eb;background-color:#f7f8fa}.next-radio-button>label.disabled .next-radio-label{color:#ccc}.next-radio-button>label.checked.disabled{z-index:0;border-color:#e6e7eb;background-color:#f2f3f7}.next-radio-button>label.checked.disabled .next-radio-label{color:#ccc}.next-radio-button-large>label{padding:0 8px;height:40px;line-height:40px}.next-radio-button-large>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-large .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium>label{padding:0 8px;height:28px;line-height:28px}.next-radio-button-medium>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-medium>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium .next-radio-label{height:26px;line-height:26px;font-size:12px}.next-radio-button-small>label{padding:0 8px;height:20px;line-height:20px}.next-radio-button-small>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small .next-radio-label{height:18px;line-height:18px;font-size:12px}.next-radio-single-input input[type=radio]{opacity:0;position:absolute;top:0;left:0;margin:0}.next-radio-group{display:inline-block}.next-radio-group .next-radio-label{color:#333;margin-right:16px}.next-radio-group.disabled .next-radio-label{color:#ccc}.next-radio-group-ver .next-radio-wrapper{display:block;margin-bottom:8px}.next-radio-label{margin:0;margin-left:4px;font-size:12px;vertical-align:middle;line-height:1}@-moz-document url-prefix(){.next-radio{margin-top:-1px}@supports ((-webkit-animation:calc(0s)) or (animation:calc(0s))){.next-radio{margin-top:-3px}}}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}@-webkit-keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}@keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}.next-tag>.next-tag-body{overflow:hidden;text-overflow:ellipsis}.next-tag-checkable.next-tag-level-secondary{color:#333;border-color:transparent;background-color:transparent}.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):hover{color:#5584ff}.next-tag-closable.next-tag-level-primary,.next-tag-default.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-primary,.disabled.next-tag-default.next-tag-level-primary,[disabled].next-tag-closable.next-tag-level-primary,[disabled].next-tag-default.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.disabled.next-tag-default.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-checkable.next-tag-level-primary,[disabled].next-tag-checkable.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary.checked{color:#fff;border-color:#5584ff;background-color:#5584ff}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover{color:#fff;border-color:#3e71f7;background-color:#3e71f7}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked>.next-tag-close-btn{color:#fff}.next-tag-default.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-default.next-tag-level-normal,[disabled].next-tag-default.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.disabled.next-tag-default.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-closable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-normal,[disabled].next-tag-closable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:transparent}.disabled.next-tag-closable.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-normal.checked,.next-tag-checkable.next-tag-level-secondary.checked{color:#5584ff;border-color:#5584ff;background-color:transparent}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover{color:#3e71f7;border-color:#3e71f7;background-color:transparent}.next-tag-checkable.next-tag-level-secondary.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-secondary.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-secondary.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-secondary.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-secondary.checked:after{color:#fff}.next-tag-checkable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#c4c6cf;background-color:transparent}.disabled.next-tag-checkable.next-tag-level-normal,[disabled].next-tag-checkable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-normal.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-normal.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-normal.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-normal.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-normal.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-normal.checked:after{color:#fff}.next-tag-closable.next-tag-level-normal:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#c4c6cf;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-closable.next-tag-level-normal:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E626";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:before{background-color:#a0a2ad}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-closable.next-tag-level-normal:disabled:before,[disabled].next-tag-closable.next-tag-level-normal:before{background-color:#e6e7eb}.next-tag-closable.next-tag-level-normal:disabled:after,[disabled].next-tag-closable.next-tag-level-normal:after{color:#fff}.next-tag-group .next-tag-large,.next-tag-group .next-tag-medium{margin-right:8px;margin-bottom:8px}.next-tag-group .next-tag-small{margin-right:4px;margin-bottom:4px}.next-tag{display:inline-block;max-width:100%;vertical-align:middle;border-width:1px;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid;overflow:hidden;white-space:nowrap;-webkit-transition:all .2s cubic-bezier(.23,1,.32,1);transition:all .2s cubic-bezier(.23,1,.32,1);font-size:0;outline:0}.next-tag,.next-tag *,.next-tag :after,.next-tag :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tag>.next-tag-body{position:relative;display:inline-block;height:100%;text-align:center;vertical-align:middle;max-width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.next-tag>.next-tag-body>a{text-decoration:none;color:inherit}.next-tag>.next-tag-body>a:before{content:" ";position:absolute;display:block;top:0;left:0;right:0;bottom:0}.next-tag>.next-tag-body .next-icon{line-height:1;vertical-align:middle}.next-tag>.next-tag-body .next-icon:before{font-size:inherit}.next-tag.next-tag-body-pointer{cursor:pointer}.next-tag.disabled,.next-tag[disabled]{cursor:not-allowed;pointer-events:none}.next-tag-large{height:40px;padding:0;line-height:38px;font-size:0}.next-tag-large>.next-tag-body{font-size:16px;padding:0 16px;min-width:48px}.next-tag-large.next-tag-closable>.next-tag-body{padding:0 0 0 16px}.next-tag-large[dir=rtl].next-tag-closable>.next-tag-body{padding:0 16px 0 0}.next-tag-large>.next-tag-close-btn{margin-left:12px;padding-right:16px}.next-tag-large>.next-tag-close-btn .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tag-large[dir=rtl]>.next-tag-close-btn{margin-right:12px;margin-left:0;padding-right:0;padding-left:16px}.next-tag-medium{height:28px;padding:0;line-height:26px;font-size:0}.next-tag-medium>.next-tag-body{font-size:14px;padding:0 12px;min-width:40px}.next-tag-medium.next-tag-closable>.next-tag-body{padding:0 0 0 12px}.next-tag-medium[dir=rtl].next-tag-closable>.next-tag-body{padding:0 12px 0 0}.next-tag-medium>.next-tag-close-btn{margin-left:8px;padding-right:12px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-medium>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-medium[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:12px}.next-tag-small{height:20px;padding:0;line-height:18px;font-size:0}.next-tag-small>.next-tag-body{font-size:12px;padding:0 8px;min-width:28px}.next-tag-small.next-tag-closable>.next-tag-body{padding:0 0 0 8px}.next-tag-small[dir=rtl].next-tag-closable>.next-tag-body{padding:0 8px 0 0}.next-tag-small>.next-tag-close-btn{margin-left:8px;padding-right:8px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-small>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-small[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:8px}.next-tag-default{cursor:default}.next-tag-closable{position:relative}.next-tag-closable.next-tag-large>.next-tag-body{max-width:calc(100% - 40px)}.next-tag-closable.next-tag-medium>.next-tag-body{max-width:calc(100% - 28px)}.next-tag-closable.next-tag-small>.next-tag-body{max-width:calc(100% - 20px)}.next-tag-closable>.next-tag-close-btn{display:inline-block;vertical-align:middle;height:100%;text-align:center;cursor:pointer}.next-tag-closable.next-tag-level-normal.disabled,.next-tag-closable.next-tag-level-normal[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable{cursor:pointer;position:relative;border-radius:3px}.next-tag-checkable.checked:before{-webkit-animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.checked:after{-webkit-animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86);animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):before{right:-10px;bottom:-10px;width:20px;height:20px}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):after{font-size:8px;line-height:8px;right:0;bottom:0}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):before{right:-14px;bottom:-14px;width:28px;height:28px}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):after{font-size:12px;line-height:12px;right:0;bottom:0}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):before{right:-18px;bottom:-18px;width:36px;height:36px}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):after{font-size:16px;line-height:16px;right:0;bottom:0}.next-tag-checkable.next-tag-level-primary.disabled,.next-tag-checkable.next-tag-level-primary[disabled]{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-secondary.disabled,.next-tag-checkable.next-tag-level-secondary[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-zoom-appear,.next-tag-zoom-enter{-webkit-animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-tag-zoom-leave{-webkit-animation:zoomOut .3s ease-in;animation:zoomOut .3s ease-in;-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-checkbox-wrapper[dir=rtl]{margin-right:8px;margin-left:0}.next-checkbox-wrapper[dir=rtl]:first-child{margin-right:0}.next-checkbox-wrapper[dir=rtl]>.next-checkbox-label{margin-right:4px;margin-left:0}.next-checkbox-wrapper,.next-checkbox-wrapper *,.next-checkbox-wrapper :after,.next-checkbox-wrapper :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-checkbox-wrapper .next-checkbox{display:inline-block;position:relative;line-height:1;vertical-align:middle}.next-checkbox-wrapper input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:16px;height:16px;margin:0}.next-checkbox-wrapper .next-checkbox-inner{display:block;width:16px;height:16px;background:#fff;border-radius:3px;border:1px solid #c4c6cf;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;text-align:left;-webkit-box-shadow:none;box-shadow:none}.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;top:0;opacity:0;line-height:16px;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);color:#fff;left:4px;margin-left:0}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{vertical-align:top;margin-top:0}.next-checkbox-wrapper.checked .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.checked .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);margin-left:0}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.indeterminate .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.indeterminate .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1);margin-left:0}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.disabled input[type=checkbox]{cursor:not-allowed}.next-checkbox-wrapper.disabled .next-checkbox-inner{border-color:#e6e7eb;background:#f7f8fa}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover{border-color:#e6e7eb}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner>.next-icon{color:#ccc;opacity:1}.next-checkbox-wrapper.focused .next-checkbox-inner,.next-checkbox-wrapper.hovered .next-checkbox-inner,.next-checkbox-wrapper:not(.disabled):hover .next-checkbox-inner{border-color:#5584ff;background-color:#dee8ff}.next-checkbox-wrapper.checked.focused .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner{border-color:transparent;background-color:#3e71f7}.next-checkbox-wrapper.checked.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner>.next-icon{color:#fff;opacity:1}.next-checkbox-group .next-checkbox-wrapper{margin-left:8px}.next-checkbox-group .next-checkbox-wrapper:first-child{margin-left:0}.next-checkbox-group-ver .next-checkbox-wrapper{display:block;margin-left:0;margin-right:0;margin-bottom:8px}.next-checkbox-label{font-size:12px;vertical-align:middle;margin:0;margin-left:4px;line-height:1}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-menu[dir=rtl] .next-menu-item-helper{float:left}.next-menu[dir=rtl] .next-menu-item .next-checkbox,.next-menu[dir=rtl] .next-menu-item .next-radio{margin-left:4px;margin-right:0}.next-menu[dir=rtl] .next-menu-hoz-right{float:left}.next-menu[dir=rtl] .next-menu-hoz-icon-arrow.next-icon{left:6px;right:auto}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon{margin-left:0;margin-right:-16px}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon.next-menu-icon-right{right:auto;left:4px}.next-menu[dir=rtl] .next-menu-icon-arrow.next-icon{left:10px;right:auto}.next-menu{position:relative;min-width:100px;padding:8px 0;margin:0;list-style:none;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;background:#fff;line-height:32px;font-size:12px}.next-menu,.next-menu *,.next-menu :after,.next-menu :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-menu:focus,.next-menu :focus{outline:0}.next-menu-embeddable,.next-menu-embeddable .next-menu-item.next-disabled,.next-menu-embeddable .next-menu-item.next-disabled .next-menu-item-text>a{background:initial;border:none}.next-menu-embeddable .next-menu-item-inner{height:100%}.next-menu-content{position:relative}.next-menu-content,.next-menu-sub-menu{padding:0;margin:0;list-style:none}.next-menu-sub-menu.next-expand-enter{overflow:hidden}.next-menu-sub-menu.next-expand-enter-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-sub-menu.next-expand-leave{overflow:hidden}.next-menu-sub-menu.next-expand-leave-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-item{position:relative;padding:0 20px;-webkit-transition:background .2s ease;transition:background .2s ease;color:#333;cursor:pointer}.next-menu-item-helper{float:right;color:#999;font-style:normal;font-size:12px}.next-menu-item .next-checkbox,.next-menu-item .next-radio{margin-right:4px}.next-menu-item.next-selected{color:#333;background-color:#fff}.next-menu-item.next-selected .next-menu-icon-arrow{color:#666}.next-menu-item.next-selected .next-menu-icon-selected{color:#5584ff}.next-menu-item.next-disabled,.next-menu-item.next-disabled .next-menu-item-text>a{color:#ccc;background-color:#fff;cursor:not-allowed}.next-menu-item.next-disabled .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-icon-selected,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-selected{color:#ccc}.next-menu-item:not(.next-disabled).next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover,.next-menu-item:not(.next-disabled).next-selected:focus,.next-menu-item:not(.next-disabled).next-selected:focus:hover,.next-menu-item:not(.next-disabled).next-selected:hover,.next-menu-item:not(.next-disabled):hover{color:#333;background-color:#f2f3f7}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled):hover .next-menu-icon-arrow{color:#333}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled):hover .next-menu-icon-selected{color:#5584ff}.next-menu-item-inner{height:32px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.next-menu-item-text{vertical-align:middle}.next-menu-item-text>a{display:inline-block;text-decoration:none;color:#333}.next-menu-item-text>a:before{position:absolute;background-color:transparent;top:0;left:0;bottom:0;right:0;content:""}.next-menu.next-hoz{padding:0}.next-menu.next-hoz .next-menu-content>.next-menu-item,.next-menu.next-hoz>.next-menu-item{display:inline-block;vertical-align:top}.next-menu.next-hoz .next-menu-content,.next-menu.next-hoz .next-menu-footer,.next-menu.next-hoz .next-menu-header{display:inline-block}.next-menu-hoz-right{float:right}.next-menu-group-label{padding:0 12px;color:#999}.next-menu-divider{margin:8px 12px;border-bottom:1px solid #e6e7eb}.next-menu .next-menu-icon-selected.next-icon{position:absolute;top:0;margin-left:-16px}.next-menu .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-icon-selected.next-icon.next-menu-icon-right{right:4px}.next-menu .next-menu-icon-arrow.next-icon{position:absolute;top:0;right:10px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-icon-arrow.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow.next-icon:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-icon-arrow-down.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:scale(.5) rotate(180deg);-ms-transform:scale(.5) rotate(180deg);transform:scale(.5) rotate(180deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-down.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.next-menu .next-menu-icon-arrow-right.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:scale(.5) rotate(-90deg);-ms-transform:scale(.5) rotate(-90deg);transform:scale(.5) rotate(-90deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-right.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-hoz-icon-arrow.next-icon{position:absolute;top:0;right:6px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-hoz-icon-arrow.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-hoz-icon-arrow.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-hoz-icon-arrow.next-open:before{width:12px;font-size:12px;line-height:inherit}.next-menu.next-context{line-height:24px}.next-menu.next-context .next-menu-item-inner{height:24px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-input{vertical-align:middle;display:inline-table;border-collapse:separate;font-size:0;line-height:1;width:200px;border-spacing:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;border:1px solid #c4c6cf;background-color:#fff}.next-input,.next-input *,.next-input :after,.next-input :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input input{height:100%}.next-input input[type=reset],.next-input input[type=submit]{-webkit-appearance:button;cursor:pointer}.next-input input::-moz-focus-inner{border:0;padding:0}.next-input input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset}.next-input textarea{resize:none}.next-input input,.next-input textarea{width:100%;border:none;outline:none;padding:0;margin:0;font-weight:400;vertical-align:middle;background-color:transparent;color:#333}.next-input input::-ms-clear,.next-input textarea::-ms-clear{display:none}.next-input.next-input-textarea{border-radius:3px;font-size:0}.next-input.next-input-textarea textarea{color:#333;padding:4px 8px;font-size:12px;border-radius:3px}.next-input.next-input-textarea .next-input-control{display:block;width:auto;border-radius:3px}.next-input.next-input-textarea .next-input-len{padding:0 8px 4px;display:block;text-align:right;width:auto}.next-input.next-small{height:20px;border-radius:3px}.next-input.next-small .next-input-label{padding-left:8px;font-size:12px}.next-input.next-small .next-input-inner{font-size:12px}.next-input.next-small .next-input-control{padding-right:4px}.next-input.next-small input{height:18px;line-height:18px \0;padding:0 4px;font-size:12px}.next-input.next-small input::-webkit-input-placeholder{font-size:12px}.next-input.next-small input::-moz-placeholder{font-size:12px}.next-input.next-small input::-ms-input-placeholder{font-size:12px}.next-input.next-small input::placeholder{font-size:12px}.next-input.next-small .next-input-text-field{padding:0 4px;font-size:12px;height:18px;line-height:18px}.next-input.next-small .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-small input{border-radius:3px}.next-input.next-small .next-input-control{border-radius:0 3px 3px 0}.next-input.next-medium{height:28px;border-radius:3px}.next-input.next-medium .next-input-label{padding-left:8px;font-size:12px}.next-input.next-medium .next-input-inner{font-size:12px}.next-input.next-medium .next-input-control{padding-right:8px}.next-input.next-medium input{height:26px;line-height:26px \0;padding:0 8px;font-size:12px}.next-input.next-medium input::-webkit-input-placeholder{font-size:12px}.next-input.next-medium input::-moz-placeholder{font-size:12px}.next-input.next-medium input::-ms-input-placeholder{font-size:12px}.next-input.next-medium input::placeholder{font-size:12px}.next-input.next-medium .next-input-text-field{padding:0 8px;font-size:12px;height:26px;line-height:26px}.next-input.next-medium .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-medium input{border-radius:3px}.next-input.next-medium .next-input-control{border-radius:0 3px 3px 0}.next-input.next-large{height:40px;border-radius:3px}.next-input.next-large .next-input-label{padding-left:12px;font-size:16px}.next-input.next-large .next-input-inner{font-size:16px}.next-input.next-large .next-input-control{padding-right:8px}.next-input.next-large input{height:38px;line-height:38px \0;padding:0 12px;font-size:16px}.next-input.next-large input::-webkit-input-placeholder{font-size:16px}.next-input.next-large input::-moz-placeholder{font-size:16px}.next-input.next-large input::-ms-input-placeholder{font-size:16px}.next-input.next-large input::placeholder{font-size:16px}.next-input.next-large .next-input-text-field{padding:0 12px;font-size:16px;height:38px;line-height:38px}.next-input.next-large .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-input.next-large input{border-radius:3px}.next-input.next-large .next-input-control{border-radius:0 3px 3px 0}.next-input-hint-wrap{color:#999;position:relative}.next-input-hint-wrap .next-input-clear{opacity:0;z-index:1;position:absolute}.next-input-hint-wrap .next-input-hint{opacity:1}.next-input .next-icon-delete-filling:hover{cursor:pointer;color:#666}.next-input.next-focus,.next-input:hover{border-color:#a0a2ad;background-color:#fff}.next-input.next-focus .next-input-clear,.next-input:hover .next-input-clear{opacity:1}.next-input.next-focus .next-input-clear+.next-input-hint,.next-input:hover .next-input-clear+.next-input-hint{opacity:0}.next-input .next-input-clear:focus{opacity:1}.next-input .next-input-clear:focus+.next-input-hint{opacity:0}.next-input.next-focus{border-color:#5584ff;background-color:#fff}.next-input.next-error,.next-input.next-error.next-focus,.next-input.next-error:hover{border-color:#ff3000}.next-input.next-hidden{display:none}.next-input.next-noborder{border:none}.next-input-control .next-input-len{font-size:12px;line-height:12px;color:#999;display:table-cell;width:1px;vertical-align:bottom}.next-input-control .next-input-len.next-error{color:#ff3000}.next-input-control>*{display:table-cell;width:1%;top:0}.next-input-control>:not(:last-child){padding-right:4px}.next-input-control .next-icon{-webkit-transition:all .3s ease-out;transition:all .3s ease-out;color:#999}.next-input-control .next-icon-success-filling{color:#46bc15}.next-input-control .next-icon-loading{color:#4494f9}.next-input-label{color:#666}.next-input input::-moz-placeholder,.next-input textarea::-moz-placeholder{color:#999;opacity:1}.next-input input:-ms-input-placeholder,.next-input textarea:-ms-input-placeholder{color:#999}.next-input input::-webkit-input-placeholder,.next-input textarea::-webkit-input-placeholder{color:#999}.next-input.next-disabled{color:#ccc;cursor:not-allowed}.next-input.next-disabled,.next-input.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled input::-moz-placeholder,.next-input.next-disabled textarea::-moz-placeholder{color:#ccc;opacity:1}.next-input.next-disabled input:-ms-input-placeholder,.next-input.next-disabled textarea:-ms-input-placeholder{color:#ccc}.next-input.next-disabled input::-webkit-input-placeholder,.next-input.next-disabled textarea::-webkit-input-placeholder{color:#ccc}.next-input.next-disabled .next-input-label,.next-input.next-disabled .next-input-len{color:#ccc}.next-input.next-disabled input,.next-input.next-disabled textarea{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa;cursor:not-allowed}.next-input.next-disabled input:hover,.next-input.next-disabled textarea:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled .next-input-hint-wrap{color:#ccc}.next-input.next-disabled .next-input-hint-wrap .next-input-clear{opacity:0}.next-input.next-disabled .next-input-hint-wrap .next-input-hint{opacity:1}.next-input.next-disabled .next-input-hint-wrap .next-icon-delete-filling:hover{cursor:not-allowed;color:#ccc}.next-input.next-disabled .next-icon{color:#ccc}.next-input-control,.next-input-inner,.next-input-label{display:table-cell;width:1px;vertical-align:middle;line-height:1;background-color:transparent;white-space:nowrap}.next-input-group{display:inline-table;border-collapse:separate;border-spacing:0;line-height:0;width:100%}.next-input-group,.next-input-group *,.next-input-group :after,.next-input-group :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input-group-auto-width{width:100%;border-radius:0!important}.next-input-group>.next-input:first-child.next-large,.next-input-group>.next-input:first-child.next-medium,.next-input-group>.next-input:first-child.next-small{border-top-left-radius:3px!important;border-bottom-left-radius:3px!important}.next-input-group>.next-input:last-child.next-large,.next-input-group>.next-input:last-child.next-medium,.next-input-group>.next-input:last-child.next-small{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.next-input-group-addon{width:1px;display:table-cell;vertical-align:middle;white-space:nowrap}.next-input-group-addon:first-child,.next-input-group-addon:first-child>*{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group-addon:last-child,.next-input-group-addon:last-child>*{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group-text{color:#999;background-color:#f2f3f7;text-align:center;border:1px solid #c4c6cf;padding:0 8px}.next-input-group-text:first-child{border-right-width:0}.next-input-group-text:last-child{border-left-width:0}.next-input-group-text.next-disabled{color:#ccc;cursor:not-allowed}.next-input-group-text.next-disabled,.next-input-group-text.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input-group-text.next-medium,.next-input-group-text.next-small{font-size:12px;border-radius:3px}.next-input-group-text.next-large{font-size:16px;border-radius:3px}.next-input[dir=rtl].next-small .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-small .next-input-control{padding-right:0;padding-left:4px}.next-input[dir=rtl].next-medium .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-medium .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-large .next-input-label{padding-left:0;padding-right:12px}.next-input[dir=rtl].next-large .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-input-textarea .next-input-len{text-align:left}.next-input[dir=rtl] .next-input-control>:not(:last-child){padding-left:4px;padding-right:0}.next-input-group[dir=rtl] .next-input-group-addon:first-child{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-small{border-bottom-right-radius:3px!important;border-top-right-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-small{border-bottom-left-radius:3px!important;border-top-left-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-text:first-child{border-right-width:1px;border-left:0}.next-input-group[dir=rtl] .next-input-group-text:last-child{border-left-width:1px;border-right:0}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-select{display:inline-block;font-size:0;vertical-align:middle}.next-select,.next-select *,.next-select :after,.next-select :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-select-trigger{min-width:100px;outline:0;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-trigger .next-input-label{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-select-values{display:block;width:100%;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow:hidden}.next-select-trigger .next-select-values>em{font-style:inherit}.next-select-trigger .next-select-values input{padding-left:0;padding-right:0}.next-select-trigger .next-input-control{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-input-control>*{display:inline-block;width:auto}.next-select-trigger .next-input-control>.next-select-arrow{padding-right:0}.next-select-trigger .next-input.next-disabled em{color:#ccc}.next-select-trigger .next-input.next-disabled .next-select-arrow{cursor:not-allowed}.next-select-trigger .next-select-clear{display:none}.next-select-trigger.next-has-clear:hover .next-select-clear{display:inline-block}.next-select-trigger.next-has-clear:hover .next-select-arrow{display:none}.next-select .next-select-inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;min-width:100px;outline:0;color:#333}.next-select .next-select-inner .next-tag{line-height:1;margin-right:4px;margin-bottom:3px;padding-left:4px;padding-right:4px}.next-select-trigger-search{position:relative;display:inline-block;vertical-align:top;overflow:hidden;width:100%;max-width:100%}.next-select-trigger-search>input,.next-select-trigger-search>span{display:block;font-size:inherit;font-family:inherit;letter-spacing:inherit;white-space:nowrap;overflow:hidden}.next-select-trigger-search input{position:absolute;background-color:transparent;width:100%;height:100%!important;z-index:1;left:0;border:0;outline:0;margin:0;padding:0;cursor:inherit}.next-select-trigger-search>span{position:relative;visibility:hidden;white-space:pre;max-width:100%;z-index:-1}.next-select-single.next-no-search{cursor:pointer}.next-select-single.next-has-search.next-active .next-select-values>em{display:none}.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{width:1px;opacity:0;filter:alpha(opacity=0)}.next-select-single.next-inactive .next-select-trigger-search input,.next-select-single.next-no-search .next-select-trigger-search input{color:transparent}.next-select-single .next-select-values{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.next-select-single .next-select-values>em{vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.next-select-multiple .next-select-values,.next-select-tag .next-select-values{margin-bottom:-3px;height:auto!important}.next-select-multiple .next-select-trigger-search,.next-select-tag .next-select-trigger-search{margin-bottom:3px}.next-select-multiple .next-tag+.next-select-trigger-search,.next-select-tag .next-tag+.next-select-trigger-search{width:auto;min-width:1px}.next-select-multiple .next-input,.next-select-tag .next-input{height:auto;-webkit-box-align:start;-ms-flex-align:start;align-items:start}.next-select-multiple.next-small .next-select-values,.next-select-tag.next-small .next-select-values{min-height:18px;padding-top:2px;padding-bottom:2px;line-height:14px}.next-select-multiple.next-small .next-tag,.next-select-tag.next-small .next-tag{border:0;padding-top:0;padding-bottom:0;height:14px}.next-select-multiple.next-small .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-close-btn,.next-select-tag.next-small .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-close-btn{line-height:14px}.next-select-multiple.next-small .next-input-control,.next-select-multiple.next-small .next-input-label,.next-select-tag.next-small .next-input-control,.next-select-tag.next-small .next-input-label{line-height:18px}.next-select-multiple.next-medium .next-select-values,.next-select-tag.next-medium .next-select-values{min-height:26px;padding-top:3px;padding-bottom:3px;line-height:20px}.next-select-multiple.next-medium .next-tag,.next-select-tag.next-medium .next-tag{padding-top:1px;padding-bottom:1px;height:20px}.next-select-multiple.next-medium .next-tag .next-tag-body,.next-select-multiple.next-medium .next-tag .next-tag-close-btn,.next-select-tag.next-medium .next-tag .next-tag-body,.next-select-tag.next-medium .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-medium .next-input-control,.next-select-multiple.next-medium .next-input-label,.next-select-tag.next-medium .next-input-control,.next-select-tag.next-medium .next-input-label{line-height:26px}.next-select-multiple.next-large .next-select-values,.next-select-tag.next-large .next-select-values{min-height:38px;padding-top:7px;padding-bottom:7px;line-height:24px}.next-select-multiple.next-large .next-tag,.next-select-tag.next-large .next-tag{padding-top:3px;padding-bottom:3px;height:24px}.next-select-multiple.next-large .next-tag .next-tag-body,.next-select-multiple.next-large .next-tag .next-tag-close-btn,.next-select-tag.next-large .next-tag .next-tag-body,.next-select-tag.next-large .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-large .next-input-control,.next-select-multiple.next-large .next-input-label,.next-select-tag.next-large .next-input-control,.next-select-tag.next-large .next-input-label{line-height:38px}.next-select.next-no-search .next-select-trigger-search input{color:transparent}.next-select-auto-complete{width:160px}.next-select-auto-complete .next-input{width:100%}.next-select-auto-complete .next-input .next-input-hint-wrap{padding-right:1px}.next-select-auto-complete .next-input .next-select-arrow{padding-left:0}.next-select.next-active .next-select-arrow{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-select-arrow{cursor:pointer;width:auto!important;text-align:center;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-menu-wrapper{max-height:260px;overflow:auto;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none}.next-select-menu-wrapper .next-select-menu{max-height:none;border:none}.next-select-menu{max-height:260px;overflow:auto}.next-select-menu .next-select-menu-empty-content{padding-left:8px;padding-right:8px;color:#999}.next-select-menu.next-select-auto-complete-menu.next-select-menu-empty{display:none}.next-select-menu .next-menu-item-text .next-icon{vertical-align:middle}.next-select-all{display:block;cursor:pointer;padding:0 8px;margin:0 12px 8px;border-bottom:1px solid #dcdee3}.next-select-all:hover{color:#3e71f7}.next-select-all .next-menu-icon-selected.next-icon{display:inline-block!important;top:auto;color:#5584ff}.next-select-highlight{color:#5584ff;font-size:12px}.next-select-in-ie.next-select-trigger .next-select-values{overflow:visible}.next-select-in-ie.next-select-trigger .next-input-control,.next-select-in-ie.next-select-trigger .next-input-label{width:1px}.next-select-in-ie.next-select-trigger .next-input-control>*{display:table-cell;width:1%}.next-select-in-ie.next-select-trigger .next-select-arrow{display:table-cell}.next-select-in-ie.next-select-trigger .next-select-clear{display:none}.next-select-in-ie.next-select-trigger.next-select-multiple .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-tag .next-select-inner{vertical-align:top}.next-select-in-ie.next-select-trigger .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-single .next-select-values{display:inline-table}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-small .next-select-values{line-height:20px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-medium .next-select-values{line-height:28px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-large .next-select-values{line-height:40px}.next-select-in-ie.next-select-trigger .next-select-trigger-search>span{max-width:100px}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values{position:relative}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values>em{position:absolute;display:inline-block;height:100%;line-height:1;vertical-align:middle;overflow:hidden;left:4px;right:0;top:30%}.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{filter:alpha(opacity=0);font-size:0}.next-select-in-ie.next-select-trigger.next-no-search .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-trigger-search input{color:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-pagination[dir=rtl] .next-pagination-total{margin-right:0;margin-left:16px}.next-pagination[dir=rtl] .next-pagination-jump-go{margin-left:0;margin-right:4px}.next-pagination[dir=rtl] .next-pagination-size-selector-title{margin-right:0;margin-left:4px}.next-pagination[dir=rtl] .next-pagination-size-selector-btn.next-btn-text+.next-pagination-size-selector-btn{border-left:none;border-right:1px solid #dcdee3}.next-pagination[dir=rtl] .next-pagination-pages+.next-pagination-size-selector,.next-pagination[dir=rtl] .next-pagination-size-selector+.next-pagination-pages{margin-left:0;margin-right:40px}.next-pagination[dir=rtl].next-start .next-pagination-pages{float:left}.next-pagination[dir=rtl].next-end .next-pagination-pages,.next-pagination[dir=rtl].next-start .next-pagination-size-selector{float:right}.next-pagination[dir=rtl].next-end .next-pagination-size-selector{float:left}.next-pagination[dir=rtl].next-small .next-pagination-list{margin:0 4px}.next-pagination[dir=rtl].next-small .next-pagination-total{line-height:20px;vertical-align:middle}.next-pagination[dir=rtl].next-small .next-pagination-item{padding:0 6px}.next-pagination[dir=rtl].next-small .next-pagination-item+.next-pagination-item{margin:0 4px 0 0}.next-pagination[dir=rtl].next-small .next-pagination-ellipsis{height:20px;line-height:20px;margin-left:8px;margin-right:8px}.next-pagination[dir=rtl].next-small .next-pagination-ellipsis:before{width:12px;font-size:12px;line-height:inherit}.next-pagination[dir=rtl].next-small .next-pagination-display,.next-pagination[dir=rtl].next-small .next-pagination-display em,.next-pagination[dir=rtl].next-small .next-pagination-jump-text{font-size:12px}.next-pagination[dir=rtl].next-small .next-pagination-jump-input{width:28px}.next-pagination[dir=rtl].next-small .next-pagination-size-selector-title{height:20px;line-height:20px;font-size:12px;vertical-align:middle}.next-pagination[dir=rtl].next-small .next-pagination-size-selector-btn{padding:0 8px}.next-pagination[dir=rtl].next-small .next-pagination-item.next-next:not([disabled]) i,.next-pagination[dir=rtl].next-small .next-pagination-item.next-prev:not([disabled]) i{color:#666}.next-pagination[dir=rtl].next-small .next-pagination-item:hover.next-next:not([disabled]) i,.next-pagination[dir=rtl].next-small .next-pagination-item:hover.next-prev:not([disabled]) i{color:#333}.next-pagination[dir=rtl].next-medium .next-pagination-list{margin:0 4px}.next-pagination[dir=rtl].next-medium .next-pagination-total{line-height:28px;vertical-align:middle}.next-pagination[dir=rtl].next-medium .next-pagination-item{padding:0 10px}.next-pagination[dir=rtl].next-medium .next-pagination-item+.next-pagination-item{margin:0 4px 0 0}.next-pagination[dir=rtl].next-medium .next-pagination-ellipsis{height:28px;line-height:28px;margin-left:8px;margin-right:8px}.next-pagination[dir=rtl].next-medium .next-pagination-ellipsis:before{width:12px;font-size:12px;line-height:inherit}.next-pagination[dir=rtl].next-medium .next-pagination-display,.next-pagination[dir=rtl].next-medium .next-pagination-display em,.next-pagination[dir=rtl].next-medium .next-pagination-jump-text{font-size:12px}.next-pagination[dir=rtl].next-medium .next-pagination-jump-input{width:36px}.next-pagination[dir=rtl].next-medium .next-pagination-size-selector-title{height:28px;line-height:28px;font-size:12px;vertical-align:middle}.next-pagination[dir=rtl].next-medium .next-pagination-size-selector-btn{padding:0 12px}.next-pagination[dir=rtl].next-medium .next-pagination-item.next-next:not([disabled]) i,.next-pagination[dir=rtl].next-medium .next-pagination-item.next-prev:not([disabled]) i{color:#666}.next-pagination[dir=rtl].next-medium .next-pagination-item:hover.next-next:not([disabled]) i,.next-pagination[dir=rtl].next-medium .next-pagination-item:hover.next-prev:not([disabled]) i{color:#333}.next-pagination[dir=rtl].next-large .next-pagination-list{margin:0 8px}.next-pagination[dir=rtl].next-large .next-pagination-total{line-height:40px;vertical-align:middle}.next-pagination[dir=rtl].next-large .next-pagination-item{padding:0 15px}.next-pagination[dir=rtl].next-large .next-pagination-item+.next-pagination-item{margin:0 8px 0 0}.next-pagination[dir=rtl].next-large .next-pagination-ellipsis{height:40px;line-height:40px;margin-left:8px;margin-right:8px}.next-pagination[dir=rtl].next-large .next-pagination-ellipsis:before{width:16px;font-size:16px;line-height:inherit}.next-pagination[dir=rtl].next-large .next-pagination-display,.next-pagination[dir=rtl].next-large .next-pagination-display em,.next-pagination[dir=rtl].next-large .next-pagination-jump-text{font-size:16px}.next-pagination[dir=rtl].next-large .next-pagination-jump-input{width:48px}.next-pagination[dir=rtl].next-large .next-pagination-size-selector-title{height:40px;line-height:40px;font-size:16px;vertical-align:middle}.next-pagination[dir=rtl].next-large .next-pagination-size-selector-btn{padding:0 16px}.next-pagination[dir=rtl].next-large .next-pagination-item.next-next:not([disabled]) i,.next-pagination[dir=rtl].next-large .next-pagination-item.next-prev:not([disabled]) i{color:#666}.next-pagination[dir=rtl].next-large .next-pagination-item:hover.next-next:not([disabled]) i,.next-pagination[dir=rtl].next-large .next-pagination-item:hover.next-prev:not([disabled]) i{color:#333}.next-pagination{font-size:0}.next-pagination,.next-pagination *,.next-pagination :after,.next-pagination :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-pagination:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-pagination-total{display:inline-block;font-size:14px;margin-right:16px}.next-pagination-pages{display:inline-block}.next-pagination-list{display:inline-block;vertical-align:top}.next-pagination .next-pagination-item{display:inline-block}.next-pagination .next-pagination-item.next-current,.next-pagination .next-pagination-item.next-current:focus,.next-pagination .next-pagination-item.next-current:hover{border-color:#5584ff;background:#5584ff;color:#fff}.next-pagination-ellipsis{display:inline-block;color:#999;vertical-align:top}.next-pagination-display{display:inline-block;margin:0 16px;color:#333;vertical-align:middle}.next-pagination-display em{font-style:normal;color:#5584ff}.next-pagination-jump-text{display:inline-block;vertical-align:middle;color:#999}.next-pagination-jump-input{margin:0 4px;vertical-align:top}.next-pagination-jump-go{margin-left:4px;vertical-align:top}.next-pagination-size-selector{display:inline-block;position:relative}.next-pagination-size-selector-title{margin-right:4px;color:#999}.next-pagination-size-selector-filter{display:inline-block;vertical-align:middle}.next-pagination-size-selector-dropdown{vertical-align:top;min-width:64px}.next-pagination-size-selector-popup{min-width:64px}.next-pagination-size-selector-btn.next-btn-text{height:auto;line-height:normal;color:#666;border-radius:0}.next-pagination-size-selector-btn.next-btn-text.next-current{color:#5584ff}.next-pagination-size-selector-btn.next-btn-text+.next-pagination-size-selector-btn{border-left:1px solid #dcdee3}.next-pagination-pages+.next-pagination-size-selector,.next-pagination-size-selector+.next-pagination-pages{margin-left:40px}.next-pagination.next-hide{display:none}.next-pagination.next-start .next-pagination-pages{float:right}.next-pagination.next-end .next-pagination-pages,.next-pagination.next-start .next-pagination-size-selector{float:left}.next-pagination.next-end .next-pagination-size-selector{float:right}.next-pagination.next-small .next-pagination-list{margin:0 4px}.next-pagination.next-small .next-pagination-total{line-height:20px;vertical-align:middle}.next-pagination.next-small .next-pagination-item{padding:0 6px}.next-pagination.next-small .next-pagination-item+.next-pagination-item{margin:0 0 0 4px}.next-pagination.next-small .next-pagination-ellipsis{height:20px;line-height:20px;margin-left:8px;margin-right:8px}.next-pagination.next-small .next-pagination-ellipsis:before{width:12px;font-size:12px;line-height:inherit}.next-pagination.next-small .next-pagination-display,.next-pagination.next-small .next-pagination-display em,.next-pagination.next-small .next-pagination-jump-text{font-size:12px}.next-pagination.next-small .next-pagination-jump-input{width:28px}.next-pagination.next-small .next-pagination-size-selector-title{height:20px;line-height:20px;font-size:12px;vertical-align:middle}.next-pagination.next-small .next-pagination-size-selector-btn{padding:0 8px}.next-pagination.next-small .next-pagination-item.next-next:not([disabled]) i,.next-pagination.next-small .next-pagination-item.next-prev:not([disabled]) i{color:#666}.next-pagination.next-small .next-pagination-item:hover.next-next:not([disabled]) i,.next-pagination.next-small .next-pagination-item:hover.next-prev:not([disabled]) i{color:#333}.next-pagination.next-small.next-arrow-only .next-pagination-item.next-next,.next-pagination.next-small.next-arrow-only .next-pagination-item.next-prev{width:20px;padding:0}.next-pagination.next-small.next-arrow-only .next-pagination-item.next-next .next-icon,.next-pagination.next-small.next-arrow-only .next-pagination-item.next-prev .next-icon{margin:0 auto}.next-pagination.next-small.next-arrow-prev-only .next-pagination-item.next-prev{width:20px;padding:0}.next-pagination.next-small.next-arrow-prev-only .next-pagination-item.next-prev .next-icon{margin:0 auto}.next-pagination.next-small.next-no-border .next-pagination-item.next-next,.next-pagination.next-small.next-no-border .next-pagination-item.next-prev{padding:0;border:none;background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.next-pagination.next-small.next-no-border .next-pagination-item.next-next .next-icon,.next-pagination.next-small.next-no-border .next-pagination-item.next-prev .next-icon{margin:0}.next-pagination.next-small.next-no-border .next-pagination-item.next-next:not([disabled]):hover i,.next-pagination.next-small.next-no-border .next-pagination-item.next-prev:not([disabled]):hover i{color:#5584ff}.next-pagination.next-small.next-no-border .next-pagination-display{margin:0 8px}.next-pagination.next-small.next-mini .next-pagination-item.next-prev{margin-right:4px}.next-pagination.next-small.next-mini .next-pagination-item.next-next{margin-left:4px}.next-pagination.next-medium .next-pagination-list{margin:0 4px}.next-pagination.next-medium .next-pagination-total{line-height:28px;vertical-align:middle}.next-pagination.next-medium .next-pagination-item{padding:0 10px}.next-pagination.next-medium .next-pagination-item+.next-pagination-item{margin:0 0 0 4px}.next-pagination.next-medium .next-pagination-ellipsis{height:28px;line-height:28px;margin-left:8px;margin-right:8px}.next-pagination.next-medium .next-pagination-ellipsis:before{width:12px;font-size:12px;line-height:inherit}.next-pagination.next-medium .next-pagination-display,.next-pagination.next-medium .next-pagination-display em,.next-pagination.next-medium .next-pagination-jump-text{font-size:12px}.next-pagination.next-medium .next-pagination-jump-input{width:36px}.next-pagination.next-medium .next-pagination-size-selector-title{height:28px;line-height:28px;font-size:12px;vertical-align:middle}.next-pagination.next-medium .next-pagination-size-selector-btn{padding:0 12px}.next-pagination.next-medium .next-pagination-item.next-next:not([disabled]) i,.next-pagination.next-medium .next-pagination-item.next-prev:not([disabled]) i{color:#666}.next-pagination.next-medium .next-pagination-item:hover.next-next:not([disabled]) i,.next-pagination.next-medium .next-pagination-item:hover.next-prev:not([disabled]) i{color:#333}.next-pagination.next-medium.next-arrow-only .next-pagination-item.next-next,.next-pagination.next-medium.next-arrow-only .next-pagination-item.next-prev{width:28px;padding:0}.next-pagination.next-medium.next-arrow-only .next-pagination-item.next-next .next-icon,.next-pagination.next-medium.next-arrow-only .next-pagination-item.next-prev .next-icon{margin:0 auto}.next-pagination.next-medium.next-arrow-prev-only .next-pagination-item.next-prev{width:28px;padding:0}.next-pagination.next-medium.next-arrow-prev-only .next-pagination-item.next-prev .next-icon{margin:0 auto}.next-pagination.next-medium.next-no-border .next-pagination-item.next-next,.next-pagination.next-medium.next-no-border .next-pagination-item.next-prev{padding:0;border:none;background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.next-pagination.next-medium.next-no-border .next-pagination-item.next-next .next-icon,.next-pagination.next-medium.next-no-border .next-pagination-item.next-prev .next-icon{margin:0}.next-pagination.next-medium.next-no-border .next-pagination-item.next-next:not([disabled]):hover i,.next-pagination.next-medium.next-no-border .next-pagination-item.next-prev:not([disabled]):hover i{color:#5584ff}.next-pagination.next-medium.next-no-border .next-pagination-display{margin:0 12px}.next-pagination.next-medium.next-mini .next-pagination-item.next-prev{margin-right:4px}.next-pagination.next-medium.next-mini .next-pagination-item.next-next{margin-left:4px}.next-pagination.next-large .next-pagination-list{margin:0 8px}.next-pagination.next-large .next-pagination-total{line-height:40px;vertical-align:middle}.next-pagination.next-large .next-pagination-item{padding:0 15px}.next-pagination.next-large .next-pagination-item+.next-pagination-item{margin:0 0 0 8px}.next-pagination.next-large .next-pagination-ellipsis{height:40px;line-height:40px;margin-left:8px;margin-right:8px}.next-pagination.next-large .next-pagination-ellipsis:before{width:16px;font-size:16px;line-height:inherit}.next-pagination.next-large .next-pagination-display,.next-pagination.next-large .next-pagination-display em,.next-pagination.next-large .next-pagination-jump-text{font-size:16px}.next-pagination.next-large .next-pagination-jump-input{width:48px}.next-pagination.next-large .next-pagination-size-selector-title{height:40px;line-height:40px;font-size:16px;vertical-align:middle}.next-pagination.next-large .next-pagination-size-selector-btn{padding:0 16px}.next-pagination.next-large .next-pagination-item.next-next:not([disabled]) i,.next-pagination.next-large .next-pagination-item.next-prev:not([disabled]) i{color:#666}.next-pagination.next-large .next-pagination-item:hover.next-next:not([disabled]) i,.next-pagination.next-large .next-pagination-item:hover.next-prev:not([disabled]) i{color:#333}.next-pagination.next-large.next-arrow-only .next-pagination-item.next-next,.next-pagination.next-large.next-arrow-only .next-pagination-item.next-prev{width:40px;padding:0}.next-pagination.next-large.next-arrow-only .next-pagination-item.next-next .next-icon,.next-pagination.next-large.next-arrow-only .next-pagination-item.next-prev .next-icon{margin:0 auto}.next-pagination.next-large.next-arrow-prev-only .next-pagination-item.next-prev{width:40px;padding:0}.next-pagination.next-large.next-arrow-prev-only .next-pagination-item.next-prev .next-icon{margin:0 auto}.next-pagination.next-large.next-no-border .next-pagination-item.next-next,.next-pagination.next-large.next-no-border .next-pagination-item.next-prev{padding:0;border:none;background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.next-pagination.next-large.next-no-border .next-pagination-item.next-next .next-icon,.next-pagination.next-large.next-no-border .next-pagination-item.next-prev .next-icon{margin:0}.next-pagination.next-large.next-no-border .next-pagination-item.next-next:not([disabled]):hover i,.next-pagination.next-large.next-no-border .next-pagination-item.next-prev:not([disabled]):hover i{color:#5584ff}.next-pagination.next-large.next-no-border .next-pagination-display{margin:0 16px}.next-pagination.next-large.next-mini .next-pagination-item.next-prev{margin-right:8px}.next-pagination.next-large.next-mini .next-pagination-item.next-next{margin-left:8px} \ No newline at end of file diff --git a/demos/pagination/deps.json b/demos/pagination/deps.json new file mode 100644 index 0000000000..b4bd72c29c --- /dev/null +++ b/demos/pagination/deps.json @@ -0,0 +1 @@ +["button","input","select","demo-helper","field"] \ No newline at end of file diff --git a/demos/pagination/index.html b/demos/pagination/index.html new file mode 100644 index 0000000000..16fafc119d --- /dev/null +++ b/demos/pagination/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/paragraph/build/index.css b/demos/paragraph/build/index.css new file mode 100644 index 0000000000..3b20e1476b --- /dev/null +++ b/demos/paragraph/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-paragraph{color:#333}.next-paragraph-short{line-height:1.5}.next-paragraph-long{line-height:1.7}.next-paragraph-small{font-size:12px}.next-paragraph-medium{font-size:14px} \ No newline at end of file diff --git a/demos/paragraph/deps.json b/demos/paragraph/deps.json new file mode 100644 index 0000000000..6d2f9c00cb --- /dev/null +++ b/demos/paragraph/deps.json @@ -0,0 +1 @@ +["demo-helper"] \ No newline at end of file diff --git a/demos/paragraph/index.html b/demos/paragraph/index.html new file mode 100644 index 0000000000..4b05c0092c --- /dev/null +++ b/demos/paragraph/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/popup/build/index.css b/demos/popup/build/index.css new file mode 100644 index 0000000000..d121239a4a --- /dev/null +++ b/demos/popup/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-overlay-wrapper .next-overlay-inner{z-index:1001}.next-overlay-wrapper .next-overlay-backdrop{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;background:#000;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0}.next-overlay-wrapper.opened .next-overlay-backdrop{opacity:.2}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-radio-button-large[dir=rtl]>label:first-child{margin-left:-1px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.next-radio-button-large[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large[dir=rtl] .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-wrapper[dir=rtl] .next-radio-label{margin-left:0;margin-right:4px}.next-radio-group[dir=rtl] .next-radio-label{margin-right:4px;margin-left:16px}.next-radio-button[dir=rtl]>label .next-radio-label{margin:0}.next-radio-wrapper{outline:0}.next-radio-wrapper .next-radio{display:inline-block;vertical-align:middle;position:relative;line-height:1}.next-radio-wrapper .next-radio,.next-radio-wrapper .next-radio *,.next-radio-wrapper .next-radio :after,.next-radio-wrapper .next-radio :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-radio-wrapper .next-radio input[type=radio]{opacity:0;position:absolute;vertical-align:middle;top:0;left:0;width:16px;height:16px;margin:0}.next-radio-wrapper .next-radio-inner{display:block;width:16px;height:16px;background:#fff;border-radius:50%;border:1px solid #c4c6cf;-webkit-transition:all .36s ease 0s;transition:all .36s ease 0s;-webkit-box-shadow:none;box-shadow:none}.next-radio-wrapper .next-radio-inner:after{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;border-radius:50%;top:50%;margin-top:-2px;left:50%;margin-left:-2px;background:#fff;content:" ";-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86)}.next-radio-wrapper.checked .next-radio-inner{border-color:#5584ff;background:#5584ff}.next-radio-wrapper.checked .next-radio-inner:after{width:4px;height:4px;font-weight:700;background:#fff;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.next-radio-wrapper.checked.hovered .next-radio-inner,.next-radio-wrapper.checked:hover .next-radio-inner{border-color:transparent}.next-radio-wrapper.disabled input[type=radio]{cursor:not-allowed}.next-radio-wrapper.disabled .next-radio-inner{border-color:#e6e7eb;background:#f7f8fa}.next-radio-wrapper.disabled.checked .next-radio-inner,.next-radio-wrapper.disabled .next-radio-inner.hovered,.next-radio-wrapper.disabled .next-radio-inner:hover{border-color:#e6e7eb}.next-radio-wrapper.disabled.checked .next-radio-inner:after{background:#ccc}.next-radio-wrapper:not(.disabled).focused .next-radio-inner,.next-radio-wrapper:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper:not(.disabled):focus .next-radio-inner,.next-radio-wrapper:not(.disabled):hover .next-radio-inner{border-color:#5584ff;background-color:#dee8ff}.next-radio-wrapper.checked.focused .next-radio-inner,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner{border-color:transparent;background:#3e71f7}.next-radio-wrapper.checked.focused .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner:after{background:#fff}.next-radio-button .next-radio,.next-radio-button input[type=radio]{width:0;height:0}.next-radio-button>label{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1;margin:0 0 0 -1px;border:1px solid #c4c6cf;background-color:#fff;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;vertical-align:middle}.next-radio-button>label .next-radio-label{display:block;color:#333;margin:0;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}.next-radio-button>label.hovered,.next-radio-button>label:focus,.next-radio-button>label:hover{z-index:10;border-color:#a0a2ad;background-color:#f2f3f7}.next-radio-button>label.hovered .next-radio-label,.next-radio-button>label:focus .next-radio-label,.next-radio-button>label:hover .next-radio-label{color:#333}.next-radio-button>label.checked{z-index:11;border-color:#5584ff;background-color:#fff}.next-radio-button>label.checked .next-radio-label{color:#5584ff}.next-radio-button>label.disabled{z-index:0;cursor:not-allowed;border-color:#e6e7eb;background-color:#f7f8fa}.next-radio-button>label.disabled .next-radio-label{color:#ccc}.next-radio-button>label.checked.disabled{z-index:0;border-color:#e6e7eb;background-color:#f2f3f7}.next-radio-button>label.checked.disabled .next-radio-label{color:#ccc}.next-radio-button-large>label{padding:0 8px;height:40px;line-height:40px}.next-radio-button-large>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-large .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium>label{padding:0 8px;height:28px;line-height:28px}.next-radio-button-medium>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-medium>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium .next-radio-label{height:26px;line-height:26px;font-size:12px}.next-radio-button-small>label{padding:0 8px;height:20px;line-height:20px}.next-radio-button-small>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small .next-radio-label{height:18px;line-height:18px;font-size:12px}.next-radio-single-input input[type=radio]{opacity:0;position:absolute;top:0;left:0;margin:0}.next-radio-group{display:inline-block}.next-radio-group .next-radio-label{color:#333;margin-right:16px}.next-radio-group.disabled .next-radio-label{color:#ccc}.next-radio-group-ver .next-radio-wrapper{display:block;margin-bottom:8px}.next-radio-label{margin:0;margin-left:4px;font-size:12px;vertical-align:middle;line-height:1}@-moz-document url-prefix(){.next-radio{margin-top:-1px}@supports ((-webkit-animation:calc(0s)) or (animation:calc(0s))){.next-radio{margin-top:-3px}}}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}@-webkit-keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}@keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}.next-tag>.next-tag-body{overflow:hidden;text-overflow:ellipsis}.next-tag-checkable.next-tag-level-secondary{color:#333;border-color:transparent;background-color:transparent}.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):hover{color:#5584ff}.next-tag-closable.next-tag-level-primary,.next-tag-default.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-primary,.disabled.next-tag-default.next-tag-level-primary,[disabled].next-tag-closable.next-tag-level-primary,[disabled].next-tag-default.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.disabled.next-tag-default.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-checkable.next-tag-level-primary,[disabled].next-tag-checkable.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary.checked{color:#fff;border-color:#5584ff;background-color:#5584ff}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover{color:#fff;border-color:#3e71f7;background-color:#3e71f7}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked>.next-tag-close-btn{color:#fff}.next-tag-default.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-default.next-tag-level-normal,[disabled].next-tag-default.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.disabled.next-tag-default.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-closable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-normal,[disabled].next-tag-closable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:transparent}.disabled.next-tag-closable.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-normal.checked,.next-tag-checkable.next-tag-level-secondary.checked{color:#5584ff;border-color:#5584ff;background-color:transparent}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover{color:#3e71f7;border-color:#3e71f7;background-color:transparent}.next-tag-checkable.next-tag-level-secondary.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-secondary.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-secondary.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-secondary.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-secondary.checked:after{color:#fff}.next-tag-checkable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#c4c6cf;background-color:transparent}.disabled.next-tag-checkable.next-tag-level-normal,[disabled].next-tag-checkable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-normal.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-normal.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-normal.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-normal.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-normal.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-normal.checked:after{color:#fff}.next-tag-closable.next-tag-level-normal:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#c4c6cf;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-closable.next-tag-level-normal:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E626";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:before{background-color:#a0a2ad}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-closable.next-tag-level-normal:disabled:before,[disabled].next-tag-closable.next-tag-level-normal:before{background-color:#e6e7eb}.next-tag-closable.next-tag-level-normal:disabled:after,[disabled].next-tag-closable.next-tag-level-normal:after{color:#fff}.next-tag-group .next-tag-large,.next-tag-group .next-tag-medium{margin-right:8px;margin-bottom:8px}.next-tag-group .next-tag-small{margin-right:4px;margin-bottom:4px}.next-tag{display:inline-block;max-width:100%;vertical-align:middle;border-width:1px;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid;overflow:hidden;white-space:nowrap;-webkit-transition:all .2s cubic-bezier(.23,1,.32,1);transition:all .2s cubic-bezier(.23,1,.32,1);font-size:0;outline:0}.next-tag,.next-tag *,.next-tag :after,.next-tag :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tag>.next-tag-body{position:relative;display:inline-block;height:100%;text-align:center;vertical-align:middle;max-width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.next-tag>.next-tag-body>a{text-decoration:none;color:inherit}.next-tag>.next-tag-body>a:before{content:" ";position:absolute;display:block;top:0;left:0;right:0;bottom:0}.next-tag>.next-tag-body .next-icon{line-height:1;vertical-align:middle}.next-tag>.next-tag-body .next-icon:before{font-size:inherit}.next-tag.next-tag-body-pointer{cursor:pointer}.next-tag.disabled,.next-tag[disabled]{cursor:not-allowed;pointer-events:none}.next-tag-large{height:40px;padding:0;line-height:38px;font-size:0}.next-tag-large>.next-tag-body{font-size:16px;padding:0 16px;min-width:48px}.next-tag-large.next-tag-closable>.next-tag-body{padding:0 0 0 16px}.next-tag-large[dir=rtl].next-tag-closable>.next-tag-body{padding:0 16px 0 0}.next-tag-large>.next-tag-close-btn{margin-left:12px;padding-right:16px}.next-tag-large>.next-tag-close-btn .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tag-large[dir=rtl]>.next-tag-close-btn{margin-right:12px;margin-left:0;padding-right:0;padding-left:16px}.next-tag-medium{height:28px;padding:0;line-height:26px;font-size:0}.next-tag-medium>.next-tag-body{font-size:14px;padding:0 12px;min-width:40px}.next-tag-medium.next-tag-closable>.next-tag-body{padding:0 0 0 12px}.next-tag-medium[dir=rtl].next-tag-closable>.next-tag-body{padding:0 12px 0 0}.next-tag-medium>.next-tag-close-btn{margin-left:8px;padding-right:12px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-medium>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-medium[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:12px}.next-tag-small{height:20px;padding:0;line-height:18px;font-size:0}.next-tag-small>.next-tag-body{font-size:12px;padding:0 8px;min-width:28px}.next-tag-small.next-tag-closable>.next-tag-body{padding:0 0 0 8px}.next-tag-small[dir=rtl].next-tag-closable>.next-tag-body{padding:0 8px 0 0}.next-tag-small>.next-tag-close-btn{margin-left:8px;padding-right:8px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-small>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-small[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:8px}.next-tag-default{cursor:default}.next-tag-closable{position:relative}.next-tag-closable.next-tag-large>.next-tag-body{max-width:calc(100% - 40px)}.next-tag-closable.next-tag-medium>.next-tag-body{max-width:calc(100% - 28px)}.next-tag-closable.next-tag-small>.next-tag-body{max-width:calc(100% - 20px)}.next-tag-closable>.next-tag-close-btn{display:inline-block;vertical-align:middle;height:100%;text-align:center;cursor:pointer}.next-tag-closable.next-tag-level-normal.disabled,.next-tag-closable.next-tag-level-normal[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable{cursor:pointer;position:relative;border-radius:3px}.next-tag-checkable.checked:before{-webkit-animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.checked:after{-webkit-animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86);animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):before{right:-10px;bottom:-10px;width:20px;height:20px}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):after{font-size:8px;line-height:8px;right:0;bottom:0}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):before{right:-14px;bottom:-14px;width:28px;height:28px}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):after{font-size:12px;line-height:12px;right:0;bottom:0}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):before{right:-18px;bottom:-18px;width:36px;height:36px}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):after{font-size:16px;line-height:16px;right:0;bottom:0}.next-tag-checkable.next-tag-level-primary.disabled,.next-tag-checkable.next-tag-level-primary[disabled]{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-secondary.disabled,.next-tag-checkable.next-tag-level-secondary[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-zoom-appear,.next-tag-zoom-enter{-webkit-animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-tag-zoom-leave{-webkit-animation:zoomOut .3s ease-in;animation:zoomOut .3s ease-in;-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-checkbox-wrapper[dir=rtl]{margin-right:8px;margin-left:0}.next-checkbox-wrapper[dir=rtl]:first-child{margin-right:0}.next-checkbox-wrapper[dir=rtl]>.next-checkbox-label{margin-right:4px;margin-left:0}.next-checkbox-wrapper,.next-checkbox-wrapper *,.next-checkbox-wrapper :after,.next-checkbox-wrapper :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-checkbox-wrapper .next-checkbox{display:inline-block;position:relative;line-height:1;vertical-align:middle}.next-checkbox-wrapper input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:16px;height:16px;margin:0}.next-checkbox-wrapper .next-checkbox-inner{display:block;width:16px;height:16px;background:#fff;border-radius:3px;border:1px solid #c4c6cf;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;text-align:left;-webkit-box-shadow:none;box-shadow:none}.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;top:0;opacity:0;line-height:16px;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);color:#fff;left:4px;margin-left:0}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{vertical-align:top;margin-top:0}.next-checkbox-wrapper.checked .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.checked .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);margin-left:0}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.indeterminate .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.indeterminate .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1);margin-left:0}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.disabled input[type=checkbox]{cursor:not-allowed}.next-checkbox-wrapper.disabled .next-checkbox-inner{border-color:#e6e7eb;background:#f7f8fa}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover{border-color:#e6e7eb}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner>.next-icon{color:#ccc;opacity:1}.next-checkbox-wrapper.focused .next-checkbox-inner,.next-checkbox-wrapper.hovered .next-checkbox-inner,.next-checkbox-wrapper:not(.disabled):hover .next-checkbox-inner{border-color:#5584ff;background-color:#dee8ff}.next-checkbox-wrapper.checked.focused .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner{border-color:transparent;background-color:#3e71f7}.next-checkbox-wrapper.checked.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner>.next-icon{color:#fff;opacity:1}.next-checkbox-group .next-checkbox-wrapper{margin-left:8px}.next-checkbox-group .next-checkbox-wrapper:first-child{margin-left:0}.next-checkbox-group-ver .next-checkbox-wrapper{display:block;margin-left:0;margin-right:0;margin-bottom:8px}.next-checkbox-label{font-size:12px;vertical-align:middle;margin:0;margin-left:4px;line-height:1}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-menu[dir=rtl] .next-menu-item-helper{float:left}.next-menu[dir=rtl] .next-menu-item .next-checkbox,.next-menu[dir=rtl] .next-menu-item .next-radio{margin-left:4px;margin-right:0}.next-menu[dir=rtl] .next-menu-hoz-right{float:left}.next-menu[dir=rtl] .next-menu-hoz-icon-arrow.next-icon{left:6px;right:auto}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon{margin-left:0;margin-right:-16px}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon.next-menu-icon-right{right:auto;left:4px}.next-menu[dir=rtl] .next-menu-icon-arrow.next-icon{left:10px;right:auto}.next-menu{position:relative;min-width:100px;padding:8px 0;margin:0;list-style:none;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;background:#fff;line-height:32px;font-size:12px}.next-menu,.next-menu *,.next-menu :after,.next-menu :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-menu:focus,.next-menu :focus{outline:0}.next-menu-embeddable,.next-menu-embeddable .next-menu-item.next-disabled,.next-menu-embeddable .next-menu-item.next-disabled .next-menu-item-text>a{background:initial;border:none}.next-menu-embeddable .next-menu-item-inner{height:100%}.next-menu-content{position:relative}.next-menu-content,.next-menu-sub-menu{padding:0;margin:0;list-style:none}.next-menu-sub-menu.next-expand-enter{overflow:hidden}.next-menu-sub-menu.next-expand-enter-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-sub-menu.next-expand-leave{overflow:hidden}.next-menu-sub-menu.next-expand-leave-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-item{position:relative;padding:0 20px;-webkit-transition:background .2s ease;transition:background .2s ease;color:#333;cursor:pointer}.next-menu-item-helper{float:right;color:#999;font-style:normal;font-size:12px}.next-menu-item .next-checkbox,.next-menu-item .next-radio{margin-right:4px}.next-menu-item.next-selected{color:#333;background-color:#fff}.next-menu-item.next-selected .next-menu-icon-arrow{color:#666}.next-menu-item.next-selected .next-menu-icon-selected{color:#5584ff}.next-menu-item.next-disabled,.next-menu-item.next-disabled .next-menu-item-text>a{color:#ccc;background-color:#fff;cursor:not-allowed}.next-menu-item.next-disabled .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-icon-selected,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-selected{color:#ccc}.next-menu-item:not(.next-disabled).next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover,.next-menu-item:not(.next-disabled).next-selected:focus,.next-menu-item:not(.next-disabled).next-selected:focus:hover,.next-menu-item:not(.next-disabled).next-selected:hover,.next-menu-item:not(.next-disabled):hover{color:#333;background-color:#f2f3f7}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled):hover .next-menu-icon-arrow{color:#333}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled):hover .next-menu-icon-selected{color:#5584ff}.next-menu-item-inner{height:32px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.next-menu-item-text{vertical-align:middle}.next-menu-item-text>a{display:inline-block;text-decoration:none;color:#333}.next-menu-item-text>a:before{position:absolute;background-color:transparent;top:0;left:0;bottom:0;right:0;content:""}.next-menu.next-hoz{padding:0}.next-menu.next-hoz .next-menu-content>.next-menu-item,.next-menu.next-hoz>.next-menu-item{display:inline-block;vertical-align:top}.next-menu.next-hoz .next-menu-content,.next-menu.next-hoz .next-menu-footer,.next-menu.next-hoz .next-menu-header{display:inline-block}.next-menu-hoz-right{float:right}.next-menu-group-label{padding:0 12px;color:#999}.next-menu-divider{margin:8px 12px;border-bottom:1px solid #e6e7eb}.next-menu .next-menu-icon-selected.next-icon{position:absolute;top:0;margin-left:-16px}.next-menu .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-icon-selected.next-icon.next-menu-icon-right{right:4px}.next-menu .next-menu-icon-arrow.next-icon{position:absolute;top:0;right:10px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-icon-arrow.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow.next-icon:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-icon-arrow-down.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:scale(.5) rotate(180deg);-ms-transform:scale(.5) rotate(180deg);transform:scale(.5) rotate(180deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-down.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.next-menu .next-menu-icon-arrow-right.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:scale(.5) rotate(-90deg);-ms-transform:scale(.5) rotate(-90deg);transform:scale(.5) rotate(-90deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-right.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-hoz-icon-arrow.next-icon{position:absolute;top:0;right:6px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-hoz-icon-arrow.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-hoz-icon-arrow.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-hoz-icon-arrow.next-open:before{width:12px;font-size:12px;line-height:inherit}.next-menu.next-context{line-height:24px}.next-menu.next-context .next-menu-item-inner{height:24px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-input{vertical-align:middle;display:inline-table;border-collapse:separate;font-size:0;line-height:1;width:200px;border-spacing:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;border:1px solid #c4c6cf;background-color:#fff}.next-input,.next-input *,.next-input :after,.next-input :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input input{height:100%}.next-input input[type=reset],.next-input input[type=submit]{-webkit-appearance:button;cursor:pointer}.next-input input::-moz-focus-inner{border:0;padding:0}.next-input input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset}.next-input textarea{resize:none}.next-input input,.next-input textarea{width:100%;border:none;outline:none;padding:0;margin:0;font-weight:400;vertical-align:middle;background-color:transparent;color:#333}.next-input input::-ms-clear,.next-input textarea::-ms-clear{display:none}.next-input.next-input-textarea{border-radius:3px;font-size:0}.next-input.next-input-textarea textarea{color:#333;padding:4px 8px;font-size:12px;border-radius:3px}.next-input.next-input-textarea .next-input-control{display:block;width:auto;border-radius:3px}.next-input.next-input-textarea .next-input-len{padding:0 8px 4px;display:block;text-align:right;width:auto}.next-input.next-small{height:20px;border-radius:3px}.next-input.next-small .next-input-label{padding-left:8px;font-size:12px}.next-input.next-small .next-input-inner{font-size:12px}.next-input.next-small .next-input-control{padding-right:4px}.next-input.next-small input{height:18px;line-height:18px \0;padding:0 4px;font-size:12px}.next-input.next-small input::-webkit-input-placeholder{font-size:12px}.next-input.next-small input::-moz-placeholder{font-size:12px}.next-input.next-small input::-ms-input-placeholder{font-size:12px}.next-input.next-small input::placeholder{font-size:12px}.next-input.next-small .next-input-text-field{padding:0 4px;font-size:12px;height:18px;line-height:18px}.next-input.next-small .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-small input{border-radius:3px}.next-input.next-small .next-input-control{border-radius:0 3px 3px 0}.next-input.next-medium{height:28px;border-radius:3px}.next-input.next-medium .next-input-label{padding-left:8px;font-size:12px}.next-input.next-medium .next-input-inner{font-size:12px}.next-input.next-medium .next-input-control{padding-right:8px}.next-input.next-medium input{height:26px;line-height:26px \0;padding:0 8px;font-size:12px}.next-input.next-medium input::-webkit-input-placeholder{font-size:12px}.next-input.next-medium input::-moz-placeholder{font-size:12px}.next-input.next-medium input::-ms-input-placeholder{font-size:12px}.next-input.next-medium input::placeholder{font-size:12px}.next-input.next-medium .next-input-text-field{padding:0 8px;font-size:12px;height:26px;line-height:26px}.next-input.next-medium .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-medium input{border-radius:3px}.next-input.next-medium .next-input-control{border-radius:0 3px 3px 0}.next-input.next-large{height:40px;border-radius:3px}.next-input.next-large .next-input-label{padding-left:12px;font-size:16px}.next-input.next-large .next-input-inner{font-size:16px}.next-input.next-large .next-input-control{padding-right:8px}.next-input.next-large input{height:38px;line-height:38px \0;padding:0 12px;font-size:16px}.next-input.next-large input::-webkit-input-placeholder{font-size:16px}.next-input.next-large input::-moz-placeholder{font-size:16px}.next-input.next-large input::-ms-input-placeholder{font-size:16px}.next-input.next-large input::placeholder{font-size:16px}.next-input.next-large .next-input-text-field{padding:0 12px;font-size:16px;height:38px;line-height:38px}.next-input.next-large .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-input.next-large input{border-radius:3px}.next-input.next-large .next-input-control{border-radius:0 3px 3px 0}.next-input-hint-wrap{color:#999;position:relative}.next-input-hint-wrap .next-input-clear{opacity:0;z-index:1;position:absolute}.next-input-hint-wrap .next-input-hint{opacity:1}.next-input .next-icon-delete-filling:hover{cursor:pointer;color:#666}.next-input.next-focus,.next-input:hover{border-color:#a0a2ad;background-color:#fff}.next-input.next-focus .next-input-clear,.next-input:hover .next-input-clear{opacity:1}.next-input.next-focus .next-input-clear+.next-input-hint,.next-input:hover .next-input-clear+.next-input-hint{opacity:0}.next-input .next-input-clear:focus{opacity:1}.next-input .next-input-clear:focus+.next-input-hint{opacity:0}.next-input.next-focus{border-color:#5584ff;background-color:#fff}.next-input.next-error,.next-input.next-error.next-focus,.next-input.next-error:hover{border-color:#ff3000}.next-input.next-hidden{display:none}.next-input.next-noborder{border:none}.next-input-control .next-input-len{font-size:12px;line-height:12px;color:#999;display:table-cell;width:1px;vertical-align:bottom}.next-input-control .next-input-len.next-error{color:#ff3000}.next-input-control>*{display:table-cell;width:1%;top:0}.next-input-control>:not(:last-child){padding-right:4px}.next-input-control .next-icon{-webkit-transition:all .3s ease-out;transition:all .3s ease-out;color:#999}.next-input-control .next-icon-success-filling{color:#46bc15}.next-input-control .next-icon-loading{color:#4494f9}.next-input-label{color:#666}.next-input input::-moz-placeholder,.next-input textarea::-moz-placeholder{color:#999;opacity:1}.next-input input:-ms-input-placeholder,.next-input textarea:-ms-input-placeholder{color:#999}.next-input input::-webkit-input-placeholder,.next-input textarea::-webkit-input-placeholder{color:#999}.next-input.next-disabled{color:#ccc;cursor:not-allowed}.next-input.next-disabled,.next-input.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled input::-moz-placeholder,.next-input.next-disabled textarea::-moz-placeholder{color:#ccc;opacity:1}.next-input.next-disabled input:-ms-input-placeholder,.next-input.next-disabled textarea:-ms-input-placeholder{color:#ccc}.next-input.next-disabled input::-webkit-input-placeholder,.next-input.next-disabled textarea::-webkit-input-placeholder{color:#ccc}.next-input.next-disabled .next-input-label,.next-input.next-disabled .next-input-len{color:#ccc}.next-input.next-disabled input,.next-input.next-disabled textarea{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa;cursor:not-allowed}.next-input.next-disabled input:hover,.next-input.next-disabled textarea:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled .next-input-hint-wrap{color:#ccc}.next-input.next-disabled .next-input-hint-wrap .next-input-clear{opacity:0}.next-input.next-disabled .next-input-hint-wrap .next-input-hint{opacity:1}.next-input.next-disabled .next-input-hint-wrap .next-icon-delete-filling:hover{cursor:not-allowed;color:#ccc}.next-input.next-disabled .next-icon{color:#ccc}.next-input-control,.next-input-inner,.next-input-label{display:table-cell;width:1px;vertical-align:middle;line-height:1;background-color:transparent;white-space:nowrap}.next-input-group{display:inline-table;border-collapse:separate;border-spacing:0;line-height:0;width:100%}.next-input-group,.next-input-group *,.next-input-group :after,.next-input-group :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input-group-auto-width{width:100%;border-radius:0!important}.next-input-group>.next-input:first-child.next-large,.next-input-group>.next-input:first-child.next-medium,.next-input-group>.next-input:first-child.next-small{border-top-left-radius:3px!important;border-bottom-left-radius:3px!important}.next-input-group>.next-input:last-child.next-large,.next-input-group>.next-input:last-child.next-medium,.next-input-group>.next-input:last-child.next-small{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.next-input-group-addon{width:1px;display:table-cell;vertical-align:middle;white-space:nowrap}.next-input-group-addon:first-child,.next-input-group-addon:first-child>*{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group-addon:last-child,.next-input-group-addon:last-child>*{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group-text{color:#999;background-color:#f2f3f7;text-align:center;border:1px solid #c4c6cf;padding:0 8px}.next-input-group-text:first-child{border-right-width:0}.next-input-group-text:last-child{border-left-width:0}.next-input-group-text.next-disabled{color:#ccc;cursor:not-allowed}.next-input-group-text.next-disabled,.next-input-group-text.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input-group-text.next-medium,.next-input-group-text.next-small{font-size:12px;border-radius:3px}.next-input-group-text.next-large{font-size:16px;border-radius:3px}.next-input[dir=rtl].next-small .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-small .next-input-control{padding-right:0;padding-left:4px}.next-input[dir=rtl].next-medium .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-medium .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-large .next-input-label{padding-left:0;padding-right:12px}.next-input[dir=rtl].next-large .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-input-textarea .next-input-len{text-align:left}.next-input[dir=rtl] .next-input-control>:not(:last-child){padding-left:4px;padding-right:0}.next-input-group[dir=rtl] .next-input-group-addon:first-child{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-small{border-bottom-right-radius:3px!important;border-top-right-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-small{border-bottom-left-radius:3px!important;border-top-left-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-text:first-child{border-right-width:1px;border-left:0}.next-input-group[dir=rtl] .next-input-group-text:last-child{border-left-width:1px;border-right:0}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-select{display:inline-block;font-size:0;vertical-align:middle}.next-select,.next-select *,.next-select :after,.next-select :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-select-trigger{min-width:100px;outline:0;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-trigger .next-input-label{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-select-values{display:block;width:100%;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow:hidden}.next-select-trigger .next-select-values>em{font-style:inherit}.next-select-trigger .next-select-values input{padding-left:0;padding-right:0}.next-select-trigger .next-input-control{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-input-control>*{display:inline-block;width:auto}.next-select-trigger .next-input-control>.next-select-arrow{padding-right:0}.next-select-trigger .next-input.next-disabled em{color:#ccc}.next-select-trigger .next-input.next-disabled .next-select-arrow{cursor:not-allowed}.next-select-trigger .next-select-clear{display:none}.next-select-trigger.next-has-clear:hover .next-select-clear{display:inline-block}.next-select-trigger.next-has-clear:hover .next-select-arrow{display:none}.next-select .next-select-inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;min-width:100px;outline:0;color:#333}.next-select .next-select-inner .next-tag{line-height:1;margin-right:4px;margin-bottom:3px;padding-left:4px;padding-right:4px}.next-select-trigger-search{position:relative;display:inline-block;vertical-align:top;overflow:hidden;width:100%;max-width:100%}.next-select-trigger-search>input,.next-select-trigger-search>span{display:block;font-size:inherit;font-family:inherit;letter-spacing:inherit;white-space:nowrap;overflow:hidden}.next-select-trigger-search input{position:absolute;background-color:transparent;width:100%;height:100%!important;z-index:1;left:0;border:0;outline:0;margin:0;padding:0;cursor:inherit}.next-select-trigger-search>span{position:relative;visibility:hidden;white-space:pre;max-width:100%;z-index:-1}.next-select-single.next-no-search{cursor:pointer}.next-select-single.next-has-search.next-active .next-select-values>em{display:none}.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{width:1px;opacity:0;filter:alpha(opacity=0)}.next-select-single.next-inactive .next-select-trigger-search input,.next-select-single.next-no-search .next-select-trigger-search input{color:transparent}.next-select-single .next-select-values{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.next-select-single .next-select-values>em{vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.next-select-multiple .next-select-values,.next-select-tag .next-select-values{margin-bottom:-3px;height:auto!important}.next-select-multiple .next-select-trigger-search,.next-select-tag .next-select-trigger-search{margin-bottom:3px}.next-select-multiple .next-tag+.next-select-trigger-search,.next-select-tag .next-tag+.next-select-trigger-search{width:auto;min-width:1px}.next-select-multiple .next-input,.next-select-tag .next-input{height:auto;-webkit-box-align:start;-ms-flex-align:start;align-items:start}.next-select-multiple.next-small .next-select-values,.next-select-tag.next-small .next-select-values{min-height:18px;padding-top:2px;padding-bottom:2px;line-height:14px}.next-select-multiple.next-small .next-tag,.next-select-tag.next-small .next-tag{border:0;padding-top:0;padding-bottom:0;height:14px}.next-select-multiple.next-small .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-close-btn,.next-select-tag.next-small .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-close-btn{line-height:14px}.next-select-multiple.next-small .next-input-control,.next-select-multiple.next-small .next-input-label,.next-select-tag.next-small .next-input-control,.next-select-tag.next-small .next-input-label{line-height:18px}.next-select-multiple.next-medium .next-select-values,.next-select-tag.next-medium .next-select-values{min-height:26px;padding-top:3px;padding-bottom:3px;line-height:20px}.next-select-multiple.next-medium .next-tag,.next-select-tag.next-medium .next-tag{padding-top:1px;padding-bottom:1px;height:20px}.next-select-multiple.next-medium .next-tag .next-tag-body,.next-select-multiple.next-medium .next-tag .next-tag-close-btn,.next-select-tag.next-medium .next-tag .next-tag-body,.next-select-tag.next-medium .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-medium .next-input-control,.next-select-multiple.next-medium .next-input-label,.next-select-tag.next-medium .next-input-control,.next-select-tag.next-medium .next-input-label{line-height:26px}.next-select-multiple.next-large .next-select-values,.next-select-tag.next-large .next-select-values{min-height:38px;padding-top:7px;padding-bottom:7px;line-height:24px}.next-select-multiple.next-large .next-tag,.next-select-tag.next-large .next-tag{padding-top:3px;padding-bottom:3px;height:24px}.next-select-multiple.next-large .next-tag .next-tag-body,.next-select-multiple.next-large .next-tag .next-tag-close-btn,.next-select-tag.next-large .next-tag .next-tag-body,.next-select-tag.next-large .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-large .next-input-control,.next-select-multiple.next-large .next-input-label,.next-select-tag.next-large .next-input-control,.next-select-tag.next-large .next-input-label{line-height:38px}.next-select.next-no-search .next-select-trigger-search input{color:transparent}.next-select-auto-complete{width:160px}.next-select-auto-complete .next-input{width:100%}.next-select-auto-complete .next-input .next-input-hint-wrap{padding-right:1px}.next-select-auto-complete .next-input .next-select-arrow{padding-left:0}.next-select.next-active .next-select-arrow{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-select-arrow{cursor:pointer;width:auto!important;text-align:center;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-menu-wrapper{max-height:260px;overflow:auto;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none}.next-select-menu-wrapper .next-select-menu{max-height:none;border:none}.next-select-menu{max-height:260px;overflow:auto}.next-select-menu .next-select-menu-empty-content{padding-left:8px;padding-right:8px;color:#999}.next-select-menu.next-select-auto-complete-menu.next-select-menu-empty{display:none}.next-select-menu .next-menu-item-text .next-icon{vertical-align:middle}.next-select-all{display:block;cursor:pointer;padding:0 8px;margin:0 12px 8px;border-bottom:1px solid #dcdee3}.next-select-all:hover{color:#3e71f7}.next-select-all .next-menu-icon-selected.next-icon{display:inline-block!important;top:auto;color:#5584ff}.next-select-highlight{color:#5584ff;font-size:12px}.next-select-in-ie.next-select-trigger .next-select-values{overflow:visible}.next-select-in-ie.next-select-trigger .next-input-control,.next-select-in-ie.next-select-trigger .next-input-label{width:1px}.next-select-in-ie.next-select-trigger .next-input-control>*{display:table-cell;width:1%}.next-select-in-ie.next-select-trigger .next-select-arrow{display:table-cell}.next-select-in-ie.next-select-trigger .next-select-clear{display:none}.next-select-in-ie.next-select-trigger.next-select-multiple .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-tag .next-select-inner{vertical-align:top}.next-select-in-ie.next-select-trigger .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-single .next-select-values{display:inline-table}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-small .next-select-values{line-height:20px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-medium .next-select-values{line-height:28px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-large .next-select-values{line-height:40px}.next-select-in-ie.next-select-trigger .next-select-trigger-search>span{max-width:100px}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values{position:relative}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values>em{position:absolute;display:inline-block;height:100%;line-height:1;vertical-align:middle;overflow:hidden;left:4px;right:0;top:30%}.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{filter:alpha(opacity=0);font-size:0}.next-select-in-ie.next-select-trigger.next-no-search .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-trigger-search input{color:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-time-picker-menu{float:left;text-align:center}.next-time-picker-menu:not(:last-child){border-right:1px solid #c4c6cf}.next-time-picker-menu-title{cursor:default;height:28px;line-height:28px;font-size:12px;font-weight:400;color:#999;background:#fff}.next-time-picker-menu ul{position:relative;overflow-y:auto;list-style:none;margin:0;padding:0;font-size:12px;height:196px}.next-time-picker-menu-item{cursor:pointer;height:28px;line-height:28px;-webkit-transition:background .3s ease-out;transition:background .3s ease-out;color:#666;background:#fff;outline:none}.next-time-picker-menu-item:hover{color:#333;background:#f2f3f7}.next-time-picker-menu-item.next-selected{font-weight:700;color:#666;background:#f2f3f7}.next-time-picker-menu-item.next-disabled{cursor:not-allowed;color:#ccc;background:#fff}.next-time-picker-panel,.next-time-picker-panel *,.next-time-picker-panel :after,.next-time-picker-panel :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-time-picker-panel:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-time-picker-panel-header{border-bottom:1px solid #dcdee3}.next-time-picker-panel-input.next-input{width:100%;padding:6px;border-color:transparent;vertical-align:middle}.next-time-picker-panel-col-3 .next-time-picker-menu{width:33.33333%}.next-time-picker-panel-col-2 .next-time-picker-menu{width:50%}.next-time-picker-body[dir=rtl] .next-time-picker-menu{float:right}.next-time-picker-body[dir=rtl] .next-time-picker-menu:not(:last-child){border-right:none;border-left:1px solid #c4c6cf}.next-time-picker{display:inline-block;width:200px}.next-time-picker,.next-time-picker *,.next-time-picker :after,.next-time-picker :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-time-picker-trigger .next-input{width:100%}.next-time-picker-body{overflow:hidden;width:200px;border:1px solid #dcdee3;border-radius:3px;background:#fff;-webkit-box-shadow:none;box-shadow:none}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-tree,.next-tree *,.next-tree :after,.next-tree :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tree,.next-tree-child-tree{margin:0;padding:0;list-style:none}.next-tree-node{white-space:nowrap}.next-tree-node-inner{font-size:0;outline:none}.next-tree-node-label-wrapper{display:inline-block;margin:0 4px;vertical-align:middle}.next-tree-node-label{height:20px;line-height:20px;padding:0 4px;border-radius:3px;font-size:12px}.next-tree-node-input.next-input{margin:0 4px}.next-tree-switcher{position:relative;display:inline-block;vertical-align:middle;margin-right:8px}.next-tree-switcher.next-noline{width:12px;height:12px;line-height:12px;cursor:pointer}.next-tree-switcher.next-noline .next-tree-switcher-icon{-webkit-transition:-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);color:#999}.next-tree-switcher.next-noline .next-tree-switcher-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tree-switcher.next-noline.next-close .next-tree-switcher-icon{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.next-tree-switcher.next-noline.next-close .next-tree-switcher-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tree-switcher.next-noline:not(.next-disabled):hover .next-tree-switcher-icon{color:#333}.next-tree-switcher.next-noline.next-disabled{cursor:not-allowed}.next-tree-switcher.next-noline.next-disabled .next-tree-switcher-icon{color:#ccc}.next-tree-switcher.next-noop-noline{width:12px;height:12px}.next-tree-switcher.next-line{width:16px;height:16px;line-height:14px;border:1px solid #c4c6cf;border-radius:3px;background-color:#fff;cursor:pointer}.next-tree-switcher.next-line .next-tree-switcher-icon{margin-left:3px;color:#666}.next-tree-switcher.next-line .next-tree-switcher-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tree-switcher.next-line .next-tree-switcher-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-1px;margin-right:-4px}.next-tree-switcher.next-line .next-tree-switcher-icon:before{width:16px;font-size:16px}}.next-tree-switcher.next-line:not(.next-disabled):hover{border-color:#a0a2ad;background-color:#f2f3f7}.next-tree-switcher.next-line:not(.next-disabled):hover .next-tree-switcher-icon{color:#333}.next-tree-switcher.next-line.next-disabled{border-color:#e6e7eb;background-color:#fff;cursor:not-allowed}.next-tree-switcher.next-line.next-disabled .next-tree-switcher-icon{color:#ccc}.next-tree-switcher.next-noop-line{width:16px;height:16px}.next-tree-switcher.next-noop-line-noroot{height:0;border-left:1px solid #c4c6cf;border-bottom:1px solid #c4c6cf}.next-tree-switcher.next-noop-line-noroot .next-tree-right-angle{bottom:-1px}.next-tree-switcher.next-loading.next-loading-noline{width:12px;height:12px;line-height:12px}.next-tree-switcher.next-loading.next-loading-line{width:16px;height:16px;line-height:14px;border:1px solid transparent}.next-tree-switcher.next-loading .next-tree-switcher-icon{color:#5584ff}.next-tree-switcher.next-loading .next-tree-switcher-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tree-right-angle{position:absolute;bottom:6.5px;left:-17.5px;display:block;width:16.5px;height:22px;border-left:1px solid #c4c6cf;border-bottom:1px solid #c4c6cf}.next-tree.next-label-block .next-tree-node-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;outline:none}.next-tree.next-label-block .next-tree-node-label-wrapper{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.next-tree.next-node-indent .next-tree-node .next-tree-node{margin-left:24px}.next-tree.next-node-indent .next-tree-node-inner{padding-top:2px;padding-bottom:2px}.next-tree.next-node-indent .next-tree-node-inner:focus .next-tree-node-label{color:#333;background-color:#f2f3f7}.next-tree.next-node-indent .next-tree-node-label-wrapper{border-top:2px solid transparent;border-bottom:2px solid transparent}.next-tree.next-node-indent .next-tree-node-label{-webkit-transition:color .3s cubic-bezier(.23,1,.32,1),background-color .3s cubic-bezier(.23,1,.32,1);transition:color .3s cubic-bezier(.23,1,.32,1),background-color .3s cubic-bezier(.23,1,.32,1);cursor:default;color:#333;background-color:#fff}.next-tree.next-node-indent .next-tree-node-label-selectable{cursor:pointer}.next-tree.next-node-indent .next-tree-node-label:hover{color:#333;background-color:#f2f3f7}.next-tree.next-node-indent .next-tree-node-inner.next-selected .next-tree-node-label{color:#333;background-color:#dee8ff}.next-tree.next-node-indent .next-tree-node-inner.next-disabled .next-tree-node-label,.next-tree.next-node-indent .next-tree-node-inner.next-disabled .next-tree-node-label:hover{color:#ccc;background-color:#fff;cursor:not-allowed}.next-tree.next-node-indent .next-tree-node-inner.next-drag-over .next-tree-node-label{background-color:#5584ff;color:#fff;opacity:.8}.next-tree.next-node-indent .next-tree-node-inner.next-drag-over-gap-top .next-tree-node-label-wrapper{border-top-color:#5584ff}.next-tree.next-node-indent .next-tree-node-inner.next-drag-over-gap-bottom .next-tree-node-label-wrapper{border-bottom-color:#5584ff}.next-tree.next-node-block .next-tree-node-inner{padding-top:4px;padding-bottom:4px;-webkit-transition:color .3s cubic-bezier(.23,1,.32,1),background-color .3s cubic-bezier(.23,1,.32,1);transition:color .3s cubic-bezier(.23,1,.32,1),background-color .3s cubic-bezier(.23,1,.32,1);cursor:pointer;color:#333;background-color:#fff}.next-tree.next-node-block .next-tree-node-inner:focus,.next-tree.next-node-block .next-tree-node-inner:hover{color:#333;background-color:#f2f3f7}.next-tree.next-node-block .next-tree-node-inner.next-selected{color:#333;background-color:#dee8ff}.next-tree.next-node-block .next-tree-node-inner.next-disabled,.next-tree.next-node-block .next-tree-node-inner.next-disabled:hover{color:#ccc;background-color:#fff;cursor:not-allowed}.next-tree.next-show-line .next-tree-node .next-tree-node:not(:last-child){margin-left:7.5px;border-left:1px solid #c4c6cf;padding-left:15.5px}.next-tree-node.next-filtered>.next-tree-node-inner .next-tree-node-label,.next-tree-node.next-filtered>.next-tree-node-inner .next-tree-node-label:hover{color:#5584ff}.next-tree[dir=rtl] .next-tree-switcher{margin-left:8px;margin-right:0}.next-tree[dir=rtl] .next-tree-right-angle,.next-tree[dir=rtl] .next-tree-switcher.next-noop-line-noroot{border-left:none;border-right:1px solid #c4c6cf}.next-tree[dir=rtl] .next-tree-right-angle{left:auto;right:-17.5px}.next-tree[dir=rtl].next-show-line .next-tree-node .next-tree-node:not(:last-child){margin-left:0;margin-right:7.5px;border-left:none;border-right:1px solid #c4c6cf;padding-left:0;padding-right:15.5px}.next-tree[dir=rtl].next-node-indent .next-tree-node .next-tree-node{margin-left:0;margin-right:24px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-tree-select,.next-tree-select *,.next-tree-select :after,.next-tree-select :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tree-select-dropdown{padding:8px 20px;background:#fff;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none}.next-tree-select-not-found{height:16px;font-size:12px;color:#999}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.demo-body table{width:100%}.next-popup.next-menu,.next-popup.next-time-picker-body,.next-popup .next-tree-select-dropdown{border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none} \ No newline at end of file diff --git a/demos/popup/deps.json b/demos/popup/deps.json new file mode 100644 index 0000000000..be3b2a2925 --- /dev/null +++ b/demos/popup/deps.json @@ -0,0 +1 @@ +["demo-helper","menu","tree-select","time-picker"] \ No newline at end of file diff --git a/demos/popup/index.html b/demos/popup/index.html new file mode 100644 index 0000000000..618ee2d706 --- /dev/null +++ b/demos/popup/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/progress/build/index.css b/demos/progress/build/index.css new file mode 100644 index 0000000000..9ee8e5e536 --- /dev/null +++ b/demos/progress/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-progress-circle[dir=rtl] .next-progress-circle-container{-webkit-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scaleX(-1)}.next-progress-line[dir=rtl] .next-progress-line-overlay{left:auto;right:0}.next-progress-line,.next-progress-line *,.next-progress-line :after,.next-progress-line :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-progress-line{width:100%;display:inline-block;position:relative}.next-progress-line-container{display:inline-block;width:100%;vertical-align:middle}.next-progress-line-underlay{position:relative;width:100%;background-color:#ebecf0}.next-progress-line-overlay{position:absolute;left:0;top:0;-webkit-transition:all 1s cubic-bezier(.65,.2,.35,1);transition:all 1s cubic-bezier(.65,.2,.35,1)}.next-progress-line-overlay-normal{background-color:#5584ff}.next-progress-line-overlay-success{background-color:#46bc15}.next-progress-line-overlay-error,.next-progress-line-overlay-started{background-color:#ff3000}.next-progress-line-overlay-middle{background-color:#ff9300}.next-progress-line-overlay-finishing{background-color:#46bc15}.next-progress-line.next-small .next-progress-line-underlay{border-radius:20px;height:4px}.next-progress-line.next-small .next-progress-line-overlay{height:4px;border-radius:20px;top:50%;margin-top:-2px}.next-progress-line.next-small .next-progress-line-text{font-size:12px;line-height:4px}.next-progress-line.next-medium .next-progress-line-underlay{border-radius:20px;height:8px}.next-progress-line.next-medium .next-progress-line-overlay{height:8px;border-radius:20px;top:50%;margin-top:-4px}.next-progress-line.next-medium .next-progress-line-text{font-size:12px;line-height:8px}.next-progress-line.next-large .next-progress-line-underlay{border-radius:20px;height:12px}.next-progress-line.next-large .next-progress-line-overlay{height:12px;border-radius:20px;top:50%;margin-top:-6px}.next-progress-line.next-large .next-progress-line-text{font-size:12px;line-height:12px}.next-progress-line-show-info .next-progress-line-container{padding-right:60px;margin-right:-60px}.next-progress-line-show-info .next-progress-line-text{width:50px;text-align:left;margin-left:10px;vertical-align:middle;display:inline-block;color:#333}.next-progress-line-show-border .next-progress-line-underlay{border:1px solid #dcdee3}.next-progress-line-show-border.next-small .next-progress-line-underlay{border-radius:20px;height:6px}.next-progress-line-show-border.next-small .next-progress-line-overlay{height:4px;border-radius:20px;top:50%;margin-top:-2px}.next-progress-line-show-border.next-small .next-progress-line-text{font-size:12px;line-height:6px}.next-progress-line-show-border.next-medium .next-progress-line-underlay{border-radius:20px;height:10px}.next-progress-line-show-border.next-medium .next-progress-line-overlay{height:8px;border-radius:20px;top:50%;margin-top:-4px}.next-progress-line-show-border.next-medium .next-progress-line-text{font-size:12px;line-height:10px}.next-progress-line-show-border.next-large .next-progress-line-underlay{border-radius:20px;height:14px}.next-progress-line-show-border.next-large .next-progress-line-overlay{height:12px;border-radius:20px;top:50%;margin-top:-6px}.next-progress-line-show-border.next-large .next-progress-line-text{font-size:12px;line-height:14px}.next-progress-circle,.next-progress-circle *,.next-progress-circle :after,.next-progress-circle :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-progress-circle{position:relative;display:inline-block}.next-progress-circle-underlay{stroke-width:8px;stroke:#ebecf0}.next-progress-circle-overlay{-webkit-transition:all 1s cubic-bezier(.65,.2,.35,1);transition:all 1s cubic-bezier(.65,.2,.35,1);stroke-linecap:round;stroke-width:8px}.next-progress-circle-overlay-normal{stroke:#5584ff}.next-progress-circle-overlay-success{stroke:#46bc15}.next-progress-circle-overlay-error,.next-progress-circle-overlay-started{stroke:#ff3000}.next-progress-circle-overlay-middle{stroke:#ff9300}.next-progress-circle-overlay-finishing{stroke:#46bc15}.next-progress-circle.next-small{width:100px;height:100px;font-size:20px}.next-progress-circle.next-medium{width:116px;height:116px;font-size:24px}.next-progress-circle.next-large{width:132px;height:132px;font-size:36px}.next-progress-circle-text{display:block;position:absolute;width:100%;top:50%;left:0;text-align:center;line-height:1;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:-webkit-transform .3s cubic-bezier(.65,.2,.35,1);transition:-webkit-transform .3s cubic-bezier(.65,.2,.35,1);transition:transform .3s cubic-bezier(.65,.2,.35,1);transition:transform .3s cubic-bezier(.65,.2,.35,1),-webkit-transform .3s cubic-bezier(.65,.2,.35,1);color:#333} \ No newline at end of file diff --git a/demos/progress/deps.json b/demos/progress/deps.json new file mode 100644 index 0000000000..6d2f9c00cb --- /dev/null +++ b/demos/progress/deps.json @@ -0,0 +1 @@ +["demo-helper"] \ No newline at end of file diff --git a/demos/progress/index.html b/demos/progress/index.html new file mode 100644 index 0000000000..16a8e7954b --- /dev/null +++ b/demos/progress/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/radio/build/index.css b/demos/radio/build/index.css new file mode 100644 index 0000000000..f8c8e0378e --- /dev/null +++ b/demos/radio/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-radio-button-large[dir=rtl]>label:first-child{margin-left:-1px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.next-radio-button-large[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large[dir=rtl] .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-wrapper[dir=rtl] .next-radio-label{margin-left:0;margin-right:4px}.next-radio-group[dir=rtl] .next-radio-label{margin-right:4px;margin-left:16px}.next-radio-button[dir=rtl]>label .next-radio-label{margin:0}.next-radio-wrapper{outline:0}.next-radio-wrapper .next-radio{display:inline-block;vertical-align:middle;position:relative;line-height:1}.next-radio-wrapper .next-radio,.next-radio-wrapper .next-radio *,.next-radio-wrapper .next-radio :after,.next-radio-wrapper .next-radio :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-radio-wrapper .next-radio input[type=radio]{opacity:0;position:absolute;vertical-align:middle;top:0;left:0;width:16px;height:16px;margin:0}.next-radio-wrapper .next-radio-inner{display:block;width:16px;height:16px;background:#fff;border-radius:50%;border:1px solid #c4c6cf;-webkit-transition:all .36s ease 0s;transition:all .36s ease 0s;-webkit-box-shadow:none;box-shadow:none}.next-radio-wrapper .next-radio-inner:after{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;border-radius:50%;top:50%;margin-top:-2px;left:50%;margin-left:-2px;background:#fff;content:" ";-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86)}.next-radio-wrapper.checked .next-radio-inner{border-color:#5584ff;background:#5584ff}.next-radio-wrapper.checked .next-radio-inner:after{width:4px;height:4px;font-weight:700;background:#fff;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.next-radio-wrapper.checked.hovered .next-radio-inner,.next-radio-wrapper.checked:hover .next-radio-inner{border-color:transparent}.next-radio-wrapper.disabled input[type=radio]{cursor:not-allowed}.next-radio-wrapper.disabled .next-radio-inner{border-color:#e6e7eb;background:#f7f8fa}.next-radio-wrapper.disabled.checked .next-radio-inner,.next-radio-wrapper.disabled .next-radio-inner.hovered,.next-radio-wrapper.disabled .next-radio-inner:hover{border-color:#e6e7eb}.next-radio-wrapper.disabled.checked .next-radio-inner:after{background:#ccc}.next-radio-wrapper:not(.disabled).focused .next-radio-inner,.next-radio-wrapper:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper:not(.disabled):focus .next-radio-inner,.next-radio-wrapper:not(.disabled):hover .next-radio-inner{border-color:#5584ff;background-color:#dee8ff}.next-radio-wrapper.checked.focused .next-radio-inner,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner{border-color:transparent;background:#3e71f7}.next-radio-wrapper.checked.focused .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner:after{background:#fff}.next-radio-button .next-radio,.next-radio-button input[type=radio]{width:0;height:0}.next-radio-button>label{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1;margin:0 0 0 -1px;border:1px solid #c4c6cf;background-color:#fff;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;vertical-align:middle}.next-radio-button>label .next-radio-label{display:block;color:#333;margin:0;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}.next-radio-button>label.hovered,.next-radio-button>label:focus,.next-radio-button>label:hover{z-index:10;border-color:#a0a2ad;background-color:#f2f3f7}.next-radio-button>label.hovered .next-radio-label,.next-radio-button>label:focus .next-radio-label,.next-radio-button>label:hover .next-radio-label{color:#333}.next-radio-button>label.checked{z-index:11;border-color:#5584ff;background-color:#fff}.next-radio-button>label.checked .next-radio-label{color:#5584ff}.next-radio-button>label.disabled{z-index:0;cursor:not-allowed;border-color:#e6e7eb;background-color:#f7f8fa}.next-radio-button>label.disabled .next-radio-label{color:#ccc}.next-radio-button>label.checked.disabled{z-index:0;border-color:#e6e7eb;background-color:#f2f3f7}.next-radio-button>label.checked.disabled .next-radio-label{color:#ccc}.next-radio-button-large>label{padding:0 8px;height:40px;line-height:40px}.next-radio-button-large>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-large .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium>label{padding:0 8px;height:28px;line-height:28px}.next-radio-button-medium>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-medium>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium .next-radio-label{height:26px;line-height:26px;font-size:12px}.next-radio-button-small>label{padding:0 8px;height:20px;line-height:20px}.next-radio-button-small>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small .next-radio-label{height:18px;line-height:18px;font-size:12px}.next-radio-single-input input[type=radio]{opacity:0;position:absolute;top:0;left:0;margin:0}.next-radio-group{display:inline-block}.next-radio-group .next-radio-label{color:#333;margin-right:16px}.next-radio-group.disabled .next-radio-label{color:#ccc}.next-radio-group-ver .next-radio-wrapper{display:block;margin-bottom:8px}.next-radio-label{margin:0;margin-left:4px;font-size:12px;vertical-align:middle;line-height:1}@-moz-document url-prefix(){.next-radio{margin-top:-1px}@supports ((-webkit-animation:calc(0s)) or (animation:calc(0s))){.next-radio{margin-top:-3px}}} \ No newline at end of file diff --git a/demos/radio/deps.json b/demos/radio/deps.json new file mode 100644 index 0000000000..9ee99d42ba --- /dev/null +++ b/demos/radio/deps.json @@ -0,0 +1 @@ +["animate","demo-helper","field"] \ No newline at end of file diff --git a/demos/radio/index.html b/demos/radio/index.html new file mode 100644 index 0000000000..9c971bfd38 --- /dev/null +++ b/demos/radio/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/range/build/index.css b/demos/range/build/index.css new file mode 100644 index 0000000000..fa8617652e --- /dev/null +++ b/demos/range/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-overlay-wrapper .next-overlay-inner{z-index:1001}.next-overlay-wrapper .next-overlay-backdrop{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;background:#000;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0}.next-overlay-wrapper.opened .next-overlay-backdrop{opacity:.2}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-balloon{position:absolute;max-width:300px;border-style:solid;border-radius:3px;word-wrap:break-word;z-index:0}.next-balloon,.next-balloon *,.next-balloon :after,.next-balloon :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-balloon:focus,.next-balloon :focus{outline:0}.next-balloon-primary{color:#333;border-color:#4494f9;background-color:#e3f2fd;-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.12);box-shadow:0 1px 3px 0 rgba(0,0,0,.12);border-width:1px}.next-balloon-primary .next-balloon-close{position:absolute;top:12px;right:12px;font-size:12px;color:#999}.next-balloon-primary .next-balloon-close .next-icon{width:12px;height:12px;line-height:12px}.next-balloon-primary .next-balloon-close .next-icon:before{width:12px;height:12px;font-size:12px;line-height:12px}.next-balloon-primary .next-balloon-close :hover{color:#333}.next-balloon-primary:after{position:absolute;width:12px;height:12px;content:" ";-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-sizing:content-box!important;box-sizing:content-box!important;border:1px solid #4494f9;background-color:#e3f2fd;z-index:-1}.next-balloon-primary.next-balloon-top:after{top:-7px;left:calc(50% + -7px);border-right:none;border-bottom:none;-webkit-box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-right:after{top:calc(50% + -7px);right:-7px;border-left:none;border-bottom:none;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-bottom:after{bottom:-7px;left:calc(50% + -7px);border-top:none;border-left:none;-webkit-box-shadow:1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-left:after{top:calc(50% + -7px)}.next-balloon-primary.next-balloon-left-top:after,.next-balloon-primary.next-balloon-left:after{left:-7px;border-top:none;border-right:none;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-left-top:after{top:12px}.next-balloon-primary.next-balloon-left-bottom:after{bottom:12px;left:-7px;border-top:none;border-right:none;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-right-top:after{top:12px}.next-balloon-primary.next-balloon-right-bottom:after,.next-balloon-primary.next-balloon-right-top:after{right:-7px;border-bottom:none;border-left:none;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-right-bottom:after{bottom:12px}.next-balloon-primary.next-balloon-top-left:after{left:12px}.next-balloon-primary.next-balloon-top-left:after,.next-balloon-primary.next-balloon-top-right:after{top:-7px;border-right:none;border-bottom:none;-webkit-box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-top-right:after{right:12px}.next-balloon-primary.next-balloon-bottom-left:after{left:12px}.next-balloon-primary.next-balloon-bottom-left:after,.next-balloon-primary.next-balloon-bottom-right:after{bottom:-7px;border-top:none;border-left:none;-webkit-box-shadow:1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-bottom-right:after{right:12px}.next-balloon-normal{color:#333;border-color:#dcdee3;background-color:#fff;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-width:1px}.next-balloon-normal .next-balloon-close{position:absolute;top:12px;right:12px;font-size:12px;color:#999}.next-balloon-normal .next-balloon-close .next-icon{width:12px;height:12px;line-height:12px}.next-balloon-normal .next-balloon-close .next-icon:before{width:12px;height:12px;font-size:12px;line-height:12px}.next-balloon-normal .next-balloon-close :hover{color:#666}.next-balloon-normal:after{position:absolute;width:12px;height:12px;content:" ";-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-sizing:content-box!important;box-sizing:content-box!important;border:1px solid #dcdee3;background-color:#fff;z-index:-1}.next-balloon-normal.next-balloon-top:after{top:-7px;left:calc(50% + -7px);border-right:none;border-bottom:none;-webkit-box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-right:after{top:calc(50% + -7px);right:-7px;border-left:none;border-bottom:none;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-bottom:after{bottom:-7px;left:calc(50% + -7px);border-top:none;border-left:none;-webkit-box-shadow:1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-left:after{top:calc(50% + -7px)}.next-balloon-normal.next-balloon-left-top:after,.next-balloon-normal.next-balloon-left:after{left:-7px;border-top:none;border-right:none;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-left-top:after{top:12px}.next-balloon-normal.next-balloon-left-bottom:after{bottom:12px;left:-7px;border-top:none;border-right:none;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-right-top:after{top:12px}.next-balloon-normal.next-balloon-right-bottom:after,.next-balloon-normal.next-balloon-right-top:after{right:-7px;border-bottom:none;border-left:none;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-right-bottom:after{bottom:12px}.next-balloon-normal.next-balloon-top-left:after{left:12px}.next-balloon-normal.next-balloon-top-left:after,.next-balloon-normal.next-balloon-top-right:after{top:-7px;border-right:none;border-bottom:none;-webkit-box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-top-right:after{right:12px}.next-balloon-normal.next-balloon-bottom-left:after{left:12px}.next-balloon-normal.next-balloon-bottom-left:after,.next-balloon-normal.next-balloon-bottom-right:after{bottom:-7px;border-top:none;border-left:none;-webkit-box-shadow:1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-bottom-right:after{right:12px}.next-balloon.visible{display:block}.next-balloon.hidden{display:none}.next-balloon-medium{padding:16px}.next-balloon-closable{padding:16px 40px 16px 16px}.next-balloon-tooltip{position:absolute;max-width:300px;border-radius:3px;font-size:12px;z-index:0;color:#333;border:1px solid #dcdee3;background-color:#f2f3f7;-webkit-box-shadow:none;box-shadow:none}.next-balloon-tooltip,.next-balloon-tooltip *,.next-balloon-tooltip :after,.next-balloon-tooltip :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-balloon-tooltip:after{position:absolute;width:12px;height:12px;content:" ";-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-sizing:content-box!important;box-sizing:content-box!important;border:1px solid #dcdee3;background-color:#f2f3f7;z-index:-1}.next-balloon-tooltip-top:after{top:-7px;left:calc(50% + -7px);border-right:none;border-bottom:none}.next-balloon-tooltip-right:after{top:calc(50% + -7px);right:-7px;border-left:none;border-bottom:none}.next-balloon-tooltip-bottom:after{bottom:-7px;left:calc(50% + -7px);border-top:none;border-left:none}.next-balloon-tooltip-left:after{top:calc(50% + -7px);left:-7px;border-top:none;border-right:none}.next-balloon-tooltip-left-top:after{top:12px;left:-7px;border-top:none;border-right:none}.next-balloon-tooltip-left-bottom:after{bottom:12px;left:-7px;border-top:none;border-right:none}.next-balloon-tooltip-right-top:after{top:12px;right:-7px;border-bottom:none;border-left:none}.next-balloon-tooltip-right-bottom:after{right:-7px;bottom:12px;border-bottom:none;border-left:none}.next-balloon-tooltip-top-left:after{top:-7px;left:12px;border-right:none;border-bottom:none}.next-balloon-tooltip-top-right:after{top:-7px;right:12px;border-right:none;border-bottom:none}.next-balloon-tooltip-bottom-left:after{bottom:-7px;left:12px;border-top:none;border-left:none}.next-balloon-tooltip-bottom-right:after{right:12px;bottom:-7px;border-top:none;border-left:none}.next-balloon-tooltip.visible{display:block}.next-balloon-tooltip.hidden{display:none}.next-balloon-tooltip-medium{padding:8px}.next-balloon[dir=rtl].next-balloon-primary .next-balloon-close{left:12px;right:auto}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-right:after{left:-7px;right:auto;border-right:none;border-top:none;border-left:inherit;border-bottom:inherit;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-left-bottom:after,.next-balloon[dir=rtl].next-balloon-primary.next-balloon-left-top:after,.next-balloon[dir=rtl].next-balloon-primary.next-balloon-left:after{right:-7px;left:auto;border-left:none;border-bottom:none;border-right:inherit;border-top:inherit;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-right-bottom:after,.next-balloon[dir=rtl].next-balloon-primary.next-balloon-right-top:after{left:-7px;right:auto;border-right:none;border-top:none;border-bottom:inherit;border-left:inherit;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-top-left:after{right:12px;left:auto}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-top-right:after{right:auto;left:12px}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-bottom-left:after{right:12px;left:auto}.next-balloon[dir=rtl].next-balloon-normal .next-balloon-close,.next-balloon[dir=rtl].next-balloon-primary.next-balloon-bottom-right:after{left:12px;right:auto}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-right:after{left:-7px;right:auto;border-right:none;border-top:none;border-left:inherit;border-bottom:inherit;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-left-bottom:after,.next-balloon[dir=rtl].next-balloon-normal.next-balloon-left-top:after,.next-balloon[dir=rtl].next-balloon-normal.next-balloon-left:after{right:-7px;left:auto;border-left:none;border-bottom:none;border-right:inherit;border-top:inherit;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-right-bottom:after,.next-balloon[dir=rtl].next-balloon-normal.next-balloon-right-top:after{left:-7px;right:auto;border-right:none;border-top:none;border-bottom:inherit;border-left:inherit;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-top-left:after{right:12px;left:auto}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-top-right:after{right:auto;left:12px}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-bottom-left:after{right:12px;left:auto}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-bottom-right:after{left:12px;right:auto}.next-balloon[dir=rtl].next-balloon-closable{padding:16px 16px 16px 40px}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-right:after{left:-7px;right:auto;border-top:none;border-right:none;border-left:inherit;border-bottom:inherit}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-left-bottom:after,.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-left-top:after,.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-left:after{right:-7px;left:auto;border-top:inherit;border-right:inherit;border-left:none;border-bottom:none}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-right-bottom:after,.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-right-top:after{left:-7px;right:auto;border-top:none;border-right:none;border-left:inherit;border-bottom:inherit}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-top-left:after{right:12px;left:auto}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-top-right:after{left:12px;right:auto}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-bottom-left:after{right:12px;left:auto}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-bottom-right:after{left:12px;right:auto}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-medium{padding:8px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-range{width:100%;font-family:inherit;font-weight:400;font-size:inherit;line-height:inherit;vertical-align:baseline;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;cursor:pointer}.next-range,.next-range *,.next-range :after,.next-range :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-range .next-range-inner{position:relative}.next-range .next-range-inner:only-child{margin-top:auto;margin-bottom:auto}.next-range .next-range-track{position:absolute;width:100%;top:50%;border-radius:0}.next-range .next-range-selected{position:absolute;width:0;top:50%;left:0;border-radius:0}.next-range .next-range-scale{position:relative;width:100%;height:12px}.next-range .next-range-scale .next-range-scale-item{position:absolute;left:0;width:2px;border:1px solid;border-radius:0}.next-range .next-range-scale .next-range-scale-item:last-child{margin-left:-2px}.next-range .next-range-slider{position:absolute;top:50%;left:0;border-radius:50%}.next-range .next-range-slider-inner{position:absolute;top:50%;left:50%;border:1px solid #c4c6cf;border-radius:50%;-webkit-transition:border-color .4s cubic-bezier(.23,1,.32,1),-webkit-transform .4s cubic-bezier(.23,1,.32,1);transition:border-color .4s cubic-bezier(.23,1,.32,1),-webkit-transform .4s cubic-bezier(.23,1,.32,1);transition:transform .4s cubic-bezier(.23,1,.32,1),border-color .4s cubic-bezier(.23,1,.32,1);transition:transform .4s cubic-bezier(.23,1,.32,1),border-color .4s cubic-bezier(.23,1,.32,1),-webkit-transform .4s cubic-bezier(.23,1,.32,1)}.next-range .next-range-frag.next-range-active .next-range-slider .next-range-slider-inner,.next-range .next-range-slider.next-range-slider-moving .next-range-slider-inner{border:2px solid #5584ff;-webkit-box-shadow:2px 2px 4px 0 rgba(0,0,0,.12);box-shadow:2px 2px 4px 0 rgba(0,0,0,.12);-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.next-range .next-range-mark{position:relative;cursor:auto}.next-range .next-range-mark .next-range-mark-text{position:absolute;left:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);padding-left:2px;text-align:center}.next-range .next-range-frag{position:absolute;top:0}.next-range .next-range-frag .next-range-slider{left:0}.next-range .next-range-frag .next-range-slider:nth-child(2){left:100%}.next-range .next-range-frag .next-range-selected{width:100%}.next-range.disabled{cursor:not-allowed}.next-range.disabled .next-range-mark{cursor:auto}.next-range .next-range-track,.next-range .next-range-track:hover{background-color:#c4c6cf}.next-range .next-range-selected,.next-range .next-range-selected:hover{background-color:#5584ff}.next-range .next-range-scale .next-range-scale-item{border-color:#c4c6cf;background-color:#c4c6cf}.next-range .next-range-scale .next-range-scale-item:hover{border-color:#c4c6cf}.next-range .next-range-scale .next-range-scale-item.activated{border-color:#5584ff;background-color:#5584ff}.next-range .next-range-scale .next-range-scale-item.activated:hover{border-color:#5584ff}.next-range .next-range-slider-inner{background-color:#fff;border-color:#c4c6cf}.next-range .next-range-slider-inner:hover{background-color:#fff;-webkit-box-shadow:3px 3px 5px 0 rgba(0,0,0,.12);box-shadow:3px 3px 5px 0 rgba(0,0,0,.12);-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.next-range .next-range-mark .next-range-mark-text,.next-range .next-range-mark .next-range-mark-text:hover{color:#999}.next-range .next-range-mark .next-range-mark-text.activated,.next-range .next-range-mark .next-range-mark-text.activated:hover{color:#333}.next-range.disabled .next-range-track{background-color:#c4c6cf}.next-range.disabled .next-range-selected{background-color:#a0a2ad}.next-range.disabled .next-range-scale-item{border-color:#c4c6cf}.next-range.disabled .next-range-scale-item.activated{border-color:#a0a2ad}.next-range.disabled .next-range-slider-inner{background-color:#e6e7eb;border-color:#e6e7eb;-webkit-transform:none;-ms-transform:none;transform:none;-webkit-box-shadow:none;box-shadow:none}.next-range.disabled .next-range-mark-text{color:#ccc}.next-range.disabled .next-range-mark-text.activated{color:#999}.next-range .next-range-selected,.next-range .next-range-track{height:4px;margin-top:-2px}.next-range .next-range-frag{margin-top:-2px;height:16px}.next-range .next-range-slider{-webkit-box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);box-shadow:1px 1px 3px 0 rgba(0,0,0,.12)}.next-range .next-range-slider,.next-range .next-range-slider-inner{height:16px;width:16px;margin-top:-8px;margin-left:-8px}.next-range .next-range-mark{display:block}.next-range .next-range-mark .next-range-mark-text{font-size:12px;font-weight:400;line-height:20px;height:20px}.next-range .next-range-mark.next-range-mark-below{height:30px}.next-range .next-range-mark.next-range-mark-below .next-range-mark-text{bottom:0}.next-range .next-range-mark.next-range-mark-above{height:30px}.next-range .next-range-scale .next-range-scale-item{height:12px}.next-range.simulation-hover>.next-range-slider-inner{background-color:#fff;-webkit-box-shadow:#fff;box-shadow:#fff;-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.next-range.simulation-click>.next-range-slider-inner{border:2px solid #5584ff;-webkit-box-shadow:2px 2px 4px 0 rgba(0,0,0,.12);box-shadow:2px 2px 4px 0 rgba(0,0,0,.12);-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.next-range[dir=rtl] .next-range-mark{position:relative;cursor:auto}.next-range[dir=rtl] .next-range-mark .next-range-mark-text{position:absolute;right:0;-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);padding-right:2px;text-align:center} \ No newline at end of file diff --git a/demos/range/deps.json b/demos/range/deps.json new file mode 100644 index 0000000000..5d0d865848 --- /dev/null +++ b/demos/range/deps.json @@ -0,0 +1 @@ +["balloon","demo-helper"] \ No newline at end of file diff --git a/demos/range/index.html b/demos/range/index.html new file mode 100644 index 0000000000..d1efd019a8 --- /dev/null +++ b/demos/range/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/rating/build/index.css b/demos/rating/build/index.css new file mode 100644 index 0000000000..2bbae2a5db --- /dev/null +++ b/demos/rating/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-rating[dir=rtl] .next-rating-overlay{right:0;left:auto}.next-rating[dir=rtl] .next-rating-overlay .next-rating-icon,.next-rating[dir=rtl] .next-rating-underlay .next-rating-icon{margin-right:4px;margin-left:0}.next-rating[dir=rtl] .next-rating-overlay .next-rating-icon:last-child,.next-rating[dir=rtl] .next-rating-underlay .next-rating-icon:last-child{margin-left:4px}.next-rating{vertical-align:top;display:inline-block;position:relative}.next-rating:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-rating-base{float:left;cursor:pointer}.next-rating-text{float:left}.next-rating-base-disabled{cursor:not-allowed}.next-rating-underlay{white-space:nowrap;overflow:hidden}.next-rating-underlay .next-icon{color:#e2e4e8}.next-rating-stroke-mode .next-rating-underlay .next-icon{color:transparent;-webkit-text-stroke:1px #5584ff}.next-rating-overlay{white-space:nowrap;overflow:hidden;position:absolute;width:0;top:0;left:0}.next-rating-overlay .next-icon{color:#5584ff}.next-rating-overlay .next-rating-icon,.next-rating-underlay .next-rating-icon{margin-left:4px}.next-rating-overlay .next-rating-icon:last-child,.next-rating-underlay .next-rating-icon:last-child{margin-right:4px}.next-rating-overlay .next-icon,.next-rating-underlay .next-icon{-webkit-transition:all 50ms ease-in;transition:all 50ms ease-in}.next-rating-overlay .next-icon.hover,.next-rating-underlay .next-icon.hover{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}.next-rating-overlay .next-icon.clicked,.next-rating-underlay .next-icon.clicked{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}.next-rating-info{top:calc(100% + 4px);left:0;padding:4px 8px 3px;font-size:12px;white-space:nowrap}.next-rating-info,.next-rating-info:after{position:absolute;border:1px solid #e2e4e8;background:#fff}.next-rating-info:after{content:" ";width:4px;height:4px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);border-bottom-color:transparent;border-right-color:transparent;top:-3px;left:4px}.next-rating.hover,.next-rating:focus{outline:none}.next-rating.hover .next-rating-overlay .next-icon,.next-rating:focus .next-rating-overlay .next-icon{color:#5584ff}.next-rating-grade-low.hover .next-rating-overlay .next-icon,.next-rating-grade-low .next-rating-overlay .next-icon{color:#666}.next-rating-grade-high.hover .next-rating-overlay .next-icon,.next-rating-grade-high .next-rating-overlay .next-icon{color:#5584ff}.next-rating-small{font-size:12px}.next-rating-small .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-rating-small .next-rating-text{margin-left:8px}.next-rating-medium{font-size:12px}.next-rating-medium .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-rating-medium .next-rating-text{margin-left:12px}.next-rating-large{font-size:16px}.next-rating-large .next-icon:before{width:20px;font-size:20px;line-height:inherit}.next-rating-large .next-rating-text{margin-left:16px} \ No newline at end of file diff --git a/demos/rating/deps.json b/demos/rating/deps.json new file mode 100644 index 0000000000..963cf92bcf --- /dev/null +++ b/demos/rating/deps.json @@ -0,0 +1 @@ +["icon","demo-helper"] \ No newline at end of file diff --git a/demos/rating/index.html b/demos/rating/index.html new file mode 100644 index 0000000000..b055e63aa8 --- /dev/null +++ b/demos/rating/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/search/build/index.css b/demos/search/build/index.css new file mode 100644 index 0000000000..6e8c1e6c97 --- /dev/null +++ b/demos/search/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-overlay-wrapper .next-overlay-inner{z-index:1001}.next-overlay-wrapper .next-overlay-backdrop{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;background:#000;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0}.next-overlay-wrapper.opened .next-overlay-backdrop{opacity:.2}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-btn,.next-btn *,.next-btn :after,.next-btn :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-btn::-moz-focus-inner{border:0;padding:0}.next-btn,.next-btn:active,.next-btn:focus,.next-btn:hover{outline:0}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-btn{position:relative;display:inline-block;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;text-align:center;text-transform:none;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;cursor:pointer}.next-btn:after{text-align:center;position:absolute;opacity:0;visibility:hidden;-webkit-transition:opacity .5s ease;transition:opacity .5s ease}.next-btn .next-icon.next-xs:before{vertical-align:baseline}.next-btn.hover,.next-btn:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn.next-small{border-radius:3px;padding:0 8px;height:20px;line-height:18px;font-size:12px;border-width:1px}.next-btn.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-small>.next-btn-icon.next-icon-alone:before,.next-btn.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small.next-btn-loading{padding-left:24px}.next-btn.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:8px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-small.next-btn-loading>.next-icon{display:none}.next-btn.next-medium{border-radius:3px;padding:0 12px;height:28px;line-height:26px;font-size:12px;border-width:1px}.next-btn.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium.next-btn-loading{padding-left:28px}.next-btn.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:12px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-medium.next-btn-loading>.next-icon{display:none}.next-btn.next-large{border-radius:3px;padding:0 16px;height:40px;line-height:38px;font-size:16px;border-width:1px}.next-btn.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-large>.next-btn-icon.next-icon-alone:before,.next-btn.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large.next-btn-loading{padding-left:36px}.next-btn.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:16px;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn.next-large.next-btn-loading>.next-icon{display:none}.next-btn.next-btn-normal{border-style:solid;background-color:#fff;border-color:#c4c6cf}.next-btn.next-btn-normal,.next-btn.next-btn-normal.visited,.next-btn.next-btn-normal:link,.next-btn.next-btn-normal:visited{color:#333}.next-btn.next-btn-normal.active,.next-btn.next-btn-normal.hover,.next-btn.next-btn-normal:active,.next-btn.next-btn-normal:focus,.next-btn.next-btn-normal:hover{color:#333;background-color:#f2f3f7;border-color:#a0a2ad;text-decoration:none}.next-btn.next-btn-primary{border-style:solid;background-color:#5584ff;border-color:transparent}.next-btn.next-btn-primary,.next-btn.next-btn-primary.visited,.next-btn.next-btn-primary:link,.next-btn.next-btn-primary:visited{color:#fff}.next-btn.next-btn-primary.active,.next-btn.next-btn-primary.hover,.next-btn.next-btn-primary:active,.next-btn.next-btn-primary:focus,.next-btn.next-btn-primary:hover{color:#fff;background-color:#3e71f7;border-color:transparent;text-decoration:none}.next-btn.next-btn-secondary{border-style:solid;background-color:#fff;border-color:#5584ff}.next-btn.next-btn-secondary,.next-btn.next-btn-secondary.visited,.next-btn.next-btn-secondary:link,.next-btn.next-btn-secondary:visited{color:#5584ff}.next-btn.next-btn-secondary.active,.next-btn.next-btn-secondary.hover,.next-btn.next-btn-secondary:active,.next-btn.next-btn-secondary:focus,.next-btn.next-btn-secondary:hover{color:#fff;background-color:#3e71f7;border-color:#3e71f7;text-decoration:none}.next-btn.disabled,.next-btn[disabled]{cursor:not-allowed;background-color:#f7f8fa;border-color:#e6e7eb}.next-btn.disabled,.next-btn.disabled.visited,.next-btn.disabled:link,.next-btn.disabled:visited,.next-btn[disabled],.next-btn[disabled].visited,.next-btn[disabled]:link,.next-btn[disabled]:visited{color:#ccc}.next-btn.disabled.active,.next-btn.disabled.hover,.next-btn.disabled:active,.next-btn.disabled:focus,.next-btn.disabled:hover,.next-btn[disabled].active,.next-btn[disabled].hover,.next-btn[disabled]:active,.next-btn[disabled]:focus,.next-btn[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-warning{border-style:solid}.next-btn-warning.next-btn-primary{background-color:#ff3000;border-color:#ff3000}.next-btn-warning.next-btn-primary,.next-btn-warning.next-btn-primary.visited,.next-btn-warning.next-btn-primary:link,.next-btn-warning.next-btn-primary:visited{color:#fff}.next-btn-warning.next-btn-primary.active,.next-btn-warning.next-btn-primary.hover,.next-btn-warning.next-btn-primary:active,.next-btn-warning.next-btn-primary:focus,.next-btn-warning.next-btn-primary:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary[disabled]{background-color:#f7f8fa;border-color:#dcdee3}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary.disabled.visited,.next-btn-warning.next-btn-primary.disabled:link,.next-btn-warning.next-btn-primary.disabled:visited,.next-btn-warning.next-btn-primary[disabled],.next-btn-warning.next-btn-primary[disabled].visited,.next-btn-warning.next-btn-primary[disabled]:link,.next-btn-warning.next-btn-primary[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-primary.disabled.active,.next-btn-warning.next-btn-primary.disabled.hover,.next-btn-warning.next-btn-primary.disabled:active,.next-btn-warning.next-btn-primary.disabled:focus,.next-btn-warning.next-btn-primary.disabled:hover,.next-btn-warning.next-btn-primary[disabled].active,.next-btn-warning.next-btn-primary[disabled].hover,.next-btn-warning.next-btn-primary[disabled]:active,.next-btn-warning.next-btn-primary[disabled]:focus,.next-btn-warning.next-btn-primary[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#dcdee3;text-decoration:none}.next-btn-warning.next-btn-normal{background-color:#fff;border-color:#ff3000}.next-btn-warning.next-btn-normal,.next-btn-warning.next-btn-normal.visited,.next-btn-warning.next-btn-normal:link,.next-btn-warning.next-btn-normal:visited{color:#ff3000}.next-btn-warning.next-btn-normal.active,.next-btn-warning.next-btn-normal.hover,.next-btn-warning.next-btn-normal:active,.next-btn-warning.next-btn-normal:focus,.next-btn-warning.next-btn-normal:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal[disabled]{background-color:#f7f8fa;border-color:#e6e7eb}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal.disabled.visited,.next-btn-warning.next-btn-normal.disabled:link,.next-btn-warning.next-btn-normal.disabled:visited,.next-btn-warning.next-btn-normal[disabled],.next-btn-warning.next-btn-normal[disabled].visited,.next-btn-warning.next-btn-normal[disabled]:link,.next-btn-warning.next-btn-normal[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-normal.disabled.active,.next-btn-warning.next-btn-normal.disabled.hover,.next-btn-warning.next-btn-normal.disabled:active,.next-btn-warning.next-btn-normal.disabled:focus,.next-btn-warning.next-btn-normal.disabled:hover,.next-btn-warning.next-btn-normal[disabled].active,.next-btn-warning.next-btn-normal[disabled].hover,.next-btn-warning.next-btn-normal[disabled]:active,.next-btn-warning.next-btn-normal[disabled]:focus,.next-btn-warning.next-btn-normal[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-text{border-radius:0}.next-btn-text,.next-btn-text.hover,.next-btn-text:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn-text.next-btn-primary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-primary,.next-btn-text.next-btn-primary.visited,.next-btn-text.next-btn-primary:link,.next-btn-text.next-btn-primary:visited{color:#5584ff}.next-btn-text.next-btn-primary.active,.next-btn-text.next-btn-primary.hover,.next-btn-text.next-btn-primary:active,.next-btn-text.next-btn-primary:focus,.next-btn-text.next-btn-primary:hover{color:#3e71f7;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-secondary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-secondary,.next-btn-text.next-btn-secondary.visited,.next-btn-text.next-btn-secondary:link,.next-btn-text.next-btn-secondary:visited{color:#666}.next-btn-text.next-btn-secondary.active,.next-btn-text.next-btn-secondary.hover,.next-btn-text.next-btn-secondary:active,.next-btn-text.next-btn-secondary:focus,.next-btn-text.next-btn-secondary:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-normal{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-normal,.next-btn-text.next-btn-normal.visited,.next-btn-text.next-btn-normal:link,.next-btn-text.next-btn-normal:visited{color:#333}.next-btn-text.next-btn-normal.active,.next-btn-text.next-btn-normal.hover,.next-btn-text.next-btn-normal:active,.next-btn-text.next-btn-normal:focus,.next-btn-text.next-btn-normal:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-large{border-radius:0;padding:0;height:24px;line-height:24px;font-size:14px;border-width:0}.next-btn-text.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-large>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large.next-btn-loading{padding-left:20px}.next-btn-text.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:0;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn-text.next-large.next-btn-loading>.next-icon{display:none}.next-btn-text.next-medium{border-radius:0;padding:0;height:20px;line-height:20px;font-size:12px;border-width:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium.next-btn-loading{padding-left:16px}.next-btn-text.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-medium.next-btn-loading>.next-icon{display:none}.next-btn-text.next-small{border-radius:0;padding:0;height:16px;line-height:16px;font-size:12px;border-width:0}.next-btn-text.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-small>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small.next-btn-loading{padding-left:16px}.next-btn-text.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-small.next-btn-loading>.next-icon{display:none}.next-btn-text.disabled,.next-btn-text[disabled]{background-color:transparent;border-color:transparent}.next-btn-text.disabled,.next-btn-text.disabled.visited,.next-btn-text.disabled:link,.next-btn-text.disabled:visited,.next-btn-text[disabled],.next-btn-text[disabled].visited,.next-btn-text[disabled]:link,.next-btn-text[disabled]:visited{color:#ccc}.next-btn-text.disabled.active,.next-btn-text.disabled.hover,.next-btn-text.disabled:active,.next-btn-text.disabled:focus,.next-btn-text.disabled:hover,.next-btn-text[disabled].active,.next-btn-text[disabled].hover,.next-btn-text[disabled]:active,.next-btn-text[disabled]:focus,.next-btn-text[disabled]:hover{color:#ccc;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-loading{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-loading,.next-btn-text.next-btn-loading.visited,.next-btn-text.next-btn-loading:link,.next-btn-text.next-btn-loading:visited{color:#333}.next-btn-text.next-btn-loading.active,.next-btn-text.next-btn-loading.hover,.next-btn-text.next-btn-loading:active,.next-btn-text.next-btn-loading:focus,.next-btn-text.next-btn-loading:hover{color:#333;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-loading{pointer-events:none}.next-btn-loading:after{font-family:NextIcon;content:"\E646";opacity:1;visibility:visible;-webkit-animation:loadingCircle 2s infinite linear;animation:loadingCircle 2s infinite linear}.next-btn-ghost{-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-btn-ghost.next-btn-dark{background-color:transparent;border-color:#fff}.next-btn-ghost.next-btn-dark,.next-btn-ghost.next-btn-dark.visited,.next-btn-ghost.next-btn-dark:link,.next-btn-ghost.next-btn-dark:visited{color:#fff}.next-btn-ghost.next-btn-dark.active,.next-btn-ghost.next-btn-dark.hover,.next-btn-ghost.next-btn-dark:active,.next-btn-ghost.next-btn-dark:focus,.next-btn-ghost.next-btn-dark:hover{color:#fff;background-color:hsla(0,0%,100%,.8);border-color:#fff;text-decoration:none}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark[disabled]{background-color:transparent;border-color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark.disabled.visited,.next-btn-ghost.next-btn-dark.disabled:link,.next-btn-ghost.next-btn-dark.disabled:visited,.next-btn-ghost.next-btn-dark[disabled],.next-btn-ghost.next-btn-dark[disabled].visited,.next-btn-ghost.next-btn-dark[disabled]:link,.next-btn-ghost.next-btn-dark[disabled]:visited{color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled.active,.next-btn-ghost.next-btn-dark.disabled.hover,.next-btn-ghost.next-btn-dark.disabled:active,.next-btn-ghost.next-btn-dark.disabled:focus,.next-btn-ghost.next-btn-dark.disabled:hover,.next-btn-ghost.next-btn-dark[disabled].active,.next-btn-ghost.next-btn-dark[disabled].hover,.next-btn-ghost.next-btn-dark[disabled]:active,.next-btn-ghost.next-btn-dark[disabled]:focus,.next-btn-ghost.next-btn-dark[disabled]:hover{color:hsla(0,0%,100%,.4);background-color:transparent;border-color:hsla(0,0%,100%,.4);text-decoration:none}.next-btn-ghost.next-btn-light{background-color:transparent;border-color:#333}.next-btn-ghost.next-btn-light,.next-btn-ghost.next-btn-light.visited,.next-btn-ghost.next-btn-light:link,.next-btn-ghost.next-btn-light:visited{color:#333}.next-btn-ghost.next-btn-light.active,.next-btn-ghost.next-btn-light.hover,.next-btn-ghost.next-btn-light:active,.next-btn-ghost.next-btn-light:focus,.next-btn-ghost.next-btn-light:hover{color:#999;background-color:rgba(0,0,0,.92);border-color:#333;text-decoration:none}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light[disabled]{background-color:transparent;border-color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light.disabled.visited,.next-btn-ghost.next-btn-light.disabled:link,.next-btn-ghost.next-btn-light.disabled:visited,.next-btn-ghost.next-btn-light[disabled],.next-btn-ghost.next-btn-light[disabled].visited,.next-btn-ghost.next-btn-light[disabled]:link,.next-btn-ghost.next-btn-light[disabled]:visited{color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled.active,.next-btn-ghost.next-btn-light.disabled.hover,.next-btn-ghost.next-btn-light.disabled:active,.next-btn-ghost.next-btn-light.disabled:focus,.next-btn-ghost.next-btn-light.disabled:hover,.next-btn-ghost.next-btn-light[disabled].active,.next-btn-ghost.next-btn-light[disabled].hover,.next-btn-ghost.next-btn-light[disabled]:active,.next-btn-ghost.next-btn-light[disabled]:focus,.next-btn-ghost.next-btn-light[disabled]:hover{color:rgba(0,0,0,.1);background-color:transparent;border-color:rgba(0,0,0,.1);text-decoration:none}.next-btn-group{position:relative;display:inline-block;vertical-align:middle}.next-btn-group>.next-btn{position:relative;float:left;-webkit-box-shadow:none;box-shadow:none}.next-btn-group>.next-btn.active,.next-btn-group>.next-btn:active,.next-btn-group>.next-btn:focus,.next-btn-group>.next-btn:hover{z-index:1}.next-btn-group>.next-btn.disabled,.next-btn-group>.next-btn[disabled]{z-index:0}.next-btn-group .next-btn.next-btn{margin:0 0 0 -1px}.next-btn-group .next-btn:not(:first-child):not(:last-child){border-radius:0}.next-btn-group>.next-btn:first-child{margin:0}.next-btn-group>.next-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group>.next-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group>.next-btn-primary:not(:first-child){border-left-color:hsla(0,0%,100%,.2)}.next-btn-group>.next-btn-primary:not(:first-child):hover{border-left-color:transparent}.next-btn-group>.next-btn-primary:not(:first-child).disabled,.next-btn-group>.next-btn-primary:not(:first-child)[disabled]{border-left-color:#e6e7eb}.next-btn-group[dir=rtl]>.next-btn{float:right}.next-btn-group[dir=rtl] .next-btn.next-btn{margin:0 -1px 0 0}.next-btn-group[dir=rtl]>.next-btn:first-child:not(:last-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group[dir=rtl]>.next-btn:last-child:not(:first-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child){border-right-color:hsla(0,0%,100%,.2)}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child):hover{border-right-color:transparent}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child).disabled,.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child)[disabled]{border-right-color:#e6e7eb}.next-btn.next-small[dir=rtl]{border-radius:3px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl].next-btn-loading{padding-left:8px;padding-right:24px}.next-btn.next-small[dir=rtl].next-btn-loading:after{right:8px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-medium[dir=rtl]{border-radius:3px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl].next-btn-loading{padding-left:12px;padding-right:28px}.next-btn.next-medium[dir=rtl].next-btn-loading:after{right:12px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-large[dir=rtl]{border-radius:3px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl].next-btn-loading{padding-left:16px;padding-right:36px}.next-btn.next-large[dir=rtl].next-btn-loading:after{right:16px;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-large{border-radius:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large.next-btn-loading{padding-left:0;padding-right:20px}.next-btn-text[dir=rtl].next-large.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-medium{border-radius:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-medium.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-small{border-radius:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-small.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-radio-button-large[dir=rtl]>label:first-child{margin-left:-1px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.next-radio-button-large[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large[dir=rtl] .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-wrapper[dir=rtl] .next-radio-label{margin-left:0;margin-right:4px}.next-radio-group[dir=rtl] .next-radio-label{margin-right:4px;margin-left:16px}.next-radio-button[dir=rtl]>label .next-radio-label{margin:0}.next-radio-wrapper{outline:0}.next-radio-wrapper .next-radio{display:inline-block;vertical-align:middle;position:relative;line-height:1}.next-radio-wrapper .next-radio,.next-radio-wrapper .next-radio *,.next-radio-wrapper .next-radio :after,.next-radio-wrapper .next-radio :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-radio-wrapper .next-radio input[type=radio]{opacity:0;position:absolute;vertical-align:middle;top:0;left:0;width:16px;height:16px;margin:0}.next-radio-wrapper .next-radio-inner{display:block;width:16px;height:16px;background:#fff;border-radius:50%;border:1px solid #c4c6cf;-webkit-transition:all .36s ease 0s;transition:all .36s ease 0s;-webkit-box-shadow:none;box-shadow:none}.next-radio-wrapper .next-radio-inner:after{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;border-radius:50%;top:50%;margin-top:-2px;left:50%;margin-left:-2px;background:#fff;content:" ";-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86)}.next-radio-wrapper.checked .next-radio-inner{border-color:#5584ff;background:#5584ff}.next-radio-wrapper.checked .next-radio-inner:after{width:4px;height:4px;font-weight:700;background:#fff;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.next-radio-wrapper.checked.hovered .next-radio-inner,.next-radio-wrapper.checked:hover .next-radio-inner{border-color:transparent}.next-radio-wrapper.disabled input[type=radio]{cursor:not-allowed}.next-radio-wrapper.disabled .next-radio-inner{border-color:#e6e7eb;background:#f7f8fa}.next-radio-wrapper.disabled.checked .next-radio-inner,.next-radio-wrapper.disabled .next-radio-inner.hovered,.next-radio-wrapper.disabled .next-radio-inner:hover{border-color:#e6e7eb}.next-radio-wrapper.disabled.checked .next-radio-inner:after{background:#ccc}.next-radio-wrapper:not(.disabled).focused .next-radio-inner,.next-radio-wrapper:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper:not(.disabled):focus .next-radio-inner,.next-radio-wrapper:not(.disabled):hover .next-radio-inner{border-color:#5584ff;background-color:#dee8ff}.next-radio-wrapper.checked.focused .next-radio-inner,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner{border-color:transparent;background:#3e71f7}.next-radio-wrapper.checked.focused .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner:after{background:#fff}.next-radio-button .next-radio,.next-radio-button input[type=radio]{width:0;height:0}.next-radio-button>label{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1;margin:0 0 0 -1px;border:1px solid #c4c6cf;background-color:#fff;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;vertical-align:middle}.next-radio-button>label .next-radio-label{display:block;color:#333;margin:0;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}.next-radio-button>label.hovered,.next-radio-button>label:focus,.next-radio-button>label:hover{z-index:10;border-color:#a0a2ad;background-color:#f2f3f7}.next-radio-button>label.hovered .next-radio-label,.next-radio-button>label:focus .next-radio-label,.next-radio-button>label:hover .next-radio-label{color:#333}.next-radio-button>label.checked{z-index:11;border-color:#5584ff;background-color:#fff}.next-radio-button>label.checked .next-radio-label{color:#5584ff}.next-radio-button>label.disabled{z-index:0;cursor:not-allowed;border-color:#e6e7eb;background-color:#f7f8fa}.next-radio-button>label.disabled .next-radio-label{color:#ccc}.next-radio-button>label.checked.disabled{z-index:0;border-color:#e6e7eb;background-color:#f2f3f7}.next-radio-button>label.checked.disabled .next-radio-label{color:#ccc}.next-radio-button-large>label{padding:0 8px;height:40px;line-height:40px}.next-radio-button-large>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-large .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium>label{padding:0 8px;height:28px;line-height:28px}.next-radio-button-medium>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-medium>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium .next-radio-label{height:26px;line-height:26px;font-size:12px}.next-radio-button-small>label{padding:0 8px;height:20px;line-height:20px}.next-radio-button-small>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small .next-radio-label{height:18px;line-height:18px;font-size:12px}.next-radio-single-input input[type=radio]{opacity:0;position:absolute;top:0;left:0;margin:0}.next-radio-group{display:inline-block}.next-radio-group .next-radio-label{color:#333;margin-right:16px}.next-radio-group.disabled .next-radio-label{color:#ccc}.next-radio-group-ver .next-radio-wrapper{display:block;margin-bottom:8px}.next-radio-label{margin:0;margin-left:4px;font-size:12px;vertical-align:middle;line-height:1}@-moz-document url-prefix(){.next-radio{margin-top:-1px}@supports ((-webkit-animation:calc(0s)) or (animation:calc(0s))){.next-radio{margin-top:-3px}}}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}@-webkit-keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}@keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}.next-tag>.next-tag-body{overflow:hidden;text-overflow:ellipsis}.next-tag-checkable.next-tag-level-secondary{color:#333;border-color:transparent;background-color:transparent}.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):hover{color:#5584ff}.next-tag-closable.next-tag-level-primary,.next-tag-default.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-primary,.disabled.next-tag-default.next-tag-level-primary,[disabled].next-tag-closable.next-tag-level-primary,[disabled].next-tag-default.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.disabled.next-tag-default.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-checkable.next-tag-level-primary,[disabled].next-tag-checkable.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary.checked{color:#fff;border-color:#5584ff;background-color:#5584ff}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover{color:#fff;border-color:#3e71f7;background-color:#3e71f7}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked>.next-tag-close-btn{color:#fff}.next-tag-default.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-default.next-tag-level-normal,[disabled].next-tag-default.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.disabled.next-tag-default.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-closable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-normal,[disabled].next-tag-closable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:transparent}.disabled.next-tag-closable.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-normal.checked,.next-tag-checkable.next-tag-level-secondary.checked{color:#5584ff;border-color:#5584ff;background-color:transparent}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover{color:#3e71f7;border-color:#3e71f7;background-color:transparent}.next-tag-checkable.next-tag-level-secondary.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-secondary.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-secondary.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-secondary.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-secondary.checked:after{color:#fff}.next-tag-checkable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#c4c6cf;background-color:transparent}.disabled.next-tag-checkable.next-tag-level-normal,[disabled].next-tag-checkable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-normal.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-normal.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-normal.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-normal.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-normal.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-normal.checked:after{color:#fff}.next-tag-closable.next-tag-level-normal:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#c4c6cf;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-closable.next-tag-level-normal:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E626";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:before{background-color:#a0a2ad}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-closable.next-tag-level-normal:disabled:before,[disabled].next-tag-closable.next-tag-level-normal:before{background-color:#e6e7eb}.next-tag-closable.next-tag-level-normal:disabled:after,[disabled].next-tag-closable.next-tag-level-normal:after{color:#fff}.next-tag-group .next-tag-large,.next-tag-group .next-tag-medium{margin-right:8px;margin-bottom:8px}.next-tag-group .next-tag-small{margin-right:4px;margin-bottom:4px}.next-tag{display:inline-block;max-width:100%;vertical-align:middle;border-width:1px;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid;overflow:hidden;white-space:nowrap;-webkit-transition:all .2s cubic-bezier(.23,1,.32,1);transition:all .2s cubic-bezier(.23,1,.32,1);font-size:0;outline:0}.next-tag,.next-tag *,.next-tag :after,.next-tag :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tag>.next-tag-body{position:relative;display:inline-block;height:100%;text-align:center;vertical-align:middle;max-width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.next-tag>.next-tag-body>a{text-decoration:none;color:inherit}.next-tag>.next-tag-body>a:before{content:" ";position:absolute;display:block;top:0;left:0;right:0;bottom:0}.next-tag>.next-tag-body .next-icon{line-height:1;vertical-align:middle}.next-tag>.next-tag-body .next-icon:before{font-size:inherit}.next-tag.next-tag-body-pointer{cursor:pointer}.next-tag.disabled,.next-tag[disabled]{cursor:not-allowed;pointer-events:none}.next-tag-large{height:40px;padding:0;line-height:38px;font-size:0}.next-tag-large>.next-tag-body{font-size:16px;padding:0 16px;min-width:48px}.next-tag-large.next-tag-closable>.next-tag-body{padding:0 0 0 16px}.next-tag-large[dir=rtl].next-tag-closable>.next-tag-body{padding:0 16px 0 0}.next-tag-large>.next-tag-close-btn{margin-left:12px;padding-right:16px}.next-tag-large>.next-tag-close-btn .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tag-large[dir=rtl]>.next-tag-close-btn{margin-right:12px;margin-left:0;padding-right:0;padding-left:16px}.next-tag-medium{height:28px;padding:0;line-height:26px;font-size:0}.next-tag-medium>.next-tag-body{font-size:14px;padding:0 12px;min-width:40px}.next-tag-medium.next-tag-closable>.next-tag-body{padding:0 0 0 12px}.next-tag-medium[dir=rtl].next-tag-closable>.next-tag-body{padding:0 12px 0 0}.next-tag-medium>.next-tag-close-btn{margin-left:8px;padding-right:12px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-medium>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-medium[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:12px}.next-tag-small{height:20px;padding:0;line-height:18px;font-size:0}.next-tag-small>.next-tag-body{font-size:12px;padding:0 8px;min-width:28px}.next-tag-small.next-tag-closable>.next-tag-body{padding:0 0 0 8px}.next-tag-small[dir=rtl].next-tag-closable>.next-tag-body{padding:0 8px 0 0}.next-tag-small>.next-tag-close-btn{margin-left:8px;padding-right:8px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-small>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-small[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:8px}.next-tag-default{cursor:default}.next-tag-closable{position:relative}.next-tag-closable.next-tag-large>.next-tag-body{max-width:calc(100% - 40px)}.next-tag-closable.next-tag-medium>.next-tag-body{max-width:calc(100% - 28px)}.next-tag-closable.next-tag-small>.next-tag-body{max-width:calc(100% - 20px)}.next-tag-closable>.next-tag-close-btn{display:inline-block;vertical-align:middle;height:100%;text-align:center;cursor:pointer}.next-tag-closable.next-tag-level-normal.disabled,.next-tag-closable.next-tag-level-normal[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable{cursor:pointer;position:relative;border-radius:3px}.next-tag-checkable.checked:before{-webkit-animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.checked:after{-webkit-animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86);animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):before{right:-10px;bottom:-10px;width:20px;height:20px}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):after{font-size:8px;line-height:8px;right:0;bottom:0}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):before{right:-14px;bottom:-14px;width:28px;height:28px}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):after{font-size:12px;line-height:12px;right:0;bottom:0}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):before{right:-18px;bottom:-18px;width:36px;height:36px}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):after{font-size:16px;line-height:16px;right:0;bottom:0}.next-tag-checkable.next-tag-level-primary.disabled,.next-tag-checkable.next-tag-level-primary[disabled]{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-secondary.disabled,.next-tag-checkable.next-tag-level-secondary[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-zoom-appear,.next-tag-zoom-enter{-webkit-animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-tag-zoom-leave{-webkit-animation:zoomOut .3s ease-in;animation:zoomOut .3s ease-in;-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-checkbox-wrapper[dir=rtl]{margin-right:8px;margin-left:0}.next-checkbox-wrapper[dir=rtl]:first-child{margin-right:0}.next-checkbox-wrapper[dir=rtl]>.next-checkbox-label{margin-right:4px;margin-left:0}.next-checkbox-wrapper,.next-checkbox-wrapper *,.next-checkbox-wrapper :after,.next-checkbox-wrapper :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-checkbox-wrapper .next-checkbox{display:inline-block;position:relative;line-height:1;vertical-align:middle}.next-checkbox-wrapper input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:16px;height:16px;margin:0}.next-checkbox-wrapper .next-checkbox-inner{display:block;width:16px;height:16px;background:#fff;border-radius:3px;border:1px solid #c4c6cf;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;text-align:left;-webkit-box-shadow:none;box-shadow:none}.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;top:0;opacity:0;line-height:16px;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);color:#fff;left:4px;margin-left:0}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{vertical-align:top;margin-top:0}.next-checkbox-wrapper.checked .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.checked .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);margin-left:0}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.indeterminate .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.indeterminate .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1);margin-left:0}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.disabled input[type=checkbox]{cursor:not-allowed}.next-checkbox-wrapper.disabled .next-checkbox-inner{border-color:#e6e7eb;background:#f7f8fa}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover{border-color:#e6e7eb}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner>.next-icon{color:#ccc;opacity:1}.next-checkbox-wrapper.focused .next-checkbox-inner,.next-checkbox-wrapper.hovered .next-checkbox-inner,.next-checkbox-wrapper:not(.disabled):hover .next-checkbox-inner{border-color:#5584ff;background-color:#dee8ff}.next-checkbox-wrapper.checked.focused .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner{border-color:transparent;background-color:#3e71f7}.next-checkbox-wrapper.checked.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner>.next-icon{color:#fff;opacity:1}.next-checkbox-group .next-checkbox-wrapper{margin-left:8px}.next-checkbox-group .next-checkbox-wrapper:first-child{margin-left:0}.next-checkbox-group-ver .next-checkbox-wrapper{display:block;margin-left:0;margin-right:0;margin-bottom:8px}.next-checkbox-label{font-size:12px;vertical-align:middle;margin:0;margin-left:4px;line-height:1}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-menu[dir=rtl] .next-menu-item-helper{float:left}.next-menu[dir=rtl] .next-menu-item .next-checkbox,.next-menu[dir=rtl] .next-menu-item .next-radio{margin-left:4px;margin-right:0}.next-menu[dir=rtl] .next-menu-hoz-right{float:left}.next-menu[dir=rtl] .next-menu-hoz-icon-arrow.next-icon{left:6px;right:auto}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon{margin-left:0;margin-right:-16px}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon.next-menu-icon-right{right:auto;left:4px}.next-menu[dir=rtl] .next-menu-icon-arrow.next-icon{left:10px;right:auto}.next-menu{position:relative;min-width:100px;padding:8px 0;margin:0;list-style:none;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;background:#fff;line-height:32px;font-size:12px}.next-menu,.next-menu *,.next-menu :after,.next-menu :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-menu:focus,.next-menu :focus{outline:0}.next-menu-embeddable,.next-menu-embeddable .next-menu-item.next-disabled,.next-menu-embeddable .next-menu-item.next-disabled .next-menu-item-text>a{background:initial;border:none}.next-menu-embeddable .next-menu-item-inner{height:100%}.next-menu-content{position:relative}.next-menu-content,.next-menu-sub-menu{padding:0;margin:0;list-style:none}.next-menu-sub-menu.next-expand-enter{overflow:hidden}.next-menu-sub-menu.next-expand-enter-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-sub-menu.next-expand-leave{overflow:hidden}.next-menu-sub-menu.next-expand-leave-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-item{position:relative;padding:0 20px;-webkit-transition:background .2s ease;transition:background .2s ease;color:#333;cursor:pointer}.next-menu-item-helper{float:right;color:#999;font-style:normal;font-size:12px}.next-menu-item .next-checkbox,.next-menu-item .next-radio{margin-right:4px}.next-menu-item.next-selected{color:#333;background-color:#fff}.next-menu-item.next-selected .next-menu-icon-arrow{color:#666}.next-menu-item.next-selected .next-menu-icon-selected{color:#5584ff}.next-menu-item.next-disabled,.next-menu-item.next-disabled .next-menu-item-text>a{color:#ccc;background-color:#fff;cursor:not-allowed}.next-menu-item.next-disabled .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-icon-selected,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-selected{color:#ccc}.next-menu-item:not(.next-disabled).next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover,.next-menu-item:not(.next-disabled).next-selected:focus,.next-menu-item:not(.next-disabled).next-selected:focus:hover,.next-menu-item:not(.next-disabled).next-selected:hover,.next-menu-item:not(.next-disabled):hover{color:#333;background-color:#f2f3f7}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled):hover .next-menu-icon-arrow{color:#333}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled):hover .next-menu-icon-selected{color:#5584ff}.next-menu-item-inner{height:32px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.next-menu-item-text{vertical-align:middle}.next-menu-item-text>a{display:inline-block;text-decoration:none;color:#333}.next-menu-item-text>a:before{position:absolute;background-color:transparent;top:0;left:0;bottom:0;right:0;content:""}.next-menu.next-hoz{padding:0}.next-menu.next-hoz .next-menu-content>.next-menu-item,.next-menu.next-hoz>.next-menu-item{display:inline-block;vertical-align:top}.next-menu.next-hoz .next-menu-content,.next-menu.next-hoz .next-menu-footer,.next-menu.next-hoz .next-menu-header{display:inline-block}.next-menu-hoz-right{float:right}.next-menu-group-label{padding:0 12px;color:#999}.next-menu-divider{margin:8px 12px;border-bottom:1px solid #e6e7eb}.next-menu .next-menu-icon-selected.next-icon{position:absolute;top:0;margin-left:-16px}.next-menu .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-icon-selected.next-icon.next-menu-icon-right{right:4px}.next-menu .next-menu-icon-arrow.next-icon{position:absolute;top:0;right:10px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-icon-arrow.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow.next-icon:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-icon-arrow-down.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:scale(.5) rotate(180deg);-ms-transform:scale(.5) rotate(180deg);transform:scale(.5) rotate(180deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-down.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.next-menu .next-menu-icon-arrow-right.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:scale(.5) rotate(-90deg);-ms-transform:scale(.5) rotate(-90deg);transform:scale(.5) rotate(-90deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-right.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-hoz-icon-arrow.next-icon{position:absolute;top:0;right:6px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-hoz-icon-arrow.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-hoz-icon-arrow.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-hoz-icon-arrow.next-open:before{width:12px;font-size:12px;line-height:inherit}.next-menu.next-context{line-height:24px}.next-menu.next-context .next-menu-item-inner{height:24px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-input{vertical-align:middle;display:inline-table;border-collapse:separate;font-size:0;line-height:1;width:200px;border-spacing:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;border:1px solid #c4c6cf;background-color:#fff}.next-input,.next-input *,.next-input :after,.next-input :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input input{height:100%}.next-input input[type=reset],.next-input input[type=submit]{-webkit-appearance:button;cursor:pointer}.next-input input::-moz-focus-inner{border:0;padding:0}.next-input input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset}.next-input textarea{resize:none}.next-input input,.next-input textarea{width:100%;border:none;outline:none;padding:0;margin:0;font-weight:400;vertical-align:middle;background-color:transparent;color:#333}.next-input input::-ms-clear,.next-input textarea::-ms-clear{display:none}.next-input.next-input-textarea{border-radius:3px;font-size:0}.next-input.next-input-textarea textarea{color:#333;padding:4px 8px;font-size:12px;border-radius:3px}.next-input.next-input-textarea .next-input-control{display:block;width:auto;border-radius:3px}.next-input.next-input-textarea .next-input-len{padding:0 8px 4px;display:block;text-align:right;width:auto}.next-input.next-small{height:20px;border-radius:3px}.next-input.next-small .next-input-label{padding-left:8px;font-size:12px}.next-input.next-small .next-input-inner{font-size:12px}.next-input.next-small .next-input-control{padding-right:4px}.next-input.next-small input{height:18px;line-height:18px \0;padding:0 4px;font-size:12px}.next-input.next-small input::-webkit-input-placeholder{font-size:12px}.next-input.next-small input::-moz-placeholder{font-size:12px}.next-input.next-small input::-ms-input-placeholder{font-size:12px}.next-input.next-small input::placeholder{font-size:12px}.next-input.next-small .next-input-text-field{padding:0 4px;font-size:12px;height:18px;line-height:18px}.next-input.next-small .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-small input{border-radius:3px}.next-input.next-small .next-input-control{border-radius:0 3px 3px 0}.next-input.next-medium{height:28px;border-radius:3px}.next-input.next-medium .next-input-label{padding-left:8px;font-size:12px}.next-input.next-medium .next-input-inner{font-size:12px}.next-input.next-medium .next-input-control{padding-right:8px}.next-input.next-medium input{height:26px;line-height:26px \0;padding:0 8px;font-size:12px}.next-input.next-medium input::-webkit-input-placeholder{font-size:12px}.next-input.next-medium input::-moz-placeholder{font-size:12px}.next-input.next-medium input::-ms-input-placeholder{font-size:12px}.next-input.next-medium input::placeholder{font-size:12px}.next-input.next-medium .next-input-text-field{padding:0 8px;font-size:12px;height:26px;line-height:26px}.next-input.next-medium .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-medium input{border-radius:3px}.next-input.next-medium .next-input-control{border-radius:0 3px 3px 0}.next-input.next-large{height:40px;border-radius:3px}.next-input.next-large .next-input-label{padding-left:12px;font-size:16px}.next-input.next-large .next-input-inner{font-size:16px}.next-input.next-large .next-input-control{padding-right:8px}.next-input.next-large input{height:38px;line-height:38px \0;padding:0 12px;font-size:16px}.next-input.next-large input::-webkit-input-placeholder{font-size:16px}.next-input.next-large input::-moz-placeholder{font-size:16px}.next-input.next-large input::-ms-input-placeholder{font-size:16px}.next-input.next-large input::placeholder{font-size:16px}.next-input.next-large .next-input-text-field{padding:0 12px;font-size:16px;height:38px;line-height:38px}.next-input.next-large .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-input.next-large input{border-radius:3px}.next-input.next-large .next-input-control{border-radius:0 3px 3px 0}.next-input-hint-wrap{color:#999;position:relative}.next-input-hint-wrap .next-input-clear{opacity:0;z-index:1;position:absolute}.next-input-hint-wrap .next-input-hint{opacity:1}.next-input .next-icon-delete-filling:hover{cursor:pointer;color:#666}.next-input.next-focus,.next-input:hover{border-color:#a0a2ad;background-color:#fff}.next-input.next-focus .next-input-clear,.next-input:hover .next-input-clear{opacity:1}.next-input.next-focus .next-input-clear+.next-input-hint,.next-input:hover .next-input-clear+.next-input-hint{opacity:0}.next-input .next-input-clear:focus{opacity:1}.next-input .next-input-clear:focus+.next-input-hint{opacity:0}.next-input.next-focus{border-color:#5584ff;background-color:#fff}.next-input.next-error,.next-input.next-error.next-focus,.next-input.next-error:hover{border-color:#ff3000}.next-input.next-hidden{display:none}.next-input.next-noborder{border:none}.next-input-control .next-input-len{font-size:12px;line-height:12px;color:#999;display:table-cell;width:1px;vertical-align:bottom}.next-input-control .next-input-len.next-error{color:#ff3000}.next-input-control>*{display:table-cell;width:1%;top:0}.next-input-control>:not(:last-child){padding-right:4px}.next-input-control .next-icon{-webkit-transition:all .3s ease-out;transition:all .3s ease-out;color:#999}.next-input-control .next-icon-success-filling{color:#46bc15}.next-input-control .next-icon-loading{color:#4494f9}.next-input-label{color:#666}.next-input input::-moz-placeholder,.next-input textarea::-moz-placeholder{color:#999;opacity:1}.next-input input:-ms-input-placeholder,.next-input textarea:-ms-input-placeholder{color:#999}.next-input input::-webkit-input-placeholder,.next-input textarea::-webkit-input-placeholder{color:#999}.next-input.next-disabled{color:#ccc;cursor:not-allowed}.next-input.next-disabled,.next-input.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled input::-moz-placeholder,.next-input.next-disabled textarea::-moz-placeholder{color:#ccc;opacity:1}.next-input.next-disabled input:-ms-input-placeholder,.next-input.next-disabled textarea:-ms-input-placeholder{color:#ccc}.next-input.next-disabled input::-webkit-input-placeholder,.next-input.next-disabled textarea::-webkit-input-placeholder{color:#ccc}.next-input.next-disabled .next-input-label,.next-input.next-disabled .next-input-len{color:#ccc}.next-input.next-disabled input,.next-input.next-disabled textarea{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa;cursor:not-allowed}.next-input.next-disabled input:hover,.next-input.next-disabled textarea:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled .next-input-hint-wrap{color:#ccc}.next-input.next-disabled .next-input-hint-wrap .next-input-clear{opacity:0}.next-input.next-disabled .next-input-hint-wrap .next-input-hint{opacity:1}.next-input.next-disabled .next-input-hint-wrap .next-icon-delete-filling:hover{cursor:not-allowed;color:#ccc}.next-input.next-disabled .next-icon{color:#ccc}.next-input-control,.next-input-inner,.next-input-label{display:table-cell;width:1px;vertical-align:middle;line-height:1;background-color:transparent;white-space:nowrap}.next-input-group{display:inline-table;border-collapse:separate;border-spacing:0;line-height:0;width:100%}.next-input-group,.next-input-group *,.next-input-group :after,.next-input-group :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input-group-auto-width{width:100%;border-radius:0!important}.next-input-group>.next-input:first-child.next-large,.next-input-group>.next-input:first-child.next-medium,.next-input-group>.next-input:first-child.next-small{border-top-left-radius:3px!important;border-bottom-left-radius:3px!important}.next-input-group>.next-input:last-child.next-large,.next-input-group>.next-input:last-child.next-medium,.next-input-group>.next-input:last-child.next-small{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.next-input-group-addon{width:1px;display:table-cell;vertical-align:middle;white-space:nowrap}.next-input-group-addon:first-child,.next-input-group-addon:first-child>*{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group-addon:last-child,.next-input-group-addon:last-child>*{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group-text{color:#999;background-color:#f2f3f7;text-align:center;border:1px solid #c4c6cf;padding:0 8px}.next-input-group-text:first-child{border-right-width:0}.next-input-group-text:last-child{border-left-width:0}.next-input-group-text.next-disabled{color:#ccc;cursor:not-allowed}.next-input-group-text.next-disabled,.next-input-group-text.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input-group-text.next-medium,.next-input-group-text.next-small{font-size:12px;border-radius:3px}.next-input-group-text.next-large{font-size:16px;border-radius:3px}.next-input[dir=rtl].next-small .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-small .next-input-control{padding-right:0;padding-left:4px}.next-input[dir=rtl].next-medium .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-medium .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-large .next-input-label{padding-left:0;padding-right:12px}.next-input[dir=rtl].next-large .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-input-textarea .next-input-len{text-align:left}.next-input[dir=rtl] .next-input-control>:not(:last-child){padding-left:4px;padding-right:0}.next-input-group[dir=rtl] .next-input-group-addon:first-child{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-small{border-bottom-right-radius:3px!important;border-top-right-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-small{border-bottom-left-radius:3px!important;border-top-left-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-text:first-child{border-right-width:1px;border-left:0}.next-input-group[dir=rtl] .next-input-group-text:last-child{border-left-width:1px;border-right:0}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-select{display:inline-block;font-size:0;vertical-align:middle}.next-select,.next-select *,.next-select :after,.next-select :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-select-trigger{min-width:100px;outline:0;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-trigger .next-input-label{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-select-values{display:block;width:100%;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow:hidden}.next-select-trigger .next-select-values>em{font-style:inherit}.next-select-trigger .next-select-values input{padding-left:0;padding-right:0}.next-select-trigger .next-input-control{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-input-control>*{display:inline-block;width:auto}.next-select-trigger .next-input-control>.next-select-arrow{padding-right:0}.next-select-trigger .next-input.next-disabled em{color:#ccc}.next-select-trigger .next-input.next-disabled .next-select-arrow{cursor:not-allowed}.next-select-trigger .next-select-clear{display:none}.next-select-trigger.next-has-clear:hover .next-select-clear{display:inline-block}.next-select-trigger.next-has-clear:hover .next-select-arrow{display:none}.next-select .next-select-inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;min-width:100px;outline:0;color:#333}.next-select .next-select-inner .next-tag{line-height:1;margin-right:4px;margin-bottom:3px;padding-left:4px;padding-right:4px}.next-select-trigger-search{position:relative;display:inline-block;vertical-align:top;overflow:hidden;width:100%;max-width:100%}.next-select-trigger-search>input,.next-select-trigger-search>span{display:block;font-size:inherit;font-family:inherit;letter-spacing:inherit;white-space:nowrap;overflow:hidden}.next-select-trigger-search input{position:absolute;background-color:transparent;width:100%;height:100%!important;z-index:1;left:0;border:0;outline:0;margin:0;padding:0;cursor:inherit}.next-select-trigger-search>span{position:relative;visibility:hidden;white-space:pre;max-width:100%;z-index:-1}.next-select-single.next-no-search{cursor:pointer}.next-select-single.next-has-search.next-active .next-select-values>em{display:none}.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{width:1px;opacity:0;filter:alpha(opacity=0)}.next-select-single.next-inactive .next-select-trigger-search input,.next-select-single.next-no-search .next-select-trigger-search input{color:transparent}.next-select-single .next-select-values{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.next-select-single .next-select-values>em{vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.next-select-multiple .next-select-values,.next-select-tag .next-select-values{margin-bottom:-3px;height:auto!important}.next-select-multiple .next-select-trigger-search,.next-select-tag .next-select-trigger-search{margin-bottom:3px}.next-select-multiple .next-tag+.next-select-trigger-search,.next-select-tag .next-tag+.next-select-trigger-search{width:auto;min-width:1px}.next-select-multiple .next-input,.next-select-tag .next-input{height:auto;-webkit-box-align:start;-ms-flex-align:start;align-items:start}.next-select-multiple.next-small .next-select-values,.next-select-tag.next-small .next-select-values{min-height:18px;padding-top:2px;padding-bottom:2px;line-height:14px}.next-select-multiple.next-small .next-tag,.next-select-tag.next-small .next-tag{border:0;padding-top:0;padding-bottom:0;height:14px}.next-select-multiple.next-small .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-close-btn,.next-select-tag.next-small .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-close-btn{line-height:14px}.next-select-multiple.next-small .next-input-control,.next-select-multiple.next-small .next-input-label,.next-select-tag.next-small .next-input-control,.next-select-tag.next-small .next-input-label{line-height:18px}.next-select-multiple.next-medium .next-select-values,.next-select-tag.next-medium .next-select-values{min-height:26px;padding-top:3px;padding-bottom:3px;line-height:20px}.next-select-multiple.next-medium .next-tag,.next-select-tag.next-medium .next-tag{padding-top:1px;padding-bottom:1px;height:20px}.next-select-multiple.next-medium .next-tag .next-tag-body,.next-select-multiple.next-medium .next-tag .next-tag-close-btn,.next-select-tag.next-medium .next-tag .next-tag-body,.next-select-tag.next-medium .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-medium .next-input-control,.next-select-multiple.next-medium .next-input-label,.next-select-tag.next-medium .next-input-control,.next-select-tag.next-medium .next-input-label{line-height:26px}.next-select-multiple.next-large .next-select-values,.next-select-tag.next-large .next-select-values{min-height:38px;padding-top:7px;padding-bottom:7px;line-height:24px}.next-select-multiple.next-large .next-tag,.next-select-tag.next-large .next-tag{padding-top:3px;padding-bottom:3px;height:24px}.next-select-multiple.next-large .next-tag .next-tag-body,.next-select-multiple.next-large .next-tag .next-tag-close-btn,.next-select-tag.next-large .next-tag .next-tag-body,.next-select-tag.next-large .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-large .next-input-control,.next-select-multiple.next-large .next-input-label,.next-select-tag.next-large .next-input-control,.next-select-tag.next-large .next-input-label{line-height:38px}.next-select.next-no-search .next-select-trigger-search input{color:transparent}.next-select-auto-complete{width:160px}.next-select-auto-complete .next-input{width:100%}.next-select-auto-complete .next-input .next-input-hint-wrap{padding-right:1px}.next-select-auto-complete .next-input .next-select-arrow{padding-left:0}.next-select.next-active .next-select-arrow{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-select-arrow{cursor:pointer;width:auto!important;text-align:center;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-menu-wrapper{max-height:260px;overflow:auto;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none}.next-select-menu-wrapper .next-select-menu{max-height:none;border:none}.next-select-menu{max-height:260px;overflow:auto}.next-select-menu .next-select-menu-empty-content{padding-left:8px;padding-right:8px;color:#999}.next-select-menu.next-select-auto-complete-menu.next-select-menu-empty{display:none}.next-select-menu .next-menu-item-text .next-icon{vertical-align:middle}.next-select-all{display:block;cursor:pointer;padding:0 8px;margin:0 12px 8px;border-bottom:1px solid #dcdee3}.next-select-all:hover{color:#3e71f7}.next-select-all .next-menu-icon-selected.next-icon{display:inline-block!important;top:auto;color:#5584ff}.next-select-highlight{color:#5584ff;font-size:12px}.next-select-in-ie.next-select-trigger .next-select-values{overflow:visible}.next-select-in-ie.next-select-trigger .next-input-control,.next-select-in-ie.next-select-trigger .next-input-label{width:1px}.next-select-in-ie.next-select-trigger .next-input-control>*{display:table-cell;width:1%}.next-select-in-ie.next-select-trigger .next-select-arrow{display:table-cell}.next-select-in-ie.next-select-trigger .next-select-clear{display:none}.next-select-in-ie.next-select-trigger.next-select-multiple .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-tag .next-select-inner{vertical-align:top}.next-select-in-ie.next-select-trigger .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-single .next-select-values{display:inline-table}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-small .next-select-values{line-height:20px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-medium .next-select-values{line-height:28px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-large .next-select-values{line-height:40px}.next-select-in-ie.next-select-trigger .next-select-trigger-search>span{max-width:100px}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values{position:relative}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values>em{position:absolute;display:inline-block;height:100%;line-height:1;vertical-align:middle;overflow:hidden;left:4px;right:0;top:30%}.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{filter:alpha(opacity=0);font-size:0}.next-select-in-ie.next-select-trigger.next-no-search .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-trigger-search input{color:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-search-simple[dir=rtl].next-large .next-search-icon{margin-left:12px;margin-right:0}.next-search-simple[dir=rtl].next-medium .next-search-icon{margin-left:8px;margin-right:0}.next-search-simple[dir=rtl].next-normal .next-search-left .next-search-left-addon{border-left:1px solid #c4c6cf;border-right:none}.next-search-simple[dir=rtl].next-dark .next-search-left{border-color:#c4c6cf}.next-search-simple[dir=rtl].next-dark .next-search-left .next-search-left-addon{border-right:1px solid #c4c6cf}.next-search-simple[dir=rtl].next-dark:hover .next-search-left{border-color:#c4c6cf}.next-search-simple[dir=rtl].next-dark .next-search-icon{color:#999}.next-search-simple[dir=rtl].next-dark .next-search-icon:hover{color:#666}.next-search-normal[dir=rtl] .next-search-left{border-left:none;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.next-search-normal[dir=rtl] .next-search-btn.next-btn{border-radius:3px 0 0 3px!important}.next-search-normal[dir=rtl] .next-input{border-radius:0 3px 3px 0}.next-search-normal[dir=rtl].next-primary .next-input{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:1px;border-bottom-right-radius:1px}.next-search-normal[dir=rtl].next-primary .next-search-left .next-search-left-addon{border-left:1px solid #e6e7eb;border-right:none}.next-search-normal[dir=rtl].next-secondary .next-input{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:1px;border-bottom-right-radius:1px}.next-search-normal[dir=rtl].next-secondary .next-search-left .next-search-left-addon{border-left:1px solid #e6e7eb;border-right:none}.next-search-normal[dir=rtl].next-normal .next-input{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:1px;border-bottom-right-radius:1px}.next-search-normal[dir=rtl].next-normal .next-search-left .next-search-left-addon{border-left:1px solid #e6e7eb;border-right:none}.next-search-normal[dir=rtl].next-dark .next-search-left .next-search-left-addon{border-left:1px solid #5584ff;border-right:none}.next-search{width:100%;display:inline-block}.next-search,.next-search *,.next-search :after,.next-search :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-search .next-input,.next-search .next-select{border:none}.next-search .next-select .next-input,.next-search .next-select .next-input .next-input-text-field{height:auto}.next-search .next-search-left{border-style:solid;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.next-search .next-search-left-addon .next-input,.next-search .next-search-left-addon .next-select-trigger-search{min-height:100%;border-bottom-right-radius:0;border-top-right-radius:0}.next-search .next-search-left-addon .next-select-values{line-height:1}.next-search .next-search-left-addon+.next-search-input .next-input{border-bottom-left-radius:0;border-top-left-radius:0}.next-search .next-search-input{width:100%}.next-search .next-search-btn{-webkit-box-shadow:none;box-shadow:none}.next-search-normal{width:600px}.next-search-normal .next-search-left{border-top-left-radius:3px;border-bottom-left-radius:3px}.next-search-normal .next-input{border-radius:3px 0 0 3px}.next-search-normal .next-btn{border-radius:0 3px 3px 0}.next-search-normal.next-primary .next-search-left{border-color:#5584ff}.next-search-normal.next-primary .next-search-left .next-search-left-addon{border-right:1px solid #e6e7eb}.next-search-normal.next-primary:hover .next-btn,.next-search-normal.next-primary:hover .next-search-left{border-color:#5584ff}.next-search-normal.next-primary .next-search-btn{background:#5584ff;border-color:#5584ff;color:#fff}.next-search-normal.next-primary .next-search-btn:hover{background:#3e71f7;border-color:#5584ff;color:#fff}.next-search-normal.next-primary .next-search-btn .next-icon,.next-search-normal.next-primary .next-search-btn .next-icon:hover{color:#fff}.next-search-normal.next-primary.next-large{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-primary.next-large .next-search-btn,.next-search-normal.next-primary.next-large .next-search-left{border-width:2px;height:60px}.next-search-normal.next-primary.next-large .next-search-input{height:56px;overflow-y:hidden}.next-search-normal.next-primary.next-large .next-search-input input{height:56px;line-height:56px \0}.next-search-normal.next-primary.next-large .next-select{height:56px}.next-search-normal.next-primary.next-large .next-search-btn{font-size:16px}.next-search-normal.next-primary.next-large .next-search-btn .next-icon:before{width:24px;font-size:24px;line-height:inherit}.next-search-normal.next-primary.next-large .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-primary.next-medium{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-primary.next-medium .next-search-btn,.next-search-normal.next-primary.next-medium .next-search-left{border-width:2px;height:40px}.next-search-normal.next-primary.next-medium .next-search-input{height:36px;overflow-y:hidden}.next-search-normal.next-primary.next-medium .next-search-input input{height:36px;line-height:36px \0}.next-search-normal.next-primary.next-medium .next-select{height:36px}.next-search-normal.next-primary.next-medium .next-search-btn{font-size:16px}.next-search-normal.next-primary.next-medium .next-search-btn .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-search-normal.next-primary.next-medium .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-primary .next-input{border-top-left-radius:1px;border-bottom-left-radius:1px}.next-search-normal.next-secondary .next-search-left{border-color:#c4c6cf}.next-search-normal.next-secondary .next-search-left .next-search-left-addon{border-right:1px solid #e6e7eb}.next-search-normal.next-secondary:hover .next-btn,.next-search-normal.next-secondary:hover .next-search-left{border-color:#5584ff}.next-search-normal.next-secondary .next-search-btn{background:#5584ff;border-color:#5584ff;color:#fff}.next-search-normal.next-secondary .next-search-btn:hover{background:#3e71f7;border-color:#5584ff;color:#fff}.next-search-normal.next-secondary .next-search-btn .next-icon,.next-search-normal.next-secondary .next-search-btn .next-icon:hover{color:#fff}.next-search-normal.next-secondary.next-large{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-secondary.next-large .next-search-btn,.next-search-normal.next-secondary.next-large .next-search-left{border-width:1px;height:60px}.next-search-normal.next-secondary.next-large .next-search-input{height:58px;overflow-y:hidden}.next-search-normal.next-secondary.next-large .next-search-input input{height:58px;line-height:58px \0}.next-search-normal.next-secondary.next-large .next-select{height:58px}.next-search-normal.next-secondary.next-large .next-search-btn{font-size:16px}.next-search-normal.next-secondary.next-large .next-search-btn .next-icon:before{width:24px;font-size:24px;line-height:inherit}.next-search-normal.next-secondary.next-large .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-secondary.next-medium{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-secondary.next-medium .next-search-btn,.next-search-normal.next-secondary.next-medium .next-search-left{border-width:1px;height:40px}.next-search-normal.next-secondary.next-medium .next-search-input{height:38px;overflow-y:hidden}.next-search-normal.next-secondary.next-medium .next-search-input input{height:38px;line-height:38px \0}.next-search-normal.next-secondary.next-medium .next-select{height:38px}.next-search-normal.next-secondary.next-medium .next-search-btn{font-size:16px}.next-search-normal.next-secondary.next-medium .next-search-btn .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-search-normal.next-secondary.next-medium .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-secondary .next-input{border-top-left-radius:2px;border-bottom-left-radius:2px}.next-search-normal.next-normal .next-search-left{border-color:#c4c6cf}.next-search-normal.next-normal .next-search-left .next-search-left-addon{border-right:1px solid #e6e7eb}.next-search-normal.next-normal:hover .next-btn,.next-search-normal.next-normal:hover .next-search-left{border-color:#a0a2ad}.next-search-normal.next-normal .next-search-btn{background:#f7f8fa;border-color:#c4c6cf;color:#666}.next-search-normal.next-normal .next-search-btn:hover{background:#ebecf0;border-color:#a0a2ad;color:#333}.next-search-normal.next-normal .next-search-btn .next-icon{color:#666}.next-search-normal.next-normal .next-search-btn .next-icon:hover{color:#333}.next-search-normal.next-normal.next-large{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-normal.next-large .next-search-btn,.next-search-normal.next-normal.next-large .next-search-left{border-width:1px;height:60px}.next-search-normal.next-normal.next-large .next-search-input{height:58px;overflow-y:hidden}.next-search-normal.next-normal.next-large .next-search-input input{height:58px;line-height:58px \0}.next-search-normal.next-normal.next-large .next-select{height:58px}.next-search-normal.next-normal.next-large .next-search-btn{font-size:16px}.next-search-normal.next-normal.next-large .next-search-btn .next-icon:before{width:24px;font-size:24px;line-height:inherit}.next-search-normal.next-normal.next-large .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-normal.next-medium{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-normal.next-medium .next-search-btn,.next-search-normal.next-normal.next-medium .next-search-left{border-width:1px;height:40px}.next-search-normal.next-normal.next-medium .next-search-input{height:38px;overflow-y:hidden}.next-search-normal.next-normal.next-medium .next-search-input input{height:38px;line-height:38px \0}.next-search-normal.next-normal.next-medium .next-select{height:38px}.next-search-normal.next-normal.next-medium .next-search-btn{font-size:16px}.next-search-normal.next-normal.next-medium .next-search-btn .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-search-normal.next-normal.next-medium .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-normal .next-input{border-top-left-radius:2px;border-bottom-left-radius:2px}.next-search-normal.next-dark .next-search-left{border-color:#5584ff}.next-search-normal.next-dark .next-search-left .next-search-left-addon{border-right:1px solid #5584ff}.next-search-normal.next-dark:hover .next-btn,.next-search-normal.next-dark:hover .next-search-left{border-color:#5584ff}.next-search-normal.next-dark .next-search-btn{background:#5584ff;border-color:#5584ff;color:#fff}.next-search-normal.next-dark .next-search-btn:hover{background:#3e71f7;border-color:#5584ff;color:#fff}.next-search-normal.next-dark .next-search-btn .next-icon,.next-search-normal.next-dark .next-search-btn .next-icon:hover,.next-search-normal.next-dark .next-select-inner,.next-search-normal.next-dark input{color:#fff}.next-search-normal.next-dark .next-input,.next-search-normal.next-dark .next-select{background:hsla(0,0%,100%,0)}.next-search-normal.next-dark.next-large{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-dark.next-large .next-search-btn,.next-search-normal.next-dark.next-large .next-search-left{border-width:1px;height:60px}.next-search-normal.next-dark.next-large .next-search-input{height:58px;overflow-y:hidden}.next-search-normal.next-dark.next-large .next-search-input input{height:58px;line-height:58px \0}.next-search-normal.next-dark.next-large .next-select{height:58px}.next-search-normal.next-dark.next-large .next-search-btn{font-size:16px}.next-search-normal.next-dark.next-large .next-search-btn .next-icon:before{width:24px;font-size:24px;line-height:inherit}.next-search-normal.next-dark.next-large .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-dark.next-medium{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-dark.next-medium .next-search-btn,.next-search-normal.next-dark.next-medium .next-search-left{border-width:1px;height:40px}.next-search-normal.next-dark.next-medium .next-search-input{height:38px;overflow-y:hidden}.next-search-normal.next-dark.next-medium .next-search-input input{height:38px;line-height:38px \0}.next-search-normal.next-dark.next-medium .next-select{height:38px}.next-search-normal.next-dark.next-medium .next-search-btn{font-size:16px}.next-search-normal.next-dark.next-medium .next-search-btn .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-search-normal.next-dark.next-medium .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal:not([dir=rtl]) .next-search-left{border-right:none}.next-search-simple{width:300px;-webkit-box-shadow:none;box-shadow:none;border-radius:3px}.next-search-simple .next-search-icon{cursor:pointer;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.next-search-simple .next-input,.next-search-simple .next-search-left{border-radius:3px}.next-search-simple.next-large .next-search-icon{margin-right:12px}.next-search-simple.next-medium .next-search-icon{margin-right:8px}.next-search-simple.next-normal .next-search-left{border-color:#c4c6cf}.next-search-simple.next-normal .next-search-left .next-search-left-addon{border-right:1px solid #c4c6cf}.next-search-simple.next-normal:hover .next-search-left{border-color:#a0a2ad}.next-search-simple.next-normal .next-search-icon{color:#999}.next-search-simple.next-normal .next-search-icon:hover{color:#666}.next-search-simple.next-normal .next-search-left{border-width:1px}.next-search-simple.next-normal.next-large .next-search-icon:before{width:20px;font-size:20px;line-height:inherit}.next-search-simple.next-normal.next-medium .next-search-icon:before{width:12px;font-size:12px;line-height:inherit}.next-search-simple.next-dark .next-search-left{border-color:#c4c6cf}.next-search-simple.next-dark .next-search-left .next-search-left-addon{border-right:1px solid #c4c6cf}.next-search-simple.next-dark:hover .next-search-left{border-color:#c4c6cf}.next-search-simple.next-dark .next-search-icon{color:#999}.next-search-simple.next-dark .next-search-icon:hover{color:#666}.next-search-simple.next-dark .next-select-inner,.next-search-simple.next-dark input{color:#fff}.next-search-simple.next-dark .next-input,.next-search-simple.next-dark .next-select{background:hsla(0,0%,100%,0)}.next-search-simple.next-dark .next-search-left{border-width:1px}.next-search-simple.next-dark.next-large .next-search-icon:before{width:20px;font-size:20px;line-height:inherit}.next-search-simple.next-dark.next-medium .next-search-icon:before{width:12px;font-size:12px;line-height:inherit}.next-search-simple .next-select.next-large{height:38px}.next-search-simple .next-select.next-medium{height:26px} \ No newline at end of file diff --git a/demos/search/deps.json b/demos/search/deps.json new file mode 100644 index 0000000000..0dc6218992 --- /dev/null +++ b/demos/search/deps.json @@ -0,0 +1 @@ +["input","select","button","icon","field","demo-helper"] \ No newline at end of file diff --git a/demos/search/index.html b/demos/search/index.html new file mode 100644 index 0000000000..3847b898ae --- /dev/null +++ b/demos/search/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/select/build/index.css b/demos/select/build/index.css new file mode 100644 index 0000000000..a05a6a9389 --- /dev/null +++ b/demos/select/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-overlay-wrapper .next-overlay-inner{z-index:1001}.next-overlay-wrapper .next-overlay-backdrop{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;background:#000;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0}.next-overlay-wrapper.opened .next-overlay-backdrop{opacity:.2}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-radio-button-large[dir=rtl]>label:first-child{margin-left:-1px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.next-radio-button-large[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large[dir=rtl] .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-wrapper[dir=rtl] .next-radio-label{margin-left:0;margin-right:4px}.next-radio-group[dir=rtl] .next-radio-label{margin-right:4px;margin-left:16px}.next-radio-button[dir=rtl]>label .next-radio-label{margin:0}.next-radio-wrapper{outline:0}.next-radio-wrapper .next-radio{display:inline-block;vertical-align:middle;position:relative;line-height:1}.next-radio-wrapper .next-radio,.next-radio-wrapper .next-radio *,.next-radio-wrapper .next-radio :after,.next-radio-wrapper .next-radio :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-radio-wrapper .next-radio input[type=radio]{opacity:0;position:absolute;vertical-align:middle;top:0;left:0;width:16px;height:16px;margin:0}.next-radio-wrapper .next-radio-inner{display:block;width:16px;height:16px;background:#fff;border-radius:50%;border:1px solid #c4c6cf;-webkit-transition:all .36s ease 0s;transition:all .36s ease 0s;-webkit-box-shadow:none;box-shadow:none}.next-radio-wrapper .next-radio-inner:after{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;border-radius:50%;top:50%;margin-top:-2px;left:50%;margin-left:-2px;background:#fff;content:" ";-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86)}.next-radio-wrapper.checked .next-radio-inner{border-color:#5584ff;background:#5584ff}.next-radio-wrapper.checked .next-radio-inner:after{width:4px;height:4px;font-weight:700;background:#fff;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.next-radio-wrapper.checked.hovered .next-radio-inner,.next-radio-wrapper.checked:hover .next-radio-inner{border-color:transparent}.next-radio-wrapper.disabled input[type=radio]{cursor:not-allowed}.next-radio-wrapper.disabled .next-radio-inner{border-color:#e6e7eb;background:#f7f8fa}.next-radio-wrapper.disabled.checked .next-radio-inner,.next-radio-wrapper.disabled .next-radio-inner.hovered,.next-radio-wrapper.disabled .next-radio-inner:hover{border-color:#e6e7eb}.next-radio-wrapper.disabled.checked .next-radio-inner:after{background:#ccc}.next-radio-wrapper:not(.disabled).focused .next-radio-inner,.next-radio-wrapper:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper:not(.disabled):focus .next-radio-inner,.next-radio-wrapper:not(.disabled):hover .next-radio-inner{border-color:#5584ff;background-color:#dee8ff}.next-radio-wrapper.checked.focused .next-radio-inner,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner{border-color:transparent;background:#3e71f7}.next-radio-wrapper.checked.focused .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner:after{background:#fff}.next-radio-button .next-radio,.next-radio-button input[type=radio]{width:0;height:0}.next-radio-button>label{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1;margin:0 0 0 -1px;border:1px solid #c4c6cf;background-color:#fff;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;vertical-align:middle}.next-radio-button>label .next-radio-label{display:block;color:#333;margin:0;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}.next-radio-button>label.hovered,.next-radio-button>label:focus,.next-radio-button>label:hover{z-index:10;border-color:#a0a2ad;background-color:#f2f3f7}.next-radio-button>label.hovered .next-radio-label,.next-radio-button>label:focus .next-radio-label,.next-radio-button>label:hover .next-radio-label{color:#333}.next-radio-button>label.checked{z-index:11;border-color:#5584ff;background-color:#fff}.next-radio-button>label.checked .next-radio-label{color:#5584ff}.next-radio-button>label.disabled{z-index:0;cursor:not-allowed;border-color:#e6e7eb;background-color:#f7f8fa}.next-radio-button>label.disabled .next-radio-label{color:#ccc}.next-radio-button>label.checked.disabled{z-index:0;border-color:#e6e7eb;background-color:#f2f3f7}.next-radio-button>label.checked.disabled .next-radio-label{color:#ccc}.next-radio-button-large>label{padding:0 8px;height:40px;line-height:40px}.next-radio-button-large>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-large .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium>label{padding:0 8px;height:28px;line-height:28px}.next-radio-button-medium>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-medium>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium .next-radio-label{height:26px;line-height:26px;font-size:12px}.next-radio-button-small>label{padding:0 8px;height:20px;line-height:20px}.next-radio-button-small>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small .next-radio-label{height:18px;line-height:18px;font-size:12px}.next-radio-single-input input[type=radio]{opacity:0;position:absolute;top:0;left:0;margin:0}.next-radio-group{display:inline-block}.next-radio-group .next-radio-label{color:#333;margin-right:16px}.next-radio-group.disabled .next-radio-label{color:#ccc}.next-radio-group-ver .next-radio-wrapper{display:block;margin-bottom:8px}.next-radio-label{margin:0;margin-left:4px;font-size:12px;vertical-align:middle;line-height:1}@-moz-document url-prefix(){.next-radio{margin-top:-1px}@supports ((-webkit-animation:calc(0s)) or (animation:calc(0s))){.next-radio{margin-top:-3px}}}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}@-webkit-keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}@keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}.next-tag>.next-tag-body{overflow:hidden;text-overflow:ellipsis}.next-tag-checkable.next-tag-level-secondary{color:#333;border-color:transparent;background-color:transparent}.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):hover{color:#5584ff}.next-tag-closable.next-tag-level-primary,.next-tag-default.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-primary,.disabled.next-tag-default.next-tag-level-primary,[disabled].next-tag-closable.next-tag-level-primary,[disabled].next-tag-default.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.disabled.next-tag-default.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-checkable.next-tag-level-primary,[disabled].next-tag-checkable.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary.checked{color:#fff;border-color:#5584ff;background-color:#5584ff}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover{color:#fff;border-color:#3e71f7;background-color:#3e71f7}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked>.next-tag-close-btn{color:#fff}.next-tag-default.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-default.next-tag-level-normal,[disabled].next-tag-default.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.disabled.next-tag-default.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-closable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-normal,[disabled].next-tag-closable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:transparent}.disabled.next-tag-closable.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-normal.checked,.next-tag-checkable.next-tag-level-secondary.checked{color:#5584ff;border-color:#5584ff;background-color:transparent}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover{color:#3e71f7;border-color:#3e71f7;background-color:transparent}.next-tag-checkable.next-tag-level-secondary.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-secondary.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-secondary.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-secondary.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-secondary.checked:after{color:#fff}.next-tag-checkable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#c4c6cf;background-color:transparent}.disabled.next-tag-checkable.next-tag-level-normal,[disabled].next-tag-checkable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-normal.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-normal.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-normal.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-normal.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-normal.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-normal.checked:after{color:#fff}.next-tag-closable.next-tag-level-normal:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#c4c6cf;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-closable.next-tag-level-normal:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E626";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:before{background-color:#a0a2ad}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-closable.next-tag-level-normal:disabled:before,[disabled].next-tag-closable.next-tag-level-normal:before{background-color:#e6e7eb}.next-tag-closable.next-tag-level-normal:disabled:after,[disabled].next-tag-closable.next-tag-level-normal:after{color:#fff}.next-tag-group .next-tag-large,.next-tag-group .next-tag-medium{margin-right:8px;margin-bottom:8px}.next-tag-group .next-tag-small{margin-right:4px;margin-bottom:4px}.next-tag{display:inline-block;max-width:100%;vertical-align:middle;border-width:1px;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid;overflow:hidden;white-space:nowrap;-webkit-transition:all .2s cubic-bezier(.23,1,.32,1);transition:all .2s cubic-bezier(.23,1,.32,1);font-size:0;outline:0}.next-tag,.next-tag *,.next-tag :after,.next-tag :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tag>.next-tag-body{position:relative;display:inline-block;height:100%;text-align:center;vertical-align:middle;max-width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.next-tag>.next-tag-body>a{text-decoration:none;color:inherit}.next-tag>.next-tag-body>a:before{content:" ";position:absolute;display:block;top:0;left:0;right:0;bottom:0}.next-tag>.next-tag-body .next-icon{line-height:1;vertical-align:middle}.next-tag>.next-tag-body .next-icon:before{font-size:inherit}.next-tag.next-tag-body-pointer{cursor:pointer}.next-tag.disabled,.next-tag[disabled]{cursor:not-allowed;pointer-events:none}.next-tag-large{height:40px;padding:0;line-height:38px;font-size:0}.next-tag-large>.next-tag-body{font-size:16px;padding:0 16px;min-width:48px}.next-tag-large.next-tag-closable>.next-tag-body{padding:0 0 0 16px}.next-tag-large[dir=rtl].next-tag-closable>.next-tag-body{padding:0 16px 0 0}.next-tag-large>.next-tag-close-btn{margin-left:12px;padding-right:16px}.next-tag-large>.next-tag-close-btn .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tag-large[dir=rtl]>.next-tag-close-btn{margin-right:12px;margin-left:0;padding-right:0;padding-left:16px}.next-tag-medium{height:28px;padding:0;line-height:26px;font-size:0}.next-tag-medium>.next-tag-body{font-size:14px;padding:0 12px;min-width:40px}.next-tag-medium.next-tag-closable>.next-tag-body{padding:0 0 0 12px}.next-tag-medium[dir=rtl].next-tag-closable>.next-tag-body{padding:0 12px 0 0}.next-tag-medium>.next-tag-close-btn{margin-left:8px;padding-right:12px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-medium>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-medium[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:12px}.next-tag-small{height:20px;padding:0;line-height:18px;font-size:0}.next-tag-small>.next-tag-body{font-size:12px;padding:0 8px;min-width:28px}.next-tag-small.next-tag-closable>.next-tag-body{padding:0 0 0 8px}.next-tag-small[dir=rtl].next-tag-closable>.next-tag-body{padding:0 8px 0 0}.next-tag-small>.next-tag-close-btn{margin-left:8px;padding-right:8px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-small>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-small[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:8px}.next-tag-default{cursor:default}.next-tag-closable{position:relative}.next-tag-closable.next-tag-large>.next-tag-body{max-width:calc(100% - 40px)}.next-tag-closable.next-tag-medium>.next-tag-body{max-width:calc(100% - 28px)}.next-tag-closable.next-tag-small>.next-tag-body{max-width:calc(100% - 20px)}.next-tag-closable>.next-tag-close-btn{display:inline-block;vertical-align:middle;height:100%;text-align:center;cursor:pointer}.next-tag-closable.next-tag-level-normal.disabled,.next-tag-closable.next-tag-level-normal[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable{cursor:pointer;position:relative;border-radius:3px}.next-tag-checkable.checked:before{-webkit-animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.checked:after{-webkit-animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86);animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):before{right:-10px;bottom:-10px;width:20px;height:20px}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):after{font-size:8px;line-height:8px;right:0;bottom:0}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):before{right:-14px;bottom:-14px;width:28px;height:28px}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):after{font-size:12px;line-height:12px;right:0;bottom:0}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):before{right:-18px;bottom:-18px;width:36px;height:36px}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):after{font-size:16px;line-height:16px;right:0;bottom:0}.next-tag-checkable.next-tag-level-primary.disabled,.next-tag-checkable.next-tag-level-primary[disabled]{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-secondary.disabled,.next-tag-checkable.next-tag-level-secondary[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-zoom-appear,.next-tag-zoom-enter{-webkit-animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-tag-zoom-leave{-webkit-animation:zoomOut .3s ease-in;animation:zoomOut .3s ease-in;-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-checkbox-wrapper[dir=rtl]{margin-right:8px;margin-left:0}.next-checkbox-wrapper[dir=rtl]:first-child{margin-right:0}.next-checkbox-wrapper[dir=rtl]>.next-checkbox-label{margin-right:4px;margin-left:0}.next-checkbox-wrapper,.next-checkbox-wrapper *,.next-checkbox-wrapper :after,.next-checkbox-wrapper :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-checkbox-wrapper .next-checkbox{display:inline-block;position:relative;line-height:1;vertical-align:middle}.next-checkbox-wrapper input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:16px;height:16px;margin:0}.next-checkbox-wrapper .next-checkbox-inner{display:block;width:16px;height:16px;background:#fff;border-radius:3px;border:1px solid #c4c6cf;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;text-align:left;-webkit-box-shadow:none;box-shadow:none}.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;top:0;opacity:0;line-height:16px;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);color:#fff;left:4px;margin-left:0}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{vertical-align:top;margin-top:0}.next-checkbox-wrapper.checked .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.checked .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);margin-left:0}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.indeterminate .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.indeterminate .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1);margin-left:0}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.disabled input[type=checkbox]{cursor:not-allowed}.next-checkbox-wrapper.disabled .next-checkbox-inner{border-color:#e6e7eb;background:#f7f8fa}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover{border-color:#e6e7eb}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner>.next-icon{color:#ccc;opacity:1}.next-checkbox-wrapper.focused .next-checkbox-inner,.next-checkbox-wrapper.hovered .next-checkbox-inner,.next-checkbox-wrapper:not(.disabled):hover .next-checkbox-inner{border-color:#5584ff;background-color:#dee8ff}.next-checkbox-wrapper.checked.focused .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner{border-color:transparent;background-color:#3e71f7}.next-checkbox-wrapper.checked.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner>.next-icon{color:#fff;opacity:1}.next-checkbox-group .next-checkbox-wrapper{margin-left:8px}.next-checkbox-group .next-checkbox-wrapper:first-child{margin-left:0}.next-checkbox-group-ver .next-checkbox-wrapper{display:block;margin-left:0;margin-right:0;margin-bottom:8px}.next-checkbox-label{font-size:12px;vertical-align:middle;margin:0;margin-left:4px;line-height:1}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-menu[dir=rtl] .next-menu-item-helper{float:left}.next-menu[dir=rtl] .next-menu-item .next-checkbox,.next-menu[dir=rtl] .next-menu-item .next-radio{margin-left:4px;margin-right:0}.next-menu[dir=rtl] .next-menu-hoz-right{float:left}.next-menu[dir=rtl] .next-menu-hoz-icon-arrow.next-icon{left:6px;right:auto}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon{margin-left:0;margin-right:-16px}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon.next-menu-icon-right{right:auto;left:4px}.next-menu[dir=rtl] .next-menu-icon-arrow.next-icon{left:10px;right:auto}.next-menu{position:relative;min-width:100px;padding:8px 0;margin:0;list-style:none;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;background:#fff;line-height:32px;font-size:12px}.next-menu,.next-menu *,.next-menu :after,.next-menu :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-menu:focus,.next-menu :focus{outline:0}.next-menu-embeddable,.next-menu-embeddable .next-menu-item.next-disabled,.next-menu-embeddable .next-menu-item.next-disabled .next-menu-item-text>a{background:initial;border:none}.next-menu-embeddable .next-menu-item-inner{height:100%}.next-menu-content{position:relative}.next-menu-content,.next-menu-sub-menu{padding:0;margin:0;list-style:none}.next-menu-sub-menu.next-expand-enter{overflow:hidden}.next-menu-sub-menu.next-expand-enter-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-sub-menu.next-expand-leave{overflow:hidden}.next-menu-sub-menu.next-expand-leave-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-item{position:relative;padding:0 20px;-webkit-transition:background .2s ease;transition:background .2s ease;color:#333;cursor:pointer}.next-menu-item-helper{float:right;color:#999;font-style:normal;font-size:12px}.next-menu-item .next-checkbox,.next-menu-item .next-radio{margin-right:4px}.next-menu-item.next-selected{color:#333;background-color:#fff}.next-menu-item.next-selected .next-menu-icon-arrow{color:#666}.next-menu-item.next-selected .next-menu-icon-selected{color:#5584ff}.next-menu-item.next-disabled,.next-menu-item.next-disabled .next-menu-item-text>a{color:#ccc;background-color:#fff;cursor:not-allowed}.next-menu-item.next-disabled .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-icon-selected,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-selected{color:#ccc}.next-menu-item:not(.next-disabled).next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover,.next-menu-item:not(.next-disabled).next-selected:focus,.next-menu-item:not(.next-disabled).next-selected:focus:hover,.next-menu-item:not(.next-disabled).next-selected:hover,.next-menu-item:not(.next-disabled):hover{color:#333;background-color:#f2f3f7}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled):hover .next-menu-icon-arrow{color:#333}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled):hover .next-menu-icon-selected{color:#5584ff}.next-menu-item-inner{height:32px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.next-menu-item-text{vertical-align:middle}.next-menu-item-text>a{display:inline-block;text-decoration:none;color:#333}.next-menu-item-text>a:before{position:absolute;background-color:transparent;top:0;left:0;bottom:0;right:0;content:""}.next-menu.next-hoz{padding:0}.next-menu.next-hoz .next-menu-content>.next-menu-item,.next-menu.next-hoz>.next-menu-item{display:inline-block;vertical-align:top}.next-menu.next-hoz .next-menu-content,.next-menu.next-hoz .next-menu-footer,.next-menu.next-hoz .next-menu-header{display:inline-block}.next-menu-hoz-right{float:right}.next-menu-group-label{padding:0 12px;color:#999}.next-menu-divider{margin:8px 12px;border-bottom:1px solid #e6e7eb}.next-menu .next-menu-icon-selected.next-icon{position:absolute;top:0;margin-left:-16px}.next-menu .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-icon-selected.next-icon.next-menu-icon-right{right:4px}.next-menu .next-menu-icon-arrow.next-icon{position:absolute;top:0;right:10px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-icon-arrow.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow.next-icon:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-icon-arrow-down.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:scale(.5) rotate(180deg);-ms-transform:scale(.5) rotate(180deg);transform:scale(.5) rotate(180deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-down.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.next-menu .next-menu-icon-arrow-right.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:scale(.5) rotate(-90deg);-ms-transform:scale(.5) rotate(-90deg);transform:scale(.5) rotate(-90deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-right.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-hoz-icon-arrow.next-icon{position:absolute;top:0;right:6px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-hoz-icon-arrow.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-hoz-icon-arrow.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-hoz-icon-arrow.next-open:before{width:12px;font-size:12px;line-height:inherit}.next-menu.next-context{line-height:24px}.next-menu.next-context .next-menu-item-inner{height:24px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-input{vertical-align:middle;display:inline-table;border-collapse:separate;font-size:0;line-height:1;width:200px;border-spacing:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;border:1px solid #c4c6cf;background-color:#fff}.next-input,.next-input *,.next-input :after,.next-input :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input input{height:100%}.next-input input[type=reset],.next-input input[type=submit]{-webkit-appearance:button;cursor:pointer}.next-input input::-moz-focus-inner{border:0;padding:0}.next-input input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset}.next-input textarea{resize:none}.next-input input,.next-input textarea{width:100%;border:none;outline:none;padding:0;margin:0;font-weight:400;vertical-align:middle;background-color:transparent;color:#333}.next-input input::-ms-clear,.next-input textarea::-ms-clear{display:none}.next-input.next-input-textarea{border-radius:3px;font-size:0}.next-input.next-input-textarea textarea{color:#333;padding:4px 8px;font-size:12px;border-radius:3px}.next-input.next-input-textarea .next-input-control{display:block;width:auto;border-radius:3px}.next-input.next-input-textarea .next-input-len{padding:0 8px 4px;display:block;text-align:right;width:auto}.next-input.next-small{height:20px;border-radius:3px}.next-input.next-small .next-input-label{padding-left:8px;font-size:12px}.next-input.next-small .next-input-inner{font-size:12px}.next-input.next-small .next-input-control{padding-right:4px}.next-input.next-small input{height:18px;line-height:18px \0;padding:0 4px;font-size:12px}.next-input.next-small input::-webkit-input-placeholder{font-size:12px}.next-input.next-small input::-moz-placeholder{font-size:12px}.next-input.next-small input::-ms-input-placeholder{font-size:12px}.next-input.next-small input::placeholder{font-size:12px}.next-input.next-small .next-input-text-field{padding:0 4px;font-size:12px;height:18px;line-height:18px}.next-input.next-small .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-small input{border-radius:3px}.next-input.next-small .next-input-control{border-radius:0 3px 3px 0}.next-input.next-medium{height:28px;border-radius:3px}.next-input.next-medium .next-input-label{padding-left:8px;font-size:12px}.next-input.next-medium .next-input-inner{font-size:12px}.next-input.next-medium .next-input-control{padding-right:8px}.next-input.next-medium input{height:26px;line-height:26px \0;padding:0 8px;font-size:12px}.next-input.next-medium input::-webkit-input-placeholder{font-size:12px}.next-input.next-medium input::-moz-placeholder{font-size:12px}.next-input.next-medium input::-ms-input-placeholder{font-size:12px}.next-input.next-medium input::placeholder{font-size:12px}.next-input.next-medium .next-input-text-field{padding:0 8px;font-size:12px;height:26px;line-height:26px}.next-input.next-medium .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-medium input{border-radius:3px}.next-input.next-medium .next-input-control{border-radius:0 3px 3px 0}.next-input.next-large{height:40px;border-radius:3px}.next-input.next-large .next-input-label{padding-left:12px;font-size:16px}.next-input.next-large .next-input-inner{font-size:16px}.next-input.next-large .next-input-control{padding-right:8px}.next-input.next-large input{height:38px;line-height:38px \0;padding:0 12px;font-size:16px}.next-input.next-large input::-webkit-input-placeholder{font-size:16px}.next-input.next-large input::-moz-placeholder{font-size:16px}.next-input.next-large input::-ms-input-placeholder{font-size:16px}.next-input.next-large input::placeholder{font-size:16px}.next-input.next-large .next-input-text-field{padding:0 12px;font-size:16px;height:38px;line-height:38px}.next-input.next-large .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-input.next-large input{border-radius:3px}.next-input.next-large .next-input-control{border-radius:0 3px 3px 0}.next-input-hint-wrap{color:#999;position:relative}.next-input-hint-wrap .next-input-clear{opacity:0;z-index:1;position:absolute}.next-input-hint-wrap .next-input-hint{opacity:1}.next-input .next-icon-delete-filling:hover{cursor:pointer;color:#666}.next-input.next-focus,.next-input:hover{border-color:#a0a2ad;background-color:#fff}.next-input.next-focus .next-input-clear,.next-input:hover .next-input-clear{opacity:1}.next-input.next-focus .next-input-clear+.next-input-hint,.next-input:hover .next-input-clear+.next-input-hint{opacity:0}.next-input .next-input-clear:focus{opacity:1}.next-input .next-input-clear:focus+.next-input-hint{opacity:0}.next-input.next-focus{border-color:#5584ff;background-color:#fff}.next-input.next-error,.next-input.next-error.next-focus,.next-input.next-error:hover{border-color:#ff3000}.next-input.next-hidden{display:none}.next-input.next-noborder{border:none}.next-input-control .next-input-len{font-size:12px;line-height:12px;color:#999;display:table-cell;width:1px;vertical-align:bottom}.next-input-control .next-input-len.next-error{color:#ff3000}.next-input-control>*{display:table-cell;width:1%;top:0}.next-input-control>:not(:last-child){padding-right:4px}.next-input-control .next-icon{-webkit-transition:all .3s ease-out;transition:all .3s ease-out;color:#999}.next-input-control .next-icon-success-filling{color:#46bc15}.next-input-control .next-icon-loading{color:#4494f9}.next-input-label{color:#666}.next-input input::-moz-placeholder,.next-input textarea::-moz-placeholder{color:#999;opacity:1}.next-input input:-ms-input-placeholder,.next-input textarea:-ms-input-placeholder{color:#999}.next-input input::-webkit-input-placeholder,.next-input textarea::-webkit-input-placeholder{color:#999}.next-input.next-disabled{color:#ccc;cursor:not-allowed}.next-input.next-disabled,.next-input.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled input::-moz-placeholder,.next-input.next-disabled textarea::-moz-placeholder{color:#ccc;opacity:1}.next-input.next-disabled input:-ms-input-placeholder,.next-input.next-disabled textarea:-ms-input-placeholder{color:#ccc}.next-input.next-disabled input::-webkit-input-placeholder,.next-input.next-disabled textarea::-webkit-input-placeholder{color:#ccc}.next-input.next-disabled .next-input-label,.next-input.next-disabled .next-input-len{color:#ccc}.next-input.next-disabled input,.next-input.next-disabled textarea{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa;cursor:not-allowed}.next-input.next-disabled input:hover,.next-input.next-disabled textarea:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled .next-input-hint-wrap{color:#ccc}.next-input.next-disabled .next-input-hint-wrap .next-input-clear{opacity:0}.next-input.next-disabled .next-input-hint-wrap .next-input-hint{opacity:1}.next-input.next-disabled .next-input-hint-wrap .next-icon-delete-filling:hover{cursor:not-allowed;color:#ccc}.next-input.next-disabled .next-icon{color:#ccc}.next-input-control,.next-input-inner,.next-input-label{display:table-cell;width:1px;vertical-align:middle;line-height:1;background-color:transparent;white-space:nowrap}.next-input-group{display:inline-table;border-collapse:separate;border-spacing:0;line-height:0;width:100%}.next-input-group,.next-input-group *,.next-input-group :after,.next-input-group :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input-group-auto-width{width:100%;border-radius:0!important}.next-input-group>.next-input:first-child.next-large,.next-input-group>.next-input:first-child.next-medium,.next-input-group>.next-input:first-child.next-small{border-top-left-radius:3px!important;border-bottom-left-radius:3px!important}.next-input-group>.next-input:last-child.next-large,.next-input-group>.next-input:last-child.next-medium,.next-input-group>.next-input:last-child.next-small{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.next-input-group-addon{width:1px;display:table-cell;vertical-align:middle;white-space:nowrap}.next-input-group-addon:first-child,.next-input-group-addon:first-child>*{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group-addon:last-child,.next-input-group-addon:last-child>*{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group-text{color:#999;background-color:#f2f3f7;text-align:center;border:1px solid #c4c6cf;padding:0 8px}.next-input-group-text:first-child{border-right-width:0}.next-input-group-text:last-child{border-left-width:0}.next-input-group-text.next-disabled{color:#ccc;cursor:not-allowed}.next-input-group-text.next-disabled,.next-input-group-text.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input-group-text.next-medium,.next-input-group-text.next-small{font-size:12px;border-radius:3px}.next-input-group-text.next-large{font-size:16px;border-radius:3px}.next-input[dir=rtl].next-small .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-small .next-input-control{padding-right:0;padding-left:4px}.next-input[dir=rtl].next-medium .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-medium .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-large .next-input-label{padding-left:0;padding-right:12px}.next-input[dir=rtl].next-large .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-input-textarea .next-input-len{text-align:left}.next-input[dir=rtl] .next-input-control>:not(:last-child){padding-left:4px;padding-right:0}.next-input-group[dir=rtl] .next-input-group-addon:first-child{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-small{border-bottom-right-radius:3px!important;border-top-right-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-small{border-bottom-left-radius:3px!important;border-top-left-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-text:first-child{border-right-width:1px;border-left:0}.next-input-group[dir=rtl] .next-input-group-text:last-child{border-left-width:1px;border-right:0}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-select{display:inline-block;font-size:0;vertical-align:middle}.next-select,.next-select *,.next-select :after,.next-select :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-select-trigger{min-width:100px;outline:0;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-trigger .next-input-label{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-select-values{display:block;width:100%;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow:hidden}.next-select-trigger .next-select-values>em{font-style:inherit}.next-select-trigger .next-select-values input{padding-left:0;padding-right:0}.next-select-trigger .next-input-control{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-input-control>*{display:inline-block;width:auto}.next-select-trigger .next-input-control>.next-select-arrow{padding-right:0}.next-select-trigger .next-input.next-disabled em{color:#ccc}.next-select-trigger .next-input.next-disabled .next-select-arrow{cursor:not-allowed}.next-select-trigger .next-select-clear{display:none}.next-select-trigger.next-has-clear:hover .next-select-clear{display:inline-block}.next-select-trigger.next-has-clear:hover .next-select-arrow{display:none}.next-select .next-select-inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;min-width:100px;outline:0;color:#333}.next-select .next-select-inner .next-tag{line-height:1;margin-right:4px;margin-bottom:3px;padding-left:4px;padding-right:4px}.next-select-trigger-search{position:relative;display:inline-block;vertical-align:top;overflow:hidden;width:100%;max-width:100%}.next-select-trigger-search>input,.next-select-trigger-search>span{display:block;font-size:inherit;font-family:inherit;letter-spacing:inherit;white-space:nowrap;overflow:hidden}.next-select-trigger-search input{position:absolute;background-color:transparent;width:100%;height:100%!important;z-index:1;left:0;border:0;outline:0;margin:0;padding:0;cursor:inherit}.next-select-trigger-search>span{position:relative;visibility:hidden;white-space:pre;max-width:100%;z-index:-1}.next-select-single.next-no-search{cursor:pointer}.next-select-single.next-has-search.next-active .next-select-values>em{display:none}.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{width:1px;opacity:0;filter:alpha(opacity=0)}.next-select-single.next-inactive .next-select-trigger-search input,.next-select-single.next-no-search .next-select-trigger-search input{color:transparent}.next-select-single .next-select-values{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.next-select-single .next-select-values>em{vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.next-select-multiple .next-select-values,.next-select-tag .next-select-values{margin-bottom:-3px;height:auto!important}.next-select-multiple .next-select-trigger-search,.next-select-tag .next-select-trigger-search{margin-bottom:3px}.next-select-multiple .next-tag+.next-select-trigger-search,.next-select-tag .next-tag+.next-select-trigger-search{width:auto;min-width:1px}.next-select-multiple .next-input,.next-select-tag .next-input{height:auto;-webkit-box-align:start;-ms-flex-align:start;align-items:start}.next-select-multiple.next-small .next-select-values,.next-select-tag.next-small .next-select-values{min-height:18px;padding-top:2px;padding-bottom:2px;line-height:14px}.next-select-multiple.next-small .next-tag,.next-select-tag.next-small .next-tag{border:0;padding-top:0;padding-bottom:0;height:14px}.next-select-multiple.next-small .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-close-btn,.next-select-tag.next-small .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-close-btn{line-height:14px}.next-select-multiple.next-small .next-input-control,.next-select-multiple.next-small .next-input-label,.next-select-tag.next-small .next-input-control,.next-select-tag.next-small .next-input-label{line-height:18px}.next-select-multiple.next-medium .next-select-values,.next-select-tag.next-medium .next-select-values{min-height:26px;padding-top:3px;padding-bottom:3px;line-height:20px}.next-select-multiple.next-medium .next-tag,.next-select-tag.next-medium .next-tag{padding-top:1px;padding-bottom:1px;height:20px}.next-select-multiple.next-medium .next-tag .next-tag-body,.next-select-multiple.next-medium .next-tag .next-tag-close-btn,.next-select-tag.next-medium .next-tag .next-tag-body,.next-select-tag.next-medium .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-medium .next-input-control,.next-select-multiple.next-medium .next-input-label,.next-select-tag.next-medium .next-input-control,.next-select-tag.next-medium .next-input-label{line-height:26px}.next-select-multiple.next-large .next-select-values,.next-select-tag.next-large .next-select-values{min-height:38px;padding-top:7px;padding-bottom:7px;line-height:24px}.next-select-multiple.next-large .next-tag,.next-select-tag.next-large .next-tag{padding-top:3px;padding-bottom:3px;height:24px}.next-select-multiple.next-large .next-tag .next-tag-body,.next-select-multiple.next-large .next-tag .next-tag-close-btn,.next-select-tag.next-large .next-tag .next-tag-body,.next-select-tag.next-large .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-large .next-input-control,.next-select-multiple.next-large .next-input-label,.next-select-tag.next-large .next-input-control,.next-select-tag.next-large .next-input-label{line-height:38px}.next-select.next-no-search .next-select-trigger-search input{color:transparent}.next-select-auto-complete{width:160px}.next-select-auto-complete .next-input{width:100%}.next-select-auto-complete .next-input .next-input-hint-wrap{padding-right:1px}.next-select-auto-complete .next-input .next-select-arrow{padding-left:0}.next-select.next-active .next-select-arrow{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-select-arrow{cursor:pointer;width:auto!important;text-align:center;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-menu-wrapper{max-height:260px;overflow:auto;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none}.next-select-menu-wrapper .next-select-menu{max-height:none;border:none}.next-select-menu{max-height:260px;overflow:auto}.next-select-menu .next-select-menu-empty-content{padding-left:8px;padding-right:8px;color:#999}.next-select-menu.next-select-auto-complete-menu.next-select-menu-empty{display:none}.next-select-menu .next-menu-item-text .next-icon{vertical-align:middle}.next-select-all{display:block;cursor:pointer;padding:0 8px;margin:0 12px 8px;border-bottom:1px solid #dcdee3}.next-select-all:hover{color:#3e71f7}.next-select-all .next-menu-icon-selected.next-icon{display:inline-block!important;top:auto;color:#5584ff}.next-select-highlight{color:#5584ff;font-size:12px}.next-select-in-ie.next-select-trigger .next-select-values{overflow:visible}.next-select-in-ie.next-select-trigger .next-input-control,.next-select-in-ie.next-select-trigger .next-input-label{width:1px}.next-select-in-ie.next-select-trigger .next-input-control>*{display:table-cell;width:1%}.next-select-in-ie.next-select-trigger .next-select-arrow{display:table-cell}.next-select-in-ie.next-select-trigger .next-select-clear{display:none}.next-select-in-ie.next-select-trigger.next-select-multiple .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-tag .next-select-inner{vertical-align:top}.next-select-in-ie.next-select-trigger .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-single .next-select-values{display:inline-table}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-small .next-select-values{line-height:20px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-medium .next-select-values{line-height:28px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-large .next-select-values{line-height:40px}.next-select-in-ie.next-select-trigger .next-select-trigger-search>span{max-width:100px}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values{position:relative}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values>em{position:absolute;display:inline-block;height:100%;line-height:1;vertical-align:middle;overflow:hidden;left:4px;right:0;top:30%}.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{filter:alpha(opacity=0);font-size:0}.next-select-in-ie.next-select-trigger.next-no-search .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-trigger-search input{color:inherit} \ No newline at end of file diff --git a/demos/select/deps.json b/demos/select/deps.json new file mode 100644 index 0000000000..8057d9d6b1 --- /dev/null +++ b/demos/select/deps.json @@ -0,0 +1 @@ +["icon","tag","overlay","menu","input","demo-helper","field"] \ No newline at end of file diff --git a/demos/select/index.html b/demos/select/index.html new file mode 100644 index 0000000000..a674c6399b --- /dev/null +++ b/demos/select/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/slider/build/index.css b/demos/slider/build/index.css new file mode 100644 index 0000000000..cced8898db --- /dev/null +++ b/demos/slider/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-slick{position:relative;display:block;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.next-slick,.next-slick *,.next-slick :after,.next-slick :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-slick-initialized .next-slick-slide{display:block}.next-slick-list{position:relative;overflow:hidden;display:block;margin:0;padding:0;-webkit-transform:translateZ(0);transform:translateZ(0)}.next-slick-list:focus{outline:none}.next-slick-list.dragging{cursor:pointer;cursor:hand}.next-slick-track{position:relative;top:0;left:0;display:block;-webkit-transform:translateZ(0);transform:translateZ(0)}.next-slick-slide{float:left;height:100%;min-height:1px;outline:0;-webkit-transition:all .3s cubic-bezier(.86,0,.07,1);transition:all .3s cubic-bezier(.86,0,.07,1)}.next-slick[dir=rtl] .next-slick-slide{float:right}.next-slick-slide img{display:block}.next-slick-arrow{display:block;position:absolute;cursor:pointer;text-align:center;-webkit-transition:.4s ease-in;transition:.4s ease-in}.next-slick-arrow.inner{color:#fff;background:#000;opacity:.2;padding:0;border:none}.next-slick-arrow.inner:focus,.next-slick-arrow.inner:hover{color:#fff;background:#000;opacity:.4}.next-slick-arrow.inner.disabled{color:#ccc;background:#f7f8fa;opacity:.5}.next-slick-arrow.outer{color:#666;background:transparent;opacity:.32;padding:0;border:none;border-radius:0}.next-slick-arrow.outer:focus,.next-slick-arrow.outer:hover{color:#333;background:transparent;opacity:.32}.next-slick-arrow.outer.disabled{color:#ccc;background:transparent;opacity:.32}.next-slick-arrow.disabled{cursor:not-allowed}.next-slick-dots{display:block;position:absolute;margin:0;padding:0}.next-slick-dots-item{position:relative;display:inline-block;cursor:pointer}.next-slick-dots-item button{cursor:pointer;border:0 solid #fff;outline:none;padding:0;height:8px;width:8px;border-radius:50%;background:rgba(0,0,0,.32)}.next-slick-dots-item button:hover{background-color:rgba(0,0,0,.32);border-color:#fff}.next-slick-dots-item.active button,.next-slick-dots-item button:focus{background:#5584ff;border-color:#fff;-webkit-animation:zoom .3s cubic-bezier(.86,0,.07,1);animation:zoom .3s cubic-bezier(.86,0,.07,1)}.next-slick-dots.hoz{width:100%;bottom:12px;left:0;text-align:center}.next-slick-dots.hoz .next-slick-dots-item{margin:0 4px}.next-slick-dots.ver{width:16px;top:0;right:20px;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.next-slick-dots.ver .next-slick-dots-item{margin:0}.next-slick.next-slick-hoz.next-slick-outer{padding:0 24px}.next-slick.next-slick-hoz .next-slick-arrow.medium{width:28px;height:56px;line-height:56px}.next-slick.next-slick-hoz .next-slick-arrow.medium .next-icon:before{width:20px;font-size:20px;line-height:inherit}.next-slick.next-slick-hoz .next-slick-arrow.medium.inner{top:calc((100% - 56px) / 2)}.next-slick.next-slick-hoz .next-slick-arrow.medium.inner.next-slick-prev{left:0}.next-slick.next-slick-hoz .next-slick-arrow.medium.inner.next-slick-next{right:0}.next-slick.next-slick-hoz .next-slick-arrow.medium.outer{top:calc((100% - 56px) / 2)}.next-slick.next-slick-hoz .next-slick-arrow.medium.outer.next-slick-prev{left:-4px}.next-slick.next-slick-hoz .next-slick-arrow.medium.outer.next-slick-next{right:-4px}.next-slick.next-slick-hoz .next-slick-arrow.large{width:48px;height:96px;line-height:96px}.next-slick.next-slick-hoz .next-slick-arrow.large .next-icon:before{width:32px;font-size:32px;line-height:inherit}.next-slick.next-slick-hoz .next-slick-arrow.large.inner{top:calc((100% - 96px) / 2)}.next-slick.next-slick-hoz .next-slick-arrow.large.inner.next-slick-prev{left:0}.next-slick.next-slick-hoz .next-slick-arrow.large.inner.next-slick-next{right:0}.next-slick.next-slick-hoz .next-slick-arrow.large.outer{top:calc((100% - 96px) / 2)}.next-slick.next-slick-hoz .next-slick-arrow.large.outer.next-slick-prev{left:-8px}.next-slick.next-slick-hoz .next-slick-arrow.large.outer.next-slick-next{right:-8px}.next-slick.next-slick-ver.next-slick-outer{padding:24px 0}.next-slick.next-slick-ver .next-slick-slide{display:block;height:auto}.next-slick.next-slick-ver .next-slick-arrow.medium{width:56px;height:28px;line-height:28px}.next-slick.next-slick-ver .next-slick-arrow.medium .next-icon:before{width:20px;font-size:20px;line-height:inherit}.next-slick.next-slick-ver .next-slick-arrow.medium.inner{left:calc((100% - 56px) / 2)}.next-slick.next-slick-ver .next-slick-arrow.medium.inner.next-slick-prev{top:0}.next-slick.next-slick-ver .next-slick-arrow.medium.inner.next-slick-next{bottom:0}.next-slick.next-slick-ver .next-slick-arrow.medium.outer{left:calc((100% - 56px) / 2)}.next-slick.next-slick-ver .next-slick-arrow.medium.outer.next-slick-prev{top:-4px}.next-slick.next-slick-ver .next-slick-arrow.medium.outer.next-slick-next{bottom:-4px}.next-slick.next-slick-ver .next-slick-arrow.large{width:96px;height:48px;line-height:48px}.next-slick.next-slick-ver .next-slick-arrow.large .next-icon:before{width:32px;font-size:32px;line-height:inherit}.next-slick.next-slick-ver .next-slick-arrow.large.inner{left:calc((100% - 96px) / 2)}.next-slick.next-slick-ver .next-slick-arrow.large.inner.next-slick-prev{top:0}.next-slick.next-slick-ver .next-slick-arrow.large.inner.next-slick-next{bottom:0}.next-slick.next-slick-ver .next-slick-arrow.large.outer{left:calc((100% - 96px) / 2)}.next-slick.next-slick-ver .next-slick-arrow.large.outer.next-slick-prev{top:-16px}.next-slick.next-slick-ver .next-slick-arrow.large.outer.next-slick-next{bottom:-16px} \ No newline at end of file diff --git a/demos/slider/deps.json b/demos/slider/deps.json new file mode 100644 index 0000000000..0ee90915f8 --- /dev/null +++ b/demos/slider/deps.json @@ -0,0 +1 @@ +["icon","animate","field","demo-helper"] \ No newline at end of file diff --git a/demos/slider/index.html b/demos/slider/index.html new file mode 100644 index 0000000000..1153c330fe --- /dev/null +++ b/demos/slider/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/split-button/build/index.css b/demos/split-button/build/index.css new file mode 100644 index 0000000000..23c42f5f65 --- /dev/null +++ b/demos/split-button/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-btn,.next-btn *,.next-btn :after,.next-btn :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-btn::-moz-focus-inner{border:0;padding:0}.next-btn,.next-btn:active,.next-btn:focus,.next-btn:hover{outline:0}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-btn{position:relative;display:inline-block;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;text-align:center;text-transform:none;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;cursor:pointer}.next-btn:after{text-align:center;position:absolute;opacity:0;visibility:hidden;-webkit-transition:opacity .5s ease;transition:opacity .5s ease}.next-btn .next-icon.next-xs:before{vertical-align:baseline}.next-btn.hover,.next-btn:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn.next-small{border-radius:3px;padding:0 8px;height:20px;line-height:18px;font-size:12px;border-width:1px}.next-btn.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-small>.next-btn-icon.next-icon-alone:before,.next-btn.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small.next-btn-loading{padding-left:24px}.next-btn.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:8px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-small.next-btn-loading>.next-icon{display:none}.next-btn.next-medium{border-radius:3px;padding:0 12px;height:28px;line-height:26px;font-size:12px;border-width:1px}.next-btn.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium.next-btn-loading{padding-left:28px}.next-btn.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:12px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-medium.next-btn-loading>.next-icon{display:none}.next-btn.next-large{border-radius:3px;padding:0 16px;height:40px;line-height:38px;font-size:16px;border-width:1px}.next-btn.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-large>.next-btn-icon.next-icon-alone:before,.next-btn.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large.next-btn-loading{padding-left:36px}.next-btn.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:16px;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn.next-large.next-btn-loading>.next-icon{display:none}.next-btn.next-btn-normal{border-style:solid;background-color:#fff;border-color:#c4c6cf}.next-btn.next-btn-normal,.next-btn.next-btn-normal.visited,.next-btn.next-btn-normal:link,.next-btn.next-btn-normal:visited{color:#333}.next-btn.next-btn-normal.active,.next-btn.next-btn-normal.hover,.next-btn.next-btn-normal:active,.next-btn.next-btn-normal:focus,.next-btn.next-btn-normal:hover{color:#333;background-color:#f2f3f7;border-color:#a0a2ad;text-decoration:none}.next-btn.next-btn-primary{border-style:solid;background-color:#5584ff;border-color:transparent}.next-btn.next-btn-primary,.next-btn.next-btn-primary.visited,.next-btn.next-btn-primary:link,.next-btn.next-btn-primary:visited{color:#fff}.next-btn.next-btn-primary.active,.next-btn.next-btn-primary.hover,.next-btn.next-btn-primary:active,.next-btn.next-btn-primary:focus,.next-btn.next-btn-primary:hover{color:#fff;background-color:#3e71f7;border-color:transparent;text-decoration:none}.next-btn.next-btn-secondary{border-style:solid;background-color:#fff;border-color:#5584ff}.next-btn.next-btn-secondary,.next-btn.next-btn-secondary.visited,.next-btn.next-btn-secondary:link,.next-btn.next-btn-secondary:visited{color:#5584ff}.next-btn.next-btn-secondary.active,.next-btn.next-btn-secondary.hover,.next-btn.next-btn-secondary:active,.next-btn.next-btn-secondary:focus,.next-btn.next-btn-secondary:hover{color:#fff;background-color:#3e71f7;border-color:#3e71f7;text-decoration:none}.next-btn.disabled,.next-btn[disabled]{cursor:not-allowed;background-color:#f7f8fa;border-color:#e6e7eb}.next-btn.disabled,.next-btn.disabled.visited,.next-btn.disabled:link,.next-btn.disabled:visited,.next-btn[disabled],.next-btn[disabled].visited,.next-btn[disabled]:link,.next-btn[disabled]:visited{color:#ccc}.next-btn.disabled.active,.next-btn.disabled.hover,.next-btn.disabled:active,.next-btn.disabled:focus,.next-btn.disabled:hover,.next-btn[disabled].active,.next-btn[disabled].hover,.next-btn[disabled]:active,.next-btn[disabled]:focus,.next-btn[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-warning{border-style:solid}.next-btn-warning.next-btn-primary{background-color:#ff3000;border-color:#ff3000}.next-btn-warning.next-btn-primary,.next-btn-warning.next-btn-primary.visited,.next-btn-warning.next-btn-primary:link,.next-btn-warning.next-btn-primary:visited{color:#fff}.next-btn-warning.next-btn-primary.active,.next-btn-warning.next-btn-primary.hover,.next-btn-warning.next-btn-primary:active,.next-btn-warning.next-btn-primary:focus,.next-btn-warning.next-btn-primary:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary[disabled]{background-color:#f7f8fa;border-color:#dcdee3}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary.disabled.visited,.next-btn-warning.next-btn-primary.disabled:link,.next-btn-warning.next-btn-primary.disabled:visited,.next-btn-warning.next-btn-primary[disabled],.next-btn-warning.next-btn-primary[disabled].visited,.next-btn-warning.next-btn-primary[disabled]:link,.next-btn-warning.next-btn-primary[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-primary.disabled.active,.next-btn-warning.next-btn-primary.disabled.hover,.next-btn-warning.next-btn-primary.disabled:active,.next-btn-warning.next-btn-primary.disabled:focus,.next-btn-warning.next-btn-primary.disabled:hover,.next-btn-warning.next-btn-primary[disabled].active,.next-btn-warning.next-btn-primary[disabled].hover,.next-btn-warning.next-btn-primary[disabled]:active,.next-btn-warning.next-btn-primary[disabled]:focus,.next-btn-warning.next-btn-primary[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#dcdee3;text-decoration:none}.next-btn-warning.next-btn-normal{background-color:#fff;border-color:#ff3000}.next-btn-warning.next-btn-normal,.next-btn-warning.next-btn-normal.visited,.next-btn-warning.next-btn-normal:link,.next-btn-warning.next-btn-normal:visited{color:#ff3000}.next-btn-warning.next-btn-normal.active,.next-btn-warning.next-btn-normal.hover,.next-btn-warning.next-btn-normal:active,.next-btn-warning.next-btn-normal:focus,.next-btn-warning.next-btn-normal:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal[disabled]{background-color:#f7f8fa;border-color:#e6e7eb}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal.disabled.visited,.next-btn-warning.next-btn-normal.disabled:link,.next-btn-warning.next-btn-normal.disabled:visited,.next-btn-warning.next-btn-normal[disabled],.next-btn-warning.next-btn-normal[disabled].visited,.next-btn-warning.next-btn-normal[disabled]:link,.next-btn-warning.next-btn-normal[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-normal.disabled.active,.next-btn-warning.next-btn-normal.disabled.hover,.next-btn-warning.next-btn-normal.disabled:active,.next-btn-warning.next-btn-normal.disabled:focus,.next-btn-warning.next-btn-normal.disabled:hover,.next-btn-warning.next-btn-normal[disabled].active,.next-btn-warning.next-btn-normal[disabled].hover,.next-btn-warning.next-btn-normal[disabled]:active,.next-btn-warning.next-btn-normal[disabled]:focus,.next-btn-warning.next-btn-normal[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-text{border-radius:0}.next-btn-text,.next-btn-text.hover,.next-btn-text:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn-text.next-btn-primary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-primary,.next-btn-text.next-btn-primary.visited,.next-btn-text.next-btn-primary:link,.next-btn-text.next-btn-primary:visited{color:#5584ff}.next-btn-text.next-btn-primary.active,.next-btn-text.next-btn-primary.hover,.next-btn-text.next-btn-primary:active,.next-btn-text.next-btn-primary:focus,.next-btn-text.next-btn-primary:hover{color:#3e71f7;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-secondary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-secondary,.next-btn-text.next-btn-secondary.visited,.next-btn-text.next-btn-secondary:link,.next-btn-text.next-btn-secondary:visited{color:#666}.next-btn-text.next-btn-secondary.active,.next-btn-text.next-btn-secondary.hover,.next-btn-text.next-btn-secondary:active,.next-btn-text.next-btn-secondary:focus,.next-btn-text.next-btn-secondary:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-normal{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-normal,.next-btn-text.next-btn-normal.visited,.next-btn-text.next-btn-normal:link,.next-btn-text.next-btn-normal:visited{color:#333}.next-btn-text.next-btn-normal.active,.next-btn-text.next-btn-normal.hover,.next-btn-text.next-btn-normal:active,.next-btn-text.next-btn-normal:focus,.next-btn-text.next-btn-normal:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-large{border-radius:0;padding:0;height:24px;line-height:24px;font-size:14px;border-width:0}.next-btn-text.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-large>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large.next-btn-loading{padding-left:20px}.next-btn-text.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:0;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn-text.next-large.next-btn-loading>.next-icon{display:none}.next-btn-text.next-medium{border-radius:0;padding:0;height:20px;line-height:20px;font-size:12px;border-width:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium.next-btn-loading{padding-left:16px}.next-btn-text.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-medium.next-btn-loading>.next-icon{display:none}.next-btn-text.next-small{border-radius:0;padding:0;height:16px;line-height:16px;font-size:12px;border-width:0}.next-btn-text.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-small>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small.next-btn-loading{padding-left:16px}.next-btn-text.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-small.next-btn-loading>.next-icon{display:none}.next-btn-text.disabled,.next-btn-text[disabled]{background-color:transparent;border-color:transparent}.next-btn-text.disabled,.next-btn-text.disabled.visited,.next-btn-text.disabled:link,.next-btn-text.disabled:visited,.next-btn-text[disabled],.next-btn-text[disabled].visited,.next-btn-text[disabled]:link,.next-btn-text[disabled]:visited{color:#ccc}.next-btn-text.disabled.active,.next-btn-text.disabled.hover,.next-btn-text.disabled:active,.next-btn-text.disabled:focus,.next-btn-text.disabled:hover,.next-btn-text[disabled].active,.next-btn-text[disabled].hover,.next-btn-text[disabled]:active,.next-btn-text[disabled]:focus,.next-btn-text[disabled]:hover{color:#ccc;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-loading{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-loading,.next-btn-text.next-btn-loading.visited,.next-btn-text.next-btn-loading:link,.next-btn-text.next-btn-loading:visited{color:#333}.next-btn-text.next-btn-loading.active,.next-btn-text.next-btn-loading.hover,.next-btn-text.next-btn-loading:active,.next-btn-text.next-btn-loading:focus,.next-btn-text.next-btn-loading:hover{color:#333;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-loading{pointer-events:none}.next-btn-loading:after{font-family:NextIcon;content:"\E646";opacity:1;visibility:visible;-webkit-animation:loadingCircle 2s infinite linear;animation:loadingCircle 2s infinite linear}.next-btn-ghost{-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-btn-ghost.next-btn-dark{background-color:transparent;border-color:#fff}.next-btn-ghost.next-btn-dark,.next-btn-ghost.next-btn-dark.visited,.next-btn-ghost.next-btn-dark:link,.next-btn-ghost.next-btn-dark:visited{color:#fff}.next-btn-ghost.next-btn-dark.active,.next-btn-ghost.next-btn-dark.hover,.next-btn-ghost.next-btn-dark:active,.next-btn-ghost.next-btn-dark:focus,.next-btn-ghost.next-btn-dark:hover{color:#fff;background-color:hsla(0,0%,100%,.8);border-color:#fff;text-decoration:none}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark[disabled]{background-color:transparent;border-color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark.disabled.visited,.next-btn-ghost.next-btn-dark.disabled:link,.next-btn-ghost.next-btn-dark.disabled:visited,.next-btn-ghost.next-btn-dark[disabled],.next-btn-ghost.next-btn-dark[disabled].visited,.next-btn-ghost.next-btn-dark[disabled]:link,.next-btn-ghost.next-btn-dark[disabled]:visited{color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled.active,.next-btn-ghost.next-btn-dark.disabled.hover,.next-btn-ghost.next-btn-dark.disabled:active,.next-btn-ghost.next-btn-dark.disabled:focus,.next-btn-ghost.next-btn-dark.disabled:hover,.next-btn-ghost.next-btn-dark[disabled].active,.next-btn-ghost.next-btn-dark[disabled].hover,.next-btn-ghost.next-btn-dark[disabled]:active,.next-btn-ghost.next-btn-dark[disabled]:focus,.next-btn-ghost.next-btn-dark[disabled]:hover{color:hsla(0,0%,100%,.4);background-color:transparent;border-color:hsla(0,0%,100%,.4);text-decoration:none}.next-btn-ghost.next-btn-light{background-color:transparent;border-color:#333}.next-btn-ghost.next-btn-light,.next-btn-ghost.next-btn-light.visited,.next-btn-ghost.next-btn-light:link,.next-btn-ghost.next-btn-light:visited{color:#333}.next-btn-ghost.next-btn-light.active,.next-btn-ghost.next-btn-light.hover,.next-btn-ghost.next-btn-light:active,.next-btn-ghost.next-btn-light:focus,.next-btn-ghost.next-btn-light:hover{color:#999;background-color:rgba(0,0,0,.92);border-color:#333;text-decoration:none}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light[disabled]{background-color:transparent;border-color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light.disabled.visited,.next-btn-ghost.next-btn-light.disabled:link,.next-btn-ghost.next-btn-light.disabled:visited,.next-btn-ghost.next-btn-light[disabled],.next-btn-ghost.next-btn-light[disabled].visited,.next-btn-ghost.next-btn-light[disabled]:link,.next-btn-ghost.next-btn-light[disabled]:visited{color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled.active,.next-btn-ghost.next-btn-light.disabled.hover,.next-btn-ghost.next-btn-light.disabled:active,.next-btn-ghost.next-btn-light.disabled:focus,.next-btn-ghost.next-btn-light.disabled:hover,.next-btn-ghost.next-btn-light[disabled].active,.next-btn-ghost.next-btn-light[disabled].hover,.next-btn-ghost.next-btn-light[disabled]:active,.next-btn-ghost.next-btn-light[disabled]:focus,.next-btn-ghost.next-btn-light[disabled]:hover{color:rgba(0,0,0,.1);background-color:transparent;border-color:rgba(0,0,0,.1);text-decoration:none}.next-btn-group{position:relative;display:inline-block;vertical-align:middle}.next-btn-group>.next-btn{position:relative;float:left;-webkit-box-shadow:none;box-shadow:none}.next-btn-group>.next-btn.active,.next-btn-group>.next-btn:active,.next-btn-group>.next-btn:focus,.next-btn-group>.next-btn:hover{z-index:1}.next-btn-group>.next-btn.disabled,.next-btn-group>.next-btn[disabled]{z-index:0}.next-btn-group .next-btn.next-btn{margin:0 0 0 -1px}.next-btn-group .next-btn:not(:first-child):not(:last-child){border-radius:0}.next-btn-group>.next-btn:first-child{margin:0}.next-btn-group>.next-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group>.next-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group>.next-btn-primary:not(:first-child){border-left-color:hsla(0,0%,100%,.2)}.next-btn-group>.next-btn-primary:not(:first-child):hover{border-left-color:transparent}.next-btn-group>.next-btn-primary:not(:first-child).disabled,.next-btn-group>.next-btn-primary:not(:first-child)[disabled]{border-left-color:#e6e7eb}.next-btn-group[dir=rtl]>.next-btn{float:right}.next-btn-group[dir=rtl] .next-btn.next-btn{margin:0 -1px 0 0}.next-btn-group[dir=rtl]>.next-btn:first-child:not(:last-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group[dir=rtl]>.next-btn:last-child:not(:first-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child){border-right-color:hsla(0,0%,100%,.2)}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child):hover{border-right-color:transparent}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child).disabled,.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child)[disabled]{border-right-color:#e6e7eb}.next-btn.next-small[dir=rtl]{border-radius:3px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl].next-btn-loading{padding-left:8px;padding-right:24px}.next-btn.next-small[dir=rtl].next-btn-loading:after{right:8px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-medium[dir=rtl]{border-radius:3px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl].next-btn-loading{padding-left:12px;padding-right:28px}.next-btn.next-medium[dir=rtl].next-btn-loading:after{right:12px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-large[dir=rtl]{border-radius:3px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl].next-btn-loading{padding-left:16px;padding-right:36px}.next-btn.next-large[dir=rtl].next-btn-loading:after{right:16px;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-large{border-radius:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large.next-btn-loading{padding-left:0;padding-right:20px}.next-btn-text[dir=rtl].next-large.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-medium{border-radius:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-medium.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-small{border-radius:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-small.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-radio-button-large[dir=rtl]>label:first-child{margin-left:-1px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.next-radio-button-large[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large[dir=rtl] .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-wrapper[dir=rtl] .next-radio-label{margin-left:0;margin-right:4px}.next-radio-group[dir=rtl] .next-radio-label{margin-right:4px;margin-left:16px}.next-radio-button[dir=rtl]>label .next-radio-label{margin:0}.next-radio-wrapper{outline:0}.next-radio-wrapper .next-radio{display:inline-block;vertical-align:middle;position:relative;line-height:1}.next-radio-wrapper .next-radio,.next-radio-wrapper .next-radio *,.next-radio-wrapper .next-radio :after,.next-radio-wrapper .next-radio :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-radio-wrapper .next-radio input[type=radio]{opacity:0;position:absolute;vertical-align:middle;top:0;left:0;width:16px;height:16px;margin:0}.next-radio-wrapper .next-radio-inner{display:block;width:16px;height:16px;background:#fff;border-radius:50%;border:1px solid #c4c6cf;-webkit-transition:all .36s ease 0s;transition:all .36s ease 0s;-webkit-box-shadow:none;box-shadow:none}.next-radio-wrapper .next-radio-inner:after{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;border-radius:50%;top:50%;margin-top:-2px;left:50%;margin-left:-2px;background:#fff;content:" ";-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86)}.next-radio-wrapper.checked .next-radio-inner{border-color:#5584ff;background:#5584ff}.next-radio-wrapper.checked .next-radio-inner:after{width:4px;height:4px;font-weight:700;background:#fff;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.next-radio-wrapper.checked.hovered .next-radio-inner,.next-radio-wrapper.checked:hover .next-radio-inner{border-color:transparent}.next-radio-wrapper.disabled input[type=radio]{cursor:not-allowed}.next-radio-wrapper.disabled .next-radio-inner{border-color:#e6e7eb;background:#f7f8fa}.next-radio-wrapper.disabled.checked .next-radio-inner,.next-radio-wrapper.disabled .next-radio-inner.hovered,.next-radio-wrapper.disabled .next-radio-inner:hover{border-color:#e6e7eb}.next-radio-wrapper.disabled.checked .next-radio-inner:after{background:#ccc}.next-radio-wrapper:not(.disabled).focused .next-radio-inner,.next-radio-wrapper:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper:not(.disabled):focus .next-radio-inner,.next-radio-wrapper:not(.disabled):hover .next-radio-inner{border-color:#5584ff;background-color:#dee8ff}.next-radio-wrapper.checked.focused .next-radio-inner,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner{border-color:transparent;background:#3e71f7}.next-radio-wrapper.checked.focused .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner:after{background:#fff}.next-radio-button .next-radio,.next-radio-button input[type=radio]{width:0;height:0}.next-radio-button>label{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1;margin:0 0 0 -1px;border:1px solid #c4c6cf;background-color:#fff;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;vertical-align:middle}.next-radio-button>label .next-radio-label{display:block;color:#333;margin:0;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}.next-radio-button>label.hovered,.next-radio-button>label:focus,.next-radio-button>label:hover{z-index:10;border-color:#a0a2ad;background-color:#f2f3f7}.next-radio-button>label.hovered .next-radio-label,.next-radio-button>label:focus .next-radio-label,.next-radio-button>label:hover .next-radio-label{color:#333}.next-radio-button>label.checked{z-index:11;border-color:#5584ff;background-color:#fff}.next-radio-button>label.checked .next-radio-label{color:#5584ff}.next-radio-button>label.disabled{z-index:0;cursor:not-allowed;border-color:#e6e7eb;background-color:#f7f8fa}.next-radio-button>label.disabled .next-radio-label{color:#ccc}.next-radio-button>label.checked.disabled{z-index:0;border-color:#e6e7eb;background-color:#f2f3f7}.next-radio-button>label.checked.disabled .next-radio-label{color:#ccc}.next-radio-button-large>label{padding:0 8px;height:40px;line-height:40px}.next-radio-button-large>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-large .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium>label{padding:0 8px;height:28px;line-height:28px}.next-radio-button-medium>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-medium>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium .next-radio-label{height:26px;line-height:26px;font-size:12px}.next-radio-button-small>label{padding:0 8px;height:20px;line-height:20px}.next-radio-button-small>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small .next-radio-label{height:18px;line-height:18px;font-size:12px}.next-radio-single-input input[type=radio]{opacity:0;position:absolute;top:0;left:0;margin:0}.next-radio-group{display:inline-block}.next-radio-group .next-radio-label{color:#333;margin-right:16px}.next-radio-group.disabled .next-radio-label{color:#ccc}.next-radio-group-ver .next-radio-wrapper{display:block;margin-bottom:8px}.next-radio-label{margin:0;margin-left:4px;font-size:12px;vertical-align:middle;line-height:1}@-moz-document url-prefix(){.next-radio{margin-top:-1px}@supports ((-webkit-animation:calc(0s)) or (animation:calc(0s))){.next-radio{margin-top:-3px}}}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-checkbox-wrapper[dir=rtl]{margin-right:8px;margin-left:0}.next-checkbox-wrapper[dir=rtl]:first-child{margin-right:0}.next-checkbox-wrapper[dir=rtl]>.next-checkbox-label{margin-right:4px;margin-left:0}.next-checkbox-wrapper,.next-checkbox-wrapper *,.next-checkbox-wrapper :after,.next-checkbox-wrapper :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-checkbox-wrapper .next-checkbox{display:inline-block;position:relative;line-height:1;vertical-align:middle}.next-checkbox-wrapper input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:16px;height:16px;margin:0}.next-checkbox-wrapper .next-checkbox-inner{display:block;width:16px;height:16px;background:#fff;border-radius:3px;border:1px solid #c4c6cf;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;text-align:left;-webkit-box-shadow:none;box-shadow:none}.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;top:0;opacity:0;line-height:16px;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);color:#fff;left:4px;margin-left:0}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{vertical-align:top;margin-top:0}.next-checkbox-wrapper.checked .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.checked .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);margin-left:0}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.indeterminate .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.indeterminate .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1);margin-left:0}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.disabled input[type=checkbox]{cursor:not-allowed}.next-checkbox-wrapper.disabled .next-checkbox-inner{border-color:#e6e7eb;background:#f7f8fa}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover{border-color:#e6e7eb}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner>.next-icon{color:#ccc;opacity:1}.next-checkbox-wrapper.focused .next-checkbox-inner,.next-checkbox-wrapper.hovered .next-checkbox-inner,.next-checkbox-wrapper:not(.disabled):hover .next-checkbox-inner{border-color:#5584ff;background-color:#dee8ff}.next-checkbox-wrapper.checked.focused .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner{border-color:transparent;background-color:#3e71f7}.next-checkbox-wrapper.checked.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner>.next-icon{color:#fff;opacity:1}.next-checkbox-group .next-checkbox-wrapper{margin-left:8px}.next-checkbox-group .next-checkbox-wrapper:first-child{margin-left:0}.next-checkbox-group-ver .next-checkbox-wrapper{display:block;margin-left:0;margin-right:0;margin-bottom:8px}.next-checkbox-label{font-size:12px;vertical-align:middle;margin:0;margin-left:4px;line-height:1}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-menu[dir=rtl] .next-menu-item-helper{float:left}.next-menu[dir=rtl] .next-menu-item .next-checkbox,.next-menu[dir=rtl] .next-menu-item .next-radio{margin-left:4px;margin-right:0}.next-menu[dir=rtl] .next-menu-hoz-right{float:left}.next-menu[dir=rtl] .next-menu-hoz-icon-arrow.next-icon{left:6px;right:auto}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon{margin-left:0;margin-right:-16px}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon.next-menu-icon-right{right:auto;left:4px}.next-menu[dir=rtl] .next-menu-icon-arrow.next-icon{left:10px;right:auto}.next-menu{position:relative;min-width:100px;padding:8px 0;margin:0;list-style:none;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;background:#fff;line-height:32px;font-size:12px}.next-menu,.next-menu *,.next-menu :after,.next-menu :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-menu:focus,.next-menu :focus{outline:0}.next-menu-embeddable,.next-menu-embeddable .next-menu-item.next-disabled,.next-menu-embeddable .next-menu-item.next-disabled .next-menu-item-text>a{background:initial;border:none}.next-menu-embeddable .next-menu-item-inner{height:100%}.next-menu-content{position:relative}.next-menu-content,.next-menu-sub-menu{padding:0;margin:0;list-style:none}.next-menu-sub-menu.next-expand-enter{overflow:hidden}.next-menu-sub-menu.next-expand-enter-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-sub-menu.next-expand-leave{overflow:hidden}.next-menu-sub-menu.next-expand-leave-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-item{position:relative;padding:0 20px;-webkit-transition:background .2s ease;transition:background .2s ease;color:#333;cursor:pointer}.next-menu-item-helper{float:right;color:#999;font-style:normal;font-size:12px}.next-menu-item .next-checkbox,.next-menu-item .next-radio{margin-right:4px}.next-menu-item.next-selected{color:#333;background-color:#fff}.next-menu-item.next-selected .next-menu-icon-arrow{color:#666}.next-menu-item.next-selected .next-menu-icon-selected{color:#5584ff}.next-menu-item.next-disabled,.next-menu-item.next-disabled .next-menu-item-text>a{color:#ccc;background-color:#fff;cursor:not-allowed}.next-menu-item.next-disabled .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-icon-selected,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-selected{color:#ccc}.next-menu-item:not(.next-disabled).next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover,.next-menu-item:not(.next-disabled).next-selected:focus,.next-menu-item:not(.next-disabled).next-selected:focus:hover,.next-menu-item:not(.next-disabled).next-selected:hover,.next-menu-item:not(.next-disabled):hover{color:#333;background-color:#f2f3f7}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled):hover .next-menu-icon-arrow{color:#333}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled):hover .next-menu-icon-selected{color:#5584ff}.next-menu-item-inner{height:32px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.next-menu-item-text{vertical-align:middle}.next-menu-item-text>a{display:inline-block;text-decoration:none;color:#333}.next-menu-item-text>a:before{position:absolute;background-color:transparent;top:0;left:0;bottom:0;right:0;content:""}.next-menu.next-hoz{padding:0}.next-menu.next-hoz .next-menu-content>.next-menu-item,.next-menu.next-hoz>.next-menu-item{display:inline-block;vertical-align:top}.next-menu.next-hoz .next-menu-content,.next-menu.next-hoz .next-menu-footer,.next-menu.next-hoz .next-menu-header{display:inline-block}.next-menu-hoz-right{float:right}.next-menu-group-label{padding:0 12px;color:#999}.next-menu-divider{margin:8px 12px;border-bottom:1px solid #e6e7eb}.next-menu .next-menu-icon-selected.next-icon{position:absolute;top:0;margin-left:-16px}.next-menu .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-icon-selected.next-icon.next-menu-icon-right{right:4px}.next-menu .next-menu-icon-arrow.next-icon{position:absolute;top:0;right:10px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-icon-arrow.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow.next-icon:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-icon-arrow-down.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:scale(.5) rotate(180deg);-ms-transform:scale(.5) rotate(180deg);transform:scale(.5) rotate(180deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-down.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.next-menu .next-menu-icon-arrow-right.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:scale(.5) rotate(-90deg);-ms-transform:scale(.5) rotate(-90deg);transform:scale(.5) rotate(-90deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-right.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-hoz-icon-arrow.next-icon{position:absolute;top:0;right:6px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-hoz-icon-arrow.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-hoz-icon-arrow.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-hoz-icon-arrow.next-open:before{width:12px;font-size:12px;line-height:inherit}.next-menu.next-context{line-height:24px}.next-menu.next-context .next-menu-item-inner{height:24px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-split-btn{display:inline-block;position:relative}.next-split-btn-trigger .next-icon{-webkit-transition:-webkit-transform .3s cubic-bezier(.645,.045,.355,1);transition:-webkit-transform .3s cubic-bezier(.645,.045,.355,1);transition:transform .3s cubic-bezier(.645,.045,.355,1);transition:transform .3s cubic-bezier(.645,.045,.355,1),-webkit-transform .3s cubic-bezier(.645,.045,.355,1)}.next-split-btn-trigger.next-expand .next-icon{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-split-btn-trigger.next-btn-normal:not(:disabled):not(.disabled) .next-icon{color:#999}.next-split-btn-trigger.next-small{padding-left:4px;padding-right:4px}.next-split-btn-trigger.next-medium{padding-left:8px;padding-right:8px} \ No newline at end of file diff --git a/demos/split-button/deps.json b/demos/split-button/deps.json new file mode 100644 index 0000000000..32471211ed --- /dev/null +++ b/demos/split-button/deps.json @@ -0,0 +1 @@ +["icon","button","menu","demo-helper"] \ No newline at end of file diff --git a/demos/split-button/index.html b/demos/split-button/index.html new file mode 100644 index 0000000000..a223ab3e5c --- /dev/null +++ b/demos/split-button/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/step/build/index.css b/demos/step/build/index.css new file mode 100644 index 0000000000..b29a8ee678 --- /dev/null +++ b/demos/step/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-progress-circle[dir=rtl] .next-progress-circle-container{-webkit-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scaleX(-1)}.next-progress-line[dir=rtl] .next-progress-line-overlay{left:auto;right:0}.next-progress-line,.next-progress-line *,.next-progress-line :after,.next-progress-line :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-progress-line{width:100%;display:inline-block;position:relative}.next-progress-line-container{display:inline-block;width:100%;vertical-align:middle}.next-progress-line-underlay{position:relative;width:100%;background-color:#ebecf0}.next-progress-line-overlay{position:absolute;left:0;top:0;-webkit-transition:all 1s cubic-bezier(.65,.2,.35,1);transition:all 1s cubic-bezier(.65,.2,.35,1)}.next-progress-line-overlay-normal{background-color:#5584ff}.next-progress-line-overlay-success{background-color:#46bc15}.next-progress-line-overlay-error,.next-progress-line-overlay-started{background-color:#ff3000}.next-progress-line-overlay-middle{background-color:#ff9300}.next-progress-line-overlay-finishing{background-color:#46bc15}.next-progress-line.next-small .next-progress-line-underlay{border-radius:20px;height:4px}.next-progress-line.next-small .next-progress-line-overlay{height:4px;border-radius:20px;top:50%;margin-top:-2px}.next-progress-line.next-small .next-progress-line-text{font-size:12px;line-height:4px}.next-progress-line.next-medium .next-progress-line-underlay{border-radius:20px;height:8px}.next-progress-line.next-medium .next-progress-line-overlay{height:8px;border-radius:20px;top:50%;margin-top:-4px}.next-progress-line.next-medium .next-progress-line-text{font-size:12px;line-height:8px}.next-progress-line.next-large .next-progress-line-underlay{border-radius:20px;height:12px}.next-progress-line.next-large .next-progress-line-overlay{height:12px;border-radius:20px;top:50%;margin-top:-6px}.next-progress-line.next-large .next-progress-line-text{font-size:12px;line-height:12px}.next-progress-line-show-info .next-progress-line-container{padding-right:60px;margin-right:-60px}.next-progress-line-show-info .next-progress-line-text{width:50px;text-align:left;margin-left:10px;vertical-align:middle;display:inline-block;color:#333}.next-progress-line-show-border .next-progress-line-underlay{border:1px solid #dcdee3}.next-progress-line-show-border.next-small .next-progress-line-underlay{border-radius:20px;height:6px}.next-progress-line-show-border.next-small .next-progress-line-overlay{height:4px;border-radius:20px;top:50%;margin-top:-2px}.next-progress-line-show-border.next-small .next-progress-line-text{font-size:12px;line-height:6px}.next-progress-line-show-border.next-medium .next-progress-line-underlay{border-radius:20px;height:10px}.next-progress-line-show-border.next-medium .next-progress-line-overlay{height:8px;border-radius:20px;top:50%;margin-top:-4px}.next-progress-line-show-border.next-medium .next-progress-line-text{font-size:12px;line-height:10px}.next-progress-line-show-border.next-large .next-progress-line-underlay{border-radius:20px;height:14px}.next-progress-line-show-border.next-large .next-progress-line-overlay{height:12px;border-radius:20px;top:50%;margin-top:-6px}.next-progress-line-show-border.next-large .next-progress-line-text{font-size:12px;line-height:14px}.next-progress-circle,.next-progress-circle *,.next-progress-circle :after,.next-progress-circle :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-progress-circle{position:relative;display:inline-block}.next-progress-circle-underlay{stroke-width:8px;stroke:#ebecf0}.next-progress-circle-overlay{-webkit-transition:all 1s cubic-bezier(.65,.2,.35,1);transition:all 1s cubic-bezier(.65,.2,.35,1);stroke-linecap:round;stroke-width:8px}.next-progress-circle-overlay-normal{stroke:#5584ff}.next-progress-circle-overlay-success{stroke:#46bc15}.next-progress-circle-overlay-error,.next-progress-circle-overlay-started{stroke:#ff3000}.next-progress-circle-overlay-middle{stroke:#ff9300}.next-progress-circle-overlay-finishing{stroke:#46bc15}.next-progress-circle.next-small{width:100px;height:100px;font-size:20px}.next-progress-circle.next-medium{width:116px;height:116px;font-size:24px}.next-progress-circle.next-large{width:132px;height:132px;font-size:36px}.next-progress-circle-text{display:block;position:absolute;width:100%;top:50%;left:0;text-align:center;line-height:1;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:-webkit-transform .3s cubic-bezier(.65,.2,.35,1);transition:-webkit-transform .3s cubic-bezier(.65,.2,.35,1);transition:transform .3s cubic-bezier(.65,.2,.35,1);transition:transform .3s cubic-bezier(.65,.2,.35,1),-webkit-transform .3s cubic-bezier(.65,.2,.35,1);color:#333}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-step,.next-step *,.next-step:after,.next-step :after,.next-step:before,.next-step :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-step{width:100%;position:relative;border:none}.next-step-item{position:relative;vertical-align:middle;outline:0;height:100%}.next-step-item-body{outline:0}.next-step-item-node{-webkit-transition:all .2s ease;transition:all .2s ease}.next-step-item-node.clicked{-webkit-transform:scale3d(.8,.8,.8);transform:scale3d(.8,.8,.8)}.next-step-horizontal{overflow:hidden}.next-step-horizontal>.next-step-item{display:inline-block;text-align:left}.next-step-vertical>.next-step-item{display:block;text-align:center}.next-step-arrow{display:-webkit-box;display:-ms-flexbox;display:flex}.next-step-arrow .next-step-item{-webkit-box-flex:1;-ms-flex:1;flex:1;height:32px;line-height:32px;margin-left:16px;margin-right:4px}.next-step-arrow .next-step-item:before{content:"";position:absolute;left:-16px;top:0;z-index:1;border:16px solid transparent;border-left-color:transparent}.next-step-arrow .next-step-item:after{content:"";position:absolute;right:-16px;top:0;z-index:1;border-top:16px solid transparent;border-bottom:16px solid transparent;border-left:16px solid transparent}.next-step-arrow .next-step-item .next-step-item-container{min-width:100px;height:32px;cursor:pointer}.next-step-arrow .next-step-item .next-step-item-container .next-step-item-title{height:32px;line-height:32px;font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}.next-step-arrow>.next-step-item-wait{background:#ebecf0}.next-step-arrow>.next-step-item-wait .next-step-item-tail-overlay{background:#000}.next-step-arrow>.next-step-item-wait .next-step-item-tail-underlay{background:#ccc}.next-step-arrow>.next-step-item-wait>.next-step-item-container .next-step-item-progress{width:32px;height:32px}.next-step-arrow>.next-step-item-wait>.next-step-item-container .next-step-item-node{color:#000}.next-step-arrow>.next-step-item-wait>.next-step-item-container .next-step-item-node-circle,.next-step-arrow>.next-step-item-wait>.next-step-item-container .next-step-item-node-dot{background:#ebecf0;border-color:#000}.next-step-arrow>.next-step-item-wait .next-step-item-title{color:#999;word-break:break-word}.next-step-arrow>.next-step-item-wait .next-step-item-content{color:#999;font-size:12px;word-break:break-word}.next-step-arrow>.next-step-item-wait .next-step-item-node-placeholder{width:32px;height:32px;position:relative}.next-step-arrow>.next-step-item-wait .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-arrow>.next-step-item-wait .next-step-item-node-circle{display:block;width:32px;height:32px;font-size:12px;font-weight:400;line-height:30px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-arrow>.next-step-item-wait .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-arrow>.next-step-item-wait .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-arrow>.next-step-item-wait .next-step-item-node-dot{position:absolute;top:50%;margin-top:-16px;left:50%;margin-left:-16px;display:block;width:32px;height:32px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-arrow>.next-step-item-wait:before{border:16px solid #ebecf0;border-left-color:transparent}.next-step-arrow>.next-step-item-wait:after{border-left-color:#ebecf0}.next-step-arrow>.next-step-item-process{background:#5584ff}.next-step-arrow>.next-step-item-process .next-step-item-tail-overlay{background:#000}.next-step-arrow>.next-step-item-process .next-step-item-tail-underlay{background:#ccc}.next-step-arrow>.next-step-item-process>.next-step-item-container .next-step-item-progress{width:32px;height:32px}.next-step-arrow>.next-step-item-process>.next-step-item-container .next-step-item-node{color:#000}.next-step-arrow>.next-step-item-process>.next-step-item-container .next-step-item-node-circle,.next-step-arrow>.next-step-item-process>.next-step-item-container .next-step-item-node-dot{background:#5584ff;border-color:#000}.next-step-arrow>.next-step-item-process .next-step-item-title{color:#fff;word-break:break-word}.next-step-arrow>.next-step-item-process .next-step-item-content{color:#fff;font-size:12px;word-break:break-word}.next-step-arrow>.next-step-item-process .next-step-item-node-placeholder{width:32px;height:32px;position:relative}.next-step-arrow>.next-step-item-process .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-arrow>.next-step-item-process .next-step-item-node-circle{display:block;width:32px;height:32px;font-size:12px;font-weight:400;line-height:30px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-arrow>.next-step-item-process .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-arrow>.next-step-item-process .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-arrow>.next-step-item-process .next-step-item-node-dot{position:absolute;top:50%;margin-top:-16px;left:50%;margin-left:-16px;display:block;width:32px;height:32px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-arrow>.next-step-item-process:before{border:16px solid #5584ff;border-left-color:transparent}.next-step-arrow>.next-step-item-process:after{border-left-color:#5584ff}.next-step-arrow>.next-step-item-finish{background:#dee8ff}.next-step-arrow>.next-step-item-finish .next-step-item-tail-overlay{background:#000}.next-step-arrow>.next-step-item-finish .next-step-item-tail-underlay{background:#ccc}.next-step-arrow>.next-step-item-finish>.next-step-item-container .next-step-item-progress{width:32px;height:32px}.next-step-arrow>.next-step-item-finish>.next-step-item-container .next-step-item-node{color:#000}.next-step-arrow>.next-step-item-finish>.next-step-item-container .next-step-item-node-circle,.next-step-arrow>.next-step-item-finish>.next-step-item-container .next-step-item-node-dot{background:#dee8ff;border-color:#000}.next-step-arrow>.next-step-item-finish .next-step-item-title{color:#5584ff;word-break:break-word}.next-step-arrow>.next-step-item-finish .next-step-item-content{color:#5584ff;font-size:12px;word-break:break-word}.next-step-arrow>.next-step-item-finish .next-step-item-node-placeholder{width:32px;height:32px;position:relative}.next-step-arrow>.next-step-item-finish .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-arrow>.next-step-item-finish .next-step-item-node-circle{display:block;width:32px;height:32px;font-size:12px;font-weight:400;line-height:30px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-arrow>.next-step-item-finish .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-arrow>.next-step-item-finish .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-arrow>.next-step-item-finish .next-step-item-node-dot{position:absolute;top:50%;margin-top:-16px;left:50%;margin-left:-16px;display:block;width:32px;height:32px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-arrow>.next-step-item-finish:before{border:16px solid #dee8ff;border-left-color:transparent}.next-step-arrow>.next-step-item-finish:after{border-left-color:#dee8ff}.next-step-arrow .next-step-item-disabled{cursor:not-allowed;background:#f7f8fa}.next-step-arrow .next-step-item-disabled .next-step-item-tail-overlay{background:#000}.next-step-arrow .next-step-item-disabled .next-step-item-tail-underlay{background:#ccc}.next-step-arrow .next-step-item-disabled>.next-step-item-container .next-step-item-progress{width:32px;height:32px}.next-step-arrow .next-step-item-disabled>.next-step-item-container .next-step-item-node{color:#000}.next-step-arrow .next-step-item-disabled>.next-step-item-container .next-step-item-node-circle,.next-step-arrow .next-step-item-disabled>.next-step-item-container .next-step-item-node-dot{background:#f7f8fa;border-color:#000}.next-step-arrow .next-step-item-disabled .next-step-item-title{color:#ccc;word-break:break-word}.next-step-arrow .next-step-item-disabled .next-step-item-content{color:#ccc;font-size:12px;word-break:break-word}.next-step-arrow .next-step-item-disabled .next-step-item-node-placeholder{width:32px;height:32px;position:relative}.next-step-arrow .next-step-item-disabled .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-arrow .next-step-item-disabled .next-step-item-node-circle{display:block;width:32px;height:32px;font-size:12px;font-weight:400;line-height:30px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-arrow .next-step-item-disabled .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-arrow .next-step-item-disabled .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-arrow .next-step-item-disabled .next-step-item-node-dot{position:absolute;top:50%;margin-top:-16px;left:50%;margin-left:-16px;display:block;width:32px;height:32px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-arrow .next-step-item-disabled:before{border:16px solid #f7f8fa;border-left-color:transparent}.next-step-arrow .next-step-item-disabled:after{border-left-color:#f7f8fa}.next-step-arrow .next-step-item-disabled .next-step-item-container{cursor:not-allowed}.next-step-arrow .next-step-item-read-only,.next-step-arrow .next-step-item-read-only .next-step-item-container{cursor:default}.next-step-arrow .next-step-item-first{margin-left:0}.next-step-arrow .next-step-item-first:before{border:16px solid transparent}.next-step-arrow .next-step-item-last{margin-right:0}.next-step-arrow .next-step-item-last:after{border:16px solid transparent}.next-step-circle .next-step-item-container{display:inline-block;vertical-align:middle;position:relative;padding:0 8px}.next-step-circle .next-step-item-container .next-step-item-progress .next-progress-circle-text{color:#5584ff;font-size:12px}.next-step-circle .next-step-item-container .next-step-item-progress .next-progress-circle-underlay{stroke:#a0a2ad;stroke-width:4px}.next-step-circle .next-step-item-container .next-step-item-progress .next-progress-circle-overlay-normal{stroke:#5584ff;stroke-width:4px}.next-step-circle .next-step-item-container .next-step-item-node-placeholder{display:inline-block}.next-step-circle>.next-step-item-wait .next-step-item-tail-overlay{background:#c4c6cf}.next-step-circle>.next-step-item-wait .next-step-item-tail-underlay{background:#e6e7eb}.next-step-circle>.next-step-item-wait>.next-step-item-container .next-step-item-progress{width:32px;height:32px}.next-step-circle>.next-step-item-wait>.next-step-item-container .next-step-item-node{color:#666}.next-step-circle>.next-step-item-wait>.next-step-item-container .next-step-item-node-circle,.next-step-circle>.next-step-item-wait>.next-step-item-container .next-step-item-node-dot{background:#fff;border-color:#a0a2ad}.next-step-circle>.next-step-item-wait .next-step-item-title{color:#666;word-break:break-word}.next-step-circle>.next-step-item-wait .next-step-item-content{color:#666;font-size:12px;word-break:break-word}.next-step-circle>.next-step-item-wait .next-step-item-node-placeholder{width:32px;height:32px;position:relative}.next-step-circle>.next-step-item-wait .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-circle>.next-step-item-wait .next-step-item-node-circle{display:block;width:32px;height:32px;font-size:12px;font-weight:400;line-height:30px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-circle>.next-step-item-wait .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-circle>.next-step-item-wait .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-circle>.next-step-item-wait .next-step-item-node-dot{position:absolute;top:50%;margin-top:-16px;left:50%;margin-left:-16px;display:block;width:32px;height:32px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-circle>.next-step-item-process .next-step-item-tail-overlay{background:#c4c6cf}.next-step-circle>.next-step-item-process .next-step-item-tail-underlay{background:#e6e7eb}.next-step-circle>.next-step-item-process>.next-step-item-container .next-step-item-progress{width:32px;height:32px}.next-step-circle>.next-step-item-process>.next-step-item-container .next-step-item-node{color:#fff}.next-step-circle>.next-step-item-process>.next-step-item-container .next-step-item-node-circle,.next-step-circle>.next-step-item-process>.next-step-item-container .next-step-item-node-dot{background:#5584ff;border-color:#5584ff}.next-step-circle>.next-step-item-process .next-step-item-title{color:#333;word-break:break-word}.next-step-circle>.next-step-item-process .next-step-item-content{color:#333;font-size:12px;word-break:break-word}.next-step-circle>.next-step-item-process .next-step-item-node-placeholder{width:32px;height:32px;position:relative}.next-step-circle>.next-step-item-process .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-circle>.next-step-item-process .next-step-item-node-circle{display:block;width:32px;height:32px;font-size:12px;font-weight:400;line-height:30px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-circle>.next-step-item-process .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-circle>.next-step-item-process .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-circle>.next-step-item-process .next-step-item-node-dot{position:absolute;top:50%;margin-top:-16px;left:50%;margin-left:-16px;display:block;width:32px;height:32px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-circle>.next-step-item-finish .next-step-item-tail-overlay{background:#5584ff}.next-step-circle>.next-step-item-finish .next-step-item-tail-underlay{background:#e6e7eb}.next-step-circle>.next-step-item-finish>.next-step-item-container .next-step-item-progress{width:32px;height:32px}.next-step-circle>.next-step-item-finish>.next-step-item-container .next-step-item-node{color:#5584ff}.next-step-circle>.next-step-item-finish>.next-step-item-container .next-step-item-node-circle,.next-step-circle>.next-step-item-finish>.next-step-item-container .next-step-item-node-dot{background:#fff;border-color:#5584ff}.next-step-circle>.next-step-item-finish .next-step-item-title{color:#666;word-break:break-word}.next-step-circle>.next-step-item-finish .next-step-item-content{color:#666;font-size:12px;word-break:break-word}.next-step-circle>.next-step-item-finish .next-step-item-node-placeholder{width:32px;height:32px;position:relative}.next-step-circle>.next-step-item-finish .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-circle>.next-step-item-finish .next-step-item-node-circle{display:block;width:32px;height:32px;font-size:12px;font-weight:400;line-height:30px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-circle>.next-step-item-finish .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-circle>.next-step-item-finish .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-circle>.next-step-item-finish .next-step-item-node-dot{position:absolute;top:50%;margin-top:-16px;left:50%;margin-left:-16px;display:block;width:32px;height:32px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-circle .next-step-item-disabled .next-step-item-tail-overlay,.next-step-circle .next-step-item-disabled .next-step-item-tail-underlay{background:#e6e7eb}.next-step-circle .next-step-item-disabled>.next-step-item-container .next-step-item-progress{width:32px;height:32px}.next-step-circle .next-step-item-disabled>.next-step-item-container .next-step-item-node{color:#ccc}.next-step-circle .next-step-item-disabled>.next-step-item-container .next-step-item-node-circle,.next-step-circle .next-step-item-disabled>.next-step-item-container .next-step-item-node-dot{background:#fff;border-color:#e6e7eb}.next-step-circle .next-step-item-disabled .next-step-item-title{color:#ccc;word-break:break-word}.next-step-circle .next-step-item-disabled .next-step-item-content{color:#ccc;font-size:12px;word-break:break-word}.next-step-circle .next-step-item-disabled .next-step-item-node-placeholder{width:32px;height:32px;position:relative}.next-step-circle .next-step-item-disabled .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-circle .next-step-item-disabled .next-step-item-node-circle{display:block;width:32px;height:32px;font-size:12px;font-weight:400;line-height:30px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-circle .next-step-item-disabled .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-circle .next-step-item-disabled .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-circle .next-step-item-disabled .next-step-item-node-dot{position:absolute;top:50%;margin-top:-16px;left:50%;margin-left:-16px;display:block;width:32px;height:32px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-circle .next-step-item-disabled .next-step-item-node,.next-step-circle .next-step-item-disabled .next-step-item-node-placeholder{cursor:not-allowed}.next-step-circle .next-step-item-read-only .next-step-item-node,.next-step-circle .next-step-item-read-only .next-step-item-node-placeholder{cursor:default}.next-step-circle .next-step-item-last .next-step-item-tail{display:none}.next-step-circle.next-step-horizontal{text-align:center;white-space:nowrap}.next-step-circle.next-step-horizontal>.next-step-item .next-step-item-content,.next-step-circle.next-step-horizontal>.next-step-item .next-step-item-title{white-space:normal}.next-step-circle.next-step-horizontal>.next-step-item-wait .next-step-item-tail{display:inline-block;clear:both;width:calc(100% - 48px);vertical-align:middle}.next-step-circle.next-step-horizontal>.next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay{display:block;height:1px;position:relative}.next-step-circle.next-step-horizontal>.next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:1px;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%}.next-step-circle.next-step-horizontal>.next-step-item-wait>.next-step-item-node{padding:0 8px;width:48px;height:32px}.next-step-circle.next-step-horizontal>.next-step-item-wait>.next-step-item-body{width:100px;left:-26px;text-align:center;position:absolute}.next-step-circle.next-step-horizontal>.next-step-item-wait>.next-step-item-body>.next-step-item-title{font-size:14px;line-height:18px;margin-top:8px;font-weight:700}.next-step-circle.next-step-horizontal>.next-step-item-wait>.next-step-item-body>.next-step-item-content{margin-top:4px}.next-step-circle.next-step-horizontal>.next-step-item-process .next-step-item-tail{display:inline-block;clear:both;width:calc(100% - 48px);vertical-align:middle}.next-step-circle.next-step-horizontal>.next-step-item-process .next-step-item-tail .next-step-item-tail-underlay{display:block;height:1px;position:relative}.next-step-circle.next-step-horizontal>.next-step-item-process .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:1px;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%}.next-step-circle.next-step-horizontal>.next-step-item-process>.next-step-item-node{padding:0 8px;width:48px;height:32px}.next-step-circle.next-step-horizontal>.next-step-item-process>.next-step-item-body{width:100px;left:-26px;text-align:center;position:absolute}.next-step-circle.next-step-horizontal>.next-step-item-process>.next-step-item-body>.next-step-item-title{font-size:14px;line-height:18px;margin-top:8px;font-weight:700}.next-step-circle.next-step-horizontal>.next-step-item-process>.next-step-item-body>.next-step-item-content{margin-top:4px}.next-step-circle.next-step-horizontal>.next-step-item-finish .next-step-item-tail{display:inline-block;clear:both;width:calc(100% - 48px);vertical-align:middle}.next-step-circle.next-step-horizontal>.next-step-item-finish .next-step-item-tail .next-step-item-tail-underlay{display:block;height:1px;position:relative}.next-step-circle.next-step-horizontal>.next-step-item-finish .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:1px;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%}.next-step-circle.next-step-horizontal>.next-step-item-finish>.next-step-item-node{padding:0 8px;width:48px;height:32px}.next-step-circle.next-step-horizontal>.next-step-item-finish>.next-step-item-body{width:100px;left:-26px;text-align:center;position:absolute}.next-step-circle.next-step-horizontal>.next-step-item-finish>.next-step-item-body>.next-step-item-title{font-size:14px;line-height:18px;margin-top:8px;font-weight:700}.next-step-circle.next-step-horizontal>.next-step-item-finish>.next-step-item-body>.next-step-item-content{margin-top:4px}.next-step-circle.next-step-horizontal>.next-step-item-disabled .next-step-item-tail{display:inline-block;clear:both;width:calc(100% - 48px);vertical-align:middle}.next-step-circle.next-step-horizontal>.next-step-item-disabled .next-step-item-tail .next-step-item-tail-underlay{display:block;height:1px;position:relative}.next-step-circle.next-step-horizontal>.next-step-item-disabled .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:1px;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%}.next-step-circle.next-step-horizontal>.next-step-item-disabled>.next-step-item-node{padding:0 8px;width:48px;height:32px}.next-step-circle.next-step-horizontal>.next-step-item-disabled>.next-step-item-body{width:100px;left:-26px;text-align:center;position:absolute}.next-step-circle.next-step-horizontal>.next-step-item-disabled>.next-step-item-body>.next-step-item-title{font-size:14px;line-height:18px;margin-top:8px;font-weight:700}.next-step-circle.next-step-horizontal>.next-step-item-disabled>.next-step-item-body>.next-step-item-content{margin-top:4px}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item{vertical-align:unset}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-wait .next-step-item:last-child .next-step-item-tail{display:none}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-wait .next-step-item-body{position:relative;display:inline-block;top:0;left:0;max-width:100px;overflow:hidden;vertical-align:top;text-align:left}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-wait .next-step-item-body .next-step-item-title{display:inline-block;padding-right:8px;margin-top:9px}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-wait .next-step-item-tail{width:calc(100% - 148px);position:absolute;right:0;margin-top:-1px}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-process .next-step-item:last-child .next-step-item-tail{display:none}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-process .next-step-item-body{position:relative;display:inline-block;top:0;left:0;max-width:100px;overflow:hidden;vertical-align:top;text-align:left}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-process .next-step-item-body .next-step-item-title{display:inline-block;padding-right:8px;margin-top:9px}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-process .next-step-item-tail{width:calc(100% - 148px);position:absolute;right:0;margin-top:-1px}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-finish .next-step-item:last-child .next-step-item-tail{display:none}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-finish .next-step-item-body{position:relative;display:inline-block;top:0;left:0;max-width:100px;overflow:hidden;vertical-align:top;text-align:left}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-finish .next-step-item-body .next-step-item-title{display:inline-block;padding-right:8px;margin-top:9px}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-finish .next-step-item-tail{width:calc(100% - 148px);position:absolute;right:0;margin-top:-1px}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-disabled .next-step-item:last-child .next-step-item-tail{display:none}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-disabled .next-step-item-body{position:relative;display:inline-block;top:0;left:0;max-width:100px;overflow:hidden;vertical-align:top;text-align:left}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-disabled .next-step-item-body .next-step-item-title{display:inline-block;padding-right:8px;margin-top:9px}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-disabled .next-step-item-tail{width:calc(100% - 148px);position:absolute;right:0;margin-top:-1px}.next-step-circle.next-step-vertical{font-size:0;display:table-cell;vertical-align:middle;position:relative}.next-step-circle.next-step-vertical .next-step-item-container{padding:0}.next-step-circle.next-step-vertical>.next-step-item:last-child .next-step-item-tail{display:block;visibility:hidden}.next-step-circle.next-step-vertical>.next-step-item-wait .next-step-item-tail{width:1px;height:0;margin:8px auto}.next-step-circle.next-step-vertical>.next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay{height:100%;width:1px;position:relative}.next-step-circle.next-step-vertical>.next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:100%;width:1px}.next-step-circle.next-step-vertical>.next-step-item-wait>.next-step-item-node{padding:8px 0;width:32px;height:48px}.next-step-circle.next-step-vertical>.next-step-item-wait>.next-step-item-body{position:absolute;top:0;left:16px;margin-left:8px}.next-step-circle.next-step-vertical>.next-step-item-wait>.next-step-item-body>.next-step-item-title{margin-top:8px;text-align:left;font-weight:700;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-circle.next-step-vertical>.next-step-item-wait>.next-step-item-body>.next-step-item-content{margin-top:4px;min-height:8px;text-align:left;font-size:12px;line-height:16px}.next-step-circle.next-step-vertical>.next-step-item-process .next-step-item-tail{width:1px;height:0;margin:8px auto}.next-step-circle.next-step-vertical>.next-step-item-process .next-step-item-tail .next-step-item-tail-underlay{height:100%;width:1px;position:relative}.next-step-circle.next-step-vertical>.next-step-item-process .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:100%;width:1px}.next-step-circle.next-step-vertical>.next-step-item-process>.next-step-item-node{padding:8px 0;width:32px;height:48px}.next-step-circle.next-step-vertical>.next-step-item-process>.next-step-item-body{position:absolute;top:0;left:16px;margin-left:8px}.next-step-circle.next-step-vertical>.next-step-item-process>.next-step-item-body>.next-step-item-title{margin-top:8px;text-align:left;font-weight:700;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-circle.next-step-vertical>.next-step-item-process>.next-step-item-body>.next-step-item-content{margin-top:4px;min-height:8px;text-align:left;font-size:12px;line-height:16px}.next-step-circle.next-step-vertical>.next-step-item-finish .next-step-item-tail{width:1px;height:0;margin:8px auto}.next-step-circle.next-step-vertical>.next-step-item-finish .next-step-item-tail .next-step-item-tail-underlay{height:100%;width:1px;position:relative}.next-step-circle.next-step-vertical>.next-step-item-finish .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:100%;width:1px}.next-step-circle.next-step-vertical>.next-step-item-finish>.next-step-item-node{padding:8px 0;width:32px;height:48px}.next-step-circle.next-step-vertical>.next-step-item-finish>.next-step-item-body{position:absolute;top:0;left:16px;margin-left:8px}.next-step-circle.next-step-vertical>.next-step-item-finish>.next-step-item-body>.next-step-item-title{margin-top:8px;text-align:left;font-weight:700;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-circle.next-step-vertical>.next-step-item-finish>.next-step-item-body>.next-step-item-content{margin-top:4px;min-height:8px;text-align:left;font-size:12px;line-height:16px}.next-step-circle.next-step-vertical>.next-step-item-disabled .next-step-item-tail{width:1px;height:0;margin:8px auto}.next-step-circle.next-step-vertical>.next-step-item-disabled .next-step-item-tail .next-step-item-tail-underlay{height:100%;width:1px;position:relative}.next-step-circle.next-step-vertical>.next-step-item-disabled .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:100%;width:1px}.next-step-circle.next-step-vertical>.next-step-item-disabled>.next-step-item-node{padding:8px 0;width:32px;height:48px}.next-step-circle.next-step-vertical>.next-step-item-disabled>.next-step-item-body{position:absolute;top:0;left:16px;margin-left:8px}.next-step-circle.next-step-vertical>.next-step-item-disabled>.next-step-item-body>.next-step-item-title{margin-top:8px;text-align:left;font-weight:700;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-circle.next-step-vertical>.next-step-item-disabled>.next-step-item-body>.next-step-item-content{margin-top:4px;min-height:8px;text-align:left;font-size:12px;line-height:16px}.next-step-dot .next-step-item-container{display:inline-block;vertical-align:middle;position:relative;padding:0 8px;font-size:0}.next-step-dot .next-step-item-container .next-step-item-node-placeholder{display:inline-block}.next-step-dot .next-step-item-container .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-dot .next-step-item-container .next-step-item-node .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-dot>.next-step-item-wait .next-step-item-tail-overlay{background:#c4c6cf}.next-step-dot>.next-step-item-wait .next-step-item-tail-underlay{background:#e6e7eb}.next-step-dot>.next-step-item-wait>.next-step-item-container .next-step-item-progress{width:12px;height:12px}.next-step-dot>.next-step-item-wait>.next-step-item-container .next-step-item-node{color:#999}.next-step-dot>.next-step-item-wait>.next-step-item-container .next-step-item-node-circle,.next-step-dot>.next-step-item-wait>.next-step-item-container .next-step-item-node-dot{background:#fff;border-color:#a0a2ad}.next-step-dot>.next-step-item-wait .next-step-item-title{color:#666;word-break:break-word}.next-step-dot>.next-step-item-wait .next-step-item-content{color:#666;font-size:12px;word-break:break-word}.next-step-dot>.next-step-item-wait .next-step-item-node-placeholder{width:12px;height:12px;position:relative}.next-step-dot>.next-step-item-wait .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-dot>.next-step-item-wait .next-step-item-node-circle{display:block;width:12px;height:12px;font-size:12px;font-weight:400;line-height:10px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-dot>.next-step-item-wait .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-dot>.next-step-item-wait .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-dot>.next-step-item-wait .next-step-item-node-dot{position:absolute;top:50%;margin-top:-6px;left:50%;margin-left:-6px;display:block;width:12px;height:12px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-dot>.next-step-item-process .next-step-item-tail-overlay{background:#c4c6cf}.next-step-dot>.next-step-item-process .next-step-item-tail-underlay{background:#e6e7eb}.next-step-dot>.next-step-item-process>.next-step-item-container .next-step-item-progress{width:12px;height:12px}.next-step-dot>.next-step-item-process>.next-step-item-container .next-step-item-node{color:#5584ff}.next-step-dot>.next-step-item-process>.next-step-item-container .next-step-item-node-circle,.next-step-dot>.next-step-item-process>.next-step-item-container .next-step-item-node-dot{background:#5584ff;border-color:#5584ff}.next-step-dot>.next-step-item-process .next-step-item-title{color:#333;word-break:break-word}.next-step-dot>.next-step-item-process .next-step-item-content{color:#333;font-size:12px;word-break:break-word}.next-step-dot>.next-step-item-process .next-step-item-node-placeholder{width:12px;height:12px;position:relative}.next-step-dot>.next-step-item-process .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-dot>.next-step-item-process .next-step-item-node-circle{display:block;width:12px;height:12px;font-size:12px;font-weight:400;line-height:10px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-dot>.next-step-item-process .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-dot>.next-step-item-process .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-dot>.next-step-item-process .next-step-item-node-dot{position:absolute;top:50%;margin-top:-6px;left:50%;margin-left:-6px;display:block;width:12px;height:12px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-dot>.next-step-item-finish .next-step-item-tail-overlay{background:#5584ff}.next-step-dot>.next-step-item-finish .next-step-item-tail-underlay{background:#e6e7eb}.next-step-dot>.next-step-item-finish>.next-step-item-container .next-step-item-progress{width:12px;height:12px}.next-step-dot>.next-step-item-finish>.next-step-item-container .next-step-item-node{color:#5584ff}.next-step-dot>.next-step-item-finish>.next-step-item-container .next-step-item-node-circle,.next-step-dot>.next-step-item-finish>.next-step-item-container .next-step-item-node-dot{background:#fff;border-color:#5584ff}.next-step-dot>.next-step-item-finish .next-step-item-title{color:#666;word-break:break-word}.next-step-dot>.next-step-item-finish .next-step-item-content{color:#666;font-size:12px;word-break:break-word}.next-step-dot>.next-step-item-finish .next-step-item-node-placeholder{width:12px;height:12px;position:relative}.next-step-dot>.next-step-item-finish .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-dot>.next-step-item-finish .next-step-item-node-circle{display:block;width:12px;height:12px;font-size:12px;font-weight:400;line-height:10px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-dot>.next-step-item-finish .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-dot>.next-step-item-finish .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-dot>.next-step-item-finish .next-step-item-node-dot{position:absolute;top:50%;margin-top:-6px;left:50%;margin-left:-6px;display:block;width:12px;height:12px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-dot .next-step-item-disabled .next-step-item-tail-overlay,.next-step-dot .next-step-item-disabled .next-step-item-tail-underlay{background:#e6e7eb}.next-step-dot .next-step-item-disabled>.next-step-item-container .next-step-item-progress{width:12px;height:12px}.next-step-dot .next-step-item-disabled>.next-step-item-container .next-step-item-node{color:#e6e7eb}.next-step-dot .next-step-item-disabled>.next-step-item-container .next-step-item-node-circle,.next-step-dot .next-step-item-disabled>.next-step-item-container .next-step-item-node-dot{background:#fff;border-color:#dcdee3}.next-step-dot .next-step-item-disabled .next-step-item-title{color:#ccc;word-break:break-word}.next-step-dot .next-step-item-disabled .next-step-item-content{color:#ccc;font-size:12px;word-break:break-word}.next-step-dot .next-step-item-disabled .next-step-item-node-placeholder{width:12px;height:12px;position:relative}.next-step-dot .next-step-item-disabled .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-dot .next-step-item-disabled .next-step-item-node-circle{display:block;width:12px;height:12px;font-size:12px;font-weight:400;line-height:10px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-dot .next-step-item-disabled .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-dot .next-step-item-disabled .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-dot .next-step-item-disabled .next-step-item-node-dot{position:absolute;top:50%;margin-top:-6px;left:50%;margin-left:-6px;display:block;width:12px;height:12px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-dot .next-step-item-disabled .next-step-item-node,.next-step-dot .next-step-item-disabled .next-step-item-node-placeholder{cursor:not-allowed}.next-step-dot .next-step-item-read-only .next-step-item-node,.next-step-dot .next-step-item-read-only .next-step-item-node-placeholder{cursor:default}.next-step-dot .next-step-item-last .next-step-item-tail{display:none}.next-step-dot.next-step-horizontal{text-align:center;white-space:nowrap}.next-step-dot.next-step-horizontal>.next-step-item .next-step-item-content,.next-step-dot.next-step-horizontal>.next-step-item .next-step-item-title{white-space:normal}.next-step-dot.next-step-horizontal .next-step-item-node .next-icon{vertical-align:middle}.next-step-dot.next-step-horizontal>.next-step-item-wait .next-step-item-tail{display:inline-block;clear:both;width:calc(100% - 28px);vertical-align:middle}.next-step-dot.next-step-horizontal>.next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay{display:block;height:1px;position:relative}.next-step-dot.next-step-horizontal>.next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:1px;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%}.next-step-dot.next-step-horizontal>.next-step-item-wait>.next-step-item-node{padding:0 8px;width:28px;height:12px}.next-step-dot.next-step-horizontal>.next-step-item-wait>.next-step-item-body{width:100px;left:-36px;text-align:center;position:absolute}.next-step-dot.next-step-horizontal>.next-step-item-wait>.next-step-item-body>.next-step-item-title{font-size:12px;line-height:16px;margin-top:8px;font-weight:700}.next-step-dot.next-step-horizontal>.next-step-item-wait>.next-step-item-body>.next-step-item-content{margin-top:4px}.next-step-dot.next-step-horizontal>.next-step-item-process .next-step-item-tail{display:inline-block;clear:both;width:calc(100% - 28px);vertical-align:middle}.next-step-dot.next-step-horizontal>.next-step-item-process .next-step-item-tail .next-step-item-tail-underlay{display:block;height:1px;position:relative}.next-step-dot.next-step-horizontal>.next-step-item-process .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:1px;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%}.next-step-dot.next-step-horizontal>.next-step-item-process>.next-step-item-node{padding:0 8px;width:28px;height:12px}.next-step-dot.next-step-horizontal>.next-step-item-process>.next-step-item-body{width:100px;left:-36px;text-align:center;position:absolute}.next-step-dot.next-step-horizontal>.next-step-item-process>.next-step-item-body>.next-step-item-title{font-size:12px;line-height:16px;margin-top:8px;font-weight:700}.next-step-dot.next-step-horizontal>.next-step-item-process>.next-step-item-body>.next-step-item-content{margin-top:4px}.next-step-dot.next-step-horizontal>.next-step-item-finish .next-step-item-tail{display:inline-block;clear:both;width:calc(100% - 28px);vertical-align:middle}.next-step-dot.next-step-horizontal>.next-step-item-finish .next-step-item-tail .next-step-item-tail-underlay{display:block;height:1px;position:relative}.next-step-dot.next-step-horizontal>.next-step-item-finish .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:1px;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%}.next-step-dot.next-step-horizontal>.next-step-item-finish>.next-step-item-node{padding:0 8px;width:28px;height:12px}.next-step-dot.next-step-horizontal>.next-step-item-finish>.next-step-item-body{width:100px;left:-36px;text-align:center;position:absolute}.next-step-dot.next-step-horizontal>.next-step-item-finish>.next-step-item-body>.next-step-item-title{font-size:12px;line-height:16px;margin-top:8px;font-weight:700}.next-step-dot.next-step-horizontal>.next-step-item-finish>.next-step-item-body>.next-step-item-content{margin-top:4px}.next-step-dot.next-step-horizontal>.next-step-item-disabled .next-step-item-tail{display:inline-block;clear:both;width:calc(100% - 28px);vertical-align:middle}.next-step-dot.next-step-horizontal>.next-step-item-disabled .next-step-item-tail .next-step-item-tail-underlay{display:block;height:1px;position:relative}.next-step-dot.next-step-horizontal>.next-step-item-disabled .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:1px;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%}.next-step-dot.next-step-horizontal>.next-step-item-disabled>.next-step-item-node{padding:0 8px;width:28px;height:12px}.next-step-dot.next-step-horizontal>.next-step-item-disabled>.next-step-item-body{width:100px;left:-36px;text-align:center;position:absolute}.next-step-dot.next-step-horizontal>.next-step-item-disabled>.next-step-item-body>.next-step-item-title{font-size:12px;line-height:16px;margin-top:8px;font-weight:700}.next-step-dot.next-step-horizontal>.next-step-item-disabled>.next-step-item-body>.next-step-item-content{margin-top:4px}.next-step-dot.next-step-vertical{padding:0 0 0 4px;font-size:0;display:table-cell;position:relative}.next-step-dot.next-step-vertical .next-step-item-container{padding:0}.next-step-dot.next-step-vertical>.next-step-item:last-child .next-step-item-tail{display:block;visibility:hidden}.next-step-dot.next-step-vertical>.next-step-item-wait .next-step-item-tail{width:1px;height:0;margin:8px auto}.next-step-dot.next-step-vertical>.next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay{height:100%;width:1px;position:relative}.next-step-dot.next-step-vertical>.next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:100%;width:1px}.next-step-dot.next-step-vertical>.next-step-item-wait>.next-step-item-node{padding:8px 0;width:12px;height:28px}.next-step-dot.next-step-vertical>.next-step-item-wait>.next-step-item-body{position:absolute;top:0;left:6px;margin-left:8px}.next-step-dot.next-step-vertical>.next-step-item-wait>.next-step-item-body>.next-step-item-title{margin-top:0;font-weight:700;text-align:left;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-dot.next-step-vertical>.next-step-item-wait>.next-step-item-body>.next-step-item-content{margin-top:8px;min-height:8px;text-align:left;font-size:12px;line-height:16px}.next-step-dot.next-step-vertical>.next-step-item-process .next-step-item-tail{width:1px;height:0;margin:8px auto}.next-step-dot.next-step-vertical>.next-step-item-process .next-step-item-tail .next-step-item-tail-underlay{height:100%;width:1px;position:relative}.next-step-dot.next-step-vertical>.next-step-item-process .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:100%;width:1px}.next-step-dot.next-step-vertical>.next-step-item-process>.next-step-item-node{padding:8px 0;width:12px;height:28px}.next-step-dot.next-step-vertical>.next-step-item-process>.next-step-item-body{position:absolute;top:0;left:6px;margin-left:8px}.next-step-dot.next-step-vertical>.next-step-item-process>.next-step-item-body>.next-step-item-title{margin-top:0;font-weight:700;text-align:left;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-dot.next-step-vertical>.next-step-item-process>.next-step-item-body>.next-step-item-content{margin-top:8px;min-height:8px;text-align:left;font-size:12px;line-height:16px}.next-step-dot.next-step-vertical>.next-step-item-finish .next-step-item-tail{width:1px;height:0;margin:8px auto}.next-step-dot.next-step-vertical>.next-step-item-finish .next-step-item-tail .next-step-item-tail-underlay{height:100%;width:1px;position:relative}.next-step-dot.next-step-vertical>.next-step-item-finish .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:100%;width:1px}.next-step-dot.next-step-vertical>.next-step-item-finish>.next-step-item-node{padding:8px 0;width:12px;height:28px}.next-step-dot.next-step-vertical>.next-step-item-finish>.next-step-item-body{position:absolute;top:0;left:6px;margin-left:8px}.next-step-dot.next-step-vertical>.next-step-item-finish>.next-step-item-body>.next-step-item-title{margin-top:0;font-weight:700;text-align:left;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-dot.next-step-vertical>.next-step-item-finish>.next-step-item-body>.next-step-item-content{margin-top:8px;min-height:8px;text-align:left;font-size:12px;line-height:16px}.next-step-dot.next-step-vertical>.next-step-item-disabled .next-step-item-tail{width:1px;height:0;margin:8px auto}.next-step-dot.next-step-vertical>.next-step-item-disabled .next-step-item-tail .next-step-item-tail-underlay{height:100%;width:1px;position:relative}.next-step-dot.next-step-vertical>.next-step-item-disabled .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:100%;width:1px}.next-step-dot.next-step-vertical>.next-step-item-disabled>.next-step-item-node{padding:8px 0;width:12px;height:28px}.next-step-dot.next-step-vertical>.next-step-item-disabled>.next-step-item-body{position:absolute;top:0;left:6px;margin-left:8px}.next-step-dot.next-step-vertical>.next-step-item-disabled>.next-step-item-body>.next-step-item-title{margin-top:0;font-weight:700;text-align:left;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-dot.next-step-vertical>.next-step-item-disabled>.next-step-item-body>.next-step-item-content{margin-top:8px;min-height:8px;text-align:left;font-size:12px;line-height:16px}.next-step-horizontal[dir=rtl]>.next-step-item{text-align:right}.next-step-arrow[dir=rtl] .next-step-item{height:32px;line-height:32px;margin-left:4px;margin-right:16px}.next-step-arrow[dir=rtl] .next-step-item:before{right:-16px;left:auto;border:16px solid transparent;border-right-color:transparent}.next-step-arrow[dir=rtl] .next-step-item:after{left:-32px;right:auto;border-top:16px solid transparent;border-bottom:16px solid transparent;border-right:16px solid transparent}.next-step-arrow[dir=rtl]>.next-step-item-wait{background:#ebecf0}.next-step-arrow[dir=rtl]>.next-step-item-wait .next-step-item-node-dot{right:50%;left:auto}.next-step-arrow[dir=rtl]>.next-step-item-wait:before{border:16px solid #ebecf0;border-right-color:transparent}.next-step-arrow[dir=rtl]>.next-step-item-wait:after{border-right-color:#ebecf0;border-left-color:transparent}.next-step-arrow[dir=rtl]>.next-step-item-process{background:#5584ff}.next-step-arrow[dir=rtl]>.next-step-item-process .next-step-item-node-dot{right:50%;left:auto}.next-step-arrow[dir=rtl]>.next-step-item-process:before{border:16px solid #5584ff;border-right-color:transparent}.next-step-arrow[dir=rtl]>.next-step-item-process:after{border-right-color:#5584ff;border-left-color:transparent}.next-step-arrow[dir=rtl]>.next-step-item-finish{background:#dee8ff}.next-step-arrow[dir=rtl]>.next-step-item-finish .next-step-item-node-dot{right:50%;left:auto}.next-step-arrow[dir=rtl]>.next-step-item-finish:before{border:16px solid #dee8ff;border-right-color:transparent}.next-step-arrow[dir=rtl]>.next-step-item-finish:after{border-right-color:#dee8ff;border-left-color:transparent}.next-step-arrow[dir=rtl] .next-step-item-disabled{background:#f7f8fa}.next-step-arrow[dir=rtl] .next-step-item-disabled .next-step-item-node-dot{right:50%;left:auto}.next-step-arrow[dir=rtl] .next-step-item-disabled:before{border:16px solid #f7f8fa;border-right-color:transparent}.next-step-arrow[dir=rtl] .next-step-item-disabled:after{border-right-color:#f7f8fa;border-left-color:transparent}.next-step-arrow[dir=rtl] .next-step-item-first{margin-right:0}.next-step-arrow[dir=rtl] .next-step-item-last{margin-left:0}.next-step-circle[dir=rtl] .next-step-item-disabled .next-step-item-node-dot,.next-step-circle[dir=rtl]>.next-step-item-finish .next-step-item-node-dot,.next-step-circle[dir=rtl]>.next-step-item-process .next-step-item-node-dot,.next-step-circle[dir=rtl]>.next-step-item-wait .next-step-item-node-dot{right:50%;left:auto}.next-step-circle[dir=rtl].next-step-horizontal>.next-step-item-disabled>.next-step-item-body,.next-step-circle[dir=rtl].next-step-horizontal>.next-step-item-finish>.next-step-item-body,.next-step-circle[dir=rtl].next-step-horizontal>.next-step-item-process>.next-step-item-body,.next-step-circle[dir=rtl].next-step-horizontal>.next-step-item-wait>.next-step-item-body{right:-26px;left:auto}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-wait .next-step-item-body{left:auto;right:0;text-align:right}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-wait .next-step-item-body .next-step-item-title{padding-left:8px;padding-right:0}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-wait .next-step-item-tail{left:0;right:auto}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-process .next-step-item-body{left:auto;right:0;text-align:right}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-process .next-step-item-body .next-step-item-title{padding-left:8px;padding-right:0}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-process .next-step-item-tail{left:0;right:auto}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-finish .next-step-item-body{left:auto;right:0;text-align:right}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-finish .next-step-item-body .next-step-item-title{padding-left:8px;padding-right:0}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-finish .next-step-item-tail{left:0;right:auto}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-disabled .next-step-item-body{left:auto;right:0;text-align:right}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-disabled .next-step-item-body .next-step-item-title{padding-left:8px;padding-right:0}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-disabled .next-step-item-tail{left:0;right:auto}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-wait>.next-step-item-body{right:16px;left:auto;margin-right:8px;margin-left:0}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-wait>.next-step-item-body>.next-step-item-title{text-align:right;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-wait>.next-step-item-body>.next-step-item-content{text-align:right}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-process>.next-step-item-body{right:16px;left:auto;margin-right:8px;margin-left:0}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-process>.next-step-item-body>.next-step-item-title{text-align:right;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-process>.next-step-item-body>.next-step-item-content{text-align:right}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-finish>.next-step-item-body{right:16px;left:auto;margin-right:8px;margin-left:0}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-finish>.next-step-item-body>.next-step-item-title{text-align:right;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-finish>.next-step-item-body>.next-step-item-content{text-align:right}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-disabled>.next-step-item-body{right:16px;left:auto;margin-right:8px;margin-left:0}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-disabled>.next-step-item-body>.next-step-item-title{text-align:right;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-disabled>.next-step-item-body>.next-step-item-content{text-align:right}.next-step-dot[dir=rtl] .next-step-item-disabled .next-step-item-node-dot,.next-step-dot[dir=rtl]>.next-step-item-finish .next-step-item-node-dot,.next-step-dot[dir=rtl]>.next-step-item-process .next-step-item-node-dot,.next-step-dot[dir=rtl]>.next-step-item-wait .next-step-item-node-dot{right:50%;left:auto}.next-step-dot[dir=rtl].next-step-horizontal>.next-step-item-disabled>.next-step-item-body,.next-step-dot[dir=rtl].next-step-horizontal>.next-step-item-finish>.next-step-item-body,.next-step-dot[dir=rtl].next-step-horizontal>.next-step-item-process>.next-step-item-body,.next-step-dot[dir=rtl].next-step-horizontal>.next-step-item-wait>.next-step-item-body{right:-36px;left:auto}.next-step-dot[dir=rtl].next-step-vertical{padding:0 4px 0 0}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-wait>.next-step-item-body{right:6px;left:auto;margin-right:8px;margin-left:0}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-wait>.next-step-item-body>.next-step-item-title{text-align:right;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-wait>.next-step-item-body>.next-step-item-content{text-align:right}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-process>.next-step-item-body{right:6px;left:auto;margin-right:8px;margin-left:0}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-process>.next-step-item-body>.next-step-item-title{text-align:right;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-process>.next-step-item-body>.next-step-item-content{text-align:right}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-finish>.next-step-item-body{right:6px;left:auto;margin-right:8px;margin-left:0}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-finish>.next-step-item-body>.next-step-item-title{text-align:right;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-finish>.next-step-item-body>.next-step-item-content{text-align:right}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-disabled>.next-step-item-body{right:6px;left:auto;margin-right:8px;margin-left:0}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-disabled>.next-step-item-body>.next-step-item-title{text-align:right;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-disabled>.next-step-item-body>.next-step-item-content{text-align:right} \ No newline at end of file diff --git a/demos/step/deps.json b/demos/step/deps.json new file mode 100644 index 0000000000..a59c673d5c --- /dev/null +++ b/demos/step/deps.json @@ -0,0 +1 @@ +["animate","icon","progress","demo-helper"] \ No newline at end of file diff --git a/demos/step/index.html b/demos/step/index.html new file mode 100644 index 0000000000..475aff00bf --- /dev/null +++ b/demos/step/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/switch/build/index.css b/demos/switch/build/index.css new file mode 100644 index 0000000000..ef048706be --- /dev/null +++ b/demos/switch/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-switch:after[dir=rtl]{content:" ";-webkit-transition:all .4s cubic-bezier(.78,.14,.15,.86);transition:all .4s cubic-bezier(.78,.14,.15,.86);-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center}.next-switch-medium[dir=rtl]:after,.next-switch-small[dir=rtl]:after{right:100%;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.next-switch-on[dir=rtl]>.next-switch-children{right:10px;left:auto;color:#fff}.next-switch-on[disabled][dir=rtl]:after{left:0;right:100%;-webkit-box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);box-shadow:1px 1px 3px 0 rgba(0,0,0,.12)}.next-switch-on.next-switch-small[dir=rtl]>.next-switch-children{right:6px;left:auto}.next-switch-off[dir=rtl]:after{right:0;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-box-shadow:-1px 0 3px 0 rgba(0,0,0,.12);box-shadow:-1px 0 3px 0 rgba(0,0,0,.12)}.next-switch-off[dir=rtl]>.next-switch-children{left:10px;right:auto}.next-switch-off.next-switch-small[dir=rtl]>.next-switch-children{left:5px;right:auto}.next-switch{outline:none;text-align:left;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);overflow:hidden;cursor:pointer}.next-switch,.next-switch *,.next-switch :after,.next-switch :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-switch:after{content:" ";-webkit-transition:all .4s cubic-bezier(.78,.14,.15,.86);transition:all .4s cubic-bezier(.78,.14,.15,.86);-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}.next-switch-medium{position:relative;display:inline-block;width:56px;height:26px}.next-switch-medium,.next-switch-medium:after{border:1px solid transparent;border-radius:20px}.next-switch-medium:after{position:absolute;left:100%;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);width:24px;height:24px;-webkit-box-sizing:border-box;box-sizing:border-box}.next-switch-medium>.next-switch-children{font-size:12px;position:absolute;height:24px;line-height:24px}.next-switch-small{position:relative;display:inline-block;width:44px;height:22px}.next-switch-small,.next-switch-small:after{border:1px solid transparent;border-radius:20px}.next-switch-small:after{position:absolute;left:100%;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);width:20px;height:20px;-webkit-box-sizing:border-box;box-sizing:border-box}.next-switch-small>.next-switch-children{font-size:12px;position:absolute;height:20px;line-height:20px}.next-switch-on{background-color:#5584ff}.next-switch-on:after{-webkit-box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#fff;border-color:transparent}.next-switch-on>.next-switch-children{left:10px;color:#fff}.next-switch-on:focus,.next-switch-on:hover{background-color:#3e71f7}.next-switch-on:focus:after,.next-switch-on:hover:after{background-color:#fff}.next-switch-on.next-switch-small>.next-switch-children{left:6px}.next-switch-on[disabled]{background-color:#ebecf0;cursor:not-allowed}.next-switch-on[disabled]:after{right:0;-webkit-box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#f7f8fa;border-color:#e6e7eb}.next-switch-on[disabled]>.next-switch-children{color:#ccc}.next-switch-off{background-color:#fff;border-color:#c4c6cf}.next-switch-off:focus,.next-switch-off:hover{background-color:#f2f3f7;border-color:#c4c6cf}.next-switch-off:after{left:0;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#fff;border-color:transparent}.next-switch-off:after:focus,.next-switch-off:after:hover{background-color:#fff}.next-switch-off>.next-switch-children{right:10px;color:#999}.next-switch-off[disabled]{background-color:#f7f8fa;cursor:not-allowed}.next-switch-off[disabled]:after{-webkit-box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#f7f8fa;border-color:#e6e7eb}.next-switch-off[disabled]>.next-switch-children{color:#c4c6cf}.next-switch-off.next-switch-small>.next-switch-children{right:5px} \ No newline at end of file diff --git a/demos/switch/deps.json b/demos/switch/deps.json new file mode 100644 index 0000000000..6d2f9c00cb --- /dev/null +++ b/demos/switch/deps.json @@ -0,0 +1 @@ +["demo-helper"] \ No newline at end of file diff --git a/demos/switch/index.html b/demos/switch/index.html new file mode 100644 index 0000000000..a81ed7720d --- /dev/null +++ b/demos/switch/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/tab/build/index.css b/demos/tab/build/index.css new file mode 100644 index 0000000000..977ab6f9dd --- /dev/null +++ b/demos/tab/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-overlay-wrapper .next-overlay-inner{z-index:1001}.next-overlay-wrapper .next-overlay-backdrop{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;background:#000;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0}.next-overlay-wrapper.opened .next-overlay-backdrop{opacity:.2}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-radio-button-large[dir=rtl]>label:first-child{margin-left:-1px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.next-radio-button-large[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large[dir=rtl] .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-wrapper[dir=rtl] .next-radio-label{margin-left:0;margin-right:4px}.next-radio-group[dir=rtl] .next-radio-label{margin-right:4px;margin-left:16px}.next-radio-button[dir=rtl]>label .next-radio-label{margin:0}.next-radio-wrapper{outline:0}.next-radio-wrapper .next-radio{display:inline-block;vertical-align:middle;position:relative;line-height:1}.next-radio-wrapper .next-radio,.next-radio-wrapper .next-radio *,.next-radio-wrapper .next-radio :after,.next-radio-wrapper .next-radio :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-radio-wrapper .next-radio input[type=radio]{opacity:0;position:absolute;vertical-align:middle;top:0;left:0;width:16px;height:16px;margin:0}.next-radio-wrapper .next-radio-inner{display:block;width:16px;height:16px;background:#fff;border-radius:50%;border:1px solid #c4c6cf;-webkit-transition:all .36s ease 0s;transition:all .36s ease 0s;-webkit-box-shadow:none;box-shadow:none}.next-radio-wrapper .next-radio-inner:after{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;border-radius:50%;top:50%;margin-top:-2px;left:50%;margin-left:-2px;background:#fff;content:" ";-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86)}.next-radio-wrapper.checked .next-radio-inner{border-color:#5584ff;background:#5584ff}.next-radio-wrapper.checked .next-radio-inner:after{width:4px;height:4px;font-weight:700;background:#fff;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.next-radio-wrapper.checked.hovered .next-radio-inner,.next-radio-wrapper.checked:hover .next-radio-inner{border-color:transparent}.next-radio-wrapper.disabled input[type=radio]{cursor:not-allowed}.next-radio-wrapper.disabled .next-radio-inner{border-color:#e6e7eb;background:#f7f8fa}.next-radio-wrapper.disabled.checked .next-radio-inner,.next-radio-wrapper.disabled .next-radio-inner.hovered,.next-radio-wrapper.disabled .next-radio-inner:hover{border-color:#e6e7eb}.next-radio-wrapper.disabled.checked .next-radio-inner:after{background:#ccc}.next-radio-wrapper:not(.disabled).focused .next-radio-inner,.next-radio-wrapper:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper:not(.disabled):focus .next-radio-inner,.next-radio-wrapper:not(.disabled):hover .next-radio-inner{border-color:#5584ff;background-color:#dee8ff}.next-radio-wrapper.checked.focused .next-radio-inner,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner{border-color:transparent;background:#3e71f7}.next-radio-wrapper.checked.focused .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner:after{background:#fff}.next-radio-button .next-radio,.next-radio-button input[type=radio]{width:0;height:0}.next-radio-button>label{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1;margin:0 0 0 -1px;border:1px solid #c4c6cf;background-color:#fff;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;vertical-align:middle}.next-radio-button>label .next-radio-label{display:block;color:#333;margin:0;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}.next-radio-button>label.hovered,.next-radio-button>label:focus,.next-radio-button>label:hover{z-index:10;border-color:#a0a2ad;background-color:#f2f3f7}.next-radio-button>label.hovered .next-radio-label,.next-radio-button>label:focus .next-radio-label,.next-radio-button>label:hover .next-radio-label{color:#333}.next-radio-button>label.checked{z-index:11;border-color:#5584ff;background-color:#fff}.next-radio-button>label.checked .next-radio-label{color:#5584ff}.next-radio-button>label.disabled{z-index:0;cursor:not-allowed;border-color:#e6e7eb;background-color:#f7f8fa}.next-radio-button>label.disabled .next-radio-label{color:#ccc}.next-radio-button>label.checked.disabled{z-index:0;border-color:#e6e7eb;background-color:#f2f3f7}.next-radio-button>label.checked.disabled .next-radio-label{color:#ccc}.next-radio-button-large>label{padding:0 8px;height:40px;line-height:40px}.next-radio-button-large>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-large .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium>label{padding:0 8px;height:28px;line-height:28px}.next-radio-button-medium>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-medium>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium .next-radio-label{height:26px;line-height:26px;font-size:12px}.next-radio-button-small>label{padding:0 8px;height:20px;line-height:20px}.next-radio-button-small>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small .next-radio-label{height:18px;line-height:18px;font-size:12px}.next-radio-single-input input[type=radio]{opacity:0;position:absolute;top:0;left:0;margin:0}.next-radio-group{display:inline-block}.next-radio-group .next-radio-label{color:#333;margin-right:16px}.next-radio-group.disabled .next-radio-label{color:#ccc}.next-radio-group-ver .next-radio-wrapper{display:block;margin-bottom:8px}.next-radio-label{margin:0;margin-left:4px;font-size:12px;vertical-align:middle;line-height:1}@-moz-document url-prefix(){.next-radio{margin-top:-1px}@supports ((-webkit-animation:calc(0s)) or (animation:calc(0s))){.next-radio{margin-top:-3px}}}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-checkbox-wrapper[dir=rtl]{margin-right:8px;margin-left:0}.next-checkbox-wrapper[dir=rtl]:first-child{margin-right:0}.next-checkbox-wrapper[dir=rtl]>.next-checkbox-label{margin-right:4px;margin-left:0}.next-checkbox-wrapper,.next-checkbox-wrapper *,.next-checkbox-wrapper :after,.next-checkbox-wrapper :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-checkbox-wrapper .next-checkbox{display:inline-block;position:relative;line-height:1;vertical-align:middle}.next-checkbox-wrapper input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:16px;height:16px;margin:0}.next-checkbox-wrapper .next-checkbox-inner{display:block;width:16px;height:16px;background:#fff;border-radius:3px;border:1px solid #c4c6cf;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;text-align:left;-webkit-box-shadow:none;box-shadow:none}.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;top:0;opacity:0;line-height:16px;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);color:#fff;left:4px;margin-left:0}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{vertical-align:top;margin-top:0}.next-checkbox-wrapper.checked .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.checked .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);margin-left:0}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.indeterminate .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.indeterminate .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1);margin-left:0}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.disabled input[type=checkbox]{cursor:not-allowed}.next-checkbox-wrapper.disabled .next-checkbox-inner{border-color:#e6e7eb;background:#f7f8fa}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover{border-color:#e6e7eb}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner>.next-icon{color:#ccc;opacity:1}.next-checkbox-wrapper.focused .next-checkbox-inner,.next-checkbox-wrapper.hovered .next-checkbox-inner,.next-checkbox-wrapper:not(.disabled):hover .next-checkbox-inner{border-color:#5584ff;background-color:#dee8ff}.next-checkbox-wrapper.checked.focused .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner{border-color:transparent;background-color:#3e71f7}.next-checkbox-wrapper.checked.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner>.next-icon{color:#fff;opacity:1}.next-checkbox-group .next-checkbox-wrapper{margin-left:8px}.next-checkbox-group .next-checkbox-wrapper:first-child{margin-left:0}.next-checkbox-group-ver .next-checkbox-wrapper{display:block;margin-left:0;margin-right:0;margin-bottom:8px}.next-checkbox-label{font-size:12px;vertical-align:middle;margin:0;margin-left:4px;line-height:1}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-menu[dir=rtl] .next-menu-item-helper{float:left}.next-menu[dir=rtl] .next-menu-item .next-checkbox,.next-menu[dir=rtl] .next-menu-item .next-radio{margin-left:4px;margin-right:0}.next-menu[dir=rtl] .next-menu-hoz-right{float:left}.next-menu[dir=rtl] .next-menu-hoz-icon-arrow.next-icon{left:6px;right:auto}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon{margin-left:0;margin-right:-16px}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon.next-menu-icon-right{right:auto;left:4px}.next-menu[dir=rtl] .next-menu-icon-arrow.next-icon{left:10px;right:auto}.next-menu{position:relative;min-width:100px;padding:8px 0;margin:0;list-style:none;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;background:#fff;line-height:32px;font-size:12px}.next-menu,.next-menu *,.next-menu :after,.next-menu :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-menu:focus,.next-menu :focus{outline:0}.next-menu-embeddable,.next-menu-embeddable .next-menu-item.next-disabled,.next-menu-embeddable .next-menu-item.next-disabled .next-menu-item-text>a{background:initial;border:none}.next-menu-embeddable .next-menu-item-inner{height:100%}.next-menu-content{position:relative}.next-menu-content,.next-menu-sub-menu{padding:0;margin:0;list-style:none}.next-menu-sub-menu.next-expand-enter{overflow:hidden}.next-menu-sub-menu.next-expand-enter-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-sub-menu.next-expand-leave{overflow:hidden}.next-menu-sub-menu.next-expand-leave-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-item{position:relative;padding:0 20px;-webkit-transition:background .2s ease;transition:background .2s ease;color:#333;cursor:pointer}.next-menu-item-helper{float:right;color:#999;font-style:normal;font-size:12px}.next-menu-item .next-checkbox,.next-menu-item .next-radio{margin-right:4px}.next-menu-item.next-selected{color:#333;background-color:#fff}.next-menu-item.next-selected .next-menu-icon-arrow{color:#666}.next-menu-item.next-selected .next-menu-icon-selected{color:#5584ff}.next-menu-item.next-disabled,.next-menu-item.next-disabled .next-menu-item-text>a{color:#ccc;background-color:#fff;cursor:not-allowed}.next-menu-item.next-disabled .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-icon-selected,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-selected{color:#ccc}.next-menu-item:not(.next-disabled).next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover,.next-menu-item:not(.next-disabled).next-selected:focus,.next-menu-item:not(.next-disabled).next-selected:focus:hover,.next-menu-item:not(.next-disabled).next-selected:hover,.next-menu-item:not(.next-disabled):hover{color:#333;background-color:#f2f3f7}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled):hover .next-menu-icon-arrow{color:#333}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled):hover .next-menu-icon-selected{color:#5584ff}.next-menu-item-inner{height:32px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.next-menu-item-text{vertical-align:middle}.next-menu-item-text>a{display:inline-block;text-decoration:none;color:#333}.next-menu-item-text>a:before{position:absolute;background-color:transparent;top:0;left:0;bottom:0;right:0;content:""}.next-menu.next-hoz{padding:0}.next-menu.next-hoz .next-menu-content>.next-menu-item,.next-menu.next-hoz>.next-menu-item{display:inline-block;vertical-align:top}.next-menu.next-hoz .next-menu-content,.next-menu.next-hoz .next-menu-footer,.next-menu.next-hoz .next-menu-header{display:inline-block}.next-menu-hoz-right{float:right}.next-menu-group-label{padding:0 12px;color:#999}.next-menu-divider{margin:8px 12px;border-bottom:1px solid #e6e7eb}.next-menu .next-menu-icon-selected.next-icon{position:absolute;top:0;margin-left:-16px}.next-menu .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-icon-selected.next-icon.next-menu-icon-right{right:4px}.next-menu .next-menu-icon-arrow.next-icon{position:absolute;top:0;right:10px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-icon-arrow.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow.next-icon:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-icon-arrow-down.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:scale(.5) rotate(180deg);-ms-transform:scale(.5) rotate(180deg);transform:scale(.5) rotate(180deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-down.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.next-menu .next-menu-icon-arrow-right.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:scale(.5) rotate(-90deg);-ms-transform:scale(.5) rotate(-90deg);transform:scale(.5) rotate(-90deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-right.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-hoz-icon-arrow.next-icon{position:absolute;top:0;right:6px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-hoz-icon-arrow.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-hoz-icon-arrow.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-hoz-icon-arrow.next-open:before{width:12px;font-size:12px;line-height:inherit}.next-menu.next-context{line-height:24px}.next-menu.next-context .next-menu-item-inner{height:24px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-tabs{width:100%}.next-tabs,.next-tabs *,.next-tabs :after,.next-tabs :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tabs-bar{outline:none}.next-tabs-bar-popup{overflow-y:auto;max-height:480px}.next-tabs-nav-container{position:relative}.next-tabs-nav-container:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-tabs-nav-wrap{overflow:hidden}.next-tabs-nav-scroll{overflow:hidden;white-space:nowrap}.next-tabs-nav{display:inline-block;position:relative;-webkit-transition:all .4s cubic-bezier(.23,1,.32,1);transition:all .4s cubic-bezier(.23,1,.32,1);list-style:none;padding:0;margin:0}.next-tabs-nav-appear,.next-tabs-nav-enter{-webkit-animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-tabs-nav-leave{-webkit-animation:fadeOutLeft .2s cubic-bezier(.78,.14,.15,.86);animation:fadeOutLeft .2s cubic-bezier(.78,.14,.15,.86);-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-tabs-tab{display:inline-block;position:relative;-webkit-transition:all .4s cubic-bezier(.23,1,.32,1);transition:all .4s cubic-bezier(.23,1,.32,1)}.next-tabs-tab-inner{position:relative;cursor:pointer;text-decoration:none}.next-tabs-tab:before{content:"";position:absolute;-webkit-transition:all .4s cubic-bezier(.23,1,.32,1);transition:all .4s cubic-bezier(.23,1,.32,1)}.next-tabs-tab.active{font-weight:400}.next-tabs-tab .next-tabs-tab-close{color:#666}.next-tabs-tab .next-tabs-tab-close:hover{color:#333}.next-tabs-tab.active .next-tabs-tab-close{color:#5584ff}.next-tabs-tab.disabled .next-tabs-tab-close{color:#dcdee3}.next-tabs-tab:focus{outline:none}.next-tabs-tabpane{display:none}.next-tabs-tabpane.active{display:block}.next-tabs-btn-down,.next-tabs-btn-next,.next-tabs-btn-prev{position:absolute;top:0;cursor:pointer;padding:0;border:0;outline:none;height:100%;background-color:transparent;border-color:transparent}.next-tabs-btn-down,.next-tabs-btn-down.visited,.next-tabs-btn-down:link,.next-tabs-btn-down:visited,.next-tabs-btn-next,.next-tabs-btn-next.visited,.next-tabs-btn-next:link,.next-tabs-btn-next:visited,.next-tabs-btn-prev,.next-tabs-btn-prev.visited,.next-tabs-btn-prev:link,.next-tabs-btn-prev:visited{color:#666}.next-tabs-btn-down.active,.next-tabs-btn-down.hover,.next-tabs-btn-down:active,.next-tabs-btn-down:focus,.next-tabs-btn-down:hover,.next-tabs-btn-next.active,.next-tabs-btn-next.hover,.next-tabs-btn-next:active,.next-tabs-btn-next:focus,.next-tabs-btn-next:hover,.next-tabs-btn-prev.active,.next-tabs-btn-prev.hover,.next-tabs-btn-prev:active,.next-tabs-btn-prev:focus,.next-tabs-btn-prev:hover{color:#333;background-color:transparent;border-color:transparent;text-decoration:none}.next-tabs-btn-down.disabled,.next-tabs-btn-next.disabled,.next-tabs-btn-prev.disabled{cursor:not-allowed;color:#dcdee3}.next-tabs-btn-next{right:8px}.next-tabs-btn-prev{right:32px}.next-tabs-btn-down{right:8px}.next-tabs-content{overflow:hidden}.next-tabs-vertical>.next-tabs-bar .next-tabs-nav{width:100%}.next-tabs-vertical>.next-tabs-bar .next-tabs-tab{display:block}.next-tabs.next-medium .next-tabs-nav-container-scrolling{padding-right:60px}.next-tabs.next-medium .next-tabs-tab-inner{font-size:12px;padding:12px 16px}.next-tabs.next-medium .next-tabs-tab-inner .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-tabs.next-medium .next-tabs-tab-inner .next-tabs-tab-close{padding-left:8px}.next-tabs.next-medium .next-tabs-tab-inner .next-tabs-tab-close:before{width:12px;font-size:12px;line-height:inherit}.next-tabs.next-medium .next-tabs-btn-down .next-icon:before,.next-tabs.next-medium .next-tabs-btn-next .next-icon:before,.next-tabs.next-medium .next-tabs-btn-prev .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-tabs.next-small .next-tabs-nav-container-scrolling{padding-right:56px}.next-tabs.next-small .next-tabs-tab-inner{font-size:12px;padding:8px 12px}.next-tabs.next-small .next-tabs-tab-inner .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close{padding-left:8px}.next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close:before{width:16px;font-size:16px}}.next-tabs.next-small .next-tabs-btn-down .next-icon:before,.next-tabs.next-small .next-tabs-btn-next .next-icon:before,.next-tabs.next-small .next-tabs-btn-prev .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tabs-pure>.next-tabs-bar{border-bottom:1px solid #dcdee3;background-color:transparent}.next-tabs-pure>.next-tabs-bar .next-tabs-nav-container{margin-bottom:-1px;-webkit-box-shadow:none;box-shadow:none}.next-tabs-pure>.next-tabs-bar .next-tabs-nav-container .next-tabs-tab{color:#666;background-color:transparent}.next-tabs-pure>.next-tabs-bar .next-tabs-nav-container .next-tabs-tab:hover{cursor:pointer;color:#333;background-color:transparent}.next-tabs-pure>.next-tabs-bar .next-tabs-nav-container .next-tabs-tab.active{z-index:1;color:#5584ff;background-color:transparent}.next-tabs-pure>.next-tabs-bar .next-tabs-nav-container .next-tabs-tab.disabled{pointer-events:none;cursor:default;color:#dcdee3;background:transparent}.next-tabs-pure>.next-tabs-bar .next-tabs-nav-container .next-tabs-tab:before{border-radius:0;width:0;border-bottom:2px solid #5584ff;left:50%;bottom:0}.next-tabs-pure>.next-tabs-bar .next-tabs-nav-container .next-tabs-tab.active:before{width:100%;left:0}.next-tabs-wrapped>.next-tabs-bar{background:transparent}.next-tabs-wrapped>.next-tabs-bar .next-tabs-tab{color:#666;background-color:#f2f3f7}.next-tabs-wrapped>.next-tabs-bar .next-tabs-tab:hover{cursor:pointer;color:#333;background-color:#ebecf0}.next-tabs-wrapped>.next-tabs-bar .next-tabs-tab.active{z-index:1;color:#5584ff;background-color:#fff}.next-tabs-wrapped>.next-tabs-bar .next-tabs-tab.disabled{pointer-events:none;cursor:default;color:#ccc;background:#f7f8fa}.next-tabs-wrapped>.next-tabs-bar .next-tabs-tab .next-tabs-tab-close{color:#666}.next-tabs-wrapped>.next-tabs-bar .next-tabs-tab .next-tabs-tab-close:hover{color:#333}.next-tabs-wrapped>.next-tabs-bar .next-tabs-tab.active .next-tabs-tab-close{color:#5584ff}.next-tabs-wrapped>.next-tabs-bar .next-tabs-tab.disabled .next-tabs-tab-close{color:#dcdee3}.next-tabs-wrapped:after,.next-tabs-wrapped:before{content:"";display:table}.next-tabs-wrapped:after{clear:both}.next-tabs-wrapped.next-tabs-top>.next-tabs-bar,.next-tabs-wrapped>.next-tabs-content{position:relative}.next-tabs-wrapped.next-tabs-top>.next-tabs-bar .next-tabs-nav-extra{position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.next-tabs-wrapped.next-tabs-top>.next-tabs-bar .next-tabs-tab{margin-right:4px;border:1px solid #dcdee3;border-radius:3px 3px 0 0;border-width:1px}.next-tabs-wrapped.next-tabs-top>.next-tabs-bar .next-tabs-tab:hover{border-color:#c4c6cf}.next-tabs-wrapped.next-tabs-top>.next-tabs-bar .next-tabs-tab.active{border-color:#dcdee3 #dcdee3 #fff}.next-tabs-wrapped.next-tabs-top>.next-tabs-bar .next-tabs-tab:before{border-radius:3px;width:0;border-top:2px solid #5584ff;left:50%;top:-1px}.next-tabs-wrapped.next-tabs-top>.next-tabs-bar .next-tabs-tab.active:before{width:calc(100% - 2 * 3px);left:3px}.next-tabs-wrapped.next-tabs-top>.next-tabs-bar .next-tabs-tab.active{border-width:1px}.next-tabs-wrapped.next-tabs-top>.next-tabs-content{top:-1px;border-top:1px solid #dcdee3}.next-tabs-wrapped.next-tabs-bottom>.next-tabs-bar{position:relative}.next-tabs-wrapped.next-tabs-bottom>.next-tabs-bar .next-tabs-nav-extra{position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.next-tabs-wrapped.next-tabs-bottom>.next-tabs-bar .next-tabs-tab{margin-right:4px;border:1px solid #dcdee3;border-radius:0 0 3px 3px}.next-tabs-wrapped.next-tabs-bottom>.next-tabs-bar .next-tabs-tab:hover{border-color:#c4c6cf}.next-tabs-wrapped.next-tabs-bottom>.next-tabs-bar .next-tabs-tab.active{border-color:#fff #dcdee3 #dcdee3}.next-tabs-wrapped.next-tabs-bottom>.next-tabs-bar .next-tabs-tab:before{border-radius:3px;width:0;border-bottom:2px solid #5584ff;left:50%;bottom:-1px}.next-tabs-wrapped.next-tabs-bottom>.next-tabs-bar .next-tabs-tab.active:before{width:calc(100% - 2 * 3px);left:3px}.next-tabs-wrapped.next-tabs-bottom>.next-tabs-content{top:1px;border-bottom:1px solid #dcdee3}.next-tabs-wrapped.next-tabs-left>.next-tabs-bar{float:left}.next-tabs-wrapped.next-tabs-left>.next-tabs-bar .next-tabs-tab{float:none;margin-bottom:4px;border:1px solid #dcdee3;border-radius:3px 0 0 3px;border-width:1px}.next-tabs-wrapped.next-tabs-left>.next-tabs-bar .next-tabs-tab:hover{border-color:#c4c6cf}.next-tabs-wrapped.next-tabs-left>.next-tabs-bar .next-tabs-tab.active{border-color:#dcdee3 #fff #dcdee3 #dcdee3}.next-tabs-wrapped.next-tabs-left>.next-tabs-bar .next-tabs-tab:before{border-radius:3px;height:0;border-left:2px solid #5584ff;top:50%;left:-1px}.next-tabs-wrapped.next-tabs-left>.next-tabs-bar .next-tabs-tab.active:before{height:calc(100% - 2 * 3px);top:3px}.next-tabs-wrapped.next-tabs-left>.next-tabs-bar .next-tabs-tab.active{border-width:1px}.next-tabs-wrapped.next-tabs-left>.next-tabs-content{right:1px;border-left:1px solid #dcdee3}.next-tabs-wrapped.next-tabs-right>.next-tabs-bar{float:right}.next-tabs-wrapped.next-tabs-right>.next-tabs-bar .next-tabs-tab{float:none;margin-bottom:4px;border:1px solid #dcdee3;border-radius:0 3px 3px 0;border-width:1px}.next-tabs-wrapped.next-tabs-right>.next-tabs-bar .next-tabs-tab:hover{border-color:#c4c6cf}.next-tabs-wrapped.next-tabs-right>.next-tabs-bar .next-tabs-tab.active{border-color:#dcdee3 #dcdee3 #dcdee3 #fff}.next-tabs-wrapped.next-tabs-right>.next-tabs-bar .next-tabs-tab:before{border-radius:3px;height:0;border-right:2px solid #5584ff;top:50%;right:-1px}.next-tabs-wrapped.next-tabs-right>.next-tabs-bar .next-tabs-tab.active:before{height:calc(100% - 2 * 3px);top:3px}.next-tabs-wrapped.next-tabs-right>.next-tabs-bar .next-tabs-tab.active{border-width:1px}.next-tabs-wrapped.next-tabs-right>.next-tabs-content{right:-1px;border-right:1px solid #dcdee3}.next-tabs-capsule>.next-tabs-bar .next-tabs-tab{-webkit-transition:background-color .4s cubic-bezier(.23,1,.32,1),border-color .4s cubic-bezier(.23,1,.32,1);transition:background-color .4s cubic-bezier(.23,1,.32,1),border-color .4s cubic-bezier(.23,1,.32,1);border-top:1px solid #c4c6cf;border-bottom:1px solid #c4c6cf;border-left:1px solid #c4c6cf;color:#333;background-color:#f2f3f7}.next-tabs-capsule>.next-tabs-bar .next-tabs-tab:first-child{border-radius:3px 0 0 3px}.next-tabs-capsule>.next-tabs-bar .next-tabs-tab:last-child{border-radius:0 3px 3px 0;border-right:1px solid #c4c6cf}.next-tabs-capsule>.next-tabs-bar .next-tabs-tab.active{margin-right:-1px;border-right:1px solid #c4c6cf;border-color:#5584ff}.next-tabs-capsule>.next-tabs-bar .next-tabs-tab.disabled{border-color:#e6e7eb}.next-tabs-capsule>.next-tabs-bar .next-tabs-tab:hover{cursor:pointer;color:#333;background-color:#ebecf0}.next-tabs-capsule>.next-tabs-bar .next-tabs-tab.active{z-index:1;color:#fff;background-color:#5584ff}.next-tabs-capsule>.next-tabs-bar .next-tabs-tab.disabled{pointer-events:none;cursor:default;color:#ccc;background:#f7f8fa}.next-tabs-text>.next-tabs-bar .next-tabs-tab{color:#666;background-color:transparent}.next-tabs-text>.next-tabs-bar .next-tabs-tab:hover{cursor:pointer;color:#333;background-color:transparent}.next-tabs-text>.next-tabs-bar .next-tabs-tab.active{z-index:1;color:#5584ff;background-color:transparent}.next-tabs-text>.next-tabs-bar .next-tabs-tab.disabled{pointer-events:none;cursor:default;color:#ccc;background:transparent}.next-tabs-text>.next-tabs-bar .next-tabs-tab:not(:last-child):after{content:" ";position:absolute;right:0;top:calc(50% - 4px);width:1px;height:8px;background-color:#dcdee3}.next-tabs-pure>.next-tabs-bar{position:relative}.next-tabs-pure>.next-tabs-bar .next-tabs-nav-extra{position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.next-tabs-capsule>.next-tabs-bar{position:relative}.next-tabs-capsule>.next-tabs-bar .next-tabs-nav-extra{position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.next-tabs-text>.next-tabs-bar{position:relative}.next-tabs-text>.next-tabs-bar .next-tabs-nav-extra{position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.next-tabs[dir=rtl].next-medium .next-tabs-nav-container-scrolling{padding-left:60px;padding-right:0}.next-tabs[dir=rtl].next-medium .next-tabs-tab-close{padding-right:8px;padding-left:0}.next-tabs[dir=rtl].next-small .next-tabs-nav-container-scrolling{padding-left:56px;padding-right:0}.next-tabs[dir=rtl].next-small .next-tabs-tab-close{padding-right:8px;padding-left:0}.next-tabs[dir=rtl].next-tabs-wrapped.next-tabs-bottom>.next-tabs-bar .next-tabs-nav-extra,.next-tabs[dir=rtl].next-tabs-wrapped.next-tabs-top>.next-tabs-bar .next-tabs-nav-extra,.next-tabs[dir=rtl]>.next-tabs-bar .next-tabs-nav-extra{right:auto;left:0}.next-tabs[dir=rtl].next-tabs-capsule>.next-tabs-bar .next-tabs-tab{border-top:1px solid #c4c6cf;border-bottom:1px solid #c4c6cf;border-right:1px solid #c4c6cf;border-left:0}.next-tabs[dir=rtl].next-tabs-capsule>.next-tabs-bar .next-tabs-tab:first-child{border-left:0;border-radius:0 3px 3px 0}.next-tabs[dir=rtl].next-tabs-capsule>.next-tabs-bar .next-tabs-tab:last-child{border-radius:3px 0 0 3px;border-left:1px solid #c4c6cf}.next-tabs[dir=rtl].next-tabs-capsule>.next-tabs-bar .next-tabs-tab.active{margin-left:-1px;margin-right:auto;border-left:1px solid #c4c6cf;border-color:#5584ff}.next-tabs[dir=rtl] .next-tabs-btn-next{left:8px;right:auto}.next-tabs[dir=rtl] .next-tabs-btn-prev{left:32px;right:auto}.next-tabs[dir=rtl] .next-tabs-btn-down{left:8px;right:auto}.next-tabs-text[dir=rtl]>.next-tabs-bar .next-tabs-tab:not(:last-child):after{content:" ";position:absolute;left:0;right:auto} \ No newline at end of file diff --git a/demos/tab/deps.json b/demos/tab/deps.json new file mode 100644 index 0000000000..81876a25bf --- /dev/null +++ b/demos/tab/deps.json @@ -0,0 +1 @@ +["icon","overlay","menu","demo-helper"] \ No newline at end of file diff --git a/demos/tab/index.html b/demos/tab/index.html new file mode 100644 index 0000000000..0e90cbe59e --- /dev/null +++ b/demos/tab/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/table/build/index.css b/demos/table/build/index.css new file mode 100644 index 0000000000..13389ac7d2 --- /dev/null +++ b/demos/table/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-overlay-wrapper .next-overlay-inner{z-index:1001}.next-overlay-wrapper .next-overlay-backdrop{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;background:#000;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0}.next-overlay-wrapper.opened .next-overlay-backdrop{opacity:.2}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-btn,.next-btn *,.next-btn :after,.next-btn :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-btn::-moz-focus-inner{border:0;padding:0}.next-btn,.next-btn:active,.next-btn:focus,.next-btn:hover{outline:0}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-btn{position:relative;display:inline-block;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;text-align:center;text-transform:none;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;cursor:pointer}.next-btn:after{text-align:center;position:absolute;opacity:0;visibility:hidden;-webkit-transition:opacity .5s ease;transition:opacity .5s ease}.next-btn .next-icon.next-xs:before{vertical-align:baseline}.next-btn.hover,.next-btn:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn.next-small{border-radius:3px;padding:0 8px;height:20px;line-height:18px;font-size:12px;border-width:1px}.next-btn.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-small>.next-btn-icon.next-icon-alone:before,.next-btn.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small.next-btn-loading{padding-left:24px}.next-btn.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:8px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-small.next-btn-loading>.next-icon{display:none}.next-btn.next-medium{border-radius:3px;padding:0 12px;height:28px;line-height:26px;font-size:12px;border-width:1px}.next-btn.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium.next-btn-loading{padding-left:28px}.next-btn.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:12px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-medium.next-btn-loading>.next-icon{display:none}.next-btn.next-large{border-radius:3px;padding:0 16px;height:40px;line-height:38px;font-size:16px;border-width:1px}.next-btn.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-large>.next-btn-icon.next-icon-alone:before,.next-btn.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large.next-btn-loading{padding-left:36px}.next-btn.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:16px;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn.next-large.next-btn-loading>.next-icon{display:none}.next-btn.next-btn-normal{border-style:solid;background-color:#fff;border-color:#c4c6cf}.next-btn.next-btn-normal,.next-btn.next-btn-normal.visited,.next-btn.next-btn-normal:link,.next-btn.next-btn-normal:visited{color:#333}.next-btn.next-btn-normal.active,.next-btn.next-btn-normal.hover,.next-btn.next-btn-normal:active,.next-btn.next-btn-normal:focus,.next-btn.next-btn-normal:hover{color:#333;background-color:#f2f3f7;border-color:#a0a2ad;text-decoration:none}.next-btn.next-btn-primary{border-style:solid;background-color:#5584ff;border-color:transparent}.next-btn.next-btn-primary,.next-btn.next-btn-primary.visited,.next-btn.next-btn-primary:link,.next-btn.next-btn-primary:visited{color:#fff}.next-btn.next-btn-primary.active,.next-btn.next-btn-primary.hover,.next-btn.next-btn-primary:active,.next-btn.next-btn-primary:focus,.next-btn.next-btn-primary:hover{color:#fff;background-color:#3e71f7;border-color:transparent;text-decoration:none}.next-btn.next-btn-secondary{border-style:solid;background-color:#fff;border-color:#5584ff}.next-btn.next-btn-secondary,.next-btn.next-btn-secondary.visited,.next-btn.next-btn-secondary:link,.next-btn.next-btn-secondary:visited{color:#5584ff}.next-btn.next-btn-secondary.active,.next-btn.next-btn-secondary.hover,.next-btn.next-btn-secondary:active,.next-btn.next-btn-secondary:focus,.next-btn.next-btn-secondary:hover{color:#fff;background-color:#3e71f7;border-color:#3e71f7;text-decoration:none}.next-btn.disabled,.next-btn[disabled]{cursor:not-allowed;background-color:#f7f8fa;border-color:#e6e7eb}.next-btn.disabled,.next-btn.disabled.visited,.next-btn.disabled:link,.next-btn.disabled:visited,.next-btn[disabled],.next-btn[disabled].visited,.next-btn[disabled]:link,.next-btn[disabled]:visited{color:#ccc}.next-btn.disabled.active,.next-btn.disabled.hover,.next-btn.disabled:active,.next-btn.disabled:focus,.next-btn.disabled:hover,.next-btn[disabled].active,.next-btn[disabled].hover,.next-btn[disabled]:active,.next-btn[disabled]:focus,.next-btn[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-warning{border-style:solid}.next-btn-warning.next-btn-primary{background-color:#ff3000;border-color:#ff3000}.next-btn-warning.next-btn-primary,.next-btn-warning.next-btn-primary.visited,.next-btn-warning.next-btn-primary:link,.next-btn-warning.next-btn-primary:visited{color:#fff}.next-btn-warning.next-btn-primary.active,.next-btn-warning.next-btn-primary.hover,.next-btn-warning.next-btn-primary:active,.next-btn-warning.next-btn-primary:focus,.next-btn-warning.next-btn-primary:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary[disabled]{background-color:#f7f8fa;border-color:#dcdee3}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary.disabled.visited,.next-btn-warning.next-btn-primary.disabled:link,.next-btn-warning.next-btn-primary.disabled:visited,.next-btn-warning.next-btn-primary[disabled],.next-btn-warning.next-btn-primary[disabled].visited,.next-btn-warning.next-btn-primary[disabled]:link,.next-btn-warning.next-btn-primary[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-primary.disabled.active,.next-btn-warning.next-btn-primary.disabled.hover,.next-btn-warning.next-btn-primary.disabled:active,.next-btn-warning.next-btn-primary.disabled:focus,.next-btn-warning.next-btn-primary.disabled:hover,.next-btn-warning.next-btn-primary[disabled].active,.next-btn-warning.next-btn-primary[disabled].hover,.next-btn-warning.next-btn-primary[disabled]:active,.next-btn-warning.next-btn-primary[disabled]:focus,.next-btn-warning.next-btn-primary[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#dcdee3;text-decoration:none}.next-btn-warning.next-btn-normal{background-color:#fff;border-color:#ff3000}.next-btn-warning.next-btn-normal,.next-btn-warning.next-btn-normal.visited,.next-btn-warning.next-btn-normal:link,.next-btn-warning.next-btn-normal:visited{color:#ff3000}.next-btn-warning.next-btn-normal.active,.next-btn-warning.next-btn-normal.hover,.next-btn-warning.next-btn-normal:active,.next-btn-warning.next-btn-normal:focus,.next-btn-warning.next-btn-normal:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal[disabled]{background-color:#f7f8fa;border-color:#e6e7eb}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal.disabled.visited,.next-btn-warning.next-btn-normal.disabled:link,.next-btn-warning.next-btn-normal.disabled:visited,.next-btn-warning.next-btn-normal[disabled],.next-btn-warning.next-btn-normal[disabled].visited,.next-btn-warning.next-btn-normal[disabled]:link,.next-btn-warning.next-btn-normal[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-normal.disabled.active,.next-btn-warning.next-btn-normal.disabled.hover,.next-btn-warning.next-btn-normal.disabled:active,.next-btn-warning.next-btn-normal.disabled:focus,.next-btn-warning.next-btn-normal.disabled:hover,.next-btn-warning.next-btn-normal[disabled].active,.next-btn-warning.next-btn-normal[disabled].hover,.next-btn-warning.next-btn-normal[disabled]:active,.next-btn-warning.next-btn-normal[disabled]:focus,.next-btn-warning.next-btn-normal[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-text{border-radius:0}.next-btn-text,.next-btn-text.hover,.next-btn-text:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn-text.next-btn-primary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-primary,.next-btn-text.next-btn-primary.visited,.next-btn-text.next-btn-primary:link,.next-btn-text.next-btn-primary:visited{color:#5584ff}.next-btn-text.next-btn-primary.active,.next-btn-text.next-btn-primary.hover,.next-btn-text.next-btn-primary:active,.next-btn-text.next-btn-primary:focus,.next-btn-text.next-btn-primary:hover{color:#3e71f7;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-secondary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-secondary,.next-btn-text.next-btn-secondary.visited,.next-btn-text.next-btn-secondary:link,.next-btn-text.next-btn-secondary:visited{color:#666}.next-btn-text.next-btn-secondary.active,.next-btn-text.next-btn-secondary.hover,.next-btn-text.next-btn-secondary:active,.next-btn-text.next-btn-secondary:focus,.next-btn-text.next-btn-secondary:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-normal{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-normal,.next-btn-text.next-btn-normal.visited,.next-btn-text.next-btn-normal:link,.next-btn-text.next-btn-normal:visited{color:#333}.next-btn-text.next-btn-normal.active,.next-btn-text.next-btn-normal.hover,.next-btn-text.next-btn-normal:active,.next-btn-text.next-btn-normal:focus,.next-btn-text.next-btn-normal:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-large{border-radius:0;padding:0;height:24px;line-height:24px;font-size:14px;border-width:0}.next-btn-text.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-large>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large.next-btn-loading{padding-left:20px}.next-btn-text.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:0;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn-text.next-large.next-btn-loading>.next-icon{display:none}.next-btn-text.next-medium{border-radius:0;padding:0;height:20px;line-height:20px;font-size:12px;border-width:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium.next-btn-loading{padding-left:16px}.next-btn-text.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-medium.next-btn-loading>.next-icon{display:none}.next-btn-text.next-small{border-radius:0;padding:0;height:16px;line-height:16px;font-size:12px;border-width:0}.next-btn-text.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-small>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small.next-btn-loading{padding-left:16px}.next-btn-text.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-small.next-btn-loading>.next-icon{display:none}.next-btn-text.disabled,.next-btn-text[disabled]{background-color:transparent;border-color:transparent}.next-btn-text.disabled,.next-btn-text.disabled.visited,.next-btn-text.disabled:link,.next-btn-text.disabled:visited,.next-btn-text[disabled],.next-btn-text[disabled].visited,.next-btn-text[disabled]:link,.next-btn-text[disabled]:visited{color:#ccc}.next-btn-text.disabled.active,.next-btn-text.disabled.hover,.next-btn-text.disabled:active,.next-btn-text.disabled:focus,.next-btn-text.disabled:hover,.next-btn-text[disabled].active,.next-btn-text[disabled].hover,.next-btn-text[disabled]:active,.next-btn-text[disabled]:focus,.next-btn-text[disabled]:hover{color:#ccc;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-loading{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-loading,.next-btn-text.next-btn-loading.visited,.next-btn-text.next-btn-loading:link,.next-btn-text.next-btn-loading:visited{color:#333}.next-btn-text.next-btn-loading.active,.next-btn-text.next-btn-loading.hover,.next-btn-text.next-btn-loading:active,.next-btn-text.next-btn-loading:focus,.next-btn-text.next-btn-loading:hover{color:#333;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-loading{pointer-events:none}.next-btn-loading:after{font-family:NextIcon;content:"\E646";opacity:1;visibility:visible;-webkit-animation:loadingCircle 2s infinite linear;animation:loadingCircle 2s infinite linear}.next-btn-ghost{-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-btn-ghost.next-btn-dark{background-color:transparent;border-color:#fff}.next-btn-ghost.next-btn-dark,.next-btn-ghost.next-btn-dark.visited,.next-btn-ghost.next-btn-dark:link,.next-btn-ghost.next-btn-dark:visited{color:#fff}.next-btn-ghost.next-btn-dark.active,.next-btn-ghost.next-btn-dark.hover,.next-btn-ghost.next-btn-dark:active,.next-btn-ghost.next-btn-dark:focus,.next-btn-ghost.next-btn-dark:hover{color:#fff;background-color:hsla(0,0%,100%,.8);border-color:#fff;text-decoration:none}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark[disabled]{background-color:transparent;border-color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark.disabled.visited,.next-btn-ghost.next-btn-dark.disabled:link,.next-btn-ghost.next-btn-dark.disabled:visited,.next-btn-ghost.next-btn-dark[disabled],.next-btn-ghost.next-btn-dark[disabled].visited,.next-btn-ghost.next-btn-dark[disabled]:link,.next-btn-ghost.next-btn-dark[disabled]:visited{color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled.active,.next-btn-ghost.next-btn-dark.disabled.hover,.next-btn-ghost.next-btn-dark.disabled:active,.next-btn-ghost.next-btn-dark.disabled:focus,.next-btn-ghost.next-btn-dark.disabled:hover,.next-btn-ghost.next-btn-dark[disabled].active,.next-btn-ghost.next-btn-dark[disabled].hover,.next-btn-ghost.next-btn-dark[disabled]:active,.next-btn-ghost.next-btn-dark[disabled]:focus,.next-btn-ghost.next-btn-dark[disabled]:hover{color:hsla(0,0%,100%,.4);background-color:transparent;border-color:hsla(0,0%,100%,.4);text-decoration:none}.next-btn-ghost.next-btn-light{background-color:transparent;border-color:#333}.next-btn-ghost.next-btn-light,.next-btn-ghost.next-btn-light.visited,.next-btn-ghost.next-btn-light:link,.next-btn-ghost.next-btn-light:visited{color:#333}.next-btn-ghost.next-btn-light.active,.next-btn-ghost.next-btn-light.hover,.next-btn-ghost.next-btn-light:active,.next-btn-ghost.next-btn-light:focus,.next-btn-ghost.next-btn-light:hover{color:#999;background-color:rgba(0,0,0,.92);border-color:#333;text-decoration:none}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light[disabled]{background-color:transparent;border-color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light.disabled.visited,.next-btn-ghost.next-btn-light.disabled:link,.next-btn-ghost.next-btn-light.disabled:visited,.next-btn-ghost.next-btn-light[disabled],.next-btn-ghost.next-btn-light[disabled].visited,.next-btn-ghost.next-btn-light[disabled]:link,.next-btn-ghost.next-btn-light[disabled]:visited{color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled.active,.next-btn-ghost.next-btn-light.disabled.hover,.next-btn-ghost.next-btn-light.disabled:active,.next-btn-ghost.next-btn-light.disabled:focus,.next-btn-ghost.next-btn-light.disabled:hover,.next-btn-ghost.next-btn-light[disabled].active,.next-btn-ghost.next-btn-light[disabled].hover,.next-btn-ghost.next-btn-light[disabled]:active,.next-btn-ghost.next-btn-light[disabled]:focus,.next-btn-ghost.next-btn-light[disabled]:hover{color:rgba(0,0,0,.1);background-color:transparent;border-color:rgba(0,0,0,.1);text-decoration:none}.next-btn-group{position:relative;display:inline-block;vertical-align:middle}.next-btn-group>.next-btn{position:relative;float:left;-webkit-box-shadow:none;box-shadow:none}.next-btn-group>.next-btn.active,.next-btn-group>.next-btn:active,.next-btn-group>.next-btn:focus,.next-btn-group>.next-btn:hover{z-index:1}.next-btn-group>.next-btn.disabled,.next-btn-group>.next-btn[disabled]{z-index:0}.next-btn-group .next-btn.next-btn{margin:0 0 0 -1px}.next-btn-group .next-btn:not(:first-child):not(:last-child){border-radius:0}.next-btn-group>.next-btn:first-child{margin:0}.next-btn-group>.next-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group>.next-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group>.next-btn-primary:not(:first-child){border-left-color:hsla(0,0%,100%,.2)}.next-btn-group>.next-btn-primary:not(:first-child):hover{border-left-color:transparent}.next-btn-group>.next-btn-primary:not(:first-child).disabled,.next-btn-group>.next-btn-primary:not(:first-child)[disabled]{border-left-color:#e6e7eb}.next-btn-group[dir=rtl]>.next-btn{float:right}.next-btn-group[dir=rtl] .next-btn.next-btn{margin:0 -1px 0 0}.next-btn-group[dir=rtl]>.next-btn:first-child:not(:last-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group[dir=rtl]>.next-btn:last-child:not(:first-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child){border-right-color:hsla(0,0%,100%,.2)}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child):hover{border-right-color:transparent}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child).disabled,.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child)[disabled]{border-right-color:#e6e7eb}.next-btn.next-small[dir=rtl]{border-radius:3px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl].next-btn-loading{padding-left:8px;padding-right:24px}.next-btn.next-small[dir=rtl].next-btn-loading:after{right:8px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-medium[dir=rtl]{border-radius:3px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl].next-btn-loading{padding-left:12px;padding-right:28px}.next-btn.next-medium[dir=rtl].next-btn-loading:after{right:12px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-large[dir=rtl]{border-radius:3px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl].next-btn-loading{padding-left:16px;padding-right:36px}.next-btn.next-large[dir=rtl].next-btn-loading:after{right:16px;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-large{border-radius:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large.next-btn-loading{padding-left:0;padding-right:20px}.next-btn-text[dir=rtl].next-large.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-medium{border-radius:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-medium.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-small{border-radius:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-small.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-radio-button-large[dir=rtl]>label:first-child{margin-left:-1px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.next-radio-button-large[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large[dir=rtl] .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-wrapper[dir=rtl] .next-radio-label{margin-left:0;margin-right:4px}.next-radio-group[dir=rtl] .next-radio-label{margin-right:4px;margin-left:16px}.next-radio-button[dir=rtl]>label .next-radio-label{margin:0}.next-radio-wrapper{outline:0}.next-radio-wrapper .next-radio{display:inline-block;vertical-align:middle;position:relative;line-height:1}.next-radio-wrapper .next-radio,.next-radio-wrapper .next-radio *,.next-radio-wrapper .next-radio :after,.next-radio-wrapper .next-radio :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-radio-wrapper .next-radio input[type=radio]{opacity:0;position:absolute;vertical-align:middle;top:0;left:0;width:16px;height:16px;margin:0}.next-radio-wrapper .next-radio-inner{display:block;width:16px;height:16px;background:#fff;border-radius:50%;border:1px solid #c4c6cf;-webkit-transition:all .36s ease 0s;transition:all .36s ease 0s;-webkit-box-shadow:none;box-shadow:none}.next-radio-wrapper .next-radio-inner:after{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;border-radius:50%;top:50%;margin-top:-2px;left:50%;margin-left:-2px;background:#fff;content:" ";-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86)}.next-radio-wrapper.checked .next-radio-inner{border-color:#5584ff;background:#5584ff}.next-radio-wrapper.checked .next-radio-inner:after{width:4px;height:4px;font-weight:700;background:#fff;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.next-radio-wrapper.checked.hovered .next-radio-inner,.next-radio-wrapper.checked:hover .next-radio-inner{border-color:transparent}.next-radio-wrapper.disabled input[type=radio]{cursor:not-allowed}.next-radio-wrapper.disabled .next-radio-inner{border-color:#e6e7eb;background:#f7f8fa}.next-radio-wrapper.disabled.checked .next-radio-inner,.next-radio-wrapper.disabled .next-radio-inner.hovered,.next-radio-wrapper.disabled .next-radio-inner:hover{border-color:#e6e7eb}.next-radio-wrapper.disabled.checked .next-radio-inner:after{background:#ccc}.next-radio-wrapper:not(.disabled).focused .next-radio-inner,.next-radio-wrapper:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper:not(.disabled):focus .next-radio-inner,.next-radio-wrapper:not(.disabled):hover .next-radio-inner{border-color:#5584ff;background-color:#dee8ff}.next-radio-wrapper.checked.focused .next-radio-inner,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner{border-color:transparent;background:#3e71f7}.next-radio-wrapper.checked.focused .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner:after{background:#fff}.next-radio-button .next-radio,.next-radio-button input[type=radio]{width:0;height:0}.next-radio-button>label{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1;margin:0 0 0 -1px;border:1px solid #c4c6cf;background-color:#fff;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;vertical-align:middle}.next-radio-button>label .next-radio-label{display:block;color:#333;margin:0;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}.next-radio-button>label.hovered,.next-radio-button>label:focus,.next-radio-button>label:hover{z-index:10;border-color:#a0a2ad;background-color:#f2f3f7}.next-radio-button>label.hovered .next-radio-label,.next-radio-button>label:focus .next-radio-label,.next-radio-button>label:hover .next-radio-label{color:#333}.next-radio-button>label.checked{z-index:11;border-color:#5584ff;background-color:#fff}.next-radio-button>label.checked .next-radio-label{color:#5584ff}.next-radio-button>label.disabled{z-index:0;cursor:not-allowed;border-color:#e6e7eb;background-color:#f7f8fa}.next-radio-button>label.disabled .next-radio-label{color:#ccc}.next-radio-button>label.checked.disabled{z-index:0;border-color:#e6e7eb;background-color:#f2f3f7}.next-radio-button>label.checked.disabled .next-radio-label{color:#ccc}.next-radio-button-large>label{padding:0 8px;height:40px;line-height:40px}.next-radio-button-large>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-large .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium>label{padding:0 8px;height:28px;line-height:28px}.next-radio-button-medium>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-medium>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium .next-radio-label{height:26px;line-height:26px;font-size:12px}.next-radio-button-small>label{padding:0 8px;height:20px;line-height:20px}.next-radio-button-small>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small .next-radio-label{height:18px;line-height:18px;font-size:12px}.next-radio-single-input input[type=radio]{opacity:0;position:absolute;top:0;left:0;margin:0}.next-radio-group{display:inline-block}.next-radio-group .next-radio-label{color:#333;margin-right:16px}.next-radio-group.disabled .next-radio-label{color:#ccc}.next-radio-group-ver .next-radio-wrapper{display:block;margin-bottom:8px}.next-radio-label{margin:0;margin-left:4px;font-size:12px;vertical-align:middle;line-height:1}@-moz-document url-prefix(){.next-radio{margin-top:-1px}@supports ((-webkit-animation:calc(0s)) or (animation:calc(0s))){.next-radio{margin-top:-3px}}}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-checkbox-wrapper[dir=rtl]{margin-right:8px;margin-left:0}.next-checkbox-wrapper[dir=rtl]:first-child{margin-right:0}.next-checkbox-wrapper[dir=rtl]>.next-checkbox-label{margin-right:4px;margin-left:0}.next-checkbox-wrapper,.next-checkbox-wrapper *,.next-checkbox-wrapper :after,.next-checkbox-wrapper :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-checkbox-wrapper .next-checkbox{display:inline-block;position:relative;line-height:1;vertical-align:middle}.next-checkbox-wrapper input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:16px;height:16px;margin:0}.next-checkbox-wrapper .next-checkbox-inner{display:block;width:16px;height:16px;background:#fff;border-radius:3px;border:1px solid #c4c6cf;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;text-align:left;-webkit-box-shadow:none;box-shadow:none}.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;top:0;opacity:0;line-height:16px;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);color:#fff;left:4px;margin-left:0}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{vertical-align:top;margin-top:0}.next-checkbox-wrapper.checked .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.checked .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);margin-left:0}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.indeterminate .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.indeterminate .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1);margin-left:0}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.disabled input[type=checkbox]{cursor:not-allowed}.next-checkbox-wrapper.disabled .next-checkbox-inner{border-color:#e6e7eb;background:#f7f8fa}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover{border-color:#e6e7eb}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner>.next-icon{color:#ccc;opacity:1}.next-checkbox-wrapper.focused .next-checkbox-inner,.next-checkbox-wrapper.hovered .next-checkbox-inner,.next-checkbox-wrapper:not(.disabled):hover .next-checkbox-inner{border-color:#5584ff;background-color:#dee8ff}.next-checkbox-wrapper.checked.focused .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner{border-color:transparent;background-color:#3e71f7}.next-checkbox-wrapper.checked.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner>.next-icon{color:#fff;opacity:1}.next-checkbox-group .next-checkbox-wrapper{margin-left:8px}.next-checkbox-group .next-checkbox-wrapper:first-child{margin-left:0}.next-checkbox-group-ver .next-checkbox-wrapper{display:block;margin-left:0;margin-right:0;margin-bottom:8px}.next-checkbox-label{font-size:12px;vertical-align:middle;margin:0;margin-left:4px;line-height:1}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-menu[dir=rtl] .next-menu-item-helper{float:left}.next-menu[dir=rtl] .next-menu-item .next-checkbox,.next-menu[dir=rtl] .next-menu-item .next-radio{margin-left:4px;margin-right:0}.next-menu[dir=rtl] .next-menu-hoz-right{float:left}.next-menu[dir=rtl] .next-menu-hoz-icon-arrow.next-icon{left:6px;right:auto}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon{margin-left:0;margin-right:-16px}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon.next-menu-icon-right{right:auto;left:4px}.next-menu[dir=rtl] .next-menu-icon-arrow.next-icon{left:10px;right:auto}.next-menu{position:relative;min-width:100px;padding:8px 0;margin:0;list-style:none;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;background:#fff;line-height:32px;font-size:12px}.next-menu,.next-menu *,.next-menu :after,.next-menu :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-menu:focus,.next-menu :focus{outline:0}.next-menu-embeddable,.next-menu-embeddable .next-menu-item.next-disabled,.next-menu-embeddable .next-menu-item.next-disabled .next-menu-item-text>a{background:initial;border:none}.next-menu-embeddable .next-menu-item-inner{height:100%}.next-menu-content{position:relative}.next-menu-content,.next-menu-sub-menu{padding:0;margin:0;list-style:none}.next-menu-sub-menu.next-expand-enter{overflow:hidden}.next-menu-sub-menu.next-expand-enter-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-sub-menu.next-expand-leave{overflow:hidden}.next-menu-sub-menu.next-expand-leave-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-item{position:relative;padding:0 20px;-webkit-transition:background .2s ease;transition:background .2s ease;color:#333;cursor:pointer}.next-menu-item-helper{float:right;color:#999;font-style:normal;font-size:12px}.next-menu-item .next-checkbox,.next-menu-item .next-radio{margin-right:4px}.next-menu-item.next-selected{color:#333;background-color:#fff}.next-menu-item.next-selected .next-menu-icon-arrow{color:#666}.next-menu-item.next-selected .next-menu-icon-selected{color:#5584ff}.next-menu-item.next-disabled,.next-menu-item.next-disabled .next-menu-item-text>a{color:#ccc;background-color:#fff;cursor:not-allowed}.next-menu-item.next-disabled .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-icon-selected,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-selected{color:#ccc}.next-menu-item:not(.next-disabled).next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover,.next-menu-item:not(.next-disabled).next-selected:focus,.next-menu-item:not(.next-disabled).next-selected:focus:hover,.next-menu-item:not(.next-disabled).next-selected:hover,.next-menu-item:not(.next-disabled):hover{color:#333;background-color:#f2f3f7}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled):hover .next-menu-icon-arrow{color:#333}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled):hover .next-menu-icon-selected{color:#5584ff}.next-menu-item-inner{height:32px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.next-menu-item-text{vertical-align:middle}.next-menu-item-text>a{display:inline-block;text-decoration:none;color:#333}.next-menu-item-text>a:before{position:absolute;background-color:transparent;top:0;left:0;bottom:0;right:0;content:""}.next-menu.next-hoz{padding:0}.next-menu.next-hoz .next-menu-content>.next-menu-item,.next-menu.next-hoz>.next-menu-item{display:inline-block;vertical-align:top}.next-menu.next-hoz .next-menu-content,.next-menu.next-hoz .next-menu-footer,.next-menu.next-hoz .next-menu-header{display:inline-block}.next-menu-hoz-right{float:right}.next-menu-group-label{padding:0 12px;color:#999}.next-menu-divider{margin:8px 12px;border-bottom:1px solid #e6e7eb}.next-menu .next-menu-icon-selected.next-icon{position:absolute;top:0;margin-left:-16px}.next-menu .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-icon-selected.next-icon.next-menu-icon-right{right:4px}.next-menu .next-menu-icon-arrow.next-icon{position:absolute;top:0;right:10px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-icon-arrow.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow.next-icon:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-icon-arrow-down.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:scale(.5) rotate(180deg);-ms-transform:scale(.5) rotate(180deg);transform:scale(.5) rotate(180deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-down.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.next-menu .next-menu-icon-arrow-right.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:scale(.5) rotate(-90deg);-ms-transform:scale(.5) rotate(-90deg);transform:scale(.5) rotate(-90deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-right.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-hoz-icon-arrow.next-icon{position:absolute;top:0;right:6px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-hoz-icon-arrow.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-hoz-icon-arrow.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-hoz-icon-arrow.next-open:before{width:12px;font-size:12px;line-height:inherit}.next-menu.next-context{line-height:24px}.next-menu.next-context .next-menu-item-inner{height:24px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-loading-fusion-reactor[dir=rtl]{-webkit-animation-name:nextVectorRouteRTL;animation-name:nextVectorRouteRTL}@-webkit-keyframes nextVectorRouteRTL{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}5%{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}25%{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}30%{-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}50%{-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}55%{-webkit-transform:rotate(-270deg);-ms-transform:rotate(-270deg);transform:rotate(-270deg)}75%{-webkit-transform:rotate(-270deg);-ms-transform:rotate(-270deg);transform:rotate(-270deg)}80%{-webkit-transform:rotate(-1turn);-ms-transform:rotate(-1turn);transform:rotate(-1turn)}to{-webkit-transform:rotate(-1turn);-ms-transform:rotate(-1turn);transform:rotate(-1turn)}}@keyframes nextVectorRouteRTL{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}5%{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}25%{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}30%{-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}50%{-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}55%{-webkit-transform:rotate(-270deg);-ms-transform:rotate(-270deg);transform:rotate(-270deg)}75%{-webkit-transform:rotate(-270deg);-ms-transform:rotate(-270deg);transform:rotate(-270deg)}80%{-webkit-transform:rotate(-1turn);-ms-transform:rotate(-1turn);transform:rotate(-1turn)}to{-webkit-transform:rotate(-1turn);-ms-transform:rotate(-1turn);transform:rotate(-1turn)}}.next-loading{position:relative}.next-loading.next-open{pointer-events:none}.next-loading .next-loading-component{opacity:.7;-webkit-filter:blur(1px);filter:blur(1px);-webkit-filter:"progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false)";filter:"progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false)";position:relative;pointer-events:none}.next-loading-masker{position:absolute;top:0;bottom:0;left:0;right:0;z-index:99;opacity:.2;background:#fff}.next-loading-inline{display:inline-block}.next-loading-tip{display:block;position:absolute;top:50%;left:50%;z-index:4;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-align:center}.next-loading-tip-fullscreen{top:inherit;left:inherit;-webkit-transform:inherit;-ms-transform:inherit;transform:inherit}.next-loading-tip-placeholder{display:none}.next-loading-right-tip .next-loading-indicator{display:inline-block}.next-loading-right-tip .next-loading-tip-content{position:absolute;display:block;top:50%;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.next-loading-right-tip .next-loading-tip-placeholder{display:inline-block;visibility:hidden;margin-left:1em}.next-loading-fusion-reactor{display:inline-block;width:48px;height:48px;position:relative;margin:0;-webkit-animation-duration:5.6s;animation-duration:5.6s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:nextVectorRoute;animation-name:nextVectorRoute}.next-loading-fusion-reactor .next-loading-dot{position:absolute;margin:auto;width:12px;height:12px;border-radius:50%;background:#5584ff;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-duration:1.4s;animation-duration:1.4s}.next-loading-fusion-reactor .next-loading-dot:first-child{top:0;bottom:0;left:0;-webkit-animation-name:nextVectorDotsX;animation-name:nextVectorDotsX}.next-loading-fusion-reactor .next-loading-dot:nth-child(2){left:0;right:0;top:0;opacity:.8;-webkit-animation-name:nextVectorDotsY;animation-name:nextVectorDotsY}.next-loading-fusion-reactor .next-loading-dot:nth-child(3){top:0;bottom:0;right:0;opacity:.6;-webkit-animation-name:nextVectorDotsXR;animation-name:nextVectorDotsXR}.next-loading-fusion-reactor .next-loading-dot:nth-child(4){left:0;right:0;bottom:0;opacity:.2;-webkit-animation-name:nextVectorDotsYR;animation-name:nextVectorDotsYR}.next-loading-medium-fusion-reactor{width:32px;height:32px}.next-loading-medium-fusion-reactor .next-loading-dot{width:8px;height:8px}.next-loading-medium-fusion-reactor .next-loading-dot:first-child{-webkit-animation-name:nextVectorDotsX-medium;animation-name:nextVectorDotsX-medium}.next-loading-medium-fusion-reactor .next-loading-dot:nth-child(2){-webkit-animation-name:nextVectorDotsY-medium;animation-name:nextVectorDotsY-medium}.next-loading-medium-fusion-reactor .next-loading-dot:nth-child(3){-webkit-animation-name:nextVectorDotsXR-medium;animation-name:nextVectorDotsXR-medium}.next-loading-medium-fusion-reactor .next-loading-dot:nth-child(4){-webkit-animation-name:nextVectorDotsYR-medium;animation-name:nextVectorDotsYR-medium}@-webkit-keyframes nextVectorRoute{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}5%{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}25%{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}30%{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}50%{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}55%{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}75%{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}80%{-webkit-transform:rotate(1turn);-ms-transform:rotate(1turn);transform:rotate(1turn)}to{-webkit-transform:rotate(1turn);-ms-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes nextVectorRoute{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}5%{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}25%{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}30%{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}50%{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}55%{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}75%{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}80%{-webkit-transform:rotate(1turn);-ms-transform:rotate(1turn);transform:rotate(1turn)}to{-webkit-transform:rotate(1turn);-ms-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes nextVectorDotsYR{25%{bottom:0}45%,50%{bottom:16.8px;height:14.4px;width:14.4px}90%{bottom:0;height:12px;width:12px}}@keyframes nextVectorDotsYR{25%{bottom:0}45%,50%{bottom:16.8px;height:14.4px;width:14.4px}90%{bottom:0;height:12px;width:12px}}@-webkit-keyframes nextVectorDotsY{25%{top:0}45%,50%{top:16.8px;height:14.4px;width:14.4px}90%{top:0;height:12px;width:12px}}@keyframes nextVectorDotsY{25%{top:0}45%,50%{top:16.8px;height:14.4px;width:14.4px}90%{top:0;height:12px;width:12px}}@-webkit-keyframes nextVectorDotsX{25%{left:0}45%,50%{left:16.8px;width:14.4px;height:14.4px}90%{left:0;height:12px;width:12px}}@keyframes nextVectorDotsX{25%{left:0}45%,50%{left:16.8px;width:14.4px;height:14.4px}90%{left:0;height:12px;width:12px}}@-webkit-keyframes nextVectorDotsXR{25%{right:0}45%,50%{right:16.8px;width:14.4px;height:14.4px}90%{right:0;height:12px;width:12px}}@keyframes nextVectorDotsXR{25%{right:0}45%,50%{right:16.8px;width:14.4px;height:14.4px}90%{right:0;height:12px;width:12px}}@-webkit-keyframes nextVectorDotsYR-medium{25%{bottom:0}45%,50%{bottom:11.2px;height:9.6px;width:9.6px}90%{bottom:0;height:8px;width:8px}}@keyframes nextVectorDotsYR-medium{25%{bottom:0}45%,50%{bottom:11.2px;height:9.6px;width:9.6px}90%{bottom:0;height:8px;width:8px}}@-webkit-keyframes nextVectorDotsY-medium{25%{top:0}45%,50%{top:11.2px;height:9.6px;width:9.6px}90%{top:0;height:8px;width:8px}}@keyframes nextVectorDotsY-medium{25%{top:0}45%,50%{top:11.2px;height:9.6px;width:9.6px}90%{top:0;height:8px;width:8px}}@-webkit-keyframes nextVectorDotsX-medium{25%{left:0}45%,50%{left:11.2px;width:9.6px;height:9.6px}90%{left:0;height:8px;width:8px}}@keyframes nextVectorDotsX-medium{25%{left:0}45%,50%{left:11.2px;width:9.6px;height:9.6px}90%{left:0;height:8px;width:8px}}@-webkit-keyframes nextVectorDotsXR-medium{25%{right:0}45%,50%{right:11.2px;width:9.6px;height:9.6px}90%{right:0;height:8px;width:8px}}@keyframes nextVectorDotsXR-medium{25%{right:0}45%,50%{right:11.2px;width:9.6px;height:9.6px}90%{right:0;height:8px;width:8px}}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-table{position:relative}.next-table,.next-table *,.next-table :after,.next-table :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-table table{border-collapse:collapse;border-spacing:0;width:100%;background:#fff}.next-table table tr:first-child td{border-top-width:0}.next-table th{padding:0;background:#ebecf0;color:#333;text-align:left;font-weight:400;border:1px solid #dcdee3}.next-table th .next-table-cell-wrapper{padding:12px 16px;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.next-table-affix{z-index:1}.next-table-header-resizable{position:relative}.next-table-header-resizable .next-table-resize-handler{position:absolute;right:0;top:0;bottom:0;width:3px;background:transparent;cursor:ew-resize}.next-table td{padding:0;border:1px solid #dcdee3}.next-table td .next-table-cell-wrapper{padding:12px 16px;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.next-table td .next-table-cell-wrapper .next-icon-arrow-down.next-table-tree-arrow,.next-table td .next-table-cell-wrapper .next-icon-arrow-right.next-table-tree-arrow,.next-table td .next-table-cell-wrapper .next-table-tree-placeholder{margin-right:3px;float:left}.next-table td .next-table-cell-wrapper .next-icon-arrow-down.next-table-tree-arrow:before,.next-table td .next-table-cell-wrapper .next-icon-arrow-right.next-table-tree-arrow:before{width:12px;font-size:12px;line-height:inherit}.next-table .next-table-expanded .next-table-cell-wrapper,.next-table .next-table-selection .next-table-cell-wrapper{overflow:visible}.next-table.no-header table tr:first-child td{border-top-width:1px}.next-table.only-bottom-border{border-width:0}.next-table.only-bottom-border .next-table-expanded-row td,.next-table.only-bottom-border .next-table-expanded-row th,.next-table.only-bottom-border td,.next-table.only-bottom-border th{border-width:0 0 1px}.next-table-loading{display:block}.next-table.zebra tr:nth-child(odd) td{background:#fff}.next-table.zebra tr:nth-child(2n) td{background:#f7f8fa}.next-table.zebra .next-table-row.hovered td,.next-table.zebra .next-table-row.selected td{background:#f2f3f7;color:#333}.next-table-empty{color:#a0a2ad;padding:32px 0;text-align:center}.next-table-expanded-row td{border-width:0}.next-table-expanded-row td:first-child{border-left-width:1px}.next-table-expanded-row td:last-child{border-right-width:1px}.next-table-expanded-row:last-child td{border-bottom-width:1px}.next-table-expanded-row .next-table .last td{border-bottom-width:0}.next-table-filter-footer{margin:10px 10px 0}.next-table-filter-footer button{margin-right:5px}.next-table-row{-webkit-transition:all .3s ease;transition:all .3s ease;background:#fff;color:#333}.next-table-row.hidden{display:none}.next-table-row.hovered,.next-table-row.selected{background:#f2f3f7;color:#333}.next-table-tree-placeholder{display:inline-block;width:12px}.last .next-table-expanded-row td{border-bottom-width:1px}.next-table-body,.next-table-header{overflow:auto;font-size:12px}.next-table-body{font-size:12px}.next-table-fixed{border:1px solid #dcdee3}.next-table-fixed table{table-layout:fixed}.next-table-fixed .next-table-header{background:#ebecf0}.next-table-fixed table tr td:first-child,.next-table-fixed table tr th:first-child{border-left-width:0}.next-table-fixed .next-table-header th{border-top-width:0}.next-table-fixed .next-table-header tr th:last-child{border-right-width:0}.next-table-fixed .next-table-body td{border-top-width:0}.next-table-fixed .next-table-body tr:last-child td{border-bottom-width:0}.next-table-fixed .next-table-body tr td:last-child{border-right-width:0}.next-table-fixed.next-table-group table tr td:first-child,.next-table-fixed.next-table-group table tr th:first-child{border-left-width:1px}.next-table-fixed.next-table-group .next-table-header th{border-top-width:1px}.next-table-fixed.next-table-group .next-table-header tr th:last-child{border-right-width:1px}.next-table-fixed.next-table-group .next-table-body td{border-top-width:1px}.next-table-fixed.next-table-group .next-table-body tr:last-child td{border-bottom-width:1px}.next-table-fixed.next-table-group .next-table-body tr td:last-child{border-right-width:1px}.next-table-lock .next-table-body{overflow-x:auto;overflow-y:visible}.next-table-group{border-width:0}.next-table-group .next-table-body{margin-top:8px}.next-table-group .next-table-body table{margin-bottom:8px}.next-table-group .next-table-body table tr:first-child td{border-top-width:1px}.next-table-group .next-table-group-footer td,.next-table-group .next-table-group-header td{background:#ebecf0;color:#333}.next-table-group .next-table-row.hovered,.next-table-group .next-table-row.selected{background:#fff;color:#333}.next-table-lock{position:relative}.next-table-lock table{table-layout:fixed}.next-table-header-inner{overflow:hidden}.next-table-lock-left,.next-table-lock-right{position:absolute;left:0;top:0;z-index:1;border:0}.next-table-lock-left table,.next-table-lock-right table{width:auto}.next-table-lock-left .next-table-body,.next-table-lock-right .next-table-body{overflow:hidden}.next-table-lock-right{right:0;left:auto}.next-table-lock-right table tr td:first-child,.next-table-lock-right table tr th:first-child{border-left-width:1px}.next-table-lock-right.shadow{-webkit-box-shadow:-2px 0 3px rgba(0,0,0,.12);box-shadow:-2px 0 3px rgba(0,0,0,.12)}.next-table-lock-left.shadow{-webkit-box-shadow:2px 0 3px rgba(0,0,0,.12);box-shadow:2px 0 3px rgba(0,0,0,.12)}.next-table-filter{line-height:1}.next-table-sort{position:relative;width:16px;height:15px;display:inline-block;vertical-align:middle;line-height:1}.next-table-sort .next-icon{position:absolute;left:0;color:#333}.next-table-sort .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-table-sort .current .next-icon{color:#5584ff}.next-table-sort .next-icon-ascending{left:4px}.next-table-filter{margin-left:5px;cursor:pointer;width:20px;display:inline-block}.next-table-filter:focus{outline:0}.next-table-filter .next-icon{color:#333}.next-table-filter .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-table-expanded-ctrl.disabled{color:#999}.next-table-expanded-ctrl .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-table[dir=rtl] th{text-align:right}.next-table[dir=rtl] .next-table-header-resizable .next-table-resize-handler{right:auto;left:0}.next-table[dir=rtl] td .next-table-cell-wrapper .next-icon-arrow-down.next-table-tree-arrow,.next-table[dir=rtl] td .next-table-cell-wrapper .next-icon-arrow-right.next-table-tree-arrow,.next-table[dir=rtl] td .next-table-cell-wrapper .next-table-tree-placeholder{margin-left:3px;margin-right:0;float:right}.next-table[dir=rtl] .next-table-expanded-row td:first-child{border-left-width:0;border-right-width:1px}.next-table[dir=rtl] .next-table-expanded-row td:last-child{border-left-width:1px;border-right-width:0}.next-table[dir=rtl].only-bottom-border .next-table-expanded-row td,.next-table[dir=rtl].only-bottom-border .next-table-expanded-row th{border-width:0 0 1px}.next-table[dir=rtl] .next-table-filter-footer button{margin-left:5px;margin-right:0}.next-table[dir=rtl] .next-table-lock-left,.next-table[dir=rtl] .next-table-lock-right{left:auto;right:0}.next-table[dir=rtl] .next-table-lock-right{right:auto;left:0}.next-table[dir=rtl] .next-table-lock-right table tr td:first-child,.next-table[dir=rtl] .next-table-lock-right table tr th:first-child{border-right-width:1px}.next-table[dir=rtl] .next-table-lock-right.shadow{-webkit-box-shadow:2px 0 3px rgba(0,0,0,.12);box-shadow:2px 0 3px rgba(0,0,0,.12)}.next-table[dir=rtl] .next-table-lock-left.shadow{-webkit-box-shadow:-2px 0 3px rgba(0,0,0,.12);box-shadow:-2px 0 3px rgba(0,0,0,.12)}.next-table[dir=rtl] .next-table-sort .next-icon{right:0;left:auto}.next-table[dir=rtl] .next-table-sort .next-icon-ascending{right:4px;left:auto}.next-table[dir=rtl] .next-table-filter{margin-right:5px;margin-left:0}.next-table-fixed[dir=rtl] table tr td:first-child,.next-table-fixed[dir=rtl] table tr th:first-child{border-left-width:1px;border-right-width:0}.next-table-fixed[dir=rtl] .next-table-body tr td:last-child,.next-table-fixed[dir=rtl] .next-table-header tr th:last-child{border-left-width:1px} \ No newline at end of file diff --git a/demos/table/deps.json b/demos/table/deps.json new file mode 100644 index 0000000000..d84f08bfc8 --- /dev/null +++ b/demos/table/deps.json @@ -0,0 +1 @@ +["icon","checkbox","radio","menu","button","dropdown","loading","demo-helper"] \ No newline at end of file diff --git a/demos/table/index.html b/demos/table/index.html new file mode 100644 index 0000000000..59236363b0 --- /dev/null +++ b/demos/table/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/tag/build/index.css b/demos/tag/build/index.css new file mode 100644 index 0000000000..c67c10b9ad --- /dev/null +++ b/demos/tag/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}@-webkit-keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}@keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}.next-tag>.next-tag-body{overflow:hidden;text-overflow:ellipsis}.next-tag-checkable.next-tag-level-secondary{color:#333;border-color:transparent;background-color:transparent}.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):hover{color:#5584ff}.next-tag-closable.next-tag-level-primary,.next-tag-default.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-primary,.disabled.next-tag-default.next-tag-level-primary,[disabled].next-tag-closable.next-tag-level-primary,[disabled].next-tag-default.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.disabled.next-tag-default.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-checkable.next-tag-level-primary,[disabled].next-tag-checkable.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary.checked{color:#fff;border-color:#5584ff;background-color:#5584ff}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover{color:#fff;border-color:#3e71f7;background-color:#3e71f7}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked>.next-tag-close-btn{color:#fff}.next-tag-default.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-default.next-tag-level-normal,[disabled].next-tag-default.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.disabled.next-tag-default.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-closable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-normal,[disabled].next-tag-closable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:transparent}.disabled.next-tag-closable.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-normal.checked,.next-tag-checkable.next-tag-level-secondary.checked{color:#5584ff;border-color:#5584ff;background-color:transparent}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover{color:#3e71f7;border-color:#3e71f7;background-color:transparent}.next-tag-checkable.next-tag-level-secondary.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-secondary.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-secondary.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-secondary.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-secondary.checked:after{color:#fff}.next-tag-checkable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#c4c6cf;background-color:transparent}.disabled.next-tag-checkable.next-tag-level-normal,[disabled].next-tag-checkable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-normal.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-normal.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-normal.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-normal.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-normal.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-normal.checked:after{color:#fff}.next-tag-closable.next-tag-level-normal:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#c4c6cf;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-closable.next-tag-level-normal:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E626";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:before{background-color:#a0a2ad}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-closable.next-tag-level-normal:disabled:before,[disabled].next-tag-closable.next-tag-level-normal:before{background-color:#e6e7eb}.next-tag-closable.next-tag-level-normal:disabled:after,[disabled].next-tag-closable.next-tag-level-normal:after{color:#fff}.next-tag-group .next-tag-large,.next-tag-group .next-tag-medium{margin-right:8px;margin-bottom:8px}.next-tag-group .next-tag-small{margin-right:4px;margin-bottom:4px}.next-tag{display:inline-block;max-width:100%;vertical-align:middle;border-width:1px;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid;overflow:hidden;white-space:nowrap;-webkit-transition:all .2s cubic-bezier(.23,1,.32,1);transition:all .2s cubic-bezier(.23,1,.32,1);font-size:0;outline:0}.next-tag,.next-tag *,.next-tag :after,.next-tag :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tag>.next-tag-body{position:relative;display:inline-block;height:100%;text-align:center;vertical-align:middle;max-width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.next-tag>.next-tag-body>a{text-decoration:none;color:inherit}.next-tag>.next-tag-body>a:before{content:" ";position:absolute;display:block;top:0;left:0;right:0;bottom:0}.next-tag>.next-tag-body .next-icon{line-height:1;vertical-align:middle}.next-tag>.next-tag-body .next-icon:before{font-size:inherit}.next-tag.next-tag-body-pointer{cursor:pointer}.next-tag.disabled,.next-tag[disabled]{cursor:not-allowed;pointer-events:none}.next-tag-large{height:40px;padding:0;line-height:38px;font-size:0}.next-tag-large>.next-tag-body{font-size:16px;padding:0 16px;min-width:48px}.next-tag-large.next-tag-closable>.next-tag-body{padding:0 0 0 16px}.next-tag-large[dir=rtl].next-tag-closable>.next-tag-body{padding:0 16px 0 0}.next-tag-large>.next-tag-close-btn{margin-left:12px;padding-right:16px}.next-tag-large>.next-tag-close-btn .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tag-large[dir=rtl]>.next-tag-close-btn{margin-right:12px;margin-left:0;padding-right:0;padding-left:16px}.next-tag-medium{height:28px;padding:0;line-height:26px;font-size:0}.next-tag-medium>.next-tag-body{font-size:14px;padding:0 12px;min-width:40px}.next-tag-medium.next-tag-closable>.next-tag-body{padding:0 0 0 12px}.next-tag-medium[dir=rtl].next-tag-closable>.next-tag-body{padding:0 12px 0 0}.next-tag-medium>.next-tag-close-btn{margin-left:8px;padding-right:12px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-medium>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-medium[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:12px}.next-tag-small{height:20px;padding:0;line-height:18px;font-size:0}.next-tag-small>.next-tag-body{font-size:12px;padding:0 8px;min-width:28px}.next-tag-small.next-tag-closable>.next-tag-body{padding:0 0 0 8px}.next-tag-small[dir=rtl].next-tag-closable>.next-tag-body{padding:0 8px 0 0}.next-tag-small>.next-tag-close-btn{margin-left:8px;padding-right:8px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-small>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-small[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:8px}.next-tag-default{cursor:default}.next-tag-closable{position:relative}.next-tag-closable.next-tag-large>.next-tag-body{max-width:calc(100% - 40px)}.next-tag-closable.next-tag-medium>.next-tag-body{max-width:calc(100% - 28px)}.next-tag-closable.next-tag-small>.next-tag-body{max-width:calc(100% - 20px)}.next-tag-closable>.next-tag-close-btn{display:inline-block;vertical-align:middle;height:100%;text-align:center;cursor:pointer}.next-tag-closable.next-tag-level-normal.disabled,.next-tag-closable.next-tag-level-normal[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable{cursor:pointer;position:relative;border-radius:3px}.next-tag-checkable.checked:before{-webkit-animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.checked:after{-webkit-animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86);animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):before{right:-10px;bottom:-10px;width:20px;height:20px}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):after{font-size:8px;line-height:8px;right:0;bottom:0}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):before{right:-14px;bottom:-14px;width:28px;height:28px}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):after{font-size:12px;line-height:12px;right:0;bottom:0}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):before{right:-18px;bottom:-18px;width:36px;height:36px}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):after{font-size:16px;line-height:16px;right:0;bottom:0}.next-tag-checkable.next-tag-level-primary.disabled,.next-tag-checkable.next-tag-level-primary[disabled]{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-secondary.disabled,.next-tag-checkable.next-tag-level-secondary[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-zoom-appear,.next-tag-zoom-enter{-webkit-animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-tag-zoom-leave{-webkit-animation:zoomOut .3s ease-in;animation:zoomOut .3s ease-in;-webkit-animation-fill-mode:both;animation-fill-mode:both} \ No newline at end of file diff --git a/demos/tag/deps.json b/demos/tag/deps.json new file mode 100644 index 0000000000..4bd9a5e86b --- /dev/null +++ b/demos/tag/deps.json @@ -0,0 +1 @@ +["icon","animate","demo-helper"] \ No newline at end of file diff --git a/demos/tag/index.html b/demos/tag/index.html new file mode 100644 index 0000000000..94a9f9544b --- /dev/null +++ b/demos/tag/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/time-picker/build/index.css b/demos/time-picker/build/index.css new file mode 100644 index 0000000000..562d60e45f --- /dev/null +++ b/demos/time-picker/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-overlay-wrapper .next-overlay-inner{z-index:1001}.next-overlay-wrapper .next-overlay-backdrop{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;background:#000;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0}.next-overlay-wrapper.opened .next-overlay-backdrop{opacity:.2}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-input{vertical-align:middle;display:inline-table;border-collapse:separate;font-size:0;line-height:1;width:200px;border-spacing:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;border:1px solid #c4c6cf;background-color:#fff}.next-input,.next-input *,.next-input :after,.next-input :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input input{height:100%}.next-input input[type=reset],.next-input input[type=submit]{-webkit-appearance:button;cursor:pointer}.next-input input::-moz-focus-inner{border:0;padding:0}.next-input input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset}.next-input textarea{resize:none}.next-input input,.next-input textarea{width:100%;border:none;outline:none;padding:0;margin:0;font-weight:400;vertical-align:middle;background-color:transparent;color:#333}.next-input input::-ms-clear,.next-input textarea::-ms-clear{display:none}.next-input.next-input-textarea{border-radius:3px;font-size:0}.next-input.next-input-textarea textarea{color:#333;padding:4px 8px;font-size:12px;border-radius:3px}.next-input.next-input-textarea .next-input-control{display:block;width:auto;border-radius:3px}.next-input.next-input-textarea .next-input-len{padding:0 8px 4px;display:block;text-align:right;width:auto}.next-input.next-small{height:20px;border-radius:3px}.next-input.next-small .next-input-label{padding-left:8px;font-size:12px}.next-input.next-small .next-input-inner{font-size:12px}.next-input.next-small .next-input-control{padding-right:4px}.next-input.next-small input{height:18px;line-height:18px \0;padding:0 4px;font-size:12px}.next-input.next-small input::-webkit-input-placeholder{font-size:12px}.next-input.next-small input::-moz-placeholder{font-size:12px}.next-input.next-small input::-ms-input-placeholder{font-size:12px}.next-input.next-small input::placeholder{font-size:12px}.next-input.next-small .next-input-text-field{padding:0 4px;font-size:12px;height:18px;line-height:18px}.next-input.next-small .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-small input{border-radius:3px}.next-input.next-small .next-input-control{border-radius:0 3px 3px 0}.next-input.next-medium{height:28px;border-radius:3px}.next-input.next-medium .next-input-label{padding-left:8px;font-size:12px}.next-input.next-medium .next-input-inner{font-size:12px}.next-input.next-medium .next-input-control{padding-right:8px}.next-input.next-medium input{height:26px;line-height:26px \0;padding:0 8px;font-size:12px}.next-input.next-medium input::-webkit-input-placeholder{font-size:12px}.next-input.next-medium input::-moz-placeholder{font-size:12px}.next-input.next-medium input::-ms-input-placeholder{font-size:12px}.next-input.next-medium input::placeholder{font-size:12px}.next-input.next-medium .next-input-text-field{padding:0 8px;font-size:12px;height:26px;line-height:26px}.next-input.next-medium .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-medium input{border-radius:3px}.next-input.next-medium .next-input-control{border-radius:0 3px 3px 0}.next-input.next-large{height:40px;border-radius:3px}.next-input.next-large .next-input-label{padding-left:12px;font-size:16px}.next-input.next-large .next-input-inner{font-size:16px}.next-input.next-large .next-input-control{padding-right:8px}.next-input.next-large input{height:38px;line-height:38px \0;padding:0 12px;font-size:16px}.next-input.next-large input::-webkit-input-placeholder{font-size:16px}.next-input.next-large input::-moz-placeholder{font-size:16px}.next-input.next-large input::-ms-input-placeholder{font-size:16px}.next-input.next-large input::placeholder{font-size:16px}.next-input.next-large .next-input-text-field{padding:0 12px;font-size:16px;height:38px;line-height:38px}.next-input.next-large .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-input.next-large input{border-radius:3px}.next-input.next-large .next-input-control{border-radius:0 3px 3px 0}.next-input-hint-wrap{color:#999;position:relative}.next-input-hint-wrap .next-input-clear{opacity:0;z-index:1;position:absolute}.next-input-hint-wrap .next-input-hint{opacity:1}.next-input .next-icon-delete-filling:hover{cursor:pointer;color:#666}.next-input.next-focus,.next-input:hover{border-color:#a0a2ad;background-color:#fff}.next-input.next-focus .next-input-clear,.next-input:hover .next-input-clear{opacity:1}.next-input.next-focus .next-input-clear+.next-input-hint,.next-input:hover .next-input-clear+.next-input-hint{opacity:0}.next-input .next-input-clear:focus{opacity:1}.next-input .next-input-clear:focus+.next-input-hint{opacity:0}.next-input.next-focus{border-color:#5584ff;background-color:#fff}.next-input.next-error,.next-input.next-error.next-focus,.next-input.next-error:hover{border-color:#ff3000}.next-input.next-hidden{display:none}.next-input.next-noborder{border:none}.next-input-control .next-input-len{font-size:12px;line-height:12px;color:#999;display:table-cell;width:1px;vertical-align:bottom}.next-input-control .next-input-len.next-error{color:#ff3000}.next-input-control>*{display:table-cell;width:1%;top:0}.next-input-control>:not(:last-child){padding-right:4px}.next-input-control .next-icon{-webkit-transition:all .3s ease-out;transition:all .3s ease-out;color:#999}.next-input-control .next-icon-success-filling{color:#46bc15}.next-input-control .next-icon-loading{color:#4494f9}.next-input-label{color:#666}.next-input input::-moz-placeholder,.next-input textarea::-moz-placeholder{color:#999;opacity:1}.next-input input:-ms-input-placeholder,.next-input textarea:-ms-input-placeholder{color:#999}.next-input input::-webkit-input-placeholder,.next-input textarea::-webkit-input-placeholder{color:#999}.next-input.next-disabled{color:#ccc;cursor:not-allowed}.next-input.next-disabled,.next-input.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled input::-moz-placeholder,.next-input.next-disabled textarea::-moz-placeholder{color:#ccc;opacity:1}.next-input.next-disabled input:-ms-input-placeholder,.next-input.next-disabled textarea:-ms-input-placeholder{color:#ccc}.next-input.next-disabled input::-webkit-input-placeholder,.next-input.next-disabled textarea::-webkit-input-placeholder{color:#ccc}.next-input.next-disabled .next-input-label,.next-input.next-disabled .next-input-len{color:#ccc}.next-input.next-disabled input,.next-input.next-disabled textarea{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa;cursor:not-allowed}.next-input.next-disabled input:hover,.next-input.next-disabled textarea:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled .next-input-hint-wrap{color:#ccc}.next-input.next-disabled .next-input-hint-wrap .next-input-clear{opacity:0}.next-input.next-disabled .next-input-hint-wrap .next-input-hint{opacity:1}.next-input.next-disabled .next-input-hint-wrap .next-icon-delete-filling:hover{cursor:not-allowed;color:#ccc}.next-input.next-disabled .next-icon{color:#ccc}.next-input-control,.next-input-inner,.next-input-label{display:table-cell;width:1px;vertical-align:middle;line-height:1;background-color:transparent;white-space:nowrap}.next-input-group{display:inline-table;border-collapse:separate;border-spacing:0;line-height:0;width:100%}.next-input-group,.next-input-group *,.next-input-group :after,.next-input-group :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input-group-auto-width{width:100%;border-radius:0!important}.next-input-group>.next-input:first-child.next-large,.next-input-group>.next-input:first-child.next-medium,.next-input-group>.next-input:first-child.next-small{border-top-left-radius:3px!important;border-bottom-left-radius:3px!important}.next-input-group>.next-input:last-child.next-large,.next-input-group>.next-input:last-child.next-medium,.next-input-group>.next-input:last-child.next-small{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.next-input-group-addon{width:1px;display:table-cell;vertical-align:middle;white-space:nowrap}.next-input-group-addon:first-child,.next-input-group-addon:first-child>*{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group-addon:last-child,.next-input-group-addon:last-child>*{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group-text{color:#999;background-color:#f2f3f7;text-align:center;border:1px solid #c4c6cf;padding:0 8px}.next-input-group-text:first-child{border-right-width:0}.next-input-group-text:last-child{border-left-width:0}.next-input-group-text.next-disabled{color:#ccc;cursor:not-allowed}.next-input-group-text.next-disabled,.next-input-group-text.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input-group-text.next-medium,.next-input-group-text.next-small{font-size:12px;border-radius:3px}.next-input-group-text.next-large{font-size:16px;border-radius:3px}.next-input[dir=rtl].next-small .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-small .next-input-control{padding-right:0;padding-left:4px}.next-input[dir=rtl].next-medium .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-medium .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-large .next-input-label{padding-left:0;padding-right:12px}.next-input[dir=rtl].next-large .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-input-textarea .next-input-len{text-align:left}.next-input[dir=rtl] .next-input-control>:not(:last-child){padding-left:4px;padding-right:0}.next-input-group[dir=rtl] .next-input-group-addon:first-child{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-small{border-bottom-right-radius:3px!important;border-top-right-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-small{border-bottom-left-radius:3px!important;border-top-left-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-text:first-child{border-right-width:1px;border-left:0}.next-input-group[dir=rtl] .next-input-group-text:last-child{border-left-width:1px;border-right:0}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-time-picker-menu{float:left;text-align:center}.next-time-picker-menu:not(:last-child){border-right:1px solid #c4c6cf}.next-time-picker-menu-title{cursor:default;height:28px;line-height:28px;font-size:12px;font-weight:400;color:#999;background:#fff}.next-time-picker-menu ul{position:relative;overflow-y:auto;list-style:none;margin:0;padding:0;font-size:12px;height:196px}.next-time-picker-menu-item{cursor:pointer;height:28px;line-height:28px;-webkit-transition:background .3s ease-out;transition:background .3s ease-out;color:#666;background:#fff;outline:none}.next-time-picker-menu-item:hover{color:#333;background:#f2f3f7}.next-time-picker-menu-item.next-selected{font-weight:700;color:#666;background:#f2f3f7}.next-time-picker-menu-item.next-disabled{cursor:not-allowed;color:#ccc;background:#fff}.next-time-picker-panel,.next-time-picker-panel *,.next-time-picker-panel :after,.next-time-picker-panel :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-time-picker-panel:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-time-picker-panel-header{border-bottom:1px solid #dcdee3}.next-time-picker-panel-input.next-input{width:100%;padding:6px;border-color:transparent;vertical-align:middle}.next-time-picker-panel-col-3 .next-time-picker-menu{width:33.33333%}.next-time-picker-panel-col-2 .next-time-picker-menu{width:50%}.next-time-picker-body[dir=rtl] .next-time-picker-menu{float:right}.next-time-picker-body[dir=rtl] .next-time-picker-menu:not(:last-child){border-right:none;border-left:1px solid #c4c6cf}.next-time-picker{display:inline-block;width:200px}.next-time-picker,.next-time-picker *,.next-time-picker :after,.next-time-picker :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-time-picker-trigger .next-input{width:100%}.next-time-picker-body{overflow:hidden;width:200px;border:1px solid #dcdee3;border-radius:3px;background:#fff;-webkit-box-shadow:none;box-shadow:none} \ No newline at end of file diff --git a/demos/time-picker/deps.json b/demos/time-picker/deps.json new file mode 100644 index 0000000000..b94c89a900 --- /dev/null +++ b/demos/time-picker/deps.json @@ -0,0 +1 @@ +["input","overlay","demo-helper"] \ No newline at end of file diff --git a/demos/time-picker/index.html b/demos/time-picker/index.html new file mode 100644 index 0000000000..c9b1c0db91 --- /dev/null +++ b/demos/time-picker/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/timeline/build/index.css b/demos/timeline/build/index.css new file mode 100644 index 0000000000..8a2915e9be --- /dev/null +++ b/demos/timeline/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-btn,.next-btn *,.next-btn :after,.next-btn :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-btn::-moz-focus-inner{border:0;padding:0}.next-btn,.next-btn:active,.next-btn:focus,.next-btn:hover{outline:0}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-btn{position:relative;display:inline-block;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;text-align:center;text-transform:none;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;cursor:pointer}.next-btn:after{text-align:center;position:absolute;opacity:0;visibility:hidden;-webkit-transition:opacity .5s ease;transition:opacity .5s ease}.next-btn .next-icon.next-xs:before{vertical-align:baseline}.next-btn.hover,.next-btn:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn.next-small{border-radius:3px;padding:0 8px;height:20px;line-height:18px;font-size:12px;border-width:1px}.next-btn.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-small>.next-btn-icon.next-icon-alone:before,.next-btn.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small.next-btn-loading{padding-left:24px}.next-btn.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:8px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-small.next-btn-loading>.next-icon{display:none}.next-btn.next-medium{border-radius:3px;padding:0 12px;height:28px;line-height:26px;font-size:12px;border-width:1px}.next-btn.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium.next-btn-loading{padding-left:28px}.next-btn.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:12px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-medium.next-btn-loading>.next-icon{display:none}.next-btn.next-large{border-radius:3px;padding:0 16px;height:40px;line-height:38px;font-size:16px;border-width:1px}.next-btn.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-large>.next-btn-icon.next-icon-alone:before,.next-btn.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large.next-btn-loading{padding-left:36px}.next-btn.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:16px;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn.next-large.next-btn-loading>.next-icon{display:none}.next-btn.next-btn-normal{border-style:solid;background-color:#fff;border-color:#c4c6cf}.next-btn.next-btn-normal,.next-btn.next-btn-normal.visited,.next-btn.next-btn-normal:link,.next-btn.next-btn-normal:visited{color:#333}.next-btn.next-btn-normal.active,.next-btn.next-btn-normal.hover,.next-btn.next-btn-normal:active,.next-btn.next-btn-normal:focus,.next-btn.next-btn-normal:hover{color:#333;background-color:#f2f3f7;border-color:#a0a2ad;text-decoration:none}.next-btn.next-btn-primary{border-style:solid;background-color:#5584ff;border-color:transparent}.next-btn.next-btn-primary,.next-btn.next-btn-primary.visited,.next-btn.next-btn-primary:link,.next-btn.next-btn-primary:visited{color:#fff}.next-btn.next-btn-primary.active,.next-btn.next-btn-primary.hover,.next-btn.next-btn-primary:active,.next-btn.next-btn-primary:focus,.next-btn.next-btn-primary:hover{color:#fff;background-color:#3e71f7;border-color:transparent;text-decoration:none}.next-btn.next-btn-secondary{border-style:solid;background-color:#fff;border-color:#5584ff}.next-btn.next-btn-secondary,.next-btn.next-btn-secondary.visited,.next-btn.next-btn-secondary:link,.next-btn.next-btn-secondary:visited{color:#5584ff}.next-btn.next-btn-secondary.active,.next-btn.next-btn-secondary.hover,.next-btn.next-btn-secondary:active,.next-btn.next-btn-secondary:focus,.next-btn.next-btn-secondary:hover{color:#fff;background-color:#3e71f7;border-color:#3e71f7;text-decoration:none}.next-btn.disabled,.next-btn[disabled]{cursor:not-allowed;background-color:#f7f8fa;border-color:#e6e7eb}.next-btn.disabled,.next-btn.disabled.visited,.next-btn.disabled:link,.next-btn.disabled:visited,.next-btn[disabled],.next-btn[disabled].visited,.next-btn[disabled]:link,.next-btn[disabled]:visited{color:#ccc}.next-btn.disabled.active,.next-btn.disabled.hover,.next-btn.disabled:active,.next-btn.disabled:focus,.next-btn.disabled:hover,.next-btn[disabled].active,.next-btn[disabled].hover,.next-btn[disabled]:active,.next-btn[disabled]:focus,.next-btn[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-warning{border-style:solid}.next-btn-warning.next-btn-primary{background-color:#ff3000;border-color:#ff3000}.next-btn-warning.next-btn-primary,.next-btn-warning.next-btn-primary.visited,.next-btn-warning.next-btn-primary:link,.next-btn-warning.next-btn-primary:visited{color:#fff}.next-btn-warning.next-btn-primary.active,.next-btn-warning.next-btn-primary.hover,.next-btn-warning.next-btn-primary:active,.next-btn-warning.next-btn-primary:focus,.next-btn-warning.next-btn-primary:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary[disabled]{background-color:#f7f8fa;border-color:#dcdee3}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary.disabled.visited,.next-btn-warning.next-btn-primary.disabled:link,.next-btn-warning.next-btn-primary.disabled:visited,.next-btn-warning.next-btn-primary[disabled],.next-btn-warning.next-btn-primary[disabled].visited,.next-btn-warning.next-btn-primary[disabled]:link,.next-btn-warning.next-btn-primary[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-primary.disabled.active,.next-btn-warning.next-btn-primary.disabled.hover,.next-btn-warning.next-btn-primary.disabled:active,.next-btn-warning.next-btn-primary.disabled:focus,.next-btn-warning.next-btn-primary.disabled:hover,.next-btn-warning.next-btn-primary[disabled].active,.next-btn-warning.next-btn-primary[disabled].hover,.next-btn-warning.next-btn-primary[disabled]:active,.next-btn-warning.next-btn-primary[disabled]:focus,.next-btn-warning.next-btn-primary[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#dcdee3;text-decoration:none}.next-btn-warning.next-btn-normal{background-color:#fff;border-color:#ff3000}.next-btn-warning.next-btn-normal,.next-btn-warning.next-btn-normal.visited,.next-btn-warning.next-btn-normal:link,.next-btn-warning.next-btn-normal:visited{color:#ff3000}.next-btn-warning.next-btn-normal.active,.next-btn-warning.next-btn-normal.hover,.next-btn-warning.next-btn-normal:active,.next-btn-warning.next-btn-normal:focus,.next-btn-warning.next-btn-normal:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal[disabled]{background-color:#f7f8fa;border-color:#e6e7eb}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal.disabled.visited,.next-btn-warning.next-btn-normal.disabled:link,.next-btn-warning.next-btn-normal.disabled:visited,.next-btn-warning.next-btn-normal[disabled],.next-btn-warning.next-btn-normal[disabled].visited,.next-btn-warning.next-btn-normal[disabled]:link,.next-btn-warning.next-btn-normal[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-normal.disabled.active,.next-btn-warning.next-btn-normal.disabled.hover,.next-btn-warning.next-btn-normal.disabled:active,.next-btn-warning.next-btn-normal.disabled:focus,.next-btn-warning.next-btn-normal.disabled:hover,.next-btn-warning.next-btn-normal[disabled].active,.next-btn-warning.next-btn-normal[disabled].hover,.next-btn-warning.next-btn-normal[disabled]:active,.next-btn-warning.next-btn-normal[disabled]:focus,.next-btn-warning.next-btn-normal[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-text{border-radius:0}.next-btn-text,.next-btn-text.hover,.next-btn-text:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn-text.next-btn-primary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-primary,.next-btn-text.next-btn-primary.visited,.next-btn-text.next-btn-primary:link,.next-btn-text.next-btn-primary:visited{color:#5584ff}.next-btn-text.next-btn-primary.active,.next-btn-text.next-btn-primary.hover,.next-btn-text.next-btn-primary:active,.next-btn-text.next-btn-primary:focus,.next-btn-text.next-btn-primary:hover{color:#3e71f7;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-secondary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-secondary,.next-btn-text.next-btn-secondary.visited,.next-btn-text.next-btn-secondary:link,.next-btn-text.next-btn-secondary:visited{color:#666}.next-btn-text.next-btn-secondary.active,.next-btn-text.next-btn-secondary.hover,.next-btn-text.next-btn-secondary:active,.next-btn-text.next-btn-secondary:focus,.next-btn-text.next-btn-secondary:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-normal{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-normal,.next-btn-text.next-btn-normal.visited,.next-btn-text.next-btn-normal:link,.next-btn-text.next-btn-normal:visited{color:#333}.next-btn-text.next-btn-normal.active,.next-btn-text.next-btn-normal.hover,.next-btn-text.next-btn-normal:active,.next-btn-text.next-btn-normal:focus,.next-btn-text.next-btn-normal:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-large{border-radius:0;padding:0;height:24px;line-height:24px;font-size:14px;border-width:0}.next-btn-text.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-large>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large.next-btn-loading{padding-left:20px}.next-btn-text.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:0;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn-text.next-large.next-btn-loading>.next-icon{display:none}.next-btn-text.next-medium{border-radius:0;padding:0;height:20px;line-height:20px;font-size:12px;border-width:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium.next-btn-loading{padding-left:16px}.next-btn-text.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-medium.next-btn-loading>.next-icon{display:none}.next-btn-text.next-small{border-radius:0;padding:0;height:16px;line-height:16px;font-size:12px;border-width:0}.next-btn-text.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-small>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small.next-btn-loading{padding-left:16px}.next-btn-text.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-small.next-btn-loading>.next-icon{display:none}.next-btn-text.disabled,.next-btn-text[disabled]{background-color:transparent;border-color:transparent}.next-btn-text.disabled,.next-btn-text.disabled.visited,.next-btn-text.disabled:link,.next-btn-text.disabled:visited,.next-btn-text[disabled],.next-btn-text[disabled].visited,.next-btn-text[disabled]:link,.next-btn-text[disabled]:visited{color:#ccc}.next-btn-text.disabled.active,.next-btn-text.disabled.hover,.next-btn-text.disabled:active,.next-btn-text.disabled:focus,.next-btn-text.disabled:hover,.next-btn-text[disabled].active,.next-btn-text[disabled].hover,.next-btn-text[disabled]:active,.next-btn-text[disabled]:focus,.next-btn-text[disabled]:hover{color:#ccc;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-loading{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-loading,.next-btn-text.next-btn-loading.visited,.next-btn-text.next-btn-loading:link,.next-btn-text.next-btn-loading:visited{color:#333}.next-btn-text.next-btn-loading.active,.next-btn-text.next-btn-loading.hover,.next-btn-text.next-btn-loading:active,.next-btn-text.next-btn-loading:focus,.next-btn-text.next-btn-loading:hover{color:#333;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-loading{pointer-events:none}.next-btn-loading:after{font-family:NextIcon;content:"\E646";opacity:1;visibility:visible;-webkit-animation:loadingCircle 2s infinite linear;animation:loadingCircle 2s infinite linear}.next-btn-ghost{-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-btn-ghost.next-btn-dark{background-color:transparent;border-color:#fff}.next-btn-ghost.next-btn-dark,.next-btn-ghost.next-btn-dark.visited,.next-btn-ghost.next-btn-dark:link,.next-btn-ghost.next-btn-dark:visited{color:#fff}.next-btn-ghost.next-btn-dark.active,.next-btn-ghost.next-btn-dark.hover,.next-btn-ghost.next-btn-dark:active,.next-btn-ghost.next-btn-dark:focus,.next-btn-ghost.next-btn-dark:hover{color:#fff;background-color:hsla(0,0%,100%,.8);border-color:#fff;text-decoration:none}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark[disabled]{background-color:transparent;border-color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark.disabled.visited,.next-btn-ghost.next-btn-dark.disabled:link,.next-btn-ghost.next-btn-dark.disabled:visited,.next-btn-ghost.next-btn-dark[disabled],.next-btn-ghost.next-btn-dark[disabled].visited,.next-btn-ghost.next-btn-dark[disabled]:link,.next-btn-ghost.next-btn-dark[disabled]:visited{color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled.active,.next-btn-ghost.next-btn-dark.disabled.hover,.next-btn-ghost.next-btn-dark.disabled:active,.next-btn-ghost.next-btn-dark.disabled:focus,.next-btn-ghost.next-btn-dark.disabled:hover,.next-btn-ghost.next-btn-dark[disabled].active,.next-btn-ghost.next-btn-dark[disabled].hover,.next-btn-ghost.next-btn-dark[disabled]:active,.next-btn-ghost.next-btn-dark[disabled]:focus,.next-btn-ghost.next-btn-dark[disabled]:hover{color:hsla(0,0%,100%,.4);background-color:transparent;border-color:hsla(0,0%,100%,.4);text-decoration:none}.next-btn-ghost.next-btn-light{background-color:transparent;border-color:#333}.next-btn-ghost.next-btn-light,.next-btn-ghost.next-btn-light.visited,.next-btn-ghost.next-btn-light:link,.next-btn-ghost.next-btn-light:visited{color:#333}.next-btn-ghost.next-btn-light.active,.next-btn-ghost.next-btn-light.hover,.next-btn-ghost.next-btn-light:active,.next-btn-ghost.next-btn-light:focus,.next-btn-ghost.next-btn-light:hover{color:#999;background-color:rgba(0,0,0,.92);border-color:#333;text-decoration:none}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light[disabled]{background-color:transparent;border-color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light.disabled.visited,.next-btn-ghost.next-btn-light.disabled:link,.next-btn-ghost.next-btn-light.disabled:visited,.next-btn-ghost.next-btn-light[disabled],.next-btn-ghost.next-btn-light[disabled].visited,.next-btn-ghost.next-btn-light[disabled]:link,.next-btn-ghost.next-btn-light[disabled]:visited{color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled.active,.next-btn-ghost.next-btn-light.disabled.hover,.next-btn-ghost.next-btn-light.disabled:active,.next-btn-ghost.next-btn-light.disabled:focus,.next-btn-ghost.next-btn-light.disabled:hover,.next-btn-ghost.next-btn-light[disabled].active,.next-btn-ghost.next-btn-light[disabled].hover,.next-btn-ghost.next-btn-light[disabled]:active,.next-btn-ghost.next-btn-light[disabled]:focus,.next-btn-ghost.next-btn-light[disabled]:hover{color:rgba(0,0,0,.1);background-color:transparent;border-color:rgba(0,0,0,.1);text-decoration:none}.next-btn-group{position:relative;display:inline-block;vertical-align:middle}.next-btn-group>.next-btn{position:relative;float:left;-webkit-box-shadow:none;box-shadow:none}.next-btn-group>.next-btn.active,.next-btn-group>.next-btn:active,.next-btn-group>.next-btn:focus,.next-btn-group>.next-btn:hover{z-index:1}.next-btn-group>.next-btn.disabled,.next-btn-group>.next-btn[disabled]{z-index:0}.next-btn-group .next-btn.next-btn{margin:0 0 0 -1px}.next-btn-group .next-btn:not(:first-child):not(:last-child){border-radius:0}.next-btn-group>.next-btn:first-child{margin:0}.next-btn-group>.next-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group>.next-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group>.next-btn-primary:not(:first-child){border-left-color:hsla(0,0%,100%,.2)}.next-btn-group>.next-btn-primary:not(:first-child):hover{border-left-color:transparent}.next-btn-group>.next-btn-primary:not(:first-child).disabled,.next-btn-group>.next-btn-primary:not(:first-child)[disabled]{border-left-color:#e6e7eb}.next-btn-group[dir=rtl]>.next-btn{float:right}.next-btn-group[dir=rtl] .next-btn.next-btn{margin:0 -1px 0 0}.next-btn-group[dir=rtl]>.next-btn:first-child:not(:last-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group[dir=rtl]>.next-btn:last-child:not(:first-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child){border-right-color:hsla(0,0%,100%,.2)}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child):hover{border-right-color:transparent}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child).disabled,.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child)[disabled]{border-right-color:#e6e7eb}.next-btn.next-small[dir=rtl]{border-radius:3px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl].next-btn-loading{padding-left:8px;padding-right:24px}.next-btn.next-small[dir=rtl].next-btn-loading:after{right:8px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-medium[dir=rtl]{border-radius:3px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl].next-btn-loading{padding-left:12px;padding-right:28px}.next-btn.next-medium[dir=rtl].next-btn-loading:after{right:12px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-large[dir=rtl]{border-radius:3px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl].next-btn-loading{padding-left:16px;padding-right:36px}.next-btn.next-large[dir=rtl].next-btn-loading:after{right:16px;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-large{border-radius:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large.next-btn-loading{padding-left:0;padding-right:20px}.next-btn-text[dir=rtl].next-large.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-medium{border-radius:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-medium.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-small{border-radius:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-small.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-timeline,.next-timeline *,.next-timeline:after,.next-timeline :after,.next-timeline:before,.next-timeline :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-timeline ul{margin:0;padding:0;list-style:none}.next-timeline p{margin:0}.next-timeline-hide{display:none}.next-timeline[dir=rtl] .next-timeline-item-folder{padding-left:0;padding-right:28px}.next-timeline[dir=rtl] .next-timeline-item-dot-tail{left:auto;right:8px;border-left:none;border-right:1px dotted #dcdee3}.next-timeline[dir=rtl] .next-timeline-item-has-left-content.next-timeline-item-folder{margin-left:0;margin-right:80px}.next-timeline[dir=rtl] .next-timeline-item-done{position:relative}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-timeline{position:absolute;left:auto;right:0;top:0;height:100%}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-node{position:relative;width:16px;height:24px;padding:4px 0;text-align:center;float:right}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom{width:40px;height:auto;font-size:12px;word-break:break-all;margin-right:-12px;margin-left:0;line-height:1}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-dot{display:block;position:absolute;width:8px;height:8px;border-radius:100%;top:50%;margin-top:-4px;left:50%;margin-left:-4px}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-icon{display:block;position:absolute;width:16px;height:16px;line-height:16px;border-radius:100%;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-tail{position:absolute;width:auto;height:calc(100% - 24px);top:24px;left:auto;right:8px}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-tail i{display:inline-block;vertical-align:top;height:100%;width:1px;position:relative;background:#dcdee3;-webkit-transition:all .4s ease;transition:all .4s ease}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-content{display:inline-block;margin-right:28px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-content .next-timeline-item-title{margin:0;font-size:12px;font-weight:700;line-height:16px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-content .next-timeline-item-body{margin:0;margin-top:8px;font-size:12px;line-height:16px;color:#666;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-content .next-timeline-item-time{margin:0;margin-top:4px;margin-bottom:12px;font-size:12px;color:#999;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-done.next-timeline-item-has-left-content>.next-timeline-item-left-content{position:absolute;width:80px;display:inline-block;font-size:12px;color:#999;line-height:16px;margin-top:4px;text-align:left;padding-left:12px;padding-right:0}.next-timeline[dir=rtl] .next-timeline-item-done.next-timeline-item-has-left-content>.next-timeline-item-left-content p{word-break:break-word}.next-timeline[dir=rtl] .next-timeline-item-done.next-timeline-item-has-left-content>.next-timeline-item-timeline{margin-right:80px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-done.next-timeline-item-has-left-content>.next-timeline-item-content{margin-right:108px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-dot{background:#c4c6cf}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-icon{background:#c4c6cf;color:#fff}.next-timeline[dir=rtl] .next-timeline-item-process{position:relative}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-timeline{position:absolute;left:auto;right:0;top:0;height:100%}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-node{position:relative;width:16px;height:24px;padding:4px 0;text-align:center;float:right}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom{width:40px;height:auto;font-size:12px;word-break:break-all;margin-right:-12px;margin-left:0;line-height:1}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-dot{display:block;position:absolute;width:8px;height:8px;border-radius:100%;top:50%;margin-top:-4px;left:50%;margin-left:-4px}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-icon{display:block;position:absolute;width:16px;height:16px;line-height:16px;border-radius:100%;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-tail{position:absolute;width:auto;height:calc(100% - 24px);top:24px;left:auto;right:8px}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-tail i{display:inline-block;vertical-align:top;height:100%;width:1px;position:relative;background:#dcdee3;-webkit-transition:all .4s ease;transition:all .4s ease}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-content{display:inline-block;margin-right:28px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-content .next-timeline-item-title{margin:0;font-size:12px;font-weight:700;line-height:16px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-content .next-timeline-item-body{margin:0;margin-top:8px;font-size:12px;line-height:16px;color:#666;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-content .next-timeline-item-time{margin:0;margin-top:4px;margin-bottom:12px;font-size:12px;color:#999;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-process.next-timeline-item-has-left-content>.next-timeline-item-left-content{position:absolute;width:80px;display:inline-block;font-size:12px;color:#999;line-height:16px;margin-top:4px;text-align:left;padding-left:12px;padding-right:0}.next-timeline[dir=rtl] .next-timeline-item-process.next-timeline-item-has-left-content>.next-timeline-item-left-content p{word-break:break-word}.next-timeline[dir=rtl] .next-timeline-item-process.next-timeline-item-has-left-content>.next-timeline-item-timeline{margin-right:80px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-process.next-timeline-item-has-left-content>.next-timeline-item-content{margin-right:108px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-dot{background:#5584ff}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-icon{background:#5584ff;color:#fff}.next-timeline[dir=rtl] .next-timeline-item-success{position:relative}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-timeline{position:absolute;left:auto;right:0;top:0;height:100%}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-node{position:relative;width:16px;height:24px;padding:4px 0;text-align:center;float:right}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom{width:40px;height:auto;font-size:12px;word-break:break-all;margin-right:-12px;margin-left:0;line-height:1}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-dot{display:block;position:absolute;width:8px;height:8px;border-radius:100%;top:50%;margin-top:-4px;left:50%;margin-left:-4px}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-icon{display:block;position:absolute;width:16px;height:16px;line-height:16px;border-radius:100%;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-tail{position:absolute;width:auto;height:calc(100% - 24px);top:24px;left:auto;right:8px}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-tail i{display:inline-block;vertical-align:top;height:100%;width:1px;position:relative;background:#dcdee3;-webkit-transition:all .4s ease;transition:all .4s ease}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-content{display:inline-block;margin-right:28px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-content .next-timeline-item-title{margin:0;font-size:12px;font-weight:700;line-height:16px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-content .next-timeline-item-body{margin:0;margin-top:8px;font-size:12px;line-height:16px;color:#666;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-content .next-timeline-item-time{margin:0;margin-top:4px;margin-bottom:12px;font-size:12px;color:#999;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-success.next-timeline-item-has-left-content>.next-timeline-item-left-content{position:absolute;width:80px;display:inline-block;font-size:12px;color:#999;line-height:16px;margin-top:4px;text-align:left;padding-left:12px;padding-right:0}.next-timeline[dir=rtl] .next-timeline-item-success.next-timeline-item-has-left-content>.next-timeline-item-left-content p{word-break:break-word}.next-timeline[dir=rtl] .next-timeline-item-success.next-timeline-item-has-left-content>.next-timeline-item-timeline{margin-right:80px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-success.next-timeline-item-has-left-content>.next-timeline-item-content{margin-right:108px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-dot{background:#46bc15}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-icon{background:#46bc15;color:#fff}.next-timeline[dir=rtl] .next-timeline-item-error{position:relative}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-timeline{position:absolute;left:auto;right:0;top:0;height:100%}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-node{position:relative;width:16px;height:24px;padding:4px 0;text-align:center;float:right}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom{width:40px;height:auto;font-size:12px;word-break:break-all;margin-right:-12px;margin-left:0;line-height:1}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-dot{display:block;position:absolute;width:8px;height:8px;border-radius:100%;top:50%;margin-top:-4px;left:50%;margin-left:-4px}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-icon{display:block;position:absolute;width:16px;height:16px;line-height:16px;border-radius:100%;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-tail{position:absolute;width:auto;height:calc(100% - 24px);top:24px;left:auto;right:8px}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-tail i{display:inline-block;vertical-align:top;height:100%;width:1px;position:relative;background:#dcdee3;-webkit-transition:all .4s ease;transition:all .4s ease}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-content{display:inline-block;margin-right:28px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-content .next-timeline-item-title{margin:0;font-size:12px;font-weight:700;line-height:16px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-content .next-timeline-item-body{margin:0;margin-top:8px;font-size:12px;line-height:16px;color:#666;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-content .next-timeline-item-time{margin:0;margin-top:4px;margin-bottom:12px;font-size:12px;color:#999;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-error.next-timeline-item-has-left-content>.next-timeline-item-left-content{position:absolute;width:80px;display:inline-block;font-size:12px;color:#999;line-height:16px;margin-top:4px;text-align:left;padding-left:12px;padding-right:0}.next-timeline[dir=rtl] .next-timeline-item-error.next-timeline-item-has-left-content>.next-timeline-item-left-content p{word-break:break-word}.next-timeline[dir=rtl] .next-timeline-item-error.next-timeline-item-has-left-content>.next-timeline-item-timeline{margin-right:80px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-error.next-timeline-item-has-left-content>.next-timeline-item-content{margin-right:108px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-dot{background:#ff3000}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-icon{background:#ff3000;color:#fff}.next-timeline{margin:0;padding:0;list-style:none}.next-timeline>li{outline:0}.next-timeline-item-folder{padding-left:28px;padding-top:4px;padding-bottom:4px;font-size:12px;line-height:16px;position:relative}.next-timeline-item-dot-tail{position:absolute;top:0;left:8px;height:100%;border-top:0;border-bottom:0;border-right:0;border-left:1px dotted #dcdee3}.next-timeline-item-dot-tail-solid{border-style:solid}.next-timeline-item-has-left-content.next-timeline-item-folder{margin-left:80px}.next-timeline-item-done{position:relative}.next-timeline-item-done .next-timeline-item-timeline{position:absolute;left:0;top:0;height:100%}.next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-node{position:relative;width:16px;height:24px;padding:4px 0;text-align:center;float:left}.next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom{width:40px;height:auto;font-size:12px;word-break:break-all;margin-left:-12px;line-height:1}.next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-dot{display:block;position:absolute;width:8px;height:8px;border-radius:100%;top:50%;margin-top:-4px;left:50%;margin-left:-4px}.next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-icon{display:block;position:absolute;width:16px;height:16px;line-height:16px;border-radius:100%;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-tail{position:absolute;width:auto;height:calc(100% - 24px);top:24px;left:8px}.next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-tail i{display:inline-block;vertical-align:top;height:100%;width:1px;position:relative;background:#dcdee3;-webkit-transition:all .4s ease;transition:all .4s ease}.next-timeline-item-done .next-timeline-item-content{display:inline-block;margin-left:28px}.next-timeline-item-done .next-timeline-item-content .next-timeline-item-title{margin:0;font-size:12px;font-weight:700;line-height:16px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;text-align:left}.next-timeline-item-done .next-timeline-item-content .next-timeline-item-body{margin:0;margin-top:8px;font-size:12px;line-height:16px;color:#666;text-align:left}.next-timeline-item-done .next-timeline-item-content .next-timeline-item-time{margin:0;margin-top:4px;margin-bottom:12px;font-size:12px;color:#999;text-align:left}.next-timeline-item-done.next-timeline-item-has-left-content>.next-timeline-item-left-content{position:absolute;width:80px;display:inline-block;font-size:12px;color:#999;line-height:16px;margin-top:4px;text-align:right;padding-right:12px}.next-timeline-item-done.next-timeline-item-has-left-content>.next-timeline-item-left-content p{word-break:break-word}.next-timeline-item-done.next-timeline-item-has-left-content>.next-timeline-item-timeline{margin-left:80px}.next-timeline-item-done.next-timeline-item-has-left-content>.next-timeline-item-content{margin-left:108px}.next-timeline-item-done .next-timeline-item-dot{background:#c4c6cf}.next-timeline-item-done .next-timeline-item-icon{background:#c4c6cf;color:#fff}.next-timeline-item-process{position:relative}.next-timeline-item-process .next-timeline-item-timeline{position:absolute;left:0;top:0;height:100%}.next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-node{position:relative;width:16px;height:24px;padding:4px 0;text-align:center;float:left}.next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom{width:40px;height:auto;font-size:12px;word-break:break-all;margin-left:-12px;line-height:1}.next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-dot{display:block;position:absolute;width:8px;height:8px;border-radius:100%;top:50%;margin-top:-4px;left:50%;margin-left:-4px}.next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-icon{display:block;position:absolute;width:16px;height:16px;line-height:16px;border-radius:100%;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-tail{position:absolute;width:auto;height:calc(100% - 24px);top:24px;left:8px}.next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-tail i{display:inline-block;vertical-align:top;height:100%;width:1px;position:relative;background:#dcdee3;-webkit-transition:all .4s ease;transition:all .4s ease}.next-timeline-item-process .next-timeline-item-content{display:inline-block;margin-left:28px}.next-timeline-item-process .next-timeline-item-content .next-timeline-item-title{margin:0;font-size:12px;font-weight:700;line-height:16px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;text-align:left}.next-timeline-item-process .next-timeline-item-content .next-timeline-item-body{margin:0;margin-top:8px;font-size:12px;line-height:16px;color:#666;text-align:left}.next-timeline-item-process .next-timeline-item-content .next-timeline-item-time{margin:0;margin-top:4px;margin-bottom:12px;font-size:12px;color:#999;text-align:left}.next-timeline-item-process.next-timeline-item-has-left-content>.next-timeline-item-left-content{position:absolute;width:80px;display:inline-block;font-size:12px;color:#999;line-height:16px;margin-top:4px;text-align:right;padding-right:12px}.next-timeline-item-process.next-timeline-item-has-left-content>.next-timeline-item-left-content p{word-break:break-word}.next-timeline-item-process.next-timeline-item-has-left-content>.next-timeline-item-timeline{margin-left:80px}.next-timeline-item-process.next-timeline-item-has-left-content>.next-timeline-item-content{margin-left:108px}.next-timeline-item-process .next-timeline-item-dot{background:#5584ff}.next-timeline-item-process .next-timeline-item-icon{background:#5584ff;color:#fff}.next-timeline-item-success{position:relative}.next-timeline-item-success .next-timeline-item-timeline{position:absolute;left:0;top:0;height:100%}.next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-node{position:relative;width:16px;height:24px;padding:4px 0;text-align:center;float:left}.next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom{width:40px;height:auto;font-size:12px;word-break:break-all;margin-left:-12px;line-height:1}.next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-dot{display:block;position:absolute;width:8px;height:8px;border-radius:100%;top:50%;margin-top:-4px;left:50%;margin-left:-4px}.next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-icon{display:block;position:absolute;width:16px;height:16px;line-height:16px;border-radius:100%;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-tail{position:absolute;width:auto;height:calc(100% - 24px);top:24px;left:8px}.next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-tail i{display:inline-block;vertical-align:top;height:100%;width:1px;position:relative;background:#dcdee3;-webkit-transition:all .4s ease;transition:all .4s ease}.next-timeline-item-success .next-timeline-item-content{display:inline-block;margin-left:28px}.next-timeline-item-success .next-timeline-item-content .next-timeline-item-title{margin:0;font-size:12px;font-weight:700;line-height:16px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;text-align:left}.next-timeline-item-success .next-timeline-item-content .next-timeline-item-body{margin:0;margin-top:8px;font-size:12px;line-height:16px;color:#666;text-align:left}.next-timeline-item-success .next-timeline-item-content .next-timeline-item-time{margin:0;margin-top:4px;margin-bottom:12px;font-size:12px;color:#999;text-align:left}.next-timeline-item-success.next-timeline-item-has-left-content>.next-timeline-item-left-content{position:absolute;width:80px;display:inline-block;font-size:12px;color:#999;line-height:16px;margin-top:4px;text-align:right;padding-right:12px}.next-timeline-item-success.next-timeline-item-has-left-content>.next-timeline-item-left-content p{word-break:break-word}.next-timeline-item-success.next-timeline-item-has-left-content>.next-timeline-item-timeline{margin-left:80px}.next-timeline-item-success.next-timeline-item-has-left-content>.next-timeline-item-content{margin-left:108px}.next-timeline-item-success .next-timeline-item-dot{background:#46bc15}.next-timeline-item-success .next-timeline-item-icon{background:#46bc15;color:#fff}.next-timeline-item-error{position:relative}.next-timeline-item-error .next-timeline-item-timeline{position:absolute;left:0;top:0;height:100%}.next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-node{position:relative;width:16px;height:24px;padding:4px 0;text-align:center;float:left}.next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom{width:40px;height:auto;font-size:12px;word-break:break-all;margin-left:-12px;line-height:1}.next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-dot{display:block;position:absolute;width:8px;height:8px;border-radius:100%;top:50%;margin-top:-4px;left:50%;margin-left:-4px}.next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-icon{display:block;position:absolute;width:16px;height:16px;line-height:16px;border-radius:100%;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-tail{position:absolute;width:auto;height:calc(100% - 24px);top:24px;left:8px}.next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-tail i{display:inline-block;vertical-align:top;height:100%;width:1px;position:relative;background:#dcdee3;-webkit-transition:all .4s ease;transition:all .4s ease}.next-timeline-item-error .next-timeline-item-content{display:inline-block;margin-left:28px}.next-timeline-item-error .next-timeline-item-content .next-timeline-item-title{margin:0;font-size:12px;font-weight:700;line-height:16px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;text-align:left}.next-timeline-item-error .next-timeline-item-content .next-timeline-item-body{margin:0;margin-top:8px;font-size:12px;line-height:16px;color:#666;text-align:left}.next-timeline-item-error .next-timeline-item-content .next-timeline-item-time{margin:0;margin-top:4px;margin-bottom:12px;font-size:12px;color:#999;text-align:left}.next-timeline-item-error.next-timeline-item-has-left-content>.next-timeline-item-left-content{position:absolute;width:80px;display:inline-block;font-size:12px;color:#999;line-height:16px;margin-top:4px;text-align:right;padding-right:12px}.next-timeline-item-error.next-timeline-item-has-left-content>.next-timeline-item-left-content p{word-break:break-word}.next-timeline-item-error.next-timeline-item-has-left-content>.next-timeline-item-timeline{margin-left:80px}.next-timeline-item-error.next-timeline-item-has-left-content>.next-timeline-item-content{margin-left:108px}.next-timeline-item-error .next-timeline-item-dot{background:#ff3000}.next-timeline-item-error .next-timeline-item-icon{background:#ff3000;color:#fff}.next-timeline-item-last .next-timeline-item-tail{display:none}.next-timeline-item-has-left-content{min-height:48px}.next-timeline-item-folder.next-timeline-item-has-left-content{min-height:auto} \ No newline at end of file diff --git a/demos/timeline/deps.json b/demos/timeline/deps.json new file mode 100644 index 0000000000..8d92c75d1e --- /dev/null +++ b/demos/timeline/deps.json @@ -0,0 +1 @@ +["icon","button","animate","demo-helper"] \ No newline at end of file diff --git a/demos/timeline/index.html b/demos/timeline/index.html new file mode 100644 index 0000000000..0bf8415af9 --- /dev/null +++ b/demos/timeline/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/transfer/build/index.css b/demos/transfer/build/index.css new file mode 100644 index 0000000000..6c4fb8d53a --- /dev/null +++ b/demos/transfer/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-overlay-wrapper .next-overlay-inner{z-index:1001}.next-overlay-wrapper .next-overlay-backdrop{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;background:#000;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0}.next-overlay-wrapper.opened .next-overlay-backdrop{opacity:.2}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-btn,.next-btn *,.next-btn :after,.next-btn :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-btn::-moz-focus-inner{border:0;padding:0}.next-btn,.next-btn:active,.next-btn:focus,.next-btn:hover{outline:0}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-btn{position:relative;display:inline-block;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;text-align:center;text-transform:none;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;cursor:pointer}.next-btn:after{text-align:center;position:absolute;opacity:0;visibility:hidden;-webkit-transition:opacity .5s ease;transition:opacity .5s ease}.next-btn .next-icon.next-xs:before{vertical-align:baseline}.next-btn.hover,.next-btn:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn.next-small{border-radius:3px;padding:0 8px;height:20px;line-height:18px;font-size:12px;border-width:1px}.next-btn.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-small>.next-btn-icon.next-icon-alone:before,.next-btn.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small.next-btn-loading{padding-left:24px}.next-btn.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:8px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-small.next-btn-loading>.next-icon{display:none}.next-btn.next-medium{border-radius:3px;padding:0 12px;height:28px;line-height:26px;font-size:12px;border-width:1px}.next-btn.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium.next-btn-loading{padding-left:28px}.next-btn.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:12px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-medium.next-btn-loading>.next-icon{display:none}.next-btn.next-large{border-radius:3px;padding:0 16px;height:40px;line-height:38px;font-size:16px;border-width:1px}.next-btn.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-large>.next-btn-icon.next-icon-alone:before,.next-btn.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large.next-btn-loading{padding-left:36px}.next-btn.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:16px;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn.next-large.next-btn-loading>.next-icon{display:none}.next-btn.next-btn-normal{border-style:solid;background-color:#fff;border-color:#c4c6cf}.next-btn.next-btn-normal,.next-btn.next-btn-normal.visited,.next-btn.next-btn-normal:link,.next-btn.next-btn-normal:visited{color:#333}.next-btn.next-btn-normal.active,.next-btn.next-btn-normal.hover,.next-btn.next-btn-normal:active,.next-btn.next-btn-normal:focus,.next-btn.next-btn-normal:hover{color:#333;background-color:#f2f3f7;border-color:#a0a2ad;text-decoration:none}.next-btn.next-btn-primary{border-style:solid;background-color:#5584ff;border-color:transparent}.next-btn.next-btn-primary,.next-btn.next-btn-primary.visited,.next-btn.next-btn-primary:link,.next-btn.next-btn-primary:visited{color:#fff}.next-btn.next-btn-primary.active,.next-btn.next-btn-primary.hover,.next-btn.next-btn-primary:active,.next-btn.next-btn-primary:focus,.next-btn.next-btn-primary:hover{color:#fff;background-color:#3e71f7;border-color:transparent;text-decoration:none}.next-btn.next-btn-secondary{border-style:solid;background-color:#fff;border-color:#5584ff}.next-btn.next-btn-secondary,.next-btn.next-btn-secondary.visited,.next-btn.next-btn-secondary:link,.next-btn.next-btn-secondary:visited{color:#5584ff}.next-btn.next-btn-secondary.active,.next-btn.next-btn-secondary.hover,.next-btn.next-btn-secondary:active,.next-btn.next-btn-secondary:focus,.next-btn.next-btn-secondary:hover{color:#fff;background-color:#3e71f7;border-color:#3e71f7;text-decoration:none}.next-btn.disabled,.next-btn[disabled]{cursor:not-allowed;background-color:#f7f8fa;border-color:#e6e7eb}.next-btn.disabled,.next-btn.disabled.visited,.next-btn.disabled:link,.next-btn.disabled:visited,.next-btn[disabled],.next-btn[disabled].visited,.next-btn[disabled]:link,.next-btn[disabled]:visited{color:#ccc}.next-btn.disabled.active,.next-btn.disabled.hover,.next-btn.disabled:active,.next-btn.disabled:focus,.next-btn.disabled:hover,.next-btn[disabled].active,.next-btn[disabled].hover,.next-btn[disabled]:active,.next-btn[disabled]:focus,.next-btn[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-warning{border-style:solid}.next-btn-warning.next-btn-primary{background-color:#ff3000;border-color:#ff3000}.next-btn-warning.next-btn-primary,.next-btn-warning.next-btn-primary.visited,.next-btn-warning.next-btn-primary:link,.next-btn-warning.next-btn-primary:visited{color:#fff}.next-btn-warning.next-btn-primary.active,.next-btn-warning.next-btn-primary.hover,.next-btn-warning.next-btn-primary:active,.next-btn-warning.next-btn-primary:focus,.next-btn-warning.next-btn-primary:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary[disabled]{background-color:#f7f8fa;border-color:#dcdee3}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary.disabled.visited,.next-btn-warning.next-btn-primary.disabled:link,.next-btn-warning.next-btn-primary.disabled:visited,.next-btn-warning.next-btn-primary[disabled],.next-btn-warning.next-btn-primary[disabled].visited,.next-btn-warning.next-btn-primary[disabled]:link,.next-btn-warning.next-btn-primary[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-primary.disabled.active,.next-btn-warning.next-btn-primary.disabled.hover,.next-btn-warning.next-btn-primary.disabled:active,.next-btn-warning.next-btn-primary.disabled:focus,.next-btn-warning.next-btn-primary.disabled:hover,.next-btn-warning.next-btn-primary[disabled].active,.next-btn-warning.next-btn-primary[disabled].hover,.next-btn-warning.next-btn-primary[disabled]:active,.next-btn-warning.next-btn-primary[disabled]:focus,.next-btn-warning.next-btn-primary[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#dcdee3;text-decoration:none}.next-btn-warning.next-btn-normal{background-color:#fff;border-color:#ff3000}.next-btn-warning.next-btn-normal,.next-btn-warning.next-btn-normal.visited,.next-btn-warning.next-btn-normal:link,.next-btn-warning.next-btn-normal:visited{color:#ff3000}.next-btn-warning.next-btn-normal.active,.next-btn-warning.next-btn-normal.hover,.next-btn-warning.next-btn-normal:active,.next-btn-warning.next-btn-normal:focus,.next-btn-warning.next-btn-normal:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal[disabled]{background-color:#f7f8fa;border-color:#e6e7eb}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal.disabled.visited,.next-btn-warning.next-btn-normal.disabled:link,.next-btn-warning.next-btn-normal.disabled:visited,.next-btn-warning.next-btn-normal[disabled],.next-btn-warning.next-btn-normal[disabled].visited,.next-btn-warning.next-btn-normal[disabled]:link,.next-btn-warning.next-btn-normal[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-normal.disabled.active,.next-btn-warning.next-btn-normal.disabled.hover,.next-btn-warning.next-btn-normal.disabled:active,.next-btn-warning.next-btn-normal.disabled:focus,.next-btn-warning.next-btn-normal.disabled:hover,.next-btn-warning.next-btn-normal[disabled].active,.next-btn-warning.next-btn-normal[disabled].hover,.next-btn-warning.next-btn-normal[disabled]:active,.next-btn-warning.next-btn-normal[disabled]:focus,.next-btn-warning.next-btn-normal[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-text{border-radius:0}.next-btn-text,.next-btn-text.hover,.next-btn-text:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn-text.next-btn-primary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-primary,.next-btn-text.next-btn-primary.visited,.next-btn-text.next-btn-primary:link,.next-btn-text.next-btn-primary:visited{color:#5584ff}.next-btn-text.next-btn-primary.active,.next-btn-text.next-btn-primary.hover,.next-btn-text.next-btn-primary:active,.next-btn-text.next-btn-primary:focus,.next-btn-text.next-btn-primary:hover{color:#3e71f7;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-secondary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-secondary,.next-btn-text.next-btn-secondary.visited,.next-btn-text.next-btn-secondary:link,.next-btn-text.next-btn-secondary:visited{color:#666}.next-btn-text.next-btn-secondary.active,.next-btn-text.next-btn-secondary.hover,.next-btn-text.next-btn-secondary:active,.next-btn-text.next-btn-secondary:focus,.next-btn-text.next-btn-secondary:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-normal{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-normal,.next-btn-text.next-btn-normal.visited,.next-btn-text.next-btn-normal:link,.next-btn-text.next-btn-normal:visited{color:#333}.next-btn-text.next-btn-normal.active,.next-btn-text.next-btn-normal.hover,.next-btn-text.next-btn-normal:active,.next-btn-text.next-btn-normal:focus,.next-btn-text.next-btn-normal:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-large{border-radius:0;padding:0;height:24px;line-height:24px;font-size:14px;border-width:0}.next-btn-text.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-large>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large.next-btn-loading{padding-left:20px}.next-btn-text.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:0;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn-text.next-large.next-btn-loading>.next-icon{display:none}.next-btn-text.next-medium{border-radius:0;padding:0;height:20px;line-height:20px;font-size:12px;border-width:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium.next-btn-loading{padding-left:16px}.next-btn-text.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-medium.next-btn-loading>.next-icon{display:none}.next-btn-text.next-small{border-radius:0;padding:0;height:16px;line-height:16px;font-size:12px;border-width:0}.next-btn-text.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-small>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small.next-btn-loading{padding-left:16px}.next-btn-text.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-small.next-btn-loading>.next-icon{display:none}.next-btn-text.disabled,.next-btn-text[disabled]{background-color:transparent;border-color:transparent}.next-btn-text.disabled,.next-btn-text.disabled.visited,.next-btn-text.disabled:link,.next-btn-text.disabled:visited,.next-btn-text[disabled],.next-btn-text[disabled].visited,.next-btn-text[disabled]:link,.next-btn-text[disabled]:visited{color:#ccc}.next-btn-text.disabled.active,.next-btn-text.disabled.hover,.next-btn-text.disabled:active,.next-btn-text.disabled:focus,.next-btn-text.disabled:hover,.next-btn-text[disabled].active,.next-btn-text[disabled].hover,.next-btn-text[disabled]:active,.next-btn-text[disabled]:focus,.next-btn-text[disabled]:hover{color:#ccc;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-loading{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-loading,.next-btn-text.next-btn-loading.visited,.next-btn-text.next-btn-loading:link,.next-btn-text.next-btn-loading:visited{color:#333}.next-btn-text.next-btn-loading.active,.next-btn-text.next-btn-loading.hover,.next-btn-text.next-btn-loading:active,.next-btn-text.next-btn-loading:focus,.next-btn-text.next-btn-loading:hover{color:#333;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-loading{pointer-events:none}.next-btn-loading:after{font-family:NextIcon;content:"\E646";opacity:1;visibility:visible;-webkit-animation:loadingCircle 2s infinite linear;animation:loadingCircle 2s infinite linear}.next-btn-ghost{-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-btn-ghost.next-btn-dark{background-color:transparent;border-color:#fff}.next-btn-ghost.next-btn-dark,.next-btn-ghost.next-btn-dark.visited,.next-btn-ghost.next-btn-dark:link,.next-btn-ghost.next-btn-dark:visited{color:#fff}.next-btn-ghost.next-btn-dark.active,.next-btn-ghost.next-btn-dark.hover,.next-btn-ghost.next-btn-dark:active,.next-btn-ghost.next-btn-dark:focus,.next-btn-ghost.next-btn-dark:hover{color:#fff;background-color:hsla(0,0%,100%,.8);border-color:#fff;text-decoration:none}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark[disabled]{background-color:transparent;border-color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark.disabled.visited,.next-btn-ghost.next-btn-dark.disabled:link,.next-btn-ghost.next-btn-dark.disabled:visited,.next-btn-ghost.next-btn-dark[disabled],.next-btn-ghost.next-btn-dark[disabled].visited,.next-btn-ghost.next-btn-dark[disabled]:link,.next-btn-ghost.next-btn-dark[disabled]:visited{color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled.active,.next-btn-ghost.next-btn-dark.disabled.hover,.next-btn-ghost.next-btn-dark.disabled:active,.next-btn-ghost.next-btn-dark.disabled:focus,.next-btn-ghost.next-btn-dark.disabled:hover,.next-btn-ghost.next-btn-dark[disabled].active,.next-btn-ghost.next-btn-dark[disabled].hover,.next-btn-ghost.next-btn-dark[disabled]:active,.next-btn-ghost.next-btn-dark[disabled]:focus,.next-btn-ghost.next-btn-dark[disabled]:hover{color:hsla(0,0%,100%,.4);background-color:transparent;border-color:hsla(0,0%,100%,.4);text-decoration:none}.next-btn-ghost.next-btn-light{background-color:transparent;border-color:#333}.next-btn-ghost.next-btn-light,.next-btn-ghost.next-btn-light.visited,.next-btn-ghost.next-btn-light:link,.next-btn-ghost.next-btn-light:visited{color:#333}.next-btn-ghost.next-btn-light.active,.next-btn-ghost.next-btn-light.hover,.next-btn-ghost.next-btn-light:active,.next-btn-ghost.next-btn-light:focus,.next-btn-ghost.next-btn-light:hover{color:#999;background-color:rgba(0,0,0,.92);border-color:#333;text-decoration:none}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light[disabled]{background-color:transparent;border-color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light.disabled.visited,.next-btn-ghost.next-btn-light.disabled:link,.next-btn-ghost.next-btn-light.disabled:visited,.next-btn-ghost.next-btn-light[disabled],.next-btn-ghost.next-btn-light[disabled].visited,.next-btn-ghost.next-btn-light[disabled]:link,.next-btn-ghost.next-btn-light[disabled]:visited{color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled.active,.next-btn-ghost.next-btn-light.disabled.hover,.next-btn-ghost.next-btn-light.disabled:active,.next-btn-ghost.next-btn-light.disabled:focus,.next-btn-ghost.next-btn-light.disabled:hover,.next-btn-ghost.next-btn-light[disabled].active,.next-btn-ghost.next-btn-light[disabled].hover,.next-btn-ghost.next-btn-light[disabled]:active,.next-btn-ghost.next-btn-light[disabled]:focus,.next-btn-ghost.next-btn-light[disabled]:hover{color:rgba(0,0,0,.1);background-color:transparent;border-color:rgba(0,0,0,.1);text-decoration:none}.next-btn-group{position:relative;display:inline-block;vertical-align:middle}.next-btn-group>.next-btn{position:relative;float:left;-webkit-box-shadow:none;box-shadow:none}.next-btn-group>.next-btn.active,.next-btn-group>.next-btn:active,.next-btn-group>.next-btn:focus,.next-btn-group>.next-btn:hover{z-index:1}.next-btn-group>.next-btn.disabled,.next-btn-group>.next-btn[disabled]{z-index:0}.next-btn-group .next-btn.next-btn{margin:0 0 0 -1px}.next-btn-group .next-btn:not(:first-child):not(:last-child){border-radius:0}.next-btn-group>.next-btn:first-child{margin:0}.next-btn-group>.next-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group>.next-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group>.next-btn-primary:not(:first-child){border-left-color:hsla(0,0%,100%,.2)}.next-btn-group>.next-btn-primary:not(:first-child):hover{border-left-color:transparent}.next-btn-group>.next-btn-primary:not(:first-child).disabled,.next-btn-group>.next-btn-primary:not(:first-child)[disabled]{border-left-color:#e6e7eb}.next-btn-group[dir=rtl]>.next-btn{float:right}.next-btn-group[dir=rtl] .next-btn.next-btn{margin:0 -1px 0 0}.next-btn-group[dir=rtl]>.next-btn:first-child:not(:last-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group[dir=rtl]>.next-btn:last-child:not(:first-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child){border-right-color:hsla(0,0%,100%,.2)}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child):hover{border-right-color:transparent}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child).disabled,.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child)[disabled]{border-right-color:#e6e7eb}.next-btn.next-small[dir=rtl]{border-radius:3px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl].next-btn-loading{padding-left:8px;padding-right:24px}.next-btn.next-small[dir=rtl].next-btn-loading:after{right:8px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-medium[dir=rtl]{border-radius:3px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl].next-btn-loading{padding-left:12px;padding-right:28px}.next-btn.next-medium[dir=rtl].next-btn-loading:after{right:12px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-large[dir=rtl]{border-radius:3px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl].next-btn-loading{padding-left:16px;padding-right:36px}.next-btn.next-large[dir=rtl].next-btn-loading:after{right:16px;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-large{border-radius:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large.next-btn-loading{padding-left:0;padding-right:20px}.next-btn-text[dir=rtl].next-large.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-medium{border-radius:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-medium.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-small{border-radius:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-small.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-radio-button-large[dir=rtl]>label:first-child{margin-left:-1px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.next-radio-button-large[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large[dir=rtl] .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-wrapper[dir=rtl] .next-radio-label{margin-left:0;margin-right:4px}.next-radio-group[dir=rtl] .next-radio-label{margin-right:4px;margin-left:16px}.next-radio-button[dir=rtl]>label .next-radio-label{margin:0}.next-radio-wrapper{outline:0}.next-radio-wrapper .next-radio{display:inline-block;vertical-align:middle;position:relative;line-height:1}.next-radio-wrapper .next-radio,.next-radio-wrapper .next-radio *,.next-radio-wrapper .next-radio :after,.next-radio-wrapper .next-radio :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-radio-wrapper .next-radio input[type=radio]{opacity:0;position:absolute;vertical-align:middle;top:0;left:0;width:16px;height:16px;margin:0}.next-radio-wrapper .next-radio-inner{display:block;width:16px;height:16px;background:#fff;border-radius:50%;border:1px solid #c4c6cf;-webkit-transition:all .36s ease 0s;transition:all .36s ease 0s;-webkit-box-shadow:none;box-shadow:none}.next-radio-wrapper .next-radio-inner:after{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;border-radius:50%;top:50%;margin-top:-2px;left:50%;margin-left:-2px;background:#fff;content:" ";-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86)}.next-radio-wrapper.checked .next-radio-inner{border-color:#5584ff;background:#5584ff}.next-radio-wrapper.checked .next-radio-inner:after{width:4px;height:4px;font-weight:700;background:#fff;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.next-radio-wrapper.checked.hovered .next-radio-inner,.next-radio-wrapper.checked:hover .next-radio-inner{border-color:transparent}.next-radio-wrapper.disabled input[type=radio]{cursor:not-allowed}.next-radio-wrapper.disabled .next-radio-inner{border-color:#e6e7eb;background:#f7f8fa}.next-radio-wrapper.disabled.checked .next-radio-inner,.next-radio-wrapper.disabled .next-radio-inner.hovered,.next-radio-wrapper.disabled .next-radio-inner:hover{border-color:#e6e7eb}.next-radio-wrapper.disabled.checked .next-radio-inner:after{background:#ccc}.next-radio-wrapper:not(.disabled).focused .next-radio-inner,.next-radio-wrapper:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper:not(.disabled):focus .next-radio-inner,.next-radio-wrapper:not(.disabled):hover .next-radio-inner{border-color:#5584ff;background-color:#dee8ff}.next-radio-wrapper.checked.focused .next-radio-inner,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner{border-color:transparent;background:#3e71f7}.next-radio-wrapper.checked.focused .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner:after{background:#fff}.next-radio-button .next-radio,.next-radio-button input[type=radio]{width:0;height:0}.next-radio-button>label{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1;margin:0 0 0 -1px;border:1px solid #c4c6cf;background-color:#fff;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;vertical-align:middle}.next-radio-button>label .next-radio-label{display:block;color:#333;margin:0;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}.next-radio-button>label.hovered,.next-radio-button>label:focus,.next-radio-button>label:hover{z-index:10;border-color:#a0a2ad;background-color:#f2f3f7}.next-radio-button>label.hovered .next-radio-label,.next-radio-button>label:focus .next-radio-label,.next-radio-button>label:hover .next-radio-label{color:#333}.next-radio-button>label.checked{z-index:11;border-color:#5584ff;background-color:#fff}.next-radio-button>label.checked .next-radio-label{color:#5584ff}.next-radio-button>label.disabled{z-index:0;cursor:not-allowed;border-color:#e6e7eb;background-color:#f7f8fa}.next-radio-button>label.disabled .next-radio-label{color:#ccc}.next-radio-button>label.checked.disabled{z-index:0;border-color:#e6e7eb;background-color:#f2f3f7}.next-radio-button>label.checked.disabled .next-radio-label{color:#ccc}.next-radio-button-large>label{padding:0 8px;height:40px;line-height:40px}.next-radio-button-large>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-large .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium>label{padding:0 8px;height:28px;line-height:28px}.next-radio-button-medium>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-medium>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium .next-radio-label{height:26px;line-height:26px;font-size:12px}.next-radio-button-small>label{padding:0 8px;height:20px;line-height:20px}.next-radio-button-small>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small .next-radio-label{height:18px;line-height:18px;font-size:12px}.next-radio-single-input input[type=radio]{opacity:0;position:absolute;top:0;left:0;margin:0}.next-radio-group{display:inline-block}.next-radio-group .next-radio-label{color:#333;margin-right:16px}.next-radio-group.disabled .next-radio-label{color:#ccc}.next-radio-group-ver .next-radio-wrapper{display:block;margin-bottom:8px}.next-radio-label{margin:0;margin-left:4px;font-size:12px;vertical-align:middle;line-height:1}@-moz-document url-prefix(){.next-radio{margin-top:-1px}@supports ((-webkit-animation:calc(0s)) or (animation:calc(0s))){.next-radio{margin-top:-3px}}}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}@-webkit-keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}@keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}.next-tag>.next-tag-body{overflow:hidden;text-overflow:ellipsis}.next-tag-checkable.next-tag-level-secondary{color:#333;border-color:transparent;background-color:transparent}.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):hover{color:#5584ff}.next-tag-closable.next-tag-level-primary,.next-tag-default.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-primary,.disabled.next-tag-default.next-tag-level-primary,[disabled].next-tag-closable.next-tag-level-primary,[disabled].next-tag-default.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.disabled.next-tag-default.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-checkable.next-tag-level-primary,[disabled].next-tag-checkable.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary.checked{color:#fff;border-color:#5584ff;background-color:#5584ff}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover{color:#fff;border-color:#3e71f7;background-color:#3e71f7}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked>.next-tag-close-btn{color:#fff}.next-tag-default.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-default.next-tag-level-normal,[disabled].next-tag-default.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.disabled.next-tag-default.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-closable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-normal,[disabled].next-tag-closable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:transparent}.disabled.next-tag-closable.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-normal.checked,.next-tag-checkable.next-tag-level-secondary.checked{color:#5584ff;border-color:#5584ff;background-color:transparent}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover{color:#3e71f7;border-color:#3e71f7;background-color:transparent}.next-tag-checkable.next-tag-level-secondary.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-secondary.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-secondary.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-secondary.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-secondary.checked:after{color:#fff}.next-tag-checkable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#c4c6cf;background-color:transparent}.disabled.next-tag-checkable.next-tag-level-normal,[disabled].next-tag-checkable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-normal.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-normal.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-normal.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-normal.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-normal.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-normal.checked:after{color:#fff}.next-tag-closable.next-tag-level-normal:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#c4c6cf;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-closable.next-tag-level-normal:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E626";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:before{background-color:#a0a2ad}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-closable.next-tag-level-normal:disabled:before,[disabled].next-tag-closable.next-tag-level-normal:before{background-color:#e6e7eb}.next-tag-closable.next-tag-level-normal:disabled:after,[disabled].next-tag-closable.next-tag-level-normal:after{color:#fff}.next-tag-group .next-tag-large,.next-tag-group .next-tag-medium{margin-right:8px;margin-bottom:8px}.next-tag-group .next-tag-small{margin-right:4px;margin-bottom:4px}.next-tag{display:inline-block;max-width:100%;vertical-align:middle;border-width:1px;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid;overflow:hidden;white-space:nowrap;-webkit-transition:all .2s cubic-bezier(.23,1,.32,1);transition:all .2s cubic-bezier(.23,1,.32,1);font-size:0;outline:0}.next-tag,.next-tag *,.next-tag :after,.next-tag :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tag>.next-tag-body{position:relative;display:inline-block;height:100%;text-align:center;vertical-align:middle;max-width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.next-tag>.next-tag-body>a{text-decoration:none;color:inherit}.next-tag>.next-tag-body>a:before{content:" ";position:absolute;display:block;top:0;left:0;right:0;bottom:0}.next-tag>.next-tag-body .next-icon{line-height:1;vertical-align:middle}.next-tag>.next-tag-body .next-icon:before{font-size:inherit}.next-tag.next-tag-body-pointer{cursor:pointer}.next-tag.disabled,.next-tag[disabled]{cursor:not-allowed;pointer-events:none}.next-tag-large{height:40px;padding:0;line-height:38px;font-size:0}.next-tag-large>.next-tag-body{font-size:16px;padding:0 16px;min-width:48px}.next-tag-large.next-tag-closable>.next-tag-body{padding:0 0 0 16px}.next-tag-large[dir=rtl].next-tag-closable>.next-tag-body{padding:0 16px 0 0}.next-tag-large>.next-tag-close-btn{margin-left:12px;padding-right:16px}.next-tag-large>.next-tag-close-btn .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tag-large[dir=rtl]>.next-tag-close-btn{margin-right:12px;margin-left:0;padding-right:0;padding-left:16px}.next-tag-medium{height:28px;padding:0;line-height:26px;font-size:0}.next-tag-medium>.next-tag-body{font-size:14px;padding:0 12px;min-width:40px}.next-tag-medium.next-tag-closable>.next-tag-body{padding:0 0 0 12px}.next-tag-medium[dir=rtl].next-tag-closable>.next-tag-body{padding:0 12px 0 0}.next-tag-medium>.next-tag-close-btn{margin-left:8px;padding-right:12px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-medium>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-medium[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:12px}.next-tag-small{height:20px;padding:0;line-height:18px;font-size:0}.next-tag-small>.next-tag-body{font-size:12px;padding:0 8px;min-width:28px}.next-tag-small.next-tag-closable>.next-tag-body{padding:0 0 0 8px}.next-tag-small[dir=rtl].next-tag-closable>.next-tag-body{padding:0 8px 0 0}.next-tag-small>.next-tag-close-btn{margin-left:8px;padding-right:8px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-small>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-small[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:8px}.next-tag-default{cursor:default}.next-tag-closable{position:relative}.next-tag-closable.next-tag-large>.next-tag-body{max-width:calc(100% - 40px)}.next-tag-closable.next-tag-medium>.next-tag-body{max-width:calc(100% - 28px)}.next-tag-closable.next-tag-small>.next-tag-body{max-width:calc(100% - 20px)}.next-tag-closable>.next-tag-close-btn{display:inline-block;vertical-align:middle;height:100%;text-align:center;cursor:pointer}.next-tag-closable.next-tag-level-normal.disabled,.next-tag-closable.next-tag-level-normal[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable{cursor:pointer;position:relative;border-radius:3px}.next-tag-checkable.checked:before{-webkit-animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.checked:after{-webkit-animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86);animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):before{right:-10px;bottom:-10px;width:20px;height:20px}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):after{font-size:8px;line-height:8px;right:0;bottom:0}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):before{right:-14px;bottom:-14px;width:28px;height:28px}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):after{font-size:12px;line-height:12px;right:0;bottom:0}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):before{right:-18px;bottom:-18px;width:36px;height:36px}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):after{font-size:16px;line-height:16px;right:0;bottom:0}.next-tag-checkable.next-tag-level-primary.disabled,.next-tag-checkable.next-tag-level-primary[disabled]{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-secondary.disabled,.next-tag-checkable.next-tag-level-secondary[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-zoom-appear,.next-tag-zoom-enter{-webkit-animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-tag-zoom-leave{-webkit-animation:zoomOut .3s ease-in;animation:zoomOut .3s ease-in;-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-checkbox-wrapper[dir=rtl]{margin-right:8px;margin-left:0}.next-checkbox-wrapper[dir=rtl]:first-child{margin-right:0}.next-checkbox-wrapper[dir=rtl]>.next-checkbox-label{margin-right:4px;margin-left:0}.next-checkbox-wrapper,.next-checkbox-wrapper *,.next-checkbox-wrapper :after,.next-checkbox-wrapper :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-checkbox-wrapper .next-checkbox{display:inline-block;position:relative;line-height:1;vertical-align:middle}.next-checkbox-wrapper input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:16px;height:16px;margin:0}.next-checkbox-wrapper .next-checkbox-inner{display:block;width:16px;height:16px;background:#fff;border-radius:3px;border:1px solid #c4c6cf;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;text-align:left;-webkit-box-shadow:none;box-shadow:none}.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;top:0;opacity:0;line-height:16px;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);color:#fff;left:4px;margin-left:0}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{vertical-align:top;margin-top:0}.next-checkbox-wrapper.checked .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.checked .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);margin-left:0}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.indeterminate .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.indeterminate .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1);margin-left:0}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.disabled input[type=checkbox]{cursor:not-allowed}.next-checkbox-wrapper.disabled .next-checkbox-inner{border-color:#e6e7eb;background:#f7f8fa}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover{border-color:#e6e7eb}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner>.next-icon{color:#ccc;opacity:1}.next-checkbox-wrapper.focused .next-checkbox-inner,.next-checkbox-wrapper.hovered .next-checkbox-inner,.next-checkbox-wrapper:not(.disabled):hover .next-checkbox-inner{border-color:#5584ff;background-color:#dee8ff}.next-checkbox-wrapper.checked.focused .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner{border-color:transparent;background-color:#3e71f7}.next-checkbox-wrapper.checked.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner>.next-icon{color:#fff;opacity:1}.next-checkbox-group .next-checkbox-wrapper{margin-left:8px}.next-checkbox-group .next-checkbox-wrapper:first-child{margin-left:0}.next-checkbox-group-ver .next-checkbox-wrapper{display:block;margin-left:0;margin-right:0;margin-bottom:8px}.next-checkbox-label{font-size:12px;vertical-align:middle;margin:0;margin-left:4px;line-height:1}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-menu[dir=rtl] .next-menu-item-helper{float:left}.next-menu[dir=rtl] .next-menu-item .next-checkbox,.next-menu[dir=rtl] .next-menu-item .next-radio{margin-left:4px;margin-right:0}.next-menu[dir=rtl] .next-menu-hoz-right{float:left}.next-menu[dir=rtl] .next-menu-hoz-icon-arrow.next-icon{left:6px;right:auto}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon{margin-left:0;margin-right:-16px}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon.next-menu-icon-right{right:auto;left:4px}.next-menu[dir=rtl] .next-menu-icon-arrow.next-icon{left:10px;right:auto}.next-menu{position:relative;min-width:100px;padding:8px 0;margin:0;list-style:none;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;background:#fff;line-height:32px;font-size:12px}.next-menu,.next-menu *,.next-menu :after,.next-menu :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-menu:focus,.next-menu :focus{outline:0}.next-menu-embeddable,.next-menu-embeddable .next-menu-item.next-disabled,.next-menu-embeddable .next-menu-item.next-disabled .next-menu-item-text>a{background:initial;border:none}.next-menu-embeddable .next-menu-item-inner{height:100%}.next-menu-content{position:relative}.next-menu-content,.next-menu-sub-menu{padding:0;margin:0;list-style:none}.next-menu-sub-menu.next-expand-enter{overflow:hidden}.next-menu-sub-menu.next-expand-enter-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-sub-menu.next-expand-leave{overflow:hidden}.next-menu-sub-menu.next-expand-leave-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-item{position:relative;padding:0 20px;-webkit-transition:background .2s ease;transition:background .2s ease;color:#333;cursor:pointer}.next-menu-item-helper{float:right;color:#999;font-style:normal;font-size:12px}.next-menu-item .next-checkbox,.next-menu-item .next-radio{margin-right:4px}.next-menu-item.next-selected{color:#333;background-color:#fff}.next-menu-item.next-selected .next-menu-icon-arrow{color:#666}.next-menu-item.next-selected .next-menu-icon-selected{color:#5584ff}.next-menu-item.next-disabled,.next-menu-item.next-disabled .next-menu-item-text>a{color:#ccc;background-color:#fff;cursor:not-allowed}.next-menu-item.next-disabled .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-icon-selected,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-selected{color:#ccc}.next-menu-item:not(.next-disabled).next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover,.next-menu-item:not(.next-disabled).next-selected:focus,.next-menu-item:not(.next-disabled).next-selected:focus:hover,.next-menu-item:not(.next-disabled).next-selected:hover,.next-menu-item:not(.next-disabled):hover{color:#333;background-color:#f2f3f7}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled):hover .next-menu-icon-arrow{color:#333}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled):hover .next-menu-icon-selected{color:#5584ff}.next-menu-item-inner{height:32px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.next-menu-item-text{vertical-align:middle}.next-menu-item-text>a{display:inline-block;text-decoration:none;color:#333}.next-menu-item-text>a:before{position:absolute;background-color:transparent;top:0;left:0;bottom:0;right:0;content:""}.next-menu.next-hoz{padding:0}.next-menu.next-hoz .next-menu-content>.next-menu-item,.next-menu.next-hoz>.next-menu-item{display:inline-block;vertical-align:top}.next-menu.next-hoz .next-menu-content,.next-menu.next-hoz .next-menu-footer,.next-menu.next-hoz .next-menu-header{display:inline-block}.next-menu-hoz-right{float:right}.next-menu-group-label{padding:0 12px;color:#999}.next-menu-divider{margin:8px 12px;border-bottom:1px solid #e6e7eb}.next-menu .next-menu-icon-selected.next-icon{position:absolute;top:0;margin-left:-16px}.next-menu .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-icon-selected.next-icon.next-menu-icon-right{right:4px}.next-menu .next-menu-icon-arrow.next-icon{position:absolute;top:0;right:10px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-icon-arrow.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow.next-icon:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-icon-arrow-down.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:scale(.5) rotate(180deg);-ms-transform:scale(.5) rotate(180deg);transform:scale(.5) rotate(180deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-down.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.next-menu .next-menu-icon-arrow-right.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:scale(.5) rotate(-90deg);-ms-transform:scale(.5) rotate(-90deg);transform:scale(.5) rotate(-90deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-right.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-hoz-icon-arrow.next-icon{position:absolute;top:0;right:6px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-hoz-icon-arrow.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-hoz-icon-arrow.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-hoz-icon-arrow.next-open:before{width:12px;font-size:12px;line-height:inherit}.next-menu.next-context{line-height:24px}.next-menu.next-context .next-menu-item-inner{height:24px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-input{vertical-align:middle;display:inline-table;border-collapse:separate;font-size:0;line-height:1;width:200px;border-spacing:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;border:1px solid #c4c6cf;background-color:#fff}.next-input,.next-input *,.next-input :after,.next-input :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input input{height:100%}.next-input input[type=reset],.next-input input[type=submit]{-webkit-appearance:button;cursor:pointer}.next-input input::-moz-focus-inner{border:0;padding:0}.next-input input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset}.next-input textarea{resize:none}.next-input input,.next-input textarea{width:100%;border:none;outline:none;padding:0;margin:0;font-weight:400;vertical-align:middle;background-color:transparent;color:#333}.next-input input::-ms-clear,.next-input textarea::-ms-clear{display:none}.next-input.next-input-textarea{border-radius:3px;font-size:0}.next-input.next-input-textarea textarea{color:#333;padding:4px 8px;font-size:12px;border-radius:3px}.next-input.next-input-textarea .next-input-control{display:block;width:auto;border-radius:3px}.next-input.next-input-textarea .next-input-len{padding:0 8px 4px;display:block;text-align:right;width:auto}.next-input.next-small{height:20px;border-radius:3px}.next-input.next-small .next-input-label{padding-left:8px;font-size:12px}.next-input.next-small .next-input-inner{font-size:12px}.next-input.next-small .next-input-control{padding-right:4px}.next-input.next-small input{height:18px;line-height:18px \0;padding:0 4px;font-size:12px}.next-input.next-small input::-webkit-input-placeholder{font-size:12px}.next-input.next-small input::-moz-placeholder{font-size:12px}.next-input.next-small input::-ms-input-placeholder{font-size:12px}.next-input.next-small input::placeholder{font-size:12px}.next-input.next-small .next-input-text-field{padding:0 4px;font-size:12px;height:18px;line-height:18px}.next-input.next-small .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-small input{border-radius:3px}.next-input.next-small .next-input-control{border-radius:0 3px 3px 0}.next-input.next-medium{height:28px;border-radius:3px}.next-input.next-medium .next-input-label{padding-left:8px;font-size:12px}.next-input.next-medium .next-input-inner{font-size:12px}.next-input.next-medium .next-input-control{padding-right:8px}.next-input.next-medium input{height:26px;line-height:26px \0;padding:0 8px;font-size:12px}.next-input.next-medium input::-webkit-input-placeholder{font-size:12px}.next-input.next-medium input::-moz-placeholder{font-size:12px}.next-input.next-medium input::-ms-input-placeholder{font-size:12px}.next-input.next-medium input::placeholder{font-size:12px}.next-input.next-medium .next-input-text-field{padding:0 8px;font-size:12px;height:26px;line-height:26px}.next-input.next-medium .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-medium input{border-radius:3px}.next-input.next-medium .next-input-control{border-radius:0 3px 3px 0}.next-input.next-large{height:40px;border-radius:3px}.next-input.next-large .next-input-label{padding-left:12px;font-size:16px}.next-input.next-large .next-input-inner{font-size:16px}.next-input.next-large .next-input-control{padding-right:8px}.next-input.next-large input{height:38px;line-height:38px \0;padding:0 12px;font-size:16px}.next-input.next-large input::-webkit-input-placeholder{font-size:16px}.next-input.next-large input::-moz-placeholder{font-size:16px}.next-input.next-large input::-ms-input-placeholder{font-size:16px}.next-input.next-large input::placeholder{font-size:16px}.next-input.next-large .next-input-text-field{padding:0 12px;font-size:16px;height:38px;line-height:38px}.next-input.next-large .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-input.next-large input{border-radius:3px}.next-input.next-large .next-input-control{border-radius:0 3px 3px 0}.next-input-hint-wrap{color:#999;position:relative}.next-input-hint-wrap .next-input-clear{opacity:0;z-index:1;position:absolute}.next-input-hint-wrap .next-input-hint{opacity:1}.next-input .next-icon-delete-filling:hover{cursor:pointer;color:#666}.next-input.next-focus,.next-input:hover{border-color:#a0a2ad;background-color:#fff}.next-input.next-focus .next-input-clear,.next-input:hover .next-input-clear{opacity:1}.next-input.next-focus .next-input-clear+.next-input-hint,.next-input:hover .next-input-clear+.next-input-hint{opacity:0}.next-input .next-input-clear:focus{opacity:1}.next-input .next-input-clear:focus+.next-input-hint{opacity:0}.next-input.next-focus{border-color:#5584ff;background-color:#fff}.next-input.next-error,.next-input.next-error.next-focus,.next-input.next-error:hover{border-color:#ff3000}.next-input.next-hidden{display:none}.next-input.next-noborder{border:none}.next-input-control .next-input-len{font-size:12px;line-height:12px;color:#999;display:table-cell;width:1px;vertical-align:bottom}.next-input-control .next-input-len.next-error{color:#ff3000}.next-input-control>*{display:table-cell;width:1%;top:0}.next-input-control>:not(:last-child){padding-right:4px}.next-input-control .next-icon{-webkit-transition:all .3s ease-out;transition:all .3s ease-out;color:#999}.next-input-control .next-icon-success-filling{color:#46bc15}.next-input-control .next-icon-loading{color:#4494f9}.next-input-label{color:#666}.next-input input::-moz-placeholder,.next-input textarea::-moz-placeholder{color:#999;opacity:1}.next-input input:-ms-input-placeholder,.next-input textarea:-ms-input-placeholder{color:#999}.next-input input::-webkit-input-placeholder,.next-input textarea::-webkit-input-placeholder{color:#999}.next-input.next-disabled{color:#ccc;cursor:not-allowed}.next-input.next-disabled,.next-input.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled input::-moz-placeholder,.next-input.next-disabled textarea::-moz-placeholder{color:#ccc;opacity:1}.next-input.next-disabled input:-ms-input-placeholder,.next-input.next-disabled textarea:-ms-input-placeholder{color:#ccc}.next-input.next-disabled input::-webkit-input-placeholder,.next-input.next-disabled textarea::-webkit-input-placeholder{color:#ccc}.next-input.next-disabled .next-input-label,.next-input.next-disabled .next-input-len{color:#ccc}.next-input.next-disabled input,.next-input.next-disabled textarea{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa;cursor:not-allowed}.next-input.next-disabled input:hover,.next-input.next-disabled textarea:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled .next-input-hint-wrap{color:#ccc}.next-input.next-disabled .next-input-hint-wrap .next-input-clear{opacity:0}.next-input.next-disabled .next-input-hint-wrap .next-input-hint{opacity:1}.next-input.next-disabled .next-input-hint-wrap .next-icon-delete-filling:hover{cursor:not-allowed;color:#ccc}.next-input.next-disabled .next-icon{color:#ccc}.next-input-control,.next-input-inner,.next-input-label{display:table-cell;width:1px;vertical-align:middle;line-height:1;background-color:transparent;white-space:nowrap}.next-input-group{display:inline-table;border-collapse:separate;border-spacing:0;line-height:0;width:100%}.next-input-group,.next-input-group *,.next-input-group :after,.next-input-group :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input-group-auto-width{width:100%;border-radius:0!important}.next-input-group>.next-input:first-child.next-large,.next-input-group>.next-input:first-child.next-medium,.next-input-group>.next-input:first-child.next-small{border-top-left-radius:3px!important;border-bottom-left-radius:3px!important}.next-input-group>.next-input:last-child.next-large,.next-input-group>.next-input:last-child.next-medium,.next-input-group>.next-input:last-child.next-small{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.next-input-group-addon{width:1px;display:table-cell;vertical-align:middle;white-space:nowrap}.next-input-group-addon:first-child,.next-input-group-addon:first-child>*{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group-addon:last-child,.next-input-group-addon:last-child>*{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group-text{color:#999;background-color:#f2f3f7;text-align:center;border:1px solid #c4c6cf;padding:0 8px}.next-input-group-text:first-child{border-right-width:0}.next-input-group-text:last-child{border-left-width:0}.next-input-group-text.next-disabled{color:#ccc;cursor:not-allowed}.next-input-group-text.next-disabled,.next-input-group-text.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input-group-text.next-medium,.next-input-group-text.next-small{font-size:12px;border-radius:3px}.next-input-group-text.next-large{font-size:16px;border-radius:3px}.next-input[dir=rtl].next-small .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-small .next-input-control{padding-right:0;padding-left:4px}.next-input[dir=rtl].next-medium .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-medium .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-large .next-input-label{padding-left:0;padding-right:12px}.next-input[dir=rtl].next-large .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-input-textarea .next-input-len{text-align:left}.next-input[dir=rtl] .next-input-control>:not(:last-child){padding-left:4px;padding-right:0}.next-input-group[dir=rtl] .next-input-group-addon:first-child{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-small{border-bottom-right-radius:3px!important;border-top-right-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-small{border-bottom-left-radius:3px!important;border-top-left-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-text:first-child{border-right-width:1px;border-left:0}.next-input-group[dir=rtl] .next-input-group-text:last-child{border-left-width:1px;border-right:0}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-select{display:inline-block;font-size:0;vertical-align:middle}.next-select,.next-select *,.next-select :after,.next-select :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-select-trigger{min-width:100px;outline:0;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-trigger .next-input-label{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-select-values{display:block;width:100%;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow:hidden}.next-select-trigger .next-select-values>em{font-style:inherit}.next-select-trigger .next-select-values input{padding-left:0;padding-right:0}.next-select-trigger .next-input-control{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-input-control>*{display:inline-block;width:auto}.next-select-trigger .next-input-control>.next-select-arrow{padding-right:0}.next-select-trigger .next-input.next-disabled em{color:#ccc}.next-select-trigger .next-input.next-disabled .next-select-arrow{cursor:not-allowed}.next-select-trigger .next-select-clear{display:none}.next-select-trigger.next-has-clear:hover .next-select-clear{display:inline-block}.next-select-trigger.next-has-clear:hover .next-select-arrow{display:none}.next-select .next-select-inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;min-width:100px;outline:0;color:#333}.next-select .next-select-inner .next-tag{line-height:1;margin-right:4px;margin-bottom:3px;padding-left:4px;padding-right:4px}.next-select-trigger-search{position:relative;display:inline-block;vertical-align:top;overflow:hidden;width:100%;max-width:100%}.next-select-trigger-search>input,.next-select-trigger-search>span{display:block;font-size:inherit;font-family:inherit;letter-spacing:inherit;white-space:nowrap;overflow:hidden}.next-select-trigger-search input{position:absolute;background-color:transparent;width:100%;height:100%!important;z-index:1;left:0;border:0;outline:0;margin:0;padding:0;cursor:inherit}.next-select-trigger-search>span{position:relative;visibility:hidden;white-space:pre;max-width:100%;z-index:-1}.next-select-single.next-no-search{cursor:pointer}.next-select-single.next-has-search.next-active .next-select-values>em{display:none}.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{width:1px;opacity:0;filter:alpha(opacity=0)}.next-select-single.next-inactive .next-select-trigger-search input,.next-select-single.next-no-search .next-select-trigger-search input{color:transparent}.next-select-single .next-select-values{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.next-select-single .next-select-values>em{vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.next-select-multiple .next-select-values,.next-select-tag .next-select-values{margin-bottom:-3px;height:auto!important}.next-select-multiple .next-select-trigger-search,.next-select-tag .next-select-trigger-search{margin-bottom:3px}.next-select-multiple .next-tag+.next-select-trigger-search,.next-select-tag .next-tag+.next-select-trigger-search{width:auto;min-width:1px}.next-select-multiple .next-input,.next-select-tag .next-input{height:auto;-webkit-box-align:start;-ms-flex-align:start;align-items:start}.next-select-multiple.next-small .next-select-values,.next-select-tag.next-small .next-select-values{min-height:18px;padding-top:2px;padding-bottom:2px;line-height:14px}.next-select-multiple.next-small .next-tag,.next-select-tag.next-small .next-tag{border:0;padding-top:0;padding-bottom:0;height:14px}.next-select-multiple.next-small .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-close-btn,.next-select-tag.next-small .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-close-btn{line-height:14px}.next-select-multiple.next-small .next-input-control,.next-select-multiple.next-small .next-input-label,.next-select-tag.next-small .next-input-control,.next-select-tag.next-small .next-input-label{line-height:18px}.next-select-multiple.next-medium .next-select-values,.next-select-tag.next-medium .next-select-values{min-height:26px;padding-top:3px;padding-bottom:3px;line-height:20px}.next-select-multiple.next-medium .next-tag,.next-select-tag.next-medium .next-tag{padding-top:1px;padding-bottom:1px;height:20px}.next-select-multiple.next-medium .next-tag .next-tag-body,.next-select-multiple.next-medium .next-tag .next-tag-close-btn,.next-select-tag.next-medium .next-tag .next-tag-body,.next-select-tag.next-medium .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-medium .next-input-control,.next-select-multiple.next-medium .next-input-label,.next-select-tag.next-medium .next-input-control,.next-select-tag.next-medium .next-input-label{line-height:26px}.next-select-multiple.next-large .next-select-values,.next-select-tag.next-large .next-select-values{min-height:38px;padding-top:7px;padding-bottom:7px;line-height:24px}.next-select-multiple.next-large .next-tag,.next-select-tag.next-large .next-tag{padding-top:3px;padding-bottom:3px;height:24px}.next-select-multiple.next-large .next-tag .next-tag-body,.next-select-multiple.next-large .next-tag .next-tag-close-btn,.next-select-tag.next-large .next-tag .next-tag-body,.next-select-tag.next-large .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-large .next-input-control,.next-select-multiple.next-large .next-input-label,.next-select-tag.next-large .next-input-control,.next-select-tag.next-large .next-input-label{line-height:38px}.next-select.next-no-search .next-select-trigger-search input{color:transparent}.next-select-auto-complete{width:160px}.next-select-auto-complete .next-input{width:100%}.next-select-auto-complete .next-input .next-input-hint-wrap{padding-right:1px}.next-select-auto-complete .next-input .next-select-arrow{padding-left:0}.next-select.next-active .next-select-arrow{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-select-arrow{cursor:pointer;width:auto!important;text-align:center;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-menu-wrapper{max-height:260px;overflow:auto;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none}.next-select-menu-wrapper .next-select-menu{max-height:none;border:none}.next-select-menu{max-height:260px;overflow:auto}.next-select-menu .next-select-menu-empty-content{padding-left:8px;padding-right:8px;color:#999}.next-select-menu.next-select-auto-complete-menu.next-select-menu-empty{display:none}.next-select-menu .next-menu-item-text .next-icon{vertical-align:middle}.next-select-all{display:block;cursor:pointer;padding:0 8px;margin:0 12px 8px;border-bottom:1px solid #dcdee3}.next-select-all:hover{color:#3e71f7}.next-select-all .next-menu-icon-selected.next-icon{display:inline-block!important;top:auto;color:#5584ff}.next-select-highlight{color:#5584ff;font-size:12px}.next-select-in-ie.next-select-trigger .next-select-values{overflow:visible}.next-select-in-ie.next-select-trigger .next-input-control,.next-select-in-ie.next-select-trigger .next-input-label{width:1px}.next-select-in-ie.next-select-trigger .next-input-control>*{display:table-cell;width:1%}.next-select-in-ie.next-select-trigger .next-select-arrow{display:table-cell}.next-select-in-ie.next-select-trigger .next-select-clear{display:none}.next-select-in-ie.next-select-trigger.next-select-multiple .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-tag .next-select-inner{vertical-align:top}.next-select-in-ie.next-select-trigger .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-single .next-select-values{display:inline-table}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-small .next-select-values{line-height:20px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-medium .next-select-values{line-height:28px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-large .next-select-values{line-height:40px}.next-select-in-ie.next-select-trigger .next-select-trigger-search>span{max-width:100px}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values{position:relative}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values>em{position:absolute;display:inline-block;height:100%;line-height:1;vertical-align:middle;overflow:hidden;left:4px;right:0;top:30%}.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{filter:alpha(opacity=0);font-size:0}.next-select-in-ie.next-select-trigger.next-no-search .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-trigger-search input{color:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-search-simple[dir=rtl].next-large .next-search-icon{margin-left:12px;margin-right:0}.next-search-simple[dir=rtl].next-medium .next-search-icon{margin-left:8px;margin-right:0}.next-search-simple[dir=rtl].next-normal .next-search-left .next-search-left-addon{border-left:1px solid #c4c6cf;border-right:none}.next-search-simple[dir=rtl].next-dark .next-search-left{border-color:#c4c6cf}.next-search-simple[dir=rtl].next-dark .next-search-left .next-search-left-addon{border-right:1px solid #c4c6cf}.next-search-simple[dir=rtl].next-dark:hover .next-search-left{border-color:#c4c6cf}.next-search-simple[dir=rtl].next-dark .next-search-icon{color:#999}.next-search-simple[dir=rtl].next-dark .next-search-icon:hover{color:#666}.next-search-normal[dir=rtl] .next-search-left{border-left:none;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.next-search-normal[dir=rtl] .next-search-btn.next-btn{border-radius:3px 0 0 3px!important}.next-search-normal[dir=rtl] .next-input{border-radius:0 3px 3px 0}.next-search-normal[dir=rtl].next-primary .next-input{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:1px;border-bottom-right-radius:1px}.next-search-normal[dir=rtl].next-primary .next-search-left .next-search-left-addon{border-left:1px solid #e6e7eb;border-right:none}.next-search-normal[dir=rtl].next-secondary .next-input{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:1px;border-bottom-right-radius:1px}.next-search-normal[dir=rtl].next-secondary .next-search-left .next-search-left-addon{border-left:1px solid #e6e7eb;border-right:none}.next-search-normal[dir=rtl].next-normal .next-input{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:1px;border-bottom-right-radius:1px}.next-search-normal[dir=rtl].next-normal .next-search-left .next-search-left-addon{border-left:1px solid #e6e7eb;border-right:none}.next-search-normal[dir=rtl].next-dark .next-search-left .next-search-left-addon{border-left:1px solid #5584ff;border-right:none}.next-search{width:100%;display:inline-block}.next-search,.next-search *,.next-search :after,.next-search :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-search .next-input,.next-search .next-select{border:none}.next-search .next-select .next-input,.next-search .next-select .next-input .next-input-text-field{height:auto}.next-search .next-search-left{border-style:solid;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.next-search .next-search-left-addon .next-input,.next-search .next-search-left-addon .next-select-trigger-search{min-height:100%;border-bottom-right-radius:0;border-top-right-radius:0}.next-search .next-search-left-addon .next-select-values{line-height:1}.next-search .next-search-left-addon+.next-search-input .next-input{border-bottom-left-radius:0;border-top-left-radius:0}.next-search .next-search-input{width:100%}.next-search .next-search-btn{-webkit-box-shadow:none;box-shadow:none}.next-search-normal{width:600px}.next-search-normal .next-search-left{border-top-left-radius:3px;border-bottom-left-radius:3px}.next-search-normal .next-input{border-radius:3px 0 0 3px}.next-search-normal .next-btn{border-radius:0 3px 3px 0}.next-search-normal.next-primary .next-search-left{border-color:#5584ff}.next-search-normal.next-primary .next-search-left .next-search-left-addon{border-right:1px solid #e6e7eb}.next-search-normal.next-primary:hover .next-btn,.next-search-normal.next-primary:hover .next-search-left{border-color:#5584ff}.next-search-normal.next-primary .next-search-btn{background:#5584ff;border-color:#5584ff;color:#fff}.next-search-normal.next-primary .next-search-btn:hover{background:#3e71f7;border-color:#5584ff;color:#fff}.next-search-normal.next-primary .next-search-btn .next-icon,.next-search-normal.next-primary .next-search-btn .next-icon:hover{color:#fff}.next-search-normal.next-primary.next-large{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-primary.next-large .next-search-btn,.next-search-normal.next-primary.next-large .next-search-left{border-width:2px;height:60px}.next-search-normal.next-primary.next-large .next-search-input{height:56px;overflow-y:hidden}.next-search-normal.next-primary.next-large .next-search-input input{height:56px;line-height:56px \0}.next-search-normal.next-primary.next-large .next-select{height:56px}.next-search-normal.next-primary.next-large .next-search-btn{font-size:16px}.next-search-normal.next-primary.next-large .next-search-btn .next-icon:before{width:24px;font-size:24px;line-height:inherit}.next-search-normal.next-primary.next-large .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-primary.next-medium{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-primary.next-medium .next-search-btn,.next-search-normal.next-primary.next-medium .next-search-left{border-width:2px;height:40px}.next-search-normal.next-primary.next-medium .next-search-input{height:36px;overflow-y:hidden}.next-search-normal.next-primary.next-medium .next-search-input input{height:36px;line-height:36px \0}.next-search-normal.next-primary.next-medium .next-select{height:36px}.next-search-normal.next-primary.next-medium .next-search-btn{font-size:16px}.next-search-normal.next-primary.next-medium .next-search-btn .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-search-normal.next-primary.next-medium .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-primary .next-input{border-top-left-radius:1px;border-bottom-left-radius:1px}.next-search-normal.next-secondary .next-search-left{border-color:#c4c6cf}.next-search-normal.next-secondary .next-search-left .next-search-left-addon{border-right:1px solid #e6e7eb}.next-search-normal.next-secondary:hover .next-btn,.next-search-normal.next-secondary:hover .next-search-left{border-color:#5584ff}.next-search-normal.next-secondary .next-search-btn{background:#5584ff;border-color:#5584ff;color:#fff}.next-search-normal.next-secondary .next-search-btn:hover{background:#3e71f7;border-color:#5584ff;color:#fff}.next-search-normal.next-secondary .next-search-btn .next-icon,.next-search-normal.next-secondary .next-search-btn .next-icon:hover{color:#fff}.next-search-normal.next-secondary.next-large{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-secondary.next-large .next-search-btn,.next-search-normal.next-secondary.next-large .next-search-left{border-width:1px;height:60px}.next-search-normal.next-secondary.next-large .next-search-input{height:58px;overflow-y:hidden}.next-search-normal.next-secondary.next-large .next-search-input input{height:58px;line-height:58px \0}.next-search-normal.next-secondary.next-large .next-select{height:58px}.next-search-normal.next-secondary.next-large .next-search-btn{font-size:16px}.next-search-normal.next-secondary.next-large .next-search-btn .next-icon:before{width:24px;font-size:24px;line-height:inherit}.next-search-normal.next-secondary.next-large .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-secondary.next-medium{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-secondary.next-medium .next-search-btn,.next-search-normal.next-secondary.next-medium .next-search-left{border-width:1px;height:40px}.next-search-normal.next-secondary.next-medium .next-search-input{height:38px;overflow-y:hidden}.next-search-normal.next-secondary.next-medium .next-search-input input{height:38px;line-height:38px \0}.next-search-normal.next-secondary.next-medium .next-select{height:38px}.next-search-normal.next-secondary.next-medium .next-search-btn{font-size:16px}.next-search-normal.next-secondary.next-medium .next-search-btn .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-search-normal.next-secondary.next-medium .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-secondary .next-input{border-top-left-radius:2px;border-bottom-left-radius:2px}.next-search-normal.next-normal .next-search-left{border-color:#c4c6cf}.next-search-normal.next-normal .next-search-left .next-search-left-addon{border-right:1px solid #e6e7eb}.next-search-normal.next-normal:hover .next-btn,.next-search-normal.next-normal:hover .next-search-left{border-color:#a0a2ad}.next-search-normal.next-normal .next-search-btn{background:#f7f8fa;border-color:#c4c6cf;color:#666}.next-search-normal.next-normal .next-search-btn:hover{background:#ebecf0;border-color:#a0a2ad;color:#333}.next-search-normal.next-normal .next-search-btn .next-icon{color:#666}.next-search-normal.next-normal .next-search-btn .next-icon:hover{color:#333}.next-search-normal.next-normal.next-large{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-normal.next-large .next-search-btn,.next-search-normal.next-normal.next-large .next-search-left{border-width:1px;height:60px}.next-search-normal.next-normal.next-large .next-search-input{height:58px;overflow-y:hidden}.next-search-normal.next-normal.next-large .next-search-input input{height:58px;line-height:58px \0}.next-search-normal.next-normal.next-large .next-select{height:58px}.next-search-normal.next-normal.next-large .next-search-btn{font-size:16px}.next-search-normal.next-normal.next-large .next-search-btn .next-icon:before{width:24px;font-size:24px;line-height:inherit}.next-search-normal.next-normal.next-large .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-normal.next-medium{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-normal.next-medium .next-search-btn,.next-search-normal.next-normal.next-medium .next-search-left{border-width:1px;height:40px}.next-search-normal.next-normal.next-medium .next-search-input{height:38px;overflow-y:hidden}.next-search-normal.next-normal.next-medium .next-search-input input{height:38px;line-height:38px \0}.next-search-normal.next-normal.next-medium .next-select{height:38px}.next-search-normal.next-normal.next-medium .next-search-btn{font-size:16px}.next-search-normal.next-normal.next-medium .next-search-btn .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-search-normal.next-normal.next-medium .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-normal .next-input{border-top-left-radius:2px;border-bottom-left-radius:2px}.next-search-normal.next-dark .next-search-left{border-color:#5584ff}.next-search-normal.next-dark .next-search-left .next-search-left-addon{border-right:1px solid #5584ff}.next-search-normal.next-dark:hover .next-btn,.next-search-normal.next-dark:hover .next-search-left{border-color:#5584ff}.next-search-normal.next-dark .next-search-btn{background:#5584ff;border-color:#5584ff;color:#fff}.next-search-normal.next-dark .next-search-btn:hover{background:#3e71f7;border-color:#5584ff;color:#fff}.next-search-normal.next-dark .next-search-btn .next-icon,.next-search-normal.next-dark .next-search-btn .next-icon:hover,.next-search-normal.next-dark .next-select-inner,.next-search-normal.next-dark input{color:#fff}.next-search-normal.next-dark .next-input,.next-search-normal.next-dark .next-select{background:hsla(0,0%,100%,0)}.next-search-normal.next-dark.next-large{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-dark.next-large .next-search-btn,.next-search-normal.next-dark.next-large .next-search-left{border-width:1px;height:60px}.next-search-normal.next-dark.next-large .next-search-input{height:58px;overflow-y:hidden}.next-search-normal.next-dark.next-large .next-search-input input{height:58px;line-height:58px \0}.next-search-normal.next-dark.next-large .next-select{height:58px}.next-search-normal.next-dark.next-large .next-search-btn{font-size:16px}.next-search-normal.next-dark.next-large .next-search-btn .next-icon:before{width:24px;font-size:24px;line-height:inherit}.next-search-normal.next-dark.next-large .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-dark.next-medium{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-dark.next-medium .next-search-btn,.next-search-normal.next-dark.next-medium .next-search-left{border-width:1px;height:40px}.next-search-normal.next-dark.next-medium .next-search-input{height:38px;overflow-y:hidden}.next-search-normal.next-dark.next-medium .next-search-input input{height:38px;line-height:38px \0}.next-search-normal.next-dark.next-medium .next-select{height:38px}.next-search-normal.next-dark.next-medium .next-search-btn{font-size:16px}.next-search-normal.next-dark.next-medium .next-search-btn .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-search-normal.next-dark.next-medium .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal:not([dir=rtl]) .next-search-left{border-right:none}.next-search-simple{width:300px;-webkit-box-shadow:none;box-shadow:none;border-radius:3px}.next-search-simple .next-search-icon{cursor:pointer;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.next-search-simple .next-input,.next-search-simple .next-search-left{border-radius:3px}.next-search-simple.next-large .next-search-icon{margin-right:12px}.next-search-simple.next-medium .next-search-icon{margin-right:8px}.next-search-simple.next-normal .next-search-left{border-color:#c4c6cf}.next-search-simple.next-normal .next-search-left .next-search-left-addon{border-right:1px solid #c4c6cf}.next-search-simple.next-normal:hover .next-search-left{border-color:#a0a2ad}.next-search-simple.next-normal .next-search-icon{color:#999}.next-search-simple.next-normal .next-search-icon:hover{color:#666}.next-search-simple.next-normal .next-search-left{border-width:1px}.next-search-simple.next-normal.next-large .next-search-icon:before{width:20px;font-size:20px;line-height:inherit}.next-search-simple.next-normal.next-medium .next-search-icon:before{width:12px;font-size:12px;line-height:inherit}.next-search-simple.next-dark .next-search-left{border-color:#c4c6cf}.next-search-simple.next-dark .next-search-left .next-search-left-addon{border-right:1px solid #c4c6cf}.next-search-simple.next-dark:hover .next-search-left{border-color:#c4c6cf}.next-search-simple.next-dark .next-search-icon{color:#999}.next-search-simple.next-dark .next-search-icon:hover{color:#666}.next-search-simple.next-dark .next-select-inner,.next-search-simple.next-dark input{color:#fff}.next-search-simple.next-dark .next-input,.next-search-simple.next-dark .next-select{background:hsla(0,0%,100%,0)}.next-search-simple.next-dark .next-search-left{border-width:1px}.next-search-simple.next-dark.next-large .next-search-icon:before{width:20px;font-size:20px;line-height:inherit}.next-search-simple.next-dark.next-medium .next-search-icon:before{width:12px;font-size:12px;line-height:inherit}.next-search-simple .next-select.next-large{height:38px}.next-search-simple .next-select.next-medium{height:26px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-transfer{display:inline-block}.next-transfer,.next-transfer *,.next-transfer :after,.next-transfer :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-transfer-panel{display:inline-block;border:1px solid #dcdee3;border-radius:3px;background-color:#fff;vertical-align:middle;overflow:hidden}.next-transfer-panel-header{padding:8px 20px;border-bottom:1px solid #dcdee3;background-color:#f7f8fa;color:#333;font-size:12px}.next-transfer-panel-search{padding:0 4px;margin-top:8px;margin-bottom:0;width:100%}.next-transfer .next-transfer-panel-list{width:180px;height:160px;padding:0;border:none;-webkit-box-shadow:none;box-shadow:none;border-radius:0;overflow-y:auto}.next-transfer-panel-not-found-container{display:table;width:100%;height:100%}.next-transfer-panel-not-found{display:table-cell;vertical-align:middle;text-align:center;color:#999;font-size:14px}.next-transfer-panel-item.next-focused{-webkit-transition:background-color .2s ease;transition:background-color .2s ease}.next-transfer-panel-item:not(.next-disabled).next-simple:hover{color:#5584ff}.next-transfer-panel-item.next-insert-before:before{position:absolute;top:0;left:0;content:"";width:100%;border-top:1px solid #5584ff}.next-transfer-panel-item.next-insert-after:after{position:absolute;left:0;bottom:0;content:"";width:100%;border-bottom:1px solid #5584ff}.next-transfer-panel-footer{padding:8px 20px;border-top:1px solid #dcdee3;background-color:#fff;font-size:0}.next-transfer-panel-count{margin-left:4px;font-size:12px;vertical-align:middle;color:#333}.next-transfer-panel-move-all{font-size:12px;color:#5584ff;cursor:pointer}.next-transfer-panel-move-all.next-disabled{color:#ccc;cursor:not-allowed}.next-transfer-operations{display:inline-block;vertical-align:middle;margin:0 20px}.next-transfer-move.next-icon{color:#c4c6cf}.next-transfer-operation.next-btn{display:block}.next-transfer-operation.next-btn+.next-transfer-operation.next-btn{margin-top:8px}.next-transfer-operation.next-btn .next-icon:before{width:12px;font-size:12px;line-height:inherit} \ No newline at end of file diff --git a/demos/transfer/deps.json b/demos/transfer/deps.json new file mode 100644 index 0000000000..62bf3ffd96 --- /dev/null +++ b/demos/transfer/deps.json @@ -0,0 +1 @@ +["button","menu","search","demo-helper"] \ No newline at end of file diff --git a/demos/transfer/index.html b/demos/transfer/index.html new file mode 100644 index 0000000000..6214d1c2bc --- /dev/null +++ b/demos/transfer/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/tree-select/build/index.css b/demos/tree-select/build/index.css new file mode 100644 index 0000000000..63c88c47ea --- /dev/null +++ b/demos/tree-select/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-overlay-wrapper .next-overlay-inner{z-index:1001}.next-overlay-wrapper .next-overlay-backdrop{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;background:#000;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0}.next-overlay-wrapper.opened .next-overlay-backdrop{opacity:.2}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-radio-button-large[dir=rtl]>label:first-child{margin-left:-1px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.next-radio-button-large[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large[dir=rtl] .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-wrapper[dir=rtl] .next-radio-label{margin-left:0;margin-right:4px}.next-radio-group[dir=rtl] .next-radio-label{margin-right:4px;margin-left:16px}.next-radio-button[dir=rtl]>label .next-radio-label{margin:0}.next-radio-wrapper{outline:0}.next-radio-wrapper .next-radio{display:inline-block;vertical-align:middle;position:relative;line-height:1}.next-radio-wrapper .next-radio,.next-radio-wrapper .next-radio *,.next-radio-wrapper .next-radio :after,.next-radio-wrapper .next-radio :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-radio-wrapper .next-radio input[type=radio]{opacity:0;position:absolute;vertical-align:middle;top:0;left:0;width:16px;height:16px;margin:0}.next-radio-wrapper .next-radio-inner{display:block;width:16px;height:16px;background:#fff;border-radius:50%;border:1px solid #c4c6cf;-webkit-transition:all .36s ease 0s;transition:all .36s ease 0s;-webkit-box-shadow:none;box-shadow:none}.next-radio-wrapper .next-radio-inner:after{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;border-radius:50%;top:50%;margin-top:-2px;left:50%;margin-left:-2px;background:#fff;content:" ";-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86)}.next-radio-wrapper.checked .next-radio-inner{border-color:#5584ff;background:#5584ff}.next-radio-wrapper.checked .next-radio-inner:after{width:4px;height:4px;font-weight:700;background:#fff;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.next-radio-wrapper.checked.hovered .next-radio-inner,.next-radio-wrapper.checked:hover .next-radio-inner{border-color:transparent}.next-radio-wrapper.disabled input[type=radio]{cursor:not-allowed}.next-radio-wrapper.disabled .next-radio-inner{border-color:#e6e7eb;background:#f7f8fa}.next-radio-wrapper.disabled.checked .next-radio-inner,.next-radio-wrapper.disabled .next-radio-inner.hovered,.next-radio-wrapper.disabled .next-radio-inner:hover{border-color:#e6e7eb}.next-radio-wrapper.disabled.checked .next-radio-inner:after{background:#ccc}.next-radio-wrapper:not(.disabled).focused .next-radio-inner,.next-radio-wrapper:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper:not(.disabled):focus .next-radio-inner,.next-radio-wrapper:not(.disabled):hover .next-radio-inner{border-color:#5584ff;background-color:#dee8ff}.next-radio-wrapper.checked.focused .next-radio-inner,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner{border-color:transparent;background:#3e71f7}.next-radio-wrapper.checked.focused .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner:after{background:#fff}.next-radio-button .next-radio,.next-radio-button input[type=radio]{width:0;height:0}.next-radio-button>label{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1;margin:0 0 0 -1px;border:1px solid #c4c6cf;background-color:#fff;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;vertical-align:middle}.next-radio-button>label .next-radio-label{display:block;color:#333;margin:0;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}.next-radio-button>label.hovered,.next-radio-button>label:focus,.next-radio-button>label:hover{z-index:10;border-color:#a0a2ad;background-color:#f2f3f7}.next-radio-button>label.hovered .next-radio-label,.next-radio-button>label:focus .next-radio-label,.next-radio-button>label:hover .next-radio-label{color:#333}.next-radio-button>label.checked{z-index:11;border-color:#5584ff;background-color:#fff}.next-radio-button>label.checked .next-radio-label{color:#5584ff}.next-radio-button>label.disabled{z-index:0;cursor:not-allowed;border-color:#e6e7eb;background-color:#f7f8fa}.next-radio-button>label.disabled .next-radio-label{color:#ccc}.next-radio-button>label.checked.disabled{z-index:0;border-color:#e6e7eb;background-color:#f2f3f7}.next-radio-button>label.checked.disabled .next-radio-label{color:#ccc}.next-radio-button-large>label{padding:0 8px;height:40px;line-height:40px}.next-radio-button-large>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-large .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium>label{padding:0 8px;height:28px;line-height:28px}.next-radio-button-medium>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-medium>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium .next-radio-label{height:26px;line-height:26px;font-size:12px}.next-radio-button-small>label{padding:0 8px;height:20px;line-height:20px}.next-radio-button-small>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small .next-radio-label{height:18px;line-height:18px;font-size:12px}.next-radio-single-input input[type=radio]{opacity:0;position:absolute;top:0;left:0;margin:0}.next-radio-group{display:inline-block}.next-radio-group .next-radio-label{color:#333;margin-right:16px}.next-radio-group.disabled .next-radio-label{color:#ccc}.next-radio-group-ver .next-radio-wrapper{display:block;margin-bottom:8px}.next-radio-label{margin:0;margin-left:4px;font-size:12px;vertical-align:middle;line-height:1}@-moz-document url-prefix(){.next-radio{margin-top:-1px}@supports ((-webkit-animation:calc(0s)) or (animation:calc(0s))){.next-radio{margin-top:-3px}}}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}@-webkit-keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}@keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}.next-tag>.next-tag-body{overflow:hidden;text-overflow:ellipsis}.next-tag-checkable.next-tag-level-secondary{color:#333;border-color:transparent;background-color:transparent}.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):hover{color:#5584ff}.next-tag-closable.next-tag-level-primary,.next-tag-default.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-primary,.disabled.next-tag-default.next-tag-level-primary,[disabled].next-tag-closable.next-tag-level-primary,[disabled].next-tag-default.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.disabled.next-tag-default.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-checkable.next-tag-level-primary,[disabled].next-tag-checkable.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary.checked{color:#fff;border-color:#5584ff;background-color:#5584ff}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover{color:#fff;border-color:#3e71f7;background-color:#3e71f7}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked>.next-tag-close-btn{color:#fff}.next-tag-default.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-default.next-tag-level-normal,[disabled].next-tag-default.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.disabled.next-tag-default.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-closable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-normal,[disabled].next-tag-closable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:transparent}.disabled.next-tag-closable.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-normal.checked,.next-tag-checkable.next-tag-level-secondary.checked{color:#5584ff;border-color:#5584ff;background-color:transparent}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover{color:#3e71f7;border-color:#3e71f7;background-color:transparent}.next-tag-checkable.next-tag-level-secondary.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-secondary.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-secondary.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-secondary.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-secondary.checked:after{color:#fff}.next-tag-checkable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#c4c6cf;background-color:transparent}.disabled.next-tag-checkable.next-tag-level-normal,[disabled].next-tag-checkable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-normal.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-normal.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-normal.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-normal.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-normal.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-normal.checked:after{color:#fff}.next-tag-closable.next-tag-level-normal:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#c4c6cf;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-closable.next-tag-level-normal:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E626";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:before{background-color:#a0a2ad}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-closable.next-tag-level-normal:disabled:before,[disabled].next-tag-closable.next-tag-level-normal:before{background-color:#e6e7eb}.next-tag-closable.next-tag-level-normal:disabled:after,[disabled].next-tag-closable.next-tag-level-normal:after{color:#fff}.next-tag-group .next-tag-large,.next-tag-group .next-tag-medium{margin-right:8px;margin-bottom:8px}.next-tag-group .next-tag-small{margin-right:4px;margin-bottom:4px}.next-tag{display:inline-block;max-width:100%;vertical-align:middle;border-width:1px;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid;overflow:hidden;white-space:nowrap;-webkit-transition:all .2s cubic-bezier(.23,1,.32,1);transition:all .2s cubic-bezier(.23,1,.32,1);font-size:0;outline:0}.next-tag,.next-tag *,.next-tag :after,.next-tag :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tag>.next-tag-body{position:relative;display:inline-block;height:100%;text-align:center;vertical-align:middle;max-width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.next-tag>.next-tag-body>a{text-decoration:none;color:inherit}.next-tag>.next-tag-body>a:before{content:" ";position:absolute;display:block;top:0;left:0;right:0;bottom:0}.next-tag>.next-tag-body .next-icon{line-height:1;vertical-align:middle}.next-tag>.next-tag-body .next-icon:before{font-size:inherit}.next-tag.next-tag-body-pointer{cursor:pointer}.next-tag.disabled,.next-tag[disabled]{cursor:not-allowed;pointer-events:none}.next-tag-large{height:40px;padding:0;line-height:38px;font-size:0}.next-tag-large>.next-tag-body{font-size:16px;padding:0 16px;min-width:48px}.next-tag-large.next-tag-closable>.next-tag-body{padding:0 0 0 16px}.next-tag-large[dir=rtl].next-tag-closable>.next-tag-body{padding:0 16px 0 0}.next-tag-large>.next-tag-close-btn{margin-left:12px;padding-right:16px}.next-tag-large>.next-tag-close-btn .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tag-large[dir=rtl]>.next-tag-close-btn{margin-right:12px;margin-left:0;padding-right:0;padding-left:16px}.next-tag-medium{height:28px;padding:0;line-height:26px;font-size:0}.next-tag-medium>.next-tag-body{font-size:14px;padding:0 12px;min-width:40px}.next-tag-medium.next-tag-closable>.next-tag-body{padding:0 0 0 12px}.next-tag-medium[dir=rtl].next-tag-closable>.next-tag-body{padding:0 12px 0 0}.next-tag-medium>.next-tag-close-btn{margin-left:8px;padding-right:12px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-medium>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-medium[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:12px}.next-tag-small{height:20px;padding:0;line-height:18px;font-size:0}.next-tag-small>.next-tag-body{font-size:12px;padding:0 8px;min-width:28px}.next-tag-small.next-tag-closable>.next-tag-body{padding:0 0 0 8px}.next-tag-small[dir=rtl].next-tag-closable>.next-tag-body{padding:0 8px 0 0}.next-tag-small>.next-tag-close-btn{margin-left:8px;padding-right:8px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-small>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-small[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:8px}.next-tag-default{cursor:default}.next-tag-closable{position:relative}.next-tag-closable.next-tag-large>.next-tag-body{max-width:calc(100% - 40px)}.next-tag-closable.next-tag-medium>.next-tag-body{max-width:calc(100% - 28px)}.next-tag-closable.next-tag-small>.next-tag-body{max-width:calc(100% - 20px)}.next-tag-closable>.next-tag-close-btn{display:inline-block;vertical-align:middle;height:100%;text-align:center;cursor:pointer}.next-tag-closable.next-tag-level-normal.disabled,.next-tag-closable.next-tag-level-normal[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable{cursor:pointer;position:relative;border-radius:3px}.next-tag-checkable.checked:before{-webkit-animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.checked:after{-webkit-animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86);animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):before{right:-10px;bottom:-10px;width:20px;height:20px}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):after{font-size:8px;line-height:8px;right:0;bottom:0}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):before{right:-14px;bottom:-14px;width:28px;height:28px}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):after{font-size:12px;line-height:12px;right:0;bottom:0}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):before{right:-18px;bottom:-18px;width:36px;height:36px}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):after{font-size:16px;line-height:16px;right:0;bottom:0}.next-tag-checkable.next-tag-level-primary.disabled,.next-tag-checkable.next-tag-level-primary[disabled]{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-secondary.disabled,.next-tag-checkable.next-tag-level-secondary[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-zoom-appear,.next-tag-zoom-enter{-webkit-animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-tag-zoom-leave{-webkit-animation:zoomOut .3s ease-in;animation:zoomOut .3s ease-in;-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-checkbox-wrapper[dir=rtl]{margin-right:8px;margin-left:0}.next-checkbox-wrapper[dir=rtl]:first-child{margin-right:0}.next-checkbox-wrapper[dir=rtl]>.next-checkbox-label{margin-right:4px;margin-left:0}.next-checkbox-wrapper,.next-checkbox-wrapper *,.next-checkbox-wrapper :after,.next-checkbox-wrapper :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-checkbox-wrapper .next-checkbox{display:inline-block;position:relative;line-height:1;vertical-align:middle}.next-checkbox-wrapper input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:16px;height:16px;margin:0}.next-checkbox-wrapper .next-checkbox-inner{display:block;width:16px;height:16px;background:#fff;border-radius:3px;border:1px solid #c4c6cf;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;text-align:left;-webkit-box-shadow:none;box-shadow:none}.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;top:0;opacity:0;line-height:16px;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);color:#fff;left:4px;margin-left:0}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{vertical-align:top;margin-top:0}.next-checkbox-wrapper.checked .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.checked .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);margin-left:0}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.indeterminate .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.indeterminate .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1);margin-left:0}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.disabled input[type=checkbox]{cursor:not-allowed}.next-checkbox-wrapper.disabled .next-checkbox-inner{border-color:#e6e7eb;background:#f7f8fa}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover{border-color:#e6e7eb}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner>.next-icon{color:#ccc;opacity:1}.next-checkbox-wrapper.focused .next-checkbox-inner,.next-checkbox-wrapper.hovered .next-checkbox-inner,.next-checkbox-wrapper:not(.disabled):hover .next-checkbox-inner{border-color:#5584ff;background-color:#dee8ff}.next-checkbox-wrapper.checked.focused .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner{border-color:transparent;background-color:#3e71f7}.next-checkbox-wrapper.checked.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner>.next-icon{color:#fff;opacity:1}.next-checkbox-group .next-checkbox-wrapper{margin-left:8px}.next-checkbox-group .next-checkbox-wrapper:first-child{margin-left:0}.next-checkbox-group-ver .next-checkbox-wrapper{display:block;margin-left:0;margin-right:0;margin-bottom:8px}.next-checkbox-label{font-size:12px;vertical-align:middle;margin:0;margin-left:4px;line-height:1}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-menu[dir=rtl] .next-menu-item-helper{float:left}.next-menu[dir=rtl] .next-menu-item .next-checkbox,.next-menu[dir=rtl] .next-menu-item .next-radio{margin-left:4px;margin-right:0}.next-menu[dir=rtl] .next-menu-hoz-right{float:left}.next-menu[dir=rtl] .next-menu-hoz-icon-arrow.next-icon{left:6px;right:auto}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon{margin-left:0;margin-right:-16px}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon.next-menu-icon-right{right:auto;left:4px}.next-menu[dir=rtl] .next-menu-icon-arrow.next-icon{left:10px;right:auto}.next-menu{position:relative;min-width:100px;padding:8px 0;margin:0;list-style:none;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;background:#fff;line-height:32px;font-size:12px}.next-menu,.next-menu *,.next-menu :after,.next-menu :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-menu:focus,.next-menu :focus{outline:0}.next-menu-embeddable,.next-menu-embeddable .next-menu-item.next-disabled,.next-menu-embeddable .next-menu-item.next-disabled .next-menu-item-text>a{background:initial;border:none}.next-menu-embeddable .next-menu-item-inner{height:100%}.next-menu-content{position:relative}.next-menu-content,.next-menu-sub-menu{padding:0;margin:0;list-style:none}.next-menu-sub-menu.next-expand-enter{overflow:hidden}.next-menu-sub-menu.next-expand-enter-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-sub-menu.next-expand-leave{overflow:hidden}.next-menu-sub-menu.next-expand-leave-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-item{position:relative;padding:0 20px;-webkit-transition:background .2s ease;transition:background .2s ease;color:#333;cursor:pointer}.next-menu-item-helper{float:right;color:#999;font-style:normal;font-size:12px}.next-menu-item .next-checkbox,.next-menu-item .next-radio{margin-right:4px}.next-menu-item.next-selected{color:#333;background-color:#fff}.next-menu-item.next-selected .next-menu-icon-arrow{color:#666}.next-menu-item.next-selected .next-menu-icon-selected{color:#5584ff}.next-menu-item.next-disabled,.next-menu-item.next-disabled .next-menu-item-text>a{color:#ccc;background-color:#fff;cursor:not-allowed}.next-menu-item.next-disabled .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-icon-selected,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-selected{color:#ccc}.next-menu-item:not(.next-disabled).next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover,.next-menu-item:not(.next-disabled).next-selected:focus,.next-menu-item:not(.next-disabled).next-selected:focus:hover,.next-menu-item:not(.next-disabled).next-selected:hover,.next-menu-item:not(.next-disabled):hover{color:#333;background-color:#f2f3f7}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled):hover .next-menu-icon-arrow{color:#333}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled):hover .next-menu-icon-selected{color:#5584ff}.next-menu-item-inner{height:32px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.next-menu-item-text{vertical-align:middle}.next-menu-item-text>a{display:inline-block;text-decoration:none;color:#333}.next-menu-item-text>a:before{position:absolute;background-color:transparent;top:0;left:0;bottom:0;right:0;content:""}.next-menu.next-hoz{padding:0}.next-menu.next-hoz .next-menu-content>.next-menu-item,.next-menu.next-hoz>.next-menu-item{display:inline-block;vertical-align:top}.next-menu.next-hoz .next-menu-content,.next-menu.next-hoz .next-menu-footer,.next-menu.next-hoz .next-menu-header{display:inline-block}.next-menu-hoz-right{float:right}.next-menu-group-label{padding:0 12px;color:#999}.next-menu-divider{margin:8px 12px;border-bottom:1px solid #e6e7eb}.next-menu .next-menu-icon-selected.next-icon{position:absolute;top:0;margin-left:-16px}.next-menu .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-icon-selected.next-icon.next-menu-icon-right{right:4px}.next-menu .next-menu-icon-arrow.next-icon{position:absolute;top:0;right:10px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-icon-arrow.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow.next-icon:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-icon-arrow-down.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:scale(.5) rotate(180deg);-ms-transform:scale(.5) rotate(180deg);transform:scale(.5) rotate(180deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-down.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.next-menu .next-menu-icon-arrow-right.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:scale(.5) rotate(-90deg);-ms-transform:scale(.5) rotate(-90deg);transform:scale(.5) rotate(-90deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-right.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-hoz-icon-arrow.next-icon{position:absolute;top:0;right:6px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-hoz-icon-arrow.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-hoz-icon-arrow.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-hoz-icon-arrow.next-open:before{width:12px;font-size:12px;line-height:inherit}.next-menu.next-context{line-height:24px}.next-menu.next-context .next-menu-item-inner{height:24px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-input{vertical-align:middle;display:inline-table;border-collapse:separate;font-size:0;line-height:1;width:200px;border-spacing:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;border:1px solid #c4c6cf;background-color:#fff}.next-input,.next-input *,.next-input :after,.next-input :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input input{height:100%}.next-input input[type=reset],.next-input input[type=submit]{-webkit-appearance:button;cursor:pointer}.next-input input::-moz-focus-inner{border:0;padding:0}.next-input input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset}.next-input textarea{resize:none}.next-input input,.next-input textarea{width:100%;border:none;outline:none;padding:0;margin:0;font-weight:400;vertical-align:middle;background-color:transparent;color:#333}.next-input input::-ms-clear,.next-input textarea::-ms-clear{display:none}.next-input.next-input-textarea{border-radius:3px;font-size:0}.next-input.next-input-textarea textarea{color:#333;padding:4px 8px;font-size:12px;border-radius:3px}.next-input.next-input-textarea .next-input-control{display:block;width:auto;border-radius:3px}.next-input.next-input-textarea .next-input-len{padding:0 8px 4px;display:block;text-align:right;width:auto}.next-input.next-small{height:20px;border-radius:3px}.next-input.next-small .next-input-label{padding-left:8px;font-size:12px}.next-input.next-small .next-input-inner{font-size:12px}.next-input.next-small .next-input-control{padding-right:4px}.next-input.next-small input{height:18px;line-height:18px \0;padding:0 4px;font-size:12px}.next-input.next-small input::-webkit-input-placeholder{font-size:12px}.next-input.next-small input::-moz-placeholder{font-size:12px}.next-input.next-small input::-ms-input-placeholder{font-size:12px}.next-input.next-small input::placeholder{font-size:12px}.next-input.next-small .next-input-text-field{padding:0 4px;font-size:12px;height:18px;line-height:18px}.next-input.next-small .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-small input{border-radius:3px}.next-input.next-small .next-input-control{border-radius:0 3px 3px 0}.next-input.next-medium{height:28px;border-radius:3px}.next-input.next-medium .next-input-label{padding-left:8px;font-size:12px}.next-input.next-medium .next-input-inner{font-size:12px}.next-input.next-medium .next-input-control{padding-right:8px}.next-input.next-medium input{height:26px;line-height:26px \0;padding:0 8px;font-size:12px}.next-input.next-medium input::-webkit-input-placeholder{font-size:12px}.next-input.next-medium input::-moz-placeholder{font-size:12px}.next-input.next-medium input::-ms-input-placeholder{font-size:12px}.next-input.next-medium input::placeholder{font-size:12px}.next-input.next-medium .next-input-text-field{padding:0 8px;font-size:12px;height:26px;line-height:26px}.next-input.next-medium .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-medium input{border-radius:3px}.next-input.next-medium .next-input-control{border-radius:0 3px 3px 0}.next-input.next-large{height:40px;border-radius:3px}.next-input.next-large .next-input-label{padding-left:12px;font-size:16px}.next-input.next-large .next-input-inner{font-size:16px}.next-input.next-large .next-input-control{padding-right:8px}.next-input.next-large input{height:38px;line-height:38px \0;padding:0 12px;font-size:16px}.next-input.next-large input::-webkit-input-placeholder{font-size:16px}.next-input.next-large input::-moz-placeholder{font-size:16px}.next-input.next-large input::-ms-input-placeholder{font-size:16px}.next-input.next-large input::placeholder{font-size:16px}.next-input.next-large .next-input-text-field{padding:0 12px;font-size:16px;height:38px;line-height:38px}.next-input.next-large .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-input.next-large input{border-radius:3px}.next-input.next-large .next-input-control{border-radius:0 3px 3px 0}.next-input-hint-wrap{color:#999;position:relative}.next-input-hint-wrap .next-input-clear{opacity:0;z-index:1;position:absolute}.next-input-hint-wrap .next-input-hint{opacity:1}.next-input .next-icon-delete-filling:hover{cursor:pointer;color:#666}.next-input.next-focus,.next-input:hover{border-color:#a0a2ad;background-color:#fff}.next-input.next-focus .next-input-clear,.next-input:hover .next-input-clear{opacity:1}.next-input.next-focus .next-input-clear+.next-input-hint,.next-input:hover .next-input-clear+.next-input-hint{opacity:0}.next-input .next-input-clear:focus{opacity:1}.next-input .next-input-clear:focus+.next-input-hint{opacity:0}.next-input.next-focus{border-color:#5584ff;background-color:#fff}.next-input.next-error,.next-input.next-error.next-focus,.next-input.next-error:hover{border-color:#ff3000}.next-input.next-hidden{display:none}.next-input.next-noborder{border:none}.next-input-control .next-input-len{font-size:12px;line-height:12px;color:#999;display:table-cell;width:1px;vertical-align:bottom}.next-input-control .next-input-len.next-error{color:#ff3000}.next-input-control>*{display:table-cell;width:1%;top:0}.next-input-control>:not(:last-child){padding-right:4px}.next-input-control .next-icon{-webkit-transition:all .3s ease-out;transition:all .3s ease-out;color:#999}.next-input-control .next-icon-success-filling{color:#46bc15}.next-input-control .next-icon-loading{color:#4494f9}.next-input-label{color:#666}.next-input input::-moz-placeholder,.next-input textarea::-moz-placeholder{color:#999;opacity:1}.next-input input:-ms-input-placeholder,.next-input textarea:-ms-input-placeholder{color:#999}.next-input input::-webkit-input-placeholder,.next-input textarea::-webkit-input-placeholder{color:#999}.next-input.next-disabled{color:#ccc;cursor:not-allowed}.next-input.next-disabled,.next-input.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled input::-moz-placeholder,.next-input.next-disabled textarea::-moz-placeholder{color:#ccc;opacity:1}.next-input.next-disabled input:-ms-input-placeholder,.next-input.next-disabled textarea:-ms-input-placeholder{color:#ccc}.next-input.next-disabled input::-webkit-input-placeholder,.next-input.next-disabled textarea::-webkit-input-placeholder{color:#ccc}.next-input.next-disabled .next-input-label,.next-input.next-disabled .next-input-len{color:#ccc}.next-input.next-disabled input,.next-input.next-disabled textarea{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa;cursor:not-allowed}.next-input.next-disabled input:hover,.next-input.next-disabled textarea:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled .next-input-hint-wrap{color:#ccc}.next-input.next-disabled .next-input-hint-wrap .next-input-clear{opacity:0}.next-input.next-disabled .next-input-hint-wrap .next-input-hint{opacity:1}.next-input.next-disabled .next-input-hint-wrap .next-icon-delete-filling:hover{cursor:not-allowed;color:#ccc}.next-input.next-disabled .next-icon{color:#ccc}.next-input-control,.next-input-inner,.next-input-label{display:table-cell;width:1px;vertical-align:middle;line-height:1;background-color:transparent;white-space:nowrap}.next-input-group{display:inline-table;border-collapse:separate;border-spacing:0;line-height:0;width:100%}.next-input-group,.next-input-group *,.next-input-group :after,.next-input-group :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input-group-auto-width{width:100%;border-radius:0!important}.next-input-group>.next-input:first-child.next-large,.next-input-group>.next-input:first-child.next-medium,.next-input-group>.next-input:first-child.next-small{border-top-left-radius:3px!important;border-bottom-left-radius:3px!important}.next-input-group>.next-input:last-child.next-large,.next-input-group>.next-input:last-child.next-medium,.next-input-group>.next-input:last-child.next-small{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.next-input-group-addon{width:1px;display:table-cell;vertical-align:middle;white-space:nowrap}.next-input-group-addon:first-child,.next-input-group-addon:first-child>*{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group-addon:last-child,.next-input-group-addon:last-child>*{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group-text{color:#999;background-color:#f2f3f7;text-align:center;border:1px solid #c4c6cf;padding:0 8px}.next-input-group-text:first-child{border-right-width:0}.next-input-group-text:last-child{border-left-width:0}.next-input-group-text.next-disabled{color:#ccc;cursor:not-allowed}.next-input-group-text.next-disabled,.next-input-group-text.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input-group-text.next-medium,.next-input-group-text.next-small{font-size:12px;border-radius:3px}.next-input-group-text.next-large{font-size:16px;border-radius:3px}.next-input[dir=rtl].next-small .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-small .next-input-control{padding-right:0;padding-left:4px}.next-input[dir=rtl].next-medium .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-medium .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-large .next-input-label{padding-left:0;padding-right:12px}.next-input[dir=rtl].next-large .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-input-textarea .next-input-len{text-align:left}.next-input[dir=rtl] .next-input-control>:not(:last-child){padding-left:4px;padding-right:0}.next-input-group[dir=rtl] .next-input-group-addon:first-child{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-small{border-bottom-right-radius:3px!important;border-top-right-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-small{border-bottom-left-radius:3px!important;border-top-left-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-text:first-child{border-right-width:1px;border-left:0}.next-input-group[dir=rtl] .next-input-group-text:last-child{border-left-width:1px;border-right:0}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-select{display:inline-block;font-size:0;vertical-align:middle}.next-select,.next-select *,.next-select :after,.next-select :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-select-trigger{min-width:100px;outline:0;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-trigger .next-input-label{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-select-values{display:block;width:100%;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow:hidden}.next-select-trigger .next-select-values>em{font-style:inherit}.next-select-trigger .next-select-values input{padding-left:0;padding-right:0}.next-select-trigger .next-input-control{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-input-control>*{display:inline-block;width:auto}.next-select-trigger .next-input-control>.next-select-arrow{padding-right:0}.next-select-trigger .next-input.next-disabled em{color:#ccc}.next-select-trigger .next-input.next-disabled .next-select-arrow{cursor:not-allowed}.next-select-trigger .next-select-clear{display:none}.next-select-trigger.next-has-clear:hover .next-select-clear{display:inline-block}.next-select-trigger.next-has-clear:hover .next-select-arrow{display:none}.next-select .next-select-inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;min-width:100px;outline:0;color:#333}.next-select .next-select-inner .next-tag{line-height:1;margin-right:4px;margin-bottom:3px;padding-left:4px;padding-right:4px}.next-select-trigger-search{position:relative;display:inline-block;vertical-align:top;overflow:hidden;width:100%;max-width:100%}.next-select-trigger-search>input,.next-select-trigger-search>span{display:block;font-size:inherit;font-family:inherit;letter-spacing:inherit;white-space:nowrap;overflow:hidden}.next-select-trigger-search input{position:absolute;background-color:transparent;width:100%;height:100%!important;z-index:1;left:0;border:0;outline:0;margin:0;padding:0;cursor:inherit}.next-select-trigger-search>span{position:relative;visibility:hidden;white-space:pre;max-width:100%;z-index:-1}.next-select-single.next-no-search{cursor:pointer}.next-select-single.next-has-search.next-active .next-select-values>em{display:none}.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{width:1px;opacity:0;filter:alpha(opacity=0)}.next-select-single.next-inactive .next-select-trigger-search input,.next-select-single.next-no-search .next-select-trigger-search input{color:transparent}.next-select-single .next-select-values{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.next-select-single .next-select-values>em{vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.next-select-multiple .next-select-values,.next-select-tag .next-select-values{margin-bottom:-3px;height:auto!important}.next-select-multiple .next-select-trigger-search,.next-select-tag .next-select-trigger-search{margin-bottom:3px}.next-select-multiple .next-tag+.next-select-trigger-search,.next-select-tag .next-tag+.next-select-trigger-search{width:auto;min-width:1px}.next-select-multiple .next-input,.next-select-tag .next-input{height:auto;-webkit-box-align:start;-ms-flex-align:start;align-items:start}.next-select-multiple.next-small .next-select-values,.next-select-tag.next-small .next-select-values{min-height:18px;padding-top:2px;padding-bottom:2px;line-height:14px}.next-select-multiple.next-small .next-tag,.next-select-tag.next-small .next-tag{border:0;padding-top:0;padding-bottom:0;height:14px}.next-select-multiple.next-small .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-close-btn,.next-select-tag.next-small .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-close-btn{line-height:14px}.next-select-multiple.next-small .next-input-control,.next-select-multiple.next-small .next-input-label,.next-select-tag.next-small .next-input-control,.next-select-tag.next-small .next-input-label{line-height:18px}.next-select-multiple.next-medium .next-select-values,.next-select-tag.next-medium .next-select-values{min-height:26px;padding-top:3px;padding-bottom:3px;line-height:20px}.next-select-multiple.next-medium .next-tag,.next-select-tag.next-medium .next-tag{padding-top:1px;padding-bottom:1px;height:20px}.next-select-multiple.next-medium .next-tag .next-tag-body,.next-select-multiple.next-medium .next-tag .next-tag-close-btn,.next-select-tag.next-medium .next-tag .next-tag-body,.next-select-tag.next-medium .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-medium .next-input-control,.next-select-multiple.next-medium .next-input-label,.next-select-tag.next-medium .next-input-control,.next-select-tag.next-medium .next-input-label{line-height:26px}.next-select-multiple.next-large .next-select-values,.next-select-tag.next-large .next-select-values{min-height:38px;padding-top:7px;padding-bottom:7px;line-height:24px}.next-select-multiple.next-large .next-tag,.next-select-tag.next-large .next-tag{padding-top:3px;padding-bottom:3px;height:24px}.next-select-multiple.next-large .next-tag .next-tag-body,.next-select-multiple.next-large .next-tag .next-tag-close-btn,.next-select-tag.next-large .next-tag .next-tag-body,.next-select-tag.next-large .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-large .next-input-control,.next-select-multiple.next-large .next-input-label,.next-select-tag.next-large .next-input-control,.next-select-tag.next-large .next-input-label{line-height:38px}.next-select.next-no-search .next-select-trigger-search input{color:transparent}.next-select-auto-complete{width:160px}.next-select-auto-complete .next-input{width:100%}.next-select-auto-complete .next-input .next-input-hint-wrap{padding-right:1px}.next-select-auto-complete .next-input .next-select-arrow{padding-left:0}.next-select.next-active .next-select-arrow{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-select-arrow{cursor:pointer;width:auto!important;text-align:center;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-menu-wrapper{max-height:260px;overflow:auto;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none}.next-select-menu-wrapper .next-select-menu{max-height:none;border:none}.next-select-menu{max-height:260px;overflow:auto}.next-select-menu .next-select-menu-empty-content{padding-left:8px;padding-right:8px;color:#999}.next-select-menu.next-select-auto-complete-menu.next-select-menu-empty{display:none}.next-select-menu .next-menu-item-text .next-icon{vertical-align:middle}.next-select-all{display:block;cursor:pointer;padding:0 8px;margin:0 12px 8px;border-bottom:1px solid #dcdee3}.next-select-all:hover{color:#3e71f7}.next-select-all .next-menu-icon-selected.next-icon{display:inline-block!important;top:auto;color:#5584ff}.next-select-highlight{color:#5584ff;font-size:12px}.next-select-in-ie.next-select-trigger .next-select-values{overflow:visible}.next-select-in-ie.next-select-trigger .next-input-control,.next-select-in-ie.next-select-trigger .next-input-label{width:1px}.next-select-in-ie.next-select-trigger .next-input-control>*{display:table-cell;width:1%}.next-select-in-ie.next-select-trigger .next-select-arrow{display:table-cell}.next-select-in-ie.next-select-trigger .next-select-clear{display:none}.next-select-in-ie.next-select-trigger.next-select-multiple .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-tag .next-select-inner{vertical-align:top}.next-select-in-ie.next-select-trigger .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-single .next-select-values{display:inline-table}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-small .next-select-values{line-height:20px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-medium .next-select-values{line-height:28px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-large .next-select-values{line-height:40px}.next-select-in-ie.next-select-trigger .next-select-trigger-search>span{max-width:100px}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values{position:relative}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values>em{position:absolute;display:inline-block;height:100%;line-height:1;vertical-align:middle;overflow:hidden;left:4px;right:0;top:30%}.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{filter:alpha(opacity=0);font-size:0}.next-select-in-ie.next-select-trigger.next-no-search .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-trigger-search input{color:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-tree,.next-tree *,.next-tree :after,.next-tree :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tree,.next-tree-child-tree{margin:0;padding:0;list-style:none}.next-tree-node{white-space:nowrap}.next-tree-node-inner{font-size:0;outline:none}.next-tree-node-label-wrapper{display:inline-block;margin:0 4px;vertical-align:middle}.next-tree-node-label{height:20px;line-height:20px;padding:0 4px;border-radius:3px;font-size:12px}.next-tree-node-input.next-input{margin:0 4px}.next-tree-switcher{position:relative;display:inline-block;vertical-align:middle;margin-right:8px}.next-tree-switcher.next-noline{width:12px;height:12px;line-height:12px;cursor:pointer}.next-tree-switcher.next-noline .next-tree-switcher-icon{-webkit-transition:-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);color:#999}.next-tree-switcher.next-noline .next-tree-switcher-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tree-switcher.next-noline.next-close .next-tree-switcher-icon{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.next-tree-switcher.next-noline.next-close .next-tree-switcher-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tree-switcher.next-noline:not(.next-disabled):hover .next-tree-switcher-icon{color:#333}.next-tree-switcher.next-noline.next-disabled{cursor:not-allowed}.next-tree-switcher.next-noline.next-disabled .next-tree-switcher-icon{color:#ccc}.next-tree-switcher.next-noop-noline{width:12px;height:12px}.next-tree-switcher.next-line{width:16px;height:16px;line-height:14px;border:1px solid #c4c6cf;border-radius:3px;background-color:#fff;cursor:pointer}.next-tree-switcher.next-line .next-tree-switcher-icon{margin-left:3px;color:#666}.next-tree-switcher.next-line .next-tree-switcher-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tree-switcher.next-line .next-tree-switcher-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-1px;margin-right:-4px}.next-tree-switcher.next-line .next-tree-switcher-icon:before{width:16px;font-size:16px}}.next-tree-switcher.next-line:not(.next-disabled):hover{border-color:#a0a2ad;background-color:#f2f3f7}.next-tree-switcher.next-line:not(.next-disabled):hover .next-tree-switcher-icon{color:#333}.next-tree-switcher.next-line.next-disabled{border-color:#e6e7eb;background-color:#fff;cursor:not-allowed}.next-tree-switcher.next-line.next-disabled .next-tree-switcher-icon{color:#ccc}.next-tree-switcher.next-noop-line{width:16px;height:16px}.next-tree-switcher.next-noop-line-noroot{height:0;border-left:1px solid #c4c6cf;border-bottom:1px solid #c4c6cf}.next-tree-switcher.next-noop-line-noroot .next-tree-right-angle{bottom:-1px}.next-tree-switcher.next-loading.next-loading-noline{width:12px;height:12px;line-height:12px}.next-tree-switcher.next-loading.next-loading-line{width:16px;height:16px;line-height:14px;border:1px solid transparent}.next-tree-switcher.next-loading .next-tree-switcher-icon{color:#5584ff}.next-tree-switcher.next-loading .next-tree-switcher-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tree-right-angle{position:absolute;bottom:6.5px;left:-17.5px;display:block;width:16.5px;height:22px;border-left:1px solid #c4c6cf;border-bottom:1px solid #c4c6cf}.next-tree.next-label-block .next-tree-node-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;outline:none}.next-tree.next-label-block .next-tree-node-label-wrapper{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.next-tree.next-node-indent .next-tree-node .next-tree-node{margin-left:24px}.next-tree.next-node-indent .next-tree-node-inner{padding-top:2px;padding-bottom:2px}.next-tree.next-node-indent .next-tree-node-inner:focus .next-tree-node-label{color:#333;background-color:#f2f3f7}.next-tree.next-node-indent .next-tree-node-label-wrapper{border-top:2px solid transparent;border-bottom:2px solid transparent}.next-tree.next-node-indent .next-tree-node-label{-webkit-transition:color .3s cubic-bezier(.23,1,.32,1),background-color .3s cubic-bezier(.23,1,.32,1);transition:color .3s cubic-bezier(.23,1,.32,1),background-color .3s cubic-bezier(.23,1,.32,1);cursor:default;color:#333;background-color:#fff}.next-tree.next-node-indent .next-tree-node-label-selectable{cursor:pointer}.next-tree.next-node-indent .next-tree-node-label:hover{color:#333;background-color:#f2f3f7}.next-tree.next-node-indent .next-tree-node-inner.next-selected .next-tree-node-label{color:#333;background-color:#dee8ff}.next-tree.next-node-indent .next-tree-node-inner.next-disabled .next-tree-node-label,.next-tree.next-node-indent .next-tree-node-inner.next-disabled .next-tree-node-label:hover{color:#ccc;background-color:#fff;cursor:not-allowed}.next-tree.next-node-indent .next-tree-node-inner.next-drag-over .next-tree-node-label{background-color:#5584ff;color:#fff;opacity:.8}.next-tree.next-node-indent .next-tree-node-inner.next-drag-over-gap-top .next-tree-node-label-wrapper{border-top-color:#5584ff}.next-tree.next-node-indent .next-tree-node-inner.next-drag-over-gap-bottom .next-tree-node-label-wrapper{border-bottom-color:#5584ff}.next-tree.next-node-block .next-tree-node-inner{padding-top:4px;padding-bottom:4px;-webkit-transition:color .3s cubic-bezier(.23,1,.32,1),background-color .3s cubic-bezier(.23,1,.32,1);transition:color .3s cubic-bezier(.23,1,.32,1),background-color .3s cubic-bezier(.23,1,.32,1);cursor:pointer;color:#333;background-color:#fff}.next-tree.next-node-block .next-tree-node-inner:focus,.next-tree.next-node-block .next-tree-node-inner:hover{color:#333;background-color:#f2f3f7}.next-tree.next-node-block .next-tree-node-inner.next-selected{color:#333;background-color:#dee8ff}.next-tree.next-node-block .next-tree-node-inner.next-disabled,.next-tree.next-node-block .next-tree-node-inner.next-disabled:hover{color:#ccc;background-color:#fff;cursor:not-allowed}.next-tree.next-show-line .next-tree-node .next-tree-node:not(:last-child){margin-left:7.5px;border-left:1px solid #c4c6cf;padding-left:15.5px}.next-tree-node.next-filtered>.next-tree-node-inner .next-tree-node-label,.next-tree-node.next-filtered>.next-tree-node-inner .next-tree-node-label:hover{color:#5584ff}.next-tree[dir=rtl] .next-tree-switcher{margin-left:8px;margin-right:0}.next-tree[dir=rtl] .next-tree-right-angle,.next-tree[dir=rtl] .next-tree-switcher.next-noop-line-noroot{border-left:none;border-right:1px solid #c4c6cf}.next-tree[dir=rtl] .next-tree-right-angle{left:auto;right:-17.5px}.next-tree[dir=rtl].next-show-line .next-tree-node .next-tree-node:not(:last-child){margin-left:0;margin-right:7.5px;border-left:none;border-right:1px solid #c4c6cf;padding-left:0;padding-right:15.5px}.next-tree[dir=rtl].next-node-indent .next-tree-node .next-tree-node{margin-left:0;margin-right:24px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-tree-select,.next-tree-select *,.next-tree-select :after,.next-tree-select :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tree-select-dropdown{padding:8px 20px;background:#fff;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none}.next-tree-select-not-found{height:16px;font-size:12px;color:#999} \ No newline at end of file diff --git a/demos/tree-select/deps.json b/demos/tree-select/deps.json new file mode 100644 index 0000000000..836ae31f1f --- /dev/null +++ b/demos/tree-select/deps.json @@ -0,0 +1 @@ +["icon","tree","select","demo-helper"] \ No newline at end of file diff --git a/demos/tree-select/index.html b/demos/tree-select/index.html new file mode 100644 index 0000000000..95d23a12e9 --- /dev/null +++ b/demos/tree-select/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/tree/build/index.css b/demos/tree/build/index.css new file mode 100644 index 0000000000..da41339c6e --- /dev/null +++ b/demos/tree/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-checkbox-wrapper[dir=rtl]{margin-right:8px;margin-left:0}.next-checkbox-wrapper[dir=rtl]:first-child{margin-right:0}.next-checkbox-wrapper[dir=rtl]>.next-checkbox-label{margin-right:4px;margin-left:0}.next-checkbox-wrapper,.next-checkbox-wrapper *,.next-checkbox-wrapper :after,.next-checkbox-wrapper :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-checkbox-wrapper .next-checkbox{display:inline-block;position:relative;line-height:1;vertical-align:middle}.next-checkbox-wrapper input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:16px;height:16px;margin:0}.next-checkbox-wrapper .next-checkbox-inner{display:block;width:16px;height:16px;background:#fff;border-radius:3px;border:1px solid #c4c6cf;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;text-align:left;-webkit-box-shadow:none;box-shadow:none}.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;top:0;opacity:0;line-height:16px;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);color:#fff;left:4px;margin-left:0}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{vertical-align:top;margin-top:0}.next-checkbox-wrapper.checked .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.checked .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);margin-left:0}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.indeterminate .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.indeterminate .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1);margin-left:0}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.disabled input[type=checkbox]{cursor:not-allowed}.next-checkbox-wrapper.disabled .next-checkbox-inner{border-color:#e6e7eb;background:#f7f8fa}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover{border-color:#e6e7eb}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner>.next-icon{color:#ccc;opacity:1}.next-checkbox-wrapper.focused .next-checkbox-inner,.next-checkbox-wrapper.hovered .next-checkbox-inner,.next-checkbox-wrapper:not(.disabled):hover .next-checkbox-inner{border-color:#5584ff;background-color:#dee8ff}.next-checkbox-wrapper.checked.focused .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner{border-color:transparent;background-color:#3e71f7}.next-checkbox-wrapper.checked.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner>.next-icon{color:#fff;opacity:1}.next-checkbox-group .next-checkbox-wrapper{margin-left:8px}.next-checkbox-group .next-checkbox-wrapper:first-child{margin-left:0}.next-checkbox-group-ver .next-checkbox-wrapper{display:block;margin-left:0;margin-right:0;margin-bottom:8px}.next-checkbox-label{font-size:12px;vertical-align:middle;margin:0;margin-left:4px;line-height:1}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-input{vertical-align:middle;display:inline-table;border-collapse:separate;font-size:0;line-height:1;width:200px;border-spacing:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;border:1px solid #c4c6cf;background-color:#fff}.next-input,.next-input *,.next-input :after,.next-input :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input input{height:100%}.next-input input[type=reset],.next-input input[type=submit]{-webkit-appearance:button;cursor:pointer}.next-input input::-moz-focus-inner{border:0;padding:0}.next-input input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset}.next-input textarea{resize:none}.next-input input,.next-input textarea{width:100%;border:none;outline:none;padding:0;margin:0;font-weight:400;vertical-align:middle;background-color:transparent;color:#333}.next-input input::-ms-clear,.next-input textarea::-ms-clear{display:none}.next-input.next-input-textarea{border-radius:3px;font-size:0}.next-input.next-input-textarea textarea{color:#333;padding:4px 8px;font-size:12px;border-radius:3px}.next-input.next-input-textarea .next-input-control{display:block;width:auto;border-radius:3px}.next-input.next-input-textarea .next-input-len{padding:0 8px 4px;display:block;text-align:right;width:auto}.next-input.next-small{height:20px;border-radius:3px}.next-input.next-small .next-input-label{padding-left:8px;font-size:12px}.next-input.next-small .next-input-inner{font-size:12px}.next-input.next-small .next-input-control{padding-right:4px}.next-input.next-small input{height:18px;line-height:18px \0;padding:0 4px;font-size:12px}.next-input.next-small input::-webkit-input-placeholder{font-size:12px}.next-input.next-small input::-moz-placeholder{font-size:12px}.next-input.next-small input::-ms-input-placeholder{font-size:12px}.next-input.next-small input::placeholder{font-size:12px}.next-input.next-small .next-input-text-field{padding:0 4px;font-size:12px;height:18px;line-height:18px}.next-input.next-small .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-small input{border-radius:3px}.next-input.next-small .next-input-control{border-radius:0 3px 3px 0}.next-input.next-medium{height:28px;border-radius:3px}.next-input.next-medium .next-input-label{padding-left:8px;font-size:12px}.next-input.next-medium .next-input-inner{font-size:12px}.next-input.next-medium .next-input-control{padding-right:8px}.next-input.next-medium input{height:26px;line-height:26px \0;padding:0 8px;font-size:12px}.next-input.next-medium input::-webkit-input-placeholder{font-size:12px}.next-input.next-medium input::-moz-placeholder{font-size:12px}.next-input.next-medium input::-ms-input-placeholder{font-size:12px}.next-input.next-medium input::placeholder{font-size:12px}.next-input.next-medium .next-input-text-field{padding:0 8px;font-size:12px;height:26px;line-height:26px}.next-input.next-medium .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-medium input{border-radius:3px}.next-input.next-medium .next-input-control{border-radius:0 3px 3px 0}.next-input.next-large{height:40px;border-radius:3px}.next-input.next-large .next-input-label{padding-left:12px;font-size:16px}.next-input.next-large .next-input-inner{font-size:16px}.next-input.next-large .next-input-control{padding-right:8px}.next-input.next-large input{height:38px;line-height:38px \0;padding:0 12px;font-size:16px}.next-input.next-large input::-webkit-input-placeholder{font-size:16px}.next-input.next-large input::-moz-placeholder{font-size:16px}.next-input.next-large input::-ms-input-placeholder{font-size:16px}.next-input.next-large input::placeholder{font-size:16px}.next-input.next-large .next-input-text-field{padding:0 12px;font-size:16px;height:38px;line-height:38px}.next-input.next-large .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-input.next-large input{border-radius:3px}.next-input.next-large .next-input-control{border-radius:0 3px 3px 0}.next-input-hint-wrap{color:#999;position:relative}.next-input-hint-wrap .next-input-clear{opacity:0;z-index:1;position:absolute}.next-input-hint-wrap .next-input-hint{opacity:1}.next-input .next-icon-delete-filling:hover{cursor:pointer;color:#666}.next-input.next-focus,.next-input:hover{border-color:#a0a2ad;background-color:#fff}.next-input.next-focus .next-input-clear,.next-input:hover .next-input-clear{opacity:1}.next-input.next-focus .next-input-clear+.next-input-hint,.next-input:hover .next-input-clear+.next-input-hint{opacity:0}.next-input .next-input-clear:focus{opacity:1}.next-input .next-input-clear:focus+.next-input-hint{opacity:0}.next-input.next-focus{border-color:#5584ff;background-color:#fff}.next-input.next-error,.next-input.next-error.next-focus,.next-input.next-error:hover{border-color:#ff3000}.next-input.next-hidden{display:none}.next-input.next-noborder{border:none}.next-input-control .next-input-len{font-size:12px;line-height:12px;color:#999;display:table-cell;width:1px;vertical-align:bottom}.next-input-control .next-input-len.next-error{color:#ff3000}.next-input-control>*{display:table-cell;width:1%;top:0}.next-input-control>:not(:last-child){padding-right:4px}.next-input-control .next-icon{-webkit-transition:all .3s ease-out;transition:all .3s ease-out;color:#999}.next-input-control .next-icon-success-filling{color:#46bc15}.next-input-control .next-icon-loading{color:#4494f9}.next-input-label{color:#666}.next-input input::-moz-placeholder,.next-input textarea::-moz-placeholder{color:#999;opacity:1}.next-input input:-ms-input-placeholder,.next-input textarea:-ms-input-placeholder{color:#999}.next-input input::-webkit-input-placeholder,.next-input textarea::-webkit-input-placeholder{color:#999}.next-input.next-disabled{color:#ccc;cursor:not-allowed}.next-input.next-disabled,.next-input.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled input::-moz-placeholder,.next-input.next-disabled textarea::-moz-placeholder{color:#ccc;opacity:1}.next-input.next-disabled input:-ms-input-placeholder,.next-input.next-disabled textarea:-ms-input-placeholder{color:#ccc}.next-input.next-disabled input::-webkit-input-placeholder,.next-input.next-disabled textarea::-webkit-input-placeholder{color:#ccc}.next-input.next-disabled .next-input-label,.next-input.next-disabled .next-input-len{color:#ccc}.next-input.next-disabled input,.next-input.next-disabled textarea{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa;cursor:not-allowed}.next-input.next-disabled input:hover,.next-input.next-disabled textarea:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled .next-input-hint-wrap{color:#ccc}.next-input.next-disabled .next-input-hint-wrap .next-input-clear{opacity:0}.next-input.next-disabled .next-input-hint-wrap .next-input-hint{opacity:1}.next-input.next-disabled .next-input-hint-wrap .next-icon-delete-filling:hover{cursor:not-allowed;color:#ccc}.next-input.next-disabled .next-icon{color:#ccc}.next-input-control,.next-input-inner,.next-input-label{display:table-cell;width:1px;vertical-align:middle;line-height:1;background-color:transparent;white-space:nowrap}.next-input-group{display:inline-table;border-collapse:separate;border-spacing:0;line-height:0;width:100%}.next-input-group,.next-input-group *,.next-input-group :after,.next-input-group :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input-group-auto-width{width:100%;border-radius:0!important}.next-input-group>.next-input:first-child.next-large,.next-input-group>.next-input:first-child.next-medium,.next-input-group>.next-input:first-child.next-small{border-top-left-radius:3px!important;border-bottom-left-radius:3px!important}.next-input-group>.next-input:last-child.next-large,.next-input-group>.next-input:last-child.next-medium,.next-input-group>.next-input:last-child.next-small{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.next-input-group-addon{width:1px;display:table-cell;vertical-align:middle;white-space:nowrap}.next-input-group-addon:first-child,.next-input-group-addon:first-child>*{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group-addon:last-child,.next-input-group-addon:last-child>*{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group-text{color:#999;background-color:#f2f3f7;text-align:center;border:1px solid #c4c6cf;padding:0 8px}.next-input-group-text:first-child{border-right-width:0}.next-input-group-text:last-child{border-left-width:0}.next-input-group-text.next-disabled{color:#ccc;cursor:not-allowed}.next-input-group-text.next-disabled,.next-input-group-text.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input-group-text.next-medium,.next-input-group-text.next-small{font-size:12px;border-radius:3px}.next-input-group-text.next-large{font-size:16px;border-radius:3px}.next-input[dir=rtl].next-small .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-small .next-input-control{padding-right:0;padding-left:4px}.next-input[dir=rtl].next-medium .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-medium .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-large .next-input-label{padding-left:0;padding-right:12px}.next-input[dir=rtl].next-large .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-input-textarea .next-input-len{text-align:left}.next-input[dir=rtl] .next-input-control>:not(:last-child){padding-left:4px;padding-right:0}.next-input-group[dir=rtl] .next-input-group-addon:first-child{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-small{border-bottom-right-radius:3px!important;border-top-right-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-small{border-bottom-left-radius:3px!important;border-top-left-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-text:first-child{border-right-width:1px;border-left:0}.next-input-group[dir=rtl] .next-input-group-text:last-child{border-left-width:1px;border-right:0}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-tree,.next-tree *,.next-tree :after,.next-tree :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tree,.next-tree-child-tree{margin:0;padding:0;list-style:none}.next-tree-node{white-space:nowrap}.next-tree-node-inner{font-size:0;outline:none}.next-tree-node-label-wrapper{display:inline-block;margin:0 4px;vertical-align:middle}.next-tree-node-label{height:20px;line-height:20px;padding:0 4px;border-radius:3px;font-size:12px}.next-tree-node-input.next-input{margin:0 4px}.next-tree-switcher{position:relative;display:inline-block;vertical-align:middle;margin-right:8px}.next-tree-switcher.next-noline{width:12px;height:12px;line-height:12px;cursor:pointer}.next-tree-switcher.next-noline .next-tree-switcher-icon{-webkit-transition:-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);color:#999}.next-tree-switcher.next-noline .next-tree-switcher-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tree-switcher.next-noline.next-close .next-tree-switcher-icon{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.next-tree-switcher.next-noline.next-close .next-tree-switcher-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tree-switcher.next-noline:not(.next-disabled):hover .next-tree-switcher-icon{color:#333}.next-tree-switcher.next-noline.next-disabled{cursor:not-allowed}.next-tree-switcher.next-noline.next-disabled .next-tree-switcher-icon{color:#ccc}.next-tree-switcher.next-noop-noline{width:12px;height:12px}.next-tree-switcher.next-line{width:16px;height:16px;line-height:14px;border:1px solid #c4c6cf;border-radius:3px;background-color:#fff;cursor:pointer}.next-tree-switcher.next-line .next-tree-switcher-icon{margin-left:3px;color:#666}.next-tree-switcher.next-line .next-tree-switcher-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tree-switcher.next-line .next-tree-switcher-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-1px;margin-right:-4px}.next-tree-switcher.next-line .next-tree-switcher-icon:before{width:16px;font-size:16px}}.next-tree-switcher.next-line:not(.next-disabled):hover{border-color:#a0a2ad;background-color:#f2f3f7}.next-tree-switcher.next-line:not(.next-disabled):hover .next-tree-switcher-icon{color:#333}.next-tree-switcher.next-line.next-disabled{border-color:#e6e7eb;background-color:#fff;cursor:not-allowed}.next-tree-switcher.next-line.next-disabled .next-tree-switcher-icon{color:#ccc}.next-tree-switcher.next-noop-line{width:16px;height:16px}.next-tree-switcher.next-noop-line-noroot{height:0;border-left:1px solid #c4c6cf;border-bottom:1px solid #c4c6cf}.next-tree-switcher.next-noop-line-noroot .next-tree-right-angle{bottom:-1px}.next-tree-switcher.next-loading.next-loading-noline{width:12px;height:12px;line-height:12px}.next-tree-switcher.next-loading.next-loading-line{width:16px;height:16px;line-height:14px;border:1px solid transparent}.next-tree-switcher.next-loading .next-tree-switcher-icon{color:#5584ff}.next-tree-switcher.next-loading .next-tree-switcher-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tree-right-angle{position:absolute;bottom:6.5px;left:-17.5px;display:block;width:16.5px;height:22px;border-left:1px solid #c4c6cf;border-bottom:1px solid #c4c6cf}.next-tree.next-label-block .next-tree-node-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;outline:none}.next-tree.next-label-block .next-tree-node-label-wrapper{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.next-tree.next-node-indent .next-tree-node .next-tree-node{margin-left:24px}.next-tree.next-node-indent .next-tree-node-inner{padding-top:2px;padding-bottom:2px}.next-tree.next-node-indent .next-tree-node-inner:focus .next-tree-node-label{color:#333;background-color:#f2f3f7}.next-tree.next-node-indent .next-tree-node-label-wrapper{border-top:2px solid transparent;border-bottom:2px solid transparent}.next-tree.next-node-indent .next-tree-node-label{-webkit-transition:color .3s cubic-bezier(.23,1,.32,1),background-color .3s cubic-bezier(.23,1,.32,1);transition:color .3s cubic-bezier(.23,1,.32,1),background-color .3s cubic-bezier(.23,1,.32,1);cursor:default;color:#333;background-color:#fff}.next-tree.next-node-indent .next-tree-node-label-selectable{cursor:pointer}.next-tree.next-node-indent .next-tree-node-label:hover{color:#333;background-color:#f2f3f7}.next-tree.next-node-indent .next-tree-node-inner.next-selected .next-tree-node-label{color:#333;background-color:#dee8ff}.next-tree.next-node-indent .next-tree-node-inner.next-disabled .next-tree-node-label,.next-tree.next-node-indent .next-tree-node-inner.next-disabled .next-tree-node-label:hover{color:#ccc;background-color:#fff;cursor:not-allowed}.next-tree.next-node-indent .next-tree-node-inner.next-drag-over .next-tree-node-label{background-color:#5584ff;color:#fff;opacity:.8}.next-tree.next-node-indent .next-tree-node-inner.next-drag-over-gap-top .next-tree-node-label-wrapper{border-top-color:#5584ff}.next-tree.next-node-indent .next-tree-node-inner.next-drag-over-gap-bottom .next-tree-node-label-wrapper{border-bottom-color:#5584ff}.next-tree.next-node-block .next-tree-node-inner{padding-top:4px;padding-bottom:4px;-webkit-transition:color .3s cubic-bezier(.23,1,.32,1),background-color .3s cubic-bezier(.23,1,.32,1);transition:color .3s cubic-bezier(.23,1,.32,1),background-color .3s cubic-bezier(.23,1,.32,1);cursor:pointer;color:#333;background-color:#fff}.next-tree.next-node-block .next-tree-node-inner:focus,.next-tree.next-node-block .next-tree-node-inner:hover{color:#333;background-color:#f2f3f7}.next-tree.next-node-block .next-tree-node-inner.next-selected{color:#333;background-color:#dee8ff}.next-tree.next-node-block .next-tree-node-inner.next-disabled,.next-tree.next-node-block .next-tree-node-inner.next-disabled:hover{color:#ccc;background-color:#fff;cursor:not-allowed}.next-tree.next-show-line .next-tree-node .next-tree-node:not(:last-child){margin-left:7.5px;border-left:1px solid #c4c6cf;padding-left:15.5px}.next-tree-node.next-filtered>.next-tree-node-inner .next-tree-node-label,.next-tree-node.next-filtered>.next-tree-node-inner .next-tree-node-label:hover{color:#5584ff}.next-tree[dir=rtl] .next-tree-switcher{margin-left:8px;margin-right:0}.next-tree[dir=rtl] .next-tree-right-angle,.next-tree[dir=rtl] .next-tree-switcher.next-noop-line-noroot{border-left:none;border-right:1px solid #c4c6cf}.next-tree[dir=rtl] .next-tree-right-angle{left:auto;right:-17.5px}.next-tree[dir=rtl].next-show-line .next-tree-node .next-tree-node:not(:last-child){margin-left:0;margin-right:7.5px;border-left:none;border-right:1px solid #c4c6cf;padding-left:0;padding-right:15.5px}.next-tree[dir=rtl].next-node-indent .next-tree-node .next-tree-node{margin-left:0;margin-right:24px} \ No newline at end of file diff --git a/demos/tree/deps.json b/demos/tree/deps.json new file mode 100644 index 0000000000..ab6f8ad0b2 --- /dev/null +++ b/demos/tree/deps.json @@ -0,0 +1 @@ +["icon","checkbox","input","demo-helper"] \ No newline at end of file diff --git a/demos/tree/index.html b/demos/tree/index.html new file mode 100644 index 0000000000..3f2f9eb8de --- /dev/null +++ b/demos/tree/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/demos/upload/build/index.css b/demos/upload/build/index.css new file mode 100644 index 0000000000..236edd0932 --- /dev/null +++ b/demos/upload/build/index.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-overlay-wrapper .next-overlay-inner{z-index:1001}.next-overlay-wrapper .next-overlay-backdrop{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;background:#000;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0}.next-overlay-wrapper.opened .next-overlay-backdrop{opacity:.2}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-btn,.next-btn *,.next-btn :after,.next-btn :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-btn::-moz-focus-inner{border:0;padding:0}.next-btn,.next-btn:active,.next-btn:focus,.next-btn:hover{outline:0}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-btn{position:relative;display:inline-block;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;text-align:center;text-transform:none;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;cursor:pointer}.next-btn:after{text-align:center;position:absolute;opacity:0;visibility:hidden;-webkit-transition:opacity .5s ease;transition:opacity .5s ease}.next-btn .next-icon.next-xs:before{vertical-align:baseline}.next-btn.hover,.next-btn:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn.next-small{border-radius:3px;padding:0 8px;height:20px;line-height:18px;font-size:12px;border-width:1px}.next-btn.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-small>.next-btn-icon.next-icon-alone:before,.next-btn.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small.next-btn-loading{padding-left:24px}.next-btn.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:8px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-small.next-btn-loading>.next-icon{display:none}.next-btn.next-medium{border-radius:3px;padding:0 12px;height:28px;line-height:26px;font-size:12px;border-width:1px}.next-btn.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium.next-btn-loading{padding-left:28px}.next-btn.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:12px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-medium.next-btn-loading>.next-icon{display:none}.next-btn.next-large{border-radius:3px;padding:0 16px;height:40px;line-height:38px;font-size:16px;border-width:1px}.next-btn.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-large>.next-btn-icon.next-icon-alone:before,.next-btn.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large.next-btn-loading{padding-left:36px}.next-btn.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:16px;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn.next-large.next-btn-loading>.next-icon{display:none}.next-btn.next-btn-normal{border-style:solid;background-color:#fff;border-color:#c4c6cf}.next-btn.next-btn-normal,.next-btn.next-btn-normal.visited,.next-btn.next-btn-normal:link,.next-btn.next-btn-normal:visited{color:#333}.next-btn.next-btn-normal.active,.next-btn.next-btn-normal.hover,.next-btn.next-btn-normal:active,.next-btn.next-btn-normal:focus,.next-btn.next-btn-normal:hover{color:#333;background-color:#f2f3f7;border-color:#a0a2ad;text-decoration:none}.next-btn.next-btn-primary{border-style:solid;background-color:#5584ff;border-color:transparent}.next-btn.next-btn-primary,.next-btn.next-btn-primary.visited,.next-btn.next-btn-primary:link,.next-btn.next-btn-primary:visited{color:#fff}.next-btn.next-btn-primary.active,.next-btn.next-btn-primary.hover,.next-btn.next-btn-primary:active,.next-btn.next-btn-primary:focus,.next-btn.next-btn-primary:hover{color:#fff;background-color:#3e71f7;border-color:transparent;text-decoration:none}.next-btn.next-btn-secondary{border-style:solid;background-color:#fff;border-color:#5584ff}.next-btn.next-btn-secondary,.next-btn.next-btn-secondary.visited,.next-btn.next-btn-secondary:link,.next-btn.next-btn-secondary:visited{color:#5584ff}.next-btn.next-btn-secondary.active,.next-btn.next-btn-secondary.hover,.next-btn.next-btn-secondary:active,.next-btn.next-btn-secondary:focus,.next-btn.next-btn-secondary:hover{color:#fff;background-color:#3e71f7;border-color:#3e71f7;text-decoration:none}.next-btn.disabled,.next-btn[disabled]{cursor:not-allowed;background-color:#f7f8fa;border-color:#e6e7eb}.next-btn.disabled,.next-btn.disabled.visited,.next-btn.disabled:link,.next-btn.disabled:visited,.next-btn[disabled],.next-btn[disabled].visited,.next-btn[disabled]:link,.next-btn[disabled]:visited{color:#ccc}.next-btn.disabled.active,.next-btn.disabled.hover,.next-btn.disabled:active,.next-btn.disabled:focus,.next-btn.disabled:hover,.next-btn[disabled].active,.next-btn[disabled].hover,.next-btn[disabled]:active,.next-btn[disabled]:focus,.next-btn[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-warning{border-style:solid}.next-btn-warning.next-btn-primary{background-color:#ff3000;border-color:#ff3000}.next-btn-warning.next-btn-primary,.next-btn-warning.next-btn-primary.visited,.next-btn-warning.next-btn-primary:link,.next-btn-warning.next-btn-primary:visited{color:#fff}.next-btn-warning.next-btn-primary.active,.next-btn-warning.next-btn-primary.hover,.next-btn-warning.next-btn-primary:active,.next-btn-warning.next-btn-primary:focus,.next-btn-warning.next-btn-primary:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary[disabled]{background-color:#f7f8fa;border-color:#dcdee3}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary.disabled.visited,.next-btn-warning.next-btn-primary.disabled:link,.next-btn-warning.next-btn-primary.disabled:visited,.next-btn-warning.next-btn-primary[disabled],.next-btn-warning.next-btn-primary[disabled].visited,.next-btn-warning.next-btn-primary[disabled]:link,.next-btn-warning.next-btn-primary[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-primary.disabled.active,.next-btn-warning.next-btn-primary.disabled.hover,.next-btn-warning.next-btn-primary.disabled:active,.next-btn-warning.next-btn-primary.disabled:focus,.next-btn-warning.next-btn-primary.disabled:hover,.next-btn-warning.next-btn-primary[disabled].active,.next-btn-warning.next-btn-primary[disabled].hover,.next-btn-warning.next-btn-primary[disabled]:active,.next-btn-warning.next-btn-primary[disabled]:focus,.next-btn-warning.next-btn-primary[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#dcdee3;text-decoration:none}.next-btn-warning.next-btn-normal{background-color:#fff;border-color:#ff3000}.next-btn-warning.next-btn-normal,.next-btn-warning.next-btn-normal.visited,.next-btn-warning.next-btn-normal:link,.next-btn-warning.next-btn-normal:visited{color:#ff3000}.next-btn-warning.next-btn-normal.active,.next-btn-warning.next-btn-normal.hover,.next-btn-warning.next-btn-normal:active,.next-btn-warning.next-btn-normal:focus,.next-btn-warning.next-btn-normal:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal[disabled]{background-color:#f7f8fa;border-color:#e6e7eb}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal.disabled.visited,.next-btn-warning.next-btn-normal.disabled:link,.next-btn-warning.next-btn-normal.disabled:visited,.next-btn-warning.next-btn-normal[disabled],.next-btn-warning.next-btn-normal[disabled].visited,.next-btn-warning.next-btn-normal[disabled]:link,.next-btn-warning.next-btn-normal[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-normal.disabled.active,.next-btn-warning.next-btn-normal.disabled.hover,.next-btn-warning.next-btn-normal.disabled:active,.next-btn-warning.next-btn-normal.disabled:focus,.next-btn-warning.next-btn-normal.disabled:hover,.next-btn-warning.next-btn-normal[disabled].active,.next-btn-warning.next-btn-normal[disabled].hover,.next-btn-warning.next-btn-normal[disabled]:active,.next-btn-warning.next-btn-normal[disabled]:focus,.next-btn-warning.next-btn-normal[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-text{border-radius:0}.next-btn-text,.next-btn-text.hover,.next-btn-text:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn-text.next-btn-primary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-primary,.next-btn-text.next-btn-primary.visited,.next-btn-text.next-btn-primary:link,.next-btn-text.next-btn-primary:visited{color:#5584ff}.next-btn-text.next-btn-primary.active,.next-btn-text.next-btn-primary.hover,.next-btn-text.next-btn-primary:active,.next-btn-text.next-btn-primary:focus,.next-btn-text.next-btn-primary:hover{color:#3e71f7;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-secondary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-secondary,.next-btn-text.next-btn-secondary.visited,.next-btn-text.next-btn-secondary:link,.next-btn-text.next-btn-secondary:visited{color:#666}.next-btn-text.next-btn-secondary.active,.next-btn-text.next-btn-secondary.hover,.next-btn-text.next-btn-secondary:active,.next-btn-text.next-btn-secondary:focus,.next-btn-text.next-btn-secondary:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-normal{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-normal,.next-btn-text.next-btn-normal.visited,.next-btn-text.next-btn-normal:link,.next-btn-text.next-btn-normal:visited{color:#333}.next-btn-text.next-btn-normal.active,.next-btn-text.next-btn-normal.hover,.next-btn-text.next-btn-normal:active,.next-btn-text.next-btn-normal:focus,.next-btn-text.next-btn-normal:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-large{border-radius:0;padding:0;height:24px;line-height:24px;font-size:14px;border-width:0}.next-btn-text.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-large>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large.next-btn-loading{padding-left:20px}.next-btn-text.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:0;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn-text.next-large.next-btn-loading>.next-icon{display:none}.next-btn-text.next-medium{border-radius:0;padding:0;height:20px;line-height:20px;font-size:12px;border-width:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium.next-btn-loading{padding-left:16px}.next-btn-text.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-medium.next-btn-loading>.next-icon{display:none}.next-btn-text.next-small{border-radius:0;padding:0;height:16px;line-height:16px;font-size:12px;border-width:0}.next-btn-text.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-small>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small.next-btn-loading{padding-left:16px}.next-btn-text.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-small.next-btn-loading>.next-icon{display:none}.next-btn-text.disabled,.next-btn-text[disabled]{background-color:transparent;border-color:transparent}.next-btn-text.disabled,.next-btn-text.disabled.visited,.next-btn-text.disabled:link,.next-btn-text.disabled:visited,.next-btn-text[disabled],.next-btn-text[disabled].visited,.next-btn-text[disabled]:link,.next-btn-text[disabled]:visited{color:#ccc}.next-btn-text.disabled.active,.next-btn-text.disabled.hover,.next-btn-text.disabled:active,.next-btn-text.disabled:focus,.next-btn-text.disabled:hover,.next-btn-text[disabled].active,.next-btn-text[disabled].hover,.next-btn-text[disabled]:active,.next-btn-text[disabled]:focus,.next-btn-text[disabled]:hover{color:#ccc;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-loading{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-loading,.next-btn-text.next-btn-loading.visited,.next-btn-text.next-btn-loading:link,.next-btn-text.next-btn-loading:visited{color:#333}.next-btn-text.next-btn-loading.active,.next-btn-text.next-btn-loading.hover,.next-btn-text.next-btn-loading:active,.next-btn-text.next-btn-loading:focus,.next-btn-text.next-btn-loading:hover{color:#333;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-loading{pointer-events:none}.next-btn-loading:after{font-family:NextIcon;content:"\E646";opacity:1;visibility:visible;-webkit-animation:loadingCircle 2s infinite linear;animation:loadingCircle 2s infinite linear}.next-btn-ghost{-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-btn-ghost.next-btn-dark{background-color:transparent;border-color:#fff}.next-btn-ghost.next-btn-dark,.next-btn-ghost.next-btn-dark.visited,.next-btn-ghost.next-btn-dark:link,.next-btn-ghost.next-btn-dark:visited{color:#fff}.next-btn-ghost.next-btn-dark.active,.next-btn-ghost.next-btn-dark.hover,.next-btn-ghost.next-btn-dark:active,.next-btn-ghost.next-btn-dark:focus,.next-btn-ghost.next-btn-dark:hover{color:#fff;background-color:hsla(0,0%,100%,.8);border-color:#fff;text-decoration:none}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark[disabled]{background-color:transparent;border-color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark.disabled.visited,.next-btn-ghost.next-btn-dark.disabled:link,.next-btn-ghost.next-btn-dark.disabled:visited,.next-btn-ghost.next-btn-dark[disabled],.next-btn-ghost.next-btn-dark[disabled].visited,.next-btn-ghost.next-btn-dark[disabled]:link,.next-btn-ghost.next-btn-dark[disabled]:visited{color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled.active,.next-btn-ghost.next-btn-dark.disabled.hover,.next-btn-ghost.next-btn-dark.disabled:active,.next-btn-ghost.next-btn-dark.disabled:focus,.next-btn-ghost.next-btn-dark.disabled:hover,.next-btn-ghost.next-btn-dark[disabled].active,.next-btn-ghost.next-btn-dark[disabled].hover,.next-btn-ghost.next-btn-dark[disabled]:active,.next-btn-ghost.next-btn-dark[disabled]:focus,.next-btn-ghost.next-btn-dark[disabled]:hover{color:hsla(0,0%,100%,.4);background-color:transparent;border-color:hsla(0,0%,100%,.4);text-decoration:none}.next-btn-ghost.next-btn-light{background-color:transparent;border-color:#333}.next-btn-ghost.next-btn-light,.next-btn-ghost.next-btn-light.visited,.next-btn-ghost.next-btn-light:link,.next-btn-ghost.next-btn-light:visited{color:#333}.next-btn-ghost.next-btn-light.active,.next-btn-ghost.next-btn-light.hover,.next-btn-ghost.next-btn-light:active,.next-btn-ghost.next-btn-light:focus,.next-btn-ghost.next-btn-light:hover{color:#999;background-color:rgba(0,0,0,.92);border-color:#333;text-decoration:none}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light[disabled]{background-color:transparent;border-color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light.disabled.visited,.next-btn-ghost.next-btn-light.disabled:link,.next-btn-ghost.next-btn-light.disabled:visited,.next-btn-ghost.next-btn-light[disabled],.next-btn-ghost.next-btn-light[disabled].visited,.next-btn-ghost.next-btn-light[disabled]:link,.next-btn-ghost.next-btn-light[disabled]:visited{color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled.active,.next-btn-ghost.next-btn-light.disabled.hover,.next-btn-ghost.next-btn-light.disabled:active,.next-btn-ghost.next-btn-light.disabled:focus,.next-btn-ghost.next-btn-light.disabled:hover,.next-btn-ghost.next-btn-light[disabled].active,.next-btn-ghost.next-btn-light[disabled].hover,.next-btn-ghost.next-btn-light[disabled]:active,.next-btn-ghost.next-btn-light[disabled]:focus,.next-btn-ghost.next-btn-light[disabled]:hover{color:rgba(0,0,0,.1);background-color:transparent;border-color:rgba(0,0,0,.1);text-decoration:none}.next-btn-group{position:relative;display:inline-block;vertical-align:middle}.next-btn-group>.next-btn{position:relative;float:left;-webkit-box-shadow:none;box-shadow:none}.next-btn-group>.next-btn.active,.next-btn-group>.next-btn:active,.next-btn-group>.next-btn:focus,.next-btn-group>.next-btn:hover{z-index:1}.next-btn-group>.next-btn.disabled,.next-btn-group>.next-btn[disabled]{z-index:0}.next-btn-group .next-btn.next-btn{margin:0 0 0 -1px}.next-btn-group .next-btn:not(:first-child):not(:last-child){border-radius:0}.next-btn-group>.next-btn:first-child{margin:0}.next-btn-group>.next-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group>.next-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group>.next-btn-primary:not(:first-child){border-left-color:hsla(0,0%,100%,.2)}.next-btn-group>.next-btn-primary:not(:first-child):hover{border-left-color:transparent}.next-btn-group>.next-btn-primary:not(:first-child).disabled,.next-btn-group>.next-btn-primary:not(:first-child)[disabled]{border-left-color:#e6e7eb}.next-btn-group[dir=rtl]>.next-btn{float:right}.next-btn-group[dir=rtl] .next-btn.next-btn{margin:0 -1px 0 0}.next-btn-group[dir=rtl]>.next-btn:first-child:not(:last-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group[dir=rtl]>.next-btn:last-child:not(:first-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child){border-right-color:hsla(0,0%,100%,.2)}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child):hover{border-right-color:transparent}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child).disabled,.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child)[disabled]{border-right-color:#e6e7eb}.next-btn.next-small[dir=rtl]{border-radius:3px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl].next-btn-loading{padding-left:8px;padding-right:24px}.next-btn.next-small[dir=rtl].next-btn-loading:after{right:8px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-medium[dir=rtl]{border-radius:3px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl].next-btn-loading{padding-left:12px;padding-right:28px}.next-btn.next-medium[dir=rtl].next-btn-loading:after{right:12px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-large[dir=rtl]{border-radius:3px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl].next-btn-loading{padding-left:16px;padding-right:36px}.next-btn.next-large[dir=rtl].next-btn-loading:after{right:16px;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-large{border-radius:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large.next-btn-loading{padding-left:0;padding-right:20px}.next-btn-text[dir=rtl].next-large.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-medium{border-radius:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-medium.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-small{border-radius:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-small.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-message{position:relative;display:block;vertical-align:baseline}.next-message,.next-message *,.next-message :after,.next-message :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-message:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-message .next-message-close{color:#999;font-size:0;position:absolute}.next-message .next-message-close .next-icon-close{width:12px;height:12px;line-height:12px}.next-message .next-message-close .next-icon-close:before{width:12px;height:12px;font-size:12px;line-height:12px}.next-message .next-message-close:hover{color:#666}.next-message.next-message-success.next-inline{background-color:#e4fdda;border-color:#e4fdda;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-success.next-inline .next-message-title{color:#333}.next-message.next-message-success.next-inline .next-message-content{color:#666}.next-message.next-message-success.next-inline .next-message-symbol{color:#46bc15}.next-message.next-message-success.next-inline .next-message-symbol-icon:before{content:"\E60A"}.next-message.next-message-success.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-success.next-addon .next-message-title{color:#333}.next-message.next-message-success.next-addon .next-message-content{color:#666}.next-message.next-message-success.next-addon .next-message-symbol{color:#46bc15}.next-message.next-message-success.next-addon .next-message-symbol-icon:before{content:"\E60A"}.next-message.next-message-success.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-success.next-toast .next-message-title{color:#333}.next-message.next-message-success.next-toast .next-message-content{color:#666}.next-message.next-message-success.next-toast .next-message-symbol{color:#46bc15}.next-message.next-message-success.next-toast .next-message-symbol-icon:before{content:"\E60A"}.next-message.next-message-warning.next-inline{background-color:#fff3e0;border-color:#fff3e0;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-warning.next-inline .next-message-title{color:#333}.next-message.next-message-warning.next-inline .next-message-content{color:#666}.next-message.next-message-warning.next-inline .next-message-symbol{color:#ff9300}.next-message.next-message-warning.next-inline .next-message-symbol-icon:before{content:"\E60B"}.next-message.next-message-warning.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-warning.next-addon .next-message-title{color:#333}.next-message.next-message-warning.next-addon .next-message-content{color:#666}.next-message.next-message-warning.next-addon .next-message-symbol{color:#ff9300}.next-message.next-message-warning.next-addon .next-message-symbol-icon:before{content:"\E60B"}.next-message.next-message-warning.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-warning.next-toast .next-message-title{color:#333}.next-message.next-message-warning.next-toast .next-message-content{color:#666}.next-message.next-message-warning.next-toast .next-message-symbol{color:#ff9300}.next-message.next-message-warning.next-toast .next-message-symbol-icon:before{content:"\E60B"}.next-message.next-message-error.next-inline{background-color:#ffece4;border-color:#ffece4;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-error.next-inline .next-message-title{color:#333}.next-message.next-message-error.next-inline .next-message-content{color:#666}.next-message.next-message-error.next-inline .next-message-symbol{color:#ff3000}.next-message.next-message-error.next-inline .next-message-symbol-icon:before{content:"\E60D"}.next-message.next-message-error.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-error.next-addon .next-message-title{color:#333}.next-message.next-message-error.next-addon .next-message-content{color:#666}.next-message.next-message-error.next-addon .next-message-symbol{color:#ff3000}.next-message.next-message-error.next-addon .next-message-symbol-icon:before{content:"\E60D"}.next-message.next-message-error.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-error.next-toast .next-message-title{color:#333}.next-message.next-message-error.next-toast .next-message-content{color:#666}.next-message.next-message-error.next-toast .next-message-symbol{color:#ff3000}.next-message.next-message-error.next-toast .next-message-symbol-icon:before{content:"\E60D"}.next-message.next-message-notice.next-inline{background-color:#e3f2fd;border-color:#e3f2fd;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-notice.next-inline .next-message-title{color:#333}.next-message.next-message-notice.next-inline .next-message-content{color:#666}.next-message.next-message-notice.next-inline .next-message-symbol{color:#4494f9}.next-message.next-message-notice.next-inline .next-message-symbol-icon:before{content:"\E60C"}.next-message.next-message-notice.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-notice.next-addon .next-message-title{color:#333}.next-message.next-message-notice.next-addon .next-message-content{color:#666}.next-message.next-message-notice.next-addon .next-message-symbol{color:#4494f9}.next-message.next-message-notice.next-addon .next-message-symbol-icon:before{content:"\E60C"}.next-message.next-message-notice.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-notice.next-toast .next-message-title{color:#333}.next-message.next-message-notice.next-toast .next-message-content{color:#666}.next-message.next-message-notice.next-toast .next-message-symbol{color:#4494f9}.next-message.next-message-notice.next-toast .next-message-symbol-icon:before{content:"\E60C"}.next-message.next-message-help.next-inline{background-color:#e3fff8;border-color:#e3fff8;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-help.next-inline .next-message-title{color:#333}.next-message.next-message-help.next-inline .next-message-content{color:#666}.next-message.next-message-help.next-inline .next-message-symbol{color:#01c1b2}.next-message.next-message-help.next-inline .next-message-symbol-icon:before{content:"\E673"}.next-message.next-message-help.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-help.next-addon .next-message-title{color:#333}.next-message.next-message-help.next-addon .next-message-content{color:#666}.next-message.next-message-help.next-addon .next-message-symbol{color:#01c1b2}.next-message.next-message-help.next-addon .next-message-symbol-icon:before{content:"\E673"}.next-message.next-message-help.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-help.next-toast .next-message-title{color:#333}.next-message.next-message-help.next-toast .next-message-content{color:#666}.next-message.next-message-help.next-toast .next-message-symbol{color:#01c1b2}.next-message.next-message-help.next-toast .next-message-symbol-icon:before{content:"\E673"}.next-message.next-message-loading.next-inline{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-loading.next-inline .next-message-title{color:#333}.next-message.next-message-loading.next-inline .next-message-content{color:#666}.next-message.next-message-loading.next-inline .next-message-symbol{color:#5584ff}.next-message.next-message-loading.next-inline .next-message-symbol-icon:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}.next-message.next-message-loading.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-loading.next-addon .next-message-title{color:#333}.next-message.next-message-loading.next-addon .next-message-content{color:#666}.next-message.next-message-loading.next-addon .next-message-symbol{color:#5584ff}.next-message.next-message-loading.next-addon .next-message-symbol-icon:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}.next-message.next-message-loading.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-loading.next-toast .next-message-title{color:#333}.next-message.next-message-loading.next-toast .next-message-content{color:#666}.next-message.next-message-loading.next-toast .next-message-symbol{color:#5584ff}.next-message.next-message-loading.next-toast .next-message-symbol-icon:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}.next-message.next-medium{border-width:1px;padding:12px}.next-message.next-medium .next-message-symbol{float:left;line-height:16px}.next-message.next-medium .next-message-symbol:before{width:16px;font-size:16px;line-height:inherit}.next-message.next-medium .next-message-title{padding:0 20px 0 24px;font-size:16px;line-height:16px}.next-message.next-medium .next-message-content{margin-top:8px;padding:0 20px 0 24px;font-size:12px;line-height:12px}.next-message.next-medium .next-message-symbol+.next-message-content{margin-top:0}.next-message.next-medium.next-only-content .next-message-content{line-height:16px}.next-message.next-medium .next-message-close{top:12px;right:12px}.next-message.next-large{border-width:2px;padding:16px;line-height:18px}.next-message.next-large .next-message-symbol{float:left;line-height:24px}.next-message.next-large .next-message-symbol:before{width:24px;font-size:24px;line-height:inherit}.next-message.next-large .next-message-title{padding:0 20px 0 36px;font-size:20px;line-height:20px}.next-message.next-large .next-message-content{margin-top:8px;padding:0 20px 0 36px;font-size:12px;line-height:12px}.next-message.next-large .next-message-symbol+.next-message-content{margin-top:0}.next-message.next-large.next-only-content .next-message-content,.next-message.next-large.next-title-content .next-message-title{line-height:24px}.next-message.next-large .next-message-close{top:16px;right:16px}.next-message[dir=rtl] .next-message-symbol{float:right}.next-message[dir=rtl].next-medium .next-message-title{padding:0 24px 0 20px}.next-message[dir=rtl].next-medium .next-message-close{left:12px;right:auto}.next-message[dir=rtl].next-large .next-message-title{padding:0 36px 0 20px}.next-message[dir=rtl].next-large .next-message-close{left:16px;right:auto}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-dialog[dir=rtl],.next-dialog[dir=rtl] .next-dialog-footer.next-align-left{text-align:right}.next-dialog[dir=rtl] .next-dialog-footer.next-align-center{text-align:center}.next-dialog[dir=rtl] .next-dialog-footer.next-align-right{text-align:left}.next-dialog[dir=rtl] .next-dialog-btn+.next-dialog-btn{margin-right:4px;margin-left:0}.next-dialog[dir=rtl] .next-dialog-close{left:16px;right:auto}.next-dialog{position:fixed;z-index:1001;background:#fff;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);text-align:left}.next-dialog,.next-dialog *,.next-dialog :after,.next-dialog :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-dialog-header{padding:12px 20px;border-bottom:0 solid transparent;font-size:16px;background:transparent;color:#333}.next-dialog-body{padding:20px;font-size:12px;color:#666}.next-dialog-footer{padding:12px 20px;border-top:0 solid transparent;background:transparent}.next-dialog-footer.next-align-left{text-align:left}.next-dialog-footer.next-align-center{text-align:center}.next-dialog-footer.next-align-right{text-align:right}.next-dialog-footer-fixed-height{position:absolute;width:100%;bottom:0}.next-dialog-btn+.next-dialog-btn{margin-left:4px}.next-dialog-close{position:absolute;top:16px;right:16px;width:16px}.next-dialog-close,.next-dialog-close:link,.next-dialog-close:visited{height:16px;color:#999}.next-dialog-close:hover{background:transparent;color:#333}.next-dialog-close .next-dialog-close-icon.next-icon{position:absolute;top:50%;left:50%;margin-top:-6px;margin-left:-6px;width:12px;height:12px;line-height:12px}.next-dialog-close .next-dialog-close-icon.next-icon:before{width:12px;height:12px;font-size:12px;line-height:12px}.next-dialog-container{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1001;padding:40px;overflow:auto;text-align:center}.next-dialog-container:before{display:inline-block;vertical-align:middle;width:0;height:100%;content:""}.next-dialog-container .next-dialog{display:inline-block;position:relative;vertical-align:middle}.next-dialog-quick .next-dialog-body{padding:20px}.next-dialog .next-dialog-message.next-message{min-width:300px;padding:0}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-progress-circle[dir=rtl] .next-progress-circle-container{-webkit-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scaleX(-1)}.next-progress-line[dir=rtl] .next-progress-line-overlay{left:auto;right:0}.next-progress-line,.next-progress-line *,.next-progress-line :after,.next-progress-line :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-progress-line{width:100%;display:inline-block;position:relative}.next-progress-line-container{display:inline-block;width:100%;vertical-align:middle}.next-progress-line-underlay{position:relative;width:100%;background-color:#ebecf0}.next-progress-line-overlay{position:absolute;left:0;top:0;-webkit-transition:all 1s cubic-bezier(.65,.2,.35,1);transition:all 1s cubic-bezier(.65,.2,.35,1)}.next-progress-line-overlay-normal{background-color:#5584ff}.next-progress-line-overlay-success{background-color:#46bc15}.next-progress-line-overlay-error,.next-progress-line-overlay-started{background-color:#ff3000}.next-progress-line-overlay-middle{background-color:#ff9300}.next-progress-line-overlay-finishing{background-color:#46bc15}.next-progress-line.next-small .next-progress-line-underlay{border-radius:20px;height:4px}.next-progress-line.next-small .next-progress-line-overlay{height:4px;border-radius:20px;top:50%;margin-top:-2px}.next-progress-line.next-small .next-progress-line-text{font-size:12px;line-height:4px}.next-progress-line.next-medium .next-progress-line-underlay{border-radius:20px;height:8px}.next-progress-line.next-medium .next-progress-line-overlay{height:8px;border-radius:20px;top:50%;margin-top:-4px}.next-progress-line.next-medium .next-progress-line-text{font-size:12px;line-height:8px}.next-progress-line.next-large .next-progress-line-underlay{border-radius:20px;height:12px}.next-progress-line.next-large .next-progress-line-overlay{height:12px;border-radius:20px;top:50%;margin-top:-6px}.next-progress-line.next-large .next-progress-line-text{font-size:12px;line-height:12px}.next-progress-line-show-info .next-progress-line-container{padding-right:60px;margin-right:-60px}.next-progress-line-show-info .next-progress-line-text{width:50px;text-align:left;margin-left:10px;vertical-align:middle;display:inline-block;color:#333}.next-progress-line-show-border .next-progress-line-underlay{border:1px solid #dcdee3}.next-progress-line-show-border.next-small .next-progress-line-underlay{border-radius:20px;height:6px}.next-progress-line-show-border.next-small .next-progress-line-overlay{height:4px;border-radius:20px;top:50%;margin-top:-2px}.next-progress-line-show-border.next-small .next-progress-line-text{font-size:12px;line-height:6px}.next-progress-line-show-border.next-medium .next-progress-line-underlay{border-radius:20px;height:10px}.next-progress-line-show-border.next-medium .next-progress-line-overlay{height:8px;border-radius:20px;top:50%;margin-top:-4px}.next-progress-line-show-border.next-medium .next-progress-line-text{font-size:12px;line-height:10px}.next-progress-line-show-border.next-large .next-progress-line-underlay{border-radius:20px;height:14px}.next-progress-line-show-border.next-large .next-progress-line-overlay{height:12px;border-radius:20px;top:50%;margin-top:-6px}.next-progress-line-show-border.next-large .next-progress-line-text{font-size:12px;line-height:14px}.next-progress-circle,.next-progress-circle *,.next-progress-circle :after,.next-progress-circle :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-progress-circle{position:relative;display:inline-block}.next-progress-circle-underlay{stroke-width:8px;stroke:#ebecf0}.next-progress-circle-overlay{-webkit-transition:all 1s cubic-bezier(.65,.2,.35,1);transition:all 1s cubic-bezier(.65,.2,.35,1);stroke-linecap:round;stroke-width:8px}.next-progress-circle-overlay-normal{stroke:#5584ff}.next-progress-circle-overlay-success{stroke:#46bc15}.next-progress-circle-overlay-error,.next-progress-circle-overlay-started{stroke:#ff3000}.next-progress-circle-overlay-middle{stroke:#ff9300}.next-progress-circle-overlay-finishing{stroke:#46bc15}.next-progress-circle.next-small{width:100px;height:100px;font-size:20px}.next-progress-circle.next-medium{width:116px;height:116px;font-size:24px}.next-progress-circle.next-large{width:132px;height:132px;font-size:36px}.next-progress-circle-text{display:block;position:absolute;width:100%;top:50%;left:0;text-align:center;line-height:1;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:-webkit-transform .3s cubic-bezier(.65,.2,.35,1);transition:-webkit-transform .3s cubic-bezier(.65,.2,.35,1);transition:transform .3s cubic-bezier(.65,.2,.35,1);transition:transform .3s cubic-bezier(.65,.2,.35,1),-webkit-transform .3s cubic-bezier(.65,.2,.35,1);color:#333}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-upload-list[dir=rtl].next-upload-list-text .next-upload-list-item{padding:4px 8px;padding-left:36px}.next-upload-list[dir=rtl].next-upload-list-text .next-icon{left:12px;right:auto}.next-upload-list[dir=rtl].next-upload-list-image .next-icon-close{float:left;margin-left:4px;margin-right:0}.next-upload-list[dir=rtl].next-upload-list-image .next-upload-list-item-thumbnail{float:right;margin-left:8px;margin-right:0}.next-upload-list[dir=rtl].next-upload-list-image .next-upload-list-item-progress{margin-right:56px;margin-left:20px}.next-upload,.next-upload *,.next-upload :after,.next-upload :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-upload-inner{outline:0;display:inline-block}.next-upload-inner.next-hidden{display:none}.next-upload-list{overflow:hidden}.next-upload-list,.next-upload-list *,.next-upload-list :after,.next-upload-list :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-upload-list-item{position:relative}.next-upload-list-item.next-hidden{display:none}.next-upload-list-item-name{text-decoration:none}.next-upload.next-disabled{border-color:#e6e7eb!important;color:#ccc!important}.next-upload.next-disabled .next-icon-close{cursor:not-allowed!important}.next-upload.next-disabled .next-upload-inner *{color:#ccc!important;border-color:#e6e7eb!important;cursor:not-allowed!important}.next-upload-list-text .next-upload-list-item{background-color:#f2f3f7;padding:4px 8px;padding-right:36px;height:40px;line-height:32px;font-size:12px;overflow:hidden;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.next-upload-list-text .next-upload-list-item:not(:last-child){margin-bottom:4px}.next-upload-list-text .next-upload-list-item .next-icon{position:absolute;top:0;right:12px;color:#999;cursor:pointer;text-align:center;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;line-height:40px}.next-upload-list-text .next-upload-list-item .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-upload-list-text .next-upload-list-item:hover{background-color:#f2f3f7}.next-upload-list-text .next-upload-list-item:hover .next-icon{color:#666}.next-upload-list-text .next-upload-list-item-name-wrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-right:4px}.next-upload-list-text .next-upload-list-item-name{color:#333;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.next-upload-list-text .next-upload-list-item-size{color:#999;margin-left:8px}.next-upload-list-text .next-upload-list-item-uploading{line-height:16px}.next-upload-list-text .next-upload-list-item-done{line-height:32px}.next-upload-list-text .next-upload-list-item-done:hover .next-upload-list-item-name,.next-upload-list-text .next-upload-list-item-done:hover .next-upload-list-item-size{color:#5584ff}.next-upload-list-text .next-upload-list-item-error{background-color:#ffece4!important}.next-upload-list-text .next-upload-list-item-error.next-upload-list-item-error-with-msg{line-height:16px}.next-upload-list-text .next-upload-list-item-error-msg{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#ff3000}.next-upload-list-image .next-upload-list-item{-webkit-box-sizing:content-box;box-sizing:content-box;border:1px solid #dcdee3;background-color:#fff;padding:8px;height:48px;line-height:48px;font-size:12px;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;overflow:hidden}.next-upload-list-image .next-upload-list-item:not(:last-child){margin-bottom:4px}.next-upload-list-image .next-upload-list-item:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-upload-list-image .next-upload-list-item .next-icon-close{float:right;margin-right:4px;cursor:pointer;color:#999;text-align:center}.next-upload-list-image .next-upload-list-item .next-icon-close:before{width:12px;font-size:12px;line-height:inherit}.next-upload-list-image .next-upload-list-item:hover{border-color:#5584ff}.next-upload-list-image .next-upload-list-item:hover .next-icon-close{color:#666}.next-upload-list-image .next-upload-list-item-name{display:block;color:#333;margin-left:56px;margin-right:20px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.next-upload-list-image .next-upload-list-item-size{color:#999;margin-left:8px}.next-upload-list-image .next-upload-list-item-progress{line-height:24px}.next-upload-list-image .next-upload-list-item-done:hover .next-upload-list-item-name,.next-upload-list-image .next-upload-list-item-done:hover .next-upload-list-item-size{color:#5584ff}.next-upload-list-image .next-upload-list-item-thumbnail{float:left;width:48px;height:48px;color:#ccc;border:1px solid #dcdee3;background-color:#f2f3f7;margin-right:8px;vertical-align:middle;text-align:center;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.next-upload-list-image .next-upload-list-item-thumbnail img{width:100%;height:100%}.next-upload-list-image .next-upload-list-item-thumbnail .next-icon{display:block;margin:0;line-height:48px}.next-upload-list-image .next-upload-list-item-thumbnail .next-icon:before{width:24px;font-size:24px;line-height:inherit}.next-upload-list-image .next-upload-list-item-error{border-color:#ff3000!important;background-color:#fff}.next-upload-list-image .next-upload-list-item-uploading{background-color:#fff}.next-upload-list-image .next-upload-list-item-uploading .next-upload-list-item-name{height:24px;line-height:24px}.next-upload-list-image .next-upload-list-item-uploading .next-upload-list-item-progress{margin-left:56px;margin-right:20px;height:24px;line-height:24px}.next-upload-list-image .next-upload-list-item-error-with-msg .next-upload-list-item-error-msg,.next-upload-list-image .next-upload-list-item-error-with-msg .next-upload-list-item-name{height:24px;line-height:24px}.next-upload-list-image .next-upload-list-item-error-with-msg .next-upload-list-item-error-msg{margin-left:56px;margin-right:20px;color:#ff3000;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.next-upload-list-card{display:inline-block}.next-upload-list-card .next-upload-list-item{vertical-align:middle;float:left}.next-upload-list-card .next-upload-list-item:not(:last-child){margin-right:12px}.next-upload-list-card .next-upload-list-item-wrapper{position:relative;border:1px solid #c4c6cf;width:100px;height:100px;padding:0;background-color:transparent}.next-upload-list-card .next-upload-list-item-thumbnail{display:table;text-align:center;vertical-align:middle;width:100%;height:100%;color:#ccc;font-size:12px}.next-upload-list-card .next-upload-list-item-thumbnail img{width:100%;height:100%}.next-upload-list-card .next-upload-list-item-thumbnail img:focus{outline:0}.next-upload-list-card .next-upload-list-item-thumbnail .next-icon{width:100%}.next-upload-list-card .next-upload-list-item-thumbnail .next-icon:before{width:48px;font-size:48px;line-height:inherit}.next-upload-list-card .next-upload-list-item-handler{display:table-cell;width:100%;vertical-align:middle}.next-upload-list-card .next-upload-list-item-name{display:block;width:100px;text-align:center;margin-top:4px;font-size:12px;color:#666;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.next-upload-list-card .next-upload-list-item-progress{position:absolute;font-size:0;bottom:0;left:0;width:100%}.next-upload-list-card .next-upload-list-item-progress .next-progress-line-overlay,.next-upload-list-card .next-upload-list-item-progress .next-progress-line-underlay{border-radius:0}.next-upload-list-card .next-upload-list-item-uploading .next-upload-list-item-wrapper{background-color:#f7f8fa}.next-upload-list-card .next-upload-list-item:hover .next-upload-tool{opacity:.8}.next-upload-list-card .next-upload-list-item .next-upload-tool{position:absolute;z-index:1;background-color:rgba(0,0,0,.7);-webkit-transition:all .3s ease;transition:all .3s ease;opacity:0;width:100%;height:28px;left:0;bottom:0}.next-upload-list-card .next-upload-list-item .next-upload-tool .next-icon{width:49%;text-align:center;line-height:28px;color:#fff}.next-upload-list-card .next-upload-list-item .next-upload-tool .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-upload-list-card .next-upload-list-item .next-upload-tool.next-noclose .next-icon{width:100%}.next-upload-list-card .next-upload-list-item .next-upload-tool-close{cursor:pointer}.next-upload-list-card .next-upload-list-item .next-upload-tool-download-icon{border-right:1px solid #fff}.next-upload-list-card .next-upload-list-item-error .next-upload-list-item-wrapper{border-color:#ff3000}.next-upload-card{border:1px dashed #c4c6cf;width:100px;height:100px;background-color:#fff;text-align:center;cursor:pointer;-webkit-transition:border-color .3s ease;transition:border-color .3s ease;display:table-cell;vertical-align:middle}.next-upload-card .next-icon{color:#c4c6cf}.next-upload-card .next-icon:before{width:24px;font-size:24px;line-height:inherit}.next-upload-card .next-upload-text{font-size:12px;margin-top:12px;color:#666}.next-upload-card:hover{border-color:#5584ff}.next-upload-card:hover .next-icon,.next-upload-card:hover .next-upload-text{color:#5584ff}.next-upload-dragable .next-upload-inner{display:block}.next-upload-dragable .next-upload-drag{border:1px dashed #c4c6cf;-webkit-transition:border-color .3s ease;transition:border-color .3s ease;cursor:pointer;border-radius:3px;background-color:transparent;text-align:center;margin-bottom:4px}.next-upload-dragable .next-upload-drag-icon{margin:20px 0 0;color:#666}.next-upload-dragable .next-upload-drag-icon .next-upload-drag-upload-icon:before{content:"\E7EE"}.next-upload-dragable .next-upload-drag-text{margin:12px 0 0;font-size:14px;color:#666}.next-upload-dragable .next-upload-drag-hint{margin:4px 0 20px;font-size:12px;color:#999}.next-upload-dragable .next-upload-drag-over{border-color:#5584ff} \ No newline at end of file diff --git a/demos/upload/deps.json b/demos/upload/deps.json new file mode 100644 index 0000000000..2388f92cd4 --- /dev/null +++ b/demos/upload/deps.json @@ -0,0 +1 @@ +["icon","button","progress","demo-helper","field","dialog"] \ No newline at end of file diff --git a/demos/upload/index.html b/demos/upload/index.html new file mode 100644 index 0000000000..1ced4423bc --- /dev/null +++ b/demos/upload/index.html @@ -0,0 +1,50 @@ + + + +Component Demo + + + + + + + + + + +
    + + + \ No newline at end of file diff --git a/dist/next-1.css b/dist/next-1.css new file mode 100644 index 0000000000..694960a047 --- /dev/null +++ b/dist/next-1.css @@ -0,0 +1,12629 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@charset "UTF-8"; +/** + * 尺寸 基础尺寸 + * 命名能在语义的前提下简单就尽量简单, 这里可以是 size-2x, space-2x, size-base ... + * 不过可以在语义的前提下做的更精简一些, 于是用了s2, s1等 + * 可用变量: `$s1 - $s8` + * @example scss - 使用 + * .element { + * padding: $s1 !default; + * } + * + * @example css - CSS 输出 + * .element { + * padding: 4px !default; + * } + */ +/* stylelint-disable */ +/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ +/* Document +========================================================================== */ +/** +* 1. Correct the line height in all browsers. +* 2. Prevent adjustments of font size after orientation changes in +* IE on Windows Phone and in iOS. +*/ +html { + line-height: 1.15; + /* 1 */ + -ms-text-size-adjust: 100%; + /* 2 */ + -webkit-text-size-adjust: 100%; + /* 2 */ } + +/* Sections + ========================================================================== */ +/** +* Remove the margin in all browsers (opinionated). +*/ +body { + margin: 0; } + +/** +* Add the correct display in IE 9-. +*/ +article, +aside, +footer, +header, +nav, +section { + display: block; } + +/** +* Correct the font size and margin on `h1` elements within `section` and +* `article` contexts in Chrome, Firefox, and Safari. +*/ +h1 { + font-size: 2em; + margin: .67em 0; } + +/* Grouping content + ========================================================================== */ +/** +* Add the correct display in IE 9-. +* 1. Add the correct display in IE. +*/ +figcaption, +figure, +main { + /* 1 */ + display: block; } + +/** +* Add the correct margin in IE 8. +*/ +figure { + margin: 1em 40px; } + +/** +* 1. Add the correct box sizing in Firefox. +* 2. Show the overflow in Edge and IE. +*/ +hr { + -webkit-box-sizing: content-box; + box-sizing: content-box; + /* 1 */ + height: 0; + /* 1 */ + overflow: visible; + /* 2 */ } + +/** +* 1. Correct the inheritance and scaling of font size in all browsers. +* 2. Correct the odd `em` font sizing in all browsers. +*/ +pre { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + +/* Text-level semantics + ========================================================================== */ +/** +* 1. Remove the gray background on active links in IE 10. +* 2. Remove gaps in links underline in iOS 8+ and Safari 8+. +*/ +a { + background-color: transparent; + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } + +/** +* 1. Remove the bottom border in Chrome 57- and Firefox 39-. +* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. +*/ +abbr[title] { + border-bottom: none; + /* 1 */ + text-decoration: underline; + /* 2 */ + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; + /* 2 */ } + +/** +* Prevent the duplicate application of `bolder` by the next rule in Safari 6. +*/ +b, +strong { + font-weight: inherit; } + +/** +* Add the correct font weight in Chrome, Edge, and Safari. +*/ +b, +strong { + font-weight: bolder; } + +/** +* 1. Correct the inheritance and scaling of font size in all browsers. +* 2. Correct the odd `em` font sizing in all browsers. +*/ +code, +kbd, +samp { + font-family: monospace, monospace; + /* 1 */ + font-size: 1em; + /* 2 */ } + +/** +* Add the correct font style in Android 4.3-. +*/ +dfn { + font-style: italic; } + +/** +* Add the correct background and color in IE 9-. +*/ +mark { + background-color: #FF0; + color: #000; } + +/** +* Add the correct font size in all browsers. +*/ +small { + font-size: 80%; } + +/** +* Prevent `sub` and `sup` elements from affecting the line height in +* all browsers. +*/ +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; } + +sub { + bottom: -.25em; } + +sup { + top: -.5em; } + +/* Embedded content + ========================================================================== */ +/** +* Add the correct display in IE 9-. +*/ +audio, +video { + display: inline-block; } + +/** +* Add the correct display in iOS 4-7. +*/ +audio:not([controls]) { + display: none; + height: 0; } + +/** +* Remove the border on images inside links in IE 10-. +*/ +img { + border-style: none; } + +/** +* Hide the overflow in IE. +*/ +svg:not(:root) { + overflow: hidden; } + +/* Forms + ========================================================================== */ +/** +* 1. Change the font styles in all browsers (opinionated). +* 2. Remove the margin in Firefox and Safari. +*/ +button, +input, +optgroup, +select, +textarea { + font-family: sans-serif; + /* 1 */ + font-size: 100%; + /* 1 */ + line-height: 1.15; + /* 1 */ + margin: 0; + /* 2 */ } + +/** +* Show the overflow in IE. +* 1. Show the overflow in Edge. +*/ +button, +input { + /* 1 */ + overflow: visible; } + +/** +* Remove the inheritance of text transform in Edge, Firefox, and IE. +* 1. Remove the inheritance of text transform in Firefox. +*/ +button, +select { + /* 1 */ + text-transform: none; } + +/** +* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` +* controls in Android 4. +* 2. Correct the inability to style clickable types in iOS and Safari. +*/ +button, +html [type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; + /* 2 */ } + +/** +* Remove the inner border and padding in Firefox. +*/ +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } + +/** +* Restore the focus styles unset by the previous rule. +*/ +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } + +/** +* Correct the padding in Firefox. +*/ +fieldset { + padding: .35em .75em .625em; } + +/** +* 1. Correct the text wrapping in Edge and IE. +* 2. Correct the color inheritance from `fieldset` elements in IE. +* 3. Remove the padding so developers are not caught out when they zero out +* `fieldset` elements in all browsers. +*/ +legend { + -webkit-box-sizing: border-box; + box-sizing: border-box; + /* 1 */ + color: inherit; + /* 2 */ + display: table; + /* 1 */ + max-width: 100%; + /* 1 */ + padding: 0; + /* 3 */ + white-space: normal; + /* 1 */ } + +/** +* 1. Add the correct display in IE 9-. +* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. +*/ +progress { + display: inline-block; + /* 1 */ + vertical-align: baseline; + /* 2 */ } + +/** +* Remove the default vertical scrollbar in IE. +*/ +textarea { + overflow: auto; } + +/** +* 1. Add the correct box sizing in IE 10-. +* 2. Remove the padding in IE 10-. +*/ +[type="checkbox"], +[type="radio"] { + -webkit-box-sizing: border-box; + box-sizing: border-box; + /* 1 */ + padding: 0; + /* 2 */ } + +/** +* Correct the cursor style of increment and decrement buttons in Chrome. +*/ +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; } + +/** +* 1. Correct the odd appearance in Chrome and Safari. +* 2. Correct the outline style in Safari. +*/ +[type="search"] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ } + +/** +* Remove the inner padding and cancel buttons in Chrome and Safari on macOS. +*/ +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; } + +/** +* 1. Correct the inability to style clickable types in iOS and Safari. +* 2. Change font properties to `inherit` in Safari. +*/ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + +/* Interactive + ========================================================================== */ +/* +* Add the correct display in IE 9-. +* 1. Add the correct display in Edge, IE, and Firefox. +*/ +details, +menu { + display: block; } + +/* +* Add the correct display in all browsers. +*/ +summary { + display: list-item; } + +/* Scripting + ========================================================================== */ +/** +* Add the correct display in IE 9-. +*/ +canvas { + display: inline-block; } + +/** +* Add the correct display in IE. +*/ +template { + display: none; } + +/* Hidden + ========================================================================== */ +/** +* Add the correct display in IE 10-. +*/ +[hidden] { + display: none; } + +*, +*:before, +*:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +ul, +ol { + list-style: none; + margin: 0; + padding: 0; } + +li { + margin-left: 0; } + +hr { + border: 0 solid #DCDEE3; + border-top-width: 1px; } + +a { + text-decoration: none; } + a:link { + color: #5584FF; } + a:visited { + color: #5584FF; } + a:hover { + color: #3E71F7; } + a:active { + text-decoration: underline; + color: #3E71F7; } + +@font-face { + font-family: "Roboto"; + src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-thin.eot"); + src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-thin.eot?#iefix") format("embedded-opentype"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-thin.woff2") format("woff2"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-thin.woff") format("woff"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-thin.ttf") format("truetype"); + font-weight: 200; } + +@font-face { + font-family: "Roboto"; + src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-light.eot"); + src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-light.eot?#iefix") format("embedded-opentype"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-light.woff2") format("woff2"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-light.woff") format("woff"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-light.ttf") format("truetype"); + font-weight: 300; } + +@font-face { + font-family: "Roboto"; + src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-regular.eot"); + src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-regular.eot?#iefix") format("embedded-opentype"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-regular.woff2") format("woff2"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-regular.woff") format("woff"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-regular.ttf") format("truetype"); + font-weight: 400; } + +@font-face { + font-family: "Roboto"; + src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-medium.eot"); + src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-medium.eot?#iefix") format("embedded-opentype"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-medium.woff2") format("woff2"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-medium.woff") format("woff"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-medium.ttf") format("truetype"); + font-weight: 500; } + +@font-face { + font-family: "Roboto"; + src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-bold.eot"); + src: url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-bold.eot?#iefix") format("embedded-opentype"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-bold.woff2") format("woff2"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-bold.woff") format("woff"), url("//i.alicdn.com/artascope-font/20160419204543/font/roboto-bold.ttf") format("truetype"); + font-weight: 700; } + +html { + font-size: 100%; } + +body { + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; + color: #333333; } + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; } + +h1 a, +h2 a, +h3 a, +h4 a, +h5 a, +h6 a { + font-weight: inherit; } + +h1 { + margin-bottom: 12px; + font-size: 24px; + font-weight: 500; + line-height: 36px; } + +h2 { + margin-bottom: 10px; + font-size: 20px; + font-weight: 500; + line-height: 30px; } + +h3 { + margin-bottom: 8px; + font-size: 16px; + font-weight: normal; + line-height: 24px; } + +h4 { + margin-bottom: 8px; + font-size: 16px; + font-weight: normal; + line-height: 24px; } + +h5 { + margin-bottom: 6px; + font-size: 14px; + font-weight: normal; + line-height: 24px; } + +h6 { + margin-bottom: 7px; + font-size: 12px; + font-weight: 500; + line-height: 20px; } + +p { + margin-bottom: 6px; + font-size: 12px; + font-weight: normal; + line-height: 20px; } + +strong { + font-weight: 500; } + +small { + font-size: 75%; } + +.next-sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; + margin: -1px; } + +/* stylelint-disable-next-line */ +@-webkit-keyframes fadeIn { + 0% { + opacity: 0; } + 100% { + opacity: 1; } } + +@keyframes fadeIn { + 0% { + opacity: 0; } + 100% { + opacity: 1; } } + +@-webkit-keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-100px); + -ms-transform: translateY(-100px); + transform: translateY(-100px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } } + +@keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-100px); + -ms-transform: translateY(-100px); + transform: translateY(-100px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } } + +@-webkit-keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-20px); + -ms-transform: translateX(-20px); + transform: translateX(-20px); } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } } + +@keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-20px); + -ms-transform: translateX(-20px); + transform: translateX(-20px); } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } } + +@-webkit-keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(20px); + -ms-transform: translateX(20px); + transform: translateX(20px); } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } } + +@keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(20px); + -ms-transform: translateX(20px); + transform: translateX(20px); } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } } + +@-webkit-keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } } + +@keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } } + +@-webkit-keyframes fadeOut { + 0% { + opacity: 1; } + 100% { + opacity: 0; } } + +@keyframes fadeOut { + 0% { + opacity: 1; } + 100% { + opacity: 0; } } + +@-webkit-keyframes fadeOutDown { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } + 100% { + opacity: 0; + -webkit-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); } } + +@keyframes fadeOutDown { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } + 100% { + opacity: 0; + -webkit-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); } } + +@-webkit-keyframes fadeOutLeft { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } + 100% { + opacity: 0; + -webkit-transform: translateX(-20px); + -ms-transform: translateX(-20px); + transform: translateX(-20px); } } + +@keyframes fadeOutLeft { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } + 100% { + opacity: 0; + -webkit-transform: translateX(-20px); + -ms-transform: translateX(-20px); + transform: translateX(-20px); } } + +@-webkit-keyframes fadeOutRight { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } + 100% { + opacity: 0; + -webkit-transform: translateX(20px); + -ms-transform: translateX(20px); + transform: translateX(20px); } } + +@keyframes fadeOutRight { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } + 100% { + opacity: 0; + -webkit-transform: translateX(20px); + -ms-transform: translateX(20px); + transform: translateX(20px); } } + +@-webkit-keyframes fadeOutUp { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } + 100% { + opacity: 0; + -webkit-transform: translateY(-100px); + -ms-transform: translateY(-100px); + transform: translateY(-100px); } } + +@keyframes fadeOutUp { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } + 100% { + opacity: 0; + -webkit-transform: translateY(-100px); + -ms-transform: translateY(-100px); + transform: translateY(-100px); } } + +@-webkit-keyframes zoomIn { + 0% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + -ms-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } + 50% { + opacity: 1; } } + +@keyframes zoomIn { + 0% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + -ms-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } + 50% { + opacity: 1; } } + +@-webkit-keyframes zoomOut { + 0% { + opacity: 1; } + 50% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + -ms-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } + 100% { + opacity: 0; } } + +@keyframes zoomOut { + 0% { + opacity: 1; } + 50% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + -ms-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } + 100% { + opacity: 0; } } + +@-webkit-keyframes expandInDown { + 0% { + opacity: 0; + -webkit-transform: scaleY(0.6); + -ms-transform: scaleY(0.6); + transform: scaleY(0.6); + -webkit-transform-origin: left top 0; + -ms-transform-origin: left top 0; + transform-origin: left top 0; } + 100% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: left top 0; + -ms-transform-origin: left top 0; + transform-origin: left top 0; } } + +@keyframes expandInDown { + 0% { + opacity: 0; + -webkit-transform: scaleY(0.6); + -ms-transform: scaleY(0.6); + transform: scaleY(0.6); + -webkit-transform-origin: left top 0; + -ms-transform-origin: left top 0; + transform-origin: left top 0; } + 100% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: left top 0; + -ms-transform-origin: left top 0; + transform-origin: left top 0; } } + +@-webkit-keyframes expandInUp { + 0% { + opacity: 0; + -webkit-transform: scaleY(0.6); + -ms-transform: scaleY(0.6); + transform: scaleY(0.6); + -webkit-transform-origin: left bottom 0; + -ms-transform-origin: left bottom 0; + transform-origin: left bottom 0; } + 100% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: left bottom 0; + -ms-transform-origin: left bottom 0; + transform-origin: left bottom 0; } } + +@keyframes expandInUp { + 0% { + opacity: 0; + -webkit-transform: scaleY(0.6); + -ms-transform: scaleY(0.6); + transform: scaleY(0.6); + -webkit-transform-origin: left bottom 0; + -ms-transform-origin: left bottom 0; + transform-origin: left bottom 0; } + 100% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: left bottom 0; + -ms-transform-origin: left bottom 0; + transform-origin: left bottom 0; } } + +@-webkit-keyframes expandInWithFade { + 0% { + opacity: 0; } + 40% { + opacity: .1; } + 50% { + opacity: .9; } + 100% { + opacity: 1; } } + +@keyframes expandInWithFade { + 0% { + opacity: 0; } + 40% { + opacity: .1; } + 50% { + opacity: .9; } + 100% { + opacity: 1; } } + +@-webkit-keyframes expandOutUp { + 0% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: left top 0; + -ms-transform-origin: left top 0; + transform-origin: left top 0; } + 100% { + opacity: 0; + -webkit-transform: scaleY(0.6); + -ms-transform: scaleY(0.6); + transform: scaleY(0.6); + -webkit-transform-origin: left top 0; + -ms-transform-origin: left top 0; + transform-origin: left top 0; } } + +@keyframes expandOutUp { + 0% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: left top 0; + -ms-transform-origin: left top 0; + transform-origin: left top 0; } + 100% { + opacity: 0; + -webkit-transform: scaleY(0.6); + -ms-transform: scaleY(0.6); + transform: scaleY(0.6); + -webkit-transform-origin: left top 0; + -ms-transform-origin: left top 0; + transform-origin: left top 0; } } + +@-webkit-keyframes expandOutDown { + 0% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: left bottom 0; + -ms-transform-origin: left bottom 0; + transform-origin: left bottom 0; } + 100% { + opacity: 0; + -webkit-transform: scaleY(0.6); + -ms-transform: scaleY(0.6); + transform: scaleY(0.6); + -webkit-transform-origin: left bottom 0; + -ms-transform-origin: left bottom 0; + transform-origin: left bottom 0; } } + +@keyframes expandOutDown { + 0% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: left bottom 0; + -ms-transform-origin: left bottom 0; + transform-origin: left bottom 0; } + 100% { + opacity: 0; + -webkit-transform: scaleY(0.6); + -ms-transform: scaleY(0.6); + transform: scaleY(0.6); + -webkit-transform-origin: left bottom 0; + -ms-transform-origin: left bottom 0; + transform-origin: left bottom 0; } } + +@-webkit-keyframes expandOutWithFade { + 0% { + opacity: 1; } + 70% { + opacity: 0; } + 100% { + opacity: 0; } } + +@keyframes expandOutWithFade { + 0% { + opacity: 1; } + 70% { + opacity: 0; } + 100% { + opacity: 0; } } + +@-webkit-keyframes pulse { + from { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); } + 20% { + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); } + to { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); } } + +@keyframes pulse { + from { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); } + 20% { + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); } + to { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); } } + +.fadeIn { + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeInDown { + -webkit-animation-name: fadeInDown; + animation-name: fadeInDown; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeInLeft { + -webkit-animation-name: fadeInLeft; + animation-name: fadeInLeft; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeInRight { + -webkit-animation-name: fadeInRight; + animation-name: fadeInRight; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeInUp { + -webkit-animation-name: fadeInUp; + animation-name: fadeInUp; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeOut { + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeOutDown { + -webkit-animation-name: fadeOutDown; + animation-name: fadeOutDown; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeOutLeft { + -webkit-animation-name: fadeOutLeft; + animation-name: fadeOutLeft; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeOutRight { + -webkit-animation-name: fadeOutRight; + animation-name: fadeOutRight; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeOutUp { + -webkit-animation-name: fadeOutUp; + animation-name: fadeOutUp; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.2s; + animation-duration: 0.2s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.zoomIn { + -webkit-animation-name: zoomIn; + animation-name: zoomIn; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.zoomOut { + -webkit-animation-name: zoomOut; + animation-name: zoomOut; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.expandInDown { + -webkit-animation-name: expandInDown; + animation-name: expandInDown; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.expandOutUp { + -webkit-animation-name: expandOutUp; + animation-name: expandOutUp; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.15s; + animation-duration: 0.15s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.expandInUp { + -webkit-animation-name: expandInUp; + animation-name: expandInUp; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.expandOutDown { + -webkit-animation-name: expandOutDown; + animation-name: expandOutDown; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.15s; + animation-duration: 0.15s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.pulse { + -webkit-animation-name: pulse; + animation-name: pulse; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.expand-enter { + overflow: hidden; } + +.expand-enter-active { + -webkit-transition: all .3s ease-out; + transition: all .3s ease-out; } + .expand-enter-active > * { + -webkit-animation-name: expandInWithFade; + animation-name: expandInWithFade; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.2s; + animation-duration: 0.2s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: "forwards"; + animation-fill-mode: "forwards"; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.expand-leave { + overflow: hidden; } + +.expand-leave-active { + -webkit-transition: all .2s ease-out; + transition: all .2s ease-out; } + .expand-leave-active > * { + -webkit-animation-name: expandOutWithFade; + animation-name: expandOutWithFade; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.2s; + animation-duration: 0.2s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: "forwards"; + animation-fill-mode: "forwards"; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.next-badge { + -webkit-box-sizing: border-box; + box-sizing: border-box; + /* @include global-font; */ + position: relative; + display: inline-block; + vertical-align: middle; + line-height: 1; } + .next-badge *, + .next-badge *:before, + .next-badge *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-badge .next-badge-count { + color: #FFFFFF; + background: #FF3000; + text-align: center; + white-space: nowrap; + border-radius: 8px; + position: absolute; + width: auto; + height: 16px; + min-width: 8px; + padding: 0 4px 0 4px; + font-size: 12px; + line-height: 16px; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + top: -.5em; } + .next-badge .next-badge-count a, + .next-badge .next-badge-count a:hover { + color: #FFFFFF; } + .next-badge .next-badge-dot { + color: #FFFFFF; + background: #FF3000; + text-align: center; + white-space: nowrap; + border-radius: 8px; + position: absolute; + width: 8px; + height: 8px; + min-width: 8px; + padding: 0; + font-size: 1px; + line-height: 1; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + top: -.5em; } + .next-badge .next-badge-dot a, + .next-badge .next-badge-dot a:hover { + color: #FFFFFF; } + .next-badge .next-badge-custom { + line-height: 1.166667; + white-space: nowrap; + font-size: 12px; + padding-left: 4px; + padding-right: 4px; + border-radius: 3px; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); } + .next-badge .next-badge-custom > * { + line-height: 1; } + .next-badge .next-badge-custom > i:before, + .next-badge .next-badge-custom > .next-icon:before { + font-size: inherit; + width: auto; + vertical-align: top; } + .next-badge .next-badge-scroll-number { + position: absolute; + top: -4px; + z-index: 10; + overflow: hidden; + -webkit-transform-origin: left center; + -ms-transform-origin: left center; + transform-origin: left center; } + .next-badge-scroll-number-only { + position: relative; + display: inline-block; + transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + min-width: 8px; } + .next-badge-scroll-number-only span { + display: block; + height: 16px; + line-height: 16px; + font-size: 12px; } + .next-badge-not-a-wrapper .next-badge-count, + .next-badge-not-a-wrapper .next-badge-custom { + position: relative; + display: block; + top: auto; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } + .next-badge-not-a-wrapper .next-badge-dot { + position: relative; + display: block; + top: auto; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } + .next-badge-list-wrapper { + margin-left: 0; } + .next-badge-list-wrapper li { + margin-bottom: 0; + list-style: none; } + +.next-badge[dir="rtl"] .next-badge-custom { + padding-right: 4px; + padding-left: 4px; } + +.next-badge[dir="rtl"] .next-badge-scroll-number { + left: 0; + -webkit-transform-origin: right center; + -ms-transform-origin: right center; + transform-origin: right center; } + +.next-overlay-wrapper .next-overlay-inner { + z-index: 1001; } + +.next-overlay-wrapper .next-overlay-backdrop { + position: fixed; + z-index: 1001; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #000000; + -webkit-transition: opacity .3s; + transition: opacity .3s; + opacity: 0; } + +.next-overlay-wrapper.opened .next-overlay-backdrop { + opacity: 0.2; } + +.next-icon[dir="rtl"]::before { + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); } + +@font-face { + font-family: NextIcon; + src: url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot"); + src: url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"), url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"), url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg"); } + +.next-icon { + display: inline-block; + font-family: NextIcon; + font-style: normal; + font-weight: normal; + text-transform: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } + .next-icon:before { + display: inline-block; + vertical-align: middle; + text-align: center; } + .next-icon-smile:before { + content: "\E65F"; } + .next-icon-cry:before { + content: "\E65D"; } + .next-icon-success:before { + content: "\E60A"; } + .next-icon-warning:before { + content: "\E60B"; } + .next-icon-prompt:before { + content: "\E60C"; } + .next-icon-error:before { + content: "\E60D"; } + .next-icon-help:before { + content: "\E673"; } + .next-icon-clock:before { + content: "\E621"; } + .next-icon-success-filling:before { + content: "\E63A"; } + .next-icon-delete-filling:before { + content: "\E623"; } + .next-icon-favorites-filling:before { + content: "\E60E"; } + .next-icon-add:before { + content: "\E655"; } + .next-icon-minus:before { + content: "\E601"; } + .next-icon-arrow-up:before { + content: "\E625"; } + .next-icon-arrow-down:before { + content: "\E63D"; } + .next-icon-arrow-left:before { + content: "\E61D"; } + .next-icon-arrow-right:before { + content: "\E619"; } + .next-icon-arrow-double-left:before { + content: "\E659"; } + .next-icon-arrow-double-right:before { + content: "\E65E"; } + .next-icon-switch:before { + content: "\E6B3"; } + .next-icon-sorting:before { + content: "\E634"; } + .next-icon-descending:before { + content: "\E61F"; } + .next-icon-ascending:before { + content: "\E61E"; } + .next-icon-select:before { + content: "\E632"; } + .next-icon-semi-select:before { + content: "\E633"; } + .next-icon-search:before { + content: "\E656"; } + .next-icon-close:before { + content: "\E626"; } + .next-icon-ellipsis:before { + content: "\E654"; } + .next-icon-picture:before { + content: "\E631"; } + .next-icon-calendar:before { + content: "\E607"; } + .next-icon-ashbin:before { + content: "\E639"; } + .next-icon-upload:before { + content: "\E7EE"; } + .next-icon-download:before { + content: "\E628"; } + .next-icon-set:before { + content: "\E683"; } + .next-icon-edit:before { + content: "\E63B"; } + .next-icon-refresh:before { + content: "\E677"; } + .next-icon-filter:before { + content: "\E627"; } + .next-icon-attachment:before { + content: "\E665"; } + .next-icon-account:before { + content: "\E608"; } + .next-icon-email:before { + content: "\E605"; } + .next-icon-atm:before { + content: "\E606"; } + .next-icon-loading:before { + content: "\E646"; + -webkit-animation: loadingCircle 1s infinite linear; + animation: loadingCircle 1s infinite linear; } + +@-webkit-keyframes loadingCircle { + 0% { + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + 100% { + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +@keyframes loadingCircle { + 0% { + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + 100% { + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +.next-icon.next-xxs:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + +@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-icon.next-xxs { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-icon.next-xxs:before { + width: 16px; + font-size: 16px; } } + +.next-icon.next-xs:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-icon.next-small:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + +.next-icon.next-medium:before { + width: 20px; + font-size: 20px; + line-height: inherit; } + +.next-icon.next-large:before { + width: 24px; + font-size: 24px; + line-height: inherit; } + +.next-icon.next-xl:before { + width: 32px; + font-size: 32px; + line-height: inherit; } + +.next-icon.next-xxl:before { + width: 48px; + font-size: 48px; + line-height: inherit; } + +.next-icon.next-xxxl:before { + width: 64px; + font-size: 64px; + line-height: inherit; } + +.next-icon.next-inherit:before { + width: inherit; + font-size: inherit; + line-height: inherit; } + +.next-balloon { + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: absolute; + max-width: 300px; + border-style: solid; + border-radius: 3px; + word-wrap: break-word; + z-index: 0; + /* size */ + /* 带关闭按钮的右侧padding变大 */ } + .next-balloon *, + .next-balloon *:before, + .next-balloon *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-balloon:focus, + .next-balloon *:focus { + outline: 0; } + .next-balloon-primary { + color: #333333; + border-color: #4494F9; + background-color: #E3F2FD; + -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12); + border-width: 1px; } + .next-balloon-primary .next-balloon-close { + position: absolute; + top: 12px; + right: 12px; + font-size: 12px; + color: #999999; } + .next-balloon-primary .next-balloon-close .next-icon { + width: 12px; + height: 12px; + line-height: 12px; } + .next-balloon-primary .next-balloon-close .next-icon:before { + width: 12px; + height: 12px; + font-size: 12px; + line-height: 12px; } + .next-balloon-primary .next-balloon-close :hover { + color: #333333; } + .next-balloon-primary:after { + position: absolute; + width: 12px; + height: 12px; + content: ' '; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-box-sizing: content-box !important; + box-sizing: content-box !important; + border: 1px solid #4494F9; + background-color: #E3F2FD; + z-index: -1; } + .next-balloon-primary.next-balloon-top:after { + top: -7px; + left: calc(50% + -7px); + border-right: none; + border-bottom: none; + -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-right:after { + top: calc(50% + -7px); + right: -7px; + border-left: none; + border-bottom: none; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-bottom:after { + bottom: -7px; + left: calc(50% + -7px); + border-top: none; + border-left: none; + -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-left:after { + top: calc(50% + -7px); + left: -7px; + border-top: none; + border-right: none; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-left-top:after { + top: 12px; + left: -7px; + border-top: none; + border-right: none; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-left-bottom:after { + bottom: 12px; + left: -7px; + border-top: none; + border-right: none; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-right-top:after { + top: 12px; + right: -7px; + border-bottom: none; + border-left: none; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-right-bottom:after { + right: -7px; + bottom: 12px; + border-bottom: none; + border-left: none; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-top-left:after { + top: -7px; + left: 12px; + border-right: none; + border-bottom: none; + -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-top-right:after { + top: -7px; + right: 12px; + border-right: none; + border-bottom: none; + -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-bottom-left:after { + bottom: -7px; + left: 12px; + border-top: none; + border-left: none; + -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-bottom-right:after { + right: 12px; + bottom: -7px; + border-top: none; + border-left: none; + -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal { + color: #333333; + border-color: #DCDEE3; + background-color: #FFFFFF; + -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + border-width: 1px; } + .next-balloon-normal .next-balloon-close { + position: absolute; + top: 12px; + right: 12px; + font-size: 12px; + color: #999999; } + .next-balloon-normal .next-balloon-close .next-icon { + width: 12px; + height: 12px; + line-height: 12px; } + .next-balloon-normal .next-balloon-close .next-icon:before { + width: 12px; + height: 12px; + font-size: 12px; + line-height: 12px; } + .next-balloon-normal .next-balloon-close :hover { + color: #666666; } + .next-balloon-normal:after { + position: absolute; + width: 12px; + height: 12px; + content: ' '; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-box-sizing: content-box !important; + box-sizing: content-box !important; + border: 1px solid #DCDEE3; + background-color: #FFFFFF; + z-index: -1; } + .next-balloon-normal.next-balloon-top:after { + top: -7px; + left: calc(50% + -7px); + border-right: none; + border-bottom: none; + -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-right:after { + top: calc(50% + -7px); + right: -7px; + border-left: none; + border-bottom: none; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-bottom:after { + bottom: -7px; + left: calc(50% + -7px); + border-top: none; + border-left: none; + -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-left:after { + top: calc(50% + -7px); + left: -7px; + border-top: none; + border-right: none; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-left-top:after { + top: 12px; + left: -7px; + border-top: none; + border-right: none; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-left-bottom:after { + bottom: 12px; + left: -7px; + border-top: none; + border-right: none; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-right-top:after { + top: 12px; + right: -7px; + border-bottom: none; + border-left: none; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-right-bottom:after { + right: -7px; + bottom: 12px; + border-bottom: none; + border-left: none; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-top-left:after { + top: -7px; + left: 12px; + border-right: none; + border-bottom: none; + -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-top-right:after { + top: -7px; + right: 12px; + border-right: none; + border-bottom: none; + -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-bottom-left:after { + bottom: -7px; + left: 12px; + border-top: none; + border-left: none; + -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-bottom-right:after { + right: 12px; + bottom: -7px; + border-top: none; + border-left: none; + -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon.visible { + display: block; } + .next-balloon.hidden { + display: none; } + .next-balloon-medium { + padding: 16px 16px 16px 16px; } + .next-balloon-closable { + padding: 16px 40px 16px 16px; } + +.next-balloon-tooltip { + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: absolute; + max-width: 300px; + border-style: solid; + border-radius: 3px; + font-size: 12px; + z-index: 0; + color: #333333; + border-color: #DCDEE3; + background-color: #F2F3F7; + -webkit-box-shadow: none; + box-shadow: none; + border-width: 1px; + /* size */ } + .next-balloon-tooltip *, + .next-balloon-tooltip *:before, + .next-balloon-tooltip *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-balloon-tooltip:after { + position: absolute; + width: 12px; + height: 12px; + content: ' '; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-box-sizing: content-box !important; + box-sizing: content-box !important; + border: 1px solid #DCDEE3; + background-color: #F2F3F7; + z-index: -1; } + .next-balloon-tooltip-top:after { + top: -7px; + left: calc(50% + -7px); + border-right: none; + border-bottom: none; } + .next-balloon-tooltip-right:after { + top: calc(50% + -7px); + right: -7px; + border-left: none; + border-bottom: none; } + .next-balloon-tooltip-bottom:after { + bottom: -7px; + left: calc(50% + -7px); + border-top: none; + border-left: none; } + .next-balloon-tooltip-left:after { + top: calc(50% + -7px); + left: -7px; + border-top: none; + border-right: none; } + .next-balloon-tooltip-left-top:after { + top: 12px; + left: -7px; + border-top: none; + border-right: none; } + .next-balloon-tooltip-left-bottom:after { + bottom: 12px; + left: -7px; + border-top: none; + border-right: none; } + .next-balloon-tooltip-right-top:after { + top: 12px; + right: -7px; + border-bottom: none; + border-left: none; } + .next-balloon-tooltip-right-bottom:after { + right: -7px; + bottom: 12px; + border-bottom: none; + border-left: none; } + .next-balloon-tooltip-top-left:after { + top: -7px; + left: 12px; + border-right: none; + border-bottom: none; } + .next-balloon-tooltip-top-right:after { + top: -7px; + right: 12px; + border-right: none; + border-bottom: none; } + .next-balloon-tooltip-bottom-left:after { + bottom: -7px; + left: 12px; + border-top: none; + border-left: none; } + .next-balloon-tooltip-bottom-right:after { + right: 12px; + bottom: -7px; + border-top: none; + border-left: none; } + .next-balloon-tooltip.visible { + display: block; } + .next-balloon-tooltip.hidden { + display: none; } + .next-balloon-tooltip-medium { + padding: 8px 8px 8px 8px; } + +.next-balloon[dir="rtl"] { + /* 带关闭按钮的右侧padding变大 */ } + .next-balloon[dir="rtl"].next-balloon-primary .next-balloon-close { + left: 12px; + right: auto; } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-right:after { + left: -7px; + right: auto; + border-right: none; + border-top: none; + border-left: inherit; + border-bottom: inherit; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-left:after { + right: -7px; + left: auto; + border-left: none; + border-bottom: none; + border-right: inherit; + border-top: inherit; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-left-top:after { + right: -7px; + left: auto; + border-left: none; + border-bottom: none; + border-top: inherit; + border-right: inherit; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-left-bottom:after { + right: -7px; + left: auto; + border-left: none; + border-bottom: none; + border-top: inherit; + border-right: inherit; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-right-top:after { + left: -7px; + right: auto; + border-right: none; + border-top: none; + border-bottom: inherit; + border-left: inherit; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-right-bottom:after { + left: -7px; + right: auto; + border-right: none; + border-top: none; + border-bottom: inherit; + border-left: inherit; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-top-left:after { + right: 12px; + left: auto; } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-top-right:after { + right: auto; + left: 12px; } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-bottom-left:after { + right: 12px; + left: auto; } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-bottom-right:after { + left: 12px; + right: auto; } + .next-balloon[dir="rtl"].next-balloon-normal .next-balloon-close { + left: 12px; + right: auto; } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-right:after { + left: -7px; + right: auto; + border-right: none; + border-top: none; + border-left: inherit; + border-bottom: inherit; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-left:after { + right: -7px; + left: auto; + border-left: none; + border-bottom: none; + border-right: inherit; + border-top: inherit; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-left-top:after { + right: -7px; + left: auto; + border-left: none; + border-bottom: none; + border-top: inherit; + border-right: inherit; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-left-bottom:after { + right: -7px; + left: auto; + border-left: none; + border-bottom: none; + border-top: inherit; + border-right: inherit; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-right-top:after { + left: -7px; + right: auto; + border-right: none; + border-top: none; + border-bottom: inherit; + border-left: inherit; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-right-bottom:after { + left: -7px; + right: auto; + border-right: none; + border-top: none; + border-bottom: inherit; + border-left: inherit; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-top-left:after { + right: 12px; + left: auto; } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-top-right:after { + right: auto; + left: 12px; } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-bottom-left:after { + right: 12px; + left: auto; } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-bottom-right:after { + left: 12px; + right: auto; } + .next-balloon[dir="rtl"].next-balloon-closable { + padding: 16px 16px 16px 40px; } + +.next-balloon-tooltip[dir="rtl"] { + /* size */ } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-right:after { + left: -7px; + right: auto; + border-top: none; + border-right: none; + border-left: inherit; + border-bottom: inherit; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-left:after { + right: -7px; + left: auto; + border-top: inherit; + border-right: inherit; + border-left: none; + border-bottom: none; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-left-top:after { + right: -7px; + left: auto; + border-top: inherit; + border-right: inherit; + border-left: none; + border-bottom: none; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-left-bottom:after { + right: -7px; + left: auto; + border-top: inherit; + border-right: inherit; + border-left: none; + border-bottom: none; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-right-top:after { + left: -7px; + right: auto; + border-top: none; + border-right: none; + border-left: inherit; + border-bottom: inherit; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-right-bottom:after { + left: -7px; + right: auto; + border-top: none; + border-right: none; + border-left: inherit; + border-bottom: inherit; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-top-left:after { + right: 12px; + left: auto; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-top-right:after { + left: 12px; + right: auto; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-bottom-left:after { + right: 12px; + left: auto; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-bottom-right:after { + left: 12px; + right: auto; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-medium { + padding: 8px 8px 8px 8px; } + +/* put your code here */ +.next-breadcrumb { + display: block; + margin: 0; + padding: 0; + height: 16px; + line-height: 16px; } + .next-breadcrumb .next-breadcrumb-item { + display: inline-block; } + .next-breadcrumb .next-breadcrumb-item .next-breadcrumb-text { + display: inline-block; + text-decoration: none; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + -webkit-transition: all .2s ease-out; + transition: all .2s ease-out; } + .next-breadcrumb .next-breadcrumb-item .next-breadcrumb-text > b { + font-weight: normal; } + .next-breadcrumb .next-breadcrumb-item .next-breadcrumb-separator { + display: inline-block; + vertical-align: top; } + .next-breadcrumb .next-breadcrumb-text { + height: 16px; + min-width: 16px; + font-size: 12px; + line-height: 16px; } + .next-breadcrumb .next-breadcrumb-separator { + height: 16px; + margin: 0 8px; + font-size: 8px; + line-height: 16px; } + .next-breadcrumb .next-breadcrumb-separator .next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-breadcrumb .next-breadcrumb-separator .next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-breadcrumb .next-breadcrumb-separator .next-icon:before { + width: 16px; + font-size: 16px; } } + .next-breadcrumb .next-breadcrumb-text-ellipsis { + font-size: 12px; } + .next-breadcrumb .next-breadcrumb-text { + color: #666666; } + .next-breadcrumb .next-breadcrumb-text > b { + color: #5584FF; } + .next-breadcrumb .next-breadcrumb-text > a { + color: #666666; + text-decoration: none; + text-align: center; } + .next-breadcrumb .next-breadcrumb-text.activated { + color: #333333; + font-weight: normal; } + .next-breadcrumb .next-breadcrumb-text.activated > a { + color: #333333; + font-weight: normal; } + .next-breadcrumb .next-breadcrumb-text-ellipsis { + color: #666666; + cursor: default; } + .next-breadcrumb .next-breadcrumb-separator { + color: #A0A2AD; } + .next-breadcrumb .next-breadcrumb-text:not(.next-breadcrumb-text-ellipsis):hover > a { + color: #5584FF; } + .next-breadcrumb a.next-breadcrumb-text.activated:hover > a { + color: #5584FF; } + .next-breadcrumb a.next-breadcrumb-text:not(.next-breadcrumb-text-ellipsis):hover { + color: #5584FF; } + .next-breadcrumb a.next-breadcrumb-text:not(.next-breadcrumb-text-ellipsis):hover > b { + color: #5584FF; } + .next-breadcrumb a.next-breadcrumb-text.activated:hover { + color: #5584FF; + font-weight: normal; } + +.next-btn { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-btn *, + .next-btn *:before, + .next-btn *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-btn::-moz-focus-inner { + border: 0; + padding: 0; } + .next-btn, .next-btn:active, .next-btn:focus, .next-btn:hover { + outline: 0; } + +@keyframes loadingCircle { + 0% { + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + 100% { + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +.next-btn { + /* 尺寸维度 */ + /* ---------------------------------------- */ + /* 普通按钮 */ + /* 普通态禁用样式 */ + /* 警告按钮 */ + /* 文本按钮 */ + /* loading */ + /* ---------------------------------------- */ + /* 幽灵按钮 */ + /* 组合 */ + /* ---------------------------------------- */ } + .next-btn { + position: relative; + display: inline-block; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: none; + text-align: center; + text-transform: none; + white-space: nowrap; + vertical-align: middle; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: all .3s ease-out; + transition: all .3s ease-out; + cursor: pointer; } + .next-btn:after { + text-align: center; + position: absolute; + opacity: 0; + visibility: hidden; + -webkit-transition: opacity .5s ease; + transition: opacity .5s ease; } + .next-btn .next-icon.next-xs:before { + vertical-align: baseline; } + .next-btn.hover, .next-btn:hover { + -webkit-box-shadow: none; + box-shadow: none; } + .next-btn.next-small { + border-radius: 3px; + padding: 0 8px; + height: 20px; + line-height: 18px; + font-size: 12px; + border-width: 1px; } + .next-btn.next-small > .next-btn-icon.next-icon-first { + margin-left: 0; + margin-right: 4px; } + .next-btn.next-small > .next-btn-icon.next-icon-first:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-small > .next-btn-icon.next-icon-last { + margin-left: 4px; + margin-right: 0; } + .next-btn.next-small > .next-btn-icon.next-icon-last:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-small > .next-btn-icon.next-icon-alone:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-small.next-btn-loading { + padding-left: 24px; } + .next-btn.next-small.next-btn-loading:after { + width: 12px; + height: 12px; + font-size: 12px; + line-height: 12px; + left: 8px; + top: 50%; + text-align: center; + margin-top: -6px; + margin-right: 4px; } + .next-btn.next-small.next-btn-loading > .next-icon { + display: none; } + .next-btn.next-medium { + border-radius: 3px; + padding: 0 12px; + height: 28px; + line-height: 26px; + font-size: 12px; + border-width: 1px; } + .next-btn.next-medium > .next-btn-icon.next-icon-first { + margin-left: 0; + margin-right: 4px; } + .next-btn.next-medium > .next-btn-icon.next-icon-first:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-medium > .next-btn-icon.next-icon-last { + margin-left: 4px; + margin-right: 0; } + .next-btn.next-medium > .next-btn-icon.next-icon-last:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-medium > .next-btn-icon.next-icon-alone:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-medium.next-btn-loading { + padding-left: 28px; } + .next-btn.next-medium.next-btn-loading:after { + width: 12px; + height: 12px; + font-size: 12px; + line-height: 12px; + left: 12px; + top: 50%; + text-align: center; + margin-top: -6px; + margin-right: 4px; } + .next-btn.next-medium.next-btn-loading > .next-icon { + display: none; } + .next-btn.next-large { + border-radius: 3px; + padding: 0 16px; + height: 40px; + line-height: 38px; + font-size: 16px; + border-width: 1px; } + .next-btn.next-large > .next-btn-icon.next-icon-first { + margin-left: 0; + margin-right: 4px; } + .next-btn.next-large > .next-btn-icon.next-icon-first:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn.next-large > .next-btn-icon.next-icon-last { + margin-left: 4px; + margin-right: 0; } + .next-btn.next-large > .next-btn-icon.next-icon-last:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn.next-large > .next-btn-icon.next-icon-alone:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn.next-large.next-btn-loading { + padding-left: 36px; } + .next-btn.next-large.next-btn-loading:after { + width: 16px; + height: 16px; + font-size: 16px; + line-height: 16px; + left: 16px; + top: 50%; + text-align: center; + margin-top: -8px; + margin-right: 4px; } + .next-btn.next-large.next-btn-loading > .next-icon { + display: none; } + .next-btn.next-btn-normal { + border-style: solid; + background-color: #FFFFFF; + border-color: #C4C6CF; } + .next-btn.next-btn-normal, .next-btn.next-btn-normal:link, .next-btn.next-btn-normal:visited, .next-btn.next-btn-normal.visited { + color: #333333; } + .next-btn.next-btn-normal:focus, .next-btn.next-btn-normal:hover, .next-btn.next-btn-normal.hover, .next-btn.next-btn-normal:active, .next-btn.next-btn-normal.active { + color: #333333; + background-color: #F2F3F7; + border-color: #A0A2AD; + text-decoration: none; } + .next-btn.next-btn-primary { + border-style: solid; + background-color: #5584FF; + border-color: transparent; } + .next-btn.next-btn-primary, .next-btn.next-btn-primary:link, .next-btn.next-btn-primary:visited, .next-btn.next-btn-primary.visited { + color: #FFFFFF; } + .next-btn.next-btn-primary:focus, .next-btn.next-btn-primary:hover, .next-btn.next-btn-primary.hover, .next-btn.next-btn-primary:active, .next-btn.next-btn-primary.active { + color: #FFFFFF; + background-color: #3E71F7; + border-color: transparent; + text-decoration: none; } + .next-btn.next-btn-secondary { + border-style: solid; + background-color: #FFFFFF; + border-color: #5584FF; } + .next-btn.next-btn-secondary, .next-btn.next-btn-secondary:link, .next-btn.next-btn-secondary:visited, .next-btn.next-btn-secondary.visited { + color: #5584FF; } + .next-btn.next-btn-secondary:focus, .next-btn.next-btn-secondary:hover, .next-btn.next-btn-secondary.hover, .next-btn.next-btn-secondary:active, .next-btn.next-btn-secondary.active { + color: #FFFFFF; + background-color: #3E71F7; + border-color: #3E71F7; + text-decoration: none; } + .next-btn.disabled, .next-btn[disabled] { + cursor: not-allowed; + background-color: #F7F8FA; + border-color: #E6E7EB; } + .next-btn.disabled, .next-btn.disabled:link, .next-btn.disabled:visited, .next-btn.disabled.visited, .next-btn[disabled], .next-btn[disabled]:link, .next-btn[disabled]:visited, .next-btn[disabled].visited { + color: #CCCCCC; } + .next-btn.disabled:focus, .next-btn.disabled:hover, .next-btn.disabled.hover, .next-btn.disabled:active, .next-btn.disabled.active, .next-btn[disabled]:focus, .next-btn[disabled]:hover, .next-btn[disabled].hover, .next-btn[disabled]:active, .next-btn[disabled].active { + color: #CCCCCC; + background-color: #F7F8FA; + border-color: #E6E7EB; + text-decoration: none; } + .next-btn-warning { + border-style: solid; } + .next-btn-warning.next-btn-primary { + background-color: #FF3000; + border-color: #FF3000; } + .next-btn-warning.next-btn-primary, .next-btn-warning.next-btn-primary:link, .next-btn-warning.next-btn-primary:visited, .next-btn-warning.next-btn-primary.visited { + color: #FFFFFF; } + .next-btn-warning.next-btn-primary:focus, .next-btn-warning.next-btn-primary:hover, .next-btn-warning.next-btn-primary.hover, .next-btn-warning.next-btn-primary:active, .next-btn-warning.next-btn-primary.active { + color: #FFFFFF; + background-color: #E72B00; + border-color: #E72B00; + text-decoration: none; } + .next-btn-warning.next-btn-primary.disabled, .next-btn-warning.next-btn-primary[disabled] { + background-color: #F7F8FA; + border-color: #DCDEE3; } + .next-btn-warning.next-btn-primary.disabled, .next-btn-warning.next-btn-primary.disabled:link, .next-btn-warning.next-btn-primary.disabled:visited, .next-btn-warning.next-btn-primary.disabled.visited, .next-btn-warning.next-btn-primary[disabled], .next-btn-warning.next-btn-primary[disabled]:link, .next-btn-warning.next-btn-primary[disabled]:visited, .next-btn-warning.next-btn-primary[disabled].visited { + color: #CCCCCC; } + .next-btn-warning.next-btn-primary.disabled:focus, .next-btn-warning.next-btn-primary.disabled:hover, .next-btn-warning.next-btn-primary.disabled.hover, .next-btn-warning.next-btn-primary.disabled:active, .next-btn-warning.next-btn-primary.disabled.active, .next-btn-warning.next-btn-primary[disabled]:focus, .next-btn-warning.next-btn-primary[disabled]:hover, .next-btn-warning.next-btn-primary[disabled].hover, .next-btn-warning.next-btn-primary[disabled]:active, .next-btn-warning.next-btn-primary[disabled].active { + color: #CCCCCC; + background-color: #F7F8FA; + border-color: #DCDEE3; + text-decoration: none; } + .next-btn-warning.next-btn-normal { + background-color: #FFFFFF; + border-color: #FF3000; } + .next-btn-warning.next-btn-normal, .next-btn-warning.next-btn-normal:link, .next-btn-warning.next-btn-normal:visited, .next-btn-warning.next-btn-normal.visited { + color: #FF3000; } + .next-btn-warning.next-btn-normal:focus, .next-btn-warning.next-btn-normal:hover, .next-btn-warning.next-btn-normal.hover, .next-btn-warning.next-btn-normal:active, .next-btn-warning.next-btn-normal.active { + color: #FFFFFF; + background-color: #E72B00; + border-color: #E72B00; + text-decoration: none; } + .next-btn-warning.next-btn-normal.disabled, .next-btn-warning.next-btn-normal[disabled] { + background-color: #F7F8FA; + border-color: #E6E7EB; } + .next-btn-warning.next-btn-normal.disabled, .next-btn-warning.next-btn-normal.disabled:link, .next-btn-warning.next-btn-normal.disabled:visited, .next-btn-warning.next-btn-normal.disabled.visited, .next-btn-warning.next-btn-normal[disabled], .next-btn-warning.next-btn-normal[disabled]:link, .next-btn-warning.next-btn-normal[disabled]:visited, .next-btn-warning.next-btn-normal[disabled].visited { + color: #CCCCCC; } + .next-btn-warning.next-btn-normal.disabled:focus, .next-btn-warning.next-btn-normal.disabled:hover, .next-btn-warning.next-btn-normal.disabled.hover, .next-btn-warning.next-btn-normal.disabled:active, .next-btn-warning.next-btn-normal.disabled.active, .next-btn-warning.next-btn-normal[disabled]:focus, .next-btn-warning.next-btn-normal[disabled]:hover, .next-btn-warning.next-btn-normal[disabled].hover, .next-btn-warning.next-btn-normal[disabled]:active, .next-btn-warning.next-btn-normal[disabled].active { + color: #CCCCCC; + background-color: #F7F8FA; + border-color: #E6E7EB; + text-decoration: none; } + .next-btn-text { + -webkit-box-shadow: none; + box-shadow: none; + border-radius: 0; } + .next-btn-text.hover, .next-btn-text:hover { + -webkit-box-shadow: none; + box-shadow: none; } + .next-btn-text.next-btn-primary { + background-color: transparent; + border-color: transparent; } + .next-btn-text.next-btn-primary, .next-btn-text.next-btn-primary:link, .next-btn-text.next-btn-primary:visited, .next-btn-text.next-btn-primary.visited { + color: #5584FF; } + .next-btn-text.next-btn-primary:focus, .next-btn-text.next-btn-primary:hover, .next-btn-text.next-btn-primary.hover, .next-btn-text.next-btn-primary:active, .next-btn-text.next-btn-primary.active { + color: #3E71F7; + background-color: transparent; + border-color: transparent; + text-decoration: none; } + .next-btn-text.next-btn-secondary { + background-color: transparent; + border-color: transparent; } + .next-btn-text.next-btn-secondary, .next-btn-text.next-btn-secondary:link, .next-btn-text.next-btn-secondary:visited, .next-btn-text.next-btn-secondary.visited { + color: #666666; } + .next-btn-text.next-btn-secondary:focus, .next-btn-text.next-btn-secondary:hover, .next-btn-text.next-btn-secondary.hover, .next-btn-text.next-btn-secondary:active, .next-btn-text.next-btn-secondary.active { + color: #5584FF; + background-color: transparent; + border-color: transparent; + text-decoration: none; } + .next-btn-text.next-btn-normal { + background-color: transparent; + border-color: transparent; } + .next-btn-text.next-btn-normal, .next-btn-text.next-btn-normal:link, .next-btn-text.next-btn-normal:visited, .next-btn-text.next-btn-normal.visited { + color: #333333; } + .next-btn-text.next-btn-normal:focus, .next-btn-text.next-btn-normal:hover, .next-btn-text.next-btn-normal.hover, .next-btn-text.next-btn-normal:active, .next-btn-text.next-btn-normal.active { + color: #5584FF; + background-color: transparent; + border-color: transparent; + text-decoration: none; } + .next-btn-text.next-large { + border-radius: 0; + padding: 0 0; + height: 24px; + line-height: 24px; + font-size: 14px; + border-width: 0; } + .next-btn-text.next-large > .next-btn-icon.next-icon-first { + margin-left: 0; + margin-right: 4px; } + .next-btn-text.next-large > .next-btn-icon.next-icon-first:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn-text.next-large > .next-btn-icon.next-icon-last { + margin-left: 4px; + margin-right: 0; } + .next-btn-text.next-large > .next-btn-icon.next-icon-last:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn-text.next-large > .next-btn-icon.next-icon-alone:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn-text.next-large.next-btn-loading { + padding-left: 20px; } + .next-btn-text.next-large.next-btn-loading:after { + width: 16px; + height: 16px; + font-size: 16px; + line-height: 16px; + left: 0; + top: 50%; + text-align: center; + margin-top: -8px; + margin-right: 4px; } + .next-btn-text.next-large.next-btn-loading > .next-icon { + display: none; } + .next-btn-text.next-medium { + border-radius: 0; + padding: 0 0; + height: 20px; + line-height: 20px; + font-size: 12px; + border-width: 0; } + .next-btn-text.next-medium > .next-btn-icon.next-icon-first { + margin-left: 0; + margin-right: 4px; } + .next-btn-text.next-medium > .next-btn-icon.next-icon-first:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text.next-medium > .next-btn-icon.next-icon-last { + margin-left: 4px; + margin-right: 0; } + .next-btn-text.next-medium > .next-btn-icon.next-icon-last:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text.next-medium > .next-btn-icon.next-icon-alone:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text.next-medium.next-btn-loading { + padding-left: 16px; } + .next-btn-text.next-medium.next-btn-loading:after { + width: 12px; + height: 12px; + font-size: 12px; + line-height: 12px; + left: 0; + top: 50%; + text-align: center; + margin-top: -6px; + margin-right: 4px; } + .next-btn-text.next-medium.next-btn-loading > .next-icon { + display: none; } + .next-btn-text.next-small { + border-radius: 0; + padding: 0 0; + height: 16px; + line-height: 16px; + font-size: 12px; + border-width: 0; } + .next-btn-text.next-small > .next-btn-icon.next-icon-first { + margin-left: 0; + margin-right: 4px; } + .next-btn-text.next-small > .next-btn-icon.next-icon-first:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text.next-small > .next-btn-icon.next-icon-last { + margin-left: 4px; + margin-right: 0; } + .next-btn-text.next-small > .next-btn-icon.next-icon-last:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text.next-small > .next-btn-icon.next-icon-alone:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text.next-small.next-btn-loading { + padding-left: 16px; } + .next-btn-text.next-small.next-btn-loading:after { + width: 12px; + height: 12px; + font-size: 12px; + line-height: 12px; + left: 0; + top: 50%; + text-align: center; + margin-top: -6px; + margin-right: 4px; } + .next-btn-text.next-small.next-btn-loading > .next-icon { + display: none; } + .next-btn-text.disabled, .next-btn-text[disabled] { + background-color: transparent; + border-color: transparent; } + .next-btn-text.disabled, .next-btn-text.disabled:link, .next-btn-text.disabled:visited, .next-btn-text.disabled.visited, .next-btn-text[disabled], .next-btn-text[disabled]:link, .next-btn-text[disabled]:visited, .next-btn-text[disabled].visited { + color: #CCCCCC; } + .next-btn-text.disabled:focus, .next-btn-text.disabled:hover, .next-btn-text.disabled.hover, .next-btn-text.disabled:active, .next-btn-text.disabled.active, .next-btn-text[disabled]:focus, .next-btn-text[disabled]:hover, .next-btn-text[disabled].hover, .next-btn-text[disabled]:active, .next-btn-text[disabled].active { + color: #CCCCCC; + background-color: transparent; + border-color: transparent; + text-decoration: none; } + .next-btn-text.next-btn-loading { + background-color: transparent; + border-color: transparent; } + .next-btn-text.next-btn-loading, .next-btn-text.next-btn-loading:link, .next-btn-text.next-btn-loading:visited, .next-btn-text.next-btn-loading.visited { + color: #333333; } + .next-btn-text.next-btn-loading:focus, .next-btn-text.next-btn-loading:hover, .next-btn-text.next-btn-loading.hover, .next-btn-text.next-btn-loading:active, .next-btn-text.next-btn-loading.active { + color: #333333; + background-color: transparent; + border-color: transparent; + text-decoration: none; } + .next-btn-loading { + pointer-events: none; } + .next-btn-loading:after { + font-family: NextIcon; + content: "\E646"; + opacity: 1; + visibility: visible; + -webkit-animation: loadingCircle 2s infinite linear; + animation: loadingCircle 2s infinite linear; } + .next-btn-ghost { + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-btn-ghost.next-btn-dark { + background-color: transparent; + border-color: #FFFFFF; } + .next-btn-ghost.next-btn-dark, .next-btn-ghost.next-btn-dark:link, .next-btn-ghost.next-btn-dark:visited, .next-btn-ghost.next-btn-dark.visited { + color: #FFFFFF; } + .next-btn-ghost.next-btn-dark:focus, .next-btn-ghost.next-btn-dark:hover, .next-btn-ghost.next-btn-dark.hover, .next-btn-ghost.next-btn-dark:active, .next-btn-ghost.next-btn-dark.active { + color: #FFFFFF; + background-color: rgba(255, 255, 255, 0.8); + border-color: #FFFFFF; + text-decoration: none; } + .next-btn-ghost.next-btn-dark.disabled, .next-btn-ghost.next-btn-dark[disabled] { + background-color: transparent; + border-color: rgba(255, 255, 255, 0.4); } + .next-btn-ghost.next-btn-dark.disabled, .next-btn-ghost.next-btn-dark.disabled:link, .next-btn-ghost.next-btn-dark.disabled:visited, .next-btn-ghost.next-btn-dark.disabled.visited, .next-btn-ghost.next-btn-dark[disabled], .next-btn-ghost.next-btn-dark[disabled]:link, .next-btn-ghost.next-btn-dark[disabled]:visited, .next-btn-ghost.next-btn-dark[disabled].visited { + color: rgba(255, 255, 255, 0.4); } + .next-btn-ghost.next-btn-dark.disabled:focus, .next-btn-ghost.next-btn-dark.disabled:hover, .next-btn-ghost.next-btn-dark.disabled.hover, .next-btn-ghost.next-btn-dark.disabled:active, .next-btn-ghost.next-btn-dark.disabled.active, .next-btn-ghost.next-btn-dark[disabled]:focus, .next-btn-ghost.next-btn-dark[disabled]:hover, .next-btn-ghost.next-btn-dark[disabled].hover, .next-btn-ghost.next-btn-dark[disabled]:active, .next-btn-ghost.next-btn-dark[disabled].active { + color: rgba(255, 255, 255, 0.4); + background-color: transparent; + border-color: rgba(255, 255, 255, 0.4); + text-decoration: none; } + .next-btn-ghost.next-btn-light { + background-color: transparent; + border-color: #333333; } + .next-btn-ghost.next-btn-light, .next-btn-ghost.next-btn-light:link, .next-btn-ghost.next-btn-light:visited, .next-btn-ghost.next-btn-light.visited { + color: #333333; } + .next-btn-ghost.next-btn-light:focus, .next-btn-ghost.next-btn-light:hover, .next-btn-ghost.next-btn-light.hover, .next-btn-ghost.next-btn-light:active, .next-btn-ghost.next-btn-light.active { + color: #999999; + background-color: rgba(0, 0, 0, 0.92); + border-color: #333333; + text-decoration: none; } + .next-btn-ghost.next-btn-light.disabled, .next-btn-ghost.next-btn-light[disabled] { + background-color: transparent; + border-color: rgba(0, 0, 0, 0.1); } + .next-btn-ghost.next-btn-light.disabled, .next-btn-ghost.next-btn-light.disabled:link, .next-btn-ghost.next-btn-light.disabled:visited, .next-btn-ghost.next-btn-light.disabled.visited, .next-btn-ghost.next-btn-light[disabled], .next-btn-ghost.next-btn-light[disabled]:link, .next-btn-ghost.next-btn-light[disabled]:visited, .next-btn-ghost.next-btn-light[disabled].visited { + color: rgba(0, 0, 0, 0.1); } + .next-btn-ghost.next-btn-light.disabled:focus, .next-btn-ghost.next-btn-light.disabled:hover, .next-btn-ghost.next-btn-light.disabled.hover, .next-btn-ghost.next-btn-light.disabled:active, .next-btn-ghost.next-btn-light.disabled.active, .next-btn-ghost.next-btn-light[disabled]:focus, .next-btn-ghost.next-btn-light[disabled]:hover, .next-btn-ghost.next-btn-light[disabled].hover, .next-btn-ghost.next-btn-light[disabled]:active, .next-btn-ghost.next-btn-light[disabled].active { + color: rgba(0, 0, 0, 0.1); + background-color: transparent; + border-color: rgba(0, 0, 0, 0.1); + text-decoration: none; } + .next-btn-group { + position: relative; + display: inline-block; + vertical-align: middle; } + .next-btn-group > .next-btn { + position: relative; + float: left; + -webkit-box-shadow: none; + box-shadow: none; } + .next-btn-group > .next-btn:hover, .next-btn-group > .next-btn:focus, .next-btn-group > .next-btn:active, .next-btn-group > .next-btn.active { + z-index: 1; } + .next-btn-group > .next-btn.disabled, .next-btn-group > .next-btn[disabled] { + z-index: 0; } + .next-btn-group .next-btn.next-btn { + margin: 0 0 0 -1px; } + .next-btn-group .next-btn:not(:first-child):not(:last-child) { + border-radius: 0; } + .next-btn-group > .next-btn:first-child { + margin: 0; } + .next-btn-group > .next-btn:first-child:not(:last-child) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; } + .next-btn-group > .next-btn:last-child:not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; } + .next-btn-group > .next-btn-primary:not(:first-child) { + border-left-color: rgba(255, 255, 255, 0.2); } + .next-btn-group > .next-btn-primary:not(:first-child):hover { + border-left-color: transparent; } + .next-btn-group > .next-btn-primary:not(:first-child).disabled, .next-btn-group > .next-btn-primary:not(:first-child)[disabled] { + border-left-color: #E6E7EB; } + +/* 组合 */ +/* ---------------------------------------- */ +.next-btn-group[dir="rtl"] > .next-btn { + float: right; } + +.next-btn-group[dir="rtl"] .next-btn.next-btn { + margin: 0 -1px 0 0; } + +.next-btn-group[dir="rtl"] > .next-btn:first-child:not(:last-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; } + +.next-btn-group[dir="rtl"] > .next-btn:last-child:not(:first-child) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; } + +.next-btn-group[dir="rtl"] > .next-btn-primary:not(:first-child) { + border-right-color: rgba(255, 255, 255, 0.2); } + .next-btn-group[dir="rtl"] > .next-btn-primary:not(:first-child):hover { + border-right-color: transparent; } + .next-btn-group[dir="rtl"] > .next-btn-primary:not(:first-child).disabled, .next-btn-group[dir="rtl"] > .next-btn-primary:not(:first-child)[disabled] { + border-right-color: #E6E7EB; } + +/* 尺寸维度 */ +/* ---------------------------------------- */ +.next-btn.next-small[dir="rtl"] { + border-radius: 3px; } + .next-btn.next-small[dir="rtl"] > .next-btn-icon.next-icon-first { + margin-left: 4px; + margin-right: 0; } + .next-btn.next-small[dir="rtl"] > .next-btn-icon.next-icon-first:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-small[dir="rtl"] > .next-btn-icon.next-icon-last { + margin-left: 0; + margin-right: 4px; } + .next-btn.next-small[dir="rtl"] > .next-btn-icon.next-icon-last:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-small[dir="rtl"].next-btn-loading { + padding-left: 8px; + padding-right: 24px; } + .next-btn.next-small[dir="rtl"].next-btn-loading:after { + right: 8px; + top: 50%; + margin-right: 0; + margin-left: 4px; } + +.next-btn.next-medium[dir="rtl"] { + border-radius: 3px; } + .next-btn.next-medium[dir="rtl"] > .next-btn-icon.next-icon-first { + margin-left: 4px; + margin-right: 0; } + .next-btn.next-medium[dir="rtl"] > .next-btn-icon.next-icon-first:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-medium[dir="rtl"] > .next-btn-icon.next-icon-last { + margin-left: 0; + margin-right: 4px; } + .next-btn.next-medium[dir="rtl"] > .next-btn-icon.next-icon-last:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-medium[dir="rtl"].next-btn-loading { + padding-left: 12px; + padding-right: 28px; } + .next-btn.next-medium[dir="rtl"].next-btn-loading:after { + right: 12px; + top: 50%; + margin-right: 0; + margin-left: 4px; } + +.next-btn.next-large[dir="rtl"] { + border-radius: 3px; } + .next-btn.next-large[dir="rtl"] > .next-btn-icon.next-icon-first { + margin-left: 4px; + margin-right: 0; } + .next-btn.next-large[dir="rtl"] > .next-btn-icon.next-icon-first:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn.next-large[dir="rtl"] > .next-btn-icon.next-icon-last { + margin-left: 0; + margin-right: 4px; } + .next-btn.next-large[dir="rtl"] > .next-btn-icon.next-icon-last:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn.next-large[dir="rtl"].next-btn-loading { + padding-left: 16px; + padding-right: 36px; } + .next-btn.next-large[dir="rtl"].next-btn-loading:after { + right: 16px; + top: 50%; + margin-right: 0; + margin-left: 4px; } + +/* 文本按钮 */ +.next-btn-text[dir="rtl"].next-large { + border-radius: 0; } + .next-btn-text[dir="rtl"].next-large > .next-btn-icon.next-icon-first { + margin-left: 4px; + margin-right: 0; } + .next-btn-text[dir="rtl"].next-large > .next-btn-icon.next-icon-first:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn-text[dir="rtl"].next-large > .next-btn-icon.next-icon-last { + margin-left: 0; + margin-right: 4px; } + .next-btn-text[dir="rtl"].next-large > .next-btn-icon.next-icon-last:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn-text[dir="rtl"].next-large.next-btn-loading { + padding-left: 0; + padding-right: 20px; } + .next-btn-text[dir="rtl"].next-large.next-btn-loading:after { + right: 0; + top: 50%; + margin-right: 0; + margin-left: 4px; } + +.next-btn-text[dir="rtl"].next-medium { + border-radius: 0; } + .next-btn-text[dir="rtl"].next-medium > .next-btn-icon.next-icon-first { + margin-left: 4px; + margin-right: 0; } + .next-btn-text[dir="rtl"].next-medium > .next-btn-icon.next-icon-first:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text[dir="rtl"].next-medium > .next-btn-icon.next-icon-last { + margin-left: 0; + margin-right: 4px; } + .next-btn-text[dir="rtl"].next-medium > .next-btn-icon.next-icon-last:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text[dir="rtl"].next-medium.next-btn-loading { + padding-left: 0; + padding-right: 16px; } + .next-btn-text[dir="rtl"].next-medium.next-btn-loading:after { + right: 0; + top: 50%; + margin-right: 0; + margin-left: 4px; } + +.next-btn-text[dir="rtl"].next-small { + border-radius: 0; } + .next-btn-text[dir="rtl"].next-small > .next-btn-icon.next-icon-first { + margin-left: 4px; + margin-right: 0; } + .next-btn-text[dir="rtl"].next-small > .next-btn-icon.next-icon-first:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text[dir="rtl"].next-small > .next-btn-icon.next-icon-last { + margin-left: 0; + margin-right: 4px; } + .next-btn-text[dir="rtl"].next-small > .next-btn-icon.next-icon-last:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text[dir="rtl"].next-small.next-btn-loading { + padding-left: 0; + padding-right: 16px; } + .next-btn-text[dir="rtl"].next-small.next-btn-loading:after { + right: 0; + top: 50%; + margin-right: 0; + margin-left: 4px; } + +.next-radio-button-large[dir='rtl'] > label:first-child { + margin-left: -1px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + +.next-radio-button-large[dir='rtl'] > label:last-child { + margin-left: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } + +.next-radio-button-large[dir='rtl'] .next-radio-label { + height: 38px; + line-height: 38px; + font-size: 16px; } + +.next-radio-button-medium[dir='rtl'] > label:first-child { + margin-left: -1px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; } + +.next-radio-button-medium[dir='rtl'] > label:last-child { + margin-left: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } + +.next-radio-button-small[dir='rtl'] > label:first-child { + margin-left: -1px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; } + +.next-radio-button-small[dir='rtl'] > label:last-child { + margin-left: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } + +.next-radio-wrapper[dir='rtl'] .next-radio-label { + margin-left: 0; + margin-right: 4px; } + +.next-radio-group[dir='rtl'] .next-radio-label { + margin-right: 4px; + margin-left: 16px; } + +.next-radio-button[dir='rtl'] > label .next-radio-label { + margin: 0; } + +.next-radio-wrapper { + outline: 0; } + .next-radio-wrapper .next-radio { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; + vertical-align: middle; + position: relative; + line-height: 1; } + .next-radio-wrapper .next-radio *, + .next-radio-wrapper .next-radio *:before, + .next-radio-wrapper .next-radio *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-radio-wrapper .next-radio input[type="radio"] { + opacity: 0; + position: absolute; + vertical-align: middle; + top: 0; + left: 0; + width: 16px; + height: 16px; + margin: 0; } + .next-radio-wrapper .next-radio-inner { + /* 动画待定 */ + /* &.mouseDown { */ + /* transform: scale3d(.7, .7, .7); */ + /* transition: transform .2s linear; */ + /* } */ + /* &.mouseUp { */ + /* transform: scale3d(1, 1, 1); */ + /* transition: transform .2s linear; */ + /* } */ + display: block; + width: 16px; + height: 16px; + background: #FFFFFF; + border-radius: 50%; + border: 1px solid #C4C6CF; + -webkit-transition: ease all .36s 0s; + transition: ease all .36s 0s; + -webkit-box-shadow: none; + box-shadow: none; } + .next-radio-wrapper .next-radio-inner:after { + -webkit-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + position: absolute; + border-radius: 50%; + top: 50%; + margin-top: -2px; + left: 50%; + margin-left: -2px; + background: #FFFFFF; + content: ' '; + -webkit-transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); } + .next-radio-wrapper.checked .next-radio-inner { + border-color: #5584FF; + background: #5584FF; } + .next-radio-wrapper.checked .next-radio-inner:after { + width: 4px; + height: 4px; + font-weight: bold; + background: #FFFFFF; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); } + .next-radio-wrapper.checked:hover .next-radio-inner, .next-radio-wrapper.checked.hovered .next-radio-inner { + border-color: transparent; } + .next-radio-wrapper.disabled input[type="radio"] { + cursor: not-allowed; } + .next-radio-wrapper.disabled .next-radio-inner { + border-color: #E6E7EB; + background: #F7F8FA; } + .next-radio-wrapper.disabled .next-radio-inner:hover, .next-radio-wrapper.disabled .next-radio-inner.hovered { + border-color: #E6E7EB; } + .next-radio-wrapper.disabled.checked .next-radio-inner { + border-color: #E6E7EB; } + .next-radio-wrapper.disabled.checked .next-radio-inner:after { + background: #CCCCCC; } + .next-radio-wrapper:not(.disabled):hover .next-radio-inner, .next-radio-wrapper:not(.disabled).hovered .next-radio-inner, .next-radio-wrapper:not(.disabled):focus .next-radio-inner, .next-radio-wrapper:not(.disabled).focused .next-radio-inner { + border-color: #5584FF; + background-color: #DEE8FF; } + .next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner, .next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner, .next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner, .next-radio-wrapper.checked.focused .next-radio-inner { + border-color: transparent; + background: #3E71F7; } + .next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner:after, .next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner:after, .next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner:after, .next-radio-wrapper.checked.focused .next-radio-inner:after { + background: #FFFFFF; } + +.next-radio-button .next-radio { + width: 0; + height: 0; } + +.next-radio-button input[type="radio"] { + width: 0; + height: 0; } + +.next-radio-button > label { + display: inline-block; + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: relative; + z-index: 1; + margin: 0 0 0 -1px; + border: 1px solid #C4C6CF; + background-color: #FFFFFF; + -webkit-transition: ease all .3s 0s; + transition: ease all .3s 0s; + vertical-align: middle; } + .next-radio-button > label .next-radio-label { + display: block; + color: #333333; + margin: 0; + -webkit-transition: ease all .3s 0s; + transition: ease all .3s 0s; } + .next-radio-button > label:hover, .next-radio-button > label:focus, .next-radio-button > label.hovered { + z-index: 10; + border-color: #A0A2AD; + background-color: #F2F3F7; } + .next-radio-button > label:hover .next-radio-label, .next-radio-button > label:focus .next-radio-label, .next-radio-button > label.hovered .next-radio-label { + color: #333333; } + .next-radio-button > label.checked { + z-index: 11; + border-color: #5584FF; + background-color: #FFFFFF; } + .next-radio-button > label.checked .next-radio-label { + color: #5584FF; } + .next-radio-button > label.disabled { + z-index: 0; + cursor: not-allowed; + border-color: #E6E7EB; + background-color: #F7F8FA; } + .next-radio-button > label.disabled .next-radio-label { + color: #CCCCCC; } + .next-radio-button > label.checked.disabled { + z-index: 0; + border-color: #E6E7EB; + background-color: #F2F3F7; } + .next-radio-button > label.checked.disabled .next-radio-label { + color: #CCCCCC; } + +.next-radio-button-large > label { + padding: 0 8px; + height: 40px; + line-height: 40px; } + .next-radio-button-large > label:first-child { + margin-left: 0; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } + .next-radio-button-large > label:last-child { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; } + +.next-radio-button-large .next-radio-label { + height: 38px; + line-height: 38px; + font-size: 16px; } + +.next-radio-button-medium > label { + padding: 0 8px; + height: 28px; + line-height: 28px; } + .next-radio-button-medium > label:first-child { + margin-left: 0; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } + .next-radio-button-medium > label:last-child { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; } + +.next-radio-button-medium .next-radio-label { + height: 26px; + line-height: 26px; + font-size: 12px; } + +.next-radio-button-small > label { + padding: 0 8px; + height: 20px; + line-height: 20px; } + .next-radio-button-small > label:first-child { + margin-left: 0; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } + .next-radio-button-small > label:last-child { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; } + +.next-radio-button-small .next-radio-label { + height: 18px; + line-height: 18px; + font-size: 12px; } + +.next-radio-single-input input[type="radio"] { + opacity: 0; + position: absolute; + top: 0; + left: 0; + margin: 0; } + +.next-radio-group { + display: inline-block; } + .next-radio-group .next-radio-label { + color: #333333; + margin-right: 16px; } + .next-radio-group.disabled .next-radio-label { + color: #CCCCCC; } + +.next-radio-group-ver .next-radio-wrapper { + display: block; + margin-bottom: 8px; } + +.next-radio-label { + margin: 0; + margin-left: 4px; + font-size: 12px; + vertical-align: middle; + line-height: 1; } + +@-moz-document url-prefix() { + .next-radio { + margin-top: -1px; } + @supports ((-webkit-animation: calc(0s)) or (animation: calc(0s))) { + /* firefox 57+ */ + .next-radio { + margin-top: -3px; } } } + +@-webkit-keyframes fadeInRightForTag { + 0% { + opacity: 0; + -webkit-transform: rotate(45deg) translateX(20px); + transform: rotate(45deg) translateX(20px); } + 100% { + opacity: 1; + -webkit-transform: rotate(45deg) translateX(0); + transform: rotate(45deg) translateX(0); } } + +@keyframes fadeInRightForTag { + 0% { + opacity: 0; + -webkit-transform: rotate(45deg) translateX(20px); + transform: rotate(45deg) translateX(20px); } + 100% { + opacity: 1; + -webkit-transform: rotate(45deg) translateX(0); + transform: rotate(45deg) translateX(0); } } + +.next-tag > .next-tag-body { + overflow: hidden; + text-overflow: ellipsis; } + +.next-tag-checkable.next-tag-level-secondary { + color: #333333; + border-color: transparent; + background-color: transparent; } + .next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):hover, .next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]).hover, .next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):focus { + color: #5584FF; } + +.next-tag-default.next-tag-level-primary, .next-tag-closable.next-tag-level-primary { + color: #666666; + border-color: #EBECF0; + background-color: #EBECF0; } + .next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover, .next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover, .next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover, .next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover, .next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus, .next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus { + color: #333333; + border-color: #E2E4E8; + background-color: #E2E4E8; } + .next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover > .next-tag-close-btn, .next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover > .next-tag-close-btn, .next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover > .next-tag-close-btn, .next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover > .next-tag-close-btn, .next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus > .next-tag-close-btn, .next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus > .next-tag-close-btn { + color: #333333; } + [disabled].next-tag-default.next-tag-level-primary, [disabled].next-tag-closable.next-tag-level-primary, .disabled.next-tag-default.next-tag-level-primary, .disabled.next-tag-closable.next-tag-level-primary { + color: #CCCCCC; + border-color: #F7F8FA; + background-color: #F7F8FA; } + [disabled].next-tag-default.next-tag-level-primary > .next-tag-close-btn, [disabled].next-tag-closable.next-tag-level-primary > .next-tag-close-btn, .disabled.next-tag-default.next-tag-level-primary > .next-tag-close-btn, .disabled.next-tag-closable.next-tag-level-primary > .next-tag-close-btn { + color: #CCCCCC; } + .next-tag-default.next-tag-level-primary > .next-tag-close-btn, .next-tag-closable.next-tag-level-primary > .next-tag-close-btn { + color: #666666; } + +.next-tag-checkable.next-tag-level-primary { + color: #666666; + border-color: #EBECF0; + background-color: #EBECF0; } + .next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover, .next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover, .next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus { + color: #333333; + border-color: #E2E4E8; + background-color: #E2E4E8; } + .next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover > .next-tag-close-btn, .next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover > .next-tag-close-btn, .next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus > .next-tag-close-btn { + color: #333333; } + [disabled].next-tag-checkable.next-tag-level-primary, .disabled.next-tag-checkable.next-tag-level-primary { + color: #CCCCCC; + border-color: #F7F8FA; + background-color: #F7F8FA; } + [disabled].next-tag-checkable.next-tag-level-primary > .next-tag-close-btn, .disabled.next-tag-checkable.next-tag-level-primary > .next-tag-close-btn { + color: #CCCCCC; } + .next-tag-checkable.next-tag-level-primary > .next-tag-close-btn { + color: #666666; } + +.next-tag-checkable.next-tag-level-primary.checked { + color: #FFFFFF; + border-color: #5584FF; + background-color: #5584FF; } + .next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover, .next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover, .next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus { + color: #FFFFFF; + border-color: #3E71F7; + background-color: #3E71F7; } + .next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover > .next-tag-close-btn, .next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover > .next-tag-close-btn, .next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus > .next-tag-close-btn { + color: #FFFFFF; } + .next-tag-checkable.next-tag-level-primary.checked > .next-tag-close-btn { + color: #FFFFFF; } + +.next-tag-default.next-tag-level-normal { + color: #666666; + border-color: #C4C6CF; + background-color: transparent; } + .next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover, .next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover, .next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus { + color: #333333; + border-color: #A0A2AD; + background-color: transparent; } + .next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover > .next-tag-close-btn, .next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover > .next-tag-close-btn, .next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus > .next-tag-close-btn { + color: #333333; } + [disabled].next-tag-default.next-tag-level-normal, .disabled.next-tag-default.next-tag-level-normal { + color: #CCCCCC; + border-color: #E6E7EB; + background-color: #F7F8FA; } + [disabled].next-tag-default.next-tag-level-normal > .next-tag-close-btn, .disabled.next-tag-default.next-tag-level-normal > .next-tag-close-btn { + color: #CCCCCC; } + .next-tag-default.next-tag-level-normal > .next-tag-close-btn { + color: #666666; } + +.next-tag-closable.next-tag-level-normal { + color: #666666; + border-color: #C4C6CF; + background-color: transparent; } + .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover, .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover, .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus { + color: #333333; + border-color: #A0A2AD; + background-color: transparent; } + .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover > .next-tag-close-btn, .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover > .next-tag-close-btn, .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus > .next-tag-close-btn { + color: #333333; } + [disabled].next-tag-closable.next-tag-level-normal, .disabled.next-tag-closable.next-tag-level-normal { + color: #CCCCCC; + border-color: #E6E7EB; + background-color: transparent; } + [disabled].next-tag-closable.next-tag-level-normal > .next-tag-close-btn, .disabled.next-tag-closable.next-tag-level-normal > .next-tag-close-btn { + color: #CCCCCC; } + .next-tag-closable.next-tag-level-normal > .next-tag-close-btn { + color: #666666; } + +.next-tag-checkable.next-tag-level-normal.checked, .next-tag-checkable.next-tag-level-secondary.checked { + color: #5584FF; + border-color: #5584FF; + background-color: transparent; } + .next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover, .next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover, .next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover, .next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover, .next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus, .next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus { + color: #3E71F7; + border-color: #3E71F7; + background-color: transparent; } + +.next-tag-checkable.next-tag-level-secondary.checked:before { + position: absolute; + content: ""; + -webkit-font-smoothing: antialiased; + background-color: #5584FF; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); } + +.next-tag-checkable.next-tag-level-secondary.checked:after { + position: absolute; + font-family: NextIcon; + -webkit-font-smoothing: antialiased; + content: "\E632"; + -webkit-transform: scale(0.6); + -ms-transform: scale(0.6); + transform: scale(0.6); + color: #FFFFFF; } + +.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:before, .next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:before, .next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:before { + background-color: #3E71F7; } + +.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:after, .next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:after, .next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:after { + color: #FFFFFF; } + +[disabled].next-tag-checkable.next-tag-level-secondary.checked:before, .next-tag-checkable.next-tag-level-secondary.checked:disabled:before { + background-color: #E6E7EB; } + +[disabled].next-tag-checkable.next-tag-level-secondary.checked:after, .next-tag-checkable.next-tag-level-secondary.checked:disabled:after { + color: #FFFFFF; } + +.next-tag-checkable.next-tag-level-normal { + color: #666666; + border-color: #C4C6CF; + background-color: transparent; } + .next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):hover, .next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]).hover, .next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):focus { + color: #333333; + border-color: #C4C6CF; + background-color: transparent; } + [disabled].next-tag-checkable.next-tag-level-normal, .disabled.next-tag-checkable.next-tag-level-normal { + color: #CCCCCC; + border-color: #E6E7EB; + background-color: #F7F8FA; } + +.next-tag-checkable.next-tag-level-normal.checked:before { + position: absolute; + content: ""; + -webkit-font-smoothing: antialiased; + background-color: #5584FF; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); } + +.next-tag-checkable.next-tag-level-normal.checked:after { + position: absolute; + font-family: NextIcon; + -webkit-font-smoothing: antialiased; + content: "\E632"; + -webkit-transform: scale(0.6); + -ms-transform: scale(0.6); + transform: scale(0.6); + color: #FFFFFF; } + +.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:before, .next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:before, .next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:before { + background-color: #3E71F7; } + +.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:after, .next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:after, .next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:after { + color: #FFFFFF; } + +[disabled].next-tag-checkable.next-tag-level-normal.checked:before, .next-tag-checkable.next-tag-level-normal.checked:disabled:before { + background-color: #E6E7EB; } + +[disabled].next-tag-checkable.next-tag-level-normal.checked:after, .next-tag-checkable.next-tag-level-normal.checked:disabled:after { + color: #FFFFFF; } + +.next-tag-closable.next-tag-level-normal:before { + position: absolute; + content: ""; + -webkit-font-smoothing: antialiased; + background-color: #C4C6CF; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); } + +.next-tag-closable.next-tag-level-normal:after { + position: absolute; + font-family: NextIcon; + -webkit-font-smoothing: antialiased; + content: "\E626"; + -webkit-transform: scale(0.6); + -ms-transform: scale(0.6); + transform: scale(0.6); + color: #FFFFFF; } + +.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:before, .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:before, .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:before { + background-color: #A0A2AD; } + +.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:after, .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:after, .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:after { + color: #FFFFFF; } + +[disabled].next-tag-closable.next-tag-level-normal:before, .next-tag-closable.next-tag-level-normal:disabled:before { + background-color: #E6E7EB; } + +[disabled].next-tag-closable.next-tag-level-normal:after, .next-tag-closable.next-tag-level-normal:disabled:after { + color: #FFFFFF; } + +.next- { + /* Animation */ + /* ----------- */ } + .next-tag-group .next-tag-medium, + .next-tag-group .next-tag-large { + margin-right: 8px; + margin-bottom: 8px; } + .next-tag-group .next-tag-small { + margin-right: 4px; + margin-bottom: 4px; } + .next-tag { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; + max-width: 100%; + vertical-align: middle; + border-width: 1px; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; + /* 可配置??? */ + overflow: hidden; + white-space: nowrap; + -webkit-transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1); + transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1); + font-size: 0; + outline: 0; } + .next-tag *, + .next-tag *:before, + .next-tag *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-tag > .next-tag-body { + position: relative; + display: inline-block; + height: 100%; + text-align: center; + vertical-align: middle; + max-width: 100%; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + /* 用户手动传的 icon 的大小也保持一致？ */ } + .next-tag > .next-tag-body > a { + text-decoration: none; + color: inherit; } + .next-tag > .next-tag-body > a:before { + content: " "; + position: absolute; + display: block; + top: 0; + left: 0; + right: 0; + bottom: 0; } + .next-tag > .next-tag-body .next-icon { + line-height: 1; + vertical-align: middle; } + .next-tag > .next-tag-body .next-icon:before { + font-size: inherit; } + .next-tag.next-tag-body-pointer { + cursor: pointer; } + .next-tag[disabled], .next-tag.disabled { + cursor: not-allowed; + pointer-events: none; } + .next-tag-large { + height: 40px; + padding: 0; + line-height: 38px; + font-size: 0; } + .next-tag-large > .next-tag-body { + font-size: 16px; + padding: 0 16px; + min-width: 48px; } + .next-tag-large.next-tag-closable > .next-tag-body { + padding: 0 0 0 16px; } + .next-tag-large[dir=rtl].next-tag-closable > .next-tag-body { + padding: 0 16px 0 0; } + .next-tag-large > .next-tag-close-btn { + margin-left: 12px; + padding-right: 16px; } + .next-tag-large > .next-tag-close-btn .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-tag-large[dir=rtl] > .next-tag-close-btn { + margin-right: 12px; + margin-left: 0; + padding-right: 0; + padding-left: 16px; } + .next-tag-medium { + height: 28px; + padding: 0; + line-height: 26px; + font-size: 0; } + .next-tag-medium > .next-tag-body { + font-size: 14px; + padding: 0 12px; + min-width: 40px; } + .next-tag-medium.next-tag-closable > .next-tag-body { + padding: 0 0 0 12px; } + .next-tag-medium[dir=rtl].next-tag-closable > .next-tag-body { + padding: 0 12px 0 0; } + .next-tag-medium > .next-tag-close-btn { + margin-left: 8px; + padding-right: 12px; } + .next-tag-medium > .next-tag-close-btn .next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-tag-medium > .next-tag-close-btn .next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-tag-medium > .next-tag-close-btn .next-icon:before { + width: 16px; + font-size: 16px; } } + .next-tag-medium[dir=rtl] > .next-tag-close-btn { + margin-right: 8px; + margin-left: 0; + padding-right: 0; + padding-left: 12px; } + .next-tag-small { + height: 20px; + padding: 0; + line-height: 18px; + font-size: 0; } + .next-tag-small > .next-tag-body { + font-size: 12px; + padding: 0 8px; + min-width: 28px; } + .next-tag-small.next-tag-closable > .next-tag-body { + padding: 0 0 0 8px; } + .next-tag-small[dir=rtl].next-tag-closable > .next-tag-body { + padding: 0 8px 0 0; } + .next-tag-small > .next-tag-close-btn { + margin-left: 8px; + padding-right: 8px; } + .next-tag-small > .next-tag-close-btn .next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-tag-small > .next-tag-close-btn .next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-tag-small > .next-tag-close-btn .next-icon:before { + width: 16px; + font-size: 16px; } } + .next-tag-small[dir=rtl] > .next-tag-close-btn { + margin-right: 8px; + margin-left: 0; + padding-right: 0; + padding-left: 8px; } + .next-tag-default { + cursor: default; } + .next-tag-closable { + position: relative; } + .next-tag-closable.next-tag-large > .next-tag-body { + max-width: calc(100% - 40px); } + .next-tag-closable.next-tag-medium > .next-tag-body { + max-width: calc(100% - 28px); } + .next-tag-closable.next-tag-small > .next-tag-body { + max-width: calc(100% - 20px); } + .next-tag-closable > .next-tag-close-btn { + display: inline-block; + vertical-align: middle; + height: 100%; + text-align: center; + cursor: pointer; } + .next-tag-closable.next-tag-level-normal[disabled], .next-tag-closable.next-tag-level-normal.disabled { + color: #CCCCCC; + border-color: #E6E7EB; + background-color: #F7F8FA; } + .next-tag-checkable { + cursor: pointer; + position: relative; + border-radius: 3px; } + .next-tag-checkable.checked:before { + -webkit-animation: fadeInRightForTag 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + animation: fadeInRightForTag 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); } + .next-tag-checkable.checked:after { + -webkit-animation: zoomIn 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + animation: zoomIn 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); } + .next-tag-checkable.next-tag-small:not(.next-tag-level-primary):before { + right: -10px; + bottom: -10px; + width: 20px; + height: 20px; } + .next-tag-checkable.next-tag-small:not(.next-tag-level-primary):after { + font-size: 8px; + line-height: 8px; + right: 0; + bottom: 0; } + .next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):before { + right: -14px; + bottom: -14px; + width: 28px; + height: 28px; } + .next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):after { + font-size: 12px; + line-height: 12px; + right: 0; + bottom: 0; } + .next-tag-checkable.next-tag-large:not(.next-tag-level-primary):before { + right: -18px; + bottom: -18px; + width: 36px; + height: 36px; } + .next-tag-checkable.next-tag-large:not(.next-tag-level-primary):after { + font-size: 16px; + line-height: 16px; + right: 0; + bottom: 0; } + .next-tag-checkable.next-tag-level-primary[disabled], .next-tag-checkable.next-tag-level-primary.disabled { + color: #CCCCCC; + /* $tag-text-color-disabled; */ + border-color: #F7F8FA; + background-color: #F7F8FA; } + .next-tag-checkable.next-tag-level-secondary[disabled], .next-tag-checkable.next-tag-level-secondary.disabled { + color: #CCCCCC; + border-color: #E6E7EB; + background-color: #F7F8FA; } + .next-tag-zoom-enter, .next-tag-zoom-appear { + -webkit-animation: fadeInLeft 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + animation: fadeInLeft 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; } + .next-tag-zoom-leave { + -webkit-animation: zoomOut .3s ease-in; + animation: zoomOut .3s ease-in; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; } + +.next-checkbox-wrapper[dir="rtl"] { + margin-right: 8px; + margin-left: 0; } + .next-checkbox-wrapper[dir="rtl"]:first-child { + margin-right: 0; } + .next-checkbox-wrapper[dir="rtl"] > .next-checkbox-label { + margin-right: 4px; + margin-left: 0; } + +/* stylelint-disable max-nesting-depth */ +.next-checkbox-wrapper { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-checkbox-wrapper *, + .next-checkbox-wrapper *:before, + .next-checkbox-wrapper *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-checkbox-wrapper .next-checkbox { + display: inline-block; + position: relative; + line-height: 1; + vertical-align: middle; } + .next-checkbox-wrapper input[type="checkbox"] { + opacity: 0; + position: absolute; + top: 0; + left: 0; + width: 16px; + height: 16px; + margin: 0; } + .next-checkbox-wrapper .next-checkbox-inner { + display: block; + width: 16px; + height: 16px; + background: #FFFFFF; + border-radius: 3px; + border: 1px solid #C4C6CF; + -webkit-transition: ease all .3s 0s; + transition: ease all .3s 0s; + text-align: left; + /* 防止继承父级 */ + -webkit-box-shadow: none; + box-shadow: none; + /* box-sizing: content-box; */ } + .next-checkbox-wrapper .next-checkbox-inner > .next-icon { + -webkit-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + position: absolute; + top: 0; + opacity: 0; + line-height: 16px; + -webkit-transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + color: #FFFFFF; + left: 4px; + margin-left: 0; } + .next-checkbox-wrapper .next-checkbox-inner > .next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-checkbox-wrapper .next-checkbox-inner > .next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-checkbox-wrapper .next-checkbox-inner > .next-icon:before { + width: 16px; + font-size: 16px; } } + .next-checkbox-wrapper .next-checkbox-inner > .next-icon::before { + vertical-align: top; + margin-top: 0; } + .next-checkbox-wrapper.checked .next-checkbox-inner { + border-color: transparent; + background-color: #5584FF; } + .next-checkbox-wrapper.checked .next-checkbox-inner:hover, .next-checkbox-wrapper.checked .next-checkbox-inner.hovered { + border-color: transparent; } + .next-checkbox-wrapper.checked .next-checkbox-inner > .next-icon { + opacity: 1; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + margin-left: 0; + /* font-size < 12px的时候进行覆盖。 */ } + .next-checkbox-wrapper.checked .next-checkbox-inner > .next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-checkbox-wrapper.checked .next-checkbox-inner > .next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-checkbox-wrapper.checked .next-checkbox-inner > .next-icon:before { + width: 16px; + font-size: 16px; } } + .next-checkbox-wrapper.indeterminate .next-checkbox-inner { + border-color: transparent; + background-color: #5584FF; } + .next-checkbox-wrapper.indeterminate .next-checkbox-inner:hover, .next-checkbox-wrapper.indeterminate .next-checkbox-inner.hovered { + border-color: transparent; } + .next-checkbox-wrapper.indeterminate .next-checkbox-inner > .next-icon { + opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + margin-left: 0; + /* font-size < 12px的时候进行覆盖。 */ } + .next-checkbox-wrapper.indeterminate .next-checkbox-inner > .next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-checkbox-wrapper.indeterminate .next-checkbox-inner > .next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-checkbox-wrapper.indeterminate .next-checkbox-inner > .next-icon:before { + width: 16px; + font-size: 16px; } } + .next-checkbox-wrapper.disabled input[type="checkbox"] { + cursor: not-allowed; } + .next-checkbox-wrapper.disabled .next-checkbox-inner { + border-color: #E6E7EB; + background: #F7F8FA; } + .next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover, .next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered, .next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover, .next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered { + border-color: #E6E7EB; } + .next-checkbox-wrapper.disabled.checked .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner > .next-icon { + color: #CCCCCC; + opacity: 1; } + .next-checkbox-wrapper:not(.disabled):hover .next-checkbox-inner, .next-checkbox-wrapper.hovered .next-checkbox-inner, .next-checkbox-wrapper.focused .next-checkbox-inner { + border-color: #5584FF; + background-color: #DEE8FF; } + .next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner, .next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner, .next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner, .next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner, .next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner, .next-checkbox-wrapper.checked.focused .next-checkbox-inner { + border-color: transparent; + background-color: #3E71F7; } + .next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.checked.focused .next-checkbox-inner > .next-icon { + color: #FFFFFF; + opacity: 1; } + +.next-checkbox-group .next-checkbox-wrapper { + margin-left: 8px; } + .next-checkbox-group .next-checkbox-wrapper:first-child { + margin-left: 0; } + +.next-checkbox-group-ver .next-checkbox-wrapper { + display: block; + margin-left: 0; + margin-right: 0; + margin-bottom: 8px; } + +.next-checkbox-label { + font-size: 12px; + vertical-align: middle; + margin: 0; + margin-left: 4px; + line-height: 1; } + +.next-menu[dir="rtl"] .next-menu-item-helper { + float: left; } + +.next-menu[dir="rtl"] .next-menu-item .next-checkbox, +.next-menu[dir="rtl"] .next-menu-item .next-radio { + margin-left: 4px; + margin-right: 0; } + +.next-menu[dir="rtl"] .next-menu-hoz-right { + float: left; } + +.next-menu[dir="rtl"] .next-menu-icon-arrow.next-icon { + left: 10px; + right: auto; } + +.next-menu[dir="rtl"] .next-menu-hoz-icon-arrow.next-icon { + left: 6px; + right: auto; } + +.next-menu[dir="rtl"] .next-menu-icon-selected.next-icon { + margin-left: 0; + margin-right: -16px; } + .next-menu[dir="rtl"] .next-menu-icon-selected.next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-menu[dir="rtl"] .next-menu-icon-selected.next-icon.next-menu-icon-right { + right: auto; + left: 4px; } + +.next-menu[dir="rtl"] .next-menu-icon-arrow.next-icon { + left: 10px; + right: auto; } + +.next-menu { + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: relative; + min-width: 100px; + padding: 8px 0; + margin: 0; + list-style: none; + border: 1px solid #DCDEE3; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + background: #FFFFFF; + line-height: 32px; + font-size: 12px; + /* &-popup-content.next-hide { */ + /* display: none; */ + /* } */ } + .next-menu *, + .next-menu *:before, + .next-menu *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-menu:focus, + .next-menu *:focus { + outline: 0; } + .next-menu-embeddable, + .next-menu-embeddable .next-menu-item.next-disabled, + .next-menu-embeddable .next-menu-item.next-disabled .next-menu-item-text > a { + background: initial; + border: none; } + .next-menu-embeddable .next-menu-item-inner { + height: 100%; } + .next-menu-content { + position: relative; + padding: 0; + margin: 0; + list-style: none; } + .next-menu-sub-menu { + padding: 0; + margin: 0; + list-style: none; } + .next-menu-sub-menu.next-expand-enter { + overflow: hidden; } + .next-menu-sub-menu.next-expand-enter-active { + -webkit-transition: height .3s ease-out; + transition: height .3s ease-out; } + .next-menu-sub-menu.next-expand-leave { + overflow: hidden; } + .next-menu-sub-menu.next-expand-leave-active { + -webkit-transition: height .3s ease-out; + transition: height .3s ease-out; } + .next-menu-item { + position: relative; + padding: 0 20px; + -webkit-transition: background .2s ease; + transition: background .2s ease; + color: #333333; + cursor: pointer; } + .next-menu-item-helper { + float: right; + color: #999999; + font-style: normal; + font-size: 12px; } + .next-menu-item .next-checkbox, + .next-menu-item .next-radio { + margin-right: 4px; } + .next-menu-item.next-selected { + color: #333333; + background-color: #FFFFFF; } + .next-menu-item.next-selected .next-menu-icon-arrow { + color: #666666; } + .next-menu-item.next-selected .next-menu-icon-selected { + color: #5584FF; } + .next-menu-item.next-disabled, + .next-menu-item.next-disabled .next-menu-item-text > a { + color: #CCCCCC; + background-color: #FFFFFF; + cursor: not-allowed; } + .next-menu-item.next-disabled .next-menu-icon-arrow, + .next-menu-item.next-disabled .next-menu-item-text > a .next-menu-icon-arrow { + color: #CCCCCC; } + .next-menu-item.next-disabled .next-menu-icon-selected, + .next-menu-item.next-disabled .next-menu-item-text > a .next-menu-icon-selected { + color: #CCCCCC; } + .next-menu-item:not(.next-disabled):hover, .next-menu-item:not(.next-disabled).next-selected:hover, .next-menu-item:not(.next-disabled).next-selected.next-focused:hover, .next-menu-item:not(.next-disabled).next-selected:focus:hover, .next-menu-item:not(.next-disabled).next-focused, .next-menu-item:not(.next-disabled).next-selected.next-focused, .next-menu-item:not(.next-disabled).next-selected:focus { + color: #333333; + background-color: #F2F3F7; } + .next-menu-item:not(.next-disabled):hover .next-menu-icon-arrow, .next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-arrow, .next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-arrow, .next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-arrow, .next-menu-item:not(.next-disabled).next-focused .next-menu-icon-arrow, .next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-arrow, .next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-arrow { + color: #333333; } + .next-menu-item:not(.next-disabled):hover .next-menu-icon-selected, .next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-selected, .next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-selected, .next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-selected, .next-menu-item:not(.next-disabled).next-focused .next-menu-icon-selected, .next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-selected, .next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-selected { + color: #5584FF; } + .next-menu-item-inner { + height: 32px; + font-size: 12px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + word-wrap: normal; } + .next-menu-item-text { + vertical-align: middle; } + .next-menu-item-text > a { + display: inline-block; + text-decoration: none; + color: #333333; } + .next-menu-item-text > a::before { + position: absolute; + background-color: transparent; + top: 0; + left: 0; + bottom: 0; + right: 0; + content: ''; } + .next-menu.next-hoz { + padding: 0; } + .next-menu.next-hoz > .next-menu-item, + .next-menu.next-hoz .next-menu-content > .next-menu-item { + display: inline-block; + vertical-align: top; } + .next-menu.next-hoz .next-menu-header, + .next-menu.next-hoz .next-menu-content, + .next-menu.next-hoz .next-menu-footer { + display: inline-block; } + .next-menu-hoz-right { + float: right; } + .next-menu-group-label { + padding: 0 12px; + color: #999999; } + .next-menu-divider { + margin: 8px 12px; + border-bottom: 1px solid #E6E7EB; } + .next-menu .next-menu-icon-selected.next-icon { + position: absolute; + top: 0; + margin-left: -16px; } + .next-menu .next-menu-icon-selected.next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-menu .next-menu-icon-selected.next-icon.next-menu-icon-right { + right: 4px; } + .next-menu .next-menu-icon-arrow.next-icon { + position: absolute; + top: 0; + right: 10px; + color: #666666; + -webkit-transition: all ease .3s; + transition: all ease .3s; } + .next-menu .next-menu-icon-arrow.next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-menu .next-menu-icon-arrow.next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-menu .next-menu-icon-arrow.next-icon:before { + width: 16px; + font-size: 16px; } } + .next-menu .next-menu-icon-arrow-down.next-open { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + .next-menu .next-menu-icon-arrow-down.next-open:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-menu .next-menu-icon-arrow-down.next-open { + -webkit-transform: scale(0.5) rotate(180deg); + -ms-transform: scale(0.5) rotate(180deg); + transform: scale(0.5) rotate(180deg); + margin-left: -4px; + margin-right: -4px; } + .next-menu .next-menu-icon-arrow-down.next-open:before { + width: 16px; + font-size: 16px; } } + .next-menu .next-menu-icon-arrow-right.next-open { + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); } + .next-menu .next-menu-icon-arrow-right.next-open:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-menu .next-menu-icon-arrow-right.next-open { + -webkit-transform: scale(0.5) rotate(-90deg); + -ms-transform: scale(0.5) rotate(-90deg); + transform: scale(0.5) rotate(-90deg); + margin-left: -4px; + margin-right: -4px; } + .next-menu .next-menu-icon-arrow-right.next-open:before { + width: 16px; + font-size: 16px; } } + .next-menu .next-menu-hoz-icon-arrow.next-icon { + position: absolute; + top: 0; + right: 6px; + color: #666666; + -webkit-transition: all ease .3s; + transition: all ease .3s; } + .next-menu .next-menu-hoz-icon-arrow.next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-menu .next-menu-hoz-icon-arrow.next-open { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + .next-menu .next-menu-hoz-icon-arrow.next-open:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-menu.next-context { + line-height: 24px; } + .next-menu.next-context .next-menu-item-inner { + height: 24px; } + +.next-input { + -webkit-box-sizing: border-box; + box-sizing: border-box; + vertical-align: middle; + display: inline-table; + border-collapse: separate; + font-size: 0; + line-height: 1; + width: 200px; + border-spacing: 0; + -webkit-transition: all .3s ease-out; + transition: all .3s ease-out; + border: 1px solid #C4C6CF; + background-color: #FFFFFF; } + .next-input *, + .next-input *:before, + .next-input *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-input input { + height: 100%; + /* remove autoFill yellow background */ } + .next-input input[type="reset"], .next-input input[type="submit"] { + -webkit-appearance: button; + cursor: pointer; } + .next-input input::-moz-focus-inner { + border: 0; + padding: 0; } + .next-input input:-webkit-autofill { + -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset; } + .next-input textarea { + resize: none; } + .next-input input, + .next-input textarea { + width: 100%; + border: none; + outline: none; + padding: 0; + margin: 0; + font-weight: normal; + vertical-align: middle; + background-color: transparent; + color: #333333; } + .next-input input::-ms-clear, + .next-input textarea::-ms-clear { + display: none; } + .next-input.next-input-textarea { + border-radius: 3px; + font-size: 0; } + .next-input.next-input-textarea textarea { + color: #333333; + padding: 4px 8px; + font-size: 12px; + border-radius: 3px; } + .next-input.next-input-textarea .next-input-control { + display: block; + width: auto; + border-radius: 3px; } + .next-input.next-input-textarea .next-input-len { + padding: 0 8px 4px; + display: block; + text-align: right; + width: auto; } + .next-input.next-small { + height: 20px; + border-radius: 3px; } + .next-input.next-small .next-input-label { + padding-left: 8px; + font-size: 12px; } + .next-input.next-small .next-input-inner { + font-size: 12px; } + .next-input.next-small .next-input-control { + padding-right: 4px; } + .next-input.next-small input { + height: 18px; + line-height: 18px \0; + padding: 0 4px; + font-size: 12px; } + .next-input.next-small input::-webkit-input-placeholder { + font-size: 12px; } + .next-input.next-small input::-moz-placeholder { + font-size: 12px; } + .next-input.next-small input::-ms-input-placeholder { + font-size: 12px; } + .next-input.next-small input::placeholder { + font-size: 12px; } + .next-input.next-small .next-input-text-field { + padding: 0 4px; + font-size: 12px; + height: 18px; + line-height: 18px; } + .next-input.next-small .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-input.next-small input { + border-radius: 3px; } + .next-input.next-small .next-input-control { + border-radius: 0 3px 3px 0; } + .next-input.next-medium { + height: 28px; + border-radius: 3px; } + .next-input.next-medium .next-input-label { + padding-left: 8px; + font-size: 12px; } + .next-input.next-medium .next-input-inner { + font-size: 12px; } + .next-input.next-medium .next-input-control { + padding-right: 8px; } + .next-input.next-medium input { + height: 26px; + line-height: 26px \0; + padding: 0 8px; + font-size: 12px; } + .next-input.next-medium input::-webkit-input-placeholder { + font-size: 12px; } + .next-input.next-medium input::-moz-placeholder { + font-size: 12px; } + .next-input.next-medium input::-ms-input-placeholder { + font-size: 12px; } + .next-input.next-medium input::placeholder { + font-size: 12px; } + .next-input.next-medium .next-input-text-field { + padding: 0 8px; + font-size: 12px; + height: 26px; + line-height: 26px; } + .next-input.next-medium .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-input.next-medium input { + border-radius: 3px; } + .next-input.next-medium .next-input-control { + border-radius: 0 3px 3px 0; } + .next-input.next-large { + height: 40px; + border-radius: 3px; } + .next-input.next-large .next-input-label { + padding-left: 12px; + font-size: 16px; } + .next-input.next-large .next-input-inner { + font-size: 16px; } + .next-input.next-large .next-input-control { + padding-right: 8px; } + .next-input.next-large input { + height: 38px; + line-height: 38px \0; + padding: 0 12px; + font-size: 16px; } + .next-input.next-large input::-webkit-input-placeholder { + font-size: 16px; } + .next-input.next-large input::-moz-placeholder { + font-size: 16px; } + .next-input.next-large input::-ms-input-placeholder { + font-size: 16px; } + .next-input.next-large input::placeholder { + font-size: 16px; } + .next-input.next-large .next-input-text-field { + padding: 0 12px; + font-size: 16px; + height: 38px; + line-height: 38px; } + .next-input.next-large .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-input.next-large input { + border-radius: 3px; } + .next-input.next-large .next-input-control { + border-radius: 0 3px 3px 0; } + .next-input-hint-wrap { + color: #999999; + position: relative; } + .next-input-hint-wrap .next-input-clear { + opacity: 0; + z-index: 1; + position: absolute; } + .next-input-hint-wrap .next-input-hint { + opacity: 1; } + .next-input .next-icon-delete-filling:hover { + cursor: pointer; + color: #666666; } + .next-input:hover, .next-input.next-focus { + border-color: #A0A2AD; + background-color: #FFFFFF; } + .next-input:hover .next-input-clear, .next-input.next-focus .next-input-clear { + opacity: 1; } + .next-input:hover .next-input-clear + .next-input-hint, .next-input.next-focus .next-input-clear + .next-input-hint { + opacity: 0; } + .next-input .next-input-clear:focus { + opacity: 1; } + .next-input .next-input-clear:focus + .next-input-hint { + opacity: 0; } + .next-input.next-focus { + border-color: #5584FF; + background-color: #FFFFFF; } + .next-input.next-error { + border-color: #FF3000; } + .next-input.next-error.next-focus, .next-input.next-error:hover { + border-color: #FF3000; } + .next-input.next-hidden { + display: none; } + .next-input.next-noborder { + border: none; } + .next-input-control .next-input-len { + font-size: 12px; + line-height: 12px; + color: #999999; + display: table-cell; + width: 1px; + vertical-align: bottom; } + .next-input-control .next-input-len.next-error { + color: #FF3000; } + .next-input-control > * { + display: table-cell; + width: 1%; + top: 0; } + .next-input-control > *:not(:last-child) { + padding-right: 4px; } + .next-input-control .next-icon { + -webkit-transition: all .3s ease-out; + transition: all .3s ease-out; + color: #999999; } + .next-input-control .next-icon-success-filling { + color: #46BC15; } + .next-input-control .next-icon-loading { + color: #4494F9; } + .next-input-label { + color: #666666; } + .next-input input::-moz-placeholder, + .next-input textarea::-moz-placeholder { + color: #999999; + opacity: 1; } + .next-input input:-ms-input-placeholder, + .next-input textarea:-ms-input-placeholder { + color: #999999; } + .next-input input::-webkit-input-placeholder, + .next-input textarea::-webkit-input-placeholder { + color: #999999; } + .next-input.next-disabled { + color: #CCCCCC; + border-color: #E6E7EB; + background-color: #F7F8FA; + cursor: not-allowed; + background-color: #F7F8FA; } + .next-input.next-disabled:hover { + border-color: #E6E7EB; + background-color: #F7F8FA; } + .next-input.next-disabled input::-moz-placeholder, .next-input.next-disabled textarea::-moz-placeholder { + color: #CCCCCC; + opacity: 1; } + .next-input.next-disabled input:-ms-input-placeholder, .next-input.next-disabled textarea:-ms-input-placeholder { + color: #CCCCCC; } + .next-input.next-disabled input::-webkit-input-placeholder, .next-input.next-disabled textarea::-webkit-input-placeholder { + color: #CCCCCC; } + .next-input.next-disabled .next-input-label { + color: #CCCCCC; } + .next-input.next-disabled .next-input-len { + color: #CCCCCC; } + .next-input.next-disabled input, + .next-input.next-disabled textarea { + color: #CCCCCC; + border-color: #E6E7EB; + background-color: #F7F8FA; + cursor: not-allowed; } + .next-input.next-disabled input:hover, + .next-input.next-disabled textarea:hover { + border-color: #E6E7EB; + background-color: #F7F8FA; } + .next-input.next-disabled .next-input-hint-wrap { + color: #CCCCCC; } + .next-input.next-disabled .next-input-hint-wrap .next-input-clear { + opacity: 0; } + .next-input.next-disabled .next-input-hint-wrap .next-input-hint { + opacity: 1; } + .next-input.next-disabled .next-input-hint-wrap .next-icon-delete-filling:hover { + cursor: not-allowed; + color: #CCCCCC; } + .next-input.next-disabled .next-icon { + color: #CCCCCC; } + .next-input-inner, .next-input-control, .next-input-label { + display: table-cell; + width: 1px; + vertical-align: middle; + line-height: 1; + background-color: transparent; + white-space: nowrap; } + .next-input-group { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-table; + border-collapse: separate; + border-spacing: 0; + line-height: 0; + width: 100%; } + .next-input-group *, + .next-input-group *:before, + .next-input-group *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-input-group-auto-width { + width: 100%; + border-radius: 0 !important; } + .next-input-group > .next-input:first-child.next-small { + border-top-left-radius: 3px !important; + border-bottom-left-radius: 3px !important; } + .next-input-group > .next-input:first-child.next-medium { + border-top-left-radius: 3px !important; + border-bottom-left-radius: 3px !important; } + .next-input-group > .next-input:first-child.next-large { + border-top-left-radius: 3px !important; + border-bottom-left-radius: 3px !important; } + .next-input-group > .next-input:last-child.next-small { + border-top-right-radius: 3px !important; + border-bottom-right-radius: 3px !important; } + .next-input-group > .next-input:last-child.next-medium { + border-top-right-radius: 3px !important; + border-bottom-right-radius: 3px !important; } + .next-input-group > .next-input:last-child.next-large { + border-top-right-radius: 3px !important; + border-bottom-right-radius: 3px !important; } + .next-input-group-addon { + width: 1px; + display: table-cell; + vertical-align: middle; + white-space: nowrap; + /* stylelint-disable declaration-no-important */ } + .next-input-group-addon:first-child { + border-bottom-right-radius: 0 !important; + border-top-right-radius: 0 !important; } + .next-input-group-addon:first-child > * { + border-bottom-right-radius: 0 !important; + border-top-right-radius: 0 !important; } + .next-input-group-addon:last-child { + border-bottom-left-radius: 0 !important; + border-top-left-radius: 0 !important; } + .next-input-group-addon:last-child > * { + border-bottom-left-radius: 0 !important; + border-top-left-radius: 0 !important; } + .next-input-group-text { + color: #999999; + background-color: #F2F3F7; + text-align: center; + border: 1px solid #C4C6CF; + padding: 0 8px; } + .next-input-group-text:first-child { + border-right-width: 0; } + .next-input-group-text:last-child { + border-left-width: 0; } + .next-input-group-text.next-disabled { + color: #CCCCCC; + border-color: #E6E7EB; + background-color: #F7F8FA; + cursor: not-allowed; } + .next-input-group-text.next-disabled:hover { + border-color: #E6E7EB; + background-color: #F7F8FA; } + .next-input-group-text.next-small { + font-size: 12px; + border-radius: 3px; } + .next-input-group-text.next-medium { + font-size: 12px; + border-radius: 3px; } + .next-input-group-text.next-large { + font-size: 16px; + border-radius: 3px; } + +.next-input[dir="rtl"].next-small .next-input-label { + padding-left: 0; + padding-right: 8px; } + +.next-input[dir="rtl"].next-small .next-input-control { + padding-right: 0; + padding-left: 4px; } + +.next-input[dir="rtl"].next-medium .next-input-label { + padding-left: 0; + padding-right: 8px; } + +.next-input[dir="rtl"].next-medium .next-input-control { + padding-right: 0; + padding-left: 8px; } + +.next-input[dir="rtl"].next-large .next-input-label { + padding-left: 0; + padding-right: 12px; } + +.next-input[dir="rtl"].next-large .next-input-control { + padding-right: 0; + padding-left: 8px; } + +.next-input[dir="rtl"].next-input-textarea .next-input-len { + text-align: left; } + +.next-input[dir="rtl"] .next-input-control > *:not(:last-child) { + padding-left: 4px; + padding-right: 0; } + +.next-input-group[dir="rtl"] .next-input-group-addon { + /* stylelint-disable declaration-no-important */ } + .next-input-group[dir="rtl"] .next-input-group-addon:first-child { + border-bottom-left-radius: 0 !important; + border-top-left-radius: 0 !important; } + .next-input-group[dir="rtl"] .next-input-group-addon:first-child.next-small { + border-bottom-right-radius: 3px !important; + border-top-right-radius: 3px !important; } + .next-input-group[dir="rtl"] .next-input-group-addon:first-child.next-medium { + border-bottom-right-radius: 3px !important; + border-top-right-radius: 3px !important; } + .next-input-group[dir="rtl"] .next-input-group-addon:first-child.next-large { + border-bottom-right-radius: 3px !important; + border-top-right-radius: 3px !important; } + .next-input-group[dir="rtl"] .next-input-group-addon:last-child { + border-bottom-right-radius: 0 !important; + border-top-right-radius: 0 !important; } + .next-input-group[dir="rtl"] .next-input-group-addon:last-child.next-small { + border-bottom-left-radius: 3px !important; + border-top-left-radius: 3px !important; } + .next-input-group[dir="rtl"] .next-input-group-addon:last-child.next-medium { + border-bottom-left-radius: 3px !important; + border-top-left-radius: 3px !important; } + .next-input-group[dir="rtl"] .next-input-group-addon:last-child.next-large { + border-bottom-left-radius: 3px !important; + border-top-left-radius: 3px !important; } + +.next-input-group[dir="rtl"] .next-input-group-text:first-child { + border-right-width: 1px; + border-left: 0; } + +.next-input-group[dir="rtl"] .next-input-group-text:last-child { + border-left-width: 1px; + border-right: 0; } + +.next-select { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; + font-size: 0; + vertical-align: middle; + /* Select trigger */ + /* 弹层 */ + /* 全选按钮 */ + /* -------------- IE polyfill -------------- */ + /* 根据最新的数据，在中国，PC 端的 IE9 份额为 2%， */ + /* 所以不应该因为 IE9 而不使用 flex，而是应该做降级 polyfill */ + /* @see http://gs.statcounter.com/ */ + /* IE10、IE11 虽然支持 flex，但还是会有各种各样奇奇怪怪的问题 */ } + .next-select *, + .next-select *:before, + .next-select *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-select-trigger { + min-width: 100px; + outline: 0; + -webkit-transition: all .3s ease; + transition: all .3s ease; } + .next-select-trigger .next-input-label { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: auto; } + .next-select-trigger .next-select-values { + display: block; + width: 100%; + -webkit-box-flex: 1; + -ms-flex: 1 1 0px; + flex: 1 1 0; + overflow: hidden; } + .next-select-trigger .next-select-values > em { + font-style: inherit; } + .next-select-trigger .next-select-values input { + padding-left: 0; + padding-right: 0; } + .next-select-trigger .next-input-control { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: auto; } + .next-select-trigger .next-input-control > * { + display: inline-block; + width: auto; } + .next-select-trigger .next-input-control > .next-select-arrow { + padding-right: 0; } + .next-select-trigger .next-input.next-disabled em { + color: #CCCCCC; } + .next-select-trigger .next-input.next-disabled .next-select-arrow { + cursor: not-allowed; } + .next-select-trigger .next-select-clear { + display: none; } + .next-select-trigger.next-has-clear:hover .next-select-clear { + display: inline-block; } + .next-select-trigger.next-has-clear:hover .next-select-arrow { + display: none; } + .next-select .next-select-inner { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 100%; + min-width: 100px; + outline: 0; + color: #333333; } + .next-select .next-select-inner .next-tag { + line-height: 1; + margin-right: 4px; + margin-bottom: 3px; + padding-left: 4px; + padding-right: 4px; } + .next-select-trigger-search { + position: relative; + display: inline-block; + vertical-align: top; + overflow: hidden; + width: 100%; + max-width: 100%; } + .next-select-trigger-search > input, .next-select-trigger-search > span { + display: block; + font-size: inherit; + font-family: inherit; + letter-spacing: inherit; + white-space: nowrap; + overflow: hidden; } + .next-select-trigger-search input { + position: absolute; + background-color: transparent; + width: 100%; + height: 100% !important; + z-index: 1; + left: 0; + border: 0; + outline: 0; + margin: 0; + padding: 0; + cursor: inherit; } + .next-select-trigger-search > span { + position: relative; + visibility: hidden; + white-space: pre; + max-width: 100%; + /* 在 table 布局中，100% 并没有什么x用 */ + z-index: -1; } + .next-select-single { + /* 搜索框激活时，展开后不显示值，只显示搜索框 */ + /* 搜索框未激活，或者menu未展开，如果有值，则不显示搜索(placeholder) */ } + .next-select-single.next-no-search { + cursor: pointer; } + .next-select-single.next-has-search.next-active .next-select-values > em { + display: none; } + .next-select-single.next-no-search .next-select-values > em + .next-select-trigger-search, .next-select-single.next-inactive .next-select-values > em + .next-select-trigger-search { + width: 1px; + opacity: 0; + filter: alpha(opacity=0); + /* for IE 9 */ } + .next-select-single.next-no-search .next-select-trigger-search input, .next-select-single.next-inactive .next-select-trigger-search input { + color: transparent; } + .next-select-single .next-select-values { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } + .next-select-single .next-select-values > em { + vertical-align: middle; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + .next-select-multiple, .next-select-tag { + /* 如果有值，则搜索框变为1px */ } + .next-select-multiple .next-select-values, .next-select-tag .next-select-values { + /* Tag 有 3px 的 margin-bottom，所以包裹 Tag 的容器要作一下处理 */ + margin-bottom: -3px; + height: auto !important; } + .next-select-multiple .next-select-trigger-search, .next-select-tag .next-select-trigger-search { + margin-bottom: 3px; } + .next-select-multiple .next-tag + .next-select-trigger-search, .next-select-tag .next-tag + .next-select-trigger-search { + width: auto; + min-width: 1px; + /* 保留一个光标的宽度 */ } + .next-select-multiple .next-input, .next-select-tag .next-input { + height: auto; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: start; } + .next-select-multiple.next-small .next-select-values, .next-select-tag.next-small .next-select-values { + min-height: 18px; + padding-top: 2px; + padding-bottom: 2px; + line-height: 14px; } + .next-select-multiple.next-small .next-tag, .next-select-tag.next-small .next-tag { + border: 0; + padding-top: 0px; + padding-bottom: 0px; + height: 14px; } + .next-select-multiple.next-small .next-tag .next-tag-body, .next-select-multiple.next-small .next-tag .next-tag-close-btn, .next-select-tag.next-small .next-tag .next-tag-body, .next-select-tag.next-small .next-tag .next-tag-close-btn { + line-height: 14px; } + .next-select-multiple.next-small .next-tag-body, .next-select-tag.next-small .next-tag-body { + line-height: 14px; } + .next-select-multiple.next-small .next-input-label, .next-select-multiple.next-small .next-input-control, .next-select-tag.next-small .next-input-label, .next-select-tag.next-small .next-input-control { + line-height: 18px; } + .next-select-multiple.next-medium .next-select-values, .next-select-tag.next-medium .next-select-values { + min-height: 26px; + padding-top: 3px; + padding-bottom: 3px; + line-height: 20px; } + .next-select-multiple.next-medium .next-tag, .next-select-tag.next-medium .next-tag { + padding-top: 1px; + padding-bottom: 1px; + height: 20px; } + .next-select-multiple.next-medium .next-tag .next-tag-body, .next-select-multiple.next-medium .next-tag .next-tag-close-btn, .next-select-tag.next-medium .next-tag .next-tag-body, .next-select-tag.next-medium .next-tag .next-tag-close-btn { + line-height: 18px; } + .next-select-multiple.next-medium .next-input-label, .next-select-multiple.next-medium .next-input-control, .next-select-tag.next-medium .next-input-label, .next-select-tag.next-medium .next-input-control { + line-height: 26px; } + .next-select-multiple.next-large .next-select-values, .next-select-tag.next-large .next-select-values { + min-height: 38px; + padding-top: 7px; + padding-bottom: 7px; + line-height: 24px; } + .next-select-multiple.next-large .next-tag, .next-select-tag.next-large .next-tag { + padding-top: 3px; + padding-bottom: 3px; + height: 24px; } + .next-select-multiple.next-large .next-tag .next-tag-body, .next-select-multiple.next-large .next-tag .next-tag-close-btn, .next-select-tag.next-large .next-tag .next-tag-body, .next-select-tag.next-large .next-tag .next-tag-close-btn { + line-height: 18px; } + .next-select-multiple.next-large .next-input-label, .next-select-multiple.next-large .next-input-control, .next-select-tag.next-large .next-input-label, .next-select-tag.next-large .next-input-control { + line-height: 38px; } + .next-select.next-no-search { + /* 在搜索框未激活时，将 input 的 color 置为透明 */ + /* ISSUE: 在 firefox 中，readonly 的 input 仍然会显示光标 */ } + .next-select.next-no-search .next-select-trigger-search input { + color: transparent; } + .next-select-auto-complete { + width: 160px; } + .next-select-auto-complete .next-input { + width: 100%; + /* table-cell 下 margin 无效 */ } + .next-select-auto-complete .next-input .next-input-hint-wrap { + padding-right: 1px; } + .next-select-auto-complete .next-input .next-select-arrow { + padding-left: 0; } + .next-select.next-active .next-select-arrow { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + .next-select-arrow { + cursor: pointer; + width: auto !important; + text-align: center; + -webkit-transition: all .3s ease; + transition: all .3s ease; + /* transform-origin: center 41.8%; // icon 图像中心 */ } + .next-select-menu-wrapper { + max-height: 260px; + overflow: auto; + border: 1px solid #DCDEE3; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; } + .next-select-menu-wrapper .next-select-menu { + max-height: none; + border: none; } + .next-select-menu { + max-height: 260px; + overflow: auto; + /* autoComplete 没有选项时 menu 不显示 */ } + .next-select-menu .next-select-menu-empty-content { + padding-left: 8px; + padding-right: 8px; + color: #999999; } + .next-select-menu.next-select-auto-complete-menu.next-select-menu-empty { + display: none; } + .next-select-menu .next-menu-item-text .next-icon { + vertical-align: middle; } + .next-select-all { + display: block; + cursor: pointer; + padding: 0 8px; + margin: 0 12px 8px; + border-bottom: 1px solid #DCDEE3; } + .next-select-all:hover { + color: #3E71F7; } + .next-select-all .next-menu-icon-selected.next-icon { + display: inline-block !important; + top: initial; + color: #5584FF; } + .next-select-highlight { + color: #5584FF; + font-size: 12px; } + .next-select-in-ie.next-select-trigger .next-select-values { + /* 在 table 布局中，overflow: hidden 会导致负的 margin 失效 */ + overflow: visible; } + .next-select-in-ie.next-select-trigger .next-input-control, .next-select-in-ie.next-select-trigger .next-input-label { + width: 1px; } + .next-select-in-ie.next-select-trigger .next-input-control > * { + display: table-cell; + width: 1%; } + .next-select-in-ie.next-select-trigger .next-select-arrow { + display: table-cell; } + .next-select-in-ie.next-select-trigger .next-select-clear { + display: none; } + .next-select-in-ie.next-select-trigger.next-select-multiple .next-select-inner, .next-select-in-ie.next-select-trigger.next-select-tag .next-select-inner { + vertical-align: top; } + .next-select-in-ie.next-select-trigger .next-select-inner { + display: inline-table; } + .next-select-in-ie.next-select-trigger.next-select-single .next-select-values { + display: inline-table; } + .next-select-in-ie.next-select-trigger.next-select-single .next-input.next-small .next-select-values { + line-height: 20px; } + .next-select-in-ie.next-select-trigger.next-select-single .next-input.next-medium .next-select-values { + line-height: 28px; } + .next-select-in-ie.next-select-trigger.next-select-single .next-input.next-large .next-select-values { + line-height: 40px; } + .next-select-in-ie.next-select-trigger .next-select-trigger-search > span { + max-width: 100px; } + .next-select-in-ie.next-select-trigger.next-select-single { + /* 搜索框未激活，或者menu未展开，如果有值，则不显示搜索(placeholder) */ } + .next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values { + position: relative; } + .next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values > em { + position: absolute; + display: inline-block; + height: 100%; + line-height: 1; + vertical-align: middle; + overflow: hidden; + left: 4px; + right: 0; + top: 30%; } + .next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-values > em + .next-select-trigger-search, .next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-values > em + .next-select-trigger-search { + filter: alpha(opacity=0); + /* for IE 9 */ + font-size: 0; } + .next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-trigger-search input, .next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-trigger-search input { + color: inherit; } + .next-select-in-ie.next-select-trigger.next-no-search .next-select-trigger-search input { + color: inherit; } + +.next-calendar { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-calendar *, + .next-calendar *:before, + .next-calendar *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-calendar table { + border-collapse: collapse; + border-spacing: 0; } + .next-calendar td, + .next-calendar th { + padding: 0; } + +@-webkit-keyframes cellZoomIn { + 0% { + -webkit-transform: scale(0.5); + transform: scale(0.5); } + 100% { + -webkit-transform: scale(1); + transform: scale(1); } } + +@keyframes cellZoomIn { + 0% { + -webkit-transform: scale(0.5); + transform: scale(0.5); } + 100% { + -webkit-transform: scale(1); + transform: scale(1); } } + +@-webkit-keyframes cellHover { + 0% { + opacity: 0; } + 100% { + opacity: 1; } } + +@keyframes cellHover { + 0% { + opacity: 0; } + 100% { + opacity: 1; } } + +@-webkit-keyframes enterToLeft { + 0% { + -webkit-transform: translate(-40%); + transform: translate(-40%); + opacity: 0; } + 50% { + opacity: .6; } + 100% { + opacity: 1; + -webkit-transform: translate(0%); + transform: translate(0%); } } + +@keyframes enterToLeft { + 0% { + -webkit-transform: translate(-40%); + transform: translate(-40%); + opacity: 0; } + 50% { + opacity: .6; } + 100% { + opacity: 1; + -webkit-transform: translate(0%); + transform: translate(0%); } } + +@-webkit-keyframes enterToRight { + 0% { + -webkit-transform: translate(40%); + transform: translate(40%); + opacity: 0; } + 50% { + opacity: .6; } + 100% { + opacity: 1; + -webkit-transform: translate(0%); + transform: translate(0%); } } + +@keyframes enterToRight { + 0% { + -webkit-transform: translate(40%); + transform: translate(40%); + opacity: 0; } + 50% { + opacity: .6; } + 100% { + opacity: 1; + -webkit-transform: translate(0%); + transform: translate(0%); } } + +.next-calendar-fullscreen .next-calendar-header, .next-calendar-card .next-calendar-header { + text-align: right; } + .next-calendar-fullscreen .next-calendar-header .next-select, .next-calendar-card .next-calendar-header .next-select { + margin-right: 4px; + vertical-align: top; } + .next-calendar-fullscreen .next-calendar-header .next-menu, .next-calendar-card .next-calendar-header .next-menu { + text-align: left; } + +.next-calendar-fullscreen .next-calendar-header { + margin-bottom: 8px; } + +.next-calendar-card .next-calendar-header { + margin-bottom: 8px; } + +.next-calendar-panel-header { + position: relative; + background: #5584FF; + margin-bottom: 8px; + border-bottom: 1px solid transparent; } + .next-calendar-panel-header-left, .next-calendar-panel-header-right, .next-calendar-panel-header-full { + height: 32px; + line-height: 32px; } + .next-calendar-panel-header-left .next-calendar-btn, .next-calendar-panel-header-right .next-calendar-btn, .next-calendar-panel-header-full .next-calendar-btn { + vertical-align: top; + font-weight: bold; + margin: 0 4px; + background-color: transparent; + border-color: transparent; } + .next-calendar-panel-header-left .next-calendar-btn, .next-calendar-panel-header-left .next-calendar-btn:link, .next-calendar-panel-header-left .next-calendar-btn:visited, .next-calendar-panel-header-left .next-calendar-btn.visited, .next-calendar-panel-header-right .next-calendar-btn, .next-calendar-panel-header-right .next-calendar-btn:link, .next-calendar-panel-header-right .next-calendar-btn:visited, .next-calendar-panel-header-right .next-calendar-btn.visited, .next-calendar-panel-header-full .next-calendar-btn, .next-calendar-panel-header-full .next-calendar-btn:link, .next-calendar-panel-header-full .next-calendar-btn:visited, .next-calendar-panel-header-full .next-calendar-btn.visited { + color: #FFFFFF; } + .next-calendar-panel-header-left .next-calendar-btn:focus, .next-calendar-panel-header-left .next-calendar-btn:hover, .next-calendar-panel-header-left .next-calendar-btn.hover, .next-calendar-panel-header-left .next-calendar-btn:active, .next-calendar-panel-header-left .next-calendar-btn.active, .next-calendar-panel-header-right .next-calendar-btn:focus, .next-calendar-panel-header-right .next-calendar-btn:hover, .next-calendar-panel-header-right .next-calendar-btn.hover, .next-calendar-panel-header-right .next-calendar-btn:active, .next-calendar-panel-header-right .next-calendar-btn.active, .next-calendar-panel-header-full .next-calendar-btn:focus, .next-calendar-panel-header-full .next-calendar-btn:hover, .next-calendar-panel-header-full .next-calendar-btn.hover, .next-calendar-panel-header-full .next-calendar-btn:active, .next-calendar-panel-header-full .next-calendar-btn.active { + color: #FFFFFF; + background-color: transparent; + border-color: transparent; + text-decoration: none; } + .next-calendar-panel-header-left, .next-calendar-panel-header-right { + display: inline-block; + width: 50%; + text-align: center; } + .next-calendar-panel-header-full { + width: 100%; + text-align: center; } + +.next-calendar-btn { + cursor: pointer; + padding: 0; + margin: 0; + border: 0; + background: transparent; + outline: none; + height: 100%; } + .next-calendar-btn > .next-icon.next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-calendar-btn-prev-year, .next-calendar-btn-prev-month, .next-calendar-btn-prev-decade, .next-calendar-btn-next-month, .next-calendar-btn-next-year, .next-calendar-btn-next-decade { + position: absolute; + top: 0; + background-color: transparent; + border-color: transparent; } + .next-calendar-btn-prev-year, .next-calendar-btn-prev-year:link, .next-calendar-btn-prev-year:visited, .next-calendar-btn-prev-year.visited, .next-calendar-btn-prev-month, .next-calendar-btn-prev-month:link, .next-calendar-btn-prev-month:visited, .next-calendar-btn-prev-month.visited, .next-calendar-btn-prev-decade, .next-calendar-btn-prev-decade:link, .next-calendar-btn-prev-decade:visited, .next-calendar-btn-prev-decade.visited, .next-calendar-btn-next-month, .next-calendar-btn-next-month:link, .next-calendar-btn-next-month:visited, .next-calendar-btn-next-month.visited, .next-calendar-btn-next-year, .next-calendar-btn-next-year:link, .next-calendar-btn-next-year:visited, .next-calendar-btn-next-year.visited, .next-calendar-btn-next-decade, .next-calendar-btn-next-decade:link, .next-calendar-btn-next-decade:visited, .next-calendar-btn-next-decade.visited { + color: #FFFFFF; } + .next-calendar-btn-prev-year:focus, .next-calendar-btn-prev-year:hover, .next-calendar-btn-prev-year.hover, .next-calendar-btn-prev-year:active, .next-calendar-btn-prev-year.active, .next-calendar-btn-prev-month:focus, .next-calendar-btn-prev-month:hover, .next-calendar-btn-prev-month.hover, .next-calendar-btn-prev-month:active, .next-calendar-btn-prev-month.active, .next-calendar-btn-prev-decade:focus, .next-calendar-btn-prev-decade:hover, .next-calendar-btn-prev-decade.hover, .next-calendar-btn-prev-decade:active, .next-calendar-btn-prev-decade.active, .next-calendar-btn-next-month:focus, .next-calendar-btn-next-month:hover, .next-calendar-btn-next-month.hover, .next-calendar-btn-next-month:active, .next-calendar-btn-next-month.active, .next-calendar-btn-next-year:focus, .next-calendar-btn-next-year:hover, .next-calendar-btn-next-year.hover, .next-calendar-btn-next-year:active, .next-calendar-btn-next-year.active, .next-calendar-btn-next-decade:focus, .next-calendar-btn-next-decade:hover, .next-calendar-btn-next-decade.hover, .next-calendar-btn-next-decade:active, .next-calendar-btn-next-decade.active { + color: #FFFFFF; + background-color: transparent; + border-color: transparent; + text-decoration: none; } + +.next-calendar-btn-prev-decade, .next-calendar-btn-prev-year { + left: 8px; } + +.next-calendar-btn-prev-month { + left: 28px; } + +.next-calendar-btn-next-month { + right: 28px; } + +.next-calendar-btn-next-year, .next-calendar-btn-next-decade { + right: 8px; } + +.next-calendar-fullscreen .next-calendar-th { + text-align: right; + color: #333333; + font-size: 16px; + font-weight: bold; + padding-right: 12px; + padding-bottom: 4px; } + +.next-calendar-fullscreen .next-calendar-cell { + font-size: 14px; } + .next-calendar-fullscreen .next-calendar-cell.next-selected .next-calendar-date, + .next-calendar-fullscreen .next-calendar-cell.next-selected .next-calendar-month { + font-weight: bold; + background: #DEE8FF; + color: #5584FF; + border-color: #5584FF; } + .next-calendar-fullscreen .next-calendar-cell.next-disabled .next-calendar-date, + .next-calendar-fullscreen .next-calendar-cell.next-disabled .next-calendar-month { + cursor: not-allowed; + background: #F7F8FA; + color: #CCCCCC; + border-color: #E6E7EB; } + +.next-calendar-fullscreen .next-calendar-date, .next-calendar-fullscreen .next-calendar-month { + text-align: right; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin: 0 4px; + padding: 4px 8px; + min-height: 80px; + border-top: 2px solid; + -webkit-transition: background .3s ease; + transition: background .3s ease; + background: #FFFFFF; + color: #333333; + border-color: #DCDEE3; } + .next-calendar-fullscreen .next-calendar-date:hover, .next-calendar-fullscreen .next-calendar-month:hover { + background: #DEE8FF; + color: #5584FF; + border-color: #5584FF; } + +.next-calendar-fullscreen .next-calendar-cell-prev-month .next-calendar-date, .next-calendar-fullscreen .next-calendar-cell-next-month .next-calendar-date { + background: transparent; + color: #CCCCCC; + border-color: transparent; } + +.next-calendar-fullscreen .next-calendar-cell-current .next-calendar-date, +.next-calendar-fullscreen .next-calendar-cell-current .next-calendar-month { + font-weight: bold; + background: #FFFFFF; + color: #5584FF; + border-color: #5584FF; } + +.next-calendar-card .next-calendar-th, +.next-calendar-panel .next-calendar-th, +.next-calendar-range .next-calendar-th { + text-align: center; + color: #999999; + font-size: 12px; + font-weight: normal; } + +.next-calendar-card .next-calendar-cell, +.next-calendar-panel .next-calendar-cell, +.next-calendar-range .next-calendar-cell { + text-align: center; + font-size: 12px; } + .next-calendar-card .next-calendar-cell.next-selected .next-calendar-date, + .next-calendar-card .next-calendar-cell.next-selected .next-calendar-month, + .next-calendar-card .next-calendar-cell.next-selected .next-calendar-year, + .next-calendar-panel .next-calendar-cell.next-selected .next-calendar-date, + .next-calendar-panel .next-calendar-cell.next-selected .next-calendar-month, + .next-calendar-panel .next-calendar-cell.next-selected .next-calendar-year, + .next-calendar-range .next-calendar-cell.next-selected .next-calendar-date, + .next-calendar-range .next-calendar-cell.next-selected .next-calendar-month, + .next-calendar-range .next-calendar-cell.next-selected .next-calendar-year { + -webkit-animation: cellZoomIn 0.4s cubic-bezier(0.23, 1, 0.32, 1); + animation: cellZoomIn 0.4s cubic-bezier(0.23, 1, 0.32, 1); + font-weight: bold; + background: #5584FF; + color: #FFFFFF; + border-color: #5584FF; } + .next-calendar-card .next-calendar-cell.next-disabled .next-calendar-date, + .next-calendar-card .next-calendar-cell.next-disabled .next-calendar-month, + .next-calendar-card .next-calendar-cell.next-disabled .next-calendar-year, + .next-calendar-panel .next-calendar-cell.next-disabled .next-calendar-date, + .next-calendar-panel .next-calendar-cell.next-disabled .next-calendar-month, + .next-calendar-panel .next-calendar-cell.next-disabled .next-calendar-year, + .next-calendar-range .next-calendar-cell.next-disabled .next-calendar-date, + .next-calendar-range .next-calendar-cell.next-disabled .next-calendar-month, + .next-calendar-range .next-calendar-cell.next-disabled .next-calendar-year { + cursor: not-allowed; + background: #F7F8FA; + color: #CCCCCC; + border-color: #F7F8FA; } + .next-calendar-card .next-calendar-cell.next-inrange .next-calendar-date, + .next-calendar-panel .next-calendar-cell.next-inrange .next-calendar-date, + .next-calendar-range .next-calendar-cell.next-inrange .next-calendar-date { + background: #DEE8FF; + color: #5584FF; + border-color: #DEE8FF; } + +.next-calendar-card .next-calendar-date, .next-calendar-card .next-calendar-month, .next-calendar-card .next-calendar-year, +.next-calendar-panel .next-calendar-date, +.next-calendar-panel .next-calendar-month, +.next-calendar-panel .next-calendar-year, +.next-calendar-range .next-calendar-date, +.next-calendar-range .next-calendar-month, +.next-calendar-range .next-calendar-year { + text-align: center; + border: 1px solid; + background: #FFFFFF; + color: #666666; + border-color: #FFFFFF; } + .next-calendar-card .next-calendar-date:hover, .next-calendar-card .next-calendar-month:hover, .next-calendar-card .next-calendar-year:hover, + .next-calendar-panel .next-calendar-date:hover, + .next-calendar-panel .next-calendar-month:hover, + .next-calendar-panel .next-calendar-year:hover, + .next-calendar-range .next-calendar-date:hover, + .next-calendar-range .next-calendar-month:hover, + .next-calendar-range .next-calendar-year:hover { + cursor: pointer; } + .next-calendar-card .next-calendar-date:hover, .next-calendar-card .next-calendar-month:hover, .next-calendar-card .next-calendar-year:hover, + .next-calendar-panel .next-calendar-date:hover, + .next-calendar-panel .next-calendar-month:hover, + .next-calendar-panel .next-calendar-year:hover, + .next-calendar-range .next-calendar-date:hover, + .next-calendar-range .next-calendar-month:hover, + .next-calendar-range .next-calendar-year:hover { + background: #DEE8FF; + color: #5584FF; + border-color: #DEE8FF; } + +.next-calendar-card .next-calendar-date, +.next-calendar-panel .next-calendar-date, +.next-calendar-range .next-calendar-date { + width: 24px; + height: 24px; + line-height: 22px; + margin: 4px auto; + border-radius: 3px; } + +.next-calendar-card .next-calendar-month, +.next-calendar-panel .next-calendar-month, +.next-calendar-range .next-calendar-month { + width: 60px; + height: 24px; + line-height: 22px; + margin: 8px auto; + border-radius: 3px; } + +.next-calendar-card .next-calendar-year, +.next-calendar-panel .next-calendar-year, +.next-calendar-range .next-calendar-year { + width: 48px; + height: 24px; + line-height: 22px; + margin: 8px auto; + border-radius: 3px; } + +.next-calendar-card .next-calendar-cell-prev-month .next-calendar-date, +.next-calendar-panel .next-calendar-cell-prev-month .next-calendar-date, +.next-calendar-range .next-calendar-cell-prev-month .next-calendar-date { + background: #FFFFFF; + color: #CCCCCC; + border-color: #FFFFFF; } + +.next-calendar-card .next-calendar-cell-next-month .next-calendar-date, +.next-calendar-panel .next-calendar-cell-next-month .next-calendar-date, +.next-calendar-range .next-calendar-cell-next-month .next-calendar-date { + background: #FFFFFF; + color: #CCCCCC; + border-color: #FFFFFF; } + +.next-calendar-card .next-calendar-cell-current .next-calendar-date, +.next-calendar-card .next-calendar-cell-current .next-calendar-month, +.next-calendar-card .next-calendar-cell-current .next-calendar-year, +.next-calendar-panel .next-calendar-cell-current .next-calendar-date, +.next-calendar-panel .next-calendar-cell-current .next-calendar-month, +.next-calendar-panel .next-calendar-cell-current .next-calendar-year, +.next-calendar-range .next-calendar-cell-current .next-calendar-date, +.next-calendar-range .next-calendar-cell-current .next-calendar-month, +.next-calendar-range .next-calendar-cell-current .next-calendar-year { + font-weight: bold; + background: #FFFFFF; + color: #5584FF; + border-color: transparent; } + +.next-calendar[dir='rtl'] .next-calendar-header { + text-align: left; } + .next-calendar[dir='rtl'] .next-calendar-header .next-select { + margin-right: 0; + margin-left: 4px; } + .next-calendar[dir='rtl'] .next-calendar-header .next-menu { + text-align: right; } + +.next-calendar[dir='rtl'] .next-calendar-btn-prev-decade, .next-calendar[dir='rtl'] .next-calendar-btn-prev-year { + left: auto; + right: 8px; } + +.next-calendar[dir='rtl'] .next-calendar-btn-prev-month { + left: auto; + right: 28px; } + +.next-calendar[dir='rtl'] .next-calendar-btn-next-month { + right: auto; + left: 28px; } + +.next-calendar[dir='rtl'] .next-calendar-btn-next-year, .next-calendar[dir='rtl'] .next-calendar-btn-next-decade { + right: auto; + left: 8px; } + +.next-calendar-fullscreen[dir='rtl'] .next-calendar-th { + text-align: left; + padding-left: 12px; + padding-right: 0; } + +.next-calendar-fullscreen[dir='rtl'] .next-calendar-date, .next-calendar-fullscreen[dir='rtl'] .next-calendar-month { + text-align: left; } + +.next-calendar-range[dir='rtl'] .next-calendar-body-left, .next-calendar-range[dir='rtl'] .next-calendar-body-right { + float: right; } + +.next-calendar-range[dir='rtl'] .next-calendar-body-left { + padding-right: 0; + padding-left: 8px; } + +.next-calendar-range[dir='rtl'] .next-calendar-body-right { + padding-left: 0; + padding-right: 8px; } + +.next-calendar { + /* range calendar */ + /* --------------- */ } + .next-calendar-table { + width: 100%; + table-layout: fixed; } + .next-calendar-range .next-calendar-body-left, .next-calendar-range .next-calendar-body-right { + float: left; + width: 50%; } + .next-calendar-range .next-calendar-body-left { + padding-right: 8px; } + .next-calendar-range .next-calendar-body-right { + padding-left: 8px; } + .next-calendar-range .next-calendar-body:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + +.next-card *, +.next-card *:before, +.next-card *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +.next-card, .next-card:before, .next-card:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +.next-card[dir="rtl"] .next-card-extra { + left: 0; + right: auto; } + +.next-card[dir="rtl"] .next-card-title:before { + right: 0; + left: auto; } + +.next-card[dir="rtl"] .next-card-subtitle { + float: left; + padding-right: 8px; + padding-left: 0; } + +.next-card[dir="rtl"] .next-card-head-show-bullet .next-card-title { + padding-left: 0; + padding-right: 8px; } + +.next-card { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-card *, + .next-card *:before, + .next-card *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-card { + min-width: 100px; + padding: 0 16px; + border: 1px solid #DCDEE3; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + background: #FFFFFF; } + .next-card-head { + background: #FFFFFF; } + .next-card-head-show-bullet .next-card-title { + padding-left: 8px; } + .next-card-head-show-bullet .next-card-title:before { + content: ''; + display: inline-block; + height: 16px; + width: 3px; + background: #5584FF; + position: absolute; + left: 0; + top: calc(50% - 16px / 2); } + .next-card-head-main { + position: relative; + margin-top: 8px; + margin-bottom: 0; + height: 40px; + line-height: 40px; } + .next-card-title { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 80%; + height: 100%; + color: #333333; + font-size: 16px; } + .next-card-subtitle { + font-size: 12px; + color: #666666; + padding-left: 8px; } + .next-card-extra { + position: absolute; + right: 0; + top: 0; + height: 100%; + font-size: 12px; + color: #5584FF; } + .next-card-body { + padding-bottom: 12px; } + .next-card-show-divider .next-card-head { + border-bottom: 1px solid #E6E7EB; } + .next-card-show-divider .next-card-body { + padding-top: 12px; } + .next-card-hide-divider .next-card-body { + padding-top: 0; } + .next-card-content { + overflow: hidden; + -webkit-transition: 0.3s all cubic-bezier(0.23, 1, 0.32, 1); + transition: 0.3s all cubic-bezier(0.23, 1, 0.32, 1); + position: relative; } + .next-card-footer .next-icon { + -webkit-transition: 0.3s all cubic-bezier(0.645, 0.045, 0.355, 1); + transition: 0.3s all cubic-bezier(0.645, 0.045, 0.355, 1); } + .next-card-footer .next-icon.expand { + -webkit-transform-origin: 50% 47%; + -ms-transform-origin: 50% 47%; + transform-origin: 50% 47%; + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + +.next-cascader { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; + overflow: auto; + border: 1px solid #DCDEE3; + border-radius: 3px; } + .next-cascader *, + .next-cascader *:before, + .next-cascader *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-cascader-inner:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + .next-cascader-menu-wrapper { + float: left; + overflow: auto; + width: 100px; + height: 192px; } + .next-cascader-menu-wrapper + .next-cascader-menu-wrapper { + border-left: 1px solid #DCDEE3; } + .next-cascader-menu { + position: relative; + padding: 0; + border: none; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + min-width: auto; + min-height: 100%; } + .next-cascader-menu.next-has-right-border { + border-right: 1px solid #DCDEE3; } + .next-cascader-menu-item.next-expanded { + color: #333333; + background-color: #F2F3F7; } + .next-cascader-menu-icon-right { + position: absolute; + top: 0; + right: 10px; + color: #666666; } + .next-cascader-menu-icon-right:hover { + color: #333333; } + .next-cascader-menu-icon-expand.next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-cascader-menu-icon-expand.next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-cascader-menu-icon-expand.next-icon:before { + width: 16px; + font-size: 16px; } } + .next-cascader-menu-icon-loading.next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-cascader-menu-item.next-expanded .next-cascader-menu-icon-right { + color: #333333; } + .next-cascader-menu-item.next-expanded .next-cascader-menu-icon-loading { + color: #5584FF; } + .next-cascader-filtered-list { + height: 192px; + padding: 0; + border: none; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + overflow: auto; } + .next-cascader-filtered-list .next-menu-item-inner { + overflow: visible; } + .next-cascader-filtered-item em { + color: #5584FF; + font-style: normal; } + +.next-cascader[dir="rtl"] .next-cascader-menu-wrapper { + float: right; + border-left: none; + border-right: 1px solid #DCDEE3; } + .next-cascader[dir="rtl"] .next-cascader-menu-wrapper:first-child { + border-right: none; } + +.next-cascader[dir="rtl"] .next-cascader-menu.next-has-right-border { + border-right: none; + border-left: 1px solid #DCDEE3; } + +.next-cascader[dir="rtl"] .next-cascader-menu-icon-right { + right: auto; + left: 10px; } + +.next-cascader-select { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-cascader-select *, + .next-cascader-select *:before, + .next-cascader-select *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-cascader-select-dropdown { + -webkit-box-sizing: border-box; + box-sizing: border-box; + border: 1px solid #DCDEE3; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; } + .next-cascader-select-dropdown *, + .next-cascader-select-dropdown *:before, + .next-cascader-select-dropdown *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-cascader-select-dropdown .next-cascader { + display: block; + border: none; + -webkit-box-shadow: none; + box-shadow: none; } + .next-cascader-select-not-found { + padding: 0; + border: none; + -webkit-box-shadow: none; + box-shadow: none; + overflow: auto; + color: #999999; } + .next-cascader-select-not-found .next-menu-item:hover { + color: #999999; + /* TODO */ + background: #FFFFFF; + cursor: default; } + +.next-collapse[dir=rtl] .next-collapse-panel-title { + padding: 8px 28px 8px 0; } + +.next-collapse[dir=rtl] .next-collapse-panel-icon { + left: inherit; + right: 12px; + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); + margin-left: 0; + margin-right: 0; } + .next-collapse[dir=rtl] .next-collapse-panel-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-collapse[dir=rtl] .next-collapse-panel-icon { + -webkit-transform: scale(0.5) rotate(270deg); + -ms-transform: scale(0.5) rotate(270deg); + transform: scale(0.5) rotate(270deg); + margin-left: -4px; + margin-right: -4px; } + .next-collapse[dir=rtl] .next-collapse-panel-icon:before { + width: 16px; + font-size: 16px; } } + +/* put your code here */ +.next-collapse { + -webkit-box-sizing: border-box; + box-sizing: border-box; + border: 1px solid #DCDEE3; + border-radius: 3px; + overflow: hidden; } + .next-collapse *, + .next-collapse *:before, + .next-collapse *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-collapse:focus, + .next-collapse *:focus { + outline: 0; } + .next-collapse-panel:not(:first-child) { + border-top: 1px solid #DCDEE3; } + .next-collapse .next-collapse-panel-icon { + position: absolute; + color: #333333; + -webkit-transition: -webkit-transform .3s; + transition: -webkit-transform .3s; + transition: transform .3s; + transition: transform .3s, -webkit-transform .3s; + left: 12px; + margin-top: -2px; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); + margin-left: 0; + margin-right: 0; } + .next-collapse .next-collapse-panel-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-collapse .next-collapse-panel-icon { + -webkit-transform: scale(0.5) rotate(90deg); + -ms-transform: scale(0.5) rotate(90deg); + transform: scale(0.5) rotate(90deg); + margin-left: -4px; + margin-right: -4px; } + .next-collapse .next-collapse-panel-icon:before { + width: 16px; + font-size: 16px; } } + .next-collapse-panel-title { + position: relative; + line-height: 20px; + background: #F2F3F7; + font-size: 14px; + font-weight: normal; + color: #333333; + cursor: pointer; + padding: 8px 0 8px 28px; + -webkit-transition: background .2s ease; + transition: background .2s ease; } + .next-collapse-panel-title:hover { + background: #EBECF0; + color: #333333; + font-weight: normal; } + .next-collapse-panel-title:hover .next-collapse-panel-icon { + color: #333333; } + .next-collapse-panel-content { + overflow: hidden; + height: 0; + padding: 0 16px; + background: #FFFFFF; + font-size: 12px; + color: #666666; + -webkit-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); + transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); + opacity: 0; } + .next-collapse-panel-expanded > .next-collapse-panel-content { + display: block; + padding: 12px 16px; + height: auto; + opacity: 1; } + .next-collapse .next-collapse-panel-icon.next-collapse-panel-icon-expanded { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); + margin-left: 0; + margin-right: 0; } + .next-collapse .next-collapse-panel-icon.next-collapse-panel-icon-expanded:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-collapse .next-collapse-panel-icon.next-collapse-panel-icon-expanded { + -webkit-transform: scale(0.5) rotate(180deg); + -ms-transform: scale(0.5) rotate(180deg); + transform: scale(0.5) rotate(180deg); + margin-left: -4px; + margin-right: -4px; } + .next-collapse .next-collapse-panel-icon.next-collapse-panel-icon-expanded:before { + width: 16px; + font-size: 16px; } } + .next-collapse-disabled { + border-color: #E6E7EB; } + .next-collapse-panel-disabled { + overflow: hidden; } + .next-collapse-panel-disabled:not(:first-child) { + border-color: #E6E7EB; } + .next-collapse-panel-disabled > .next-collapse-panel-title { + cursor: not-allowed; + color: #CCCCCC; + background: #F2F3F7; } + .next-collapse-panel-disabled .next-collapse-panel-icon { + color: #CCCCCC; } + .next-collapse-panel-disabled .next-collapse-panel-title:hover { + font-weight: normal; } + .next-collapse-panel-disabled .next-collapse-panel-title:hover .next-collapse-panel-icon { + color: #CCCCCC; } + .next-collapse-panel-disabled:hover { + color: #CCCCCC; + background: #F2F3F7; } + +.next-time-picker-menu { + float: left; + text-align: center; } + .next-time-picker-menu:not(:last-child) { + border-right: 1px solid #C4C6CF; } + .next-time-picker-menu-title { + cursor: default; + height: 28px; + line-height: 28px; + font-size: 12px; + font-weight: normal; + color: #999999; + background: #FFFFFF; } + .next-time-picker-menu ul { + position: relative; + overflow-y: auto; + list-style: none; + margin: 0; + padding: 0; + font-size: 12px; + height: 196px; } + .next-time-picker-menu-item { + cursor: pointer; + height: 28px; + line-height: 28px; + -webkit-transition: background .3s ease-out; + transition: background .3s ease-out; + color: #666666; + background: #FFFFFF; + outline: none; } + .next-time-picker-menu-item:hover { + color: #333333; + background: #F2F3F7; } + .next-time-picker-menu-item.next-selected { + font-weight: bold; + color: #666666; + background: #F2F3F7; } + .next-time-picker-menu-item.next-disabled { + cursor: not-allowed; + color: #CCCCCC; + background: #FFFFFF; } + +.next-time-picker-panel { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-time-picker-panel *, + .next-time-picker-panel *:before, + .next-time-picker-panel *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-time-picker-panel:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + .next-time-picker-panel-header { + border-bottom: 1px solid #DCDEE3; } + .next-time-picker-panel-input.next-input { + width: 100%; + padding: 6px; + border-color: transparent; + vertical-align: middle; } + .next-time-picker-panel-col-3 .next-time-picker-menu { + width: calc(100% / 3); } + .next-time-picker-panel-col-2 .next-time-picker-menu { + width: 50%; } + +.next-time-picker-body[dir="rtl"] .next-time-picker-menu { + float: right; } + .next-time-picker-body[dir="rtl"] .next-time-picker-menu:not(:last-child) { + border-right: none; + border-left: 1px solid #C4C6CF; } + +.next-time-picker { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; + width: 200px; } + .next-time-picker *, + .next-time-picker *:before, + .next-time-picker *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-time-picker-trigger .next-input { + width: 100%; } + .next-time-picker-body { + overflow: hidden; + width: 200px; + border: 1px solid #DCDEE3; + border-radius: 3px; + background: #FFFFFF; + -webkit-box-shadow: none; + box-shadow: none; } + +.next-range-picker-trigger-separator, .next-range-picker-panel-input-separator { + cursor: default; + display: inline-block; + text-align: center; + color: #CCCCCC; + width: 16px; + font-size: 12px; + vertical-align: middle; } + +.next-date-picker, .next-month-picker, .next-year-picker { + display: inline-block; + width: 200px; } + .next-date-picker-input, .next-month-picker-input, .next-year-picker-input { + width: 100%; } + .next-date-picker-body, .next-month-picker-body, .next-year-picker-body { + width: 288px; } + .next-date-picker-panel-input.next-input, .next-month-picker-panel-input.next-input, .next-year-picker-panel-input.next-input { + width: 100%; + background: transparent; } + +.next-date-picker-body.next-date-picker-body-show-time .next-date-picker-panel-input.next-input { + width: 49%; } + .next-date-picker-body.next-date-picker-body-show-time .next-date-picker-panel-input.next-input:first-child { + margin-right: 2%; } + +.next-range-picker { + display: inline-block; + width: 336px; } + .next-range-picker-input { + width: 100%; } + .next-range-picker-trigger { + border: 1px solid #C4C6CF; + background-color: #FFFFFF; } + .next-range-picker-trigger:hover { + border-color: #A0A2AD; + background-color: #FFFFFF; } + .next-range-picker-trigger.next-error { + border-color: #FF3000; } + .next-range-picker-trigger-input.next-input { + height: auto; + width: calc((100% - 16px) / 2); } + .next-range-picker.next-disabled .next-range-picker-trigger { + cursor: not-allowed; + color: #CCCCCC; + border-color: #E6E7EB; + background-color: #F7F8FA; + cursor: not-allowed; } + .next-range-picker.next-disabled .next-range-picker-trigger:hover { + border-color: #E6E7EB; + background-color: #F7F8FA; } + .next-range-picker.next-large .next-range-picker-trigger, .next-range-picker.next-large .next-range-picker-panel-input { + border-radius: 3px; } + .next-range-picker.next-medium .next-range-picker-trigger, .next-range-picker.next-medium .next-range-picker-panel-input { + border-radius: 3px; } + .next-range-picker.next-small .next-range-picker-trigger, .next-range-picker.next-small .next-range-picker-panel-input { + border-radius: 3px; } + .next-range-picker-body { + width: 600px; } + .next-range-picker-panel-input-start-date.next-input, .next-range-picker-panel-input-end-date.next-input { + width: calc((100% - 16px) / 2); } + +.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-start-date, .next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-end-date, .next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-start-time, .next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-end-time { + width: calc((100% - 16px - 16px) / 4); } + +.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-start-date { + margin-right: 8px; } + +.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-end-time { + margin-left: 8px; } + +.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + +.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-start, .next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-end { + width: 50%; + float: left; } + +.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-start { + border-right: 1px solid #DCDEE3; } + +.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-end { + border-left: 1px solid #DCDEE3; } + +.next-date-picker-body[dir="rtl"] .next-date-picker-panel-footer { + text-align: left; } + +.next-date-picker-body[dir="rtl"] .next-date-picker-panel-footer > .next-btn:not(:last-child) { + margin-right: 0; + margin-left: 16px; } + +.next-date-picker-body[dir="rtl"].next-date-picker-body-show-time .next-date-picker-panel-input.next-input:first-child { + margin-left: 2%; + margin-right: 0; } + +.next-date-picker-body[dir="rtl"].next-date-picker-body-show-time .next-time-picker-menu { + float: right; } + .next-date-picker-body[dir="rtl"].next-date-picker-body-show-time .next-time-picker-menu:not(:last-child) { + border-right: none; + border-left: 1px solid #C4C6CF; } + +.next-range-picker-body[dir="rtl"] .next-range-picker-panel-input { + text-align: right; } + +.next-range-picker-body[dir="rtl"] .next-date-picker-panel-footer { + text-align: left; } + +.next-range-picker-body[dir="rtl"] .next-date-picker-panel-footer > .next-btn:not(:last-child) { + margin-right: 0; + margin-left: 16px; } + +.next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-range-picker-panel-input-start-date { + margin-right: 0; + margin-left: 8px; } + +.next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-range-picker-panel-input-end-time { + margin-left: 0; + margin-right: 8px; } + +.next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-range-picker-panel-time-start, .next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-range-picker-panel-time-end { + float: right; } + +.next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-range-picker-panel-time-start { + border-right: none; + border-left: 1px solid #DCDEE3; } + +.next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-range-picker-panel-time-end { + border-left: none; + border-right: 1px solid #DCDEE3; } + +.next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-time-picker-menu { + float: right; } + .next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-time-picker-menu:not(:last-child) { + border-right: none; + border-left: 1px solid #C4C6CF; } + +.next-date-picker, .next-range-picker, .next-month-picker, .next-year-picker { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-date-picker *, + .next-date-picker *:before, + .next-date-picker *:after, .next-range-picker *, + .next-range-picker *:before, + .next-range-picker *:after, .next-month-picker *, + .next-month-picker *:before, + .next-month-picker *:after, .next-year-picker *, + .next-year-picker *:before, + .next-year-picker *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-date-picker-body, .next-range-picker-body, .next-month-picker-body, .next-year-picker-body { + border: 1px solid #DCDEE3; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + background: #FFFFFF; } + .next-date-picker-panel-header, .next-range-picker-panel-header, .next-month-picker-panel-header, .next-year-picker-panel-header { + padding: 6px; + text-align: center; } + .next-date-picker-panel-time, .next-range-picker-panel-time, .next-month-picker-panel-time, .next-year-picker-panel-time { + border-top: 1px solid #DCDEE3; } + .next-date-picker-panel-footer, .next-range-picker-panel-footer, .next-month-picker-panel-footer, .next-year-picker-panel-footer { + text-align: right; + padding: 8px 20px; + border-top: 1px solid #DCDEE3; } + .next-date-picker-panel-footer > .next-btn:not(:last-child), .next-range-picker-panel-footer > .next-btn:not(:last-child), .next-month-picker-panel-footer > .next-btn:not(:last-child), .next-year-picker-panel-footer > .next-btn:not(:last-child) { + margin-right: 16px; } + .next-date-picker .next-calendar-panel-header, .next-range-picker .next-calendar-panel-header, .next-month-picker .next-calendar-panel-header, .next-year-picker .next-calendar-panel-header { + margin-left: -1px; + margin-right: -1px; } + .next-date-picker .next-input input, .next-range-picker .next-input input, .next-month-picker .next-input input, .next-year-picker .next-input input { + vertical-align: baseline; } + +.next-message { + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: relative; + display: block; + vertical-align: baseline; } + .next-message *, + .next-message *:before, + .next-message *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-message:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + .next-message .next-message-close { + color: #999999; + font-size: 0; + position: absolute; } + .next-message .next-message-close .next-icon-close { + width: 12px; + height: 12px; + line-height: 12px; } + .next-message .next-message-close .next-icon-close:before { + width: 12px; + height: 12px; + font-size: 12px; + line-height: 12px; } + .next-message .next-message-close:hover { + color: #666666; } + .next-message.next-message-success.next-inline { + background-color: #E4FDDA; + border-color: #E4FDDA; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-success.next-inline .next-message-title { + color: #333333; } + .next-message.next-message-success.next-inline .next-message-content { + color: #666666; } + .next-message.next-message-success.next-inline .next-message-symbol { + color: #46BC15; } + .next-message.next-message-success.next-inline .next-message-symbol-icon::before { + content: "\E60A"; } + .next-message.next-message-success.next-addon { + background-color: transparent; + border-color: transparent; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-success.next-addon .next-message-title { + color: #333333; } + .next-message.next-message-success.next-addon .next-message-content { + color: #666666; } + .next-message.next-message-success.next-addon .next-message-symbol { + color: #46BC15; } + .next-message.next-message-success.next-addon .next-message-symbol-icon::before { + content: "\E60A"; } + .next-message.next-message-success.next-toast { + background-color: #FFFFFF; + border-color: #FFFFFF; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + border-style: solid; } + .next-message.next-message-success.next-toast .next-message-title { + color: #333333; } + .next-message.next-message-success.next-toast .next-message-content { + color: #666666; } + .next-message.next-message-success.next-toast .next-message-symbol { + color: #46BC15; } + .next-message.next-message-success.next-toast .next-message-symbol-icon::before { + content: "\E60A"; } + .next-message.next-message-warning.next-inline { + background-color: #FFF3E0; + border-color: #FFF3E0; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-warning.next-inline .next-message-title { + color: #333333; } + .next-message.next-message-warning.next-inline .next-message-content { + color: #666666; } + .next-message.next-message-warning.next-inline .next-message-symbol { + color: #FF9300; } + .next-message.next-message-warning.next-inline .next-message-symbol-icon::before { + content: "\E60B"; } + .next-message.next-message-warning.next-addon { + background-color: transparent; + border-color: transparent; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-warning.next-addon .next-message-title { + color: #333333; } + .next-message.next-message-warning.next-addon .next-message-content { + color: #666666; } + .next-message.next-message-warning.next-addon .next-message-symbol { + color: #FF9300; } + .next-message.next-message-warning.next-addon .next-message-symbol-icon::before { + content: "\E60B"; } + .next-message.next-message-warning.next-toast { + background-color: #FFFFFF; + border-color: #FFFFFF; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + border-style: solid; } + .next-message.next-message-warning.next-toast .next-message-title { + color: #333333; } + .next-message.next-message-warning.next-toast .next-message-content { + color: #666666; } + .next-message.next-message-warning.next-toast .next-message-symbol { + color: #FF9300; } + .next-message.next-message-warning.next-toast .next-message-symbol-icon::before { + content: "\E60B"; } + .next-message.next-message-error.next-inline { + background-color: #FFECE4; + border-color: #FFECE4; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-error.next-inline .next-message-title { + color: #333333; } + .next-message.next-message-error.next-inline .next-message-content { + color: #666666; } + .next-message.next-message-error.next-inline .next-message-symbol { + color: #FF3000; } + .next-message.next-message-error.next-inline .next-message-symbol-icon::before { + content: "\E60D"; } + .next-message.next-message-error.next-addon { + background-color: transparent; + border-color: transparent; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-error.next-addon .next-message-title { + color: #333333; } + .next-message.next-message-error.next-addon .next-message-content { + color: #666666; } + .next-message.next-message-error.next-addon .next-message-symbol { + color: #FF3000; } + .next-message.next-message-error.next-addon .next-message-symbol-icon::before { + content: "\E60D"; } + .next-message.next-message-error.next-toast { + background-color: #FFFFFF; + border-color: #FFFFFF; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + border-style: solid; } + .next-message.next-message-error.next-toast .next-message-title { + color: #333333; } + .next-message.next-message-error.next-toast .next-message-content { + color: #666666; } + .next-message.next-message-error.next-toast .next-message-symbol { + color: #FF3000; } + .next-message.next-message-error.next-toast .next-message-symbol-icon::before { + content: "\E60D"; } + .next-message.next-message-notice.next-inline { + background-color: #E3F2FD; + border-color: #E3F2FD; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-notice.next-inline .next-message-title { + color: #333333; } + .next-message.next-message-notice.next-inline .next-message-content { + color: #666666; } + .next-message.next-message-notice.next-inline .next-message-symbol { + color: #4494F9; } + .next-message.next-message-notice.next-inline .next-message-symbol-icon::before { + content: "\E60C"; } + .next-message.next-message-notice.next-addon { + background-color: transparent; + border-color: transparent; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-notice.next-addon .next-message-title { + color: #333333; } + .next-message.next-message-notice.next-addon .next-message-content { + color: #666666; } + .next-message.next-message-notice.next-addon .next-message-symbol { + color: #4494F9; } + .next-message.next-message-notice.next-addon .next-message-symbol-icon::before { + content: "\E60C"; } + .next-message.next-message-notice.next-toast { + background-color: #FFFFFF; + border-color: #FFFFFF; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + border-style: solid; } + .next-message.next-message-notice.next-toast .next-message-title { + color: #333333; } + .next-message.next-message-notice.next-toast .next-message-content { + color: #666666; } + .next-message.next-message-notice.next-toast .next-message-symbol { + color: #4494F9; } + .next-message.next-message-notice.next-toast .next-message-symbol-icon::before { + content: "\E60C"; } + .next-message.next-message-help.next-inline { + background-color: #E3FFF8; + border-color: #E3FFF8; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-help.next-inline .next-message-title { + color: #333333; } + .next-message.next-message-help.next-inline .next-message-content { + color: #666666; } + .next-message.next-message-help.next-inline .next-message-symbol { + color: #01C1B2; } + .next-message.next-message-help.next-inline .next-message-symbol-icon::before { + content: "\E673"; } + .next-message.next-message-help.next-addon { + background-color: transparent; + border-color: transparent; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-help.next-addon .next-message-title { + color: #333333; } + .next-message.next-message-help.next-addon .next-message-content { + color: #666666; } + .next-message.next-message-help.next-addon .next-message-symbol { + color: #01C1B2; } + .next-message.next-message-help.next-addon .next-message-symbol-icon::before { + content: "\E673"; } + .next-message.next-message-help.next-toast { + background-color: #FFFFFF; + border-color: #FFFFFF; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + border-style: solid; } + .next-message.next-message-help.next-toast .next-message-title { + color: #333333; } + .next-message.next-message-help.next-toast .next-message-content { + color: #666666; } + .next-message.next-message-help.next-toast .next-message-symbol { + color: #01C1B2; } + .next-message.next-message-help.next-toast .next-message-symbol-icon::before { + content: "\E673"; } + .next-message.next-message-loading.next-inline { + background-color: #FFFFFF; + border-color: #FFFFFF; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-loading.next-inline .next-message-title { + color: #333333; } + .next-message.next-message-loading.next-inline .next-message-content { + color: #666666; } + .next-message.next-message-loading.next-inline .next-message-symbol { + color: #5584FF; } + .next-message.next-message-loading.next-inline .next-message-symbol-icon::before { + content: "\E646"; + -webkit-animation: loadingCircle 1s infinite linear; + animation: loadingCircle 1s infinite linear; } + .next-message.next-message-loading.next-addon { + background-color: transparent; + border-color: transparent; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-loading.next-addon .next-message-title { + color: #333333; } + .next-message.next-message-loading.next-addon .next-message-content { + color: #666666; } + .next-message.next-message-loading.next-addon .next-message-symbol { + color: #5584FF; } + .next-message.next-message-loading.next-addon .next-message-symbol-icon::before { + content: "\E646"; + -webkit-animation: loadingCircle 1s infinite linear; + animation: loadingCircle 1s infinite linear; } + .next-message.next-message-loading.next-toast { + background-color: #FFFFFF; + border-color: #FFFFFF; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + border-style: solid; } + .next-message.next-message-loading.next-toast .next-message-title { + color: #333333; } + .next-message.next-message-loading.next-toast .next-message-content { + color: #666666; } + .next-message.next-message-loading.next-toast .next-message-symbol { + color: #5584FF; } + .next-message.next-message-loading.next-toast .next-message-symbol-icon::before { + content: "\E646"; + -webkit-animation: loadingCircle 1s infinite linear; + animation: loadingCircle 1s infinite linear; } + .next-message.next-medium { + border-width: 1px; + padding: 12px; } + .next-message.next-medium .next-message-symbol { + float: left; + line-height: 16px; } + .next-message.next-medium .next-message-symbol:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-message.next-medium .next-message-title { + padding: 0 20px 0 24px; + font-size: 16px; + line-height: 16px; } + .next-message.next-medium .next-message-content { + margin-top: 8px; + padding: 0 20px 0 24px; + font-size: 12px; + line-height: 12px; } + .next-message.next-medium .next-message-symbol + .next-message-content { + margin-top: 0; } + .next-message.next-medium.next-only-content .next-message-content { + line-height: 16px; } + .next-message.next-medium .next-message-close { + top: 12px; + right: 12px; } + .next-message.next-large { + border-width: 2px; + padding: 16px; + line-height: 18px; } + .next-message.next-large .next-message-symbol { + float: left; + line-height: 24px; } + .next-message.next-large .next-message-symbol:before { + width: 24px; + font-size: 24px; + line-height: inherit; } + .next-message.next-large .next-message-title { + padding: 0 20px 0 36px; + font-size: 20px; + line-height: 20px; } + .next-message.next-large .next-message-content { + margin-top: 8px; + padding: 0 20px 0 36px; + font-size: 12px; + line-height: 12px; } + .next-message.next-large .next-message-symbol + .next-message-content { + margin-top: 0; } + .next-message.next-large.next-title-content .next-message-title { + line-height: 24px; } + .next-message.next-large.next-only-content .next-message-content { + line-height: 24px; } + .next-message.next-large .next-message-close { + top: 16px; + right: 16px; } + +.next-message[dir="rtl"] .next-message-symbol { + float: right; } + +.next-message[dir="rtl"].next-medium .next-message-title { + padding: 0 24px 0 20px; } + +.next-message[dir="rtl"].next-medium .next-message-close { + left: 12px; + right: auto; } + +.next-message[dir="rtl"].next-large .next-message-title { + padding: 0 36px 0 20px; } + +.next-message[dir="rtl"].next-large .next-message-close { + left: 16px; + right: auto; } + +.next-dialog[dir=rtl] { + text-align: right; } + .next-dialog[dir=rtl] .next-dialog-footer.next-align-left { + text-align: right; } + .next-dialog[dir=rtl] .next-dialog-footer.next-align-center { + text-align: center; } + .next-dialog[dir=rtl] .next-dialog-footer.next-align-right { + text-align: left; } + .next-dialog[dir=rtl] .next-dialog-btn + .next-dialog-btn { + margin-right: 4px; + margin-left: 0; } + .next-dialog[dir=rtl] .next-dialog-close { + left: 16px; + right: auto; } + +.next-dialog { + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: fixed; + z-index: 1001; + background: #FFFFFF; + border: 1px solid #DCDEE3; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + text-align: left; + /* 让用户自己设置 */ + /* &.next-closeable &-header, */ + /* &.next-closeable &-body, { */ + /* padding-right: $dialog-part-padding-right-closeable; */ + /* } */ } + .next-dialog *, + .next-dialog *:before, + .next-dialog *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-dialog-header { + padding: 12px 20px 12px 20px; + border-bottom: 0 solid transparent; + font-size: 16px; + background: transparent; + color: #333333; } + .next-dialog-body { + padding: 20px 20px 20px 20px; + font-size: 12px; + color: #666666; } + .next-dialog-footer { + padding: 12px 20px 12px 20px; + border-top: 0 solid transparent; + background: transparent; } + .next-dialog-footer.next-align-left { + text-align: left; } + .next-dialog-footer.next-align-center { + text-align: center; } + .next-dialog-footer.next-align-right { + text-align: right; } + .next-dialog-footer-fixed-height { + position: absolute; + width: 100%; + bottom: 0; } + .next-dialog-btn + .next-dialog-btn { + margin-left: 4px; } + .next-dialog-close { + position: absolute; + top: 16px; + right: 16px; + width: 16px; + height: 16px; + color: #999999; } + .next-dialog-close:link, .next-dialog-close:visited { + height: 16px; + color: #999999; } + .next-dialog-close:hover { + background: transparent; + color: #333333; } + .next-dialog-close .next-dialog-close-icon.next-icon { + position: absolute; + top: 50%; + left: 50%; + margin-top: -6px; + margin-left: -6px; + width: 12px; + height: 12px; + line-height: 12px; } + .next-dialog-close .next-dialog-close-icon.next-icon:before { + width: 12px; + height: 12px; + font-size: 12px; + line-height: 12px; } + .next-dialog-container { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1001; + padding: 40px; + overflow: auto; + text-align: center; } + .next-dialog-container:before { + display: inline-block; + vertical-align: middle; + width: 0; + height: 100%; + content: ''; } + .next-dialog-container .next-dialog { + display: inline-block; + position: relative; + vertical-align: middle; } + .next-dialog-quick .next-dialog-body { + padding: 20px 20px 20px 20px; } + .next-dialog .next-dialog-message.next-message { + min-width: 300px; + padding: 0; } + +/* stylelint-disable-next-line */ +/* Grid System */ +/* 根据 Alibaba Base DPL(BASE DPL)设计规范实现 */ +/* 栅格系统, 根据不同的屏幕尺寸情况，调整这些区块的排版，将页面划分为若干等宽的列，然后推荐通过等宽列来创建响应式的页面区块。另外，屏幕宽度较大的时候，区块倾向于水平分布，而屏幕宽度较小的时候，区块倾向于竖直堆叠。 */ +/* ------------------------------- */ +.next-row { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + .next-row *, + .next-row *:before, + .next-row *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-row.next-row-wrap { + -ms-flex-wrap: wrap; + flex-wrap: wrap; } + @media (min-width: 320px) { + .next-row.next-row-fixed { + width: 320px; } } + @media (min-width: 480px) { + .next-row.next-row-fixed { + width: 480px; } } + @media (min-width: 720px) { + .next-row.next-row-fixed { + width: 720px; } } + @media (min-width: 990px) { + .next-row.next-row-fixed { + width: 990px; } } + @media (min-width: 1200px) { + .next-row.next-row-fixed { + width: 1200px; } } + @media (min-width: 1500px) { + .next-row.next-row-fixed { + width: 1500px; } } + .next-row.next-row-fixed-xxs { + width: 320px; } + .next-row.next-row-fixed-xs { + width: 480px; } + .next-row.next-row-fixed-s { + width: 720px; } + .next-row.next-row-fixed-m { + width: 990px; } + .next-row.next-row-fixed-l { + width: 1200px; } + .next-row.next-row-fixed-xl { + width: 1500px; } + .next-row.next-row-justify-start { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; } + .next-row.next-row-justify-end { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; } + .next-row.next-row-justify-center { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } + .next-row.next-row-justify-space-between { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } + .next-row.next-row-justify-space-around { + -ms-flex-pack: distribute; + justify-content: space-around; } + .next-row.next-row-align-top { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; } + .next-row.next-row-align-bottom { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; } + .next-row.next-row-align-center { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } + .next-row.next-row-align-baseline { + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; } + .next-row.next-row-align-stretch { + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; } + +.next-col { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; } + .next-col.next-col-top { + -ms-flex-item-align: start; + align-self: flex-start; } + .next-col.next-col-bottom { + -ms-flex-item-align: end; + align-self: flex-end; } + .next-col.next-col-center { + -ms-flex-item-align: center; + align-self: center; } + +/* IE9 pack */ +@media all and (min-width: 0\0) and (min-resolution: 0.001dpcm) { + .next-row { + display: table; + width: 100%; } + .next-col { + display: table-cell; + vertical-align: top; } } + +.next-col-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 4.16667%; + flex: 0 0 4.16667%; + width: 4.16667%; + max-width: 4.16667%; } + +.next-col-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + width: 8.33333%; + max-width: 8.33333%; } + +.next-col-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 12.5%; + flex: 0 0 12.5%; + width: 12.5%; + max-width: 12.5%; } + +.next-col-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + width: 16.66667%; + max-width: 16.66667%; } + +.next-col-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20.83333%; + flex: 0 0 20.83333%; + width: 20.83333%; + max-width: 20.83333%; } + +.next-col-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + width: 25%; + max-width: 25%; } + +.next-col-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 29.16667%; + flex: 0 0 29.16667%; + width: 29.16667%; + max-width: 29.16667%; } + +.next-col-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + width: 33.33333%; + max-width: 33.33333%; } + +.next-col-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 37.5%; + flex: 0 0 37.5%; + width: 37.5%; + max-width: 37.5%; } + +.next-col-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + width: 41.66667%; + max-width: 41.66667%; } + +.next-col-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 45.83333%; + flex: 0 0 45.83333%; + width: 45.83333%; + max-width: 45.83333%; } + +.next-col-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + width: 50%; + max-width: 50%; } + +.next-col-13 { + -webkit-box-flex: 0; + -ms-flex: 0 0 54.16667%; + flex: 0 0 54.16667%; + width: 54.16667%; + max-width: 54.16667%; } + +.next-col-14 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + width: 58.33333%; + max-width: 58.33333%; } + +.next-col-15 { + -webkit-box-flex: 0; + -ms-flex: 0 0 62.5%; + flex: 0 0 62.5%; + width: 62.5%; + max-width: 62.5%; } + +.next-col-16 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + width: 66.66667%; + max-width: 66.66667%; } + +.next-col-17 { + -webkit-box-flex: 0; + -ms-flex: 0 0 70.83333%; + flex: 0 0 70.83333%; + width: 70.83333%; + max-width: 70.83333%; } + +.next-col-18 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + width: 75%; + max-width: 75%; } + +.next-col-19 { + -webkit-box-flex: 0; + -ms-flex: 0 0 79.16667%; + flex: 0 0 79.16667%; + width: 79.16667%; + max-width: 79.16667%; } + +.next-col-20 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + width: 83.33333%; + max-width: 83.33333%; } + +.next-col-21 { + -webkit-box-flex: 0; + -ms-flex: 0 0 87.5%; + flex: 0 0 87.5%; + width: 87.5%; + max-width: 87.5%; } + +.next-col-22 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + width: 91.66667%; + max-width: 91.66667%; } + +.next-col-23 { + -webkit-box-flex: 0; + -ms-flex: 0 0 95.83333%; + flex: 0 0 95.83333%; + width: 95.83333%; + max-width: 95.83333%; } + +.next-col-24 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } + +@media (min-width: 320px) { + .next-col-xxs-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 4.16667%; + flex: 0 0 4.16667%; + width: 4.16667%; + max-width: 4.16667%; } + .next-col-xxs-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + width: 8.33333%; + max-width: 8.33333%; } + .next-col-xxs-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 12.5%; + flex: 0 0 12.5%; + width: 12.5%; + max-width: 12.5%; } + .next-col-xxs-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + width: 16.66667%; + max-width: 16.66667%; } + .next-col-xxs-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20.83333%; + flex: 0 0 20.83333%; + width: 20.83333%; + max-width: 20.83333%; } + .next-col-xxs-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + width: 25%; + max-width: 25%; } + .next-col-xxs-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 29.16667%; + flex: 0 0 29.16667%; + width: 29.16667%; + max-width: 29.16667%; } + .next-col-xxs-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + width: 33.33333%; + max-width: 33.33333%; } + .next-col-xxs-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 37.5%; + flex: 0 0 37.5%; + width: 37.5%; + max-width: 37.5%; } + .next-col-xxs-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + width: 41.66667%; + max-width: 41.66667%; } + .next-col-xxs-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 45.83333%; + flex: 0 0 45.83333%; + width: 45.83333%; + max-width: 45.83333%; } + .next-col-xxs-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + width: 50%; + max-width: 50%; } + .next-col-xxs-13 { + -webkit-box-flex: 0; + -ms-flex: 0 0 54.16667%; + flex: 0 0 54.16667%; + width: 54.16667%; + max-width: 54.16667%; } + .next-col-xxs-14 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + width: 58.33333%; + max-width: 58.33333%; } + .next-col-xxs-15 { + -webkit-box-flex: 0; + -ms-flex: 0 0 62.5%; + flex: 0 0 62.5%; + width: 62.5%; + max-width: 62.5%; } + .next-col-xxs-16 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + width: 66.66667%; + max-width: 66.66667%; } + .next-col-xxs-17 { + -webkit-box-flex: 0; + -ms-flex: 0 0 70.83333%; + flex: 0 0 70.83333%; + width: 70.83333%; + max-width: 70.83333%; } + .next-col-xxs-18 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + width: 75%; + max-width: 75%; } + .next-col-xxs-19 { + -webkit-box-flex: 0; + -ms-flex: 0 0 79.16667%; + flex: 0 0 79.16667%; + width: 79.16667%; + max-width: 79.16667%; } + .next-col-xxs-20 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + width: 83.33333%; + max-width: 83.33333%; } + .next-col-xxs-21 { + -webkit-box-flex: 0; + -ms-flex: 0 0 87.5%; + flex: 0 0 87.5%; + width: 87.5%; + max-width: 87.5%; } + .next-col-xxs-22 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + width: 91.66667%; + max-width: 91.66667%; } + .next-col-xxs-23 { + -webkit-box-flex: 0; + -ms-flex: 0 0 95.83333%; + flex: 0 0 95.83333%; + width: 95.83333%; + max-width: 95.83333%; } + .next-col-xxs-24 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 480px) { + .next-col-xs-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 4.16667%; + flex: 0 0 4.16667%; + width: 4.16667%; + max-width: 4.16667%; } + .next-col-xs-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + width: 8.33333%; + max-width: 8.33333%; } + .next-col-xs-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 12.5%; + flex: 0 0 12.5%; + width: 12.5%; + max-width: 12.5%; } + .next-col-xs-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + width: 16.66667%; + max-width: 16.66667%; } + .next-col-xs-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20.83333%; + flex: 0 0 20.83333%; + width: 20.83333%; + max-width: 20.83333%; } + .next-col-xs-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + width: 25%; + max-width: 25%; } + .next-col-xs-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 29.16667%; + flex: 0 0 29.16667%; + width: 29.16667%; + max-width: 29.16667%; } + .next-col-xs-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + width: 33.33333%; + max-width: 33.33333%; } + .next-col-xs-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 37.5%; + flex: 0 0 37.5%; + width: 37.5%; + max-width: 37.5%; } + .next-col-xs-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + width: 41.66667%; + max-width: 41.66667%; } + .next-col-xs-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 45.83333%; + flex: 0 0 45.83333%; + width: 45.83333%; + max-width: 45.83333%; } + .next-col-xs-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + width: 50%; + max-width: 50%; } + .next-col-xs-13 { + -webkit-box-flex: 0; + -ms-flex: 0 0 54.16667%; + flex: 0 0 54.16667%; + width: 54.16667%; + max-width: 54.16667%; } + .next-col-xs-14 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + width: 58.33333%; + max-width: 58.33333%; } + .next-col-xs-15 { + -webkit-box-flex: 0; + -ms-flex: 0 0 62.5%; + flex: 0 0 62.5%; + width: 62.5%; + max-width: 62.5%; } + .next-col-xs-16 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + width: 66.66667%; + max-width: 66.66667%; } + .next-col-xs-17 { + -webkit-box-flex: 0; + -ms-flex: 0 0 70.83333%; + flex: 0 0 70.83333%; + width: 70.83333%; + max-width: 70.83333%; } + .next-col-xs-18 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + width: 75%; + max-width: 75%; } + .next-col-xs-19 { + -webkit-box-flex: 0; + -ms-flex: 0 0 79.16667%; + flex: 0 0 79.16667%; + width: 79.16667%; + max-width: 79.16667%; } + .next-col-xs-20 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + width: 83.33333%; + max-width: 83.33333%; } + .next-col-xs-21 { + -webkit-box-flex: 0; + -ms-flex: 0 0 87.5%; + flex: 0 0 87.5%; + width: 87.5%; + max-width: 87.5%; } + .next-col-xs-22 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + width: 91.66667%; + max-width: 91.66667%; } + .next-col-xs-23 { + -webkit-box-flex: 0; + -ms-flex: 0 0 95.83333%; + flex: 0 0 95.83333%; + width: 95.83333%; + max-width: 95.83333%; } + .next-col-xs-24 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 720px) { + .next-col-s-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 4.16667%; + flex: 0 0 4.16667%; + width: 4.16667%; + max-width: 4.16667%; } + .next-col-s-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + width: 8.33333%; + max-width: 8.33333%; } + .next-col-s-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 12.5%; + flex: 0 0 12.5%; + width: 12.5%; + max-width: 12.5%; } + .next-col-s-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + width: 16.66667%; + max-width: 16.66667%; } + .next-col-s-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20.83333%; + flex: 0 0 20.83333%; + width: 20.83333%; + max-width: 20.83333%; } + .next-col-s-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + width: 25%; + max-width: 25%; } + .next-col-s-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 29.16667%; + flex: 0 0 29.16667%; + width: 29.16667%; + max-width: 29.16667%; } + .next-col-s-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + width: 33.33333%; + max-width: 33.33333%; } + .next-col-s-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 37.5%; + flex: 0 0 37.5%; + width: 37.5%; + max-width: 37.5%; } + .next-col-s-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + width: 41.66667%; + max-width: 41.66667%; } + .next-col-s-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 45.83333%; + flex: 0 0 45.83333%; + width: 45.83333%; + max-width: 45.83333%; } + .next-col-s-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + width: 50%; + max-width: 50%; } + .next-col-s-13 { + -webkit-box-flex: 0; + -ms-flex: 0 0 54.16667%; + flex: 0 0 54.16667%; + width: 54.16667%; + max-width: 54.16667%; } + .next-col-s-14 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + width: 58.33333%; + max-width: 58.33333%; } + .next-col-s-15 { + -webkit-box-flex: 0; + -ms-flex: 0 0 62.5%; + flex: 0 0 62.5%; + width: 62.5%; + max-width: 62.5%; } + .next-col-s-16 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + width: 66.66667%; + max-width: 66.66667%; } + .next-col-s-17 { + -webkit-box-flex: 0; + -ms-flex: 0 0 70.83333%; + flex: 0 0 70.83333%; + width: 70.83333%; + max-width: 70.83333%; } + .next-col-s-18 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + width: 75%; + max-width: 75%; } + .next-col-s-19 { + -webkit-box-flex: 0; + -ms-flex: 0 0 79.16667%; + flex: 0 0 79.16667%; + width: 79.16667%; + max-width: 79.16667%; } + .next-col-s-20 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + width: 83.33333%; + max-width: 83.33333%; } + .next-col-s-21 { + -webkit-box-flex: 0; + -ms-flex: 0 0 87.5%; + flex: 0 0 87.5%; + width: 87.5%; + max-width: 87.5%; } + .next-col-s-22 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + width: 91.66667%; + max-width: 91.66667%; } + .next-col-s-23 { + -webkit-box-flex: 0; + -ms-flex: 0 0 95.83333%; + flex: 0 0 95.83333%; + width: 95.83333%; + max-width: 95.83333%; } + .next-col-s-24 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 990px) { + .next-col-m-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 4.16667%; + flex: 0 0 4.16667%; + width: 4.16667%; + max-width: 4.16667%; } + .next-col-m-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + width: 8.33333%; + max-width: 8.33333%; } + .next-col-m-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 12.5%; + flex: 0 0 12.5%; + width: 12.5%; + max-width: 12.5%; } + .next-col-m-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + width: 16.66667%; + max-width: 16.66667%; } + .next-col-m-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20.83333%; + flex: 0 0 20.83333%; + width: 20.83333%; + max-width: 20.83333%; } + .next-col-m-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + width: 25%; + max-width: 25%; } + .next-col-m-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 29.16667%; + flex: 0 0 29.16667%; + width: 29.16667%; + max-width: 29.16667%; } + .next-col-m-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + width: 33.33333%; + max-width: 33.33333%; } + .next-col-m-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 37.5%; + flex: 0 0 37.5%; + width: 37.5%; + max-width: 37.5%; } + .next-col-m-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + width: 41.66667%; + max-width: 41.66667%; } + .next-col-m-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 45.83333%; + flex: 0 0 45.83333%; + width: 45.83333%; + max-width: 45.83333%; } + .next-col-m-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + width: 50%; + max-width: 50%; } + .next-col-m-13 { + -webkit-box-flex: 0; + -ms-flex: 0 0 54.16667%; + flex: 0 0 54.16667%; + width: 54.16667%; + max-width: 54.16667%; } + .next-col-m-14 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + width: 58.33333%; + max-width: 58.33333%; } + .next-col-m-15 { + -webkit-box-flex: 0; + -ms-flex: 0 0 62.5%; + flex: 0 0 62.5%; + width: 62.5%; + max-width: 62.5%; } + .next-col-m-16 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + width: 66.66667%; + max-width: 66.66667%; } + .next-col-m-17 { + -webkit-box-flex: 0; + -ms-flex: 0 0 70.83333%; + flex: 0 0 70.83333%; + width: 70.83333%; + max-width: 70.83333%; } + .next-col-m-18 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + width: 75%; + max-width: 75%; } + .next-col-m-19 { + -webkit-box-flex: 0; + -ms-flex: 0 0 79.16667%; + flex: 0 0 79.16667%; + width: 79.16667%; + max-width: 79.16667%; } + .next-col-m-20 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + width: 83.33333%; + max-width: 83.33333%; } + .next-col-m-21 { + -webkit-box-flex: 0; + -ms-flex: 0 0 87.5%; + flex: 0 0 87.5%; + width: 87.5%; + max-width: 87.5%; } + .next-col-m-22 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + width: 91.66667%; + max-width: 91.66667%; } + .next-col-m-23 { + -webkit-box-flex: 0; + -ms-flex: 0 0 95.83333%; + flex: 0 0 95.83333%; + width: 95.83333%; + max-width: 95.83333%; } + .next-col-m-24 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 1200px) { + .next-col-l-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 4.16667%; + flex: 0 0 4.16667%; + width: 4.16667%; + max-width: 4.16667%; } + .next-col-l-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + width: 8.33333%; + max-width: 8.33333%; } + .next-col-l-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 12.5%; + flex: 0 0 12.5%; + width: 12.5%; + max-width: 12.5%; } + .next-col-l-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + width: 16.66667%; + max-width: 16.66667%; } + .next-col-l-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20.83333%; + flex: 0 0 20.83333%; + width: 20.83333%; + max-width: 20.83333%; } + .next-col-l-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + width: 25%; + max-width: 25%; } + .next-col-l-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 29.16667%; + flex: 0 0 29.16667%; + width: 29.16667%; + max-width: 29.16667%; } + .next-col-l-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + width: 33.33333%; + max-width: 33.33333%; } + .next-col-l-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 37.5%; + flex: 0 0 37.5%; + width: 37.5%; + max-width: 37.5%; } + .next-col-l-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + width: 41.66667%; + max-width: 41.66667%; } + .next-col-l-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 45.83333%; + flex: 0 0 45.83333%; + width: 45.83333%; + max-width: 45.83333%; } + .next-col-l-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + width: 50%; + max-width: 50%; } + .next-col-l-13 { + -webkit-box-flex: 0; + -ms-flex: 0 0 54.16667%; + flex: 0 0 54.16667%; + width: 54.16667%; + max-width: 54.16667%; } + .next-col-l-14 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + width: 58.33333%; + max-width: 58.33333%; } + .next-col-l-15 { + -webkit-box-flex: 0; + -ms-flex: 0 0 62.5%; + flex: 0 0 62.5%; + width: 62.5%; + max-width: 62.5%; } + .next-col-l-16 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + width: 66.66667%; + max-width: 66.66667%; } + .next-col-l-17 { + -webkit-box-flex: 0; + -ms-flex: 0 0 70.83333%; + flex: 0 0 70.83333%; + width: 70.83333%; + max-width: 70.83333%; } + .next-col-l-18 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + width: 75%; + max-width: 75%; } + .next-col-l-19 { + -webkit-box-flex: 0; + -ms-flex: 0 0 79.16667%; + flex: 0 0 79.16667%; + width: 79.16667%; + max-width: 79.16667%; } + .next-col-l-20 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + width: 83.33333%; + max-width: 83.33333%; } + .next-col-l-21 { + -webkit-box-flex: 0; + -ms-flex: 0 0 87.5%; + flex: 0 0 87.5%; + width: 87.5%; + max-width: 87.5%; } + .next-col-l-22 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + width: 91.66667%; + max-width: 91.66667%; } + .next-col-l-23 { + -webkit-box-flex: 0; + -ms-flex: 0 0 95.83333%; + flex: 0 0 95.83333%; + width: 95.83333%; + max-width: 95.83333%; } + .next-col-l-24 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 1500px) { + .next-col-xl-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 4.16667%; + flex: 0 0 4.16667%; + width: 4.16667%; + max-width: 4.16667%; } + .next-col-xl-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + width: 8.33333%; + max-width: 8.33333%; } + .next-col-xl-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 12.5%; + flex: 0 0 12.5%; + width: 12.5%; + max-width: 12.5%; } + .next-col-xl-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + width: 16.66667%; + max-width: 16.66667%; } + .next-col-xl-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20.83333%; + flex: 0 0 20.83333%; + width: 20.83333%; + max-width: 20.83333%; } + .next-col-xl-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + width: 25%; + max-width: 25%; } + .next-col-xl-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 29.16667%; + flex: 0 0 29.16667%; + width: 29.16667%; + max-width: 29.16667%; } + .next-col-xl-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + width: 33.33333%; + max-width: 33.33333%; } + .next-col-xl-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 37.5%; + flex: 0 0 37.5%; + width: 37.5%; + max-width: 37.5%; } + .next-col-xl-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + width: 41.66667%; + max-width: 41.66667%; } + .next-col-xl-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 45.83333%; + flex: 0 0 45.83333%; + width: 45.83333%; + max-width: 45.83333%; } + .next-col-xl-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + width: 50%; + max-width: 50%; } + .next-col-xl-13 { + -webkit-box-flex: 0; + -ms-flex: 0 0 54.16667%; + flex: 0 0 54.16667%; + width: 54.16667%; + max-width: 54.16667%; } + .next-col-xl-14 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + width: 58.33333%; + max-width: 58.33333%; } + .next-col-xl-15 { + -webkit-box-flex: 0; + -ms-flex: 0 0 62.5%; + flex: 0 0 62.5%; + width: 62.5%; + max-width: 62.5%; } + .next-col-xl-16 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + width: 66.66667%; + max-width: 66.66667%; } + .next-col-xl-17 { + -webkit-box-flex: 0; + -ms-flex: 0 0 70.83333%; + flex: 0 0 70.83333%; + width: 70.83333%; + max-width: 70.83333%; } + .next-col-xl-18 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + width: 75%; + max-width: 75%; } + .next-col-xl-19 { + -webkit-box-flex: 0; + -ms-flex: 0 0 79.16667%; + flex: 0 0 79.16667%; + width: 79.16667%; + max-width: 79.16667%; } + .next-col-xl-20 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + width: 83.33333%; + max-width: 83.33333%; } + .next-col-xl-21 { + -webkit-box-flex: 0; + -ms-flex: 0 0 87.5%; + flex: 0 0 87.5%; + width: 87.5%; + max-width: 87.5%; } + .next-col-xl-22 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + width: 91.66667%; + max-width: 91.66667%; } + .next-col-xl-23 { + -webkit-box-flex: 0; + -ms-flex: 0 0 95.83333%; + flex: 0 0 95.83333%; + width: 95.83333%; + max-width: 95.83333%; } + .next-col-xl-24 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +.next-col-1p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20%; + flex: 0 0 20%; + width: 20%; + max-width: 20%; } + +.next-col-2p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + width: 40%; + max-width: 40%; } + +.next-col-3p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + width: 60%; + max-width: 60%; } + +.next-col-4p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 80%; + flex: 0 0 80%; + width: 80%; + max-width: 80%; } + +.next-col-5p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } + +@media (min-width: 320px) { + .next-col-xxs-1p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20%; + flex: 0 0 20%; + width: 20%; + max-width: 20%; } + .next-col-xxs-2p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + width: 40%; + max-width: 40%; } + .next-col-xxs-3p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + width: 60%; + max-width: 60%; } + .next-col-xxs-4p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 80%; + flex: 0 0 80%; + width: 80%; + max-width: 80%; } + .next-col-xxs-5p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 480px) { + .next-col-xs-1p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20%; + flex: 0 0 20%; + width: 20%; + max-width: 20%; } + .next-col-xs-2p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + width: 40%; + max-width: 40%; } + .next-col-xs-3p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + width: 60%; + max-width: 60%; } + .next-col-xs-4p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 80%; + flex: 0 0 80%; + width: 80%; + max-width: 80%; } + .next-col-xs-5p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 720px) { + .next-col-s-1p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20%; + flex: 0 0 20%; + width: 20%; + max-width: 20%; } + .next-col-s-2p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + width: 40%; + max-width: 40%; } + .next-col-s-3p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + width: 60%; + max-width: 60%; } + .next-col-s-4p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 80%; + flex: 0 0 80%; + width: 80%; + max-width: 80%; } + .next-col-s-5p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 990px) { + .next-col-m-1p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20%; + flex: 0 0 20%; + width: 20%; + max-width: 20%; } + .next-col-m-2p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + width: 40%; + max-width: 40%; } + .next-col-m-3p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + width: 60%; + max-width: 60%; } + .next-col-m-4p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 80%; + flex: 0 0 80%; + width: 80%; + max-width: 80%; } + .next-col-m-5p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 1200px) { + .next-col-l-1p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20%; + flex: 0 0 20%; + width: 20%; + max-width: 20%; } + .next-col-l-2p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + width: 40%; + max-width: 40%; } + .next-col-l-3p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + width: 60%; + max-width: 60%; } + .next-col-l-4p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 80%; + flex: 0 0 80%; + width: 80%; + max-width: 80%; } + .next-col-l-5p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 1500px) { + .next-col-xl-1p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20%; + flex: 0 0 20%; + width: 20%; + max-width: 20%; } + .next-col-xl-2p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + width: 40%; + max-width: 40%; } + .next-col-xl-3p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + width: 60%; + max-width: 60%; } + .next-col-xl-4p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 80%; + flex: 0 0 80%; + width: 80%; + max-width: 80%; } + .next-col-xl-5p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +.next-col-fixed-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20px; + flex: 0 0 20px; + width: 20px; + max-width: 20px; } + +.next-col-fixed-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 40px; + flex: 0 0 40px; + width: 40px; + max-width: 40px; } + +.next-col-fixed-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 60px; + flex: 0 0 60px; + width: 60px; + max-width: 60px; } + +.next-col-fixed-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 80px; + flex: 0 0 80px; + width: 80px; + max-width: 80px; } + +.next-col-fixed-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100px; + flex: 0 0 100px; + width: 100px; + max-width: 100px; } + +.next-col-fixed-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 120px; + flex: 0 0 120px; + width: 120px; + max-width: 120px; } + +.next-col-fixed-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 140px; + flex: 0 0 140px; + width: 140px; + max-width: 140px; } + +.next-col-fixed-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 160px; + flex: 0 0 160px; + width: 160px; + max-width: 160px; } + +.next-col-fixed-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 180px; + flex: 0 0 180px; + width: 180px; + max-width: 180px; } + +.next-col-fixed-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 200px; + flex: 0 0 200px; + width: 200px; + max-width: 200px; } + +.next-col-fixed-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 220px; + flex: 0 0 220px; + width: 220px; + max-width: 220px; } + +.next-col-fixed-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 240px; + flex: 0 0 240px; + width: 240px; + max-width: 240px; } + +.next-col-fixed-13 { + -webkit-box-flex: 0; + -ms-flex: 0 0 260px; + flex: 0 0 260px; + width: 260px; + max-width: 260px; } + +.next-col-fixed-14 { + -webkit-box-flex: 0; + -ms-flex: 0 0 280px; + flex: 0 0 280px; + width: 280px; + max-width: 280px; } + +.next-col-fixed-15 { + -webkit-box-flex: 0; + -ms-flex: 0 0 300px; + flex: 0 0 300px; + width: 300px; + max-width: 300px; } + +.next-col-fixed-16 { + -webkit-box-flex: 0; + -ms-flex: 0 0 320px; + flex: 0 0 320px; + width: 320px; + max-width: 320px; } + +.next-col-fixed-17 { + -webkit-box-flex: 0; + -ms-flex: 0 0 340px; + flex: 0 0 340px; + width: 340px; + max-width: 340px; } + +.next-col-fixed-18 { + -webkit-box-flex: 0; + -ms-flex: 0 0 360px; + flex: 0 0 360px; + width: 360px; + max-width: 360px; } + +.next-col-fixed-19 { + -webkit-box-flex: 0; + -ms-flex: 0 0 380px; + flex: 0 0 380px; + width: 380px; + max-width: 380px; } + +.next-col-fixed-20 { + -webkit-box-flex: 0; + -ms-flex: 0 0 400px; + flex: 0 0 400px; + width: 400px; + max-width: 400px; } + +.next-col-fixed-21 { + -webkit-box-flex: 0; + -ms-flex: 0 0 420px; + flex: 0 0 420px; + width: 420px; + max-width: 420px; } + +.next-col-fixed-22 { + -webkit-box-flex: 0; + -ms-flex: 0 0 440px; + flex: 0 0 440px; + width: 440px; + max-width: 440px; } + +.next-col-fixed-23 { + -webkit-box-flex: 0; + -ms-flex: 0 0 460px; + flex: 0 0 460px; + width: 460px; + max-width: 460px; } + +.next-col-fixed-24 { + -webkit-box-flex: 0; + -ms-flex: 0 0 480px; + flex: 0 0 480px; + width: 480px; + max-width: 480px; } + +.next-col-fixed-25 { + -webkit-box-flex: 0; + -ms-flex: 0 0 500px; + flex: 0 0 500px; + width: 500px; + max-width: 500px; } + +.next-col-fixed-26 { + -webkit-box-flex: 0; + -ms-flex: 0 0 520px; + flex: 0 0 520px; + width: 520px; + max-width: 520px; } + +.next-col-fixed-27 { + -webkit-box-flex: 0; + -ms-flex: 0 0 540px; + flex: 0 0 540px; + width: 540px; + max-width: 540px; } + +.next-col-fixed-28 { + -webkit-box-flex: 0; + -ms-flex: 0 0 560px; + flex: 0 0 560px; + width: 560px; + max-width: 560px; } + +.next-col-fixed-29 { + -webkit-box-flex: 0; + -ms-flex: 0 0 580px; + flex: 0 0 580px; + width: 580px; + max-width: 580px; } + +.next-col-fixed-30 { + -webkit-box-flex: 0; + -ms-flex: 0 0 600px; + flex: 0 0 600px; + width: 600px; + max-width: 600px; } + +.next-col-offset-1 { + margin-left: 4.16667%; } + +.next-col-offset-2 { + margin-left: 8.33333%; } + +.next-col-offset-3 { + margin-left: 12.5%; } + +.next-col-offset-4 { + margin-left: 16.66667%; } + +.next-col-offset-5 { + margin-left: 20.83333%; } + +.next-col-offset-6 { + margin-left: 25%; } + +.next-col-offset-7 { + margin-left: 29.16667%; } + +.next-col-offset-8 { + margin-left: 33.33333%; } + +.next-col-offset-9 { + margin-left: 37.5%; } + +.next-col-offset-10 { + margin-left: 41.66667%; } + +.next-col-offset-11 { + margin-left: 45.83333%; } + +.next-col-offset-12 { + margin-left: 50%; } + +.next-col-offset-13 { + margin-left: 54.16667%; } + +.next-col-offset-14 { + margin-left: 58.33333%; } + +.next-col-offset-15 { + margin-left: 62.5%; } + +.next-col-offset-16 { + margin-left: 66.66667%; } + +.next-col-offset-17 { + margin-left: 70.83333%; } + +.next-col-offset-18 { + margin-left: 75%; } + +.next-col-offset-19 { + margin-left: 79.16667%; } + +.next-col-offset-20 { + margin-left: 83.33333%; } + +.next-col-offset-21 { + margin-left: 87.5%; } + +.next-col-offset-22 { + margin-left: 91.66667%; } + +.next-col-offset-23 { + margin-left: 95.83333%; } + +.next-col-offset-24 { + margin-left: 100%; } + +@media (min-width: 320px) { + .next-col-xxs-offset-1 { + margin-left: 4.16667%; } + .next-col-xxs-offset-2 { + margin-left: 8.33333%; } + .next-col-xxs-offset-3 { + margin-left: 12.5%; } + .next-col-xxs-offset-4 { + margin-left: 16.66667%; } + .next-col-xxs-offset-5 { + margin-left: 20.83333%; } + .next-col-xxs-offset-6 { + margin-left: 25%; } + .next-col-xxs-offset-7 { + margin-left: 29.16667%; } + .next-col-xxs-offset-8 { + margin-left: 33.33333%; } + .next-col-xxs-offset-9 { + margin-left: 37.5%; } + .next-col-xxs-offset-10 { + margin-left: 41.66667%; } + .next-col-xxs-offset-11 { + margin-left: 45.83333%; } + .next-col-xxs-offset-12 { + margin-left: 50%; } + .next-col-xxs-offset-13 { + margin-left: 54.16667%; } + .next-col-xxs-offset-14 { + margin-left: 58.33333%; } + .next-col-xxs-offset-15 { + margin-left: 62.5%; } + .next-col-xxs-offset-16 { + margin-left: 66.66667%; } + .next-col-xxs-offset-17 { + margin-left: 70.83333%; } + .next-col-xxs-offset-18 { + margin-left: 75%; } + .next-col-xxs-offset-19 { + margin-left: 79.16667%; } + .next-col-xxs-offset-20 { + margin-left: 83.33333%; } + .next-col-xxs-offset-21 { + margin-left: 87.5%; } + .next-col-xxs-offset-22 { + margin-left: 91.66667%; } + .next-col-xxs-offset-23 { + margin-left: 95.83333%; } + .next-col-xxs-offset-24 { + margin-left: 100%; } } + +@media (min-width: 480px) { + .next-col-xs-offset-1 { + margin-left: 4.16667%; } + .next-col-xs-offset-2 { + margin-left: 8.33333%; } + .next-col-xs-offset-3 { + margin-left: 12.5%; } + .next-col-xs-offset-4 { + margin-left: 16.66667%; } + .next-col-xs-offset-5 { + margin-left: 20.83333%; } + .next-col-xs-offset-6 { + margin-left: 25%; } + .next-col-xs-offset-7 { + margin-left: 29.16667%; } + .next-col-xs-offset-8 { + margin-left: 33.33333%; } + .next-col-xs-offset-9 { + margin-left: 37.5%; } + .next-col-xs-offset-10 { + margin-left: 41.66667%; } + .next-col-xs-offset-11 { + margin-left: 45.83333%; } + .next-col-xs-offset-12 { + margin-left: 50%; } + .next-col-xs-offset-13 { + margin-left: 54.16667%; } + .next-col-xs-offset-14 { + margin-left: 58.33333%; } + .next-col-xs-offset-15 { + margin-left: 62.5%; } + .next-col-xs-offset-16 { + margin-left: 66.66667%; } + .next-col-xs-offset-17 { + margin-left: 70.83333%; } + .next-col-xs-offset-18 { + margin-left: 75%; } + .next-col-xs-offset-19 { + margin-left: 79.16667%; } + .next-col-xs-offset-20 { + margin-left: 83.33333%; } + .next-col-xs-offset-21 { + margin-left: 87.5%; } + .next-col-xs-offset-22 { + margin-left: 91.66667%; } + .next-col-xs-offset-23 { + margin-left: 95.83333%; } + .next-col-xs-offset-24 { + margin-left: 100%; } } + +@media (min-width: 720px) { + .next-col-s-offset-1 { + margin-left: 4.16667%; } + .next-col-s-offset-2 { + margin-left: 8.33333%; } + .next-col-s-offset-3 { + margin-left: 12.5%; } + .next-col-s-offset-4 { + margin-left: 16.66667%; } + .next-col-s-offset-5 { + margin-left: 20.83333%; } + .next-col-s-offset-6 { + margin-left: 25%; } + .next-col-s-offset-7 { + margin-left: 29.16667%; } + .next-col-s-offset-8 { + margin-left: 33.33333%; } + .next-col-s-offset-9 { + margin-left: 37.5%; } + .next-col-s-offset-10 { + margin-left: 41.66667%; } + .next-col-s-offset-11 { + margin-left: 45.83333%; } + .next-col-s-offset-12 { + margin-left: 50%; } + .next-col-s-offset-13 { + margin-left: 54.16667%; } + .next-col-s-offset-14 { + margin-left: 58.33333%; } + .next-col-s-offset-15 { + margin-left: 62.5%; } + .next-col-s-offset-16 { + margin-left: 66.66667%; } + .next-col-s-offset-17 { + margin-left: 70.83333%; } + .next-col-s-offset-18 { + margin-left: 75%; } + .next-col-s-offset-19 { + margin-left: 79.16667%; } + .next-col-s-offset-20 { + margin-left: 83.33333%; } + .next-col-s-offset-21 { + margin-left: 87.5%; } + .next-col-s-offset-22 { + margin-left: 91.66667%; } + .next-col-s-offset-23 { + margin-left: 95.83333%; } + .next-col-s-offset-24 { + margin-left: 100%; } } + +@media (min-width: 990px) { + .next-col-m-offset-1 { + margin-left: 4.16667%; } + .next-col-m-offset-2 { + margin-left: 8.33333%; } + .next-col-m-offset-3 { + margin-left: 12.5%; } + .next-col-m-offset-4 { + margin-left: 16.66667%; } + .next-col-m-offset-5 { + margin-left: 20.83333%; } + .next-col-m-offset-6 { + margin-left: 25%; } + .next-col-m-offset-7 { + margin-left: 29.16667%; } + .next-col-m-offset-8 { + margin-left: 33.33333%; } + .next-col-m-offset-9 { + margin-left: 37.5%; } + .next-col-m-offset-10 { + margin-left: 41.66667%; } + .next-col-m-offset-11 { + margin-left: 45.83333%; } + .next-col-m-offset-12 { + margin-left: 50%; } + .next-col-m-offset-13 { + margin-left: 54.16667%; } + .next-col-m-offset-14 { + margin-left: 58.33333%; } + .next-col-m-offset-15 { + margin-left: 62.5%; } + .next-col-m-offset-16 { + margin-left: 66.66667%; } + .next-col-m-offset-17 { + margin-left: 70.83333%; } + .next-col-m-offset-18 { + margin-left: 75%; } + .next-col-m-offset-19 { + margin-left: 79.16667%; } + .next-col-m-offset-20 { + margin-left: 83.33333%; } + .next-col-m-offset-21 { + margin-left: 87.5%; } + .next-col-m-offset-22 { + margin-left: 91.66667%; } + .next-col-m-offset-23 { + margin-left: 95.83333%; } + .next-col-m-offset-24 { + margin-left: 100%; } } + +@media (min-width: 1200px) { + .next-col-l-offset-1 { + margin-left: 4.16667%; } + .next-col-l-offset-2 { + margin-left: 8.33333%; } + .next-col-l-offset-3 { + margin-left: 12.5%; } + .next-col-l-offset-4 { + margin-left: 16.66667%; } + .next-col-l-offset-5 { + margin-left: 20.83333%; } + .next-col-l-offset-6 { + margin-left: 25%; } + .next-col-l-offset-7 { + margin-left: 29.16667%; } + .next-col-l-offset-8 { + margin-left: 33.33333%; } + .next-col-l-offset-9 { + margin-left: 37.5%; } + .next-col-l-offset-10 { + margin-left: 41.66667%; } + .next-col-l-offset-11 { + margin-left: 45.83333%; } + .next-col-l-offset-12 { + margin-left: 50%; } + .next-col-l-offset-13 { + margin-left: 54.16667%; } + .next-col-l-offset-14 { + margin-left: 58.33333%; } + .next-col-l-offset-15 { + margin-left: 62.5%; } + .next-col-l-offset-16 { + margin-left: 66.66667%; } + .next-col-l-offset-17 { + margin-left: 70.83333%; } + .next-col-l-offset-18 { + margin-left: 75%; } + .next-col-l-offset-19 { + margin-left: 79.16667%; } + .next-col-l-offset-20 { + margin-left: 83.33333%; } + .next-col-l-offset-21 { + margin-left: 87.5%; } + .next-col-l-offset-22 { + margin-left: 91.66667%; } + .next-col-l-offset-23 { + margin-left: 95.83333%; } + .next-col-l-offset-24 { + margin-left: 100%; } } + +@media (min-width: 1500px) { + .next-col-xl-offset-1 { + margin-left: 4.16667%; } + .next-col-xl-offset-2 { + margin-left: 8.33333%; } + .next-col-xl-offset-3 { + margin-left: 12.5%; } + .next-col-xl-offset-4 { + margin-left: 16.66667%; } + .next-col-xl-offset-5 { + margin-left: 20.83333%; } + .next-col-xl-offset-6 { + margin-left: 25%; } + .next-col-xl-offset-7 { + margin-left: 29.16667%; } + .next-col-xl-offset-8 { + margin-left: 33.33333%; } + .next-col-xl-offset-9 { + margin-left: 37.5%; } + .next-col-xl-offset-10 { + margin-left: 41.66667%; } + .next-col-xl-offset-11 { + margin-left: 45.83333%; } + .next-col-xl-offset-12 { + margin-left: 50%; } + .next-col-xl-offset-13 { + margin-left: 54.16667%; } + .next-col-xl-offset-14 { + margin-left: 58.33333%; } + .next-col-xl-offset-15 { + margin-left: 62.5%; } + .next-col-xl-offset-16 { + margin-left: 66.66667%; } + .next-col-xl-offset-17 { + margin-left: 70.83333%; } + .next-col-xl-offset-18 { + margin-left: 75%; } + .next-col-xl-offset-19 { + margin-left: 79.16667%; } + .next-col-xl-offset-20 { + margin-left: 83.33333%; } + .next-col-xl-offset-21 { + margin-left: 87.5%; } + .next-col-xl-offset-22 { + margin-left: 91.66667%; } + .next-col-xl-offset-23 { + margin-left: 95.83333%; } + .next-col-xl-offset-24 { + margin-left: 100%; } } + +.next-col-offset-fixed-1 { + margin-left: 20px; } + +.next-col-offset-fixed-2 { + margin-left: 40px; } + +.next-col-offset-fixed-3 { + margin-left: 60px; } + +.next-col-offset-fixed-4 { + margin-left: 80px; } + +.next-col-offset-fixed-5 { + margin-left: 100px; } + +.next-col-offset-fixed-6 { + margin-left: 120px; } + +.next-col-offset-fixed-7 { + margin-left: 140px; } + +.next-col-offset-fixed-8 { + margin-left: 160px; } + +.next-col-offset-fixed-9 { + margin-left: 180px; } + +.next-col-offset-fixed-10 { + margin-left: 200px; } + +.next-col-offset-fixed-11 { + margin-left: 220px; } + +.next-col-offset-fixed-12 { + margin-left: 240px; } + +.next-col-offset-fixed-13 { + margin-left: 260px; } + +.next-col-offset-fixed-14 { + margin-left: 280px; } + +.next-col-offset-fixed-15 { + margin-left: 300px; } + +.next-col-offset-fixed-16 { + margin-left: 320px; } + +.next-col-offset-fixed-17 { + margin-left: 340px; } + +.next-col-offset-fixed-18 { + margin-left: 360px; } + +.next-col-offset-fixed-19 { + margin-left: 380px; } + +.next-col-offset-fixed-20 { + margin-left: 400px; } + +.next-col-offset-fixed-21 { + margin-left: 420px; } + +.next-col-offset-fixed-22 { + margin-left: 440px; } + +.next-col-offset-fixed-23 { + margin-left: 460px; } + +.next-col-offset-fixed-24 { + margin-left: 480px; } + +.next-col-offset-fixed-25 { + margin-left: 500px; } + +.next-col-offset-fixed-26 { + margin-left: 520px; } + +.next-col-offset-fixed-27 { + margin-left: 540px; } + +.next-col-offset-fixed-28 { + margin-left: 560px; } + +.next-col-offset-fixed-29 { + margin-left: 580px; } + +.next-col-offset-fixed-30 { + margin-left: 600px; } + +.next-col-offset-fixed-xxs-1 { + margin-left: 20px; } + +.next-col-offset-fixed-xxs-2 { + margin-left: 40px; } + +.next-col-offset-fixed-xxs-3 { + margin-left: 60px; } + +.next-col-offset-fixed-xxs-4 { + margin-left: 80px; } + +.next-col-offset-fixed-xxs-5 { + margin-left: 100px; } + +.next-col-offset-fixed-xxs-6 { + margin-left: 120px; } + +.next-col-offset-fixed-xxs-7 { + margin-left: 140px; } + +.next-col-offset-fixed-xxs-8 { + margin-left: 160px; } + +.next-col-offset-fixed-xxs-9 { + margin-left: 180px; } + +.next-col-offset-fixed-xxs-10 { + margin-left: 200px; } + +.next-col-offset-fixed-xxs-11 { + margin-left: 220px; } + +.next-col-offset-fixed-xxs-12 { + margin-left: 240px; } + +.next-col-offset-fixed-xxs-13 { + margin-left: 260px; } + +.next-col-offset-fixed-xxs-14 { + margin-left: 280px; } + +.next-col-offset-fixed-xxs-15 { + margin-left: 300px; } + +.next-col-offset-fixed-xxs-16 { + margin-left: 320px; } + +.next-col-offset-fixed-xxs-17 { + margin-left: 340px; } + +.next-col-offset-fixed-xxs-18 { + margin-left: 360px; } + +.next-col-offset-fixed-xxs-19 { + margin-left: 380px; } + +.next-col-offset-fixed-xxs-20 { + margin-left: 400px; } + +.next-col-offset-fixed-xxs-21 { + margin-left: 420px; } + +.next-col-offset-fixed-xxs-22 { + margin-left: 440px; } + +.next-col-offset-fixed-xxs-23 { + margin-left: 460px; } + +.next-col-offset-fixed-xxs-24 { + margin-left: 480px; } + +.next-col-offset-fixed-xxs-25 { + margin-left: 500px; } + +.next-col-offset-fixed-xxs-26 { + margin-left: 520px; } + +.next-col-offset-fixed-xxs-27 { + margin-left: 540px; } + +.next-col-offset-fixed-xxs-28 { + margin-left: 560px; } + +.next-col-offset-fixed-xxs-29 { + margin-left: 580px; } + +.next-col-offset-fixed-xxs-30 { + margin-left: 600px; } + +.next-col-offset-fixed-xs-1 { + margin-left: 20px; } + +.next-col-offset-fixed-xs-2 { + margin-left: 40px; } + +.next-col-offset-fixed-xs-3 { + margin-left: 60px; } + +.next-col-offset-fixed-xs-4 { + margin-left: 80px; } + +.next-col-offset-fixed-xs-5 { + margin-left: 100px; } + +.next-col-offset-fixed-xs-6 { + margin-left: 120px; } + +.next-col-offset-fixed-xs-7 { + margin-left: 140px; } + +.next-col-offset-fixed-xs-8 { + margin-left: 160px; } + +.next-col-offset-fixed-xs-9 { + margin-left: 180px; } + +.next-col-offset-fixed-xs-10 { + margin-left: 200px; } + +.next-col-offset-fixed-xs-11 { + margin-left: 220px; } + +.next-col-offset-fixed-xs-12 { + margin-left: 240px; } + +.next-col-offset-fixed-xs-13 { + margin-left: 260px; } + +.next-col-offset-fixed-xs-14 { + margin-left: 280px; } + +.next-col-offset-fixed-xs-15 { + margin-left: 300px; } + +.next-col-offset-fixed-xs-16 { + margin-left: 320px; } + +.next-col-offset-fixed-xs-17 { + margin-left: 340px; } + +.next-col-offset-fixed-xs-18 { + margin-left: 360px; } + +.next-col-offset-fixed-xs-19 { + margin-left: 380px; } + +.next-col-offset-fixed-xs-20 { + margin-left: 400px; } + +.next-col-offset-fixed-xs-21 { + margin-left: 420px; } + +.next-col-offset-fixed-xs-22 { + margin-left: 440px; } + +.next-col-offset-fixed-xs-23 { + margin-left: 460px; } + +.next-col-offset-fixed-xs-24 { + margin-left: 480px; } + +.next-col-offset-fixed-xs-25 { + margin-left: 500px; } + +.next-col-offset-fixed-xs-26 { + margin-left: 520px; } + +.next-col-offset-fixed-xs-27 { + margin-left: 540px; } + +.next-col-offset-fixed-xs-28 { + margin-left: 560px; } + +.next-col-offset-fixed-xs-29 { + margin-left: 580px; } + +.next-col-offset-fixed-xs-30 { + margin-left: 600px; } + +.next-col-offset-fixed-s-1 { + margin-left: 20px; } + +.next-col-offset-fixed-s-2 { + margin-left: 40px; } + +.next-col-offset-fixed-s-3 { + margin-left: 60px; } + +.next-col-offset-fixed-s-4 { + margin-left: 80px; } + +.next-col-offset-fixed-s-5 { + margin-left: 100px; } + +.next-col-offset-fixed-s-6 { + margin-left: 120px; } + +.next-col-offset-fixed-s-7 { + margin-left: 140px; } + +.next-col-offset-fixed-s-8 { + margin-left: 160px; } + +.next-col-offset-fixed-s-9 { + margin-left: 180px; } + +.next-col-offset-fixed-s-10 { + margin-left: 200px; } + +.next-col-offset-fixed-s-11 { + margin-left: 220px; } + +.next-col-offset-fixed-s-12 { + margin-left: 240px; } + +.next-col-offset-fixed-s-13 { + margin-left: 260px; } + +.next-col-offset-fixed-s-14 { + margin-left: 280px; } + +.next-col-offset-fixed-s-15 { + margin-left: 300px; } + +.next-col-offset-fixed-s-16 { + margin-left: 320px; } + +.next-col-offset-fixed-s-17 { + margin-left: 340px; } + +.next-col-offset-fixed-s-18 { + margin-left: 360px; } + +.next-col-offset-fixed-s-19 { + margin-left: 380px; } + +.next-col-offset-fixed-s-20 { + margin-left: 400px; } + +.next-col-offset-fixed-s-21 { + margin-left: 420px; } + +.next-col-offset-fixed-s-22 { + margin-left: 440px; } + +.next-col-offset-fixed-s-23 { + margin-left: 460px; } + +.next-col-offset-fixed-s-24 { + margin-left: 480px; } + +.next-col-offset-fixed-s-25 { + margin-left: 500px; } + +.next-col-offset-fixed-s-26 { + margin-left: 520px; } + +.next-col-offset-fixed-s-27 { + margin-left: 540px; } + +.next-col-offset-fixed-s-28 { + margin-left: 560px; } + +.next-col-offset-fixed-s-29 { + margin-left: 580px; } + +.next-col-offset-fixed-s-30 { + margin-left: 600px; } + +.next-col-offset-fixed-m-1 { + margin-left: 20px; } + +.next-col-offset-fixed-m-2 { + margin-left: 40px; } + +.next-col-offset-fixed-m-3 { + margin-left: 60px; } + +.next-col-offset-fixed-m-4 { + margin-left: 80px; } + +.next-col-offset-fixed-m-5 { + margin-left: 100px; } + +.next-col-offset-fixed-m-6 { + margin-left: 120px; } + +.next-col-offset-fixed-m-7 { + margin-left: 140px; } + +.next-col-offset-fixed-m-8 { + margin-left: 160px; } + +.next-col-offset-fixed-m-9 { + margin-left: 180px; } + +.next-col-offset-fixed-m-10 { + margin-left: 200px; } + +.next-col-offset-fixed-m-11 { + margin-left: 220px; } + +.next-col-offset-fixed-m-12 { + margin-left: 240px; } + +.next-col-offset-fixed-m-13 { + margin-left: 260px; } + +.next-col-offset-fixed-m-14 { + margin-left: 280px; } + +.next-col-offset-fixed-m-15 { + margin-left: 300px; } + +.next-col-offset-fixed-m-16 { + margin-left: 320px; } + +.next-col-offset-fixed-m-17 { + margin-left: 340px; } + +.next-col-offset-fixed-m-18 { + margin-left: 360px; } + +.next-col-offset-fixed-m-19 { + margin-left: 380px; } + +.next-col-offset-fixed-m-20 { + margin-left: 400px; } + +.next-col-offset-fixed-m-21 { + margin-left: 420px; } + +.next-col-offset-fixed-m-22 { + margin-left: 440px; } + +.next-col-offset-fixed-m-23 { + margin-left: 460px; } + +.next-col-offset-fixed-m-24 { + margin-left: 480px; } + +.next-col-offset-fixed-m-25 { + margin-left: 500px; } + +.next-col-offset-fixed-m-26 { + margin-left: 520px; } + +.next-col-offset-fixed-m-27 { + margin-left: 540px; } + +.next-col-offset-fixed-m-28 { + margin-left: 560px; } + +.next-col-offset-fixed-m-29 { + margin-left: 580px; } + +.next-col-offset-fixed-m-30 { + margin-left: 600px; } + +.next-col-offset-fixed-l-1 { + margin-left: 20px; } + +.next-col-offset-fixed-l-2 { + margin-left: 40px; } + +.next-col-offset-fixed-l-3 { + margin-left: 60px; } + +.next-col-offset-fixed-l-4 { + margin-left: 80px; } + +.next-col-offset-fixed-l-5 { + margin-left: 100px; } + +.next-col-offset-fixed-l-6 { + margin-left: 120px; } + +.next-col-offset-fixed-l-7 { + margin-left: 140px; } + +.next-col-offset-fixed-l-8 { + margin-left: 160px; } + +.next-col-offset-fixed-l-9 { + margin-left: 180px; } + +.next-col-offset-fixed-l-10 { + margin-left: 200px; } + +.next-col-offset-fixed-l-11 { + margin-left: 220px; } + +.next-col-offset-fixed-l-12 { + margin-left: 240px; } + +.next-col-offset-fixed-l-13 { + margin-left: 260px; } + +.next-col-offset-fixed-l-14 { + margin-left: 280px; } + +.next-col-offset-fixed-l-15 { + margin-left: 300px; } + +.next-col-offset-fixed-l-16 { + margin-left: 320px; } + +.next-col-offset-fixed-l-17 { + margin-left: 340px; } + +.next-col-offset-fixed-l-18 { + margin-left: 360px; } + +.next-col-offset-fixed-l-19 { + margin-left: 380px; } + +.next-col-offset-fixed-l-20 { + margin-left: 400px; } + +.next-col-offset-fixed-l-21 { + margin-left: 420px; } + +.next-col-offset-fixed-l-22 { + margin-left: 440px; } + +.next-col-offset-fixed-l-23 { + margin-left: 460px; } + +.next-col-offset-fixed-l-24 { + margin-left: 480px; } + +.next-col-offset-fixed-l-25 { + margin-left: 500px; } + +.next-col-offset-fixed-l-26 { + margin-left: 520px; } + +.next-col-offset-fixed-l-27 { + margin-left: 540px; } + +.next-col-offset-fixed-l-28 { + margin-left: 560px; } + +.next-col-offset-fixed-l-29 { + margin-left: 580px; } + +.next-col-offset-fixed-l-30 { + margin-left: 600px; } + +.next-col-offset-fixed-xl-1 { + margin-left: 20px; } + +.next-col-offset-fixed-xl-2 { + margin-left: 40px; } + +.next-col-offset-fixed-xl-3 { + margin-left: 60px; } + +.next-col-offset-fixed-xl-4 { + margin-left: 80px; } + +.next-col-offset-fixed-xl-5 { + margin-left: 100px; } + +.next-col-offset-fixed-xl-6 { + margin-left: 120px; } + +.next-col-offset-fixed-xl-7 { + margin-left: 140px; } + +.next-col-offset-fixed-xl-8 { + margin-left: 160px; } + +.next-col-offset-fixed-xl-9 { + margin-left: 180px; } + +.next-col-offset-fixed-xl-10 { + margin-left: 200px; } + +.next-col-offset-fixed-xl-11 { + margin-left: 220px; } + +.next-col-offset-fixed-xl-12 { + margin-left: 240px; } + +.next-col-offset-fixed-xl-13 { + margin-left: 260px; } + +.next-col-offset-fixed-xl-14 { + margin-left: 280px; } + +.next-col-offset-fixed-xl-15 { + margin-left: 300px; } + +.next-col-offset-fixed-xl-16 { + margin-left: 320px; } + +.next-col-offset-fixed-xl-17 { + margin-left: 340px; } + +.next-col-offset-fixed-xl-18 { + margin-left: 360px; } + +.next-col-offset-fixed-xl-19 { + margin-left: 380px; } + +.next-col-offset-fixed-xl-20 { + margin-left: 400px; } + +.next-col-offset-fixed-xl-21 { + margin-left: 420px; } + +.next-col-offset-fixed-xl-22 { + margin-left: 440px; } + +.next-col-offset-fixed-xl-23 { + margin-left: 460px; } + +.next-col-offset-fixed-xl-24 { + margin-left: 480px; } + +.next-col-offset-fixed-xl-25 { + margin-left: 500px; } + +.next-col-offset-fixed-xl-26 { + margin-left: 520px; } + +.next-col-offset-fixed-xl-27 { + margin-left: 540px; } + +.next-col-offset-fixed-xl-28 { + margin-left: 560px; } + +.next-col-offset-fixed-xl-29 { + margin-left: 580px; } + +.next-col-offset-fixed-xl-30 { + margin-left: 600px; } + +.next-col.next-col-hidden { + display: none; } + +@media (min-width: 320px) and (max-width: 479px) { + .next-col.next-col-xxs-hidden { + display: none; } } + +@media (min-width: 480px) and (max-width: 719px) { + .next-col.next-col-xs-hidden { + display: none; } } + +@media (min-width: 720px) and (max-width: 989px) { + .next-col.next-col-s-hidden { + display: none; } } + +@media (min-width: 990px) and (max-width: 1199px) { + .next-col.next-col-m-hidden { + display: none; } } + +@media (min-width: 1200px) and (max-width: 1499px) { + .next-col.next-col-l-hidden { + display: none; } } + +@media (min-width: 1500px) { + .next-col.next-col-xl-hidden { + display: none; } } + +.next-row.next-row-hidden { + display: none; } + +@media (min-width: 320px) and (max-width: 479px) { + .next-row.next-row-xxs-hidden { + display: none; } } + +@media (min-width: 480px) and (max-width: 719px) { + .next-row.next-row-xs-hidden { + display: none; } } + +@media (min-width: 720px) and (max-width: 989px) { + .next-row.next-row-s-hidden { + display: none; } } + +@media (min-width: 990px) and (max-width: 1199px) { + .next-row.next-row-m-hidden { + display: none; } } + +@media (min-width: 1200px) and (max-width: 1499px) { + .next-row.next-row-l-hidden { + display: none; } } + +@media (min-width: 1500px) { + .next-row.next-row-xl-hidden { + display: none; } } + +.next-col-offset-1[dir="rtl"] { + margin-right: 4.16667%; + margin-left: auto; } + +.next-col-offset-2[dir="rtl"] { + margin-right: 8.33333%; + margin-left: auto; } + +.next-col-offset-3[dir="rtl"] { + margin-right: 12.5%; + margin-left: auto; } + +.next-col-offset-4[dir="rtl"] { + margin-right: 16.66667%; + margin-left: auto; } + +.next-col-offset-5[dir="rtl"] { + margin-right: 20.83333%; + margin-left: auto; } + +.next-col-offset-6[dir="rtl"] { + margin-right: 25%; + margin-left: auto; } + +.next-col-offset-7[dir="rtl"] { + margin-right: 29.16667%; + margin-left: auto; } + +.next-col-offset-8[dir="rtl"] { + margin-right: 33.33333%; + margin-left: auto; } + +.next-col-offset-9[dir="rtl"] { + margin-right: 37.5%; + margin-left: auto; } + +.next-col-offset-10[dir="rtl"] { + margin-right: 41.66667%; + margin-left: auto; } + +.next-col-offset-11[dir="rtl"] { + margin-right: 45.83333%; + margin-left: auto; } + +.next-col-offset-12[dir="rtl"] { + margin-right: 50%; + margin-left: auto; } + +.next-col-offset-13[dir="rtl"] { + margin-right: 54.16667%; + margin-left: auto; } + +.next-col-offset-14[dir="rtl"] { + margin-right: 58.33333%; + margin-left: auto; } + +.next-col-offset-15[dir="rtl"] { + margin-right: 62.5%; + margin-left: auto; } + +.next-col-offset-16[dir="rtl"] { + margin-right: 66.66667%; + margin-left: auto; } + +.next-col-offset-17[dir="rtl"] { + margin-right: 70.83333%; + margin-left: auto; } + +.next-col-offset-18[dir="rtl"] { + margin-right: 75%; + margin-left: auto; } + +.next-col-offset-19[dir="rtl"] { + margin-right: 79.16667%; + margin-left: auto; } + +.next-col-offset-20[dir="rtl"] { + margin-right: 83.33333%; + margin-left: auto; } + +.next-col-offset-21[dir="rtl"] { + margin-right: 87.5%; + margin-left: auto; } + +.next-col-offset-22[dir="rtl"] { + margin-right: 91.66667%; + margin-left: auto; } + +.next-col-offset-23[dir="rtl"] { + margin-right: 95.83333%; + margin-left: auto; } + +.next-col-offset-24[dir="rtl"] { + margin-right: 100%; + margin-left: auto; } + +@media (min-width: 320px) { + .next-col-xxs-offset-1[dir="rtl"] { + margin-right: 4.16667%; + margin-left: auto; } + .next-col-xxs-offset-2[dir="rtl"] { + margin-right: 8.33333%; + margin-left: auto; } + .next-col-xxs-offset-3[dir="rtl"] { + margin-right: 12.5%; + margin-left: auto; } + .next-col-xxs-offset-4[dir="rtl"] { + margin-right: 16.66667%; + margin-left: auto; } + .next-col-xxs-offset-5[dir="rtl"] { + margin-right: 20.83333%; + margin-left: auto; } + .next-col-xxs-offset-6[dir="rtl"] { + margin-right: 25%; + margin-left: auto; } + .next-col-xxs-offset-7[dir="rtl"] { + margin-right: 29.16667%; + margin-left: auto; } + .next-col-xxs-offset-8[dir="rtl"] { + margin-right: 33.33333%; + margin-left: auto; } + .next-col-xxs-offset-9[dir="rtl"] { + margin-right: 37.5%; + margin-left: auto; } + .next-col-xxs-offset-10[dir="rtl"] { + margin-right: 41.66667%; + margin-left: auto; } + .next-col-xxs-offset-11[dir="rtl"] { + margin-right: 45.83333%; + margin-left: auto; } + .next-col-xxs-offset-12[dir="rtl"] { + margin-right: 50%; + margin-left: auto; } + .next-col-xxs-offset-13[dir="rtl"] { + margin-right: 54.16667%; + margin-left: auto; } + .next-col-xxs-offset-14[dir="rtl"] { + margin-right: 58.33333%; + margin-left: auto; } + .next-col-xxs-offset-15[dir="rtl"] { + margin-right: 62.5%; + margin-left: auto; } + .next-col-xxs-offset-16[dir="rtl"] { + margin-right: 66.66667%; + margin-left: auto; } + .next-col-xxs-offset-17[dir="rtl"] { + margin-right: 70.83333%; + margin-left: auto; } + .next-col-xxs-offset-18[dir="rtl"] { + margin-right: 75%; + margin-left: auto; } + .next-col-xxs-offset-19[dir="rtl"] { + margin-right: 79.16667%; + margin-left: auto; } + .next-col-xxs-offset-20[dir="rtl"] { + margin-right: 83.33333%; + margin-left: auto; } + .next-col-xxs-offset-21[dir="rtl"] { + margin-right: 87.5%; + margin-left: auto; } + .next-col-xxs-offset-22[dir="rtl"] { + margin-right: 91.66667%; + margin-left: auto; } + .next-col-xxs-offset-23[dir="rtl"] { + margin-right: 95.83333%; + margin-left: auto; } + .next-col-xxs-offset-24[dir="rtl"] { + margin-right: 100%; + margin-left: auto; } } + +@media (min-width: 480px) { + .next-col-xs-offset-1[dir="rtl"] { + margin-right: 4.16667%; + margin-left: auto; } + .next-col-xs-offset-2[dir="rtl"] { + margin-right: 8.33333%; + margin-left: auto; } + .next-col-xs-offset-3[dir="rtl"] { + margin-right: 12.5%; + margin-left: auto; } + .next-col-xs-offset-4[dir="rtl"] { + margin-right: 16.66667%; + margin-left: auto; } + .next-col-xs-offset-5[dir="rtl"] { + margin-right: 20.83333%; + margin-left: auto; } + .next-col-xs-offset-6[dir="rtl"] { + margin-right: 25%; + margin-left: auto; } + .next-col-xs-offset-7[dir="rtl"] { + margin-right: 29.16667%; + margin-left: auto; } + .next-col-xs-offset-8[dir="rtl"] { + margin-right: 33.33333%; + margin-left: auto; } + .next-col-xs-offset-9[dir="rtl"] { + margin-right: 37.5%; + margin-left: auto; } + .next-col-xs-offset-10[dir="rtl"] { + margin-right: 41.66667%; + margin-left: auto; } + .next-col-xs-offset-11[dir="rtl"] { + margin-right: 45.83333%; + margin-left: auto; } + .next-col-xs-offset-12[dir="rtl"] { + margin-right: 50%; + margin-left: auto; } + .next-col-xs-offset-13[dir="rtl"] { + margin-right: 54.16667%; + margin-left: auto; } + .next-col-xs-offset-14[dir="rtl"] { + margin-right: 58.33333%; + margin-left: auto; } + .next-col-xs-offset-15[dir="rtl"] { + margin-right: 62.5%; + margin-left: auto; } + .next-col-xs-offset-16[dir="rtl"] { + margin-right: 66.66667%; + margin-left: auto; } + .next-col-xs-offset-17[dir="rtl"] { + margin-right: 70.83333%; + margin-left: auto; } + .next-col-xs-offset-18[dir="rtl"] { + margin-right: 75%; + margin-left: auto; } + .next-col-xs-offset-19[dir="rtl"] { + margin-right: 79.16667%; + margin-left: auto; } + .next-col-xs-offset-20[dir="rtl"] { + margin-right: 83.33333%; + margin-left: auto; } + .next-col-xs-offset-21[dir="rtl"] { + margin-right: 87.5%; + margin-left: auto; } + .next-col-xs-offset-22[dir="rtl"] { + margin-right: 91.66667%; + margin-left: auto; } + .next-col-xs-offset-23[dir="rtl"] { + margin-right: 95.83333%; + margin-left: auto; } + .next-col-xs-offset-24[dir="rtl"] { + margin-right: 100%; + margin-left: auto; } } + +@media (min-width: 720px) { + .next-col-s-offset-1[dir="rtl"] { + margin-right: 4.16667%; + margin-left: auto; } + .next-col-s-offset-2[dir="rtl"] { + margin-right: 8.33333%; + margin-left: auto; } + .next-col-s-offset-3[dir="rtl"] { + margin-right: 12.5%; + margin-left: auto; } + .next-col-s-offset-4[dir="rtl"] { + margin-right: 16.66667%; + margin-left: auto; } + .next-col-s-offset-5[dir="rtl"] { + margin-right: 20.83333%; + margin-left: auto; } + .next-col-s-offset-6[dir="rtl"] { + margin-right: 25%; + margin-left: auto; } + .next-col-s-offset-7[dir="rtl"] { + margin-right: 29.16667%; + margin-left: auto; } + .next-col-s-offset-8[dir="rtl"] { + margin-right: 33.33333%; + margin-left: auto; } + .next-col-s-offset-9[dir="rtl"] { + margin-right: 37.5%; + margin-left: auto; } + .next-col-s-offset-10[dir="rtl"] { + margin-right: 41.66667%; + margin-left: auto; } + .next-col-s-offset-11[dir="rtl"] { + margin-right: 45.83333%; + margin-left: auto; } + .next-col-s-offset-12[dir="rtl"] { + margin-right: 50%; + margin-left: auto; } + .next-col-s-offset-13[dir="rtl"] { + margin-right: 54.16667%; + margin-left: auto; } + .next-col-s-offset-14[dir="rtl"] { + margin-right: 58.33333%; + margin-left: auto; } + .next-col-s-offset-15[dir="rtl"] { + margin-right: 62.5%; + margin-left: auto; } + .next-col-s-offset-16[dir="rtl"] { + margin-right: 66.66667%; + margin-left: auto; } + .next-col-s-offset-17[dir="rtl"] { + margin-right: 70.83333%; + margin-left: auto; } + .next-col-s-offset-18[dir="rtl"] { + margin-right: 75%; + margin-left: auto; } + .next-col-s-offset-19[dir="rtl"] { + margin-right: 79.16667%; + margin-left: auto; } + .next-col-s-offset-20[dir="rtl"] { + margin-right: 83.33333%; + margin-left: auto; } + .next-col-s-offset-21[dir="rtl"] { + margin-right: 87.5%; + margin-left: auto; } + .next-col-s-offset-22[dir="rtl"] { + margin-right: 91.66667%; + margin-left: auto; } + .next-col-s-offset-23[dir="rtl"] { + margin-right: 95.83333%; + margin-left: auto; } + .next-col-s-offset-24[dir="rtl"] { + margin-right: 100%; + margin-left: auto; } } + +@media (min-width: 990px) { + .next-col-m-offset-1[dir="rtl"] { + margin-right: 4.16667%; + margin-left: auto; } + .next-col-m-offset-2[dir="rtl"] { + margin-right: 8.33333%; + margin-left: auto; } + .next-col-m-offset-3[dir="rtl"] { + margin-right: 12.5%; + margin-left: auto; } + .next-col-m-offset-4[dir="rtl"] { + margin-right: 16.66667%; + margin-left: auto; } + .next-col-m-offset-5[dir="rtl"] { + margin-right: 20.83333%; + margin-left: auto; } + .next-col-m-offset-6[dir="rtl"] { + margin-right: 25%; + margin-left: auto; } + .next-col-m-offset-7[dir="rtl"] { + margin-right: 29.16667%; + margin-left: auto; } + .next-col-m-offset-8[dir="rtl"] { + margin-right: 33.33333%; + margin-left: auto; } + .next-col-m-offset-9[dir="rtl"] { + margin-right: 37.5%; + margin-left: auto; } + .next-col-m-offset-10[dir="rtl"] { + margin-right: 41.66667%; + margin-left: auto; } + .next-col-m-offset-11[dir="rtl"] { + margin-right: 45.83333%; + margin-left: auto; } + .next-col-m-offset-12[dir="rtl"] { + margin-right: 50%; + margin-left: auto; } + .next-col-m-offset-13[dir="rtl"] { + margin-right: 54.16667%; + margin-left: auto; } + .next-col-m-offset-14[dir="rtl"] { + margin-right: 58.33333%; + margin-left: auto; } + .next-col-m-offset-15[dir="rtl"] { + margin-right: 62.5%; + margin-left: auto; } + .next-col-m-offset-16[dir="rtl"] { + margin-right: 66.66667%; + margin-left: auto; } + .next-col-m-offset-17[dir="rtl"] { + margin-right: 70.83333%; + margin-left: auto; } + .next-col-m-offset-18[dir="rtl"] { + margin-right: 75%; + margin-left: auto; } + .next-col-m-offset-19[dir="rtl"] { + margin-right: 79.16667%; + margin-left: auto; } + .next-col-m-offset-20[dir="rtl"] { + margin-right: 83.33333%; + margin-left: auto; } + .next-col-m-offset-21[dir="rtl"] { + margin-right: 87.5%; + margin-left: auto; } + .next-col-m-offset-22[dir="rtl"] { + margin-right: 91.66667%; + margin-left: auto; } + .next-col-m-offset-23[dir="rtl"] { + margin-right: 95.83333%; + margin-left: auto; } + .next-col-m-offset-24[dir="rtl"] { + margin-right: 100%; + margin-left: auto; } } + +@media (min-width: 1200px) { + .next-col-l-offset-1[dir="rtl"] { + margin-right: 4.16667%; + margin-left: auto; } + .next-col-l-offset-2[dir="rtl"] { + margin-right: 8.33333%; + margin-left: auto; } + .next-col-l-offset-3[dir="rtl"] { + margin-right: 12.5%; + margin-left: auto; } + .next-col-l-offset-4[dir="rtl"] { + margin-right: 16.66667%; + margin-left: auto; } + .next-col-l-offset-5[dir="rtl"] { + margin-right: 20.83333%; + margin-left: auto; } + .next-col-l-offset-6[dir="rtl"] { + margin-right: 25%; + margin-left: auto; } + .next-col-l-offset-7[dir="rtl"] { + margin-right: 29.16667%; + margin-left: auto; } + .next-col-l-offset-8[dir="rtl"] { + margin-right: 33.33333%; + margin-left: auto; } + .next-col-l-offset-9[dir="rtl"] { + margin-right: 37.5%; + margin-left: auto; } + .next-col-l-offset-10[dir="rtl"] { + margin-right: 41.66667%; + margin-left: auto; } + .next-col-l-offset-11[dir="rtl"] { + margin-right: 45.83333%; + margin-left: auto; } + .next-col-l-offset-12[dir="rtl"] { + margin-right: 50%; + margin-left: auto; } + .next-col-l-offset-13[dir="rtl"] { + margin-right: 54.16667%; + margin-left: auto; } + .next-col-l-offset-14[dir="rtl"] { + margin-right: 58.33333%; + margin-left: auto; } + .next-col-l-offset-15[dir="rtl"] { + margin-right: 62.5%; + margin-left: auto; } + .next-col-l-offset-16[dir="rtl"] { + margin-right: 66.66667%; + margin-left: auto; } + .next-col-l-offset-17[dir="rtl"] { + margin-right: 70.83333%; + margin-left: auto; } + .next-col-l-offset-18[dir="rtl"] { + margin-right: 75%; + margin-left: auto; } + .next-col-l-offset-19[dir="rtl"] { + margin-right: 79.16667%; + margin-left: auto; } + .next-col-l-offset-20[dir="rtl"] { + margin-right: 83.33333%; + margin-left: auto; } + .next-col-l-offset-21[dir="rtl"] { + margin-right: 87.5%; + margin-left: auto; } + .next-col-l-offset-22[dir="rtl"] { + margin-right: 91.66667%; + margin-left: auto; } + .next-col-l-offset-23[dir="rtl"] { + margin-right: 95.83333%; + margin-left: auto; } + .next-col-l-offset-24[dir="rtl"] { + margin-right: 100%; + margin-left: auto; } } + +@media (min-width: 1500px) { + .next-col-xl-offset-1[dir="rtl"] { + margin-right: 4.16667%; + margin-left: auto; } + .next-col-xl-offset-2[dir="rtl"] { + margin-right: 8.33333%; + margin-left: auto; } + .next-col-xl-offset-3[dir="rtl"] { + margin-right: 12.5%; + margin-left: auto; } + .next-col-xl-offset-4[dir="rtl"] { + margin-right: 16.66667%; + margin-left: auto; } + .next-col-xl-offset-5[dir="rtl"] { + margin-right: 20.83333%; + margin-left: auto; } + .next-col-xl-offset-6[dir="rtl"] { + margin-right: 25%; + margin-left: auto; } + .next-col-xl-offset-7[dir="rtl"] { + margin-right: 29.16667%; + margin-left: auto; } + .next-col-xl-offset-8[dir="rtl"] { + margin-right: 33.33333%; + margin-left: auto; } + .next-col-xl-offset-9[dir="rtl"] { + margin-right: 37.5%; + margin-left: auto; } + .next-col-xl-offset-10[dir="rtl"] { + margin-right: 41.66667%; + margin-left: auto; } + .next-col-xl-offset-11[dir="rtl"] { + margin-right: 45.83333%; + margin-left: auto; } + .next-col-xl-offset-12[dir="rtl"] { + margin-right: 50%; + margin-left: auto; } + .next-col-xl-offset-13[dir="rtl"] { + margin-right: 54.16667%; + margin-left: auto; } + .next-col-xl-offset-14[dir="rtl"] { + margin-right: 58.33333%; + margin-left: auto; } + .next-col-xl-offset-15[dir="rtl"] { + margin-right: 62.5%; + margin-left: auto; } + .next-col-xl-offset-16[dir="rtl"] { + margin-right: 66.66667%; + margin-left: auto; } + .next-col-xl-offset-17[dir="rtl"] { + margin-right: 70.83333%; + margin-left: auto; } + .next-col-xl-offset-18[dir="rtl"] { + margin-right: 75%; + margin-left: auto; } + .next-col-xl-offset-19[dir="rtl"] { + margin-right: 79.16667%; + margin-left: auto; } + .next-col-xl-offset-20[dir="rtl"] { + margin-right: 83.33333%; + margin-left: auto; } + .next-col-xl-offset-21[dir="rtl"] { + margin-right: 87.5%; + margin-left: auto; } + .next-col-xl-offset-22[dir="rtl"] { + margin-right: 91.66667%; + margin-left: auto; } + .next-col-xl-offset-23[dir="rtl"] { + margin-right: 95.83333%; + margin-left: auto; } + .next-col-xl-offset-24[dir="rtl"] { + margin-right: 100%; + margin-left: auto; } } + +.next-col-offset-fixed-1[dir="rtl"] { + margin-right: 20px; + margin-left: auto; } + +.next-col-offset-fixed-2[dir="rtl"] { + margin-right: 40px; + margin-left: auto; } + +.next-col-offset-fixed-3[dir="rtl"] { + margin-right: 60px; + margin-left: auto; } + +.next-col-offset-fixed-4[dir="rtl"] { + margin-right: 80px; + margin-left: auto; } + +.next-col-offset-fixed-5[dir="rtl"] { + margin-right: 100px; + margin-left: auto; } + +.next-col-offset-fixed-6[dir="rtl"] { + margin-right: 120px; + margin-left: auto; } + +.next-col-offset-fixed-7[dir="rtl"] { + margin-right: 140px; + margin-left: auto; } + +.next-col-offset-fixed-8[dir="rtl"] { + margin-right: 160px; + margin-left: auto; } + +.next-col-offset-fixed-9[dir="rtl"] { + margin-right: 180px; + margin-left: auto; } + +.next-col-offset-fixed-10[dir="rtl"] { + margin-right: 200px; + margin-left: auto; } + +.next-col-offset-fixed-11[dir="rtl"] { + margin-right: 220px; + margin-left: auto; } + +.next-col-offset-fixed-12[dir="rtl"] { + margin-right: 240px; + margin-left: auto; } + +.next-col-offset-fixed-13[dir="rtl"] { + margin-right: 260px; + margin-left: auto; } + +.next-col-offset-fixed-14[dir="rtl"] { + margin-right: 280px; + margin-left: auto; } + +.next-col-offset-fixed-15[dir="rtl"] { + margin-right: 300px; + margin-left: auto; } + +.next-col-offset-fixed-16[dir="rtl"] { + margin-right: 320px; + margin-left: auto; } + +.next-col-offset-fixed-17[dir="rtl"] { + margin-right: 340px; + margin-left: auto; } + +.next-col-offset-fixed-18[dir="rtl"] { + margin-right: 360px; + margin-left: auto; } + +.next-col-offset-fixed-19[dir="rtl"] { + margin-right: 380px; + margin-left: auto; } + +.next-col-offset-fixed-20[dir="rtl"] { + margin-right: 400px; + margin-left: auto; } + +.next-col-offset-fixed-21[dir="rtl"] { + margin-right: 420px; + margin-left: auto; } + +.next-col-offset-fixed-22[dir="rtl"] { + margin-right: 440px; + margin-left: auto; } + +.next-col-offset-fixed-23[dir="rtl"] { + margin-right: 460px; + margin-left: auto; } + +.next-col-offset-fixed-24[dir="rtl"] { + margin-right: 480px; + margin-left: auto; } + +.next-col-offset-fixed-25[dir="rtl"] { + margin-right: 500px; + margin-left: auto; } + +.next-col-offset-fixed-26[dir="rtl"] { + margin-right: 520px; + margin-left: auto; } + +.next-col-offset-fixed-27[dir="rtl"] { + margin-right: 540px; + margin-left: auto; } + +.next-col-offset-fixed-28[dir="rtl"] { + margin-right: 560px; + margin-left: auto; } + +.next-col-offset-fixed-29[dir="rtl"] { + margin-right: 580px; + margin-left: auto; } + +.next-col-offset-fixed-30[dir="rtl"] { + margin-right: 600px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-1[dir="rtl"] { + margin-right: 20px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-2[dir="rtl"] { + margin-right: 40px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-3[dir="rtl"] { + margin-right: 60px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-4[dir="rtl"] { + margin-right: 80px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-5[dir="rtl"] { + margin-right: 100px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-6[dir="rtl"] { + margin-right: 120px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-7[dir="rtl"] { + margin-right: 140px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-8[dir="rtl"] { + margin-right: 160px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-9[dir="rtl"] { + margin-right: 180px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-10[dir="rtl"] { + margin-right: 200px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-11[dir="rtl"] { + margin-right: 220px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-12[dir="rtl"] { + margin-right: 240px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-13[dir="rtl"] { + margin-right: 260px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-14[dir="rtl"] { + margin-right: 280px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-15[dir="rtl"] { + margin-right: 300px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-16[dir="rtl"] { + margin-right: 320px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-17[dir="rtl"] { + margin-right: 340px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-18[dir="rtl"] { + margin-right: 360px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-19[dir="rtl"] { + margin-right: 380px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-20[dir="rtl"] { + margin-right: 400px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-21[dir="rtl"] { + margin-right: 420px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-22[dir="rtl"] { + margin-right: 440px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-23[dir="rtl"] { + margin-right: 460px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-24[dir="rtl"] { + margin-right: 480px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-25[dir="rtl"] { + margin-right: 500px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-26[dir="rtl"] { + margin-right: 520px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-27[dir="rtl"] { + margin-right: 540px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-28[dir="rtl"] { + margin-right: 560px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-29[dir="rtl"] { + margin-right: 580px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-30[dir="rtl"] { + margin-right: 600px; + margin-left: auto; } + +.next-col-offset-fixed-xs-1[dir="rtl"] { + margin-right: 20px; + margin-left: auto; } + +.next-col-offset-fixed-xs-2[dir="rtl"] { + margin-right: 40px; + margin-left: auto; } + +.next-col-offset-fixed-xs-3[dir="rtl"] { + margin-right: 60px; + margin-left: auto; } + +.next-col-offset-fixed-xs-4[dir="rtl"] { + margin-right: 80px; + margin-left: auto; } + +.next-col-offset-fixed-xs-5[dir="rtl"] { + margin-right: 100px; + margin-left: auto; } + +.next-col-offset-fixed-xs-6[dir="rtl"] { + margin-right: 120px; + margin-left: auto; } + +.next-col-offset-fixed-xs-7[dir="rtl"] { + margin-right: 140px; + margin-left: auto; } + +.next-col-offset-fixed-xs-8[dir="rtl"] { + margin-right: 160px; + margin-left: auto; } + +.next-col-offset-fixed-xs-9[dir="rtl"] { + margin-right: 180px; + margin-left: auto; } + +.next-col-offset-fixed-xs-10[dir="rtl"] { + margin-right: 200px; + margin-left: auto; } + +.next-col-offset-fixed-xs-11[dir="rtl"] { + margin-right: 220px; + margin-left: auto; } + +.next-col-offset-fixed-xs-12[dir="rtl"] { + margin-right: 240px; + margin-left: auto; } + +.next-col-offset-fixed-xs-13[dir="rtl"] { + margin-right: 260px; + margin-left: auto; } + +.next-col-offset-fixed-xs-14[dir="rtl"] { + margin-right: 280px; + margin-left: auto; } + +.next-col-offset-fixed-xs-15[dir="rtl"] { + margin-right: 300px; + margin-left: auto; } + +.next-col-offset-fixed-xs-16[dir="rtl"] { + margin-right: 320px; + margin-left: auto; } + +.next-col-offset-fixed-xs-17[dir="rtl"] { + margin-right: 340px; + margin-left: auto; } + +.next-col-offset-fixed-xs-18[dir="rtl"] { + margin-right: 360px; + margin-left: auto; } + +.next-col-offset-fixed-xs-19[dir="rtl"] { + margin-right: 380px; + margin-left: auto; } + +.next-col-offset-fixed-xs-20[dir="rtl"] { + margin-right: 400px; + margin-left: auto; } + +.next-col-offset-fixed-xs-21[dir="rtl"] { + margin-right: 420px; + margin-left: auto; } + +.next-col-offset-fixed-xs-22[dir="rtl"] { + margin-right: 440px; + margin-left: auto; } + +.next-col-offset-fixed-xs-23[dir="rtl"] { + margin-right: 460px; + margin-left: auto; } + +.next-col-offset-fixed-xs-24[dir="rtl"] { + margin-right: 480px; + margin-left: auto; } + +.next-col-offset-fixed-xs-25[dir="rtl"] { + margin-right: 500px; + margin-left: auto; } + +.next-col-offset-fixed-xs-26[dir="rtl"] { + margin-right: 520px; + margin-left: auto; } + +.next-col-offset-fixed-xs-27[dir="rtl"] { + margin-right: 540px; + margin-left: auto; } + +.next-col-offset-fixed-xs-28[dir="rtl"] { + margin-right: 560px; + margin-left: auto; } + +.next-col-offset-fixed-xs-29[dir="rtl"] { + margin-right: 580px; + margin-left: auto; } + +.next-col-offset-fixed-xs-30[dir="rtl"] { + margin-right: 600px; + margin-left: auto; } + +.next-col-offset-fixed-s-1[dir="rtl"] { + margin-right: 20px; + margin-left: auto; } + +.next-col-offset-fixed-s-2[dir="rtl"] { + margin-right: 40px; + margin-left: auto; } + +.next-col-offset-fixed-s-3[dir="rtl"] { + margin-right: 60px; + margin-left: auto; } + +.next-col-offset-fixed-s-4[dir="rtl"] { + margin-right: 80px; + margin-left: auto; } + +.next-col-offset-fixed-s-5[dir="rtl"] { + margin-right: 100px; + margin-left: auto; } + +.next-col-offset-fixed-s-6[dir="rtl"] { + margin-right: 120px; + margin-left: auto; } + +.next-col-offset-fixed-s-7[dir="rtl"] { + margin-right: 140px; + margin-left: auto; } + +.next-col-offset-fixed-s-8[dir="rtl"] { + margin-right: 160px; + margin-left: auto; } + +.next-col-offset-fixed-s-9[dir="rtl"] { + margin-right: 180px; + margin-left: auto; } + +.next-col-offset-fixed-s-10[dir="rtl"] { + margin-right: 200px; + margin-left: auto; } + +.next-col-offset-fixed-s-11[dir="rtl"] { + margin-right: 220px; + margin-left: auto; } + +.next-col-offset-fixed-s-12[dir="rtl"] { + margin-right: 240px; + margin-left: auto; } + +.next-col-offset-fixed-s-13[dir="rtl"] { + margin-right: 260px; + margin-left: auto; } + +.next-col-offset-fixed-s-14[dir="rtl"] { + margin-right: 280px; + margin-left: auto; } + +.next-col-offset-fixed-s-15[dir="rtl"] { + margin-right: 300px; + margin-left: auto; } + +.next-col-offset-fixed-s-16[dir="rtl"] { + margin-right: 320px; + margin-left: auto; } + +.next-col-offset-fixed-s-17[dir="rtl"] { + margin-right: 340px; + margin-left: auto; } + +.next-col-offset-fixed-s-18[dir="rtl"] { + margin-right: 360px; + margin-left: auto; } + +.next-col-offset-fixed-s-19[dir="rtl"] { + margin-right: 380px; + margin-left: auto; } + +.next-col-offset-fixed-s-20[dir="rtl"] { + margin-right: 400px; + margin-left: auto; } + +.next-col-offset-fixed-s-21[dir="rtl"] { + margin-right: 420px; + margin-left: auto; } + +.next-col-offset-fixed-s-22[dir="rtl"] { + margin-right: 440px; + margin-left: auto; } + +.next-col-offset-fixed-s-23[dir="rtl"] { + margin-right: 460px; + margin-left: auto; } + +.next-col-offset-fixed-s-24[dir="rtl"] { + margin-right: 480px; + margin-left: auto; } + +.next-col-offset-fixed-s-25[dir="rtl"] { + margin-right: 500px; + margin-left: auto; } + +.next-col-offset-fixed-s-26[dir="rtl"] { + margin-right: 520px; + margin-left: auto; } + +.next-col-offset-fixed-s-27[dir="rtl"] { + margin-right: 540px; + margin-left: auto; } + +.next-col-offset-fixed-s-28[dir="rtl"] { + margin-right: 560px; + margin-left: auto; } + +.next-col-offset-fixed-s-29[dir="rtl"] { + margin-right: 580px; + margin-left: auto; } + +.next-col-offset-fixed-s-30[dir="rtl"] { + margin-right: 600px; + margin-left: auto; } + +.next-col-offset-fixed-m-1[dir="rtl"] { + margin-right: 20px; + margin-left: auto; } + +.next-col-offset-fixed-m-2[dir="rtl"] { + margin-right: 40px; + margin-left: auto; } + +.next-col-offset-fixed-m-3[dir="rtl"] { + margin-right: 60px; + margin-left: auto; } + +.next-col-offset-fixed-m-4[dir="rtl"] { + margin-right: 80px; + margin-left: auto; } + +.next-col-offset-fixed-m-5[dir="rtl"] { + margin-right: 100px; + margin-left: auto; } + +.next-col-offset-fixed-m-6[dir="rtl"] { + margin-right: 120px; + margin-left: auto; } + +.next-col-offset-fixed-m-7[dir="rtl"] { + margin-right: 140px; + margin-left: auto; } + +.next-col-offset-fixed-m-8[dir="rtl"] { + margin-right: 160px; + margin-left: auto; } + +.next-col-offset-fixed-m-9[dir="rtl"] { + margin-right: 180px; + margin-left: auto; } + +.next-col-offset-fixed-m-10[dir="rtl"] { + margin-right: 200px; + margin-left: auto; } + +.next-col-offset-fixed-m-11[dir="rtl"] { + margin-right: 220px; + margin-left: auto; } + +.next-col-offset-fixed-m-12[dir="rtl"] { + margin-right: 240px; + margin-left: auto; } + +.next-col-offset-fixed-m-13[dir="rtl"] { + margin-right: 260px; + margin-left: auto; } + +.next-col-offset-fixed-m-14[dir="rtl"] { + margin-right: 280px; + margin-left: auto; } + +.next-col-offset-fixed-m-15[dir="rtl"] { + margin-right: 300px; + margin-left: auto; } + +.next-col-offset-fixed-m-16[dir="rtl"] { + margin-right: 320px; + margin-left: auto; } + +.next-col-offset-fixed-m-17[dir="rtl"] { + margin-right: 340px; + margin-left: auto; } + +.next-col-offset-fixed-m-18[dir="rtl"] { + margin-right: 360px; + margin-left: auto; } + +.next-col-offset-fixed-m-19[dir="rtl"] { + margin-right: 380px; + margin-left: auto; } + +.next-col-offset-fixed-m-20[dir="rtl"] { + margin-right: 400px; + margin-left: auto; } + +.next-col-offset-fixed-m-21[dir="rtl"] { + margin-right: 420px; + margin-left: auto; } + +.next-col-offset-fixed-m-22[dir="rtl"] { + margin-right: 440px; + margin-left: auto; } + +.next-col-offset-fixed-m-23[dir="rtl"] { + margin-right: 460px; + margin-left: auto; } + +.next-col-offset-fixed-m-24[dir="rtl"] { + margin-right: 480px; + margin-left: auto; } + +.next-col-offset-fixed-m-25[dir="rtl"] { + margin-right: 500px; + margin-left: auto; } + +.next-col-offset-fixed-m-26[dir="rtl"] { + margin-right: 520px; + margin-left: auto; } + +.next-col-offset-fixed-m-27[dir="rtl"] { + margin-right: 540px; + margin-left: auto; } + +.next-col-offset-fixed-m-28[dir="rtl"] { + margin-right: 560px; + margin-left: auto; } + +.next-col-offset-fixed-m-29[dir="rtl"] { + margin-right: 580px; + margin-left: auto; } + +.next-col-offset-fixed-m-30[dir="rtl"] { + margin-right: 600px; + margin-left: auto; } + +.next-col-offset-fixed-l-1[dir="rtl"] { + margin-right: 20px; + margin-left: auto; } + +.next-col-offset-fixed-l-2[dir="rtl"] { + margin-right: 40px; + margin-left: auto; } + +.next-col-offset-fixed-l-3[dir="rtl"] { + margin-right: 60px; + margin-left: auto; } + +.next-col-offset-fixed-l-4[dir="rtl"] { + margin-right: 80px; + margin-left: auto; } + +.next-col-offset-fixed-l-5[dir="rtl"] { + margin-right: 100px; + margin-left: auto; } + +.next-col-offset-fixed-l-6[dir="rtl"] { + margin-right: 120px; + margin-left: auto; } + +.next-col-offset-fixed-l-7[dir="rtl"] { + margin-right: 140px; + margin-left: auto; } + +.next-col-offset-fixed-l-8[dir="rtl"] { + margin-right: 160px; + margin-left: auto; } + +.next-col-offset-fixed-l-9[dir="rtl"] { + margin-right: 180px; + margin-left: auto; } + +.next-col-offset-fixed-l-10[dir="rtl"] { + margin-right: 200px; + margin-left: auto; } + +.next-col-offset-fixed-l-11[dir="rtl"] { + margin-right: 220px; + margin-left: auto; } + +.next-col-offset-fixed-l-12[dir="rtl"] { + margin-right: 240px; + margin-left: auto; } + +.next-col-offset-fixed-l-13[dir="rtl"] { + margin-right: 260px; + margin-left: auto; } + +.next-col-offset-fixed-l-14[dir="rtl"] { + margin-right: 280px; + margin-left: auto; } + +.next-col-offset-fixed-l-15[dir="rtl"] { + margin-right: 300px; + margin-left: auto; } + +.next-col-offset-fixed-l-16[dir="rtl"] { + margin-right: 320px; + margin-left: auto; } + +.next-col-offset-fixed-l-17[dir="rtl"] { + margin-right: 340px; + margin-left: auto; } + +.next-col-offset-fixed-l-18[dir="rtl"] { + margin-right: 360px; + margin-left: auto; } + +.next-col-offset-fixed-l-19[dir="rtl"] { + margin-right: 380px; + margin-left: auto; } + +.next-col-offset-fixed-l-20[dir="rtl"] { + margin-right: 400px; + margin-left: auto; } + +.next-col-offset-fixed-l-21[dir="rtl"] { + margin-right: 420px; + margin-left: auto; } + +.next-col-offset-fixed-l-22[dir="rtl"] { + margin-right: 440px; + margin-left: auto; } + +.next-col-offset-fixed-l-23[dir="rtl"] { + margin-right: 460px; + margin-left: auto; } + +.next-col-offset-fixed-l-24[dir="rtl"] { + margin-right: 480px; + margin-left: auto; } + +.next-col-offset-fixed-l-25[dir="rtl"] { + margin-right: 500px; + margin-left: auto; } + +.next-col-offset-fixed-l-26[dir="rtl"] { + margin-right: 520px; + margin-left: auto; } + +.next-col-offset-fixed-l-27[dir="rtl"] { + margin-right: 540px; + margin-left: auto; } + +.next-col-offset-fixed-l-28[dir="rtl"] { + margin-right: 560px; + margin-left: auto; } + +.next-col-offset-fixed-l-29[dir="rtl"] { + margin-right: 580px; + margin-left: auto; } + +.next-col-offset-fixed-l-30[dir="rtl"] { + margin-right: 600px; + margin-left: auto; } + +.next-col-offset-fixed-xl-1[dir="rtl"] { + margin-right: 20px; + margin-left: auto; } + +.next-col-offset-fixed-xl-2[dir="rtl"] { + margin-right: 40px; + margin-left: auto; } + +.next-col-offset-fixed-xl-3[dir="rtl"] { + margin-right: 60px; + margin-left: auto; } + +.next-col-offset-fixed-xl-4[dir="rtl"] { + margin-right: 80px; + margin-left: auto; } + +.next-col-offset-fixed-xl-5[dir="rtl"] { + margin-right: 100px; + margin-left: auto; } + +.next-col-offset-fixed-xl-6[dir="rtl"] { + margin-right: 120px; + margin-left: auto; } + +.next-col-offset-fixed-xl-7[dir="rtl"] { + margin-right: 140px; + margin-left: auto; } + +.next-col-offset-fixed-xl-8[dir="rtl"] { + margin-right: 160px; + margin-left: auto; } + +.next-col-offset-fixed-xl-9[dir="rtl"] { + margin-right: 180px; + margin-left: auto; } + +.next-col-offset-fixed-xl-10[dir="rtl"] { + margin-right: 200px; + margin-left: auto; } + +.next-col-offset-fixed-xl-11[dir="rtl"] { + margin-right: 220px; + margin-left: auto; } + +.next-col-offset-fixed-xl-12[dir="rtl"] { + margin-right: 240px; + margin-left: auto; } + +.next-col-offset-fixed-xl-13[dir="rtl"] { + margin-right: 260px; + margin-left: auto; } + +.next-col-offset-fixed-xl-14[dir="rtl"] { + margin-right: 280px; + margin-left: auto; } + +.next-col-offset-fixed-xl-15[dir="rtl"] { + margin-right: 300px; + margin-left: auto; } + +.next-col-offset-fixed-xl-16[dir="rtl"] { + margin-right: 320px; + margin-left: auto; } + +.next-col-offset-fixed-xl-17[dir="rtl"] { + margin-right: 340px; + margin-left: auto; } + +.next-col-offset-fixed-xl-18[dir="rtl"] { + margin-right: 360px; + margin-left: auto; } + +.next-col-offset-fixed-xl-19[dir="rtl"] { + margin-right: 380px; + margin-left: auto; } + +.next-col-offset-fixed-xl-20[dir="rtl"] { + margin-right: 400px; + margin-left: auto; } + +.next-col-offset-fixed-xl-21[dir="rtl"] { + margin-right: 420px; + margin-left: auto; } + +.next-col-offset-fixed-xl-22[dir="rtl"] { + margin-right: 440px; + margin-left: auto; } + +.next-col-offset-fixed-xl-23[dir="rtl"] { + margin-right: 460px; + margin-left: auto; } + +.next-col-offset-fixed-xl-24[dir="rtl"] { + margin-right: 480px; + margin-left: auto; } + +.next-col-offset-fixed-xl-25[dir="rtl"] { + margin-right: 500px; + margin-left: auto; } + +.next-col-offset-fixed-xl-26[dir="rtl"] { + margin-right: 520px; + margin-left: auto; } + +.next-col-offset-fixed-xl-27[dir="rtl"] { + margin-right: 540px; + margin-left: auto; } + +.next-col-offset-fixed-xl-28[dir="rtl"] { + margin-right: 560px; + margin-left: auto; } + +.next-col-offset-fixed-xl-29[dir="rtl"] { + margin-right: 580px; + margin-left: auto; } + +.next-col-offset-fixed-xl-30[dir="rtl"] { + margin-right: 600px; + margin-left: auto; } + +.next-form { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-form *, + .next-form *:before, + .next-form *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-form-item { + /* medium */ + margin-bottom: 16px; } + .next-form-item.has-error .next-form-item-help { + color: #FF3000; } + .next-form-item .next-form-item-label, .next-form-item .next-form-text-align, .next-form-item p { + line-height: 28px; } + .next-form-item .next-form-text-align, .next-form-item p { + margin: 0; } + .next-form-item .next-checkbox-wrapper, .next-form-item .next-checkbox-group, .next-form-item .next-radio-wrapper, .next-form-item .next-radio-group { + line-height: 24px; } + .next-form-item .next-form-item-label { + font-size: 12px; } + .next-form-item.next-large { + margin-bottom: 20px; } + .next-form-item.next-large .next-form-item-label, .next-form-item.next-large .next-form-text-align, .next-form-item.next-large p { + line-height: 40px; } + .next-form-item.next-large .next-checkbox-wrapper, .next-form-item.next-large .next-checkbox-group, .next-form-item.next-large .next-radio-wrapper, .next-form-item.next-large .next-radio-group { + line-height: 39px; } + .next-form-item.next-large .next-switch { + margin-top: 7px; } + .next-form-item.next-large .next-form-item-label { + font-size: 16px; } + .next-form-item.next-small { + margin-bottom: 12px; } + .next-form-item.next-small .next-form-item-label, .next-form-item.next-small .next-form-text-align, .next-form-item.next-small p { + line-height: 20px; } + .next-form-item.next-small .next-checkbox-wrapper, .next-form-item.next-small .next-checkbox-group, .next-form-item.next-small .next-radio-wrapper, .next-form-item.next-small .next-radio-group { + line-height: 20px; } + .next-form-item.next-small .next-form-item-label { + font-size: 12px; } + .next-form-item.next-top > .next-form-item-label { + margin-bottom: 2px; } + .next-form-item.next-inset .next-form-item-label { + padding-right: 0; + padding-left: 0; + line-height: inherit; } + .next-form-item-control .next-form-text-align { + margin: 0; } + .next-form-item-control > .next-input-group, .next-form-item-control > .next-input { + width: 100%; } + .next-form-item-label { + display: inline-block; + vertical-align: top; + color: #666666; + text-align: right; + padding-right: 12px; } + .next-form-item-label label[required]:before { + margin-right: 4px; + content: "*"; + color: #FF3000; } + .next-form-item-label.next-left { + text-align: left; } + .next-form-item-label.next-left > label[required]::before { + display: none; } + .next-form-item-label.next-left > label[required]::after { + margin-left: 4px; + content: "*"; + color: #FF3000; } + .next-form-item-help { + margin-top: 4px; + font-size: 12px; + line-height: 1.5; + color: #999999; } + .next-form.next-inline .next-form-item { + display: inline-block; + vertical-align: top; + /* label on left */ } + .next-form.next-inline .next-form-item.next-left .next-form-item-control { + display: inline-block; + vertical-align: top; + line-height: 0; } + .next-form.next-inline .next-form-item:not(:last-child) { + margin-right: 20px; } + .next-form.next-inline .next-form-item.next-large:not(:last-child) { + margin-right: 24px; } + .next-form.next-inline .next-form-item.next-small:not(:last-child) { + margin-right: 16px; } + +@media screen and (min-width: 0\0) and (min-resolution: 0.001dpcm) { + .next-form-item.next-left > .next-form-item-label { + display: table-cell; } + .next-form.next-inline .next-form-item.next-left .next-form-item-control { + display: table-cell; } } + +.next-form[dir="rtl"] .next-form-item-label { + text-align: left; + padding-left: 12px; + padding-right: 0; } + +.next-form[dir="rtl"].next-inline .next-form-item:not(:last-child) { + margin-left: 20px; + margin-right: 0; } + +.next-form[dir="rtl"].next-inline .next-form-item.next-large:not(:last-child) { + margin-left: 24px; + margin-right: 0; } + +.next-form[dir="rtl"].next-inline .next-form-item.next-small:not(:last-child) { + margin-left: 16px; + margin-right: 0; } + +.next-loading-fusion-reactor[dir=rtl] { + -webkit-animation-name: nextVectorRouteRTL; + animation-name: nextVectorRouteRTL; } + +@-webkit-keyframes nextVectorRouteRTL { + 0% { + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } + 5% { + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); } + 25% { + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); } + 30% { + -webkit-transform: rotate(-180deg); + -ms-transform: rotate(-180deg); + transform: rotate(-180deg); } + 50% { + -webkit-transform: rotate(-180deg); + -ms-transform: rotate(-180deg); + transform: rotate(-180deg); } + 55% { + -webkit-transform: rotate(-270deg); + -ms-transform: rotate(-270deg); + transform: rotate(-270deg); } + 75% { + -webkit-transform: rotate(-270deg); + -ms-transform: rotate(-270deg); + transform: rotate(-270deg); } + 80% { + -webkit-transform: rotate(-360deg); + -ms-transform: rotate(-360deg); + transform: rotate(-360deg); } + 100% { + -webkit-transform: rotate(-360deg); + -ms-transform: rotate(-360deg); + transform: rotate(-360deg); } } + +@keyframes nextVectorRouteRTL { + 0% { + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } + 5% { + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); } + 25% { + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); } + 30% { + -webkit-transform: rotate(-180deg); + -ms-transform: rotate(-180deg); + transform: rotate(-180deg); } + 50% { + -webkit-transform: rotate(-180deg); + -ms-transform: rotate(-180deg); + transform: rotate(-180deg); } + 55% { + -webkit-transform: rotate(-270deg); + -ms-transform: rotate(-270deg); + transform: rotate(-270deg); } + 75% { + -webkit-transform: rotate(-270deg); + -ms-transform: rotate(-270deg); + transform: rotate(-270deg); } + 80% { + -webkit-transform: rotate(-360deg); + -ms-transform: rotate(-360deg); + transform: rotate(-360deg); } + 100% { + -webkit-transform: rotate(-360deg); + -ms-transform: rotate(-360deg); + transform: rotate(-360deg); } } + +/* put your code here */ +.next-loading { + position: relative; + /* 遮罩层 */ + /* for IE9,10 */ + /* text on the right side of */ + /* 动效 */ } + .next-loading.next-open { + pointer-events: none; } + .next-loading .next-loading-component { + opacity: .7; + -webkit-filter: blur(1px); + filter: blur(1px); + -webkit-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false)"; + filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false)"; + /* IE6~IE9 */ + position: relative; + pointer-events: none; } + .next-loading-masker { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 99; + opacity: .2; + background: #FFF; } + .next-loading-inline { + display: inline-block; } + .next-loading-tip { + display: block; + position: absolute; + top: 50%; + left: 50%; + z-index: 4; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + text-align: center; } + .next-loading-tip-fullscreen { + top: inherit; + left: inherit; + -webkit-transform: inherit; + -ms-transform: inherit; + transform: inherit; } + .next-loading-tip-placeholder { + display: none; } + .next-loading-right-tip .next-loading-indicator { + display: inline-block; } + .next-loading-right-tip .next-loading-tip-content { + position: absolute; + display: block; + top: 50%; + right: 0; + -webkit-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); } + .next-loading-right-tip .next-loading-tip-placeholder { + display: inline-block; + visibility: hidden; + margin-left: 1em; } + .next-loading-fusion-reactor { + display: inline-block; + width: 48px; + height: 48px; + position: relative; + margin: 0; + -webkit-animation-duration: 5.6s; + animation-duration: 5.6s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-name: nextVectorRoute; + animation-name: nextVectorRoute; } + .next-loading-fusion-reactor .next-loading-dot { + position: absolute; + margin: auto; + width: 12px; + height: 12px; + border-radius: 50%; + background: #5584FF; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-duration: 1.4s; + animation-duration: 1.4s; } + .next-loading-fusion-reactor .next-loading-dot:nth-child(1) { + top: 0; + bottom: 0; + left: 0; + -webkit-animation-name: nextVectorDotsX; + animation-name: nextVectorDotsX; } + .next-loading-fusion-reactor .next-loading-dot:nth-child(2) { + left: 0; + right: 0; + top: 0; + opacity: .8; + -webkit-animation-name: nextVectorDotsY; + animation-name: nextVectorDotsY; } + .next-loading-fusion-reactor .next-loading-dot:nth-child(3) { + top: 0; + bottom: 0; + right: 0; + opacity: .6; + -webkit-animation-name: nextVectorDotsXR; + animation-name: nextVectorDotsXR; } + .next-loading-fusion-reactor .next-loading-dot:nth-child(4) { + left: 0; + right: 0; + bottom: 0; + opacity: .2; + -webkit-animation-name: nextVectorDotsYR; + animation-name: nextVectorDotsYR; } + .next-loading-medium-fusion-reactor { + width: 32px; + height: 32px; } + .next-loading-medium-fusion-reactor .next-loading-dot { + width: 8px; + height: 8px; } + .next-loading-medium-fusion-reactor .next-loading-dot:nth-child(1) { + -webkit-animation-name: nextVectorDotsX-medium; + animation-name: nextVectorDotsX-medium; } + .next-loading-medium-fusion-reactor .next-loading-dot:nth-child(2) { + -webkit-animation-name: nextVectorDotsY-medium; + animation-name: nextVectorDotsY-medium; } + .next-loading-medium-fusion-reactor .next-loading-dot:nth-child(3) { + -webkit-animation-name: nextVectorDotsXR-medium; + animation-name: nextVectorDotsXR-medium; } + .next-loading-medium-fusion-reactor .next-loading-dot:nth-child(4) { + -webkit-animation-name: nextVectorDotsYR-medium; + animation-name: nextVectorDotsYR-medium; } + +@-webkit-keyframes nextVectorRoute { + 0% { + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } + 5% { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); } + 25% { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); } + 30% { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + 50% { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + 55% { + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); } + 75% { + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); } + 80% { + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); } + 100% { + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); } } + +@keyframes nextVectorRoute { + 0% { + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } + 5% { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); } + 25% { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); } + 30% { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + 50% { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + 55% { + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); } + 75% { + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); } + 80% { + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); } + 100% { + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); } } + +/* 20% 的时间在旋转 */ +@-webkit-keyframes nextVectorDotsYR { + 25% { + bottom: 0; } + 45%, + 50% { + bottom: 16.8px; + height: 14.4px; + width: 14.4px; } + 90% { + bottom: 0; + height: 12px; + width: 12px; } } + +@keyframes nextVectorDotsYR { + 25% { + bottom: 0; } + 45%, + 50% { + bottom: 16.8px; + height: 14.4px; + width: 14.4px; } + 90% { + bottom: 0; + height: 12px; + width: 12px; } } + +@-webkit-keyframes nextVectorDotsY { + 25% { + top: 0; } + 45%, + 50% { + top: 16.8px; + height: 14.4px; + width: 14.4px; } + 90% { + top: 0; + height: 12px; + width: 12px; } } + +@keyframes nextVectorDotsY { + 25% { + top: 0; } + 45%, + 50% { + top: 16.8px; + height: 14.4px; + width: 14.4px; } + 90% { + top: 0; + height: 12px; + width: 12px; } } + +@-webkit-keyframes nextVectorDotsX { + 25% { + left: 0; } + 45%, + 50% { + left: 16.8px; + width: 14.4px; + height: 14.4px; } + 90% { + left: 0; + height: 12px; + width: 12px; } } + +@keyframes nextVectorDotsX { + 25% { + left: 0; } + 45%, + 50% { + left: 16.8px; + width: 14.4px; + height: 14.4px; } + 90% { + left: 0; + height: 12px; + width: 12px; } } + +@-webkit-keyframes nextVectorDotsXR { + 25% { + right: 0; } + 45%, + 50% { + right: 16.8px; + width: 14.4px; + height: 14.4px; } + 90% { + right: 0; + height: 12px; + width: 12px; } } + +@keyframes nextVectorDotsXR { + 25% { + right: 0; } + 45%, + 50% { + right: 16.8px; + width: 14.4px; + height: 14.4px; } + 90% { + right: 0; + height: 12px; + width: 12px; } } + +@-webkit-keyframes nextVectorDotsYR-medium { + 25% { + bottom: 0; } + 45%, + 50% { + bottom: 11.2px; + height: 9.6px; + width: 9.6px; } + 90% { + bottom: 0; + height: 8px; + width: 8px; } } + +@keyframes nextVectorDotsYR-medium { + 25% { + bottom: 0; } + 45%, + 50% { + bottom: 11.2px; + height: 9.6px; + width: 9.6px; } + 90% { + bottom: 0; + height: 8px; + width: 8px; } } + +@-webkit-keyframes nextVectorDotsY-medium { + 25% { + top: 0; } + 45%, + 50% { + top: 11.2px; + height: 9.6px; + width: 9.6px; } + 90% { + top: 0; + height: 8px; + width: 8px; } } + +@keyframes nextVectorDotsY-medium { + 25% { + top: 0; } + 45%, + 50% { + top: 11.2px; + height: 9.6px; + width: 9.6px; } + 90% { + top: 0; + height: 8px; + width: 8px; } } + +@-webkit-keyframes nextVectorDotsX-medium { + 25% { + left: 0; } + 45%, + 50% { + left: 11.2px; + width: 9.6px; + height: 9.6px; } + 90% { + left: 0; + height: 8px; + width: 8px; } } + +@keyframes nextVectorDotsX-medium { + 25% { + left: 0; } + 45%, + 50% { + left: 11.2px; + width: 9.6px; + height: 9.6px; } + 90% { + left: 0; + height: 8px; + width: 8px; } } + +@-webkit-keyframes nextVectorDotsXR-medium { + 25% { + right: 0; } + 45%, + 50% { + right: 11.2px; + width: 9.6px; + height: 9.6px; } + 90% { + right: 0; + height: 8px; + width: 8px; } } + +@keyframes nextVectorDotsXR-medium { + 25% { + right: 0; } + 45%, + 50% { + right: 11.2px; + width: 9.6px; + height: 9.6px; } + 90% { + right: 0; + height: 8px; + width: 8px; } } + +.next-menu-btn { + display: inline-block; + -webkit-box-shadow: none; + box-shadow: none; } + .next-menu-btn .next-icon { + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } + .next-menu-btn.next-expand .next-menu-btn-arrow { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + .next-menu-btn.next-btn-normal .next-menu-btn-arrow { + color: #999999; } + .next-menu-btn.next-btn-secondary .next-menu-btn-arrow { + color: #5584FF; } + .next-menu-btn.next-btn-primary .next-menu-btn-arrow { + color: #FFFFFF; } + .next-menu-btn.next-btn-text.next-btn-normal .next-menu-btn-arrow { + color: #333333; } + .next-menu-btn.next-btn-text.next-btn-primary .next-menu-btn-arrow { + color: #5584FF; } + .next-menu-btn.next-btn-ghost.next-btn-light .next-menu-btn-arrow { + color: #333333; } + .next-menu-btn.next-btn-ghost.next-btn-dark .next-menu-btn-arrow { + color: #FFFFFF; } + .next-menu-btn.disabled .next-menu-btn-arrow, + .next-menu-btn[disabled] .next-menu-btn-arrow { + color: #CCCCCC; } + .next-menu-btn.next-btn-text.disabled .next-menu-btn-arrow, + .next-menu-btn.next-btn-text[disabled] .next-menu-btn-arrow { + color: #CCCCCC; } + .next-menu-btn[disabled].next-btn-ghost.next-btn-dark .next-menu-btn-arrow { + color: rgba(255, 255, 255, 0.4); } + .next-menu-btn[disabled].next-btn-ghost.next-btn-light .next-menu-btn-arrow { + color: rgba(0, 0, 0, 0.1); } + +.next-nav { + -webkit-box-sizing: border-box; + box-sizing: border-box; + min-width: auto; + padding: 0; + border-radius: 0; } + .next-nav *, + .next-nav *:before, + .next-nav *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-nav-icon.next-icon { + margin-right: 4px; + font-weight: inherit; } + .next-nav-icon.next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-nav-icon-placeholder { + display: inline-block; + width: 16px; + height: 16px; + margin-left: 2px; + margin-right: 2px; } + .next-nav-group-label { + height: 40px; + line-height: 40px; + font-size: 16px; } + .next-nav-item .next-menu-item-text > span, + .next-nav-item .next-nav-group-label > span { + opacity: 1; + -webkit-transition: opacity .3s; + transition: opacity .3s; } + .next-nav-item a { + text-decoration: none; + color: inherit; } + .next-nav-item .next-menu-hoz-icon-arrow.next-icon, + .next-nav-item .next-menu-icon-arrow.next-icon, .next-nav-item:hover .next-menu-hoz-icon-arrow.next-icon, + .next-nav-item:hover .next-menu-icon-arrow.next-icon, .next-nav-item.next-focused .next-menu-hoz-icon-arrow.next-icon, + .next-nav-item.next-focused .next-menu-icon-arrow.next-icon, .next-nav-item.next-selected .next-menu-hoz-icon-arrow.next-icon, + .next-nav-item.next-selected .next-menu-icon-arrow.next-icon, .next-nav-item.next-opened .next-menu-hoz-icon-arrow.next-icon, + .next-nav-item.next-opened .next-menu-icon-arrow.next-icon { + color: inherit; + top: 2px; + -webkit-transform-origin: center 47%; + -ms-transform-origin: center 47%; + transform-origin: center 47%; } + .next-nav.next-active .next-nav-item:before { + position: absolute; + -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); + transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); + content: ''; } + .next-nav.next-hoz { + height: 44px; + line-height: 42px; + font-size: 12px; } + .next-nav.next-hoz .next-menu-item { + margin-left: 0; + margin-right: 0; + padding: 0 20px; + border-radius: 0; } + .next-nav.next-hoz .next-menu-item:before { + height: 2px; } + .next-nav.next-hoz .next-menu-item:not(:first-child), + .next-nav.next-hoz .next-menu-sub-menu-wrapper:not(:first-child) > .next-menu-item { + margin-top: 0; } + .next-nav.next-hoz .next-menu-item:not(:last-child), + .next-nav.next-hoz .next-menu-sub-menu-wrapper:not(:last-child) > .next-menu-item { + margin-bottom: 0; } + .next-nav.next-hoz .next-menu-item-inner { + height: 42px; + font-size: 12px; } + .next-nav.next-hoz .next-nav-group-label .next-menu-item-inner { + height: 40px; + line-height: 40px; + font-size: 16px; } + .next-nav.next-hoz .next-menu-header { + float: left; + height: 42px; } + .next-nav.next-hoz .next-menu-footer { + float: right; + height: 42px; } + .next-nav.next-hoz .next-nav-item:before { + width: 0; + left: 50%; } + .next-nav.next-hoz.next-top .next-nav-item:before { + top: -1px; } + .next-nav.next-hoz.next-bottom .next-nav-item:before { + bottom: -1px; } + .next-nav.next-hoz .next-selected.next-nav-item:before { + width: 100%; + left: 0; } + .next-nav.next-ver { + -webkit-transition: width .3s; + transition: width .3s; + line-height: 40px; + font-size: 12px; } + .next-nav.next-ver .next-menu-item { + margin-left: 0; + margin-right: 0; + padding: 0 20px; + border-radius: 0; } + .next-nav.next-ver .next-menu-item:before { + width: 2px; } + .next-nav.next-ver .next-menu-item:not(:first-child), + .next-nav.next-ver .next-menu-sub-menu-wrapper:not(:first-child) > .next-menu-item { + margin-top: 0; } + .next-nav.next-ver .next-menu-item:not(:last-child), + .next-nav.next-ver .next-menu-sub-menu-wrapper:not(:last-child) > .next-menu-item { + margin-bottom: 0; } + .next-nav.next-ver .next-menu-item-inner { + height: 40px; + font-size: 12px; } + .next-nav.next-ver .next-nav-group-label .next-menu-item-inner { + height: 40px; + line-height: 40px; + font-size: 16px; } + .next-nav.next-ver > .next-menu-item:first-child, + .next-nav.next-ver > .next-menu-sub-menu-wrapper:first-child > .next-menu-item { + margin-top: 0; } + .next-nav.next-ver > .next-menu-item:last-child, + .next-nav.next-ver > .next-menu-sub-menu-wrapper:last-child > .next-menu-item { + margin-bottom: 0; } + .next-nav.next-ver .next-menu-sub-menu .next-menu-item-inner { + height: 40px; + line-height: 40px; + font-size: 12px; } + .next-nav.next-ver .next-nav-item:before { + height: 0; + top: 50%; } + .next-nav.next-ver.next-left .next-nav-item:before { + left: -1px; } + .next-nav.next-ver.next-right .next-nav-item:before { + right: -1px; } + .next-nav.next-ver .next-selected.next-nav-item:before { + height: 100%; + top: 0; } + .next-nav.next-primary { + border-width: 0; + background-color: #333333; + border-color: #333333; + color: #FFFFFF; + font-weight: normal; + -webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); } + .next-nav.next-primary.next-hoz { + line-height: 44px; } + .next-nav.next-primary.next-hoz .next-menu-header { + height: 44px; } + .next-nav.next-primary.next-hoz .next-menu-footer { + height: 44px; } + .next-nav.next-primary.next-hoz .next-menu-item-inner { + height: 44px; } + .next-nav.next-primary.next-hoz.next-top .next-nav-item:before { + top: 0; } + .next-nav.next-primary.next-hoz.next-bottom .next-nav-item:before { + bottom: 0; } + .next-nav.next-primary.next-ver.next-left .next-nav-item:before { + left: 0; } + .next-nav.next-primary.next-ver.next-right .next-nav-item:before { + right: 0; } + .next-nav.next-primary .next-nav-item.next-menu-item { + background-color: #333333; + color: #FFFFFF; } + .next-nav.next-primary .next-nav-item.next-menu-item.next-focused, .next-nav.next-primary .next-nav-item.next-menu-item:hover { + background-color: #000000; + color: #FFFFFF; } + .next-nav.next-primary .next-nav-item.next-menu-item.next-selected { + background-color: #000000; + color: #FFFFFF; + font-weight: bold; } + .next-nav.next-primary .next-nav-item.next-menu-item.next-opened { + background-color: #000000; + color: #FFFFFF; } + .next-nav.next-primary .next-nav-item.next-menu-item:before { + background-color: #5584FF; } + .next-nav.next-primary .next-menu-sub-menu .next-menu-item.next-opened { + background-color: #000000; + color: #FFFFFF; } + .next-nav.next-primary .next-nav-group-label { + color: #999999; + font-weight: normal; } + .next-nav.next-primary .next-menu-sub-menu .next-menu-item { + background-color: #333333; + color: #FFFFFF; + font-weight: normal; } + .next-nav.next-primary .next-menu-sub-menu .next-menu-item.next-focused, .next-nav.next-primary .next-menu-sub-menu .next-menu-item:hover { + background-color: #000000; + color: #FFFFFF; } + .next-nav.next-primary .next-menu-sub-menu .next-menu-item.next-selected { + background-color: #000000; + color: #FFFFFF; } + .next-nav.next-secondary { + border-width: 0; + background-color: #5584FF; + border-color: #5584FF; + color: #FFFFFF; + font-weight: normal; + -webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); } + .next-nav.next-secondary.next-hoz { + line-height: 44px; } + .next-nav.next-secondary.next-hoz .next-menu-header { + height: 44px; } + .next-nav.next-secondary.next-hoz .next-menu-footer { + height: 44px; } + .next-nav.next-secondary.next-hoz .next-menu-item-inner { + height: 44px; } + .next-nav.next-secondary.next-hoz.next-top .next-nav-item:before { + top: 0; } + .next-nav.next-secondary.next-hoz.next-bottom .next-nav-item:before { + bottom: 0; } + .next-nav.next-secondary.next-ver.next-left .next-nav-item:before { + left: 0; } + .next-nav.next-secondary.next-ver.next-right .next-nav-item:before { + right: 0; } + .next-nav.next-secondary .next-nav-item.next-menu-item { + background-color: #5584FF; + color: #FFFFFF; } + .next-nav.next-secondary .next-nav-item.next-menu-item.next-focused, .next-nav.next-secondary .next-nav-item.next-menu-item:hover { + background-color: #3E71F7; + color: #FFFFFF; } + .next-nav.next-secondary .next-nav-item.next-menu-item.next-selected { + background-color: #3E71F7; + color: #FFFFFF; + font-weight: bold; } + .next-nav.next-secondary .next-nav-item.next-menu-item.next-opened { + background-color: #3E71F7; + color: #FFFFFF; } + .next-nav.next-secondary .next-nav-item.next-menu-item:before { + background-color: #3E71F7; } + .next-nav.next-secondary .next-menu-sub-menu .next-menu-item.next-opened { + background-color: #3E71F7; + color: #FFFFFF; } + .next-nav.next-secondary .next-nav-group-label { + color: #FFFFFF; + font-weight: normal; } + .next-nav.next-secondary .next-menu-sub-menu .next-menu-item { + background-color: #5584FF; + color: #FFFFFF; + font-weight: normal; } + .next-nav.next-secondary .next-menu-sub-menu .next-menu-item.next-focused, .next-nav.next-secondary .next-menu-sub-menu .next-menu-item:hover { + background-color: #3E71F7; + color: #FFFFFF; } + .next-nav.next-secondary .next-menu-sub-menu .next-menu-item.next-selected { + background-color: #3E71F7; + color: #FFFFFF; } + .next-nav.next-normal { + background-color: #FFFFFF; + border-color: #DCDEE3; + color: #333333; + font-weight: normal; + -webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); } + .next-nav.next-normal .next-nav-item.next-menu-item { + background-color: #FFFFFF; + color: #333333; } + .next-nav.next-normal .next-nav-item.next-menu-item.next-focused, .next-nav.next-normal .next-nav-item.next-menu-item:hover { + background-color: #FFFFFF; + color: #5584FF; } + .next-nav.next-normal .next-nav-item.next-menu-item.next-selected { + background-color: #F2F3F7; + color: #5584FF; + font-weight: bold; } + .next-nav.next-normal .next-nav-item.next-menu-item.next-opened { + background-color: #F2F3F7; + color: #5584FF; } + .next-nav.next-normal .next-nav-item.next-menu-item:before { + background-color: #5584FF; } + .next-nav.next-normal .next-menu-sub-menu .next-menu-item.next-opened { + background-color: #F2F3F7; + color: #5584FF; } + .next-nav.next-normal .next-nav-group-label { + color: #999999; + font-weight: normal; } + .next-nav.next-normal .next-menu-sub-menu .next-menu-item { + background-color: #FFFFFF; + color: #333333; + font-weight: normal; } + .next-nav.next-normal .next-menu-sub-menu .next-menu-item.next-focused, .next-nav.next-normal .next-menu-sub-menu .next-menu-item:hover { + background-color: #F2F3F7; + color: #5584FF; } + .next-nav.next-normal .next-menu-sub-menu .next-menu-item.next-selected { + background-color: #F2F3F7; + color: #5584FF; } + .next-nav.next-line { + background-color: transparent; + border-color: #DCDEE3; + color: #333333; + font-weight: normal; + -webkit-box-shadow: none; + box-shadow: none; } + .next-nav.next-line.next-hoz { + border-top-color: transparent; + border-left-color: transparent; + border-right-color: transparent; } + .next-nav.next-line.next-ver { + border-top-color: transparent; + border-left-color: transparent; + border-bottom-color: transparent; } + .next-nav.next-line .next-nav-item.next-menu-item { + background-color: transparent; + color: #333333; } + .next-nav.next-line .next-nav-item.next-menu-item.next-focused, .next-nav.next-line .next-nav-item.next-menu-item:hover { + background-color: transparent; + color: #5584FF; } + .next-nav.next-line .next-nav-item.next-menu-item.next-selected { + background-color: transparent; + color: #5584FF; + font-weight: bold; } + .next-nav.next-line .next-nav-item.next-menu-item.next-opened { + background-color: transparent; + color: #5584FF; } + .next-nav.next-line .next-nav-item.next-menu-item:before { + background-color: #5584FF; } + .next-nav.next-line .next-menu-sub-menu .next-menu-item.next-opened { + background-color: transparent; + color: #5584FF; } + .next-nav.next-line .next-nav-group-label { + color: #999999; + font-weight: normal; } + .next-nav.next-line .next-menu-sub-menu .next-menu-item { + background-color: transparent; + color: #333333; + font-weight: normal; } + .next-nav.next-line .next-menu-sub-menu .next-menu-item.next-focused, .next-nav.next-line .next-menu-sub-menu .next-menu-item:hover { + background-color: transparent; + color: #5584FF; } + .next-nav.next-line .next-menu-sub-menu .next-menu-item.next-selected { + background-color: transparent; + color: #5584FF; } + .next-nav.next-icon-only .next-menu-item-inner { + text-overflow: clip; } + .next-nav.next-icon-only .next-menu-item-text > span, + .next-nav.next-icon-only .next-nav-group-label > .next-menu-item-inner > span { + opacity: 0; } + .next-nav.next-icon-only.next-normal .next-nav-icon.next-icon { + margin-left: 1px; + margin-right: 1px; } + .next-nav.next-icon-only.next-normal .next-nav-icon.next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-nav.next-icon-only.next-primary .next-nav-icon.next-icon { + margin-left: 2px; + margin-right: 2px; } + .next-nav.next-icon-only.next-primary .next-nav-icon.next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-nav.next-icon-only.next-secondary .next-nav-icon.next-icon { + margin-left: 2px; + margin-right: 2px; } + .next-nav.next-icon-only.next-secondary .next-nav-icon.next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-nav.next-icon-only .next-nav-icon-only-arrow.next-icon { + margin-left: 1px; + -webkit-transition: all ease .3s; + transition: all ease .3s; + -webkit-transform-origin: center 46%; + -ms-transform-origin: center 46%; + transform-origin: center 46%; } + .next-nav.next-icon-only .next-nav-icon-only-arrow.next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-nav.next-icon-only .next-nav-item.next-opened .next-nav-icon-only-arrow.next-icon-arrow-down { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); + margin-left: 1px; } + .next-nav.next-icon-only .next-nav-item.next-opened .next-nav-icon-only-arrow.next-icon-arrow-down:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-nav.next-icon-only .next-nav-item.next-selected .next-nav-icon.next-icon { + -webkit-animation: pulse 0.3s cubic-bezier(0.23, 1, 0.32, 1); + animation: pulse 0.3s cubic-bezier(0.23, 1, 0.32, 1); } + .next-nav.next-icon-only .next-menu-hoz-icon-arrow, + .next-nav.next-icon-only .next-menu-icon-arrow { + display: none; } + .next-nav-embeddable.next-primary, .next-nav-embeddable.next-secondary, .next-nav-embeddable.next-normal { + height: 100%; + background: initial; + -webkit-box-shadow: none; + box-shadow: none; + border: none; } + .next-nav-embeddable.next-primary .next-menu-sub-menu .next-menu-item, + .next-nav-embeddable.next-primary .next-nav-item.next-menu-item, .next-nav-embeddable.next-secondary .next-menu-sub-menu .next-menu-item, + .next-nav-embeddable.next-secondary .next-nav-item.next-menu-item, .next-nav-embeddable.next-normal .next-menu-sub-menu .next-menu-item, + .next-nav-embeddable.next-normal .next-nav-item.next-menu-item { + background: initial; } + .next-nav-embeddable.next-nav.next-hoz .next-menu-item-inner { + height: 100%; } + .next-nav-embeddable.next-nav.next-hoz .next-menu-sub-menu .next-menu-item, + .next-nav-embeddable.next-nav.next-hoz .next-nav-item.next-menu-item { + height: 100%; } + +.next-nav[dir="rtl"] .next-nav-icon.next-icon { + margin-left: 4px; + margin-right: 0; } + .next-nav[dir="rtl"] .next-nav-icon.next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-nav[dir="rtl"].next-hoz .next-menu-header { + float: right; } + +.next-nav[dir="rtl"].next-hoz .next-menu-footer { + float: left; } + +.next-nav[dir="rtl"].next-hoz .next-nav-item:before { + width: 0; + left: 50%; } + +.next-nav[dir="rtl"].next-hoz .next-selected.next-nav-item:before { + width: 100%; + left: auto; + right: 0; } + +.next-nav[dir="rtl"].next-ver.next-left .next-nav-item:before { + right: -1px; + left: auto; } + +.next-nav[dir="rtl"].next-ver.next-right .next-nav-item:before { + left: -1px; + right: auto; } + +.next-nav[dir="rtl"].next-primary.next-ver.next-left .next-nav-item:before { + right: 0; + left: auto; } + +.next-nav[dir="rtl"].next-primary.next-ver.next-right .next-nav-item:before { + left: 0; + right: auto; } + +.next-nav[dir="rtl"].next-secondary.next-ver.next-left .next-nav-item:before { + right: 0; + left: auto; } + +.next-nav[dir="rtl"].next-secondary.next-ver.next-right .next-nav-item:before { + left: 0; + right: auto; } + +.next-nav[dir="rtl"] .next-nav.next-line.next-ver { + border-top-color: transparent; + border-right-color: transparent; + border-left-color: none; + border-bottom-color: transparent; } + +.next-nav[dir="rtl"].next-icon-only .next-nav-icon.next-icon, +.next-nav[dir="rtl"].next-icon-only .next-nav-icon-only-arrow.next-icon, +.next-nav[dir="rtl"].next-icon-only .next-nav-item.next-opened .next-nav-icon-only-arrow.next-icon-arrow-down { + margin-left: 0; + margin-right: 1px; } + .next-nav[dir="rtl"].next-icon-only .next-nav-icon.next-icon:before, + .next-nav[dir="rtl"].next-icon-only .next-nav-icon-only-arrow.next-icon:before, + .next-nav[dir="rtl"].next-icon-only .next-nav-item.next-opened .next-nav-icon-only-arrow.next-icon-arrow-down:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + +.next-number-picker { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; + /* stylelint-disable declaration-no-important */ } + .next-number-picker *, + .next-number-picker *:before, + .next-number-picker *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-number-picker .next-btn { + padding: 0 !important; + line-height: 0 !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; } + .next-number-picker-normal { + width: 80px; } + .next-number-picker-normal .next-input { + width: 100%; } + .next-number-picker-normal .next-input input { + padding-right: 2px; } + .next-number-picker-normal .next-btn { + display: block; } + .next-number-picker-normal .next-btn:hover { + z-index: 1; } + .next-number-picker-normal .next-btn:first-child { + border-right: none; + border-top: none; + height: calc(50%); + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } + .next-number-picker-normal .next-btn:last-child { + border-right: none; + border-bottom: none; + margin-top: -1px; + height: calc(50% + 1px); + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 0; } + .next-number-picker-normal .next-number-picker-handler { + opacity: 0; + -webkit-transition: opacity .24s linear .1s; + transition: opacity .24s linear .1s; + height: 100%; } + .next-number-picker-normal:hover .next-number-picker-handler { + opacity: 1; } + .next-number-picker-normal .next-input.next-disabled .next-number-picker-handler { + opacity: 0; } + .next-number-picker-normal.next-medium .next-btn { + width: 20px; } + .next-number-picker-normal.next-medium .next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-number-picker-normal.next-medium .next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-number-picker-normal.next-medium .next-icon:before { + width: 16px; + font-size: 16px; } } + .next-number-picker-normal.next-large .next-btn { + width: 20px; } + .next-number-picker-normal.next-large .next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-number-picker-normal.next-large .next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-number-picker-normal.next-large .next-icon:before { + width: 16px; + font-size: 16px; } } + .next-number-picker-inline input { + text-align: center; } + .next-number-picker-inline .next-input input { + padding: 0; } + .next-number-picker-inline.next-medium { + width: 100px; } + .next-number-picker-inline.next-medium .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-number-picker-inline.next-medium .next-btn:first-child { + margin-right: 2px; } + .next-number-picker-inline.next-medium .next-btn:last-child { + margin-left: 2px; } + .next-number-picker-inline.next-large { + width: 128px; } + .next-number-picker-inline.next-large .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-number-picker-inline.next-large .next-btn:first-child { + margin-right: 2px; } + .next-number-picker-inline.next-large .next-btn:last-child { + margin-left: 2px; } + .next-number-picker-inline .next-btn.next-medium { + width: 28px; } + .next-number-picker-inline .next-btn.next-large { + width: 40px; } + +.next-number-picker-normal[dir="rtl"] .next-btn:first-child { + border-right: 1px solid #C4C6CF; + border-left: 0; + border-top-left-radius: 3px; + border-top-right-radius: 0; } + +.next-number-picker-normal[dir="rtl"] .next-btn:last-child { + border-right: 1px solid #C4C6CF; + border-left: 0; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 0; } + +.next-number-picker-inline[dir="rtl"] .next-btn { + border-radius: 0; } + +.next-number-picker-inline[dir="rtl"] .next-before .next-btn { + border-top-right-radius: 3px !important; + border-bottom-right-radius: 3px !important; } + +.next-number-picker-inline[dir="rtl"] .next-after .next-btn { + border-top-left-radius: 3px !important; + border-bottom-left-radius: 3px !important; } + +.next-pagination[dir="rtl"] .next-pagination-total { + margin-right: 0; + margin-left: 16px; } + +.next-pagination[dir="rtl"] .next-pagination-jump-go { + margin-left: 0; + margin-right: 4px; } + +.next-pagination[dir="rtl"] .next-pagination-size-selector-title { + margin-right: 0; + margin-left: 4px; } + +.next-pagination[dir="rtl"] .next-pagination-size-selector-btn.next-btn-text + .next-pagination-size-selector-btn { + border-left: none; + border-right: 1px solid #DCDEE3; } + +.next-pagination[dir="rtl"] .next-pagination-pages + .next-pagination-size-selector, +.next-pagination[dir="rtl"] .next-pagination-size-selector + .next-pagination-pages { + margin-left: 0; + margin-right: 40px; } + +.next-pagination[dir="rtl"].next-start .next-pagination-pages { + float: left; } + +.next-pagination[dir="rtl"].next-start .next-pagination-size-selector { + float: right; } + +.next-pagination[dir="rtl"].next-end .next-pagination-pages { + float: right; } + +.next-pagination[dir="rtl"].next-end .next-pagination-size-selector { + float: left; } + +.next-pagination[dir="rtl"].next-small .next-pagination-list { + margin: 0 4px; } + +.next-pagination[dir="rtl"].next-small .next-pagination-total { + line-height: 20px; + vertical-align: middle; } + +.next-pagination[dir="rtl"].next-small .next-pagination-item { + padding: 0 6px; } + .next-pagination[dir="rtl"].next-small .next-pagination-item + .next-pagination-item { + margin: 0 4px 0 0; } + +.next-pagination[dir="rtl"].next-small .next-pagination-ellipsis { + height: 20px; + line-height: 20px; + margin-left: 8px; + margin-right: 8px; } + .next-pagination[dir="rtl"].next-small .next-pagination-ellipsis:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-pagination[dir="rtl"].next-small .next-pagination-display { + font-size: 12px; } + .next-pagination[dir="rtl"].next-small .next-pagination-display em { + font-size: 12px; } + +.next-pagination[dir="rtl"].next-small .next-pagination-jump-text { + font-size: 12px; } + +.next-pagination[dir="rtl"].next-small .next-pagination-jump-input { + width: 28px; } + +.next-pagination[dir="rtl"].next-small .next-pagination-size-selector-title { + height: 20px; + line-height: 20px; + font-size: 12px; + vertical-align: middle; } + +.next-pagination[dir="rtl"].next-small .next-pagination-size-selector-btn { + padding: 0 8px; } + +.next-pagination[dir="rtl"].next-small .next-pagination-item.next-prev:not([disabled]) i, +.next-pagination[dir="rtl"].next-small .next-pagination-item.next-next:not([disabled]) i { + color: #666666; } + +.next-pagination[dir="rtl"].next-small .next-pagination-item:hover.next-prev:not([disabled]) i, +.next-pagination[dir="rtl"].next-small .next-pagination-item:hover.next-next:not([disabled]) i { + color: #333333; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-list { + margin: 0 4px; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-total { + line-height: 28px; + vertical-align: middle; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-item { + padding: 0 10px; } + .next-pagination[dir="rtl"].next-medium .next-pagination-item + .next-pagination-item { + margin: 0 4px 0 0; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-ellipsis { + height: 28px; + line-height: 28px; + margin-left: 8px; + margin-right: 8px; } + .next-pagination[dir="rtl"].next-medium .next-pagination-ellipsis:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-display { + font-size: 12px; } + .next-pagination[dir="rtl"].next-medium .next-pagination-display em { + font-size: 12px; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-jump-text { + font-size: 12px; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-jump-input { + width: 36px; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-size-selector-title { + height: 28px; + line-height: 28px; + font-size: 12px; + vertical-align: middle; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-size-selector-btn { + padding: 0 12px; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-item.next-prev:not([disabled]) i, +.next-pagination[dir="rtl"].next-medium .next-pagination-item.next-next:not([disabled]) i { + color: #666666; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-item:hover.next-prev:not([disabled]) i, +.next-pagination[dir="rtl"].next-medium .next-pagination-item:hover.next-next:not([disabled]) i { + color: #333333; } + +.next-pagination[dir="rtl"].next-large .next-pagination-list { + margin: 0 8px; } + +.next-pagination[dir="rtl"].next-large .next-pagination-total { + line-height: 40px; + vertical-align: middle; } + +.next-pagination[dir="rtl"].next-large .next-pagination-item { + padding: 0 15px; } + .next-pagination[dir="rtl"].next-large .next-pagination-item + .next-pagination-item { + margin: 0 8px 0 0; } + +.next-pagination[dir="rtl"].next-large .next-pagination-ellipsis { + height: 40px; + line-height: 40px; + margin-left: 8px; + margin-right: 8px; } + .next-pagination[dir="rtl"].next-large .next-pagination-ellipsis:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + +.next-pagination[dir="rtl"].next-large .next-pagination-display { + font-size: 16px; } + .next-pagination[dir="rtl"].next-large .next-pagination-display em { + font-size: 16px; } + +.next-pagination[dir="rtl"].next-large .next-pagination-jump-text { + font-size: 16px; } + +.next-pagination[dir="rtl"].next-large .next-pagination-jump-input { + width: 48px; } + +.next-pagination[dir="rtl"].next-large .next-pagination-size-selector-title { + height: 40px; + line-height: 40px; + font-size: 16px; + vertical-align: middle; } + +.next-pagination[dir="rtl"].next-large .next-pagination-size-selector-btn { + padding: 0 16px; } + +.next-pagination[dir="rtl"].next-large .next-pagination-item.next-prev:not([disabled]) i, +.next-pagination[dir="rtl"].next-large .next-pagination-item.next-next:not([disabled]) i { + color: #666666; } + +.next-pagination[dir="rtl"].next-large .next-pagination-item:hover.next-prev:not([disabled]) i, +.next-pagination[dir="rtl"].next-large .next-pagination-item:hover.next-next:not([disabled]) i { + color: #333333; } + +.next-pagination { + -webkit-box-sizing: border-box; + box-sizing: border-box; + font-size: 0; } + .next-pagination *, + .next-pagination *:before, + .next-pagination *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-pagination:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + .next-pagination-total { + display: inline-block; + font-size: 14px; + margin-right: 16px; } + .next-pagination-pages { + display: inline-block; } + .next-pagination-list { + display: inline-block; + vertical-align: top; } + .next-pagination .next-pagination-item { + display: inline-block; } + .next-pagination .next-pagination-item.next-current { + border-color: #5584FF; + background: #5584FF; + color: #FFFFFF; } + .next-pagination .next-pagination-item.next-current:hover, .next-pagination .next-pagination-item.next-current:focus { + border-color: #5584FF; + background: #5584FF; + color: #FFFFFF; } + .next-pagination-ellipsis { + display: inline-block; + color: #999999; + vertical-align: top; } + .next-pagination-display { + display: inline-block; + margin: 0 16px; + color: #333333; + vertical-align: middle; } + .next-pagination-display em { + font-style: normal; + color: #5584FF; } + .next-pagination-jump-text { + display: inline-block; + vertical-align: middle; + color: #999999; } + .next-pagination-jump-input { + margin: 0 4px; + vertical-align: top; } + .next-pagination-jump-go { + margin-left: 4px; + vertical-align: top; } + .next-pagination-size-selector { + display: inline-block; + position: relative; } + .next-pagination-size-selector-title { + margin-right: 4px; + color: #999999; } + .next-pagination-size-selector-filter { + display: inline-block; + vertical-align: middle; } + .next-pagination-size-selector-dropdown { + vertical-align: top; + min-width: 64px; } + .next-pagination-size-selector-popup { + min-width: 64px; } + .next-pagination-size-selector-btn.next-btn-text { + height: initial; + line-height: initial; + color: #666666; + border-radius: 0; } + .next-pagination-size-selector-btn.next-btn-text.next-current { + color: #5584FF; } + .next-pagination-size-selector-btn.next-btn-text + .next-pagination-size-selector-btn { + border-left: 1px solid #DCDEE3; } + .next-pagination-pages + .next-pagination-size-selector, + .next-pagination-size-selector + .next-pagination-pages { + margin-left: 40px; } + .next-pagination.next-hide { + display: none; } + .next-pagination.next-start .next-pagination-pages { + float: right; } + .next-pagination.next-start .next-pagination-size-selector { + float: left; } + .next-pagination.next-end .next-pagination-pages { + float: left; } + .next-pagination.next-end .next-pagination-size-selector { + float: right; } + .next-pagination.next-small .next-pagination-list { + margin: 0 4px; } + .next-pagination.next-small .next-pagination-total { + line-height: 20px; + vertical-align: middle; } + .next-pagination.next-small .next-pagination-item { + padding: 0 6px; } + .next-pagination.next-small .next-pagination-item + .next-pagination-item { + margin: 0 0 0 4px; } + .next-pagination.next-small .next-pagination-ellipsis { + height: 20px; + line-height: 20px; + margin-left: 8px; + margin-right: 8px; } + .next-pagination.next-small .next-pagination-ellipsis:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-pagination.next-small .next-pagination-display { + font-size: 12px; } + .next-pagination.next-small .next-pagination-display em { + font-size: 12px; } + .next-pagination.next-small .next-pagination-jump-text { + font-size: 12px; } + .next-pagination.next-small .next-pagination-jump-input { + width: 28px; } + .next-pagination.next-small .next-pagination-size-selector-title { + height: 20px; + line-height: 20px; + font-size: 12px; + vertical-align: middle; } + .next-pagination.next-small .next-pagination-size-selector-btn { + padding: 0 8px; } + .next-pagination.next-small .next-pagination-item.next-prev:not([disabled]) i, + .next-pagination.next-small .next-pagination-item.next-next:not([disabled]) i { + color: #666666; } + .next-pagination.next-small .next-pagination-item:hover.next-prev:not([disabled]) i, + .next-pagination.next-small .next-pagination-item:hover.next-next:not([disabled]) i { + color: #333333; } + .next-pagination.next-small.next-arrow-only .next-pagination-item.next-prev, .next-pagination.next-small.next-arrow-only .next-pagination-item.next-next { + width: 20px; + padding: 0; } + .next-pagination.next-small.next-arrow-only .next-pagination-item.next-prev .next-icon, .next-pagination.next-small.next-arrow-only .next-pagination-item.next-next .next-icon { + margin: 0 auto; } + .next-pagination.next-small.next-arrow-prev-only .next-pagination-item.next-prev { + width: 20px; + padding: 0; } + .next-pagination.next-small.next-arrow-prev-only .next-pagination-item.next-prev .next-icon { + margin: 0 auto; } + .next-pagination.next-small.next-no-border .next-pagination-item.next-prev, .next-pagination.next-small.next-no-border .next-pagination-item.next-next { + padding: 0; + border: none; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; } + .next-pagination.next-small.next-no-border .next-pagination-item.next-prev .next-icon, .next-pagination.next-small.next-no-border .next-pagination-item.next-next .next-icon { + margin: 0; } + .next-pagination.next-small.next-no-border .next-pagination-item.next-prev:not([disabled]):hover i, + .next-pagination.next-small.next-no-border .next-pagination-item.next-next:not([disabled]):hover i { + color: #5584FF; } + .next-pagination.next-small.next-no-border .next-pagination-display { + margin: 0 8px; } + .next-pagination.next-small.next-mini .next-pagination-item.next-prev { + margin-right: 4px; } + .next-pagination.next-small.next-mini .next-pagination-item.next-next { + margin-left: 4px; } + .next-pagination.next-medium .next-pagination-list { + margin: 0 4px; } + .next-pagination.next-medium .next-pagination-total { + line-height: 28px; + vertical-align: middle; } + .next-pagination.next-medium .next-pagination-item { + padding: 0 10px; } + .next-pagination.next-medium .next-pagination-item + .next-pagination-item { + margin: 0 0 0 4px; } + .next-pagination.next-medium .next-pagination-ellipsis { + height: 28px; + line-height: 28px; + margin-left: 8px; + margin-right: 8px; } + .next-pagination.next-medium .next-pagination-ellipsis:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-pagination.next-medium .next-pagination-display { + font-size: 12px; } + .next-pagination.next-medium .next-pagination-display em { + font-size: 12px; } + .next-pagination.next-medium .next-pagination-jump-text { + font-size: 12px; } + .next-pagination.next-medium .next-pagination-jump-input { + width: 36px; } + .next-pagination.next-medium .next-pagination-size-selector-title { + height: 28px; + line-height: 28px; + font-size: 12px; + vertical-align: middle; } + .next-pagination.next-medium .next-pagination-size-selector-btn { + padding: 0 12px; } + .next-pagination.next-medium .next-pagination-item.next-prev:not([disabled]) i, + .next-pagination.next-medium .next-pagination-item.next-next:not([disabled]) i { + color: #666666; } + .next-pagination.next-medium .next-pagination-item:hover.next-prev:not([disabled]) i, + .next-pagination.next-medium .next-pagination-item:hover.next-next:not([disabled]) i { + color: #333333; } + .next-pagination.next-medium.next-arrow-only .next-pagination-item.next-prev, .next-pagination.next-medium.next-arrow-only .next-pagination-item.next-next { + width: 28px; + padding: 0; } + .next-pagination.next-medium.next-arrow-only .next-pagination-item.next-prev .next-icon, .next-pagination.next-medium.next-arrow-only .next-pagination-item.next-next .next-icon { + margin: 0 auto; } + .next-pagination.next-medium.next-arrow-prev-only .next-pagination-item.next-prev { + width: 28px; + padding: 0; } + .next-pagination.next-medium.next-arrow-prev-only .next-pagination-item.next-prev .next-icon { + margin: 0 auto; } + .next-pagination.next-medium.next-no-border .next-pagination-item.next-prev, .next-pagination.next-medium.next-no-border .next-pagination-item.next-next { + padding: 0; + border: none; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; } + .next-pagination.next-medium.next-no-border .next-pagination-item.next-prev .next-icon, .next-pagination.next-medium.next-no-border .next-pagination-item.next-next .next-icon { + margin: 0; } + .next-pagination.next-medium.next-no-border .next-pagination-item.next-prev:not([disabled]):hover i, + .next-pagination.next-medium.next-no-border .next-pagination-item.next-next:not([disabled]):hover i { + color: #5584FF; } + .next-pagination.next-medium.next-no-border .next-pagination-display { + margin: 0 12px; } + .next-pagination.next-medium.next-mini .next-pagination-item.next-prev { + margin-right: 4px; } + .next-pagination.next-medium.next-mini .next-pagination-item.next-next { + margin-left: 4px; } + .next-pagination.next-large .next-pagination-list { + margin: 0 8px; } + .next-pagination.next-large .next-pagination-total { + line-height: 40px; + vertical-align: middle; } + .next-pagination.next-large .next-pagination-item { + padding: 0 15px; } + .next-pagination.next-large .next-pagination-item + .next-pagination-item { + margin: 0 0 0 8px; } + .next-pagination.next-large .next-pagination-ellipsis { + height: 40px; + line-height: 40px; + margin-left: 8px; + margin-right: 8px; } + .next-pagination.next-large .next-pagination-ellipsis:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-pagination.next-large .next-pagination-display { + font-size: 16px; } + .next-pagination.next-large .next-pagination-display em { + font-size: 16px; } + .next-pagination.next-large .next-pagination-jump-text { + font-size: 16px; } + .next-pagination.next-large .next-pagination-jump-input { + width: 48px; } + .next-pagination.next-large .next-pagination-size-selector-title { + height: 40px; + line-height: 40px; + font-size: 16px; + vertical-align: middle; } + .next-pagination.next-large .next-pagination-size-selector-btn { + padding: 0 16px; } + .next-pagination.next-large .next-pagination-item.next-prev:not([disabled]) i, + .next-pagination.next-large .next-pagination-item.next-next:not([disabled]) i { + color: #666666; } + .next-pagination.next-large .next-pagination-item:hover.next-prev:not([disabled]) i, + .next-pagination.next-large .next-pagination-item:hover.next-next:not([disabled]) i { + color: #333333; } + .next-pagination.next-large.next-arrow-only .next-pagination-item.next-prev, .next-pagination.next-large.next-arrow-only .next-pagination-item.next-next { + width: 40px; + padding: 0; } + .next-pagination.next-large.next-arrow-only .next-pagination-item.next-prev .next-icon, .next-pagination.next-large.next-arrow-only .next-pagination-item.next-next .next-icon { + margin: 0 auto; } + .next-pagination.next-large.next-arrow-prev-only .next-pagination-item.next-prev { + width: 40px; + padding: 0; } + .next-pagination.next-large.next-arrow-prev-only .next-pagination-item.next-prev .next-icon { + margin: 0 auto; } + .next-pagination.next-large.next-no-border .next-pagination-item.next-prev, .next-pagination.next-large.next-no-border .next-pagination-item.next-next { + padding: 0; + border: none; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; } + .next-pagination.next-large.next-no-border .next-pagination-item.next-prev .next-icon, .next-pagination.next-large.next-no-border .next-pagination-item.next-next .next-icon { + margin: 0; } + .next-pagination.next-large.next-no-border .next-pagination-item.next-prev:not([disabled]):hover i, + .next-pagination.next-large.next-no-border .next-pagination-item.next-next:not([disabled]):hover i { + color: #5584FF; } + .next-pagination.next-large.next-no-border .next-pagination-display { + margin: 0 16px; } + .next-pagination.next-large.next-mini .next-pagination-item.next-prev { + margin-right: 8px; } + .next-pagination.next-large.next-mini .next-pagination-item.next-next { + margin-left: 8px; } + +.next-paragraph { + color: #333333; } + .next-paragraph-short { + line-height: 1.5; } + .next-paragraph-long { + line-height: 1.7; } + .next-paragraph-small { + font-size: 12px; } + .next-paragraph-medium { + font-size: 14px; } + +.next-progress-circle[dir=rtl] .next-progress-circle-container { + -webkit-transform: scaleX(-1); + -ms-transform: scaleX(-1); + transform: scaleX(-1); } + +.next-progress-line[dir=rtl] .next-progress-line-overlay { + left: auto; + right: 0; } + +.next-progress-line { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-progress-line *, + .next-progress-line *:before, + .next-progress-line *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-progress-line { + width: 100%; + display: inline-block; + position: relative; } + .next-progress-line-container { + display: inline-block; + width: 100%; + vertical-align: middle; } + .next-progress-line-underlay { + position: relative; + width: 100%; + background-color: #EBECF0; } + .next-progress-line-overlay { + position: absolute; + left: 0; + top: 0; + -webkit-transition: all 1s cubic-bezier(0.65, 0.2, 0.35, 1); + transition: all 1s cubic-bezier(0.65, 0.2, 0.35, 1); } + .next-progress-line-overlay-normal { + background-color: #5584FF; } + .next-progress-line-overlay-success { + background-color: #46BC15; } + .next-progress-line-overlay-error { + background-color: #FF3000; } + .next-progress-line-overlay-started { + background-color: #FF3000; } + .next-progress-line-overlay-middle { + background-color: #FF9300; } + .next-progress-line-overlay-finishing { + background-color: #46BC15; } + .next-progress-line.next-small .next-progress-line-underlay { + border-radius: 20px; + height: 4px; } + .next-progress-line.next-small .next-progress-line-overlay { + height: 4px; + border-radius: 20px; + top: 50%; + margin-top: -2px; } + .next-progress-line.next-small .next-progress-line-text { + font-size: 12px; + line-height: 4px; } + .next-progress-line.next-medium .next-progress-line-underlay { + border-radius: 20px; + height: 8px; } + .next-progress-line.next-medium .next-progress-line-overlay { + height: 8px; + border-radius: 20px; + top: 50%; + margin-top: -4px; } + .next-progress-line.next-medium .next-progress-line-text { + font-size: 12px; + line-height: 8px; } + .next-progress-line.next-large .next-progress-line-underlay { + border-radius: 20px; + height: 12px; } + .next-progress-line.next-large .next-progress-line-overlay { + height: 12px; + border-radius: 20px; + top: 50%; + margin-top: -6px; } + .next-progress-line.next-large .next-progress-line-text { + font-size: 12px; + line-height: 12px; } + .next-progress-line-show-info .next-progress-line-container { + padding-right: 60px; + margin-right: -60px; } + .next-progress-line-show-info .next-progress-line-text { + width: 50px; + text-align: left; + margin-left: 10px; + vertical-align: middle; + display: inline-block; + color: #333333; } + .next-progress-line-show-border .next-progress-line-underlay { + border: 1px solid #DCDEE3; } + .next-progress-line-show-border.next-small .next-progress-line-underlay { + border-radius: 20px; + height: 6px; } + .next-progress-line-show-border.next-small .next-progress-line-overlay { + height: 4px; + border-radius: 20px; + top: 50%; + margin-top: -2px; } + .next-progress-line-show-border.next-small .next-progress-line-text { + font-size: 12px; + line-height: 6px; } + .next-progress-line-show-border.next-medium .next-progress-line-underlay { + border-radius: 20px; + height: 10px; } + .next-progress-line-show-border.next-medium .next-progress-line-overlay { + height: 8px; + border-radius: 20px; + top: 50%; + margin-top: -4px; } + .next-progress-line-show-border.next-medium .next-progress-line-text { + font-size: 12px; + line-height: 10px; } + .next-progress-line-show-border.next-large .next-progress-line-underlay { + border-radius: 20px; + height: 14px; } + .next-progress-line-show-border.next-large .next-progress-line-overlay { + height: 12px; + border-radius: 20px; + top: 50%; + margin-top: -6px; } + .next-progress-line-show-border.next-large .next-progress-line-text { + font-size: 12px; + line-height: 14px; } + +.next-progress-circle { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-progress-circle *, + .next-progress-circle *:before, + .next-progress-circle *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-progress-circle { + position: relative; + display: inline-block; } + .next-progress-circle-underlay { + stroke-width: 8px; + stroke: #EBECF0; } + .next-progress-circle-overlay { + -webkit-transition: all 1s cubic-bezier(0.65, 0.2, 0.35, 1); + transition: all 1s cubic-bezier(0.65, 0.2, 0.35, 1); + stroke-linecap: round; + stroke-width: 8px; } + .next-progress-circle-overlay-normal { + stroke: #5584FF; } + .next-progress-circle-overlay-success { + stroke: #46BC15; } + .next-progress-circle-overlay-error { + stroke: #FF3000; } + .next-progress-circle-overlay-started { + stroke: #FF3000; } + .next-progress-circle-overlay-middle { + stroke: #FF9300; } + .next-progress-circle-overlay-finishing { + stroke: #46BC15; } + .next-progress-circle.next-small { + width: 100px; + height: 100px; + font-size: 20px; } + .next-progress-circle.next-medium { + width: 116px; + height: 116px; + font-size: 24px; } + .next-progress-circle.next-large { + width: 132px; + height: 132px; + font-size: 36px; } + .next-progress-circle-text { + display: block; + position: absolute; + width: 100%; + top: 50%; + left: 0; + text-align: center; + line-height: 1; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.65, 0.2, 0.35, 1); + transition: -webkit-transform 0.3s cubic-bezier(0.65, 0.2, 0.35, 1); + transition: transform 0.3s cubic-bezier(0.65, 0.2, 0.35, 1); + transition: transform 0.3s cubic-bezier(0.65, 0.2, 0.35, 1), -webkit-transform 0.3s cubic-bezier(0.65, 0.2, 0.35, 1); + color: #333333; } + +.next-range { + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + font-family: inherit; + font-weight: normal; + font-size: inherit; + line-height: inherit; + vertical-align: baseline; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + cursor: pointer; } + .next-range *, + .next-range *:before, + .next-range *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-range .next-range-inner { + position: relative; } + .next-range .next-range-inner:only-child { + margin-top: auto; + margin-bottom: auto; } + .next-range .next-range-track { + position: absolute; + width: 100%; + top: 50%; + border-radius: 0; } + .next-range .next-range-selected { + position: absolute; + width: 0; + top: 50%; + left: 0; + border-radius: 0; } + .next-range .next-range-scale { + position: relative; + width: 100%; + height: 12px; } + .next-range .next-range-scale .next-range-scale-item { + position: absolute; + left: 0; + width: 2px; + border: 1px solid; + border-radius: 0; } + .next-range .next-range-scale .next-range-scale-item:last-child { + margin-left: -2px; } + .next-range .next-range-slider { + position: absolute; + top: 50%; + left: 0; + border-radius: 50%; } + .next-range .next-range-slider-inner { + position: absolute; + top: 50%; + left: 50%; + border-width: 1px; + border-style: solid; + border-color: #C4C6CF; + border-radius: 50%; + -webkit-transition: border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); + transition: border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); } + .next-range .next-range-slider.next-range-slider-moving .next-range-slider-inner { + border: 2px solid #5584FF; + -webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); } + .next-range .next-range-frag.next-range-active .next-range-slider .next-range-slider-inner { + border: 2px solid #5584FF; + -webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); } + .next-range .next-range-mark { + position: relative; + cursor: auto; } + .next-range .next-range-mark .next-range-mark-text { + position: absolute; + left: 0; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + padding-left: 2px; + text-align: center; } + .next-range .next-range-frag { + position: absolute; + top: 0; } + .next-range .next-range-frag .next-range-slider { + left: 0; } + .next-range .next-range-frag .next-range-slider:nth-child(2) { + left: 100%; } + .next-range .next-range-frag .next-range-selected { + width: 100%; } + .next-range.disabled { + cursor: not-allowed; } + .next-range.disabled .next-range-mark { + cursor: auto; } + .next-range .next-range-track { + background-color: #C4C6CF; } + .next-range .next-range-track:hover { + background-color: #C4C6CF; } + .next-range .next-range-selected { + background-color: #5584FF; } + .next-range .next-range-selected:hover { + background-color: #5584FF; } + .next-range .next-range-scale .next-range-scale-item { + border-color: #C4C6CF; + background-color: #C4C6CF; } + .next-range .next-range-scale .next-range-scale-item:hover { + border-color: #C4C6CF; } + .next-range .next-range-scale .next-range-scale-item.activated { + border-color: #5584FF; + background-color: #5584FF; } + .next-range .next-range-scale .next-range-scale-item.activated:hover { + border-color: #5584FF; } + .next-range .next-range-slider-inner { + background-color: #FFFFFF; + border-color: #C4C6CF; } + .next-range .next-range-slider-inner:hover { + background-color: #FFFFFF; + -webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.12); + box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.12); + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); } + .next-range .next-range-mark .next-range-mark-text { + color: #999999; } + .next-range .next-range-mark .next-range-mark-text:hover { + color: #999999; } + .next-range .next-range-mark .next-range-mark-text.activated { + color: #333333; } + .next-range .next-range-mark .next-range-mark-text.activated:hover { + color: #333333; } + .next-range.disabled .next-range-track { + background-color: #C4C6CF; } + .next-range.disabled .next-range-selected { + background-color: #A0A2AD; } + .next-range.disabled .next-range-scale-item { + border-color: #C4C6CF; } + .next-range.disabled .next-range-scale-item.activated { + border-color: #A0A2AD; } + .next-range.disabled .next-range-slider-inner { + background-color: #E6E7EB; + border-color: #E6E7EB; + -webkit-transform: none; + -ms-transform: none; + transform: none; + -webkit-box-shadow: none; + box-shadow: none; } diff --git a/dist/next-2.css b/dist/next-2.css new file mode 100644 index 0000000000..6f73258ffe --- /dev/null +++ b/dist/next-2.css @@ -0,0 +1,5665 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ + + .next-range.disabled .next-range-mark-text { + color: #CCCCCC; } + .next-range.disabled .next-range-mark-text.activated { + color: #999999; } + .next-range .next-range-track { + height: 4px; + margin-top: -2px; } + .next-range .next-range-selected { + height: 4px; + margin-top: -2px; } + .next-range .next-range-frag { + margin-top: -2px; + height: 16px; } + .next-range .next-range-slider { + height: 16px; + width: 16px; + margin-top: -8px; + margin-left: -8px; + -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); } + .next-range .next-range-slider-inner { + height: 16px; + width: 16px; + margin-top: -8px; + margin-left: -8px; } + .next-range .next-range-mark { + display: block; } + .next-range .next-range-mark .next-range-mark-text { + font-size: 12px; + font-weight: normal; + line-height: 20px; + height: 20px; } + .next-range .next-range-mark.next-range-mark-below { + height: 30px; } + .next-range .next-range-mark.next-range-mark-below .next-range-mark-text { + bottom: 0; } + .next-range .next-range-mark.next-range-mark-above { + height: 30px; } + .next-range .next-range-scale .next-range-scale-item { + height: 12px; } + .next-range.simulation-hover > .next-range-slider-inner { + background-color: #FFFFFF; + -webkit-box-shadow: #FFFFFF; + box-shadow: #FFFFFF; + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); } + .next-range.simulation-click > .next-range-slider-inner { + border: 2px solid #5584FF; + -webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); } + +.next-range[dir=rtl] .next-range-mark { + position: relative; + cursor: auto; } + .next-range[dir=rtl] .next-range-mark .next-range-mark-text { + position: absolute; + right: 0; + -webkit-transform: translateX(50%); + -ms-transform: translateX(50%); + transform: translateX(50%); + padding-right: 2px; + text-align: center; } + +.next-rating[dir="rtl"] .next-rating-overlay { + right: 0; + left: auto; } + +.next-rating[dir="rtl"] .next-rating-underlay .next-rating-icon, +.next-rating[dir="rtl"] .next-rating-overlay .next-rating-icon { + margin-right: 4px; + margin-left: 0; } + +.next-rating[dir="rtl"] .next-rating-underlay .next-rating-icon:last-child, +.next-rating[dir="rtl"] .next-rating-overlay .next-rating-icon:last-child { + /* icon 放大会产生边缘溢出，这里使用 margin 为放大扩展一部分空间 */ + margin-left: 4px; } + +.next-rating { + vertical-align: top; } + .next-rating { + display: inline-block; + position: relative; } + .next-rating:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + .next-rating-base { + float: left; + cursor: pointer; } + .next-rating-text { + float: left; } + .next-rating-base-disabled { + cursor: not-allowed; } + .next-rating-underlay { + white-space: nowrap; + overflow: hidden; } + .next-rating-underlay .next-icon { + color: #E2E4E8; } + .next-rating-stroke-mode .next-rating-underlay .next-icon { + color: transparent; + -webkit-text-stroke: 1px #5584FF; } + .next-rating-overlay { + white-space: nowrap; + overflow: hidden; + position: absolute; + width: 0; + top: 0; + left: 0; } + .next-rating-overlay .next-icon { + color: #5584FF; } + .next-rating-underlay .next-rating-icon, .next-rating-overlay .next-rating-icon { + margin-left: 4px; } + .next-rating-underlay .next-rating-icon:last-child, .next-rating-overlay .next-rating-icon:last-child { + /* icon 放大会产生边缘溢出，这里使用 margin 为放大扩展一部分空间 */ + margin-right: 4px; } + .next-rating-underlay .next-icon, .next-rating-overlay .next-icon { + -webkit-transition: all 50ms ease-in; + transition: all 50ms ease-in; } + .next-rating-underlay .next-icon.hover, .next-rating-overlay .next-icon.hover { + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); } + .next-rating-underlay .next-icon.clicked, .next-rating-overlay .next-icon.clicked { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); } + .next-rating-info { + position: absolute; + top: calc(100% + 4px); + left: 0; + border: 1px solid #E2E4E8; + background: #FFFFFF; + padding: 4px 8px 3px; + font-size: 12px; + white-space: nowrap; } + .next-rating-info:after { + position: absolute; + content: ' '; + width: 4px; + height: 4px; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + border: 1px solid #E2E4E8; + background: #FFFFFF; + border-bottom-color: transparent; + border-right-color: transparent; + top: -3px; + left: 4px; } + .next-rating:focus, .next-rating.hover { + outline: none; } + .next-rating:focus .next-rating-overlay .next-icon, .next-rating.hover .next-rating-overlay .next-icon { + color: #5584FF; } + +/* 状态 */ +/* ======================================== */ +.next-rating-grade-low .next-rating-overlay .next-icon { + color: #666666; } + +.next-rating-grade-low.hover .next-rating-overlay .next-icon { + color: #666666; } + +.next-rating-grade-high .next-rating-overlay .next-icon { + color: #5584FF; } + +.next-rating-grade-high.hover .next-rating-overlay .next-icon { + color: #5584FF; } + +/* 尺寸 */ +/* ======================================== */ +.next-rating-small { + font-size: 12px; } + .next-rating-small .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-rating-small .next-rating-text { + margin-left: 8px; } + +.next-rating-medium { + font-size: 12px; } + .next-rating-medium .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-rating-medium .next-rating-text { + margin-left: 12px; } + +.next-rating-large { + font-size: 16px; } + .next-rating-large .next-icon:before { + width: 20px; + font-size: 20px; + line-height: inherit; } + .next-rating-large .next-rating-text { + margin-left: 16px; } + +.next-search-simple[dir=rtl].next-large .next-search-icon { + margin-left: 12px; + margin-right: 0; } + +.next-search-simple[dir=rtl].next-medium .next-search-icon { + margin-left: 8px; + margin-right: 0; } + +.next-search-simple[dir=rtl].next-normal .next-search-left .next-search-left-addon { + border-left: 1px solid #C4C6CF; + border-right: none; } + +.next-search-simple[dir=rtl].next-dark .next-search-left { + border-color: #C4C6CF; } + .next-search-simple[dir=rtl].next-dark .next-search-left .next-search-left-addon { + border-right: 1px solid #C4C6CF; } + +.next-search-simple[dir=rtl].next-dark:hover .next-search-left { + border-color: #C4C6CF; } + +.next-search-simple[dir=rtl].next-dark .next-search-icon { + color: #999999; } + .next-search-simple[dir=rtl].next-dark .next-search-icon:hover { + color: #666666; } + +.next-search-normal[dir=rtl] .next-search-left { + border-left: none; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + +.next-search-normal[dir=rtl] .next-search-btn.next-btn { + border-radius: 3px 0 0 3px !important; } + +.next-search-normal[dir=rtl] .next-input { + border-radius: 0 3px 3px 0; } + +.next-search-normal[dir=rtl].next-primary .next-input { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; } + +.next-search-normal[dir=rtl].next-primary .next-search-left .next-search-left-addon { + border-left: 1px solid #E6E7EB; + border-right: none; } + +.next-search-normal[dir=rtl].next-secondary .next-input { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; } + +.next-search-normal[dir=rtl].next-secondary .next-search-left .next-search-left-addon { + border-left: 1px solid #E6E7EB; + border-right: none; } + +.next-search-normal[dir=rtl].next-normal .next-input { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; } + +.next-search-normal[dir=rtl].next-normal .next-search-left .next-search-left-addon { + border-left: 1px solid #E6E7EB; + border-right: none; } + +.next-search-normal[dir=rtl].next-dark .next-search-left .next-search-left-addon { + border-left: 1px solid #5584FF; + border-right: none; } + +.next-search { + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + display: inline-block; } + .next-search *, + .next-search *:before, + .next-search *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-search .next-input, + .next-search .next-select { + border: none; } + .next-search .next-select .next-input { + height: auto; } + .next-search .next-select .next-input .next-input-text-field { + height: auto; } + .next-search .next-search-left { + border-style: solid; + -webkit-transition: all .3s ease-out; + transition: all .3s ease-out; } + .next-search .next-search-left-addon .next-input, + .next-search .next-search-left-addon .next-select-trigger-search { + min-height: 100%; + border-bottom-right-radius: 0; + border-top-right-radius: 0; } + .next-search .next-search-left-addon .next-select-values { + line-height: 1; } + .next-search .next-search-left-addon + .next-search-input .next-input { + border-bottom-left-radius: 0; + border-top-left-radius: 0; } + .next-search .next-search-input { + width: 100%; } + .next-search .next-search-btn { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal { + width: 600px; } + .next-search-normal .next-search-left { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } + .next-search-normal .next-input { + border-radius: 3px 0 0 3px; } + .next-search-normal .next-btn { + border-radius: 0 3px 3px 0; } + .next-search-normal.next-primary .next-search-left { + border-color: #5584FF; } + .next-search-normal.next-primary .next-search-left .next-search-left-addon { + border-right: 1px solid #E6E7EB; } + .next-search-normal.next-primary:hover .next-search-left, + .next-search-normal.next-primary:hover .next-btn { + border-color: #5584FF; } + .next-search-normal.next-primary .next-search-btn { + background: #5584FF; + border-color: #5584FF; + color: #FFFFFF; } + .next-search-normal.next-primary .next-search-btn:hover { + background: #3E71F7; + border-color: #5584FF; + color: #FFFFFF; } + .next-search-normal.next-primary .next-search-btn .next-icon { + color: #FFFFFF; } + .next-search-normal.next-primary .next-search-btn .next-icon:hover { + color: #FFFFFF; } + .next-search-normal.next-primary.next-large { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal.next-primary.next-large .next-search-left, .next-search-normal.next-primary.next-large .next-search-btn { + border-width: 2px; + height: 60px; } + .next-search-normal.next-primary.next-large .next-search-input { + height: 56px; + overflow-y: hidden; } + .next-search-normal.next-primary.next-large .next-search-input input { + height: 56px; + line-height: 56px \0; } + .next-search-normal.next-primary.next-large .next-select { + height: 56px; } + .next-search-normal.next-primary.next-large .next-search-btn { + font-size: 16px; } + .next-search-normal.next-primary.next-large .next-search-btn .next-icon:before { + width: 24px; + font-size: 24px; + line-height: inherit; } + .next-search-normal.next-primary.next-large .next-search-btn .next-search-btn-text { + display: inline-block; + padding-left: 0; } + .next-search-normal.next-primary.next-medium { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal.next-primary.next-medium .next-search-left, .next-search-normal.next-primary.next-medium .next-search-btn { + border-width: 2px; + height: 40px; } + .next-search-normal.next-primary.next-medium .next-search-input { + height: 36px; + overflow-y: hidden; } + .next-search-normal.next-primary.next-medium .next-search-input input { + height: 36px; + line-height: 36px \0; } + .next-search-normal.next-primary.next-medium .next-select { + height: 36px; } + .next-search-normal.next-primary.next-medium .next-search-btn { + font-size: 16px; } + .next-search-normal.next-primary.next-medium .next-search-btn .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-search-normal.next-primary.next-medium .next-search-btn .next-search-btn-text { + display: inline-block; + padding-left: 0; } + .next-search-normal.next-primary .next-input { + border-top-left-radius: 1px; + border-bottom-left-radius: 1px; } + .next-search-normal.next-secondary .next-search-left { + border-color: #C4C6CF; } + .next-search-normal.next-secondary .next-search-left .next-search-left-addon { + border-right: 1px solid #E6E7EB; } + .next-search-normal.next-secondary:hover .next-search-left, + .next-search-normal.next-secondary:hover .next-btn { + border-color: #5584FF; } + .next-search-normal.next-secondary .next-search-btn { + background: #5584FF; + border-color: #5584FF; + color: #FFFFFF; } + .next-search-normal.next-secondary .next-search-btn:hover { + background: #3E71F7; + border-color: #5584FF; + color: #FFFFFF; } + .next-search-normal.next-secondary .next-search-btn .next-icon { + color: #FFFFFF; } + .next-search-normal.next-secondary .next-search-btn .next-icon:hover { + color: #FFFFFF; } + .next-search-normal.next-secondary.next-large { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal.next-secondary.next-large .next-search-left, .next-search-normal.next-secondary.next-large .next-search-btn { + border-width: 1px; + height: 60px; } + .next-search-normal.next-secondary.next-large .next-search-input { + height: 58px; + overflow-y: hidden; } + .next-search-normal.next-secondary.next-large .next-search-input input { + height: 58px; + line-height: 58px \0; } + .next-search-normal.next-secondary.next-large .next-select { + height: 58px; } + .next-search-normal.next-secondary.next-large .next-search-btn { + font-size: 16px; } + .next-search-normal.next-secondary.next-large .next-search-btn .next-icon:before { + width: 24px; + font-size: 24px; + line-height: inherit; } + .next-search-normal.next-secondary.next-large .next-search-btn .next-search-btn-text { + display: inline-block; + padding-left: 0; } + .next-search-normal.next-secondary.next-medium { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal.next-secondary.next-medium .next-search-left, .next-search-normal.next-secondary.next-medium .next-search-btn { + border-width: 1px; + height: 40px; } + .next-search-normal.next-secondary.next-medium .next-search-input { + height: 38px; + overflow-y: hidden; } + .next-search-normal.next-secondary.next-medium .next-search-input input { + height: 38px; + line-height: 38px \0; } + .next-search-normal.next-secondary.next-medium .next-select { + height: 38px; } + .next-search-normal.next-secondary.next-medium .next-search-btn { + font-size: 16px; } + .next-search-normal.next-secondary.next-medium .next-search-btn .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-search-normal.next-secondary.next-medium .next-search-btn .next-search-btn-text { + display: inline-block; + padding-left: 0; } + .next-search-normal.next-secondary .next-input { + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; } + .next-search-normal.next-normal .next-search-left { + border-color: #C4C6CF; } + .next-search-normal.next-normal .next-search-left .next-search-left-addon { + border-right: 1px solid #E6E7EB; } + .next-search-normal.next-normal:hover .next-search-left, + .next-search-normal.next-normal:hover .next-btn { + border-color: #A0A2AD; } + .next-search-normal.next-normal .next-search-btn { + background: #F7F8FA; + border-color: #C4C6CF; + color: #666666; } + .next-search-normal.next-normal .next-search-btn:hover { + background: #EBECF0; + border-color: #A0A2AD; + color: #333333; } + .next-search-normal.next-normal .next-search-btn .next-icon { + color: #666666; } + .next-search-normal.next-normal .next-search-btn .next-icon:hover { + color: #333333; } + .next-search-normal.next-normal.next-large { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal.next-normal.next-large .next-search-left, .next-search-normal.next-normal.next-large .next-search-btn { + border-width: 1px; + height: 60px; } + .next-search-normal.next-normal.next-large .next-search-input { + height: 58px; + overflow-y: hidden; } + .next-search-normal.next-normal.next-large .next-search-input input { + height: 58px; + line-height: 58px \0; } + .next-search-normal.next-normal.next-large .next-select { + height: 58px; } + .next-search-normal.next-normal.next-large .next-search-btn { + font-size: 16px; } + .next-search-normal.next-normal.next-large .next-search-btn .next-icon:before { + width: 24px; + font-size: 24px; + line-height: inherit; } + .next-search-normal.next-normal.next-large .next-search-btn .next-search-btn-text { + display: inline-block; + padding-left: 0; } + .next-search-normal.next-normal.next-medium { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal.next-normal.next-medium .next-search-left, .next-search-normal.next-normal.next-medium .next-search-btn { + border-width: 1px; + height: 40px; } + .next-search-normal.next-normal.next-medium .next-search-input { + height: 38px; + overflow-y: hidden; } + .next-search-normal.next-normal.next-medium .next-search-input input { + height: 38px; + line-height: 38px \0; } + .next-search-normal.next-normal.next-medium .next-select { + height: 38px; } + .next-search-normal.next-normal.next-medium .next-search-btn { + font-size: 16px; } + .next-search-normal.next-normal.next-medium .next-search-btn .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-search-normal.next-normal.next-medium .next-search-btn .next-search-btn-text { + display: inline-block; + padding-left: 0; } + .next-search-normal.next-normal .next-input { + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; } + .next-search-normal.next-dark .next-search-left { + border-color: #5584FF; } + .next-search-normal.next-dark .next-search-left .next-search-left-addon { + border-right: 1px solid #5584FF; } + .next-search-normal.next-dark:hover .next-search-left, + .next-search-normal.next-dark:hover .next-btn { + border-color: #5584FF; } + .next-search-normal.next-dark .next-search-btn { + background: #5584FF; + border-color: #5584FF; + color: #FFFFFF; } + .next-search-normal.next-dark .next-search-btn:hover { + background: #3E71F7; + border-color: #5584FF; + color: #FFFFFF; } + .next-search-normal.next-dark .next-search-btn .next-icon { + color: #FFFFFF; } + .next-search-normal.next-dark .next-search-btn .next-icon:hover { + color: #FFFFFF; } + .next-search-normal.next-dark .next-select-inner, + .next-search-normal.next-dark input { + color: #FFFFFF; } + .next-search-normal.next-dark .next-input { + background: rgba(255, 255, 255, 0); } + .next-search-normal.next-dark .next-select { + background: rgba(255, 255, 255, 0); } + .next-search-normal.next-dark.next-large { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal.next-dark.next-large .next-search-left, .next-search-normal.next-dark.next-large .next-search-btn { + border-width: 1px; + height: 60px; } + .next-search-normal.next-dark.next-large .next-search-input { + height: 58px; + overflow-y: hidden; } + .next-search-normal.next-dark.next-large .next-search-input input { + height: 58px; + line-height: 58px \0; } + .next-search-normal.next-dark.next-large .next-select { + height: 58px; } + .next-search-normal.next-dark.next-large .next-search-btn { + font-size: 16px; } + .next-search-normal.next-dark.next-large .next-search-btn .next-icon:before { + width: 24px; + font-size: 24px; + line-height: inherit; } + .next-search-normal.next-dark.next-large .next-search-btn .next-search-btn-text { + display: inline-block; + padding-left: 0; } + .next-search-normal.next-dark.next-medium { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal.next-dark.next-medium .next-search-left, .next-search-normal.next-dark.next-medium .next-search-btn { + border-width: 1px; + height: 40px; } + .next-search-normal.next-dark.next-medium .next-search-input { + height: 38px; + overflow-y: hidden; } + .next-search-normal.next-dark.next-medium .next-search-input input { + height: 38px; + line-height: 38px \0; } + .next-search-normal.next-dark.next-medium .next-select { + height: 38px; } + .next-search-normal.next-dark.next-medium .next-search-btn { + font-size: 16px; } + .next-search-normal.next-dark.next-medium .next-search-btn .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-search-normal.next-dark.next-medium .next-search-btn .next-search-btn-text { + display: inline-block; + padding-left: 0; } + .next-search-normal:not([dir=rtl]) .next-search-left { + border-right: none; } + .next-search-simple { + width: 300px; + -webkit-box-shadow: none; + box-shadow: none; + border-radius: 3px; } + .next-search-simple .next-search-icon { + cursor: pointer; + -webkit-transition: all .3s ease-out; + transition: all .3s ease-out; } + .next-search-simple .next-search-left, .next-search-simple .next-input { + border-radius: 3px; } + .next-search-simple.next-large .next-search-icon { + margin-right: 12px; } + .next-search-simple.next-medium .next-search-icon { + margin-right: 8px; } + .next-search-simple.next-normal .next-search-left { + border-color: #C4C6CF; } + .next-search-simple.next-normal .next-search-left .next-search-left-addon { + border-right: 1px solid #C4C6CF; } + .next-search-simple.next-normal:hover .next-search-left { + border-color: #A0A2AD; } + .next-search-simple.next-normal .next-search-icon { + color: #999999; } + .next-search-simple.next-normal .next-search-icon:hover { + color: #666666; } + .next-search-simple.next-normal .next-search-left { + border-width: 1px; } + .next-search-simple.next-normal.next-large .next-search-icon:before { + width: 20px; + font-size: 20px; + line-height: inherit; } + .next-search-simple.next-normal.next-medium .next-search-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-search-simple.next-dark .next-search-left { + border-color: #C4C6CF; } + .next-search-simple.next-dark .next-search-left .next-search-left-addon { + border-right: 1px solid #C4C6CF; } + .next-search-simple.next-dark:hover .next-search-left { + border-color: #C4C6CF; } + .next-search-simple.next-dark .next-search-icon { + color: #999999; } + .next-search-simple.next-dark .next-search-icon:hover { + color: #666666; } + .next-search-simple.next-dark .next-select-inner, + .next-search-simple.next-dark input { + color: #FFFFFF; } + .next-search-simple.next-dark .next-input { + background: rgba(255, 255, 255, 0); } + .next-search-simple.next-dark .next-select { + background: rgba(255, 255, 255, 0); } + .next-search-simple.next-dark .next-search-left { + border-width: 1px; } + .next-search-simple.next-dark.next-large .next-search-icon:before { + width: 20px; + font-size: 20px; + line-height: inherit; } + .next-search-simple.next-dark.next-medium .next-search-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-search-simple .next-select.next-large { + height: 38px; } + +.next-search-simple .next-select.next-medium { + height: 26px; } + +/* Slider */ +/* -------------------------------------- */ +.next-slick { + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: relative; + display: block; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -ms-touch-action: pan-y; + touch-action: pan-y; + -webkit-tap-highlight-color: transparent; + /* 水平滑动 */ + /* 垂直滑动 */ } + .next-slick *, + .next-slick *:before, + .next-slick *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-slick-initialized .next-slick-slide { + display: block; } + .next-slick-list { + position: relative; + overflow: hidden; + display: block; + margin: 0; + padding: 0; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + .next-slick-list:focus { + outline: none; } + .next-slick-list.dragging { + cursor: pointer; + cursor: hand; } + .next-slick-track { + position: relative; + top: 0; + left: 0; + display: block; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + .next-slick-slide { + float: left; + height: 100%; + min-height: 1px; + outline: 0; + -webkit-transition: all 0.3s cubic-bezier(0.86, 0, 0.07, 1); + transition: all 0.3s cubic-bezier(0.86, 0, 0.07, 1); } + .next-slick[dir="rtl"] .next-slick-slide { + float: right; } + .next-slick-slide img { + display: block; } + .next-slick-arrow { + display: block; + position: absolute; + cursor: pointer; + text-align: center; + -webkit-transition: .4s ease-in; + transition: .4s ease-in; + /* prev/next 按钮不同位置下的外观 */ } + .next-slick-arrow.inner { + color: #FFFFFF; + background: #000000; + opacity: 0.2; + padding: 0; + border: none; } + .next-slick-arrow.inner:focus, .next-slick-arrow.inner:hover { + color: #FFFFFF; + background: #000000; + opacity: 0.4; } + .next-slick-arrow.inner.disabled { + color: #CCCCCC; + background: #F7F8FA; + opacity: 0.5; } + .next-slick-arrow.outer { + color: #666666; + background: transparent; + opacity: 0.32; + padding: 0; + border: none; + border-radius: 0; } + .next-slick-arrow.outer:focus, .next-slick-arrow.outer:hover { + color: #333333; + background: transparent; + opacity: 0.32; } + .next-slick-arrow.outer.disabled { + color: #CCCCCC; + background: transparent; + opacity: 0.32; } + .next-slick-arrow.disabled { + cursor: not-allowed; } + .next-slick-dots { + display: block; + position: absolute; + margin: 0; + padding: 0; + /* dots 位于水平位置 */ + /* dots 位于右侧垂直位置 */ } + .next-slick-dots-item { + position: relative; + display: inline-block; + cursor: pointer; } + .next-slick-dots-item button { + cursor: pointer; + border-width: 0; + border-color: white; + border-style: solid; + outline: none; + padding: 0; + height: 8px; + width: 8px; + border-radius: 50%; + background: rgba(0, 0, 0, 0.32); } + .next-slick-dots-item button:hover { + background-color: rgba(0, 0, 0, 0.32); + /* border-width: $slick-dots-border-width-hover; */ + border-color: white; } + .next-slick-dots-item button:focus, + .next-slick-dots-item.active button { + background: #5584ff; + /* border-width: $slick-dots-border-width-selected; */ + border-color: white; + -webkit-animation: zoom 0.3s cubic-bezier(0.86, 0, 0.07, 1); + animation: zoom 0.3s cubic-bezier(0.86, 0, 0.07, 1); } + .next-slick-dots.hoz { + width: 100%; + bottom: 12px; + left: 0; + text-align: center; } + .next-slick-dots.hoz .next-slick-dots-item { + margin: 0 4px; } + .next-slick-dots.ver { + width: 16px; + top: 0; + right: 20px; + bottom: 0; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } + .next-slick-dots.ver .next-slick-dots-item { + margin: 0 0; } + .next-slick.next-slick-hoz.next-slick-outer { + padding: 0 24px; } + .next-slick.next-slick-hoz .next-slick-arrow.medium { + width: 28px; + height: 56px; + line-height: 56px; } + .next-slick.next-slick-hoz .next-slick-arrow.medium .next-icon:before { + width: 20px; + font-size: 20px; + line-height: inherit; } + .next-slick.next-slick-hoz .next-slick-arrow.medium.inner { + top: calc((100% - 56px) / 2); } + .next-slick.next-slick-hoz .next-slick-arrow.medium.inner.next-slick-prev { + left: 0; } + .next-slick.next-slick-hoz .next-slick-arrow.medium.inner.next-slick-next { + right: 0; } + .next-slick.next-slick-hoz .next-slick-arrow.medium.outer { + top: calc((100% - 56px) / 2); } + .next-slick.next-slick-hoz .next-slick-arrow.medium.outer.next-slick-prev { + left: -4px; } + .next-slick.next-slick-hoz .next-slick-arrow.medium.outer.next-slick-next { + right: -4px; } + .next-slick.next-slick-hoz .next-slick-arrow.large { + width: 48px; + height: 96px; + line-height: 96px; } + .next-slick.next-slick-hoz .next-slick-arrow.large .next-icon:before { + width: 32px; + font-size: 32px; + line-height: inherit; } + .next-slick.next-slick-hoz .next-slick-arrow.large.inner { + top: calc((100% - 96px) / 2); } + .next-slick.next-slick-hoz .next-slick-arrow.large.inner.next-slick-prev { + left: 0; } + .next-slick.next-slick-hoz .next-slick-arrow.large.inner.next-slick-next { + right: 0; } + .next-slick.next-slick-hoz .next-slick-arrow.large.outer { + top: calc((100% - 96px) / 2); } + .next-slick.next-slick-hoz .next-slick-arrow.large.outer.next-slick-prev { + left: -8px; } + .next-slick.next-slick-hoz .next-slick-arrow.large.outer.next-slick-next { + right: -8px; } + .next-slick.next-slick-ver.next-slick-outer { + padding: 24px 0; } + .next-slick.next-slick-ver .next-slick-slide { + display: block; + height: auto; + /* border: $slick-ver-slide-border-width solid transparent; */ } + .next-slick.next-slick-ver .next-slick-arrow { + /* size medium */ + /* size medium & position inner */ + /* size medium & position outer */ + /* size large */ + /* size large & position inner */ + /* size large & position outer */ } + .next-slick.next-slick-ver .next-slick-arrow.medium { + width: 56px; + height: 28px; + line-height: 28px; } + .next-slick.next-slick-ver .next-slick-arrow.medium .next-icon:before { + width: 20px; + font-size: 20px; + line-height: inherit; } + .next-slick.next-slick-ver .next-slick-arrow.medium.inner { + left: calc((100% - 56px) / 2); } + .next-slick.next-slick-ver .next-slick-arrow.medium.inner.next-slick-prev { + top: 0; } + .next-slick.next-slick-ver .next-slick-arrow.medium.inner.next-slick-next { + bottom: 0; } + .next-slick.next-slick-ver .next-slick-arrow.medium.outer { + left: calc((100% - 56px) / 2); } + .next-slick.next-slick-ver .next-slick-arrow.medium.outer.next-slick-prev { + top: -4px; } + .next-slick.next-slick-ver .next-slick-arrow.medium.outer.next-slick-next { + bottom: -4px; } + .next-slick.next-slick-ver .next-slick-arrow.large { + width: 96px; + height: 48px; + line-height: 48px; } + .next-slick.next-slick-ver .next-slick-arrow.large .next-icon:before { + width: 32px; + font-size: 32px; + line-height: inherit; } + .next-slick.next-slick-ver .next-slick-arrow.large.inner { + left: calc((100% - 96px) / 2); } + .next-slick.next-slick-ver .next-slick-arrow.large.inner.next-slick-prev { + top: 0; } + .next-slick.next-slick-ver .next-slick-arrow.large.inner.next-slick-next { + bottom: 0; } + .next-slick.next-slick-ver .next-slick-arrow.large.outer { + left: calc((100% - 96px) / 2); } + .next-slick.next-slick-ver .next-slick-arrow.large.outer.next-slick-prev { + top: -16px; } + .next-slick.next-slick-ver .next-slick-arrow.large.outer.next-slick-next { + bottom: -16px; } + +.next-split-btn { + display: inline-block; + position: relative; } + .next-split-btn-trigger .next-icon { + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } + .next-split-btn-trigger.next-expand .next-icon { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + .next-split-btn-trigger.next-btn-normal:not(:disabled):not(.disabled) .next-icon { + color: #999999; } + .next-split-btn-trigger.next-small { + padding-left: 4px; + padding-right: 4px; } + .next-split-btn-trigger.next-medium { + padding-left: 8px; + padding-right: 8px; } + +.next-step *, +.next-step *:before, +.next-step *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +.next-step, .next-step:before, .next-step:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +.next-step { + width: 100%; + position: relative; + border: none; } + .next-step-item { + position: relative; + vertical-align: middle; + outline: 0; + height: 100%; } + .next-step-item-body { + outline: 0; } + .next-step-item-node { + -webkit-transition: all .2s ease; + transition: all .2s ease; } + .next-step-item-node.clicked { + -webkit-transform: scale3d(0.8, 0.8, 0.8); + transform: scale3d(0.8, 0.8, 0.8); } + .next-step-horizontal { + overflow: hidden; } + .next-step-horizontal > .next-step-item { + display: inline-block; + text-align: left; } + .next-step-vertical > .next-step-item { + display: block; + text-align: center; } + +.next-step-arrow { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + .next-step-arrow .next-step-item { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + height: 32px; + line-height: 32px; + margin-left: 16px; + margin-right: 4px; } + .next-step-arrow .next-step-item:before { + content: ''; + position: absolute; + left: -16px; + top: 0; + z-index: 1; + border: 16px solid transparent; + border-left-color: transparent; } + .next-step-arrow .next-step-item:after { + content: ''; + position: absolute; + right: -16px; + top: 0; + z-index: 1; + border-top: 16px solid transparent; + border-bottom: 16px solid transparent; + border-left: 16px solid transparent; } + .next-step-arrow .next-step-item .next-step-item-container { + min-width: 100px; + height: 32px; + cursor: pointer; } + .next-step-arrow .next-step-item .next-step-item-container .next-step-item-title { + height: 32px; + line-height: 32px; + font-weight: bold; + font-size: 14px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + text-align: center; } + .next-step-arrow > .next-step-item-wait { + background: #EBECF0; } + .next-step-arrow > .next-step-item-wait .next-step-item-tail-overlay { + background: #000000; } + .next-step-arrow > .next-step-item-wait .next-step-item-tail-underlay { + background: #CCCCCC; } + .next-step-arrow > .next-step-item-wait > .next-step-item-container .next-step-item-progress { + width: 32px; + height: 32px; } + .next-step-arrow > .next-step-item-wait > .next-step-item-container .next-step-item-node { + color: #000000; } + .next-step-arrow > .next-step-item-wait > .next-step-item-container .next-step-item-node-circle { + background: #EBECF0; + border-color: #000000; } + .next-step-arrow > .next-step-item-wait > .next-step-item-container .next-step-item-node-dot { + background: #EBECF0; + border-color: #000000; } + .next-step-arrow > .next-step-item-wait .next-step-item-title { + color: #999999; + word-break: break-word; } + .next-step-arrow > .next-step-item-wait .next-step-item-content { + color: #999999; + font-size: 12px; + word-break: break-word; } + .next-step-arrow > .next-step-item-wait .next-step-item-node-placeholder { + width: 32px; + height: 32px; + position: relative; } + .next-step-arrow > .next-step-item-wait .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-arrow > .next-step-item-wait .next-step-item-node-circle { + display: block; + width: 32px; + height: 32px; + font-size: 12px; + font-weight: normal; + line-height: 30px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-arrow > .next-step-item-wait .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-arrow > .next-step-item-wait .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-step-arrow > .next-step-item-wait .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -16px; + left: 50%; + margin-left: -16px; + display: block; + width: 32px; + height: 32px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + .next-step-arrow > .next-step-item-wait:before { + border: 16px solid #EBECF0; + border-left-color: transparent; } + .next-step-arrow > .next-step-item-wait:after { + border-left-color: #EBECF0; } + .next-step-arrow > .next-step-item-process { + background: #5584FF; } + .next-step-arrow > .next-step-item-process .next-step-item-tail-overlay { + background: #000000; } + .next-step-arrow > .next-step-item-process .next-step-item-tail-underlay { + background: #CCCCCC; } + .next-step-arrow > .next-step-item-process > .next-step-item-container .next-step-item-progress { + width: 32px; + height: 32px; } + .next-step-arrow > .next-step-item-process > .next-step-item-container .next-step-item-node { + color: #000000; } + .next-step-arrow > .next-step-item-process > .next-step-item-container .next-step-item-node-circle { + background: #5584FF; + border-color: #000000; } + .next-step-arrow > .next-step-item-process > .next-step-item-container .next-step-item-node-dot { + background: #5584FF; + border-color: #000000; } + .next-step-arrow > .next-step-item-process .next-step-item-title { + color: #FFFFFF; + word-break: break-word; } + .next-step-arrow > .next-step-item-process .next-step-item-content { + color: #FFFFFF; + font-size: 12px; + word-break: break-word; } + .next-step-arrow > .next-step-item-process .next-step-item-node-placeholder { + width: 32px; + height: 32px; + position: relative; } + .next-step-arrow > .next-step-item-process .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-arrow > .next-step-item-process .next-step-item-node-circle { + display: block; + width: 32px; + height: 32px; + font-size: 12px; + font-weight: normal; + line-height: 30px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-arrow > .next-step-item-process .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-arrow > .next-step-item-process .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-step-arrow > .next-step-item-process .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -16px; + left: 50%; + margin-left: -16px; + display: block; + width: 32px; + height: 32px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + .next-step-arrow > .next-step-item-process:before { + border: 16px solid #5584FF; + border-left-color: transparent; } + .next-step-arrow > .next-step-item-process:after { + border-left-color: #5584FF; } + .next-step-arrow > .next-step-item-finish { + background: #DEE8FF; } + .next-step-arrow > .next-step-item-finish .next-step-item-tail-overlay { + background: #000000; } + .next-step-arrow > .next-step-item-finish .next-step-item-tail-underlay { + background: #CCCCCC; } + .next-step-arrow > .next-step-item-finish > .next-step-item-container .next-step-item-progress { + width: 32px; + height: 32px; } + .next-step-arrow > .next-step-item-finish > .next-step-item-container .next-step-item-node { + color: #000000; } + .next-step-arrow > .next-step-item-finish > .next-step-item-container .next-step-item-node-circle { + background: #DEE8FF; + border-color: #000000; } + .next-step-arrow > .next-step-item-finish > .next-step-item-container .next-step-item-node-dot { + background: #DEE8FF; + border-color: #000000; } + .next-step-arrow > .next-step-item-finish .next-step-item-title { + color: #5584FF; + word-break: break-word; } + .next-step-arrow > .next-step-item-finish .next-step-item-content { + color: #5584FF; + font-size: 12px; + word-break: break-word; } + .next-step-arrow > .next-step-item-finish .next-step-item-node-placeholder { + width: 32px; + height: 32px; + position: relative; } + .next-step-arrow > .next-step-item-finish .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-arrow > .next-step-item-finish .next-step-item-node-circle { + display: block; + width: 32px; + height: 32px; + font-size: 12px; + font-weight: normal; + line-height: 30px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-arrow > .next-step-item-finish .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-arrow > .next-step-item-finish .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-step-arrow > .next-step-item-finish .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -16px; + left: 50%; + margin-left: -16px; + display: block; + width: 32px; + height: 32px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + .next-step-arrow > .next-step-item-finish:before { + border: 16px solid #DEE8FF; + border-left-color: transparent; } + .next-step-arrow > .next-step-item-finish:after { + border-left-color: #DEE8FF; } + .next-step-arrow .next-step-item-disabled { + cursor: not-allowed; + background: #F7F8FA; } + .next-step-arrow .next-step-item-disabled .next-step-item-tail-overlay { + background: #000000; } + .next-step-arrow .next-step-item-disabled .next-step-item-tail-underlay { + background: #CCCCCC; } + .next-step-arrow .next-step-item-disabled > .next-step-item-container .next-step-item-progress { + width: 32px; + height: 32px; } + .next-step-arrow .next-step-item-disabled > .next-step-item-container .next-step-item-node { + color: #000000; } + .next-step-arrow .next-step-item-disabled > .next-step-item-container .next-step-item-node-circle { + background: #F7F8FA; + border-color: #000000; } + .next-step-arrow .next-step-item-disabled > .next-step-item-container .next-step-item-node-dot { + background: #F7F8FA; + border-color: #000000; } + .next-step-arrow .next-step-item-disabled .next-step-item-title { + color: #CCCCCC; + word-break: break-word; } + .next-step-arrow .next-step-item-disabled .next-step-item-content { + color: #CCCCCC; + font-size: 12px; + word-break: break-word; } + .next-step-arrow .next-step-item-disabled .next-step-item-node-placeholder { + width: 32px; + height: 32px; + position: relative; } + .next-step-arrow .next-step-item-disabled .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-arrow .next-step-item-disabled .next-step-item-node-circle { + display: block; + width: 32px; + height: 32px; + font-size: 12px; + font-weight: normal; + line-height: 30px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-arrow .next-step-item-disabled .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-arrow .next-step-item-disabled .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-step-arrow .next-step-item-disabled .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -16px; + left: 50%; + margin-left: -16px; + display: block; + width: 32px; + height: 32px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + .next-step-arrow .next-step-item-disabled:before { + border: 16px solid #F7F8FA; + border-left-color: transparent; } + .next-step-arrow .next-step-item-disabled:after { + border-left-color: #F7F8FA; } + .next-step-arrow .next-step-item-disabled .next-step-item-container { + cursor: not-allowed; } + .next-step-arrow .next-step-item-read-only { + cursor: default; } + .next-step-arrow .next-step-item-read-only .next-step-item-container { + cursor: default; } + .next-step-arrow .next-step-item-first { + margin-left: 0; } + .next-step-arrow .next-step-item-first:before { + border: 16px solid transparent; } + .next-step-arrow .next-step-item-last { + margin-right: 0; } + .next-step-arrow .next-step-item-last:after { + border: 16px solid transparent; } + +.next-step-circle .next-step-item-container { + display: inline-block; + vertical-align: middle; + position: relative; + padding: 0 8px; } + .next-step-circle .next-step-item-container .next-step-item-progress .next-progress-circle-text { + color: #5584FF; + font-size: 12px; } + .next-step-circle .next-step-item-container .next-step-item-progress .next-progress-circle-underlay { + stroke: #A0A2AD; + stroke-width: 4px; } + .next-step-circle .next-step-item-container .next-step-item-progress .next-progress-circle-overlay-normal { + stroke: #5584FF; + stroke-width: 4px; } + .next-step-circle .next-step-item-container .next-step-item-node-placeholder { + display: inline-block; } + +.next-step-circle > .next-step-item-wait .next-step-item-tail-overlay { + background: #C4C6CF; } + +.next-step-circle > .next-step-item-wait .next-step-item-tail-underlay { + background: #E6E7EB; } + +.next-step-circle > .next-step-item-wait > .next-step-item-container .next-step-item-progress { + width: 32px; + height: 32px; } + +.next-step-circle > .next-step-item-wait > .next-step-item-container .next-step-item-node { + color: #666666; } + +.next-step-circle > .next-step-item-wait > .next-step-item-container .next-step-item-node-circle { + background: #FFFFFF; + border-color: #A0A2AD; } + +.next-step-circle > .next-step-item-wait > .next-step-item-container .next-step-item-node-dot { + background: #FFFFFF; + border-color: #A0A2AD; } + +.next-step-circle > .next-step-item-wait .next-step-item-title { + color: #666666; + word-break: break-word; } + +.next-step-circle > .next-step-item-wait .next-step-item-content { + color: #666666; + font-size: 12px; + word-break: break-word; } + +.next-step-circle > .next-step-item-wait .next-step-item-node-placeholder { + width: 32px; + height: 32px; + position: relative; } + +.next-step-circle > .next-step-item-wait .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-circle > .next-step-item-wait .next-step-item-node-circle { + display: block; + width: 32px; + height: 32px; + font-size: 12px; + font-weight: normal; + line-height: 30px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-circle > .next-step-item-wait .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-circle > .next-step-item-wait .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-circle > .next-step-item-wait .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -16px; + left: 50%; + margin-left: -16px; + display: block; + width: 32px; + height: 32px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + +.next-step-circle > .next-step-item-process .next-step-item-tail-overlay { + background: #C4C6CF; } + +.next-step-circle > .next-step-item-process .next-step-item-tail-underlay { + background: #E6E7EB; } + +.next-step-circle > .next-step-item-process > .next-step-item-container .next-step-item-progress { + width: 32px; + height: 32px; } + +.next-step-circle > .next-step-item-process > .next-step-item-container .next-step-item-node { + color: #FFFFFF; } + +.next-step-circle > .next-step-item-process > .next-step-item-container .next-step-item-node-circle { + background: #5584FF; + border-color: #5584FF; } + +.next-step-circle > .next-step-item-process > .next-step-item-container .next-step-item-node-dot { + background: #5584FF; + border-color: #5584FF; } + +.next-step-circle > .next-step-item-process .next-step-item-title { + color: #333333; + word-break: break-word; } + +.next-step-circle > .next-step-item-process .next-step-item-content { + color: #333333; + font-size: 12px; + word-break: break-word; } + +.next-step-circle > .next-step-item-process .next-step-item-node-placeholder { + width: 32px; + height: 32px; + position: relative; } + +.next-step-circle > .next-step-item-process .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-circle > .next-step-item-process .next-step-item-node-circle { + display: block; + width: 32px; + height: 32px; + font-size: 12px; + font-weight: normal; + line-height: 30px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-circle > .next-step-item-process .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-circle > .next-step-item-process .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-circle > .next-step-item-process .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -16px; + left: 50%; + margin-left: -16px; + display: block; + width: 32px; + height: 32px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + +.next-step-circle > .next-step-item-finish .next-step-item-tail-overlay { + background: #5584FF; } + +.next-step-circle > .next-step-item-finish .next-step-item-tail-underlay { + background: #E6E7EB; } + +.next-step-circle > .next-step-item-finish > .next-step-item-container .next-step-item-progress { + width: 32px; + height: 32px; } + +.next-step-circle > .next-step-item-finish > .next-step-item-container .next-step-item-node { + color: #5584FF; } + +.next-step-circle > .next-step-item-finish > .next-step-item-container .next-step-item-node-circle { + background: #FFFFFF; + border-color: #5584FF; } + +.next-step-circle > .next-step-item-finish > .next-step-item-container .next-step-item-node-dot { + background: #FFFFFF; + border-color: #5584FF; } + +.next-step-circle > .next-step-item-finish .next-step-item-title { + color: #666666; + word-break: break-word; } + +.next-step-circle > .next-step-item-finish .next-step-item-content { + color: #666666; + font-size: 12px; + word-break: break-word; } + +.next-step-circle > .next-step-item-finish .next-step-item-node-placeholder { + width: 32px; + height: 32px; + position: relative; } + +.next-step-circle > .next-step-item-finish .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-circle > .next-step-item-finish .next-step-item-node-circle { + display: block; + width: 32px; + height: 32px; + font-size: 12px; + font-weight: normal; + line-height: 30px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-circle > .next-step-item-finish .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-circle > .next-step-item-finish .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-circle > .next-step-item-finish .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -16px; + left: 50%; + margin-left: -16px; + display: block; + width: 32px; + height: 32px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + +.next-step-circle .next-step-item-disabled .next-step-item-tail-overlay { + background: #E6E7EB; } + +.next-step-circle .next-step-item-disabled .next-step-item-tail-underlay { + background: #E6E7EB; } + +.next-step-circle .next-step-item-disabled > .next-step-item-container .next-step-item-progress { + width: 32px; + height: 32px; } + +.next-step-circle .next-step-item-disabled > .next-step-item-container .next-step-item-node { + color: #CCCCCC; } + +.next-step-circle .next-step-item-disabled > .next-step-item-container .next-step-item-node-circle { + background: #FFFFFF; + border-color: #E6E7EB; } + +.next-step-circle .next-step-item-disabled > .next-step-item-container .next-step-item-node-dot { + background: #FFFFFF; + border-color: #E6E7EB; } + +.next-step-circle .next-step-item-disabled .next-step-item-title { + color: #CCCCCC; + word-break: break-word; } + +.next-step-circle .next-step-item-disabled .next-step-item-content { + color: #CCCCCC; + font-size: 12px; + word-break: break-word; } + +.next-step-circle .next-step-item-disabled .next-step-item-node-placeholder { + width: 32px; + height: 32px; + position: relative; } + +.next-step-circle .next-step-item-disabled .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-circle .next-step-item-disabled .next-step-item-node-circle { + display: block; + width: 32px; + height: 32px; + font-size: 12px; + font-weight: normal; + line-height: 30px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-circle .next-step-item-disabled .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-circle .next-step-item-disabled .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-circle .next-step-item-disabled .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -16px; + left: 50%; + margin-left: -16px; + display: block; + width: 32px; + height: 32px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + +.next-step-circle .next-step-item-disabled .next-step-item-node-placeholder, +.next-step-circle .next-step-item-disabled .next-step-item-node { + cursor: not-allowed; } + +.next-step-circle .next-step-item-read-only .next-step-item-node-placeholder, +.next-step-circle .next-step-item-read-only .next-step-item-node { + cursor: default; } + +.next-step-circle .next-step-item-last .next-step-item-tail { + display: none; } + +.next-step-circle.next-step-horizontal { + text-align: center; + white-space: nowrap; } + .next-step-circle.next-step-horizontal > .next-step-item .next-step-item-title { + white-space: normal; } + .next-step-circle.next-step-horizontal > .next-step-item .next-step-item-content { + white-space: normal; } + .next-step-circle.next-step-horizontal > .next-step-item-wait .next-step-item-tail { + display: inline-block; + clear: both; + width: calc(100% - 48px); + vertical-align: middle; } + .next-step-circle.next-step-horizontal > .next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay { + display: block; + height: 1px; + position: relative; } + .next-step-circle.next-step-horizontal > .next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 1px; + -webkit-transition: all .4s ease; + transition: all .4s ease; + width: 100%; } + .next-step-circle.next-step-horizontal > .next-step-item-wait > .next-step-item-node { + padding: 0 8px; + width: 48px; + height: 32px; } + .next-step-circle.next-step-horizontal > .next-step-item-wait > .next-step-item-body { + width: 100px; + left: -26px; + text-align: center; + position: absolute; } + .next-step-circle.next-step-horizontal > .next-step-item-wait > .next-step-item-body > .next-step-item-title { + font-size: 14px; + line-height: 18px; + margin-top: 8px; + font-weight: bold; } + .next-step-circle.next-step-horizontal > .next-step-item-wait > .next-step-item-body > .next-step-item-content { + margin-top: 4px; } + .next-step-circle.next-step-horizontal > .next-step-item-process .next-step-item-tail { + display: inline-block; + clear: both; + width: calc(100% - 48px); + vertical-align: middle; } + .next-step-circle.next-step-horizontal > .next-step-item-process .next-step-item-tail .next-step-item-tail-underlay { + display: block; + height: 1px; + position: relative; } + .next-step-circle.next-step-horizontal > .next-step-item-process .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 1px; + -webkit-transition: all .4s ease; + transition: all .4s ease; + width: 100%; } + .next-step-circle.next-step-horizontal > .next-step-item-process > .next-step-item-node { + padding: 0 8px; + width: 48px; + height: 32px; } + .next-step-circle.next-step-horizontal > .next-step-item-process > .next-step-item-body { + width: 100px; + left: -26px; + text-align: center; + position: absolute; } + .next-step-circle.next-step-horizontal > .next-step-item-process > .next-step-item-body > .next-step-item-title { + font-size: 14px; + line-height: 18px; + margin-top: 8px; + font-weight: bold; } + .next-step-circle.next-step-horizontal > .next-step-item-process > .next-step-item-body > .next-step-item-content { + margin-top: 4px; } + .next-step-circle.next-step-horizontal > .next-step-item-finish .next-step-item-tail { + display: inline-block; + clear: both; + width: calc(100% - 48px); + vertical-align: middle; } + .next-step-circle.next-step-horizontal > .next-step-item-finish .next-step-item-tail .next-step-item-tail-underlay { + display: block; + height: 1px; + position: relative; } + .next-step-circle.next-step-horizontal > .next-step-item-finish .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 1px; + -webkit-transition: all .4s ease; + transition: all .4s ease; + width: 100%; } + .next-step-circle.next-step-horizontal > .next-step-item-finish > .next-step-item-node { + padding: 0 8px; + width: 48px; + height: 32px; } + .next-step-circle.next-step-horizontal > .next-step-item-finish > .next-step-item-body { + width: 100px; + left: -26px; + text-align: center; + position: absolute; } + .next-step-circle.next-step-horizontal > .next-step-item-finish > .next-step-item-body > .next-step-item-title { + font-size: 14px; + line-height: 18px; + margin-top: 8px; + font-weight: bold; } + .next-step-circle.next-step-horizontal > .next-step-item-finish > .next-step-item-body > .next-step-item-content { + margin-top: 4px; } + .next-step-circle.next-step-horizontal > .next-step-item-disabled .next-step-item-tail { + display: inline-block; + clear: both; + width: calc(100% - 48px); + vertical-align: middle; } + .next-step-circle.next-step-horizontal > .next-step-item-disabled .next-step-item-tail .next-step-item-tail-underlay { + display: block; + height: 1px; + position: relative; } + .next-step-circle.next-step-horizontal > .next-step-item-disabled .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 1px; + -webkit-transition: all .4s ease; + transition: all .4s ease; + width: 100%; } + .next-step-circle.next-step-horizontal > .next-step-item-disabled > .next-step-item-node { + padding: 0 8px; + width: 48px; + height: 32px; } + .next-step-circle.next-step-horizontal > .next-step-item-disabled > .next-step-item-body { + width: 100px; + left: -26px; + text-align: center; + position: absolute; } + .next-step-circle.next-step-horizontal > .next-step-item-disabled > .next-step-item-body > .next-step-item-title { + font-size: 14px; + line-height: 18px; + margin-top: 8px; + font-weight: bold; } + .next-step-circle.next-step-horizontal > .next-step-item-disabled > .next-step-item-body > .next-step-item-content { + margin-top: 4px; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item { + vertical-align: unset; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-wait .next-step-item:last-child .next-step-item-tail { + display: none; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-wait .next-step-item-body { + position: relative; + display: inline-block; + top: 0; + left: 0; + max-width: 100px; + overflow: hidden; + vertical-align: top; + text-align: left; } + .next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-wait .next-step-item-body .next-step-item-title { + display: inline-block; + padding-right: 8px; + margin-top: 9px; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-wait .next-step-item-tail { + width: calc(100% - 148px); + position: absolute; + right: 0; + margin-top: -1px; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-process .next-step-item:last-child .next-step-item-tail { + display: none; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-process .next-step-item-body { + position: relative; + display: inline-block; + top: 0; + left: 0; + max-width: 100px; + overflow: hidden; + vertical-align: top; + text-align: left; } + .next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-process .next-step-item-body .next-step-item-title { + display: inline-block; + padding-right: 8px; + margin-top: 9px; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-process .next-step-item-tail { + width: calc(100% - 148px); + position: absolute; + right: 0; + margin-top: -1px; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-finish .next-step-item:last-child .next-step-item-tail { + display: none; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-finish .next-step-item-body { + position: relative; + display: inline-block; + top: 0; + left: 0; + max-width: 100px; + overflow: hidden; + vertical-align: top; + text-align: left; } + .next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-finish .next-step-item-body .next-step-item-title { + display: inline-block; + padding-right: 8px; + margin-top: 9px; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-finish .next-step-item-tail { + width: calc(100% - 148px); + position: absolute; + right: 0; + margin-top: -1px; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-disabled .next-step-item:last-child .next-step-item-tail { + display: none; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-disabled .next-step-item-body { + position: relative; + display: inline-block; + top: 0; + left: 0; + max-width: 100px; + overflow: hidden; + vertical-align: top; + text-align: left; } + .next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-disabled .next-step-item-body .next-step-item-title { + display: inline-block; + padding-right: 8px; + margin-top: 9px; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-disabled .next-step-item-tail { + width: calc(100% - 148px); + position: absolute; + right: 0; + margin-top: -1px; } + +.next-step-circle.next-step-vertical { + font-size: 0; + display: table-cell; + vertical-align: middle; + position: relative; } + .next-step-circle.next-step-vertical .next-step-item-container { + padding: 0; } + .next-step-circle.next-step-vertical > .next-step-item:last-child .next-step-item-tail { + display: block; + visibility: hidden; } + .next-step-circle.next-step-vertical > .next-step-item-wait .next-step-item-tail { + width: 1px; + height: 0; + margin: 8px auto; } + .next-step-circle.next-step-vertical > .next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay { + height: 100%; + width: 1px; + position: relative; } + .next-step-circle.next-step-vertical > .next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 100%; + width: 1px; } + .next-step-circle.next-step-vertical > .next-step-item-wait > .next-step-item-node { + padding: 8px 0; + width: 32px; + height: 48px; } + .next-step-circle.next-step-vertical > .next-step-item-wait > .next-step-item-body { + position: absolute; + top: 0; + left: 16px; + margin-left: 8px; } + .next-step-circle.next-step-vertical > .next-step-item-wait > .next-step-item-body > .next-step-item-title { + margin-top: 8px; + text-align: left; + font-weight: bold; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-circle.next-step-vertical > .next-step-item-wait > .next-step-item-body > .next-step-item-content { + margin-top: 4px; + min-height: 8px; + text-align: left; + font-size: 12px; + line-height: 16px; } + .next-step-circle.next-step-vertical > .next-step-item-process .next-step-item-tail { + width: 1px; + height: 0; + margin: 8px auto; } + .next-step-circle.next-step-vertical > .next-step-item-process .next-step-item-tail .next-step-item-tail-underlay { + height: 100%; + width: 1px; + position: relative; } + .next-step-circle.next-step-vertical > .next-step-item-process .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 100%; + width: 1px; } + .next-step-circle.next-step-vertical > .next-step-item-process > .next-step-item-node { + padding: 8px 0; + width: 32px; + height: 48px; } + .next-step-circle.next-step-vertical > .next-step-item-process > .next-step-item-body { + position: absolute; + top: 0; + left: 16px; + margin-left: 8px; } + .next-step-circle.next-step-vertical > .next-step-item-process > .next-step-item-body > .next-step-item-title { + margin-top: 8px; + text-align: left; + font-weight: bold; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-circle.next-step-vertical > .next-step-item-process > .next-step-item-body > .next-step-item-content { + margin-top: 4px; + min-height: 8px; + text-align: left; + font-size: 12px; + line-height: 16px; } + .next-step-circle.next-step-vertical > .next-step-item-finish .next-step-item-tail { + width: 1px; + height: 0; + margin: 8px auto; } + .next-step-circle.next-step-vertical > .next-step-item-finish .next-step-item-tail .next-step-item-tail-underlay { + height: 100%; + width: 1px; + position: relative; } + .next-step-circle.next-step-vertical > .next-step-item-finish .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 100%; + width: 1px; } + .next-step-circle.next-step-vertical > .next-step-item-finish > .next-step-item-node { + padding: 8px 0; + width: 32px; + height: 48px; } + .next-step-circle.next-step-vertical > .next-step-item-finish > .next-step-item-body { + position: absolute; + top: 0; + left: 16px; + margin-left: 8px; } + .next-step-circle.next-step-vertical > .next-step-item-finish > .next-step-item-body > .next-step-item-title { + margin-top: 8px; + text-align: left; + font-weight: bold; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-circle.next-step-vertical > .next-step-item-finish > .next-step-item-body > .next-step-item-content { + margin-top: 4px; + min-height: 8px; + text-align: left; + font-size: 12px; + line-height: 16px; } + .next-step-circle.next-step-vertical > .next-step-item-disabled .next-step-item-tail { + width: 1px; + height: 0; + margin: 8px auto; } + .next-step-circle.next-step-vertical > .next-step-item-disabled .next-step-item-tail .next-step-item-tail-underlay { + height: 100%; + width: 1px; + position: relative; } + .next-step-circle.next-step-vertical > .next-step-item-disabled .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 100%; + width: 1px; } + .next-step-circle.next-step-vertical > .next-step-item-disabled > .next-step-item-node { + padding: 8px 0; + width: 32px; + height: 48px; } + .next-step-circle.next-step-vertical > .next-step-item-disabled > .next-step-item-body { + position: absolute; + top: 0; + left: 16px; + margin-left: 8px; } + .next-step-circle.next-step-vertical > .next-step-item-disabled > .next-step-item-body > .next-step-item-title { + margin-top: 8px; + text-align: left; + font-weight: bold; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-circle.next-step-vertical > .next-step-item-disabled > .next-step-item-body > .next-step-item-content { + margin-top: 4px; + min-height: 8px; + text-align: left; + font-size: 12px; + line-height: 16px; } + +.next-step-dot .next-step-item-container { + display: inline-block; + vertical-align: middle; + position: relative; + padding: 0 8px; + font-size: 0; } + .next-step-dot .next-step-item-container .next-step-item-node-placeholder { + display: inline-block; } + .next-step-dot .next-step-item-container .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-dot .next-step-item-container .next-step-item-node .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-dot > .next-step-item-wait .next-step-item-tail-overlay { + background: #C4C6CF; } + +.next-step-dot > .next-step-item-wait .next-step-item-tail-underlay { + background: #E6E7EB; } + +.next-step-dot > .next-step-item-wait > .next-step-item-container .next-step-item-progress { + width: 12px; + height: 12px; } + +.next-step-dot > .next-step-item-wait > .next-step-item-container .next-step-item-node { + color: #999999; } + +.next-step-dot > .next-step-item-wait > .next-step-item-container .next-step-item-node-circle { + background: #FFFFFF; + border-color: #A0A2AD; } + +.next-step-dot > .next-step-item-wait > .next-step-item-container .next-step-item-node-dot { + background: #FFFFFF; + border-color: #A0A2AD; } + +.next-step-dot > .next-step-item-wait .next-step-item-title { + color: #666666; + word-break: break-word; } + +.next-step-dot > .next-step-item-wait .next-step-item-content { + color: #666666; + font-size: 12px; + word-break: break-word; } + +.next-step-dot > .next-step-item-wait .next-step-item-node-placeholder { + width: 12px; + height: 12px; + position: relative; } + +.next-step-dot > .next-step-item-wait .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-dot > .next-step-item-wait .next-step-item-node-circle { + display: block; + width: 12px; + height: 12px; + font-size: 12px; + font-weight: normal; + line-height: 10px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-dot > .next-step-item-wait .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-dot > .next-step-item-wait .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-dot > .next-step-item-wait .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -6px; + left: 50%; + margin-left: -6px; + display: block; + width: 12px; + height: 12px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + +.next-step-dot > .next-step-item-process .next-step-item-tail-overlay { + background: #C4C6CF; } + +.next-step-dot > .next-step-item-process .next-step-item-tail-underlay { + background: #E6E7EB; } + +.next-step-dot > .next-step-item-process > .next-step-item-container .next-step-item-progress { + width: 12px; + height: 12px; } + +.next-step-dot > .next-step-item-process > .next-step-item-container .next-step-item-node { + color: #5584FF; } + +.next-step-dot > .next-step-item-process > .next-step-item-container .next-step-item-node-circle { + background: #5584FF; + border-color: #5584FF; } + +.next-step-dot > .next-step-item-process > .next-step-item-container .next-step-item-node-dot { + background: #5584FF; + border-color: #5584FF; } + +.next-step-dot > .next-step-item-process .next-step-item-title { + color: #333333; + word-break: break-word; } + +.next-step-dot > .next-step-item-process .next-step-item-content { + color: #333333; + font-size: 12px; + word-break: break-word; } + +.next-step-dot > .next-step-item-process .next-step-item-node-placeholder { + width: 12px; + height: 12px; + position: relative; } + +.next-step-dot > .next-step-item-process .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-dot > .next-step-item-process .next-step-item-node-circle { + display: block; + width: 12px; + height: 12px; + font-size: 12px; + font-weight: normal; + line-height: 10px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-dot > .next-step-item-process .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-dot > .next-step-item-process .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-dot > .next-step-item-process .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -6px; + left: 50%; + margin-left: -6px; + display: block; + width: 12px; + height: 12px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + +.next-step-dot > .next-step-item-finish .next-step-item-tail-overlay { + background: #5584FF; } + +.next-step-dot > .next-step-item-finish .next-step-item-tail-underlay { + background: #E6E7EB; } + +.next-step-dot > .next-step-item-finish > .next-step-item-container .next-step-item-progress { + width: 12px; + height: 12px; } + +.next-step-dot > .next-step-item-finish > .next-step-item-container .next-step-item-node { + color: #5584FF; } + +.next-step-dot > .next-step-item-finish > .next-step-item-container .next-step-item-node-circle { + background: #FFFFFF; + border-color: #5584FF; } + +.next-step-dot > .next-step-item-finish > .next-step-item-container .next-step-item-node-dot { + background: #FFFFFF; + border-color: #5584FF; } + +.next-step-dot > .next-step-item-finish .next-step-item-title { + color: #666666; + word-break: break-word; } + +.next-step-dot > .next-step-item-finish .next-step-item-content { + color: #666666; + font-size: 12px; + word-break: break-word; } + +.next-step-dot > .next-step-item-finish .next-step-item-node-placeholder { + width: 12px; + height: 12px; + position: relative; } + +.next-step-dot > .next-step-item-finish .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-dot > .next-step-item-finish .next-step-item-node-circle { + display: block; + width: 12px; + height: 12px; + font-size: 12px; + font-weight: normal; + line-height: 10px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-dot > .next-step-item-finish .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-dot > .next-step-item-finish .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-dot > .next-step-item-finish .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -6px; + left: 50%; + margin-left: -6px; + display: block; + width: 12px; + height: 12px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + +.next-step-dot .next-step-item-disabled .next-step-item-tail-overlay { + background: #E6E7EB; } + +.next-step-dot .next-step-item-disabled .next-step-item-tail-underlay { + background: #E6E7EB; } + +.next-step-dot .next-step-item-disabled > .next-step-item-container .next-step-item-progress { + width: 12px; + height: 12px; } + +.next-step-dot .next-step-item-disabled > .next-step-item-container .next-step-item-node { + color: #E6E7EB; } + +.next-step-dot .next-step-item-disabled > .next-step-item-container .next-step-item-node-circle { + background: #FFFFFF; + border-color: #DCDEE3; } + +.next-step-dot .next-step-item-disabled > .next-step-item-container .next-step-item-node-dot { + background: #FFFFFF; + border-color: #DCDEE3; } + +.next-step-dot .next-step-item-disabled .next-step-item-title { + color: #CCCCCC; + word-break: break-word; } + +.next-step-dot .next-step-item-disabled .next-step-item-content { + color: #CCCCCC; + font-size: 12px; + word-break: break-word; } + +.next-step-dot .next-step-item-disabled .next-step-item-node-placeholder { + width: 12px; + height: 12px; + position: relative; } + +.next-step-dot .next-step-item-disabled .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-dot .next-step-item-disabled .next-step-item-node-circle { + display: block; + width: 12px; + height: 12px; + font-size: 12px; + font-weight: normal; + line-height: 10px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-dot .next-step-item-disabled .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-dot .next-step-item-disabled .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-dot .next-step-item-disabled .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -6px; + left: 50%; + margin-left: -6px; + display: block; + width: 12px; + height: 12px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + +.next-step-dot .next-step-item-disabled .next-step-item-node-placeholder, +.next-step-dot .next-step-item-disabled .next-step-item-node { + cursor: not-allowed; } + +.next-step-dot .next-step-item-read-only .next-step-item-node-placeholder, +.next-step-dot .next-step-item-read-only .next-step-item-node { + cursor: default; } + +.next-step-dot .next-step-item-last .next-step-item-tail { + display: none; } + +.next-step-dot.next-step-horizontal { + text-align: center; + white-space: nowrap; } + .next-step-dot.next-step-horizontal > .next-step-item .next-step-item-title { + white-space: normal; } + .next-step-dot.next-step-horizontal > .next-step-item .next-step-item-content { + white-space: normal; } + .next-step-dot.next-step-horizontal .next-step-item-node .next-icon { + vertical-align: middle; } + .next-step-dot.next-step-horizontal > .next-step-item-wait .next-step-item-tail { + display: inline-block; + clear: both; + width: calc(100% - 28px); + vertical-align: middle; } + .next-step-dot.next-step-horizontal > .next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay { + display: block; + height: 1px; + position: relative; } + .next-step-dot.next-step-horizontal > .next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 1px; + -webkit-transition: all .4s ease; + transition: all .4s ease; + width: 100%; } + .next-step-dot.next-step-horizontal > .next-step-item-wait > .next-step-item-node { + padding: 0 8px; + width: 28px; + height: 12px; } + .next-step-dot.next-step-horizontal > .next-step-item-wait > .next-step-item-body { + width: 100px; + left: -36px; + text-align: center; + position: absolute; } + .next-step-dot.next-step-horizontal > .next-step-item-wait > .next-step-item-body > .next-step-item-title { + font-size: 12px; + line-height: 16px; + margin-top: 8px; + font-weight: bold; } + .next-step-dot.next-step-horizontal > .next-step-item-wait > .next-step-item-body > .next-step-item-content { + margin-top: 4px; } + .next-step-dot.next-step-horizontal > .next-step-item-process .next-step-item-tail { + display: inline-block; + clear: both; + width: calc(100% - 28px); + vertical-align: middle; } + .next-step-dot.next-step-horizontal > .next-step-item-process .next-step-item-tail .next-step-item-tail-underlay { + display: block; + height: 1px; + position: relative; } + .next-step-dot.next-step-horizontal > .next-step-item-process .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 1px; + -webkit-transition: all .4s ease; + transition: all .4s ease; + width: 100%; } + .next-step-dot.next-step-horizontal > .next-step-item-process > .next-step-item-node { + padding: 0 8px; + width: 28px; + height: 12px; } + .next-step-dot.next-step-horizontal > .next-step-item-process > .next-step-item-body { + width: 100px; + left: -36px; + text-align: center; + position: absolute; } + .next-step-dot.next-step-horizontal > .next-step-item-process > .next-step-item-body > .next-step-item-title { + font-size: 12px; + line-height: 16px; + margin-top: 8px; + font-weight: bold; } + .next-step-dot.next-step-horizontal > .next-step-item-process > .next-step-item-body > .next-step-item-content { + margin-top: 4px; } + .next-step-dot.next-step-horizontal > .next-step-item-finish .next-step-item-tail { + display: inline-block; + clear: both; + width: calc(100% - 28px); + vertical-align: middle; } + .next-step-dot.next-step-horizontal > .next-step-item-finish .next-step-item-tail .next-step-item-tail-underlay { + display: block; + height: 1px; + position: relative; } + .next-step-dot.next-step-horizontal > .next-step-item-finish .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 1px; + -webkit-transition: all .4s ease; + transition: all .4s ease; + width: 100%; } + .next-step-dot.next-step-horizontal > .next-step-item-finish > .next-step-item-node { + padding: 0 8px; + width: 28px; + height: 12px; } + .next-step-dot.next-step-horizontal > .next-step-item-finish > .next-step-item-body { + width: 100px; + left: -36px; + text-align: center; + position: absolute; } + .next-step-dot.next-step-horizontal > .next-step-item-finish > .next-step-item-body > .next-step-item-title { + font-size: 12px; + line-height: 16px; + margin-top: 8px; + font-weight: bold; } + .next-step-dot.next-step-horizontal > .next-step-item-finish > .next-step-item-body > .next-step-item-content { + margin-top: 4px; } + .next-step-dot.next-step-horizontal > .next-step-item-disabled .next-step-item-tail { + display: inline-block; + clear: both; + width: calc(100% - 28px); + vertical-align: middle; } + .next-step-dot.next-step-horizontal > .next-step-item-disabled .next-step-item-tail .next-step-item-tail-underlay { + display: block; + height: 1px; + position: relative; } + .next-step-dot.next-step-horizontal > .next-step-item-disabled .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 1px; + -webkit-transition: all .4s ease; + transition: all .4s ease; + width: 100%; } + .next-step-dot.next-step-horizontal > .next-step-item-disabled > .next-step-item-node { + padding: 0 8px; + width: 28px; + height: 12px; } + .next-step-dot.next-step-horizontal > .next-step-item-disabled > .next-step-item-body { + width: 100px; + left: -36px; + text-align: center; + position: absolute; } + .next-step-dot.next-step-horizontal > .next-step-item-disabled > .next-step-item-body > .next-step-item-title { + font-size: 12px; + line-height: 16px; + margin-top: 8px; + font-weight: bold; } + .next-step-dot.next-step-horizontal > .next-step-item-disabled > .next-step-item-body > .next-step-item-content { + margin-top: 4px; } + +.next-step-dot.next-step-vertical { + padding: 0 0 0 4px; + font-size: 0; + display: table-cell; + position: relative; } + .next-step-dot.next-step-vertical .next-step-item-container { + padding: 0; } + .next-step-dot.next-step-vertical > .next-step-item:last-child .next-step-item-tail { + display: block; + visibility: hidden; } + .next-step-dot.next-step-vertical > .next-step-item-wait .next-step-item-tail { + width: 1px; + height: 0; + margin: 8px auto; } + .next-step-dot.next-step-vertical > .next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay { + height: 100%; + width: 1px; + position: relative; } + .next-step-dot.next-step-vertical > .next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 100%; + width: 1px; } + .next-step-dot.next-step-vertical > .next-step-item-wait > .next-step-item-node { + padding: 8px 0; + width: 12px; + height: 28px; } + .next-step-dot.next-step-vertical > .next-step-item-wait > .next-step-item-body { + position: absolute; + top: 0; + left: 6px; + margin-left: 8px; } + .next-step-dot.next-step-vertical > .next-step-item-wait > .next-step-item-body > .next-step-item-title { + margin-top: 0; + font-weight: bold; + text-align: left; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-dot.next-step-vertical > .next-step-item-wait > .next-step-item-body > .next-step-item-content { + margin-top: 8px; + min-height: 8px; + text-align: left; + font-size: 12px; + line-height: 16px; } + .next-step-dot.next-step-vertical > .next-step-item-process .next-step-item-tail { + width: 1px; + height: 0; + margin: 8px auto; } + .next-step-dot.next-step-vertical > .next-step-item-process .next-step-item-tail .next-step-item-tail-underlay { + height: 100%; + width: 1px; + position: relative; } + .next-step-dot.next-step-vertical > .next-step-item-process .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 100%; + width: 1px; } + .next-step-dot.next-step-vertical > .next-step-item-process > .next-step-item-node { + padding: 8px 0; + width: 12px; + height: 28px; } + .next-step-dot.next-step-vertical > .next-step-item-process > .next-step-item-body { + position: absolute; + top: 0; + left: 6px; + margin-left: 8px; } + .next-step-dot.next-step-vertical > .next-step-item-process > .next-step-item-body > .next-step-item-title { + margin-top: 0; + font-weight: bold; + text-align: left; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-dot.next-step-vertical > .next-step-item-process > .next-step-item-body > .next-step-item-content { + margin-top: 8px; + min-height: 8px; + text-align: left; + font-size: 12px; + line-height: 16px; } + .next-step-dot.next-step-vertical > .next-step-item-finish .next-step-item-tail { + width: 1px; + height: 0; + margin: 8px auto; } + .next-step-dot.next-step-vertical > .next-step-item-finish .next-step-item-tail .next-step-item-tail-underlay { + height: 100%; + width: 1px; + position: relative; } + .next-step-dot.next-step-vertical > .next-step-item-finish .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 100%; + width: 1px; } + .next-step-dot.next-step-vertical > .next-step-item-finish > .next-step-item-node { + padding: 8px 0; + width: 12px; + height: 28px; } + .next-step-dot.next-step-vertical > .next-step-item-finish > .next-step-item-body { + position: absolute; + top: 0; + left: 6px; + margin-left: 8px; } + .next-step-dot.next-step-vertical > .next-step-item-finish > .next-step-item-body > .next-step-item-title { + margin-top: 0; + font-weight: bold; + text-align: left; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-dot.next-step-vertical > .next-step-item-finish > .next-step-item-body > .next-step-item-content { + margin-top: 8px; + min-height: 8px; + text-align: left; + font-size: 12px; + line-height: 16px; } + .next-step-dot.next-step-vertical > .next-step-item-disabled .next-step-item-tail { + width: 1px; + height: 0; + margin: 8px auto; } + .next-step-dot.next-step-vertical > .next-step-item-disabled .next-step-item-tail .next-step-item-tail-underlay { + height: 100%; + width: 1px; + position: relative; } + .next-step-dot.next-step-vertical > .next-step-item-disabled .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 100%; + width: 1px; } + .next-step-dot.next-step-vertical > .next-step-item-disabled > .next-step-item-node { + padding: 8px 0; + width: 12px; + height: 28px; } + .next-step-dot.next-step-vertical > .next-step-item-disabled > .next-step-item-body { + position: absolute; + top: 0; + left: 6px; + margin-left: 8px; } + .next-step-dot.next-step-vertical > .next-step-item-disabled > .next-step-item-body > .next-step-item-title { + margin-top: 0; + font-weight: bold; + text-align: left; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-dot.next-step-vertical > .next-step-item-disabled > .next-step-item-body > .next-step-item-content { + margin-top: 8px; + min-height: 8px; + text-align: left; + font-size: 12px; + line-height: 16px; } + +.next-step-horizontal[dir="rtl"] > .next-step-item { + text-align: right; } + +.next-step-arrow[dir="rtl"] .next-step-item { + height: 32px; + line-height: 32px; + margin-left: 4px; + margin-right: 16px; } + .next-step-arrow[dir="rtl"] .next-step-item:before { + right: -16px; + left: auto; + border: 16px solid transparent; + border-right-color: transparent; } + .next-step-arrow[dir="rtl"] .next-step-item:after { + left: -32px; + right: auto; + border-top: 16px solid transparent; + border-bottom: 16px solid transparent; + border-right: 16px solid transparent; } + +.next-step-arrow[dir="rtl"] > .next-step-item-wait { + background: #EBECF0; } + .next-step-arrow[dir="rtl"] > .next-step-item-wait .next-step-item-node-dot { + right: 50%; + left: auto; } + .next-step-arrow[dir="rtl"] > .next-step-item-wait:before { + border: 16px solid #EBECF0; + border-right-color: transparent; } + .next-step-arrow[dir="rtl"] > .next-step-item-wait:after { + border-right-color: #EBECF0; + border-left-color: transparent; } + +.next-step-arrow[dir="rtl"] > .next-step-item-process { + background: #5584FF; } + .next-step-arrow[dir="rtl"] > .next-step-item-process .next-step-item-node-dot { + right: 50%; + left: auto; } + .next-step-arrow[dir="rtl"] > .next-step-item-process:before { + border: 16px solid #5584FF; + border-right-color: transparent; } + .next-step-arrow[dir="rtl"] > .next-step-item-process:after { + border-right-color: #5584FF; + border-left-color: transparent; } + +.next-step-arrow[dir="rtl"] > .next-step-item-finish { + background: #DEE8FF; } + .next-step-arrow[dir="rtl"] > .next-step-item-finish .next-step-item-node-dot { + right: 50%; + left: auto; } + .next-step-arrow[dir="rtl"] > .next-step-item-finish:before { + border: 16px solid #DEE8FF; + border-right-color: transparent; } + .next-step-arrow[dir="rtl"] > .next-step-item-finish:after { + border-right-color: #DEE8FF; + border-left-color: transparent; } + +.next-step-arrow[dir="rtl"] .next-step-item-disabled { + background: #F7F8FA; } + .next-step-arrow[dir="rtl"] .next-step-item-disabled .next-step-item-node-dot { + right: 50%; + left: auto; } + .next-step-arrow[dir="rtl"] .next-step-item-disabled:before { + border: 16px solid #F7F8FA; + border-right-color: transparent; } + .next-step-arrow[dir="rtl"] .next-step-item-disabled:after { + border-right-color: #F7F8FA; + border-left-color: transparent; } + +.next-step-arrow[dir="rtl"] .next-step-item-first { + margin-right: 0; } + +.next-step-arrow[dir="rtl"] .next-step-item-last { + margin-left: 0; } + +.next-step-circle[dir="rtl"] > .next-step-item-wait .next-step-item-node-dot { + right: 50%; + left: auto; } + +.next-step-circle[dir="rtl"] > .next-step-item-process .next-step-item-node-dot { + right: 50%; + left: auto; } + +.next-step-circle[dir="rtl"] > .next-step-item-finish .next-step-item-node-dot { + right: 50%; + left: auto; } + +.next-step-circle[dir="rtl"] .next-step-item-disabled .next-step-item-node-dot { + right: 50%; + left: auto; } + +.next-step-circle[dir="rtl"].next-step-horizontal > .next-step-item-wait > .next-step-item-body { + right: -26px; + left: auto; } + +.next-step-circle[dir="rtl"].next-step-horizontal > .next-step-item-process > .next-step-item-body { + right: -26px; + left: auto; } + +.next-step-circle[dir="rtl"].next-step-horizontal > .next-step-item-finish > .next-step-item-body { + right: -26px; + left: auto; } + +.next-step-circle[dir="rtl"].next-step-horizontal > .next-step-item-disabled > .next-step-item-body { + right: -26px; + left: auto; } + +.next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-wait .next-step-item-body { + left: auto; + right: 0; + text-align: right; } + .next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-wait .next-step-item-body .next-step-item-title { + padding-left: 8px; + padding-right: 0; } + +.next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-wait .next-step-item-tail { + left: 0; + right: auto; } + +.next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-process .next-step-item-body { + left: auto; + right: 0; + text-align: right; } + .next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-process .next-step-item-body .next-step-item-title { + padding-left: 8px; + padding-right: 0; } + +.next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-process .next-step-item-tail { + left: 0; + right: auto; } + +.next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-finish .next-step-item-body { + left: auto; + right: 0; + text-align: right; } + .next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-finish .next-step-item-body .next-step-item-title { + padding-left: 8px; + padding-right: 0; } + +.next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-finish .next-step-item-tail { + left: 0; + right: auto; } + +.next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-disabled .next-step-item-body { + left: auto; + right: 0; + text-align: right; } + .next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-disabled .next-step-item-body .next-step-item-title { + padding-left: 8px; + padding-right: 0; } + +.next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-disabled .next-step-item-tail { + left: 0; + right: auto; } + +.next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-wait > .next-step-item-body { + right: 16px; + left: auto; + margin-right: 8px; + margin-left: 0; } + .next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-wait > .next-step-item-body > .next-step-item-title { + text-align: right; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-wait > .next-step-item-body > .next-step-item-content { + text-align: right; } + +.next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-process > .next-step-item-body { + right: 16px; + left: auto; + margin-right: 8px; + margin-left: 0; } + .next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-process > .next-step-item-body > .next-step-item-title { + text-align: right; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-process > .next-step-item-body > .next-step-item-content { + text-align: right; } + +.next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-finish > .next-step-item-body { + right: 16px; + left: auto; + margin-right: 8px; + margin-left: 0; } + .next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-finish > .next-step-item-body > .next-step-item-title { + text-align: right; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-finish > .next-step-item-body > .next-step-item-content { + text-align: right; } + +.next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-disabled > .next-step-item-body { + right: 16px; + left: auto; + margin-right: 8px; + margin-left: 0; } + .next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-disabled > .next-step-item-body > .next-step-item-title { + text-align: right; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-disabled > .next-step-item-body > .next-step-item-content { + text-align: right; } + +.next-step-dot[dir="rtl"] > .next-step-item-wait .next-step-item-node-dot { + right: 50%; + left: auto; } + +.next-step-dot[dir="rtl"] > .next-step-item-process .next-step-item-node-dot { + right: 50%; + left: auto; } + +.next-step-dot[dir="rtl"] > .next-step-item-finish .next-step-item-node-dot { + right: 50%; + left: auto; } + +.next-step-dot[dir="rtl"] .next-step-item-disabled .next-step-item-node-dot { + right: 50%; + left: auto; } + +.next-step-dot[dir="rtl"].next-step-horizontal > .next-step-item-wait > .next-step-item-body { + right: -36px; + left: auto; } + +.next-step-dot[dir="rtl"].next-step-horizontal > .next-step-item-process > .next-step-item-body { + right: -36px; + left: auto; } + +.next-step-dot[dir="rtl"].next-step-horizontal > .next-step-item-finish > .next-step-item-body { + right: -36px; + left: auto; } + +.next-step-dot[dir="rtl"].next-step-horizontal > .next-step-item-disabled > .next-step-item-body { + right: -36px; + left: auto; } + +.next-step-dot[dir="rtl"].next-step-vertical { + padding: 0 4px 0 0; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-wait > .next-step-item-body { + right: 6px; + left: auto; + margin-right: 8px; + margin-left: 0; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-wait > .next-step-item-body > .next-step-item-title { + text-align: right; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-wait > .next-step-item-body > .next-step-item-content { + text-align: right; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-process > .next-step-item-body { + right: 6px; + left: auto; + margin-right: 8px; + margin-left: 0; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-process > .next-step-item-body > .next-step-item-title { + text-align: right; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-process > .next-step-item-body > .next-step-item-content { + text-align: right; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-finish > .next-step-item-body { + right: 6px; + left: auto; + margin-right: 8px; + margin-left: 0; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-finish > .next-step-item-body > .next-step-item-title { + text-align: right; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-finish > .next-step-item-body > .next-step-item-content { + text-align: right; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-disabled > .next-step-item-body { + right: 6px; + left: auto; + margin-right: 8px; + margin-left: 0; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-disabled > .next-step-item-body > .next-step-item-title { + text-align: right; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-disabled > .next-step-item-body > .next-step-item-content { + text-align: right; } + +.next-switch:after[dir="rtl"] { + content: " "; + -webkit-transition: all 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + transition: all 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + -webkit-transform-origin: right center; + -ms-transform-origin: right center; + transform-origin: right center; } + +.next-switch-medium[dir="rtl"]:after { + right: 100%; + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); } + +.next-switch-small[dir="rtl"]:after { + right: 100%; + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); } + +.next-switch-on[dir="rtl"] > .next-switch-children { + right: 10px; + left: auto; + color: #FFFFFF; } + +.next-switch-on[disabled][dir="rtl"]:after { + left: 0; + right: 100%; + -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); } + +.next-switch-on.next-switch-small[dir="rtl"] > .next-switch-children { + right: 6px; + left: auto; } + +.next-switch-off[dir="rtl"]:after { + right: 0; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + -webkit-box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.12); + box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.12); } + +.next-switch-off[dir="rtl"] > .next-switch-children { + left: 10px; + right: auto; } + +.next-switch-off.next-switch-small[dir="rtl"] > .next-switch-children { + left: 5px; + right: auto; } + +.next-switch { + -webkit-box-sizing: border-box; + box-sizing: border-box; + outline: none; + text-align: left; + -webkit-transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + overflow: hidden; + cursor: pointer; } + .next-switch *, + .next-switch *:before, + .next-switch *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-switch:after { + content: " "; + -webkit-transition: all 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + transition: all 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + -webkit-transform-origin: left center; + -ms-transform-origin: left center; + transform-origin: left center; } + .next-switch-medium { + position: relative; + display: inline-block; + border: 1px solid transparent; + width: 56px; + height: 26px; + border-radius: 20px; } + .next-switch-medium:after { + border: 1px solid transparent; + position: absolute; + left: 100%; + -webkit-transform: translateX(-100%); + -ms-transform: translateX(-100%); + transform: translateX(-100%); + width: 24px; + height: 24px; + border-radius: 20px; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-switch-medium > .next-switch-children { + font-size: 12px; + position: absolute; + height: 24px; + line-height: 24px; } + .next-switch-small { + position: relative; + display: inline-block; + border: 1px solid transparent; + width: 44px; + height: 22px; + border-radius: 20px; } + .next-switch-small:after { + border: 1px solid transparent; + position: absolute; + left: 100%; + -webkit-transform: translateX(-100%); + -ms-transform: translateX(-100%); + transform: translateX(-100%); + width: 20px; + height: 20px; + border-radius: 20px; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-switch-small > .next-switch-children { + font-size: 12px; + position: absolute; + height: 20px; + line-height: 20px; } + .next-switch-on { + background-color: #5584FF; } + .next-switch-on:after { + -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + background-color: #FFFFFF; + border-color: transparent; } + .next-switch-on > .next-switch-children { + left: 10px; + color: #FFFFFF; } + .next-switch-on:focus, .next-switch-on:hover { + background-color: #3E71F7; } + .next-switch-on:focus:after, .next-switch-on:hover:after { + background-color: #FFFFFF; } + .next-switch-on.next-switch-small > .next-switch-children { + left: 6px; } + .next-switch-on[disabled] { + background-color: #EBECF0; + cursor: not-allowed; } + .next-switch-on[disabled]:after { + right: 0; + -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + background-color: #F7F8FA; + border-color: #E6E7EB; } + .next-switch-on[disabled] > .next-switch-children { + color: #CCCCCC; } + .next-switch-off { + background-color: #FFFFFF; + border-color: #C4C6CF; } + .next-switch-off:focus, .next-switch-off:hover { + background-color: #F2F3F7; + border-color: #C4C6CF; } + .next-switch-off:after { + left: 0; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + background-color: #FFFFFF; + border-color: transparent; } + .next-switch-off:after:focus, .next-switch-off:after:hover { + background-color: #FFFFFF; } + .next-switch-off > .next-switch-children { + right: 10px; + color: #999999; } + .next-switch-off[disabled] { + background-color: #F7F8FA; + cursor: not-allowed; } + .next-switch-off[disabled]:after { + -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + background-color: #F7F8FA; + border-color: #E6E7EB; } + .next-switch-off[disabled] > .next-switch-children { + color: #C4C6CF; } + .next-switch-off.next-switch-small > .next-switch-children { + right: 5px; } + +.next-tabs { + /* Nav Button */ + /* ----------------- */ + /* position: vertical */ + /* ----------------- */ + /* Size */ + /* ----------------- */ + /* shape: pure */ + /* ----------------- */ + /* Shape: wrapped */ + /* --------------------- */ + /* Shape: wrapped(top) */ + /* Shape: wrapped(bottom) */ + /* Shape: wrapped(left) */ + /* Shape: wrapped(right) */ + /* Shape: text */ + /* ------------------- */ } + .next-tabs { + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; } + .next-tabs *, + .next-tabs *:before, + .next-tabs *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-tabs-bar { + outline: none; } + .next-tabs-bar-popup { + overflow-y: auto; + max-height: 480px; } + .next-tabs-nav-container { + position: relative; } + .next-tabs-nav-container:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + .next-tabs-nav-wrap { + overflow: hidden; } + .next-tabs-nav-scroll { + overflow: hidden; + white-space: nowrap; } + .next-tabs-nav { + display: inline-block; + position: relative; + -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); + transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); + list-style: none; + padding: 0; + margin: 0; } + .next-tabs-nav-enter, .next-tabs-nav-appear { + -webkit-animation: fadeInLeft 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + animation: fadeInLeft 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; } + .next-tabs-nav-leave { + -webkit-animation: fadeOutLeft 0.2s cubic-bezier(0.78, 0.14, 0.15, 0.86); + animation: fadeOutLeft 0.2s cubic-bezier(0.78, 0.14, 0.15, 0.86); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; } + .next-tabs-tab { + display: inline-block; + position: relative; + -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); + transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); } + .next-tabs-tab-inner { + position: relative; + cursor: pointer; + text-decoration: none; } + .next-tabs-tab:before { + content: ""; + position: absolute; + -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); + transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); } + .next-tabs-tab.active { + font-weight: normal; } + .next-tabs-tab .next-tabs-tab-close { + color: #666666; } + .next-tabs-tab .next-tabs-tab-close:hover { + color: #333333; } + .next-tabs-tab.active .next-tabs-tab-close { + color: #5584FF; } + .next-tabs-tab.disabled .next-tabs-tab-close { + color: #DCDEE3; } + .next-tabs-tab:focus { + outline: none; } + .next-tabs-tabpane { + display: none; } + .next-tabs-tabpane.active { + display: block; } + .next-tabs-btn-down, .next-tabs-btn-prev, .next-tabs-btn-next { + position: absolute; + top: 0; + cursor: pointer; + padding: 0; + border: 0; + outline: none; + height: 100%; + background-color: transparent; + border-color: transparent; } + .next-tabs-btn-down, .next-tabs-btn-down:link, .next-tabs-btn-down:visited, .next-tabs-btn-down.visited, .next-tabs-btn-prev, .next-tabs-btn-prev:link, .next-tabs-btn-prev:visited, .next-tabs-btn-prev.visited, .next-tabs-btn-next, .next-tabs-btn-next:link, .next-tabs-btn-next:visited, .next-tabs-btn-next.visited { + color: #666666; } + .next-tabs-btn-down:focus, .next-tabs-btn-down:hover, .next-tabs-btn-down.hover, .next-tabs-btn-down:active, .next-tabs-btn-down.active, .next-tabs-btn-prev:focus, .next-tabs-btn-prev:hover, .next-tabs-btn-prev.hover, .next-tabs-btn-prev:active, .next-tabs-btn-prev.active, .next-tabs-btn-next:focus, .next-tabs-btn-next:hover, .next-tabs-btn-next.hover, .next-tabs-btn-next:active, .next-tabs-btn-next.active { + color: #333333; + background-color: transparent; + border-color: transparent; + text-decoration: none; } + .next-tabs-btn-down.disabled, .next-tabs-btn-prev.disabled, .next-tabs-btn-next.disabled { + cursor: not-allowed; + color: #DCDEE3; } + .next-tabs-btn-next { + right: 8px; } + .next-tabs-btn-prev { + right: 32px; } + .next-tabs-btn-down { + right: 8px; } + .next-tabs-content { + overflow: hidden; } + .next-tabs-vertical > .next-tabs-bar .next-tabs-nav { + width: 100%; } + .next-tabs-vertical > .next-tabs-bar .next-tabs-tab { + display: block; } + .next-tabs.next-medium .next-tabs-nav-container-scrolling { + padding-right: 60px; } + .next-tabs.next-medium .next-tabs-tab-inner { + font-size: 12px; + padding: 12px 16px; } + .next-tabs.next-medium .next-tabs-tab-inner .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-tabs.next-medium .next-tabs-tab-inner .next-tabs-tab-close { + padding-left: 8px; } + .next-tabs.next-medium .next-tabs-tab-inner .next-tabs-tab-close:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-tabs.next-medium .next-tabs-btn-down .next-icon:before, + .next-tabs.next-medium .next-tabs-btn-prev .next-icon:before, + .next-tabs.next-medium .next-tabs-btn-next .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-tabs.next-small .next-tabs-nav-container-scrolling { + padding-right: 56px; } + .next-tabs.next-small .next-tabs-tab-inner { + font-size: 12px; + padding: 8px 12px; } + .next-tabs.next-small .next-tabs-tab-inner .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close { + padding-left: 8px; } + .next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close:before { + width: 16px; + font-size: 16px; } } + .next-tabs.next-small .next-tabs-btn-down .next-icon:before, + .next-tabs.next-small .next-tabs-btn-prev .next-icon:before, + .next-tabs.next-small .next-tabs-btn-next .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-tabs-pure > .next-tabs-bar { + border-bottom: solid 1px #DCDEE3; + background-color: transparent; } + .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container { + margin-bottom: -1px; + -webkit-box-shadow: none; + box-shadow: none; } + .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container .next-tabs-tab { + color: #666666; + background-color: transparent; } + .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container .next-tabs-tab:hover { + cursor: pointer; + color: #333333; + background-color: transparent; } + .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container .next-tabs-tab.active { + z-index: 1; + color: #5584FF; + background-color: transparent; } + .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container .next-tabs-tab.disabled { + pointer-events: none; + cursor: default; + color: #DCDEE3; + background: transparent; } + .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container .next-tabs-tab:before { + border-radius: 0%; + width: 0; + border-bottom: 2px solid #5584FF; + left: 50%; + bottom: 0%; } + .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container .next-tabs-tab.active:before { + width: 100%; + left: 0%; } + .next-tabs-wrapped > .next-tabs-bar { + background: transparent; } + .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab { + color: #666666; + background-color: #F2F3F7; } + .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab:hover { + cursor: pointer; + color: #333333; + background-color: #EBECF0; } + .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab.active { + z-index: 1; + color: #5584FF; + background-color: #FFFFFF; } + .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab.disabled { + pointer-events: none; + cursor: default; + color: #CCCCCC; + background: #F7F8FA; } + .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab .next-tabs-tab-close { + color: #666666; } + .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab .next-tabs-tab-close:hover { + color: #333333; } + .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab.active .next-tabs-tab-close { + color: #5584FF; } + .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab.disabled .next-tabs-tab-close { + color: #DCDEE3; } + .next-tabs-wrapped:before, .next-tabs-wrapped:after { + content: ""; + display: table; } + .next-tabs-wrapped:after { + clear: both; } + .next-tabs-wrapped > .next-tabs-content { + position: relative; } + .next-tabs-wrapped.next-tabs-top > .next-tabs-bar { + position: relative; } + .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-nav-extra { + position: absolute; + top: 50%; + right: 0; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); } + .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-tab { + margin-right: 4px; + border: solid 1px #DCDEE3; + border-radius: 3px 3px 0 0; + border-width: 1px 1px 1px 1px; } + .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-tab:hover { + border-color: #C4C6CF; } + .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-tab.active { + border-color: #DCDEE3 #DCDEE3 #FFFFFF #DCDEE3; } + .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-tab:before { + border-radius: 3px; + width: 0; + border-top: 2px solid #5584FF; + left: 50%; + top: -1px; } + .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-tab.active:before { + width: calc(100% - 2 * 3px); + left: 3px; } + .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-tab.active { + border-width: 1px 1px 1px 1px; } + .next-tabs-wrapped.next-tabs-top > .next-tabs-content { + top: -1px; + border-top: 1px solid #DCDEE3; } + .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar { + position: relative; } + .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-nav-extra { + position: absolute; + top: 50%; + right: 0; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); } + .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-tab { + margin-right: 4px; + border: solid 1px #DCDEE3; + border-radius: 0 0 3px 3px; } + .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-tab:hover { + border-color: #C4C6CF; } + .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-tab.active { + border-color: #FFFFFF #DCDEE3 #DCDEE3 #DCDEE3; } + .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-tab:before { + border-radius: 3px; + width: 0; + border-bottom: 2px solid #5584FF; + left: 50%; + bottom: -1px; } + .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-tab.active:before { + width: calc(100% - 2 * 3px); + left: 3px; } + .next-tabs-wrapped.next-tabs-bottom > .next-tabs-content { + top: 1px; + border-bottom: 1px solid #DCDEE3; } + .next-tabs-wrapped.next-tabs-left > .next-tabs-bar { + float: left; } + .next-tabs-wrapped.next-tabs-left > .next-tabs-bar .next-tabs-tab { + float: none; + margin-bottom: 4px; + border: solid 1px #DCDEE3; + border-radius: 3px 0 0 3px; + border-width: 1px 1px 1px 1px; } + .next-tabs-wrapped.next-tabs-left > .next-tabs-bar .next-tabs-tab:hover { + border-color: #C4C6CF; } + .next-tabs-wrapped.next-tabs-left > .next-tabs-bar .next-tabs-tab.active { + border-color: #DCDEE3 #FFFFFF #DCDEE3 #DCDEE3; } + .next-tabs-wrapped.next-tabs-left > .next-tabs-bar .next-tabs-tab:before { + border-radius: 3px; + height: 0; + border-left: 2px solid #5584FF; + top: 50%; + left: -1px; } + .next-tabs-wrapped.next-tabs-left > .next-tabs-bar .next-tabs-tab.active:before { + height: calc(100% - 2 * 3px); + top: 3px; } + .next-tabs-wrapped.next-tabs-left > .next-tabs-bar .next-tabs-tab.active { + border-width: 1px 1px 1px 1px; } + .next-tabs-wrapped.next-tabs-left > .next-tabs-content { + right: 1px; + border-left: 1px solid #DCDEE3; } + .next-tabs-wrapped.next-tabs-right > .next-tabs-bar { + float: right; } + .next-tabs-wrapped.next-tabs-right > .next-tabs-bar .next-tabs-tab { + float: none; + margin-bottom: 4px; + border: solid 1px #DCDEE3; + border-radius: 0 3px 3px 0; + border-width: 1px 1px 1px 1px; } + .next-tabs-wrapped.next-tabs-right > .next-tabs-bar .next-tabs-tab:hover { + border-color: #C4C6CF; } + .next-tabs-wrapped.next-tabs-right > .next-tabs-bar .next-tabs-tab.active { + border-color: #DCDEE3 #DCDEE3 #DCDEE3 #FFFFFF; } + .next-tabs-wrapped.next-tabs-right > .next-tabs-bar .next-tabs-tab:before { + border-radius: 3px; + height: 0; + border-right: 2px solid #5584FF; + top: 50%; + right: -1px; } + .next-tabs-wrapped.next-tabs-right > .next-tabs-bar .next-tabs-tab.active:before { + height: calc(100% - 2 * 3px); + top: 3px; } + .next-tabs-wrapped.next-tabs-right > .next-tabs-bar .next-tabs-tab.active { + border-width: 1px 1px 1px 1px; } + .next-tabs-wrapped.next-tabs-right > .next-tabs-content { + right: -1px; + border-right: 1px solid #DCDEE3; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-tab { + -webkit-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1); + transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1); + border-top: 1px solid #C4C6CF; + border-bottom: 1px solid #C4C6CF; + border-left: 1px solid #C4C6CF; + color: #333333; + background-color: #F2F3F7; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-tab:first-child { + border-radius: 3px 0 0 3px; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-tab:last-child { + border-radius: 0 3px 3px 0; + border-right: 1px solid #C4C6CF; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-tab.active { + margin-right: -1px; + border-right: 1px solid #C4C6CF; + border-color: #5584FF; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-tab.disabled { + border-color: #E6E7EB; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-tab:hover { + cursor: pointer; + color: #333333; + background-color: #EBECF0; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-tab.active { + z-index: 1; + color: #FFFFFF; + background-color: #5584FF; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-tab.disabled { + pointer-events: none; + cursor: default; + color: #CCCCCC; + background: #F7F8FA; } + .next-tabs-text > .next-tabs-bar .next-tabs-tab { + color: #666666; + background-color: transparent; } + .next-tabs-text > .next-tabs-bar .next-tabs-tab:hover { + cursor: pointer; + color: #333333; + background-color: transparent; } + .next-tabs-text > .next-tabs-bar .next-tabs-tab.active { + z-index: 1; + color: #5584FF; + background-color: transparent; } + .next-tabs-text > .next-tabs-bar .next-tabs-tab.disabled { + pointer-events: none; + cursor: default; + color: #CCCCCC; + background: transparent; } + .next-tabs-text > .next-tabs-bar .next-tabs-tab:not(:last-child):after { + content: ' '; + position: absolute; + right: 0; + top: calc(50% - 4px); + width: 1px; + height: 8px; + background-color: #DCDEE3; } + .next-tabs-pure > .next-tabs-bar { + position: relative; } + .next-tabs-pure > .next-tabs-bar .next-tabs-nav-extra { + position: absolute; + top: 50%; + right: 0; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); } + .next-tabs-capsule > .next-tabs-bar { + position: relative; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-nav-extra { + position: absolute; + top: 50%; + right: 0; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); } + .next-tabs-text > .next-tabs-bar { + position: relative; } + .next-tabs-text > .next-tabs-bar .next-tabs-nav-extra { + position: absolute; + top: 50%; + right: 0; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); } + +.next-tabs[dir='rtl'].next-medium .next-tabs-nav-container-scrolling { + padding-left: 60px; + padding-right: 0; } + +.next-tabs[dir='rtl'].next-medium .next-tabs-tab-close { + padding-right: 8px; + padding-left: 0; } + +.next-tabs[dir='rtl'].next-small .next-tabs-nav-container-scrolling { + padding-left: 56px; + padding-right: 0; } + +.next-tabs[dir='rtl'].next-small .next-tabs-tab-close { + padding-right: 8px; + padding-left: 0; } + +.next-tabs[dir='rtl'].next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-nav-extra { + right: auto; + left: 0; } + +.next-tabs[dir='rtl'].next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-nav-extra { + right: auto; + left: 0; } + +.next-tabs[dir='rtl'] > .next-tabs-bar .next-tabs-nav-extra { + right: auto; + left: 0; } + +.next-tabs[dir='rtl'].next-tabs-capsule > .next-tabs-bar .next-tabs-tab { + border-top: 1px solid #C4C6CF; + border-bottom: 1px solid #C4C6CF; + border-right: 1px solid #C4C6CF; + border-left: 0; } + .next-tabs[dir='rtl'].next-tabs-capsule > .next-tabs-bar .next-tabs-tab:first-child { + border-left: 0; + border-radius: 0 3px 3px 0; } + .next-tabs[dir='rtl'].next-tabs-capsule > .next-tabs-bar .next-tabs-tab:last-child { + border-radius: 3px 0 0 3px; + border-left: 1px solid #C4C6CF; } + .next-tabs[dir='rtl'].next-tabs-capsule > .next-tabs-bar .next-tabs-tab.active { + margin-left: -1px; + margin-right: auto; + border-left: 1px solid #C4C6CF; + border-color: #5584FF; } + +.next-tabs[dir='rtl'] .next-tabs-btn-next { + left: 8px; + right: auto; } + +.next-tabs[dir='rtl'] .next-tabs-btn-prev { + left: 32px; + right: auto; } + +.next-tabs[dir='rtl'] .next-tabs-btn-down { + left: 8px; + right: auto; } + +.next-tabs-text[dir='rtl'] > .next-tabs-bar .next-tabs-tab:not(:last-child):after { + content: ' '; + position: absolute; + left: 0; + right: auto; } + +/* put your code here */ +.next-table { + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: relative; } + .next-table *, + .next-table *:before, + .next-table *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-table table { + border-collapse: collapse; + border-spacing: 0; + width: 100%; + background: #FFFFFF; } + .next-table table tr:first-child td { + border-top-width: 0; } + .next-table th { + padding: 0; + background: #EBECF0; + color: #333333; + text-align: left; + font-weight: normal; + border: 1px solid #DCDEE3; } + .next-table th .next-table-cell-wrapper { + padding: 12px 16px; + overflow: hidden; + text-overflow: ellipsis; + word-break: break-all; } + .next-table-affix { + z-index: 1; } + .next-table-header-resizable { + position: relative; } + .next-table-header-resizable .next-table-resize-handler { + position: absolute; + right: 0; + top: 0; + bottom: 0; + width: 3px; + background: transparent; + cursor: ew-resize; } + .next-table td { + padding: 0; + border: 1px solid #DCDEE3; } + .next-table td .next-table-cell-wrapper { + padding: 12px 16px; + overflow: hidden; + text-overflow: ellipsis; + word-break: break-all; } + .next-table td .next-table-cell-wrapper .next-icon-arrow-down.next-table-tree-arrow, + .next-table td .next-table-cell-wrapper .next-icon-arrow-right.next-table-tree-arrow, + .next-table td .next-table-cell-wrapper .next-table-tree-placeholder { + margin-right: 3px; + float: left; } + .next-table td .next-table-cell-wrapper .next-icon-arrow-down.next-table-tree-arrow:before, + .next-table td .next-table-cell-wrapper .next-icon-arrow-right.next-table-tree-arrow:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-table .next-table-expanded .next-table-cell-wrapper, + .next-table .next-table-selection .next-table-cell-wrapper { + overflow: visible; } + .next-table.no-header table tr:first-child td { + border-top-width: 1px; } + .next-table.only-bottom-border { + border-width: 0; } + .next-table.only-bottom-border th { + border-width: 0 0 1px 0; } + .next-table.only-bottom-border td { + border-width: 0 0 1px 0; } + .next-table.only-bottom-border .next-table-expanded-row th { + border-width: 0 0 1px 0; } + .next-table.only-bottom-border .next-table-expanded-row td { + border-width: 0 0 1px 0; } + .next-table-loading { + display: block; } + .next-table.zebra tr:nth-child(odd) td { + background: #FFFFFF; } + .next-table.zebra tr:nth-child(even) td { + background: #F7F8FA; } + .next-table.zebra .next-table-row.hovered td { + background: #F2F3F7; + color: #333333; } + .next-table.zebra .next-table-row.selected td { + background: #F2F3F7; + color: #333333; } + .next-table-empty { + color: #A0A2AD; + padding: 32px 0; + text-align: center; } + .next-table-expanded-row td { + border-width: 0; } + .next-table-expanded-row td:first-child { + border-left-width: 1px; } + .next-table-expanded-row td:last-child { + border-right-width: 1px; } + .next-table-expanded-row:last-child td { + border-bottom-width: 1px; } + .next-table-expanded-row .next-table .last td { + border-bottom-width: 0; } + .next-table-filter-footer { + margin: 10px 10px 0; } + .next-table-filter-footer button { + margin-right: 5px; } + .next-table-row { + -webkit-transition: all ease .3s; + transition: all ease .3s; + background: #FFFFFF; + color: #333333; } + .next-table-row.hidden { + display: none; } + .next-table-row.hovered { + background: #F2F3F7; + color: #333333; } + .next-table-row.selected { + background: #F2F3F7; + color: #333333; } + .next-table-tree-placeholder { + display: inline-block; + width: 12px; } + +.last .next-table-expanded-row td { + border-bottom-width: 1px; } + +.next-table-body, +.next-table-header { + overflow: auto; + font-size: 12px; } + +.next-table-body { + font-size: 12px; } + +.next-table-fixed { + border: 1px solid #DCDEE3; } + .next-table-fixed table { + table-layout: fixed; } + .next-table-fixed .next-table-header { + background: #EBECF0; } + .next-table-fixed table tr td:first-child, + .next-table-fixed table tr th:first-child { + border-left-width: 0; } + .next-table-fixed .next-table-header th { + border-top-width: 0; } + .next-table-fixed .next-table-header tr th:last-child { + border-right-width: 0; } + .next-table-fixed .next-table-body td { + border-top-width: 0; } + .next-table-fixed .next-table-body tr:last-child td { + border-bottom-width: 0; } + .next-table-fixed .next-table-body tr td:last-child { + border-right-width: 0; } + .next-table-fixed.next-table-group table tr td:first-child, + .next-table-fixed.next-table-group table tr th:first-child { + border-left-width: 1px; } + .next-table-fixed.next-table-group .next-table-header th { + border-top-width: 1px; } + .next-table-fixed.next-table-group .next-table-header tr th:last-child { + border-right-width: 1px; } + .next-table-fixed.next-table-group .next-table-body td { + border-top-width: 1px; } + .next-table-fixed.next-table-group .next-table-body tr:last-child td { + border-bottom-width: 1px; } + .next-table-fixed.next-table-group .next-table-body tr td:last-child { + border-right-width: 1px; } + +.next-table-lock .next-table-body { + overflow-x: auto; + overflow-y: visible; } + +.next-table-group { + border-width: 0; } + .next-table-group .next-table-body { + margin-top: 8px; } + .next-table-group .next-table-body table { + margin-bottom: 8px; } + .next-table-group .next-table-body table tr:first-child td { + border-top-width: 1px; } + .next-table-group .next-table-group-header td { + background: #EBECF0; + color: #333333; } + .next-table-group .next-table-group-footer td { + background: #EBECF0; + color: #333333; } + .next-table-group .next-table-row.hovered, + .next-table-group .next-table-row.selected { + background: #FFFFFF; + color: #333333; } + +.next-table-lock { + position: relative; } + .next-table-lock table { + table-layout: fixed; } + +.next-table-header-inner { + overflow: hidden; } + +.next-table-lock-left, +.next-table-lock-right { + position: absolute; + left: 0; + top: 0; + z-index: 1; + border: 0; } + .next-table-lock-left table, + .next-table-lock-right table { + width: auto; } + .next-table-lock-left .next-table-body, + .next-table-lock-right .next-table-body { + overflow: hidden; } + +.next-table-lock-right { + right: 0; + left: auto; } + .next-table-lock-right table tr td:first-child, + .next-table-lock-right table tr th:first-child { + border-left-width: 1px; } + .next-table-lock-right.shadow { + -webkit-box-shadow: -2px 0 3px rgba(0, 0, 0, 0.12); + box-shadow: -2px 0 3px rgba(0, 0, 0, 0.12); } + +.next-table-lock-left.shadow { + -webkit-box-shadow: 2px 0 3px rgba(0, 0, 0, 0.12); + box-shadow: 2px 0 3px rgba(0, 0, 0, 0.12); } + +.next-table-filter { + line-height: 1; } + +.next-table-sort { + position: relative; + width: 16px; + height: 15px; + display: inline-block; + vertical-align: middle; + line-height: 1; } + .next-table-sort .next-icon { + position: absolute; + left: 0; + color: #333333; } + .next-table-sort .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-table-sort .current .next-icon { + color: #5584FF; } + .next-table-sort .next-icon-ascending { + left: 4px; } + +.next-table-filter { + margin-left: 5px; + cursor: pointer; + width: 20px; + display: inline-block; } + .next-table-filter:focus { + outline: 0; } + .next-table-filter .next-icon { + color: #333333; } + .next-table-filter .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-table-expanded-ctrl.disabled { + color: #999999; } + +.next-table-expanded-ctrl .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-table[dir="rtl"] th { + text-align: right; } + +.next-table[dir="rtl"] .next-table-header-resizable .next-table-resize-handler { + right: auto; + left: 0; } + +.next-table[dir="rtl"] td .next-table-cell-wrapper .next-icon-arrow-down.next-table-tree-arrow, +.next-table[dir="rtl"] td .next-table-cell-wrapper .next-icon-arrow-right.next-table-tree-arrow, +.next-table[dir="rtl"] td .next-table-cell-wrapper .next-table-tree-placeholder { + margin-left: 3px; + margin-right: 0; + float: right; } + +.next-table[dir="rtl"] .next-table-expanded-row td:first-child { + border-left-width: 0; + border-right-width: 1px; } + +.next-table[dir="rtl"] .next-table-expanded-row td:last-child { + border-left-width: 1px; + border-right-width: 0; } + +.next-table[dir="rtl"].only-bottom-border .next-table-expanded-row th { + border-width: 0 0 1px 0; } + +.next-table[dir="rtl"].only-bottom-border .next-table-expanded-row td { + border-width: 0 0 1px 0; } + +.next-table[dir="rtl"] .next-table-filter-footer button { + margin-left: 5px; + margin-right: 0; } + +.next-table[dir="rtl"] .next-table-lock-left, +.next-table[dir="rtl"] .next-table-lock-right { + left: auto; + right: 0; } + +.next-table[dir="rtl"] .next-table-lock-right { + right: auto; + left: 0; } + .next-table[dir="rtl"] .next-table-lock-right table tr td:first-child, + .next-table[dir="rtl"] .next-table-lock-right table tr th:first-child { + border-right-width: 1px; } + .next-table[dir="rtl"] .next-table-lock-right.shadow { + -webkit-box-shadow: 2px 0 3px rgba(0, 0, 0, 0.12); + box-shadow: 2px 0 3px rgba(0, 0, 0, 0.12); } + +.next-table[dir="rtl"] .next-table-lock-left.shadow { + -webkit-box-shadow: -2px 0 3px rgba(0, 0, 0, 0.12); + box-shadow: -2px 0 3px rgba(0, 0, 0, 0.12); } + +.next-table[dir="rtl"] .next-table-sort .next-icon { + right: 0; + left: auto; } + +.next-table[dir="rtl"] .next-table-sort .next-icon-ascending { + right: 4px; + left: auto; } + +.next-table[dir="rtl"] .next-table-filter { + margin-right: 5px; + margin-left: 0; } + +.next-table-fixed[dir="rtl"] table tr td:first-child, +.next-table-fixed[dir="rtl"] table tr th:first-child { + border-left-width: 1px; + border-right-width: 0; } + +.next-table-fixed[dir="rtl"] .next-table-header tr th:last-child { + border-left-width: 1px; } + +.next-table-fixed[dir="rtl"] .next-table-body tr td:last-child { + border-left-width: 1px; } + +.next-timeline *, +.next-timeline *:before, +.next-timeline *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +.next-timeline, .next-timeline:before, .next-timeline:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +.next-timeline ul { + margin: 0; + padding: 0; + list-style: none; } + +.next-timeline p { + margin: 0; } + +.next-timeline-hide { + display: none; } + +.next-timeline[dir='rtl'] .next-timeline-item { + /* 时间轴左边存在内容的情况 */ } + .next-timeline[dir='rtl'] .next-timeline-item-folder { + padding-left: 0; + padding-right: 28px; } + .next-timeline[dir='rtl'] .next-timeline-item-dot-tail { + left: auto; + right: 8px; + border-left: none; + border-right: 1px dotted #DCDEE3; } + .next-timeline[dir='rtl'] .next-timeline-item-has-left-content.next-timeline-item-folder { + margin-left: 0; + margin-right: 80px; } + +.next-timeline[dir='rtl'] .next-timeline-item-done { + position: relative; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-timeline { + position: absolute; + left: auto; + right: 0; + top: 0; + height: 100%; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-node { + position: relative; + width: 16px; + height: 24px; + padding: 4px 0; + text-align: center; + float: right; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom { + width: 40px; + height: auto; + font-size: 12px; + word-break: break-all; + margin-right: calc(-12px); + margin-left: 0; + line-height: 1; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-dot { + display: block; + position: absolute; + width: 8px; + height: 8px; + border-radius: 100%; + top: 50%; + margin-top: -4px; + left: 50%; + margin-left: -4px; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-icon { + display: block; + position: absolute; + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 100%; + top: 50%; + left: 50%; + margin-top: -8px; + margin-left: -8px; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-tail { + position: absolute; + width: auto; + height: calc(100% - 24px); + top: 24px; + left: auto; + right: 8px; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-tail i { + display: inline-block; + vertical-align: top; + height: 100%; + width: 1px; + position: relative; + background: #DCDEE3; + -webkit-transition: all .4s ease; + transition: all .4s ease; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-content { + display: inline-block; + margin-right: 28px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-content .next-timeline-item-title { + margin: 0; + font-size: 12px; + font-weight: bold; + line-height: 16px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #333333; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-content .next-timeline-item-body { + margin: 0; + margin-top: 8px; + font-size: 12px; + line-height: 16px; + color: #666666; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-content .next-timeline-item-time { + margin: 0; + margin-top: 4px; + margin-bottom: 12px; + font-size: 12px; + color: #999999; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-done.next-timeline-item-has-left-content > .next-timeline-item-left-content { + position: absolute; + width: 80px; + display: inline-block; + font-size: 12px; + color: #999999; + line-height: 16px; + margin-top: 4px; + text-align: left; + padding-left: 12px; + padding-right: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-done.next-timeline-item-has-left-content > .next-timeline-item-left-content p { + word-break: break-word; } + .next-timeline[dir='rtl'] .next-timeline-item-done.next-timeline-item-has-left-content > .next-timeline-item-timeline { + margin-right: 80px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-done.next-timeline-item-has-left-content > .next-timeline-item-content { + margin-right: 108px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-dot { + background: #C4C6CF; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-icon { + background: #C4C6CF; + color: #FFFFFF; } + +.next-timeline[dir='rtl'] .next-timeline-item-process { + position: relative; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-timeline { + position: absolute; + left: auto; + right: 0; + top: 0; + height: 100%; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-node { + position: relative; + width: 16px; + height: 24px; + padding: 4px 0; + text-align: center; + float: right; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom { + width: 40px; + height: auto; + font-size: 12px; + word-break: break-all; + margin-right: calc(-12px); + margin-left: 0; + line-height: 1; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-dot { + display: block; + position: absolute; + width: 8px; + height: 8px; + border-radius: 100%; + top: 50%; + margin-top: -4px; + left: 50%; + margin-left: -4px; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-icon { + display: block; + position: absolute; + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 100%; + top: 50%; + left: 50%; + margin-top: -8px; + margin-left: -8px; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-tail { + position: absolute; + width: auto; + height: calc(100% - 24px); + top: 24px; + left: auto; + right: 8px; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-tail i { + display: inline-block; + vertical-align: top; + height: 100%; + width: 1px; + position: relative; + background: #DCDEE3; + -webkit-transition: all .4s ease; + transition: all .4s ease; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-content { + display: inline-block; + margin-right: 28px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-content .next-timeline-item-title { + margin: 0; + font-size: 12px; + font-weight: bold; + line-height: 16px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #333333; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-content .next-timeline-item-body { + margin: 0; + margin-top: 8px; + font-size: 12px; + line-height: 16px; + color: #666666; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-content .next-timeline-item-time { + margin: 0; + margin-top: 4px; + margin-bottom: 12px; + font-size: 12px; + color: #999999; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-process.next-timeline-item-has-left-content > .next-timeline-item-left-content { + position: absolute; + width: 80px; + display: inline-block; + font-size: 12px; + color: #999999; + line-height: 16px; + margin-top: 4px; + text-align: left; + padding-left: 12px; + padding-right: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-process.next-timeline-item-has-left-content > .next-timeline-item-left-content p { + word-break: break-word; } + .next-timeline[dir='rtl'] .next-timeline-item-process.next-timeline-item-has-left-content > .next-timeline-item-timeline { + margin-right: 80px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-process.next-timeline-item-has-left-content > .next-timeline-item-content { + margin-right: 108px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-dot { + background: #5584FF; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-icon { + background: #5584FF; + color: #FFFFFF; } + +.next-timeline[dir='rtl'] .next-timeline-item-success { + position: relative; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-timeline { + position: absolute; + left: auto; + right: 0; + top: 0; + height: 100%; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-node { + position: relative; + width: 16px; + height: 24px; + padding: 4px 0; + text-align: center; + float: right; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom { + width: 40px; + height: auto; + font-size: 12px; + word-break: break-all; + margin-right: calc(-12px); + margin-left: 0; + line-height: 1; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-dot { + display: block; + position: absolute; + width: 8px; + height: 8px; + border-radius: 100%; + top: 50%; + margin-top: -4px; + left: 50%; + margin-left: -4px; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-icon { + display: block; + position: absolute; + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 100%; + top: 50%; + left: 50%; + margin-top: -8px; + margin-left: -8px; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-tail { + position: absolute; + width: auto; + height: calc(100% - 24px); + top: 24px; + left: auto; + right: 8px; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-tail i { + display: inline-block; + vertical-align: top; + height: 100%; + width: 1px; + position: relative; + background: #DCDEE3; + -webkit-transition: all .4s ease; + transition: all .4s ease; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-content { + display: inline-block; + margin-right: 28px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-content .next-timeline-item-title { + margin: 0; + font-size: 12px; + font-weight: bold; + line-height: 16px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #333333; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-content .next-timeline-item-body { + margin: 0; + margin-top: 8px; + font-size: 12px; + line-height: 16px; + color: #666666; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-content .next-timeline-item-time { + margin: 0; + margin-top: 4px; + margin-bottom: 12px; + font-size: 12px; + color: #999999; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-success.next-timeline-item-has-left-content > .next-timeline-item-left-content { + position: absolute; + width: 80px; + display: inline-block; + font-size: 12px; + color: #999999; + line-height: 16px; + margin-top: 4px; + text-align: left; + padding-left: 12px; + padding-right: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-success.next-timeline-item-has-left-content > .next-timeline-item-left-content p { + word-break: break-word; } + .next-timeline[dir='rtl'] .next-timeline-item-success.next-timeline-item-has-left-content > .next-timeline-item-timeline { + margin-right: 80px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-success.next-timeline-item-has-left-content > .next-timeline-item-content { + margin-right: 108px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-dot { + background: #46BC15; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-icon { + background: #46BC15; + color: #FFFFFF; } + +.next-timeline[dir='rtl'] .next-timeline-item-error { + position: relative; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-timeline { + position: absolute; + left: auto; + right: 0; + top: 0; + height: 100%; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-node { + position: relative; + width: 16px; + height: 24px; + padding: 4px 0; + text-align: center; + float: right; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom { + width: 40px; + height: auto; + font-size: 12px; + word-break: break-all; + margin-right: calc(-12px); + margin-left: 0; + line-height: 1; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-dot { + display: block; + position: absolute; + width: 8px; + height: 8px; + border-radius: 100%; + top: 50%; + margin-top: -4px; + left: 50%; + margin-left: -4px; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-icon { + display: block; + position: absolute; + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 100%; + top: 50%; + left: 50%; + margin-top: -8px; + margin-left: -8px; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-tail { + position: absolute; + width: auto; + height: calc(100% - 24px); + top: 24px; + left: auto; + right: 8px; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-tail i { + display: inline-block; + vertical-align: top; + height: 100%; + width: 1px; + position: relative; + background: #DCDEE3; + -webkit-transition: all .4s ease; + transition: all .4s ease; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-content { + display: inline-block; + margin-right: 28px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-content .next-timeline-item-title { + margin: 0; + font-size: 12px; + font-weight: bold; + line-height: 16px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #333333; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-content .next-timeline-item-body { + margin: 0; + margin-top: 8px; + font-size: 12px; + line-height: 16px; + color: #666666; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-content .next-timeline-item-time { + margin: 0; + margin-top: 4px; + margin-bottom: 12px; + font-size: 12px; + color: #999999; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-error.next-timeline-item-has-left-content > .next-timeline-item-left-content { + position: absolute; + width: 80px; + display: inline-block; + font-size: 12px; + color: #999999; + line-height: 16px; + margin-top: 4px; + text-align: left; + padding-left: 12px; + padding-right: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-error.next-timeline-item-has-left-content > .next-timeline-item-left-content p { + word-break: break-word; } + .next-timeline[dir='rtl'] .next-timeline-item-error.next-timeline-item-has-left-content > .next-timeline-item-timeline { + margin-right: 80px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-error.next-timeline-item-has-left-content > .next-timeline-item-content { + margin-right: 108px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-dot { + background: #FF3000; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-icon { + background: #FF3000; + color: #FFFFFF; } + +.next-timeline { + margin: 0; + padding: 0; + list-style: none; } + .next-timeline > li { + outline: 0; } + +.next-timeline-item { + /* 时间轴左边存在内容的情况 */ } + .next-timeline-item-folder { + padding-left: 28px; + padding-top: 4px; + padding-bottom: 4px; + font-size: 12px; + line-height: 16px; + position: relative; + /* min-height: auto !important; */ } + .next-timeline-item-dot-tail { + position: absolute; + top: 0; + left: 8px; + height: 100%; + border-top: 0; + border-bottom: 0; + border-right: 0; + border-left: 1px dotted #DCDEE3; } + .next-timeline-item-dot-tail-solid { + border-style: solid; } + .next-timeline-item-has-left-content.next-timeline-item-folder { + margin-left: 80px; } + +.next-timeline-item-done { + position: relative; } + .next-timeline-item-done .next-timeline-item-timeline { + position: absolute; + left: 0; + top: 0; + height: 100%; } + .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-node { + position: relative; + width: 16px; + height: 24px; + padding: 4px 0; + text-align: center; + float: left; } + .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom { + width: 40px; + height: auto; + font-size: 12px; + word-break: break-all; + margin-left: calc(-12px); + line-height: 1; } + .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-dot { + display: block; + position: absolute; + width: 8px; + height: 8px; + border-radius: 100%; + top: 50%; + margin-top: -4px; + left: 50%; + margin-left: -4px; } + .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-icon { + display: block; + position: absolute; + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 100%; + top: 50%; + left: 50%; + margin-top: -8px; + margin-left: -8px; } + .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-tail { + position: absolute; + width: auto; + height: calc(100% - 24px); + top: 24px; + left: 8px; } + .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-tail i { + display: inline-block; + vertical-align: top; + height: 100%; + width: 1px; + position: relative; + background: #DCDEE3; + -webkit-transition: all .4s ease; + transition: all .4s ease; } + .next-timeline-item-done .next-timeline-item-content { + display: inline-block; + margin-left: 28px; } + .next-timeline-item-done .next-timeline-item-content .next-timeline-item-title { + margin: 0; + font-size: 12px; + font-weight: bold; + line-height: 16px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #333333; + text-align: left; } + .next-timeline-item-done .next-timeline-item-content .next-timeline-item-body { + margin: 0; + margin-top: 8px; + font-size: 12px; + line-height: 16px; + color: #666666; + text-align: left; } + .next-timeline-item-done .next-timeline-item-content .next-timeline-item-time { + margin: 0; + margin-top: 4px; + margin-bottom: 12px; + font-size: 12px; + color: #999999; + text-align: left; } + .next-timeline-item-done.next-timeline-item-has-left-content > .next-timeline-item-left-content { + position: absolute; + width: 80px; + display: inline-block; + font-size: 12px; + color: #999999; + line-height: 16px; + margin-top: 4px; + text-align: right; + padding-right: 12px; } + .next-timeline-item-done.next-timeline-item-has-left-content > .next-timeline-item-left-content p { + word-break: break-word; } + .next-timeline-item-done.next-timeline-item-has-left-content > .next-timeline-item-timeline { + margin-left: 80px; } + .next-timeline-item-done.next-timeline-item-has-left-content > .next-timeline-item-content { + margin-left: 108px; } + .next-timeline-item-done .next-timeline-item-dot { + background: #C4C6CF; } + .next-timeline-item-done .next-timeline-item-icon { + background: #C4C6CF; + color: #FFFFFF; } + +.next-timeline-item-process { + position: relative; } + .next-timeline-item-process .next-timeline-item-timeline { + position: absolute; + left: 0; + top: 0; + height: 100%; } + .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-node { + position: relative; + width: 16px; + height: 24px; + padding: 4px 0; + text-align: center; + float: left; } + .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom { + width: 40px; + height: auto; + font-size: 12px; + word-break: break-all; + margin-left: calc(-12px); + line-height: 1; } + .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-dot { + display: block; + position: absolute; + width: 8px; + height: 8px; + border-radius: 100%; + top: 50%; + margin-top: -4px; + left: 50%; + margin-left: -4px; } + .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-icon { + display: block; + position: absolute; + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 100%; + top: 50%; + left: 50%; + margin-top: -8px; + margin-left: -8px; } + .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-tail { + position: absolute; + width: auto; + height: calc(100% - 24px); + top: 24px; + left: 8px; } + .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-tail i { + display: inline-block; + vertical-align: top; + height: 100%; + width: 1px; + position: relative; + background: #DCDEE3; + -webkit-transition: all .4s ease; + transition: all .4s ease; } + .next-timeline-item-process .next-timeline-item-content { + display: inline-block; + margin-left: 28px; } + .next-timeline-item-process .next-timeline-item-content .next-timeline-item-title { + margin: 0; + font-size: 12px; + font-weight: bold; + line-height: 16px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #333333; + text-align: left; } + .next-timeline-item-process .next-timeline-item-content .next-timeline-item-body { + margin: 0; + margin-top: 8px; + font-size: 12px; + line-height: 16px; + color: #666666; + text-align: left; } + .next-timeline-item-process .next-timeline-item-content .next-timeline-item-time { + margin: 0; + margin-top: 4px; + margin-bottom: 12px; + font-size: 12px; + color: #999999; + text-align: left; } + .next-timeline-item-process.next-timeline-item-has-left-content > .next-timeline-item-left-content { + position: absolute; + width: 80px; + display: inline-block; + font-size: 12px; + color: #999999; + line-height: 16px; + margin-top: 4px; + text-align: right; + padding-right: 12px; } + .next-timeline-item-process.next-timeline-item-has-left-content > .next-timeline-item-left-content p { + word-break: break-word; } + .next-timeline-item-process.next-timeline-item-has-left-content > .next-timeline-item-timeline { + margin-left: 80px; } + .next-timeline-item-process.next-timeline-item-has-left-content > .next-timeline-item-content { + margin-left: 108px; } + .next-timeline-item-process .next-timeline-item-dot { + background: #5584FF; } + .next-timeline-item-process .next-timeline-item-icon { + background: #5584FF; + color: #FFFFFF; } + +.next-timeline-item-success { + position: relative; } + .next-timeline-item-success .next-timeline-item-timeline { + position: absolute; + left: 0; + top: 0; + height: 100%; } + .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-node { + position: relative; + width: 16px; + height: 24px; + padding: 4px 0; + text-align: center; + float: left; } + .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom { + width: 40px; + height: auto; + font-size: 12px; + word-break: break-all; + margin-left: calc(-12px); + line-height: 1; } + .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-dot { + display: block; + position: absolute; + width: 8px; + height: 8px; + border-radius: 100%; + top: 50%; + margin-top: -4px; + left: 50%; + margin-left: -4px; } + .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-icon { + display: block; + position: absolute; + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 100%; + top: 50%; + left: 50%; + margin-top: -8px; + margin-left: -8px; } + .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-tail { + position: absolute; + width: auto; + height: calc(100% - 24px); + top: 24px; + left: 8px; } + .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-tail i { + display: inline-block; + vertical-align: top; + height: 100%; + width: 1px; + position: relative; + background: #DCDEE3; + -webkit-transition: all .4s ease; + transition: all .4s ease; } + .next-timeline-item-success .next-timeline-item-content { + display: inline-block; + margin-left: 28px; } + .next-timeline-item-success .next-timeline-item-content .next-timeline-item-title { + margin: 0; + font-size: 12px; + font-weight: bold; + line-height: 16px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #333333; + text-align: left; } + .next-timeline-item-success .next-timeline-item-content .next-timeline-item-body { + margin: 0; + margin-top: 8px; + font-size: 12px; + line-height: 16px; + color: #666666; + text-align: left; } + .next-timeline-item-success .next-timeline-item-content .next-timeline-item-time { + margin: 0; + margin-top: 4px; + margin-bottom: 12px; + font-size: 12px; + color: #999999; + text-align: left; } + .next-timeline-item-success.next-timeline-item-has-left-content > .next-timeline-item-left-content { + position: absolute; + width: 80px; + display: inline-block; + font-size: 12px; + color: #999999; + line-height: 16px; + margin-top: 4px; + text-align: right; + padding-right: 12px; } + .next-timeline-item-success.next-timeline-item-has-left-content > .next-timeline-item-left-content p { + word-break: break-word; } + .next-timeline-item-success.next-timeline-item-has-left-content > .next-timeline-item-timeline { + margin-left: 80px; } + .next-timeline-item-success.next-timeline-item-has-left-content > .next-timeline-item-content { + margin-left: 108px; } + .next-timeline-item-success .next-timeline-item-dot { + background: #46BC15; } + .next-timeline-item-success .next-timeline-item-icon { + background: #46BC15; + color: #FFFFFF; } + +.next-timeline-item-error { + position: relative; } + .next-timeline-item-error .next-timeline-item-timeline { + position: absolute; + left: 0; + top: 0; + height: 100%; } + .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-node { + position: relative; + width: 16px; + height: 24px; + padding: 4px 0; + text-align: center; + float: left; } + .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom { + width: 40px; + height: auto; + font-size: 12px; + word-break: break-all; + margin-left: calc(-12px); + line-height: 1; } + .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-dot { + display: block; + position: absolute; + width: 8px; + height: 8px; + border-radius: 100%; + top: 50%; + margin-top: -4px; + left: 50%; + margin-left: -4px; } + .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-icon { + display: block; + position: absolute; + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 100%; + top: 50%; + left: 50%; + margin-top: -8px; + margin-left: -8px; } + .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-tail { + position: absolute; + width: auto; + height: calc(100% - 24px); + top: 24px; + left: 8px; } + .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-tail i { + display: inline-block; + vertical-align: top; + height: 100%; + width: 1px; + position: relative; + background: #DCDEE3; + -webkit-transition: all .4s ease; + transition: all .4s ease; } + .next-timeline-item-error .next-timeline-item-content { + display: inline-block; + margin-left: 28px; } + .next-timeline-item-error .next-timeline-item-content .next-timeline-item-title { + margin: 0; + font-size: 12px; + font-weight: bold; + line-height: 16px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #333333; + text-align: left; } + .next-timeline-item-error .next-timeline-item-content .next-timeline-item-body { + margin: 0; + margin-top: 8px; + font-size: 12px; + line-height: 16px; + color: #666666; + text-align: left; } + .next-timeline-item-error .next-timeline-item-content .next-timeline-item-time { + margin: 0; + margin-top: 4px; + margin-bottom: 12px; + font-size: 12px; + color: #999999; + text-align: left; } + .next-timeline-item-error.next-timeline-item-has-left-content > .next-timeline-item-left-content { + position: absolute; + width: 80px; + display: inline-block; + font-size: 12px; + color: #999999; + line-height: 16px; + margin-top: 4px; + text-align: right; + padding-right: 12px; } + .next-timeline-item-error.next-timeline-item-has-left-content > .next-timeline-item-left-content p { + word-break: break-word; } + .next-timeline-item-error.next-timeline-item-has-left-content > .next-timeline-item-timeline { + margin-left: 80px; } + .next-timeline-item-error.next-timeline-item-has-left-content > .next-timeline-item-content { + margin-left: 108px; } + .next-timeline-item-error .next-timeline-item-dot { + background: #FF3000; } + .next-timeline-item-error .next-timeline-item-icon { + background: #FF3000; + color: #FFFFFF; } + +.next-timeline-item-last .next-timeline-item-tail { + display: none; } + +.next-timeline-item-has-left-content { + min-height: 48px; } + +.next-timeline-item-folder.next-timeline-item-has-left-content { + min-height: auto; } + +.next-transfer { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; } + .next-transfer *, + .next-transfer *:before, + .next-transfer *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-transfer-panel { + display: inline-block; + border: 1px solid #DCDEE3; + border-radius: 3px; + background-color: #FFFFFF; + vertical-align: middle; + overflow: hidden; } + .next-transfer-panel-header { + padding: 8px 20px; + border-bottom: 1px solid #DCDEE3; + background-color: #F7F8FA; + color: #333333; + font-size: 12px; } + .next-transfer-panel-search { + padding: 0 4px; + margin-top: 8px; + margin-bottom: 0; + width: 100%; } + .next-transfer .next-transfer-panel-list { + width: 180px; + /* TODO */ + height: 160px; + padding: 0; + border: none; + -webkit-box-shadow: none; + box-shadow: none; + border-radius: 0; + overflow-y: auto; } + .next-transfer-panel-not-found-container { + display: table; + width: 100%; + height: 100%; } + .next-transfer-panel-not-found { + display: table-cell; + vertical-align: middle; + text-align: center; + color: #999999; + font-size: 14px; } + .next-transfer-panel-item.next-focused { + -webkit-transition: background-color .2s ease; + transition: background-color .2s ease; } + .next-transfer-panel-item:not(.next-disabled).next-simple:hover { + color: #5584FF; } + .next-transfer-panel-item.next-insert-before:before { + position: absolute; + top: 0; + left: 0; + content: ''; + width: 100%; + border-top: 1px solid #5584FF; } + .next-transfer-panel-item.next-insert-after:after { + position: absolute; + left: 0; + bottom: 0; + content: ''; + width: 100%; + border-bottom: 1px solid #5584FF; } + .next-transfer-panel-footer { + padding: 8px 20px; + border-top: 1px solid #DCDEE3; + background-color: #FFFFFF; + font-size: 0; } + .next-transfer-panel-count { + /* TODO */ + margin-left: 4px; + font-size: 12px; + vertical-align: middle; + color: #333333; } + .next-transfer-panel-move-all { + font-size: 12px; + color: #5584FF; + cursor: pointer; } + .next-transfer-panel-move-all.next-disabled { + color: #CCCCCC; + cursor: not-allowed; } + .next-transfer-operations { + display: inline-block; + vertical-align: middle; + margin: 0 20px; } + .next-transfer-move.next-icon { + color: #C4C6CF; } + .next-transfer-operation.next-btn { + display: block; } + .next-transfer-operation.next-btn + .next-transfer-operation.next-btn { + margin-top: 8px; } + .next-transfer-operation.next-btn .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-tree { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-tree *, + .next-tree *:before, + .next-tree *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-tree, .next-tree-child-tree { + margin: 0; + padding: 0; + list-style: none; } + .next-tree-node { + white-space: nowrap; } + .next-tree-node-inner { + font-size: 0; + outline: none; } + .next-tree-node-label-wrapper { + display: inline-block; + margin: 0 4px; + vertical-align: middle; } + .next-tree-node-label { + height: 20px; + line-height: 20px; + padding: 0 4px; + border-radius: 3px; + font-size: 12px; } + .next-tree-node-input.next-input { + margin: 0 4px; } + .next-tree-switcher { + position: relative; + display: inline-block; + vertical-align: middle; + margin-right: 8px; } + .next-tree-switcher.next-noline { + width: 12px; + height: 12px; + line-height: 12px; + cursor: pointer; } + .next-tree-switcher.next-noline .next-tree-switcher-icon { + -webkit-transition: -webkit-transform cubic-bezier(0.23, 1, 0.32, 1) 300ms; + transition: -webkit-transform cubic-bezier(0.23, 1, 0.32, 1) 300ms; + transition: transform cubic-bezier(0.23, 1, 0.32, 1) 300ms; + transition: transform cubic-bezier(0.23, 1, 0.32, 1) 300ms, -webkit-transform cubic-bezier(0.23, 1, 0.32, 1) 300ms; + color: #999999; } + .next-tree-switcher.next-noline .next-tree-switcher-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-tree-switcher.next-noline.next-close .next-tree-switcher-icon { + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); } + .next-tree-switcher.next-noline.next-close .next-tree-switcher-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-tree-switcher.next-noline:not(.next-disabled):hover .next-tree-switcher-icon { + color: #333333; } + .next-tree-switcher.next-noline.next-disabled { + cursor: not-allowed; } + .next-tree-switcher.next-noline.next-disabled .next-tree-switcher-icon { + color: #CCCCCC; } + .next-tree-switcher.next-noop-noline { + width: 12px; + height: 12px; } + .next-tree-switcher.next-line { + width: 16px; + height: 16px; + line-height: 14px; + border: 1px solid #C4C6CF; + border-radius: 3px; + background-color: #FFFFFF; + cursor: pointer; } + .next-tree-switcher.next-line .next-tree-switcher-icon { + margin-left: 3px; + color: #666666; } + .next-tree-switcher.next-line .next-tree-switcher-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-tree-switcher.next-line .next-tree-switcher-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -1px; + margin-right: -4px; } + .next-tree-switcher.next-line .next-tree-switcher-icon:before { + width: 16px; + font-size: 16px; } } + .next-tree-switcher.next-line:not(.next-disabled):hover { + border-color: #A0A2AD; + background-color: #F2F3F7; } + .next-tree-switcher.next-line:not(.next-disabled):hover .next-tree-switcher-icon { + color: #333333; } + .next-tree-switcher.next-line.next-disabled { + border-color: #E6E7EB; + background-color: #FFFFFF; + cursor: not-allowed; } + .next-tree-switcher.next-line.next-disabled .next-tree-switcher-icon { + color: #CCCCCC; } + .next-tree-switcher.next-noop-line { + width: 16px; + height: 16px; } + .next-tree-switcher.next-noop-line-noroot { + height: 0; + border-left: 1px solid #C4C6CF; + border-bottom: 1px solid #C4C6CF; } + .next-tree-switcher.next-noop-line-noroot .next-tree-right-angle { + bottom: -1px; } + .next-tree-switcher.next-loading.next-loading-noline { + width: 12px; + height: 12px; + line-height: 12px; } + .next-tree-switcher.next-loading.next-loading-line { + width: 16px; + height: 16px; + line-height: 14px; + border: 1px solid transparent; } + .next-tree-switcher.next-loading .next-tree-switcher-icon { + color: #5584FF; } + .next-tree-switcher.next-loading .next-tree-switcher-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-tree-right-angle { + position: absolute; + bottom: 6.5px; + left: -17.5px; + display: block; + width: 16.5px; + height: 22px; + border-left: 1px solid #C4C6CF; + border-bottom: 1px solid #C4C6CF; } + .next-tree.next-label-block .next-tree-node-inner { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + outline: none; } + .next-tree.next-label-block .next-tree-node-label-wrapper { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; } + .next-tree.next-node-indent .next-tree-node .next-tree-node { + margin-left: 24px; } + .next-tree.next-node-indent .next-tree-node-inner { + padding-top: 2px; + padding-bottom: 2px; } + .next-tree.next-node-indent .next-tree-node-inner:focus .next-tree-node-label { + color: #333333; + background-color: #F2F3F7; } + .next-tree.next-node-indent .next-tree-node-label-wrapper { + border-top: 2px solid transparent; + border-bottom: 2px solid transparent; } + .next-tree.next-node-indent .next-tree-node-label { + -webkit-transition: color cubic-bezier(0.23, 1, 0.32, 1) 300ms, background-color cubic-bezier(0.23, 1, 0.32, 1) 300ms; + transition: color cubic-bezier(0.23, 1, 0.32, 1) 300ms, background-color cubic-bezier(0.23, 1, 0.32, 1) 300ms; + cursor: default; + color: #333333; + background-color: #FFFFFF; } + .next-tree.next-node-indent .next-tree-node-label-selectable { + cursor: pointer; } + .next-tree.next-node-indent .next-tree-node-label:hover { + color: #333333; + background-color: #F2F3F7; } + .next-tree.next-node-indent .next-tree-node-inner.next-selected .next-tree-node-label { + color: #333333; + background-color: #DEE8FF; } + .next-tree.next-node-indent .next-tree-node-inner.next-disabled .next-tree-node-label, + .next-tree.next-node-indent .next-tree-node-inner.next-disabled .next-tree-node-label:hover { + color: #CCCCCC; + background-color: #FFFFFF; + cursor: not-allowed; } + .next-tree.next-node-indent .next-tree-node-inner.next-drag-over .next-tree-node-label { + background-color: #5584FF; + color: #FFFFFF; + opacity: .8; } + .next-tree.next-node-indent .next-tree-node-inner.next-drag-over-gap-top .next-tree-node-label-wrapper { + border-top-color: #5584FF; } + .next-tree.next-node-indent .next-tree-node-inner.next-drag-over-gap-bottom .next-tree-node-label-wrapper { + border-bottom-color: #5584FF; } + .next-tree.next-node-block .next-tree-node-inner { + padding-top: 4px; + padding-bottom: 4px; + -webkit-transition: color cubic-bezier(0.23, 1, 0.32, 1) 300ms, background-color cubic-bezier(0.23, 1, 0.32, 1) 300ms; + transition: color cubic-bezier(0.23, 1, 0.32, 1) 300ms, background-color cubic-bezier(0.23, 1, 0.32, 1) 300ms; + cursor: pointer; + color: #333333; + background-color: #FFFFFF; } + .next-tree.next-node-block .next-tree-node-inner:hover, .next-tree.next-node-block .next-tree-node-inner:focus { + color: #333333; + background-color: #F2F3F7; } + .next-tree.next-node-block .next-tree-node-inner.next-selected { + color: #333333; + background-color: #DEE8FF; } + .next-tree.next-node-block .next-tree-node-inner.next-disabled, .next-tree.next-node-block .next-tree-node-inner.next-disabled:hover { + color: #CCCCCC; + background-color: #FFFFFF; + cursor: not-allowed; } + .next-tree.next-show-line .next-tree-node .next-tree-node:not(:last-child) { + margin-left: 7.5px; + border-left: 1px solid #C4C6CF; + padding-left: 15.5px; } + .next-tree-node.next-filtered > .next-tree-node-inner .next-tree-node-label { + color: #5584FF; } + .next-tree-node.next-filtered > .next-tree-node-inner .next-tree-node-label:hover { + color: #5584FF; } + +.next-tree[dir='rtl'] .next-tree-switcher { + margin-left: 8px; + margin-right: 0; } + +.next-tree[dir='rtl'] .next-tree-switcher.next-noop-line-noroot { + border-left: none; + border-right: 1px solid #C4C6CF; } + +.next-tree[dir='rtl'] .next-tree-right-angle { + left: auto; + right: -17.5px; + border-left: none; + border-right: 1px solid #C4C6CF; } + +.next-tree[dir='rtl'].next-show-line .next-tree-node .next-tree-node:not(:last-child) { + margin-left: 0; + margin-right: 7.5px; + border-left: none; + border-right: 1px solid #C4C6CF; + padding-left: 0; + padding-right: 15.5px; } + +.next-tree[dir='rtl'].next-node-indent .next-tree-node .next-tree-node { + margin-left: 0; + margin-right: 24px; } + +.next-tree-select { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-tree-select *, + .next-tree-select *:before, + .next-tree-select *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-tree-select-dropdown { + padding: 8px 20px; + background: #FFFFFF; + border: 1px solid #DCDEE3; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; } + .next-tree-select-not-found { + height: 16px; + font-size: 12px; + color: #999999; } + +.next-upload-list[dir=rtl].next-upload-list-text .next-upload-list-item { + padding: 4px 8px; + padding-left: 36px; } + +.next-upload-list[dir=rtl].next-upload-list-text .next-icon { + left: 12px; + right: auto; } + +.next-upload-list[dir=rtl].next-upload-list-image .next-icon-close { + float: left; + margin-left: 4px; + margin-right: 0; } + +.next-upload-list[dir=rtl].next-upload-list-image .next-upload-list-item-thumbnail { + float: right; + margin-left: 8px; + margin-right: 0; } + +.next-upload-list[dir=rtl].next-upload-list-image .next-upload-list-item-progress { + margin-right: 56px; + margin-left: 20px; } + +.next-upload { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-upload *, + .next-upload *:before, + .next-upload *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-upload-inner { + outline: 0; + display: inline-block; } + .next-upload-inner.next-hidden { + display: none; } + .next-upload-list { + overflow: hidden; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-upload-list *, + .next-upload-list *:before, + .next-upload-list *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-upload-list-item { + position: relative; } + .next-upload-list-item.next-hidden { + display: none; } + .next-upload-list-item-name { + text-decoration: none; } + .next-upload.next-disabled { + border-color: #E6E7EB !important; + color: #CCCCCC !important; } + .next-upload.next-disabled .next-icon-close { + cursor: not-allowed !important; } + .next-upload.next-disabled .next-upload-inner * { + color: #CCCCCC !important; + border-color: #E6E7EB !important; + cursor: not-allowed !important; } + +.next-upload-list-text .next-upload-list-item { + background-color: #F2F3F7; + padding: 4px 8px; + padding-right: 36px; + height: 40px; + line-height: 32px; + font-size: 12px; + overflow: hidden; + -webkit-transition: all .2s ease-out; + transition: all .2s ease-out; } + .next-upload-list-text .next-upload-list-item:not(:last-child) { + margin-bottom: 4px; } + .next-upload-list-text .next-upload-list-item .next-icon { + position: absolute; + top: 0; + right: 12px; + color: #999999; + cursor: pointer; + text-align: center; + -webkit-transition: all .2s ease-out; + transition: all .2s ease-out; + line-height: 40px; } + .next-upload-list-text .next-upload-list-item .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-upload-list-text .next-upload-list-item:hover { + background-color: #F2F3F7; } + .next-upload-list-text .next-upload-list-item:hover .next-icon { + color: #666666; } + .next-upload-list-text .next-upload-list-item-name-wrap { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + margin-right: 4px; } + .next-upload-list-text .next-upload-list-item-name { + color: #333333; + -webkit-transition: all .2s ease-out; + transition: all .2s ease-out; } + .next-upload-list-text .next-upload-list-item-size { + color: #999999; + margin-left: 8px; } + .next-upload-list-text .next-upload-list-item-uploading { + line-height: 16px; } + .next-upload-list-text .next-upload-list-item-done { + line-height: 32px; } + .next-upload-list-text .next-upload-list-item-done:hover .next-upload-list-item-name { + color: #5584FF; } + .next-upload-list-text .next-upload-list-item-done:hover .next-upload-list-item-size { + color: #5584FF; } + .next-upload-list-text .next-upload-list-item-error { + /* stylelint-disable declaration-no-important */ + background-color: #FFECE4 !important; } + .next-upload-list-text .next-upload-list-item-error.next-upload-list-item-error-with-msg { + line-height: 16px; } + .next-upload-list-text .next-upload-list-item-error-msg { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + color: #FF3000; } + +.next-upload-list-image .next-upload-list-item { + -webkit-box-sizing: content-box; + box-sizing: content-box; + border: 1px solid #DCDEE3; + background-color: #FFFFFF; + padding: 8px; + height: 48px; + line-height: 48px; + font-size: 12px; + -webkit-transition: all .2s ease-out; + transition: all .2s ease-out; + overflow: hidden; } + .next-upload-list-image .next-upload-list-item:not(:last-child) { + margin-bottom: 4px; } + .next-upload-list-image .next-upload-list-item:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + .next-upload-list-image .next-upload-list-item .next-icon-close { + float: right; + margin-right: 4px; + cursor: pointer; + color: #999999; + text-align: center; } + .next-upload-list-image .next-upload-list-item .next-icon-close:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-upload-list-image .next-upload-list-item:hover { + border-color: #5584FF; } + .next-upload-list-image .next-upload-list-item:hover .next-icon-close { + color: #666666; } + .next-upload-list-image .next-upload-list-item-name { + display: block; + color: #333333; + margin-left: 56px; + margin-right: 20px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + -webkit-transition: all .2s ease-out; + transition: all .2s ease-out; } + .next-upload-list-image .next-upload-list-item-size { + color: #999999; + margin-left: 8px; } + .next-upload-list-image .next-upload-list-item-progress { + line-height: 24px; } + .next-upload-list-image .next-upload-list-item-done:hover .next-upload-list-item-name { + color: #5584FF; } + .next-upload-list-image .next-upload-list-item-done:hover .next-upload-list-item-size { + color: #5584FF; } + .next-upload-list-image .next-upload-list-item-thumbnail { + float: left; + width: 48px; + height: 48px; + color: #CCCCCC; + border: 1px solid #DCDEE3; + background-color: #F2F3F7; + margin-right: 8px; + vertical-align: middle; + text-align: center; + overflow: hidden; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-upload-list-image .next-upload-list-item-thumbnail img { + width: 100%; + height: 100%; } + .next-upload-list-image .next-upload-list-item-thumbnail .next-icon { + display: block; + margin: 0; + line-height: 48px; } + .next-upload-list-image .next-upload-list-item-thumbnail .next-icon:before { + width: 24px; + font-size: 24px; + line-height: inherit; } + .next-upload-list-image .next-upload-list-item-error { + border-color: #FF3000 !important; + background-color: #FFFFFF; } + .next-upload-list-image .next-upload-list-item-uploading { + background-color: #FFFFFF; } + .next-upload-list-image .next-upload-list-item-uploading .next-upload-list-item-name { + height: 24px; + line-height: 24px; } + .next-upload-list-image .next-upload-list-item-uploading .next-upload-list-item-progress { + margin-left: 56px; + margin-right: 20px; + height: 24px; + line-height: 24px; } + .next-upload-list-image .next-upload-list-item-error-with-msg .next-upload-list-item-name, + .next-upload-list-image .next-upload-list-item-error-with-msg .next-upload-list-item-error-msg { + height: 24px; + line-height: 24px; } + .next-upload-list-image .next-upload-list-item-error-with-msg .next-upload-list-item-error-msg { + margin-left: 56px; + margin-right: 20px; + color: #FF3000; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } + +.next-upload-list-card { + display: inline-block; } + .next-upload-list-card .next-upload-list-item { + vertical-align: middle; + float: left; } + .next-upload-list-card .next-upload-list-item:not(:last-child) { + margin-right: 12px; } + .next-upload-list-card .next-upload-list-item-wrapper { + position: relative; + border: 1px solid #C4C6CF; + width: 100px; + height: 100px; + padding: 0; + background-color: transparent; } + .next-upload-list-card .next-upload-list-item-thumbnail { + display: table; + text-align: center; + vertical-align: middle; + width: 100%; + height: 100%; + color: #CCCCCC; + font-size: 12px; } + .next-upload-list-card .next-upload-list-item-thumbnail img { + width: 100%; + height: 100%; } + .next-upload-list-card .next-upload-list-item-thumbnail img:focus { + outline: 0; } + .next-upload-list-card .next-upload-list-item-thumbnail .next-icon { + width: 100%; } + .next-upload-list-card .next-upload-list-item-thumbnail .next-icon:before { + width: 48px; + font-size: 48px; + line-height: inherit; } + .next-upload-list-card .next-upload-list-item-handler { + display: table-cell; + width: 100%; + vertical-align: middle; } + .next-upload-list-card .next-upload-list-item-name { + display: block; + width: 100px; + text-align: center; + margin-top: 4px; + font-size: 12px; + color: #666666; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } + .next-upload-list-card .next-upload-list-item-progress { + position: absolute; + font-size: 0; + bottom: 0; + left: 0; + width: 100%; } + .next-upload-list-card .next-upload-list-item-progress .next-progress-line-underlay { + border-radius: 0; } + .next-upload-list-card .next-upload-list-item-progress .next-progress-line-overlay { + border-radius: 0; } + .next-upload-list-card .next-upload-list-item-uploading .next-upload-list-item-wrapper { + background-color: #F7F8FA; } + .next-upload-list-card .next-upload-list-item:hover .next-upload-tool { + opacity: .8; } + .next-upload-list-card .next-upload-list-item .next-upload-tool { + position: absolute; + z-index: 1; + background-color: rgba(0, 0, 0, 0.7); + -webkit-transition: all .3s ease; + transition: all .3s ease; + opacity: 0; + width: 100%; + height: 28px; + left: 0; + bottom: 0; } + .next-upload-list-card .next-upload-list-item .next-upload-tool .next-icon { + width: 49%; + text-align: center; + line-height: 28px; + color: #FFFFFF; } + .next-upload-list-card .next-upload-list-item .next-upload-tool .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-upload-list-card .next-upload-list-item .next-upload-tool.next-noclose .next-icon { + width: 100%; } + .next-upload-list-card .next-upload-list-item .next-upload-tool-close { + cursor: pointer; } + .next-upload-list-card .next-upload-list-item .next-upload-tool-download-icon { + border-right: 1px solid #FFFFFF; } + .next-upload-list-card .next-upload-list-item-error .next-upload-list-item-wrapper { + border-color: #FF3000; } + +.next-upload-card { + border: 1px dashed #C4C6CF; + width: 100px; + height: 100px; + background-color: #FFFFFF; + text-align: center; + cursor: pointer; + -webkit-transition: border-color .3s ease; + transition: border-color .3s ease; + display: table-cell; + vertical-align: middle; } + .next-upload-card .next-icon { + color: #C4C6CF; } + .next-upload-card .next-icon:before { + width: 24px; + font-size: 24px; + line-height: inherit; } + .next-upload-card .next-upload-text { + font-size: 12px; + margin-top: 12px; + color: #666666; } + .next-upload-card:hover { + border-color: #5584FF; } + .next-upload-card:hover .next-icon { + color: #5584FF; } + .next-upload-card:hover .next-upload-text { + color: #5584FF; } + +.next-upload-dragable .next-upload-inner { + display: block; } + +.next-upload-dragable .next-upload-drag { + border: 1px dashed #C4C6CF; + -webkit-transition: border-color .3s ease; + transition: border-color .3s ease; + cursor: pointer; + border-radius: 3px; + background-color: transparent; + text-align: center; + margin-bottom: 4px; } + .next-upload-dragable .next-upload-drag-icon { + margin: 20px 0 0; + color: #666666; } + .next-upload-dragable .next-upload-drag-icon .next-upload-drag-upload-icon::before { + content: "\E7EE"; } + .next-upload-dragable .next-upload-drag-text { + margin: 12px 0 0; + font-size: 14px; + color: #666666; } + .next-upload-dragable .next-upload-drag-hint { + margin: 4px 0 20px; + font-size: 12px; + color: #999999; } + .next-upload-dragable .next-upload-drag-over { + border-color: #5584FF; } diff --git a/dist/next-noreset-1.css b/dist/next-noreset-1.css new file mode 100644 index 0000000000..a86bc9225f --- /dev/null +++ b/dist/next-noreset-1.css @@ -0,0 +1,12454 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@charset "UTF-8"; +/* stylelint-disable-next-line */ +@-webkit-keyframes fadeIn { + 0% { + opacity: 0; } + 100% { + opacity: 1; } } + +@keyframes fadeIn { + 0% { + opacity: 0; } + 100% { + opacity: 1; } } + +@-webkit-keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-100px); + -ms-transform: translateY(-100px); + transform: translateY(-100px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } } + +@keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-100px); + -ms-transform: translateY(-100px); + transform: translateY(-100px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } } + +@-webkit-keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-20px); + -ms-transform: translateX(-20px); + transform: translateX(-20px); } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } } + +@keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-20px); + -ms-transform: translateX(-20px); + transform: translateX(-20px); } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } } + +@-webkit-keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(20px); + -ms-transform: translateX(20px); + transform: translateX(20px); } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } } + +@keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(20px); + -ms-transform: translateX(20px); + transform: translateX(20px); } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } } + +@-webkit-keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } } + +@keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } } + +@-webkit-keyframes fadeOut { + 0% { + opacity: 1; } + 100% { + opacity: 0; } } + +@keyframes fadeOut { + 0% { + opacity: 1; } + 100% { + opacity: 0; } } + +@-webkit-keyframes fadeOutDown { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } + 100% { + opacity: 0; + -webkit-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); } } + +@keyframes fadeOutDown { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } + 100% { + opacity: 0; + -webkit-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); } } + +@-webkit-keyframes fadeOutLeft { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } + 100% { + opacity: 0; + -webkit-transform: translateX(-20px); + -ms-transform: translateX(-20px); + transform: translateX(-20px); } } + +@keyframes fadeOutLeft { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } + 100% { + opacity: 0; + -webkit-transform: translateX(-20px); + -ms-transform: translateX(-20px); + transform: translateX(-20px); } } + +@-webkit-keyframes fadeOutRight { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } + 100% { + opacity: 0; + -webkit-transform: translateX(20px); + -ms-transform: translateX(20px); + transform: translateX(20px); } } + +@keyframes fadeOutRight { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } + 100% { + opacity: 0; + -webkit-transform: translateX(20px); + -ms-transform: translateX(20px); + transform: translateX(20px); } } + +@-webkit-keyframes fadeOutUp { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } + 100% { + opacity: 0; + -webkit-transform: translateY(-100px); + -ms-transform: translateY(-100px); + transform: translateY(-100px); } } + +@keyframes fadeOutUp { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } + 100% { + opacity: 0; + -webkit-transform: translateY(-100px); + -ms-transform: translateY(-100px); + transform: translateY(-100px); } } + +@-webkit-keyframes zoomIn { + 0% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + -ms-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } + 50% { + opacity: 1; } } + +@keyframes zoomIn { + 0% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + -ms-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } + 50% { + opacity: 1; } } + +@-webkit-keyframes zoomOut { + 0% { + opacity: 1; } + 50% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + -ms-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } + 100% { + opacity: 0; } } + +@keyframes zoomOut { + 0% { + opacity: 1; } + 50% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + -ms-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } + 100% { + opacity: 0; } } + +@-webkit-keyframes expandInDown { + 0% { + opacity: 0; + -webkit-transform: scaleY(0.6); + -ms-transform: scaleY(0.6); + transform: scaleY(0.6); + -webkit-transform-origin: left top 0; + -ms-transform-origin: left top 0; + transform-origin: left top 0; } + 100% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: left top 0; + -ms-transform-origin: left top 0; + transform-origin: left top 0; } } + +@keyframes expandInDown { + 0% { + opacity: 0; + -webkit-transform: scaleY(0.6); + -ms-transform: scaleY(0.6); + transform: scaleY(0.6); + -webkit-transform-origin: left top 0; + -ms-transform-origin: left top 0; + transform-origin: left top 0; } + 100% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: left top 0; + -ms-transform-origin: left top 0; + transform-origin: left top 0; } } + +@-webkit-keyframes expandInUp { + 0% { + opacity: 0; + -webkit-transform: scaleY(0.6); + -ms-transform: scaleY(0.6); + transform: scaleY(0.6); + -webkit-transform-origin: left bottom 0; + -ms-transform-origin: left bottom 0; + transform-origin: left bottom 0; } + 100% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: left bottom 0; + -ms-transform-origin: left bottom 0; + transform-origin: left bottom 0; } } + +@keyframes expandInUp { + 0% { + opacity: 0; + -webkit-transform: scaleY(0.6); + -ms-transform: scaleY(0.6); + transform: scaleY(0.6); + -webkit-transform-origin: left bottom 0; + -ms-transform-origin: left bottom 0; + transform-origin: left bottom 0; } + 100% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: left bottom 0; + -ms-transform-origin: left bottom 0; + transform-origin: left bottom 0; } } + +@-webkit-keyframes expandInWithFade { + 0% { + opacity: 0; } + 40% { + opacity: .1; } + 50% { + opacity: .9; } + 100% { + opacity: 1; } } + +@keyframes expandInWithFade { + 0% { + opacity: 0; } + 40% { + opacity: .1; } + 50% { + opacity: .9; } + 100% { + opacity: 1; } } + +@-webkit-keyframes expandOutUp { + 0% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: left top 0; + -ms-transform-origin: left top 0; + transform-origin: left top 0; } + 100% { + opacity: 0; + -webkit-transform: scaleY(0.6); + -ms-transform: scaleY(0.6); + transform: scaleY(0.6); + -webkit-transform-origin: left top 0; + -ms-transform-origin: left top 0; + transform-origin: left top 0; } } + +@keyframes expandOutUp { + 0% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: left top 0; + -ms-transform-origin: left top 0; + transform-origin: left top 0; } + 100% { + opacity: 0; + -webkit-transform: scaleY(0.6); + -ms-transform: scaleY(0.6); + transform: scaleY(0.6); + -webkit-transform-origin: left top 0; + -ms-transform-origin: left top 0; + transform-origin: left top 0; } } + +@-webkit-keyframes expandOutDown { + 0% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: left bottom 0; + -ms-transform-origin: left bottom 0; + transform-origin: left bottom 0; } + 100% { + opacity: 0; + -webkit-transform: scaleY(0.6); + -ms-transform: scaleY(0.6); + transform: scaleY(0.6); + -webkit-transform-origin: left bottom 0; + -ms-transform-origin: left bottom 0; + transform-origin: left bottom 0; } } + +@keyframes expandOutDown { + 0% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: left bottom 0; + -ms-transform-origin: left bottom 0; + transform-origin: left bottom 0; } + 100% { + opacity: 0; + -webkit-transform: scaleY(0.6); + -ms-transform: scaleY(0.6); + transform: scaleY(0.6); + -webkit-transform-origin: left bottom 0; + -ms-transform-origin: left bottom 0; + transform-origin: left bottom 0; } } + +@-webkit-keyframes expandOutWithFade { + 0% { + opacity: 1; } + 70% { + opacity: 0; } + 100% { + opacity: 0; } } + +@keyframes expandOutWithFade { + 0% { + opacity: 1; } + 70% { + opacity: 0; } + 100% { + opacity: 0; } } + +@-webkit-keyframes pulse { + from { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); } + 20% { + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); } + to { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); } } + +@keyframes pulse { + from { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); } + 20% { + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); } + to { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); } } + +.fadeIn { + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeInDown { + -webkit-animation-name: fadeInDown; + animation-name: fadeInDown; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeInLeft { + -webkit-animation-name: fadeInLeft; + animation-name: fadeInLeft; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeInRight { + -webkit-animation-name: fadeInRight; + animation-name: fadeInRight; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeInUp { + -webkit-animation-name: fadeInUp; + animation-name: fadeInUp; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeOut { + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeOutDown { + -webkit-animation-name: fadeOutDown; + animation-name: fadeOutDown; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeOutLeft { + -webkit-animation-name: fadeOutLeft; + animation-name: fadeOutLeft; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeOutRight { + -webkit-animation-name: fadeOutRight; + animation-name: fadeOutRight; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeOutUp { + -webkit-animation-name: fadeOutUp; + animation-name: fadeOutUp; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.2s; + animation-duration: 0.2s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.zoomIn { + -webkit-animation-name: zoomIn; + animation-name: zoomIn; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.zoomOut { + -webkit-animation-name: zoomOut; + animation-name: zoomOut; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.expandInDown { + -webkit-animation-name: expandInDown; + animation-name: expandInDown; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.expandOutUp { + -webkit-animation-name: expandOutUp; + animation-name: expandOutUp; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.15s; + animation-duration: 0.15s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.expandInUp { + -webkit-animation-name: expandInUp; + animation-name: expandInUp; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.expandOutDown { + -webkit-animation-name: expandOutDown; + animation-name: expandOutDown; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.15s; + animation-duration: 0.15s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.pulse { + -webkit-animation-name: pulse; + animation-name: pulse; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.expand-enter { + overflow: hidden; } + +.expand-enter-active { + -webkit-transition: all .3s ease-out; + transition: all .3s ease-out; } + .expand-enter-active > * { + -webkit-animation-name: expandInWithFade; + animation-name: expandInWithFade; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.2s; + animation-duration: 0.2s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: "forwards"; + animation-fill-mode: "forwards"; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.expand-leave { + overflow: hidden; } + +.expand-leave-active { + -webkit-transition: all .2s ease-out; + transition: all .2s ease-out; } + .expand-leave-active > * { + -webkit-animation-name: expandOutWithFade; + animation-name: expandOutWithFade; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.2s; + animation-duration: 0.2s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: "forwards"; + animation-fill-mode: "forwards"; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +/** + * 尺寸 基础尺寸 + * 命名能在语义的前提下简单就尽量简单, 这里可以是 size-2x, space-2x, size-base ... + * 不过可以在语义的前提下做的更精简一些, 于是用了s2, s1等 + * 可用变量: `$s1 - $s8` + * @example scss - 使用 + * .element { + * padding: $s1 !default; + * } + * + * @example css - CSS 输出 + * .element { + * padding: 4px !default; + * } + */ +.next-sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; + margin: -1px; } + +.next-badge { + -webkit-box-sizing: border-box; + box-sizing: border-box; + /* @include global-font; */ + position: relative; + display: inline-block; + vertical-align: middle; + line-height: 1; } + .next-badge *, + .next-badge *:before, + .next-badge *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-badge .next-badge-count { + color: #FFFFFF; + background: #FF3000; + text-align: center; + white-space: nowrap; + border-radius: 8px; + position: absolute; + width: auto; + height: 16px; + min-width: 8px; + padding: 0 4px 0 4px; + font-size: 12px; + line-height: 16px; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + top: -.5em; } + .next-badge .next-badge-count a, + .next-badge .next-badge-count a:hover { + color: #FFFFFF; } + .next-badge .next-badge-dot { + color: #FFFFFF; + background: #FF3000; + text-align: center; + white-space: nowrap; + border-radius: 8px; + position: absolute; + width: 8px; + height: 8px; + min-width: 8px; + padding: 0; + font-size: 1px; + line-height: 1; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + top: -.5em; } + .next-badge .next-badge-dot a, + .next-badge .next-badge-dot a:hover { + color: #FFFFFF; } + .next-badge .next-badge-custom { + line-height: 1.166667; + white-space: nowrap; + font-size: 12px; + padding-left: 4px; + padding-right: 4px; + border-radius: 3px; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); } + .next-badge .next-badge-custom > * { + line-height: 1; } + .next-badge .next-badge-custom > i:before, + .next-badge .next-badge-custom > .next-icon:before { + font-size: inherit; + width: auto; + vertical-align: top; } + .next-badge .next-badge-scroll-number { + position: absolute; + top: -4px; + z-index: 10; + overflow: hidden; + -webkit-transform-origin: left center; + -ms-transform-origin: left center; + transform-origin: left center; } + .next-badge-scroll-number-only { + position: relative; + display: inline-block; + transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + min-width: 8px; } + .next-badge-scroll-number-only span { + display: block; + height: 16px; + line-height: 16px; + font-size: 12px; } + .next-badge-not-a-wrapper .next-badge-count, + .next-badge-not-a-wrapper .next-badge-custom { + position: relative; + display: block; + top: auto; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } + .next-badge-not-a-wrapper .next-badge-dot { + position: relative; + display: block; + top: auto; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } + .next-badge-list-wrapper { + margin-left: 0; } + .next-badge-list-wrapper li { + margin-bottom: 0; + list-style: none; } + +.next-badge[dir="rtl"] .next-badge-custom { + padding-right: 4px; + padding-left: 4px; } + +.next-badge[dir="rtl"] .next-badge-scroll-number { + left: 0; + -webkit-transform-origin: right center; + -ms-transform-origin: right center; + transform-origin: right center; } + +.next-overlay-wrapper .next-overlay-inner { + z-index: 1001; } + +.next-overlay-wrapper .next-overlay-backdrop { + position: fixed; + z-index: 1001; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #000000; + -webkit-transition: opacity .3s; + transition: opacity .3s; + opacity: 0; } + +.next-overlay-wrapper.opened .next-overlay-backdrop { + opacity: 0.2; } + +.next-icon[dir="rtl"]::before { + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); } + +@font-face { + font-family: NextIcon; + src: url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot"); + src: url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"), url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"), url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg"); } + +.next-icon { + display: inline-block; + font-family: NextIcon; + font-style: normal; + font-weight: normal; + text-transform: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } + .next-icon:before { + display: inline-block; + vertical-align: middle; + text-align: center; } + .next-icon-smile:before { + content: "\E65F"; } + .next-icon-cry:before { + content: "\E65D"; } + .next-icon-success:before { + content: "\E60A"; } + .next-icon-warning:before { + content: "\E60B"; } + .next-icon-prompt:before { + content: "\E60C"; } + .next-icon-error:before { + content: "\E60D"; } + .next-icon-help:before { + content: "\E673"; } + .next-icon-clock:before { + content: "\E621"; } + .next-icon-success-filling:before { + content: "\E63A"; } + .next-icon-delete-filling:before { + content: "\E623"; } + .next-icon-favorites-filling:before { + content: "\E60E"; } + .next-icon-add:before { + content: "\E655"; } + .next-icon-minus:before { + content: "\E601"; } + .next-icon-arrow-up:before { + content: "\E625"; } + .next-icon-arrow-down:before { + content: "\E63D"; } + .next-icon-arrow-left:before { + content: "\E61D"; } + .next-icon-arrow-right:before { + content: "\E619"; } + .next-icon-arrow-double-left:before { + content: "\E659"; } + .next-icon-arrow-double-right:before { + content: "\E65E"; } + .next-icon-switch:before { + content: "\E6B3"; } + .next-icon-sorting:before { + content: "\E634"; } + .next-icon-descending:before { + content: "\E61F"; } + .next-icon-ascending:before { + content: "\E61E"; } + .next-icon-select:before { + content: "\E632"; } + .next-icon-semi-select:before { + content: "\E633"; } + .next-icon-search:before { + content: "\E656"; } + .next-icon-close:before { + content: "\E626"; } + .next-icon-ellipsis:before { + content: "\E654"; } + .next-icon-picture:before { + content: "\E631"; } + .next-icon-calendar:before { + content: "\E607"; } + .next-icon-ashbin:before { + content: "\E639"; } + .next-icon-upload:before { + content: "\E7EE"; } + .next-icon-download:before { + content: "\E628"; } + .next-icon-set:before { + content: "\E683"; } + .next-icon-edit:before { + content: "\E63B"; } + .next-icon-refresh:before { + content: "\E677"; } + .next-icon-filter:before { + content: "\E627"; } + .next-icon-attachment:before { + content: "\E665"; } + .next-icon-account:before { + content: "\E608"; } + .next-icon-email:before { + content: "\E605"; } + .next-icon-atm:before { + content: "\E606"; } + .next-icon-loading:before { + content: "\E646"; + -webkit-animation: loadingCircle 1s infinite linear; + animation: loadingCircle 1s infinite linear; } + +@-webkit-keyframes loadingCircle { + 0% { + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + 100% { + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +@keyframes loadingCircle { + 0% { + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + 100% { + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +.next-icon.next-xxs:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + +@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-icon.next-xxs { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-icon.next-xxs:before { + width: 16px; + font-size: 16px; } } + +.next-icon.next-xs:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-icon.next-small:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + +.next-icon.next-medium:before { + width: 20px; + font-size: 20px; + line-height: inherit; } + +.next-icon.next-large:before { + width: 24px; + font-size: 24px; + line-height: inherit; } + +.next-icon.next-xl:before { + width: 32px; + font-size: 32px; + line-height: inherit; } + +.next-icon.next-xxl:before { + width: 48px; + font-size: 48px; + line-height: inherit; } + +.next-icon.next-xxxl:before { + width: 64px; + font-size: 64px; + line-height: inherit; } + +.next-icon.next-inherit:before { + width: inherit; + font-size: inherit; + line-height: inherit; } + +.next-balloon { + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: absolute; + max-width: 300px; + border-style: solid; + border-radius: 3px; + word-wrap: break-word; + z-index: 0; + /* size */ + /* 带关闭按钮的右侧padding变大 */ } + .next-balloon *, + .next-balloon *:before, + .next-balloon *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-balloon:focus, + .next-balloon *:focus { + outline: 0; } + .next-balloon-primary { + color: #333333; + border-color: #4494F9; + background-color: #E3F2FD; + -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12); + border-width: 1px; } + .next-balloon-primary .next-balloon-close { + position: absolute; + top: 12px; + right: 12px; + font-size: 12px; + color: #999999; } + .next-balloon-primary .next-balloon-close .next-icon { + width: 12px; + height: 12px; + line-height: 12px; } + .next-balloon-primary .next-balloon-close .next-icon:before { + width: 12px; + height: 12px; + font-size: 12px; + line-height: 12px; } + .next-balloon-primary .next-balloon-close :hover { + color: #333333; } + .next-balloon-primary:after { + position: absolute; + width: 12px; + height: 12px; + content: ' '; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-box-sizing: content-box !important; + box-sizing: content-box !important; + border: 1px solid #4494F9; + background-color: #E3F2FD; + z-index: -1; } + .next-balloon-primary.next-balloon-top:after { + top: -7px; + left: calc(50% + -7px); + border-right: none; + border-bottom: none; + -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-right:after { + top: calc(50% + -7px); + right: -7px; + border-left: none; + border-bottom: none; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-bottom:after { + bottom: -7px; + left: calc(50% + -7px); + border-top: none; + border-left: none; + -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-left:after { + top: calc(50% + -7px); + left: -7px; + border-top: none; + border-right: none; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-left-top:after { + top: 12px; + left: -7px; + border-top: none; + border-right: none; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-left-bottom:after { + bottom: 12px; + left: -7px; + border-top: none; + border-right: none; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-right-top:after { + top: 12px; + right: -7px; + border-bottom: none; + border-left: none; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-right-bottom:after { + right: -7px; + bottom: 12px; + border-bottom: none; + border-left: none; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-top-left:after { + top: -7px; + left: 12px; + border-right: none; + border-bottom: none; + -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-top-right:after { + top: -7px; + right: 12px; + border-right: none; + border-bottom: none; + -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-bottom-left:after { + bottom: -7px; + left: 12px; + border-top: none; + border-left: none; + -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-bottom-right:after { + right: 12px; + bottom: -7px; + border-top: none; + border-left: none; + -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal { + color: #333333; + border-color: #DCDEE3; + background-color: #FFFFFF; + -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + border-width: 1px; } + .next-balloon-normal .next-balloon-close { + position: absolute; + top: 12px; + right: 12px; + font-size: 12px; + color: #999999; } + .next-balloon-normal .next-balloon-close .next-icon { + width: 12px; + height: 12px; + line-height: 12px; } + .next-balloon-normal .next-balloon-close .next-icon:before { + width: 12px; + height: 12px; + font-size: 12px; + line-height: 12px; } + .next-balloon-normal .next-balloon-close :hover { + color: #666666; } + .next-balloon-normal:after { + position: absolute; + width: 12px; + height: 12px; + content: ' '; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-box-sizing: content-box !important; + box-sizing: content-box !important; + border: 1px solid #DCDEE3; + background-color: #FFFFFF; + z-index: -1; } + .next-balloon-normal.next-balloon-top:after { + top: -7px; + left: calc(50% + -7px); + border-right: none; + border-bottom: none; + -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-right:after { + top: calc(50% + -7px); + right: -7px; + border-left: none; + border-bottom: none; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-bottom:after { + bottom: -7px; + left: calc(50% + -7px); + border-top: none; + border-left: none; + -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-left:after { + top: calc(50% + -7px); + left: -7px; + border-top: none; + border-right: none; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-left-top:after { + top: 12px; + left: -7px; + border-top: none; + border-right: none; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-left-bottom:after { + bottom: 12px; + left: -7px; + border-top: none; + border-right: none; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-right-top:after { + top: 12px; + right: -7px; + border-bottom: none; + border-left: none; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-right-bottom:after { + right: -7px; + bottom: 12px; + border-bottom: none; + border-left: none; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-top-left:after { + top: -7px; + left: 12px; + border-right: none; + border-bottom: none; + -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-top-right:after { + top: -7px; + right: 12px; + border-right: none; + border-bottom: none; + -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-bottom-left:after { + bottom: -7px; + left: 12px; + border-top: none; + border-left: none; + -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-bottom-right:after { + right: 12px; + bottom: -7px; + border-top: none; + border-left: none; + -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon.visible { + display: block; } + .next-balloon.hidden { + display: none; } + .next-balloon-medium { + padding: 16px 16px 16px 16px; } + .next-balloon-closable { + padding: 16px 40px 16px 16px; } + +.next-balloon-tooltip { + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: absolute; + max-width: 300px; + border-style: solid; + border-radius: 3px; + font-size: 12px; + z-index: 0; + color: #333333; + border-color: #DCDEE3; + background-color: #F2F3F7; + -webkit-box-shadow: none; + box-shadow: none; + border-width: 1px; + /* size */ } + .next-balloon-tooltip *, + .next-balloon-tooltip *:before, + .next-balloon-tooltip *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-balloon-tooltip:after { + position: absolute; + width: 12px; + height: 12px; + content: ' '; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-box-sizing: content-box !important; + box-sizing: content-box !important; + border: 1px solid #DCDEE3; + background-color: #F2F3F7; + z-index: -1; } + .next-balloon-tooltip-top:after { + top: -7px; + left: calc(50% + -7px); + border-right: none; + border-bottom: none; } + .next-balloon-tooltip-right:after { + top: calc(50% + -7px); + right: -7px; + border-left: none; + border-bottom: none; } + .next-balloon-tooltip-bottom:after { + bottom: -7px; + left: calc(50% + -7px); + border-top: none; + border-left: none; } + .next-balloon-tooltip-left:after { + top: calc(50% + -7px); + left: -7px; + border-top: none; + border-right: none; } + .next-balloon-tooltip-left-top:after { + top: 12px; + left: -7px; + border-top: none; + border-right: none; } + .next-balloon-tooltip-left-bottom:after { + bottom: 12px; + left: -7px; + border-top: none; + border-right: none; } + .next-balloon-tooltip-right-top:after { + top: 12px; + right: -7px; + border-bottom: none; + border-left: none; } + .next-balloon-tooltip-right-bottom:after { + right: -7px; + bottom: 12px; + border-bottom: none; + border-left: none; } + .next-balloon-tooltip-top-left:after { + top: -7px; + left: 12px; + border-right: none; + border-bottom: none; } + .next-balloon-tooltip-top-right:after { + top: -7px; + right: 12px; + border-right: none; + border-bottom: none; } + .next-balloon-tooltip-bottom-left:after { + bottom: -7px; + left: 12px; + border-top: none; + border-left: none; } + .next-balloon-tooltip-bottom-right:after { + right: 12px; + bottom: -7px; + border-top: none; + border-left: none; } + .next-balloon-tooltip.visible { + display: block; } + .next-balloon-tooltip.hidden { + display: none; } + .next-balloon-tooltip-medium { + padding: 8px 8px 8px 8px; } + +.next-balloon[dir="rtl"] { + /* 带关闭按钮的右侧padding变大 */ } + .next-balloon[dir="rtl"].next-balloon-primary .next-balloon-close { + left: 12px; + right: auto; } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-right:after { + left: -7px; + right: auto; + border-right: none; + border-top: none; + border-left: inherit; + border-bottom: inherit; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-left:after { + right: -7px; + left: auto; + border-left: none; + border-bottom: none; + border-right: inherit; + border-top: inherit; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-left-top:after { + right: -7px; + left: auto; + border-left: none; + border-bottom: none; + border-top: inherit; + border-right: inherit; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-left-bottom:after { + right: -7px; + left: auto; + border-left: none; + border-bottom: none; + border-top: inherit; + border-right: inherit; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-right-top:after { + left: -7px; + right: auto; + border-right: none; + border-top: none; + border-bottom: inherit; + border-left: inherit; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-right-bottom:after { + left: -7px; + right: auto; + border-right: none; + border-top: none; + border-bottom: inherit; + border-left: inherit; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-top-left:after { + right: 12px; + left: auto; } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-top-right:after { + right: auto; + left: 12px; } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-bottom-left:after { + right: 12px; + left: auto; } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-bottom-right:after { + left: 12px; + right: auto; } + .next-balloon[dir="rtl"].next-balloon-normal .next-balloon-close { + left: 12px; + right: auto; } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-right:after { + left: -7px; + right: auto; + border-right: none; + border-top: none; + border-left: inherit; + border-bottom: inherit; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-left:after { + right: -7px; + left: auto; + border-left: none; + border-bottom: none; + border-right: inherit; + border-top: inherit; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-left-top:after { + right: -7px; + left: auto; + border-left: none; + border-bottom: none; + border-top: inherit; + border-right: inherit; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-left-bottom:after { + right: -7px; + left: auto; + border-left: none; + border-bottom: none; + border-top: inherit; + border-right: inherit; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-right-top:after { + left: -7px; + right: auto; + border-right: none; + border-top: none; + border-bottom: inherit; + border-left: inherit; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-right-bottom:after { + left: -7px; + right: auto; + border-right: none; + border-top: none; + border-bottom: inherit; + border-left: inherit; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-top-left:after { + right: 12px; + left: auto; } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-top-right:after { + right: auto; + left: 12px; } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-bottom-left:after { + right: 12px; + left: auto; } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-bottom-right:after { + left: 12px; + right: auto; } + .next-balloon[dir="rtl"].next-balloon-closable { + padding: 16px 16px 16px 40px; } + +.next-balloon-tooltip[dir="rtl"] { + /* size */ } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-right:after { + left: -7px; + right: auto; + border-top: none; + border-right: none; + border-left: inherit; + border-bottom: inherit; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-left:after { + right: -7px; + left: auto; + border-top: inherit; + border-right: inherit; + border-left: none; + border-bottom: none; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-left-top:after { + right: -7px; + left: auto; + border-top: inherit; + border-right: inherit; + border-left: none; + border-bottom: none; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-left-bottom:after { + right: -7px; + left: auto; + border-top: inherit; + border-right: inherit; + border-left: none; + border-bottom: none; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-right-top:after { + left: -7px; + right: auto; + border-top: none; + border-right: none; + border-left: inherit; + border-bottom: inherit; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-right-bottom:after { + left: -7px; + right: auto; + border-top: none; + border-right: none; + border-left: inherit; + border-bottom: inherit; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-top-left:after { + right: 12px; + left: auto; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-top-right:after { + left: 12px; + right: auto; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-bottom-left:after { + right: 12px; + left: auto; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-bottom-right:after { + left: 12px; + right: auto; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-medium { + padding: 8px 8px 8px 8px; } + +/* put your code here */ +.next-breadcrumb { + display: block; + margin: 0; + padding: 0; + height: 16px; + line-height: 16px; } + .next-breadcrumb .next-breadcrumb-item { + display: inline-block; } + .next-breadcrumb .next-breadcrumb-item .next-breadcrumb-text { + display: inline-block; + text-decoration: none; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + -webkit-transition: all .2s ease-out; + transition: all .2s ease-out; } + .next-breadcrumb .next-breadcrumb-item .next-breadcrumb-text > b { + font-weight: normal; } + .next-breadcrumb .next-breadcrumb-item .next-breadcrumb-separator { + display: inline-block; + vertical-align: top; } + .next-breadcrumb .next-breadcrumb-text { + height: 16px; + min-width: 16px; + font-size: 12px; + line-height: 16px; } + .next-breadcrumb .next-breadcrumb-separator { + height: 16px; + margin: 0 8px; + font-size: 8px; + line-height: 16px; } + .next-breadcrumb .next-breadcrumb-separator .next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-breadcrumb .next-breadcrumb-separator .next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-breadcrumb .next-breadcrumb-separator .next-icon:before { + width: 16px; + font-size: 16px; } } + .next-breadcrumb .next-breadcrumb-text-ellipsis { + font-size: 12px; } + .next-breadcrumb .next-breadcrumb-text { + color: #666666; } + .next-breadcrumb .next-breadcrumb-text > b { + color: #5584FF; } + .next-breadcrumb .next-breadcrumb-text > a { + color: #666666; + text-decoration: none; + text-align: center; } + .next-breadcrumb .next-breadcrumb-text.activated { + color: #333333; + font-weight: normal; } + .next-breadcrumb .next-breadcrumb-text.activated > a { + color: #333333; + font-weight: normal; } + .next-breadcrumb .next-breadcrumb-text-ellipsis { + color: #666666; + cursor: default; } + .next-breadcrumb .next-breadcrumb-separator { + color: #A0A2AD; } + .next-breadcrumb .next-breadcrumb-text:not(.next-breadcrumb-text-ellipsis):hover > a { + color: #5584FF; } + .next-breadcrumb a.next-breadcrumb-text.activated:hover > a { + color: #5584FF; } + .next-breadcrumb a.next-breadcrumb-text:not(.next-breadcrumb-text-ellipsis):hover { + color: #5584FF; } + .next-breadcrumb a.next-breadcrumb-text:not(.next-breadcrumb-text-ellipsis):hover > b { + color: #5584FF; } + .next-breadcrumb a.next-breadcrumb-text.activated:hover { + color: #5584FF; + font-weight: normal; } + +.next-btn { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-btn *, + .next-btn *:before, + .next-btn *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-btn::-moz-focus-inner { + border: 0; + padding: 0; } + .next-btn, .next-btn:active, .next-btn:focus, .next-btn:hover { + outline: 0; } + +@keyframes loadingCircle { + 0% { + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + 100% { + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +.next-btn { + /* 尺寸维度 */ + /* ---------------------------------------- */ + /* 普通按钮 */ + /* 普通态禁用样式 */ + /* 警告按钮 */ + /* 文本按钮 */ + /* loading */ + /* ---------------------------------------- */ + /* 幽灵按钮 */ + /* 组合 */ + /* ---------------------------------------- */ } + .next-btn { + position: relative; + display: inline-block; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: none; + text-align: center; + text-transform: none; + white-space: nowrap; + vertical-align: middle; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: all .3s ease-out; + transition: all .3s ease-out; + cursor: pointer; } + .next-btn:after { + text-align: center; + position: absolute; + opacity: 0; + visibility: hidden; + -webkit-transition: opacity .5s ease; + transition: opacity .5s ease; } + .next-btn .next-icon.next-xs:before { + vertical-align: baseline; } + .next-btn.hover, .next-btn:hover { + -webkit-box-shadow: none; + box-shadow: none; } + .next-btn.next-small { + border-radius: 3px; + padding: 0 8px; + height: 20px; + line-height: 18px; + font-size: 12px; + border-width: 1px; } + .next-btn.next-small > .next-btn-icon.next-icon-first { + margin-left: 0; + margin-right: 4px; } + .next-btn.next-small > .next-btn-icon.next-icon-first:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-small > .next-btn-icon.next-icon-last { + margin-left: 4px; + margin-right: 0; } + .next-btn.next-small > .next-btn-icon.next-icon-last:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-small > .next-btn-icon.next-icon-alone:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-small.next-btn-loading { + padding-left: 24px; } + .next-btn.next-small.next-btn-loading:after { + width: 12px; + height: 12px; + font-size: 12px; + line-height: 12px; + left: 8px; + top: 50%; + text-align: center; + margin-top: -6px; + margin-right: 4px; } + .next-btn.next-small.next-btn-loading > .next-icon { + display: none; } + .next-btn.next-medium { + border-radius: 3px; + padding: 0 12px; + height: 28px; + line-height: 26px; + font-size: 12px; + border-width: 1px; } + .next-btn.next-medium > .next-btn-icon.next-icon-first { + margin-left: 0; + margin-right: 4px; } + .next-btn.next-medium > .next-btn-icon.next-icon-first:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-medium > .next-btn-icon.next-icon-last { + margin-left: 4px; + margin-right: 0; } + .next-btn.next-medium > .next-btn-icon.next-icon-last:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-medium > .next-btn-icon.next-icon-alone:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-medium.next-btn-loading { + padding-left: 28px; } + .next-btn.next-medium.next-btn-loading:after { + width: 12px; + height: 12px; + font-size: 12px; + line-height: 12px; + left: 12px; + top: 50%; + text-align: center; + margin-top: -6px; + margin-right: 4px; } + .next-btn.next-medium.next-btn-loading > .next-icon { + display: none; } + .next-btn.next-large { + border-radius: 3px; + padding: 0 16px; + height: 40px; + line-height: 38px; + font-size: 16px; + border-width: 1px; } + .next-btn.next-large > .next-btn-icon.next-icon-first { + margin-left: 0; + margin-right: 4px; } + .next-btn.next-large > .next-btn-icon.next-icon-first:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn.next-large > .next-btn-icon.next-icon-last { + margin-left: 4px; + margin-right: 0; } + .next-btn.next-large > .next-btn-icon.next-icon-last:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn.next-large > .next-btn-icon.next-icon-alone:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn.next-large.next-btn-loading { + padding-left: 36px; } + .next-btn.next-large.next-btn-loading:after { + width: 16px; + height: 16px; + font-size: 16px; + line-height: 16px; + left: 16px; + top: 50%; + text-align: center; + margin-top: -8px; + margin-right: 4px; } + .next-btn.next-large.next-btn-loading > .next-icon { + display: none; } + .next-btn.next-btn-normal { + border-style: solid; + background-color: #FFFFFF; + border-color: #C4C6CF; } + .next-btn.next-btn-normal, .next-btn.next-btn-normal:link, .next-btn.next-btn-normal:visited, .next-btn.next-btn-normal.visited { + color: #333333; } + .next-btn.next-btn-normal:focus, .next-btn.next-btn-normal:hover, .next-btn.next-btn-normal.hover, .next-btn.next-btn-normal:active, .next-btn.next-btn-normal.active { + color: #333333; + background-color: #F2F3F7; + border-color: #A0A2AD; + text-decoration: none; } + .next-btn.next-btn-primary { + border-style: solid; + background-color: #5584FF; + border-color: transparent; } + .next-btn.next-btn-primary, .next-btn.next-btn-primary:link, .next-btn.next-btn-primary:visited, .next-btn.next-btn-primary.visited { + color: #FFFFFF; } + .next-btn.next-btn-primary:focus, .next-btn.next-btn-primary:hover, .next-btn.next-btn-primary.hover, .next-btn.next-btn-primary:active, .next-btn.next-btn-primary.active { + color: #FFFFFF; + background-color: #3E71F7; + border-color: transparent; + text-decoration: none; } + .next-btn.next-btn-secondary { + border-style: solid; + background-color: #FFFFFF; + border-color: #5584FF; } + .next-btn.next-btn-secondary, .next-btn.next-btn-secondary:link, .next-btn.next-btn-secondary:visited, .next-btn.next-btn-secondary.visited { + color: #5584FF; } + .next-btn.next-btn-secondary:focus, .next-btn.next-btn-secondary:hover, .next-btn.next-btn-secondary.hover, .next-btn.next-btn-secondary:active, .next-btn.next-btn-secondary.active { + color: #FFFFFF; + background-color: #3E71F7; + border-color: #3E71F7; + text-decoration: none; } + .next-btn.disabled, .next-btn[disabled] { + cursor: not-allowed; + background-color: #F7F8FA; + border-color: #E6E7EB; } + .next-btn.disabled, .next-btn.disabled:link, .next-btn.disabled:visited, .next-btn.disabled.visited, .next-btn[disabled], .next-btn[disabled]:link, .next-btn[disabled]:visited, .next-btn[disabled].visited { + color: #CCCCCC; } + .next-btn.disabled:focus, .next-btn.disabled:hover, .next-btn.disabled.hover, .next-btn.disabled:active, .next-btn.disabled.active, .next-btn[disabled]:focus, .next-btn[disabled]:hover, .next-btn[disabled].hover, .next-btn[disabled]:active, .next-btn[disabled].active { + color: #CCCCCC; + background-color: #F7F8FA; + border-color: #E6E7EB; + text-decoration: none; } + .next-btn-warning { + border-style: solid; } + .next-btn-warning.next-btn-primary { + background-color: #FF3000; + border-color: #FF3000; } + .next-btn-warning.next-btn-primary, .next-btn-warning.next-btn-primary:link, .next-btn-warning.next-btn-primary:visited, .next-btn-warning.next-btn-primary.visited { + color: #FFFFFF; } + .next-btn-warning.next-btn-primary:focus, .next-btn-warning.next-btn-primary:hover, .next-btn-warning.next-btn-primary.hover, .next-btn-warning.next-btn-primary:active, .next-btn-warning.next-btn-primary.active { + color: #FFFFFF; + background-color: #E72B00; + border-color: #E72B00; + text-decoration: none; } + .next-btn-warning.next-btn-primary.disabled, .next-btn-warning.next-btn-primary[disabled] { + background-color: #F7F8FA; + border-color: #DCDEE3; } + .next-btn-warning.next-btn-primary.disabled, .next-btn-warning.next-btn-primary.disabled:link, .next-btn-warning.next-btn-primary.disabled:visited, .next-btn-warning.next-btn-primary.disabled.visited, .next-btn-warning.next-btn-primary[disabled], .next-btn-warning.next-btn-primary[disabled]:link, .next-btn-warning.next-btn-primary[disabled]:visited, .next-btn-warning.next-btn-primary[disabled].visited { + color: #CCCCCC; } + .next-btn-warning.next-btn-primary.disabled:focus, .next-btn-warning.next-btn-primary.disabled:hover, .next-btn-warning.next-btn-primary.disabled.hover, .next-btn-warning.next-btn-primary.disabled:active, .next-btn-warning.next-btn-primary.disabled.active, .next-btn-warning.next-btn-primary[disabled]:focus, .next-btn-warning.next-btn-primary[disabled]:hover, .next-btn-warning.next-btn-primary[disabled].hover, .next-btn-warning.next-btn-primary[disabled]:active, .next-btn-warning.next-btn-primary[disabled].active { + color: #CCCCCC; + background-color: #F7F8FA; + border-color: #DCDEE3; + text-decoration: none; } + .next-btn-warning.next-btn-normal { + background-color: #FFFFFF; + border-color: #FF3000; } + .next-btn-warning.next-btn-normal, .next-btn-warning.next-btn-normal:link, .next-btn-warning.next-btn-normal:visited, .next-btn-warning.next-btn-normal.visited { + color: #FF3000; } + .next-btn-warning.next-btn-normal:focus, .next-btn-warning.next-btn-normal:hover, .next-btn-warning.next-btn-normal.hover, .next-btn-warning.next-btn-normal:active, .next-btn-warning.next-btn-normal.active { + color: #FFFFFF; + background-color: #E72B00; + border-color: #E72B00; + text-decoration: none; } + .next-btn-warning.next-btn-normal.disabled, .next-btn-warning.next-btn-normal[disabled] { + background-color: #F7F8FA; + border-color: #E6E7EB; } + .next-btn-warning.next-btn-normal.disabled, .next-btn-warning.next-btn-normal.disabled:link, .next-btn-warning.next-btn-normal.disabled:visited, .next-btn-warning.next-btn-normal.disabled.visited, .next-btn-warning.next-btn-normal[disabled], .next-btn-warning.next-btn-normal[disabled]:link, .next-btn-warning.next-btn-normal[disabled]:visited, .next-btn-warning.next-btn-normal[disabled].visited { + color: #CCCCCC; } + .next-btn-warning.next-btn-normal.disabled:focus, .next-btn-warning.next-btn-normal.disabled:hover, .next-btn-warning.next-btn-normal.disabled.hover, .next-btn-warning.next-btn-normal.disabled:active, .next-btn-warning.next-btn-normal.disabled.active, .next-btn-warning.next-btn-normal[disabled]:focus, .next-btn-warning.next-btn-normal[disabled]:hover, .next-btn-warning.next-btn-normal[disabled].hover, .next-btn-warning.next-btn-normal[disabled]:active, .next-btn-warning.next-btn-normal[disabled].active { + color: #CCCCCC; + background-color: #F7F8FA; + border-color: #E6E7EB; + text-decoration: none; } + .next-btn-text { + -webkit-box-shadow: none; + box-shadow: none; + border-radius: 0; } + .next-btn-text.hover, .next-btn-text:hover { + -webkit-box-shadow: none; + box-shadow: none; } + .next-btn-text.next-btn-primary { + background-color: transparent; + border-color: transparent; } + .next-btn-text.next-btn-primary, .next-btn-text.next-btn-primary:link, .next-btn-text.next-btn-primary:visited, .next-btn-text.next-btn-primary.visited { + color: #5584FF; } + .next-btn-text.next-btn-primary:focus, .next-btn-text.next-btn-primary:hover, .next-btn-text.next-btn-primary.hover, .next-btn-text.next-btn-primary:active, .next-btn-text.next-btn-primary.active { + color: #3E71F7; + background-color: transparent; + border-color: transparent; + text-decoration: none; } + .next-btn-text.next-btn-secondary { + background-color: transparent; + border-color: transparent; } + .next-btn-text.next-btn-secondary, .next-btn-text.next-btn-secondary:link, .next-btn-text.next-btn-secondary:visited, .next-btn-text.next-btn-secondary.visited { + color: #666666; } + .next-btn-text.next-btn-secondary:focus, .next-btn-text.next-btn-secondary:hover, .next-btn-text.next-btn-secondary.hover, .next-btn-text.next-btn-secondary:active, .next-btn-text.next-btn-secondary.active { + color: #5584FF; + background-color: transparent; + border-color: transparent; + text-decoration: none; } + .next-btn-text.next-btn-normal { + background-color: transparent; + border-color: transparent; } + .next-btn-text.next-btn-normal, .next-btn-text.next-btn-normal:link, .next-btn-text.next-btn-normal:visited, .next-btn-text.next-btn-normal.visited { + color: #333333; } + .next-btn-text.next-btn-normal:focus, .next-btn-text.next-btn-normal:hover, .next-btn-text.next-btn-normal.hover, .next-btn-text.next-btn-normal:active, .next-btn-text.next-btn-normal.active { + color: #5584FF; + background-color: transparent; + border-color: transparent; + text-decoration: none; } + .next-btn-text.next-large { + border-radius: 0; + padding: 0 0; + height: 24px; + line-height: 24px; + font-size: 14px; + border-width: 0; } + .next-btn-text.next-large > .next-btn-icon.next-icon-first { + margin-left: 0; + margin-right: 4px; } + .next-btn-text.next-large > .next-btn-icon.next-icon-first:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn-text.next-large > .next-btn-icon.next-icon-last { + margin-left: 4px; + margin-right: 0; } + .next-btn-text.next-large > .next-btn-icon.next-icon-last:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn-text.next-large > .next-btn-icon.next-icon-alone:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn-text.next-large.next-btn-loading { + padding-left: 20px; } + .next-btn-text.next-large.next-btn-loading:after { + width: 16px; + height: 16px; + font-size: 16px; + line-height: 16px; + left: 0; + top: 50%; + text-align: center; + margin-top: -8px; + margin-right: 4px; } + .next-btn-text.next-large.next-btn-loading > .next-icon { + display: none; } + .next-btn-text.next-medium { + border-radius: 0; + padding: 0 0; + height: 20px; + line-height: 20px; + font-size: 12px; + border-width: 0; } + .next-btn-text.next-medium > .next-btn-icon.next-icon-first { + margin-left: 0; + margin-right: 4px; } + .next-btn-text.next-medium > .next-btn-icon.next-icon-first:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text.next-medium > .next-btn-icon.next-icon-last { + margin-left: 4px; + margin-right: 0; } + .next-btn-text.next-medium > .next-btn-icon.next-icon-last:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text.next-medium > .next-btn-icon.next-icon-alone:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text.next-medium.next-btn-loading { + padding-left: 16px; } + .next-btn-text.next-medium.next-btn-loading:after { + width: 12px; + height: 12px; + font-size: 12px; + line-height: 12px; + left: 0; + top: 50%; + text-align: center; + margin-top: -6px; + margin-right: 4px; } + .next-btn-text.next-medium.next-btn-loading > .next-icon { + display: none; } + .next-btn-text.next-small { + border-radius: 0; + padding: 0 0; + height: 16px; + line-height: 16px; + font-size: 12px; + border-width: 0; } + .next-btn-text.next-small > .next-btn-icon.next-icon-first { + margin-left: 0; + margin-right: 4px; } + .next-btn-text.next-small > .next-btn-icon.next-icon-first:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text.next-small > .next-btn-icon.next-icon-last { + margin-left: 4px; + margin-right: 0; } + .next-btn-text.next-small > .next-btn-icon.next-icon-last:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text.next-small > .next-btn-icon.next-icon-alone:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text.next-small.next-btn-loading { + padding-left: 16px; } + .next-btn-text.next-small.next-btn-loading:after { + width: 12px; + height: 12px; + font-size: 12px; + line-height: 12px; + left: 0; + top: 50%; + text-align: center; + margin-top: -6px; + margin-right: 4px; } + .next-btn-text.next-small.next-btn-loading > .next-icon { + display: none; } + .next-btn-text.disabled, .next-btn-text[disabled] { + background-color: transparent; + border-color: transparent; } + .next-btn-text.disabled, .next-btn-text.disabled:link, .next-btn-text.disabled:visited, .next-btn-text.disabled.visited, .next-btn-text[disabled], .next-btn-text[disabled]:link, .next-btn-text[disabled]:visited, .next-btn-text[disabled].visited { + color: #CCCCCC; } + .next-btn-text.disabled:focus, .next-btn-text.disabled:hover, .next-btn-text.disabled.hover, .next-btn-text.disabled:active, .next-btn-text.disabled.active, .next-btn-text[disabled]:focus, .next-btn-text[disabled]:hover, .next-btn-text[disabled].hover, .next-btn-text[disabled]:active, .next-btn-text[disabled].active { + color: #CCCCCC; + background-color: transparent; + border-color: transparent; + text-decoration: none; } + .next-btn-text.next-btn-loading { + background-color: transparent; + border-color: transparent; } + .next-btn-text.next-btn-loading, .next-btn-text.next-btn-loading:link, .next-btn-text.next-btn-loading:visited, .next-btn-text.next-btn-loading.visited { + color: #333333; } + .next-btn-text.next-btn-loading:focus, .next-btn-text.next-btn-loading:hover, .next-btn-text.next-btn-loading.hover, .next-btn-text.next-btn-loading:active, .next-btn-text.next-btn-loading.active { + color: #333333; + background-color: transparent; + border-color: transparent; + text-decoration: none; } + .next-btn-loading { + pointer-events: none; } + .next-btn-loading:after { + font-family: NextIcon; + content: "\E646"; + opacity: 1; + visibility: visible; + -webkit-animation: loadingCircle 2s infinite linear; + animation: loadingCircle 2s infinite linear; } + .next-btn-ghost { + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-btn-ghost.next-btn-dark { + background-color: transparent; + border-color: #FFFFFF; } + .next-btn-ghost.next-btn-dark, .next-btn-ghost.next-btn-dark:link, .next-btn-ghost.next-btn-dark:visited, .next-btn-ghost.next-btn-dark.visited { + color: #FFFFFF; } + .next-btn-ghost.next-btn-dark:focus, .next-btn-ghost.next-btn-dark:hover, .next-btn-ghost.next-btn-dark.hover, .next-btn-ghost.next-btn-dark:active, .next-btn-ghost.next-btn-dark.active { + color: #FFFFFF; + background-color: rgba(255, 255, 255, 0.8); + border-color: #FFFFFF; + text-decoration: none; } + .next-btn-ghost.next-btn-dark.disabled, .next-btn-ghost.next-btn-dark[disabled] { + background-color: transparent; + border-color: rgba(255, 255, 255, 0.4); } + .next-btn-ghost.next-btn-dark.disabled, .next-btn-ghost.next-btn-dark.disabled:link, .next-btn-ghost.next-btn-dark.disabled:visited, .next-btn-ghost.next-btn-dark.disabled.visited, .next-btn-ghost.next-btn-dark[disabled], .next-btn-ghost.next-btn-dark[disabled]:link, .next-btn-ghost.next-btn-dark[disabled]:visited, .next-btn-ghost.next-btn-dark[disabled].visited { + color: rgba(255, 255, 255, 0.4); } + .next-btn-ghost.next-btn-dark.disabled:focus, .next-btn-ghost.next-btn-dark.disabled:hover, .next-btn-ghost.next-btn-dark.disabled.hover, .next-btn-ghost.next-btn-dark.disabled:active, .next-btn-ghost.next-btn-dark.disabled.active, .next-btn-ghost.next-btn-dark[disabled]:focus, .next-btn-ghost.next-btn-dark[disabled]:hover, .next-btn-ghost.next-btn-dark[disabled].hover, .next-btn-ghost.next-btn-dark[disabled]:active, .next-btn-ghost.next-btn-dark[disabled].active { + color: rgba(255, 255, 255, 0.4); + background-color: transparent; + border-color: rgba(255, 255, 255, 0.4); + text-decoration: none; } + .next-btn-ghost.next-btn-light { + background-color: transparent; + border-color: #333333; } + .next-btn-ghost.next-btn-light, .next-btn-ghost.next-btn-light:link, .next-btn-ghost.next-btn-light:visited, .next-btn-ghost.next-btn-light.visited { + color: #333333; } + .next-btn-ghost.next-btn-light:focus, .next-btn-ghost.next-btn-light:hover, .next-btn-ghost.next-btn-light.hover, .next-btn-ghost.next-btn-light:active, .next-btn-ghost.next-btn-light.active { + color: #999999; + background-color: rgba(0, 0, 0, 0.92); + border-color: #333333; + text-decoration: none; } + .next-btn-ghost.next-btn-light.disabled, .next-btn-ghost.next-btn-light[disabled] { + background-color: transparent; + border-color: rgba(0, 0, 0, 0.1); } + .next-btn-ghost.next-btn-light.disabled, .next-btn-ghost.next-btn-light.disabled:link, .next-btn-ghost.next-btn-light.disabled:visited, .next-btn-ghost.next-btn-light.disabled.visited, .next-btn-ghost.next-btn-light[disabled], .next-btn-ghost.next-btn-light[disabled]:link, .next-btn-ghost.next-btn-light[disabled]:visited, .next-btn-ghost.next-btn-light[disabled].visited { + color: rgba(0, 0, 0, 0.1); } + .next-btn-ghost.next-btn-light.disabled:focus, .next-btn-ghost.next-btn-light.disabled:hover, .next-btn-ghost.next-btn-light.disabled.hover, .next-btn-ghost.next-btn-light.disabled:active, .next-btn-ghost.next-btn-light.disabled.active, .next-btn-ghost.next-btn-light[disabled]:focus, .next-btn-ghost.next-btn-light[disabled]:hover, .next-btn-ghost.next-btn-light[disabled].hover, .next-btn-ghost.next-btn-light[disabled]:active, .next-btn-ghost.next-btn-light[disabled].active { + color: rgba(0, 0, 0, 0.1); + background-color: transparent; + border-color: rgba(0, 0, 0, 0.1); + text-decoration: none; } + .next-btn-group { + position: relative; + display: inline-block; + vertical-align: middle; } + .next-btn-group > .next-btn { + position: relative; + float: left; + -webkit-box-shadow: none; + box-shadow: none; } + .next-btn-group > .next-btn:hover, .next-btn-group > .next-btn:focus, .next-btn-group > .next-btn:active, .next-btn-group > .next-btn.active { + z-index: 1; } + .next-btn-group > .next-btn.disabled, .next-btn-group > .next-btn[disabled] { + z-index: 0; } + .next-btn-group .next-btn.next-btn { + margin: 0 0 0 -1px; } + .next-btn-group .next-btn:not(:first-child):not(:last-child) { + border-radius: 0; } + .next-btn-group > .next-btn:first-child { + margin: 0; } + .next-btn-group > .next-btn:first-child:not(:last-child) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; } + .next-btn-group > .next-btn:last-child:not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; } + .next-btn-group > .next-btn-primary:not(:first-child) { + border-left-color: rgba(255, 255, 255, 0.2); } + .next-btn-group > .next-btn-primary:not(:first-child):hover { + border-left-color: transparent; } + .next-btn-group > .next-btn-primary:not(:first-child).disabled, .next-btn-group > .next-btn-primary:not(:first-child)[disabled] { + border-left-color: #E6E7EB; } + +/* 组合 */ +/* ---------------------------------------- */ +.next-btn-group[dir="rtl"] > .next-btn { + float: right; } + +.next-btn-group[dir="rtl"] .next-btn.next-btn { + margin: 0 -1px 0 0; } + +.next-btn-group[dir="rtl"] > .next-btn:first-child:not(:last-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; } + +.next-btn-group[dir="rtl"] > .next-btn:last-child:not(:first-child) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; } + +.next-btn-group[dir="rtl"] > .next-btn-primary:not(:first-child) { + border-right-color: rgba(255, 255, 255, 0.2); } + .next-btn-group[dir="rtl"] > .next-btn-primary:not(:first-child):hover { + border-right-color: transparent; } + .next-btn-group[dir="rtl"] > .next-btn-primary:not(:first-child).disabled, .next-btn-group[dir="rtl"] > .next-btn-primary:not(:first-child)[disabled] { + border-right-color: #E6E7EB; } + +/* 尺寸维度 */ +/* ---------------------------------------- */ +.next-btn.next-small[dir="rtl"] { + border-radius: 3px; } + .next-btn.next-small[dir="rtl"] > .next-btn-icon.next-icon-first { + margin-left: 4px; + margin-right: 0; } + .next-btn.next-small[dir="rtl"] > .next-btn-icon.next-icon-first:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-small[dir="rtl"] > .next-btn-icon.next-icon-last { + margin-left: 0; + margin-right: 4px; } + .next-btn.next-small[dir="rtl"] > .next-btn-icon.next-icon-last:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-small[dir="rtl"].next-btn-loading { + padding-left: 8px; + padding-right: 24px; } + .next-btn.next-small[dir="rtl"].next-btn-loading:after { + right: 8px; + top: 50%; + margin-right: 0; + margin-left: 4px; } + +.next-btn.next-medium[dir="rtl"] { + border-radius: 3px; } + .next-btn.next-medium[dir="rtl"] > .next-btn-icon.next-icon-first { + margin-left: 4px; + margin-right: 0; } + .next-btn.next-medium[dir="rtl"] > .next-btn-icon.next-icon-first:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-medium[dir="rtl"] > .next-btn-icon.next-icon-last { + margin-left: 0; + margin-right: 4px; } + .next-btn.next-medium[dir="rtl"] > .next-btn-icon.next-icon-last:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-medium[dir="rtl"].next-btn-loading { + padding-left: 12px; + padding-right: 28px; } + .next-btn.next-medium[dir="rtl"].next-btn-loading:after { + right: 12px; + top: 50%; + margin-right: 0; + margin-left: 4px; } + +.next-btn.next-large[dir="rtl"] { + border-radius: 3px; } + .next-btn.next-large[dir="rtl"] > .next-btn-icon.next-icon-first { + margin-left: 4px; + margin-right: 0; } + .next-btn.next-large[dir="rtl"] > .next-btn-icon.next-icon-first:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn.next-large[dir="rtl"] > .next-btn-icon.next-icon-last { + margin-left: 0; + margin-right: 4px; } + .next-btn.next-large[dir="rtl"] > .next-btn-icon.next-icon-last:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn.next-large[dir="rtl"].next-btn-loading { + padding-left: 16px; + padding-right: 36px; } + .next-btn.next-large[dir="rtl"].next-btn-loading:after { + right: 16px; + top: 50%; + margin-right: 0; + margin-left: 4px; } + +/* 文本按钮 */ +.next-btn-text[dir="rtl"].next-large { + border-radius: 0; } + .next-btn-text[dir="rtl"].next-large > .next-btn-icon.next-icon-first { + margin-left: 4px; + margin-right: 0; } + .next-btn-text[dir="rtl"].next-large > .next-btn-icon.next-icon-first:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn-text[dir="rtl"].next-large > .next-btn-icon.next-icon-last { + margin-left: 0; + margin-right: 4px; } + .next-btn-text[dir="rtl"].next-large > .next-btn-icon.next-icon-last:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn-text[dir="rtl"].next-large.next-btn-loading { + padding-left: 0; + padding-right: 20px; } + .next-btn-text[dir="rtl"].next-large.next-btn-loading:after { + right: 0; + top: 50%; + margin-right: 0; + margin-left: 4px; } + +.next-btn-text[dir="rtl"].next-medium { + border-radius: 0; } + .next-btn-text[dir="rtl"].next-medium > .next-btn-icon.next-icon-first { + margin-left: 4px; + margin-right: 0; } + .next-btn-text[dir="rtl"].next-medium > .next-btn-icon.next-icon-first:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text[dir="rtl"].next-medium > .next-btn-icon.next-icon-last { + margin-left: 0; + margin-right: 4px; } + .next-btn-text[dir="rtl"].next-medium > .next-btn-icon.next-icon-last:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text[dir="rtl"].next-medium.next-btn-loading { + padding-left: 0; + padding-right: 16px; } + .next-btn-text[dir="rtl"].next-medium.next-btn-loading:after { + right: 0; + top: 50%; + margin-right: 0; + margin-left: 4px; } + +.next-btn-text[dir="rtl"].next-small { + border-radius: 0; } + .next-btn-text[dir="rtl"].next-small > .next-btn-icon.next-icon-first { + margin-left: 4px; + margin-right: 0; } + .next-btn-text[dir="rtl"].next-small > .next-btn-icon.next-icon-first:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text[dir="rtl"].next-small > .next-btn-icon.next-icon-last { + margin-left: 0; + margin-right: 4px; } + .next-btn-text[dir="rtl"].next-small > .next-btn-icon.next-icon-last:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text[dir="rtl"].next-small.next-btn-loading { + padding-left: 0; + padding-right: 16px; } + .next-btn-text[dir="rtl"].next-small.next-btn-loading:after { + right: 0; + top: 50%; + margin-right: 0; + margin-left: 4px; } + +.next-radio-button-large[dir='rtl'] > label:first-child { + margin-left: -1px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + +.next-radio-button-large[dir='rtl'] > label:last-child { + margin-left: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } + +.next-radio-button-large[dir='rtl'] .next-radio-label { + height: 38px; + line-height: 38px; + font-size: 16px; } + +.next-radio-button-medium[dir='rtl'] > label:first-child { + margin-left: -1px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; } + +.next-radio-button-medium[dir='rtl'] > label:last-child { + margin-left: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } + +.next-radio-button-small[dir='rtl'] > label:first-child { + margin-left: -1px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; } + +.next-radio-button-small[dir='rtl'] > label:last-child { + margin-left: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } + +.next-radio-wrapper[dir='rtl'] .next-radio-label { + margin-left: 0; + margin-right: 4px; } + +.next-radio-group[dir='rtl'] .next-radio-label { + margin-right: 4px; + margin-left: 16px; } + +.next-radio-button[dir='rtl'] > label .next-radio-label { + margin: 0; } + +.next-radio-wrapper { + outline: 0; } + .next-radio-wrapper .next-radio { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; + vertical-align: middle; + position: relative; + line-height: 1; } + .next-radio-wrapper .next-radio *, + .next-radio-wrapper .next-radio *:before, + .next-radio-wrapper .next-radio *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-radio-wrapper .next-radio input[type="radio"] { + opacity: 0; + position: absolute; + vertical-align: middle; + top: 0; + left: 0; + width: 16px; + height: 16px; + margin: 0; } + .next-radio-wrapper .next-radio-inner { + /* 动画待定 */ + /* &.mouseDown { */ + /* transform: scale3d(.7, .7, .7); */ + /* transition: transform .2s linear; */ + /* } */ + /* &.mouseUp { */ + /* transform: scale3d(1, 1, 1); */ + /* transition: transform .2s linear; */ + /* } */ + display: block; + width: 16px; + height: 16px; + background: #FFFFFF; + border-radius: 50%; + border: 1px solid #C4C6CF; + -webkit-transition: ease all .36s 0s; + transition: ease all .36s 0s; + -webkit-box-shadow: none; + box-shadow: none; } + .next-radio-wrapper .next-radio-inner:after { + -webkit-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + position: absolute; + border-radius: 50%; + top: 50%; + margin-top: -2px; + left: 50%; + margin-left: -2px; + background: #FFFFFF; + content: ' '; + -webkit-transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); } + .next-radio-wrapper.checked .next-radio-inner { + border-color: #5584FF; + background: #5584FF; } + .next-radio-wrapper.checked .next-radio-inner:after { + width: 4px; + height: 4px; + font-weight: bold; + background: #FFFFFF; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); } + .next-radio-wrapper.checked:hover .next-radio-inner, .next-radio-wrapper.checked.hovered .next-radio-inner { + border-color: transparent; } + .next-radio-wrapper.disabled input[type="radio"] { + cursor: not-allowed; } + .next-radio-wrapper.disabled .next-radio-inner { + border-color: #E6E7EB; + background: #F7F8FA; } + .next-radio-wrapper.disabled .next-radio-inner:hover, .next-radio-wrapper.disabled .next-radio-inner.hovered { + border-color: #E6E7EB; } + .next-radio-wrapper.disabled.checked .next-radio-inner { + border-color: #E6E7EB; } + .next-radio-wrapper.disabled.checked .next-radio-inner:after { + background: #CCCCCC; } + .next-radio-wrapper:not(.disabled):hover .next-radio-inner, .next-radio-wrapper:not(.disabled).hovered .next-radio-inner, .next-radio-wrapper:not(.disabled):focus .next-radio-inner, .next-radio-wrapper:not(.disabled).focused .next-radio-inner { + border-color: #5584FF; + background-color: #DEE8FF; } + .next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner, .next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner, .next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner, .next-radio-wrapper.checked.focused .next-radio-inner { + border-color: transparent; + background: #3E71F7; } + .next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner:after, .next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner:after, .next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner:after, .next-radio-wrapper.checked.focused .next-radio-inner:after { + background: #FFFFFF; } + +.next-radio-button .next-radio { + width: 0; + height: 0; } + +.next-radio-button input[type="radio"] { + width: 0; + height: 0; } + +.next-radio-button > label { + display: inline-block; + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: relative; + z-index: 1; + margin: 0 0 0 -1px; + border: 1px solid #C4C6CF; + background-color: #FFFFFF; + -webkit-transition: ease all .3s 0s; + transition: ease all .3s 0s; + vertical-align: middle; } + .next-radio-button > label .next-radio-label { + display: block; + color: #333333; + margin: 0; + -webkit-transition: ease all .3s 0s; + transition: ease all .3s 0s; } + .next-radio-button > label:hover, .next-radio-button > label:focus, .next-radio-button > label.hovered { + z-index: 10; + border-color: #A0A2AD; + background-color: #F2F3F7; } + .next-radio-button > label:hover .next-radio-label, .next-radio-button > label:focus .next-radio-label, .next-radio-button > label.hovered .next-radio-label { + color: #333333; } + .next-radio-button > label.checked { + z-index: 11; + border-color: #5584FF; + background-color: #FFFFFF; } + .next-radio-button > label.checked .next-radio-label { + color: #5584FF; } + .next-radio-button > label.disabled { + z-index: 0; + cursor: not-allowed; + border-color: #E6E7EB; + background-color: #F7F8FA; } + .next-radio-button > label.disabled .next-radio-label { + color: #CCCCCC; } + .next-radio-button > label.checked.disabled { + z-index: 0; + border-color: #E6E7EB; + background-color: #F2F3F7; } + .next-radio-button > label.checked.disabled .next-radio-label { + color: #CCCCCC; } + +.next-radio-button-large > label { + padding: 0 8px; + height: 40px; + line-height: 40px; } + .next-radio-button-large > label:first-child { + margin-left: 0; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } + .next-radio-button-large > label:last-child { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; } + +.next-radio-button-large .next-radio-label { + height: 38px; + line-height: 38px; + font-size: 16px; } + +.next-radio-button-medium > label { + padding: 0 8px; + height: 28px; + line-height: 28px; } + .next-radio-button-medium > label:first-child { + margin-left: 0; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } + .next-radio-button-medium > label:last-child { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; } + +.next-radio-button-medium .next-radio-label { + height: 26px; + line-height: 26px; + font-size: 12px; } + +.next-radio-button-small > label { + padding: 0 8px; + height: 20px; + line-height: 20px; } + .next-radio-button-small > label:first-child { + margin-left: 0; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } + .next-radio-button-small > label:last-child { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; } + +.next-radio-button-small .next-radio-label { + height: 18px; + line-height: 18px; + font-size: 12px; } + +.next-radio-single-input input[type="radio"] { + opacity: 0; + position: absolute; + top: 0; + left: 0; + margin: 0; } + +.next-radio-group { + display: inline-block; } + .next-radio-group .next-radio-label { + color: #333333; + margin-right: 16px; } + .next-radio-group.disabled .next-radio-label { + color: #CCCCCC; } + +.next-radio-group-ver .next-radio-wrapper { + display: block; + margin-bottom: 8px; } + +.next-radio-label { + margin: 0; + margin-left: 4px; + font-size: 12px; + vertical-align: middle; + line-height: 1; } + +@-moz-document url-prefix() { + .next-radio { + margin-top: -1px; } + @supports ((-webkit-animation: calc(0s)) or (animation: calc(0s))) { + /* firefox 57+ */ + .next-radio { + margin-top: -3px; } } } + +@-webkit-keyframes fadeInRightForTag { + 0% { + opacity: 0; + -webkit-transform: rotate(45deg) translateX(20px); + transform: rotate(45deg) translateX(20px); } + 100% { + opacity: 1; + -webkit-transform: rotate(45deg) translateX(0); + transform: rotate(45deg) translateX(0); } } + +@keyframes fadeInRightForTag { + 0% { + opacity: 0; + -webkit-transform: rotate(45deg) translateX(20px); + transform: rotate(45deg) translateX(20px); } + 100% { + opacity: 1; + -webkit-transform: rotate(45deg) translateX(0); + transform: rotate(45deg) translateX(0); } } + +.next-tag > .next-tag-body { + overflow: hidden; + text-overflow: ellipsis; } + +.next-tag-checkable.next-tag-level-secondary { + color: #333333; + border-color: transparent; + background-color: transparent; } + .next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):hover, .next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]).hover, .next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):focus { + color: #5584FF; } + +.next-tag-default.next-tag-level-primary, .next-tag-closable.next-tag-level-primary { + color: #666666; + border-color: #EBECF0; + background-color: #EBECF0; } + .next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover, .next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover, .next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover, .next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover, .next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus, .next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus { + color: #333333; + border-color: #E2E4E8; + background-color: #E2E4E8; } + .next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover > .next-tag-close-btn, .next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover > .next-tag-close-btn, .next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover > .next-tag-close-btn, .next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover > .next-tag-close-btn, .next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus > .next-tag-close-btn, .next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus > .next-tag-close-btn { + color: #333333; } + [disabled].next-tag-default.next-tag-level-primary, [disabled].next-tag-closable.next-tag-level-primary, .disabled.next-tag-default.next-tag-level-primary, .disabled.next-tag-closable.next-tag-level-primary { + color: #CCCCCC; + border-color: #F7F8FA; + background-color: #F7F8FA; } + [disabled].next-tag-default.next-tag-level-primary > .next-tag-close-btn, [disabled].next-tag-closable.next-tag-level-primary > .next-tag-close-btn, .disabled.next-tag-default.next-tag-level-primary > .next-tag-close-btn, .disabled.next-tag-closable.next-tag-level-primary > .next-tag-close-btn { + color: #CCCCCC; } + .next-tag-default.next-tag-level-primary > .next-tag-close-btn, .next-tag-closable.next-tag-level-primary > .next-tag-close-btn { + color: #666666; } + +.next-tag-checkable.next-tag-level-primary { + color: #666666; + border-color: #EBECF0; + background-color: #EBECF0; } + .next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover, .next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover, .next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus { + color: #333333; + border-color: #E2E4E8; + background-color: #E2E4E8; } + .next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover > .next-tag-close-btn, .next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover > .next-tag-close-btn, .next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus > .next-tag-close-btn { + color: #333333; } + [disabled].next-tag-checkable.next-tag-level-primary, .disabled.next-tag-checkable.next-tag-level-primary { + color: #CCCCCC; + border-color: #F7F8FA; + background-color: #F7F8FA; } + [disabled].next-tag-checkable.next-tag-level-primary > .next-tag-close-btn, .disabled.next-tag-checkable.next-tag-level-primary > .next-tag-close-btn { + color: #CCCCCC; } + .next-tag-checkable.next-tag-level-primary > .next-tag-close-btn { + color: #666666; } + +.next-tag-checkable.next-tag-level-primary.checked { + color: #FFFFFF; + border-color: #5584FF; + background-color: #5584FF; } + .next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover, .next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover, .next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus { + color: #FFFFFF; + border-color: #3E71F7; + background-color: #3E71F7; } + .next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover > .next-tag-close-btn, .next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover > .next-tag-close-btn, .next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus > .next-tag-close-btn { + color: #FFFFFF; } + .next-tag-checkable.next-tag-level-primary.checked > .next-tag-close-btn { + color: #FFFFFF; } + +.next-tag-default.next-tag-level-normal { + color: #666666; + border-color: #C4C6CF; + background-color: transparent; } + .next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover, .next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover, .next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus { + color: #333333; + border-color: #A0A2AD; + background-color: transparent; } + .next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover > .next-tag-close-btn, .next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover > .next-tag-close-btn, .next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus > .next-tag-close-btn { + color: #333333; } + [disabled].next-tag-default.next-tag-level-normal, .disabled.next-tag-default.next-tag-level-normal { + color: #CCCCCC; + border-color: #E6E7EB; + background-color: #F7F8FA; } + [disabled].next-tag-default.next-tag-level-normal > .next-tag-close-btn, .disabled.next-tag-default.next-tag-level-normal > .next-tag-close-btn { + color: #CCCCCC; } + .next-tag-default.next-tag-level-normal > .next-tag-close-btn { + color: #666666; } + +.next-tag-closable.next-tag-level-normal { + color: #666666; + border-color: #C4C6CF; + background-color: transparent; } + .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover, .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover, .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus { + color: #333333; + border-color: #A0A2AD; + background-color: transparent; } + .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover > .next-tag-close-btn, .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover > .next-tag-close-btn, .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus > .next-tag-close-btn { + color: #333333; } + [disabled].next-tag-closable.next-tag-level-normal, .disabled.next-tag-closable.next-tag-level-normal { + color: #CCCCCC; + border-color: #E6E7EB; + background-color: transparent; } + [disabled].next-tag-closable.next-tag-level-normal > .next-tag-close-btn, .disabled.next-tag-closable.next-tag-level-normal > .next-tag-close-btn { + color: #CCCCCC; } + .next-tag-closable.next-tag-level-normal > .next-tag-close-btn { + color: #666666; } + +.next-tag-checkable.next-tag-level-normal.checked, .next-tag-checkable.next-tag-level-secondary.checked { + color: #5584FF; + border-color: #5584FF; + background-color: transparent; } + .next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover, .next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover, .next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover, .next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover, .next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus, .next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus { + color: #3E71F7; + border-color: #3E71F7; + background-color: transparent; } + +.next-tag-checkable.next-tag-level-secondary.checked:before { + position: absolute; + content: ""; + -webkit-font-smoothing: antialiased; + background-color: #5584FF; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); } + +.next-tag-checkable.next-tag-level-secondary.checked:after { + position: absolute; + font-family: NextIcon; + -webkit-font-smoothing: antialiased; + content: "\E632"; + -webkit-transform: scale(0.6); + -ms-transform: scale(0.6); + transform: scale(0.6); + color: #FFFFFF; } + +.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:before, .next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:before, .next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:before { + background-color: #3E71F7; } + +.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:after, .next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:after, .next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:after { + color: #FFFFFF; } + +[disabled].next-tag-checkable.next-tag-level-secondary.checked:before, .next-tag-checkable.next-tag-level-secondary.checked:disabled:before { + background-color: #E6E7EB; } + +[disabled].next-tag-checkable.next-tag-level-secondary.checked:after, .next-tag-checkable.next-tag-level-secondary.checked:disabled:after { + color: #FFFFFF; } + +.next-tag-checkable.next-tag-level-normal { + color: #666666; + border-color: #C4C6CF; + background-color: transparent; } + .next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):hover, .next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]).hover, .next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):focus { + color: #333333; + border-color: #C4C6CF; + background-color: transparent; } + [disabled].next-tag-checkable.next-tag-level-normal, .disabled.next-tag-checkable.next-tag-level-normal { + color: #CCCCCC; + border-color: #E6E7EB; + background-color: #F7F8FA; } + +.next-tag-checkable.next-tag-level-normal.checked:before { + position: absolute; + content: ""; + -webkit-font-smoothing: antialiased; + background-color: #5584FF; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); } + +.next-tag-checkable.next-tag-level-normal.checked:after { + position: absolute; + font-family: NextIcon; + -webkit-font-smoothing: antialiased; + content: "\E632"; + -webkit-transform: scale(0.6); + -ms-transform: scale(0.6); + transform: scale(0.6); + color: #FFFFFF; } + +.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:before, .next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:before, .next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:before { + background-color: #3E71F7; } + +.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:after, .next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:after, .next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:after { + color: #FFFFFF; } + +[disabled].next-tag-checkable.next-tag-level-normal.checked:before, .next-tag-checkable.next-tag-level-normal.checked:disabled:before { + background-color: #E6E7EB; } + +[disabled].next-tag-checkable.next-tag-level-normal.checked:after, .next-tag-checkable.next-tag-level-normal.checked:disabled:after { + color: #FFFFFF; } + +.next-tag-closable.next-tag-level-normal:before { + position: absolute; + content: ""; + -webkit-font-smoothing: antialiased; + background-color: #C4C6CF; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); } + +.next-tag-closable.next-tag-level-normal:after { + position: absolute; + font-family: NextIcon; + -webkit-font-smoothing: antialiased; + content: "\E626"; + -webkit-transform: scale(0.6); + -ms-transform: scale(0.6); + transform: scale(0.6); + color: #FFFFFF; } + +.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:before, .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:before, .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:before { + background-color: #A0A2AD; } + +.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:after, .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:after, .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:after { + color: #FFFFFF; } + +[disabled].next-tag-closable.next-tag-level-normal:before, .next-tag-closable.next-tag-level-normal:disabled:before { + background-color: #E6E7EB; } + +[disabled].next-tag-closable.next-tag-level-normal:after, .next-tag-closable.next-tag-level-normal:disabled:after { + color: #FFFFFF; } + +.next- { + /* Animation */ + /* ----------- */ } + .next-tag-group .next-tag-medium, + .next-tag-group .next-tag-large { + margin-right: 8px; + margin-bottom: 8px; } + .next-tag-group .next-tag-small { + margin-right: 4px; + margin-bottom: 4px; } + .next-tag { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; + max-width: 100%; + vertical-align: middle; + border-width: 1px; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; + /* 可配置??? */ + overflow: hidden; + white-space: nowrap; + -webkit-transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1); + transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1); + font-size: 0; + outline: 0; } + .next-tag *, + .next-tag *:before, + .next-tag *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-tag > .next-tag-body { + position: relative; + display: inline-block; + height: 100%; + text-align: center; + vertical-align: middle; + max-width: 100%; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + /* 用户手动传的 icon 的大小也保持一致？ */ } + .next-tag > .next-tag-body > a { + text-decoration: none; + color: inherit; } + .next-tag > .next-tag-body > a:before { + content: " "; + position: absolute; + display: block; + top: 0; + left: 0; + right: 0; + bottom: 0; } + .next-tag > .next-tag-body .next-icon { + line-height: 1; + vertical-align: middle; } + .next-tag > .next-tag-body .next-icon:before { + font-size: inherit; } + .next-tag.next-tag-body-pointer { + cursor: pointer; } + .next-tag[disabled], .next-tag.disabled { + cursor: not-allowed; + pointer-events: none; } + .next-tag-large { + height: 40px; + padding: 0; + line-height: 38px; + font-size: 0; } + .next-tag-large > .next-tag-body { + font-size: 16px; + padding: 0 16px; + min-width: 48px; } + .next-tag-large.next-tag-closable > .next-tag-body { + padding: 0 0 0 16px; } + .next-tag-large[dir=rtl].next-tag-closable > .next-tag-body { + padding: 0 16px 0 0; } + .next-tag-large > .next-tag-close-btn { + margin-left: 12px; + padding-right: 16px; } + .next-tag-large > .next-tag-close-btn .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-tag-large[dir=rtl] > .next-tag-close-btn { + margin-right: 12px; + margin-left: 0; + padding-right: 0; + padding-left: 16px; } + .next-tag-medium { + height: 28px; + padding: 0; + line-height: 26px; + font-size: 0; } + .next-tag-medium > .next-tag-body { + font-size: 14px; + padding: 0 12px; + min-width: 40px; } + .next-tag-medium.next-tag-closable > .next-tag-body { + padding: 0 0 0 12px; } + .next-tag-medium[dir=rtl].next-tag-closable > .next-tag-body { + padding: 0 12px 0 0; } + .next-tag-medium > .next-tag-close-btn { + margin-left: 8px; + padding-right: 12px; } + .next-tag-medium > .next-tag-close-btn .next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-tag-medium > .next-tag-close-btn .next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-tag-medium > .next-tag-close-btn .next-icon:before { + width: 16px; + font-size: 16px; } } + .next-tag-medium[dir=rtl] > .next-tag-close-btn { + margin-right: 8px; + margin-left: 0; + padding-right: 0; + padding-left: 12px; } + .next-tag-small { + height: 20px; + padding: 0; + line-height: 18px; + font-size: 0; } + .next-tag-small > .next-tag-body { + font-size: 12px; + padding: 0 8px; + min-width: 28px; } + .next-tag-small.next-tag-closable > .next-tag-body { + padding: 0 0 0 8px; } + .next-tag-small[dir=rtl].next-tag-closable > .next-tag-body { + padding: 0 8px 0 0; } + .next-tag-small > .next-tag-close-btn { + margin-left: 8px; + padding-right: 8px; } + .next-tag-small > .next-tag-close-btn .next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-tag-small > .next-tag-close-btn .next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-tag-small > .next-tag-close-btn .next-icon:before { + width: 16px; + font-size: 16px; } } + .next-tag-small[dir=rtl] > .next-tag-close-btn { + margin-right: 8px; + margin-left: 0; + padding-right: 0; + padding-left: 8px; } + .next-tag-default { + cursor: default; } + .next-tag-closable { + position: relative; } + .next-tag-closable.next-tag-large > .next-tag-body { + max-width: calc(100% - 40px); } + .next-tag-closable.next-tag-medium > .next-tag-body { + max-width: calc(100% - 28px); } + .next-tag-closable.next-tag-small > .next-tag-body { + max-width: calc(100% - 20px); } + .next-tag-closable > .next-tag-close-btn { + display: inline-block; + vertical-align: middle; + height: 100%; + text-align: center; + cursor: pointer; } + .next-tag-closable.next-tag-level-normal[disabled], .next-tag-closable.next-tag-level-normal.disabled { + color: #CCCCCC; + border-color: #E6E7EB; + background-color: #F7F8FA; } + .next-tag-checkable { + cursor: pointer; + position: relative; + border-radius: 3px; } + .next-tag-checkable.checked:before { + -webkit-animation: fadeInRightForTag 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + animation: fadeInRightForTag 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); } + .next-tag-checkable.checked:after { + -webkit-animation: zoomIn 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + animation: zoomIn 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); } + .next-tag-checkable.next-tag-small:not(.next-tag-level-primary):before { + right: -10px; + bottom: -10px; + width: 20px; + height: 20px; } + .next-tag-checkable.next-tag-small:not(.next-tag-level-primary):after { + font-size: 8px; + line-height: 8px; + right: 0; + bottom: 0; } + .next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):before { + right: -14px; + bottom: -14px; + width: 28px; + height: 28px; } + .next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):after { + font-size: 12px; + line-height: 12px; + right: 0; + bottom: 0; } + .next-tag-checkable.next-tag-large:not(.next-tag-level-primary):before { + right: -18px; + bottom: -18px; + width: 36px; + height: 36px; } + .next-tag-checkable.next-tag-large:not(.next-tag-level-primary):after { + font-size: 16px; + line-height: 16px; + right: 0; + bottom: 0; } + .next-tag-checkable.next-tag-level-primary[disabled], .next-tag-checkable.next-tag-level-primary.disabled { + color: #CCCCCC; + /* $tag-text-color-disabled; */ + border-color: #F7F8FA; + background-color: #F7F8FA; } + .next-tag-checkable.next-tag-level-secondary[disabled], .next-tag-checkable.next-tag-level-secondary.disabled { + color: #CCCCCC; + border-color: #E6E7EB; + background-color: #F7F8FA; } + .next-tag-zoom-enter, .next-tag-zoom-appear { + -webkit-animation: fadeInLeft 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + animation: fadeInLeft 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; } + .next-tag-zoom-leave { + -webkit-animation: zoomOut .3s ease-in; + animation: zoomOut .3s ease-in; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; } + +.next-checkbox-wrapper[dir="rtl"] { + margin-right: 8px; + margin-left: 0; } + .next-checkbox-wrapper[dir="rtl"]:first-child { + margin-right: 0; } + .next-checkbox-wrapper[dir="rtl"] > .next-checkbox-label { + margin-right: 4px; + margin-left: 0; } + +/* stylelint-disable max-nesting-depth */ +.next-checkbox-wrapper { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-checkbox-wrapper *, + .next-checkbox-wrapper *:before, + .next-checkbox-wrapper *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-checkbox-wrapper .next-checkbox { + display: inline-block; + position: relative; + line-height: 1; + vertical-align: middle; } + .next-checkbox-wrapper input[type="checkbox"] { + opacity: 0; + position: absolute; + top: 0; + left: 0; + width: 16px; + height: 16px; + margin: 0; } + .next-checkbox-wrapper .next-checkbox-inner { + display: block; + width: 16px; + height: 16px; + background: #FFFFFF; + border-radius: 3px; + border: 1px solid #C4C6CF; + -webkit-transition: ease all .3s 0s; + transition: ease all .3s 0s; + text-align: left; + /* 防止继承父级 */ + -webkit-box-shadow: none; + box-shadow: none; + /* box-sizing: content-box; */ } + .next-checkbox-wrapper .next-checkbox-inner > .next-icon { + -webkit-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + position: absolute; + top: 0; + opacity: 0; + line-height: 16px; + -webkit-transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + color: #FFFFFF; + left: 4px; + margin-left: 0; } + .next-checkbox-wrapper .next-checkbox-inner > .next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-checkbox-wrapper .next-checkbox-inner > .next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-checkbox-wrapper .next-checkbox-inner > .next-icon:before { + width: 16px; + font-size: 16px; } } + .next-checkbox-wrapper .next-checkbox-inner > .next-icon::before { + vertical-align: top; + margin-top: 0; } + .next-checkbox-wrapper.checked .next-checkbox-inner { + border-color: transparent; + background-color: #5584FF; } + .next-checkbox-wrapper.checked .next-checkbox-inner:hover, .next-checkbox-wrapper.checked .next-checkbox-inner.hovered { + border-color: transparent; } + .next-checkbox-wrapper.checked .next-checkbox-inner > .next-icon { + opacity: 1; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + margin-left: 0; + /* font-size < 12px的时候进行覆盖。 */ } + .next-checkbox-wrapper.checked .next-checkbox-inner > .next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-checkbox-wrapper.checked .next-checkbox-inner > .next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-checkbox-wrapper.checked .next-checkbox-inner > .next-icon:before { + width: 16px; + font-size: 16px; } } + .next-checkbox-wrapper.indeterminate .next-checkbox-inner { + border-color: transparent; + background-color: #5584FF; } + .next-checkbox-wrapper.indeterminate .next-checkbox-inner:hover, .next-checkbox-wrapper.indeterminate .next-checkbox-inner.hovered { + border-color: transparent; } + .next-checkbox-wrapper.indeterminate .next-checkbox-inner > .next-icon { + opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + margin-left: 0; + /* font-size < 12px的时候进行覆盖。 */ } + .next-checkbox-wrapper.indeterminate .next-checkbox-inner > .next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-checkbox-wrapper.indeterminate .next-checkbox-inner > .next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-checkbox-wrapper.indeterminate .next-checkbox-inner > .next-icon:before { + width: 16px; + font-size: 16px; } } + .next-checkbox-wrapper.disabled input[type="checkbox"] { + cursor: not-allowed; } + .next-checkbox-wrapper.disabled .next-checkbox-inner { + border-color: #E6E7EB; + background: #F7F8FA; } + .next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover, .next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered, .next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover, .next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered { + border-color: #E6E7EB; } + .next-checkbox-wrapper.disabled.checked .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner > .next-icon { + color: #CCCCCC; + opacity: 1; } + .next-checkbox-wrapper:not(.disabled):hover .next-checkbox-inner, .next-checkbox-wrapper.hovered .next-checkbox-inner, .next-checkbox-wrapper.focused .next-checkbox-inner { + border-color: #5584FF; + background-color: #DEE8FF; } + .next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner, .next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner, .next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner, .next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner, .next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner, .next-checkbox-wrapper.checked.focused .next-checkbox-inner { + border-color: transparent; + background-color: #3E71F7; } + .next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.checked.focused .next-checkbox-inner > .next-icon { + color: #FFFFFF; + opacity: 1; } + +.next-checkbox-group .next-checkbox-wrapper { + margin-left: 8px; } + .next-checkbox-group .next-checkbox-wrapper:first-child { + margin-left: 0; } + +.next-checkbox-group-ver .next-checkbox-wrapper { + display: block; + margin-left: 0; + margin-right: 0; + margin-bottom: 8px; } + +.next-checkbox-label { + font-size: 12px; + vertical-align: middle; + margin: 0; + margin-left: 4px; + line-height: 1; } + +.next-menu[dir="rtl"] .next-menu-item-helper { + float: left; } + +.next-menu[dir="rtl"] .next-menu-item .next-checkbox, +.next-menu[dir="rtl"] .next-menu-item .next-radio { + margin-left: 4px; + margin-right: 0; } + +.next-menu[dir="rtl"] .next-menu-hoz-right { + float: left; } + +.next-menu[dir="rtl"] .next-menu-icon-arrow.next-icon { + left: 10px; + right: auto; } + +.next-menu[dir="rtl"] .next-menu-hoz-icon-arrow.next-icon { + left: 6px; + right: auto; } + +.next-menu[dir="rtl"] .next-menu-icon-selected.next-icon { + margin-left: 0; + margin-right: -16px; } + .next-menu[dir="rtl"] .next-menu-icon-selected.next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-menu[dir="rtl"] .next-menu-icon-selected.next-icon.next-menu-icon-right { + right: auto; + left: 4px; } + +.next-menu[dir="rtl"] .next-menu-icon-arrow.next-icon { + left: 10px; + right: auto; } + +.next-menu { + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: relative; + min-width: 100px; + padding: 8px 0; + margin: 0; + list-style: none; + border: 1px solid #DCDEE3; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + background: #FFFFFF; + line-height: 32px; + font-size: 12px; + /* &-popup-content.next-hide { */ + /* display: none; */ + /* } */ } + .next-menu *, + .next-menu *:before, + .next-menu *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-menu:focus, + .next-menu *:focus { + outline: 0; } + .next-menu-embeddable, + .next-menu-embeddable .next-menu-item.next-disabled, + .next-menu-embeddable .next-menu-item.next-disabled .next-menu-item-text > a { + background: initial; + border: none; } + .next-menu-embeddable .next-menu-item-inner { + height: 100%; } + .next-menu-content { + position: relative; + padding: 0; + margin: 0; + list-style: none; } + .next-menu-sub-menu { + padding: 0; + margin: 0; + list-style: none; } + .next-menu-sub-menu.next-expand-enter { + overflow: hidden; } + .next-menu-sub-menu.next-expand-enter-active { + -webkit-transition: height .3s ease-out; + transition: height .3s ease-out; } + .next-menu-sub-menu.next-expand-leave { + overflow: hidden; } + .next-menu-sub-menu.next-expand-leave-active { + -webkit-transition: height .3s ease-out; + transition: height .3s ease-out; } + .next-menu-item { + position: relative; + padding: 0 20px; + -webkit-transition: background .2s ease; + transition: background .2s ease; + color: #333333; + cursor: pointer; } + .next-menu-item-helper { + float: right; + color: #999999; + font-style: normal; + font-size: 12px; } + .next-menu-item .next-checkbox, + .next-menu-item .next-radio { + margin-right: 4px; } + .next-menu-item.next-selected { + color: #333333; + background-color: #FFFFFF; } + .next-menu-item.next-selected .next-menu-icon-arrow { + color: #666666; } + .next-menu-item.next-selected .next-menu-icon-selected { + color: #5584FF; } + .next-menu-item.next-disabled, + .next-menu-item.next-disabled .next-menu-item-text > a { + color: #CCCCCC; + background-color: #FFFFFF; + cursor: not-allowed; } + .next-menu-item.next-disabled .next-menu-icon-arrow, + .next-menu-item.next-disabled .next-menu-item-text > a .next-menu-icon-arrow { + color: #CCCCCC; } + .next-menu-item.next-disabled .next-menu-icon-selected, + .next-menu-item.next-disabled .next-menu-item-text > a .next-menu-icon-selected { + color: #CCCCCC; } + .next-menu-item:not(.next-disabled):hover, .next-menu-item:not(.next-disabled).next-selected:hover, .next-menu-item:not(.next-disabled).next-selected.next-focused:hover, .next-menu-item:not(.next-disabled).next-selected:focus:hover, .next-menu-item:not(.next-disabled).next-focused, .next-menu-item:not(.next-disabled).next-selected.next-focused, .next-menu-item:not(.next-disabled).next-selected:focus { + color: #333333; + background-color: #F2F3F7; } + .next-menu-item:not(.next-disabled):hover .next-menu-icon-arrow, .next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-arrow, .next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-arrow, .next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-arrow, .next-menu-item:not(.next-disabled).next-focused .next-menu-icon-arrow, .next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-arrow, .next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-arrow { + color: #333333; } + .next-menu-item:not(.next-disabled):hover .next-menu-icon-selected, .next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-selected, .next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-selected, .next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-selected, .next-menu-item:not(.next-disabled).next-focused .next-menu-icon-selected, .next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-selected, .next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-selected { + color: #5584FF; } + .next-menu-item-inner { + height: 32px; + font-size: 12px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + word-wrap: normal; } + .next-menu-item-text { + vertical-align: middle; } + .next-menu-item-text > a { + display: inline-block; + text-decoration: none; + color: #333333; } + .next-menu-item-text > a::before { + position: absolute; + background-color: transparent; + top: 0; + left: 0; + bottom: 0; + right: 0; + content: ''; } + .next-menu.next-hoz { + padding: 0; } + .next-menu.next-hoz > .next-menu-item, + .next-menu.next-hoz .next-menu-content > .next-menu-item { + display: inline-block; + vertical-align: top; } + .next-menu.next-hoz .next-menu-header, + .next-menu.next-hoz .next-menu-content, + .next-menu.next-hoz .next-menu-footer { + display: inline-block; } + .next-menu-hoz-right { + float: right; } + .next-menu-group-label { + padding: 0 12px; + color: #999999; } + .next-menu-divider { + margin: 8px 12px; + border-bottom: 1px solid #E6E7EB; } + .next-menu .next-menu-icon-selected.next-icon { + position: absolute; + top: 0; + margin-left: -16px; } + .next-menu .next-menu-icon-selected.next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-menu .next-menu-icon-selected.next-icon.next-menu-icon-right { + right: 4px; } + .next-menu .next-menu-icon-arrow.next-icon { + position: absolute; + top: 0; + right: 10px; + color: #666666; + -webkit-transition: all ease .3s; + transition: all ease .3s; } + .next-menu .next-menu-icon-arrow.next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-menu .next-menu-icon-arrow.next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-menu .next-menu-icon-arrow.next-icon:before { + width: 16px; + font-size: 16px; } } + .next-menu .next-menu-icon-arrow-down.next-open { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + .next-menu .next-menu-icon-arrow-down.next-open:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-menu .next-menu-icon-arrow-down.next-open { + -webkit-transform: scale(0.5) rotate(180deg); + -ms-transform: scale(0.5) rotate(180deg); + transform: scale(0.5) rotate(180deg); + margin-left: -4px; + margin-right: -4px; } + .next-menu .next-menu-icon-arrow-down.next-open:before { + width: 16px; + font-size: 16px; } } + .next-menu .next-menu-icon-arrow-right.next-open { + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); } + .next-menu .next-menu-icon-arrow-right.next-open:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-menu .next-menu-icon-arrow-right.next-open { + -webkit-transform: scale(0.5) rotate(-90deg); + -ms-transform: scale(0.5) rotate(-90deg); + transform: scale(0.5) rotate(-90deg); + margin-left: -4px; + margin-right: -4px; } + .next-menu .next-menu-icon-arrow-right.next-open:before { + width: 16px; + font-size: 16px; } } + .next-menu .next-menu-hoz-icon-arrow.next-icon { + position: absolute; + top: 0; + right: 6px; + color: #666666; + -webkit-transition: all ease .3s; + transition: all ease .3s; } + .next-menu .next-menu-hoz-icon-arrow.next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-menu .next-menu-hoz-icon-arrow.next-open { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + .next-menu .next-menu-hoz-icon-arrow.next-open:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-menu.next-context { + line-height: 24px; } + .next-menu.next-context .next-menu-item-inner { + height: 24px; } + +.next-input { + -webkit-box-sizing: border-box; + box-sizing: border-box; + vertical-align: middle; + display: inline-table; + border-collapse: separate; + font-size: 0; + line-height: 1; + width: 200px; + border-spacing: 0; + -webkit-transition: all .3s ease-out; + transition: all .3s ease-out; + border: 1px solid #C4C6CF; + background-color: #FFFFFF; } + .next-input *, + .next-input *:before, + .next-input *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-input input { + height: 100%; + /* remove autoFill yellow background */ } + .next-input input[type="reset"], .next-input input[type="submit"] { + -webkit-appearance: button; + cursor: pointer; } + .next-input input::-moz-focus-inner { + border: 0; + padding: 0; } + .next-input input:-webkit-autofill { + -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset; } + .next-input textarea { + resize: none; } + .next-input input, + .next-input textarea { + width: 100%; + border: none; + outline: none; + padding: 0; + margin: 0; + font-weight: normal; + vertical-align: middle; + background-color: transparent; + color: #333333; } + .next-input input::-ms-clear, + .next-input textarea::-ms-clear { + display: none; } + .next-input.next-input-textarea { + border-radius: 3px; + font-size: 0; } + .next-input.next-input-textarea textarea { + color: #333333; + padding: 4px 8px; + font-size: 12px; + border-radius: 3px; } + .next-input.next-input-textarea .next-input-control { + display: block; + width: auto; + border-radius: 3px; } + .next-input.next-input-textarea .next-input-len { + padding: 0 8px 4px; + display: block; + text-align: right; + width: auto; } + .next-input.next-small { + height: 20px; + border-radius: 3px; } + .next-input.next-small .next-input-label { + padding-left: 8px; + font-size: 12px; } + .next-input.next-small .next-input-inner { + font-size: 12px; } + .next-input.next-small .next-input-control { + padding-right: 4px; } + .next-input.next-small input { + height: 18px; + line-height: 18px \0; + padding: 0 4px; + font-size: 12px; } + .next-input.next-small input::-webkit-input-placeholder { + font-size: 12px; } + .next-input.next-small input::-moz-placeholder { + font-size: 12px; } + .next-input.next-small input::-ms-input-placeholder { + font-size: 12px; } + .next-input.next-small input::placeholder { + font-size: 12px; } + .next-input.next-small .next-input-text-field { + padding: 0 4px; + font-size: 12px; + height: 18px; + line-height: 18px; } + .next-input.next-small .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-input.next-small input { + border-radius: 3px; } + .next-input.next-small .next-input-control { + border-radius: 0 3px 3px 0; } + .next-input.next-medium { + height: 28px; + border-radius: 3px; } + .next-input.next-medium .next-input-label { + padding-left: 8px; + font-size: 12px; } + .next-input.next-medium .next-input-inner { + font-size: 12px; } + .next-input.next-medium .next-input-control { + padding-right: 8px; } + .next-input.next-medium input { + height: 26px; + line-height: 26px \0; + padding: 0 8px; + font-size: 12px; } + .next-input.next-medium input::-webkit-input-placeholder { + font-size: 12px; } + .next-input.next-medium input::-moz-placeholder { + font-size: 12px; } + .next-input.next-medium input::-ms-input-placeholder { + font-size: 12px; } + .next-input.next-medium input::placeholder { + font-size: 12px; } + .next-input.next-medium .next-input-text-field { + padding: 0 8px; + font-size: 12px; + height: 26px; + line-height: 26px; } + .next-input.next-medium .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-input.next-medium input { + border-radius: 3px; } + .next-input.next-medium .next-input-control { + border-radius: 0 3px 3px 0; } + .next-input.next-large { + height: 40px; + border-radius: 3px; } + .next-input.next-large .next-input-label { + padding-left: 12px; + font-size: 16px; } + .next-input.next-large .next-input-inner { + font-size: 16px; } + .next-input.next-large .next-input-control { + padding-right: 8px; } + .next-input.next-large input { + height: 38px; + line-height: 38px \0; + padding: 0 12px; + font-size: 16px; } + .next-input.next-large input::-webkit-input-placeholder { + font-size: 16px; } + .next-input.next-large input::-moz-placeholder { + font-size: 16px; } + .next-input.next-large input::-ms-input-placeholder { + font-size: 16px; } + .next-input.next-large input::placeholder { + font-size: 16px; } + .next-input.next-large .next-input-text-field { + padding: 0 12px; + font-size: 16px; + height: 38px; + line-height: 38px; } + .next-input.next-large .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-input.next-large input { + border-radius: 3px; } + .next-input.next-large .next-input-control { + border-radius: 0 3px 3px 0; } + .next-input-hint-wrap { + color: #999999; + position: relative; } + .next-input-hint-wrap .next-input-clear { + opacity: 0; + z-index: 1; + position: absolute; } + .next-input-hint-wrap .next-input-hint { + opacity: 1; } + .next-input .next-icon-delete-filling:hover { + cursor: pointer; + color: #666666; } + .next-input:hover, .next-input.next-focus { + border-color: #A0A2AD; + background-color: #FFFFFF; } + .next-input:hover .next-input-clear, .next-input.next-focus .next-input-clear { + opacity: 1; } + .next-input:hover .next-input-clear + .next-input-hint, .next-input.next-focus .next-input-clear + .next-input-hint { + opacity: 0; } + .next-input .next-input-clear:focus { + opacity: 1; } + .next-input .next-input-clear:focus + .next-input-hint { + opacity: 0; } + .next-input.next-focus { + border-color: #5584FF; + background-color: #FFFFFF; } + .next-input.next-error { + border-color: #FF3000; } + .next-input.next-error.next-focus, .next-input.next-error:hover { + border-color: #FF3000; } + .next-input.next-hidden { + display: none; } + .next-input.next-noborder { + border: none; } + .next-input-control .next-input-len { + font-size: 12px; + line-height: 12px; + color: #999999; + display: table-cell; + width: 1px; + vertical-align: bottom; } + .next-input-control .next-input-len.next-error { + color: #FF3000; } + .next-input-control > * { + display: table-cell; + width: 1%; + top: 0; } + .next-input-control > *:not(:last-child) { + padding-right: 4px; } + .next-input-control .next-icon { + -webkit-transition: all .3s ease-out; + transition: all .3s ease-out; + color: #999999; } + .next-input-control .next-icon-success-filling { + color: #46BC15; } + .next-input-control .next-icon-loading { + color: #4494F9; } + .next-input-label { + color: #666666; } + .next-input input::-moz-placeholder, + .next-input textarea::-moz-placeholder { + color: #999999; + opacity: 1; } + .next-input input:-ms-input-placeholder, + .next-input textarea:-ms-input-placeholder { + color: #999999; } + .next-input input::-webkit-input-placeholder, + .next-input textarea::-webkit-input-placeholder { + color: #999999; } + .next-input.next-disabled { + color: #CCCCCC; + border-color: #E6E7EB; + background-color: #F7F8FA; + cursor: not-allowed; + background-color: #F7F8FA; } + .next-input.next-disabled:hover { + border-color: #E6E7EB; + background-color: #F7F8FA; } + .next-input.next-disabled input::-moz-placeholder, .next-input.next-disabled textarea::-moz-placeholder { + color: #CCCCCC; + opacity: 1; } + .next-input.next-disabled input:-ms-input-placeholder, .next-input.next-disabled textarea:-ms-input-placeholder { + color: #CCCCCC; } + .next-input.next-disabled input::-webkit-input-placeholder, .next-input.next-disabled textarea::-webkit-input-placeholder { + color: #CCCCCC; } + .next-input.next-disabled .next-input-label { + color: #CCCCCC; } + .next-input.next-disabled .next-input-len { + color: #CCCCCC; } + .next-input.next-disabled input, + .next-input.next-disabled textarea { + color: #CCCCCC; + border-color: #E6E7EB; + background-color: #F7F8FA; + cursor: not-allowed; } + .next-input.next-disabled input:hover, + .next-input.next-disabled textarea:hover { + border-color: #E6E7EB; + background-color: #F7F8FA; } + .next-input.next-disabled .next-input-hint-wrap { + color: #CCCCCC; } + .next-input.next-disabled .next-input-hint-wrap .next-input-clear { + opacity: 0; } + .next-input.next-disabled .next-input-hint-wrap .next-input-hint { + opacity: 1; } + .next-input.next-disabled .next-input-hint-wrap .next-icon-delete-filling:hover { + cursor: not-allowed; + color: #CCCCCC; } + .next-input.next-disabled .next-icon { + color: #CCCCCC; } + .next-input-inner, .next-input-control, .next-input-label { + display: table-cell; + width: 1px; + vertical-align: middle; + line-height: 1; + background-color: transparent; + white-space: nowrap; } + .next-input-group { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-table; + border-collapse: separate; + border-spacing: 0; + line-height: 0; + width: 100%; } + .next-input-group *, + .next-input-group *:before, + .next-input-group *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-input-group-auto-width { + width: 100%; + border-radius: 0 !important; } + .next-input-group > .next-input:first-child.next-small { + border-top-left-radius: 3px !important; + border-bottom-left-radius: 3px !important; } + .next-input-group > .next-input:first-child.next-medium { + border-top-left-radius: 3px !important; + border-bottom-left-radius: 3px !important; } + .next-input-group > .next-input:first-child.next-large { + border-top-left-radius: 3px !important; + border-bottom-left-radius: 3px !important; } + .next-input-group > .next-input:last-child.next-small { + border-top-right-radius: 3px !important; + border-bottom-right-radius: 3px !important; } + .next-input-group > .next-input:last-child.next-medium { + border-top-right-radius: 3px !important; + border-bottom-right-radius: 3px !important; } + .next-input-group > .next-input:last-child.next-large { + border-top-right-radius: 3px !important; + border-bottom-right-radius: 3px !important; } + .next-input-group-addon { + width: 1px; + display: table-cell; + vertical-align: middle; + white-space: nowrap; + /* stylelint-disable declaration-no-important */ } + .next-input-group-addon:first-child { + border-bottom-right-radius: 0 !important; + border-top-right-radius: 0 !important; } + .next-input-group-addon:first-child > * { + border-bottom-right-radius: 0 !important; + border-top-right-radius: 0 !important; } + .next-input-group-addon:last-child { + border-bottom-left-radius: 0 !important; + border-top-left-radius: 0 !important; } + .next-input-group-addon:last-child > * { + border-bottom-left-radius: 0 !important; + border-top-left-radius: 0 !important; } + .next-input-group-text { + color: #999999; + background-color: #F2F3F7; + text-align: center; + border: 1px solid #C4C6CF; + padding: 0 8px; } + .next-input-group-text:first-child { + border-right-width: 0; } + .next-input-group-text:last-child { + border-left-width: 0; } + .next-input-group-text.next-disabled { + color: #CCCCCC; + border-color: #E6E7EB; + background-color: #F7F8FA; + cursor: not-allowed; } + .next-input-group-text.next-disabled:hover { + border-color: #E6E7EB; + background-color: #F7F8FA; } + .next-input-group-text.next-small { + font-size: 12px; + border-radius: 3px; } + .next-input-group-text.next-medium { + font-size: 12px; + border-radius: 3px; } + .next-input-group-text.next-large { + font-size: 16px; + border-radius: 3px; } + +.next-input[dir="rtl"].next-small .next-input-label { + padding-left: 0; + padding-right: 8px; } + +.next-input[dir="rtl"].next-small .next-input-control { + padding-right: 0; + padding-left: 4px; } + +.next-input[dir="rtl"].next-medium .next-input-label { + padding-left: 0; + padding-right: 8px; } + +.next-input[dir="rtl"].next-medium .next-input-control { + padding-right: 0; + padding-left: 8px; } + +.next-input[dir="rtl"].next-large .next-input-label { + padding-left: 0; + padding-right: 12px; } + +.next-input[dir="rtl"].next-large .next-input-control { + padding-right: 0; + padding-left: 8px; } + +.next-input[dir="rtl"].next-input-textarea .next-input-len { + text-align: left; } + +.next-input[dir="rtl"] .next-input-control > *:not(:last-child) { + padding-left: 4px; + padding-right: 0; } + +.next-input-group[dir="rtl"] .next-input-group-addon { + /* stylelint-disable declaration-no-important */ } + .next-input-group[dir="rtl"] .next-input-group-addon:first-child { + border-bottom-left-radius: 0 !important; + border-top-left-radius: 0 !important; } + .next-input-group[dir="rtl"] .next-input-group-addon:first-child.next-small { + border-bottom-right-radius: 3px !important; + border-top-right-radius: 3px !important; } + .next-input-group[dir="rtl"] .next-input-group-addon:first-child.next-medium { + border-bottom-right-radius: 3px !important; + border-top-right-radius: 3px !important; } + .next-input-group[dir="rtl"] .next-input-group-addon:first-child.next-large { + border-bottom-right-radius: 3px !important; + border-top-right-radius: 3px !important; } + .next-input-group[dir="rtl"] .next-input-group-addon:last-child { + border-bottom-right-radius: 0 !important; + border-top-right-radius: 0 !important; } + .next-input-group[dir="rtl"] .next-input-group-addon:last-child.next-small { + border-bottom-left-radius: 3px !important; + border-top-left-radius: 3px !important; } + .next-input-group[dir="rtl"] .next-input-group-addon:last-child.next-medium { + border-bottom-left-radius: 3px !important; + border-top-left-radius: 3px !important; } + .next-input-group[dir="rtl"] .next-input-group-addon:last-child.next-large { + border-bottom-left-radius: 3px !important; + border-top-left-radius: 3px !important; } + +.next-input-group[dir="rtl"] .next-input-group-text:first-child { + border-right-width: 1px; + border-left: 0; } + +.next-input-group[dir="rtl"] .next-input-group-text:last-child { + border-left-width: 1px; + border-right: 0; } + +.next-select { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; + font-size: 0; + vertical-align: middle; + /* Select trigger */ + /* 弹层 */ + /* 全选按钮 */ + /* -------------- IE polyfill -------------- */ + /* 根据最新的数据，在中国，PC 端的 IE9 份额为 2%， */ + /* 所以不应该因为 IE9 而不使用 flex，而是应该做降级 polyfill */ + /* @see http://gs.statcounter.com/ */ + /* IE10、IE11 虽然支持 flex，但还是会有各种各样奇奇怪怪的问题 */ } + .next-select *, + .next-select *:before, + .next-select *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-select-trigger { + min-width: 100px; + outline: 0; + -webkit-transition: all .3s ease; + transition: all .3s ease; } + .next-select-trigger .next-input-label { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: auto; } + .next-select-trigger .next-select-values { + display: block; + width: 100%; + -webkit-box-flex: 1; + -ms-flex: 1 1 0px; + flex: 1 1 0; + overflow: hidden; } + .next-select-trigger .next-select-values > em { + font-style: inherit; } + .next-select-trigger .next-select-values input { + padding-left: 0; + padding-right: 0; } + .next-select-trigger .next-input-control { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: auto; } + .next-select-trigger .next-input-control > * { + display: inline-block; + width: auto; } + .next-select-trigger .next-input-control > .next-select-arrow { + padding-right: 0; } + .next-select-trigger .next-input.next-disabled em { + color: #CCCCCC; } + .next-select-trigger .next-input.next-disabled .next-select-arrow { + cursor: not-allowed; } + .next-select-trigger .next-select-clear { + display: none; } + .next-select-trigger.next-has-clear:hover .next-select-clear { + display: inline-block; } + .next-select-trigger.next-has-clear:hover .next-select-arrow { + display: none; } + .next-select .next-select-inner { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 100%; + min-width: 100px; + outline: 0; + color: #333333; } + .next-select .next-select-inner .next-tag { + line-height: 1; + margin-right: 4px; + margin-bottom: 3px; + padding-left: 4px; + padding-right: 4px; } + .next-select-trigger-search { + position: relative; + display: inline-block; + vertical-align: top; + overflow: hidden; + width: 100%; + max-width: 100%; } + .next-select-trigger-search > input, .next-select-trigger-search > span { + display: block; + font-size: inherit; + font-family: inherit; + letter-spacing: inherit; + white-space: nowrap; + overflow: hidden; } + .next-select-trigger-search input { + position: absolute; + background-color: transparent; + width: 100%; + height: 100% !important; + z-index: 1; + left: 0; + border: 0; + outline: 0; + margin: 0; + padding: 0; + cursor: inherit; } + .next-select-trigger-search > span { + position: relative; + visibility: hidden; + white-space: pre; + max-width: 100%; + /* 在 table 布局中，100% 并没有什么x用 */ + z-index: -1; } + .next-select-single { + /* 搜索框激活时，展开后不显示值，只显示搜索框 */ + /* 搜索框未激活，或者menu未展开，如果有值，则不显示搜索(placeholder) */ } + .next-select-single.next-no-search { + cursor: pointer; } + .next-select-single.next-has-search.next-active .next-select-values > em { + display: none; } + .next-select-single.next-no-search .next-select-values > em + .next-select-trigger-search, .next-select-single.next-inactive .next-select-values > em + .next-select-trigger-search { + width: 1px; + opacity: 0; + filter: alpha(opacity=0); + /* for IE 9 */ } + .next-select-single.next-no-search .next-select-trigger-search input, .next-select-single.next-inactive .next-select-trigger-search input { + color: transparent; } + .next-select-single .next-select-values { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } + .next-select-single .next-select-values > em { + vertical-align: middle; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + .next-select-multiple, .next-select-tag { + /* 如果有值，则搜索框变为1px */ } + .next-select-multiple .next-select-values, .next-select-tag .next-select-values { + /* Tag 有 3px 的 margin-bottom，所以包裹 Tag 的容器要作一下处理 */ + margin-bottom: -3px; + height: auto !important; } + .next-select-multiple .next-select-trigger-search, .next-select-tag .next-select-trigger-search { + margin-bottom: 3px; } + .next-select-multiple .next-tag + .next-select-trigger-search, .next-select-tag .next-tag + .next-select-trigger-search { + width: auto; + min-width: 1px; + /* 保留一个光标的宽度 */ } + .next-select-multiple .next-input, .next-select-tag .next-input { + height: auto; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: start; } + .next-select-multiple.next-small .next-select-values, .next-select-tag.next-small .next-select-values { + min-height: 18px; + padding-top: 2px; + padding-bottom: 2px; + line-height: 14px; } + .next-select-multiple.next-small .next-tag, .next-select-tag.next-small .next-tag { + border: 0; + padding-top: 0px; + padding-bottom: 0px; + height: 14px; } + .next-select-multiple.next-small .next-tag .next-tag-body, .next-select-multiple.next-small .next-tag .next-tag-close-btn, .next-select-tag.next-small .next-tag .next-tag-body, .next-select-tag.next-small .next-tag .next-tag-close-btn { + line-height: 14px; } + .next-select-multiple.next-small .next-tag-body, .next-select-tag.next-small .next-tag-body { + line-height: 14px; } + .next-select-multiple.next-small .next-input-label, .next-select-multiple.next-small .next-input-control, .next-select-tag.next-small .next-input-label, .next-select-tag.next-small .next-input-control { + line-height: 18px; } + .next-select-multiple.next-medium .next-select-values, .next-select-tag.next-medium .next-select-values { + min-height: 26px; + padding-top: 3px; + padding-bottom: 3px; + line-height: 20px; } + .next-select-multiple.next-medium .next-tag, .next-select-tag.next-medium .next-tag { + padding-top: 1px; + padding-bottom: 1px; + height: 20px; } + .next-select-multiple.next-medium .next-tag .next-tag-body, .next-select-multiple.next-medium .next-tag .next-tag-close-btn, .next-select-tag.next-medium .next-tag .next-tag-body, .next-select-tag.next-medium .next-tag .next-tag-close-btn { + line-height: 18px; } + .next-select-multiple.next-medium .next-input-label, .next-select-multiple.next-medium .next-input-control, .next-select-tag.next-medium .next-input-label, .next-select-tag.next-medium .next-input-control { + line-height: 26px; } + .next-select-multiple.next-large .next-select-values, .next-select-tag.next-large .next-select-values { + min-height: 38px; + padding-top: 7px; + padding-bottom: 7px; + line-height: 24px; } + .next-select-multiple.next-large .next-tag, .next-select-tag.next-large .next-tag { + padding-top: 3px; + padding-bottom: 3px; + height: 24px; } + .next-select-multiple.next-large .next-tag .next-tag-body, .next-select-multiple.next-large .next-tag .next-tag-close-btn, .next-select-tag.next-large .next-tag .next-tag-body, .next-select-tag.next-large .next-tag .next-tag-close-btn { + line-height: 18px; } + .next-select-multiple.next-large .next-input-label, .next-select-multiple.next-large .next-input-control, .next-select-tag.next-large .next-input-label, .next-select-tag.next-large .next-input-control { + line-height: 38px; } + .next-select.next-no-search { + /* 在搜索框未激活时，将 input 的 color 置为透明 */ + /* ISSUE: 在 firefox 中，readonly 的 input 仍然会显示光标 */ } + .next-select.next-no-search .next-select-trigger-search input { + color: transparent; } + .next-select-auto-complete { + width: 160px; } + .next-select-auto-complete .next-input { + width: 100%; + /* table-cell 下 margin 无效 */ } + .next-select-auto-complete .next-input .next-input-hint-wrap { + padding-right: 1px; } + .next-select-auto-complete .next-input .next-select-arrow { + padding-left: 0; } + .next-select.next-active .next-select-arrow { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + .next-select-arrow { + cursor: pointer; + width: auto !important; + text-align: center; + -webkit-transition: all .3s ease; + transition: all .3s ease; + /* transform-origin: center 41.8%; // icon 图像中心 */ } + .next-select-menu-wrapper { + max-height: 260px; + overflow: auto; + border: 1px solid #DCDEE3; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; } + .next-select-menu-wrapper .next-select-menu { + max-height: none; + border: none; } + .next-select-menu { + max-height: 260px; + overflow: auto; + /* autoComplete 没有选项时 menu 不显示 */ } + .next-select-menu .next-select-menu-empty-content { + padding-left: 8px; + padding-right: 8px; + color: #999999; } + .next-select-menu.next-select-auto-complete-menu.next-select-menu-empty { + display: none; } + .next-select-menu .next-menu-item-text .next-icon { + vertical-align: middle; } + .next-select-all { + display: block; + cursor: pointer; + padding: 0 8px; + margin: 0 12px 8px; + border-bottom: 1px solid #DCDEE3; } + .next-select-all:hover { + color: #3E71F7; } + .next-select-all .next-menu-icon-selected.next-icon { + display: inline-block !important; + top: initial; + color: #5584FF; } + .next-select-highlight { + color: #5584FF; + font-size: 12px; } + .next-select-in-ie.next-select-trigger .next-select-values { + /* 在 table 布局中，overflow: hidden 会导致负的 margin 失效 */ + overflow: visible; } + .next-select-in-ie.next-select-trigger .next-input-control, .next-select-in-ie.next-select-trigger .next-input-label { + width: 1px; } + .next-select-in-ie.next-select-trigger .next-input-control > * { + display: table-cell; + width: 1%; } + .next-select-in-ie.next-select-trigger .next-select-arrow { + display: table-cell; } + .next-select-in-ie.next-select-trigger .next-select-clear { + display: none; } + .next-select-in-ie.next-select-trigger.next-select-multiple .next-select-inner, .next-select-in-ie.next-select-trigger.next-select-tag .next-select-inner { + vertical-align: top; } + .next-select-in-ie.next-select-trigger .next-select-inner { + display: inline-table; } + .next-select-in-ie.next-select-trigger.next-select-single .next-select-values { + display: inline-table; } + .next-select-in-ie.next-select-trigger.next-select-single .next-input.next-small .next-select-values { + line-height: 20px; } + .next-select-in-ie.next-select-trigger.next-select-single .next-input.next-medium .next-select-values { + line-height: 28px; } + .next-select-in-ie.next-select-trigger.next-select-single .next-input.next-large .next-select-values { + line-height: 40px; } + .next-select-in-ie.next-select-trigger .next-select-trigger-search > span { + max-width: 100px; } + .next-select-in-ie.next-select-trigger.next-select-single { + /* 搜索框未激活，或者menu未展开，如果有值，则不显示搜索(placeholder) */ } + .next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values { + position: relative; } + .next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values > em { + position: absolute; + display: inline-block; + height: 100%; + line-height: 1; + vertical-align: middle; + overflow: hidden; + left: 4px; + right: 0; + top: 30%; } + .next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-values > em + .next-select-trigger-search, .next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-values > em + .next-select-trigger-search { + filter: alpha(opacity=0); + /* for IE 9 */ + font-size: 0; } + .next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-trigger-search input, .next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-trigger-search input { + color: inherit; } + .next-select-in-ie.next-select-trigger.next-no-search .next-select-trigger-search input { + color: inherit; } + +.next-calendar { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-calendar *, + .next-calendar *:before, + .next-calendar *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-calendar table { + border-collapse: collapse; + border-spacing: 0; } + .next-calendar td, + .next-calendar th { + padding: 0; } + +@-webkit-keyframes cellZoomIn { + 0% { + -webkit-transform: scale(0.5); + transform: scale(0.5); } + 100% { + -webkit-transform: scale(1); + transform: scale(1); } } + +@keyframes cellZoomIn { + 0% { + -webkit-transform: scale(0.5); + transform: scale(0.5); } + 100% { + -webkit-transform: scale(1); + transform: scale(1); } } + +@-webkit-keyframes cellHover { + 0% { + opacity: 0; } + 100% { + opacity: 1; } } + +@keyframes cellHover { + 0% { + opacity: 0; } + 100% { + opacity: 1; } } + +@-webkit-keyframes enterToLeft { + 0% { + -webkit-transform: translate(-40%); + transform: translate(-40%); + opacity: 0; } + 50% { + opacity: .6; } + 100% { + opacity: 1; + -webkit-transform: translate(0%); + transform: translate(0%); } } + +@keyframes enterToLeft { + 0% { + -webkit-transform: translate(-40%); + transform: translate(-40%); + opacity: 0; } + 50% { + opacity: .6; } + 100% { + opacity: 1; + -webkit-transform: translate(0%); + transform: translate(0%); } } + +@-webkit-keyframes enterToRight { + 0% { + -webkit-transform: translate(40%); + transform: translate(40%); + opacity: 0; } + 50% { + opacity: .6; } + 100% { + opacity: 1; + -webkit-transform: translate(0%); + transform: translate(0%); } } + +@keyframes enterToRight { + 0% { + -webkit-transform: translate(40%); + transform: translate(40%); + opacity: 0; } + 50% { + opacity: .6; } + 100% { + opacity: 1; + -webkit-transform: translate(0%); + transform: translate(0%); } } + +.next-calendar-fullscreen .next-calendar-header, .next-calendar-card .next-calendar-header { + text-align: right; } + .next-calendar-fullscreen .next-calendar-header .next-select, .next-calendar-card .next-calendar-header .next-select { + margin-right: 4px; + vertical-align: top; } + .next-calendar-fullscreen .next-calendar-header .next-menu, .next-calendar-card .next-calendar-header .next-menu { + text-align: left; } + +.next-calendar-fullscreen .next-calendar-header { + margin-bottom: 8px; } + +.next-calendar-card .next-calendar-header { + margin-bottom: 8px; } + +.next-calendar-panel-header { + position: relative; + background: #5584FF; + margin-bottom: 8px; + border-bottom: 1px solid transparent; } + .next-calendar-panel-header-left, .next-calendar-panel-header-right, .next-calendar-panel-header-full { + height: 32px; + line-height: 32px; } + .next-calendar-panel-header-left .next-calendar-btn, .next-calendar-panel-header-right .next-calendar-btn, .next-calendar-panel-header-full .next-calendar-btn { + vertical-align: top; + font-weight: bold; + margin: 0 4px; + background-color: transparent; + border-color: transparent; } + .next-calendar-panel-header-left .next-calendar-btn, .next-calendar-panel-header-left .next-calendar-btn:link, .next-calendar-panel-header-left .next-calendar-btn:visited, .next-calendar-panel-header-left .next-calendar-btn.visited, .next-calendar-panel-header-right .next-calendar-btn, .next-calendar-panel-header-right .next-calendar-btn:link, .next-calendar-panel-header-right .next-calendar-btn:visited, .next-calendar-panel-header-right .next-calendar-btn.visited, .next-calendar-panel-header-full .next-calendar-btn, .next-calendar-panel-header-full .next-calendar-btn:link, .next-calendar-panel-header-full .next-calendar-btn:visited, .next-calendar-panel-header-full .next-calendar-btn.visited { + color: #FFFFFF; } + .next-calendar-panel-header-left .next-calendar-btn:focus, .next-calendar-panel-header-left .next-calendar-btn:hover, .next-calendar-panel-header-left .next-calendar-btn.hover, .next-calendar-panel-header-left .next-calendar-btn:active, .next-calendar-panel-header-left .next-calendar-btn.active, .next-calendar-panel-header-right .next-calendar-btn:focus, .next-calendar-panel-header-right .next-calendar-btn:hover, .next-calendar-panel-header-right .next-calendar-btn.hover, .next-calendar-panel-header-right .next-calendar-btn:active, .next-calendar-panel-header-right .next-calendar-btn.active, .next-calendar-panel-header-full .next-calendar-btn:focus, .next-calendar-panel-header-full .next-calendar-btn:hover, .next-calendar-panel-header-full .next-calendar-btn.hover, .next-calendar-panel-header-full .next-calendar-btn:active, .next-calendar-panel-header-full .next-calendar-btn.active { + color: #FFFFFF; + background-color: transparent; + border-color: transparent; + text-decoration: none; } + .next-calendar-panel-header-left, .next-calendar-panel-header-right { + display: inline-block; + width: 50%; + text-align: center; } + .next-calendar-panel-header-full { + width: 100%; + text-align: center; } + +.next-calendar-btn { + cursor: pointer; + padding: 0; + margin: 0; + border: 0; + background: transparent; + outline: none; + height: 100%; } + .next-calendar-btn > .next-icon.next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-calendar-btn-prev-year, .next-calendar-btn-prev-month, .next-calendar-btn-prev-decade, .next-calendar-btn-next-month, .next-calendar-btn-next-year, .next-calendar-btn-next-decade { + position: absolute; + top: 0; + background-color: transparent; + border-color: transparent; } + .next-calendar-btn-prev-year, .next-calendar-btn-prev-year:link, .next-calendar-btn-prev-year:visited, .next-calendar-btn-prev-year.visited, .next-calendar-btn-prev-month, .next-calendar-btn-prev-month:link, .next-calendar-btn-prev-month:visited, .next-calendar-btn-prev-month.visited, .next-calendar-btn-prev-decade, .next-calendar-btn-prev-decade:link, .next-calendar-btn-prev-decade:visited, .next-calendar-btn-prev-decade.visited, .next-calendar-btn-next-month, .next-calendar-btn-next-month:link, .next-calendar-btn-next-month:visited, .next-calendar-btn-next-month.visited, .next-calendar-btn-next-year, .next-calendar-btn-next-year:link, .next-calendar-btn-next-year:visited, .next-calendar-btn-next-year.visited, .next-calendar-btn-next-decade, .next-calendar-btn-next-decade:link, .next-calendar-btn-next-decade:visited, .next-calendar-btn-next-decade.visited { + color: #FFFFFF; } + .next-calendar-btn-prev-year:focus, .next-calendar-btn-prev-year:hover, .next-calendar-btn-prev-year.hover, .next-calendar-btn-prev-year:active, .next-calendar-btn-prev-year.active, .next-calendar-btn-prev-month:focus, .next-calendar-btn-prev-month:hover, .next-calendar-btn-prev-month.hover, .next-calendar-btn-prev-month:active, .next-calendar-btn-prev-month.active, .next-calendar-btn-prev-decade:focus, .next-calendar-btn-prev-decade:hover, .next-calendar-btn-prev-decade.hover, .next-calendar-btn-prev-decade:active, .next-calendar-btn-prev-decade.active, .next-calendar-btn-next-month:focus, .next-calendar-btn-next-month:hover, .next-calendar-btn-next-month.hover, .next-calendar-btn-next-month:active, .next-calendar-btn-next-month.active, .next-calendar-btn-next-year:focus, .next-calendar-btn-next-year:hover, .next-calendar-btn-next-year.hover, .next-calendar-btn-next-year:active, .next-calendar-btn-next-year.active, .next-calendar-btn-next-decade:focus, .next-calendar-btn-next-decade:hover, .next-calendar-btn-next-decade.hover, .next-calendar-btn-next-decade:active, .next-calendar-btn-next-decade.active { + color: #FFFFFF; + background-color: transparent; + border-color: transparent; + text-decoration: none; } + +.next-calendar-btn-prev-decade, .next-calendar-btn-prev-year { + left: 8px; } + +.next-calendar-btn-prev-month { + left: 28px; } + +.next-calendar-btn-next-month { + right: 28px; } + +.next-calendar-btn-next-year, .next-calendar-btn-next-decade { + right: 8px; } + +.next-calendar-fullscreen .next-calendar-th { + text-align: right; + color: #333333; + font-size: 16px; + font-weight: bold; + padding-right: 12px; + padding-bottom: 4px; } + +.next-calendar-fullscreen .next-calendar-cell { + font-size: 14px; } + .next-calendar-fullscreen .next-calendar-cell.next-selected .next-calendar-date, + .next-calendar-fullscreen .next-calendar-cell.next-selected .next-calendar-month { + font-weight: bold; + background: #DEE8FF; + color: #5584FF; + border-color: #5584FF; } + .next-calendar-fullscreen .next-calendar-cell.next-disabled .next-calendar-date, + .next-calendar-fullscreen .next-calendar-cell.next-disabled .next-calendar-month { + cursor: not-allowed; + background: #F7F8FA; + color: #CCCCCC; + border-color: #E6E7EB; } + +.next-calendar-fullscreen .next-calendar-date, .next-calendar-fullscreen .next-calendar-month { + text-align: right; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin: 0 4px; + padding: 4px 8px; + min-height: 80px; + border-top: 2px solid; + -webkit-transition: background .3s ease; + transition: background .3s ease; + background: #FFFFFF; + color: #333333; + border-color: #DCDEE3; } + .next-calendar-fullscreen .next-calendar-date:hover, .next-calendar-fullscreen .next-calendar-month:hover { + background: #DEE8FF; + color: #5584FF; + border-color: #5584FF; } + +.next-calendar-fullscreen .next-calendar-cell-prev-month .next-calendar-date, .next-calendar-fullscreen .next-calendar-cell-next-month .next-calendar-date { + background: transparent; + color: #CCCCCC; + border-color: transparent; } + +.next-calendar-fullscreen .next-calendar-cell-current .next-calendar-date, +.next-calendar-fullscreen .next-calendar-cell-current .next-calendar-month { + font-weight: bold; + background: #FFFFFF; + color: #5584FF; + border-color: #5584FF; } + +.next-calendar-card .next-calendar-th, +.next-calendar-panel .next-calendar-th, +.next-calendar-range .next-calendar-th { + text-align: center; + color: #999999; + font-size: 12px; + font-weight: normal; } + +.next-calendar-card .next-calendar-cell, +.next-calendar-panel .next-calendar-cell, +.next-calendar-range .next-calendar-cell { + text-align: center; + font-size: 12px; } + .next-calendar-card .next-calendar-cell.next-selected .next-calendar-date, + .next-calendar-card .next-calendar-cell.next-selected .next-calendar-month, + .next-calendar-card .next-calendar-cell.next-selected .next-calendar-year, + .next-calendar-panel .next-calendar-cell.next-selected .next-calendar-date, + .next-calendar-panel .next-calendar-cell.next-selected .next-calendar-month, + .next-calendar-panel .next-calendar-cell.next-selected .next-calendar-year, + .next-calendar-range .next-calendar-cell.next-selected .next-calendar-date, + .next-calendar-range .next-calendar-cell.next-selected .next-calendar-month, + .next-calendar-range .next-calendar-cell.next-selected .next-calendar-year { + -webkit-animation: cellZoomIn 0.4s cubic-bezier(0.23, 1, 0.32, 1); + animation: cellZoomIn 0.4s cubic-bezier(0.23, 1, 0.32, 1); + font-weight: bold; + background: #5584FF; + color: #FFFFFF; + border-color: #5584FF; } + .next-calendar-card .next-calendar-cell.next-disabled .next-calendar-date, + .next-calendar-card .next-calendar-cell.next-disabled .next-calendar-month, + .next-calendar-card .next-calendar-cell.next-disabled .next-calendar-year, + .next-calendar-panel .next-calendar-cell.next-disabled .next-calendar-date, + .next-calendar-panel .next-calendar-cell.next-disabled .next-calendar-month, + .next-calendar-panel .next-calendar-cell.next-disabled .next-calendar-year, + .next-calendar-range .next-calendar-cell.next-disabled .next-calendar-date, + .next-calendar-range .next-calendar-cell.next-disabled .next-calendar-month, + .next-calendar-range .next-calendar-cell.next-disabled .next-calendar-year { + cursor: not-allowed; + background: #F7F8FA; + color: #CCCCCC; + border-color: #F7F8FA; } + .next-calendar-card .next-calendar-cell.next-inrange .next-calendar-date, + .next-calendar-panel .next-calendar-cell.next-inrange .next-calendar-date, + .next-calendar-range .next-calendar-cell.next-inrange .next-calendar-date { + background: #DEE8FF; + color: #5584FF; + border-color: #DEE8FF; } + +.next-calendar-card .next-calendar-date, .next-calendar-card .next-calendar-month, .next-calendar-card .next-calendar-year, +.next-calendar-panel .next-calendar-date, +.next-calendar-panel .next-calendar-month, +.next-calendar-panel .next-calendar-year, +.next-calendar-range .next-calendar-date, +.next-calendar-range .next-calendar-month, +.next-calendar-range .next-calendar-year { + text-align: center; + border: 1px solid; + background: #FFFFFF; + color: #666666; + border-color: #FFFFFF; } + .next-calendar-card .next-calendar-date:hover, .next-calendar-card .next-calendar-month:hover, .next-calendar-card .next-calendar-year:hover, + .next-calendar-panel .next-calendar-date:hover, + .next-calendar-panel .next-calendar-month:hover, + .next-calendar-panel .next-calendar-year:hover, + .next-calendar-range .next-calendar-date:hover, + .next-calendar-range .next-calendar-month:hover, + .next-calendar-range .next-calendar-year:hover { + cursor: pointer; } + .next-calendar-card .next-calendar-date:hover, .next-calendar-card .next-calendar-month:hover, .next-calendar-card .next-calendar-year:hover, + .next-calendar-panel .next-calendar-date:hover, + .next-calendar-panel .next-calendar-month:hover, + .next-calendar-panel .next-calendar-year:hover, + .next-calendar-range .next-calendar-date:hover, + .next-calendar-range .next-calendar-month:hover, + .next-calendar-range .next-calendar-year:hover { + background: #DEE8FF; + color: #5584FF; + border-color: #DEE8FF; } + +.next-calendar-card .next-calendar-date, +.next-calendar-panel .next-calendar-date, +.next-calendar-range .next-calendar-date { + width: 24px; + height: 24px; + line-height: 22px; + margin: 4px auto; + border-radius: 3px; } + +.next-calendar-card .next-calendar-month, +.next-calendar-panel .next-calendar-month, +.next-calendar-range .next-calendar-month { + width: 60px; + height: 24px; + line-height: 22px; + margin: 8px auto; + border-radius: 3px; } + +.next-calendar-card .next-calendar-year, +.next-calendar-panel .next-calendar-year, +.next-calendar-range .next-calendar-year { + width: 48px; + height: 24px; + line-height: 22px; + margin: 8px auto; + border-radius: 3px; } + +.next-calendar-card .next-calendar-cell-prev-month .next-calendar-date, +.next-calendar-panel .next-calendar-cell-prev-month .next-calendar-date, +.next-calendar-range .next-calendar-cell-prev-month .next-calendar-date { + background: #FFFFFF; + color: #CCCCCC; + border-color: #FFFFFF; } + +.next-calendar-card .next-calendar-cell-next-month .next-calendar-date, +.next-calendar-panel .next-calendar-cell-next-month .next-calendar-date, +.next-calendar-range .next-calendar-cell-next-month .next-calendar-date { + background: #FFFFFF; + color: #CCCCCC; + border-color: #FFFFFF; } + +.next-calendar-card .next-calendar-cell-current .next-calendar-date, +.next-calendar-card .next-calendar-cell-current .next-calendar-month, +.next-calendar-card .next-calendar-cell-current .next-calendar-year, +.next-calendar-panel .next-calendar-cell-current .next-calendar-date, +.next-calendar-panel .next-calendar-cell-current .next-calendar-month, +.next-calendar-panel .next-calendar-cell-current .next-calendar-year, +.next-calendar-range .next-calendar-cell-current .next-calendar-date, +.next-calendar-range .next-calendar-cell-current .next-calendar-month, +.next-calendar-range .next-calendar-cell-current .next-calendar-year { + font-weight: bold; + background: #FFFFFF; + color: #5584FF; + border-color: transparent; } + +.next-calendar[dir='rtl'] .next-calendar-header { + text-align: left; } + .next-calendar[dir='rtl'] .next-calendar-header .next-select { + margin-right: 0; + margin-left: 4px; } + .next-calendar[dir='rtl'] .next-calendar-header .next-menu { + text-align: right; } + +.next-calendar[dir='rtl'] .next-calendar-btn-prev-decade, .next-calendar[dir='rtl'] .next-calendar-btn-prev-year { + left: auto; + right: 8px; } + +.next-calendar[dir='rtl'] .next-calendar-btn-prev-month { + left: auto; + right: 28px; } + +.next-calendar[dir='rtl'] .next-calendar-btn-next-month { + right: auto; + left: 28px; } + +.next-calendar[dir='rtl'] .next-calendar-btn-next-year, .next-calendar[dir='rtl'] .next-calendar-btn-next-decade { + right: auto; + left: 8px; } + +.next-calendar-fullscreen[dir='rtl'] .next-calendar-th { + text-align: left; + padding-left: 12px; + padding-right: 0; } + +.next-calendar-fullscreen[dir='rtl'] .next-calendar-date, .next-calendar-fullscreen[dir='rtl'] .next-calendar-month { + text-align: left; } + +.next-calendar-range[dir='rtl'] .next-calendar-body-left, .next-calendar-range[dir='rtl'] .next-calendar-body-right { + float: right; } + +.next-calendar-range[dir='rtl'] .next-calendar-body-left { + padding-right: 0; + padding-left: 8px; } + +.next-calendar-range[dir='rtl'] .next-calendar-body-right { + padding-left: 0; + padding-right: 8px; } + +.next-calendar { + /* range calendar */ + /* --------------- */ } + .next-calendar-table { + width: 100%; + table-layout: fixed; } + .next-calendar-range .next-calendar-body-left, .next-calendar-range .next-calendar-body-right { + float: left; + width: 50%; } + .next-calendar-range .next-calendar-body-left { + padding-right: 8px; } + .next-calendar-range .next-calendar-body-right { + padding-left: 8px; } + .next-calendar-range .next-calendar-body:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + +.next-card *, +.next-card *:before, +.next-card *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +.next-card, .next-card:before, .next-card:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +.next-card[dir="rtl"] .next-card-extra { + left: 0; + right: auto; } + +.next-card[dir="rtl"] .next-card-title:before { + right: 0; + left: auto; } + +.next-card[dir="rtl"] .next-card-subtitle { + float: left; + padding-right: 8px; + padding-left: 0; } + +.next-card[dir="rtl"] .next-card-head-show-bullet .next-card-title { + padding-left: 0; + padding-right: 8px; } + +.next-card { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-card *, + .next-card *:before, + .next-card *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-card { + min-width: 100px; + padding: 0 16px; + border: 1px solid #DCDEE3; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + background: #FFFFFF; } + .next-card-head { + background: #FFFFFF; } + .next-card-head-show-bullet .next-card-title { + padding-left: 8px; } + .next-card-head-show-bullet .next-card-title:before { + content: ''; + display: inline-block; + height: 16px; + width: 3px; + background: #5584FF; + position: absolute; + left: 0; + top: calc(50% - 16px / 2); } + .next-card-head-main { + position: relative; + margin-top: 8px; + margin-bottom: 0; + height: 40px; + line-height: 40px; } + .next-card-title { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 80%; + height: 100%; + color: #333333; + font-size: 16px; } + .next-card-subtitle { + font-size: 12px; + color: #666666; + padding-left: 8px; } + .next-card-extra { + position: absolute; + right: 0; + top: 0; + height: 100%; + font-size: 12px; + color: #5584FF; } + .next-card-body { + padding-bottom: 12px; } + .next-card-show-divider .next-card-head { + border-bottom: 1px solid #E6E7EB; } + .next-card-show-divider .next-card-body { + padding-top: 12px; } + .next-card-hide-divider .next-card-body { + padding-top: 0; } + .next-card-content { + overflow: hidden; + -webkit-transition: 0.3s all cubic-bezier(0.23, 1, 0.32, 1); + transition: 0.3s all cubic-bezier(0.23, 1, 0.32, 1); + position: relative; } + .next-card-footer .next-icon { + -webkit-transition: 0.3s all cubic-bezier(0.645, 0.045, 0.355, 1); + transition: 0.3s all cubic-bezier(0.645, 0.045, 0.355, 1); } + .next-card-footer .next-icon.expand { + -webkit-transform-origin: 50% 47%; + -ms-transform-origin: 50% 47%; + transform-origin: 50% 47%; + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + +.next-cascader { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; + overflow: auto; + border: 1px solid #DCDEE3; + border-radius: 3px; } + .next-cascader *, + .next-cascader *:before, + .next-cascader *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-cascader-inner:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + .next-cascader-menu-wrapper { + float: left; + overflow: auto; + width: 100px; + height: 192px; } + .next-cascader-menu-wrapper + .next-cascader-menu-wrapper { + border-left: 1px solid #DCDEE3; } + .next-cascader-menu { + position: relative; + padding: 0; + border: none; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + min-width: auto; + min-height: 100%; } + .next-cascader-menu.next-has-right-border { + border-right: 1px solid #DCDEE3; } + .next-cascader-menu-item.next-expanded { + color: #333333; + background-color: #F2F3F7; } + .next-cascader-menu-icon-right { + position: absolute; + top: 0; + right: 10px; + color: #666666; } + .next-cascader-menu-icon-right:hover { + color: #333333; } + .next-cascader-menu-icon-expand.next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-cascader-menu-icon-expand.next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-cascader-menu-icon-expand.next-icon:before { + width: 16px; + font-size: 16px; } } + .next-cascader-menu-icon-loading.next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-cascader-menu-item.next-expanded .next-cascader-menu-icon-right { + color: #333333; } + .next-cascader-menu-item.next-expanded .next-cascader-menu-icon-loading { + color: #5584FF; } + .next-cascader-filtered-list { + height: 192px; + padding: 0; + border: none; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + overflow: auto; } + .next-cascader-filtered-list .next-menu-item-inner { + overflow: visible; } + .next-cascader-filtered-item em { + color: #5584FF; + font-style: normal; } + +.next-cascader[dir="rtl"] .next-cascader-menu-wrapper { + float: right; + border-left: none; + border-right: 1px solid #DCDEE3; } + .next-cascader[dir="rtl"] .next-cascader-menu-wrapper:first-child { + border-right: none; } + +.next-cascader[dir="rtl"] .next-cascader-menu.next-has-right-border { + border-right: none; + border-left: 1px solid #DCDEE3; } + +.next-cascader[dir="rtl"] .next-cascader-menu-icon-right { + right: auto; + left: 10px; } + +.next-cascader-select { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-cascader-select *, + .next-cascader-select *:before, + .next-cascader-select *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-cascader-select-dropdown { + -webkit-box-sizing: border-box; + box-sizing: border-box; + border: 1px solid #DCDEE3; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; } + .next-cascader-select-dropdown *, + .next-cascader-select-dropdown *:before, + .next-cascader-select-dropdown *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-cascader-select-dropdown .next-cascader { + display: block; + border: none; + -webkit-box-shadow: none; + box-shadow: none; } + .next-cascader-select-not-found { + padding: 0; + border: none; + -webkit-box-shadow: none; + box-shadow: none; + overflow: auto; + color: #999999; } + .next-cascader-select-not-found .next-menu-item:hover { + color: #999999; + /* TODO */ + background: #FFFFFF; + cursor: default; } + +.next-collapse[dir=rtl] .next-collapse-panel-title { + padding: 8px 28px 8px 0; } + +.next-collapse[dir=rtl] .next-collapse-panel-icon { + left: inherit; + right: 12px; + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); + margin-left: 0; + margin-right: 0; } + .next-collapse[dir=rtl] .next-collapse-panel-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-collapse[dir=rtl] .next-collapse-panel-icon { + -webkit-transform: scale(0.5) rotate(270deg); + -ms-transform: scale(0.5) rotate(270deg); + transform: scale(0.5) rotate(270deg); + margin-left: -4px; + margin-right: -4px; } + .next-collapse[dir=rtl] .next-collapse-panel-icon:before { + width: 16px; + font-size: 16px; } } + +/* put your code here */ +.next-collapse { + -webkit-box-sizing: border-box; + box-sizing: border-box; + border: 1px solid #DCDEE3; + border-radius: 3px; + overflow: hidden; } + .next-collapse *, + .next-collapse *:before, + .next-collapse *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-collapse:focus, + .next-collapse *:focus { + outline: 0; } + .next-collapse-panel:not(:first-child) { + border-top: 1px solid #DCDEE3; } + .next-collapse .next-collapse-panel-icon { + position: absolute; + color: #333333; + -webkit-transition: -webkit-transform .3s; + transition: -webkit-transform .3s; + transition: transform .3s; + transition: transform .3s, -webkit-transform .3s; + left: 12px; + margin-top: -2px; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); + margin-left: 0; + margin-right: 0; } + .next-collapse .next-collapse-panel-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-collapse .next-collapse-panel-icon { + -webkit-transform: scale(0.5) rotate(90deg); + -ms-transform: scale(0.5) rotate(90deg); + transform: scale(0.5) rotate(90deg); + margin-left: -4px; + margin-right: -4px; } + .next-collapse .next-collapse-panel-icon:before { + width: 16px; + font-size: 16px; } } + .next-collapse-panel-title { + position: relative; + line-height: 20px; + background: #F2F3F7; + font-size: 14px; + font-weight: normal; + color: #333333; + cursor: pointer; + padding: 8px 0 8px 28px; + -webkit-transition: background .2s ease; + transition: background .2s ease; } + .next-collapse-panel-title:hover { + background: #EBECF0; + color: #333333; + font-weight: normal; } + .next-collapse-panel-title:hover .next-collapse-panel-icon { + color: #333333; } + .next-collapse-panel-content { + overflow: hidden; + height: 0; + padding: 0 16px; + background: #FFFFFF; + font-size: 12px; + color: #666666; + -webkit-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); + transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); + opacity: 0; } + .next-collapse-panel-expanded > .next-collapse-panel-content { + display: block; + padding: 12px 16px; + height: auto; + opacity: 1; } + .next-collapse .next-collapse-panel-icon.next-collapse-panel-icon-expanded { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); + margin-left: 0; + margin-right: 0; } + .next-collapse .next-collapse-panel-icon.next-collapse-panel-icon-expanded:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-collapse .next-collapse-panel-icon.next-collapse-panel-icon-expanded { + -webkit-transform: scale(0.5) rotate(180deg); + -ms-transform: scale(0.5) rotate(180deg); + transform: scale(0.5) rotate(180deg); + margin-left: -4px; + margin-right: -4px; } + .next-collapse .next-collapse-panel-icon.next-collapse-panel-icon-expanded:before { + width: 16px; + font-size: 16px; } } + .next-collapse-disabled { + border-color: #E6E7EB; } + .next-collapse-panel-disabled { + overflow: hidden; } + .next-collapse-panel-disabled:not(:first-child) { + border-color: #E6E7EB; } + .next-collapse-panel-disabled > .next-collapse-panel-title { + cursor: not-allowed; + color: #CCCCCC; + background: #F2F3F7; } + .next-collapse-panel-disabled .next-collapse-panel-icon { + color: #CCCCCC; } + .next-collapse-panel-disabled .next-collapse-panel-title:hover { + font-weight: normal; } + .next-collapse-panel-disabled .next-collapse-panel-title:hover .next-collapse-panel-icon { + color: #CCCCCC; } + .next-collapse-panel-disabled:hover { + color: #CCCCCC; + background: #F2F3F7; } + +.next-time-picker-menu { + float: left; + text-align: center; } + .next-time-picker-menu:not(:last-child) { + border-right: 1px solid #C4C6CF; } + .next-time-picker-menu-title { + cursor: default; + height: 28px; + line-height: 28px; + font-size: 12px; + font-weight: normal; + color: #999999; + background: #FFFFFF; } + .next-time-picker-menu ul { + position: relative; + overflow-y: auto; + list-style: none; + margin: 0; + padding: 0; + font-size: 12px; + height: 196px; } + .next-time-picker-menu-item { + cursor: pointer; + height: 28px; + line-height: 28px; + -webkit-transition: background .3s ease-out; + transition: background .3s ease-out; + color: #666666; + background: #FFFFFF; + outline: none; } + .next-time-picker-menu-item:hover { + color: #333333; + background: #F2F3F7; } + .next-time-picker-menu-item.next-selected { + font-weight: bold; + color: #666666; + background: #F2F3F7; } + .next-time-picker-menu-item.next-disabled { + cursor: not-allowed; + color: #CCCCCC; + background: #FFFFFF; } + +.next-time-picker-panel { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-time-picker-panel *, + .next-time-picker-panel *:before, + .next-time-picker-panel *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-time-picker-panel:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + .next-time-picker-panel-header { + border-bottom: 1px solid #DCDEE3; } + .next-time-picker-panel-input.next-input { + width: 100%; + padding: 6px; + border-color: transparent; + vertical-align: middle; } + .next-time-picker-panel-col-3 .next-time-picker-menu { + width: calc(100% / 3); } + .next-time-picker-panel-col-2 .next-time-picker-menu { + width: 50%; } + +.next-time-picker-body[dir="rtl"] .next-time-picker-menu { + float: right; } + .next-time-picker-body[dir="rtl"] .next-time-picker-menu:not(:last-child) { + border-right: none; + border-left: 1px solid #C4C6CF; } + +.next-time-picker { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; + width: 200px; } + .next-time-picker *, + .next-time-picker *:before, + .next-time-picker *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-time-picker-trigger .next-input { + width: 100%; } + .next-time-picker-body { + overflow: hidden; + width: 200px; + border: 1px solid #DCDEE3; + border-radius: 3px; + background: #FFFFFF; + -webkit-box-shadow: none; + box-shadow: none; } + +.next-range-picker-trigger-separator, .next-range-picker-panel-input-separator { + cursor: default; + display: inline-block; + text-align: center; + color: #CCCCCC; + width: 16px; + font-size: 12px; + vertical-align: middle; } + +.next-date-picker, .next-month-picker, .next-year-picker { + display: inline-block; + width: 200px; } + .next-date-picker-input, .next-month-picker-input, .next-year-picker-input { + width: 100%; } + .next-date-picker-body, .next-month-picker-body, .next-year-picker-body { + width: 288px; } + .next-date-picker-panel-input.next-input, .next-month-picker-panel-input.next-input, .next-year-picker-panel-input.next-input { + width: 100%; + background: transparent; } + +.next-date-picker-body.next-date-picker-body-show-time .next-date-picker-panel-input.next-input { + width: 49%; } + .next-date-picker-body.next-date-picker-body-show-time .next-date-picker-panel-input.next-input:first-child { + margin-right: 2%; } + +.next-range-picker { + display: inline-block; + width: 336px; } + .next-range-picker-input { + width: 100%; } + .next-range-picker-trigger { + border: 1px solid #C4C6CF; + background-color: #FFFFFF; } + .next-range-picker-trigger:hover { + border-color: #A0A2AD; + background-color: #FFFFFF; } + .next-range-picker-trigger.next-error { + border-color: #FF3000; } + .next-range-picker-trigger-input.next-input { + height: auto; + width: calc((100% - 16px) / 2); } + .next-range-picker.next-disabled .next-range-picker-trigger { + cursor: not-allowed; + color: #CCCCCC; + border-color: #E6E7EB; + background-color: #F7F8FA; + cursor: not-allowed; } + .next-range-picker.next-disabled .next-range-picker-trigger:hover { + border-color: #E6E7EB; + background-color: #F7F8FA; } + .next-range-picker.next-large .next-range-picker-trigger, .next-range-picker.next-large .next-range-picker-panel-input { + border-radius: 3px; } + .next-range-picker.next-medium .next-range-picker-trigger, .next-range-picker.next-medium .next-range-picker-panel-input { + border-radius: 3px; } + .next-range-picker.next-small .next-range-picker-trigger, .next-range-picker.next-small .next-range-picker-panel-input { + border-radius: 3px; } + .next-range-picker-body { + width: 600px; } + .next-range-picker-panel-input-start-date.next-input, .next-range-picker-panel-input-end-date.next-input { + width: calc((100% - 16px) / 2); } + +.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-start-date, .next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-end-date, .next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-start-time, .next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-end-time { + width: calc((100% - 16px - 16px) / 4); } + +.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-start-date { + margin-right: 8px; } + +.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-end-time { + margin-left: 8px; } + +.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + +.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-start, .next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-end { + width: 50%; + float: left; } + +.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-start { + border-right: 1px solid #DCDEE3; } + +.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-end { + border-left: 1px solid #DCDEE3; } + +.next-date-picker-body[dir="rtl"] .next-date-picker-panel-footer { + text-align: left; } + +.next-date-picker-body[dir="rtl"] .next-date-picker-panel-footer > .next-btn:not(:last-child) { + margin-right: 0; + margin-left: 16px; } + +.next-date-picker-body[dir="rtl"].next-date-picker-body-show-time .next-date-picker-panel-input.next-input:first-child { + margin-left: 2%; + margin-right: 0; } + +.next-date-picker-body[dir="rtl"].next-date-picker-body-show-time .next-time-picker-menu { + float: right; } + .next-date-picker-body[dir="rtl"].next-date-picker-body-show-time .next-time-picker-menu:not(:last-child) { + border-right: none; + border-left: 1px solid #C4C6CF; } + +.next-range-picker-body[dir="rtl"] .next-range-picker-panel-input { + text-align: right; } + +.next-range-picker-body[dir="rtl"] .next-date-picker-panel-footer { + text-align: left; } + +.next-range-picker-body[dir="rtl"] .next-date-picker-panel-footer > .next-btn:not(:last-child) { + margin-right: 0; + margin-left: 16px; } + +.next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-range-picker-panel-input-start-date { + margin-right: 0; + margin-left: 8px; } + +.next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-range-picker-panel-input-end-time { + margin-left: 0; + margin-right: 8px; } + +.next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-range-picker-panel-time-start, .next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-range-picker-panel-time-end { + float: right; } + +.next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-range-picker-panel-time-start { + border-right: none; + border-left: 1px solid #DCDEE3; } + +.next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-range-picker-panel-time-end { + border-left: none; + border-right: 1px solid #DCDEE3; } + +.next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-time-picker-menu { + float: right; } + .next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-time-picker-menu:not(:last-child) { + border-right: none; + border-left: 1px solid #C4C6CF; } + +.next-date-picker, .next-range-picker, .next-month-picker, .next-year-picker { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-date-picker *, + .next-date-picker *:before, + .next-date-picker *:after, .next-range-picker *, + .next-range-picker *:before, + .next-range-picker *:after, .next-month-picker *, + .next-month-picker *:before, + .next-month-picker *:after, .next-year-picker *, + .next-year-picker *:before, + .next-year-picker *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-date-picker-body, .next-range-picker-body, .next-month-picker-body, .next-year-picker-body { + border: 1px solid #DCDEE3; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + background: #FFFFFF; } + .next-date-picker-panel-header, .next-range-picker-panel-header, .next-month-picker-panel-header, .next-year-picker-panel-header { + padding: 6px; + text-align: center; } + .next-date-picker-panel-time, .next-range-picker-panel-time, .next-month-picker-panel-time, .next-year-picker-panel-time { + border-top: 1px solid #DCDEE3; } + .next-date-picker-panel-footer, .next-range-picker-panel-footer, .next-month-picker-panel-footer, .next-year-picker-panel-footer { + text-align: right; + padding: 8px 20px; + border-top: 1px solid #DCDEE3; } + .next-date-picker-panel-footer > .next-btn:not(:last-child), .next-range-picker-panel-footer > .next-btn:not(:last-child), .next-month-picker-panel-footer > .next-btn:not(:last-child), .next-year-picker-panel-footer > .next-btn:not(:last-child) { + margin-right: 16px; } + .next-date-picker .next-calendar-panel-header, .next-range-picker .next-calendar-panel-header, .next-month-picker .next-calendar-panel-header, .next-year-picker .next-calendar-panel-header { + margin-left: -1px; + margin-right: -1px; } + .next-date-picker .next-input input, .next-range-picker .next-input input, .next-month-picker .next-input input, .next-year-picker .next-input input { + vertical-align: baseline; } + +.next-message { + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: relative; + display: block; + vertical-align: baseline; } + .next-message *, + .next-message *:before, + .next-message *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-message:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + .next-message .next-message-close { + color: #999999; + font-size: 0; + position: absolute; } + .next-message .next-message-close .next-icon-close { + width: 12px; + height: 12px; + line-height: 12px; } + .next-message .next-message-close .next-icon-close:before { + width: 12px; + height: 12px; + font-size: 12px; + line-height: 12px; } + .next-message .next-message-close:hover { + color: #666666; } + .next-message.next-message-success.next-inline { + background-color: #E4FDDA; + border-color: #E4FDDA; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-success.next-inline .next-message-title { + color: #333333; } + .next-message.next-message-success.next-inline .next-message-content { + color: #666666; } + .next-message.next-message-success.next-inline .next-message-symbol { + color: #46BC15; } + .next-message.next-message-success.next-inline .next-message-symbol-icon::before { + content: "\E60A"; } + .next-message.next-message-success.next-addon { + background-color: transparent; + border-color: transparent; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-success.next-addon .next-message-title { + color: #333333; } + .next-message.next-message-success.next-addon .next-message-content { + color: #666666; } + .next-message.next-message-success.next-addon .next-message-symbol { + color: #46BC15; } + .next-message.next-message-success.next-addon .next-message-symbol-icon::before { + content: "\E60A"; } + .next-message.next-message-success.next-toast { + background-color: #FFFFFF; + border-color: #FFFFFF; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + border-style: solid; } + .next-message.next-message-success.next-toast .next-message-title { + color: #333333; } + .next-message.next-message-success.next-toast .next-message-content { + color: #666666; } + .next-message.next-message-success.next-toast .next-message-symbol { + color: #46BC15; } + .next-message.next-message-success.next-toast .next-message-symbol-icon::before { + content: "\E60A"; } + .next-message.next-message-warning.next-inline { + background-color: #FFF3E0; + border-color: #FFF3E0; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-warning.next-inline .next-message-title { + color: #333333; } + .next-message.next-message-warning.next-inline .next-message-content { + color: #666666; } + .next-message.next-message-warning.next-inline .next-message-symbol { + color: #FF9300; } + .next-message.next-message-warning.next-inline .next-message-symbol-icon::before { + content: "\E60B"; } + .next-message.next-message-warning.next-addon { + background-color: transparent; + border-color: transparent; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-warning.next-addon .next-message-title { + color: #333333; } + .next-message.next-message-warning.next-addon .next-message-content { + color: #666666; } + .next-message.next-message-warning.next-addon .next-message-symbol { + color: #FF9300; } + .next-message.next-message-warning.next-addon .next-message-symbol-icon::before { + content: "\E60B"; } + .next-message.next-message-warning.next-toast { + background-color: #FFFFFF; + border-color: #FFFFFF; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + border-style: solid; } + .next-message.next-message-warning.next-toast .next-message-title { + color: #333333; } + .next-message.next-message-warning.next-toast .next-message-content { + color: #666666; } + .next-message.next-message-warning.next-toast .next-message-symbol { + color: #FF9300; } + .next-message.next-message-warning.next-toast .next-message-symbol-icon::before { + content: "\E60B"; } + .next-message.next-message-error.next-inline { + background-color: #FFECE4; + border-color: #FFECE4; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-error.next-inline .next-message-title { + color: #333333; } + .next-message.next-message-error.next-inline .next-message-content { + color: #666666; } + .next-message.next-message-error.next-inline .next-message-symbol { + color: #FF3000; } + .next-message.next-message-error.next-inline .next-message-symbol-icon::before { + content: "\E60D"; } + .next-message.next-message-error.next-addon { + background-color: transparent; + border-color: transparent; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-error.next-addon .next-message-title { + color: #333333; } + .next-message.next-message-error.next-addon .next-message-content { + color: #666666; } + .next-message.next-message-error.next-addon .next-message-symbol { + color: #FF3000; } + .next-message.next-message-error.next-addon .next-message-symbol-icon::before { + content: "\E60D"; } + .next-message.next-message-error.next-toast { + background-color: #FFFFFF; + border-color: #FFFFFF; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + border-style: solid; } + .next-message.next-message-error.next-toast .next-message-title { + color: #333333; } + .next-message.next-message-error.next-toast .next-message-content { + color: #666666; } + .next-message.next-message-error.next-toast .next-message-symbol { + color: #FF3000; } + .next-message.next-message-error.next-toast .next-message-symbol-icon::before { + content: "\E60D"; } + .next-message.next-message-notice.next-inline { + background-color: #E3F2FD; + border-color: #E3F2FD; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-notice.next-inline .next-message-title { + color: #333333; } + .next-message.next-message-notice.next-inline .next-message-content { + color: #666666; } + .next-message.next-message-notice.next-inline .next-message-symbol { + color: #4494F9; } + .next-message.next-message-notice.next-inline .next-message-symbol-icon::before { + content: "\E60C"; } + .next-message.next-message-notice.next-addon { + background-color: transparent; + border-color: transparent; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-notice.next-addon .next-message-title { + color: #333333; } + .next-message.next-message-notice.next-addon .next-message-content { + color: #666666; } + .next-message.next-message-notice.next-addon .next-message-symbol { + color: #4494F9; } + .next-message.next-message-notice.next-addon .next-message-symbol-icon::before { + content: "\E60C"; } + .next-message.next-message-notice.next-toast { + background-color: #FFFFFF; + border-color: #FFFFFF; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + border-style: solid; } + .next-message.next-message-notice.next-toast .next-message-title { + color: #333333; } + .next-message.next-message-notice.next-toast .next-message-content { + color: #666666; } + .next-message.next-message-notice.next-toast .next-message-symbol { + color: #4494F9; } + .next-message.next-message-notice.next-toast .next-message-symbol-icon::before { + content: "\E60C"; } + .next-message.next-message-help.next-inline { + background-color: #E3FFF8; + border-color: #E3FFF8; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-help.next-inline .next-message-title { + color: #333333; } + .next-message.next-message-help.next-inline .next-message-content { + color: #666666; } + .next-message.next-message-help.next-inline .next-message-symbol { + color: #01C1B2; } + .next-message.next-message-help.next-inline .next-message-symbol-icon::before { + content: "\E673"; } + .next-message.next-message-help.next-addon { + background-color: transparent; + border-color: transparent; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-help.next-addon .next-message-title { + color: #333333; } + .next-message.next-message-help.next-addon .next-message-content { + color: #666666; } + .next-message.next-message-help.next-addon .next-message-symbol { + color: #01C1B2; } + .next-message.next-message-help.next-addon .next-message-symbol-icon::before { + content: "\E673"; } + .next-message.next-message-help.next-toast { + background-color: #FFFFFF; + border-color: #FFFFFF; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + border-style: solid; } + .next-message.next-message-help.next-toast .next-message-title { + color: #333333; } + .next-message.next-message-help.next-toast .next-message-content { + color: #666666; } + .next-message.next-message-help.next-toast .next-message-symbol { + color: #01C1B2; } + .next-message.next-message-help.next-toast .next-message-symbol-icon::before { + content: "\E673"; } + .next-message.next-message-loading.next-inline { + background-color: #FFFFFF; + border-color: #FFFFFF; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-loading.next-inline .next-message-title { + color: #333333; } + .next-message.next-message-loading.next-inline .next-message-content { + color: #666666; } + .next-message.next-message-loading.next-inline .next-message-symbol { + color: #5584FF; } + .next-message.next-message-loading.next-inline .next-message-symbol-icon::before { + content: "\E646"; + -webkit-animation: loadingCircle 1s infinite linear; + animation: loadingCircle 1s infinite linear; } + .next-message.next-message-loading.next-addon { + background-color: transparent; + border-color: transparent; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-loading.next-addon .next-message-title { + color: #333333; } + .next-message.next-message-loading.next-addon .next-message-content { + color: #666666; } + .next-message.next-message-loading.next-addon .next-message-symbol { + color: #5584FF; } + .next-message.next-message-loading.next-addon .next-message-symbol-icon::before { + content: "\E646"; + -webkit-animation: loadingCircle 1s infinite linear; + animation: loadingCircle 1s infinite linear; } + .next-message.next-message-loading.next-toast { + background-color: #FFFFFF; + border-color: #FFFFFF; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + border-style: solid; } + .next-message.next-message-loading.next-toast .next-message-title { + color: #333333; } + .next-message.next-message-loading.next-toast .next-message-content { + color: #666666; } + .next-message.next-message-loading.next-toast .next-message-symbol { + color: #5584FF; } + .next-message.next-message-loading.next-toast .next-message-symbol-icon::before { + content: "\E646"; + -webkit-animation: loadingCircle 1s infinite linear; + animation: loadingCircle 1s infinite linear; } + .next-message.next-medium { + border-width: 1px; + padding: 12px; } + .next-message.next-medium .next-message-symbol { + float: left; + line-height: 16px; } + .next-message.next-medium .next-message-symbol:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-message.next-medium .next-message-title { + padding: 0 20px 0 24px; + font-size: 16px; + line-height: 16px; } + .next-message.next-medium .next-message-content { + margin-top: 8px; + padding: 0 20px 0 24px; + font-size: 12px; + line-height: 12px; } + .next-message.next-medium .next-message-symbol + .next-message-content { + margin-top: 0; } + .next-message.next-medium.next-only-content .next-message-content { + line-height: 16px; } + .next-message.next-medium .next-message-close { + top: 12px; + right: 12px; } + .next-message.next-large { + border-width: 2px; + padding: 16px; + line-height: 18px; } + .next-message.next-large .next-message-symbol { + float: left; + line-height: 24px; } + .next-message.next-large .next-message-symbol:before { + width: 24px; + font-size: 24px; + line-height: inherit; } + .next-message.next-large .next-message-title { + padding: 0 20px 0 36px; + font-size: 20px; + line-height: 20px; } + .next-message.next-large .next-message-content { + margin-top: 8px; + padding: 0 20px 0 36px; + font-size: 12px; + line-height: 12px; } + .next-message.next-large .next-message-symbol + .next-message-content { + margin-top: 0; } + .next-message.next-large.next-title-content .next-message-title { + line-height: 24px; } + .next-message.next-large.next-only-content .next-message-content { + line-height: 24px; } + .next-message.next-large .next-message-close { + top: 16px; + right: 16px; } + +.next-message[dir="rtl"] .next-message-symbol { + float: right; } + +.next-message[dir="rtl"].next-medium .next-message-title { + padding: 0 24px 0 20px; } + +.next-message[dir="rtl"].next-medium .next-message-close { + left: 12px; + right: auto; } + +.next-message[dir="rtl"].next-large .next-message-title { + padding: 0 36px 0 20px; } + +.next-message[dir="rtl"].next-large .next-message-close { + left: 16px; + right: auto; } + +.next-dialog[dir=rtl] { + text-align: right; } + .next-dialog[dir=rtl] .next-dialog-footer.next-align-left { + text-align: right; } + .next-dialog[dir=rtl] .next-dialog-footer.next-align-center { + text-align: center; } + .next-dialog[dir=rtl] .next-dialog-footer.next-align-right { + text-align: left; } + .next-dialog[dir=rtl] .next-dialog-btn + .next-dialog-btn { + margin-right: 4px; + margin-left: 0; } + .next-dialog[dir=rtl] .next-dialog-close { + left: 16px; + right: auto; } + +.next-dialog { + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: fixed; + z-index: 1001; + background: #FFFFFF; + border: 1px solid #DCDEE3; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + text-align: left; + /* 让用户自己设置 */ + /* &.next-closeable &-header, */ + /* &.next-closeable &-body, { */ + /* padding-right: $dialog-part-padding-right-closeable; */ + /* } */ } + .next-dialog *, + .next-dialog *:before, + .next-dialog *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-dialog-header { + padding: 12px 20px 12px 20px; + border-bottom: 0 solid transparent; + font-size: 16px; + background: transparent; + color: #333333; } + .next-dialog-body { + padding: 20px 20px 20px 20px; + font-size: 12px; + color: #666666; } + .next-dialog-footer { + padding: 12px 20px 12px 20px; + border-top: 0 solid transparent; + background: transparent; } + .next-dialog-footer.next-align-left { + text-align: left; } + .next-dialog-footer.next-align-center { + text-align: center; } + .next-dialog-footer.next-align-right { + text-align: right; } + .next-dialog-footer-fixed-height { + position: absolute; + width: 100%; + bottom: 0; } + .next-dialog-btn + .next-dialog-btn { + margin-left: 4px; } + .next-dialog-close { + position: absolute; + top: 16px; + right: 16px; + width: 16px; + height: 16px; + color: #999999; } + .next-dialog-close:link, .next-dialog-close:visited { + height: 16px; + color: #999999; } + .next-dialog-close:hover { + background: transparent; + color: #333333; } + .next-dialog-close .next-dialog-close-icon.next-icon { + position: absolute; + top: 50%; + left: 50%; + margin-top: -6px; + margin-left: -6px; + width: 12px; + height: 12px; + line-height: 12px; } + .next-dialog-close .next-dialog-close-icon.next-icon:before { + width: 12px; + height: 12px; + font-size: 12px; + line-height: 12px; } + .next-dialog-container { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1001; + padding: 40px; + overflow: auto; + text-align: center; } + .next-dialog-container:before { + display: inline-block; + vertical-align: middle; + width: 0; + height: 100%; + content: ''; } + .next-dialog-container .next-dialog { + display: inline-block; + position: relative; + vertical-align: middle; } + .next-dialog-quick .next-dialog-body { + padding: 20px 20px 20px 20px; } + .next-dialog .next-dialog-message.next-message { + min-width: 300px; + padding: 0; } + +/* stylelint-disable-next-line */ +/* Grid System */ +/* 根据 Alibaba Base DPL(BASE DPL)设计规范实现 */ +/* 栅格系统, 根据不同的屏幕尺寸情况，调整这些区块的排版，将页面划分为若干等宽的列，然后推荐通过等宽列来创建响应式的页面区块。另外，屏幕宽度较大的时候，区块倾向于水平分布，而屏幕宽度较小的时候，区块倾向于竖直堆叠。 */ +/* ------------------------------- */ +.next-row { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + .next-row *, + .next-row *:before, + .next-row *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-row.next-row-wrap { + -ms-flex-wrap: wrap; + flex-wrap: wrap; } + @media (min-width: 320px) { + .next-row.next-row-fixed { + width: 320px; } } + @media (min-width: 480px) { + .next-row.next-row-fixed { + width: 480px; } } + @media (min-width: 720px) { + .next-row.next-row-fixed { + width: 720px; } } + @media (min-width: 990px) { + .next-row.next-row-fixed { + width: 990px; } } + @media (min-width: 1200px) { + .next-row.next-row-fixed { + width: 1200px; } } + @media (min-width: 1500px) { + .next-row.next-row-fixed { + width: 1500px; } } + .next-row.next-row-fixed-xxs { + width: 320px; } + .next-row.next-row-fixed-xs { + width: 480px; } + .next-row.next-row-fixed-s { + width: 720px; } + .next-row.next-row-fixed-m { + width: 990px; } + .next-row.next-row-fixed-l { + width: 1200px; } + .next-row.next-row-fixed-xl { + width: 1500px; } + .next-row.next-row-justify-start { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; } + .next-row.next-row-justify-end { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; } + .next-row.next-row-justify-center { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } + .next-row.next-row-justify-space-between { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } + .next-row.next-row-justify-space-around { + -ms-flex-pack: distribute; + justify-content: space-around; } + .next-row.next-row-align-top { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; } + .next-row.next-row-align-bottom { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; } + .next-row.next-row-align-center { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } + .next-row.next-row-align-baseline { + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; } + .next-row.next-row-align-stretch { + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; } + +.next-col { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; } + .next-col.next-col-top { + -ms-flex-item-align: start; + align-self: flex-start; } + .next-col.next-col-bottom { + -ms-flex-item-align: end; + align-self: flex-end; } + .next-col.next-col-center { + -ms-flex-item-align: center; + align-self: center; } + +/* IE9 pack */ +@media all and (min-width: 0\0) and (min-resolution: 0.001dpcm) { + .next-row { + display: table; + width: 100%; } + .next-col { + display: table-cell; + vertical-align: top; } } + +.next-col-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 4.16667%; + flex: 0 0 4.16667%; + width: 4.16667%; + max-width: 4.16667%; } + +.next-col-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + width: 8.33333%; + max-width: 8.33333%; } + +.next-col-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 12.5%; + flex: 0 0 12.5%; + width: 12.5%; + max-width: 12.5%; } + +.next-col-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + width: 16.66667%; + max-width: 16.66667%; } + +.next-col-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20.83333%; + flex: 0 0 20.83333%; + width: 20.83333%; + max-width: 20.83333%; } + +.next-col-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + width: 25%; + max-width: 25%; } + +.next-col-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 29.16667%; + flex: 0 0 29.16667%; + width: 29.16667%; + max-width: 29.16667%; } + +.next-col-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + width: 33.33333%; + max-width: 33.33333%; } + +.next-col-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 37.5%; + flex: 0 0 37.5%; + width: 37.5%; + max-width: 37.5%; } + +.next-col-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + width: 41.66667%; + max-width: 41.66667%; } + +.next-col-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 45.83333%; + flex: 0 0 45.83333%; + width: 45.83333%; + max-width: 45.83333%; } + +.next-col-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + width: 50%; + max-width: 50%; } + +.next-col-13 { + -webkit-box-flex: 0; + -ms-flex: 0 0 54.16667%; + flex: 0 0 54.16667%; + width: 54.16667%; + max-width: 54.16667%; } + +.next-col-14 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + width: 58.33333%; + max-width: 58.33333%; } + +.next-col-15 { + -webkit-box-flex: 0; + -ms-flex: 0 0 62.5%; + flex: 0 0 62.5%; + width: 62.5%; + max-width: 62.5%; } + +.next-col-16 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + width: 66.66667%; + max-width: 66.66667%; } + +.next-col-17 { + -webkit-box-flex: 0; + -ms-flex: 0 0 70.83333%; + flex: 0 0 70.83333%; + width: 70.83333%; + max-width: 70.83333%; } + +.next-col-18 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + width: 75%; + max-width: 75%; } + +.next-col-19 { + -webkit-box-flex: 0; + -ms-flex: 0 0 79.16667%; + flex: 0 0 79.16667%; + width: 79.16667%; + max-width: 79.16667%; } + +.next-col-20 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + width: 83.33333%; + max-width: 83.33333%; } + +.next-col-21 { + -webkit-box-flex: 0; + -ms-flex: 0 0 87.5%; + flex: 0 0 87.5%; + width: 87.5%; + max-width: 87.5%; } + +.next-col-22 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + width: 91.66667%; + max-width: 91.66667%; } + +.next-col-23 { + -webkit-box-flex: 0; + -ms-flex: 0 0 95.83333%; + flex: 0 0 95.83333%; + width: 95.83333%; + max-width: 95.83333%; } + +.next-col-24 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } + +@media (min-width: 320px) { + .next-col-xxs-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 4.16667%; + flex: 0 0 4.16667%; + width: 4.16667%; + max-width: 4.16667%; } + .next-col-xxs-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + width: 8.33333%; + max-width: 8.33333%; } + .next-col-xxs-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 12.5%; + flex: 0 0 12.5%; + width: 12.5%; + max-width: 12.5%; } + .next-col-xxs-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + width: 16.66667%; + max-width: 16.66667%; } + .next-col-xxs-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20.83333%; + flex: 0 0 20.83333%; + width: 20.83333%; + max-width: 20.83333%; } + .next-col-xxs-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + width: 25%; + max-width: 25%; } + .next-col-xxs-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 29.16667%; + flex: 0 0 29.16667%; + width: 29.16667%; + max-width: 29.16667%; } + .next-col-xxs-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + width: 33.33333%; + max-width: 33.33333%; } + .next-col-xxs-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 37.5%; + flex: 0 0 37.5%; + width: 37.5%; + max-width: 37.5%; } + .next-col-xxs-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + width: 41.66667%; + max-width: 41.66667%; } + .next-col-xxs-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 45.83333%; + flex: 0 0 45.83333%; + width: 45.83333%; + max-width: 45.83333%; } + .next-col-xxs-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + width: 50%; + max-width: 50%; } + .next-col-xxs-13 { + -webkit-box-flex: 0; + -ms-flex: 0 0 54.16667%; + flex: 0 0 54.16667%; + width: 54.16667%; + max-width: 54.16667%; } + .next-col-xxs-14 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + width: 58.33333%; + max-width: 58.33333%; } + .next-col-xxs-15 { + -webkit-box-flex: 0; + -ms-flex: 0 0 62.5%; + flex: 0 0 62.5%; + width: 62.5%; + max-width: 62.5%; } + .next-col-xxs-16 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + width: 66.66667%; + max-width: 66.66667%; } + .next-col-xxs-17 { + -webkit-box-flex: 0; + -ms-flex: 0 0 70.83333%; + flex: 0 0 70.83333%; + width: 70.83333%; + max-width: 70.83333%; } + .next-col-xxs-18 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + width: 75%; + max-width: 75%; } + .next-col-xxs-19 { + -webkit-box-flex: 0; + -ms-flex: 0 0 79.16667%; + flex: 0 0 79.16667%; + width: 79.16667%; + max-width: 79.16667%; } + .next-col-xxs-20 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + width: 83.33333%; + max-width: 83.33333%; } + .next-col-xxs-21 { + -webkit-box-flex: 0; + -ms-flex: 0 0 87.5%; + flex: 0 0 87.5%; + width: 87.5%; + max-width: 87.5%; } + .next-col-xxs-22 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + width: 91.66667%; + max-width: 91.66667%; } + .next-col-xxs-23 { + -webkit-box-flex: 0; + -ms-flex: 0 0 95.83333%; + flex: 0 0 95.83333%; + width: 95.83333%; + max-width: 95.83333%; } + .next-col-xxs-24 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 480px) { + .next-col-xs-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 4.16667%; + flex: 0 0 4.16667%; + width: 4.16667%; + max-width: 4.16667%; } + .next-col-xs-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + width: 8.33333%; + max-width: 8.33333%; } + .next-col-xs-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 12.5%; + flex: 0 0 12.5%; + width: 12.5%; + max-width: 12.5%; } + .next-col-xs-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + width: 16.66667%; + max-width: 16.66667%; } + .next-col-xs-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20.83333%; + flex: 0 0 20.83333%; + width: 20.83333%; + max-width: 20.83333%; } + .next-col-xs-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + width: 25%; + max-width: 25%; } + .next-col-xs-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 29.16667%; + flex: 0 0 29.16667%; + width: 29.16667%; + max-width: 29.16667%; } + .next-col-xs-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + width: 33.33333%; + max-width: 33.33333%; } + .next-col-xs-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 37.5%; + flex: 0 0 37.5%; + width: 37.5%; + max-width: 37.5%; } + .next-col-xs-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + width: 41.66667%; + max-width: 41.66667%; } + .next-col-xs-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 45.83333%; + flex: 0 0 45.83333%; + width: 45.83333%; + max-width: 45.83333%; } + .next-col-xs-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + width: 50%; + max-width: 50%; } + .next-col-xs-13 { + -webkit-box-flex: 0; + -ms-flex: 0 0 54.16667%; + flex: 0 0 54.16667%; + width: 54.16667%; + max-width: 54.16667%; } + .next-col-xs-14 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + width: 58.33333%; + max-width: 58.33333%; } + .next-col-xs-15 { + -webkit-box-flex: 0; + -ms-flex: 0 0 62.5%; + flex: 0 0 62.5%; + width: 62.5%; + max-width: 62.5%; } + .next-col-xs-16 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + width: 66.66667%; + max-width: 66.66667%; } + .next-col-xs-17 { + -webkit-box-flex: 0; + -ms-flex: 0 0 70.83333%; + flex: 0 0 70.83333%; + width: 70.83333%; + max-width: 70.83333%; } + .next-col-xs-18 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + width: 75%; + max-width: 75%; } + .next-col-xs-19 { + -webkit-box-flex: 0; + -ms-flex: 0 0 79.16667%; + flex: 0 0 79.16667%; + width: 79.16667%; + max-width: 79.16667%; } + .next-col-xs-20 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + width: 83.33333%; + max-width: 83.33333%; } + .next-col-xs-21 { + -webkit-box-flex: 0; + -ms-flex: 0 0 87.5%; + flex: 0 0 87.5%; + width: 87.5%; + max-width: 87.5%; } + .next-col-xs-22 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + width: 91.66667%; + max-width: 91.66667%; } + .next-col-xs-23 { + -webkit-box-flex: 0; + -ms-flex: 0 0 95.83333%; + flex: 0 0 95.83333%; + width: 95.83333%; + max-width: 95.83333%; } + .next-col-xs-24 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 720px) { + .next-col-s-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 4.16667%; + flex: 0 0 4.16667%; + width: 4.16667%; + max-width: 4.16667%; } + .next-col-s-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + width: 8.33333%; + max-width: 8.33333%; } + .next-col-s-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 12.5%; + flex: 0 0 12.5%; + width: 12.5%; + max-width: 12.5%; } + .next-col-s-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + width: 16.66667%; + max-width: 16.66667%; } + .next-col-s-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20.83333%; + flex: 0 0 20.83333%; + width: 20.83333%; + max-width: 20.83333%; } + .next-col-s-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + width: 25%; + max-width: 25%; } + .next-col-s-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 29.16667%; + flex: 0 0 29.16667%; + width: 29.16667%; + max-width: 29.16667%; } + .next-col-s-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + width: 33.33333%; + max-width: 33.33333%; } + .next-col-s-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 37.5%; + flex: 0 0 37.5%; + width: 37.5%; + max-width: 37.5%; } + .next-col-s-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + width: 41.66667%; + max-width: 41.66667%; } + .next-col-s-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 45.83333%; + flex: 0 0 45.83333%; + width: 45.83333%; + max-width: 45.83333%; } + .next-col-s-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + width: 50%; + max-width: 50%; } + .next-col-s-13 { + -webkit-box-flex: 0; + -ms-flex: 0 0 54.16667%; + flex: 0 0 54.16667%; + width: 54.16667%; + max-width: 54.16667%; } + .next-col-s-14 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + width: 58.33333%; + max-width: 58.33333%; } + .next-col-s-15 { + -webkit-box-flex: 0; + -ms-flex: 0 0 62.5%; + flex: 0 0 62.5%; + width: 62.5%; + max-width: 62.5%; } + .next-col-s-16 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + width: 66.66667%; + max-width: 66.66667%; } + .next-col-s-17 { + -webkit-box-flex: 0; + -ms-flex: 0 0 70.83333%; + flex: 0 0 70.83333%; + width: 70.83333%; + max-width: 70.83333%; } + .next-col-s-18 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + width: 75%; + max-width: 75%; } + .next-col-s-19 { + -webkit-box-flex: 0; + -ms-flex: 0 0 79.16667%; + flex: 0 0 79.16667%; + width: 79.16667%; + max-width: 79.16667%; } + .next-col-s-20 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + width: 83.33333%; + max-width: 83.33333%; } + .next-col-s-21 { + -webkit-box-flex: 0; + -ms-flex: 0 0 87.5%; + flex: 0 0 87.5%; + width: 87.5%; + max-width: 87.5%; } + .next-col-s-22 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + width: 91.66667%; + max-width: 91.66667%; } + .next-col-s-23 { + -webkit-box-flex: 0; + -ms-flex: 0 0 95.83333%; + flex: 0 0 95.83333%; + width: 95.83333%; + max-width: 95.83333%; } + .next-col-s-24 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 990px) { + .next-col-m-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 4.16667%; + flex: 0 0 4.16667%; + width: 4.16667%; + max-width: 4.16667%; } + .next-col-m-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + width: 8.33333%; + max-width: 8.33333%; } + .next-col-m-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 12.5%; + flex: 0 0 12.5%; + width: 12.5%; + max-width: 12.5%; } + .next-col-m-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + width: 16.66667%; + max-width: 16.66667%; } + .next-col-m-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20.83333%; + flex: 0 0 20.83333%; + width: 20.83333%; + max-width: 20.83333%; } + .next-col-m-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + width: 25%; + max-width: 25%; } + .next-col-m-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 29.16667%; + flex: 0 0 29.16667%; + width: 29.16667%; + max-width: 29.16667%; } + .next-col-m-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + width: 33.33333%; + max-width: 33.33333%; } + .next-col-m-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 37.5%; + flex: 0 0 37.5%; + width: 37.5%; + max-width: 37.5%; } + .next-col-m-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + width: 41.66667%; + max-width: 41.66667%; } + .next-col-m-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 45.83333%; + flex: 0 0 45.83333%; + width: 45.83333%; + max-width: 45.83333%; } + .next-col-m-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + width: 50%; + max-width: 50%; } + .next-col-m-13 { + -webkit-box-flex: 0; + -ms-flex: 0 0 54.16667%; + flex: 0 0 54.16667%; + width: 54.16667%; + max-width: 54.16667%; } + .next-col-m-14 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + width: 58.33333%; + max-width: 58.33333%; } + .next-col-m-15 { + -webkit-box-flex: 0; + -ms-flex: 0 0 62.5%; + flex: 0 0 62.5%; + width: 62.5%; + max-width: 62.5%; } + .next-col-m-16 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + width: 66.66667%; + max-width: 66.66667%; } + .next-col-m-17 { + -webkit-box-flex: 0; + -ms-flex: 0 0 70.83333%; + flex: 0 0 70.83333%; + width: 70.83333%; + max-width: 70.83333%; } + .next-col-m-18 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + width: 75%; + max-width: 75%; } + .next-col-m-19 { + -webkit-box-flex: 0; + -ms-flex: 0 0 79.16667%; + flex: 0 0 79.16667%; + width: 79.16667%; + max-width: 79.16667%; } + .next-col-m-20 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + width: 83.33333%; + max-width: 83.33333%; } + .next-col-m-21 { + -webkit-box-flex: 0; + -ms-flex: 0 0 87.5%; + flex: 0 0 87.5%; + width: 87.5%; + max-width: 87.5%; } + .next-col-m-22 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + width: 91.66667%; + max-width: 91.66667%; } + .next-col-m-23 { + -webkit-box-flex: 0; + -ms-flex: 0 0 95.83333%; + flex: 0 0 95.83333%; + width: 95.83333%; + max-width: 95.83333%; } + .next-col-m-24 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 1200px) { + .next-col-l-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 4.16667%; + flex: 0 0 4.16667%; + width: 4.16667%; + max-width: 4.16667%; } + .next-col-l-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + width: 8.33333%; + max-width: 8.33333%; } + .next-col-l-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 12.5%; + flex: 0 0 12.5%; + width: 12.5%; + max-width: 12.5%; } + .next-col-l-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + width: 16.66667%; + max-width: 16.66667%; } + .next-col-l-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20.83333%; + flex: 0 0 20.83333%; + width: 20.83333%; + max-width: 20.83333%; } + .next-col-l-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + width: 25%; + max-width: 25%; } + .next-col-l-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 29.16667%; + flex: 0 0 29.16667%; + width: 29.16667%; + max-width: 29.16667%; } + .next-col-l-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + width: 33.33333%; + max-width: 33.33333%; } + .next-col-l-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 37.5%; + flex: 0 0 37.5%; + width: 37.5%; + max-width: 37.5%; } + .next-col-l-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + width: 41.66667%; + max-width: 41.66667%; } + .next-col-l-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 45.83333%; + flex: 0 0 45.83333%; + width: 45.83333%; + max-width: 45.83333%; } + .next-col-l-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + width: 50%; + max-width: 50%; } + .next-col-l-13 { + -webkit-box-flex: 0; + -ms-flex: 0 0 54.16667%; + flex: 0 0 54.16667%; + width: 54.16667%; + max-width: 54.16667%; } + .next-col-l-14 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + width: 58.33333%; + max-width: 58.33333%; } + .next-col-l-15 { + -webkit-box-flex: 0; + -ms-flex: 0 0 62.5%; + flex: 0 0 62.5%; + width: 62.5%; + max-width: 62.5%; } + .next-col-l-16 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + width: 66.66667%; + max-width: 66.66667%; } + .next-col-l-17 { + -webkit-box-flex: 0; + -ms-flex: 0 0 70.83333%; + flex: 0 0 70.83333%; + width: 70.83333%; + max-width: 70.83333%; } + .next-col-l-18 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + width: 75%; + max-width: 75%; } + .next-col-l-19 { + -webkit-box-flex: 0; + -ms-flex: 0 0 79.16667%; + flex: 0 0 79.16667%; + width: 79.16667%; + max-width: 79.16667%; } + .next-col-l-20 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + width: 83.33333%; + max-width: 83.33333%; } + .next-col-l-21 { + -webkit-box-flex: 0; + -ms-flex: 0 0 87.5%; + flex: 0 0 87.5%; + width: 87.5%; + max-width: 87.5%; } + .next-col-l-22 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + width: 91.66667%; + max-width: 91.66667%; } + .next-col-l-23 { + -webkit-box-flex: 0; + -ms-flex: 0 0 95.83333%; + flex: 0 0 95.83333%; + width: 95.83333%; + max-width: 95.83333%; } + .next-col-l-24 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 1500px) { + .next-col-xl-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 4.16667%; + flex: 0 0 4.16667%; + width: 4.16667%; + max-width: 4.16667%; } + .next-col-xl-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + width: 8.33333%; + max-width: 8.33333%; } + .next-col-xl-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 12.5%; + flex: 0 0 12.5%; + width: 12.5%; + max-width: 12.5%; } + .next-col-xl-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + width: 16.66667%; + max-width: 16.66667%; } + .next-col-xl-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20.83333%; + flex: 0 0 20.83333%; + width: 20.83333%; + max-width: 20.83333%; } + .next-col-xl-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + width: 25%; + max-width: 25%; } + .next-col-xl-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 29.16667%; + flex: 0 0 29.16667%; + width: 29.16667%; + max-width: 29.16667%; } + .next-col-xl-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + width: 33.33333%; + max-width: 33.33333%; } + .next-col-xl-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 37.5%; + flex: 0 0 37.5%; + width: 37.5%; + max-width: 37.5%; } + .next-col-xl-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + width: 41.66667%; + max-width: 41.66667%; } + .next-col-xl-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 45.83333%; + flex: 0 0 45.83333%; + width: 45.83333%; + max-width: 45.83333%; } + .next-col-xl-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + width: 50%; + max-width: 50%; } + .next-col-xl-13 { + -webkit-box-flex: 0; + -ms-flex: 0 0 54.16667%; + flex: 0 0 54.16667%; + width: 54.16667%; + max-width: 54.16667%; } + .next-col-xl-14 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + width: 58.33333%; + max-width: 58.33333%; } + .next-col-xl-15 { + -webkit-box-flex: 0; + -ms-flex: 0 0 62.5%; + flex: 0 0 62.5%; + width: 62.5%; + max-width: 62.5%; } + .next-col-xl-16 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + width: 66.66667%; + max-width: 66.66667%; } + .next-col-xl-17 { + -webkit-box-flex: 0; + -ms-flex: 0 0 70.83333%; + flex: 0 0 70.83333%; + width: 70.83333%; + max-width: 70.83333%; } + .next-col-xl-18 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + width: 75%; + max-width: 75%; } + .next-col-xl-19 { + -webkit-box-flex: 0; + -ms-flex: 0 0 79.16667%; + flex: 0 0 79.16667%; + width: 79.16667%; + max-width: 79.16667%; } + .next-col-xl-20 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + width: 83.33333%; + max-width: 83.33333%; } + .next-col-xl-21 { + -webkit-box-flex: 0; + -ms-flex: 0 0 87.5%; + flex: 0 0 87.5%; + width: 87.5%; + max-width: 87.5%; } + .next-col-xl-22 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + width: 91.66667%; + max-width: 91.66667%; } + .next-col-xl-23 { + -webkit-box-flex: 0; + -ms-flex: 0 0 95.83333%; + flex: 0 0 95.83333%; + width: 95.83333%; + max-width: 95.83333%; } + .next-col-xl-24 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +.next-col-1p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20%; + flex: 0 0 20%; + width: 20%; + max-width: 20%; } + +.next-col-2p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + width: 40%; + max-width: 40%; } + +.next-col-3p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + width: 60%; + max-width: 60%; } + +.next-col-4p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 80%; + flex: 0 0 80%; + width: 80%; + max-width: 80%; } + +.next-col-5p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } + +@media (min-width: 320px) { + .next-col-xxs-1p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20%; + flex: 0 0 20%; + width: 20%; + max-width: 20%; } + .next-col-xxs-2p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + width: 40%; + max-width: 40%; } + .next-col-xxs-3p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + width: 60%; + max-width: 60%; } + .next-col-xxs-4p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 80%; + flex: 0 0 80%; + width: 80%; + max-width: 80%; } + .next-col-xxs-5p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 480px) { + .next-col-xs-1p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20%; + flex: 0 0 20%; + width: 20%; + max-width: 20%; } + .next-col-xs-2p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + width: 40%; + max-width: 40%; } + .next-col-xs-3p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + width: 60%; + max-width: 60%; } + .next-col-xs-4p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 80%; + flex: 0 0 80%; + width: 80%; + max-width: 80%; } + .next-col-xs-5p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 720px) { + .next-col-s-1p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20%; + flex: 0 0 20%; + width: 20%; + max-width: 20%; } + .next-col-s-2p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + width: 40%; + max-width: 40%; } + .next-col-s-3p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + width: 60%; + max-width: 60%; } + .next-col-s-4p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 80%; + flex: 0 0 80%; + width: 80%; + max-width: 80%; } + .next-col-s-5p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 990px) { + .next-col-m-1p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20%; + flex: 0 0 20%; + width: 20%; + max-width: 20%; } + .next-col-m-2p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + width: 40%; + max-width: 40%; } + .next-col-m-3p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + width: 60%; + max-width: 60%; } + .next-col-m-4p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 80%; + flex: 0 0 80%; + width: 80%; + max-width: 80%; } + .next-col-m-5p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 1200px) { + .next-col-l-1p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20%; + flex: 0 0 20%; + width: 20%; + max-width: 20%; } + .next-col-l-2p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + width: 40%; + max-width: 40%; } + .next-col-l-3p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + width: 60%; + max-width: 60%; } + .next-col-l-4p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 80%; + flex: 0 0 80%; + width: 80%; + max-width: 80%; } + .next-col-l-5p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 1500px) { + .next-col-xl-1p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20%; + flex: 0 0 20%; + width: 20%; + max-width: 20%; } + .next-col-xl-2p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + width: 40%; + max-width: 40%; } + .next-col-xl-3p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + width: 60%; + max-width: 60%; } + .next-col-xl-4p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 80%; + flex: 0 0 80%; + width: 80%; + max-width: 80%; } + .next-col-xl-5p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +.next-col-fixed-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20px; + flex: 0 0 20px; + width: 20px; + max-width: 20px; } + +.next-col-fixed-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 40px; + flex: 0 0 40px; + width: 40px; + max-width: 40px; } + +.next-col-fixed-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 60px; + flex: 0 0 60px; + width: 60px; + max-width: 60px; } + +.next-col-fixed-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 80px; + flex: 0 0 80px; + width: 80px; + max-width: 80px; } + +.next-col-fixed-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100px; + flex: 0 0 100px; + width: 100px; + max-width: 100px; } + +.next-col-fixed-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 120px; + flex: 0 0 120px; + width: 120px; + max-width: 120px; } + +.next-col-fixed-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 140px; + flex: 0 0 140px; + width: 140px; + max-width: 140px; } + +.next-col-fixed-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 160px; + flex: 0 0 160px; + width: 160px; + max-width: 160px; } + +.next-col-fixed-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 180px; + flex: 0 0 180px; + width: 180px; + max-width: 180px; } + +.next-col-fixed-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 200px; + flex: 0 0 200px; + width: 200px; + max-width: 200px; } + +.next-col-fixed-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 220px; + flex: 0 0 220px; + width: 220px; + max-width: 220px; } + +.next-col-fixed-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 240px; + flex: 0 0 240px; + width: 240px; + max-width: 240px; } + +.next-col-fixed-13 { + -webkit-box-flex: 0; + -ms-flex: 0 0 260px; + flex: 0 0 260px; + width: 260px; + max-width: 260px; } + +.next-col-fixed-14 { + -webkit-box-flex: 0; + -ms-flex: 0 0 280px; + flex: 0 0 280px; + width: 280px; + max-width: 280px; } + +.next-col-fixed-15 { + -webkit-box-flex: 0; + -ms-flex: 0 0 300px; + flex: 0 0 300px; + width: 300px; + max-width: 300px; } + +.next-col-fixed-16 { + -webkit-box-flex: 0; + -ms-flex: 0 0 320px; + flex: 0 0 320px; + width: 320px; + max-width: 320px; } + +.next-col-fixed-17 { + -webkit-box-flex: 0; + -ms-flex: 0 0 340px; + flex: 0 0 340px; + width: 340px; + max-width: 340px; } + +.next-col-fixed-18 { + -webkit-box-flex: 0; + -ms-flex: 0 0 360px; + flex: 0 0 360px; + width: 360px; + max-width: 360px; } + +.next-col-fixed-19 { + -webkit-box-flex: 0; + -ms-flex: 0 0 380px; + flex: 0 0 380px; + width: 380px; + max-width: 380px; } + +.next-col-fixed-20 { + -webkit-box-flex: 0; + -ms-flex: 0 0 400px; + flex: 0 0 400px; + width: 400px; + max-width: 400px; } + +.next-col-fixed-21 { + -webkit-box-flex: 0; + -ms-flex: 0 0 420px; + flex: 0 0 420px; + width: 420px; + max-width: 420px; } + +.next-col-fixed-22 { + -webkit-box-flex: 0; + -ms-flex: 0 0 440px; + flex: 0 0 440px; + width: 440px; + max-width: 440px; } + +.next-col-fixed-23 { + -webkit-box-flex: 0; + -ms-flex: 0 0 460px; + flex: 0 0 460px; + width: 460px; + max-width: 460px; } + +.next-col-fixed-24 { + -webkit-box-flex: 0; + -ms-flex: 0 0 480px; + flex: 0 0 480px; + width: 480px; + max-width: 480px; } + +.next-col-fixed-25 { + -webkit-box-flex: 0; + -ms-flex: 0 0 500px; + flex: 0 0 500px; + width: 500px; + max-width: 500px; } + +.next-col-fixed-26 { + -webkit-box-flex: 0; + -ms-flex: 0 0 520px; + flex: 0 0 520px; + width: 520px; + max-width: 520px; } + +.next-col-fixed-27 { + -webkit-box-flex: 0; + -ms-flex: 0 0 540px; + flex: 0 0 540px; + width: 540px; + max-width: 540px; } + +.next-col-fixed-28 { + -webkit-box-flex: 0; + -ms-flex: 0 0 560px; + flex: 0 0 560px; + width: 560px; + max-width: 560px; } + +.next-col-fixed-29 { + -webkit-box-flex: 0; + -ms-flex: 0 0 580px; + flex: 0 0 580px; + width: 580px; + max-width: 580px; } + +.next-col-fixed-30 { + -webkit-box-flex: 0; + -ms-flex: 0 0 600px; + flex: 0 0 600px; + width: 600px; + max-width: 600px; } + +.next-col-offset-1 { + margin-left: 4.16667%; } + +.next-col-offset-2 { + margin-left: 8.33333%; } + +.next-col-offset-3 { + margin-left: 12.5%; } + +.next-col-offset-4 { + margin-left: 16.66667%; } + +.next-col-offset-5 { + margin-left: 20.83333%; } + +.next-col-offset-6 { + margin-left: 25%; } + +.next-col-offset-7 { + margin-left: 29.16667%; } + +.next-col-offset-8 { + margin-left: 33.33333%; } + +.next-col-offset-9 { + margin-left: 37.5%; } + +.next-col-offset-10 { + margin-left: 41.66667%; } + +.next-col-offset-11 { + margin-left: 45.83333%; } + +.next-col-offset-12 { + margin-left: 50%; } + +.next-col-offset-13 { + margin-left: 54.16667%; } + +.next-col-offset-14 { + margin-left: 58.33333%; } + +.next-col-offset-15 { + margin-left: 62.5%; } + +.next-col-offset-16 { + margin-left: 66.66667%; } + +.next-col-offset-17 { + margin-left: 70.83333%; } + +.next-col-offset-18 { + margin-left: 75%; } + +.next-col-offset-19 { + margin-left: 79.16667%; } + +.next-col-offset-20 { + margin-left: 83.33333%; } + +.next-col-offset-21 { + margin-left: 87.5%; } + +.next-col-offset-22 { + margin-left: 91.66667%; } + +.next-col-offset-23 { + margin-left: 95.83333%; } + +.next-col-offset-24 { + margin-left: 100%; } + +@media (min-width: 320px) { + .next-col-xxs-offset-1 { + margin-left: 4.16667%; } + .next-col-xxs-offset-2 { + margin-left: 8.33333%; } + .next-col-xxs-offset-3 { + margin-left: 12.5%; } + .next-col-xxs-offset-4 { + margin-left: 16.66667%; } + .next-col-xxs-offset-5 { + margin-left: 20.83333%; } + .next-col-xxs-offset-6 { + margin-left: 25%; } + .next-col-xxs-offset-7 { + margin-left: 29.16667%; } + .next-col-xxs-offset-8 { + margin-left: 33.33333%; } + .next-col-xxs-offset-9 { + margin-left: 37.5%; } + .next-col-xxs-offset-10 { + margin-left: 41.66667%; } + .next-col-xxs-offset-11 { + margin-left: 45.83333%; } + .next-col-xxs-offset-12 { + margin-left: 50%; } + .next-col-xxs-offset-13 { + margin-left: 54.16667%; } + .next-col-xxs-offset-14 { + margin-left: 58.33333%; } + .next-col-xxs-offset-15 { + margin-left: 62.5%; } + .next-col-xxs-offset-16 { + margin-left: 66.66667%; } + .next-col-xxs-offset-17 { + margin-left: 70.83333%; } + .next-col-xxs-offset-18 { + margin-left: 75%; } + .next-col-xxs-offset-19 { + margin-left: 79.16667%; } + .next-col-xxs-offset-20 { + margin-left: 83.33333%; } + .next-col-xxs-offset-21 { + margin-left: 87.5%; } + .next-col-xxs-offset-22 { + margin-left: 91.66667%; } + .next-col-xxs-offset-23 { + margin-left: 95.83333%; } + .next-col-xxs-offset-24 { + margin-left: 100%; } } + +@media (min-width: 480px) { + .next-col-xs-offset-1 { + margin-left: 4.16667%; } + .next-col-xs-offset-2 { + margin-left: 8.33333%; } + .next-col-xs-offset-3 { + margin-left: 12.5%; } + .next-col-xs-offset-4 { + margin-left: 16.66667%; } + .next-col-xs-offset-5 { + margin-left: 20.83333%; } + .next-col-xs-offset-6 { + margin-left: 25%; } + .next-col-xs-offset-7 { + margin-left: 29.16667%; } + .next-col-xs-offset-8 { + margin-left: 33.33333%; } + .next-col-xs-offset-9 { + margin-left: 37.5%; } + .next-col-xs-offset-10 { + margin-left: 41.66667%; } + .next-col-xs-offset-11 { + margin-left: 45.83333%; } + .next-col-xs-offset-12 { + margin-left: 50%; } + .next-col-xs-offset-13 { + margin-left: 54.16667%; } + .next-col-xs-offset-14 { + margin-left: 58.33333%; } + .next-col-xs-offset-15 { + margin-left: 62.5%; } + .next-col-xs-offset-16 { + margin-left: 66.66667%; } + .next-col-xs-offset-17 { + margin-left: 70.83333%; } + .next-col-xs-offset-18 { + margin-left: 75%; } + .next-col-xs-offset-19 { + margin-left: 79.16667%; } + .next-col-xs-offset-20 { + margin-left: 83.33333%; } + .next-col-xs-offset-21 { + margin-left: 87.5%; } + .next-col-xs-offset-22 { + margin-left: 91.66667%; } + .next-col-xs-offset-23 { + margin-left: 95.83333%; } + .next-col-xs-offset-24 { + margin-left: 100%; } } + +@media (min-width: 720px) { + .next-col-s-offset-1 { + margin-left: 4.16667%; } + .next-col-s-offset-2 { + margin-left: 8.33333%; } + .next-col-s-offset-3 { + margin-left: 12.5%; } + .next-col-s-offset-4 { + margin-left: 16.66667%; } + .next-col-s-offset-5 { + margin-left: 20.83333%; } + .next-col-s-offset-6 { + margin-left: 25%; } + .next-col-s-offset-7 { + margin-left: 29.16667%; } + .next-col-s-offset-8 { + margin-left: 33.33333%; } + .next-col-s-offset-9 { + margin-left: 37.5%; } + .next-col-s-offset-10 { + margin-left: 41.66667%; } + .next-col-s-offset-11 { + margin-left: 45.83333%; } + .next-col-s-offset-12 { + margin-left: 50%; } + .next-col-s-offset-13 { + margin-left: 54.16667%; } + .next-col-s-offset-14 { + margin-left: 58.33333%; } + .next-col-s-offset-15 { + margin-left: 62.5%; } + .next-col-s-offset-16 { + margin-left: 66.66667%; } + .next-col-s-offset-17 { + margin-left: 70.83333%; } + .next-col-s-offset-18 { + margin-left: 75%; } + .next-col-s-offset-19 { + margin-left: 79.16667%; } + .next-col-s-offset-20 { + margin-left: 83.33333%; } + .next-col-s-offset-21 { + margin-left: 87.5%; } + .next-col-s-offset-22 { + margin-left: 91.66667%; } + .next-col-s-offset-23 { + margin-left: 95.83333%; } + .next-col-s-offset-24 { + margin-left: 100%; } } + +@media (min-width: 990px) { + .next-col-m-offset-1 { + margin-left: 4.16667%; } + .next-col-m-offset-2 { + margin-left: 8.33333%; } + .next-col-m-offset-3 { + margin-left: 12.5%; } + .next-col-m-offset-4 { + margin-left: 16.66667%; } + .next-col-m-offset-5 { + margin-left: 20.83333%; } + .next-col-m-offset-6 { + margin-left: 25%; } + .next-col-m-offset-7 { + margin-left: 29.16667%; } + .next-col-m-offset-8 { + margin-left: 33.33333%; } + .next-col-m-offset-9 { + margin-left: 37.5%; } + .next-col-m-offset-10 { + margin-left: 41.66667%; } + .next-col-m-offset-11 { + margin-left: 45.83333%; } + .next-col-m-offset-12 { + margin-left: 50%; } + .next-col-m-offset-13 { + margin-left: 54.16667%; } + .next-col-m-offset-14 { + margin-left: 58.33333%; } + .next-col-m-offset-15 { + margin-left: 62.5%; } + .next-col-m-offset-16 { + margin-left: 66.66667%; } + .next-col-m-offset-17 { + margin-left: 70.83333%; } + .next-col-m-offset-18 { + margin-left: 75%; } + .next-col-m-offset-19 { + margin-left: 79.16667%; } + .next-col-m-offset-20 { + margin-left: 83.33333%; } + .next-col-m-offset-21 { + margin-left: 87.5%; } + .next-col-m-offset-22 { + margin-left: 91.66667%; } + .next-col-m-offset-23 { + margin-left: 95.83333%; } + .next-col-m-offset-24 { + margin-left: 100%; } } + +@media (min-width: 1200px) { + .next-col-l-offset-1 { + margin-left: 4.16667%; } + .next-col-l-offset-2 { + margin-left: 8.33333%; } + .next-col-l-offset-3 { + margin-left: 12.5%; } + .next-col-l-offset-4 { + margin-left: 16.66667%; } + .next-col-l-offset-5 { + margin-left: 20.83333%; } + .next-col-l-offset-6 { + margin-left: 25%; } + .next-col-l-offset-7 { + margin-left: 29.16667%; } + .next-col-l-offset-8 { + margin-left: 33.33333%; } + .next-col-l-offset-9 { + margin-left: 37.5%; } + .next-col-l-offset-10 { + margin-left: 41.66667%; } + .next-col-l-offset-11 { + margin-left: 45.83333%; } + .next-col-l-offset-12 { + margin-left: 50%; } + .next-col-l-offset-13 { + margin-left: 54.16667%; } + .next-col-l-offset-14 { + margin-left: 58.33333%; } + .next-col-l-offset-15 { + margin-left: 62.5%; } + .next-col-l-offset-16 { + margin-left: 66.66667%; } + .next-col-l-offset-17 { + margin-left: 70.83333%; } + .next-col-l-offset-18 { + margin-left: 75%; } + .next-col-l-offset-19 { + margin-left: 79.16667%; } + .next-col-l-offset-20 { + margin-left: 83.33333%; } + .next-col-l-offset-21 { + margin-left: 87.5%; } + .next-col-l-offset-22 { + margin-left: 91.66667%; } + .next-col-l-offset-23 { + margin-left: 95.83333%; } + .next-col-l-offset-24 { + margin-left: 100%; } } + +@media (min-width: 1500px) { + .next-col-xl-offset-1 { + margin-left: 4.16667%; } + .next-col-xl-offset-2 { + margin-left: 8.33333%; } + .next-col-xl-offset-3 { + margin-left: 12.5%; } + .next-col-xl-offset-4 { + margin-left: 16.66667%; } + .next-col-xl-offset-5 { + margin-left: 20.83333%; } + .next-col-xl-offset-6 { + margin-left: 25%; } + .next-col-xl-offset-7 { + margin-left: 29.16667%; } + .next-col-xl-offset-8 { + margin-left: 33.33333%; } + .next-col-xl-offset-9 { + margin-left: 37.5%; } + .next-col-xl-offset-10 { + margin-left: 41.66667%; } + .next-col-xl-offset-11 { + margin-left: 45.83333%; } + .next-col-xl-offset-12 { + margin-left: 50%; } + .next-col-xl-offset-13 { + margin-left: 54.16667%; } + .next-col-xl-offset-14 { + margin-left: 58.33333%; } + .next-col-xl-offset-15 { + margin-left: 62.5%; } + .next-col-xl-offset-16 { + margin-left: 66.66667%; } + .next-col-xl-offset-17 { + margin-left: 70.83333%; } + .next-col-xl-offset-18 { + margin-left: 75%; } + .next-col-xl-offset-19 { + margin-left: 79.16667%; } + .next-col-xl-offset-20 { + margin-left: 83.33333%; } + .next-col-xl-offset-21 { + margin-left: 87.5%; } + .next-col-xl-offset-22 { + margin-left: 91.66667%; } + .next-col-xl-offset-23 { + margin-left: 95.83333%; } + .next-col-xl-offset-24 { + margin-left: 100%; } } + +.next-col-offset-fixed-1 { + margin-left: 20px; } + +.next-col-offset-fixed-2 { + margin-left: 40px; } + +.next-col-offset-fixed-3 { + margin-left: 60px; } + +.next-col-offset-fixed-4 { + margin-left: 80px; } + +.next-col-offset-fixed-5 { + margin-left: 100px; } + +.next-col-offset-fixed-6 { + margin-left: 120px; } + +.next-col-offset-fixed-7 { + margin-left: 140px; } + +.next-col-offset-fixed-8 { + margin-left: 160px; } + +.next-col-offset-fixed-9 { + margin-left: 180px; } + +.next-col-offset-fixed-10 { + margin-left: 200px; } + +.next-col-offset-fixed-11 { + margin-left: 220px; } + +.next-col-offset-fixed-12 { + margin-left: 240px; } + +.next-col-offset-fixed-13 { + margin-left: 260px; } + +.next-col-offset-fixed-14 { + margin-left: 280px; } + +.next-col-offset-fixed-15 { + margin-left: 300px; } + +.next-col-offset-fixed-16 { + margin-left: 320px; } + +.next-col-offset-fixed-17 { + margin-left: 340px; } + +.next-col-offset-fixed-18 { + margin-left: 360px; } + +.next-col-offset-fixed-19 { + margin-left: 380px; } + +.next-col-offset-fixed-20 { + margin-left: 400px; } + +.next-col-offset-fixed-21 { + margin-left: 420px; } + +.next-col-offset-fixed-22 { + margin-left: 440px; } + +.next-col-offset-fixed-23 { + margin-left: 460px; } + +.next-col-offset-fixed-24 { + margin-left: 480px; } + +.next-col-offset-fixed-25 { + margin-left: 500px; } + +.next-col-offset-fixed-26 { + margin-left: 520px; } + +.next-col-offset-fixed-27 { + margin-left: 540px; } + +.next-col-offset-fixed-28 { + margin-left: 560px; } + +.next-col-offset-fixed-29 { + margin-left: 580px; } + +.next-col-offset-fixed-30 { + margin-left: 600px; } + +.next-col-offset-fixed-xxs-1 { + margin-left: 20px; } + +.next-col-offset-fixed-xxs-2 { + margin-left: 40px; } + +.next-col-offset-fixed-xxs-3 { + margin-left: 60px; } + +.next-col-offset-fixed-xxs-4 { + margin-left: 80px; } + +.next-col-offset-fixed-xxs-5 { + margin-left: 100px; } + +.next-col-offset-fixed-xxs-6 { + margin-left: 120px; } + +.next-col-offset-fixed-xxs-7 { + margin-left: 140px; } + +.next-col-offset-fixed-xxs-8 { + margin-left: 160px; } + +.next-col-offset-fixed-xxs-9 { + margin-left: 180px; } + +.next-col-offset-fixed-xxs-10 { + margin-left: 200px; } + +.next-col-offset-fixed-xxs-11 { + margin-left: 220px; } + +.next-col-offset-fixed-xxs-12 { + margin-left: 240px; } + +.next-col-offset-fixed-xxs-13 { + margin-left: 260px; } + +.next-col-offset-fixed-xxs-14 { + margin-left: 280px; } + +.next-col-offset-fixed-xxs-15 { + margin-left: 300px; } + +.next-col-offset-fixed-xxs-16 { + margin-left: 320px; } + +.next-col-offset-fixed-xxs-17 { + margin-left: 340px; } + +.next-col-offset-fixed-xxs-18 { + margin-left: 360px; } + +.next-col-offset-fixed-xxs-19 { + margin-left: 380px; } + +.next-col-offset-fixed-xxs-20 { + margin-left: 400px; } + +.next-col-offset-fixed-xxs-21 { + margin-left: 420px; } + +.next-col-offset-fixed-xxs-22 { + margin-left: 440px; } + +.next-col-offset-fixed-xxs-23 { + margin-left: 460px; } + +.next-col-offset-fixed-xxs-24 { + margin-left: 480px; } + +.next-col-offset-fixed-xxs-25 { + margin-left: 500px; } + +.next-col-offset-fixed-xxs-26 { + margin-left: 520px; } + +.next-col-offset-fixed-xxs-27 { + margin-left: 540px; } + +.next-col-offset-fixed-xxs-28 { + margin-left: 560px; } + +.next-col-offset-fixed-xxs-29 { + margin-left: 580px; } + +.next-col-offset-fixed-xxs-30 { + margin-left: 600px; } + +.next-col-offset-fixed-xs-1 { + margin-left: 20px; } + +.next-col-offset-fixed-xs-2 { + margin-left: 40px; } + +.next-col-offset-fixed-xs-3 { + margin-left: 60px; } + +.next-col-offset-fixed-xs-4 { + margin-left: 80px; } + +.next-col-offset-fixed-xs-5 { + margin-left: 100px; } + +.next-col-offset-fixed-xs-6 { + margin-left: 120px; } + +.next-col-offset-fixed-xs-7 { + margin-left: 140px; } + +.next-col-offset-fixed-xs-8 { + margin-left: 160px; } + +.next-col-offset-fixed-xs-9 { + margin-left: 180px; } + +.next-col-offset-fixed-xs-10 { + margin-left: 200px; } + +.next-col-offset-fixed-xs-11 { + margin-left: 220px; } + +.next-col-offset-fixed-xs-12 { + margin-left: 240px; } + +.next-col-offset-fixed-xs-13 { + margin-left: 260px; } + +.next-col-offset-fixed-xs-14 { + margin-left: 280px; } + +.next-col-offset-fixed-xs-15 { + margin-left: 300px; } + +.next-col-offset-fixed-xs-16 { + margin-left: 320px; } + +.next-col-offset-fixed-xs-17 { + margin-left: 340px; } + +.next-col-offset-fixed-xs-18 { + margin-left: 360px; } + +.next-col-offset-fixed-xs-19 { + margin-left: 380px; } + +.next-col-offset-fixed-xs-20 { + margin-left: 400px; } + +.next-col-offset-fixed-xs-21 { + margin-left: 420px; } + +.next-col-offset-fixed-xs-22 { + margin-left: 440px; } + +.next-col-offset-fixed-xs-23 { + margin-left: 460px; } + +.next-col-offset-fixed-xs-24 { + margin-left: 480px; } + +.next-col-offset-fixed-xs-25 { + margin-left: 500px; } + +.next-col-offset-fixed-xs-26 { + margin-left: 520px; } + +.next-col-offset-fixed-xs-27 { + margin-left: 540px; } + +.next-col-offset-fixed-xs-28 { + margin-left: 560px; } + +.next-col-offset-fixed-xs-29 { + margin-left: 580px; } + +.next-col-offset-fixed-xs-30 { + margin-left: 600px; } + +.next-col-offset-fixed-s-1 { + margin-left: 20px; } + +.next-col-offset-fixed-s-2 { + margin-left: 40px; } + +.next-col-offset-fixed-s-3 { + margin-left: 60px; } + +.next-col-offset-fixed-s-4 { + margin-left: 80px; } + +.next-col-offset-fixed-s-5 { + margin-left: 100px; } + +.next-col-offset-fixed-s-6 { + margin-left: 120px; } + +.next-col-offset-fixed-s-7 { + margin-left: 140px; } + +.next-col-offset-fixed-s-8 { + margin-left: 160px; } + +.next-col-offset-fixed-s-9 { + margin-left: 180px; } + +.next-col-offset-fixed-s-10 { + margin-left: 200px; } + +.next-col-offset-fixed-s-11 { + margin-left: 220px; } + +.next-col-offset-fixed-s-12 { + margin-left: 240px; } + +.next-col-offset-fixed-s-13 { + margin-left: 260px; } + +.next-col-offset-fixed-s-14 { + margin-left: 280px; } + +.next-col-offset-fixed-s-15 { + margin-left: 300px; } + +.next-col-offset-fixed-s-16 { + margin-left: 320px; } + +.next-col-offset-fixed-s-17 { + margin-left: 340px; } + +.next-col-offset-fixed-s-18 { + margin-left: 360px; } + +.next-col-offset-fixed-s-19 { + margin-left: 380px; } + +.next-col-offset-fixed-s-20 { + margin-left: 400px; } + +.next-col-offset-fixed-s-21 { + margin-left: 420px; } + +.next-col-offset-fixed-s-22 { + margin-left: 440px; } + +.next-col-offset-fixed-s-23 { + margin-left: 460px; } + +.next-col-offset-fixed-s-24 { + margin-left: 480px; } + +.next-col-offset-fixed-s-25 { + margin-left: 500px; } + +.next-col-offset-fixed-s-26 { + margin-left: 520px; } + +.next-col-offset-fixed-s-27 { + margin-left: 540px; } + +.next-col-offset-fixed-s-28 { + margin-left: 560px; } + +.next-col-offset-fixed-s-29 { + margin-left: 580px; } + +.next-col-offset-fixed-s-30 { + margin-left: 600px; } + +.next-col-offset-fixed-m-1 { + margin-left: 20px; } + +.next-col-offset-fixed-m-2 { + margin-left: 40px; } + +.next-col-offset-fixed-m-3 { + margin-left: 60px; } + +.next-col-offset-fixed-m-4 { + margin-left: 80px; } + +.next-col-offset-fixed-m-5 { + margin-left: 100px; } + +.next-col-offset-fixed-m-6 { + margin-left: 120px; } + +.next-col-offset-fixed-m-7 { + margin-left: 140px; } + +.next-col-offset-fixed-m-8 { + margin-left: 160px; } + +.next-col-offset-fixed-m-9 { + margin-left: 180px; } + +.next-col-offset-fixed-m-10 { + margin-left: 200px; } + +.next-col-offset-fixed-m-11 { + margin-left: 220px; } + +.next-col-offset-fixed-m-12 { + margin-left: 240px; } + +.next-col-offset-fixed-m-13 { + margin-left: 260px; } + +.next-col-offset-fixed-m-14 { + margin-left: 280px; } + +.next-col-offset-fixed-m-15 { + margin-left: 300px; } + +.next-col-offset-fixed-m-16 { + margin-left: 320px; } + +.next-col-offset-fixed-m-17 { + margin-left: 340px; } + +.next-col-offset-fixed-m-18 { + margin-left: 360px; } + +.next-col-offset-fixed-m-19 { + margin-left: 380px; } + +.next-col-offset-fixed-m-20 { + margin-left: 400px; } + +.next-col-offset-fixed-m-21 { + margin-left: 420px; } + +.next-col-offset-fixed-m-22 { + margin-left: 440px; } + +.next-col-offset-fixed-m-23 { + margin-left: 460px; } + +.next-col-offset-fixed-m-24 { + margin-left: 480px; } + +.next-col-offset-fixed-m-25 { + margin-left: 500px; } + +.next-col-offset-fixed-m-26 { + margin-left: 520px; } + +.next-col-offset-fixed-m-27 { + margin-left: 540px; } + +.next-col-offset-fixed-m-28 { + margin-left: 560px; } + +.next-col-offset-fixed-m-29 { + margin-left: 580px; } + +.next-col-offset-fixed-m-30 { + margin-left: 600px; } + +.next-col-offset-fixed-l-1 { + margin-left: 20px; } + +.next-col-offset-fixed-l-2 { + margin-left: 40px; } + +.next-col-offset-fixed-l-3 { + margin-left: 60px; } + +.next-col-offset-fixed-l-4 { + margin-left: 80px; } + +.next-col-offset-fixed-l-5 { + margin-left: 100px; } + +.next-col-offset-fixed-l-6 { + margin-left: 120px; } + +.next-col-offset-fixed-l-7 { + margin-left: 140px; } + +.next-col-offset-fixed-l-8 { + margin-left: 160px; } + +.next-col-offset-fixed-l-9 { + margin-left: 180px; } + +.next-col-offset-fixed-l-10 { + margin-left: 200px; } + +.next-col-offset-fixed-l-11 { + margin-left: 220px; } + +.next-col-offset-fixed-l-12 { + margin-left: 240px; } + +.next-col-offset-fixed-l-13 { + margin-left: 260px; } + +.next-col-offset-fixed-l-14 { + margin-left: 280px; } + +.next-col-offset-fixed-l-15 { + margin-left: 300px; } + +.next-col-offset-fixed-l-16 { + margin-left: 320px; } + +.next-col-offset-fixed-l-17 { + margin-left: 340px; } + +.next-col-offset-fixed-l-18 { + margin-left: 360px; } + +.next-col-offset-fixed-l-19 { + margin-left: 380px; } + +.next-col-offset-fixed-l-20 { + margin-left: 400px; } + +.next-col-offset-fixed-l-21 { + margin-left: 420px; } + +.next-col-offset-fixed-l-22 { + margin-left: 440px; } + +.next-col-offset-fixed-l-23 { + margin-left: 460px; } + +.next-col-offset-fixed-l-24 { + margin-left: 480px; } + +.next-col-offset-fixed-l-25 { + margin-left: 500px; } + +.next-col-offset-fixed-l-26 { + margin-left: 520px; } + +.next-col-offset-fixed-l-27 { + margin-left: 540px; } + +.next-col-offset-fixed-l-28 { + margin-left: 560px; } + +.next-col-offset-fixed-l-29 { + margin-left: 580px; } + +.next-col-offset-fixed-l-30 { + margin-left: 600px; } + +.next-col-offset-fixed-xl-1 { + margin-left: 20px; } + +.next-col-offset-fixed-xl-2 { + margin-left: 40px; } + +.next-col-offset-fixed-xl-3 { + margin-left: 60px; } + +.next-col-offset-fixed-xl-4 { + margin-left: 80px; } + +.next-col-offset-fixed-xl-5 { + margin-left: 100px; } + +.next-col-offset-fixed-xl-6 { + margin-left: 120px; } + +.next-col-offset-fixed-xl-7 { + margin-left: 140px; } + +.next-col-offset-fixed-xl-8 { + margin-left: 160px; } + +.next-col-offset-fixed-xl-9 { + margin-left: 180px; } + +.next-col-offset-fixed-xl-10 { + margin-left: 200px; } + +.next-col-offset-fixed-xl-11 { + margin-left: 220px; } + +.next-col-offset-fixed-xl-12 { + margin-left: 240px; } + +.next-col-offset-fixed-xl-13 { + margin-left: 260px; } + +.next-col-offset-fixed-xl-14 { + margin-left: 280px; } + +.next-col-offset-fixed-xl-15 { + margin-left: 300px; } + +.next-col-offset-fixed-xl-16 { + margin-left: 320px; } + +.next-col-offset-fixed-xl-17 { + margin-left: 340px; } + +.next-col-offset-fixed-xl-18 { + margin-left: 360px; } + +.next-col-offset-fixed-xl-19 { + margin-left: 380px; } + +.next-col-offset-fixed-xl-20 { + margin-left: 400px; } + +.next-col-offset-fixed-xl-21 { + margin-left: 420px; } + +.next-col-offset-fixed-xl-22 { + margin-left: 440px; } + +.next-col-offset-fixed-xl-23 { + margin-left: 460px; } + +.next-col-offset-fixed-xl-24 { + margin-left: 480px; } + +.next-col-offset-fixed-xl-25 { + margin-left: 500px; } + +.next-col-offset-fixed-xl-26 { + margin-left: 520px; } + +.next-col-offset-fixed-xl-27 { + margin-left: 540px; } + +.next-col-offset-fixed-xl-28 { + margin-left: 560px; } + +.next-col-offset-fixed-xl-29 { + margin-left: 580px; } + +.next-col-offset-fixed-xl-30 { + margin-left: 600px; } + +.next-col.next-col-hidden { + display: none; } + +@media (min-width: 320px) and (max-width: 479px) { + .next-col.next-col-xxs-hidden { + display: none; } } + +@media (min-width: 480px) and (max-width: 719px) { + .next-col.next-col-xs-hidden { + display: none; } } + +@media (min-width: 720px) and (max-width: 989px) { + .next-col.next-col-s-hidden { + display: none; } } + +@media (min-width: 990px) and (max-width: 1199px) { + .next-col.next-col-m-hidden { + display: none; } } + +@media (min-width: 1200px) and (max-width: 1499px) { + .next-col.next-col-l-hidden { + display: none; } } + +@media (min-width: 1500px) { + .next-col.next-col-xl-hidden { + display: none; } } + +.next-row.next-row-hidden { + display: none; } + +@media (min-width: 320px) and (max-width: 479px) { + .next-row.next-row-xxs-hidden { + display: none; } } + +@media (min-width: 480px) and (max-width: 719px) { + .next-row.next-row-xs-hidden { + display: none; } } + +@media (min-width: 720px) and (max-width: 989px) { + .next-row.next-row-s-hidden { + display: none; } } + +@media (min-width: 990px) and (max-width: 1199px) { + .next-row.next-row-m-hidden { + display: none; } } + +@media (min-width: 1200px) and (max-width: 1499px) { + .next-row.next-row-l-hidden { + display: none; } } + +@media (min-width: 1500px) { + .next-row.next-row-xl-hidden { + display: none; } } + +.next-col-offset-1[dir="rtl"] { + margin-right: 4.16667%; + margin-left: auto; } + +.next-col-offset-2[dir="rtl"] { + margin-right: 8.33333%; + margin-left: auto; } + +.next-col-offset-3[dir="rtl"] { + margin-right: 12.5%; + margin-left: auto; } + +.next-col-offset-4[dir="rtl"] { + margin-right: 16.66667%; + margin-left: auto; } + +.next-col-offset-5[dir="rtl"] { + margin-right: 20.83333%; + margin-left: auto; } + +.next-col-offset-6[dir="rtl"] { + margin-right: 25%; + margin-left: auto; } + +.next-col-offset-7[dir="rtl"] { + margin-right: 29.16667%; + margin-left: auto; } + +.next-col-offset-8[dir="rtl"] { + margin-right: 33.33333%; + margin-left: auto; } + +.next-col-offset-9[dir="rtl"] { + margin-right: 37.5%; + margin-left: auto; } + +.next-col-offset-10[dir="rtl"] { + margin-right: 41.66667%; + margin-left: auto; } + +.next-col-offset-11[dir="rtl"] { + margin-right: 45.83333%; + margin-left: auto; } + +.next-col-offset-12[dir="rtl"] { + margin-right: 50%; + margin-left: auto; } + +.next-col-offset-13[dir="rtl"] { + margin-right: 54.16667%; + margin-left: auto; } + +.next-col-offset-14[dir="rtl"] { + margin-right: 58.33333%; + margin-left: auto; } + +.next-col-offset-15[dir="rtl"] { + margin-right: 62.5%; + margin-left: auto; } + +.next-col-offset-16[dir="rtl"] { + margin-right: 66.66667%; + margin-left: auto; } + +.next-col-offset-17[dir="rtl"] { + margin-right: 70.83333%; + margin-left: auto; } + +.next-col-offset-18[dir="rtl"] { + margin-right: 75%; + margin-left: auto; } + +.next-col-offset-19[dir="rtl"] { + margin-right: 79.16667%; + margin-left: auto; } + +.next-col-offset-20[dir="rtl"] { + margin-right: 83.33333%; + margin-left: auto; } + +.next-col-offset-21[dir="rtl"] { + margin-right: 87.5%; + margin-left: auto; } + +.next-col-offset-22[dir="rtl"] { + margin-right: 91.66667%; + margin-left: auto; } + +.next-col-offset-23[dir="rtl"] { + margin-right: 95.83333%; + margin-left: auto; } + +.next-col-offset-24[dir="rtl"] { + margin-right: 100%; + margin-left: auto; } + +@media (min-width: 320px) { + .next-col-xxs-offset-1[dir="rtl"] { + margin-right: 4.16667%; + margin-left: auto; } + .next-col-xxs-offset-2[dir="rtl"] { + margin-right: 8.33333%; + margin-left: auto; } + .next-col-xxs-offset-3[dir="rtl"] { + margin-right: 12.5%; + margin-left: auto; } + .next-col-xxs-offset-4[dir="rtl"] { + margin-right: 16.66667%; + margin-left: auto; } + .next-col-xxs-offset-5[dir="rtl"] { + margin-right: 20.83333%; + margin-left: auto; } + .next-col-xxs-offset-6[dir="rtl"] { + margin-right: 25%; + margin-left: auto; } + .next-col-xxs-offset-7[dir="rtl"] { + margin-right: 29.16667%; + margin-left: auto; } + .next-col-xxs-offset-8[dir="rtl"] { + margin-right: 33.33333%; + margin-left: auto; } + .next-col-xxs-offset-9[dir="rtl"] { + margin-right: 37.5%; + margin-left: auto; } + .next-col-xxs-offset-10[dir="rtl"] { + margin-right: 41.66667%; + margin-left: auto; } + .next-col-xxs-offset-11[dir="rtl"] { + margin-right: 45.83333%; + margin-left: auto; } + .next-col-xxs-offset-12[dir="rtl"] { + margin-right: 50%; + margin-left: auto; } + .next-col-xxs-offset-13[dir="rtl"] { + margin-right: 54.16667%; + margin-left: auto; } + .next-col-xxs-offset-14[dir="rtl"] { + margin-right: 58.33333%; + margin-left: auto; } + .next-col-xxs-offset-15[dir="rtl"] { + margin-right: 62.5%; + margin-left: auto; } + .next-col-xxs-offset-16[dir="rtl"] { + margin-right: 66.66667%; + margin-left: auto; } + .next-col-xxs-offset-17[dir="rtl"] { + margin-right: 70.83333%; + margin-left: auto; } + .next-col-xxs-offset-18[dir="rtl"] { + margin-right: 75%; + margin-left: auto; } + .next-col-xxs-offset-19[dir="rtl"] { + margin-right: 79.16667%; + margin-left: auto; } + .next-col-xxs-offset-20[dir="rtl"] { + margin-right: 83.33333%; + margin-left: auto; } + .next-col-xxs-offset-21[dir="rtl"] { + margin-right: 87.5%; + margin-left: auto; } + .next-col-xxs-offset-22[dir="rtl"] { + margin-right: 91.66667%; + margin-left: auto; } + .next-col-xxs-offset-23[dir="rtl"] { + margin-right: 95.83333%; + margin-left: auto; } + .next-col-xxs-offset-24[dir="rtl"] { + margin-right: 100%; + margin-left: auto; } } + +@media (min-width: 480px) { + .next-col-xs-offset-1[dir="rtl"] { + margin-right: 4.16667%; + margin-left: auto; } + .next-col-xs-offset-2[dir="rtl"] { + margin-right: 8.33333%; + margin-left: auto; } + .next-col-xs-offset-3[dir="rtl"] { + margin-right: 12.5%; + margin-left: auto; } + .next-col-xs-offset-4[dir="rtl"] { + margin-right: 16.66667%; + margin-left: auto; } + .next-col-xs-offset-5[dir="rtl"] { + margin-right: 20.83333%; + margin-left: auto; } + .next-col-xs-offset-6[dir="rtl"] { + margin-right: 25%; + margin-left: auto; } + .next-col-xs-offset-7[dir="rtl"] { + margin-right: 29.16667%; + margin-left: auto; } + .next-col-xs-offset-8[dir="rtl"] { + margin-right: 33.33333%; + margin-left: auto; } + .next-col-xs-offset-9[dir="rtl"] { + margin-right: 37.5%; + margin-left: auto; } + .next-col-xs-offset-10[dir="rtl"] { + margin-right: 41.66667%; + margin-left: auto; } + .next-col-xs-offset-11[dir="rtl"] { + margin-right: 45.83333%; + margin-left: auto; } + .next-col-xs-offset-12[dir="rtl"] { + margin-right: 50%; + margin-left: auto; } + .next-col-xs-offset-13[dir="rtl"] { + margin-right: 54.16667%; + margin-left: auto; } + .next-col-xs-offset-14[dir="rtl"] { + margin-right: 58.33333%; + margin-left: auto; } + .next-col-xs-offset-15[dir="rtl"] { + margin-right: 62.5%; + margin-left: auto; } + .next-col-xs-offset-16[dir="rtl"] { + margin-right: 66.66667%; + margin-left: auto; } + .next-col-xs-offset-17[dir="rtl"] { + margin-right: 70.83333%; + margin-left: auto; } + .next-col-xs-offset-18[dir="rtl"] { + margin-right: 75%; + margin-left: auto; } + .next-col-xs-offset-19[dir="rtl"] { + margin-right: 79.16667%; + margin-left: auto; } + .next-col-xs-offset-20[dir="rtl"] { + margin-right: 83.33333%; + margin-left: auto; } + .next-col-xs-offset-21[dir="rtl"] { + margin-right: 87.5%; + margin-left: auto; } + .next-col-xs-offset-22[dir="rtl"] { + margin-right: 91.66667%; + margin-left: auto; } + .next-col-xs-offset-23[dir="rtl"] { + margin-right: 95.83333%; + margin-left: auto; } + .next-col-xs-offset-24[dir="rtl"] { + margin-right: 100%; + margin-left: auto; } } + +@media (min-width: 720px) { + .next-col-s-offset-1[dir="rtl"] { + margin-right: 4.16667%; + margin-left: auto; } + .next-col-s-offset-2[dir="rtl"] { + margin-right: 8.33333%; + margin-left: auto; } + .next-col-s-offset-3[dir="rtl"] { + margin-right: 12.5%; + margin-left: auto; } + .next-col-s-offset-4[dir="rtl"] { + margin-right: 16.66667%; + margin-left: auto; } + .next-col-s-offset-5[dir="rtl"] { + margin-right: 20.83333%; + margin-left: auto; } + .next-col-s-offset-6[dir="rtl"] { + margin-right: 25%; + margin-left: auto; } + .next-col-s-offset-7[dir="rtl"] { + margin-right: 29.16667%; + margin-left: auto; } + .next-col-s-offset-8[dir="rtl"] { + margin-right: 33.33333%; + margin-left: auto; } + .next-col-s-offset-9[dir="rtl"] { + margin-right: 37.5%; + margin-left: auto; } + .next-col-s-offset-10[dir="rtl"] { + margin-right: 41.66667%; + margin-left: auto; } + .next-col-s-offset-11[dir="rtl"] { + margin-right: 45.83333%; + margin-left: auto; } + .next-col-s-offset-12[dir="rtl"] { + margin-right: 50%; + margin-left: auto; } + .next-col-s-offset-13[dir="rtl"] { + margin-right: 54.16667%; + margin-left: auto; } + .next-col-s-offset-14[dir="rtl"] { + margin-right: 58.33333%; + margin-left: auto; } + .next-col-s-offset-15[dir="rtl"] { + margin-right: 62.5%; + margin-left: auto; } + .next-col-s-offset-16[dir="rtl"] { + margin-right: 66.66667%; + margin-left: auto; } + .next-col-s-offset-17[dir="rtl"] { + margin-right: 70.83333%; + margin-left: auto; } + .next-col-s-offset-18[dir="rtl"] { + margin-right: 75%; + margin-left: auto; } + .next-col-s-offset-19[dir="rtl"] { + margin-right: 79.16667%; + margin-left: auto; } + .next-col-s-offset-20[dir="rtl"] { + margin-right: 83.33333%; + margin-left: auto; } + .next-col-s-offset-21[dir="rtl"] { + margin-right: 87.5%; + margin-left: auto; } + .next-col-s-offset-22[dir="rtl"] { + margin-right: 91.66667%; + margin-left: auto; } + .next-col-s-offset-23[dir="rtl"] { + margin-right: 95.83333%; + margin-left: auto; } + .next-col-s-offset-24[dir="rtl"] { + margin-right: 100%; + margin-left: auto; } } + +@media (min-width: 990px) { + .next-col-m-offset-1[dir="rtl"] { + margin-right: 4.16667%; + margin-left: auto; } + .next-col-m-offset-2[dir="rtl"] { + margin-right: 8.33333%; + margin-left: auto; } + .next-col-m-offset-3[dir="rtl"] { + margin-right: 12.5%; + margin-left: auto; } + .next-col-m-offset-4[dir="rtl"] { + margin-right: 16.66667%; + margin-left: auto; } + .next-col-m-offset-5[dir="rtl"] { + margin-right: 20.83333%; + margin-left: auto; } + .next-col-m-offset-6[dir="rtl"] { + margin-right: 25%; + margin-left: auto; } + .next-col-m-offset-7[dir="rtl"] { + margin-right: 29.16667%; + margin-left: auto; } + .next-col-m-offset-8[dir="rtl"] { + margin-right: 33.33333%; + margin-left: auto; } + .next-col-m-offset-9[dir="rtl"] { + margin-right: 37.5%; + margin-left: auto; } + .next-col-m-offset-10[dir="rtl"] { + margin-right: 41.66667%; + margin-left: auto; } + .next-col-m-offset-11[dir="rtl"] { + margin-right: 45.83333%; + margin-left: auto; } + .next-col-m-offset-12[dir="rtl"] { + margin-right: 50%; + margin-left: auto; } + .next-col-m-offset-13[dir="rtl"] { + margin-right: 54.16667%; + margin-left: auto; } + .next-col-m-offset-14[dir="rtl"] { + margin-right: 58.33333%; + margin-left: auto; } + .next-col-m-offset-15[dir="rtl"] { + margin-right: 62.5%; + margin-left: auto; } + .next-col-m-offset-16[dir="rtl"] { + margin-right: 66.66667%; + margin-left: auto; } + .next-col-m-offset-17[dir="rtl"] { + margin-right: 70.83333%; + margin-left: auto; } + .next-col-m-offset-18[dir="rtl"] { + margin-right: 75%; + margin-left: auto; } + .next-col-m-offset-19[dir="rtl"] { + margin-right: 79.16667%; + margin-left: auto; } + .next-col-m-offset-20[dir="rtl"] { + margin-right: 83.33333%; + margin-left: auto; } + .next-col-m-offset-21[dir="rtl"] { + margin-right: 87.5%; + margin-left: auto; } + .next-col-m-offset-22[dir="rtl"] { + margin-right: 91.66667%; + margin-left: auto; } + .next-col-m-offset-23[dir="rtl"] { + margin-right: 95.83333%; + margin-left: auto; } + .next-col-m-offset-24[dir="rtl"] { + margin-right: 100%; + margin-left: auto; } } + +@media (min-width: 1200px) { + .next-col-l-offset-1[dir="rtl"] { + margin-right: 4.16667%; + margin-left: auto; } + .next-col-l-offset-2[dir="rtl"] { + margin-right: 8.33333%; + margin-left: auto; } + .next-col-l-offset-3[dir="rtl"] { + margin-right: 12.5%; + margin-left: auto; } + .next-col-l-offset-4[dir="rtl"] { + margin-right: 16.66667%; + margin-left: auto; } + .next-col-l-offset-5[dir="rtl"] { + margin-right: 20.83333%; + margin-left: auto; } + .next-col-l-offset-6[dir="rtl"] { + margin-right: 25%; + margin-left: auto; } + .next-col-l-offset-7[dir="rtl"] { + margin-right: 29.16667%; + margin-left: auto; } + .next-col-l-offset-8[dir="rtl"] { + margin-right: 33.33333%; + margin-left: auto; } + .next-col-l-offset-9[dir="rtl"] { + margin-right: 37.5%; + margin-left: auto; } + .next-col-l-offset-10[dir="rtl"] { + margin-right: 41.66667%; + margin-left: auto; } + .next-col-l-offset-11[dir="rtl"] { + margin-right: 45.83333%; + margin-left: auto; } + .next-col-l-offset-12[dir="rtl"] { + margin-right: 50%; + margin-left: auto; } + .next-col-l-offset-13[dir="rtl"] { + margin-right: 54.16667%; + margin-left: auto; } + .next-col-l-offset-14[dir="rtl"] { + margin-right: 58.33333%; + margin-left: auto; } + .next-col-l-offset-15[dir="rtl"] { + margin-right: 62.5%; + margin-left: auto; } + .next-col-l-offset-16[dir="rtl"] { + margin-right: 66.66667%; + margin-left: auto; } + .next-col-l-offset-17[dir="rtl"] { + margin-right: 70.83333%; + margin-left: auto; } + .next-col-l-offset-18[dir="rtl"] { + margin-right: 75%; + margin-left: auto; } + .next-col-l-offset-19[dir="rtl"] { + margin-right: 79.16667%; + margin-left: auto; } + .next-col-l-offset-20[dir="rtl"] { + margin-right: 83.33333%; + margin-left: auto; } + .next-col-l-offset-21[dir="rtl"] { + margin-right: 87.5%; + margin-left: auto; } + .next-col-l-offset-22[dir="rtl"] { + margin-right: 91.66667%; + margin-left: auto; } + .next-col-l-offset-23[dir="rtl"] { + margin-right: 95.83333%; + margin-left: auto; } + .next-col-l-offset-24[dir="rtl"] { + margin-right: 100%; + margin-left: auto; } } + +@media (min-width: 1500px) { + .next-col-xl-offset-1[dir="rtl"] { + margin-right: 4.16667%; + margin-left: auto; } + .next-col-xl-offset-2[dir="rtl"] { + margin-right: 8.33333%; + margin-left: auto; } + .next-col-xl-offset-3[dir="rtl"] { + margin-right: 12.5%; + margin-left: auto; } + .next-col-xl-offset-4[dir="rtl"] { + margin-right: 16.66667%; + margin-left: auto; } + .next-col-xl-offset-5[dir="rtl"] { + margin-right: 20.83333%; + margin-left: auto; } + .next-col-xl-offset-6[dir="rtl"] { + margin-right: 25%; + margin-left: auto; } + .next-col-xl-offset-7[dir="rtl"] { + margin-right: 29.16667%; + margin-left: auto; } + .next-col-xl-offset-8[dir="rtl"] { + margin-right: 33.33333%; + margin-left: auto; } + .next-col-xl-offset-9[dir="rtl"] { + margin-right: 37.5%; + margin-left: auto; } + .next-col-xl-offset-10[dir="rtl"] { + margin-right: 41.66667%; + margin-left: auto; } + .next-col-xl-offset-11[dir="rtl"] { + margin-right: 45.83333%; + margin-left: auto; } + .next-col-xl-offset-12[dir="rtl"] { + margin-right: 50%; + margin-left: auto; } + .next-col-xl-offset-13[dir="rtl"] { + margin-right: 54.16667%; + margin-left: auto; } + .next-col-xl-offset-14[dir="rtl"] { + margin-right: 58.33333%; + margin-left: auto; } + .next-col-xl-offset-15[dir="rtl"] { + margin-right: 62.5%; + margin-left: auto; } + .next-col-xl-offset-16[dir="rtl"] { + margin-right: 66.66667%; + margin-left: auto; } + .next-col-xl-offset-17[dir="rtl"] { + margin-right: 70.83333%; + margin-left: auto; } + .next-col-xl-offset-18[dir="rtl"] { + margin-right: 75%; + margin-left: auto; } + .next-col-xl-offset-19[dir="rtl"] { + margin-right: 79.16667%; + margin-left: auto; } + .next-col-xl-offset-20[dir="rtl"] { + margin-right: 83.33333%; + margin-left: auto; } + .next-col-xl-offset-21[dir="rtl"] { + margin-right: 87.5%; + margin-left: auto; } + .next-col-xl-offset-22[dir="rtl"] { + margin-right: 91.66667%; + margin-left: auto; } + .next-col-xl-offset-23[dir="rtl"] { + margin-right: 95.83333%; + margin-left: auto; } + .next-col-xl-offset-24[dir="rtl"] { + margin-right: 100%; + margin-left: auto; } } + +.next-col-offset-fixed-1[dir="rtl"] { + margin-right: 20px; + margin-left: auto; } + +.next-col-offset-fixed-2[dir="rtl"] { + margin-right: 40px; + margin-left: auto; } + +.next-col-offset-fixed-3[dir="rtl"] { + margin-right: 60px; + margin-left: auto; } + +.next-col-offset-fixed-4[dir="rtl"] { + margin-right: 80px; + margin-left: auto; } + +.next-col-offset-fixed-5[dir="rtl"] { + margin-right: 100px; + margin-left: auto; } + +.next-col-offset-fixed-6[dir="rtl"] { + margin-right: 120px; + margin-left: auto; } + +.next-col-offset-fixed-7[dir="rtl"] { + margin-right: 140px; + margin-left: auto; } + +.next-col-offset-fixed-8[dir="rtl"] { + margin-right: 160px; + margin-left: auto; } + +.next-col-offset-fixed-9[dir="rtl"] { + margin-right: 180px; + margin-left: auto; } + +.next-col-offset-fixed-10[dir="rtl"] { + margin-right: 200px; + margin-left: auto; } + +.next-col-offset-fixed-11[dir="rtl"] { + margin-right: 220px; + margin-left: auto; } + +.next-col-offset-fixed-12[dir="rtl"] { + margin-right: 240px; + margin-left: auto; } + +.next-col-offset-fixed-13[dir="rtl"] { + margin-right: 260px; + margin-left: auto; } + +.next-col-offset-fixed-14[dir="rtl"] { + margin-right: 280px; + margin-left: auto; } + +.next-col-offset-fixed-15[dir="rtl"] { + margin-right: 300px; + margin-left: auto; } + +.next-col-offset-fixed-16[dir="rtl"] { + margin-right: 320px; + margin-left: auto; } + +.next-col-offset-fixed-17[dir="rtl"] { + margin-right: 340px; + margin-left: auto; } + +.next-col-offset-fixed-18[dir="rtl"] { + margin-right: 360px; + margin-left: auto; } + +.next-col-offset-fixed-19[dir="rtl"] { + margin-right: 380px; + margin-left: auto; } + +.next-col-offset-fixed-20[dir="rtl"] { + margin-right: 400px; + margin-left: auto; } + +.next-col-offset-fixed-21[dir="rtl"] { + margin-right: 420px; + margin-left: auto; } + +.next-col-offset-fixed-22[dir="rtl"] { + margin-right: 440px; + margin-left: auto; } + +.next-col-offset-fixed-23[dir="rtl"] { + margin-right: 460px; + margin-left: auto; } + +.next-col-offset-fixed-24[dir="rtl"] { + margin-right: 480px; + margin-left: auto; } + +.next-col-offset-fixed-25[dir="rtl"] { + margin-right: 500px; + margin-left: auto; } + +.next-col-offset-fixed-26[dir="rtl"] { + margin-right: 520px; + margin-left: auto; } + +.next-col-offset-fixed-27[dir="rtl"] { + margin-right: 540px; + margin-left: auto; } + +.next-col-offset-fixed-28[dir="rtl"] { + margin-right: 560px; + margin-left: auto; } + +.next-col-offset-fixed-29[dir="rtl"] { + margin-right: 580px; + margin-left: auto; } + +.next-col-offset-fixed-30[dir="rtl"] { + margin-right: 600px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-1[dir="rtl"] { + margin-right: 20px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-2[dir="rtl"] { + margin-right: 40px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-3[dir="rtl"] { + margin-right: 60px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-4[dir="rtl"] { + margin-right: 80px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-5[dir="rtl"] { + margin-right: 100px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-6[dir="rtl"] { + margin-right: 120px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-7[dir="rtl"] { + margin-right: 140px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-8[dir="rtl"] { + margin-right: 160px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-9[dir="rtl"] { + margin-right: 180px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-10[dir="rtl"] { + margin-right: 200px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-11[dir="rtl"] { + margin-right: 220px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-12[dir="rtl"] { + margin-right: 240px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-13[dir="rtl"] { + margin-right: 260px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-14[dir="rtl"] { + margin-right: 280px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-15[dir="rtl"] { + margin-right: 300px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-16[dir="rtl"] { + margin-right: 320px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-17[dir="rtl"] { + margin-right: 340px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-18[dir="rtl"] { + margin-right: 360px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-19[dir="rtl"] { + margin-right: 380px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-20[dir="rtl"] { + margin-right: 400px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-21[dir="rtl"] { + margin-right: 420px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-22[dir="rtl"] { + margin-right: 440px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-23[dir="rtl"] { + margin-right: 460px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-24[dir="rtl"] { + margin-right: 480px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-25[dir="rtl"] { + margin-right: 500px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-26[dir="rtl"] { + margin-right: 520px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-27[dir="rtl"] { + margin-right: 540px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-28[dir="rtl"] { + margin-right: 560px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-29[dir="rtl"] { + margin-right: 580px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-30[dir="rtl"] { + margin-right: 600px; + margin-left: auto; } + +.next-col-offset-fixed-xs-1[dir="rtl"] { + margin-right: 20px; + margin-left: auto; } + +.next-col-offset-fixed-xs-2[dir="rtl"] { + margin-right: 40px; + margin-left: auto; } + +.next-col-offset-fixed-xs-3[dir="rtl"] { + margin-right: 60px; + margin-left: auto; } + +.next-col-offset-fixed-xs-4[dir="rtl"] { + margin-right: 80px; + margin-left: auto; } + +.next-col-offset-fixed-xs-5[dir="rtl"] { + margin-right: 100px; + margin-left: auto; } + +.next-col-offset-fixed-xs-6[dir="rtl"] { + margin-right: 120px; + margin-left: auto; } + +.next-col-offset-fixed-xs-7[dir="rtl"] { + margin-right: 140px; + margin-left: auto; } + +.next-col-offset-fixed-xs-8[dir="rtl"] { + margin-right: 160px; + margin-left: auto; } + +.next-col-offset-fixed-xs-9[dir="rtl"] { + margin-right: 180px; + margin-left: auto; } + +.next-col-offset-fixed-xs-10[dir="rtl"] { + margin-right: 200px; + margin-left: auto; } + +.next-col-offset-fixed-xs-11[dir="rtl"] { + margin-right: 220px; + margin-left: auto; } + +.next-col-offset-fixed-xs-12[dir="rtl"] { + margin-right: 240px; + margin-left: auto; } + +.next-col-offset-fixed-xs-13[dir="rtl"] { + margin-right: 260px; + margin-left: auto; } + +.next-col-offset-fixed-xs-14[dir="rtl"] { + margin-right: 280px; + margin-left: auto; } + +.next-col-offset-fixed-xs-15[dir="rtl"] { + margin-right: 300px; + margin-left: auto; } + +.next-col-offset-fixed-xs-16[dir="rtl"] { + margin-right: 320px; + margin-left: auto; } + +.next-col-offset-fixed-xs-17[dir="rtl"] { + margin-right: 340px; + margin-left: auto; } + +.next-col-offset-fixed-xs-18[dir="rtl"] { + margin-right: 360px; + margin-left: auto; } + +.next-col-offset-fixed-xs-19[dir="rtl"] { + margin-right: 380px; + margin-left: auto; } + +.next-col-offset-fixed-xs-20[dir="rtl"] { + margin-right: 400px; + margin-left: auto; } + +.next-col-offset-fixed-xs-21[dir="rtl"] { + margin-right: 420px; + margin-left: auto; } + +.next-col-offset-fixed-xs-22[dir="rtl"] { + margin-right: 440px; + margin-left: auto; } + +.next-col-offset-fixed-xs-23[dir="rtl"] { + margin-right: 460px; + margin-left: auto; } + +.next-col-offset-fixed-xs-24[dir="rtl"] { + margin-right: 480px; + margin-left: auto; } + +.next-col-offset-fixed-xs-25[dir="rtl"] { + margin-right: 500px; + margin-left: auto; } + +.next-col-offset-fixed-xs-26[dir="rtl"] { + margin-right: 520px; + margin-left: auto; } + +.next-col-offset-fixed-xs-27[dir="rtl"] { + margin-right: 540px; + margin-left: auto; } + +.next-col-offset-fixed-xs-28[dir="rtl"] { + margin-right: 560px; + margin-left: auto; } + +.next-col-offset-fixed-xs-29[dir="rtl"] { + margin-right: 580px; + margin-left: auto; } + +.next-col-offset-fixed-xs-30[dir="rtl"] { + margin-right: 600px; + margin-left: auto; } + +.next-col-offset-fixed-s-1[dir="rtl"] { + margin-right: 20px; + margin-left: auto; } + +.next-col-offset-fixed-s-2[dir="rtl"] { + margin-right: 40px; + margin-left: auto; } + +.next-col-offset-fixed-s-3[dir="rtl"] { + margin-right: 60px; + margin-left: auto; } + +.next-col-offset-fixed-s-4[dir="rtl"] { + margin-right: 80px; + margin-left: auto; } + +.next-col-offset-fixed-s-5[dir="rtl"] { + margin-right: 100px; + margin-left: auto; } + +.next-col-offset-fixed-s-6[dir="rtl"] { + margin-right: 120px; + margin-left: auto; } + +.next-col-offset-fixed-s-7[dir="rtl"] { + margin-right: 140px; + margin-left: auto; } + +.next-col-offset-fixed-s-8[dir="rtl"] { + margin-right: 160px; + margin-left: auto; } + +.next-col-offset-fixed-s-9[dir="rtl"] { + margin-right: 180px; + margin-left: auto; } + +.next-col-offset-fixed-s-10[dir="rtl"] { + margin-right: 200px; + margin-left: auto; } + +.next-col-offset-fixed-s-11[dir="rtl"] { + margin-right: 220px; + margin-left: auto; } + +.next-col-offset-fixed-s-12[dir="rtl"] { + margin-right: 240px; + margin-left: auto; } + +.next-col-offset-fixed-s-13[dir="rtl"] { + margin-right: 260px; + margin-left: auto; } + +.next-col-offset-fixed-s-14[dir="rtl"] { + margin-right: 280px; + margin-left: auto; } + +.next-col-offset-fixed-s-15[dir="rtl"] { + margin-right: 300px; + margin-left: auto; } + +.next-col-offset-fixed-s-16[dir="rtl"] { + margin-right: 320px; + margin-left: auto; } + +.next-col-offset-fixed-s-17[dir="rtl"] { + margin-right: 340px; + margin-left: auto; } + +.next-col-offset-fixed-s-18[dir="rtl"] { + margin-right: 360px; + margin-left: auto; } + +.next-col-offset-fixed-s-19[dir="rtl"] { + margin-right: 380px; + margin-left: auto; } + +.next-col-offset-fixed-s-20[dir="rtl"] { + margin-right: 400px; + margin-left: auto; } + +.next-col-offset-fixed-s-21[dir="rtl"] { + margin-right: 420px; + margin-left: auto; } + +.next-col-offset-fixed-s-22[dir="rtl"] { + margin-right: 440px; + margin-left: auto; } + +.next-col-offset-fixed-s-23[dir="rtl"] { + margin-right: 460px; + margin-left: auto; } + +.next-col-offset-fixed-s-24[dir="rtl"] { + margin-right: 480px; + margin-left: auto; } + +.next-col-offset-fixed-s-25[dir="rtl"] { + margin-right: 500px; + margin-left: auto; } + +.next-col-offset-fixed-s-26[dir="rtl"] { + margin-right: 520px; + margin-left: auto; } + +.next-col-offset-fixed-s-27[dir="rtl"] { + margin-right: 540px; + margin-left: auto; } + +.next-col-offset-fixed-s-28[dir="rtl"] { + margin-right: 560px; + margin-left: auto; } + +.next-col-offset-fixed-s-29[dir="rtl"] { + margin-right: 580px; + margin-left: auto; } + +.next-col-offset-fixed-s-30[dir="rtl"] { + margin-right: 600px; + margin-left: auto; } + +.next-col-offset-fixed-m-1[dir="rtl"] { + margin-right: 20px; + margin-left: auto; } + +.next-col-offset-fixed-m-2[dir="rtl"] { + margin-right: 40px; + margin-left: auto; } + +.next-col-offset-fixed-m-3[dir="rtl"] { + margin-right: 60px; + margin-left: auto; } + +.next-col-offset-fixed-m-4[dir="rtl"] { + margin-right: 80px; + margin-left: auto; } + +.next-col-offset-fixed-m-5[dir="rtl"] { + margin-right: 100px; + margin-left: auto; } + +.next-col-offset-fixed-m-6[dir="rtl"] { + margin-right: 120px; + margin-left: auto; } + +.next-col-offset-fixed-m-7[dir="rtl"] { + margin-right: 140px; + margin-left: auto; } + +.next-col-offset-fixed-m-8[dir="rtl"] { + margin-right: 160px; + margin-left: auto; } + +.next-col-offset-fixed-m-9[dir="rtl"] { + margin-right: 180px; + margin-left: auto; } + +.next-col-offset-fixed-m-10[dir="rtl"] { + margin-right: 200px; + margin-left: auto; } + +.next-col-offset-fixed-m-11[dir="rtl"] { + margin-right: 220px; + margin-left: auto; } + +.next-col-offset-fixed-m-12[dir="rtl"] { + margin-right: 240px; + margin-left: auto; } + +.next-col-offset-fixed-m-13[dir="rtl"] { + margin-right: 260px; + margin-left: auto; } + +.next-col-offset-fixed-m-14[dir="rtl"] { + margin-right: 280px; + margin-left: auto; } + +.next-col-offset-fixed-m-15[dir="rtl"] { + margin-right: 300px; + margin-left: auto; } + +.next-col-offset-fixed-m-16[dir="rtl"] { + margin-right: 320px; + margin-left: auto; } + +.next-col-offset-fixed-m-17[dir="rtl"] { + margin-right: 340px; + margin-left: auto; } + +.next-col-offset-fixed-m-18[dir="rtl"] { + margin-right: 360px; + margin-left: auto; } + +.next-col-offset-fixed-m-19[dir="rtl"] { + margin-right: 380px; + margin-left: auto; } + +.next-col-offset-fixed-m-20[dir="rtl"] { + margin-right: 400px; + margin-left: auto; } + +.next-col-offset-fixed-m-21[dir="rtl"] { + margin-right: 420px; + margin-left: auto; } + +.next-col-offset-fixed-m-22[dir="rtl"] { + margin-right: 440px; + margin-left: auto; } + +.next-col-offset-fixed-m-23[dir="rtl"] { + margin-right: 460px; + margin-left: auto; } + +.next-col-offset-fixed-m-24[dir="rtl"] { + margin-right: 480px; + margin-left: auto; } + +.next-col-offset-fixed-m-25[dir="rtl"] { + margin-right: 500px; + margin-left: auto; } + +.next-col-offset-fixed-m-26[dir="rtl"] { + margin-right: 520px; + margin-left: auto; } + +.next-col-offset-fixed-m-27[dir="rtl"] { + margin-right: 540px; + margin-left: auto; } + +.next-col-offset-fixed-m-28[dir="rtl"] { + margin-right: 560px; + margin-left: auto; } + +.next-col-offset-fixed-m-29[dir="rtl"] { + margin-right: 580px; + margin-left: auto; } + +.next-col-offset-fixed-m-30[dir="rtl"] { + margin-right: 600px; + margin-left: auto; } + +.next-col-offset-fixed-l-1[dir="rtl"] { + margin-right: 20px; + margin-left: auto; } + +.next-col-offset-fixed-l-2[dir="rtl"] { + margin-right: 40px; + margin-left: auto; } + +.next-col-offset-fixed-l-3[dir="rtl"] { + margin-right: 60px; + margin-left: auto; } + +.next-col-offset-fixed-l-4[dir="rtl"] { + margin-right: 80px; + margin-left: auto; } + +.next-col-offset-fixed-l-5[dir="rtl"] { + margin-right: 100px; + margin-left: auto; } + +.next-col-offset-fixed-l-6[dir="rtl"] { + margin-right: 120px; + margin-left: auto; } + +.next-col-offset-fixed-l-7[dir="rtl"] { + margin-right: 140px; + margin-left: auto; } + +.next-col-offset-fixed-l-8[dir="rtl"] { + margin-right: 160px; + margin-left: auto; } + +.next-col-offset-fixed-l-9[dir="rtl"] { + margin-right: 180px; + margin-left: auto; } + +.next-col-offset-fixed-l-10[dir="rtl"] { + margin-right: 200px; + margin-left: auto; } + +.next-col-offset-fixed-l-11[dir="rtl"] { + margin-right: 220px; + margin-left: auto; } + +.next-col-offset-fixed-l-12[dir="rtl"] { + margin-right: 240px; + margin-left: auto; } + +.next-col-offset-fixed-l-13[dir="rtl"] { + margin-right: 260px; + margin-left: auto; } + +.next-col-offset-fixed-l-14[dir="rtl"] { + margin-right: 280px; + margin-left: auto; } + +.next-col-offset-fixed-l-15[dir="rtl"] { + margin-right: 300px; + margin-left: auto; } + +.next-col-offset-fixed-l-16[dir="rtl"] { + margin-right: 320px; + margin-left: auto; } + +.next-col-offset-fixed-l-17[dir="rtl"] { + margin-right: 340px; + margin-left: auto; } + +.next-col-offset-fixed-l-18[dir="rtl"] { + margin-right: 360px; + margin-left: auto; } + +.next-col-offset-fixed-l-19[dir="rtl"] { + margin-right: 380px; + margin-left: auto; } + +.next-col-offset-fixed-l-20[dir="rtl"] { + margin-right: 400px; + margin-left: auto; } + +.next-col-offset-fixed-l-21[dir="rtl"] { + margin-right: 420px; + margin-left: auto; } + +.next-col-offset-fixed-l-22[dir="rtl"] { + margin-right: 440px; + margin-left: auto; } + +.next-col-offset-fixed-l-23[dir="rtl"] { + margin-right: 460px; + margin-left: auto; } + +.next-col-offset-fixed-l-24[dir="rtl"] { + margin-right: 480px; + margin-left: auto; } + +.next-col-offset-fixed-l-25[dir="rtl"] { + margin-right: 500px; + margin-left: auto; } + +.next-col-offset-fixed-l-26[dir="rtl"] { + margin-right: 520px; + margin-left: auto; } + +.next-col-offset-fixed-l-27[dir="rtl"] { + margin-right: 540px; + margin-left: auto; } + +.next-col-offset-fixed-l-28[dir="rtl"] { + margin-right: 560px; + margin-left: auto; } + +.next-col-offset-fixed-l-29[dir="rtl"] { + margin-right: 580px; + margin-left: auto; } + +.next-col-offset-fixed-l-30[dir="rtl"] { + margin-right: 600px; + margin-left: auto; } + +.next-col-offset-fixed-xl-1[dir="rtl"] { + margin-right: 20px; + margin-left: auto; } + +.next-col-offset-fixed-xl-2[dir="rtl"] { + margin-right: 40px; + margin-left: auto; } + +.next-col-offset-fixed-xl-3[dir="rtl"] { + margin-right: 60px; + margin-left: auto; } + +.next-col-offset-fixed-xl-4[dir="rtl"] { + margin-right: 80px; + margin-left: auto; } + +.next-col-offset-fixed-xl-5[dir="rtl"] { + margin-right: 100px; + margin-left: auto; } + +.next-col-offset-fixed-xl-6[dir="rtl"] { + margin-right: 120px; + margin-left: auto; } + +.next-col-offset-fixed-xl-7[dir="rtl"] { + margin-right: 140px; + margin-left: auto; } + +.next-col-offset-fixed-xl-8[dir="rtl"] { + margin-right: 160px; + margin-left: auto; } + +.next-col-offset-fixed-xl-9[dir="rtl"] { + margin-right: 180px; + margin-left: auto; } + +.next-col-offset-fixed-xl-10[dir="rtl"] { + margin-right: 200px; + margin-left: auto; } + +.next-col-offset-fixed-xl-11[dir="rtl"] { + margin-right: 220px; + margin-left: auto; } + +.next-col-offset-fixed-xl-12[dir="rtl"] { + margin-right: 240px; + margin-left: auto; } + +.next-col-offset-fixed-xl-13[dir="rtl"] { + margin-right: 260px; + margin-left: auto; } + +.next-col-offset-fixed-xl-14[dir="rtl"] { + margin-right: 280px; + margin-left: auto; } + +.next-col-offset-fixed-xl-15[dir="rtl"] { + margin-right: 300px; + margin-left: auto; } + +.next-col-offset-fixed-xl-16[dir="rtl"] { + margin-right: 320px; + margin-left: auto; } + +.next-col-offset-fixed-xl-17[dir="rtl"] { + margin-right: 340px; + margin-left: auto; } + +.next-col-offset-fixed-xl-18[dir="rtl"] { + margin-right: 360px; + margin-left: auto; } + +.next-col-offset-fixed-xl-19[dir="rtl"] { + margin-right: 380px; + margin-left: auto; } + +.next-col-offset-fixed-xl-20[dir="rtl"] { + margin-right: 400px; + margin-left: auto; } + +.next-col-offset-fixed-xl-21[dir="rtl"] { + margin-right: 420px; + margin-left: auto; } + +.next-col-offset-fixed-xl-22[dir="rtl"] { + margin-right: 440px; + margin-left: auto; } + +.next-col-offset-fixed-xl-23[dir="rtl"] { + margin-right: 460px; + margin-left: auto; } + +.next-col-offset-fixed-xl-24[dir="rtl"] { + margin-right: 480px; + margin-left: auto; } + +.next-col-offset-fixed-xl-25[dir="rtl"] { + margin-right: 500px; + margin-left: auto; } + +.next-col-offset-fixed-xl-26[dir="rtl"] { + margin-right: 520px; + margin-left: auto; } + +.next-col-offset-fixed-xl-27[dir="rtl"] { + margin-right: 540px; + margin-left: auto; } + +.next-col-offset-fixed-xl-28[dir="rtl"] { + margin-right: 560px; + margin-left: auto; } + +.next-col-offset-fixed-xl-29[dir="rtl"] { + margin-right: 580px; + margin-left: auto; } + +.next-col-offset-fixed-xl-30[dir="rtl"] { + margin-right: 600px; + margin-left: auto; } + +.next-form { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-form *, + .next-form *:before, + .next-form *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-form-item { + /* medium */ + margin-bottom: 16px; } + .next-form-item.has-error .next-form-item-help { + color: #FF3000; } + .next-form-item .next-form-item-label, .next-form-item .next-form-text-align, .next-form-item p { + line-height: 28px; } + .next-form-item .next-form-text-align, .next-form-item p { + margin: 0; } + .next-form-item .next-checkbox-wrapper, .next-form-item .next-checkbox-group, .next-form-item .next-radio-wrapper, .next-form-item .next-radio-group { + line-height: 24px; } + .next-form-item .next-form-item-label { + font-size: 12px; } + .next-form-item.next-large { + margin-bottom: 20px; } + .next-form-item.next-large .next-form-item-label, .next-form-item.next-large .next-form-text-align, .next-form-item.next-large p { + line-height: 40px; } + .next-form-item.next-large .next-checkbox-wrapper, .next-form-item.next-large .next-checkbox-group, .next-form-item.next-large .next-radio-wrapper, .next-form-item.next-large .next-radio-group { + line-height: 39px; } + .next-form-item.next-large .next-switch { + margin-top: 7px; } + .next-form-item.next-large .next-form-item-label { + font-size: 16px; } + .next-form-item.next-small { + margin-bottom: 12px; } + .next-form-item.next-small .next-form-item-label, .next-form-item.next-small .next-form-text-align, .next-form-item.next-small p { + line-height: 20px; } + .next-form-item.next-small .next-checkbox-wrapper, .next-form-item.next-small .next-checkbox-group, .next-form-item.next-small .next-radio-wrapper, .next-form-item.next-small .next-radio-group { + line-height: 20px; } + .next-form-item.next-small .next-form-item-label { + font-size: 12px; } + .next-form-item.next-top > .next-form-item-label { + margin-bottom: 2px; } + .next-form-item.next-inset .next-form-item-label { + padding-right: 0; + padding-left: 0; + line-height: inherit; } + .next-form-item-control .next-form-text-align { + margin: 0; } + .next-form-item-control > .next-input-group, .next-form-item-control > .next-input { + width: 100%; } + .next-form-item-label { + display: inline-block; + vertical-align: top; + color: #666666; + text-align: right; + padding-right: 12px; } + .next-form-item-label label[required]:before { + margin-right: 4px; + content: "*"; + color: #FF3000; } + .next-form-item-label.next-left { + text-align: left; } + .next-form-item-label.next-left > label[required]::before { + display: none; } + .next-form-item-label.next-left > label[required]::after { + margin-left: 4px; + content: "*"; + color: #FF3000; } + .next-form-item-help { + margin-top: 4px; + font-size: 12px; + line-height: 1.5; + color: #999999; } + .next-form.next-inline .next-form-item { + display: inline-block; + vertical-align: top; + /* label on left */ } + .next-form.next-inline .next-form-item.next-left .next-form-item-control { + display: inline-block; + vertical-align: top; + line-height: 0; } + .next-form.next-inline .next-form-item:not(:last-child) { + margin-right: 20px; } + .next-form.next-inline .next-form-item.next-large:not(:last-child) { + margin-right: 24px; } + .next-form.next-inline .next-form-item.next-small:not(:last-child) { + margin-right: 16px; } + +@media screen and (min-width: 0\0) and (min-resolution: 0.001dpcm) { + .next-form-item.next-left > .next-form-item-label { + display: table-cell; } + .next-form.next-inline .next-form-item.next-left .next-form-item-control { + display: table-cell; } } + +.next-form[dir="rtl"] .next-form-item-label { + text-align: left; + padding-left: 12px; + padding-right: 0; } + +.next-form[dir="rtl"].next-inline .next-form-item:not(:last-child) { + margin-left: 20px; + margin-right: 0; } + +.next-form[dir="rtl"].next-inline .next-form-item.next-large:not(:last-child) { + margin-left: 24px; + margin-right: 0; } + +.next-form[dir="rtl"].next-inline .next-form-item.next-small:not(:last-child) { + margin-left: 16px; + margin-right: 0; } + +.next-loading-fusion-reactor[dir=rtl] { + -webkit-animation-name: nextVectorRouteRTL; + animation-name: nextVectorRouteRTL; } + +@-webkit-keyframes nextVectorRouteRTL { + 0% { + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } + 5% { + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); } + 25% { + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); } + 30% { + -webkit-transform: rotate(-180deg); + -ms-transform: rotate(-180deg); + transform: rotate(-180deg); } + 50% { + -webkit-transform: rotate(-180deg); + -ms-transform: rotate(-180deg); + transform: rotate(-180deg); } + 55% { + -webkit-transform: rotate(-270deg); + -ms-transform: rotate(-270deg); + transform: rotate(-270deg); } + 75% { + -webkit-transform: rotate(-270deg); + -ms-transform: rotate(-270deg); + transform: rotate(-270deg); } + 80% { + -webkit-transform: rotate(-360deg); + -ms-transform: rotate(-360deg); + transform: rotate(-360deg); } + 100% { + -webkit-transform: rotate(-360deg); + -ms-transform: rotate(-360deg); + transform: rotate(-360deg); } } + +@keyframes nextVectorRouteRTL { + 0% { + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } + 5% { + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); } + 25% { + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); } + 30% { + -webkit-transform: rotate(-180deg); + -ms-transform: rotate(-180deg); + transform: rotate(-180deg); } + 50% { + -webkit-transform: rotate(-180deg); + -ms-transform: rotate(-180deg); + transform: rotate(-180deg); } + 55% { + -webkit-transform: rotate(-270deg); + -ms-transform: rotate(-270deg); + transform: rotate(-270deg); } + 75% { + -webkit-transform: rotate(-270deg); + -ms-transform: rotate(-270deg); + transform: rotate(-270deg); } + 80% { + -webkit-transform: rotate(-360deg); + -ms-transform: rotate(-360deg); + transform: rotate(-360deg); } + 100% { + -webkit-transform: rotate(-360deg); + -ms-transform: rotate(-360deg); + transform: rotate(-360deg); } } + +/* put your code here */ +.next-loading { + position: relative; + /* 遮罩层 */ + /* for IE9,10 */ + /* text on the right side of */ + /* 动效 */ } + .next-loading.next-open { + pointer-events: none; } + .next-loading .next-loading-component { + opacity: .7; + -webkit-filter: blur(1px); + filter: blur(1px); + -webkit-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false)"; + filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false)"; + /* IE6~IE9 */ + position: relative; + pointer-events: none; } + .next-loading-masker { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 99; + opacity: .2; + background: #FFF; } + .next-loading-inline { + display: inline-block; } + .next-loading-tip { + display: block; + position: absolute; + top: 50%; + left: 50%; + z-index: 4; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + text-align: center; } + .next-loading-tip-fullscreen { + top: inherit; + left: inherit; + -webkit-transform: inherit; + -ms-transform: inherit; + transform: inherit; } + .next-loading-tip-placeholder { + display: none; } + .next-loading-right-tip .next-loading-indicator { + display: inline-block; } + .next-loading-right-tip .next-loading-tip-content { + position: absolute; + display: block; + top: 50%; + right: 0; + -webkit-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); } + .next-loading-right-tip .next-loading-tip-placeholder { + display: inline-block; + visibility: hidden; + margin-left: 1em; } + .next-loading-fusion-reactor { + display: inline-block; + width: 48px; + height: 48px; + position: relative; + margin: 0; + -webkit-animation-duration: 5.6s; + animation-duration: 5.6s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-name: nextVectorRoute; + animation-name: nextVectorRoute; } + .next-loading-fusion-reactor .next-loading-dot { + position: absolute; + margin: auto; + width: 12px; + height: 12px; + border-radius: 50%; + background: #5584FF; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-duration: 1.4s; + animation-duration: 1.4s; } + .next-loading-fusion-reactor .next-loading-dot:nth-child(1) { + top: 0; + bottom: 0; + left: 0; + -webkit-animation-name: nextVectorDotsX; + animation-name: nextVectorDotsX; } + .next-loading-fusion-reactor .next-loading-dot:nth-child(2) { + left: 0; + right: 0; + top: 0; + opacity: .8; + -webkit-animation-name: nextVectorDotsY; + animation-name: nextVectorDotsY; } + .next-loading-fusion-reactor .next-loading-dot:nth-child(3) { + top: 0; + bottom: 0; + right: 0; + opacity: .6; + -webkit-animation-name: nextVectorDotsXR; + animation-name: nextVectorDotsXR; } + .next-loading-fusion-reactor .next-loading-dot:nth-child(4) { + left: 0; + right: 0; + bottom: 0; + opacity: .2; + -webkit-animation-name: nextVectorDotsYR; + animation-name: nextVectorDotsYR; } + .next-loading-medium-fusion-reactor { + width: 32px; + height: 32px; } + .next-loading-medium-fusion-reactor .next-loading-dot { + width: 8px; + height: 8px; } + .next-loading-medium-fusion-reactor .next-loading-dot:nth-child(1) { + -webkit-animation-name: nextVectorDotsX-medium; + animation-name: nextVectorDotsX-medium; } + .next-loading-medium-fusion-reactor .next-loading-dot:nth-child(2) { + -webkit-animation-name: nextVectorDotsY-medium; + animation-name: nextVectorDotsY-medium; } + .next-loading-medium-fusion-reactor .next-loading-dot:nth-child(3) { + -webkit-animation-name: nextVectorDotsXR-medium; + animation-name: nextVectorDotsXR-medium; } + .next-loading-medium-fusion-reactor .next-loading-dot:nth-child(4) { + -webkit-animation-name: nextVectorDotsYR-medium; + animation-name: nextVectorDotsYR-medium; } + +@-webkit-keyframes nextVectorRoute { + 0% { + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } + 5% { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); } + 25% { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); } + 30% { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + 50% { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + 55% { + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); } + 75% { + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); } + 80% { + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); } + 100% { + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); } } + +@keyframes nextVectorRoute { + 0% { + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } + 5% { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); } + 25% { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); } + 30% { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + 50% { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + 55% { + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); } + 75% { + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); } + 80% { + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); } + 100% { + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); } } + +/* 20% 的时间在旋转 */ +@-webkit-keyframes nextVectorDotsYR { + 25% { + bottom: 0; } + 45%, + 50% { + bottom: 16.8px; + height: 14.4px; + width: 14.4px; } + 90% { + bottom: 0; + height: 12px; + width: 12px; } } + +@keyframes nextVectorDotsYR { + 25% { + bottom: 0; } + 45%, + 50% { + bottom: 16.8px; + height: 14.4px; + width: 14.4px; } + 90% { + bottom: 0; + height: 12px; + width: 12px; } } + +@-webkit-keyframes nextVectorDotsY { + 25% { + top: 0; } + 45%, + 50% { + top: 16.8px; + height: 14.4px; + width: 14.4px; } + 90% { + top: 0; + height: 12px; + width: 12px; } } + +@keyframes nextVectorDotsY { + 25% { + top: 0; } + 45%, + 50% { + top: 16.8px; + height: 14.4px; + width: 14.4px; } + 90% { + top: 0; + height: 12px; + width: 12px; } } + +@-webkit-keyframes nextVectorDotsX { + 25% { + left: 0; } + 45%, + 50% { + left: 16.8px; + width: 14.4px; + height: 14.4px; } + 90% { + left: 0; + height: 12px; + width: 12px; } } + +@keyframes nextVectorDotsX { + 25% { + left: 0; } + 45%, + 50% { + left: 16.8px; + width: 14.4px; + height: 14.4px; } + 90% { + left: 0; + height: 12px; + width: 12px; } } + +@-webkit-keyframes nextVectorDotsXR { + 25% { + right: 0; } + 45%, + 50% { + right: 16.8px; + width: 14.4px; + height: 14.4px; } + 90% { + right: 0; + height: 12px; + width: 12px; } } + +@keyframes nextVectorDotsXR { + 25% { + right: 0; } + 45%, + 50% { + right: 16.8px; + width: 14.4px; + height: 14.4px; } + 90% { + right: 0; + height: 12px; + width: 12px; } } + +@-webkit-keyframes nextVectorDotsYR-medium { + 25% { + bottom: 0; } + 45%, + 50% { + bottom: 11.2px; + height: 9.6px; + width: 9.6px; } + 90% { + bottom: 0; + height: 8px; + width: 8px; } } + +@keyframes nextVectorDotsYR-medium { + 25% { + bottom: 0; } + 45%, + 50% { + bottom: 11.2px; + height: 9.6px; + width: 9.6px; } + 90% { + bottom: 0; + height: 8px; + width: 8px; } } + +@-webkit-keyframes nextVectorDotsY-medium { + 25% { + top: 0; } + 45%, + 50% { + top: 11.2px; + height: 9.6px; + width: 9.6px; } + 90% { + top: 0; + height: 8px; + width: 8px; } } + +@keyframes nextVectorDotsY-medium { + 25% { + top: 0; } + 45%, + 50% { + top: 11.2px; + height: 9.6px; + width: 9.6px; } + 90% { + top: 0; + height: 8px; + width: 8px; } } + +@-webkit-keyframes nextVectorDotsX-medium { + 25% { + left: 0; } + 45%, + 50% { + left: 11.2px; + width: 9.6px; + height: 9.6px; } + 90% { + left: 0; + height: 8px; + width: 8px; } } + +@keyframes nextVectorDotsX-medium { + 25% { + left: 0; } + 45%, + 50% { + left: 11.2px; + width: 9.6px; + height: 9.6px; } + 90% { + left: 0; + height: 8px; + width: 8px; } } + +@-webkit-keyframes nextVectorDotsXR-medium { + 25% { + right: 0; } + 45%, + 50% { + right: 11.2px; + width: 9.6px; + height: 9.6px; } + 90% { + right: 0; + height: 8px; + width: 8px; } } + +@keyframes nextVectorDotsXR-medium { + 25% { + right: 0; } + 45%, + 50% { + right: 11.2px; + width: 9.6px; + height: 9.6px; } + 90% { + right: 0; + height: 8px; + width: 8px; } } + +.next-menu-btn { + display: inline-block; + -webkit-box-shadow: none; + box-shadow: none; } + .next-menu-btn .next-icon { + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } + .next-menu-btn.next-expand .next-menu-btn-arrow { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + .next-menu-btn.next-btn-normal .next-menu-btn-arrow { + color: #999999; } + .next-menu-btn.next-btn-secondary .next-menu-btn-arrow { + color: #5584FF; } + .next-menu-btn.next-btn-primary .next-menu-btn-arrow { + color: #FFFFFF; } + .next-menu-btn.next-btn-text.next-btn-normal .next-menu-btn-arrow { + color: #333333; } + .next-menu-btn.next-btn-text.next-btn-primary .next-menu-btn-arrow { + color: #5584FF; } + .next-menu-btn.next-btn-ghost.next-btn-light .next-menu-btn-arrow { + color: #333333; } + .next-menu-btn.next-btn-ghost.next-btn-dark .next-menu-btn-arrow { + color: #FFFFFF; } + .next-menu-btn.disabled .next-menu-btn-arrow, + .next-menu-btn[disabled] .next-menu-btn-arrow { + color: #CCCCCC; } + .next-menu-btn.next-btn-text.disabled .next-menu-btn-arrow, + .next-menu-btn.next-btn-text[disabled] .next-menu-btn-arrow { + color: #CCCCCC; } + .next-menu-btn[disabled].next-btn-ghost.next-btn-dark .next-menu-btn-arrow { + color: rgba(255, 255, 255, 0.4); } + .next-menu-btn[disabled].next-btn-ghost.next-btn-light .next-menu-btn-arrow { + color: rgba(0, 0, 0, 0.1); } + +.next-nav { + -webkit-box-sizing: border-box; + box-sizing: border-box; + min-width: auto; + padding: 0; + border-radius: 0; } + .next-nav *, + .next-nav *:before, + .next-nav *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-nav-icon.next-icon { + margin-right: 4px; + font-weight: inherit; } + .next-nav-icon.next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-nav-icon-placeholder { + display: inline-block; + width: 16px; + height: 16px; + margin-left: 2px; + margin-right: 2px; } + .next-nav-group-label { + height: 40px; + line-height: 40px; + font-size: 16px; } + .next-nav-item .next-menu-item-text > span, + .next-nav-item .next-nav-group-label > span { + opacity: 1; + -webkit-transition: opacity .3s; + transition: opacity .3s; } + .next-nav-item a { + text-decoration: none; + color: inherit; } + .next-nav-item .next-menu-hoz-icon-arrow.next-icon, + .next-nav-item .next-menu-icon-arrow.next-icon, .next-nav-item:hover .next-menu-hoz-icon-arrow.next-icon, + .next-nav-item:hover .next-menu-icon-arrow.next-icon, .next-nav-item.next-focused .next-menu-hoz-icon-arrow.next-icon, + .next-nav-item.next-focused .next-menu-icon-arrow.next-icon, .next-nav-item.next-selected .next-menu-hoz-icon-arrow.next-icon, + .next-nav-item.next-selected .next-menu-icon-arrow.next-icon, .next-nav-item.next-opened .next-menu-hoz-icon-arrow.next-icon, + .next-nav-item.next-opened .next-menu-icon-arrow.next-icon { + color: inherit; + top: 2px; + -webkit-transform-origin: center 47%; + -ms-transform-origin: center 47%; + transform-origin: center 47%; } + .next-nav.next-active .next-nav-item:before { + position: absolute; + -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); + transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); + content: ''; } + .next-nav.next-hoz { + height: 44px; + line-height: 42px; + font-size: 12px; } + .next-nav.next-hoz .next-menu-item { + margin-left: 0; + margin-right: 0; + padding: 0 20px; + border-radius: 0; } + .next-nav.next-hoz .next-menu-item:before { + height: 2px; } + .next-nav.next-hoz .next-menu-item:not(:first-child), + .next-nav.next-hoz .next-menu-sub-menu-wrapper:not(:first-child) > .next-menu-item { + margin-top: 0; } + .next-nav.next-hoz .next-menu-item:not(:last-child), + .next-nav.next-hoz .next-menu-sub-menu-wrapper:not(:last-child) > .next-menu-item { + margin-bottom: 0; } + .next-nav.next-hoz .next-menu-item-inner { + height: 42px; + font-size: 12px; } + .next-nav.next-hoz .next-nav-group-label .next-menu-item-inner { + height: 40px; + line-height: 40px; + font-size: 16px; } + .next-nav.next-hoz .next-menu-header { + float: left; + height: 42px; } + .next-nav.next-hoz .next-menu-footer { + float: right; + height: 42px; } + .next-nav.next-hoz .next-nav-item:before { + width: 0; + left: 50%; } + .next-nav.next-hoz.next-top .next-nav-item:before { + top: -1px; } + .next-nav.next-hoz.next-bottom .next-nav-item:before { + bottom: -1px; } + .next-nav.next-hoz .next-selected.next-nav-item:before { + width: 100%; + left: 0; } + .next-nav.next-ver { + -webkit-transition: width .3s; + transition: width .3s; + line-height: 40px; + font-size: 12px; } + .next-nav.next-ver .next-menu-item { + margin-left: 0; + margin-right: 0; + padding: 0 20px; + border-radius: 0; } + .next-nav.next-ver .next-menu-item:before { + width: 2px; } + .next-nav.next-ver .next-menu-item:not(:first-child), + .next-nav.next-ver .next-menu-sub-menu-wrapper:not(:first-child) > .next-menu-item { + margin-top: 0; } + .next-nav.next-ver .next-menu-item:not(:last-child), + .next-nav.next-ver .next-menu-sub-menu-wrapper:not(:last-child) > .next-menu-item { + margin-bottom: 0; } + .next-nav.next-ver .next-menu-item-inner { + height: 40px; + font-size: 12px; } + .next-nav.next-ver .next-nav-group-label .next-menu-item-inner { + height: 40px; + line-height: 40px; + font-size: 16px; } + .next-nav.next-ver > .next-menu-item:first-child, + .next-nav.next-ver > .next-menu-sub-menu-wrapper:first-child > .next-menu-item { + margin-top: 0; } + .next-nav.next-ver > .next-menu-item:last-child, + .next-nav.next-ver > .next-menu-sub-menu-wrapper:last-child > .next-menu-item { + margin-bottom: 0; } + .next-nav.next-ver .next-menu-sub-menu .next-menu-item-inner { + height: 40px; + line-height: 40px; + font-size: 12px; } + .next-nav.next-ver .next-nav-item:before { + height: 0; + top: 50%; } + .next-nav.next-ver.next-left .next-nav-item:before { + left: -1px; } + .next-nav.next-ver.next-right .next-nav-item:before { + right: -1px; } + .next-nav.next-ver .next-selected.next-nav-item:before { + height: 100%; + top: 0; } + .next-nav.next-primary { + border-width: 0; + background-color: #333333; + border-color: #333333; + color: #FFFFFF; + font-weight: normal; + -webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); } + .next-nav.next-primary.next-hoz { + line-height: 44px; } + .next-nav.next-primary.next-hoz .next-menu-header { + height: 44px; } + .next-nav.next-primary.next-hoz .next-menu-footer { + height: 44px; } + .next-nav.next-primary.next-hoz .next-menu-item-inner { + height: 44px; } + .next-nav.next-primary.next-hoz.next-top .next-nav-item:before { + top: 0; } + .next-nav.next-primary.next-hoz.next-bottom .next-nav-item:before { + bottom: 0; } + .next-nav.next-primary.next-ver.next-left .next-nav-item:before { + left: 0; } + .next-nav.next-primary.next-ver.next-right .next-nav-item:before { + right: 0; } + .next-nav.next-primary .next-nav-item.next-menu-item { + background-color: #333333; + color: #FFFFFF; } + .next-nav.next-primary .next-nav-item.next-menu-item.next-focused, .next-nav.next-primary .next-nav-item.next-menu-item:hover { + background-color: #000000; + color: #FFFFFF; } + .next-nav.next-primary .next-nav-item.next-menu-item.next-selected { + background-color: #000000; + color: #FFFFFF; + font-weight: bold; } + .next-nav.next-primary .next-nav-item.next-menu-item.next-opened { + background-color: #000000; + color: #FFFFFF; } + .next-nav.next-primary .next-nav-item.next-menu-item:before { + background-color: #5584FF; } + .next-nav.next-primary .next-menu-sub-menu .next-menu-item.next-opened { + background-color: #000000; + color: #FFFFFF; } + .next-nav.next-primary .next-nav-group-label { + color: #999999; + font-weight: normal; } + .next-nav.next-primary .next-menu-sub-menu .next-menu-item { + background-color: #333333; + color: #FFFFFF; + font-weight: normal; } + .next-nav.next-primary .next-menu-sub-menu .next-menu-item.next-focused, .next-nav.next-primary .next-menu-sub-menu .next-menu-item:hover { + background-color: #000000; + color: #FFFFFF; } + .next-nav.next-primary .next-menu-sub-menu .next-menu-item.next-selected { + background-color: #000000; + color: #FFFFFF; } + .next-nav.next-secondary { + border-width: 0; + background-color: #5584FF; + border-color: #5584FF; + color: #FFFFFF; + font-weight: normal; + -webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); } + .next-nav.next-secondary.next-hoz { + line-height: 44px; } + .next-nav.next-secondary.next-hoz .next-menu-header { + height: 44px; } + .next-nav.next-secondary.next-hoz .next-menu-footer { + height: 44px; } + .next-nav.next-secondary.next-hoz .next-menu-item-inner { + height: 44px; } + .next-nav.next-secondary.next-hoz.next-top .next-nav-item:before { + top: 0; } + .next-nav.next-secondary.next-hoz.next-bottom .next-nav-item:before { + bottom: 0; } + .next-nav.next-secondary.next-ver.next-left .next-nav-item:before { + left: 0; } + .next-nav.next-secondary.next-ver.next-right .next-nav-item:before { + right: 0; } + .next-nav.next-secondary .next-nav-item.next-menu-item { + background-color: #5584FF; + color: #FFFFFF; } + .next-nav.next-secondary .next-nav-item.next-menu-item.next-focused, .next-nav.next-secondary .next-nav-item.next-menu-item:hover { + background-color: #3E71F7; + color: #FFFFFF; } + .next-nav.next-secondary .next-nav-item.next-menu-item.next-selected { + background-color: #3E71F7; + color: #FFFFFF; + font-weight: bold; } + .next-nav.next-secondary .next-nav-item.next-menu-item.next-opened { + background-color: #3E71F7; + color: #FFFFFF; } + .next-nav.next-secondary .next-nav-item.next-menu-item:before { + background-color: #3E71F7; } + .next-nav.next-secondary .next-menu-sub-menu .next-menu-item.next-opened { + background-color: #3E71F7; + color: #FFFFFF; } + .next-nav.next-secondary .next-nav-group-label { + color: #FFFFFF; + font-weight: normal; } + .next-nav.next-secondary .next-menu-sub-menu .next-menu-item { + background-color: #5584FF; + color: #FFFFFF; + font-weight: normal; } + .next-nav.next-secondary .next-menu-sub-menu .next-menu-item.next-focused, .next-nav.next-secondary .next-menu-sub-menu .next-menu-item:hover { + background-color: #3E71F7; + color: #FFFFFF; } + .next-nav.next-secondary .next-menu-sub-menu .next-menu-item.next-selected { + background-color: #3E71F7; + color: #FFFFFF; } + .next-nav.next-normal { + background-color: #FFFFFF; + border-color: #DCDEE3; + color: #333333; + font-weight: normal; + -webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); } + .next-nav.next-normal .next-nav-item.next-menu-item { + background-color: #FFFFFF; + color: #333333; } + .next-nav.next-normal .next-nav-item.next-menu-item.next-focused, .next-nav.next-normal .next-nav-item.next-menu-item:hover { + background-color: #FFFFFF; + color: #5584FF; } + .next-nav.next-normal .next-nav-item.next-menu-item.next-selected { + background-color: #F2F3F7; + color: #5584FF; + font-weight: bold; } + .next-nav.next-normal .next-nav-item.next-menu-item.next-opened { + background-color: #F2F3F7; + color: #5584FF; } + .next-nav.next-normal .next-nav-item.next-menu-item:before { + background-color: #5584FF; } + .next-nav.next-normal .next-menu-sub-menu .next-menu-item.next-opened { + background-color: #F2F3F7; + color: #5584FF; } + .next-nav.next-normal .next-nav-group-label { + color: #999999; + font-weight: normal; } + .next-nav.next-normal .next-menu-sub-menu .next-menu-item { + background-color: #FFFFFF; + color: #333333; + font-weight: normal; } + .next-nav.next-normal .next-menu-sub-menu .next-menu-item.next-focused, .next-nav.next-normal .next-menu-sub-menu .next-menu-item:hover { + background-color: #F2F3F7; + color: #5584FF; } + .next-nav.next-normal .next-menu-sub-menu .next-menu-item.next-selected { + background-color: #F2F3F7; + color: #5584FF; } + .next-nav.next-line { + background-color: transparent; + border-color: #DCDEE3; + color: #333333; + font-weight: normal; + -webkit-box-shadow: none; + box-shadow: none; } + .next-nav.next-line.next-hoz { + border-top-color: transparent; + border-left-color: transparent; + border-right-color: transparent; } + .next-nav.next-line.next-ver { + border-top-color: transparent; + border-left-color: transparent; + border-bottom-color: transparent; } + .next-nav.next-line .next-nav-item.next-menu-item { + background-color: transparent; + color: #333333; } + .next-nav.next-line .next-nav-item.next-menu-item.next-focused, .next-nav.next-line .next-nav-item.next-menu-item:hover { + background-color: transparent; + color: #5584FF; } + .next-nav.next-line .next-nav-item.next-menu-item.next-selected { + background-color: transparent; + color: #5584FF; + font-weight: bold; } + .next-nav.next-line .next-nav-item.next-menu-item.next-opened { + background-color: transparent; + color: #5584FF; } + .next-nav.next-line .next-nav-item.next-menu-item:before { + background-color: #5584FF; } + .next-nav.next-line .next-menu-sub-menu .next-menu-item.next-opened { + background-color: transparent; + color: #5584FF; } + .next-nav.next-line .next-nav-group-label { + color: #999999; + font-weight: normal; } + .next-nav.next-line .next-menu-sub-menu .next-menu-item { + background-color: transparent; + color: #333333; + font-weight: normal; } + .next-nav.next-line .next-menu-sub-menu .next-menu-item.next-focused, .next-nav.next-line .next-menu-sub-menu .next-menu-item:hover { + background-color: transparent; + color: #5584FF; } + .next-nav.next-line .next-menu-sub-menu .next-menu-item.next-selected { + background-color: transparent; + color: #5584FF; } + .next-nav.next-icon-only .next-menu-item-inner { + text-overflow: clip; } + .next-nav.next-icon-only .next-menu-item-text > span, + .next-nav.next-icon-only .next-nav-group-label > .next-menu-item-inner > span { + opacity: 0; } + .next-nav.next-icon-only.next-normal .next-nav-icon.next-icon { + margin-left: 1px; + margin-right: 1px; } + .next-nav.next-icon-only.next-normal .next-nav-icon.next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-nav.next-icon-only.next-primary .next-nav-icon.next-icon { + margin-left: 2px; + margin-right: 2px; } + .next-nav.next-icon-only.next-primary .next-nav-icon.next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-nav.next-icon-only.next-secondary .next-nav-icon.next-icon { + margin-left: 2px; + margin-right: 2px; } + .next-nav.next-icon-only.next-secondary .next-nav-icon.next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-nav.next-icon-only .next-nav-icon-only-arrow.next-icon { + margin-left: 1px; + -webkit-transition: all ease .3s; + transition: all ease .3s; + -webkit-transform-origin: center 46%; + -ms-transform-origin: center 46%; + transform-origin: center 46%; } + .next-nav.next-icon-only .next-nav-icon-only-arrow.next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-nav.next-icon-only .next-nav-item.next-opened .next-nav-icon-only-arrow.next-icon-arrow-down { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); + margin-left: 1px; } + .next-nav.next-icon-only .next-nav-item.next-opened .next-nav-icon-only-arrow.next-icon-arrow-down:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-nav.next-icon-only .next-nav-item.next-selected .next-nav-icon.next-icon { + -webkit-animation: pulse 0.3s cubic-bezier(0.23, 1, 0.32, 1); + animation: pulse 0.3s cubic-bezier(0.23, 1, 0.32, 1); } + .next-nav.next-icon-only .next-menu-hoz-icon-arrow, + .next-nav.next-icon-only .next-menu-icon-arrow { + display: none; } + .next-nav-embeddable.next-primary, .next-nav-embeddable.next-secondary, .next-nav-embeddable.next-normal { + height: 100%; + background: initial; + -webkit-box-shadow: none; + box-shadow: none; + border: none; } + .next-nav-embeddable.next-primary .next-menu-sub-menu .next-menu-item, + .next-nav-embeddable.next-primary .next-nav-item.next-menu-item, .next-nav-embeddable.next-secondary .next-menu-sub-menu .next-menu-item, + .next-nav-embeddable.next-secondary .next-nav-item.next-menu-item, .next-nav-embeddable.next-normal .next-menu-sub-menu .next-menu-item, + .next-nav-embeddable.next-normal .next-nav-item.next-menu-item { + background: initial; } + .next-nav-embeddable.next-nav.next-hoz .next-menu-item-inner { + height: 100%; } + .next-nav-embeddable.next-nav.next-hoz .next-menu-sub-menu .next-menu-item, + .next-nav-embeddable.next-nav.next-hoz .next-nav-item.next-menu-item { + height: 100%; } + +.next-nav[dir="rtl"] .next-nav-icon.next-icon { + margin-left: 4px; + margin-right: 0; } + .next-nav[dir="rtl"] .next-nav-icon.next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-nav[dir="rtl"].next-hoz .next-menu-header { + float: right; } + +.next-nav[dir="rtl"].next-hoz .next-menu-footer { + float: left; } + +.next-nav[dir="rtl"].next-hoz .next-nav-item:before { + width: 0; + left: 50%; } + +.next-nav[dir="rtl"].next-hoz .next-selected.next-nav-item:before { + width: 100%; + left: auto; + right: 0; } + +.next-nav[dir="rtl"].next-ver.next-left .next-nav-item:before { + right: -1px; + left: auto; } + +.next-nav[dir="rtl"].next-ver.next-right .next-nav-item:before { + left: -1px; + right: auto; } + +.next-nav[dir="rtl"].next-primary.next-ver.next-left .next-nav-item:before { + right: 0; + left: auto; } + +.next-nav[dir="rtl"].next-primary.next-ver.next-right .next-nav-item:before { + left: 0; + right: auto; } + +.next-nav[dir="rtl"].next-secondary.next-ver.next-left .next-nav-item:before { + right: 0; + left: auto; } + +.next-nav[dir="rtl"].next-secondary.next-ver.next-right .next-nav-item:before { + left: 0; + right: auto; } + +.next-nav[dir="rtl"] .next-nav.next-line.next-ver { + border-top-color: transparent; + border-right-color: transparent; + border-left-color: none; + border-bottom-color: transparent; } + +.next-nav[dir="rtl"].next-icon-only .next-nav-icon.next-icon, +.next-nav[dir="rtl"].next-icon-only .next-nav-icon-only-arrow.next-icon, +.next-nav[dir="rtl"].next-icon-only .next-nav-item.next-opened .next-nav-icon-only-arrow.next-icon-arrow-down { + margin-left: 0; + margin-right: 1px; } + .next-nav[dir="rtl"].next-icon-only .next-nav-icon.next-icon:before, + .next-nav[dir="rtl"].next-icon-only .next-nav-icon-only-arrow.next-icon:before, + .next-nav[dir="rtl"].next-icon-only .next-nav-item.next-opened .next-nav-icon-only-arrow.next-icon-arrow-down:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + +.next-number-picker { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; + /* stylelint-disable declaration-no-important */ } + .next-number-picker *, + .next-number-picker *:before, + .next-number-picker *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-number-picker .next-btn { + padding: 0 !important; + line-height: 0 !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; } + .next-number-picker-normal { + width: 80px; } + .next-number-picker-normal .next-input { + width: 100%; } + .next-number-picker-normal .next-input input { + padding-right: 2px; } + .next-number-picker-normal .next-btn { + display: block; } + .next-number-picker-normal .next-btn:hover { + z-index: 1; } + .next-number-picker-normal .next-btn:first-child { + border-right: none; + border-top: none; + height: calc(50%); + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } + .next-number-picker-normal .next-btn:last-child { + border-right: none; + border-bottom: none; + margin-top: -1px; + height: calc(50% + 1px); + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 0; } + .next-number-picker-normal .next-number-picker-handler { + opacity: 0; + -webkit-transition: opacity .24s linear .1s; + transition: opacity .24s linear .1s; + height: 100%; } + .next-number-picker-normal:hover .next-number-picker-handler { + opacity: 1; } + .next-number-picker-normal .next-input.next-disabled .next-number-picker-handler { + opacity: 0; } + .next-number-picker-normal.next-medium .next-btn { + width: 20px; } + .next-number-picker-normal.next-medium .next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-number-picker-normal.next-medium .next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-number-picker-normal.next-medium .next-icon:before { + width: 16px; + font-size: 16px; } } + .next-number-picker-normal.next-large .next-btn { + width: 20px; } + .next-number-picker-normal.next-large .next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-number-picker-normal.next-large .next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-number-picker-normal.next-large .next-icon:before { + width: 16px; + font-size: 16px; } } + .next-number-picker-inline input { + text-align: center; } + .next-number-picker-inline .next-input input { + padding: 0; } + .next-number-picker-inline.next-medium { + width: 100px; } + .next-number-picker-inline.next-medium .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-number-picker-inline.next-medium .next-btn:first-child { + margin-right: 2px; } + .next-number-picker-inline.next-medium .next-btn:last-child { + margin-left: 2px; } + .next-number-picker-inline.next-large { + width: 128px; } + .next-number-picker-inline.next-large .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-number-picker-inline.next-large .next-btn:first-child { + margin-right: 2px; } + .next-number-picker-inline.next-large .next-btn:last-child { + margin-left: 2px; } + .next-number-picker-inline .next-btn.next-medium { + width: 28px; } + .next-number-picker-inline .next-btn.next-large { + width: 40px; } + +.next-number-picker-normal[dir="rtl"] .next-btn:first-child { + border-right: 1px solid #C4C6CF; + border-left: 0; + border-top-left-radius: 3px; + border-top-right-radius: 0; } + +.next-number-picker-normal[dir="rtl"] .next-btn:last-child { + border-right: 1px solid #C4C6CF; + border-left: 0; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 0; } + +.next-number-picker-inline[dir="rtl"] .next-btn { + border-radius: 0; } + +.next-number-picker-inline[dir="rtl"] .next-before .next-btn { + border-top-right-radius: 3px !important; + border-bottom-right-radius: 3px !important; } + +.next-number-picker-inline[dir="rtl"] .next-after .next-btn { + border-top-left-radius: 3px !important; + border-bottom-left-radius: 3px !important; } + +.next-pagination[dir="rtl"] .next-pagination-total { + margin-right: 0; + margin-left: 16px; } + +.next-pagination[dir="rtl"] .next-pagination-jump-go { + margin-left: 0; + margin-right: 4px; } + +.next-pagination[dir="rtl"] .next-pagination-size-selector-title { + margin-right: 0; + margin-left: 4px; } + +.next-pagination[dir="rtl"] .next-pagination-size-selector-btn.next-btn-text + .next-pagination-size-selector-btn { + border-left: none; + border-right: 1px solid #DCDEE3; } + +.next-pagination[dir="rtl"] .next-pagination-pages + .next-pagination-size-selector, +.next-pagination[dir="rtl"] .next-pagination-size-selector + .next-pagination-pages { + margin-left: 0; + margin-right: 40px; } + +.next-pagination[dir="rtl"].next-start .next-pagination-pages { + float: left; } + +.next-pagination[dir="rtl"].next-start .next-pagination-size-selector { + float: right; } + +.next-pagination[dir="rtl"].next-end .next-pagination-pages { + float: right; } + +.next-pagination[dir="rtl"].next-end .next-pagination-size-selector { + float: left; } + +.next-pagination[dir="rtl"].next-small .next-pagination-list { + margin: 0 4px; } + +.next-pagination[dir="rtl"].next-small .next-pagination-total { + line-height: 20px; + vertical-align: middle; } + +.next-pagination[dir="rtl"].next-small .next-pagination-item { + padding: 0 6px; } + .next-pagination[dir="rtl"].next-small .next-pagination-item + .next-pagination-item { + margin: 0 4px 0 0; } + +.next-pagination[dir="rtl"].next-small .next-pagination-ellipsis { + height: 20px; + line-height: 20px; + margin-left: 8px; + margin-right: 8px; } + .next-pagination[dir="rtl"].next-small .next-pagination-ellipsis:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-pagination[dir="rtl"].next-small .next-pagination-display { + font-size: 12px; } + .next-pagination[dir="rtl"].next-small .next-pagination-display em { + font-size: 12px; } + +.next-pagination[dir="rtl"].next-small .next-pagination-jump-text { + font-size: 12px; } + +.next-pagination[dir="rtl"].next-small .next-pagination-jump-input { + width: 28px; } + +.next-pagination[dir="rtl"].next-small .next-pagination-size-selector-title { + height: 20px; + line-height: 20px; + font-size: 12px; + vertical-align: middle; } + +.next-pagination[dir="rtl"].next-small .next-pagination-size-selector-btn { + padding: 0 8px; } + +.next-pagination[dir="rtl"].next-small .next-pagination-item.next-prev:not([disabled]) i, +.next-pagination[dir="rtl"].next-small .next-pagination-item.next-next:not([disabled]) i { + color: #666666; } + +.next-pagination[dir="rtl"].next-small .next-pagination-item:hover.next-prev:not([disabled]) i, +.next-pagination[dir="rtl"].next-small .next-pagination-item:hover.next-next:not([disabled]) i { + color: #333333; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-list { + margin: 0 4px; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-total { + line-height: 28px; + vertical-align: middle; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-item { + padding: 0 10px; } + .next-pagination[dir="rtl"].next-medium .next-pagination-item + .next-pagination-item { + margin: 0 4px 0 0; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-ellipsis { + height: 28px; + line-height: 28px; + margin-left: 8px; + margin-right: 8px; } + .next-pagination[dir="rtl"].next-medium .next-pagination-ellipsis:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-display { + font-size: 12px; } + .next-pagination[dir="rtl"].next-medium .next-pagination-display em { + font-size: 12px; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-jump-text { + font-size: 12px; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-jump-input { + width: 36px; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-size-selector-title { + height: 28px; + line-height: 28px; + font-size: 12px; + vertical-align: middle; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-size-selector-btn { + padding: 0 12px; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-item.next-prev:not([disabled]) i, +.next-pagination[dir="rtl"].next-medium .next-pagination-item.next-next:not([disabled]) i { + color: #666666; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-item:hover.next-prev:not([disabled]) i, +.next-pagination[dir="rtl"].next-medium .next-pagination-item:hover.next-next:not([disabled]) i { + color: #333333; } + +.next-pagination[dir="rtl"].next-large .next-pagination-list { + margin: 0 8px; } + +.next-pagination[dir="rtl"].next-large .next-pagination-total { + line-height: 40px; + vertical-align: middle; } + +.next-pagination[dir="rtl"].next-large .next-pagination-item { + padding: 0 15px; } + .next-pagination[dir="rtl"].next-large .next-pagination-item + .next-pagination-item { + margin: 0 8px 0 0; } + +.next-pagination[dir="rtl"].next-large .next-pagination-ellipsis { + height: 40px; + line-height: 40px; + margin-left: 8px; + margin-right: 8px; } + .next-pagination[dir="rtl"].next-large .next-pagination-ellipsis:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + +.next-pagination[dir="rtl"].next-large .next-pagination-display { + font-size: 16px; } + .next-pagination[dir="rtl"].next-large .next-pagination-display em { + font-size: 16px; } + +.next-pagination[dir="rtl"].next-large .next-pagination-jump-text { + font-size: 16px; } + +.next-pagination[dir="rtl"].next-large .next-pagination-jump-input { + width: 48px; } + +.next-pagination[dir="rtl"].next-large .next-pagination-size-selector-title { + height: 40px; + line-height: 40px; + font-size: 16px; + vertical-align: middle; } + +.next-pagination[dir="rtl"].next-large .next-pagination-size-selector-btn { + padding: 0 16px; } + +.next-pagination[dir="rtl"].next-large .next-pagination-item.next-prev:not([disabled]) i, +.next-pagination[dir="rtl"].next-large .next-pagination-item.next-next:not([disabled]) i { + color: #666666; } + +.next-pagination[dir="rtl"].next-large .next-pagination-item:hover.next-prev:not([disabled]) i, +.next-pagination[dir="rtl"].next-large .next-pagination-item:hover.next-next:not([disabled]) i { + color: #333333; } + +.next-pagination { + -webkit-box-sizing: border-box; + box-sizing: border-box; + font-size: 0; } + .next-pagination *, + .next-pagination *:before, + .next-pagination *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-pagination:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + .next-pagination-total { + display: inline-block; + font-size: 14px; + margin-right: 16px; } + .next-pagination-pages { + display: inline-block; } + .next-pagination-list { + display: inline-block; + vertical-align: top; } + .next-pagination .next-pagination-item { + display: inline-block; } + .next-pagination .next-pagination-item.next-current { + border-color: #5584FF; + background: #5584FF; + color: #FFFFFF; } + .next-pagination .next-pagination-item.next-current:hover, .next-pagination .next-pagination-item.next-current:focus { + border-color: #5584FF; + background: #5584FF; + color: #FFFFFF; } + .next-pagination-ellipsis { + display: inline-block; + color: #999999; + vertical-align: top; } + .next-pagination-display { + display: inline-block; + margin: 0 16px; + color: #333333; + vertical-align: middle; } + .next-pagination-display em { + font-style: normal; + color: #5584FF; } + .next-pagination-jump-text { + display: inline-block; + vertical-align: middle; + color: #999999; } + .next-pagination-jump-input { + margin: 0 4px; + vertical-align: top; } + .next-pagination-jump-go { + margin-left: 4px; + vertical-align: top; } + .next-pagination-size-selector { + display: inline-block; + position: relative; } + .next-pagination-size-selector-title { + margin-right: 4px; + color: #999999; } + .next-pagination-size-selector-filter { + display: inline-block; + vertical-align: middle; } + .next-pagination-size-selector-dropdown { + vertical-align: top; + min-width: 64px; } + .next-pagination-size-selector-popup { + min-width: 64px; } + .next-pagination-size-selector-btn.next-btn-text { + height: initial; + line-height: initial; + color: #666666; + border-radius: 0; } + .next-pagination-size-selector-btn.next-btn-text.next-current { + color: #5584FF; } + .next-pagination-size-selector-btn.next-btn-text + .next-pagination-size-selector-btn { + border-left: 1px solid #DCDEE3; } + .next-pagination-pages + .next-pagination-size-selector, + .next-pagination-size-selector + .next-pagination-pages { + margin-left: 40px; } + .next-pagination.next-hide { + display: none; } + .next-pagination.next-start .next-pagination-pages { + float: right; } + .next-pagination.next-start .next-pagination-size-selector { + float: left; } + .next-pagination.next-end .next-pagination-pages { + float: left; } + .next-pagination.next-end .next-pagination-size-selector { + float: right; } + .next-pagination.next-small .next-pagination-list { + margin: 0 4px; } + .next-pagination.next-small .next-pagination-total { + line-height: 20px; + vertical-align: middle; } + .next-pagination.next-small .next-pagination-item { + padding: 0 6px; } + .next-pagination.next-small .next-pagination-item + .next-pagination-item { + margin: 0 0 0 4px; } + .next-pagination.next-small .next-pagination-ellipsis { + height: 20px; + line-height: 20px; + margin-left: 8px; + margin-right: 8px; } + .next-pagination.next-small .next-pagination-ellipsis:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-pagination.next-small .next-pagination-display { + font-size: 12px; } + .next-pagination.next-small .next-pagination-display em { + font-size: 12px; } + .next-pagination.next-small .next-pagination-jump-text { + font-size: 12px; } + .next-pagination.next-small .next-pagination-jump-input { + width: 28px; } + .next-pagination.next-small .next-pagination-size-selector-title { + height: 20px; + line-height: 20px; + font-size: 12px; + vertical-align: middle; } + .next-pagination.next-small .next-pagination-size-selector-btn { + padding: 0 8px; } + .next-pagination.next-small .next-pagination-item.next-prev:not([disabled]) i, + .next-pagination.next-small .next-pagination-item.next-next:not([disabled]) i { + color: #666666; } + .next-pagination.next-small .next-pagination-item:hover.next-prev:not([disabled]) i, + .next-pagination.next-small .next-pagination-item:hover.next-next:not([disabled]) i { + color: #333333; } + .next-pagination.next-small.next-arrow-only .next-pagination-item.next-prev, .next-pagination.next-small.next-arrow-only .next-pagination-item.next-next { + width: 20px; + padding: 0; } + .next-pagination.next-small.next-arrow-only .next-pagination-item.next-prev .next-icon, .next-pagination.next-small.next-arrow-only .next-pagination-item.next-next .next-icon { + margin: 0 auto; } + .next-pagination.next-small.next-arrow-prev-only .next-pagination-item.next-prev { + width: 20px; + padding: 0; } + .next-pagination.next-small.next-arrow-prev-only .next-pagination-item.next-prev .next-icon { + margin: 0 auto; } + .next-pagination.next-small.next-no-border .next-pagination-item.next-prev, .next-pagination.next-small.next-no-border .next-pagination-item.next-next { + padding: 0; + border: none; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; } + .next-pagination.next-small.next-no-border .next-pagination-item.next-prev .next-icon, .next-pagination.next-small.next-no-border .next-pagination-item.next-next .next-icon { + margin: 0; } + .next-pagination.next-small.next-no-border .next-pagination-item.next-prev:not([disabled]):hover i, + .next-pagination.next-small.next-no-border .next-pagination-item.next-next:not([disabled]):hover i { + color: #5584FF; } + .next-pagination.next-small.next-no-border .next-pagination-display { + margin: 0 8px; } + .next-pagination.next-small.next-mini .next-pagination-item.next-prev { + margin-right: 4px; } + .next-pagination.next-small.next-mini .next-pagination-item.next-next { + margin-left: 4px; } + .next-pagination.next-medium .next-pagination-list { + margin: 0 4px; } + .next-pagination.next-medium .next-pagination-total { + line-height: 28px; + vertical-align: middle; } + .next-pagination.next-medium .next-pagination-item { + padding: 0 10px; } + .next-pagination.next-medium .next-pagination-item + .next-pagination-item { + margin: 0 0 0 4px; } + .next-pagination.next-medium .next-pagination-ellipsis { + height: 28px; + line-height: 28px; + margin-left: 8px; + margin-right: 8px; } + .next-pagination.next-medium .next-pagination-ellipsis:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-pagination.next-medium .next-pagination-display { + font-size: 12px; } + .next-pagination.next-medium .next-pagination-display em { + font-size: 12px; } + .next-pagination.next-medium .next-pagination-jump-text { + font-size: 12px; } + .next-pagination.next-medium .next-pagination-jump-input { + width: 36px; } + .next-pagination.next-medium .next-pagination-size-selector-title { + height: 28px; + line-height: 28px; + font-size: 12px; + vertical-align: middle; } + .next-pagination.next-medium .next-pagination-size-selector-btn { + padding: 0 12px; } + .next-pagination.next-medium .next-pagination-item.next-prev:not([disabled]) i, + .next-pagination.next-medium .next-pagination-item.next-next:not([disabled]) i { + color: #666666; } + .next-pagination.next-medium .next-pagination-item:hover.next-prev:not([disabled]) i, + .next-pagination.next-medium .next-pagination-item:hover.next-next:not([disabled]) i { + color: #333333; } + .next-pagination.next-medium.next-arrow-only .next-pagination-item.next-prev, .next-pagination.next-medium.next-arrow-only .next-pagination-item.next-next { + width: 28px; + padding: 0; } + .next-pagination.next-medium.next-arrow-only .next-pagination-item.next-prev .next-icon, .next-pagination.next-medium.next-arrow-only .next-pagination-item.next-next .next-icon { + margin: 0 auto; } + .next-pagination.next-medium.next-arrow-prev-only .next-pagination-item.next-prev { + width: 28px; + padding: 0; } + .next-pagination.next-medium.next-arrow-prev-only .next-pagination-item.next-prev .next-icon { + margin: 0 auto; } + .next-pagination.next-medium.next-no-border .next-pagination-item.next-prev, .next-pagination.next-medium.next-no-border .next-pagination-item.next-next { + padding: 0; + border: none; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; } + .next-pagination.next-medium.next-no-border .next-pagination-item.next-prev .next-icon, .next-pagination.next-medium.next-no-border .next-pagination-item.next-next .next-icon { + margin: 0; } + .next-pagination.next-medium.next-no-border .next-pagination-item.next-prev:not([disabled]):hover i, + .next-pagination.next-medium.next-no-border .next-pagination-item.next-next:not([disabled]):hover i { + color: #5584FF; } + .next-pagination.next-medium.next-no-border .next-pagination-display { + margin: 0 12px; } + .next-pagination.next-medium.next-mini .next-pagination-item.next-prev { + margin-right: 4px; } + .next-pagination.next-medium.next-mini .next-pagination-item.next-next { + margin-left: 4px; } + .next-pagination.next-large .next-pagination-list { + margin: 0 8px; } + .next-pagination.next-large .next-pagination-total { + line-height: 40px; + vertical-align: middle; } + .next-pagination.next-large .next-pagination-item { + padding: 0 15px; } + .next-pagination.next-large .next-pagination-item + .next-pagination-item { + margin: 0 0 0 8px; } + .next-pagination.next-large .next-pagination-ellipsis { + height: 40px; + line-height: 40px; + margin-left: 8px; + margin-right: 8px; } + .next-pagination.next-large .next-pagination-ellipsis:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-pagination.next-large .next-pagination-display { + font-size: 16px; } + .next-pagination.next-large .next-pagination-display em { + font-size: 16px; } + .next-pagination.next-large .next-pagination-jump-text { + font-size: 16px; } + .next-pagination.next-large .next-pagination-jump-input { + width: 48px; } + .next-pagination.next-large .next-pagination-size-selector-title { + height: 40px; + line-height: 40px; + font-size: 16px; + vertical-align: middle; } + .next-pagination.next-large .next-pagination-size-selector-btn { + padding: 0 16px; } + .next-pagination.next-large .next-pagination-item.next-prev:not([disabled]) i, + .next-pagination.next-large .next-pagination-item.next-next:not([disabled]) i { + color: #666666; } + .next-pagination.next-large .next-pagination-item:hover.next-prev:not([disabled]) i, + .next-pagination.next-large .next-pagination-item:hover.next-next:not([disabled]) i { + color: #333333; } + .next-pagination.next-large.next-arrow-only .next-pagination-item.next-prev, .next-pagination.next-large.next-arrow-only .next-pagination-item.next-next { + width: 40px; + padding: 0; } + .next-pagination.next-large.next-arrow-only .next-pagination-item.next-prev .next-icon, .next-pagination.next-large.next-arrow-only .next-pagination-item.next-next .next-icon { + margin: 0 auto; } + .next-pagination.next-large.next-arrow-prev-only .next-pagination-item.next-prev { + width: 40px; + padding: 0; } + .next-pagination.next-large.next-arrow-prev-only .next-pagination-item.next-prev .next-icon { + margin: 0 auto; } + .next-pagination.next-large.next-no-border .next-pagination-item.next-prev, .next-pagination.next-large.next-no-border .next-pagination-item.next-next { + padding: 0; + border: none; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; } + .next-pagination.next-large.next-no-border .next-pagination-item.next-prev .next-icon, .next-pagination.next-large.next-no-border .next-pagination-item.next-next .next-icon { + margin: 0; } + .next-pagination.next-large.next-no-border .next-pagination-item.next-prev:not([disabled]):hover i, + .next-pagination.next-large.next-no-border .next-pagination-item.next-next:not([disabled]):hover i { + color: #5584FF; } + .next-pagination.next-large.next-no-border .next-pagination-display { + margin: 0 16px; } + .next-pagination.next-large.next-mini .next-pagination-item.next-prev { + margin-right: 8px; } + .next-pagination.next-large.next-mini .next-pagination-item.next-next { + margin-left: 8px; } + +.next-paragraph { + color: #333333; } + .next-paragraph-short { + line-height: 1.5; } + .next-paragraph-long { + line-height: 1.7; } + .next-paragraph-small { + font-size: 12px; } + .next-paragraph-medium { + font-size: 14px; } + +.next-progress-circle[dir=rtl] .next-progress-circle-container { + -webkit-transform: scaleX(-1); + -ms-transform: scaleX(-1); + transform: scaleX(-1); } + +.next-progress-line[dir=rtl] .next-progress-line-overlay { + left: auto; + right: 0; } + +.next-progress-line { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-progress-line *, + .next-progress-line *:before, + .next-progress-line *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-progress-line { + width: 100%; + display: inline-block; + position: relative; } + .next-progress-line-container { + display: inline-block; + width: 100%; + vertical-align: middle; } + .next-progress-line-underlay { + position: relative; + width: 100%; + background-color: #EBECF0; } + .next-progress-line-overlay { + position: absolute; + left: 0; + top: 0; + -webkit-transition: all 1s cubic-bezier(0.65, 0.2, 0.35, 1); + transition: all 1s cubic-bezier(0.65, 0.2, 0.35, 1); } + .next-progress-line-overlay-normal { + background-color: #5584FF; } + .next-progress-line-overlay-success { + background-color: #46BC15; } + .next-progress-line-overlay-error { + background-color: #FF3000; } + .next-progress-line-overlay-started { + background-color: #FF3000; } + .next-progress-line-overlay-middle { + background-color: #FF9300; } + .next-progress-line-overlay-finishing { + background-color: #46BC15; } + .next-progress-line.next-small .next-progress-line-underlay { + border-radius: 20px; + height: 4px; } + .next-progress-line.next-small .next-progress-line-overlay { + height: 4px; + border-radius: 20px; + top: 50%; + margin-top: -2px; } + .next-progress-line.next-small .next-progress-line-text { + font-size: 12px; + line-height: 4px; } + .next-progress-line.next-medium .next-progress-line-underlay { + border-radius: 20px; + height: 8px; } + .next-progress-line.next-medium .next-progress-line-overlay { + height: 8px; + border-radius: 20px; + top: 50%; + margin-top: -4px; } + .next-progress-line.next-medium .next-progress-line-text { + font-size: 12px; + line-height: 8px; } + .next-progress-line.next-large .next-progress-line-underlay { + border-radius: 20px; + height: 12px; } + .next-progress-line.next-large .next-progress-line-overlay { + height: 12px; + border-radius: 20px; + top: 50%; + margin-top: -6px; } + .next-progress-line.next-large .next-progress-line-text { + font-size: 12px; + line-height: 12px; } + .next-progress-line-show-info .next-progress-line-container { + padding-right: 60px; + margin-right: -60px; } + .next-progress-line-show-info .next-progress-line-text { + width: 50px; + text-align: left; + margin-left: 10px; + vertical-align: middle; + display: inline-block; + color: #333333; } + .next-progress-line-show-border .next-progress-line-underlay { + border: 1px solid #DCDEE3; } + .next-progress-line-show-border.next-small .next-progress-line-underlay { + border-radius: 20px; + height: 6px; } + .next-progress-line-show-border.next-small .next-progress-line-overlay { + height: 4px; + border-radius: 20px; + top: 50%; + margin-top: -2px; } + .next-progress-line-show-border.next-small .next-progress-line-text { + font-size: 12px; + line-height: 6px; } + .next-progress-line-show-border.next-medium .next-progress-line-underlay { + border-radius: 20px; + height: 10px; } + .next-progress-line-show-border.next-medium .next-progress-line-overlay { + height: 8px; + border-radius: 20px; + top: 50%; + margin-top: -4px; } + .next-progress-line-show-border.next-medium .next-progress-line-text { + font-size: 12px; + line-height: 10px; } + .next-progress-line-show-border.next-large .next-progress-line-underlay { + border-radius: 20px; + height: 14px; } + .next-progress-line-show-border.next-large .next-progress-line-overlay { + height: 12px; + border-radius: 20px; + top: 50%; + margin-top: -6px; } + .next-progress-line-show-border.next-large .next-progress-line-text { + font-size: 12px; + line-height: 14px; } + +.next-progress-circle { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-progress-circle *, + .next-progress-circle *:before, + .next-progress-circle *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-progress-circle { + position: relative; + display: inline-block; } + .next-progress-circle-underlay { + stroke-width: 8px; + stroke: #EBECF0; } + .next-progress-circle-overlay { + -webkit-transition: all 1s cubic-bezier(0.65, 0.2, 0.35, 1); + transition: all 1s cubic-bezier(0.65, 0.2, 0.35, 1); + stroke-linecap: round; + stroke-width: 8px; } + .next-progress-circle-overlay-normal { + stroke: #5584FF; } + .next-progress-circle-overlay-success { + stroke: #46BC15; } + .next-progress-circle-overlay-error { + stroke: #FF3000; } + .next-progress-circle-overlay-started { + stroke: #FF3000; } + .next-progress-circle-overlay-middle { + stroke: #FF9300; } + .next-progress-circle-overlay-finishing { + stroke: #46BC15; } + .next-progress-circle.next-small { + width: 100px; + height: 100px; + font-size: 20px; } + .next-progress-circle.next-medium { + width: 116px; + height: 116px; + font-size: 24px; } + .next-progress-circle.next-large { + width: 132px; + height: 132px; + font-size: 36px; } + .next-progress-circle-text { + display: block; + position: absolute; + width: 100%; + top: 50%; + left: 0; + text-align: center; + line-height: 1; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.65, 0.2, 0.35, 1); + transition: -webkit-transform 0.3s cubic-bezier(0.65, 0.2, 0.35, 1); + transition: transform 0.3s cubic-bezier(0.65, 0.2, 0.35, 1); + transition: transform 0.3s cubic-bezier(0.65, 0.2, 0.35, 1), -webkit-transform 0.3s cubic-bezier(0.65, 0.2, 0.35, 1); + color: #333333; } + +.next-range { + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + font-family: inherit; + font-weight: normal; + font-size: inherit; + line-height: inherit; + vertical-align: baseline; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + cursor: pointer; } + .next-range *, + .next-range *:before, + .next-range *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-range .next-range-inner { + position: relative; } + .next-range .next-range-inner:only-child { + margin-top: auto; + margin-bottom: auto; } + .next-range .next-range-track { + position: absolute; + width: 100%; + top: 50%; + border-radius: 0; } + .next-range .next-range-selected { + position: absolute; + width: 0; + top: 50%; + left: 0; + border-radius: 0; } + .next-range .next-range-scale { + position: relative; + width: 100%; + height: 12px; } + .next-range .next-range-scale .next-range-scale-item { + position: absolute; + left: 0; + width: 2px; + border: 1px solid; + border-radius: 0; } + .next-range .next-range-scale .next-range-scale-item:last-child { + margin-left: -2px; } + .next-range .next-range-slider { + position: absolute; + top: 50%; + left: 0; + border-radius: 50%; } + .next-range .next-range-slider-inner { + position: absolute; + top: 50%; + left: 50%; + border-width: 1px; + border-style: solid; + border-color: #C4C6CF; + border-radius: 50%; + -webkit-transition: border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); + transition: border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); } + .next-range .next-range-slider.next-range-slider-moving .next-range-slider-inner { + border: 2px solid #5584FF; + -webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); } + .next-range .next-range-frag.next-range-active .next-range-slider .next-range-slider-inner { + border: 2px solid #5584FF; + -webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); } + .next-range .next-range-mark { + position: relative; + cursor: auto; } + .next-range .next-range-mark .next-range-mark-text { + position: absolute; + left: 0; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + padding-left: 2px; + text-align: center; } + .next-range .next-range-frag { + position: absolute; + top: 0; } + .next-range .next-range-frag .next-range-slider { + left: 0; } + .next-range .next-range-frag .next-range-slider:nth-child(2) { + left: 100%; } + .next-range .next-range-frag .next-range-selected { + width: 100%; } + .next-range.disabled { + cursor: not-allowed; } + .next-range.disabled .next-range-mark { + cursor: auto; } + .next-range .next-range-track { + background-color: #C4C6CF; } + .next-range .next-range-track:hover { + background-color: #C4C6CF; } + .next-range .next-range-selected { + background-color: #5584FF; } + .next-range .next-range-selected:hover { + background-color: #5584FF; } + .next-range .next-range-scale .next-range-scale-item { + border-color: #C4C6CF; + background-color: #C4C6CF; } + .next-range .next-range-scale .next-range-scale-item:hover { + border-color: #C4C6CF; } + .next-range .next-range-scale .next-range-scale-item.activated { + border-color: #5584FF; + background-color: #5584FF; } + .next-range .next-range-scale .next-range-scale-item.activated:hover { + border-color: #5584FF; } + .next-range .next-range-slider-inner { + background-color: #FFFFFF; + border-color: #C4C6CF; } + .next-range .next-range-slider-inner:hover { + background-color: #FFFFFF; + -webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.12); + box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.12); + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); } + .next-range .next-range-mark .next-range-mark-text { + color: #999999; } + .next-range .next-range-mark .next-range-mark-text:hover { + color: #999999; } + .next-range .next-range-mark .next-range-mark-text.activated { + color: #333333; } + .next-range .next-range-mark .next-range-mark-text.activated:hover { + color: #333333; } + .next-range.disabled .next-range-track { + background-color: #C4C6CF; } + .next-range.disabled .next-range-selected { + background-color: #A0A2AD; } + .next-range.disabled .next-range-scale-item { + border-color: #C4C6CF; } + .next-range.disabled .next-range-scale-item.activated { + border-color: #A0A2AD; } + .next-range.disabled .next-range-slider-inner { + background-color: #E6E7EB; + border-color: #E6E7EB; + -webkit-transform: none; + -ms-transform: none; + transform: none; + -webkit-box-shadow: none; + box-shadow: none; } + .next-range.disabled .next-range-mark-text { + color: #CCCCCC; } + .next-range.disabled .next-range-mark-text.activated { + color: #999999; } + .next-range .next-range-track { + height: 4px; + margin-top: -2px; } + .next-range .next-range-selected { + height: 4px; + margin-top: -2px; } + .next-range .next-range-frag { + margin-top: -2px; + height: 16px; } + .next-range .next-range-slider { + height: 16px; + width: 16px; + margin-top: -8px; + margin-left: -8px; + -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); } + .next-range .next-range-slider-inner { + height: 16px; + width: 16px; + margin-top: -8px; + margin-left: -8px; } + .next-range .next-range-mark { + display: block; } + .next-range .next-range-mark .next-range-mark-text { + font-size: 12px; + font-weight: normal; + line-height: 20px; + height: 20px; } + .next-range .next-range-mark.next-range-mark-below { + height: 30px; } + .next-range .next-range-mark.next-range-mark-below .next-range-mark-text { + bottom: 0; } + .next-range .next-range-mark.next-range-mark-above { + height: 30px; } + .next-range .next-range-scale .next-range-scale-item { + height: 12px; } + .next-range.simulation-hover > .next-range-slider-inner { + background-color: #FFFFFF; + -webkit-box-shadow: #FFFFFF; + box-shadow: #FFFFFF; + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); } + .next-range.simulation-click > .next-range-slider-inner { + border: 2px solid #5584FF; + -webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); } + +.next-range[dir=rtl] .next-range-mark { + position: relative; + cursor: auto; } + .next-range[dir=rtl] .next-range-mark .next-range-mark-text { + position: absolute; + right: 0; + -webkit-transform: translateX(50%); + -ms-transform: translateX(50%); + transform: translateX(50%); + padding-right: 2px; + text-align: center; } + +.next-rating[dir="rtl"] .next-rating-overlay { + right: 0; + left: auto; } + +.next-rating[dir="rtl"] .next-rating-underlay .next-rating-icon, +.next-rating[dir="rtl"] .next-rating-overlay .next-rating-icon { + margin-right: 4px; + margin-left: 0; } + +.next-rating[dir="rtl"] .next-rating-underlay .next-rating-icon:last-child, +.next-rating[dir="rtl"] .next-rating-overlay .next-rating-icon:last-child { + /* icon 放大会产生边缘溢出，这里使用 margin 为放大扩展一部分空间 */ + margin-left: 4px; } + +.next-rating { + vertical-align: top; } + .next-rating { + display: inline-block; + position: relative; } + .next-rating:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + .next-rating-base { + float: left; + cursor: pointer; } + .next-rating-text { + float: left; } + .next-rating-base-disabled { + cursor: not-allowed; } + .next-rating-underlay { + white-space: nowrap; + overflow: hidden; } + .next-rating-underlay .next-icon { + color: #E2E4E8; } + .next-rating-stroke-mode .next-rating-underlay .next-icon { + color: transparent; + -webkit-text-stroke: 1px #5584FF; } + .next-rating-overlay { + white-space: nowrap; + overflow: hidden; + position: absolute; + width: 0; + top: 0; + left: 0; } + .next-rating-overlay .next-icon { + color: #5584FF; } + .next-rating-underlay .next-rating-icon, .next-rating-overlay .next-rating-icon { + margin-left: 4px; } + .next-rating-underlay .next-rating-icon:last-child, .next-rating-overlay .next-rating-icon:last-child { + /* icon 放大会产生边缘溢出，这里使用 margin 为放大扩展一部分空间 */ + margin-right: 4px; } + .next-rating-underlay .next-icon, .next-rating-overlay .next-icon { + -webkit-transition: all 50ms ease-in; + transition: all 50ms ease-in; } + .next-rating-underlay .next-icon.hover, .next-rating-overlay .next-icon.hover { + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); } + .next-rating-underlay .next-icon.clicked, .next-rating-overlay .next-icon.clicked { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); } + .next-rating-info { + position: absolute; + top: calc(100% + 4px); + left: 0; + border: 1px solid #E2E4E8; + background: #FFFFFF; + padding: 4px 8px 3px; + font-size: 12px; + white-space: nowrap; } + .next-rating-info:after { + position: absolute; + content: ' '; + width: 4px; + height: 4px; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + border: 1px solid #E2E4E8; + background: #FFFFFF; + border-bottom-color: transparent; + border-right-color: transparent; + top: -3px; + left: 4px; } + .next-rating:focus, .next-rating.hover { + outline: none; } + .next-rating:focus .next-rating-overlay .next-icon, .next-rating.hover .next-rating-overlay .next-icon { + color: #5584FF; } + +/* 状态 */ +/* ======================================== */ +.next-rating-grade-low .next-rating-overlay .next-icon { + color: #666666; } + +.next-rating-grade-low.hover .next-rating-overlay .next-icon { + color: #666666; } + +.next-rating-grade-high .next-rating-overlay .next-icon { + color: #5584FF; } + +.next-rating-grade-high.hover .next-rating-overlay .next-icon { + color: #5584FF; } + +/* 尺寸 */ +/* ======================================== */ +.next-rating-small { + font-size: 12px; } + .next-rating-small .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-rating-small .next-rating-text { + margin-left: 8px; } + +.next-rating-medium { + font-size: 12px; } + .next-rating-medium .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-rating-medium .next-rating-text { + margin-left: 12px; } + +.next-rating-large { + font-size: 16px; } + .next-rating-large .next-icon:before { + width: 20px; + font-size: 20px; + line-height: inherit; } + .next-rating-large .next-rating-text { + margin-left: 16px; } + +.next-search-simple[dir=rtl].next-large .next-search-icon { + margin-left: 12px; + margin-right: 0; } + +.next-search-simple[dir=rtl].next-medium .next-search-icon { + margin-left: 8px; + margin-right: 0; } + +.next-search-simple[dir=rtl].next-normal .next-search-left .next-search-left-addon { + border-left: 1px solid #C4C6CF; + border-right: none; } + +.next-search-simple[dir=rtl].next-dark .next-search-left { + border-color: #C4C6CF; } + .next-search-simple[dir=rtl].next-dark .next-search-left .next-search-left-addon { + border-right: 1px solid #C4C6CF; } + +.next-search-simple[dir=rtl].next-dark:hover .next-search-left { + border-color: #C4C6CF; } + +.next-search-simple[dir=rtl].next-dark .next-search-icon { + color: #999999; } + .next-search-simple[dir=rtl].next-dark .next-search-icon:hover { + color: #666666; } + +.next-search-normal[dir=rtl] .next-search-left { + border-left: none; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + +.next-search-normal[dir=rtl] .next-search-btn.next-btn { + border-radius: 3px 0 0 3px !important; } + +.next-search-normal[dir=rtl] .next-input { + border-radius: 0 3px 3px 0; } + +.next-search-normal[dir=rtl].next-primary .next-input { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; } + +.next-search-normal[dir=rtl].next-primary .next-search-left .next-search-left-addon { + border-left: 1px solid #E6E7EB; + border-right: none; } + +.next-search-normal[dir=rtl].next-secondary .next-input { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; } + +.next-search-normal[dir=rtl].next-secondary .next-search-left .next-search-left-addon { + border-left: 1px solid #E6E7EB; + border-right: none; } + +.next-search-normal[dir=rtl].next-normal .next-input { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; } + +.next-search-normal[dir=rtl].next-normal .next-search-left .next-search-left-addon { + border-left: 1px solid #E6E7EB; + border-right: none; } + +.next-search-normal[dir=rtl].next-dark .next-search-left .next-search-left-addon { + border-left: 1px solid #5584FF; + border-right: none; } + +.next-search { + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + display: inline-block; } + .next-search *, + .next-search *:before, + .next-search *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-search .next-input, + .next-search .next-select { + border: none; } + .next-search .next-select .next-input { + height: auto; } + .next-search .next-select .next-input .next-input-text-field { + height: auto; } + .next-search .next-search-left { + border-style: solid; + -webkit-transition: all .3s ease-out; + transition: all .3s ease-out; } + .next-search .next-search-left-addon .next-input, + .next-search .next-search-left-addon .next-select-trigger-search { + min-height: 100%; + border-bottom-right-radius: 0; + border-top-right-radius: 0; } + .next-search .next-search-left-addon .next-select-values { + line-height: 1; } + .next-search .next-search-left-addon + .next-search-input .next-input { + border-bottom-left-radius: 0; + border-top-left-radius: 0; } + .next-search .next-search-input { + width: 100%; } + .next-search .next-search-btn { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal { + width: 600px; } + .next-search-normal .next-search-left { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } + .next-search-normal .next-input { + border-radius: 3px 0 0 3px; } + .next-search-normal .next-btn { + border-radius: 0 3px 3px 0; } + .next-search-normal.next-primary .next-search-left { + border-color: #5584FF; } + .next-search-normal.next-primary .next-search-left .next-search-left-addon { + border-right: 1px solid #E6E7EB; } + .next-search-normal.next-primary:hover .next-search-left, + .next-search-normal.next-primary:hover .next-btn { + border-color: #5584FF; } + .next-search-normal.next-primary .next-search-btn { + background: #5584FF; + border-color: #5584FF; + color: #FFFFFF; } + .next-search-normal.next-primary .next-search-btn:hover { + background: #3E71F7; + border-color: #5584FF; + color: #FFFFFF; } + .next-search-normal.next-primary .next-search-btn .next-icon { + color: #FFFFFF; } + .next-search-normal.next-primary .next-search-btn .next-icon:hover { + color: #FFFFFF; } + .next-search-normal.next-primary.next-large { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal.next-primary.next-large .next-search-left, .next-search-normal.next-primary.next-large .next-search-btn { + border-width: 2px; + height: 60px; } + .next-search-normal.next-primary.next-large .next-search-input { + height: 56px; + overflow-y: hidden; } + .next-search-normal.next-primary.next-large .next-search-input input { + height: 56px; + line-height: 56px \0; } + .next-search-normal.next-primary.next-large .next-select { + height: 56px; } + .next-search-normal.next-primary.next-large .next-search-btn { + font-size: 16px; } diff --git a/dist/next-noreset-2.css b/dist/next-noreset-2.css new file mode 100644 index 0000000000..89b8297b62 --- /dev/null +++ b/dist/next-noreset-2.css @@ -0,0 +1,5311 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ + + .next-search-normal.next-primary.next-large .next-search-btn .next-icon:before { + width: 24px; + font-size: 24px; + line-height: inherit; } + .next-search-normal.next-primary.next-large .next-search-btn .next-search-btn-text { + display: inline-block; + padding-left: 0; } + .next-search-normal.next-primary.next-medium { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal.next-primary.next-medium .next-search-left, .next-search-normal.next-primary.next-medium .next-search-btn { + border-width: 2px; + height: 40px; } + .next-search-normal.next-primary.next-medium .next-search-input { + height: 36px; + overflow-y: hidden; } + .next-search-normal.next-primary.next-medium .next-search-input input { + height: 36px; + line-height: 36px \0; } + .next-search-normal.next-primary.next-medium .next-select { + height: 36px; } + .next-search-normal.next-primary.next-medium .next-search-btn { + font-size: 16px; } + .next-search-normal.next-primary.next-medium .next-search-btn .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-search-normal.next-primary.next-medium .next-search-btn .next-search-btn-text { + display: inline-block; + padding-left: 0; } + .next-search-normal.next-primary .next-input { + border-top-left-radius: 1px; + border-bottom-left-radius: 1px; } + .next-search-normal.next-secondary .next-search-left { + border-color: #C4C6CF; } + .next-search-normal.next-secondary .next-search-left .next-search-left-addon { + border-right: 1px solid #E6E7EB; } + .next-search-normal.next-secondary:hover .next-search-left, + .next-search-normal.next-secondary:hover .next-btn { + border-color: #5584FF; } + .next-search-normal.next-secondary .next-search-btn { + background: #5584FF; + border-color: #5584FF; + color: #FFFFFF; } + .next-search-normal.next-secondary .next-search-btn:hover { + background: #3E71F7; + border-color: #5584FF; + color: #FFFFFF; } + .next-search-normal.next-secondary .next-search-btn .next-icon { + color: #FFFFFF; } + .next-search-normal.next-secondary .next-search-btn .next-icon:hover { + color: #FFFFFF; } + .next-search-normal.next-secondary.next-large { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal.next-secondary.next-large .next-search-left, .next-search-normal.next-secondary.next-large .next-search-btn { + border-width: 1px; + height: 60px; } + .next-search-normal.next-secondary.next-large .next-search-input { + height: 58px; + overflow-y: hidden; } + .next-search-normal.next-secondary.next-large .next-search-input input { + height: 58px; + line-height: 58px \0; } + .next-search-normal.next-secondary.next-large .next-select { + height: 58px; } + .next-search-normal.next-secondary.next-large .next-search-btn { + font-size: 16px; } + .next-search-normal.next-secondary.next-large .next-search-btn .next-icon:before { + width: 24px; + font-size: 24px; + line-height: inherit; } + .next-search-normal.next-secondary.next-large .next-search-btn .next-search-btn-text { + display: inline-block; + padding-left: 0; } + .next-search-normal.next-secondary.next-medium { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal.next-secondary.next-medium .next-search-left, .next-search-normal.next-secondary.next-medium .next-search-btn { + border-width: 1px; + height: 40px; } + .next-search-normal.next-secondary.next-medium .next-search-input { + height: 38px; + overflow-y: hidden; } + .next-search-normal.next-secondary.next-medium .next-search-input input { + height: 38px; + line-height: 38px \0; } + .next-search-normal.next-secondary.next-medium .next-select { + height: 38px; } + .next-search-normal.next-secondary.next-medium .next-search-btn { + font-size: 16px; } + .next-search-normal.next-secondary.next-medium .next-search-btn .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-search-normal.next-secondary.next-medium .next-search-btn .next-search-btn-text { + display: inline-block; + padding-left: 0; } + .next-search-normal.next-secondary .next-input { + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; } + .next-search-normal.next-normal .next-search-left { + border-color: #C4C6CF; } + .next-search-normal.next-normal .next-search-left .next-search-left-addon { + border-right: 1px solid #E6E7EB; } + .next-search-normal.next-normal:hover .next-search-left, + .next-search-normal.next-normal:hover .next-btn { + border-color: #A0A2AD; } + .next-search-normal.next-normal .next-search-btn { + background: #F7F8FA; + border-color: #C4C6CF; + color: #666666; } + .next-search-normal.next-normal .next-search-btn:hover { + background: #EBECF0; + border-color: #A0A2AD; + color: #333333; } + .next-search-normal.next-normal .next-search-btn .next-icon { + color: #666666; } + .next-search-normal.next-normal .next-search-btn .next-icon:hover { + color: #333333; } + .next-search-normal.next-normal.next-large { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal.next-normal.next-large .next-search-left, .next-search-normal.next-normal.next-large .next-search-btn { + border-width: 1px; + height: 60px; } + .next-search-normal.next-normal.next-large .next-search-input { + height: 58px; + overflow-y: hidden; } + .next-search-normal.next-normal.next-large .next-search-input input { + height: 58px; + line-height: 58px \0; } + .next-search-normal.next-normal.next-large .next-select { + height: 58px; } + .next-search-normal.next-normal.next-large .next-search-btn { + font-size: 16px; } + .next-search-normal.next-normal.next-large .next-search-btn .next-icon:before { + width: 24px; + font-size: 24px; + line-height: inherit; } + .next-search-normal.next-normal.next-large .next-search-btn .next-search-btn-text { + display: inline-block; + padding-left: 0; } + .next-search-normal.next-normal.next-medium { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal.next-normal.next-medium .next-search-left, .next-search-normal.next-normal.next-medium .next-search-btn { + border-width: 1px; + height: 40px; } + .next-search-normal.next-normal.next-medium .next-search-input { + height: 38px; + overflow-y: hidden; } + .next-search-normal.next-normal.next-medium .next-search-input input { + height: 38px; + line-height: 38px \0; } + .next-search-normal.next-normal.next-medium .next-select { + height: 38px; } + .next-search-normal.next-normal.next-medium .next-search-btn { + font-size: 16px; } + .next-search-normal.next-normal.next-medium .next-search-btn .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-search-normal.next-normal.next-medium .next-search-btn .next-search-btn-text { + display: inline-block; + padding-left: 0; } + .next-search-normal.next-normal .next-input { + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; } + .next-search-normal.next-dark .next-search-left { + border-color: #5584FF; } + .next-search-normal.next-dark .next-search-left .next-search-left-addon { + border-right: 1px solid #5584FF; } + .next-search-normal.next-dark:hover .next-search-left, + .next-search-normal.next-dark:hover .next-btn { + border-color: #5584FF; } + .next-search-normal.next-dark .next-search-btn { + background: #5584FF; + border-color: #5584FF; + color: #FFFFFF; } + .next-search-normal.next-dark .next-search-btn:hover { + background: #3E71F7; + border-color: #5584FF; + color: #FFFFFF; } + .next-search-normal.next-dark .next-search-btn .next-icon { + color: #FFFFFF; } + .next-search-normal.next-dark .next-search-btn .next-icon:hover { + color: #FFFFFF; } + .next-search-normal.next-dark .next-select-inner, + .next-search-normal.next-dark input { + color: #FFFFFF; } + .next-search-normal.next-dark .next-input { + background: rgba(255, 255, 255, 0); } + .next-search-normal.next-dark .next-select { + background: rgba(255, 255, 255, 0); } + .next-search-normal.next-dark.next-large { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal.next-dark.next-large .next-search-left, .next-search-normal.next-dark.next-large .next-search-btn { + border-width: 1px; + height: 60px; } + .next-search-normal.next-dark.next-large .next-search-input { + height: 58px; + overflow-y: hidden; } + .next-search-normal.next-dark.next-large .next-search-input input { + height: 58px; + line-height: 58px \0; } + .next-search-normal.next-dark.next-large .next-select { + height: 58px; } + .next-search-normal.next-dark.next-large .next-search-btn { + font-size: 16px; } + .next-search-normal.next-dark.next-large .next-search-btn .next-icon:before { + width: 24px; + font-size: 24px; + line-height: inherit; } + .next-search-normal.next-dark.next-large .next-search-btn .next-search-btn-text { + display: inline-block; + padding-left: 0; } + .next-search-normal.next-dark.next-medium { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal.next-dark.next-medium .next-search-left, .next-search-normal.next-dark.next-medium .next-search-btn { + border-width: 1px; + height: 40px; } + .next-search-normal.next-dark.next-medium .next-search-input { + height: 38px; + overflow-y: hidden; } + .next-search-normal.next-dark.next-medium .next-search-input input { + height: 38px; + line-height: 38px \0; } + .next-search-normal.next-dark.next-medium .next-select { + height: 38px; } + .next-search-normal.next-dark.next-medium .next-search-btn { + font-size: 16px; } + .next-search-normal.next-dark.next-medium .next-search-btn .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-search-normal.next-dark.next-medium .next-search-btn .next-search-btn-text { + display: inline-block; + padding-left: 0; } + .next-search-normal:not([dir=rtl]) .next-search-left { + border-right: none; } + .next-search-simple { + width: 300px; + -webkit-box-shadow: none; + box-shadow: none; + border-radius: 3px; } + .next-search-simple .next-search-icon { + cursor: pointer; + -webkit-transition: all .3s ease-out; + transition: all .3s ease-out; } + .next-search-simple .next-search-left, .next-search-simple .next-input { + border-radius: 3px; } + .next-search-simple.next-large .next-search-icon { + margin-right: 12px; } + .next-search-simple.next-medium .next-search-icon { + margin-right: 8px; } + .next-search-simple.next-normal .next-search-left { + border-color: #C4C6CF; } + .next-search-simple.next-normal .next-search-left .next-search-left-addon { + border-right: 1px solid #C4C6CF; } + .next-search-simple.next-normal:hover .next-search-left { + border-color: #A0A2AD; } + .next-search-simple.next-normal .next-search-icon { + color: #999999; } + .next-search-simple.next-normal .next-search-icon:hover { + color: #666666; } + .next-search-simple.next-normal .next-search-left { + border-width: 1px; } + .next-search-simple.next-normal.next-large .next-search-icon:before { + width: 20px; + font-size: 20px; + line-height: inherit; } + .next-search-simple.next-normal.next-medium .next-search-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-search-simple.next-dark .next-search-left { + border-color: #C4C6CF; } + .next-search-simple.next-dark .next-search-left .next-search-left-addon { + border-right: 1px solid #C4C6CF; } + .next-search-simple.next-dark:hover .next-search-left { + border-color: #C4C6CF; } + .next-search-simple.next-dark .next-search-icon { + color: #999999; } + .next-search-simple.next-dark .next-search-icon:hover { + color: #666666; } + .next-search-simple.next-dark .next-select-inner, + .next-search-simple.next-dark input { + color: #FFFFFF; } + .next-search-simple.next-dark .next-input { + background: rgba(255, 255, 255, 0); } + .next-search-simple.next-dark .next-select { + background: rgba(255, 255, 255, 0); } + .next-search-simple.next-dark .next-search-left { + border-width: 1px; } + .next-search-simple.next-dark.next-large .next-search-icon:before { + width: 20px; + font-size: 20px; + line-height: inherit; } + .next-search-simple.next-dark.next-medium .next-search-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-search-simple .next-select.next-large { + height: 38px; } + +.next-search-simple .next-select.next-medium { + height: 26px; } + +/* Slider */ +/* -------------------------------------- */ +.next-slick { + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: relative; + display: block; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -ms-touch-action: pan-y; + touch-action: pan-y; + -webkit-tap-highlight-color: transparent; + /* 水平滑动 */ + /* 垂直滑动 */ } + .next-slick *, + .next-slick *:before, + .next-slick *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-slick-initialized .next-slick-slide { + display: block; } + .next-slick-list { + position: relative; + overflow: hidden; + display: block; + margin: 0; + padding: 0; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + .next-slick-list:focus { + outline: none; } + .next-slick-list.dragging { + cursor: pointer; + cursor: hand; } + .next-slick-track { + position: relative; + top: 0; + left: 0; + display: block; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + .next-slick-slide { + float: left; + height: 100%; + min-height: 1px; + outline: 0; + -webkit-transition: all 0.3s cubic-bezier(0.86, 0, 0.07, 1); + transition: all 0.3s cubic-bezier(0.86, 0, 0.07, 1); } + .next-slick[dir="rtl"] .next-slick-slide { + float: right; } + .next-slick-slide img { + display: block; } + .next-slick-arrow { + display: block; + position: absolute; + cursor: pointer; + text-align: center; + -webkit-transition: .4s ease-in; + transition: .4s ease-in; + /* prev/next 按钮不同位置下的外观 */ } + .next-slick-arrow.inner { + color: #FFFFFF; + background: #000000; + opacity: 0.2; + padding: 0; + border: none; } + .next-slick-arrow.inner:focus, .next-slick-arrow.inner:hover { + color: #FFFFFF; + background: #000000; + opacity: 0.4; } + .next-slick-arrow.inner.disabled { + color: #CCCCCC; + background: #F7F8FA; + opacity: 0.5; } + .next-slick-arrow.outer { + color: #666666; + background: transparent; + opacity: 0.32; + padding: 0; + border: none; + border-radius: 0; } + .next-slick-arrow.outer:focus, .next-slick-arrow.outer:hover { + color: #333333; + background: transparent; + opacity: 0.32; } + .next-slick-arrow.outer.disabled { + color: #CCCCCC; + background: transparent; + opacity: 0.32; } + .next-slick-arrow.disabled { + cursor: not-allowed; } + .next-slick-dots { + display: block; + position: absolute; + margin: 0; + padding: 0; + /* dots 位于水平位置 */ + /* dots 位于右侧垂直位置 */ } + .next-slick-dots-item { + position: relative; + display: inline-block; + cursor: pointer; } + .next-slick-dots-item button { + cursor: pointer; + border-width: 0; + border-color: white; + border-style: solid; + outline: none; + padding: 0; + height: 8px; + width: 8px; + border-radius: 50%; + background: rgba(0, 0, 0, 0.32); } + .next-slick-dots-item button:hover { + background-color: rgba(0, 0, 0, 0.32); + /* border-width: $slick-dots-border-width-hover; */ + border-color: white; } + .next-slick-dots-item button:focus, + .next-slick-dots-item.active button { + background: #5584ff; + /* border-width: $slick-dots-border-width-selected; */ + border-color: white; + -webkit-animation: zoom 0.3s cubic-bezier(0.86, 0, 0.07, 1); + animation: zoom 0.3s cubic-bezier(0.86, 0, 0.07, 1); } + .next-slick-dots.hoz { + width: 100%; + bottom: 12px; + left: 0; + text-align: center; } + .next-slick-dots.hoz .next-slick-dots-item { + margin: 0 4px; } + .next-slick-dots.ver { + width: 16px; + top: 0; + right: 20px; + bottom: 0; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } + .next-slick-dots.ver .next-slick-dots-item { + margin: 0 0; } + .next-slick.next-slick-hoz.next-slick-outer { + padding: 0 24px; } + .next-slick.next-slick-hoz .next-slick-arrow.medium { + width: 28px; + height: 56px; + line-height: 56px; } + .next-slick.next-slick-hoz .next-slick-arrow.medium .next-icon:before { + width: 20px; + font-size: 20px; + line-height: inherit; } + .next-slick.next-slick-hoz .next-slick-arrow.medium.inner { + top: calc((100% - 56px) / 2); } + .next-slick.next-slick-hoz .next-slick-arrow.medium.inner.next-slick-prev { + left: 0; } + .next-slick.next-slick-hoz .next-slick-arrow.medium.inner.next-slick-next { + right: 0; } + .next-slick.next-slick-hoz .next-slick-arrow.medium.outer { + top: calc((100% - 56px) / 2); } + .next-slick.next-slick-hoz .next-slick-arrow.medium.outer.next-slick-prev { + left: -4px; } + .next-slick.next-slick-hoz .next-slick-arrow.medium.outer.next-slick-next { + right: -4px; } + .next-slick.next-slick-hoz .next-slick-arrow.large { + width: 48px; + height: 96px; + line-height: 96px; } + .next-slick.next-slick-hoz .next-slick-arrow.large .next-icon:before { + width: 32px; + font-size: 32px; + line-height: inherit; } + .next-slick.next-slick-hoz .next-slick-arrow.large.inner { + top: calc((100% - 96px) / 2); } + .next-slick.next-slick-hoz .next-slick-arrow.large.inner.next-slick-prev { + left: 0; } + .next-slick.next-slick-hoz .next-slick-arrow.large.inner.next-slick-next { + right: 0; } + .next-slick.next-slick-hoz .next-slick-arrow.large.outer { + top: calc((100% - 96px) / 2); } + .next-slick.next-slick-hoz .next-slick-arrow.large.outer.next-slick-prev { + left: -8px; } + .next-slick.next-slick-hoz .next-slick-arrow.large.outer.next-slick-next { + right: -8px; } + .next-slick.next-slick-ver.next-slick-outer { + padding: 24px 0; } + .next-slick.next-slick-ver .next-slick-slide { + display: block; + height: auto; + /* border: $slick-ver-slide-border-width solid transparent; */ } + .next-slick.next-slick-ver .next-slick-arrow { + /* size medium */ + /* size medium & position inner */ + /* size medium & position outer */ + /* size large */ + /* size large & position inner */ + /* size large & position outer */ } + .next-slick.next-slick-ver .next-slick-arrow.medium { + width: 56px; + height: 28px; + line-height: 28px; } + .next-slick.next-slick-ver .next-slick-arrow.medium .next-icon:before { + width: 20px; + font-size: 20px; + line-height: inherit; } + .next-slick.next-slick-ver .next-slick-arrow.medium.inner { + left: calc((100% - 56px) / 2); } + .next-slick.next-slick-ver .next-slick-arrow.medium.inner.next-slick-prev { + top: 0; } + .next-slick.next-slick-ver .next-slick-arrow.medium.inner.next-slick-next { + bottom: 0; } + .next-slick.next-slick-ver .next-slick-arrow.medium.outer { + left: calc((100% - 56px) / 2); } + .next-slick.next-slick-ver .next-slick-arrow.medium.outer.next-slick-prev { + top: -4px; } + .next-slick.next-slick-ver .next-slick-arrow.medium.outer.next-slick-next { + bottom: -4px; } + .next-slick.next-slick-ver .next-slick-arrow.large { + width: 96px; + height: 48px; + line-height: 48px; } + .next-slick.next-slick-ver .next-slick-arrow.large .next-icon:before { + width: 32px; + font-size: 32px; + line-height: inherit; } + .next-slick.next-slick-ver .next-slick-arrow.large.inner { + left: calc((100% - 96px) / 2); } + .next-slick.next-slick-ver .next-slick-arrow.large.inner.next-slick-prev { + top: 0; } + .next-slick.next-slick-ver .next-slick-arrow.large.inner.next-slick-next { + bottom: 0; } + .next-slick.next-slick-ver .next-slick-arrow.large.outer { + left: calc((100% - 96px) / 2); } + .next-slick.next-slick-ver .next-slick-arrow.large.outer.next-slick-prev { + top: -16px; } + .next-slick.next-slick-ver .next-slick-arrow.large.outer.next-slick-next { + bottom: -16px; } + +.next-split-btn { + display: inline-block; + position: relative; } + .next-split-btn-trigger .next-icon { + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } + .next-split-btn-trigger.next-expand .next-icon { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + .next-split-btn-trigger.next-btn-normal:not(:disabled):not(.disabled) .next-icon { + color: #999999; } + .next-split-btn-trigger.next-small { + padding-left: 4px; + padding-right: 4px; } + .next-split-btn-trigger.next-medium { + padding-left: 8px; + padding-right: 8px; } + +.next-step *, +.next-step *:before, +.next-step *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +.next-step, .next-step:before, .next-step:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +.next-step { + width: 100%; + position: relative; + border: none; } + .next-step-item { + position: relative; + vertical-align: middle; + outline: 0; + height: 100%; } + .next-step-item-body { + outline: 0; } + .next-step-item-node { + -webkit-transition: all .2s ease; + transition: all .2s ease; } + .next-step-item-node.clicked { + -webkit-transform: scale3d(0.8, 0.8, 0.8); + transform: scale3d(0.8, 0.8, 0.8); } + .next-step-horizontal { + overflow: hidden; } + .next-step-horizontal > .next-step-item { + display: inline-block; + text-align: left; } + .next-step-vertical > .next-step-item { + display: block; + text-align: center; } + +.next-step-arrow { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + .next-step-arrow .next-step-item { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + height: 32px; + line-height: 32px; + margin-left: 16px; + margin-right: 4px; } + .next-step-arrow .next-step-item:before { + content: ''; + position: absolute; + left: -16px; + top: 0; + z-index: 1; + border: 16px solid transparent; + border-left-color: transparent; } + .next-step-arrow .next-step-item:after { + content: ''; + position: absolute; + right: -16px; + top: 0; + z-index: 1; + border-top: 16px solid transparent; + border-bottom: 16px solid transparent; + border-left: 16px solid transparent; } + .next-step-arrow .next-step-item .next-step-item-container { + min-width: 100px; + height: 32px; + cursor: pointer; } + .next-step-arrow .next-step-item .next-step-item-container .next-step-item-title { + height: 32px; + line-height: 32px; + font-weight: bold; + font-size: 14px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + text-align: center; } + .next-step-arrow > .next-step-item-wait { + background: #EBECF0; } + .next-step-arrow > .next-step-item-wait .next-step-item-tail-overlay { + background: #000000; } + .next-step-arrow > .next-step-item-wait .next-step-item-tail-underlay { + background: #CCCCCC; } + .next-step-arrow > .next-step-item-wait > .next-step-item-container .next-step-item-progress { + width: 32px; + height: 32px; } + .next-step-arrow > .next-step-item-wait > .next-step-item-container .next-step-item-node { + color: #000000; } + .next-step-arrow > .next-step-item-wait > .next-step-item-container .next-step-item-node-circle { + background: #EBECF0; + border-color: #000000; } + .next-step-arrow > .next-step-item-wait > .next-step-item-container .next-step-item-node-dot { + background: #EBECF0; + border-color: #000000; } + .next-step-arrow > .next-step-item-wait .next-step-item-title { + color: #999999; + word-break: break-word; } + .next-step-arrow > .next-step-item-wait .next-step-item-content { + color: #999999; + font-size: 12px; + word-break: break-word; } + .next-step-arrow > .next-step-item-wait .next-step-item-node-placeholder { + width: 32px; + height: 32px; + position: relative; } + .next-step-arrow > .next-step-item-wait .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-arrow > .next-step-item-wait .next-step-item-node-circle { + display: block; + width: 32px; + height: 32px; + font-size: 12px; + font-weight: normal; + line-height: 30px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-arrow > .next-step-item-wait .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-arrow > .next-step-item-wait .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-step-arrow > .next-step-item-wait .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -16px; + left: 50%; + margin-left: -16px; + display: block; + width: 32px; + height: 32px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + .next-step-arrow > .next-step-item-wait:before { + border: 16px solid #EBECF0; + border-left-color: transparent; } + .next-step-arrow > .next-step-item-wait:after { + border-left-color: #EBECF0; } + .next-step-arrow > .next-step-item-process { + background: #5584FF; } + .next-step-arrow > .next-step-item-process .next-step-item-tail-overlay { + background: #000000; } + .next-step-arrow > .next-step-item-process .next-step-item-tail-underlay { + background: #CCCCCC; } + .next-step-arrow > .next-step-item-process > .next-step-item-container .next-step-item-progress { + width: 32px; + height: 32px; } + .next-step-arrow > .next-step-item-process > .next-step-item-container .next-step-item-node { + color: #000000; } + .next-step-arrow > .next-step-item-process > .next-step-item-container .next-step-item-node-circle { + background: #5584FF; + border-color: #000000; } + .next-step-arrow > .next-step-item-process > .next-step-item-container .next-step-item-node-dot { + background: #5584FF; + border-color: #000000; } + .next-step-arrow > .next-step-item-process .next-step-item-title { + color: #FFFFFF; + word-break: break-word; } + .next-step-arrow > .next-step-item-process .next-step-item-content { + color: #FFFFFF; + font-size: 12px; + word-break: break-word; } + .next-step-arrow > .next-step-item-process .next-step-item-node-placeholder { + width: 32px; + height: 32px; + position: relative; } + .next-step-arrow > .next-step-item-process .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-arrow > .next-step-item-process .next-step-item-node-circle { + display: block; + width: 32px; + height: 32px; + font-size: 12px; + font-weight: normal; + line-height: 30px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-arrow > .next-step-item-process .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-arrow > .next-step-item-process .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-step-arrow > .next-step-item-process .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -16px; + left: 50%; + margin-left: -16px; + display: block; + width: 32px; + height: 32px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + .next-step-arrow > .next-step-item-process:before { + border: 16px solid #5584FF; + border-left-color: transparent; } + .next-step-arrow > .next-step-item-process:after { + border-left-color: #5584FF; } + .next-step-arrow > .next-step-item-finish { + background: #DEE8FF; } + .next-step-arrow > .next-step-item-finish .next-step-item-tail-overlay { + background: #000000; } + .next-step-arrow > .next-step-item-finish .next-step-item-tail-underlay { + background: #CCCCCC; } + .next-step-arrow > .next-step-item-finish > .next-step-item-container .next-step-item-progress { + width: 32px; + height: 32px; } + .next-step-arrow > .next-step-item-finish > .next-step-item-container .next-step-item-node { + color: #000000; } + .next-step-arrow > .next-step-item-finish > .next-step-item-container .next-step-item-node-circle { + background: #DEE8FF; + border-color: #000000; } + .next-step-arrow > .next-step-item-finish > .next-step-item-container .next-step-item-node-dot { + background: #DEE8FF; + border-color: #000000; } + .next-step-arrow > .next-step-item-finish .next-step-item-title { + color: #5584FF; + word-break: break-word; } + .next-step-arrow > .next-step-item-finish .next-step-item-content { + color: #5584FF; + font-size: 12px; + word-break: break-word; } + .next-step-arrow > .next-step-item-finish .next-step-item-node-placeholder { + width: 32px; + height: 32px; + position: relative; } + .next-step-arrow > .next-step-item-finish .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-arrow > .next-step-item-finish .next-step-item-node-circle { + display: block; + width: 32px; + height: 32px; + font-size: 12px; + font-weight: normal; + line-height: 30px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-arrow > .next-step-item-finish .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-arrow > .next-step-item-finish .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-step-arrow > .next-step-item-finish .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -16px; + left: 50%; + margin-left: -16px; + display: block; + width: 32px; + height: 32px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + .next-step-arrow > .next-step-item-finish:before { + border: 16px solid #DEE8FF; + border-left-color: transparent; } + .next-step-arrow > .next-step-item-finish:after { + border-left-color: #DEE8FF; } + .next-step-arrow .next-step-item-disabled { + cursor: not-allowed; + background: #F7F8FA; } + .next-step-arrow .next-step-item-disabled .next-step-item-tail-overlay { + background: #000000; } + .next-step-arrow .next-step-item-disabled .next-step-item-tail-underlay { + background: #CCCCCC; } + .next-step-arrow .next-step-item-disabled > .next-step-item-container .next-step-item-progress { + width: 32px; + height: 32px; } + .next-step-arrow .next-step-item-disabled > .next-step-item-container .next-step-item-node { + color: #000000; } + .next-step-arrow .next-step-item-disabled > .next-step-item-container .next-step-item-node-circle { + background: #F7F8FA; + border-color: #000000; } + .next-step-arrow .next-step-item-disabled > .next-step-item-container .next-step-item-node-dot { + background: #F7F8FA; + border-color: #000000; } + .next-step-arrow .next-step-item-disabled .next-step-item-title { + color: #CCCCCC; + word-break: break-word; } + .next-step-arrow .next-step-item-disabled .next-step-item-content { + color: #CCCCCC; + font-size: 12px; + word-break: break-word; } + .next-step-arrow .next-step-item-disabled .next-step-item-node-placeholder { + width: 32px; + height: 32px; + position: relative; } + .next-step-arrow .next-step-item-disabled .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-arrow .next-step-item-disabled .next-step-item-node-circle { + display: block; + width: 32px; + height: 32px; + font-size: 12px; + font-weight: normal; + line-height: 30px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-arrow .next-step-item-disabled .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-arrow .next-step-item-disabled .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-step-arrow .next-step-item-disabled .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -16px; + left: 50%; + margin-left: -16px; + display: block; + width: 32px; + height: 32px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + .next-step-arrow .next-step-item-disabled:before { + border: 16px solid #F7F8FA; + border-left-color: transparent; } + .next-step-arrow .next-step-item-disabled:after { + border-left-color: #F7F8FA; } + .next-step-arrow .next-step-item-disabled .next-step-item-container { + cursor: not-allowed; } + .next-step-arrow .next-step-item-read-only { + cursor: default; } + .next-step-arrow .next-step-item-read-only .next-step-item-container { + cursor: default; } + .next-step-arrow .next-step-item-first { + margin-left: 0; } + .next-step-arrow .next-step-item-first:before { + border: 16px solid transparent; } + .next-step-arrow .next-step-item-last { + margin-right: 0; } + .next-step-arrow .next-step-item-last:after { + border: 16px solid transparent; } + +.next-step-circle .next-step-item-container { + display: inline-block; + vertical-align: middle; + position: relative; + padding: 0 8px; } + .next-step-circle .next-step-item-container .next-step-item-progress .next-progress-circle-text { + color: #5584FF; + font-size: 12px; } + .next-step-circle .next-step-item-container .next-step-item-progress .next-progress-circle-underlay { + stroke: #A0A2AD; + stroke-width: 4px; } + .next-step-circle .next-step-item-container .next-step-item-progress .next-progress-circle-overlay-normal { + stroke: #5584FF; + stroke-width: 4px; } + .next-step-circle .next-step-item-container .next-step-item-node-placeholder { + display: inline-block; } + +.next-step-circle > .next-step-item-wait .next-step-item-tail-overlay { + background: #C4C6CF; } + +.next-step-circle > .next-step-item-wait .next-step-item-tail-underlay { + background: #E6E7EB; } + +.next-step-circle > .next-step-item-wait > .next-step-item-container .next-step-item-progress { + width: 32px; + height: 32px; } + +.next-step-circle > .next-step-item-wait > .next-step-item-container .next-step-item-node { + color: #666666; } + +.next-step-circle > .next-step-item-wait > .next-step-item-container .next-step-item-node-circle { + background: #FFFFFF; + border-color: #A0A2AD; } + +.next-step-circle > .next-step-item-wait > .next-step-item-container .next-step-item-node-dot { + background: #FFFFFF; + border-color: #A0A2AD; } + +.next-step-circle > .next-step-item-wait .next-step-item-title { + color: #666666; + word-break: break-word; } + +.next-step-circle > .next-step-item-wait .next-step-item-content { + color: #666666; + font-size: 12px; + word-break: break-word; } + +.next-step-circle > .next-step-item-wait .next-step-item-node-placeholder { + width: 32px; + height: 32px; + position: relative; } + +.next-step-circle > .next-step-item-wait .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-circle > .next-step-item-wait .next-step-item-node-circle { + display: block; + width: 32px; + height: 32px; + font-size: 12px; + font-weight: normal; + line-height: 30px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-circle > .next-step-item-wait .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-circle > .next-step-item-wait .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-circle > .next-step-item-wait .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -16px; + left: 50%; + margin-left: -16px; + display: block; + width: 32px; + height: 32px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + +.next-step-circle > .next-step-item-process .next-step-item-tail-overlay { + background: #C4C6CF; } + +.next-step-circle > .next-step-item-process .next-step-item-tail-underlay { + background: #E6E7EB; } + +.next-step-circle > .next-step-item-process > .next-step-item-container .next-step-item-progress { + width: 32px; + height: 32px; } + +.next-step-circle > .next-step-item-process > .next-step-item-container .next-step-item-node { + color: #FFFFFF; } + +.next-step-circle > .next-step-item-process > .next-step-item-container .next-step-item-node-circle { + background: #5584FF; + border-color: #5584FF; } + +.next-step-circle > .next-step-item-process > .next-step-item-container .next-step-item-node-dot { + background: #5584FF; + border-color: #5584FF; } + +.next-step-circle > .next-step-item-process .next-step-item-title { + color: #333333; + word-break: break-word; } + +.next-step-circle > .next-step-item-process .next-step-item-content { + color: #333333; + font-size: 12px; + word-break: break-word; } + +.next-step-circle > .next-step-item-process .next-step-item-node-placeholder { + width: 32px; + height: 32px; + position: relative; } + +.next-step-circle > .next-step-item-process .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-circle > .next-step-item-process .next-step-item-node-circle { + display: block; + width: 32px; + height: 32px; + font-size: 12px; + font-weight: normal; + line-height: 30px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-circle > .next-step-item-process .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-circle > .next-step-item-process .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-circle > .next-step-item-process .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -16px; + left: 50%; + margin-left: -16px; + display: block; + width: 32px; + height: 32px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + +.next-step-circle > .next-step-item-finish .next-step-item-tail-overlay { + background: #5584FF; } + +.next-step-circle > .next-step-item-finish .next-step-item-tail-underlay { + background: #E6E7EB; } + +.next-step-circle > .next-step-item-finish > .next-step-item-container .next-step-item-progress { + width: 32px; + height: 32px; } + +.next-step-circle > .next-step-item-finish > .next-step-item-container .next-step-item-node { + color: #5584FF; } + +.next-step-circle > .next-step-item-finish > .next-step-item-container .next-step-item-node-circle { + background: #FFFFFF; + border-color: #5584FF; } + +.next-step-circle > .next-step-item-finish > .next-step-item-container .next-step-item-node-dot { + background: #FFFFFF; + border-color: #5584FF; } + +.next-step-circle > .next-step-item-finish .next-step-item-title { + color: #666666; + word-break: break-word; } + +.next-step-circle > .next-step-item-finish .next-step-item-content { + color: #666666; + font-size: 12px; + word-break: break-word; } + +.next-step-circle > .next-step-item-finish .next-step-item-node-placeholder { + width: 32px; + height: 32px; + position: relative; } + +.next-step-circle > .next-step-item-finish .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-circle > .next-step-item-finish .next-step-item-node-circle { + display: block; + width: 32px; + height: 32px; + font-size: 12px; + font-weight: normal; + line-height: 30px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-circle > .next-step-item-finish .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-circle > .next-step-item-finish .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-circle > .next-step-item-finish .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -16px; + left: 50%; + margin-left: -16px; + display: block; + width: 32px; + height: 32px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + +.next-step-circle .next-step-item-disabled .next-step-item-tail-overlay { + background: #E6E7EB; } + +.next-step-circle .next-step-item-disabled .next-step-item-tail-underlay { + background: #E6E7EB; } + +.next-step-circle .next-step-item-disabled > .next-step-item-container .next-step-item-progress { + width: 32px; + height: 32px; } + +.next-step-circle .next-step-item-disabled > .next-step-item-container .next-step-item-node { + color: #CCCCCC; } + +.next-step-circle .next-step-item-disabled > .next-step-item-container .next-step-item-node-circle { + background: #FFFFFF; + border-color: #E6E7EB; } + +.next-step-circle .next-step-item-disabled > .next-step-item-container .next-step-item-node-dot { + background: #FFFFFF; + border-color: #E6E7EB; } + +.next-step-circle .next-step-item-disabled .next-step-item-title { + color: #CCCCCC; + word-break: break-word; } + +.next-step-circle .next-step-item-disabled .next-step-item-content { + color: #CCCCCC; + font-size: 12px; + word-break: break-word; } + +.next-step-circle .next-step-item-disabled .next-step-item-node-placeholder { + width: 32px; + height: 32px; + position: relative; } + +.next-step-circle .next-step-item-disabled .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-circle .next-step-item-disabled .next-step-item-node-circle { + display: block; + width: 32px; + height: 32px; + font-size: 12px; + font-weight: normal; + line-height: 30px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-circle .next-step-item-disabled .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-circle .next-step-item-disabled .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-circle .next-step-item-disabled .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -16px; + left: 50%; + margin-left: -16px; + display: block; + width: 32px; + height: 32px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + +.next-step-circle .next-step-item-disabled .next-step-item-node-placeholder, +.next-step-circle .next-step-item-disabled .next-step-item-node { + cursor: not-allowed; } + +.next-step-circle .next-step-item-read-only .next-step-item-node-placeholder, +.next-step-circle .next-step-item-read-only .next-step-item-node { + cursor: default; } + +.next-step-circle .next-step-item-last .next-step-item-tail { + display: none; } + +.next-step-circle.next-step-horizontal { + text-align: center; + white-space: nowrap; } + .next-step-circle.next-step-horizontal > .next-step-item .next-step-item-title { + white-space: normal; } + .next-step-circle.next-step-horizontal > .next-step-item .next-step-item-content { + white-space: normal; } + .next-step-circle.next-step-horizontal > .next-step-item-wait .next-step-item-tail { + display: inline-block; + clear: both; + width: calc(100% - 48px); + vertical-align: middle; } + .next-step-circle.next-step-horizontal > .next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay { + display: block; + height: 1px; + position: relative; } + .next-step-circle.next-step-horizontal > .next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 1px; + -webkit-transition: all .4s ease; + transition: all .4s ease; + width: 100%; } + .next-step-circle.next-step-horizontal > .next-step-item-wait > .next-step-item-node { + padding: 0 8px; + width: 48px; + height: 32px; } + .next-step-circle.next-step-horizontal > .next-step-item-wait > .next-step-item-body { + width: 100px; + left: -26px; + text-align: center; + position: absolute; } + .next-step-circle.next-step-horizontal > .next-step-item-wait > .next-step-item-body > .next-step-item-title { + font-size: 14px; + line-height: 18px; + margin-top: 8px; + font-weight: bold; } + .next-step-circle.next-step-horizontal > .next-step-item-wait > .next-step-item-body > .next-step-item-content { + margin-top: 4px; } + .next-step-circle.next-step-horizontal > .next-step-item-process .next-step-item-tail { + display: inline-block; + clear: both; + width: calc(100% - 48px); + vertical-align: middle; } + .next-step-circle.next-step-horizontal > .next-step-item-process .next-step-item-tail .next-step-item-tail-underlay { + display: block; + height: 1px; + position: relative; } + .next-step-circle.next-step-horizontal > .next-step-item-process .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 1px; + -webkit-transition: all .4s ease; + transition: all .4s ease; + width: 100%; } + .next-step-circle.next-step-horizontal > .next-step-item-process > .next-step-item-node { + padding: 0 8px; + width: 48px; + height: 32px; } + .next-step-circle.next-step-horizontal > .next-step-item-process > .next-step-item-body { + width: 100px; + left: -26px; + text-align: center; + position: absolute; } + .next-step-circle.next-step-horizontal > .next-step-item-process > .next-step-item-body > .next-step-item-title { + font-size: 14px; + line-height: 18px; + margin-top: 8px; + font-weight: bold; } + .next-step-circle.next-step-horizontal > .next-step-item-process > .next-step-item-body > .next-step-item-content { + margin-top: 4px; } + .next-step-circle.next-step-horizontal > .next-step-item-finish .next-step-item-tail { + display: inline-block; + clear: both; + width: calc(100% - 48px); + vertical-align: middle; } + .next-step-circle.next-step-horizontal > .next-step-item-finish .next-step-item-tail .next-step-item-tail-underlay { + display: block; + height: 1px; + position: relative; } + .next-step-circle.next-step-horizontal > .next-step-item-finish .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 1px; + -webkit-transition: all .4s ease; + transition: all .4s ease; + width: 100%; } + .next-step-circle.next-step-horizontal > .next-step-item-finish > .next-step-item-node { + padding: 0 8px; + width: 48px; + height: 32px; } + .next-step-circle.next-step-horizontal > .next-step-item-finish > .next-step-item-body { + width: 100px; + left: -26px; + text-align: center; + position: absolute; } + .next-step-circle.next-step-horizontal > .next-step-item-finish > .next-step-item-body > .next-step-item-title { + font-size: 14px; + line-height: 18px; + margin-top: 8px; + font-weight: bold; } + .next-step-circle.next-step-horizontal > .next-step-item-finish > .next-step-item-body > .next-step-item-content { + margin-top: 4px; } + .next-step-circle.next-step-horizontal > .next-step-item-disabled .next-step-item-tail { + display: inline-block; + clear: both; + width: calc(100% - 48px); + vertical-align: middle; } + .next-step-circle.next-step-horizontal > .next-step-item-disabled .next-step-item-tail .next-step-item-tail-underlay { + display: block; + height: 1px; + position: relative; } + .next-step-circle.next-step-horizontal > .next-step-item-disabled .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 1px; + -webkit-transition: all .4s ease; + transition: all .4s ease; + width: 100%; } + .next-step-circle.next-step-horizontal > .next-step-item-disabled > .next-step-item-node { + padding: 0 8px; + width: 48px; + height: 32px; } + .next-step-circle.next-step-horizontal > .next-step-item-disabled > .next-step-item-body { + width: 100px; + left: -26px; + text-align: center; + position: absolute; } + .next-step-circle.next-step-horizontal > .next-step-item-disabled > .next-step-item-body > .next-step-item-title { + font-size: 14px; + line-height: 18px; + margin-top: 8px; + font-weight: bold; } + .next-step-circle.next-step-horizontal > .next-step-item-disabled > .next-step-item-body > .next-step-item-content { + margin-top: 4px; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item { + vertical-align: unset; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-wait .next-step-item:last-child .next-step-item-tail { + display: none; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-wait .next-step-item-body { + position: relative; + display: inline-block; + top: 0; + left: 0; + max-width: 100px; + overflow: hidden; + vertical-align: top; + text-align: left; } + .next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-wait .next-step-item-body .next-step-item-title { + display: inline-block; + padding-right: 8px; + margin-top: 9px; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-wait .next-step-item-tail { + width: calc(100% - 148px); + position: absolute; + right: 0; + margin-top: -1px; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-process .next-step-item:last-child .next-step-item-tail { + display: none; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-process .next-step-item-body { + position: relative; + display: inline-block; + top: 0; + left: 0; + max-width: 100px; + overflow: hidden; + vertical-align: top; + text-align: left; } + .next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-process .next-step-item-body .next-step-item-title { + display: inline-block; + padding-right: 8px; + margin-top: 9px; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-process .next-step-item-tail { + width: calc(100% - 148px); + position: absolute; + right: 0; + margin-top: -1px; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-finish .next-step-item:last-child .next-step-item-tail { + display: none; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-finish .next-step-item-body { + position: relative; + display: inline-block; + top: 0; + left: 0; + max-width: 100px; + overflow: hidden; + vertical-align: top; + text-align: left; } + .next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-finish .next-step-item-body .next-step-item-title { + display: inline-block; + padding-right: 8px; + margin-top: 9px; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-finish .next-step-item-tail { + width: calc(100% - 148px); + position: absolute; + right: 0; + margin-top: -1px; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-disabled .next-step-item:last-child .next-step-item-tail { + display: none; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-disabled .next-step-item-body { + position: relative; + display: inline-block; + top: 0; + left: 0; + max-width: 100px; + overflow: hidden; + vertical-align: top; + text-align: left; } + .next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-disabled .next-step-item-body .next-step-item-title { + display: inline-block; + padding-right: 8px; + margin-top: 9px; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-disabled .next-step-item-tail { + width: calc(100% - 148px); + position: absolute; + right: 0; + margin-top: -1px; } + +.next-step-circle.next-step-vertical { + font-size: 0; + display: table-cell; + vertical-align: middle; + position: relative; } + .next-step-circle.next-step-vertical .next-step-item-container { + padding: 0; } + .next-step-circle.next-step-vertical > .next-step-item:last-child .next-step-item-tail { + display: block; + visibility: hidden; } + .next-step-circle.next-step-vertical > .next-step-item-wait .next-step-item-tail { + width: 1px; + height: 0; + margin: 8px auto; } + .next-step-circle.next-step-vertical > .next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay { + height: 100%; + width: 1px; + position: relative; } + .next-step-circle.next-step-vertical > .next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 100%; + width: 1px; } + .next-step-circle.next-step-vertical > .next-step-item-wait > .next-step-item-node { + padding: 8px 0; + width: 32px; + height: 48px; } + .next-step-circle.next-step-vertical > .next-step-item-wait > .next-step-item-body { + position: absolute; + top: 0; + left: 16px; + margin-left: 8px; } + .next-step-circle.next-step-vertical > .next-step-item-wait > .next-step-item-body > .next-step-item-title { + margin-top: 8px; + text-align: left; + font-weight: bold; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-circle.next-step-vertical > .next-step-item-wait > .next-step-item-body > .next-step-item-content { + margin-top: 4px; + min-height: 8px; + text-align: left; + font-size: 12px; + line-height: 16px; } + .next-step-circle.next-step-vertical > .next-step-item-process .next-step-item-tail { + width: 1px; + height: 0; + margin: 8px auto; } + .next-step-circle.next-step-vertical > .next-step-item-process .next-step-item-tail .next-step-item-tail-underlay { + height: 100%; + width: 1px; + position: relative; } + .next-step-circle.next-step-vertical > .next-step-item-process .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 100%; + width: 1px; } + .next-step-circle.next-step-vertical > .next-step-item-process > .next-step-item-node { + padding: 8px 0; + width: 32px; + height: 48px; } + .next-step-circle.next-step-vertical > .next-step-item-process > .next-step-item-body { + position: absolute; + top: 0; + left: 16px; + margin-left: 8px; } + .next-step-circle.next-step-vertical > .next-step-item-process > .next-step-item-body > .next-step-item-title { + margin-top: 8px; + text-align: left; + font-weight: bold; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-circle.next-step-vertical > .next-step-item-process > .next-step-item-body > .next-step-item-content { + margin-top: 4px; + min-height: 8px; + text-align: left; + font-size: 12px; + line-height: 16px; } + .next-step-circle.next-step-vertical > .next-step-item-finish .next-step-item-tail { + width: 1px; + height: 0; + margin: 8px auto; } + .next-step-circle.next-step-vertical > .next-step-item-finish .next-step-item-tail .next-step-item-tail-underlay { + height: 100%; + width: 1px; + position: relative; } + .next-step-circle.next-step-vertical > .next-step-item-finish .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 100%; + width: 1px; } + .next-step-circle.next-step-vertical > .next-step-item-finish > .next-step-item-node { + padding: 8px 0; + width: 32px; + height: 48px; } + .next-step-circle.next-step-vertical > .next-step-item-finish > .next-step-item-body { + position: absolute; + top: 0; + left: 16px; + margin-left: 8px; } + .next-step-circle.next-step-vertical > .next-step-item-finish > .next-step-item-body > .next-step-item-title { + margin-top: 8px; + text-align: left; + font-weight: bold; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-circle.next-step-vertical > .next-step-item-finish > .next-step-item-body > .next-step-item-content { + margin-top: 4px; + min-height: 8px; + text-align: left; + font-size: 12px; + line-height: 16px; } + .next-step-circle.next-step-vertical > .next-step-item-disabled .next-step-item-tail { + width: 1px; + height: 0; + margin: 8px auto; } + .next-step-circle.next-step-vertical > .next-step-item-disabled .next-step-item-tail .next-step-item-tail-underlay { + height: 100%; + width: 1px; + position: relative; } + .next-step-circle.next-step-vertical > .next-step-item-disabled .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 100%; + width: 1px; } + .next-step-circle.next-step-vertical > .next-step-item-disabled > .next-step-item-node { + padding: 8px 0; + width: 32px; + height: 48px; } + .next-step-circle.next-step-vertical > .next-step-item-disabled > .next-step-item-body { + position: absolute; + top: 0; + left: 16px; + margin-left: 8px; } + .next-step-circle.next-step-vertical > .next-step-item-disabled > .next-step-item-body > .next-step-item-title { + margin-top: 8px; + text-align: left; + font-weight: bold; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-circle.next-step-vertical > .next-step-item-disabled > .next-step-item-body > .next-step-item-content { + margin-top: 4px; + min-height: 8px; + text-align: left; + font-size: 12px; + line-height: 16px; } + +.next-step-dot .next-step-item-container { + display: inline-block; + vertical-align: middle; + position: relative; + padding: 0 8px; + font-size: 0; } + .next-step-dot .next-step-item-container .next-step-item-node-placeholder { + display: inline-block; } + .next-step-dot .next-step-item-container .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-dot .next-step-item-container .next-step-item-node .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-dot > .next-step-item-wait .next-step-item-tail-overlay { + background: #C4C6CF; } + +.next-step-dot > .next-step-item-wait .next-step-item-tail-underlay { + background: #E6E7EB; } + +.next-step-dot > .next-step-item-wait > .next-step-item-container .next-step-item-progress { + width: 12px; + height: 12px; } + +.next-step-dot > .next-step-item-wait > .next-step-item-container .next-step-item-node { + color: #999999; } + +.next-step-dot > .next-step-item-wait > .next-step-item-container .next-step-item-node-circle { + background: #FFFFFF; + border-color: #A0A2AD; } + +.next-step-dot > .next-step-item-wait > .next-step-item-container .next-step-item-node-dot { + background: #FFFFFF; + border-color: #A0A2AD; } + +.next-step-dot > .next-step-item-wait .next-step-item-title { + color: #666666; + word-break: break-word; } + +.next-step-dot > .next-step-item-wait .next-step-item-content { + color: #666666; + font-size: 12px; + word-break: break-word; } + +.next-step-dot > .next-step-item-wait .next-step-item-node-placeholder { + width: 12px; + height: 12px; + position: relative; } + +.next-step-dot > .next-step-item-wait .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-dot > .next-step-item-wait .next-step-item-node-circle { + display: block; + width: 12px; + height: 12px; + font-size: 12px; + font-weight: normal; + line-height: 10px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-dot > .next-step-item-wait .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-dot > .next-step-item-wait .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-dot > .next-step-item-wait .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -6px; + left: 50%; + margin-left: -6px; + display: block; + width: 12px; + height: 12px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + +.next-step-dot > .next-step-item-process .next-step-item-tail-overlay { + background: #C4C6CF; } + +.next-step-dot > .next-step-item-process .next-step-item-tail-underlay { + background: #E6E7EB; } + +.next-step-dot > .next-step-item-process > .next-step-item-container .next-step-item-progress { + width: 12px; + height: 12px; } + +.next-step-dot > .next-step-item-process > .next-step-item-container .next-step-item-node { + color: #5584FF; } + +.next-step-dot > .next-step-item-process > .next-step-item-container .next-step-item-node-circle { + background: #5584FF; + border-color: #5584FF; } + +.next-step-dot > .next-step-item-process > .next-step-item-container .next-step-item-node-dot { + background: #5584FF; + border-color: #5584FF; } + +.next-step-dot > .next-step-item-process .next-step-item-title { + color: #333333; + word-break: break-word; } + +.next-step-dot > .next-step-item-process .next-step-item-content { + color: #333333; + font-size: 12px; + word-break: break-word; } + +.next-step-dot > .next-step-item-process .next-step-item-node-placeholder { + width: 12px; + height: 12px; + position: relative; } + +.next-step-dot > .next-step-item-process .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-dot > .next-step-item-process .next-step-item-node-circle { + display: block; + width: 12px; + height: 12px; + font-size: 12px; + font-weight: normal; + line-height: 10px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-dot > .next-step-item-process .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-dot > .next-step-item-process .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-dot > .next-step-item-process .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -6px; + left: 50%; + margin-left: -6px; + display: block; + width: 12px; + height: 12px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + +.next-step-dot > .next-step-item-finish .next-step-item-tail-overlay { + background: #5584FF; } + +.next-step-dot > .next-step-item-finish .next-step-item-tail-underlay { + background: #E6E7EB; } + +.next-step-dot > .next-step-item-finish > .next-step-item-container .next-step-item-progress { + width: 12px; + height: 12px; } + +.next-step-dot > .next-step-item-finish > .next-step-item-container .next-step-item-node { + color: #5584FF; } + +.next-step-dot > .next-step-item-finish > .next-step-item-container .next-step-item-node-circle { + background: #FFFFFF; + border-color: #5584FF; } + +.next-step-dot > .next-step-item-finish > .next-step-item-container .next-step-item-node-dot { + background: #FFFFFF; + border-color: #5584FF; } + +.next-step-dot > .next-step-item-finish .next-step-item-title { + color: #666666; + word-break: break-word; } + +.next-step-dot > .next-step-item-finish .next-step-item-content { + color: #666666; + font-size: 12px; + word-break: break-word; } + +.next-step-dot > .next-step-item-finish .next-step-item-node-placeholder { + width: 12px; + height: 12px; + position: relative; } + +.next-step-dot > .next-step-item-finish .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-dot > .next-step-item-finish .next-step-item-node-circle { + display: block; + width: 12px; + height: 12px; + font-size: 12px; + font-weight: normal; + line-height: 10px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-dot > .next-step-item-finish .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-dot > .next-step-item-finish .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-dot > .next-step-item-finish .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -6px; + left: 50%; + margin-left: -6px; + display: block; + width: 12px; + height: 12px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + +.next-step-dot .next-step-item-disabled .next-step-item-tail-overlay { + background: #E6E7EB; } + +.next-step-dot .next-step-item-disabled .next-step-item-tail-underlay { + background: #E6E7EB; } + +.next-step-dot .next-step-item-disabled > .next-step-item-container .next-step-item-progress { + width: 12px; + height: 12px; } + +.next-step-dot .next-step-item-disabled > .next-step-item-container .next-step-item-node { + color: #E6E7EB; } + +.next-step-dot .next-step-item-disabled > .next-step-item-container .next-step-item-node-circle { + background: #FFFFFF; + border-color: #DCDEE3; } + +.next-step-dot .next-step-item-disabled > .next-step-item-container .next-step-item-node-dot { + background: #FFFFFF; + border-color: #DCDEE3; } + +.next-step-dot .next-step-item-disabled .next-step-item-title { + color: #CCCCCC; + word-break: break-word; } + +.next-step-dot .next-step-item-disabled .next-step-item-content { + color: #CCCCCC; + font-size: 12px; + word-break: break-word; } + +.next-step-dot .next-step-item-disabled .next-step-item-node-placeholder { + width: 12px; + height: 12px; + position: relative; } + +.next-step-dot .next-step-item-disabled .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-dot .next-step-item-disabled .next-step-item-node-circle { + display: block; + width: 12px; + height: 12px; + font-size: 12px; + font-weight: normal; + line-height: 10px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-dot .next-step-item-disabled .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-dot .next-step-item-disabled .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-dot .next-step-item-disabled .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -6px; + left: 50%; + margin-left: -6px; + display: block; + width: 12px; + height: 12px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + +.next-step-dot .next-step-item-disabled .next-step-item-node-placeholder, +.next-step-dot .next-step-item-disabled .next-step-item-node { + cursor: not-allowed; } + +.next-step-dot .next-step-item-read-only .next-step-item-node-placeholder, +.next-step-dot .next-step-item-read-only .next-step-item-node { + cursor: default; } + +.next-step-dot .next-step-item-last .next-step-item-tail { + display: none; } + +.next-step-dot.next-step-horizontal { + text-align: center; + white-space: nowrap; } + .next-step-dot.next-step-horizontal > .next-step-item .next-step-item-title { + white-space: normal; } + .next-step-dot.next-step-horizontal > .next-step-item .next-step-item-content { + white-space: normal; } + .next-step-dot.next-step-horizontal .next-step-item-node .next-icon { + vertical-align: middle; } + .next-step-dot.next-step-horizontal > .next-step-item-wait .next-step-item-tail { + display: inline-block; + clear: both; + width: calc(100% - 28px); + vertical-align: middle; } + .next-step-dot.next-step-horizontal > .next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay { + display: block; + height: 1px; + position: relative; } + .next-step-dot.next-step-horizontal > .next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 1px; + -webkit-transition: all .4s ease; + transition: all .4s ease; + width: 100%; } + .next-step-dot.next-step-horizontal > .next-step-item-wait > .next-step-item-node { + padding: 0 8px; + width: 28px; + height: 12px; } + .next-step-dot.next-step-horizontal > .next-step-item-wait > .next-step-item-body { + width: 100px; + left: -36px; + text-align: center; + position: absolute; } + .next-step-dot.next-step-horizontal > .next-step-item-wait > .next-step-item-body > .next-step-item-title { + font-size: 12px; + line-height: 16px; + margin-top: 8px; + font-weight: bold; } + .next-step-dot.next-step-horizontal > .next-step-item-wait > .next-step-item-body > .next-step-item-content { + margin-top: 4px; } + .next-step-dot.next-step-horizontal > .next-step-item-process .next-step-item-tail { + display: inline-block; + clear: both; + width: calc(100% - 28px); + vertical-align: middle; } + .next-step-dot.next-step-horizontal > .next-step-item-process .next-step-item-tail .next-step-item-tail-underlay { + display: block; + height: 1px; + position: relative; } + .next-step-dot.next-step-horizontal > .next-step-item-process .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 1px; + -webkit-transition: all .4s ease; + transition: all .4s ease; + width: 100%; } + .next-step-dot.next-step-horizontal > .next-step-item-process > .next-step-item-node { + padding: 0 8px; + width: 28px; + height: 12px; } + .next-step-dot.next-step-horizontal > .next-step-item-process > .next-step-item-body { + width: 100px; + left: -36px; + text-align: center; + position: absolute; } + .next-step-dot.next-step-horizontal > .next-step-item-process > .next-step-item-body > .next-step-item-title { + font-size: 12px; + line-height: 16px; + margin-top: 8px; + font-weight: bold; } + .next-step-dot.next-step-horizontal > .next-step-item-process > .next-step-item-body > .next-step-item-content { + margin-top: 4px; } + .next-step-dot.next-step-horizontal > .next-step-item-finish .next-step-item-tail { + display: inline-block; + clear: both; + width: calc(100% - 28px); + vertical-align: middle; } + .next-step-dot.next-step-horizontal > .next-step-item-finish .next-step-item-tail .next-step-item-tail-underlay { + display: block; + height: 1px; + position: relative; } + .next-step-dot.next-step-horizontal > .next-step-item-finish .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 1px; + -webkit-transition: all .4s ease; + transition: all .4s ease; + width: 100%; } + .next-step-dot.next-step-horizontal > .next-step-item-finish > .next-step-item-node { + padding: 0 8px; + width: 28px; + height: 12px; } + .next-step-dot.next-step-horizontal > .next-step-item-finish > .next-step-item-body { + width: 100px; + left: -36px; + text-align: center; + position: absolute; } + .next-step-dot.next-step-horizontal > .next-step-item-finish > .next-step-item-body > .next-step-item-title { + font-size: 12px; + line-height: 16px; + margin-top: 8px; + font-weight: bold; } + .next-step-dot.next-step-horizontal > .next-step-item-finish > .next-step-item-body > .next-step-item-content { + margin-top: 4px; } + .next-step-dot.next-step-horizontal > .next-step-item-disabled .next-step-item-tail { + display: inline-block; + clear: both; + width: calc(100% - 28px); + vertical-align: middle; } + .next-step-dot.next-step-horizontal > .next-step-item-disabled .next-step-item-tail .next-step-item-tail-underlay { + display: block; + height: 1px; + position: relative; } + .next-step-dot.next-step-horizontal > .next-step-item-disabled .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 1px; + -webkit-transition: all .4s ease; + transition: all .4s ease; + width: 100%; } + .next-step-dot.next-step-horizontal > .next-step-item-disabled > .next-step-item-node { + padding: 0 8px; + width: 28px; + height: 12px; } + .next-step-dot.next-step-horizontal > .next-step-item-disabled > .next-step-item-body { + width: 100px; + left: -36px; + text-align: center; + position: absolute; } + .next-step-dot.next-step-horizontal > .next-step-item-disabled > .next-step-item-body > .next-step-item-title { + font-size: 12px; + line-height: 16px; + margin-top: 8px; + font-weight: bold; } + .next-step-dot.next-step-horizontal > .next-step-item-disabled > .next-step-item-body > .next-step-item-content { + margin-top: 4px; } + +.next-step-dot.next-step-vertical { + padding: 0 0 0 4px; + font-size: 0; + display: table-cell; + position: relative; } + .next-step-dot.next-step-vertical .next-step-item-container { + padding: 0; } + .next-step-dot.next-step-vertical > .next-step-item:last-child .next-step-item-tail { + display: block; + visibility: hidden; } + .next-step-dot.next-step-vertical > .next-step-item-wait .next-step-item-tail { + width: 1px; + height: 0; + margin: 8px auto; } + .next-step-dot.next-step-vertical > .next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay { + height: 100%; + width: 1px; + position: relative; } + .next-step-dot.next-step-vertical > .next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 100%; + width: 1px; } + .next-step-dot.next-step-vertical > .next-step-item-wait > .next-step-item-node { + padding: 8px 0; + width: 12px; + height: 28px; } + .next-step-dot.next-step-vertical > .next-step-item-wait > .next-step-item-body { + position: absolute; + top: 0; + left: 6px; + margin-left: 8px; } + .next-step-dot.next-step-vertical > .next-step-item-wait > .next-step-item-body > .next-step-item-title { + margin-top: 0; + font-weight: bold; + text-align: left; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-dot.next-step-vertical > .next-step-item-wait > .next-step-item-body > .next-step-item-content { + margin-top: 8px; + min-height: 8px; + text-align: left; + font-size: 12px; + line-height: 16px; } + .next-step-dot.next-step-vertical > .next-step-item-process .next-step-item-tail { + width: 1px; + height: 0; + margin: 8px auto; } + .next-step-dot.next-step-vertical > .next-step-item-process .next-step-item-tail .next-step-item-tail-underlay { + height: 100%; + width: 1px; + position: relative; } + .next-step-dot.next-step-vertical > .next-step-item-process .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 100%; + width: 1px; } + .next-step-dot.next-step-vertical > .next-step-item-process > .next-step-item-node { + padding: 8px 0; + width: 12px; + height: 28px; } + .next-step-dot.next-step-vertical > .next-step-item-process > .next-step-item-body { + position: absolute; + top: 0; + left: 6px; + margin-left: 8px; } + .next-step-dot.next-step-vertical > .next-step-item-process > .next-step-item-body > .next-step-item-title { + margin-top: 0; + font-weight: bold; + text-align: left; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-dot.next-step-vertical > .next-step-item-process > .next-step-item-body > .next-step-item-content { + margin-top: 8px; + min-height: 8px; + text-align: left; + font-size: 12px; + line-height: 16px; } + .next-step-dot.next-step-vertical > .next-step-item-finish .next-step-item-tail { + width: 1px; + height: 0; + margin: 8px auto; } + .next-step-dot.next-step-vertical > .next-step-item-finish .next-step-item-tail .next-step-item-tail-underlay { + height: 100%; + width: 1px; + position: relative; } + .next-step-dot.next-step-vertical > .next-step-item-finish .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 100%; + width: 1px; } + .next-step-dot.next-step-vertical > .next-step-item-finish > .next-step-item-node { + padding: 8px 0; + width: 12px; + height: 28px; } + .next-step-dot.next-step-vertical > .next-step-item-finish > .next-step-item-body { + position: absolute; + top: 0; + left: 6px; + margin-left: 8px; } + .next-step-dot.next-step-vertical > .next-step-item-finish > .next-step-item-body > .next-step-item-title { + margin-top: 0; + font-weight: bold; + text-align: left; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-dot.next-step-vertical > .next-step-item-finish > .next-step-item-body > .next-step-item-content { + margin-top: 8px; + min-height: 8px; + text-align: left; + font-size: 12px; + line-height: 16px; } + .next-step-dot.next-step-vertical > .next-step-item-disabled .next-step-item-tail { + width: 1px; + height: 0; + margin: 8px auto; } + .next-step-dot.next-step-vertical > .next-step-item-disabled .next-step-item-tail .next-step-item-tail-underlay { + height: 100%; + width: 1px; + position: relative; } + .next-step-dot.next-step-vertical > .next-step-item-disabled .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 100%; + width: 1px; } + .next-step-dot.next-step-vertical > .next-step-item-disabled > .next-step-item-node { + padding: 8px 0; + width: 12px; + height: 28px; } + .next-step-dot.next-step-vertical > .next-step-item-disabled > .next-step-item-body { + position: absolute; + top: 0; + left: 6px; + margin-left: 8px; } + .next-step-dot.next-step-vertical > .next-step-item-disabled > .next-step-item-body > .next-step-item-title { + margin-top: 0; + font-weight: bold; + text-align: left; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-dot.next-step-vertical > .next-step-item-disabled > .next-step-item-body > .next-step-item-content { + margin-top: 8px; + min-height: 8px; + text-align: left; + font-size: 12px; + line-height: 16px; } + +.next-step-horizontal[dir="rtl"] > .next-step-item { + text-align: right; } + +.next-step-arrow[dir="rtl"] .next-step-item { + height: 32px; + line-height: 32px; + margin-left: 4px; + margin-right: 16px; } + .next-step-arrow[dir="rtl"] .next-step-item:before { + right: -16px; + left: auto; + border: 16px solid transparent; + border-right-color: transparent; } + .next-step-arrow[dir="rtl"] .next-step-item:after { + left: -32px; + right: auto; + border-top: 16px solid transparent; + border-bottom: 16px solid transparent; + border-right: 16px solid transparent; } + +.next-step-arrow[dir="rtl"] > .next-step-item-wait { + background: #EBECF0; } + .next-step-arrow[dir="rtl"] > .next-step-item-wait .next-step-item-node-dot { + right: 50%; + left: auto; } + .next-step-arrow[dir="rtl"] > .next-step-item-wait:before { + border: 16px solid #EBECF0; + border-right-color: transparent; } + .next-step-arrow[dir="rtl"] > .next-step-item-wait:after { + border-right-color: #EBECF0; + border-left-color: transparent; } + +.next-step-arrow[dir="rtl"] > .next-step-item-process { + background: #5584FF; } + .next-step-arrow[dir="rtl"] > .next-step-item-process .next-step-item-node-dot { + right: 50%; + left: auto; } + .next-step-arrow[dir="rtl"] > .next-step-item-process:before { + border: 16px solid #5584FF; + border-right-color: transparent; } + .next-step-arrow[dir="rtl"] > .next-step-item-process:after { + border-right-color: #5584FF; + border-left-color: transparent; } + +.next-step-arrow[dir="rtl"] > .next-step-item-finish { + background: #DEE8FF; } + .next-step-arrow[dir="rtl"] > .next-step-item-finish .next-step-item-node-dot { + right: 50%; + left: auto; } + .next-step-arrow[dir="rtl"] > .next-step-item-finish:before { + border: 16px solid #DEE8FF; + border-right-color: transparent; } + .next-step-arrow[dir="rtl"] > .next-step-item-finish:after { + border-right-color: #DEE8FF; + border-left-color: transparent; } + +.next-step-arrow[dir="rtl"] .next-step-item-disabled { + background: #F7F8FA; } + .next-step-arrow[dir="rtl"] .next-step-item-disabled .next-step-item-node-dot { + right: 50%; + left: auto; } + .next-step-arrow[dir="rtl"] .next-step-item-disabled:before { + border: 16px solid #F7F8FA; + border-right-color: transparent; } + .next-step-arrow[dir="rtl"] .next-step-item-disabled:after { + border-right-color: #F7F8FA; + border-left-color: transparent; } + +.next-step-arrow[dir="rtl"] .next-step-item-first { + margin-right: 0; } + +.next-step-arrow[dir="rtl"] .next-step-item-last { + margin-left: 0; } + +.next-step-circle[dir="rtl"] > .next-step-item-wait .next-step-item-node-dot { + right: 50%; + left: auto; } + +.next-step-circle[dir="rtl"] > .next-step-item-process .next-step-item-node-dot { + right: 50%; + left: auto; } + +.next-step-circle[dir="rtl"] > .next-step-item-finish .next-step-item-node-dot { + right: 50%; + left: auto; } + +.next-step-circle[dir="rtl"] .next-step-item-disabled .next-step-item-node-dot { + right: 50%; + left: auto; } + +.next-step-circle[dir="rtl"].next-step-horizontal > .next-step-item-wait > .next-step-item-body { + right: -26px; + left: auto; } + +.next-step-circle[dir="rtl"].next-step-horizontal > .next-step-item-process > .next-step-item-body { + right: -26px; + left: auto; } + +.next-step-circle[dir="rtl"].next-step-horizontal > .next-step-item-finish > .next-step-item-body { + right: -26px; + left: auto; } + +.next-step-circle[dir="rtl"].next-step-horizontal > .next-step-item-disabled > .next-step-item-body { + right: -26px; + left: auto; } + +.next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-wait .next-step-item-body { + left: auto; + right: 0; + text-align: right; } + .next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-wait .next-step-item-body .next-step-item-title { + padding-left: 8px; + padding-right: 0; } + +.next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-wait .next-step-item-tail { + left: 0; + right: auto; } + +.next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-process .next-step-item-body { + left: auto; + right: 0; + text-align: right; } + .next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-process .next-step-item-body .next-step-item-title { + padding-left: 8px; + padding-right: 0; } + +.next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-process .next-step-item-tail { + left: 0; + right: auto; } + +.next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-finish .next-step-item-body { + left: auto; + right: 0; + text-align: right; } + .next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-finish .next-step-item-body .next-step-item-title { + padding-left: 8px; + padding-right: 0; } + +.next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-finish .next-step-item-tail { + left: 0; + right: auto; } + +.next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-disabled .next-step-item-body { + left: auto; + right: 0; + text-align: right; } + .next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-disabled .next-step-item-body .next-step-item-title { + padding-left: 8px; + padding-right: 0; } + +.next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-disabled .next-step-item-tail { + left: 0; + right: auto; } + +.next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-wait > .next-step-item-body { + right: 16px; + left: auto; + margin-right: 8px; + margin-left: 0; } + .next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-wait > .next-step-item-body > .next-step-item-title { + text-align: right; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-wait > .next-step-item-body > .next-step-item-content { + text-align: right; } + +.next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-process > .next-step-item-body { + right: 16px; + left: auto; + margin-right: 8px; + margin-left: 0; } + .next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-process > .next-step-item-body > .next-step-item-title { + text-align: right; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-process > .next-step-item-body > .next-step-item-content { + text-align: right; } + +.next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-finish > .next-step-item-body { + right: 16px; + left: auto; + margin-right: 8px; + margin-left: 0; } + .next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-finish > .next-step-item-body > .next-step-item-title { + text-align: right; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-finish > .next-step-item-body > .next-step-item-content { + text-align: right; } + +.next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-disabled > .next-step-item-body { + right: 16px; + left: auto; + margin-right: 8px; + margin-left: 0; } + .next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-disabled > .next-step-item-body > .next-step-item-title { + text-align: right; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-disabled > .next-step-item-body > .next-step-item-content { + text-align: right; } + +.next-step-dot[dir="rtl"] > .next-step-item-wait .next-step-item-node-dot { + right: 50%; + left: auto; } + +.next-step-dot[dir="rtl"] > .next-step-item-process .next-step-item-node-dot { + right: 50%; + left: auto; } + +.next-step-dot[dir="rtl"] > .next-step-item-finish .next-step-item-node-dot { + right: 50%; + left: auto; } + +.next-step-dot[dir="rtl"] .next-step-item-disabled .next-step-item-node-dot { + right: 50%; + left: auto; } + +.next-step-dot[dir="rtl"].next-step-horizontal > .next-step-item-wait > .next-step-item-body { + right: -36px; + left: auto; } + +.next-step-dot[dir="rtl"].next-step-horizontal > .next-step-item-process > .next-step-item-body { + right: -36px; + left: auto; } + +.next-step-dot[dir="rtl"].next-step-horizontal > .next-step-item-finish > .next-step-item-body { + right: -36px; + left: auto; } + +.next-step-dot[dir="rtl"].next-step-horizontal > .next-step-item-disabled > .next-step-item-body { + right: -36px; + left: auto; } + +.next-step-dot[dir="rtl"].next-step-vertical { + padding: 0 4px 0 0; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-wait > .next-step-item-body { + right: 6px; + left: auto; + margin-right: 8px; + margin-left: 0; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-wait > .next-step-item-body > .next-step-item-title { + text-align: right; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-wait > .next-step-item-body > .next-step-item-content { + text-align: right; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-process > .next-step-item-body { + right: 6px; + left: auto; + margin-right: 8px; + margin-left: 0; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-process > .next-step-item-body > .next-step-item-title { + text-align: right; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-process > .next-step-item-body > .next-step-item-content { + text-align: right; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-finish > .next-step-item-body { + right: 6px; + left: auto; + margin-right: 8px; + margin-left: 0; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-finish > .next-step-item-body > .next-step-item-title { + text-align: right; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-finish > .next-step-item-body > .next-step-item-content { + text-align: right; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-disabled > .next-step-item-body { + right: 6px; + left: auto; + margin-right: 8px; + margin-left: 0; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-disabled > .next-step-item-body > .next-step-item-title { + text-align: right; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-disabled > .next-step-item-body > .next-step-item-content { + text-align: right; } + +.next-switch:after[dir="rtl"] { + content: " "; + -webkit-transition: all 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + transition: all 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + -webkit-transform-origin: right center; + -ms-transform-origin: right center; + transform-origin: right center; } + +.next-switch-medium[dir="rtl"]:after { + right: 100%; + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); } + +.next-switch-small[dir="rtl"]:after { + right: 100%; + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); } + +.next-switch-on[dir="rtl"] > .next-switch-children { + right: 10px; + left: auto; + color: #FFFFFF; } + +.next-switch-on[disabled][dir="rtl"]:after { + left: 0; + right: 100%; + -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); } + +.next-switch-on.next-switch-small[dir="rtl"] > .next-switch-children { + right: 6px; + left: auto; } + +.next-switch-off[dir="rtl"]:after { + right: 0; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + -webkit-box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.12); + box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.12); } + +.next-switch-off[dir="rtl"] > .next-switch-children { + left: 10px; + right: auto; } + +.next-switch-off.next-switch-small[dir="rtl"] > .next-switch-children { + left: 5px; + right: auto; } + +.next-switch { + -webkit-box-sizing: border-box; + box-sizing: border-box; + outline: none; + text-align: left; + -webkit-transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + overflow: hidden; + cursor: pointer; } + .next-switch *, + .next-switch *:before, + .next-switch *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-switch:after { + content: " "; + -webkit-transition: all 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + transition: all 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + -webkit-transform-origin: left center; + -ms-transform-origin: left center; + transform-origin: left center; } + .next-switch-medium { + position: relative; + display: inline-block; + border: 1px solid transparent; + width: 56px; + height: 26px; + border-radius: 20px; } + .next-switch-medium:after { + border: 1px solid transparent; + position: absolute; + left: 100%; + -webkit-transform: translateX(-100%); + -ms-transform: translateX(-100%); + transform: translateX(-100%); + width: 24px; + height: 24px; + border-radius: 20px; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-switch-medium > .next-switch-children { + font-size: 12px; + position: absolute; + height: 24px; + line-height: 24px; } + .next-switch-small { + position: relative; + display: inline-block; + border: 1px solid transparent; + width: 44px; + height: 22px; + border-radius: 20px; } + .next-switch-small:after { + border: 1px solid transparent; + position: absolute; + left: 100%; + -webkit-transform: translateX(-100%); + -ms-transform: translateX(-100%); + transform: translateX(-100%); + width: 20px; + height: 20px; + border-radius: 20px; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-switch-small > .next-switch-children { + font-size: 12px; + position: absolute; + height: 20px; + line-height: 20px; } + .next-switch-on { + background-color: #5584FF; } + .next-switch-on:after { + -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + background-color: #FFFFFF; + border-color: transparent; } + .next-switch-on > .next-switch-children { + left: 10px; + color: #FFFFFF; } + .next-switch-on:focus, .next-switch-on:hover { + background-color: #3E71F7; } + .next-switch-on:focus:after, .next-switch-on:hover:after { + background-color: #FFFFFF; } + .next-switch-on.next-switch-small > .next-switch-children { + left: 6px; } + .next-switch-on[disabled] { + background-color: #EBECF0; + cursor: not-allowed; } + .next-switch-on[disabled]:after { + right: 0; + -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + background-color: #F7F8FA; + border-color: #E6E7EB; } + .next-switch-on[disabled] > .next-switch-children { + color: #CCCCCC; } + .next-switch-off { + background-color: #FFFFFF; + border-color: #C4C6CF; } + .next-switch-off:focus, .next-switch-off:hover { + background-color: #F2F3F7; + border-color: #C4C6CF; } + .next-switch-off:after { + left: 0; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + background-color: #FFFFFF; + border-color: transparent; } + .next-switch-off:after:focus, .next-switch-off:after:hover { + background-color: #FFFFFF; } + .next-switch-off > .next-switch-children { + right: 10px; + color: #999999; } + .next-switch-off[disabled] { + background-color: #F7F8FA; + cursor: not-allowed; } + .next-switch-off[disabled]:after { + -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + background-color: #F7F8FA; + border-color: #E6E7EB; } + .next-switch-off[disabled] > .next-switch-children { + color: #C4C6CF; } + .next-switch-off.next-switch-small > .next-switch-children { + right: 5px; } + +.next-tabs { + /* Nav Button */ + /* ----------------- */ + /* position: vertical */ + /* ----------------- */ + /* Size */ + /* ----------------- */ + /* shape: pure */ + /* ----------------- */ + /* Shape: wrapped */ + /* --------------------- */ + /* Shape: wrapped(top) */ + /* Shape: wrapped(bottom) */ + /* Shape: wrapped(left) */ + /* Shape: wrapped(right) */ + /* Shape: text */ + /* ------------------- */ } + .next-tabs { + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; } + .next-tabs *, + .next-tabs *:before, + .next-tabs *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-tabs-bar { + outline: none; } + .next-tabs-bar-popup { + overflow-y: auto; + max-height: 480px; } + .next-tabs-nav-container { + position: relative; } + .next-tabs-nav-container:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + .next-tabs-nav-wrap { + overflow: hidden; } + .next-tabs-nav-scroll { + overflow: hidden; + white-space: nowrap; } + .next-tabs-nav { + display: inline-block; + position: relative; + -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); + transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); + list-style: none; + padding: 0; + margin: 0; } + .next-tabs-nav-enter, .next-tabs-nav-appear { + -webkit-animation: fadeInLeft 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + animation: fadeInLeft 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; } + .next-tabs-nav-leave { + -webkit-animation: fadeOutLeft 0.2s cubic-bezier(0.78, 0.14, 0.15, 0.86); + animation: fadeOutLeft 0.2s cubic-bezier(0.78, 0.14, 0.15, 0.86); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; } + .next-tabs-tab { + display: inline-block; + position: relative; + -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); + transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); } + .next-tabs-tab-inner { + position: relative; + cursor: pointer; + text-decoration: none; } + .next-tabs-tab:before { + content: ""; + position: absolute; + -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); + transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); } + .next-tabs-tab.active { + font-weight: normal; } + .next-tabs-tab .next-tabs-tab-close { + color: #666666; } + .next-tabs-tab .next-tabs-tab-close:hover { + color: #333333; } + .next-tabs-tab.active .next-tabs-tab-close { + color: #5584FF; } + .next-tabs-tab.disabled .next-tabs-tab-close { + color: #DCDEE3; } + .next-tabs-tab:focus { + outline: none; } + .next-tabs-tabpane { + display: none; } + .next-tabs-tabpane.active { + display: block; } + .next-tabs-btn-down, .next-tabs-btn-prev, .next-tabs-btn-next { + position: absolute; + top: 0; + cursor: pointer; + padding: 0; + border: 0; + outline: none; + height: 100%; + background-color: transparent; + border-color: transparent; } + .next-tabs-btn-down, .next-tabs-btn-down:link, .next-tabs-btn-down:visited, .next-tabs-btn-down.visited, .next-tabs-btn-prev, .next-tabs-btn-prev:link, .next-tabs-btn-prev:visited, .next-tabs-btn-prev.visited, .next-tabs-btn-next, .next-tabs-btn-next:link, .next-tabs-btn-next:visited, .next-tabs-btn-next.visited { + color: #666666; } + .next-tabs-btn-down:focus, .next-tabs-btn-down:hover, .next-tabs-btn-down.hover, .next-tabs-btn-down:active, .next-tabs-btn-down.active, .next-tabs-btn-prev:focus, .next-tabs-btn-prev:hover, .next-tabs-btn-prev.hover, .next-tabs-btn-prev:active, .next-tabs-btn-prev.active, .next-tabs-btn-next:focus, .next-tabs-btn-next:hover, .next-tabs-btn-next.hover, .next-tabs-btn-next:active, .next-tabs-btn-next.active { + color: #333333; + background-color: transparent; + border-color: transparent; + text-decoration: none; } + .next-tabs-btn-down.disabled, .next-tabs-btn-prev.disabled, .next-tabs-btn-next.disabled { + cursor: not-allowed; + color: #DCDEE3; } + .next-tabs-btn-next { + right: 8px; } + .next-tabs-btn-prev { + right: 32px; } + .next-tabs-btn-down { + right: 8px; } + .next-tabs-content { + overflow: hidden; } + .next-tabs-vertical > .next-tabs-bar .next-tabs-nav { + width: 100%; } + .next-tabs-vertical > .next-tabs-bar .next-tabs-tab { + display: block; } + .next-tabs.next-medium .next-tabs-nav-container-scrolling { + padding-right: 60px; } + .next-tabs.next-medium .next-tabs-tab-inner { + font-size: 12px; + padding: 12px 16px; } + .next-tabs.next-medium .next-tabs-tab-inner .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-tabs.next-medium .next-tabs-tab-inner .next-tabs-tab-close { + padding-left: 8px; } + .next-tabs.next-medium .next-tabs-tab-inner .next-tabs-tab-close:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-tabs.next-medium .next-tabs-btn-down .next-icon:before, + .next-tabs.next-medium .next-tabs-btn-prev .next-icon:before, + .next-tabs.next-medium .next-tabs-btn-next .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-tabs.next-small .next-tabs-nav-container-scrolling { + padding-right: 56px; } + .next-tabs.next-small .next-tabs-tab-inner { + font-size: 12px; + padding: 8px 12px; } + .next-tabs.next-small .next-tabs-tab-inner .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close { + padding-left: 8px; } + .next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close:before { + width: 16px; + font-size: 16px; } } + .next-tabs.next-small .next-tabs-btn-down .next-icon:before, + .next-tabs.next-small .next-tabs-btn-prev .next-icon:before, + .next-tabs.next-small .next-tabs-btn-next .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-tabs-pure > .next-tabs-bar { + border-bottom: solid 1px #DCDEE3; + background-color: transparent; } + .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container { + margin-bottom: -1px; + -webkit-box-shadow: none; + box-shadow: none; } + .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container .next-tabs-tab { + color: #666666; + background-color: transparent; } + .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container .next-tabs-tab:hover { + cursor: pointer; + color: #333333; + background-color: transparent; } + .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container .next-tabs-tab.active { + z-index: 1; + color: #5584FF; + background-color: transparent; } + .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container .next-tabs-tab.disabled { + pointer-events: none; + cursor: default; + color: #DCDEE3; + background: transparent; } + .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container .next-tabs-tab:before { + border-radius: 0%; + width: 0; + border-bottom: 2px solid #5584FF; + left: 50%; + bottom: 0%; } + .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container .next-tabs-tab.active:before { + width: 100%; + left: 0%; } + .next-tabs-wrapped > .next-tabs-bar { + background: transparent; } + .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab { + color: #666666; + background-color: #F2F3F7; } + .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab:hover { + cursor: pointer; + color: #333333; + background-color: #EBECF0; } + .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab.active { + z-index: 1; + color: #5584FF; + background-color: #FFFFFF; } + .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab.disabled { + pointer-events: none; + cursor: default; + color: #CCCCCC; + background: #F7F8FA; } + .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab .next-tabs-tab-close { + color: #666666; } + .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab .next-tabs-tab-close:hover { + color: #333333; } + .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab.active .next-tabs-tab-close { + color: #5584FF; } + .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab.disabled .next-tabs-tab-close { + color: #DCDEE3; } + .next-tabs-wrapped:before, .next-tabs-wrapped:after { + content: ""; + display: table; } + .next-tabs-wrapped:after { + clear: both; } + .next-tabs-wrapped > .next-tabs-content { + position: relative; } + .next-tabs-wrapped.next-tabs-top > .next-tabs-bar { + position: relative; } + .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-nav-extra { + position: absolute; + top: 50%; + right: 0; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); } + .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-tab { + margin-right: 4px; + border: solid 1px #DCDEE3; + border-radius: 3px 3px 0 0; + border-width: 1px 1px 1px 1px; } + .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-tab:hover { + border-color: #C4C6CF; } + .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-tab.active { + border-color: #DCDEE3 #DCDEE3 #FFFFFF #DCDEE3; } + .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-tab:before { + border-radius: 3px; + width: 0; + border-top: 2px solid #5584FF; + left: 50%; + top: -1px; } + .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-tab.active:before { + width: calc(100% - 2 * 3px); + left: 3px; } + .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-tab.active { + border-width: 1px 1px 1px 1px; } + .next-tabs-wrapped.next-tabs-top > .next-tabs-content { + top: -1px; + border-top: 1px solid #DCDEE3; } + .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar { + position: relative; } + .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-nav-extra { + position: absolute; + top: 50%; + right: 0; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); } + .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-tab { + margin-right: 4px; + border: solid 1px #DCDEE3; + border-radius: 0 0 3px 3px; } + .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-tab:hover { + border-color: #C4C6CF; } + .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-tab.active { + border-color: #FFFFFF #DCDEE3 #DCDEE3 #DCDEE3; } + .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-tab:before { + border-radius: 3px; + width: 0; + border-bottom: 2px solid #5584FF; + left: 50%; + bottom: -1px; } + .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-tab.active:before { + width: calc(100% - 2 * 3px); + left: 3px; } + .next-tabs-wrapped.next-tabs-bottom > .next-tabs-content { + top: 1px; + border-bottom: 1px solid #DCDEE3; } + .next-tabs-wrapped.next-tabs-left > .next-tabs-bar { + float: left; } + .next-tabs-wrapped.next-tabs-left > .next-tabs-bar .next-tabs-tab { + float: none; + margin-bottom: 4px; + border: solid 1px #DCDEE3; + border-radius: 3px 0 0 3px; + border-width: 1px 1px 1px 1px; } + .next-tabs-wrapped.next-tabs-left > .next-tabs-bar .next-tabs-tab:hover { + border-color: #C4C6CF; } + .next-tabs-wrapped.next-tabs-left > .next-tabs-bar .next-tabs-tab.active { + border-color: #DCDEE3 #FFFFFF #DCDEE3 #DCDEE3; } + .next-tabs-wrapped.next-tabs-left > .next-tabs-bar .next-tabs-tab:before { + border-radius: 3px; + height: 0; + border-left: 2px solid #5584FF; + top: 50%; + left: -1px; } + .next-tabs-wrapped.next-tabs-left > .next-tabs-bar .next-tabs-tab.active:before { + height: calc(100% - 2 * 3px); + top: 3px; } + .next-tabs-wrapped.next-tabs-left > .next-tabs-bar .next-tabs-tab.active { + border-width: 1px 1px 1px 1px; } + .next-tabs-wrapped.next-tabs-left > .next-tabs-content { + right: 1px; + border-left: 1px solid #DCDEE3; } + .next-tabs-wrapped.next-tabs-right > .next-tabs-bar { + float: right; } + .next-tabs-wrapped.next-tabs-right > .next-tabs-bar .next-tabs-tab { + float: none; + margin-bottom: 4px; + border: solid 1px #DCDEE3; + border-radius: 0 3px 3px 0; + border-width: 1px 1px 1px 1px; } + .next-tabs-wrapped.next-tabs-right > .next-tabs-bar .next-tabs-tab:hover { + border-color: #C4C6CF; } + .next-tabs-wrapped.next-tabs-right > .next-tabs-bar .next-tabs-tab.active { + border-color: #DCDEE3 #DCDEE3 #DCDEE3 #FFFFFF; } + .next-tabs-wrapped.next-tabs-right > .next-tabs-bar .next-tabs-tab:before { + border-radius: 3px; + height: 0; + border-right: 2px solid #5584FF; + top: 50%; + right: -1px; } + .next-tabs-wrapped.next-tabs-right > .next-tabs-bar .next-tabs-tab.active:before { + height: calc(100% - 2 * 3px); + top: 3px; } + .next-tabs-wrapped.next-tabs-right > .next-tabs-bar .next-tabs-tab.active { + border-width: 1px 1px 1px 1px; } + .next-tabs-wrapped.next-tabs-right > .next-tabs-content { + right: -1px; + border-right: 1px solid #DCDEE3; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-tab { + -webkit-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1); + transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1); + border-top: 1px solid #C4C6CF; + border-bottom: 1px solid #C4C6CF; + border-left: 1px solid #C4C6CF; + color: #333333; + background-color: #F2F3F7; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-tab:first-child { + border-radius: 3px 0 0 3px; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-tab:last-child { + border-radius: 0 3px 3px 0; + border-right: 1px solid #C4C6CF; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-tab.active { + margin-right: -1px; + border-right: 1px solid #C4C6CF; + border-color: #5584FF; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-tab.disabled { + border-color: #E6E7EB; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-tab:hover { + cursor: pointer; + color: #333333; + background-color: #EBECF0; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-tab.active { + z-index: 1; + color: #FFFFFF; + background-color: #5584FF; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-tab.disabled { + pointer-events: none; + cursor: default; + color: #CCCCCC; + background: #F7F8FA; } + .next-tabs-text > .next-tabs-bar .next-tabs-tab { + color: #666666; + background-color: transparent; } + .next-tabs-text > .next-tabs-bar .next-tabs-tab:hover { + cursor: pointer; + color: #333333; + background-color: transparent; } + .next-tabs-text > .next-tabs-bar .next-tabs-tab.active { + z-index: 1; + color: #5584FF; + background-color: transparent; } + .next-tabs-text > .next-tabs-bar .next-tabs-tab.disabled { + pointer-events: none; + cursor: default; + color: #CCCCCC; + background: transparent; } + .next-tabs-text > .next-tabs-bar .next-tabs-tab:not(:last-child):after { + content: ' '; + position: absolute; + right: 0; + top: calc(50% - 4px); + width: 1px; + height: 8px; + background-color: #DCDEE3; } + .next-tabs-pure > .next-tabs-bar { + position: relative; } + .next-tabs-pure > .next-tabs-bar .next-tabs-nav-extra { + position: absolute; + top: 50%; + right: 0; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); } + .next-tabs-capsule > .next-tabs-bar { + position: relative; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-nav-extra { + position: absolute; + top: 50%; + right: 0; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); } + .next-tabs-text > .next-tabs-bar { + position: relative; } + .next-tabs-text > .next-tabs-bar .next-tabs-nav-extra { + position: absolute; + top: 50%; + right: 0; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); } + +.next-tabs[dir='rtl'].next-medium .next-tabs-nav-container-scrolling { + padding-left: 60px; + padding-right: 0; } + +.next-tabs[dir='rtl'].next-medium .next-tabs-tab-close { + padding-right: 8px; + padding-left: 0; } + +.next-tabs[dir='rtl'].next-small .next-tabs-nav-container-scrolling { + padding-left: 56px; + padding-right: 0; } + +.next-tabs[dir='rtl'].next-small .next-tabs-tab-close { + padding-right: 8px; + padding-left: 0; } + +.next-tabs[dir='rtl'].next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-nav-extra { + right: auto; + left: 0; } + +.next-tabs[dir='rtl'].next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-nav-extra { + right: auto; + left: 0; } + +.next-tabs[dir='rtl'] > .next-tabs-bar .next-tabs-nav-extra { + right: auto; + left: 0; } + +.next-tabs[dir='rtl'].next-tabs-capsule > .next-tabs-bar .next-tabs-tab { + border-top: 1px solid #C4C6CF; + border-bottom: 1px solid #C4C6CF; + border-right: 1px solid #C4C6CF; + border-left: 0; } + .next-tabs[dir='rtl'].next-tabs-capsule > .next-tabs-bar .next-tabs-tab:first-child { + border-left: 0; + border-radius: 0 3px 3px 0; } + .next-tabs[dir='rtl'].next-tabs-capsule > .next-tabs-bar .next-tabs-tab:last-child { + border-radius: 3px 0 0 3px; + border-left: 1px solid #C4C6CF; } + .next-tabs[dir='rtl'].next-tabs-capsule > .next-tabs-bar .next-tabs-tab.active { + margin-left: -1px; + margin-right: auto; + border-left: 1px solid #C4C6CF; + border-color: #5584FF; } + +.next-tabs[dir='rtl'] .next-tabs-btn-next { + left: 8px; + right: auto; } + +.next-tabs[dir='rtl'] .next-tabs-btn-prev { + left: 32px; + right: auto; } + +.next-tabs[dir='rtl'] .next-tabs-btn-down { + left: 8px; + right: auto; } + +.next-tabs-text[dir='rtl'] > .next-tabs-bar .next-tabs-tab:not(:last-child):after { + content: ' '; + position: absolute; + left: 0; + right: auto; } + +/* put your code here */ +.next-table { + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: relative; } + .next-table *, + .next-table *:before, + .next-table *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-table table { + border-collapse: collapse; + border-spacing: 0; + width: 100%; + background: #FFFFFF; } + .next-table table tr:first-child td { + border-top-width: 0; } + .next-table th { + padding: 0; + background: #EBECF0; + color: #333333; + text-align: left; + font-weight: normal; + border: 1px solid #DCDEE3; } + .next-table th .next-table-cell-wrapper { + padding: 12px 16px; + overflow: hidden; + text-overflow: ellipsis; + word-break: break-all; } + .next-table-affix { + z-index: 1; } + .next-table-header-resizable { + position: relative; } + .next-table-header-resizable .next-table-resize-handler { + position: absolute; + right: 0; + top: 0; + bottom: 0; + width: 3px; + background: transparent; + cursor: ew-resize; } + .next-table td { + padding: 0; + border: 1px solid #DCDEE3; } + .next-table td .next-table-cell-wrapper { + padding: 12px 16px; + overflow: hidden; + text-overflow: ellipsis; + word-break: break-all; } + .next-table td .next-table-cell-wrapper .next-icon-arrow-down.next-table-tree-arrow, + .next-table td .next-table-cell-wrapper .next-icon-arrow-right.next-table-tree-arrow, + .next-table td .next-table-cell-wrapper .next-table-tree-placeholder { + margin-right: 3px; + float: left; } + .next-table td .next-table-cell-wrapper .next-icon-arrow-down.next-table-tree-arrow:before, + .next-table td .next-table-cell-wrapper .next-icon-arrow-right.next-table-tree-arrow:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-table .next-table-expanded .next-table-cell-wrapper, + .next-table .next-table-selection .next-table-cell-wrapper { + overflow: visible; } + .next-table.no-header table tr:first-child td { + border-top-width: 1px; } + .next-table.only-bottom-border { + border-width: 0; } + .next-table.only-bottom-border th { + border-width: 0 0 1px 0; } + .next-table.only-bottom-border td { + border-width: 0 0 1px 0; } + .next-table.only-bottom-border .next-table-expanded-row th { + border-width: 0 0 1px 0; } + .next-table.only-bottom-border .next-table-expanded-row td { + border-width: 0 0 1px 0; } + .next-table-loading { + display: block; } + .next-table.zebra tr:nth-child(odd) td { + background: #FFFFFF; } + .next-table.zebra tr:nth-child(even) td { + background: #F7F8FA; } + .next-table.zebra .next-table-row.hovered td { + background: #F2F3F7; + color: #333333; } + .next-table.zebra .next-table-row.selected td { + background: #F2F3F7; + color: #333333; } + .next-table-empty { + color: #A0A2AD; + padding: 32px 0; + text-align: center; } + .next-table-expanded-row td { + border-width: 0; } + .next-table-expanded-row td:first-child { + border-left-width: 1px; } + .next-table-expanded-row td:last-child { + border-right-width: 1px; } + .next-table-expanded-row:last-child td { + border-bottom-width: 1px; } + .next-table-expanded-row .next-table .last td { + border-bottom-width: 0; } + .next-table-filter-footer { + margin: 10px 10px 0; } + .next-table-filter-footer button { + margin-right: 5px; } + .next-table-row { + -webkit-transition: all ease .3s; + transition: all ease .3s; + background: #FFFFFF; + color: #333333; } + .next-table-row.hidden { + display: none; } + .next-table-row.hovered { + background: #F2F3F7; + color: #333333; } + .next-table-row.selected { + background: #F2F3F7; + color: #333333; } + .next-table-tree-placeholder { + display: inline-block; + width: 12px; } + +.last .next-table-expanded-row td { + border-bottom-width: 1px; } + +.next-table-body, +.next-table-header { + overflow: auto; + font-size: 12px; } + +.next-table-body { + font-size: 12px; } + +.next-table-fixed { + border: 1px solid #DCDEE3; } + .next-table-fixed table { + table-layout: fixed; } + .next-table-fixed .next-table-header { + background: #EBECF0; } + .next-table-fixed table tr td:first-child, + .next-table-fixed table tr th:first-child { + border-left-width: 0; } + .next-table-fixed .next-table-header th { + border-top-width: 0; } + .next-table-fixed .next-table-header tr th:last-child { + border-right-width: 0; } + .next-table-fixed .next-table-body td { + border-top-width: 0; } + .next-table-fixed .next-table-body tr:last-child td { + border-bottom-width: 0; } + .next-table-fixed .next-table-body tr td:last-child { + border-right-width: 0; } + .next-table-fixed.next-table-group table tr td:first-child, + .next-table-fixed.next-table-group table tr th:first-child { + border-left-width: 1px; } + .next-table-fixed.next-table-group .next-table-header th { + border-top-width: 1px; } + .next-table-fixed.next-table-group .next-table-header tr th:last-child { + border-right-width: 1px; } + .next-table-fixed.next-table-group .next-table-body td { + border-top-width: 1px; } + .next-table-fixed.next-table-group .next-table-body tr:last-child td { + border-bottom-width: 1px; } + .next-table-fixed.next-table-group .next-table-body tr td:last-child { + border-right-width: 1px; } + +.next-table-lock .next-table-body { + overflow-x: auto; + overflow-y: visible; } + +.next-table-group { + border-width: 0; } + .next-table-group .next-table-body { + margin-top: 8px; } + .next-table-group .next-table-body table { + margin-bottom: 8px; } + .next-table-group .next-table-body table tr:first-child td { + border-top-width: 1px; } + .next-table-group .next-table-group-header td { + background: #EBECF0; + color: #333333; } + .next-table-group .next-table-group-footer td { + background: #EBECF0; + color: #333333; } + .next-table-group .next-table-row.hovered, + .next-table-group .next-table-row.selected { + background: #FFFFFF; + color: #333333; } + +.next-table-lock { + position: relative; } + .next-table-lock table { + table-layout: fixed; } + +.next-table-header-inner { + overflow: hidden; } + +.next-table-lock-left, +.next-table-lock-right { + position: absolute; + left: 0; + top: 0; + z-index: 1; + border: 0; } + .next-table-lock-left table, + .next-table-lock-right table { + width: auto; } + .next-table-lock-left .next-table-body, + .next-table-lock-right .next-table-body { + overflow: hidden; } + +.next-table-lock-right { + right: 0; + left: auto; } + .next-table-lock-right table tr td:first-child, + .next-table-lock-right table tr th:first-child { + border-left-width: 1px; } + .next-table-lock-right.shadow { + -webkit-box-shadow: -2px 0 3px rgba(0, 0, 0, 0.12); + box-shadow: -2px 0 3px rgba(0, 0, 0, 0.12); } + +.next-table-lock-left.shadow { + -webkit-box-shadow: 2px 0 3px rgba(0, 0, 0, 0.12); + box-shadow: 2px 0 3px rgba(0, 0, 0, 0.12); } + +.next-table-filter { + line-height: 1; } + +.next-table-sort { + position: relative; + width: 16px; + height: 15px; + display: inline-block; + vertical-align: middle; + line-height: 1; } + .next-table-sort .next-icon { + position: absolute; + left: 0; + color: #333333; } + .next-table-sort .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-table-sort .current .next-icon { + color: #5584FF; } + .next-table-sort .next-icon-ascending { + left: 4px; } + +.next-table-filter { + margin-left: 5px; + cursor: pointer; + width: 20px; + display: inline-block; } + .next-table-filter:focus { + outline: 0; } + .next-table-filter .next-icon { + color: #333333; } + .next-table-filter .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-table-expanded-ctrl.disabled { + color: #999999; } + +.next-table-expanded-ctrl .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-table[dir="rtl"] th { + text-align: right; } + +.next-table[dir="rtl"] .next-table-header-resizable .next-table-resize-handler { + right: auto; + left: 0; } + +.next-table[dir="rtl"] td .next-table-cell-wrapper .next-icon-arrow-down.next-table-tree-arrow, +.next-table[dir="rtl"] td .next-table-cell-wrapper .next-icon-arrow-right.next-table-tree-arrow, +.next-table[dir="rtl"] td .next-table-cell-wrapper .next-table-tree-placeholder { + margin-left: 3px; + margin-right: 0; + float: right; } + +.next-table[dir="rtl"] .next-table-expanded-row td:first-child { + border-left-width: 0; + border-right-width: 1px; } + +.next-table[dir="rtl"] .next-table-expanded-row td:last-child { + border-left-width: 1px; + border-right-width: 0; } + +.next-table[dir="rtl"].only-bottom-border .next-table-expanded-row th { + border-width: 0 0 1px 0; } + +.next-table[dir="rtl"].only-bottom-border .next-table-expanded-row td { + border-width: 0 0 1px 0; } + +.next-table[dir="rtl"] .next-table-filter-footer button { + margin-left: 5px; + margin-right: 0; } + +.next-table[dir="rtl"] .next-table-lock-left, +.next-table[dir="rtl"] .next-table-lock-right { + left: auto; + right: 0; } + +.next-table[dir="rtl"] .next-table-lock-right { + right: auto; + left: 0; } + .next-table[dir="rtl"] .next-table-lock-right table tr td:first-child, + .next-table[dir="rtl"] .next-table-lock-right table tr th:first-child { + border-right-width: 1px; } + .next-table[dir="rtl"] .next-table-lock-right.shadow { + -webkit-box-shadow: 2px 0 3px rgba(0, 0, 0, 0.12); + box-shadow: 2px 0 3px rgba(0, 0, 0, 0.12); } + +.next-table[dir="rtl"] .next-table-lock-left.shadow { + -webkit-box-shadow: -2px 0 3px rgba(0, 0, 0, 0.12); + box-shadow: -2px 0 3px rgba(0, 0, 0, 0.12); } + +.next-table[dir="rtl"] .next-table-sort .next-icon { + right: 0; + left: auto; } + +.next-table[dir="rtl"] .next-table-sort .next-icon-ascending { + right: 4px; + left: auto; } + +.next-table[dir="rtl"] .next-table-filter { + margin-right: 5px; + margin-left: 0; } + +.next-table-fixed[dir="rtl"] table tr td:first-child, +.next-table-fixed[dir="rtl"] table tr th:first-child { + border-left-width: 1px; + border-right-width: 0; } + +.next-table-fixed[dir="rtl"] .next-table-header tr th:last-child { + border-left-width: 1px; } + +.next-table-fixed[dir="rtl"] .next-table-body tr td:last-child { + border-left-width: 1px; } + +.next-timeline *, +.next-timeline *:before, +.next-timeline *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +.next-timeline, .next-timeline:before, .next-timeline:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +.next-timeline ul { + margin: 0; + padding: 0; + list-style: none; } + +.next-timeline p { + margin: 0; } + +.next-timeline-hide { + display: none; } + +.next-timeline[dir='rtl'] .next-timeline-item { + /* 时间轴左边存在内容的情况 */ } + .next-timeline[dir='rtl'] .next-timeline-item-folder { + padding-left: 0; + padding-right: 28px; } + .next-timeline[dir='rtl'] .next-timeline-item-dot-tail { + left: auto; + right: 8px; + border-left: none; + border-right: 1px dotted #DCDEE3; } + .next-timeline[dir='rtl'] .next-timeline-item-has-left-content.next-timeline-item-folder { + margin-left: 0; + margin-right: 80px; } + +.next-timeline[dir='rtl'] .next-timeline-item-done { + position: relative; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-timeline { + position: absolute; + left: auto; + right: 0; + top: 0; + height: 100%; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-node { + position: relative; + width: 16px; + height: 24px; + padding: 4px 0; + text-align: center; + float: right; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom { + width: 40px; + height: auto; + font-size: 12px; + word-break: break-all; + margin-right: calc(-12px); + margin-left: 0; + line-height: 1; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-dot { + display: block; + position: absolute; + width: 8px; + height: 8px; + border-radius: 100%; + top: 50%; + margin-top: -4px; + left: 50%; + margin-left: -4px; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-icon { + display: block; + position: absolute; + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 100%; + top: 50%; + left: 50%; + margin-top: -8px; + margin-left: -8px; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-tail { + position: absolute; + width: auto; + height: calc(100% - 24px); + top: 24px; + left: auto; + right: 8px; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-tail i { + display: inline-block; + vertical-align: top; + height: 100%; + width: 1px; + position: relative; + background: #DCDEE3; + -webkit-transition: all .4s ease; + transition: all .4s ease; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-content { + display: inline-block; + margin-right: 28px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-content .next-timeline-item-title { + margin: 0; + font-size: 12px; + font-weight: bold; + line-height: 16px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #333333; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-content .next-timeline-item-body { + margin: 0; + margin-top: 8px; + font-size: 12px; + line-height: 16px; + color: #666666; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-content .next-timeline-item-time { + margin: 0; + margin-top: 4px; + margin-bottom: 12px; + font-size: 12px; + color: #999999; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-done.next-timeline-item-has-left-content > .next-timeline-item-left-content { + position: absolute; + width: 80px; + display: inline-block; + font-size: 12px; + color: #999999; + line-height: 16px; + margin-top: 4px; + text-align: left; + padding-left: 12px; + padding-right: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-done.next-timeline-item-has-left-content > .next-timeline-item-left-content p { + word-break: break-word; } + .next-timeline[dir='rtl'] .next-timeline-item-done.next-timeline-item-has-left-content > .next-timeline-item-timeline { + margin-right: 80px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-done.next-timeline-item-has-left-content > .next-timeline-item-content { + margin-right: 108px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-dot { + background: #C4C6CF; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-icon { + background: #C4C6CF; + color: #FFFFFF; } + +.next-timeline[dir='rtl'] .next-timeline-item-process { + position: relative; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-timeline { + position: absolute; + left: auto; + right: 0; + top: 0; + height: 100%; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-node { + position: relative; + width: 16px; + height: 24px; + padding: 4px 0; + text-align: center; + float: right; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom { + width: 40px; + height: auto; + font-size: 12px; + word-break: break-all; + margin-right: calc(-12px); + margin-left: 0; + line-height: 1; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-dot { + display: block; + position: absolute; + width: 8px; + height: 8px; + border-radius: 100%; + top: 50%; + margin-top: -4px; + left: 50%; + margin-left: -4px; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-icon { + display: block; + position: absolute; + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 100%; + top: 50%; + left: 50%; + margin-top: -8px; + margin-left: -8px; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-tail { + position: absolute; + width: auto; + height: calc(100% - 24px); + top: 24px; + left: auto; + right: 8px; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-tail i { + display: inline-block; + vertical-align: top; + height: 100%; + width: 1px; + position: relative; + background: #DCDEE3; + -webkit-transition: all .4s ease; + transition: all .4s ease; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-content { + display: inline-block; + margin-right: 28px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-content .next-timeline-item-title { + margin: 0; + font-size: 12px; + font-weight: bold; + line-height: 16px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #333333; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-content .next-timeline-item-body { + margin: 0; + margin-top: 8px; + font-size: 12px; + line-height: 16px; + color: #666666; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-content .next-timeline-item-time { + margin: 0; + margin-top: 4px; + margin-bottom: 12px; + font-size: 12px; + color: #999999; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-process.next-timeline-item-has-left-content > .next-timeline-item-left-content { + position: absolute; + width: 80px; + display: inline-block; + font-size: 12px; + color: #999999; + line-height: 16px; + margin-top: 4px; + text-align: left; + padding-left: 12px; + padding-right: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-process.next-timeline-item-has-left-content > .next-timeline-item-left-content p { + word-break: break-word; } + .next-timeline[dir='rtl'] .next-timeline-item-process.next-timeline-item-has-left-content > .next-timeline-item-timeline { + margin-right: 80px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-process.next-timeline-item-has-left-content > .next-timeline-item-content { + margin-right: 108px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-dot { + background: #5584FF; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-icon { + background: #5584FF; + color: #FFFFFF; } + +.next-timeline[dir='rtl'] .next-timeline-item-success { + position: relative; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-timeline { + position: absolute; + left: auto; + right: 0; + top: 0; + height: 100%; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-node { + position: relative; + width: 16px; + height: 24px; + padding: 4px 0; + text-align: center; + float: right; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom { + width: 40px; + height: auto; + font-size: 12px; + word-break: break-all; + margin-right: calc(-12px); + margin-left: 0; + line-height: 1; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-dot { + display: block; + position: absolute; + width: 8px; + height: 8px; + border-radius: 100%; + top: 50%; + margin-top: -4px; + left: 50%; + margin-left: -4px; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-icon { + display: block; + position: absolute; + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 100%; + top: 50%; + left: 50%; + margin-top: -8px; + margin-left: -8px; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-tail { + position: absolute; + width: auto; + height: calc(100% - 24px); + top: 24px; + left: auto; + right: 8px; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-tail i { + display: inline-block; + vertical-align: top; + height: 100%; + width: 1px; + position: relative; + background: #DCDEE3; + -webkit-transition: all .4s ease; + transition: all .4s ease; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-content { + display: inline-block; + margin-right: 28px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-content .next-timeline-item-title { + margin: 0; + font-size: 12px; + font-weight: bold; + line-height: 16px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #333333; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-content .next-timeline-item-body { + margin: 0; + margin-top: 8px; + font-size: 12px; + line-height: 16px; + color: #666666; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-content .next-timeline-item-time { + margin: 0; + margin-top: 4px; + margin-bottom: 12px; + font-size: 12px; + color: #999999; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-success.next-timeline-item-has-left-content > .next-timeline-item-left-content { + position: absolute; + width: 80px; + display: inline-block; + font-size: 12px; + color: #999999; + line-height: 16px; + margin-top: 4px; + text-align: left; + padding-left: 12px; + padding-right: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-success.next-timeline-item-has-left-content > .next-timeline-item-left-content p { + word-break: break-word; } + .next-timeline[dir='rtl'] .next-timeline-item-success.next-timeline-item-has-left-content > .next-timeline-item-timeline { + margin-right: 80px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-success.next-timeline-item-has-left-content > .next-timeline-item-content { + margin-right: 108px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-dot { + background: #46BC15; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-icon { + background: #46BC15; + color: #FFFFFF; } + +.next-timeline[dir='rtl'] .next-timeline-item-error { + position: relative; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-timeline { + position: absolute; + left: auto; + right: 0; + top: 0; + height: 100%; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-node { + position: relative; + width: 16px; + height: 24px; + padding: 4px 0; + text-align: center; + float: right; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom { + width: 40px; + height: auto; + font-size: 12px; + word-break: break-all; + margin-right: calc(-12px); + margin-left: 0; + line-height: 1; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-dot { + display: block; + position: absolute; + width: 8px; + height: 8px; + border-radius: 100%; + top: 50%; + margin-top: -4px; + left: 50%; + margin-left: -4px; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-icon { + display: block; + position: absolute; + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 100%; + top: 50%; + left: 50%; + margin-top: -8px; + margin-left: -8px; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-tail { + position: absolute; + width: auto; + height: calc(100% - 24px); + top: 24px; + left: auto; + right: 8px; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-tail i { + display: inline-block; + vertical-align: top; + height: 100%; + width: 1px; + position: relative; + background: #DCDEE3; + -webkit-transition: all .4s ease; + transition: all .4s ease; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-content { + display: inline-block; + margin-right: 28px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-content .next-timeline-item-title { + margin: 0; + font-size: 12px; + font-weight: bold; + line-height: 16px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #333333; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-content .next-timeline-item-body { + margin: 0; + margin-top: 8px; + font-size: 12px; + line-height: 16px; + color: #666666; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-content .next-timeline-item-time { + margin: 0; + margin-top: 4px; + margin-bottom: 12px; + font-size: 12px; + color: #999999; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-error.next-timeline-item-has-left-content > .next-timeline-item-left-content { + position: absolute; + width: 80px; + display: inline-block; + font-size: 12px; + color: #999999; + line-height: 16px; + margin-top: 4px; + text-align: left; + padding-left: 12px; + padding-right: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-error.next-timeline-item-has-left-content > .next-timeline-item-left-content p { + word-break: break-word; } + .next-timeline[dir='rtl'] .next-timeline-item-error.next-timeline-item-has-left-content > .next-timeline-item-timeline { + margin-right: 80px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-error.next-timeline-item-has-left-content > .next-timeline-item-content { + margin-right: 108px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-dot { + background: #FF3000; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-icon { + background: #FF3000; + color: #FFFFFF; } + +.next-timeline { + margin: 0; + padding: 0; + list-style: none; } + .next-timeline > li { + outline: 0; } + +.next-timeline-item { + /* 时间轴左边存在内容的情况 */ } + .next-timeline-item-folder { + padding-left: 28px; + padding-top: 4px; + padding-bottom: 4px; + font-size: 12px; + line-height: 16px; + position: relative; + /* min-height: auto !important; */ } + .next-timeline-item-dot-tail { + position: absolute; + top: 0; + left: 8px; + height: 100%; + border-top: 0; + border-bottom: 0; + border-right: 0; + border-left: 1px dotted #DCDEE3; } + .next-timeline-item-dot-tail-solid { + border-style: solid; } + .next-timeline-item-has-left-content.next-timeline-item-folder { + margin-left: 80px; } + +.next-timeline-item-done { + position: relative; } + .next-timeline-item-done .next-timeline-item-timeline { + position: absolute; + left: 0; + top: 0; + height: 100%; } + .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-node { + position: relative; + width: 16px; + height: 24px; + padding: 4px 0; + text-align: center; + float: left; } + .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom { + width: 40px; + height: auto; + font-size: 12px; + word-break: break-all; + margin-left: calc(-12px); + line-height: 1; } + .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-dot { + display: block; + position: absolute; + width: 8px; + height: 8px; + border-radius: 100%; + top: 50%; + margin-top: -4px; + left: 50%; + margin-left: -4px; } + .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-icon { + display: block; + position: absolute; + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 100%; + top: 50%; + left: 50%; + margin-top: -8px; + margin-left: -8px; } + .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-tail { + position: absolute; + width: auto; + height: calc(100% - 24px); + top: 24px; + left: 8px; } + .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-tail i { + display: inline-block; + vertical-align: top; + height: 100%; + width: 1px; + position: relative; + background: #DCDEE3; + -webkit-transition: all .4s ease; + transition: all .4s ease; } + .next-timeline-item-done .next-timeline-item-content { + display: inline-block; + margin-left: 28px; } + .next-timeline-item-done .next-timeline-item-content .next-timeline-item-title { + margin: 0; + font-size: 12px; + font-weight: bold; + line-height: 16px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #333333; + text-align: left; } + .next-timeline-item-done .next-timeline-item-content .next-timeline-item-body { + margin: 0; + margin-top: 8px; + font-size: 12px; + line-height: 16px; + color: #666666; + text-align: left; } + .next-timeline-item-done .next-timeline-item-content .next-timeline-item-time { + margin: 0; + margin-top: 4px; + margin-bottom: 12px; + font-size: 12px; + color: #999999; + text-align: left; } + .next-timeline-item-done.next-timeline-item-has-left-content > .next-timeline-item-left-content { + position: absolute; + width: 80px; + display: inline-block; + font-size: 12px; + color: #999999; + line-height: 16px; + margin-top: 4px; + text-align: right; + padding-right: 12px; } + .next-timeline-item-done.next-timeline-item-has-left-content > .next-timeline-item-left-content p { + word-break: break-word; } + .next-timeline-item-done.next-timeline-item-has-left-content > .next-timeline-item-timeline { + margin-left: 80px; } + .next-timeline-item-done.next-timeline-item-has-left-content > .next-timeline-item-content { + margin-left: 108px; } + .next-timeline-item-done .next-timeline-item-dot { + background: #C4C6CF; } + .next-timeline-item-done .next-timeline-item-icon { + background: #C4C6CF; + color: #FFFFFF; } + +.next-timeline-item-process { + position: relative; } + .next-timeline-item-process .next-timeline-item-timeline { + position: absolute; + left: 0; + top: 0; + height: 100%; } + .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-node { + position: relative; + width: 16px; + height: 24px; + padding: 4px 0; + text-align: center; + float: left; } + .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom { + width: 40px; + height: auto; + font-size: 12px; + word-break: break-all; + margin-left: calc(-12px); + line-height: 1; } + .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-dot { + display: block; + position: absolute; + width: 8px; + height: 8px; + border-radius: 100%; + top: 50%; + margin-top: -4px; + left: 50%; + margin-left: -4px; } + .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-icon { + display: block; + position: absolute; + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 100%; + top: 50%; + left: 50%; + margin-top: -8px; + margin-left: -8px; } + .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-tail { + position: absolute; + width: auto; + height: calc(100% - 24px); + top: 24px; + left: 8px; } + .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-tail i { + display: inline-block; + vertical-align: top; + height: 100%; + width: 1px; + position: relative; + background: #DCDEE3; + -webkit-transition: all .4s ease; + transition: all .4s ease; } + .next-timeline-item-process .next-timeline-item-content { + display: inline-block; + margin-left: 28px; } + .next-timeline-item-process .next-timeline-item-content .next-timeline-item-title { + margin: 0; + font-size: 12px; + font-weight: bold; + line-height: 16px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #333333; + text-align: left; } + .next-timeline-item-process .next-timeline-item-content .next-timeline-item-body { + margin: 0; + margin-top: 8px; + font-size: 12px; + line-height: 16px; + color: #666666; + text-align: left; } + .next-timeline-item-process .next-timeline-item-content .next-timeline-item-time { + margin: 0; + margin-top: 4px; + margin-bottom: 12px; + font-size: 12px; + color: #999999; + text-align: left; } + .next-timeline-item-process.next-timeline-item-has-left-content > .next-timeline-item-left-content { + position: absolute; + width: 80px; + display: inline-block; + font-size: 12px; + color: #999999; + line-height: 16px; + margin-top: 4px; + text-align: right; + padding-right: 12px; } + .next-timeline-item-process.next-timeline-item-has-left-content > .next-timeline-item-left-content p { + word-break: break-word; } + .next-timeline-item-process.next-timeline-item-has-left-content > .next-timeline-item-timeline { + margin-left: 80px; } + .next-timeline-item-process.next-timeline-item-has-left-content > .next-timeline-item-content { + margin-left: 108px; } + .next-timeline-item-process .next-timeline-item-dot { + background: #5584FF; } + .next-timeline-item-process .next-timeline-item-icon { + background: #5584FF; + color: #FFFFFF; } + +.next-timeline-item-success { + position: relative; } + .next-timeline-item-success .next-timeline-item-timeline { + position: absolute; + left: 0; + top: 0; + height: 100%; } + .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-node { + position: relative; + width: 16px; + height: 24px; + padding: 4px 0; + text-align: center; + float: left; } + .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom { + width: 40px; + height: auto; + font-size: 12px; + word-break: break-all; + margin-left: calc(-12px); + line-height: 1; } + .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-dot { + display: block; + position: absolute; + width: 8px; + height: 8px; + border-radius: 100%; + top: 50%; + margin-top: -4px; + left: 50%; + margin-left: -4px; } + .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-icon { + display: block; + position: absolute; + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 100%; + top: 50%; + left: 50%; + margin-top: -8px; + margin-left: -8px; } + .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-tail { + position: absolute; + width: auto; + height: calc(100% - 24px); + top: 24px; + left: 8px; } + .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-tail i { + display: inline-block; + vertical-align: top; + height: 100%; + width: 1px; + position: relative; + background: #DCDEE3; + -webkit-transition: all .4s ease; + transition: all .4s ease; } + .next-timeline-item-success .next-timeline-item-content { + display: inline-block; + margin-left: 28px; } + .next-timeline-item-success .next-timeline-item-content .next-timeline-item-title { + margin: 0; + font-size: 12px; + font-weight: bold; + line-height: 16px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #333333; + text-align: left; } + .next-timeline-item-success .next-timeline-item-content .next-timeline-item-body { + margin: 0; + margin-top: 8px; + font-size: 12px; + line-height: 16px; + color: #666666; + text-align: left; } + .next-timeline-item-success .next-timeline-item-content .next-timeline-item-time { + margin: 0; + margin-top: 4px; + margin-bottom: 12px; + font-size: 12px; + color: #999999; + text-align: left; } + .next-timeline-item-success.next-timeline-item-has-left-content > .next-timeline-item-left-content { + position: absolute; + width: 80px; + display: inline-block; + font-size: 12px; + color: #999999; + line-height: 16px; + margin-top: 4px; + text-align: right; + padding-right: 12px; } + .next-timeline-item-success.next-timeline-item-has-left-content > .next-timeline-item-left-content p { + word-break: break-word; } + .next-timeline-item-success.next-timeline-item-has-left-content > .next-timeline-item-timeline { + margin-left: 80px; } + .next-timeline-item-success.next-timeline-item-has-left-content > .next-timeline-item-content { + margin-left: 108px; } + .next-timeline-item-success .next-timeline-item-dot { + background: #46BC15; } + .next-timeline-item-success .next-timeline-item-icon { + background: #46BC15; + color: #FFFFFF; } + +.next-timeline-item-error { + position: relative; } + .next-timeline-item-error .next-timeline-item-timeline { + position: absolute; + left: 0; + top: 0; + height: 100%; } + .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-node { + position: relative; + width: 16px; + height: 24px; + padding: 4px 0; + text-align: center; + float: left; } + .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom { + width: 40px; + height: auto; + font-size: 12px; + word-break: break-all; + margin-left: calc(-12px); + line-height: 1; } + .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-dot { + display: block; + position: absolute; + width: 8px; + height: 8px; + border-radius: 100%; + top: 50%; + margin-top: -4px; + left: 50%; + margin-left: -4px; } + .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-icon { + display: block; + position: absolute; + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 100%; + top: 50%; + left: 50%; + margin-top: -8px; + margin-left: -8px; } + .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-tail { + position: absolute; + width: auto; + height: calc(100% - 24px); + top: 24px; + left: 8px; } + .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-tail i { + display: inline-block; + vertical-align: top; + height: 100%; + width: 1px; + position: relative; + background: #DCDEE3; + -webkit-transition: all .4s ease; + transition: all .4s ease; } + .next-timeline-item-error .next-timeline-item-content { + display: inline-block; + margin-left: 28px; } + .next-timeline-item-error .next-timeline-item-content .next-timeline-item-title { + margin: 0; + font-size: 12px; + font-weight: bold; + line-height: 16px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #333333; + text-align: left; } + .next-timeline-item-error .next-timeline-item-content .next-timeline-item-body { + margin: 0; + margin-top: 8px; + font-size: 12px; + line-height: 16px; + color: #666666; + text-align: left; } + .next-timeline-item-error .next-timeline-item-content .next-timeline-item-time { + margin: 0; + margin-top: 4px; + margin-bottom: 12px; + font-size: 12px; + color: #999999; + text-align: left; } + .next-timeline-item-error.next-timeline-item-has-left-content > .next-timeline-item-left-content { + position: absolute; + width: 80px; + display: inline-block; + font-size: 12px; + color: #999999; + line-height: 16px; + margin-top: 4px; + text-align: right; + padding-right: 12px; } + .next-timeline-item-error.next-timeline-item-has-left-content > .next-timeline-item-left-content p { + word-break: break-word; } + .next-timeline-item-error.next-timeline-item-has-left-content > .next-timeline-item-timeline { + margin-left: 80px; } + .next-timeline-item-error.next-timeline-item-has-left-content > .next-timeline-item-content { + margin-left: 108px; } + .next-timeline-item-error .next-timeline-item-dot { + background: #FF3000; } + .next-timeline-item-error .next-timeline-item-icon { + background: #FF3000; + color: #FFFFFF; } + +.next-timeline-item-last .next-timeline-item-tail { + display: none; } + +.next-timeline-item-has-left-content { + min-height: 48px; } + +.next-timeline-item-folder.next-timeline-item-has-left-content { + min-height: auto; } + +.next-transfer { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; } + .next-transfer *, + .next-transfer *:before, + .next-transfer *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-transfer-panel { + display: inline-block; + border: 1px solid #DCDEE3; + border-radius: 3px; + background-color: #FFFFFF; + vertical-align: middle; + overflow: hidden; } + .next-transfer-panel-header { + padding: 8px 20px; + border-bottom: 1px solid #DCDEE3; + background-color: #F7F8FA; + color: #333333; + font-size: 12px; } + .next-transfer-panel-search { + padding: 0 4px; + margin-top: 8px; + margin-bottom: 0; + width: 100%; } + .next-transfer .next-transfer-panel-list { + width: 180px; + /* TODO */ + height: 160px; + padding: 0; + border: none; + -webkit-box-shadow: none; + box-shadow: none; + border-radius: 0; + overflow-y: auto; } + .next-transfer-panel-not-found-container { + display: table; + width: 100%; + height: 100%; } + .next-transfer-panel-not-found { + display: table-cell; + vertical-align: middle; + text-align: center; + color: #999999; + font-size: 14px; } + .next-transfer-panel-item.next-focused { + -webkit-transition: background-color .2s ease; + transition: background-color .2s ease; } + .next-transfer-panel-item:not(.next-disabled).next-simple:hover { + color: #5584FF; } + .next-transfer-panel-item.next-insert-before:before { + position: absolute; + top: 0; + left: 0; + content: ''; + width: 100%; + border-top: 1px solid #5584FF; } + .next-transfer-panel-item.next-insert-after:after { + position: absolute; + left: 0; + bottom: 0; + content: ''; + width: 100%; + border-bottom: 1px solid #5584FF; } + .next-transfer-panel-footer { + padding: 8px 20px; + border-top: 1px solid #DCDEE3; + background-color: #FFFFFF; + font-size: 0; } + .next-transfer-panel-count { + /* TODO */ + margin-left: 4px; + font-size: 12px; + vertical-align: middle; + color: #333333; } + .next-transfer-panel-move-all { + font-size: 12px; + color: #5584FF; + cursor: pointer; } + .next-transfer-panel-move-all.next-disabled { + color: #CCCCCC; + cursor: not-allowed; } + .next-transfer-operations { + display: inline-block; + vertical-align: middle; + margin: 0 20px; } + .next-transfer-move.next-icon { + color: #C4C6CF; } + .next-transfer-operation.next-btn { + display: block; } + .next-transfer-operation.next-btn + .next-transfer-operation.next-btn { + margin-top: 8px; } + .next-transfer-operation.next-btn .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-tree { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-tree *, + .next-tree *:before, + .next-tree *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-tree, .next-tree-child-tree { + margin: 0; + padding: 0; + list-style: none; } + .next-tree-node { + white-space: nowrap; } + .next-tree-node-inner { + font-size: 0; + outline: none; } + .next-tree-node-label-wrapper { + display: inline-block; + margin: 0 4px; + vertical-align: middle; } + .next-tree-node-label { + height: 20px; + line-height: 20px; + padding: 0 4px; + border-radius: 3px; + font-size: 12px; } + .next-tree-node-input.next-input { + margin: 0 4px; } + .next-tree-switcher { + position: relative; + display: inline-block; + vertical-align: middle; + margin-right: 8px; } + .next-tree-switcher.next-noline { + width: 12px; + height: 12px; + line-height: 12px; + cursor: pointer; } + .next-tree-switcher.next-noline .next-tree-switcher-icon { + -webkit-transition: -webkit-transform cubic-bezier(0.23, 1, 0.32, 1) 300ms; + transition: -webkit-transform cubic-bezier(0.23, 1, 0.32, 1) 300ms; + transition: transform cubic-bezier(0.23, 1, 0.32, 1) 300ms; + transition: transform cubic-bezier(0.23, 1, 0.32, 1) 300ms, -webkit-transform cubic-bezier(0.23, 1, 0.32, 1) 300ms; + color: #999999; } + .next-tree-switcher.next-noline .next-tree-switcher-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-tree-switcher.next-noline.next-close .next-tree-switcher-icon { + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); } + .next-tree-switcher.next-noline.next-close .next-tree-switcher-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-tree-switcher.next-noline:not(.next-disabled):hover .next-tree-switcher-icon { + color: #333333; } + .next-tree-switcher.next-noline.next-disabled { + cursor: not-allowed; } + .next-tree-switcher.next-noline.next-disabled .next-tree-switcher-icon { + color: #CCCCCC; } + .next-tree-switcher.next-noop-noline { + width: 12px; + height: 12px; } + .next-tree-switcher.next-line { + width: 16px; + height: 16px; + line-height: 14px; + border: 1px solid #C4C6CF; + border-radius: 3px; + background-color: #FFFFFF; + cursor: pointer; } + .next-tree-switcher.next-line .next-tree-switcher-icon { + margin-left: 3px; + color: #666666; } + .next-tree-switcher.next-line .next-tree-switcher-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-tree-switcher.next-line .next-tree-switcher-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -1px; + margin-right: -4px; } + .next-tree-switcher.next-line .next-tree-switcher-icon:before { + width: 16px; + font-size: 16px; } } + .next-tree-switcher.next-line:not(.next-disabled):hover { + border-color: #A0A2AD; + background-color: #F2F3F7; } + .next-tree-switcher.next-line:not(.next-disabled):hover .next-tree-switcher-icon { + color: #333333; } + .next-tree-switcher.next-line.next-disabled { + border-color: #E6E7EB; + background-color: #FFFFFF; + cursor: not-allowed; } + .next-tree-switcher.next-line.next-disabled .next-tree-switcher-icon { + color: #CCCCCC; } + .next-tree-switcher.next-noop-line { + width: 16px; + height: 16px; } + .next-tree-switcher.next-noop-line-noroot { + height: 0; + border-left: 1px solid #C4C6CF; + border-bottom: 1px solid #C4C6CF; } + .next-tree-switcher.next-noop-line-noroot .next-tree-right-angle { + bottom: -1px; } + .next-tree-switcher.next-loading.next-loading-noline { + width: 12px; + height: 12px; + line-height: 12px; } + .next-tree-switcher.next-loading.next-loading-line { + width: 16px; + height: 16px; + line-height: 14px; + border: 1px solid transparent; } + .next-tree-switcher.next-loading .next-tree-switcher-icon { + color: #5584FF; } + .next-tree-switcher.next-loading .next-tree-switcher-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-tree-right-angle { + position: absolute; + bottom: 6.5px; + left: -17.5px; + display: block; + width: 16.5px; + height: 22px; + border-left: 1px solid #C4C6CF; + border-bottom: 1px solid #C4C6CF; } + .next-tree.next-label-block .next-tree-node-inner { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + outline: none; } + .next-tree.next-label-block .next-tree-node-label-wrapper { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; } + .next-tree.next-node-indent .next-tree-node .next-tree-node { + margin-left: 24px; } + .next-tree.next-node-indent .next-tree-node-inner { + padding-top: 2px; + padding-bottom: 2px; } + .next-tree.next-node-indent .next-tree-node-inner:focus .next-tree-node-label { + color: #333333; + background-color: #F2F3F7; } + .next-tree.next-node-indent .next-tree-node-label-wrapper { + border-top: 2px solid transparent; + border-bottom: 2px solid transparent; } + .next-tree.next-node-indent .next-tree-node-label { + -webkit-transition: color cubic-bezier(0.23, 1, 0.32, 1) 300ms, background-color cubic-bezier(0.23, 1, 0.32, 1) 300ms; + transition: color cubic-bezier(0.23, 1, 0.32, 1) 300ms, background-color cubic-bezier(0.23, 1, 0.32, 1) 300ms; + cursor: default; + color: #333333; + background-color: #FFFFFF; } + .next-tree.next-node-indent .next-tree-node-label-selectable { + cursor: pointer; } + .next-tree.next-node-indent .next-tree-node-label:hover { + color: #333333; + background-color: #F2F3F7; } + .next-tree.next-node-indent .next-tree-node-inner.next-selected .next-tree-node-label { + color: #333333; + background-color: #DEE8FF; } + .next-tree.next-node-indent .next-tree-node-inner.next-disabled .next-tree-node-label, + .next-tree.next-node-indent .next-tree-node-inner.next-disabled .next-tree-node-label:hover { + color: #CCCCCC; + background-color: #FFFFFF; + cursor: not-allowed; } + .next-tree.next-node-indent .next-tree-node-inner.next-drag-over .next-tree-node-label { + background-color: #5584FF; + color: #FFFFFF; + opacity: .8; } + .next-tree.next-node-indent .next-tree-node-inner.next-drag-over-gap-top .next-tree-node-label-wrapper { + border-top-color: #5584FF; } + .next-tree.next-node-indent .next-tree-node-inner.next-drag-over-gap-bottom .next-tree-node-label-wrapper { + border-bottom-color: #5584FF; } + .next-tree.next-node-block .next-tree-node-inner { + padding-top: 4px; + padding-bottom: 4px; + -webkit-transition: color cubic-bezier(0.23, 1, 0.32, 1) 300ms, background-color cubic-bezier(0.23, 1, 0.32, 1) 300ms; + transition: color cubic-bezier(0.23, 1, 0.32, 1) 300ms, background-color cubic-bezier(0.23, 1, 0.32, 1) 300ms; + cursor: pointer; + color: #333333; + background-color: #FFFFFF; } + .next-tree.next-node-block .next-tree-node-inner:hover, .next-tree.next-node-block .next-tree-node-inner:focus { + color: #333333; + background-color: #F2F3F7; } + .next-tree.next-node-block .next-tree-node-inner.next-selected { + color: #333333; + background-color: #DEE8FF; } + .next-tree.next-node-block .next-tree-node-inner.next-disabled, .next-tree.next-node-block .next-tree-node-inner.next-disabled:hover { + color: #CCCCCC; + background-color: #FFFFFF; + cursor: not-allowed; } + .next-tree.next-show-line .next-tree-node .next-tree-node:not(:last-child) { + margin-left: 7.5px; + border-left: 1px solid #C4C6CF; + padding-left: 15.5px; } + .next-tree-node.next-filtered > .next-tree-node-inner .next-tree-node-label { + color: #5584FF; } + .next-tree-node.next-filtered > .next-tree-node-inner .next-tree-node-label:hover { + color: #5584FF; } + +.next-tree[dir='rtl'] .next-tree-switcher { + margin-left: 8px; + margin-right: 0; } + +.next-tree[dir='rtl'] .next-tree-switcher.next-noop-line-noroot { + border-left: none; + border-right: 1px solid #C4C6CF; } + +.next-tree[dir='rtl'] .next-tree-right-angle { + left: auto; + right: -17.5px; + border-left: none; + border-right: 1px solid #C4C6CF; } + +.next-tree[dir='rtl'].next-show-line .next-tree-node .next-tree-node:not(:last-child) { + margin-left: 0; + margin-right: 7.5px; + border-left: none; + border-right: 1px solid #C4C6CF; + padding-left: 0; + padding-right: 15.5px; } + +.next-tree[dir='rtl'].next-node-indent .next-tree-node .next-tree-node { + margin-left: 0; + margin-right: 24px; } + +.next-tree-select { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-tree-select *, + .next-tree-select *:before, + .next-tree-select *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-tree-select-dropdown { + padding: 8px 20px; + background: #FFFFFF; + border: 1px solid #DCDEE3; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; } + .next-tree-select-not-found { + height: 16px; + font-size: 12px; + color: #999999; } + +.next-upload-list[dir=rtl].next-upload-list-text .next-upload-list-item { + padding: 4px 8px; + padding-left: 36px; } + +.next-upload-list[dir=rtl].next-upload-list-text .next-icon { + left: 12px; + right: auto; } + +.next-upload-list[dir=rtl].next-upload-list-image .next-icon-close { + float: left; + margin-left: 4px; + margin-right: 0; } + +.next-upload-list[dir=rtl].next-upload-list-image .next-upload-list-item-thumbnail { + float: right; + margin-left: 8px; + margin-right: 0; } + +.next-upload-list[dir=rtl].next-upload-list-image .next-upload-list-item-progress { + margin-right: 56px; + margin-left: 20px; } + +.next-upload { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-upload *, + .next-upload *:before, + .next-upload *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-upload-inner { + outline: 0; + display: inline-block; } + .next-upload-inner.next-hidden { + display: none; } + .next-upload-list { + overflow: hidden; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-upload-list *, + .next-upload-list *:before, + .next-upload-list *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-upload-list-item { + position: relative; } + .next-upload-list-item.next-hidden { + display: none; } + .next-upload-list-item-name { + text-decoration: none; } + .next-upload.next-disabled { + border-color: #E6E7EB !important; + color: #CCCCCC !important; } + .next-upload.next-disabled .next-icon-close { + cursor: not-allowed !important; } + .next-upload.next-disabled .next-upload-inner * { + color: #CCCCCC !important; + border-color: #E6E7EB !important; + cursor: not-allowed !important; } + +.next-upload-list-text .next-upload-list-item { + background-color: #F2F3F7; + padding: 4px 8px; + padding-right: 36px; + height: 40px; + line-height: 32px; + font-size: 12px; + overflow: hidden; + -webkit-transition: all .2s ease-out; + transition: all .2s ease-out; } + .next-upload-list-text .next-upload-list-item:not(:last-child) { + margin-bottom: 4px; } + .next-upload-list-text .next-upload-list-item .next-icon { + position: absolute; + top: 0; + right: 12px; + color: #999999; + cursor: pointer; + text-align: center; + -webkit-transition: all .2s ease-out; + transition: all .2s ease-out; + line-height: 40px; } + .next-upload-list-text .next-upload-list-item .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-upload-list-text .next-upload-list-item:hover { + background-color: #F2F3F7; } + .next-upload-list-text .next-upload-list-item:hover .next-icon { + color: #666666; } + .next-upload-list-text .next-upload-list-item-name-wrap { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + margin-right: 4px; } + .next-upload-list-text .next-upload-list-item-name { + color: #333333; + -webkit-transition: all .2s ease-out; + transition: all .2s ease-out; } + .next-upload-list-text .next-upload-list-item-size { + color: #999999; + margin-left: 8px; } + .next-upload-list-text .next-upload-list-item-uploading { + line-height: 16px; } + .next-upload-list-text .next-upload-list-item-done { + line-height: 32px; } + .next-upload-list-text .next-upload-list-item-done:hover .next-upload-list-item-name { + color: #5584FF; } + .next-upload-list-text .next-upload-list-item-done:hover .next-upload-list-item-size { + color: #5584FF; } + .next-upload-list-text .next-upload-list-item-error { + /* stylelint-disable declaration-no-important */ + background-color: #FFECE4 !important; } + .next-upload-list-text .next-upload-list-item-error.next-upload-list-item-error-with-msg { + line-height: 16px; } + .next-upload-list-text .next-upload-list-item-error-msg { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + color: #FF3000; } + +.next-upload-list-image .next-upload-list-item { + -webkit-box-sizing: content-box; + box-sizing: content-box; + border: 1px solid #DCDEE3; + background-color: #FFFFFF; + padding: 8px; + height: 48px; + line-height: 48px; + font-size: 12px; + -webkit-transition: all .2s ease-out; + transition: all .2s ease-out; + overflow: hidden; } + .next-upload-list-image .next-upload-list-item:not(:last-child) { + margin-bottom: 4px; } + .next-upload-list-image .next-upload-list-item:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + .next-upload-list-image .next-upload-list-item .next-icon-close { + float: right; + margin-right: 4px; + cursor: pointer; + color: #999999; + text-align: center; } + .next-upload-list-image .next-upload-list-item .next-icon-close:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-upload-list-image .next-upload-list-item:hover { + border-color: #5584FF; } + .next-upload-list-image .next-upload-list-item:hover .next-icon-close { + color: #666666; } + .next-upload-list-image .next-upload-list-item-name { + display: block; + color: #333333; + margin-left: 56px; + margin-right: 20px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + -webkit-transition: all .2s ease-out; + transition: all .2s ease-out; } + .next-upload-list-image .next-upload-list-item-size { + color: #999999; + margin-left: 8px; } + .next-upload-list-image .next-upload-list-item-progress { + line-height: 24px; } + .next-upload-list-image .next-upload-list-item-done:hover .next-upload-list-item-name { + color: #5584FF; } + .next-upload-list-image .next-upload-list-item-done:hover .next-upload-list-item-size { + color: #5584FF; } + .next-upload-list-image .next-upload-list-item-thumbnail { + float: left; + width: 48px; + height: 48px; + color: #CCCCCC; + border: 1px solid #DCDEE3; + background-color: #F2F3F7; + margin-right: 8px; + vertical-align: middle; + text-align: center; + overflow: hidden; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-upload-list-image .next-upload-list-item-thumbnail img { + width: 100%; + height: 100%; } + .next-upload-list-image .next-upload-list-item-thumbnail .next-icon { + display: block; + margin: 0; + line-height: 48px; } + .next-upload-list-image .next-upload-list-item-thumbnail .next-icon:before { + width: 24px; + font-size: 24px; + line-height: inherit; } + .next-upload-list-image .next-upload-list-item-error { + border-color: #FF3000 !important; + background-color: #FFFFFF; } + .next-upload-list-image .next-upload-list-item-uploading { + background-color: #FFFFFF; } + .next-upload-list-image .next-upload-list-item-uploading .next-upload-list-item-name { + height: 24px; + line-height: 24px; } + .next-upload-list-image .next-upload-list-item-uploading .next-upload-list-item-progress { + margin-left: 56px; + margin-right: 20px; + height: 24px; + line-height: 24px; } + .next-upload-list-image .next-upload-list-item-error-with-msg .next-upload-list-item-name, + .next-upload-list-image .next-upload-list-item-error-with-msg .next-upload-list-item-error-msg { + height: 24px; + line-height: 24px; } + .next-upload-list-image .next-upload-list-item-error-with-msg .next-upload-list-item-error-msg { + margin-left: 56px; + margin-right: 20px; + color: #FF3000; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } + +.next-upload-list-card { + display: inline-block; } + .next-upload-list-card .next-upload-list-item { + vertical-align: middle; + float: left; } + .next-upload-list-card .next-upload-list-item:not(:last-child) { + margin-right: 12px; } + .next-upload-list-card .next-upload-list-item-wrapper { + position: relative; + border: 1px solid #C4C6CF; + width: 100px; + height: 100px; + padding: 0; + background-color: transparent; } + .next-upload-list-card .next-upload-list-item-thumbnail { + display: table; + text-align: center; + vertical-align: middle; + width: 100%; + height: 100%; + color: #CCCCCC; + font-size: 12px; } + .next-upload-list-card .next-upload-list-item-thumbnail img { + width: 100%; + height: 100%; } + .next-upload-list-card .next-upload-list-item-thumbnail img:focus { + outline: 0; } + .next-upload-list-card .next-upload-list-item-thumbnail .next-icon { + width: 100%; } + .next-upload-list-card .next-upload-list-item-thumbnail .next-icon:before { + width: 48px; + font-size: 48px; + line-height: inherit; } + .next-upload-list-card .next-upload-list-item-handler { + display: table-cell; + width: 100%; + vertical-align: middle; } + .next-upload-list-card .next-upload-list-item-name { + display: block; + width: 100px; + text-align: center; + margin-top: 4px; + font-size: 12px; + color: #666666; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } + .next-upload-list-card .next-upload-list-item-progress { + position: absolute; + font-size: 0; + bottom: 0; + left: 0; + width: 100%; } + .next-upload-list-card .next-upload-list-item-progress .next-progress-line-underlay { + border-radius: 0; } + .next-upload-list-card .next-upload-list-item-progress .next-progress-line-overlay { + border-radius: 0; } + .next-upload-list-card .next-upload-list-item-uploading .next-upload-list-item-wrapper { + background-color: #F7F8FA; } + .next-upload-list-card .next-upload-list-item:hover .next-upload-tool { + opacity: .8; } + .next-upload-list-card .next-upload-list-item .next-upload-tool { + position: absolute; + z-index: 1; + background-color: rgba(0, 0, 0, 0.7); + -webkit-transition: all .3s ease; + transition: all .3s ease; + opacity: 0; + width: 100%; + height: 28px; + left: 0; + bottom: 0; } + .next-upload-list-card .next-upload-list-item .next-upload-tool .next-icon { + width: 49%; + text-align: center; + line-height: 28px; + color: #FFFFFF; } + .next-upload-list-card .next-upload-list-item .next-upload-tool .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-upload-list-card .next-upload-list-item .next-upload-tool.next-noclose .next-icon { + width: 100%; } + .next-upload-list-card .next-upload-list-item .next-upload-tool-close { + cursor: pointer; } + .next-upload-list-card .next-upload-list-item .next-upload-tool-download-icon { + border-right: 1px solid #FFFFFF; } + .next-upload-list-card .next-upload-list-item-error .next-upload-list-item-wrapper { + border-color: #FF3000; } + +.next-upload-card { + border: 1px dashed #C4C6CF; + width: 100px; + height: 100px; + background-color: #FFFFFF; + text-align: center; + cursor: pointer; + -webkit-transition: border-color .3s ease; + transition: border-color .3s ease; + display: table-cell; + vertical-align: middle; } + .next-upload-card .next-icon { + color: #C4C6CF; } + .next-upload-card .next-icon:before { + width: 24px; + font-size: 24px; + line-height: inherit; } + .next-upload-card .next-upload-text { + font-size: 12px; + margin-top: 12px; + color: #666666; } + .next-upload-card:hover { + border-color: #5584FF; } + .next-upload-card:hover .next-icon { + color: #5584FF; } + .next-upload-card:hover .next-upload-text { + color: #5584FF; } + +.next-upload-dragable .next-upload-inner { + display: block; } + +.next-upload-dragable .next-upload-drag { + border: 1px dashed #C4C6CF; + -webkit-transition: border-color .3s ease; + transition: border-color .3s ease; + cursor: pointer; + border-radius: 3px; + background-color: transparent; + text-align: center; + margin-bottom: 4px; } + .next-upload-dragable .next-upload-drag-icon { + margin: 20px 0 0; + color: #666666; } + .next-upload-dragable .next-upload-drag-icon .next-upload-drag-upload-icon::before { + content: "\E7EE"; } + .next-upload-dragable .next-upload-drag-text { + margin: 12px 0 0; + font-size: 14px; + color: #666666; } + .next-upload-dragable .next-upload-drag-hint { + margin: 4px 0 20px; + font-size: 12px; + color: #999999; } + .next-upload-dragable .next-upload-drag-over { + border-color: #5584FF; } diff --git a/dist/next-noreset.css b/dist/next-noreset.css new file mode 100644 index 0000000000..0e29276db2 --- /dev/null +++ b/dist/next-noreset.css @@ -0,0 +1,17759 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@charset "UTF-8"; +/* stylelint-disable-next-line */ +@-webkit-keyframes fadeIn { + 0% { + opacity: 0; } + 100% { + opacity: 1; } } + +@keyframes fadeIn { + 0% { + opacity: 0; } + 100% { + opacity: 1; } } + +@-webkit-keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-100px); + -ms-transform: translateY(-100px); + transform: translateY(-100px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } } + +@keyframes fadeInDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-100px); + -ms-transform: translateY(-100px); + transform: translateY(-100px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } } + +@-webkit-keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-20px); + -ms-transform: translateX(-20px); + transform: translateX(-20px); } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } } + +@keyframes fadeInLeft { + 0% { + opacity: 0; + -webkit-transform: translateX(-20px); + -ms-transform: translateX(-20px); + transform: translateX(-20px); } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } } + +@-webkit-keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(20px); + -ms-transform: translateX(20px); + transform: translateX(20px); } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } } + +@keyframes fadeInRight { + 0% { + opacity: 0; + -webkit-transform: translateX(20px); + -ms-transform: translateX(20px); + transform: translateX(20px); } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } } + +@-webkit-keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } } + +@keyframes fadeInUp { + 0% { + opacity: 0; + -webkit-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } } + +@-webkit-keyframes fadeOut { + 0% { + opacity: 1; } + 100% { + opacity: 0; } } + +@keyframes fadeOut { + 0% { + opacity: 1; } + 100% { + opacity: 0; } } + +@-webkit-keyframes fadeOutDown { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } + 100% { + opacity: 0; + -webkit-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); } } + +@keyframes fadeOutDown { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } + 100% { + opacity: 0; + -webkit-transform: translateY(20px); + -ms-transform: translateY(20px); + transform: translateY(20px); } } + +@-webkit-keyframes fadeOutLeft { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } + 100% { + opacity: 0; + -webkit-transform: translateX(-20px); + -ms-transform: translateX(-20px); + transform: translateX(-20px); } } + +@keyframes fadeOutLeft { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } + 100% { + opacity: 0; + -webkit-transform: translateX(-20px); + -ms-transform: translateX(-20px); + transform: translateX(-20px); } } + +@-webkit-keyframes fadeOutRight { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } + 100% { + opacity: 0; + -webkit-transform: translateX(20px); + -ms-transform: translateX(20px); + transform: translateX(20px); } } + +@keyframes fadeOutRight { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } + 100% { + opacity: 0; + -webkit-transform: translateX(20px); + -ms-transform: translateX(20px); + transform: translateX(20px); } } + +@-webkit-keyframes fadeOutUp { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } + 100% { + opacity: 0; + -webkit-transform: translateY(-100px); + -ms-transform: translateY(-100px); + transform: translateY(-100px); } } + +@keyframes fadeOutUp { + 0% { + opacity: 1; + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); } + 100% { + opacity: 0; + -webkit-transform: translateY(-100px); + -ms-transform: translateY(-100px); + transform: translateY(-100px); } } + +@-webkit-keyframes zoomIn { + 0% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + -ms-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } + 50% { + opacity: 1; } } + +@keyframes zoomIn { + 0% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + -ms-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } + 50% { + opacity: 1; } } + +@-webkit-keyframes zoomOut { + 0% { + opacity: 1; } + 50% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + -ms-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } + 100% { + opacity: 0; } } + +@keyframes zoomOut { + 0% { + opacity: 1; } + 50% { + opacity: 0; + -webkit-transform: scale3d(0.3, 0.3, 0.3); + -ms-transform: scale3d(0.3, 0.3, 0.3); + transform: scale3d(0.3, 0.3, 0.3); } + 100% { + opacity: 0; } } + +@-webkit-keyframes expandInDown { + 0% { + opacity: 0; + -webkit-transform: scaleY(0.6); + -ms-transform: scaleY(0.6); + transform: scaleY(0.6); + -webkit-transform-origin: left top 0; + -ms-transform-origin: left top 0; + transform-origin: left top 0; } + 100% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: left top 0; + -ms-transform-origin: left top 0; + transform-origin: left top 0; } } + +@keyframes expandInDown { + 0% { + opacity: 0; + -webkit-transform: scaleY(0.6); + -ms-transform: scaleY(0.6); + transform: scaleY(0.6); + -webkit-transform-origin: left top 0; + -ms-transform-origin: left top 0; + transform-origin: left top 0; } + 100% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: left top 0; + -ms-transform-origin: left top 0; + transform-origin: left top 0; } } + +@-webkit-keyframes expandInUp { + 0% { + opacity: 0; + -webkit-transform: scaleY(0.6); + -ms-transform: scaleY(0.6); + transform: scaleY(0.6); + -webkit-transform-origin: left bottom 0; + -ms-transform-origin: left bottom 0; + transform-origin: left bottom 0; } + 100% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: left bottom 0; + -ms-transform-origin: left bottom 0; + transform-origin: left bottom 0; } } + +@keyframes expandInUp { + 0% { + opacity: 0; + -webkit-transform: scaleY(0.6); + -ms-transform: scaleY(0.6); + transform: scaleY(0.6); + -webkit-transform-origin: left bottom 0; + -ms-transform-origin: left bottom 0; + transform-origin: left bottom 0; } + 100% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: left bottom 0; + -ms-transform-origin: left bottom 0; + transform-origin: left bottom 0; } } + +@-webkit-keyframes expandInWithFade { + 0% { + opacity: 0; } + 40% { + opacity: .1; } + 50% { + opacity: .9; } + 100% { + opacity: 1; } } + +@keyframes expandInWithFade { + 0% { + opacity: 0; } + 40% { + opacity: .1; } + 50% { + opacity: .9; } + 100% { + opacity: 1; } } + +@-webkit-keyframes expandOutUp { + 0% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: left top 0; + -ms-transform-origin: left top 0; + transform-origin: left top 0; } + 100% { + opacity: 0; + -webkit-transform: scaleY(0.6); + -ms-transform: scaleY(0.6); + transform: scaleY(0.6); + -webkit-transform-origin: left top 0; + -ms-transform-origin: left top 0; + transform-origin: left top 0; } } + +@keyframes expandOutUp { + 0% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: left top 0; + -ms-transform-origin: left top 0; + transform-origin: left top 0; } + 100% { + opacity: 0; + -webkit-transform: scaleY(0.6); + -ms-transform: scaleY(0.6); + transform: scaleY(0.6); + -webkit-transform-origin: left top 0; + -ms-transform-origin: left top 0; + transform-origin: left top 0; } } + +@-webkit-keyframes expandOutDown { + 0% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: left bottom 0; + -ms-transform-origin: left bottom 0; + transform-origin: left bottom 0; } + 100% { + opacity: 0; + -webkit-transform: scaleY(0.6); + -ms-transform: scaleY(0.6); + transform: scaleY(0.6); + -webkit-transform-origin: left bottom 0; + -ms-transform-origin: left bottom 0; + transform-origin: left bottom 0; } } + +@keyframes expandOutDown { + 0% { + opacity: 1; + -webkit-transform: scaleY(1); + -ms-transform: scaleY(1); + transform: scaleY(1); + -webkit-transform-origin: left bottom 0; + -ms-transform-origin: left bottom 0; + transform-origin: left bottom 0; } + 100% { + opacity: 0; + -webkit-transform: scaleY(0.6); + -ms-transform: scaleY(0.6); + transform: scaleY(0.6); + -webkit-transform-origin: left bottom 0; + -ms-transform-origin: left bottom 0; + transform-origin: left bottom 0; } } + +@-webkit-keyframes expandOutWithFade { + 0% { + opacity: 1; } + 70% { + opacity: 0; } + 100% { + opacity: 0; } } + +@keyframes expandOutWithFade { + 0% { + opacity: 1; } + 70% { + opacity: 0; } + 100% { + opacity: 0; } } + +@-webkit-keyframes pulse { + from { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); } + 20% { + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); } + to { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); } } + +@keyframes pulse { + from { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); } + 20% { + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); } + to { + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); } } + +.fadeIn { + -webkit-animation-name: fadeIn; + animation-name: fadeIn; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeInDown { + -webkit-animation-name: fadeInDown; + animation-name: fadeInDown; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeInLeft { + -webkit-animation-name: fadeInLeft; + animation-name: fadeInLeft; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeInRight { + -webkit-animation-name: fadeInRight; + animation-name: fadeInRight; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeInUp { + -webkit-animation-name: fadeInUp; + animation-name: fadeInUp; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeOut { + -webkit-animation-name: fadeOut; + animation-name: fadeOut; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeOutDown { + -webkit-animation-name: fadeOutDown; + animation-name: fadeOutDown; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeOutLeft { + -webkit-animation-name: fadeOutLeft; + animation-name: fadeOutLeft; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeOutRight { + -webkit-animation-name: fadeOutRight; + animation-name: fadeOutRight; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.fadeOutUp { + -webkit-animation-name: fadeOutUp; + animation-name: fadeOutUp; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.2s; + animation-duration: 0.2s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.zoomIn { + -webkit-animation-name: zoomIn; + animation-name: zoomIn; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.zoomOut { + -webkit-animation-name: zoomOut; + animation-name: zoomOut; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.expandInDown { + -webkit-animation-name: expandInDown; + animation-name: expandInDown; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.expandOutUp { + -webkit-animation-name: expandOutUp; + animation-name: expandOutUp; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.15s; + animation-duration: 0.15s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.expandInUp { + -webkit-animation-name: expandInUp; + animation-name: expandInUp; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.expandOutDown { + -webkit-animation-name: expandOutDown; + animation-name: expandOutDown; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.15s; + animation-duration: 0.15s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.pulse { + -webkit-animation-name: pulse; + animation-name: pulse; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.expand-enter { + overflow: hidden; } + +.expand-enter-active { + -webkit-transition: all .3s ease-out; + transition: all .3s ease-out; } + .expand-enter-active > * { + -webkit-animation-name: expandInWithFade; + animation-name: expandInWithFade; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.2s; + animation-duration: 0.2s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: "forwards"; + animation-fill-mode: "forwards"; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +.expand-leave { + overflow: hidden; } + +.expand-leave-active { + -webkit-transition: all .2s ease-out; + transition: all .2s ease-out; } + .expand-leave-active > * { + -webkit-animation-name: expandOutWithFade; + animation-name: expandOutWithFade; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 0.2s; + animation-duration: 0.2s; + -webkit-animation-delay: 0s; + animation-delay: 0s; + -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); + -webkit-animation-fill-mode: "forwards"; + animation-fill-mode: "forwards"; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; } + +/** + * 尺寸 基础尺寸 + * 命名能在语义的前提下简单就尽量简单, 这里可以是 size-2x, space-2x, size-base ... + * 不过可以在语义的前提下做的更精简一些, 于是用了s2, s1等 + * 可用变量: `$s1 - $s8` + * @example scss - 使用 + * .element { + * padding: $s1 !default; + * } + * + * @example css - CSS 输出 + * .element { + * padding: 4px !default; + * } + */ +.next-sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; + margin: -1px; } + +.next-badge { + -webkit-box-sizing: border-box; + box-sizing: border-box; + /* @include global-font; */ + position: relative; + display: inline-block; + vertical-align: middle; + line-height: 1; } + .next-badge *, + .next-badge *:before, + .next-badge *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-badge .next-badge-count { + color: #FFFFFF; + background: #FF3000; + text-align: center; + white-space: nowrap; + border-radius: 8px; + position: absolute; + width: auto; + height: 16px; + min-width: 8px; + padding: 0 4px 0 4px; + font-size: 12px; + line-height: 16px; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + top: -.5em; } + .next-badge .next-badge-count a, + .next-badge .next-badge-count a:hover { + color: #FFFFFF; } + .next-badge .next-badge-dot { + color: #FFFFFF; + background: #FF3000; + text-align: center; + white-space: nowrap; + border-radius: 8px; + position: absolute; + width: 8px; + height: 8px; + min-width: 8px; + padding: 0; + font-size: 1px; + line-height: 1; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + top: -.5em; } + .next-badge .next-badge-dot a, + .next-badge .next-badge-dot a:hover { + color: #FFFFFF; } + .next-badge .next-badge-custom { + line-height: 1.166667; + white-space: nowrap; + font-size: 12px; + padding-left: 4px; + padding-right: 4px; + border-radius: 3px; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); } + .next-badge .next-badge-custom > * { + line-height: 1; } + .next-badge .next-badge-custom > i:before, + .next-badge .next-badge-custom > .next-icon:before { + font-size: inherit; + width: auto; + vertical-align: top; } + .next-badge .next-badge-scroll-number { + position: absolute; + top: -4px; + z-index: 10; + overflow: hidden; + -webkit-transform-origin: left center; + -ms-transform-origin: left center; + transform-origin: left center; } + .next-badge-scroll-number-only { + position: relative; + display: inline-block; + transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + min-width: 8px; } + .next-badge-scroll-number-only span { + display: block; + height: 16px; + line-height: 16px; + font-size: 12px; } + .next-badge-not-a-wrapper .next-badge-count, + .next-badge-not-a-wrapper .next-badge-custom { + position: relative; + display: block; + top: auto; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } + .next-badge-not-a-wrapper .next-badge-dot { + position: relative; + display: block; + top: auto; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); } + .next-badge-list-wrapper { + margin-left: 0; } + .next-badge-list-wrapper li { + margin-bottom: 0; + list-style: none; } + +.next-badge[dir="rtl"] .next-badge-custom { + padding-right: 4px; + padding-left: 4px; } + +.next-badge[dir="rtl"] .next-badge-scroll-number { + left: 0; + -webkit-transform-origin: right center; + -ms-transform-origin: right center; + transform-origin: right center; } + +.next-overlay-wrapper .next-overlay-inner { + z-index: 1001; } + +.next-overlay-wrapper .next-overlay-backdrop { + position: fixed; + z-index: 1001; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: #000000; + -webkit-transition: opacity .3s; + transition: opacity .3s; + opacity: 0; } + +.next-overlay-wrapper.opened .next-overlay-backdrop { + opacity: 0.2; } + +.next-icon[dir="rtl"]::before { + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); } + +@font-face { + font-family: NextIcon; + src: url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot"); + src: url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"), url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"), url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg"); } + +.next-icon { + display: inline-block; + font-family: NextIcon; + font-style: normal; + font-weight: normal; + text-transform: none; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } + .next-icon:before { + display: inline-block; + vertical-align: middle; + text-align: center; } + .next-icon-smile:before { + content: "\E65F"; } + .next-icon-cry:before { + content: "\E65D"; } + .next-icon-success:before { + content: "\E60A"; } + .next-icon-warning:before { + content: "\E60B"; } + .next-icon-prompt:before { + content: "\E60C"; } + .next-icon-error:before { + content: "\E60D"; } + .next-icon-help:before { + content: "\E673"; } + .next-icon-clock:before { + content: "\E621"; } + .next-icon-success-filling:before { + content: "\E63A"; } + .next-icon-delete-filling:before { + content: "\E623"; } + .next-icon-favorites-filling:before { + content: "\E60E"; } + .next-icon-add:before { + content: "\E655"; } + .next-icon-minus:before { + content: "\E601"; } + .next-icon-arrow-up:before { + content: "\E625"; } + .next-icon-arrow-down:before { + content: "\E63D"; } + .next-icon-arrow-left:before { + content: "\E61D"; } + .next-icon-arrow-right:before { + content: "\E619"; } + .next-icon-arrow-double-left:before { + content: "\E659"; } + .next-icon-arrow-double-right:before { + content: "\E65E"; } + .next-icon-switch:before { + content: "\E6B3"; } + .next-icon-sorting:before { + content: "\E634"; } + .next-icon-descending:before { + content: "\E61F"; } + .next-icon-ascending:before { + content: "\E61E"; } + .next-icon-select:before { + content: "\E632"; } + .next-icon-semi-select:before { + content: "\E633"; } + .next-icon-search:before { + content: "\E656"; } + .next-icon-close:before { + content: "\E626"; } + .next-icon-ellipsis:before { + content: "\E654"; } + .next-icon-picture:before { + content: "\E631"; } + .next-icon-calendar:before { + content: "\E607"; } + .next-icon-ashbin:before { + content: "\E639"; } + .next-icon-upload:before { + content: "\E7EE"; } + .next-icon-download:before { + content: "\E628"; } + .next-icon-set:before { + content: "\E683"; } + .next-icon-edit:before { + content: "\E63B"; } + .next-icon-refresh:before { + content: "\E677"; } + .next-icon-filter:before { + content: "\E627"; } + .next-icon-attachment:before { + content: "\E665"; } + .next-icon-account:before { + content: "\E608"; } + .next-icon-email:before { + content: "\E605"; } + .next-icon-atm:before { + content: "\E606"; } + .next-icon-loading:before { + content: "\E646"; + -webkit-animation: loadingCircle 1s infinite linear; + animation: loadingCircle 1s infinite linear; } + +@-webkit-keyframes loadingCircle { + 0% { + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + 100% { + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +@keyframes loadingCircle { + 0% { + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + 100% { + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +.next-icon.next-xxs:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + +@media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-icon.next-xxs { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-icon.next-xxs:before { + width: 16px; + font-size: 16px; } } + +.next-icon.next-xs:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-icon.next-small:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + +.next-icon.next-medium:before { + width: 20px; + font-size: 20px; + line-height: inherit; } + +.next-icon.next-large:before { + width: 24px; + font-size: 24px; + line-height: inherit; } + +.next-icon.next-xl:before { + width: 32px; + font-size: 32px; + line-height: inherit; } + +.next-icon.next-xxl:before { + width: 48px; + font-size: 48px; + line-height: inherit; } + +.next-icon.next-xxxl:before { + width: 64px; + font-size: 64px; + line-height: inherit; } + +.next-icon.next-inherit:before { + width: inherit; + font-size: inherit; + line-height: inherit; } + +.next-balloon { + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: absolute; + max-width: 300px; + border-style: solid; + border-radius: 3px; + word-wrap: break-word; + z-index: 0; + /* size */ + /* 带关闭按钮的右侧padding变大 */ } + .next-balloon *, + .next-balloon *:before, + .next-balloon *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-balloon:focus, + .next-balloon *:focus { + outline: 0; } + .next-balloon-primary { + color: #333333; + border-color: #4494F9; + background-color: #E3F2FD; + -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.12); + border-width: 1px; } + .next-balloon-primary .next-balloon-close { + position: absolute; + top: 12px; + right: 12px; + font-size: 12px; + color: #999999; } + .next-balloon-primary .next-balloon-close .next-icon { + width: 12px; + height: 12px; + line-height: 12px; } + .next-balloon-primary .next-balloon-close .next-icon:before { + width: 12px; + height: 12px; + font-size: 12px; + line-height: 12px; } + .next-balloon-primary .next-balloon-close :hover { + color: #333333; } + .next-balloon-primary:after { + position: absolute; + width: 12px; + height: 12px; + content: ' '; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-box-sizing: content-box !important; + box-sizing: content-box !important; + border: 1px solid #4494F9; + background-color: #E3F2FD; + z-index: -1; } + .next-balloon-primary.next-balloon-top:after { + top: -7px; + left: calc(50% + -7px); + border-right: none; + border-bottom: none; + -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-right:after { + top: calc(50% + -7px); + right: -7px; + border-left: none; + border-bottom: none; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-bottom:after { + bottom: -7px; + left: calc(50% + -7px); + border-top: none; + border-left: none; + -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-left:after { + top: calc(50% + -7px); + left: -7px; + border-top: none; + border-right: none; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-left-top:after { + top: 12px; + left: -7px; + border-top: none; + border-right: none; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-left-bottom:after { + bottom: 12px; + left: -7px; + border-top: none; + border-right: none; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-right-top:after { + top: 12px; + right: -7px; + border-bottom: none; + border-left: none; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-right-bottom:after { + right: -7px; + bottom: 12px; + border-bottom: none; + border-left: none; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-top-left:after { + top: -7px; + left: 12px; + border-right: none; + border-bottom: none; + -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-top-right:after { + top: -7px; + right: 12px; + border-right: none; + border-bottom: none; + -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-bottom-left:after { + bottom: -7px; + left: 12px; + border-top: none; + border-left: none; + -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-primary.next-balloon-bottom-right:after { + right: 12px; + bottom: -7px; + border-top: none; + border-left: none; + -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal { + color: #333333; + border-color: #DCDEE3; + background-color: #FFFFFF; + -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + border-width: 1px; } + .next-balloon-normal .next-balloon-close { + position: absolute; + top: 12px; + right: 12px; + font-size: 12px; + color: #999999; } + .next-balloon-normal .next-balloon-close .next-icon { + width: 12px; + height: 12px; + line-height: 12px; } + .next-balloon-normal .next-balloon-close .next-icon:before { + width: 12px; + height: 12px; + font-size: 12px; + line-height: 12px; } + .next-balloon-normal .next-balloon-close :hover { + color: #666666; } + .next-balloon-normal:after { + position: absolute; + width: 12px; + height: 12px; + content: ' '; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-box-sizing: content-box !important; + box-sizing: content-box !important; + border: 1px solid #DCDEE3; + background-color: #FFFFFF; + z-index: -1; } + .next-balloon-normal.next-balloon-top:after { + top: -7px; + left: calc(50% + -7px); + border-right: none; + border-bottom: none; + -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-right:after { + top: calc(50% + -7px); + right: -7px; + border-left: none; + border-bottom: none; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-bottom:after { + bottom: -7px; + left: calc(50% + -7px); + border-top: none; + border-left: none; + -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-left:after { + top: calc(50% + -7px); + left: -7px; + border-top: none; + border-right: none; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-left-top:after { + top: 12px; + left: -7px; + border-top: none; + border-right: none; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-left-bottom:after { + bottom: 12px; + left: -7px; + border-top: none; + border-right: none; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-right-top:after { + top: 12px; + right: -7px; + border-bottom: none; + border-left: none; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-right-bottom:after { + right: -7px; + bottom: 12px; + border-bottom: none; + border-left: none; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-top-left:after { + top: -7px; + left: 12px; + border-right: none; + border-bottom: none; + -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-top-right:after { + top: -7px; + right: 12px; + border-right: none; + border-bottom: none; + -webkit-box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-bottom-left:after { + bottom: -7px; + left: 12px; + border-top: none; + border-left: none; + -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon-normal.next-balloon-bottom-right:after { + right: 12px; + bottom: -7px; + border-top: none; + border-left: none; + -webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon.visible { + display: block; } + .next-balloon.hidden { + display: none; } + .next-balloon-medium { + padding: 16px 16px 16px 16px; } + .next-balloon-closable { + padding: 16px 40px 16px 16px; } + +.next-balloon-tooltip { + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: absolute; + max-width: 300px; + border-style: solid; + border-radius: 3px; + font-size: 12px; + z-index: 0; + color: #333333; + border-color: #DCDEE3; + background-color: #F2F3F7; + -webkit-box-shadow: none; + box-shadow: none; + border-width: 1px; + /* size */ } + .next-balloon-tooltip *, + .next-balloon-tooltip *:before, + .next-balloon-tooltip *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-balloon-tooltip:after { + position: absolute; + width: 12px; + height: 12px; + content: ' '; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-box-sizing: content-box !important; + box-sizing: content-box !important; + border: 1px solid #DCDEE3; + background-color: #F2F3F7; + z-index: -1; } + .next-balloon-tooltip-top:after { + top: -7px; + left: calc(50% + -7px); + border-right: none; + border-bottom: none; } + .next-balloon-tooltip-right:after { + top: calc(50% + -7px); + right: -7px; + border-left: none; + border-bottom: none; } + .next-balloon-tooltip-bottom:after { + bottom: -7px; + left: calc(50% + -7px); + border-top: none; + border-left: none; } + .next-balloon-tooltip-left:after { + top: calc(50% + -7px); + left: -7px; + border-top: none; + border-right: none; } + .next-balloon-tooltip-left-top:after { + top: 12px; + left: -7px; + border-top: none; + border-right: none; } + .next-balloon-tooltip-left-bottom:after { + bottom: 12px; + left: -7px; + border-top: none; + border-right: none; } + .next-balloon-tooltip-right-top:after { + top: 12px; + right: -7px; + border-bottom: none; + border-left: none; } + .next-balloon-tooltip-right-bottom:after { + right: -7px; + bottom: 12px; + border-bottom: none; + border-left: none; } + .next-balloon-tooltip-top-left:after { + top: -7px; + left: 12px; + border-right: none; + border-bottom: none; } + .next-balloon-tooltip-top-right:after { + top: -7px; + right: 12px; + border-right: none; + border-bottom: none; } + .next-balloon-tooltip-bottom-left:after { + bottom: -7px; + left: 12px; + border-top: none; + border-left: none; } + .next-balloon-tooltip-bottom-right:after { + right: 12px; + bottom: -7px; + border-top: none; + border-left: none; } + .next-balloon-tooltip.visible { + display: block; } + .next-balloon-tooltip.hidden { + display: none; } + .next-balloon-tooltip-medium { + padding: 8px 8px 8px 8px; } + +.next-balloon[dir="rtl"] { + /* 带关闭按钮的右侧padding变大 */ } + .next-balloon[dir="rtl"].next-balloon-primary .next-balloon-close { + left: 12px; + right: auto; } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-right:after { + left: -7px; + right: auto; + border-right: none; + border-top: none; + border-left: inherit; + border-bottom: inherit; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-left:after { + right: -7px; + left: auto; + border-left: none; + border-bottom: none; + border-right: inherit; + border-top: inherit; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-left-top:after { + right: -7px; + left: auto; + border-left: none; + border-bottom: none; + border-top: inherit; + border-right: inherit; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-left-bottom:after { + right: -7px; + left: auto; + border-left: none; + border-bottom: none; + border-top: inherit; + border-right: inherit; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-right-top:after { + left: -7px; + right: auto; + border-right: none; + border-top: none; + border-bottom: inherit; + border-left: inherit; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-right-bottom:after { + left: -7px; + right: auto; + border-right: none; + border-top: none; + border-bottom: inherit; + border-left: inherit; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-top-left:after { + right: 12px; + left: auto; } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-top-right:after { + right: auto; + left: 12px; } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-bottom-left:after { + right: 12px; + left: auto; } + .next-balloon[dir="rtl"].next-balloon-primary.next-balloon-bottom-right:after { + left: 12px; + right: auto; } + .next-balloon[dir="rtl"].next-balloon-normal .next-balloon-close { + left: 12px; + right: auto; } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-right:after { + left: -7px; + right: auto; + border-right: none; + border-top: none; + border-left: inherit; + border-bottom: inherit; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-left:after { + right: -7px; + left: auto; + border-left: none; + border-bottom: none; + border-right: inherit; + border-top: inherit; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-left-top:after { + right: -7px; + left: auto; + border-left: none; + border-bottom: none; + border-top: inherit; + border-right: inherit; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-left-bottom:after { + right: -7px; + left: auto; + border-left: none; + border-bottom: none; + border-top: inherit; + border-right: inherit; + -webkit-box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: 1px -1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-right-top:after { + left: -7px; + right: auto; + border-right: none; + border-top: none; + border-bottom: inherit; + border-left: inherit; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-right-bottom:after { + left: -7px; + right: auto; + border-right: none; + border-top: none; + border-bottom: inherit; + border-left: inherit; + -webkit-box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); + box-shadow: -1px 1px 1px 0px rgba(0, 0, 0, 0.1); } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-top-left:after { + right: 12px; + left: auto; } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-top-right:after { + right: auto; + left: 12px; } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-bottom-left:after { + right: 12px; + left: auto; } + .next-balloon[dir="rtl"].next-balloon-normal.next-balloon-bottom-right:after { + left: 12px; + right: auto; } + .next-balloon[dir="rtl"].next-balloon-closable { + padding: 16px 16px 16px 40px; } + +.next-balloon-tooltip[dir="rtl"] { + /* size */ } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-right:after { + left: -7px; + right: auto; + border-top: none; + border-right: none; + border-left: inherit; + border-bottom: inherit; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-left:after { + right: -7px; + left: auto; + border-top: inherit; + border-right: inherit; + border-left: none; + border-bottom: none; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-left-top:after { + right: -7px; + left: auto; + border-top: inherit; + border-right: inherit; + border-left: none; + border-bottom: none; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-left-bottom:after { + right: -7px; + left: auto; + border-top: inherit; + border-right: inherit; + border-left: none; + border-bottom: none; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-right-top:after { + left: -7px; + right: auto; + border-top: none; + border-right: none; + border-left: inherit; + border-bottom: inherit; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-right-bottom:after { + left: -7px; + right: auto; + border-top: none; + border-right: none; + border-left: inherit; + border-bottom: inherit; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-top-left:after { + right: 12px; + left: auto; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-top-right:after { + left: 12px; + right: auto; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-bottom-left:after { + right: 12px; + left: auto; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-bottom-right:after { + left: 12px; + right: auto; } + .next-balloon-tooltip[dir="rtl"].next-balloon-tooltip-medium { + padding: 8px 8px 8px 8px; } + +/* put your code here */ +.next-breadcrumb { + display: block; + margin: 0; + padding: 0; + height: 16px; + line-height: 16px; } + .next-breadcrumb .next-breadcrumb-item { + display: inline-block; } + .next-breadcrumb .next-breadcrumb-item .next-breadcrumb-text { + display: inline-block; + text-decoration: none; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + -webkit-transition: all .2s ease-out; + transition: all .2s ease-out; } + .next-breadcrumb .next-breadcrumb-item .next-breadcrumb-text > b { + font-weight: normal; } + .next-breadcrumb .next-breadcrumb-item .next-breadcrumb-separator { + display: inline-block; + vertical-align: top; } + .next-breadcrumb .next-breadcrumb-text { + height: 16px; + min-width: 16px; + font-size: 12px; + line-height: 16px; } + .next-breadcrumb .next-breadcrumb-separator { + height: 16px; + margin: 0 8px; + font-size: 8px; + line-height: 16px; } + .next-breadcrumb .next-breadcrumb-separator .next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-breadcrumb .next-breadcrumb-separator .next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-breadcrumb .next-breadcrumb-separator .next-icon:before { + width: 16px; + font-size: 16px; } } + .next-breadcrumb .next-breadcrumb-text-ellipsis { + font-size: 12px; } + .next-breadcrumb .next-breadcrumb-text { + color: #666666; } + .next-breadcrumb .next-breadcrumb-text > b { + color: #5584FF; } + .next-breadcrumb .next-breadcrumb-text > a { + color: #666666; + text-decoration: none; + text-align: center; } + .next-breadcrumb .next-breadcrumb-text.activated { + color: #333333; + font-weight: normal; } + .next-breadcrumb .next-breadcrumb-text.activated > a { + color: #333333; + font-weight: normal; } + .next-breadcrumb .next-breadcrumb-text-ellipsis { + color: #666666; + cursor: default; } + .next-breadcrumb .next-breadcrumb-separator { + color: #A0A2AD; } + .next-breadcrumb .next-breadcrumb-text:not(.next-breadcrumb-text-ellipsis):hover > a { + color: #5584FF; } + .next-breadcrumb a.next-breadcrumb-text.activated:hover > a { + color: #5584FF; } + .next-breadcrumb a.next-breadcrumb-text:not(.next-breadcrumb-text-ellipsis):hover { + color: #5584FF; } + .next-breadcrumb a.next-breadcrumb-text:not(.next-breadcrumb-text-ellipsis):hover > b { + color: #5584FF; } + .next-breadcrumb a.next-breadcrumb-text.activated:hover { + color: #5584FF; + font-weight: normal; } + +.next-btn { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-btn *, + .next-btn *:before, + .next-btn *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-btn::-moz-focus-inner { + border: 0; + padding: 0; } + .next-btn, .next-btn:active, .next-btn:focus, .next-btn:hover { + outline: 0; } + +@keyframes loadingCircle { + 0% { + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + 100% { + -webkit-transform-origin: 50% 50%; + transform-origin: 50% 50%; + -webkit-transform: rotate(360deg); + transform: rotate(360deg); } } + +.next-btn { + /* 尺寸维度 */ + /* ---------------------------------------- */ + /* 普通按钮 */ + /* 普通态禁用样式 */ + /* 警告按钮 */ + /* 文本按钮 */ + /* loading */ + /* ---------------------------------------- */ + /* 幽灵按钮 */ + /* 组合 */ + /* ---------------------------------------- */ } + .next-btn { + position: relative; + display: inline-block; + -webkit-box-shadow: none; + box-shadow: none; + text-decoration: none; + text-align: center; + text-transform: none; + white-space: nowrap; + vertical-align: middle; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: all .3s ease-out; + transition: all .3s ease-out; + cursor: pointer; } + .next-btn:after { + text-align: center; + position: absolute; + opacity: 0; + visibility: hidden; + -webkit-transition: opacity .5s ease; + transition: opacity .5s ease; } + .next-btn .next-icon.next-xs:before { + vertical-align: baseline; } + .next-btn.hover, .next-btn:hover { + -webkit-box-shadow: none; + box-shadow: none; } + .next-btn.next-small { + border-radius: 3px; + padding: 0 8px; + height: 20px; + line-height: 18px; + font-size: 12px; + border-width: 1px; } + .next-btn.next-small > .next-btn-icon.next-icon-first { + margin-left: 0; + margin-right: 4px; } + .next-btn.next-small > .next-btn-icon.next-icon-first:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-small > .next-btn-icon.next-icon-last { + margin-left: 4px; + margin-right: 0; } + .next-btn.next-small > .next-btn-icon.next-icon-last:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-small > .next-btn-icon.next-icon-alone:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-small.next-btn-loading { + padding-left: 24px; } + .next-btn.next-small.next-btn-loading:after { + width: 12px; + height: 12px; + font-size: 12px; + line-height: 12px; + left: 8px; + top: 50%; + text-align: center; + margin-top: -6px; + margin-right: 4px; } + .next-btn.next-small.next-btn-loading > .next-icon { + display: none; } + .next-btn.next-medium { + border-radius: 3px; + padding: 0 12px; + height: 28px; + line-height: 26px; + font-size: 12px; + border-width: 1px; } + .next-btn.next-medium > .next-btn-icon.next-icon-first { + margin-left: 0; + margin-right: 4px; } + .next-btn.next-medium > .next-btn-icon.next-icon-first:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-medium > .next-btn-icon.next-icon-last { + margin-left: 4px; + margin-right: 0; } + .next-btn.next-medium > .next-btn-icon.next-icon-last:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-medium > .next-btn-icon.next-icon-alone:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-medium.next-btn-loading { + padding-left: 28px; } + .next-btn.next-medium.next-btn-loading:after { + width: 12px; + height: 12px; + font-size: 12px; + line-height: 12px; + left: 12px; + top: 50%; + text-align: center; + margin-top: -6px; + margin-right: 4px; } + .next-btn.next-medium.next-btn-loading > .next-icon { + display: none; } + .next-btn.next-large { + border-radius: 3px; + padding: 0 16px; + height: 40px; + line-height: 38px; + font-size: 16px; + border-width: 1px; } + .next-btn.next-large > .next-btn-icon.next-icon-first { + margin-left: 0; + margin-right: 4px; } + .next-btn.next-large > .next-btn-icon.next-icon-first:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn.next-large > .next-btn-icon.next-icon-last { + margin-left: 4px; + margin-right: 0; } + .next-btn.next-large > .next-btn-icon.next-icon-last:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn.next-large > .next-btn-icon.next-icon-alone:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn.next-large.next-btn-loading { + padding-left: 36px; } + .next-btn.next-large.next-btn-loading:after { + width: 16px; + height: 16px; + font-size: 16px; + line-height: 16px; + left: 16px; + top: 50%; + text-align: center; + margin-top: -8px; + margin-right: 4px; } + .next-btn.next-large.next-btn-loading > .next-icon { + display: none; } + .next-btn.next-btn-normal { + border-style: solid; + background-color: #FFFFFF; + border-color: #C4C6CF; } + .next-btn.next-btn-normal, .next-btn.next-btn-normal:link, .next-btn.next-btn-normal:visited, .next-btn.next-btn-normal.visited { + color: #333333; } + .next-btn.next-btn-normal:focus, .next-btn.next-btn-normal:hover, .next-btn.next-btn-normal.hover, .next-btn.next-btn-normal:active, .next-btn.next-btn-normal.active { + color: #333333; + background-color: #F2F3F7; + border-color: #A0A2AD; + text-decoration: none; } + .next-btn.next-btn-primary { + border-style: solid; + background-color: #5584FF; + border-color: transparent; } + .next-btn.next-btn-primary, .next-btn.next-btn-primary:link, .next-btn.next-btn-primary:visited, .next-btn.next-btn-primary.visited { + color: #FFFFFF; } + .next-btn.next-btn-primary:focus, .next-btn.next-btn-primary:hover, .next-btn.next-btn-primary.hover, .next-btn.next-btn-primary:active, .next-btn.next-btn-primary.active { + color: #FFFFFF; + background-color: #3E71F7; + border-color: transparent; + text-decoration: none; } + .next-btn.next-btn-secondary { + border-style: solid; + background-color: #FFFFFF; + border-color: #5584FF; } + .next-btn.next-btn-secondary, .next-btn.next-btn-secondary:link, .next-btn.next-btn-secondary:visited, .next-btn.next-btn-secondary.visited { + color: #5584FF; } + .next-btn.next-btn-secondary:focus, .next-btn.next-btn-secondary:hover, .next-btn.next-btn-secondary.hover, .next-btn.next-btn-secondary:active, .next-btn.next-btn-secondary.active { + color: #FFFFFF; + background-color: #3E71F7; + border-color: #3E71F7; + text-decoration: none; } + .next-btn.disabled, .next-btn[disabled] { + cursor: not-allowed; + background-color: #F7F8FA; + border-color: #E6E7EB; } + .next-btn.disabled, .next-btn.disabled:link, .next-btn.disabled:visited, .next-btn.disabled.visited, .next-btn[disabled], .next-btn[disabled]:link, .next-btn[disabled]:visited, .next-btn[disabled].visited { + color: #CCCCCC; } + .next-btn.disabled:focus, .next-btn.disabled:hover, .next-btn.disabled.hover, .next-btn.disabled:active, .next-btn.disabled.active, .next-btn[disabled]:focus, .next-btn[disabled]:hover, .next-btn[disabled].hover, .next-btn[disabled]:active, .next-btn[disabled].active { + color: #CCCCCC; + background-color: #F7F8FA; + border-color: #E6E7EB; + text-decoration: none; } + .next-btn-warning { + border-style: solid; } + .next-btn-warning.next-btn-primary { + background-color: #FF3000; + border-color: #FF3000; } + .next-btn-warning.next-btn-primary, .next-btn-warning.next-btn-primary:link, .next-btn-warning.next-btn-primary:visited, .next-btn-warning.next-btn-primary.visited { + color: #FFFFFF; } + .next-btn-warning.next-btn-primary:focus, .next-btn-warning.next-btn-primary:hover, .next-btn-warning.next-btn-primary.hover, .next-btn-warning.next-btn-primary:active, .next-btn-warning.next-btn-primary.active { + color: #FFFFFF; + background-color: #E72B00; + border-color: #E72B00; + text-decoration: none; } + .next-btn-warning.next-btn-primary.disabled, .next-btn-warning.next-btn-primary[disabled] { + background-color: #F7F8FA; + border-color: #DCDEE3; } + .next-btn-warning.next-btn-primary.disabled, .next-btn-warning.next-btn-primary.disabled:link, .next-btn-warning.next-btn-primary.disabled:visited, .next-btn-warning.next-btn-primary.disabled.visited, .next-btn-warning.next-btn-primary[disabled], .next-btn-warning.next-btn-primary[disabled]:link, .next-btn-warning.next-btn-primary[disabled]:visited, .next-btn-warning.next-btn-primary[disabled].visited { + color: #CCCCCC; } + .next-btn-warning.next-btn-primary.disabled:focus, .next-btn-warning.next-btn-primary.disabled:hover, .next-btn-warning.next-btn-primary.disabled.hover, .next-btn-warning.next-btn-primary.disabled:active, .next-btn-warning.next-btn-primary.disabled.active, .next-btn-warning.next-btn-primary[disabled]:focus, .next-btn-warning.next-btn-primary[disabled]:hover, .next-btn-warning.next-btn-primary[disabled].hover, .next-btn-warning.next-btn-primary[disabled]:active, .next-btn-warning.next-btn-primary[disabled].active { + color: #CCCCCC; + background-color: #F7F8FA; + border-color: #DCDEE3; + text-decoration: none; } + .next-btn-warning.next-btn-normal { + background-color: #FFFFFF; + border-color: #FF3000; } + .next-btn-warning.next-btn-normal, .next-btn-warning.next-btn-normal:link, .next-btn-warning.next-btn-normal:visited, .next-btn-warning.next-btn-normal.visited { + color: #FF3000; } + .next-btn-warning.next-btn-normal:focus, .next-btn-warning.next-btn-normal:hover, .next-btn-warning.next-btn-normal.hover, .next-btn-warning.next-btn-normal:active, .next-btn-warning.next-btn-normal.active { + color: #FFFFFF; + background-color: #E72B00; + border-color: #E72B00; + text-decoration: none; } + .next-btn-warning.next-btn-normal.disabled, .next-btn-warning.next-btn-normal[disabled] { + background-color: #F7F8FA; + border-color: #E6E7EB; } + .next-btn-warning.next-btn-normal.disabled, .next-btn-warning.next-btn-normal.disabled:link, .next-btn-warning.next-btn-normal.disabled:visited, .next-btn-warning.next-btn-normal.disabled.visited, .next-btn-warning.next-btn-normal[disabled], .next-btn-warning.next-btn-normal[disabled]:link, .next-btn-warning.next-btn-normal[disabled]:visited, .next-btn-warning.next-btn-normal[disabled].visited { + color: #CCCCCC; } + .next-btn-warning.next-btn-normal.disabled:focus, .next-btn-warning.next-btn-normal.disabled:hover, .next-btn-warning.next-btn-normal.disabled.hover, .next-btn-warning.next-btn-normal.disabled:active, .next-btn-warning.next-btn-normal.disabled.active, .next-btn-warning.next-btn-normal[disabled]:focus, .next-btn-warning.next-btn-normal[disabled]:hover, .next-btn-warning.next-btn-normal[disabled].hover, .next-btn-warning.next-btn-normal[disabled]:active, .next-btn-warning.next-btn-normal[disabled].active { + color: #CCCCCC; + background-color: #F7F8FA; + border-color: #E6E7EB; + text-decoration: none; } + .next-btn-text { + -webkit-box-shadow: none; + box-shadow: none; + border-radius: 0; } + .next-btn-text.hover, .next-btn-text:hover { + -webkit-box-shadow: none; + box-shadow: none; } + .next-btn-text.next-btn-primary { + background-color: transparent; + border-color: transparent; } + .next-btn-text.next-btn-primary, .next-btn-text.next-btn-primary:link, .next-btn-text.next-btn-primary:visited, .next-btn-text.next-btn-primary.visited { + color: #5584FF; } + .next-btn-text.next-btn-primary:focus, .next-btn-text.next-btn-primary:hover, .next-btn-text.next-btn-primary.hover, .next-btn-text.next-btn-primary:active, .next-btn-text.next-btn-primary.active { + color: #3E71F7; + background-color: transparent; + border-color: transparent; + text-decoration: none; } + .next-btn-text.next-btn-secondary { + background-color: transparent; + border-color: transparent; } + .next-btn-text.next-btn-secondary, .next-btn-text.next-btn-secondary:link, .next-btn-text.next-btn-secondary:visited, .next-btn-text.next-btn-secondary.visited { + color: #666666; } + .next-btn-text.next-btn-secondary:focus, .next-btn-text.next-btn-secondary:hover, .next-btn-text.next-btn-secondary.hover, .next-btn-text.next-btn-secondary:active, .next-btn-text.next-btn-secondary.active { + color: #5584FF; + background-color: transparent; + border-color: transparent; + text-decoration: none; } + .next-btn-text.next-btn-normal { + background-color: transparent; + border-color: transparent; } + .next-btn-text.next-btn-normal, .next-btn-text.next-btn-normal:link, .next-btn-text.next-btn-normal:visited, .next-btn-text.next-btn-normal.visited { + color: #333333; } + .next-btn-text.next-btn-normal:focus, .next-btn-text.next-btn-normal:hover, .next-btn-text.next-btn-normal.hover, .next-btn-text.next-btn-normal:active, .next-btn-text.next-btn-normal.active { + color: #5584FF; + background-color: transparent; + border-color: transparent; + text-decoration: none; } + .next-btn-text.next-large { + border-radius: 0; + padding: 0 0; + height: 24px; + line-height: 24px; + font-size: 14px; + border-width: 0; } + .next-btn-text.next-large > .next-btn-icon.next-icon-first { + margin-left: 0; + margin-right: 4px; } + .next-btn-text.next-large > .next-btn-icon.next-icon-first:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn-text.next-large > .next-btn-icon.next-icon-last { + margin-left: 4px; + margin-right: 0; } + .next-btn-text.next-large > .next-btn-icon.next-icon-last:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn-text.next-large > .next-btn-icon.next-icon-alone:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn-text.next-large.next-btn-loading { + padding-left: 20px; } + .next-btn-text.next-large.next-btn-loading:after { + width: 16px; + height: 16px; + font-size: 16px; + line-height: 16px; + left: 0; + top: 50%; + text-align: center; + margin-top: -8px; + margin-right: 4px; } + .next-btn-text.next-large.next-btn-loading > .next-icon { + display: none; } + .next-btn-text.next-medium { + border-radius: 0; + padding: 0 0; + height: 20px; + line-height: 20px; + font-size: 12px; + border-width: 0; } + .next-btn-text.next-medium > .next-btn-icon.next-icon-first { + margin-left: 0; + margin-right: 4px; } + .next-btn-text.next-medium > .next-btn-icon.next-icon-first:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text.next-medium > .next-btn-icon.next-icon-last { + margin-left: 4px; + margin-right: 0; } + .next-btn-text.next-medium > .next-btn-icon.next-icon-last:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text.next-medium > .next-btn-icon.next-icon-alone:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text.next-medium.next-btn-loading { + padding-left: 16px; } + .next-btn-text.next-medium.next-btn-loading:after { + width: 12px; + height: 12px; + font-size: 12px; + line-height: 12px; + left: 0; + top: 50%; + text-align: center; + margin-top: -6px; + margin-right: 4px; } + .next-btn-text.next-medium.next-btn-loading > .next-icon { + display: none; } + .next-btn-text.next-small { + border-radius: 0; + padding: 0 0; + height: 16px; + line-height: 16px; + font-size: 12px; + border-width: 0; } + .next-btn-text.next-small > .next-btn-icon.next-icon-first { + margin-left: 0; + margin-right: 4px; } + .next-btn-text.next-small > .next-btn-icon.next-icon-first:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text.next-small > .next-btn-icon.next-icon-last { + margin-left: 4px; + margin-right: 0; } + .next-btn-text.next-small > .next-btn-icon.next-icon-last:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text.next-small > .next-btn-icon.next-icon-alone:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text.next-small.next-btn-loading { + padding-left: 16px; } + .next-btn-text.next-small.next-btn-loading:after { + width: 12px; + height: 12px; + font-size: 12px; + line-height: 12px; + left: 0; + top: 50%; + text-align: center; + margin-top: -6px; + margin-right: 4px; } + .next-btn-text.next-small.next-btn-loading > .next-icon { + display: none; } + .next-btn-text.disabled, .next-btn-text[disabled] { + background-color: transparent; + border-color: transparent; } + .next-btn-text.disabled, .next-btn-text.disabled:link, .next-btn-text.disabled:visited, .next-btn-text.disabled.visited, .next-btn-text[disabled], .next-btn-text[disabled]:link, .next-btn-text[disabled]:visited, .next-btn-text[disabled].visited { + color: #CCCCCC; } + .next-btn-text.disabled:focus, .next-btn-text.disabled:hover, .next-btn-text.disabled.hover, .next-btn-text.disabled:active, .next-btn-text.disabled.active, .next-btn-text[disabled]:focus, .next-btn-text[disabled]:hover, .next-btn-text[disabled].hover, .next-btn-text[disabled]:active, .next-btn-text[disabled].active { + color: #CCCCCC; + background-color: transparent; + border-color: transparent; + text-decoration: none; } + .next-btn-text.next-btn-loading { + background-color: transparent; + border-color: transparent; } + .next-btn-text.next-btn-loading, .next-btn-text.next-btn-loading:link, .next-btn-text.next-btn-loading:visited, .next-btn-text.next-btn-loading.visited { + color: #333333; } + .next-btn-text.next-btn-loading:focus, .next-btn-text.next-btn-loading:hover, .next-btn-text.next-btn-loading.hover, .next-btn-text.next-btn-loading:active, .next-btn-text.next-btn-loading.active { + color: #333333; + background-color: transparent; + border-color: transparent; + text-decoration: none; } + .next-btn-loading { + pointer-events: none; } + .next-btn-loading:after { + font-family: NextIcon; + content: "\E646"; + opacity: 1; + visibility: visible; + -webkit-animation: loadingCircle 2s infinite linear; + animation: loadingCircle 2s infinite linear; } + .next-btn-ghost { + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-btn-ghost.next-btn-dark { + background-color: transparent; + border-color: #FFFFFF; } + .next-btn-ghost.next-btn-dark, .next-btn-ghost.next-btn-dark:link, .next-btn-ghost.next-btn-dark:visited, .next-btn-ghost.next-btn-dark.visited { + color: #FFFFFF; } + .next-btn-ghost.next-btn-dark:focus, .next-btn-ghost.next-btn-dark:hover, .next-btn-ghost.next-btn-dark.hover, .next-btn-ghost.next-btn-dark:active, .next-btn-ghost.next-btn-dark.active { + color: #FFFFFF; + background-color: rgba(255, 255, 255, 0.8); + border-color: #FFFFFF; + text-decoration: none; } + .next-btn-ghost.next-btn-dark.disabled, .next-btn-ghost.next-btn-dark[disabled] { + background-color: transparent; + border-color: rgba(255, 255, 255, 0.4); } + .next-btn-ghost.next-btn-dark.disabled, .next-btn-ghost.next-btn-dark.disabled:link, .next-btn-ghost.next-btn-dark.disabled:visited, .next-btn-ghost.next-btn-dark.disabled.visited, .next-btn-ghost.next-btn-dark[disabled], .next-btn-ghost.next-btn-dark[disabled]:link, .next-btn-ghost.next-btn-dark[disabled]:visited, .next-btn-ghost.next-btn-dark[disabled].visited { + color: rgba(255, 255, 255, 0.4); } + .next-btn-ghost.next-btn-dark.disabled:focus, .next-btn-ghost.next-btn-dark.disabled:hover, .next-btn-ghost.next-btn-dark.disabled.hover, .next-btn-ghost.next-btn-dark.disabled:active, .next-btn-ghost.next-btn-dark.disabled.active, .next-btn-ghost.next-btn-dark[disabled]:focus, .next-btn-ghost.next-btn-dark[disabled]:hover, .next-btn-ghost.next-btn-dark[disabled].hover, .next-btn-ghost.next-btn-dark[disabled]:active, .next-btn-ghost.next-btn-dark[disabled].active { + color: rgba(255, 255, 255, 0.4); + background-color: transparent; + border-color: rgba(255, 255, 255, 0.4); + text-decoration: none; } + .next-btn-ghost.next-btn-light { + background-color: transparent; + border-color: #333333; } + .next-btn-ghost.next-btn-light, .next-btn-ghost.next-btn-light:link, .next-btn-ghost.next-btn-light:visited, .next-btn-ghost.next-btn-light.visited { + color: #333333; } + .next-btn-ghost.next-btn-light:focus, .next-btn-ghost.next-btn-light:hover, .next-btn-ghost.next-btn-light.hover, .next-btn-ghost.next-btn-light:active, .next-btn-ghost.next-btn-light.active { + color: #999999; + background-color: rgba(0, 0, 0, 0.92); + border-color: #333333; + text-decoration: none; } + .next-btn-ghost.next-btn-light.disabled, .next-btn-ghost.next-btn-light[disabled] { + background-color: transparent; + border-color: rgba(0, 0, 0, 0.1); } + .next-btn-ghost.next-btn-light.disabled, .next-btn-ghost.next-btn-light.disabled:link, .next-btn-ghost.next-btn-light.disabled:visited, .next-btn-ghost.next-btn-light.disabled.visited, .next-btn-ghost.next-btn-light[disabled], .next-btn-ghost.next-btn-light[disabled]:link, .next-btn-ghost.next-btn-light[disabled]:visited, .next-btn-ghost.next-btn-light[disabled].visited { + color: rgba(0, 0, 0, 0.1); } + .next-btn-ghost.next-btn-light.disabled:focus, .next-btn-ghost.next-btn-light.disabled:hover, .next-btn-ghost.next-btn-light.disabled.hover, .next-btn-ghost.next-btn-light.disabled:active, .next-btn-ghost.next-btn-light.disabled.active, .next-btn-ghost.next-btn-light[disabled]:focus, .next-btn-ghost.next-btn-light[disabled]:hover, .next-btn-ghost.next-btn-light[disabled].hover, .next-btn-ghost.next-btn-light[disabled]:active, .next-btn-ghost.next-btn-light[disabled].active { + color: rgba(0, 0, 0, 0.1); + background-color: transparent; + border-color: rgba(0, 0, 0, 0.1); + text-decoration: none; } + .next-btn-group { + position: relative; + display: inline-block; + vertical-align: middle; } + .next-btn-group > .next-btn { + position: relative; + float: left; + -webkit-box-shadow: none; + box-shadow: none; } + .next-btn-group > .next-btn:hover, .next-btn-group > .next-btn:focus, .next-btn-group > .next-btn:active, .next-btn-group > .next-btn.active { + z-index: 1; } + .next-btn-group > .next-btn.disabled, .next-btn-group > .next-btn[disabled] { + z-index: 0; } + .next-btn-group .next-btn.next-btn { + margin: 0 0 0 -1px; } + .next-btn-group .next-btn:not(:first-child):not(:last-child) { + border-radius: 0; } + .next-btn-group > .next-btn:first-child { + margin: 0; } + .next-btn-group > .next-btn:first-child:not(:last-child) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; } + .next-btn-group > .next-btn:last-child:not(:first-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; } + .next-btn-group > .next-btn-primary:not(:first-child) { + border-left-color: rgba(255, 255, 255, 0.2); } + .next-btn-group > .next-btn-primary:not(:first-child):hover { + border-left-color: transparent; } + .next-btn-group > .next-btn-primary:not(:first-child).disabled, .next-btn-group > .next-btn-primary:not(:first-child)[disabled] { + border-left-color: #E6E7EB; } + +/* 组合 */ +/* ---------------------------------------- */ +.next-btn-group[dir="rtl"] > .next-btn { + float: right; } + +.next-btn-group[dir="rtl"] .next-btn.next-btn { + margin: 0 -1px 0 0; } + +.next-btn-group[dir="rtl"] > .next-btn:first-child:not(:last-child) { + border-bottom-left-radius: 0; + border-top-left-radius: 0; } + +.next-btn-group[dir="rtl"] > .next-btn:last-child:not(:first-child) { + border-bottom-right-radius: 0; + border-top-right-radius: 0; } + +.next-btn-group[dir="rtl"] > .next-btn-primary:not(:first-child) { + border-right-color: rgba(255, 255, 255, 0.2); } + .next-btn-group[dir="rtl"] > .next-btn-primary:not(:first-child):hover { + border-right-color: transparent; } + .next-btn-group[dir="rtl"] > .next-btn-primary:not(:first-child).disabled, .next-btn-group[dir="rtl"] > .next-btn-primary:not(:first-child)[disabled] { + border-right-color: #E6E7EB; } + +/* 尺寸维度 */ +/* ---------------------------------------- */ +.next-btn.next-small[dir="rtl"] { + border-radius: 3px; } + .next-btn.next-small[dir="rtl"] > .next-btn-icon.next-icon-first { + margin-left: 4px; + margin-right: 0; } + .next-btn.next-small[dir="rtl"] > .next-btn-icon.next-icon-first:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-small[dir="rtl"] > .next-btn-icon.next-icon-last { + margin-left: 0; + margin-right: 4px; } + .next-btn.next-small[dir="rtl"] > .next-btn-icon.next-icon-last:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-small[dir="rtl"].next-btn-loading { + padding-left: 8px; + padding-right: 24px; } + .next-btn.next-small[dir="rtl"].next-btn-loading:after { + right: 8px; + top: 50%; + margin-right: 0; + margin-left: 4px; } + +.next-btn.next-medium[dir="rtl"] { + border-radius: 3px; } + .next-btn.next-medium[dir="rtl"] > .next-btn-icon.next-icon-first { + margin-left: 4px; + margin-right: 0; } + .next-btn.next-medium[dir="rtl"] > .next-btn-icon.next-icon-first:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-medium[dir="rtl"] > .next-btn-icon.next-icon-last { + margin-left: 0; + margin-right: 4px; } + .next-btn.next-medium[dir="rtl"] > .next-btn-icon.next-icon-last:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn.next-medium[dir="rtl"].next-btn-loading { + padding-left: 12px; + padding-right: 28px; } + .next-btn.next-medium[dir="rtl"].next-btn-loading:after { + right: 12px; + top: 50%; + margin-right: 0; + margin-left: 4px; } + +.next-btn.next-large[dir="rtl"] { + border-radius: 3px; } + .next-btn.next-large[dir="rtl"] > .next-btn-icon.next-icon-first { + margin-left: 4px; + margin-right: 0; } + .next-btn.next-large[dir="rtl"] > .next-btn-icon.next-icon-first:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn.next-large[dir="rtl"] > .next-btn-icon.next-icon-last { + margin-left: 0; + margin-right: 4px; } + .next-btn.next-large[dir="rtl"] > .next-btn-icon.next-icon-last:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn.next-large[dir="rtl"].next-btn-loading { + padding-left: 16px; + padding-right: 36px; } + .next-btn.next-large[dir="rtl"].next-btn-loading:after { + right: 16px; + top: 50%; + margin-right: 0; + margin-left: 4px; } + +/* 文本按钮 */ +.next-btn-text[dir="rtl"].next-large { + border-radius: 0; } + .next-btn-text[dir="rtl"].next-large > .next-btn-icon.next-icon-first { + margin-left: 4px; + margin-right: 0; } + .next-btn-text[dir="rtl"].next-large > .next-btn-icon.next-icon-first:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn-text[dir="rtl"].next-large > .next-btn-icon.next-icon-last { + margin-left: 0; + margin-right: 4px; } + .next-btn-text[dir="rtl"].next-large > .next-btn-icon.next-icon-last:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-btn-text[dir="rtl"].next-large.next-btn-loading { + padding-left: 0; + padding-right: 20px; } + .next-btn-text[dir="rtl"].next-large.next-btn-loading:after { + right: 0; + top: 50%; + margin-right: 0; + margin-left: 4px; } + +.next-btn-text[dir="rtl"].next-medium { + border-radius: 0; } + .next-btn-text[dir="rtl"].next-medium > .next-btn-icon.next-icon-first { + margin-left: 4px; + margin-right: 0; } + .next-btn-text[dir="rtl"].next-medium > .next-btn-icon.next-icon-first:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text[dir="rtl"].next-medium > .next-btn-icon.next-icon-last { + margin-left: 0; + margin-right: 4px; } + .next-btn-text[dir="rtl"].next-medium > .next-btn-icon.next-icon-last:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text[dir="rtl"].next-medium.next-btn-loading { + padding-left: 0; + padding-right: 16px; } + .next-btn-text[dir="rtl"].next-medium.next-btn-loading:after { + right: 0; + top: 50%; + margin-right: 0; + margin-left: 4px; } + +.next-btn-text[dir="rtl"].next-small { + border-radius: 0; } + .next-btn-text[dir="rtl"].next-small > .next-btn-icon.next-icon-first { + margin-left: 4px; + margin-right: 0; } + .next-btn-text[dir="rtl"].next-small > .next-btn-icon.next-icon-first:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text[dir="rtl"].next-small > .next-btn-icon.next-icon-last { + margin-left: 0; + margin-right: 4px; } + .next-btn-text[dir="rtl"].next-small > .next-btn-icon.next-icon-last:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-btn-text[dir="rtl"].next-small.next-btn-loading { + padding-left: 0; + padding-right: 16px; } + .next-btn-text[dir="rtl"].next-small.next-btn-loading:after { + right: 0; + top: 50%; + margin-right: 0; + margin-left: 4px; } + +.next-radio-button-large[dir='rtl'] > label:first-child { + margin-left: -1px; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + +.next-radio-button-large[dir='rtl'] > label:last-child { + margin-left: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } + +.next-radio-button-large[dir='rtl'] .next-radio-label { + height: 38px; + line-height: 38px; + font-size: 16px; } + +.next-radio-button-medium[dir='rtl'] > label:first-child { + margin-left: -1px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; } + +.next-radio-button-medium[dir='rtl'] > label:last-child { + margin-left: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } + +.next-radio-button-small[dir='rtl'] > label:first-child { + margin-left: -1px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; } + +.next-radio-button-small[dir='rtl'] > label:last-child { + margin-left: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } + +.next-radio-wrapper[dir='rtl'] .next-radio-label { + margin-left: 0; + margin-right: 4px; } + +.next-radio-group[dir='rtl'] .next-radio-label { + margin-right: 4px; + margin-left: 16px; } + +.next-radio-button[dir='rtl'] > label .next-radio-label { + margin: 0; } + +.next-radio-wrapper { + outline: 0; } + .next-radio-wrapper .next-radio { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; + vertical-align: middle; + position: relative; + line-height: 1; } + .next-radio-wrapper .next-radio *, + .next-radio-wrapper .next-radio *:before, + .next-radio-wrapper .next-radio *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-radio-wrapper .next-radio input[type="radio"] { + opacity: 0; + position: absolute; + vertical-align: middle; + top: 0; + left: 0; + width: 16px; + height: 16px; + margin: 0; } + .next-radio-wrapper .next-radio-inner { + /* 动画待定 */ + /* &.mouseDown { */ + /* transform: scale3d(.7, .7, .7); */ + /* transition: transform .2s linear; */ + /* } */ + /* &.mouseUp { */ + /* transform: scale3d(1, 1, 1); */ + /* transition: transform .2s linear; */ + /* } */ + display: block; + width: 16px; + height: 16px; + background: #FFFFFF; + border-radius: 50%; + border: 1px solid #C4C6CF; + -webkit-transition: ease all .36s 0s; + transition: ease all .36s 0s; + -webkit-box-shadow: none; + box-shadow: none; } + .next-radio-wrapper .next-radio-inner:after { + -webkit-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + position: absolute; + border-radius: 50%; + top: 50%; + margin-top: -2px; + left: 50%; + margin-left: -2px; + background: #FFFFFF; + content: ' '; + -webkit-transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); } + .next-radio-wrapper.checked .next-radio-inner { + border-color: #5584FF; + background: #5584FF; } + .next-radio-wrapper.checked .next-radio-inner:after { + width: 4px; + height: 4px; + font-weight: bold; + background: #FFFFFF; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); } + .next-radio-wrapper.checked:hover .next-radio-inner, .next-radio-wrapper.checked.hovered .next-radio-inner { + border-color: transparent; } + .next-radio-wrapper.disabled input[type="radio"] { + cursor: not-allowed; } + .next-radio-wrapper.disabled .next-radio-inner { + border-color: #E6E7EB; + background: #F7F8FA; } + .next-radio-wrapper.disabled .next-radio-inner:hover, .next-radio-wrapper.disabled .next-radio-inner.hovered { + border-color: #E6E7EB; } + .next-radio-wrapper.disabled.checked .next-radio-inner { + border-color: #E6E7EB; } + .next-radio-wrapper.disabled.checked .next-radio-inner:after { + background: #CCCCCC; } + .next-radio-wrapper:not(.disabled):hover .next-radio-inner, .next-radio-wrapper:not(.disabled).hovered .next-radio-inner, .next-radio-wrapper:not(.disabled):focus .next-radio-inner, .next-radio-wrapper:not(.disabled).focused .next-radio-inner { + border-color: #5584FF; + background-color: #DEE8FF; } + .next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner, .next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner, .next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner, .next-radio-wrapper.checked.focused .next-radio-inner { + border-color: transparent; + background: #3E71F7; } + .next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner:after, .next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner:after, .next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner:after, .next-radio-wrapper.checked.focused .next-radio-inner:after { + background: #FFFFFF; } + +.next-radio-button .next-radio { + width: 0; + height: 0; } + +.next-radio-button input[type="radio"] { + width: 0; + height: 0; } + +.next-radio-button > label { + display: inline-block; + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: relative; + z-index: 1; + margin: 0 0 0 -1px; + border: 1px solid #C4C6CF; + background-color: #FFFFFF; + -webkit-transition: ease all .3s 0s; + transition: ease all .3s 0s; + vertical-align: middle; } + .next-radio-button > label .next-radio-label { + display: block; + color: #333333; + margin: 0; + -webkit-transition: ease all .3s 0s; + transition: ease all .3s 0s; } + .next-radio-button > label:hover, .next-radio-button > label:focus, .next-radio-button > label.hovered { + z-index: 10; + border-color: #A0A2AD; + background-color: #F2F3F7; } + .next-radio-button > label:hover .next-radio-label, .next-radio-button > label:focus .next-radio-label, .next-radio-button > label.hovered .next-radio-label { + color: #333333; } + .next-radio-button > label.checked { + z-index: 11; + border-color: #5584FF; + background-color: #FFFFFF; } + .next-radio-button > label.checked .next-radio-label { + color: #5584FF; } + .next-radio-button > label.disabled { + z-index: 0; + cursor: not-allowed; + border-color: #E6E7EB; + background-color: #F7F8FA; } + .next-radio-button > label.disabled .next-radio-label { + color: #CCCCCC; } + .next-radio-button > label.checked.disabled { + z-index: 0; + border-color: #E6E7EB; + background-color: #F2F3F7; } + .next-radio-button > label.checked.disabled .next-radio-label { + color: #CCCCCC; } + +.next-radio-button-large > label { + padding: 0 8px; + height: 40px; + line-height: 40px; } + .next-radio-button-large > label:first-child { + margin-left: 0; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } + .next-radio-button-large > label:last-child { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; } + +.next-radio-button-large .next-radio-label { + height: 38px; + line-height: 38px; + font-size: 16px; } + +.next-radio-button-medium > label { + padding: 0 8px; + height: 28px; + line-height: 28px; } + .next-radio-button-medium > label:first-child { + margin-left: 0; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } + .next-radio-button-medium > label:last-child { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; } + +.next-radio-button-medium .next-radio-label { + height: 26px; + line-height: 26px; + font-size: 12px; } + +.next-radio-button-small > label { + padding: 0 8px; + height: 20px; + line-height: 20px; } + .next-radio-button-small > label:first-child { + margin-left: 0; + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } + .next-radio-button-small > label:last-child { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; } + +.next-radio-button-small .next-radio-label { + height: 18px; + line-height: 18px; + font-size: 12px; } + +.next-radio-single-input input[type="radio"] { + opacity: 0; + position: absolute; + top: 0; + left: 0; + margin: 0; } + +.next-radio-group { + display: inline-block; } + .next-radio-group .next-radio-label { + color: #333333; + margin-right: 16px; } + .next-radio-group.disabled .next-radio-label { + color: #CCCCCC; } + +.next-radio-group-ver .next-radio-wrapper { + display: block; + margin-bottom: 8px; } + +.next-radio-label { + margin: 0; + margin-left: 4px; + font-size: 12px; + vertical-align: middle; + line-height: 1; } + +@-moz-document url-prefix() { + .next-radio { + margin-top: -1px; } + @supports ((-webkit-animation: calc(0s)) or (animation: calc(0s))) { + /* firefox 57+ */ + .next-radio { + margin-top: -3px; } } } + +@-webkit-keyframes fadeInRightForTag { + 0% { + opacity: 0; + -webkit-transform: rotate(45deg) translateX(20px); + transform: rotate(45deg) translateX(20px); } + 100% { + opacity: 1; + -webkit-transform: rotate(45deg) translateX(0); + transform: rotate(45deg) translateX(0); } } + +@keyframes fadeInRightForTag { + 0% { + opacity: 0; + -webkit-transform: rotate(45deg) translateX(20px); + transform: rotate(45deg) translateX(20px); } + 100% { + opacity: 1; + -webkit-transform: rotate(45deg) translateX(0); + transform: rotate(45deg) translateX(0); } } + +.next-tag > .next-tag-body { + overflow: hidden; + text-overflow: ellipsis; } + +.next-tag-checkable.next-tag-level-secondary { + color: #333333; + border-color: transparent; + background-color: transparent; } + .next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):hover, .next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]).hover, .next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):focus { + color: #5584FF; } + +.next-tag-default.next-tag-level-primary, .next-tag-closable.next-tag-level-primary { + color: #666666; + border-color: #EBECF0; + background-color: #EBECF0; } + .next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover, .next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover, .next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover, .next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover, .next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus, .next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus { + color: #333333; + border-color: #E2E4E8; + background-color: #E2E4E8; } + .next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover > .next-tag-close-btn, .next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover > .next-tag-close-btn, .next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover > .next-tag-close-btn, .next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover > .next-tag-close-btn, .next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus > .next-tag-close-btn, .next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus > .next-tag-close-btn { + color: #333333; } + [disabled].next-tag-default.next-tag-level-primary, [disabled].next-tag-closable.next-tag-level-primary, .disabled.next-tag-default.next-tag-level-primary, .disabled.next-tag-closable.next-tag-level-primary { + color: #CCCCCC; + border-color: #F7F8FA; + background-color: #F7F8FA; } + [disabled].next-tag-default.next-tag-level-primary > .next-tag-close-btn, [disabled].next-tag-closable.next-tag-level-primary > .next-tag-close-btn, .disabled.next-tag-default.next-tag-level-primary > .next-tag-close-btn, .disabled.next-tag-closable.next-tag-level-primary > .next-tag-close-btn { + color: #CCCCCC; } + .next-tag-default.next-tag-level-primary > .next-tag-close-btn, .next-tag-closable.next-tag-level-primary > .next-tag-close-btn { + color: #666666; } + +.next-tag-checkable.next-tag-level-primary { + color: #666666; + border-color: #EBECF0; + background-color: #EBECF0; } + .next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover, .next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover, .next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus { + color: #333333; + border-color: #E2E4E8; + background-color: #E2E4E8; } + .next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover > .next-tag-close-btn, .next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover > .next-tag-close-btn, .next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus > .next-tag-close-btn { + color: #333333; } + [disabled].next-tag-checkable.next-tag-level-primary, .disabled.next-tag-checkable.next-tag-level-primary { + color: #CCCCCC; + border-color: #F7F8FA; + background-color: #F7F8FA; } + [disabled].next-tag-checkable.next-tag-level-primary > .next-tag-close-btn, .disabled.next-tag-checkable.next-tag-level-primary > .next-tag-close-btn { + color: #CCCCCC; } + .next-tag-checkable.next-tag-level-primary > .next-tag-close-btn { + color: #666666; } + +.next-tag-checkable.next-tag-level-primary.checked { + color: #FFFFFF; + border-color: #5584FF; + background-color: #5584FF; } + .next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover, .next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover, .next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus { + color: #FFFFFF; + border-color: #3E71F7; + background-color: #3E71F7; } + .next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover > .next-tag-close-btn, .next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover > .next-tag-close-btn, .next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus > .next-tag-close-btn { + color: #FFFFFF; } + .next-tag-checkable.next-tag-level-primary.checked > .next-tag-close-btn { + color: #FFFFFF; } + +.next-tag-default.next-tag-level-normal { + color: #666666; + border-color: #C4C6CF; + background-color: transparent; } + .next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover, .next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover, .next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus { + color: #333333; + border-color: #A0A2AD; + background-color: transparent; } + .next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover > .next-tag-close-btn, .next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover > .next-tag-close-btn, .next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus > .next-tag-close-btn { + color: #333333; } + [disabled].next-tag-default.next-tag-level-normal, .disabled.next-tag-default.next-tag-level-normal { + color: #CCCCCC; + border-color: #E6E7EB; + background-color: #F7F8FA; } + [disabled].next-tag-default.next-tag-level-normal > .next-tag-close-btn, .disabled.next-tag-default.next-tag-level-normal > .next-tag-close-btn { + color: #CCCCCC; } + .next-tag-default.next-tag-level-normal > .next-tag-close-btn { + color: #666666; } + +.next-tag-closable.next-tag-level-normal { + color: #666666; + border-color: #C4C6CF; + background-color: transparent; } + .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover, .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover, .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus { + color: #333333; + border-color: #A0A2AD; + background-color: transparent; } + .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover > .next-tag-close-btn, .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover > .next-tag-close-btn, .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus > .next-tag-close-btn { + color: #333333; } + [disabled].next-tag-closable.next-tag-level-normal, .disabled.next-tag-closable.next-tag-level-normal { + color: #CCCCCC; + border-color: #E6E7EB; + background-color: transparent; } + [disabled].next-tag-closable.next-tag-level-normal > .next-tag-close-btn, .disabled.next-tag-closable.next-tag-level-normal > .next-tag-close-btn { + color: #CCCCCC; } + .next-tag-closable.next-tag-level-normal > .next-tag-close-btn { + color: #666666; } + +.next-tag-checkable.next-tag-level-normal.checked, .next-tag-checkable.next-tag-level-secondary.checked { + color: #5584FF; + border-color: #5584FF; + background-color: transparent; } + .next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover, .next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover, .next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover, .next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover, .next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus, .next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus { + color: #3E71F7; + border-color: #3E71F7; + background-color: transparent; } + +.next-tag-checkable.next-tag-level-secondary.checked:before { + position: absolute; + content: ""; + -webkit-font-smoothing: antialiased; + background-color: #5584FF; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); } + +.next-tag-checkable.next-tag-level-secondary.checked:after { + position: absolute; + font-family: NextIcon; + -webkit-font-smoothing: antialiased; + content: "\E632"; + -webkit-transform: scale(0.6); + -ms-transform: scale(0.6); + transform: scale(0.6); + color: #FFFFFF; } + +.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:before, .next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:before, .next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:before { + background-color: #3E71F7; } + +.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:after, .next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:after, .next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:after { + color: #FFFFFF; } + +[disabled].next-tag-checkable.next-tag-level-secondary.checked:before, .next-tag-checkable.next-tag-level-secondary.checked:disabled:before { + background-color: #E6E7EB; } + +[disabled].next-tag-checkable.next-tag-level-secondary.checked:after, .next-tag-checkable.next-tag-level-secondary.checked:disabled:after { + color: #FFFFFF; } + +.next-tag-checkable.next-tag-level-normal { + color: #666666; + border-color: #C4C6CF; + background-color: transparent; } + .next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):hover, .next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]).hover, .next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):focus { + color: #333333; + border-color: #C4C6CF; + background-color: transparent; } + [disabled].next-tag-checkable.next-tag-level-normal, .disabled.next-tag-checkable.next-tag-level-normal { + color: #CCCCCC; + border-color: #E6E7EB; + background-color: #F7F8FA; } + +.next-tag-checkable.next-tag-level-normal.checked:before { + position: absolute; + content: ""; + -webkit-font-smoothing: antialiased; + background-color: #5584FF; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); } + +.next-tag-checkable.next-tag-level-normal.checked:after { + position: absolute; + font-family: NextIcon; + -webkit-font-smoothing: antialiased; + content: "\E632"; + -webkit-transform: scale(0.6); + -ms-transform: scale(0.6); + transform: scale(0.6); + color: #FFFFFF; } + +.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:before, .next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:before, .next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:before { + background-color: #3E71F7; } + +.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:after, .next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:after, .next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:after { + color: #FFFFFF; } + +[disabled].next-tag-checkable.next-tag-level-normal.checked:before, .next-tag-checkable.next-tag-level-normal.checked:disabled:before { + background-color: #E6E7EB; } + +[disabled].next-tag-checkable.next-tag-level-normal.checked:after, .next-tag-checkable.next-tag-level-normal.checked:disabled:after { + color: #FFFFFF; } + +.next-tag-closable.next-tag-level-normal:before { + position: absolute; + content: ""; + -webkit-font-smoothing: antialiased; + background-color: #C4C6CF; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); } + +.next-tag-closable.next-tag-level-normal:after { + position: absolute; + font-family: NextIcon; + -webkit-font-smoothing: antialiased; + content: "\E626"; + -webkit-transform: scale(0.6); + -ms-transform: scale(0.6); + transform: scale(0.6); + color: #FFFFFF; } + +.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:before, .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:before, .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:before { + background-color: #A0A2AD; } + +.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:after, .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:after, .next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:after { + color: #FFFFFF; } + +[disabled].next-tag-closable.next-tag-level-normal:before, .next-tag-closable.next-tag-level-normal:disabled:before { + background-color: #E6E7EB; } + +[disabled].next-tag-closable.next-tag-level-normal:after, .next-tag-closable.next-tag-level-normal:disabled:after { + color: #FFFFFF; } + +.next- { + /* Animation */ + /* ----------- */ } + .next-tag-group .next-tag-medium, + .next-tag-group .next-tag-large { + margin-right: 8px; + margin-bottom: 8px; } + .next-tag-group .next-tag-small { + margin-right: 4px; + margin-bottom: 4px; } + .next-tag { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; + max-width: 100%; + vertical-align: middle; + border-width: 1px; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; + /* 可配置??? */ + overflow: hidden; + white-space: nowrap; + -webkit-transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1); + transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1); + font-size: 0; + outline: 0; } + .next-tag *, + .next-tag *:before, + .next-tag *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-tag > .next-tag-body { + position: relative; + display: inline-block; + height: 100%; + text-align: center; + vertical-align: middle; + max-width: 100%; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + /* 用户手动传的 icon 的大小也保持一致？ */ } + .next-tag > .next-tag-body > a { + text-decoration: none; + color: inherit; } + .next-tag > .next-tag-body > a:before { + content: " "; + position: absolute; + display: block; + top: 0; + left: 0; + right: 0; + bottom: 0; } + .next-tag > .next-tag-body .next-icon { + line-height: 1; + vertical-align: middle; } + .next-tag > .next-tag-body .next-icon:before { + font-size: inherit; } + .next-tag.next-tag-body-pointer { + cursor: pointer; } + .next-tag[disabled], .next-tag.disabled { + cursor: not-allowed; + pointer-events: none; } + .next-tag-large { + height: 40px; + padding: 0; + line-height: 38px; + font-size: 0; } + .next-tag-large > .next-tag-body { + font-size: 16px; + padding: 0 16px; + min-width: 48px; } + .next-tag-large.next-tag-closable > .next-tag-body { + padding: 0 0 0 16px; } + .next-tag-large[dir=rtl].next-tag-closable > .next-tag-body { + padding: 0 16px 0 0; } + .next-tag-large > .next-tag-close-btn { + margin-left: 12px; + padding-right: 16px; } + .next-tag-large > .next-tag-close-btn .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-tag-large[dir=rtl] > .next-tag-close-btn { + margin-right: 12px; + margin-left: 0; + padding-right: 0; + padding-left: 16px; } + .next-tag-medium { + height: 28px; + padding: 0; + line-height: 26px; + font-size: 0; } + .next-tag-medium > .next-tag-body { + font-size: 14px; + padding: 0 12px; + min-width: 40px; } + .next-tag-medium.next-tag-closable > .next-tag-body { + padding: 0 0 0 12px; } + .next-tag-medium[dir=rtl].next-tag-closable > .next-tag-body { + padding: 0 12px 0 0; } + .next-tag-medium > .next-tag-close-btn { + margin-left: 8px; + padding-right: 12px; } + .next-tag-medium > .next-tag-close-btn .next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-tag-medium > .next-tag-close-btn .next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-tag-medium > .next-tag-close-btn .next-icon:before { + width: 16px; + font-size: 16px; } } + .next-tag-medium[dir=rtl] > .next-tag-close-btn { + margin-right: 8px; + margin-left: 0; + padding-right: 0; + padding-left: 12px; } + .next-tag-small { + height: 20px; + padding: 0; + line-height: 18px; + font-size: 0; } + .next-tag-small > .next-tag-body { + font-size: 12px; + padding: 0 8px; + min-width: 28px; } + .next-tag-small.next-tag-closable > .next-tag-body { + padding: 0 0 0 8px; } + .next-tag-small[dir=rtl].next-tag-closable > .next-tag-body { + padding: 0 8px 0 0; } + .next-tag-small > .next-tag-close-btn { + margin-left: 8px; + padding-right: 8px; } + .next-tag-small > .next-tag-close-btn .next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-tag-small > .next-tag-close-btn .next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-tag-small > .next-tag-close-btn .next-icon:before { + width: 16px; + font-size: 16px; } } + .next-tag-small[dir=rtl] > .next-tag-close-btn { + margin-right: 8px; + margin-left: 0; + padding-right: 0; + padding-left: 8px; } + .next-tag-default { + cursor: default; } + .next-tag-closable { + position: relative; } + .next-tag-closable.next-tag-large > .next-tag-body { + max-width: calc(100% - 40px); } + .next-tag-closable.next-tag-medium > .next-tag-body { + max-width: calc(100% - 28px); } + .next-tag-closable.next-tag-small > .next-tag-body { + max-width: calc(100% - 20px); } + .next-tag-closable > .next-tag-close-btn { + display: inline-block; + vertical-align: middle; + height: 100%; + text-align: center; + cursor: pointer; } + .next-tag-closable.next-tag-level-normal[disabled], .next-tag-closable.next-tag-level-normal.disabled { + color: #CCCCCC; + border-color: #E6E7EB; + background-color: #F7F8FA; } + .next-tag-checkable { + cursor: pointer; + position: relative; + border-radius: 3px; } + .next-tag-checkable.checked:before { + -webkit-animation: fadeInRightForTag 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + animation: fadeInRightForTag 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); } + .next-tag-checkable.checked:after { + -webkit-animation: zoomIn 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + animation: zoomIn 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); } + .next-tag-checkable.next-tag-small:not(.next-tag-level-primary):before { + right: -10px; + bottom: -10px; + width: 20px; + height: 20px; } + .next-tag-checkable.next-tag-small:not(.next-tag-level-primary):after { + font-size: 8px; + line-height: 8px; + right: 0; + bottom: 0; } + .next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):before { + right: -14px; + bottom: -14px; + width: 28px; + height: 28px; } + .next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):after { + font-size: 12px; + line-height: 12px; + right: 0; + bottom: 0; } + .next-tag-checkable.next-tag-large:not(.next-tag-level-primary):before { + right: -18px; + bottom: -18px; + width: 36px; + height: 36px; } + .next-tag-checkable.next-tag-large:not(.next-tag-level-primary):after { + font-size: 16px; + line-height: 16px; + right: 0; + bottom: 0; } + .next-tag-checkable.next-tag-level-primary[disabled], .next-tag-checkable.next-tag-level-primary.disabled { + color: #CCCCCC; + /* $tag-text-color-disabled; */ + border-color: #F7F8FA; + background-color: #F7F8FA; } + .next-tag-checkable.next-tag-level-secondary[disabled], .next-tag-checkable.next-tag-level-secondary.disabled { + color: #CCCCCC; + border-color: #E6E7EB; + background-color: #F7F8FA; } + .next-tag-zoom-enter, .next-tag-zoom-appear { + -webkit-animation: fadeInLeft 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + animation: fadeInLeft 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; } + .next-tag-zoom-leave { + -webkit-animation: zoomOut .3s ease-in; + animation: zoomOut .3s ease-in; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; } + +.next-checkbox-wrapper[dir="rtl"] { + margin-right: 8px; + margin-left: 0; } + .next-checkbox-wrapper[dir="rtl"]:first-child { + margin-right: 0; } + .next-checkbox-wrapper[dir="rtl"] > .next-checkbox-label { + margin-right: 4px; + margin-left: 0; } + +/* stylelint-disable max-nesting-depth */ +.next-checkbox-wrapper { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-checkbox-wrapper *, + .next-checkbox-wrapper *:before, + .next-checkbox-wrapper *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-checkbox-wrapper .next-checkbox { + display: inline-block; + position: relative; + line-height: 1; + vertical-align: middle; } + .next-checkbox-wrapper input[type="checkbox"] { + opacity: 0; + position: absolute; + top: 0; + left: 0; + width: 16px; + height: 16px; + margin: 0; } + .next-checkbox-wrapper .next-checkbox-inner { + display: block; + width: 16px; + height: 16px; + background: #FFFFFF; + border-radius: 3px; + border: 1px solid #C4C6CF; + -webkit-transition: ease all .3s 0s; + transition: ease all .3s 0s; + text-align: left; + /* 防止继承父级 */ + -webkit-box-shadow: none; + box-shadow: none; + /* box-sizing: content-box; */ } + .next-checkbox-wrapper .next-checkbox-inner > .next-icon { + -webkit-transform: scale(0); + -ms-transform: scale(0); + transform: scale(0); + position: absolute; + top: 0; + opacity: 0; + line-height: 16px; + -webkit-transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + color: #FFFFFF; + left: 4px; + margin-left: 0; } + .next-checkbox-wrapper .next-checkbox-inner > .next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-checkbox-wrapper .next-checkbox-inner > .next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-checkbox-wrapper .next-checkbox-inner > .next-icon:before { + width: 16px; + font-size: 16px; } } + .next-checkbox-wrapper .next-checkbox-inner > .next-icon::before { + vertical-align: top; + margin-top: 0; } + .next-checkbox-wrapper.checked .next-checkbox-inner { + border-color: transparent; + background-color: #5584FF; } + .next-checkbox-wrapper.checked .next-checkbox-inner:hover, .next-checkbox-wrapper.checked .next-checkbox-inner.hovered { + border-color: transparent; } + .next-checkbox-wrapper.checked .next-checkbox-inner > .next-icon { + opacity: 1; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + margin-left: 0; + /* font-size < 12px的时候进行覆盖。 */ } + .next-checkbox-wrapper.checked .next-checkbox-inner > .next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-checkbox-wrapper.checked .next-checkbox-inner > .next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-checkbox-wrapper.checked .next-checkbox-inner > .next-icon:before { + width: 16px; + font-size: 16px; } } + .next-checkbox-wrapper.indeterminate .next-checkbox-inner { + border-color: transparent; + background-color: #5584FF; } + .next-checkbox-wrapper.indeterminate .next-checkbox-inner:hover, .next-checkbox-wrapper.indeterminate .next-checkbox-inner.hovered { + border-color: transparent; } + .next-checkbox-wrapper.indeterminate .next-checkbox-inner > .next-icon { + opacity: 1; + -webkit-transform: scale3d(1, 1, 1); + transform: scale3d(1, 1, 1); + margin-left: 0; + /* font-size < 12px的时候进行覆盖。 */ } + .next-checkbox-wrapper.indeterminate .next-checkbox-inner > .next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-checkbox-wrapper.indeterminate .next-checkbox-inner > .next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-checkbox-wrapper.indeterminate .next-checkbox-inner > .next-icon:before { + width: 16px; + font-size: 16px; } } + .next-checkbox-wrapper.disabled input[type="checkbox"] { + cursor: not-allowed; } + .next-checkbox-wrapper.disabled .next-checkbox-inner { + border-color: #E6E7EB; + background: #F7F8FA; } + .next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover, .next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered, .next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover, .next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered { + border-color: #E6E7EB; } + .next-checkbox-wrapper.disabled.checked .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner > .next-icon { + color: #CCCCCC; + opacity: 1; } + .next-checkbox-wrapper:not(.disabled):hover .next-checkbox-inner, .next-checkbox-wrapper.hovered .next-checkbox-inner, .next-checkbox-wrapper.focused .next-checkbox-inner { + border-color: #5584FF; + background-color: #DEE8FF; } + .next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner, .next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner, .next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner, .next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner, .next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner, .next-checkbox-wrapper.checked.focused .next-checkbox-inner { + border-color: transparent; + background-color: #3E71F7; } + .next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner > .next-icon, .next-checkbox-wrapper.checked.focused .next-checkbox-inner > .next-icon { + color: #FFFFFF; + opacity: 1; } + +.next-checkbox-group .next-checkbox-wrapper { + margin-left: 8px; } + .next-checkbox-group .next-checkbox-wrapper:first-child { + margin-left: 0; } + +.next-checkbox-group-ver .next-checkbox-wrapper { + display: block; + margin-left: 0; + margin-right: 0; + margin-bottom: 8px; } + +.next-checkbox-label { + font-size: 12px; + vertical-align: middle; + margin: 0; + margin-left: 4px; + line-height: 1; } + +.next-menu[dir="rtl"] .next-menu-item-helper { + float: left; } + +.next-menu[dir="rtl"] .next-menu-item .next-checkbox, +.next-menu[dir="rtl"] .next-menu-item .next-radio { + margin-left: 4px; + margin-right: 0; } + +.next-menu[dir="rtl"] .next-menu-hoz-right { + float: left; } + +.next-menu[dir="rtl"] .next-menu-icon-arrow.next-icon { + left: 10px; + right: auto; } + +.next-menu[dir="rtl"] .next-menu-hoz-icon-arrow.next-icon { + left: 6px; + right: auto; } + +.next-menu[dir="rtl"] .next-menu-icon-selected.next-icon { + margin-left: 0; + margin-right: -16px; } + .next-menu[dir="rtl"] .next-menu-icon-selected.next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-menu[dir="rtl"] .next-menu-icon-selected.next-icon.next-menu-icon-right { + right: auto; + left: 4px; } + +.next-menu[dir="rtl"] .next-menu-icon-arrow.next-icon { + left: 10px; + right: auto; } + +.next-menu { + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: relative; + min-width: 100px; + padding: 8px 0; + margin: 0; + list-style: none; + border: 1px solid #DCDEE3; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + background: #FFFFFF; + line-height: 32px; + font-size: 12px; + /* &-popup-content.next-hide { */ + /* display: none; */ + /* } */ } + .next-menu *, + .next-menu *:before, + .next-menu *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-menu:focus, + .next-menu *:focus { + outline: 0; } + .next-menu-embeddable, + .next-menu-embeddable .next-menu-item.next-disabled, + .next-menu-embeddable .next-menu-item.next-disabled .next-menu-item-text > a { + background: initial; + border: none; } + .next-menu-embeddable .next-menu-item-inner { + height: 100%; } + .next-menu-content { + position: relative; + padding: 0; + margin: 0; + list-style: none; } + .next-menu-sub-menu { + padding: 0; + margin: 0; + list-style: none; } + .next-menu-sub-menu.next-expand-enter { + overflow: hidden; } + .next-menu-sub-menu.next-expand-enter-active { + -webkit-transition: height .3s ease-out; + transition: height .3s ease-out; } + .next-menu-sub-menu.next-expand-leave { + overflow: hidden; } + .next-menu-sub-menu.next-expand-leave-active { + -webkit-transition: height .3s ease-out; + transition: height .3s ease-out; } + .next-menu-item { + position: relative; + padding: 0 20px; + -webkit-transition: background .2s ease; + transition: background .2s ease; + color: #333333; + cursor: pointer; } + .next-menu-item-helper { + float: right; + color: #999999; + font-style: normal; + font-size: 12px; } + .next-menu-item .next-checkbox, + .next-menu-item .next-radio { + margin-right: 4px; } + .next-menu-item.next-selected { + color: #333333; + background-color: #FFFFFF; } + .next-menu-item.next-selected .next-menu-icon-arrow { + color: #666666; } + .next-menu-item.next-selected .next-menu-icon-selected { + color: #5584FF; } + .next-menu-item.next-disabled, + .next-menu-item.next-disabled .next-menu-item-text > a { + color: #CCCCCC; + background-color: #FFFFFF; + cursor: not-allowed; } + .next-menu-item.next-disabled .next-menu-icon-arrow, + .next-menu-item.next-disabled .next-menu-item-text > a .next-menu-icon-arrow { + color: #CCCCCC; } + .next-menu-item.next-disabled .next-menu-icon-selected, + .next-menu-item.next-disabled .next-menu-item-text > a .next-menu-icon-selected { + color: #CCCCCC; } + .next-menu-item:not(.next-disabled):hover, .next-menu-item:not(.next-disabled).next-selected:hover, .next-menu-item:not(.next-disabled).next-selected.next-focused:hover, .next-menu-item:not(.next-disabled).next-selected:focus:hover, .next-menu-item:not(.next-disabled).next-focused, .next-menu-item:not(.next-disabled).next-selected.next-focused, .next-menu-item:not(.next-disabled).next-selected:focus { + color: #333333; + background-color: #F2F3F7; } + .next-menu-item:not(.next-disabled):hover .next-menu-icon-arrow, .next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-arrow, .next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-arrow, .next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-arrow, .next-menu-item:not(.next-disabled).next-focused .next-menu-icon-arrow, .next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-arrow, .next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-arrow { + color: #333333; } + .next-menu-item:not(.next-disabled):hover .next-menu-icon-selected, .next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-selected, .next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-selected, .next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-selected, .next-menu-item:not(.next-disabled).next-focused .next-menu-icon-selected, .next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-selected, .next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-selected { + color: #5584FF; } + .next-menu-item-inner { + height: 32px; + font-size: 12px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + word-wrap: normal; } + .next-menu-item-text { + vertical-align: middle; } + .next-menu-item-text > a { + display: inline-block; + text-decoration: none; + color: #333333; } + .next-menu-item-text > a::before { + position: absolute; + background-color: transparent; + top: 0; + left: 0; + bottom: 0; + right: 0; + content: ''; } + .next-menu.next-hoz { + padding: 0; } + .next-menu.next-hoz > .next-menu-item, + .next-menu.next-hoz .next-menu-content > .next-menu-item { + display: inline-block; + vertical-align: top; } + .next-menu.next-hoz .next-menu-header, + .next-menu.next-hoz .next-menu-content, + .next-menu.next-hoz .next-menu-footer { + display: inline-block; } + .next-menu-hoz-right { + float: right; } + .next-menu-group-label { + padding: 0 12px; + color: #999999; } + .next-menu-divider { + margin: 8px 12px; + border-bottom: 1px solid #E6E7EB; } + .next-menu .next-menu-icon-selected.next-icon { + position: absolute; + top: 0; + margin-left: -16px; } + .next-menu .next-menu-icon-selected.next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-menu .next-menu-icon-selected.next-icon.next-menu-icon-right { + right: 4px; } + .next-menu .next-menu-icon-arrow.next-icon { + position: absolute; + top: 0; + right: 10px; + color: #666666; + -webkit-transition: all ease .3s; + transition: all ease .3s; } + .next-menu .next-menu-icon-arrow.next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-menu .next-menu-icon-arrow.next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-menu .next-menu-icon-arrow.next-icon:before { + width: 16px; + font-size: 16px; } } + .next-menu .next-menu-icon-arrow-down.next-open { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + .next-menu .next-menu-icon-arrow-down.next-open:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-menu .next-menu-icon-arrow-down.next-open { + -webkit-transform: scale(0.5) rotate(180deg); + -ms-transform: scale(0.5) rotate(180deg); + transform: scale(0.5) rotate(180deg); + margin-left: -4px; + margin-right: -4px; } + .next-menu .next-menu-icon-arrow-down.next-open:before { + width: 16px; + font-size: 16px; } } + .next-menu .next-menu-icon-arrow-right.next-open { + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); } + .next-menu .next-menu-icon-arrow-right.next-open:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-menu .next-menu-icon-arrow-right.next-open { + -webkit-transform: scale(0.5) rotate(-90deg); + -ms-transform: scale(0.5) rotate(-90deg); + transform: scale(0.5) rotate(-90deg); + margin-left: -4px; + margin-right: -4px; } + .next-menu .next-menu-icon-arrow-right.next-open:before { + width: 16px; + font-size: 16px; } } + .next-menu .next-menu-hoz-icon-arrow.next-icon { + position: absolute; + top: 0; + right: 6px; + color: #666666; + -webkit-transition: all ease .3s; + transition: all ease .3s; } + .next-menu .next-menu-hoz-icon-arrow.next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-menu .next-menu-hoz-icon-arrow.next-open { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + .next-menu .next-menu-hoz-icon-arrow.next-open:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-menu.next-context { + line-height: 24px; } + .next-menu.next-context .next-menu-item-inner { + height: 24px; } + +.next-input { + -webkit-box-sizing: border-box; + box-sizing: border-box; + vertical-align: middle; + display: inline-table; + border-collapse: separate; + font-size: 0; + line-height: 1; + width: 200px; + border-spacing: 0; + -webkit-transition: all .3s ease-out; + transition: all .3s ease-out; + border: 1px solid #C4C6CF; + background-color: #FFFFFF; } + .next-input *, + .next-input *:before, + .next-input *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-input input { + height: 100%; + /* remove autoFill yellow background */ } + .next-input input[type="reset"], .next-input input[type="submit"] { + -webkit-appearance: button; + cursor: pointer; } + .next-input input::-moz-focus-inner { + border: 0; + padding: 0; } + .next-input input:-webkit-autofill { + -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset; } + .next-input textarea { + resize: none; } + .next-input input, + .next-input textarea { + width: 100%; + border: none; + outline: none; + padding: 0; + margin: 0; + font-weight: normal; + vertical-align: middle; + background-color: transparent; + color: #333333; } + .next-input input::-ms-clear, + .next-input textarea::-ms-clear { + display: none; } + .next-input.next-input-textarea { + border-radius: 3px; + font-size: 0; } + .next-input.next-input-textarea textarea { + color: #333333; + padding: 4px 8px; + font-size: 12px; + border-radius: 3px; } + .next-input.next-input-textarea .next-input-control { + display: block; + width: auto; + border-radius: 3px; } + .next-input.next-input-textarea .next-input-len { + padding: 0 8px 4px; + display: block; + text-align: right; + width: auto; } + .next-input.next-small { + height: 20px; + border-radius: 3px; } + .next-input.next-small .next-input-label { + padding-left: 8px; + font-size: 12px; } + .next-input.next-small .next-input-inner { + font-size: 12px; } + .next-input.next-small .next-input-control { + padding-right: 4px; } + .next-input.next-small input { + height: 18px; + line-height: 18px \0; + padding: 0 4px; + font-size: 12px; } + .next-input.next-small input::-webkit-input-placeholder { + font-size: 12px; } + .next-input.next-small input::-moz-placeholder { + font-size: 12px; } + .next-input.next-small input::-ms-input-placeholder { + font-size: 12px; } + .next-input.next-small input::placeholder { + font-size: 12px; } + .next-input.next-small .next-input-text-field { + padding: 0 4px; + font-size: 12px; + height: 18px; + line-height: 18px; } + .next-input.next-small .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-input.next-small input { + border-radius: 3px; } + .next-input.next-small .next-input-control { + border-radius: 0 3px 3px 0; } + .next-input.next-medium { + height: 28px; + border-radius: 3px; } + .next-input.next-medium .next-input-label { + padding-left: 8px; + font-size: 12px; } + .next-input.next-medium .next-input-inner { + font-size: 12px; } + .next-input.next-medium .next-input-control { + padding-right: 8px; } + .next-input.next-medium input { + height: 26px; + line-height: 26px \0; + padding: 0 8px; + font-size: 12px; } + .next-input.next-medium input::-webkit-input-placeholder { + font-size: 12px; } + .next-input.next-medium input::-moz-placeholder { + font-size: 12px; } + .next-input.next-medium input::-ms-input-placeholder { + font-size: 12px; } + .next-input.next-medium input::placeholder { + font-size: 12px; } + .next-input.next-medium .next-input-text-field { + padding: 0 8px; + font-size: 12px; + height: 26px; + line-height: 26px; } + .next-input.next-medium .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-input.next-medium input { + border-radius: 3px; } + .next-input.next-medium .next-input-control { + border-radius: 0 3px 3px 0; } + .next-input.next-large { + height: 40px; + border-radius: 3px; } + .next-input.next-large .next-input-label { + padding-left: 12px; + font-size: 16px; } + .next-input.next-large .next-input-inner { + font-size: 16px; } + .next-input.next-large .next-input-control { + padding-right: 8px; } + .next-input.next-large input { + height: 38px; + line-height: 38px \0; + padding: 0 12px; + font-size: 16px; } + .next-input.next-large input::-webkit-input-placeholder { + font-size: 16px; } + .next-input.next-large input::-moz-placeholder { + font-size: 16px; } + .next-input.next-large input::-ms-input-placeholder { + font-size: 16px; } + .next-input.next-large input::placeholder { + font-size: 16px; } + .next-input.next-large .next-input-text-field { + padding: 0 12px; + font-size: 16px; + height: 38px; + line-height: 38px; } + .next-input.next-large .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-input.next-large input { + border-radius: 3px; } + .next-input.next-large .next-input-control { + border-radius: 0 3px 3px 0; } + .next-input-hint-wrap { + color: #999999; + position: relative; } + .next-input-hint-wrap .next-input-clear { + opacity: 0; + z-index: 1; + position: absolute; } + .next-input-hint-wrap .next-input-hint { + opacity: 1; } + .next-input .next-icon-delete-filling:hover { + cursor: pointer; + color: #666666; } + .next-input:hover, .next-input.next-focus { + border-color: #A0A2AD; + background-color: #FFFFFF; } + .next-input:hover .next-input-clear, .next-input.next-focus .next-input-clear { + opacity: 1; } + .next-input:hover .next-input-clear + .next-input-hint, .next-input.next-focus .next-input-clear + .next-input-hint { + opacity: 0; } + .next-input .next-input-clear:focus { + opacity: 1; } + .next-input .next-input-clear:focus + .next-input-hint { + opacity: 0; } + .next-input.next-focus { + border-color: #5584FF; + background-color: #FFFFFF; } + .next-input.next-error { + border-color: #FF3000; } + .next-input.next-error.next-focus, .next-input.next-error:hover { + border-color: #FF3000; } + .next-input.next-hidden { + display: none; } + .next-input.next-noborder { + border: none; } + .next-input-control .next-input-len { + font-size: 12px; + line-height: 12px; + color: #999999; + display: table-cell; + width: 1px; + vertical-align: bottom; } + .next-input-control .next-input-len.next-error { + color: #FF3000; } + .next-input-control > * { + display: table-cell; + width: 1%; + top: 0; } + .next-input-control > *:not(:last-child) { + padding-right: 4px; } + .next-input-control .next-icon { + -webkit-transition: all .3s ease-out; + transition: all .3s ease-out; + color: #999999; } + .next-input-control .next-icon-success-filling { + color: #46BC15; } + .next-input-control .next-icon-loading { + color: #4494F9; } + .next-input-label { + color: #666666; } + .next-input input::-moz-placeholder, + .next-input textarea::-moz-placeholder { + color: #999999; + opacity: 1; } + .next-input input:-ms-input-placeholder, + .next-input textarea:-ms-input-placeholder { + color: #999999; } + .next-input input::-webkit-input-placeholder, + .next-input textarea::-webkit-input-placeholder { + color: #999999; } + .next-input.next-disabled { + color: #CCCCCC; + border-color: #E6E7EB; + background-color: #F7F8FA; + cursor: not-allowed; + background-color: #F7F8FA; } + .next-input.next-disabled:hover { + border-color: #E6E7EB; + background-color: #F7F8FA; } + .next-input.next-disabled input::-moz-placeholder, .next-input.next-disabled textarea::-moz-placeholder { + color: #CCCCCC; + opacity: 1; } + .next-input.next-disabled input:-ms-input-placeholder, .next-input.next-disabled textarea:-ms-input-placeholder { + color: #CCCCCC; } + .next-input.next-disabled input::-webkit-input-placeholder, .next-input.next-disabled textarea::-webkit-input-placeholder { + color: #CCCCCC; } + .next-input.next-disabled .next-input-label { + color: #CCCCCC; } + .next-input.next-disabled .next-input-len { + color: #CCCCCC; } + .next-input.next-disabled input, + .next-input.next-disabled textarea { + color: #CCCCCC; + border-color: #E6E7EB; + background-color: #F7F8FA; + cursor: not-allowed; } + .next-input.next-disabled input:hover, + .next-input.next-disabled textarea:hover { + border-color: #E6E7EB; + background-color: #F7F8FA; } + .next-input.next-disabled .next-input-hint-wrap { + color: #CCCCCC; } + .next-input.next-disabled .next-input-hint-wrap .next-input-clear { + opacity: 0; } + .next-input.next-disabled .next-input-hint-wrap .next-input-hint { + opacity: 1; } + .next-input.next-disabled .next-input-hint-wrap .next-icon-delete-filling:hover { + cursor: not-allowed; + color: #CCCCCC; } + .next-input.next-disabled .next-icon { + color: #CCCCCC; } + .next-input-inner, .next-input-control, .next-input-label { + display: table-cell; + width: 1px; + vertical-align: middle; + line-height: 1; + background-color: transparent; + white-space: nowrap; } + .next-input-group { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-table; + border-collapse: separate; + border-spacing: 0; + line-height: 0; + width: 100%; } + .next-input-group *, + .next-input-group *:before, + .next-input-group *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-input-group-auto-width { + width: 100%; + border-radius: 0 !important; } + .next-input-group > .next-input:first-child.next-small { + border-top-left-radius: 3px !important; + border-bottom-left-radius: 3px !important; } + .next-input-group > .next-input:first-child.next-medium { + border-top-left-radius: 3px !important; + border-bottom-left-radius: 3px !important; } + .next-input-group > .next-input:first-child.next-large { + border-top-left-radius: 3px !important; + border-bottom-left-radius: 3px !important; } + .next-input-group > .next-input:last-child.next-small { + border-top-right-radius: 3px !important; + border-bottom-right-radius: 3px !important; } + .next-input-group > .next-input:last-child.next-medium { + border-top-right-radius: 3px !important; + border-bottom-right-radius: 3px !important; } + .next-input-group > .next-input:last-child.next-large { + border-top-right-radius: 3px !important; + border-bottom-right-radius: 3px !important; } + .next-input-group-addon { + width: 1px; + display: table-cell; + vertical-align: middle; + white-space: nowrap; + /* stylelint-disable declaration-no-important */ } + .next-input-group-addon:first-child { + border-bottom-right-radius: 0 !important; + border-top-right-radius: 0 !important; } + .next-input-group-addon:first-child > * { + border-bottom-right-radius: 0 !important; + border-top-right-radius: 0 !important; } + .next-input-group-addon:last-child { + border-bottom-left-radius: 0 !important; + border-top-left-radius: 0 !important; } + .next-input-group-addon:last-child > * { + border-bottom-left-radius: 0 !important; + border-top-left-radius: 0 !important; } + .next-input-group-text { + color: #999999; + background-color: #F2F3F7; + text-align: center; + border: 1px solid #C4C6CF; + padding: 0 8px; } + .next-input-group-text:first-child { + border-right-width: 0; } + .next-input-group-text:last-child { + border-left-width: 0; } + .next-input-group-text.next-disabled { + color: #CCCCCC; + border-color: #E6E7EB; + background-color: #F7F8FA; + cursor: not-allowed; } + .next-input-group-text.next-disabled:hover { + border-color: #E6E7EB; + background-color: #F7F8FA; } + .next-input-group-text.next-small { + font-size: 12px; + border-radius: 3px; } + .next-input-group-text.next-medium { + font-size: 12px; + border-radius: 3px; } + .next-input-group-text.next-large { + font-size: 16px; + border-radius: 3px; } + +.next-input[dir="rtl"].next-small .next-input-label { + padding-left: 0; + padding-right: 8px; } + +.next-input[dir="rtl"].next-small .next-input-control { + padding-right: 0; + padding-left: 4px; } + +.next-input[dir="rtl"].next-medium .next-input-label { + padding-left: 0; + padding-right: 8px; } + +.next-input[dir="rtl"].next-medium .next-input-control { + padding-right: 0; + padding-left: 8px; } + +.next-input[dir="rtl"].next-large .next-input-label { + padding-left: 0; + padding-right: 12px; } + +.next-input[dir="rtl"].next-large .next-input-control { + padding-right: 0; + padding-left: 8px; } + +.next-input[dir="rtl"].next-input-textarea .next-input-len { + text-align: left; } + +.next-input[dir="rtl"] .next-input-control > *:not(:last-child) { + padding-left: 4px; + padding-right: 0; } + +.next-input-group[dir="rtl"] .next-input-group-addon { + /* stylelint-disable declaration-no-important */ } + .next-input-group[dir="rtl"] .next-input-group-addon:first-child { + border-bottom-left-radius: 0 !important; + border-top-left-radius: 0 !important; } + .next-input-group[dir="rtl"] .next-input-group-addon:first-child.next-small { + border-bottom-right-radius: 3px !important; + border-top-right-radius: 3px !important; } + .next-input-group[dir="rtl"] .next-input-group-addon:first-child.next-medium { + border-bottom-right-radius: 3px !important; + border-top-right-radius: 3px !important; } + .next-input-group[dir="rtl"] .next-input-group-addon:first-child.next-large { + border-bottom-right-radius: 3px !important; + border-top-right-radius: 3px !important; } + .next-input-group[dir="rtl"] .next-input-group-addon:last-child { + border-bottom-right-radius: 0 !important; + border-top-right-radius: 0 !important; } + .next-input-group[dir="rtl"] .next-input-group-addon:last-child.next-small { + border-bottom-left-radius: 3px !important; + border-top-left-radius: 3px !important; } + .next-input-group[dir="rtl"] .next-input-group-addon:last-child.next-medium { + border-bottom-left-radius: 3px !important; + border-top-left-radius: 3px !important; } + .next-input-group[dir="rtl"] .next-input-group-addon:last-child.next-large { + border-bottom-left-radius: 3px !important; + border-top-left-radius: 3px !important; } + +.next-input-group[dir="rtl"] .next-input-group-text:first-child { + border-right-width: 1px; + border-left: 0; } + +.next-input-group[dir="rtl"] .next-input-group-text:last-child { + border-left-width: 1px; + border-right: 0; } + +.next-select { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; + font-size: 0; + vertical-align: middle; + /* Select trigger */ + /* 弹层 */ + /* 全选按钮 */ + /* -------------- IE polyfill -------------- */ + /* 根据最新的数据，在中国，PC 端的 IE9 份额为 2%， */ + /* 所以不应该因为 IE9 而不使用 flex，而是应该做降级 polyfill */ + /* @see http://gs.statcounter.com/ */ + /* IE10、IE11 虽然支持 flex，但还是会有各种各样奇奇怪怪的问题 */ } + .next-select *, + .next-select *:before, + .next-select *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-select-trigger { + min-width: 100px; + outline: 0; + -webkit-transition: all .3s ease; + transition: all .3s ease; } + .next-select-trigger .next-input-label { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: auto; } + .next-select-trigger .next-select-values { + display: block; + width: 100%; + -webkit-box-flex: 1; + -ms-flex: 1 1 0px; + flex: 1 1 0; + overflow: hidden; } + .next-select-trigger .next-select-values > em { + font-style: inherit; } + .next-select-trigger .next-select-values input { + padding-left: 0; + padding-right: 0; } + .next-select-trigger .next-input-control { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: auto; } + .next-select-trigger .next-input-control > * { + display: inline-block; + width: auto; } + .next-select-trigger .next-input-control > .next-select-arrow { + padding-right: 0; } + .next-select-trigger .next-input.next-disabled em { + color: #CCCCCC; } + .next-select-trigger .next-input.next-disabled .next-select-arrow { + cursor: not-allowed; } + .next-select-trigger .next-select-clear { + display: none; } + .next-select-trigger.next-has-clear:hover .next-select-clear { + display: inline-block; } + .next-select-trigger.next-has-clear:hover .next-select-arrow { + display: none; } + .next-select .next-select-inner { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 100%; + min-width: 100px; + outline: 0; + color: #333333; } + .next-select .next-select-inner .next-tag { + line-height: 1; + margin-right: 4px; + margin-bottom: 3px; + padding-left: 4px; + padding-right: 4px; } + .next-select-trigger-search { + position: relative; + display: inline-block; + vertical-align: top; + overflow: hidden; + width: 100%; + max-width: 100%; } + .next-select-trigger-search > input, .next-select-trigger-search > span { + display: block; + font-size: inherit; + font-family: inherit; + letter-spacing: inherit; + white-space: nowrap; + overflow: hidden; } + .next-select-trigger-search input { + position: absolute; + background-color: transparent; + width: 100%; + height: 100% !important; + z-index: 1; + left: 0; + border: 0; + outline: 0; + margin: 0; + padding: 0; + cursor: inherit; } + .next-select-trigger-search > span { + position: relative; + visibility: hidden; + white-space: pre; + max-width: 100%; + /* 在 table 布局中，100% 并没有什么x用 */ + z-index: -1; } + .next-select-single { + /* 搜索框激活时，展开后不显示值，只显示搜索框 */ + /* 搜索框未激活，或者menu未展开，如果有值，则不显示搜索(placeholder) */ } + .next-select-single.next-no-search { + cursor: pointer; } + .next-select-single.next-has-search.next-active .next-select-values > em { + display: none; } + .next-select-single.next-no-search .next-select-values > em + .next-select-trigger-search, .next-select-single.next-inactive .next-select-values > em + .next-select-trigger-search { + width: 1px; + opacity: 0; + filter: alpha(opacity=0); + /* for IE 9 */ } + .next-select-single.next-no-search .next-select-trigger-search input, .next-select-single.next-inactive .next-select-trigger-search input { + color: transparent; } + .next-select-single .next-select-values { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } + .next-select-single .next-select-values > em { + vertical-align: middle; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } + .next-select-multiple, .next-select-tag { + /* 如果有值，则搜索框变为1px */ } + .next-select-multiple .next-select-values, .next-select-tag .next-select-values { + /* Tag 有 3px 的 margin-bottom，所以包裹 Tag 的容器要作一下处理 */ + margin-bottom: -3px; + height: auto !important; } + .next-select-multiple .next-select-trigger-search, .next-select-tag .next-select-trigger-search { + margin-bottom: 3px; } + .next-select-multiple .next-tag + .next-select-trigger-search, .next-select-tag .next-tag + .next-select-trigger-search { + width: auto; + min-width: 1px; + /* 保留一个光标的宽度 */ } + .next-select-multiple .next-input, .next-select-tag .next-input { + height: auto; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: start; } + .next-select-multiple.next-small .next-select-values, .next-select-tag.next-small .next-select-values { + min-height: 18px; + padding-top: 2px; + padding-bottom: 2px; + line-height: 14px; } + .next-select-multiple.next-small .next-tag, .next-select-tag.next-small .next-tag { + border: 0; + padding-top: 0px; + padding-bottom: 0px; + height: 14px; } + .next-select-multiple.next-small .next-tag .next-tag-body, .next-select-multiple.next-small .next-tag .next-tag-close-btn, .next-select-tag.next-small .next-tag .next-tag-body, .next-select-tag.next-small .next-tag .next-tag-close-btn { + line-height: 14px; } + .next-select-multiple.next-small .next-tag-body, .next-select-tag.next-small .next-tag-body { + line-height: 14px; } + .next-select-multiple.next-small .next-input-label, .next-select-multiple.next-small .next-input-control, .next-select-tag.next-small .next-input-label, .next-select-tag.next-small .next-input-control { + line-height: 18px; } + .next-select-multiple.next-medium .next-select-values, .next-select-tag.next-medium .next-select-values { + min-height: 26px; + padding-top: 3px; + padding-bottom: 3px; + line-height: 20px; } + .next-select-multiple.next-medium .next-tag, .next-select-tag.next-medium .next-tag { + padding-top: 1px; + padding-bottom: 1px; + height: 20px; } + .next-select-multiple.next-medium .next-tag .next-tag-body, .next-select-multiple.next-medium .next-tag .next-tag-close-btn, .next-select-tag.next-medium .next-tag .next-tag-body, .next-select-tag.next-medium .next-tag .next-tag-close-btn { + line-height: 18px; } + .next-select-multiple.next-medium .next-input-label, .next-select-multiple.next-medium .next-input-control, .next-select-tag.next-medium .next-input-label, .next-select-tag.next-medium .next-input-control { + line-height: 26px; } + .next-select-multiple.next-large .next-select-values, .next-select-tag.next-large .next-select-values { + min-height: 38px; + padding-top: 7px; + padding-bottom: 7px; + line-height: 24px; } + .next-select-multiple.next-large .next-tag, .next-select-tag.next-large .next-tag { + padding-top: 3px; + padding-bottom: 3px; + height: 24px; } + .next-select-multiple.next-large .next-tag .next-tag-body, .next-select-multiple.next-large .next-tag .next-tag-close-btn, .next-select-tag.next-large .next-tag .next-tag-body, .next-select-tag.next-large .next-tag .next-tag-close-btn { + line-height: 18px; } + .next-select-multiple.next-large .next-input-label, .next-select-multiple.next-large .next-input-control, .next-select-tag.next-large .next-input-label, .next-select-tag.next-large .next-input-control { + line-height: 38px; } + .next-select.next-no-search { + /* 在搜索框未激活时，将 input 的 color 置为透明 */ + /* ISSUE: 在 firefox 中，readonly 的 input 仍然会显示光标 */ } + .next-select.next-no-search .next-select-trigger-search input { + color: transparent; } + .next-select-auto-complete { + width: 160px; } + .next-select-auto-complete .next-input { + width: 100%; + /* table-cell 下 margin 无效 */ } + .next-select-auto-complete .next-input .next-input-hint-wrap { + padding-right: 1px; } + .next-select-auto-complete .next-input .next-select-arrow { + padding-left: 0; } + .next-select.next-active .next-select-arrow { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + .next-select-arrow { + cursor: pointer; + width: auto !important; + text-align: center; + -webkit-transition: all .3s ease; + transition: all .3s ease; + /* transform-origin: center 41.8%; // icon 图像中心 */ } + .next-select-menu-wrapper { + max-height: 260px; + overflow: auto; + border: 1px solid #DCDEE3; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; } + .next-select-menu-wrapper .next-select-menu { + max-height: none; + border: none; } + .next-select-menu { + max-height: 260px; + overflow: auto; + /* autoComplete 没有选项时 menu 不显示 */ } + .next-select-menu .next-select-menu-empty-content { + padding-left: 8px; + padding-right: 8px; + color: #999999; } + .next-select-menu.next-select-auto-complete-menu.next-select-menu-empty { + display: none; } + .next-select-menu .next-menu-item-text .next-icon { + vertical-align: middle; } + .next-select-all { + display: block; + cursor: pointer; + padding: 0 8px; + margin: 0 12px 8px; + border-bottom: 1px solid #DCDEE3; } + .next-select-all:hover { + color: #3E71F7; } + .next-select-all .next-menu-icon-selected.next-icon { + display: inline-block !important; + top: initial; + color: #5584FF; } + .next-select-highlight { + color: #5584FF; + font-size: 12px; } + .next-select-in-ie.next-select-trigger .next-select-values { + /* 在 table 布局中，overflow: hidden 会导致负的 margin 失效 */ + overflow: visible; } + .next-select-in-ie.next-select-trigger .next-input-control, .next-select-in-ie.next-select-trigger .next-input-label { + width: 1px; } + .next-select-in-ie.next-select-trigger .next-input-control > * { + display: table-cell; + width: 1%; } + .next-select-in-ie.next-select-trigger .next-select-arrow { + display: table-cell; } + .next-select-in-ie.next-select-trigger .next-select-clear { + display: none; } + .next-select-in-ie.next-select-trigger.next-select-multiple .next-select-inner, .next-select-in-ie.next-select-trigger.next-select-tag .next-select-inner { + vertical-align: top; } + .next-select-in-ie.next-select-trigger .next-select-inner { + display: inline-table; } + .next-select-in-ie.next-select-trigger.next-select-single .next-select-values { + display: inline-table; } + .next-select-in-ie.next-select-trigger.next-select-single .next-input.next-small .next-select-values { + line-height: 20px; } + .next-select-in-ie.next-select-trigger.next-select-single .next-input.next-medium .next-select-values { + line-height: 28px; } + .next-select-in-ie.next-select-trigger.next-select-single .next-input.next-large .next-select-values { + line-height: 40px; } + .next-select-in-ie.next-select-trigger .next-select-trigger-search > span { + max-width: 100px; } + .next-select-in-ie.next-select-trigger.next-select-single { + /* 搜索框未激活，或者menu未展开，如果有值，则不显示搜索(placeholder) */ } + .next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values { + position: relative; } + .next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values > em { + position: absolute; + display: inline-block; + height: 100%; + line-height: 1; + vertical-align: middle; + overflow: hidden; + left: 4px; + right: 0; + top: 30%; } + .next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-values > em + .next-select-trigger-search, .next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-values > em + .next-select-trigger-search { + filter: alpha(opacity=0); + /* for IE 9 */ + font-size: 0; } + .next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-trigger-search input, .next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-trigger-search input { + color: inherit; } + .next-select-in-ie.next-select-trigger.next-no-search .next-select-trigger-search input { + color: inherit; } + +.next-calendar { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-calendar *, + .next-calendar *:before, + .next-calendar *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-calendar table { + border-collapse: collapse; + border-spacing: 0; } + .next-calendar td, + .next-calendar th { + padding: 0; } + +@-webkit-keyframes cellZoomIn { + 0% { + -webkit-transform: scale(0.5); + transform: scale(0.5); } + 100% { + -webkit-transform: scale(1); + transform: scale(1); } } + +@keyframes cellZoomIn { + 0% { + -webkit-transform: scale(0.5); + transform: scale(0.5); } + 100% { + -webkit-transform: scale(1); + transform: scale(1); } } + +@-webkit-keyframes cellHover { + 0% { + opacity: 0; } + 100% { + opacity: 1; } } + +@keyframes cellHover { + 0% { + opacity: 0; } + 100% { + opacity: 1; } } + +@-webkit-keyframes enterToLeft { + 0% { + -webkit-transform: translate(-40%); + transform: translate(-40%); + opacity: 0; } + 50% { + opacity: .6; } + 100% { + opacity: 1; + -webkit-transform: translate(0%); + transform: translate(0%); } } + +@keyframes enterToLeft { + 0% { + -webkit-transform: translate(-40%); + transform: translate(-40%); + opacity: 0; } + 50% { + opacity: .6; } + 100% { + opacity: 1; + -webkit-transform: translate(0%); + transform: translate(0%); } } + +@-webkit-keyframes enterToRight { + 0% { + -webkit-transform: translate(40%); + transform: translate(40%); + opacity: 0; } + 50% { + opacity: .6; } + 100% { + opacity: 1; + -webkit-transform: translate(0%); + transform: translate(0%); } } + +@keyframes enterToRight { + 0% { + -webkit-transform: translate(40%); + transform: translate(40%); + opacity: 0; } + 50% { + opacity: .6; } + 100% { + opacity: 1; + -webkit-transform: translate(0%); + transform: translate(0%); } } + +.next-calendar-fullscreen .next-calendar-header, .next-calendar-card .next-calendar-header { + text-align: right; } + .next-calendar-fullscreen .next-calendar-header .next-select, .next-calendar-card .next-calendar-header .next-select { + margin-right: 4px; + vertical-align: top; } + .next-calendar-fullscreen .next-calendar-header .next-menu, .next-calendar-card .next-calendar-header .next-menu { + text-align: left; } + +.next-calendar-fullscreen .next-calendar-header { + margin-bottom: 8px; } + +.next-calendar-card .next-calendar-header { + margin-bottom: 8px; } + +.next-calendar-panel-header { + position: relative; + background: #5584FF; + margin-bottom: 8px; + border-bottom: 1px solid transparent; } + .next-calendar-panel-header-left, .next-calendar-panel-header-right, .next-calendar-panel-header-full { + height: 32px; + line-height: 32px; } + .next-calendar-panel-header-left .next-calendar-btn, .next-calendar-panel-header-right .next-calendar-btn, .next-calendar-panel-header-full .next-calendar-btn { + vertical-align: top; + font-weight: bold; + margin: 0 4px; + background-color: transparent; + border-color: transparent; } + .next-calendar-panel-header-left .next-calendar-btn, .next-calendar-panel-header-left .next-calendar-btn:link, .next-calendar-panel-header-left .next-calendar-btn:visited, .next-calendar-panel-header-left .next-calendar-btn.visited, .next-calendar-panel-header-right .next-calendar-btn, .next-calendar-panel-header-right .next-calendar-btn:link, .next-calendar-panel-header-right .next-calendar-btn:visited, .next-calendar-panel-header-right .next-calendar-btn.visited, .next-calendar-panel-header-full .next-calendar-btn, .next-calendar-panel-header-full .next-calendar-btn:link, .next-calendar-panel-header-full .next-calendar-btn:visited, .next-calendar-panel-header-full .next-calendar-btn.visited { + color: #FFFFFF; } + .next-calendar-panel-header-left .next-calendar-btn:focus, .next-calendar-panel-header-left .next-calendar-btn:hover, .next-calendar-panel-header-left .next-calendar-btn.hover, .next-calendar-panel-header-left .next-calendar-btn:active, .next-calendar-panel-header-left .next-calendar-btn.active, .next-calendar-panel-header-right .next-calendar-btn:focus, .next-calendar-panel-header-right .next-calendar-btn:hover, .next-calendar-panel-header-right .next-calendar-btn.hover, .next-calendar-panel-header-right .next-calendar-btn:active, .next-calendar-panel-header-right .next-calendar-btn.active, .next-calendar-panel-header-full .next-calendar-btn:focus, .next-calendar-panel-header-full .next-calendar-btn:hover, .next-calendar-panel-header-full .next-calendar-btn.hover, .next-calendar-panel-header-full .next-calendar-btn:active, .next-calendar-panel-header-full .next-calendar-btn.active { + color: #FFFFFF; + background-color: transparent; + border-color: transparent; + text-decoration: none; } + .next-calendar-panel-header-left, .next-calendar-panel-header-right { + display: inline-block; + width: 50%; + text-align: center; } + .next-calendar-panel-header-full { + width: 100%; + text-align: center; } + +.next-calendar-btn { + cursor: pointer; + padding: 0; + margin: 0; + border: 0; + background: transparent; + outline: none; + height: 100%; } + .next-calendar-btn > .next-icon.next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-calendar-btn-prev-year, .next-calendar-btn-prev-month, .next-calendar-btn-prev-decade, .next-calendar-btn-next-month, .next-calendar-btn-next-year, .next-calendar-btn-next-decade { + position: absolute; + top: 0; + background-color: transparent; + border-color: transparent; } + .next-calendar-btn-prev-year, .next-calendar-btn-prev-year:link, .next-calendar-btn-prev-year:visited, .next-calendar-btn-prev-year.visited, .next-calendar-btn-prev-month, .next-calendar-btn-prev-month:link, .next-calendar-btn-prev-month:visited, .next-calendar-btn-prev-month.visited, .next-calendar-btn-prev-decade, .next-calendar-btn-prev-decade:link, .next-calendar-btn-prev-decade:visited, .next-calendar-btn-prev-decade.visited, .next-calendar-btn-next-month, .next-calendar-btn-next-month:link, .next-calendar-btn-next-month:visited, .next-calendar-btn-next-month.visited, .next-calendar-btn-next-year, .next-calendar-btn-next-year:link, .next-calendar-btn-next-year:visited, .next-calendar-btn-next-year.visited, .next-calendar-btn-next-decade, .next-calendar-btn-next-decade:link, .next-calendar-btn-next-decade:visited, .next-calendar-btn-next-decade.visited { + color: #FFFFFF; } + .next-calendar-btn-prev-year:focus, .next-calendar-btn-prev-year:hover, .next-calendar-btn-prev-year.hover, .next-calendar-btn-prev-year:active, .next-calendar-btn-prev-year.active, .next-calendar-btn-prev-month:focus, .next-calendar-btn-prev-month:hover, .next-calendar-btn-prev-month.hover, .next-calendar-btn-prev-month:active, .next-calendar-btn-prev-month.active, .next-calendar-btn-prev-decade:focus, .next-calendar-btn-prev-decade:hover, .next-calendar-btn-prev-decade.hover, .next-calendar-btn-prev-decade:active, .next-calendar-btn-prev-decade.active, .next-calendar-btn-next-month:focus, .next-calendar-btn-next-month:hover, .next-calendar-btn-next-month.hover, .next-calendar-btn-next-month:active, .next-calendar-btn-next-month.active, .next-calendar-btn-next-year:focus, .next-calendar-btn-next-year:hover, .next-calendar-btn-next-year.hover, .next-calendar-btn-next-year:active, .next-calendar-btn-next-year.active, .next-calendar-btn-next-decade:focus, .next-calendar-btn-next-decade:hover, .next-calendar-btn-next-decade.hover, .next-calendar-btn-next-decade:active, .next-calendar-btn-next-decade.active { + color: #FFFFFF; + background-color: transparent; + border-color: transparent; + text-decoration: none; } + +.next-calendar-btn-prev-decade, .next-calendar-btn-prev-year { + left: 8px; } + +.next-calendar-btn-prev-month { + left: 28px; } + +.next-calendar-btn-next-month { + right: 28px; } + +.next-calendar-btn-next-year, .next-calendar-btn-next-decade { + right: 8px; } + +.next-calendar-fullscreen .next-calendar-th { + text-align: right; + color: #333333; + font-size: 16px; + font-weight: bold; + padding-right: 12px; + padding-bottom: 4px; } + +.next-calendar-fullscreen .next-calendar-cell { + font-size: 14px; } + .next-calendar-fullscreen .next-calendar-cell.next-selected .next-calendar-date, + .next-calendar-fullscreen .next-calendar-cell.next-selected .next-calendar-month { + font-weight: bold; + background: #DEE8FF; + color: #5584FF; + border-color: #5584FF; } + .next-calendar-fullscreen .next-calendar-cell.next-disabled .next-calendar-date, + .next-calendar-fullscreen .next-calendar-cell.next-disabled .next-calendar-month { + cursor: not-allowed; + background: #F7F8FA; + color: #CCCCCC; + border-color: #E6E7EB; } + +.next-calendar-fullscreen .next-calendar-date, .next-calendar-fullscreen .next-calendar-month { + text-align: right; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin: 0 4px; + padding: 4px 8px; + min-height: 80px; + border-top: 2px solid; + -webkit-transition: background .3s ease; + transition: background .3s ease; + background: #FFFFFF; + color: #333333; + border-color: #DCDEE3; } + .next-calendar-fullscreen .next-calendar-date:hover, .next-calendar-fullscreen .next-calendar-month:hover { + background: #DEE8FF; + color: #5584FF; + border-color: #5584FF; } + +.next-calendar-fullscreen .next-calendar-cell-prev-month .next-calendar-date, .next-calendar-fullscreen .next-calendar-cell-next-month .next-calendar-date { + background: transparent; + color: #CCCCCC; + border-color: transparent; } + +.next-calendar-fullscreen .next-calendar-cell-current .next-calendar-date, +.next-calendar-fullscreen .next-calendar-cell-current .next-calendar-month { + font-weight: bold; + background: #FFFFFF; + color: #5584FF; + border-color: #5584FF; } + +.next-calendar-card .next-calendar-th, +.next-calendar-panel .next-calendar-th, +.next-calendar-range .next-calendar-th { + text-align: center; + color: #999999; + font-size: 12px; + font-weight: normal; } + +.next-calendar-card .next-calendar-cell, +.next-calendar-panel .next-calendar-cell, +.next-calendar-range .next-calendar-cell { + text-align: center; + font-size: 12px; } + .next-calendar-card .next-calendar-cell.next-selected .next-calendar-date, + .next-calendar-card .next-calendar-cell.next-selected .next-calendar-month, + .next-calendar-card .next-calendar-cell.next-selected .next-calendar-year, + .next-calendar-panel .next-calendar-cell.next-selected .next-calendar-date, + .next-calendar-panel .next-calendar-cell.next-selected .next-calendar-month, + .next-calendar-panel .next-calendar-cell.next-selected .next-calendar-year, + .next-calendar-range .next-calendar-cell.next-selected .next-calendar-date, + .next-calendar-range .next-calendar-cell.next-selected .next-calendar-month, + .next-calendar-range .next-calendar-cell.next-selected .next-calendar-year { + -webkit-animation: cellZoomIn 0.4s cubic-bezier(0.23, 1, 0.32, 1); + animation: cellZoomIn 0.4s cubic-bezier(0.23, 1, 0.32, 1); + font-weight: bold; + background: #5584FF; + color: #FFFFFF; + border-color: #5584FF; } + .next-calendar-card .next-calendar-cell.next-disabled .next-calendar-date, + .next-calendar-card .next-calendar-cell.next-disabled .next-calendar-month, + .next-calendar-card .next-calendar-cell.next-disabled .next-calendar-year, + .next-calendar-panel .next-calendar-cell.next-disabled .next-calendar-date, + .next-calendar-panel .next-calendar-cell.next-disabled .next-calendar-month, + .next-calendar-panel .next-calendar-cell.next-disabled .next-calendar-year, + .next-calendar-range .next-calendar-cell.next-disabled .next-calendar-date, + .next-calendar-range .next-calendar-cell.next-disabled .next-calendar-month, + .next-calendar-range .next-calendar-cell.next-disabled .next-calendar-year { + cursor: not-allowed; + background: #F7F8FA; + color: #CCCCCC; + border-color: #F7F8FA; } + .next-calendar-card .next-calendar-cell.next-inrange .next-calendar-date, + .next-calendar-panel .next-calendar-cell.next-inrange .next-calendar-date, + .next-calendar-range .next-calendar-cell.next-inrange .next-calendar-date { + background: #DEE8FF; + color: #5584FF; + border-color: #DEE8FF; } + +.next-calendar-card .next-calendar-date, .next-calendar-card .next-calendar-month, .next-calendar-card .next-calendar-year, +.next-calendar-panel .next-calendar-date, +.next-calendar-panel .next-calendar-month, +.next-calendar-panel .next-calendar-year, +.next-calendar-range .next-calendar-date, +.next-calendar-range .next-calendar-month, +.next-calendar-range .next-calendar-year { + text-align: center; + border: 1px solid; + background: #FFFFFF; + color: #666666; + border-color: #FFFFFF; } + .next-calendar-card .next-calendar-date:hover, .next-calendar-card .next-calendar-month:hover, .next-calendar-card .next-calendar-year:hover, + .next-calendar-panel .next-calendar-date:hover, + .next-calendar-panel .next-calendar-month:hover, + .next-calendar-panel .next-calendar-year:hover, + .next-calendar-range .next-calendar-date:hover, + .next-calendar-range .next-calendar-month:hover, + .next-calendar-range .next-calendar-year:hover { + cursor: pointer; } + .next-calendar-card .next-calendar-date:hover, .next-calendar-card .next-calendar-month:hover, .next-calendar-card .next-calendar-year:hover, + .next-calendar-panel .next-calendar-date:hover, + .next-calendar-panel .next-calendar-month:hover, + .next-calendar-panel .next-calendar-year:hover, + .next-calendar-range .next-calendar-date:hover, + .next-calendar-range .next-calendar-month:hover, + .next-calendar-range .next-calendar-year:hover { + background: #DEE8FF; + color: #5584FF; + border-color: #DEE8FF; } + +.next-calendar-card .next-calendar-date, +.next-calendar-panel .next-calendar-date, +.next-calendar-range .next-calendar-date { + width: 24px; + height: 24px; + line-height: 22px; + margin: 4px auto; + border-radius: 3px; } + +.next-calendar-card .next-calendar-month, +.next-calendar-panel .next-calendar-month, +.next-calendar-range .next-calendar-month { + width: 60px; + height: 24px; + line-height: 22px; + margin: 8px auto; + border-radius: 3px; } + +.next-calendar-card .next-calendar-year, +.next-calendar-panel .next-calendar-year, +.next-calendar-range .next-calendar-year { + width: 48px; + height: 24px; + line-height: 22px; + margin: 8px auto; + border-radius: 3px; } + +.next-calendar-card .next-calendar-cell-prev-month .next-calendar-date, +.next-calendar-panel .next-calendar-cell-prev-month .next-calendar-date, +.next-calendar-range .next-calendar-cell-prev-month .next-calendar-date { + background: #FFFFFF; + color: #CCCCCC; + border-color: #FFFFFF; } + +.next-calendar-card .next-calendar-cell-next-month .next-calendar-date, +.next-calendar-panel .next-calendar-cell-next-month .next-calendar-date, +.next-calendar-range .next-calendar-cell-next-month .next-calendar-date { + background: #FFFFFF; + color: #CCCCCC; + border-color: #FFFFFF; } + +.next-calendar-card .next-calendar-cell-current .next-calendar-date, +.next-calendar-card .next-calendar-cell-current .next-calendar-month, +.next-calendar-card .next-calendar-cell-current .next-calendar-year, +.next-calendar-panel .next-calendar-cell-current .next-calendar-date, +.next-calendar-panel .next-calendar-cell-current .next-calendar-month, +.next-calendar-panel .next-calendar-cell-current .next-calendar-year, +.next-calendar-range .next-calendar-cell-current .next-calendar-date, +.next-calendar-range .next-calendar-cell-current .next-calendar-month, +.next-calendar-range .next-calendar-cell-current .next-calendar-year { + font-weight: bold; + background: #FFFFFF; + color: #5584FF; + border-color: transparent; } + +.next-calendar[dir='rtl'] .next-calendar-header { + text-align: left; } + .next-calendar[dir='rtl'] .next-calendar-header .next-select { + margin-right: 0; + margin-left: 4px; } + .next-calendar[dir='rtl'] .next-calendar-header .next-menu { + text-align: right; } + +.next-calendar[dir='rtl'] .next-calendar-btn-prev-decade, .next-calendar[dir='rtl'] .next-calendar-btn-prev-year { + left: auto; + right: 8px; } + +.next-calendar[dir='rtl'] .next-calendar-btn-prev-month { + left: auto; + right: 28px; } + +.next-calendar[dir='rtl'] .next-calendar-btn-next-month { + right: auto; + left: 28px; } + +.next-calendar[dir='rtl'] .next-calendar-btn-next-year, .next-calendar[dir='rtl'] .next-calendar-btn-next-decade { + right: auto; + left: 8px; } + +.next-calendar-fullscreen[dir='rtl'] .next-calendar-th { + text-align: left; + padding-left: 12px; + padding-right: 0; } + +.next-calendar-fullscreen[dir='rtl'] .next-calendar-date, .next-calendar-fullscreen[dir='rtl'] .next-calendar-month { + text-align: left; } + +.next-calendar-range[dir='rtl'] .next-calendar-body-left, .next-calendar-range[dir='rtl'] .next-calendar-body-right { + float: right; } + +.next-calendar-range[dir='rtl'] .next-calendar-body-left { + padding-right: 0; + padding-left: 8px; } + +.next-calendar-range[dir='rtl'] .next-calendar-body-right { + padding-left: 0; + padding-right: 8px; } + +.next-calendar { + /* range calendar */ + /* --------------- */ } + .next-calendar-table { + width: 100%; + table-layout: fixed; } + .next-calendar-range .next-calendar-body-left, .next-calendar-range .next-calendar-body-right { + float: left; + width: 50%; } + .next-calendar-range .next-calendar-body-left { + padding-right: 8px; } + .next-calendar-range .next-calendar-body-right { + padding-left: 8px; } + .next-calendar-range .next-calendar-body:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + +.next-card *, +.next-card *:before, +.next-card *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +.next-card, .next-card:before, .next-card:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +.next-card[dir="rtl"] .next-card-extra { + left: 0; + right: auto; } + +.next-card[dir="rtl"] .next-card-title:before { + right: 0; + left: auto; } + +.next-card[dir="rtl"] .next-card-subtitle { + float: left; + padding-right: 8px; + padding-left: 0; } + +.next-card[dir="rtl"] .next-card-head-show-bullet .next-card-title { + padding-left: 0; + padding-right: 8px; } + +.next-card { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-card *, + .next-card *:before, + .next-card *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-card { + min-width: 100px; + padding: 0 16px; + border: 1px solid #DCDEE3; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + background: #FFFFFF; } + .next-card-head { + background: #FFFFFF; } + .next-card-head-show-bullet .next-card-title { + padding-left: 8px; } + .next-card-head-show-bullet .next-card-title:before { + content: ''; + display: inline-block; + height: 16px; + width: 3px; + background: #5584FF; + position: absolute; + left: 0; + top: calc(50% - 16px / 2); } + .next-card-head-main { + position: relative; + margin-top: 8px; + margin-bottom: 0; + height: 40px; + line-height: 40px; } + .next-card-title { + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 80%; + height: 100%; + color: #333333; + font-size: 16px; } + .next-card-subtitle { + font-size: 12px; + color: #666666; + padding-left: 8px; } + .next-card-extra { + position: absolute; + right: 0; + top: 0; + height: 100%; + font-size: 12px; + color: #5584FF; } + .next-card-body { + padding-bottom: 12px; } + .next-card-show-divider .next-card-head { + border-bottom: 1px solid #E6E7EB; } + .next-card-show-divider .next-card-body { + padding-top: 12px; } + .next-card-hide-divider .next-card-body { + padding-top: 0; } + .next-card-content { + overflow: hidden; + -webkit-transition: 0.3s all cubic-bezier(0.23, 1, 0.32, 1); + transition: 0.3s all cubic-bezier(0.23, 1, 0.32, 1); + position: relative; } + .next-card-footer .next-icon { + -webkit-transition: 0.3s all cubic-bezier(0.645, 0.045, 0.355, 1); + transition: 0.3s all cubic-bezier(0.645, 0.045, 0.355, 1); } + .next-card-footer .next-icon.expand { + -webkit-transform-origin: 50% 47%; + -ms-transform-origin: 50% 47%; + transform-origin: 50% 47%; + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + +.next-cascader { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; + overflow: auto; + border: 1px solid #DCDEE3; + border-radius: 3px; } + .next-cascader *, + .next-cascader *:before, + .next-cascader *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-cascader-inner:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + .next-cascader-menu-wrapper { + float: left; + overflow: auto; + width: 100px; + height: 192px; } + .next-cascader-menu-wrapper + .next-cascader-menu-wrapper { + border-left: 1px solid #DCDEE3; } + .next-cascader-menu { + position: relative; + padding: 0; + border: none; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + min-width: auto; + min-height: 100%; } + .next-cascader-menu.next-has-right-border { + border-right: 1px solid #DCDEE3; } + .next-cascader-menu-item.next-expanded { + color: #333333; + background-color: #F2F3F7; } + .next-cascader-menu-icon-right { + position: absolute; + top: 0; + right: 10px; + color: #666666; } + .next-cascader-menu-icon-right:hover { + color: #333333; } + .next-cascader-menu-icon-expand.next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-cascader-menu-icon-expand.next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-cascader-menu-icon-expand.next-icon:before { + width: 16px; + font-size: 16px; } } + .next-cascader-menu-icon-loading.next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-cascader-menu-item.next-expanded .next-cascader-menu-icon-right { + color: #333333; } + .next-cascader-menu-item.next-expanded .next-cascader-menu-icon-loading { + color: #5584FF; } + .next-cascader-filtered-list { + height: 192px; + padding: 0; + border: none; + border-radius: 0; + -webkit-box-shadow: none; + box-shadow: none; + overflow: auto; } + .next-cascader-filtered-list .next-menu-item-inner { + overflow: visible; } + .next-cascader-filtered-item em { + color: #5584FF; + font-style: normal; } + +.next-cascader[dir="rtl"] .next-cascader-menu-wrapper { + float: right; + border-left: none; + border-right: 1px solid #DCDEE3; } + .next-cascader[dir="rtl"] .next-cascader-menu-wrapper:first-child { + border-right: none; } + +.next-cascader[dir="rtl"] .next-cascader-menu.next-has-right-border { + border-right: none; + border-left: 1px solid #DCDEE3; } + +.next-cascader[dir="rtl"] .next-cascader-menu-icon-right { + right: auto; + left: 10px; } + +.next-cascader-select { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-cascader-select *, + .next-cascader-select *:before, + .next-cascader-select *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-cascader-select-dropdown { + -webkit-box-sizing: border-box; + box-sizing: border-box; + border: 1px solid #DCDEE3; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; } + .next-cascader-select-dropdown *, + .next-cascader-select-dropdown *:before, + .next-cascader-select-dropdown *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-cascader-select-dropdown .next-cascader { + display: block; + border: none; + -webkit-box-shadow: none; + box-shadow: none; } + .next-cascader-select-not-found { + padding: 0; + border: none; + -webkit-box-shadow: none; + box-shadow: none; + overflow: auto; + color: #999999; } + .next-cascader-select-not-found .next-menu-item:hover { + color: #999999; + /* TODO */ + background: #FFFFFF; + cursor: default; } + +.next-collapse[dir=rtl] .next-collapse-panel-title { + padding: 8px 28px 8px 0; } + +.next-collapse[dir=rtl] .next-collapse-panel-icon { + left: inherit; + right: 12px; + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); + margin-left: 0; + margin-right: 0; } + .next-collapse[dir=rtl] .next-collapse-panel-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-collapse[dir=rtl] .next-collapse-panel-icon { + -webkit-transform: scale(0.5) rotate(270deg); + -ms-transform: scale(0.5) rotate(270deg); + transform: scale(0.5) rotate(270deg); + margin-left: -4px; + margin-right: -4px; } + .next-collapse[dir=rtl] .next-collapse-panel-icon:before { + width: 16px; + font-size: 16px; } } + +/* put your code here */ +.next-collapse { + -webkit-box-sizing: border-box; + box-sizing: border-box; + border: 1px solid #DCDEE3; + border-radius: 3px; + overflow: hidden; } + .next-collapse *, + .next-collapse *:before, + .next-collapse *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-collapse:focus, + .next-collapse *:focus { + outline: 0; } + .next-collapse-panel:not(:first-child) { + border-top: 1px solid #DCDEE3; } + .next-collapse .next-collapse-panel-icon { + position: absolute; + color: #333333; + -webkit-transition: -webkit-transform .3s; + transition: -webkit-transform .3s; + transition: transform .3s; + transition: transform .3s, -webkit-transform .3s; + left: 12px; + margin-top: -2px; + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); + margin-left: 0; + margin-right: 0; } + .next-collapse .next-collapse-panel-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-collapse .next-collapse-panel-icon { + -webkit-transform: scale(0.5) rotate(90deg); + -ms-transform: scale(0.5) rotate(90deg); + transform: scale(0.5) rotate(90deg); + margin-left: -4px; + margin-right: -4px; } + .next-collapse .next-collapse-panel-icon:before { + width: 16px; + font-size: 16px; } } + .next-collapse-panel-title { + position: relative; + line-height: 20px; + background: #F2F3F7; + font-size: 14px; + font-weight: normal; + color: #333333; + cursor: pointer; + padding: 8px 0 8px 28px; + -webkit-transition: background .2s ease; + transition: background .2s ease; } + .next-collapse-panel-title:hover { + background: #EBECF0; + color: #333333; + font-weight: normal; } + .next-collapse-panel-title:hover .next-collapse-panel-icon { + color: #333333; } + .next-collapse-panel-content { + overflow: hidden; + height: 0; + padding: 0 16px; + background: #FFFFFF; + font-size: 12px; + color: #666666; + -webkit-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); + transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); + opacity: 0; } + .next-collapse-panel-expanded > .next-collapse-panel-content { + display: block; + padding: 12px 16px; + height: auto; + opacity: 1; } + .next-collapse .next-collapse-panel-icon.next-collapse-panel-icon-expanded { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); + margin-left: 0; + margin-right: 0; } + .next-collapse .next-collapse-panel-icon.next-collapse-panel-icon-expanded:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-collapse .next-collapse-panel-icon.next-collapse-panel-icon-expanded { + -webkit-transform: scale(0.5) rotate(180deg); + -ms-transform: scale(0.5) rotate(180deg); + transform: scale(0.5) rotate(180deg); + margin-left: -4px; + margin-right: -4px; } + .next-collapse .next-collapse-panel-icon.next-collapse-panel-icon-expanded:before { + width: 16px; + font-size: 16px; } } + .next-collapse-disabled { + border-color: #E6E7EB; } + .next-collapse-panel-disabled { + overflow: hidden; } + .next-collapse-panel-disabled:not(:first-child) { + border-color: #E6E7EB; } + .next-collapse-panel-disabled > .next-collapse-panel-title { + cursor: not-allowed; + color: #CCCCCC; + background: #F2F3F7; } + .next-collapse-panel-disabled .next-collapse-panel-icon { + color: #CCCCCC; } + .next-collapse-panel-disabled .next-collapse-panel-title:hover { + font-weight: normal; } + .next-collapse-panel-disabled .next-collapse-panel-title:hover .next-collapse-panel-icon { + color: #CCCCCC; } + .next-collapse-panel-disabled:hover { + color: #CCCCCC; + background: #F2F3F7; } + +.next-time-picker-menu { + float: left; + text-align: center; } + .next-time-picker-menu:not(:last-child) { + border-right: 1px solid #C4C6CF; } + .next-time-picker-menu-title { + cursor: default; + height: 28px; + line-height: 28px; + font-size: 12px; + font-weight: normal; + color: #999999; + background: #FFFFFF; } + .next-time-picker-menu ul { + position: relative; + overflow-y: auto; + list-style: none; + margin: 0; + padding: 0; + font-size: 12px; + height: 196px; } + .next-time-picker-menu-item { + cursor: pointer; + height: 28px; + line-height: 28px; + -webkit-transition: background .3s ease-out; + transition: background .3s ease-out; + color: #666666; + background: #FFFFFF; + outline: none; } + .next-time-picker-menu-item:hover { + color: #333333; + background: #F2F3F7; } + .next-time-picker-menu-item.next-selected { + font-weight: bold; + color: #666666; + background: #F2F3F7; } + .next-time-picker-menu-item.next-disabled { + cursor: not-allowed; + color: #CCCCCC; + background: #FFFFFF; } + +.next-time-picker-panel { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-time-picker-panel *, + .next-time-picker-panel *:before, + .next-time-picker-panel *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-time-picker-panel:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + .next-time-picker-panel-header { + border-bottom: 1px solid #DCDEE3; } + .next-time-picker-panel-input.next-input { + width: 100%; + padding: 6px; + border-color: transparent; + vertical-align: middle; } + .next-time-picker-panel-col-3 .next-time-picker-menu { + width: calc(100% / 3); } + .next-time-picker-panel-col-2 .next-time-picker-menu { + width: 50%; } + +.next-time-picker-body[dir="rtl"] .next-time-picker-menu { + float: right; } + .next-time-picker-body[dir="rtl"] .next-time-picker-menu:not(:last-child) { + border-right: none; + border-left: 1px solid #C4C6CF; } + +.next-time-picker { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; + width: 200px; } + .next-time-picker *, + .next-time-picker *:before, + .next-time-picker *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-time-picker-trigger .next-input { + width: 100%; } + .next-time-picker-body { + overflow: hidden; + width: 200px; + border: 1px solid #DCDEE3; + border-radius: 3px; + background: #FFFFFF; + -webkit-box-shadow: none; + box-shadow: none; } + +.next-range-picker-trigger-separator, .next-range-picker-panel-input-separator { + cursor: default; + display: inline-block; + text-align: center; + color: #CCCCCC; + width: 16px; + font-size: 12px; + vertical-align: middle; } + +.next-date-picker, .next-month-picker, .next-year-picker { + display: inline-block; + width: 200px; } + .next-date-picker-input, .next-month-picker-input, .next-year-picker-input { + width: 100%; } + .next-date-picker-body, .next-month-picker-body, .next-year-picker-body { + width: 288px; } + .next-date-picker-panel-input.next-input, .next-month-picker-panel-input.next-input, .next-year-picker-panel-input.next-input { + width: 100%; + background: transparent; } + +.next-date-picker-body.next-date-picker-body-show-time .next-date-picker-panel-input.next-input { + width: 49%; } + .next-date-picker-body.next-date-picker-body-show-time .next-date-picker-panel-input.next-input:first-child { + margin-right: 2%; } + +.next-range-picker { + display: inline-block; + width: 336px; } + .next-range-picker-input { + width: 100%; } + .next-range-picker-trigger { + border: 1px solid #C4C6CF; + background-color: #FFFFFF; } + .next-range-picker-trigger:hover { + border-color: #A0A2AD; + background-color: #FFFFFF; } + .next-range-picker-trigger.next-error { + border-color: #FF3000; } + .next-range-picker-trigger-input.next-input { + height: auto; + width: calc((100% - 16px) / 2); } + .next-range-picker.next-disabled .next-range-picker-trigger { + cursor: not-allowed; + color: #CCCCCC; + border-color: #E6E7EB; + background-color: #F7F8FA; + cursor: not-allowed; } + .next-range-picker.next-disabled .next-range-picker-trigger:hover { + border-color: #E6E7EB; + background-color: #F7F8FA; } + .next-range-picker.next-large .next-range-picker-trigger, .next-range-picker.next-large .next-range-picker-panel-input { + border-radius: 3px; } + .next-range-picker.next-medium .next-range-picker-trigger, .next-range-picker.next-medium .next-range-picker-panel-input { + border-radius: 3px; } + .next-range-picker.next-small .next-range-picker-trigger, .next-range-picker.next-small .next-range-picker-panel-input { + border-radius: 3px; } + .next-range-picker-body { + width: 600px; } + .next-range-picker-panel-input-start-date.next-input, .next-range-picker-panel-input-end-date.next-input { + width: calc((100% - 16px) / 2); } + +.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-start-date, .next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-end-date, .next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-start-time, .next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-end-time { + width: calc((100% - 16px - 16px) / 4); } + +.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-start-date { + margin-right: 8px; } + +.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-end-time { + margin-left: 8px; } + +.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + +.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-start, .next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-end { + width: 50%; + float: left; } + +.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-start { + border-right: 1px solid #DCDEE3; } + +.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-end { + border-left: 1px solid #DCDEE3; } + +.next-date-picker-body[dir="rtl"] .next-date-picker-panel-footer { + text-align: left; } + +.next-date-picker-body[dir="rtl"] .next-date-picker-panel-footer > .next-btn:not(:last-child) { + margin-right: 0; + margin-left: 16px; } + +.next-date-picker-body[dir="rtl"].next-date-picker-body-show-time .next-date-picker-panel-input.next-input:first-child { + margin-left: 2%; + margin-right: 0; } + +.next-date-picker-body[dir="rtl"].next-date-picker-body-show-time .next-time-picker-menu { + float: right; } + .next-date-picker-body[dir="rtl"].next-date-picker-body-show-time .next-time-picker-menu:not(:last-child) { + border-right: none; + border-left: 1px solid #C4C6CF; } + +.next-range-picker-body[dir="rtl"] .next-range-picker-panel-input { + text-align: right; } + +.next-range-picker-body[dir="rtl"] .next-date-picker-panel-footer { + text-align: left; } + +.next-range-picker-body[dir="rtl"] .next-date-picker-panel-footer > .next-btn:not(:last-child) { + margin-right: 0; + margin-left: 16px; } + +.next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-range-picker-panel-input-start-date { + margin-right: 0; + margin-left: 8px; } + +.next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-range-picker-panel-input-end-time { + margin-left: 0; + margin-right: 8px; } + +.next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-range-picker-panel-time-start, .next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-range-picker-panel-time-end { + float: right; } + +.next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-range-picker-panel-time-start { + border-right: none; + border-left: 1px solid #DCDEE3; } + +.next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-range-picker-panel-time-end { + border-left: none; + border-right: 1px solid #DCDEE3; } + +.next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-time-picker-menu { + float: right; } + .next-range-picker-body[dir="rtl"].next-range-picker-body-show-time .next-time-picker-menu:not(:last-child) { + border-right: none; + border-left: 1px solid #C4C6CF; } + +.next-date-picker, .next-range-picker, .next-month-picker, .next-year-picker { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-date-picker *, + .next-date-picker *:before, + .next-date-picker *:after, .next-range-picker *, + .next-range-picker *:before, + .next-range-picker *:after, .next-month-picker *, + .next-month-picker *:before, + .next-month-picker *:after, .next-year-picker *, + .next-year-picker *:before, + .next-year-picker *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-date-picker-body, .next-range-picker-body, .next-month-picker-body, .next-year-picker-body { + border: 1px solid #DCDEE3; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + background: #FFFFFF; } + .next-date-picker-panel-header, .next-range-picker-panel-header, .next-month-picker-panel-header, .next-year-picker-panel-header { + padding: 6px; + text-align: center; } + .next-date-picker-panel-time, .next-range-picker-panel-time, .next-month-picker-panel-time, .next-year-picker-panel-time { + border-top: 1px solid #DCDEE3; } + .next-date-picker-panel-footer, .next-range-picker-panel-footer, .next-month-picker-panel-footer, .next-year-picker-panel-footer { + text-align: right; + padding: 8px 20px; + border-top: 1px solid #DCDEE3; } + .next-date-picker-panel-footer > .next-btn:not(:last-child), .next-range-picker-panel-footer > .next-btn:not(:last-child), .next-month-picker-panel-footer > .next-btn:not(:last-child), .next-year-picker-panel-footer > .next-btn:not(:last-child) { + margin-right: 16px; } + .next-date-picker .next-calendar-panel-header, .next-range-picker .next-calendar-panel-header, .next-month-picker .next-calendar-panel-header, .next-year-picker .next-calendar-panel-header { + margin-left: -1px; + margin-right: -1px; } + .next-date-picker .next-input input, .next-range-picker .next-input input, .next-month-picker .next-input input, .next-year-picker .next-input input { + vertical-align: baseline; } + +.next-message { + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: relative; + display: block; + vertical-align: baseline; } + .next-message *, + .next-message *:before, + .next-message *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-message:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + .next-message .next-message-close { + color: #999999; + font-size: 0; + position: absolute; } + .next-message .next-message-close .next-icon-close { + width: 12px; + height: 12px; + line-height: 12px; } + .next-message .next-message-close .next-icon-close:before { + width: 12px; + height: 12px; + font-size: 12px; + line-height: 12px; } + .next-message .next-message-close:hover { + color: #666666; } + .next-message.next-message-success.next-inline { + background-color: #E4FDDA; + border-color: #E4FDDA; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-success.next-inline .next-message-title { + color: #333333; } + .next-message.next-message-success.next-inline .next-message-content { + color: #666666; } + .next-message.next-message-success.next-inline .next-message-symbol { + color: #46BC15; } + .next-message.next-message-success.next-inline .next-message-symbol-icon::before { + content: "\E60A"; } + .next-message.next-message-success.next-addon { + background-color: transparent; + border-color: transparent; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-success.next-addon .next-message-title { + color: #333333; } + .next-message.next-message-success.next-addon .next-message-content { + color: #666666; } + .next-message.next-message-success.next-addon .next-message-symbol { + color: #46BC15; } + .next-message.next-message-success.next-addon .next-message-symbol-icon::before { + content: "\E60A"; } + .next-message.next-message-success.next-toast { + background-color: #FFFFFF; + border-color: #FFFFFF; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + border-style: solid; } + .next-message.next-message-success.next-toast .next-message-title { + color: #333333; } + .next-message.next-message-success.next-toast .next-message-content { + color: #666666; } + .next-message.next-message-success.next-toast .next-message-symbol { + color: #46BC15; } + .next-message.next-message-success.next-toast .next-message-symbol-icon::before { + content: "\E60A"; } + .next-message.next-message-warning.next-inline { + background-color: #FFF3E0; + border-color: #FFF3E0; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-warning.next-inline .next-message-title { + color: #333333; } + .next-message.next-message-warning.next-inline .next-message-content { + color: #666666; } + .next-message.next-message-warning.next-inline .next-message-symbol { + color: #FF9300; } + .next-message.next-message-warning.next-inline .next-message-symbol-icon::before { + content: "\E60B"; } + .next-message.next-message-warning.next-addon { + background-color: transparent; + border-color: transparent; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-warning.next-addon .next-message-title { + color: #333333; } + .next-message.next-message-warning.next-addon .next-message-content { + color: #666666; } + .next-message.next-message-warning.next-addon .next-message-symbol { + color: #FF9300; } + .next-message.next-message-warning.next-addon .next-message-symbol-icon::before { + content: "\E60B"; } + .next-message.next-message-warning.next-toast { + background-color: #FFFFFF; + border-color: #FFFFFF; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + border-style: solid; } + .next-message.next-message-warning.next-toast .next-message-title { + color: #333333; } + .next-message.next-message-warning.next-toast .next-message-content { + color: #666666; } + .next-message.next-message-warning.next-toast .next-message-symbol { + color: #FF9300; } + .next-message.next-message-warning.next-toast .next-message-symbol-icon::before { + content: "\E60B"; } + .next-message.next-message-error.next-inline { + background-color: #FFECE4; + border-color: #FFECE4; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-error.next-inline .next-message-title { + color: #333333; } + .next-message.next-message-error.next-inline .next-message-content { + color: #666666; } + .next-message.next-message-error.next-inline .next-message-symbol { + color: #FF3000; } + .next-message.next-message-error.next-inline .next-message-symbol-icon::before { + content: "\E60D"; } + .next-message.next-message-error.next-addon { + background-color: transparent; + border-color: transparent; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-error.next-addon .next-message-title { + color: #333333; } + .next-message.next-message-error.next-addon .next-message-content { + color: #666666; } + .next-message.next-message-error.next-addon .next-message-symbol { + color: #FF3000; } + .next-message.next-message-error.next-addon .next-message-symbol-icon::before { + content: "\E60D"; } + .next-message.next-message-error.next-toast { + background-color: #FFFFFF; + border-color: #FFFFFF; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + border-style: solid; } + .next-message.next-message-error.next-toast .next-message-title { + color: #333333; } + .next-message.next-message-error.next-toast .next-message-content { + color: #666666; } + .next-message.next-message-error.next-toast .next-message-symbol { + color: #FF3000; } + .next-message.next-message-error.next-toast .next-message-symbol-icon::before { + content: "\E60D"; } + .next-message.next-message-notice.next-inline { + background-color: #E3F2FD; + border-color: #E3F2FD; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-notice.next-inline .next-message-title { + color: #333333; } + .next-message.next-message-notice.next-inline .next-message-content { + color: #666666; } + .next-message.next-message-notice.next-inline .next-message-symbol { + color: #4494F9; } + .next-message.next-message-notice.next-inline .next-message-symbol-icon::before { + content: "\E60C"; } + .next-message.next-message-notice.next-addon { + background-color: transparent; + border-color: transparent; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-notice.next-addon .next-message-title { + color: #333333; } + .next-message.next-message-notice.next-addon .next-message-content { + color: #666666; } + .next-message.next-message-notice.next-addon .next-message-symbol { + color: #4494F9; } + .next-message.next-message-notice.next-addon .next-message-symbol-icon::before { + content: "\E60C"; } + .next-message.next-message-notice.next-toast { + background-color: #FFFFFF; + border-color: #FFFFFF; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + border-style: solid; } + .next-message.next-message-notice.next-toast .next-message-title { + color: #333333; } + .next-message.next-message-notice.next-toast .next-message-content { + color: #666666; } + .next-message.next-message-notice.next-toast .next-message-symbol { + color: #4494F9; } + .next-message.next-message-notice.next-toast .next-message-symbol-icon::before { + content: "\E60C"; } + .next-message.next-message-help.next-inline { + background-color: #E3FFF8; + border-color: #E3FFF8; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-help.next-inline .next-message-title { + color: #333333; } + .next-message.next-message-help.next-inline .next-message-content { + color: #666666; } + .next-message.next-message-help.next-inline .next-message-symbol { + color: #01C1B2; } + .next-message.next-message-help.next-inline .next-message-symbol-icon::before { + content: "\E673"; } + .next-message.next-message-help.next-addon { + background-color: transparent; + border-color: transparent; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-help.next-addon .next-message-title { + color: #333333; } + .next-message.next-message-help.next-addon .next-message-content { + color: #666666; } + .next-message.next-message-help.next-addon .next-message-symbol { + color: #01C1B2; } + .next-message.next-message-help.next-addon .next-message-symbol-icon::before { + content: "\E673"; } + .next-message.next-message-help.next-toast { + background-color: #FFFFFF; + border-color: #FFFFFF; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + border-style: solid; } + .next-message.next-message-help.next-toast .next-message-title { + color: #333333; } + .next-message.next-message-help.next-toast .next-message-content { + color: #666666; } + .next-message.next-message-help.next-toast .next-message-symbol { + color: #01C1B2; } + .next-message.next-message-help.next-toast .next-message-symbol-icon::before { + content: "\E673"; } + .next-message.next-message-loading.next-inline { + background-color: #FFFFFF; + border-color: #FFFFFF; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-loading.next-inline .next-message-title { + color: #333333; } + .next-message.next-message-loading.next-inline .next-message-content { + color: #666666; } + .next-message.next-message-loading.next-inline .next-message-symbol { + color: #5584FF; } + .next-message.next-message-loading.next-inline .next-message-symbol-icon::before { + content: "\E646"; + -webkit-animation: loadingCircle 1s infinite linear; + animation: loadingCircle 1s infinite linear; } + .next-message.next-message-loading.next-addon { + background-color: transparent; + border-color: transparent; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; + border-style: solid; } + .next-message.next-message-loading.next-addon .next-message-title { + color: #333333; } + .next-message.next-message-loading.next-addon .next-message-content { + color: #666666; } + .next-message.next-message-loading.next-addon .next-message-symbol { + color: #5584FF; } + .next-message.next-message-loading.next-addon .next-message-symbol-icon::before { + content: "\E646"; + -webkit-animation: loadingCircle 1s infinite linear; + animation: loadingCircle 1s infinite linear; } + .next-message.next-message-loading.next-toast { + background-color: #FFFFFF; + border-color: #FFFFFF; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + border-style: solid; } + .next-message.next-message-loading.next-toast .next-message-title { + color: #333333; } + .next-message.next-message-loading.next-toast .next-message-content { + color: #666666; } + .next-message.next-message-loading.next-toast .next-message-symbol { + color: #5584FF; } + .next-message.next-message-loading.next-toast .next-message-symbol-icon::before { + content: "\E646"; + -webkit-animation: loadingCircle 1s infinite linear; + animation: loadingCircle 1s infinite linear; } + .next-message.next-medium { + border-width: 1px; + padding: 12px; } + .next-message.next-medium .next-message-symbol { + float: left; + line-height: 16px; } + .next-message.next-medium .next-message-symbol:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-message.next-medium .next-message-title { + padding: 0 20px 0 24px; + font-size: 16px; + line-height: 16px; } + .next-message.next-medium .next-message-content { + margin-top: 8px; + padding: 0 20px 0 24px; + font-size: 12px; + line-height: 12px; } + .next-message.next-medium .next-message-symbol + .next-message-content { + margin-top: 0; } + .next-message.next-medium.next-only-content .next-message-content { + line-height: 16px; } + .next-message.next-medium .next-message-close { + top: 12px; + right: 12px; } + .next-message.next-large { + border-width: 2px; + padding: 16px; + line-height: 18px; } + .next-message.next-large .next-message-symbol { + float: left; + line-height: 24px; } + .next-message.next-large .next-message-symbol:before { + width: 24px; + font-size: 24px; + line-height: inherit; } + .next-message.next-large .next-message-title { + padding: 0 20px 0 36px; + font-size: 20px; + line-height: 20px; } + .next-message.next-large .next-message-content { + margin-top: 8px; + padding: 0 20px 0 36px; + font-size: 12px; + line-height: 12px; } + .next-message.next-large .next-message-symbol + .next-message-content { + margin-top: 0; } + .next-message.next-large.next-title-content .next-message-title { + line-height: 24px; } + .next-message.next-large.next-only-content .next-message-content { + line-height: 24px; } + .next-message.next-large .next-message-close { + top: 16px; + right: 16px; } + +.next-message[dir="rtl"] .next-message-symbol { + float: right; } + +.next-message[dir="rtl"].next-medium .next-message-title { + padding: 0 24px 0 20px; } + +.next-message[dir="rtl"].next-medium .next-message-close { + left: 12px; + right: auto; } + +.next-message[dir="rtl"].next-large .next-message-title { + padding: 0 36px 0 20px; } + +.next-message[dir="rtl"].next-large .next-message-close { + left: 16px; + right: auto; } + +.next-dialog[dir=rtl] { + text-align: right; } + .next-dialog[dir=rtl] .next-dialog-footer.next-align-left { + text-align: right; } + .next-dialog[dir=rtl] .next-dialog-footer.next-align-center { + text-align: center; } + .next-dialog[dir=rtl] .next-dialog-footer.next-align-right { + text-align: left; } + .next-dialog[dir=rtl] .next-dialog-btn + .next-dialog-btn { + margin-right: 4px; + margin-left: 0; } + .next-dialog[dir=rtl] .next-dialog-close { + left: 16px; + right: auto; } + +.next-dialog { + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: fixed; + z-index: 1001; + background: #FFFFFF; + border: 1px solid #DCDEE3; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12); + text-align: left; + /* 让用户自己设置 */ + /* &.next-closeable &-header, */ + /* &.next-closeable &-body, { */ + /* padding-right: $dialog-part-padding-right-closeable; */ + /* } */ } + .next-dialog *, + .next-dialog *:before, + .next-dialog *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-dialog-header { + padding: 12px 20px 12px 20px; + border-bottom: 0 solid transparent; + font-size: 16px; + background: transparent; + color: #333333; } + .next-dialog-body { + padding: 20px 20px 20px 20px; + font-size: 12px; + color: #666666; } + .next-dialog-footer { + padding: 12px 20px 12px 20px; + border-top: 0 solid transparent; + background: transparent; } + .next-dialog-footer.next-align-left { + text-align: left; } + .next-dialog-footer.next-align-center { + text-align: center; } + .next-dialog-footer.next-align-right { + text-align: right; } + .next-dialog-footer-fixed-height { + position: absolute; + width: 100%; + bottom: 0; } + .next-dialog-btn + .next-dialog-btn { + margin-left: 4px; } + .next-dialog-close { + position: absolute; + top: 16px; + right: 16px; + width: 16px; + height: 16px; + color: #999999; } + .next-dialog-close:link, .next-dialog-close:visited { + height: 16px; + color: #999999; } + .next-dialog-close:hover { + background: transparent; + color: #333333; } + .next-dialog-close .next-dialog-close-icon.next-icon { + position: absolute; + top: 50%; + left: 50%; + margin-top: -6px; + margin-left: -6px; + width: 12px; + height: 12px; + line-height: 12px; } + .next-dialog-close .next-dialog-close-icon.next-icon:before { + width: 12px; + height: 12px; + font-size: 12px; + line-height: 12px; } + .next-dialog-container { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1001; + padding: 40px; + overflow: auto; + text-align: center; } + .next-dialog-container:before { + display: inline-block; + vertical-align: middle; + width: 0; + height: 100%; + content: ''; } + .next-dialog-container .next-dialog { + display: inline-block; + position: relative; + vertical-align: middle; } + .next-dialog-quick .next-dialog-body { + padding: 20px 20px 20px 20px; } + .next-dialog .next-dialog-message.next-message { + min-width: 300px; + padding: 0; } + +/* stylelint-disable-next-line */ +/* Grid System */ +/* 根据 Alibaba Base DPL(BASE DPL)设计规范实现 */ +/* 栅格系统, 根据不同的屏幕尺寸情况，调整这些区块的排版，将页面划分为若干等宽的列，然后推荐通过等宽列来创建响应式的页面区块。另外，屏幕宽度较大的时候，区块倾向于水平分布，而屏幕宽度较小的时候，区块倾向于竖直堆叠。 */ +/* ------------------------------- */ +.next-row { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + .next-row *, + .next-row *:before, + .next-row *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-row.next-row-wrap { + -ms-flex-wrap: wrap; + flex-wrap: wrap; } + @media (min-width: 320px) { + .next-row.next-row-fixed { + width: 320px; } } + @media (min-width: 480px) { + .next-row.next-row-fixed { + width: 480px; } } + @media (min-width: 720px) { + .next-row.next-row-fixed { + width: 720px; } } + @media (min-width: 990px) { + .next-row.next-row-fixed { + width: 990px; } } + @media (min-width: 1200px) { + .next-row.next-row-fixed { + width: 1200px; } } + @media (min-width: 1500px) { + .next-row.next-row-fixed { + width: 1500px; } } + .next-row.next-row-fixed-xxs { + width: 320px; } + .next-row.next-row-fixed-xs { + width: 480px; } + .next-row.next-row-fixed-s { + width: 720px; } + .next-row.next-row-fixed-m { + width: 990px; } + .next-row.next-row-fixed-l { + width: 1200px; } + .next-row.next-row-fixed-xl { + width: 1500px; } + .next-row.next-row-justify-start { + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; } + .next-row.next-row-justify-end { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; } + .next-row.next-row-justify-center { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; } + .next-row.next-row-justify-space-between { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } + .next-row.next-row-justify-space-around { + -ms-flex-pack: distribute; + justify-content: space-around; } + .next-row.next-row-align-top { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; } + .next-row.next-row-align-bottom { + -webkit-box-align: end; + -ms-flex-align: end; + align-items: flex-end; } + .next-row.next-row-align-center { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; } + .next-row.next-row-align-baseline { + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; } + .next-row.next-row-align-stretch { + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; } + +.next-col { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; } + .next-col.next-col-top { + -ms-flex-item-align: start; + align-self: flex-start; } + .next-col.next-col-bottom { + -ms-flex-item-align: end; + align-self: flex-end; } + .next-col.next-col-center { + -ms-flex-item-align: center; + align-self: center; } + +/* IE9 pack */ +@media all and (min-width: 0\0) and (min-resolution: 0.001dpcm) { + .next-row { + display: table; + width: 100%; } + .next-col { + display: table-cell; + vertical-align: top; } } + +.next-col-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 4.16667%; + flex: 0 0 4.16667%; + width: 4.16667%; + max-width: 4.16667%; } + +.next-col-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + width: 8.33333%; + max-width: 8.33333%; } + +.next-col-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 12.5%; + flex: 0 0 12.5%; + width: 12.5%; + max-width: 12.5%; } + +.next-col-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + width: 16.66667%; + max-width: 16.66667%; } + +.next-col-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20.83333%; + flex: 0 0 20.83333%; + width: 20.83333%; + max-width: 20.83333%; } + +.next-col-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + width: 25%; + max-width: 25%; } + +.next-col-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 29.16667%; + flex: 0 0 29.16667%; + width: 29.16667%; + max-width: 29.16667%; } + +.next-col-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + width: 33.33333%; + max-width: 33.33333%; } + +.next-col-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 37.5%; + flex: 0 0 37.5%; + width: 37.5%; + max-width: 37.5%; } + +.next-col-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + width: 41.66667%; + max-width: 41.66667%; } + +.next-col-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 45.83333%; + flex: 0 0 45.83333%; + width: 45.83333%; + max-width: 45.83333%; } + +.next-col-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + width: 50%; + max-width: 50%; } + +.next-col-13 { + -webkit-box-flex: 0; + -ms-flex: 0 0 54.16667%; + flex: 0 0 54.16667%; + width: 54.16667%; + max-width: 54.16667%; } + +.next-col-14 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + width: 58.33333%; + max-width: 58.33333%; } + +.next-col-15 { + -webkit-box-flex: 0; + -ms-flex: 0 0 62.5%; + flex: 0 0 62.5%; + width: 62.5%; + max-width: 62.5%; } + +.next-col-16 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + width: 66.66667%; + max-width: 66.66667%; } + +.next-col-17 { + -webkit-box-flex: 0; + -ms-flex: 0 0 70.83333%; + flex: 0 0 70.83333%; + width: 70.83333%; + max-width: 70.83333%; } + +.next-col-18 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + width: 75%; + max-width: 75%; } + +.next-col-19 { + -webkit-box-flex: 0; + -ms-flex: 0 0 79.16667%; + flex: 0 0 79.16667%; + width: 79.16667%; + max-width: 79.16667%; } + +.next-col-20 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + width: 83.33333%; + max-width: 83.33333%; } + +.next-col-21 { + -webkit-box-flex: 0; + -ms-flex: 0 0 87.5%; + flex: 0 0 87.5%; + width: 87.5%; + max-width: 87.5%; } + +.next-col-22 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + width: 91.66667%; + max-width: 91.66667%; } + +.next-col-23 { + -webkit-box-flex: 0; + -ms-flex: 0 0 95.83333%; + flex: 0 0 95.83333%; + width: 95.83333%; + max-width: 95.83333%; } + +.next-col-24 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } + +@media (min-width: 320px) { + .next-col-xxs-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 4.16667%; + flex: 0 0 4.16667%; + width: 4.16667%; + max-width: 4.16667%; } + .next-col-xxs-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + width: 8.33333%; + max-width: 8.33333%; } + .next-col-xxs-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 12.5%; + flex: 0 0 12.5%; + width: 12.5%; + max-width: 12.5%; } + .next-col-xxs-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + width: 16.66667%; + max-width: 16.66667%; } + .next-col-xxs-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20.83333%; + flex: 0 0 20.83333%; + width: 20.83333%; + max-width: 20.83333%; } + .next-col-xxs-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + width: 25%; + max-width: 25%; } + .next-col-xxs-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 29.16667%; + flex: 0 0 29.16667%; + width: 29.16667%; + max-width: 29.16667%; } + .next-col-xxs-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + width: 33.33333%; + max-width: 33.33333%; } + .next-col-xxs-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 37.5%; + flex: 0 0 37.5%; + width: 37.5%; + max-width: 37.5%; } + .next-col-xxs-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + width: 41.66667%; + max-width: 41.66667%; } + .next-col-xxs-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 45.83333%; + flex: 0 0 45.83333%; + width: 45.83333%; + max-width: 45.83333%; } + .next-col-xxs-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + width: 50%; + max-width: 50%; } + .next-col-xxs-13 { + -webkit-box-flex: 0; + -ms-flex: 0 0 54.16667%; + flex: 0 0 54.16667%; + width: 54.16667%; + max-width: 54.16667%; } + .next-col-xxs-14 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + width: 58.33333%; + max-width: 58.33333%; } + .next-col-xxs-15 { + -webkit-box-flex: 0; + -ms-flex: 0 0 62.5%; + flex: 0 0 62.5%; + width: 62.5%; + max-width: 62.5%; } + .next-col-xxs-16 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + width: 66.66667%; + max-width: 66.66667%; } + .next-col-xxs-17 { + -webkit-box-flex: 0; + -ms-flex: 0 0 70.83333%; + flex: 0 0 70.83333%; + width: 70.83333%; + max-width: 70.83333%; } + .next-col-xxs-18 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + width: 75%; + max-width: 75%; } + .next-col-xxs-19 { + -webkit-box-flex: 0; + -ms-flex: 0 0 79.16667%; + flex: 0 0 79.16667%; + width: 79.16667%; + max-width: 79.16667%; } + .next-col-xxs-20 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + width: 83.33333%; + max-width: 83.33333%; } + .next-col-xxs-21 { + -webkit-box-flex: 0; + -ms-flex: 0 0 87.5%; + flex: 0 0 87.5%; + width: 87.5%; + max-width: 87.5%; } + .next-col-xxs-22 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + width: 91.66667%; + max-width: 91.66667%; } + .next-col-xxs-23 { + -webkit-box-flex: 0; + -ms-flex: 0 0 95.83333%; + flex: 0 0 95.83333%; + width: 95.83333%; + max-width: 95.83333%; } + .next-col-xxs-24 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 480px) { + .next-col-xs-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 4.16667%; + flex: 0 0 4.16667%; + width: 4.16667%; + max-width: 4.16667%; } + .next-col-xs-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + width: 8.33333%; + max-width: 8.33333%; } + .next-col-xs-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 12.5%; + flex: 0 0 12.5%; + width: 12.5%; + max-width: 12.5%; } + .next-col-xs-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + width: 16.66667%; + max-width: 16.66667%; } + .next-col-xs-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20.83333%; + flex: 0 0 20.83333%; + width: 20.83333%; + max-width: 20.83333%; } + .next-col-xs-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + width: 25%; + max-width: 25%; } + .next-col-xs-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 29.16667%; + flex: 0 0 29.16667%; + width: 29.16667%; + max-width: 29.16667%; } + .next-col-xs-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + width: 33.33333%; + max-width: 33.33333%; } + .next-col-xs-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 37.5%; + flex: 0 0 37.5%; + width: 37.5%; + max-width: 37.5%; } + .next-col-xs-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + width: 41.66667%; + max-width: 41.66667%; } + .next-col-xs-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 45.83333%; + flex: 0 0 45.83333%; + width: 45.83333%; + max-width: 45.83333%; } + .next-col-xs-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + width: 50%; + max-width: 50%; } + .next-col-xs-13 { + -webkit-box-flex: 0; + -ms-flex: 0 0 54.16667%; + flex: 0 0 54.16667%; + width: 54.16667%; + max-width: 54.16667%; } + .next-col-xs-14 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + width: 58.33333%; + max-width: 58.33333%; } + .next-col-xs-15 { + -webkit-box-flex: 0; + -ms-flex: 0 0 62.5%; + flex: 0 0 62.5%; + width: 62.5%; + max-width: 62.5%; } + .next-col-xs-16 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + width: 66.66667%; + max-width: 66.66667%; } + .next-col-xs-17 { + -webkit-box-flex: 0; + -ms-flex: 0 0 70.83333%; + flex: 0 0 70.83333%; + width: 70.83333%; + max-width: 70.83333%; } + .next-col-xs-18 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + width: 75%; + max-width: 75%; } + .next-col-xs-19 { + -webkit-box-flex: 0; + -ms-flex: 0 0 79.16667%; + flex: 0 0 79.16667%; + width: 79.16667%; + max-width: 79.16667%; } + .next-col-xs-20 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + width: 83.33333%; + max-width: 83.33333%; } + .next-col-xs-21 { + -webkit-box-flex: 0; + -ms-flex: 0 0 87.5%; + flex: 0 0 87.5%; + width: 87.5%; + max-width: 87.5%; } + .next-col-xs-22 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + width: 91.66667%; + max-width: 91.66667%; } + .next-col-xs-23 { + -webkit-box-flex: 0; + -ms-flex: 0 0 95.83333%; + flex: 0 0 95.83333%; + width: 95.83333%; + max-width: 95.83333%; } + .next-col-xs-24 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 720px) { + .next-col-s-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 4.16667%; + flex: 0 0 4.16667%; + width: 4.16667%; + max-width: 4.16667%; } + .next-col-s-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + width: 8.33333%; + max-width: 8.33333%; } + .next-col-s-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 12.5%; + flex: 0 0 12.5%; + width: 12.5%; + max-width: 12.5%; } + .next-col-s-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + width: 16.66667%; + max-width: 16.66667%; } + .next-col-s-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20.83333%; + flex: 0 0 20.83333%; + width: 20.83333%; + max-width: 20.83333%; } + .next-col-s-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + width: 25%; + max-width: 25%; } + .next-col-s-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 29.16667%; + flex: 0 0 29.16667%; + width: 29.16667%; + max-width: 29.16667%; } + .next-col-s-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + width: 33.33333%; + max-width: 33.33333%; } + .next-col-s-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 37.5%; + flex: 0 0 37.5%; + width: 37.5%; + max-width: 37.5%; } + .next-col-s-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + width: 41.66667%; + max-width: 41.66667%; } + .next-col-s-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 45.83333%; + flex: 0 0 45.83333%; + width: 45.83333%; + max-width: 45.83333%; } + .next-col-s-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + width: 50%; + max-width: 50%; } + .next-col-s-13 { + -webkit-box-flex: 0; + -ms-flex: 0 0 54.16667%; + flex: 0 0 54.16667%; + width: 54.16667%; + max-width: 54.16667%; } + .next-col-s-14 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + width: 58.33333%; + max-width: 58.33333%; } + .next-col-s-15 { + -webkit-box-flex: 0; + -ms-flex: 0 0 62.5%; + flex: 0 0 62.5%; + width: 62.5%; + max-width: 62.5%; } + .next-col-s-16 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + width: 66.66667%; + max-width: 66.66667%; } + .next-col-s-17 { + -webkit-box-flex: 0; + -ms-flex: 0 0 70.83333%; + flex: 0 0 70.83333%; + width: 70.83333%; + max-width: 70.83333%; } + .next-col-s-18 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + width: 75%; + max-width: 75%; } + .next-col-s-19 { + -webkit-box-flex: 0; + -ms-flex: 0 0 79.16667%; + flex: 0 0 79.16667%; + width: 79.16667%; + max-width: 79.16667%; } + .next-col-s-20 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + width: 83.33333%; + max-width: 83.33333%; } + .next-col-s-21 { + -webkit-box-flex: 0; + -ms-flex: 0 0 87.5%; + flex: 0 0 87.5%; + width: 87.5%; + max-width: 87.5%; } + .next-col-s-22 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + width: 91.66667%; + max-width: 91.66667%; } + .next-col-s-23 { + -webkit-box-flex: 0; + -ms-flex: 0 0 95.83333%; + flex: 0 0 95.83333%; + width: 95.83333%; + max-width: 95.83333%; } + .next-col-s-24 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 990px) { + .next-col-m-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 4.16667%; + flex: 0 0 4.16667%; + width: 4.16667%; + max-width: 4.16667%; } + .next-col-m-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + width: 8.33333%; + max-width: 8.33333%; } + .next-col-m-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 12.5%; + flex: 0 0 12.5%; + width: 12.5%; + max-width: 12.5%; } + .next-col-m-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + width: 16.66667%; + max-width: 16.66667%; } + .next-col-m-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20.83333%; + flex: 0 0 20.83333%; + width: 20.83333%; + max-width: 20.83333%; } + .next-col-m-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + width: 25%; + max-width: 25%; } + .next-col-m-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 29.16667%; + flex: 0 0 29.16667%; + width: 29.16667%; + max-width: 29.16667%; } + .next-col-m-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + width: 33.33333%; + max-width: 33.33333%; } + .next-col-m-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 37.5%; + flex: 0 0 37.5%; + width: 37.5%; + max-width: 37.5%; } + .next-col-m-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + width: 41.66667%; + max-width: 41.66667%; } + .next-col-m-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 45.83333%; + flex: 0 0 45.83333%; + width: 45.83333%; + max-width: 45.83333%; } + .next-col-m-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + width: 50%; + max-width: 50%; } + .next-col-m-13 { + -webkit-box-flex: 0; + -ms-flex: 0 0 54.16667%; + flex: 0 0 54.16667%; + width: 54.16667%; + max-width: 54.16667%; } + .next-col-m-14 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + width: 58.33333%; + max-width: 58.33333%; } + .next-col-m-15 { + -webkit-box-flex: 0; + -ms-flex: 0 0 62.5%; + flex: 0 0 62.5%; + width: 62.5%; + max-width: 62.5%; } + .next-col-m-16 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + width: 66.66667%; + max-width: 66.66667%; } + .next-col-m-17 { + -webkit-box-flex: 0; + -ms-flex: 0 0 70.83333%; + flex: 0 0 70.83333%; + width: 70.83333%; + max-width: 70.83333%; } + .next-col-m-18 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + width: 75%; + max-width: 75%; } + .next-col-m-19 { + -webkit-box-flex: 0; + -ms-flex: 0 0 79.16667%; + flex: 0 0 79.16667%; + width: 79.16667%; + max-width: 79.16667%; } + .next-col-m-20 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + width: 83.33333%; + max-width: 83.33333%; } + .next-col-m-21 { + -webkit-box-flex: 0; + -ms-flex: 0 0 87.5%; + flex: 0 0 87.5%; + width: 87.5%; + max-width: 87.5%; } + .next-col-m-22 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + width: 91.66667%; + max-width: 91.66667%; } + .next-col-m-23 { + -webkit-box-flex: 0; + -ms-flex: 0 0 95.83333%; + flex: 0 0 95.83333%; + width: 95.83333%; + max-width: 95.83333%; } + .next-col-m-24 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 1200px) { + .next-col-l-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 4.16667%; + flex: 0 0 4.16667%; + width: 4.16667%; + max-width: 4.16667%; } + .next-col-l-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + width: 8.33333%; + max-width: 8.33333%; } + .next-col-l-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 12.5%; + flex: 0 0 12.5%; + width: 12.5%; + max-width: 12.5%; } + .next-col-l-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + width: 16.66667%; + max-width: 16.66667%; } + .next-col-l-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20.83333%; + flex: 0 0 20.83333%; + width: 20.83333%; + max-width: 20.83333%; } + .next-col-l-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + width: 25%; + max-width: 25%; } + .next-col-l-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 29.16667%; + flex: 0 0 29.16667%; + width: 29.16667%; + max-width: 29.16667%; } + .next-col-l-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + width: 33.33333%; + max-width: 33.33333%; } + .next-col-l-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 37.5%; + flex: 0 0 37.5%; + width: 37.5%; + max-width: 37.5%; } + .next-col-l-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + width: 41.66667%; + max-width: 41.66667%; } + .next-col-l-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 45.83333%; + flex: 0 0 45.83333%; + width: 45.83333%; + max-width: 45.83333%; } + .next-col-l-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + width: 50%; + max-width: 50%; } + .next-col-l-13 { + -webkit-box-flex: 0; + -ms-flex: 0 0 54.16667%; + flex: 0 0 54.16667%; + width: 54.16667%; + max-width: 54.16667%; } + .next-col-l-14 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + width: 58.33333%; + max-width: 58.33333%; } + .next-col-l-15 { + -webkit-box-flex: 0; + -ms-flex: 0 0 62.5%; + flex: 0 0 62.5%; + width: 62.5%; + max-width: 62.5%; } + .next-col-l-16 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + width: 66.66667%; + max-width: 66.66667%; } + .next-col-l-17 { + -webkit-box-flex: 0; + -ms-flex: 0 0 70.83333%; + flex: 0 0 70.83333%; + width: 70.83333%; + max-width: 70.83333%; } + .next-col-l-18 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + width: 75%; + max-width: 75%; } + .next-col-l-19 { + -webkit-box-flex: 0; + -ms-flex: 0 0 79.16667%; + flex: 0 0 79.16667%; + width: 79.16667%; + max-width: 79.16667%; } + .next-col-l-20 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + width: 83.33333%; + max-width: 83.33333%; } + .next-col-l-21 { + -webkit-box-flex: 0; + -ms-flex: 0 0 87.5%; + flex: 0 0 87.5%; + width: 87.5%; + max-width: 87.5%; } + .next-col-l-22 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + width: 91.66667%; + max-width: 91.66667%; } + .next-col-l-23 { + -webkit-box-flex: 0; + -ms-flex: 0 0 95.83333%; + flex: 0 0 95.83333%; + width: 95.83333%; + max-width: 95.83333%; } + .next-col-l-24 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 1500px) { + .next-col-xl-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 4.16667%; + flex: 0 0 4.16667%; + width: 4.16667%; + max-width: 4.16667%; } + .next-col-xl-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 8.33333%; + flex: 0 0 8.33333%; + width: 8.33333%; + max-width: 8.33333%; } + .next-col-xl-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 12.5%; + flex: 0 0 12.5%; + width: 12.5%; + max-width: 12.5%; } + .next-col-xl-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 16.66667%; + flex: 0 0 16.66667%; + width: 16.66667%; + max-width: 16.66667%; } + .next-col-xl-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20.83333%; + flex: 0 0 20.83333%; + width: 20.83333%; + max-width: 20.83333%; } + .next-col-xl-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 25%; + flex: 0 0 25%; + width: 25%; + max-width: 25%; } + .next-col-xl-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 29.16667%; + flex: 0 0 29.16667%; + width: 29.16667%; + max-width: 29.16667%; } + .next-col-xl-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 33.33333%; + flex: 0 0 33.33333%; + width: 33.33333%; + max-width: 33.33333%; } + .next-col-xl-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 37.5%; + flex: 0 0 37.5%; + width: 37.5%; + max-width: 37.5%; } + .next-col-xl-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 41.66667%; + flex: 0 0 41.66667%; + width: 41.66667%; + max-width: 41.66667%; } + .next-col-xl-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 45.83333%; + flex: 0 0 45.83333%; + width: 45.83333%; + max-width: 45.83333%; } + .next-col-xl-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 50%; + flex: 0 0 50%; + width: 50%; + max-width: 50%; } + .next-col-xl-13 { + -webkit-box-flex: 0; + -ms-flex: 0 0 54.16667%; + flex: 0 0 54.16667%; + width: 54.16667%; + max-width: 54.16667%; } + .next-col-xl-14 { + -webkit-box-flex: 0; + -ms-flex: 0 0 58.33333%; + flex: 0 0 58.33333%; + width: 58.33333%; + max-width: 58.33333%; } + .next-col-xl-15 { + -webkit-box-flex: 0; + -ms-flex: 0 0 62.5%; + flex: 0 0 62.5%; + width: 62.5%; + max-width: 62.5%; } + .next-col-xl-16 { + -webkit-box-flex: 0; + -ms-flex: 0 0 66.66667%; + flex: 0 0 66.66667%; + width: 66.66667%; + max-width: 66.66667%; } + .next-col-xl-17 { + -webkit-box-flex: 0; + -ms-flex: 0 0 70.83333%; + flex: 0 0 70.83333%; + width: 70.83333%; + max-width: 70.83333%; } + .next-col-xl-18 { + -webkit-box-flex: 0; + -ms-flex: 0 0 75%; + flex: 0 0 75%; + width: 75%; + max-width: 75%; } + .next-col-xl-19 { + -webkit-box-flex: 0; + -ms-flex: 0 0 79.16667%; + flex: 0 0 79.16667%; + width: 79.16667%; + max-width: 79.16667%; } + .next-col-xl-20 { + -webkit-box-flex: 0; + -ms-flex: 0 0 83.33333%; + flex: 0 0 83.33333%; + width: 83.33333%; + max-width: 83.33333%; } + .next-col-xl-21 { + -webkit-box-flex: 0; + -ms-flex: 0 0 87.5%; + flex: 0 0 87.5%; + width: 87.5%; + max-width: 87.5%; } + .next-col-xl-22 { + -webkit-box-flex: 0; + -ms-flex: 0 0 91.66667%; + flex: 0 0 91.66667%; + width: 91.66667%; + max-width: 91.66667%; } + .next-col-xl-23 { + -webkit-box-flex: 0; + -ms-flex: 0 0 95.83333%; + flex: 0 0 95.83333%; + width: 95.83333%; + max-width: 95.83333%; } + .next-col-xl-24 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +.next-col-1p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20%; + flex: 0 0 20%; + width: 20%; + max-width: 20%; } + +.next-col-2p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + width: 40%; + max-width: 40%; } + +.next-col-3p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + width: 60%; + max-width: 60%; } + +.next-col-4p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 80%; + flex: 0 0 80%; + width: 80%; + max-width: 80%; } + +.next-col-5p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } + +@media (min-width: 320px) { + .next-col-xxs-1p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20%; + flex: 0 0 20%; + width: 20%; + max-width: 20%; } + .next-col-xxs-2p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + width: 40%; + max-width: 40%; } + .next-col-xxs-3p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + width: 60%; + max-width: 60%; } + .next-col-xxs-4p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 80%; + flex: 0 0 80%; + width: 80%; + max-width: 80%; } + .next-col-xxs-5p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 480px) { + .next-col-xs-1p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20%; + flex: 0 0 20%; + width: 20%; + max-width: 20%; } + .next-col-xs-2p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + width: 40%; + max-width: 40%; } + .next-col-xs-3p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + width: 60%; + max-width: 60%; } + .next-col-xs-4p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 80%; + flex: 0 0 80%; + width: 80%; + max-width: 80%; } + .next-col-xs-5p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 720px) { + .next-col-s-1p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20%; + flex: 0 0 20%; + width: 20%; + max-width: 20%; } + .next-col-s-2p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + width: 40%; + max-width: 40%; } + .next-col-s-3p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + width: 60%; + max-width: 60%; } + .next-col-s-4p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 80%; + flex: 0 0 80%; + width: 80%; + max-width: 80%; } + .next-col-s-5p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 990px) { + .next-col-m-1p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20%; + flex: 0 0 20%; + width: 20%; + max-width: 20%; } + .next-col-m-2p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + width: 40%; + max-width: 40%; } + .next-col-m-3p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + width: 60%; + max-width: 60%; } + .next-col-m-4p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 80%; + flex: 0 0 80%; + width: 80%; + max-width: 80%; } + .next-col-m-5p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 1200px) { + .next-col-l-1p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20%; + flex: 0 0 20%; + width: 20%; + max-width: 20%; } + .next-col-l-2p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + width: 40%; + max-width: 40%; } + .next-col-l-3p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + width: 60%; + max-width: 60%; } + .next-col-l-4p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 80%; + flex: 0 0 80%; + width: 80%; + max-width: 80%; } + .next-col-l-5p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +@media (min-width: 1500px) { + .next-col-xl-1p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20%; + flex: 0 0 20%; + width: 20%; + max-width: 20%; } + .next-col-xl-2p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 40%; + flex: 0 0 40%; + width: 40%; + max-width: 40%; } + .next-col-xl-3p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 60%; + flex: 0 0 60%; + width: 60%; + max-width: 60%; } + .next-col-xl-4p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 80%; + flex: 0 0 80%; + width: 80%; + max-width: 80%; } + .next-col-xl-5p5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100%; + flex: 0 0 100%; + width: 100%; + max-width: 100%; } } + +.next-col-fixed-1 { + -webkit-box-flex: 0; + -ms-flex: 0 0 20px; + flex: 0 0 20px; + width: 20px; + max-width: 20px; } + +.next-col-fixed-2 { + -webkit-box-flex: 0; + -ms-flex: 0 0 40px; + flex: 0 0 40px; + width: 40px; + max-width: 40px; } + +.next-col-fixed-3 { + -webkit-box-flex: 0; + -ms-flex: 0 0 60px; + flex: 0 0 60px; + width: 60px; + max-width: 60px; } + +.next-col-fixed-4 { + -webkit-box-flex: 0; + -ms-flex: 0 0 80px; + flex: 0 0 80px; + width: 80px; + max-width: 80px; } + +.next-col-fixed-5 { + -webkit-box-flex: 0; + -ms-flex: 0 0 100px; + flex: 0 0 100px; + width: 100px; + max-width: 100px; } + +.next-col-fixed-6 { + -webkit-box-flex: 0; + -ms-flex: 0 0 120px; + flex: 0 0 120px; + width: 120px; + max-width: 120px; } + +.next-col-fixed-7 { + -webkit-box-flex: 0; + -ms-flex: 0 0 140px; + flex: 0 0 140px; + width: 140px; + max-width: 140px; } + +.next-col-fixed-8 { + -webkit-box-flex: 0; + -ms-flex: 0 0 160px; + flex: 0 0 160px; + width: 160px; + max-width: 160px; } + +.next-col-fixed-9 { + -webkit-box-flex: 0; + -ms-flex: 0 0 180px; + flex: 0 0 180px; + width: 180px; + max-width: 180px; } + +.next-col-fixed-10 { + -webkit-box-flex: 0; + -ms-flex: 0 0 200px; + flex: 0 0 200px; + width: 200px; + max-width: 200px; } + +.next-col-fixed-11 { + -webkit-box-flex: 0; + -ms-flex: 0 0 220px; + flex: 0 0 220px; + width: 220px; + max-width: 220px; } + +.next-col-fixed-12 { + -webkit-box-flex: 0; + -ms-flex: 0 0 240px; + flex: 0 0 240px; + width: 240px; + max-width: 240px; } + +.next-col-fixed-13 { + -webkit-box-flex: 0; + -ms-flex: 0 0 260px; + flex: 0 0 260px; + width: 260px; + max-width: 260px; } + +.next-col-fixed-14 { + -webkit-box-flex: 0; + -ms-flex: 0 0 280px; + flex: 0 0 280px; + width: 280px; + max-width: 280px; } + +.next-col-fixed-15 { + -webkit-box-flex: 0; + -ms-flex: 0 0 300px; + flex: 0 0 300px; + width: 300px; + max-width: 300px; } + +.next-col-fixed-16 { + -webkit-box-flex: 0; + -ms-flex: 0 0 320px; + flex: 0 0 320px; + width: 320px; + max-width: 320px; } + +.next-col-fixed-17 { + -webkit-box-flex: 0; + -ms-flex: 0 0 340px; + flex: 0 0 340px; + width: 340px; + max-width: 340px; } + +.next-col-fixed-18 { + -webkit-box-flex: 0; + -ms-flex: 0 0 360px; + flex: 0 0 360px; + width: 360px; + max-width: 360px; } + +.next-col-fixed-19 { + -webkit-box-flex: 0; + -ms-flex: 0 0 380px; + flex: 0 0 380px; + width: 380px; + max-width: 380px; } + +.next-col-fixed-20 { + -webkit-box-flex: 0; + -ms-flex: 0 0 400px; + flex: 0 0 400px; + width: 400px; + max-width: 400px; } + +.next-col-fixed-21 { + -webkit-box-flex: 0; + -ms-flex: 0 0 420px; + flex: 0 0 420px; + width: 420px; + max-width: 420px; } + +.next-col-fixed-22 { + -webkit-box-flex: 0; + -ms-flex: 0 0 440px; + flex: 0 0 440px; + width: 440px; + max-width: 440px; } + +.next-col-fixed-23 { + -webkit-box-flex: 0; + -ms-flex: 0 0 460px; + flex: 0 0 460px; + width: 460px; + max-width: 460px; } + +.next-col-fixed-24 { + -webkit-box-flex: 0; + -ms-flex: 0 0 480px; + flex: 0 0 480px; + width: 480px; + max-width: 480px; } + +.next-col-fixed-25 { + -webkit-box-flex: 0; + -ms-flex: 0 0 500px; + flex: 0 0 500px; + width: 500px; + max-width: 500px; } + +.next-col-fixed-26 { + -webkit-box-flex: 0; + -ms-flex: 0 0 520px; + flex: 0 0 520px; + width: 520px; + max-width: 520px; } + +.next-col-fixed-27 { + -webkit-box-flex: 0; + -ms-flex: 0 0 540px; + flex: 0 0 540px; + width: 540px; + max-width: 540px; } + +.next-col-fixed-28 { + -webkit-box-flex: 0; + -ms-flex: 0 0 560px; + flex: 0 0 560px; + width: 560px; + max-width: 560px; } + +.next-col-fixed-29 { + -webkit-box-flex: 0; + -ms-flex: 0 0 580px; + flex: 0 0 580px; + width: 580px; + max-width: 580px; } + +.next-col-fixed-30 { + -webkit-box-flex: 0; + -ms-flex: 0 0 600px; + flex: 0 0 600px; + width: 600px; + max-width: 600px; } + +.next-col-offset-1 { + margin-left: 4.16667%; } + +.next-col-offset-2 { + margin-left: 8.33333%; } + +.next-col-offset-3 { + margin-left: 12.5%; } + +.next-col-offset-4 { + margin-left: 16.66667%; } + +.next-col-offset-5 { + margin-left: 20.83333%; } + +.next-col-offset-6 { + margin-left: 25%; } + +.next-col-offset-7 { + margin-left: 29.16667%; } + +.next-col-offset-8 { + margin-left: 33.33333%; } + +.next-col-offset-9 { + margin-left: 37.5%; } + +.next-col-offset-10 { + margin-left: 41.66667%; } + +.next-col-offset-11 { + margin-left: 45.83333%; } + +.next-col-offset-12 { + margin-left: 50%; } + +.next-col-offset-13 { + margin-left: 54.16667%; } + +.next-col-offset-14 { + margin-left: 58.33333%; } + +.next-col-offset-15 { + margin-left: 62.5%; } + +.next-col-offset-16 { + margin-left: 66.66667%; } + +.next-col-offset-17 { + margin-left: 70.83333%; } + +.next-col-offset-18 { + margin-left: 75%; } + +.next-col-offset-19 { + margin-left: 79.16667%; } + +.next-col-offset-20 { + margin-left: 83.33333%; } + +.next-col-offset-21 { + margin-left: 87.5%; } + +.next-col-offset-22 { + margin-left: 91.66667%; } + +.next-col-offset-23 { + margin-left: 95.83333%; } + +.next-col-offset-24 { + margin-left: 100%; } + +@media (min-width: 320px) { + .next-col-xxs-offset-1 { + margin-left: 4.16667%; } + .next-col-xxs-offset-2 { + margin-left: 8.33333%; } + .next-col-xxs-offset-3 { + margin-left: 12.5%; } + .next-col-xxs-offset-4 { + margin-left: 16.66667%; } + .next-col-xxs-offset-5 { + margin-left: 20.83333%; } + .next-col-xxs-offset-6 { + margin-left: 25%; } + .next-col-xxs-offset-7 { + margin-left: 29.16667%; } + .next-col-xxs-offset-8 { + margin-left: 33.33333%; } + .next-col-xxs-offset-9 { + margin-left: 37.5%; } + .next-col-xxs-offset-10 { + margin-left: 41.66667%; } + .next-col-xxs-offset-11 { + margin-left: 45.83333%; } + .next-col-xxs-offset-12 { + margin-left: 50%; } + .next-col-xxs-offset-13 { + margin-left: 54.16667%; } + .next-col-xxs-offset-14 { + margin-left: 58.33333%; } + .next-col-xxs-offset-15 { + margin-left: 62.5%; } + .next-col-xxs-offset-16 { + margin-left: 66.66667%; } + .next-col-xxs-offset-17 { + margin-left: 70.83333%; } + .next-col-xxs-offset-18 { + margin-left: 75%; } + .next-col-xxs-offset-19 { + margin-left: 79.16667%; } + .next-col-xxs-offset-20 { + margin-left: 83.33333%; } + .next-col-xxs-offset-21 { + margin-left: 87.5%; } + .next-col-xxs-offset-22 { + margin-left: 91.66667%; } + .next-col-xxs-offset-23 { + margin-left: 95.83333%; } + .next-col-xxs-offset-24 { + margin-left: 100%; } } + +@media (min-width: 480px) { + .next-col-xs-offset-1 { + margin-left: 4.16667%; } + .next-col-xs-offset-2 { + margin-left: 8.33333%; } + .next-col-xs-offset-3 { + margin-left: 12.5%; } + .next-col-xs-offset-4 { + margin-left: 16.66667%; } + .next-col-xs-offset-5 { + margin-left: 20.83333%; } + .next-col-xs-offset-6 { + margin-left: 25%; } + .next-col-xs-offset-7 { + margin-left: 29.16667%; } + .next-col-xs-offset-8 { + margin-left: 33.33333%; } + .next-col-xs-offset-9 { + margin-left: 37.5%; } + .next-col-xs-offset-10 { + margin-left: 41.66667%; } + .next-col-xs-offset-11 { + margin-left: 45.83333%; } + .next-col-xs-offset-12 { + margin-left: 50%; } + .next-col-xs-offset-13 { + margin-left: 54.16667%; } + .next-col-xs-offset-14 { + margin-left: 58.33333%; } + .next-col-xs-offset-15 { + margin-left: 62.5%; } + .next-col-xs-offset-16 { + margin-left: 66.66667%; } + .next-col-xs-offset-17 { + margin-left: 70.83333%; } + .next-col-xs-offset-18 { + margin-left: 75%; } + .next-col-xs-offset-19 { + margin-left: 79.16667%; } + .next-col-xs-offset-20 { + margin-left: 83.33333%; } + .next-col-xs-offset-21 { + margin-left: 87.5%; } + .next-col-xs-offset-22 { + margin-left: 91.66667%; } + .next-col-xs-offset-23 { + margin-left: 95.83333%; } + .next-col-xs-offset-24 { + margin-left: 100%; } } + +@media (min-width: 720px) { + .next-col-s-offset-1 { + margin-left: 4.16667%; } + .next-col-s-offset-2 { + margin-left: 8.33333%; } + .next-col-s-offset-3 { + margin-left: 12.5%; } + .next-col-s-offset-4 { + margin-left: 16.66667%; } + .next-col-s-offset-5 { + margin-left: 20.83333%; } + .next-col-s-offset-6 { + margin-left: 25%; } + .next-col-s-offset-7 { + margin-left: 29.16667%; } + .next-col-s-offset-8 { + margin-left: 33.33333%; } + .next-col-s-offset-9 { + margin-left: 37.5%; } + .next-col-s-offset-10 { + margin-left: 41.66667%; } + .next-col-s-offset-11 { + margin-left: 45.83333%; } + .next-col-s-offset-12 { + margin-left: 50%; } + .next-col-s-offset-13 { + margin-left: 54.16667%; } + .next-col-s-offset-14 { + margin-left: 58.33333%; } + .next-col-s-offset-15 { + margin-left: 62.5%; } + .next-col-s-offset-16 { + margin-left: 66.66667%; } + .next-col-s-offset-17 { + margin-left: 70.83333%; } + .next-col-s-offset-18 { + margin-left: 75%; } + .next-col-s-offset-19 { + margin-left: 79.16667%; } + .next-col-s-offset-20 { + margin-left: 83.33333%; } + .next-col-s-offset-21 { + margin-left: 87.5%; } + .next-col-s-offset-22 { + margin-left: 91.66667%; } + .next-col-s-offset-23 { + margin-left: 95.83333%; } + .next-col-s-offset-24 { + margin-left: 100%; } } + +@media (min-width: 990px) { + .next-col-m-offset-1 { + margin-left: 4.16667%; } + .next-col-m-offset-2 { + margin-left: 8.33333%; } + .next-col-m-offset-3 { + margin-left: 12.5%; } + .next-col-m-offset-4 { + margin-left: 16.66667%; } + .next-col-m-offset-5 { + margin-left: 20.83333%; } + .next-col-m-offset-6 { + margin-left: 25%; } + .next-col-m-offset-7 { + margin-left: 29.16667%; } + .next-col-m-offset-8 { + margin-left: 33.33333%; } + .next-col-m-offset-9 { + margin-left: 37.5%; } + .next-col-m-offset-10 { + margin-left: 41.66667%; } + .next-col-m-offset-11 { + margin-left: 45.83333%; } + .next-col-m-offset-12 { + margin-left: 50%; } + .next-col-m-offset-13 { + margin-left: 54.16667%; } + .next-col-m-offset-14 { + margin-left: 58.33333%; } + .next-col-m-offset-15 { + margin-left: 62.5%; } + .next-col-m-offset-16 { + margin-left: 66.66667%; } + .next-col-m-offset-17 { + margin-left: 70.83333%; } + .next-col-m-offset-18 { + margin-left: 75%; } + .next-col-m-offset-19 { + margin-left: 79.16667%; } + .next-col-m-offset-20 { + margin-left: 83.33333%; } + .next-col-m-offset-21 { + margin-left: 87.5%; } + .next-col-m-offset-22 { + margin-left: 91.66667%; } + .next-col-m-offset-23 { + margin-left: 95.83333%; } + .next-col-m-offset-24 { + margin-left: 100%; } } + +@media (min-width: 1200px) { + .next-col-l-offset-1 { + margin-left: 4.16667%; } + .next-col-l-offset-2 { + margin-left: 8.33333%; } + .next-col-l-offset-3 { + margin-left: 12.5%; } + .next-col-l-offset-4 { + margin-left: 16.66667%; } + .next-col-l-offset-5 { + margin-left: 20.83333%; } + .next-col-l-offset-6 { + margin-left: 25%; } + .next-col-l-offset-7 { + margin-left: 29.16667%; } + .next-col-l-offset-8 { + margin-left: 33.33333%; } + .next-col-l-offset-9 { + margin-left: 37.5%; } + .next-col-l-offset-10 { + margin-left: 41.66667%; } + .next-col-l-offset-11 { + margin-left: 45.83333%; } + .next-col-l-offset-12 { + margin-left: 50%; } + .next-col-l-offset-13 { + margin-left: 54.16667%; } + .next-col-l-offset-14 { + margin-left: 58.33333%; } + .next-col-l-offset-15 { + margin-left: 62.5%; } + .next-col-l-offset-16 { + margin-left: 66.66667%; } + .next-col-l-offset-17 { + margin-left: 70.83333%; } + .next-col-l-offset-18 { + margin-left: 75%; } + .next-col-l-offset-19 { + margin-left: 79.16667%; } + .next-col-l-offset-20 { + margin-left: 83.33333%; } + .next-col-l-offset-21 { + margin-left: 87.5%; } + .next-col-l-offset-22 { + margin-left: 91.66667%; } + .next-col-l-offset-23 { + margin-left: 95.83333%; } + .next-col-l-offset-24 { + margin-left: 100%; } } + +@media (min-width: 1500px) { + .next-col-xl-offset-1 { + margin-left: 4.16667%; } + .next-col-xl-offset-2 { + margin-left: 8.33333%; } + .next-col-xl-offset-3 { + margin-left: 12.5%; } + .next-col-xl-offset-4 { + margin-left: 16.66667%; } + .next-col-xl-offset-5 { + margin-left: 20.83333%; } + .next-col-xl-offset-6 { + margin-left: 25%; } + .next-col-xl-offset-7 { + margin-left: 29.16667%; } + .next-col-xl-offset-8 { + margin-left: 33.33333%; } + .next-col-xl-offset-9 { + margin-left: 37.5%; } + .next-col-xl-offset-10 { + margin-left: 41.66667%; } + .next-col-xl-offset-11 { + margin-left: 45.83333%; } + .next-col-xl-offset-12 { + margin-left: 50%; } + .next-col-xl-offset-13 { + margin-left: 54.16667%; } + .next-col-xl-offset-14 { + margin-left: 58.33333%; } + .next-col-xl-offset-15 { + margin-left: 62.5%; } + .next-col-xl-offset-16 { + margin-left: 66.66667%; } + .next-col-xl-offset-17 { + margin-left: 70.83333%; } + .next-col-xl-offset-18 { + margin-left: 75%; } + .next-col-xl-offset-19 { + margin-left: 79.16667%; } + .next-col-xl-offset-20 { + margin-left: 83.33333%; } + .next-col-xl-offset-21 { + margin-left: 87.5%; } + .next-col-xl-offset-22 { + margin-left: 91.66667%; } + .next-col-xl-offset-23 { + margin-left: 95.83333%; } + .next-col-xl-offset-24 { + margin-left: 100%; } } + +.next-col-offset-fixed-1 { + margin-left: 20px; } + +.next-col-offset-fixed-2 { + margin-left: 40px; } + +.next-col-offset-fixed-3 { + margin-left: 60px; } + +.next-col-offset-fixed-4 { + margin-left: 80px; } + +.next-col-offset-fixed-5 { + margin-left: 100px; } + +.next-col-offset-fixed-6 { + margin-left: 120px; } + +.next-col-offset-fixed-7 { + margin-left: 140px; } + +.next-col-offset-fixed-8 { + margin-left: 160px; } + +.next-col-offset-fixed-9 { + margin-left: 180px; } + +.next-col-offset-fixed-10 { + margin-left: 200px; } + +.next-col-offset-fixed-11 { + margin-left: 220px; } + +.next-col-offset-fixed-12 { + margin-left: 240px; } + +.next-col-offset-fixed-13 { + margin-left: 260px; } + +.next-col-offset-fixed-14 { + margin-left: 280px; } + +.next-col-offset-fixed-15 { + margin-left: 300px; } + +.next-col-offset-fixed-16 { + margin-left: 320px; } + +.next-col-offset-fixed-17 { + margin-left: 340px; } + +.next-col-offset-fixed-18 { + margin-left: 360px; } + +.next-col-offset-fixed-19 { + margin-left: 380px; } + +.next-col-offset-fixed-20 { + margin-left: 400px; } + +.next-col-offset-fixed-21 { + margin-left: 420px; } + +.next-col-offset-fixed-22 { + margin-left: 440px; } + +.next-col-offset-fixed-23 { + margin-left: 460px; } + +.next-col-offset-fixed-24 { + margin-left: 480px; } + +.next-col-offset-fixed-25 { + margin-left: 500px; } + +.next-col-offset-fixed-26 { + margin-left: 520px; } + +.next-col-offset-fixed-27 { + margin-left: 540px; } + +.next-col-offset-fixed-28 { + margin-left: 560px; } + +.next-col-offset-fixed-29 { + margin-left: 580px; } + +.next-col-offset-fixed-30 { + margin-left: 600px; } + +.next-col-offset-fixed-xxs-1 { + margin-left: 20px; } + +.next-col-offset-fixed-xxs-2 { + margin-left: 40px; } + +.next-col-offset-fixed-xxs-3 { + margin-left: 60px; } + +.next-col-offset-fixed-xxs-4 { + margin-left: 80px; } + +.next-col-offset-fixed-xxs-5 { + margin-left: 100px; } + +.next-col-offset-fixed-xxs-6 { + margin-left: 120px; } + +.next-col-offset-fixed-xxs-7 { + margin-left: 140px; } + +.next-col-offset-fixed-xxs-8 { + margin-left: 160px; } + +.next-col-offset-fixed-xxs-9 { + margin-left: 180px; } + +.next-col-offset-fixed-xxs-10 { + margin-left: 200px; } + +.next-col-offset-fixed-xxs-11 { + margin-left: 220px; } + +.next-col-offset-fixed-xxs-12 { + margin-left: 240px; } + +.next-col-offset-fixed-xxs-13 { + margin-left: 260px; } + +.next-col-offset-fixed-xxs-14 { + margin-left: 280px; } + +.next-col-offset-fixed-xxs-15 { + margin-left: 300px; } + +.next-col-offset-fixed-xxs-16 { + margin-left: 320px; } + +.next-col-offset-fixed-xxs-17 { + margin-left: 340px; } + +.next-col-offset-fixed-xxs-18 { + margin-left: 360px; } + +.next-col-offset-fixed-xxs-19 { + margin-left: 380px; } + +.next-col-offset-fixed-xxs-20 { + margin-left: 400px; } + +.next-col-offset-fixed-xxs-21 { + margin-left: 420px; } + +.next-col-offset-fixed-xxs-22 { + margin-left: 440px; } + +.next-col-offset-fixed-xxs-23 { + margin-left: 460px; } + +.next-col-offset-fixed-xxs-24 { + margin-left: 480px; } + +.next-col-offset-fixed-xxs-25 { + margin-left: 500px; } + +.next-col-offset-fixed-xxs-26 { + margin-left: 520px; } + +.next-col-offset-fixed-xxs-27 { + margin-left: 540px; } + +.next-col-offset-fixed-xxs-28 { + margin-left: 560px; } + +.next-col-offset-fixed-xxs-29 { + margin-left: 580px; } + +.next-col-offset-fixed-xxs-30 { + margin-left: 600px; } + +.next-col-offset-fixed-xs-1 { + margin-left: 20px; } + +.next-col-offset-fixed-xs-2 { + margin-left: 40px; } + +.next-col-offset-fixed-xs-3 { + margin-left: 60px; } + +.next-col-offset-fixed-xs-4 { + margin-left: 80px; } + +.next-col-offset-fixed-xs-5 { + margin-left: 100px; } + +.next-col-offset-fixed-xs-6 { + margin-left: 120px; } + +.next-col-offset-fixed-xs-7 { + margin-left: 140px; } + +.next-col-offset-fixed-xs-8 { + margin-left: 160px; } + +.next-col-offset-fixed-xs-9 { + margin-left: 180px; } + +.next-col-offset-fixed-xs-10 { + margin-left: 200px; } + +.next-col-offset-fixed-xs-11 { + margin-left: 220px; } + +.next-col-offset-fixed-xs-12 { + margin-left: 240px; } + +.next-col-offset-fixed-xs-13 { + margin-left: 260px; } + +.next-col-offset-fixed-xs-14 { + margin-left: 280px; } + +.next-col-offset-fixed-xs-15 { + margin-left: 300px; } + +.next-col-offset-fixed-xs-16 { + margin-left: 320px; } + +.next-col-offset-fixed-xs-17 { + margin-left: 340px; } + +.next-col-offset-fixed-xs-18 { + margin-left: 360px; } + +.next-col-offset-fixed-xs-19 { + margin-left: 380px; } + +.next-col-offset-fixed-xs-20 { + margin-left: 400px; } + +.next-col-offset-fixed-xs-21 { + margin-left: 420px; } + +.next-col-offset-fixed-xs-22 { + margin-left: 440px; } + +.next-col-offset-fixed-xs-23 { + margin-left: 460px; } + +.next-col-offset-fixed-xs-24 { + margin-left: 480px; } + +.next-col-offset-fixed-xs-25 { + margin-left: 500px; } + +.next-col-offset-fixed-xs-26 { + margin-left: 520px; } + +.next-col-offset-fixed-xs-27 { + margin-left: 540px; } + +.next-col-offset-fixed-xs-28 { + margin-left: 560px; } + +.next-col-offset-fixed-xs-29 { + margin-left: 580px; } + +.next-col-offset-fixed-xs-30 { + margin-left: 600px; } + +.next-col-offset-fixed-s-1 { + margin-left: 20px; } + +.next-col-offset-fixed-s-2 { + margin-left: 40px; } + +.next-col-offset-fixed-s-3 { + margin-left: 60px; } + +.next-col-offset-fixed-s-4 { + margin-left: 80px; } + +.next-col-offset-fixed-s-5 { + margin-left: 100px; } + +.next-col-offset-fixed-s-6 { + margin-left: 120px; } + +.next-col-offset-fixed-s-7 { + margin-left: 140px; } + +.next-col-offset-fixed-s-8 { + margin-left: 160px; } + +.next-col-offset-fixed-s-9 { + margin-left: 180px; } + +.next-col-offset-fixed-s-10 { + margin-left: 200px; } + +.next-col-offset-fixed-s-11 { + margin-left: 220px; } + +.next-col-offset-fixed-s-12 { + margin-left: 240px; } + +.next-col-offset-fixed-s-13 { + margin-left: 260px; } + +.next-col-offset-fixed-s-14 { + margin-left: 280px; } + +.next-col-offset-fixed-s-15 { + margin-left: 300px; } + +.next-col-offset-fixed-s-16 { + margin-left: 320px; } + +.next-col-offset-fixed-s-17 { + margin-left: 340px; } + +.next-col-offset-fixed-s-18 { + margin-left: 360px; } + +.next-col-offset-fixed-s-19 { + margin-left: 380px; } + +.next-col-offset-fixed-s-20 { + margin-left: 400px; } + +.next-col-offset-fixed-s-21 { + margin-left: 420px; } + +.next-col-offset-fixed-s-22 { + margin-left: 440px; } + +.next-col-offset-fixed-s-23 { + margin-left: 460px; } + +.next-col-offset-fixed-s-24 { + margin-left: 480px; } + +.next-col-offset-fixed-s-25 { + margin-left: 500px; } + +.next-col-offset-fixed-s-26 { + margin-left: 520px; } + +.next-col-offset-fixed-s-27 { + margin-left: 540px; } + +.next-col-offset-fixed-s-28 { + margin-left: 560px; } + +.next-col-offset-fixed-s-29 { + margin-left: 580px; } + +.next-col-offset-fixed-s-30 { + margin-left: 600px; } + +.next-col-offset-fixed-m-1 { + margin-left: 20px; } + +.next-col-offset-fixed-m-2 { + margin-left: 40px; } + +.next-col-offset-fixed-m-3 { + margin-left: 60px; } + +.next-col-offset-fixed-m-4 { + margin-left: 80px; } + +.next-col-offset-fixed-m-5 { + margin-left: 100px; } + +.next-col-offset-fixed-m-6 { + margin-left: 120px; } + +.next-col-offset-fixed-m-7 { + margin-left: 140px; } + +.next-col-offset-fixed-m-8 { + margin-left: 160px; } + +.next-col-offset-fixed-m-9 { + margin-left: 180px; } + +.next-col-offset-fixed-m-10 { + margin-left: 200px; } + +.next-col-offset-fixed-m-11 { + margin-left: 220px; } + +.next-col-offset-fixed-m-12 { + margin-left: 240px; } + +.next-col-offset-fixed-m-13 { + margin-left: 260px; } + +.next-col-offset-fixed-m-14 { + margin-left: 280px; } + +.next-col-offset-fixed-m-15 { + margin-left: 300px; } + +.next-col-offset-fixed-m-16 { + margin-left: 320px; } + +.next-col-offset-fixed-m-17 { + margin-left: 340px; } + +.next-col-offset-fixed-m-18 { + margin-left: 360px; } + +.next-col-offset-fixed-m-19 { + margin-left: 380px; } + +.next-col-offset-fixed-m-20 { + margin-left: 400px; } + +.next-col-offset-fixed-m-21 { + margin-left: 420px; } + +.next-col-offset-fixed-m-22 { + margin-left: 440px; } + +.next-col-offset-fixed-m-23 { + margin-left: 460px; } + +.next-col-offset-fixed-m-24 { + margin-left: 480px; } + +.next-col-offset-fixed-m-25 { + margin-left: 500px; } + +.next-col-offset-fixed-m-26 { + margin-left: 520px; } + +.next-col-offset-fixed-m-27 { + margin-left: 540px; } + +.next-col-offset-fixed-m-28 { + margin-left: 560px; } + +.next-col-offset-fixed-m-29 { + margin-left: 580px; } + +.next-col-offset-fixed-m-30 { + margin-left: 600px; } + +.next-col-offset-fixed-l-1 { + margin-left: 20px; } + +.next-col-offset-fixed-l-2 { + margin-left: 40px; } + +.next-col-offset-fixed-l-3 { + margin-left: 60px; } + +.next-col-offset-fixed-l-4 { + margin-left: 80px; } + +.next-col-offset-fixed-l-5 { + margin-left: 100px; } + +.next-col-offset-fixed-l-6 { + margin-left: 120px; } + +.next-col-offset-fixed-l-7 { + margin-left: 140px; } + +.next-col-offset-fixed-l-8 { + margin-left: 160px; } + +.next-col-offset-fixed-l-9 { + margin-left: 180px; } + +.next-col-offset-fixed-l-10 { + margin-left: 200px; } + +.next-col-offset-fixed-l-11 { + margin-left: 220px; } + +.next-col-offset-fixed-l-12 { + margin-left: 240px; } + +.next-col-offset-fixed-l-13 { + margin-left: 260px; } + +.next-col-offset-fixed-l-14 { + margin-left: 280px; } + +.next-col-offset-fixed-l-15 { + margin-left: 300px; } + +.next-col-offset-fixed-l-16 { + margin-left: 320px; } + +.next-col-offset-fixed-l-17 { + margin-left: 340px; } + +.next-col-offset-fixed-l-18 { + margin-left: 360px; } + +.next-col-offset-fixed-l-19 { + margin-left: 380px; } + +.next-col-offset-fixed-l-20 { + margin-left: 400px; } + +.next-col-offset-fixed-l-21 { + margin-left: 420px; } + +.next-col-offset-fixed-l-22 { + margin-left: 440px; } + +.next-col-offset-fixed-l-23 { + margin-left: 460px; } + +.next-col-offset-fixed-l-24 { + margin-left: 480px; } + +.next-col-offset-fixed-l-25 { + margin-left: 500px; } + +.next-col-offset-fixed-l-26 { + margin-left: 520px; } + +.next-col-offset-fixed-l-27 { + margin-left: 540px; } + +.next-col-offset-fixed-l-28 { + margin-left: 560px; } + +.next-col-offset-fixed-l-29 { + margin-left: 580px; } + +.next-col-offset-fixed-l-30 { + margin-left: 600px; } + +.next-col-offset-fixed-xl-1 { + margin-left: 20px; } + +.next-col-offset-fixed-xl-2 { + margin-left: 40px; } + +.next-col-offset-fixed-xl-3 { + margin-left: 60px; } + +.next-col-offset-fixed-xl-4 { + margin-left: 80px; } + +.next-col-offset-fixed-xl-5 { + margin-left: 100px; } + +.next-col-offset-fixed-xl-6 { + margin-left: 120px; } + +.next-col-offset-fixed-xl-7 { + margin-left: 140px; } + +.next-col-offset-fixed-xl-8 { + margin-left: 160px; } + +.next-col-offset-fixed-xl-9 { + margin-left: 180px; } + +.next-col-offset-fixed-xl-10 { + margin-left: 200px; } + +.next-col-offset-fixed-xl-11 { + margin-left: 220px; } + +.next-col-offset-fixed-xl-12 { + margin-left: 240px; } + +.next-col-offset-fixed-xl-13 { + margin-left: 260px; } + +.next-col-offset-fixed-xl-14 { + margin-left: 280px; } + +.next-col-offset-fixed-xl-15 { + margin-left: 300px; } + +.next-col-offset-fixed-xl-16 { + margin-left: 320px; } + +.next-col-offset-fixed-xl-17 { + margin-left: 340px; } + +.next-col-offset-fixed-xl-18 { + margin-left: 360px; } + +.next-col-offset-fixed-xl-19 { + margin-left: 380px; } + +.next-col-offset-fixed-xl-20 { + margin-left: 400px; } + +.next-col-offset-fixed-xl-21 { + margin-left: 420px; } + +.next-col-offset-fixed-xl-22 { + margin-left: 440px; } + +.next-col-offset-fixed-xl-23 { + margin-left: 460px; } + +.next-col-offset-fixed-xl-24 { + margin-left: 480px; } + +.next-col-offset-fixed-xl-25 { + margin-left: 500px; } + +.next-col-offset-fixed-xl-26 { + margin-left: 520px; } + +.next-col-offset-fixed-xl-27 { + margin-left: 540px; } + +.next-col-offset-fixed-xl-28 { + margin-left: 560px; } + +.next-col-offset-fixed-xl-29 { + margin-left: 580px; } + +.next-col-offset-fixed-xl-30 { + margin-left: 600px; } + +.next-col.next-col-hidden { + display: none; } + +@media (min-width: 320px) and (max-width: 479px) { + .next-col.next-col-xxs-hidden { + display: none; } } + +@media (min-width: 480px) and (max-width: 719px) { + .next-col.next-col-xs-hidden { + display: none; } } + +@media (min-width: 720px) and (max-width: 989px) { + .next-col.next-col-s-hidden { + display: none; } } + +@media (min-width: 990px) and (max-width: 1199px) { + .next-col.next-col-m-hidden { + display: none; } } + +@media (min-width: 1200px) and (max-width: 1499px) { + .next-col.next-col-l-hidden { + display: none; } } + +@media (min-width: 1500px) { + .next-col.next-col-xl-hidden { + display: none; } } + +.next-row.next-row-hidden { + display: none; } + +@media (min-width: 320px) and (max-width: 479px) { + .next-row.next-row-xxs-hidden { + display: none; } } + +@media (min-width: 480px) and (max-width: 719px) { + .next-row.next-row-xs-hidden { + display: none; } } + +@media (min-width: 720px) and (max-width: 989px) { + .next-row.next-row-s-hidden { + display: none; } } + +@media (min-width: 990px) and (max-width: 1199px) { + .next-row.next-row-m-hidden { + display: none; } } + +@media (min-width: 1200px) and (max-width: 1499px) { + .next-row.next-row-l-hidden { + display: none; } } + +@media (min-width: 1500px) { + .next-row.next-row-xl-hidden { + display: none; } } + +.next-col-offset-1[dir="rtl"] { + margin-right: 4.16667%; + margin-left: auto; } + +.next-col-offset-2[dir="rtl"] { + margin-right: 8.33333%; + margin-left: auto; } + +.next-col-offset-3[dir="rtl"] { + margin-right: 12.5%; + margin-left: auto; } + +.next-col-offset-4[dir="rtl"] { + margin-right: 16.66667%; + margin-left: auto; } + +.next-col-offset-5[dir="rtl"] { + margin-right: 20.83333%; + margin-left: auto; } + +.next-col-offset-6[dir="rtl"] { + margin-right: 25%; + margin-left: auto; } + +.next-col-offset-7[dir="rtl"] { + margin-right: 29.16667%; + margin-left: auto; } + +.next-col-offset-8[dir="rtl"] { + margin-right: 33.33333%; + margin-left: auto; } + +.next-col-offset-9[dir="rtl"] { + margin-right: 37.5%; + margin-left: auto; } + +.next-col-offset-10[dir="rtl"] { + margin-right: 41.66667%; + margin-left: auto; } + +.next-col-offset-11[dir="rtl"] { + margin-right: 45.83333%; + margin-left: auto; } + +.next-col-offset-12[dir="rtl"] { + margin-right: 50%; + margin-left: auto; } + +.next-col-offset-13[dir="rtl"] { + margin-right: 54.16667%; + margin-left: auto; } + +.next-col-offset-14[dir="rtl"] { + margin-right: 58.33333%; + margin-left: auto; } + +.next-col-offset-15[dir="rtl"] { + margin-right: 62.5%; + margin-left: auto; } + +.next-col-offset-16[dir="rtl"] { + margin-right: 66.66667%; + margin-left: auto; } + +.next-col-offset-17[dir="rtl"] { + margin-right: 70.83333%; + margin-left: auto; } + +.next-col-offset-18[dir="rtl"] { + margin-right: 75%; + margin-left: auto; } + +.next-col-offset-19[dir="rtl"] { + margin-right: 79.16667%; + margin-left: auto; } + +.next-col-offset-20[dir="rtl"] { + margin-right: 83.33333%; + margin-left: auto; } + +.next-col-offset-21[dir="rtl"] { + margin-right: 87.5%; + margin-left: auto; } + +.next-col-offset-22[dir="rtl"] { + margin-right: 91.66667%; + margin-left: auto; } + +.next-col-offset-23[dir="rtl"] { + margin-right: 95.83333%; + margin-left: auto; } + +.next-col-offset-24[dir="rtl"] { + margin-right: 100%; + margin-left: auto; } + +@media (min-width: 320px) { + .next-col-xxs-offset-1[dir="rtl"] { + margin-right: 4.16667%; + margin-left: auto; } + .next-col-xxs-offset-2[dir="rtl"] { + margin-right: 8.33333%; + margin-left: auto; } + .next-col-xxs-offset-3[dir="rtl"] { + margin-right: 12.5%; + margin-left: auto; } + .next-col-xxs-offset-4[dir="rtl"] { + margin-right: 16.66667%; + margin-left: auto; } + .next-col-xxs-offset-5[dir="rtl"] { + margin-right: 20.83333%; + margin-left: auto; } + .next-col-xxs-offset-6[dir="rtl"] { + margin-right: 25%; + margin-left: auto; } + .next-col-xxs-offset-7[dir="rtl"] { + margin-right: 29.16667%; + margin-left: auto; } + .next-col-xxs-offset-8[dir="rtl"] { + margin-right: 33.33333%; + margin-left: auto; } + .next-col-xxs-offset-9[dir="rtl"] { + margin-right: 37.5%; + margin-left: auto; } + .next-col-xxs-offset-10[dir="rtl"] { + margin-right: 41.66667%; + margin-left: auto; } + .next-col-xxs-offset-11[dir="rtl"] { + margin-right: 45.83333%; + margin-left: auto; } + .next-col-xxs-offset-12[dir="rtl"] { + margin-right: 50%; + margin-left: auto; } + .next-col-xxs-offset-13[dir="rtl"] { + margin-right: 54.16667%; + margin-left: auto; } + .next-col-xxs-offset-14[dir="rtl"] { + margin-right: 58.33333%; + margin-left: auto; } + .next-col-xxs-offset-15[dir="rtl"] { + margin-right: 62.5%; + margin-left: auto; } + .next-col-xxs-offset-16[dir="rtl"] { + margin-right: 66.66667%; + margin-left: auto; } + .next-col-xxs-offset-17[dir="rtl"] { + margin-right: 70.83333%; + margin-left: auto; } + .next-col-xxs-offset-18[dir="rtl"] { + margin-right: 75%; + margin-left: auto; } + .next-col-xxs-offset-19[dir="rtl"] { + margin-right: 79.16667%; + margin-left: auto; } + .next-col-xxs-offset-20[dir="rtl"] { + margin-right: 83.33333%; + margin-left: auto; } + .next-col-xxs-offset-21[dir="rtl"] { + margin-right: 87.5%; + margin-left: auto; } + .next-col-xxs-offset-22[dir="rtl"] { + margin-right: 91.66667%; + margin-left: auto; } + .next-col-xxs-offset-23[dir="rtl"] { + margin-right: 95.83333%; + margin-left: auto; } + .next-col-xxs-offset-24[dir="rtl"] { + margin-right: 100%; + margin-left: auto; } } + +@media (min-width: 480px) { + .next-col-xs-offset-1[dir="rtl"] { + margin-right: 4.16667%; + margin-left: auto; } + .next-col-xs-offset-2[dir="rtl"] { + margin-right: 8.33333%; + margin-left: auto; } + .next-col-xs-offset-3[dir="rtl"] { + margin-right: 12.5%; + margin-left: auto; } + .next-col-xs-offset-4[dir="rtl"] { + margin-right: 16.66667%; + margin-left: auto; } + .next-col-xs-offset-5[dir="rtl"] { + margin-right: 20.83333%; + margin-left: auto; } + .next-col-xs-offset-6[dir="rtl"] { + margin-right: 25%; + margin-left: auto; } + .next-col-xs-offset-7[dir="rtl"] { + margin-right: 29.16667%; + margin-left: auto; } + .next-col-xs-offset-8[dir="rtl"] { + margin-right: 33.33333%; + margin-left: auto; } + .next-col-xs-offset-9[dir="rtl"] { + margin-right: 37.5%; + margin-left: auto; } + .next-col-xs-offset-10[dir="rtl"] { + margin-right: 41.66667%; + margin-left: auto; } + .next-col-xs-offset-11[dir="rtl"] { + margin-right: 45.83333%; + margin-left: auto; } + .next-col-xs-offset-12[dir="rtl"] { + margin-right: 50%; + margin-left: auto; } + .next-col-xs-offset-13[dir="rtl"] { + margin-right: 54.16667%; + margin-left: auto; } + .next-col-xs-offset-14[dir="rtl"] { + margin-right: 58.33333%; + margin-left: auto; } + .next-col-xs-offset-15[dir="rtl"] { + margin-right: 62.5%; + margin-left: auto; } + .next-col-xs-offset-16[dir="rtl"] { + margin-right: 66.66667%; + margin-left: auto; } + .next-col-xs-offset-17[dir="rtl"] { + margin-right: 70.83333%; + margin-left: auto; } + .next-col-xs-offset-18[dir="rtl"] { + margin-right: 75%; + margin-left: auto; } + .next-col-xs-offset-19[dir="rtl"] { + margin-right: 79.16667%; + margin-left: auto; } + .next-col-xs-offset-20[dir="rtl"] { + margin-right: 83.33333%; + margin-left: auto; } + .next-col-xs-offset-21[dir="rtl"] { + margin-right: 87.5%; + margin-left: auto; } + .next-col-xs-offset-22[dir="rtl"] { + margin-right: 91.66667%; + margin-left: auto; } + .next-col-xs-offset-23[dir="rtl"] { + margin-right: 95.83333%; + margin-left: auto; } + .next-col-xs-offset-24[dir="rtl"] { + margin-right: 100%; + margin-left: auto; } } + +@media (min-width: 720px) { + .next-col-s-offset-1[dir="rtl"] { + margin-right: 4.16667%; + margin-left: auto; } + .next-col-s-offset-2[dir="rtl"] { + margin-right: 8.33333%; + margin-left: auto; } + .next-col-s-offset-3[dir="rtl"] { + margin-right: 12.5%; + margin-left: auto; } + .next-col-s-offset-4[dir="rtl"] { + margin-right: 16.66667%; + margin-left: auto; } + .next-col-s-offset-5[dir="rtl"] { + margin-right: 20.83333%; + margin-left: auto; } + .next-col-s-offset-6[dir="rtl"] { + margin-right: 25%; + margin-left: auto; } + .next-col-s-offset-7[dir="rtl"] { + margin-right: 29.16667%; + margin-left: auto; } + .next-col-s-offset-8[dir="rtl"] { + margin-right: 33.33333%; + margin-left: auto; } + .next-col-s-offset-9[dir="rtl"] { + margin-right: 37.5%; + margin-left: auto; } + .next-col-s-offset-10[dir="rtl"] { + margin-right: 41.66667%; + margin-left: auto; } + .next-col-s-offset-11[dir="rtl"] { + margin-right: 45.83333%; + margin-left: auto; } + .next-col-s-offset-12[dir="rtl"] { + margin-right: 50%; + margin-left: auto; } + .next-col-s-offset-13[dir="rtl"] { + margin-right: 54.16667%; + margin-left: auto; } + .next-col-s-offset-14[dir="rtl"] { + margin-right: 58.33333%; + margin-left: auto; } + .next-col-s-offset-15[dir="rtl"] { + margin-right: 62.5%; + margin-left: auto; } + .next-col-s-offset-16[dir="rtl"] { + margin-right: 66.66667%; + margin-left: auto; } + .next-col-s-offset-17[dir="rtl"] { + margin-right: 70.83333%; + margin-left: auto; } + .next-col-s-offset-18[dir="rtl"] { + margin-right: 75%; + margin-left: auto; } + .next-col-s-offset-19[dir="rtl"] { + margin-right: 79.16667%; + margin-left: auto; } + .next-col-s-offset-20[dir="rtl"] { + margin-right: 83.33333%; + margin-left: auto; } + .next-col-s-offset-21[dir="rtl"] { + margin-right: 87.5%; + margin-left: auto; } + .next-col-s-offset-22[dir="rtl"] { + margin-right: 91.66667%; + margin-left: auto; } + .next-col-s-offset-23[dir="rtl"] { + margin-right: 95.83333%; + margin-left: auto; } + .next-col-s-offset-24[dir="rtl"] { + margin-right: 100%; + margin-left: auto; } } + +@media (min-width: 990px) { + .next-col-m-offset-1[dir="rtl"] { + margin-right: 4.16667%; + margin-left: auto; } + .next-col-m-offset-2[dir="rtl"] { + margin-right: 8.33333%; + margin-left: auto; } + .next-col-m-offset-3[dir="rtl"] { + margin-right: 12.5%; + margin-left: auto; } + .next-col-m-offset-4[dir="rtl"] { + margin-right: 16.66667%; + margin-left: auto; } + .next-col-m-offset-5[dir="rtl"] { + margin-right: 20.83333%; + margin-left: auto; } + .next-col-m-offset-6[dir="rtl"] { + margin-right: 25%; + margin-left: auto; } + .next-col-m-offset-7[dir="rtl"] { + margin-right: 29.16667%; + margin-left: auto; } + .next-col-m-offset-8[dir="rtl"] { + margin-right: 33.33333%; + margin-left: auto; } + .next-col-m-offset-9[dir="rtl"] { + margin-right: 37.5%; + margin-left: auto; } + .next-col-m-offset-10[dir="rtl"] { + margin-right: 41.66667%; + margin-left: auto; } + .next-col-m-offset-11[dir="rtl"] { + margin-right: 45.83333%; + margin-left: auto; } + .next-col-m-offset-12[dir="rtl"] { + margin-right: 50%; + margin-left: auto; } + .next-col-m-offset-13[dir="rtl"] { + margin-right: 54.16667%; + margin-left: auto; } + .next-col-m-offset-14[dir="rtl"] { + margin-right: 58.33333%; + margin-left: auto; } + .next-col-m-offset-15[dir="rtl"] { + margin-right: 62.5%; + margin-left: auto; } + .next-col-m-offset-16[dir="rtl"] { + margin-right: 66.66667%; + margin-left: auto; } + .next-col-m-offset-17[dir="rtl"] { + margin-right: 70.83333%; + margin-left: auto; } + .next-col-m-offset-18[dir="rtl"] { + margin-right: 75%; + margin-left: auto; } + .next-col-m-offset-19[dir="rtl"] { + margin-right: 79.16667%; + margin-left: auto; } + .next-col-m-offset-20[dir="rtl"] { + margin-right: 83.33333%; + margin-left: auto; } + .next-col-m-offset-21[dir="rtl"] { + margin-right: 87.5%; + margin-left: auto; } + .next-col-m-offset-22[dir="rtl"] { + margin-right: 91.66667%; + margin-left: auto; } + .next-col-m-offset-23[dir="rtl"] { + margin-right: 95.83333%; + margin-left: auto; } + .next-col-m-offset-24[dir="rtl"] { + margin-right: 100%; + margin-left: auto; } } + +@media (min-width: 1200px) { + .next-col-l-offset-1[dir="rtl"] { + margin-right: 4.16667%; + margin-left: auto; } + .next-col-l-offset-2[dir="rtl"] { + margin-right: 8.33333%; + margin-left: auto; } + .next-col-l-offset-3[dir="rtl"] { + margin-right: 12.5%; + margin-left: auto; } + .next-col-l-offset-4[dir="rtl"] { + margin-right: 16.66667%; + margin-left: auto; } + .next-col-l-offset-5[dir="rtl"] { + margin-right: 20.83333%; + margin-left: auto; } + .next-col-l-offset-6[dir="rtl"] { + margin-right: 25%; + margin-left: auto; } + .next-col-l-offset-7[dir="rtl"] { + margin-right: 29.16667%; + margin-left: auto; } + .next-col-l-offset-8[dir="rtl"] { + margin-right: 33.33333%; + margin-left: auto; } + .next-col-l-offset-9[dir="rtl"] { + margin-right: 37.5%; + margin-left: auto; } + .next-col-l-offset-10[dir="rtl"] { + margin-right: 41.66667%; + margin-left: auto; } + .next-col-l-offset-11[dir="rtl"] { + margin-right: 45.83333%; + margin-left: auto; } + .next-col-l-offset-12[dir="rtl"] { + margin-right: 50%; + margin-left: auto; } + .next-col-l-offset-13[dir="rtl"] { + margin-right: 54.16667%; + margin-left: auto; } + .next-col-l-offset-14[dir="rtl"] { + margin-right: 58.33333%; + margin-left: auto; } + .next-col-l-offset-15[dir="rtl"] { + margin-right: 62.5%; + margin-left: auto; } + .next-col-l-offset-16[dir="rtl"] { + margin-right: 66.66667%; + margin-left: auto; } + .next-col-l-offset-17[dir="rtl"] { + margin-right: 70.83333%; + margin-left: auto; } + .next-col-l-offset-18[dir="rtl"] { + margin-right: 75%; + margin-left: auto; } + .next-col-l-offset-19[dir="rtl"] { + margin-right: 79.16667%; + margin-left: auto; } + .next-col-l-offset-20[dir="rtl"] { + margin-right: 83.33333%; + margin-left: auto; } + .next-col-l-offset-21[dir="rtl"] { + margin-right: 87.5%; + margin-left: auto; } + .next-col-l-offset-22[dir="rtl"] { + margin-right: 91.66667%; + margin-left: auto; } + .next-col-l-offset-23[dir="rtl"] { + margin-right: 95.83333%; + margin-left: auto; } + .next-col-l-offset-24[dir="rtl"] { + margin-right: 100%; + margin-left: auto; } } + +@media (min-width: 1500px) { + .next-col-xl-offset-1[dir="rtl"] { + margin-right: 4.16667%; + margin-left: auto; } + .next-col-xl-offset-2[dir="rtl"] { + margin-right: 8.33333%; + margin-left: auto; } + .next-col-xl-offset-3[dir="rtl"] { + margin-right: 12.5%; + margin-left: auto; } + .next-col-xl-offset-4[dir="rtl"] { + margin-right: 16.66667%; + margin-left: auto; } + .next-col-xl-offset-5[dir="rtl"] { + margin-right: 20.83333%; + margin-left: auto; } + .next-col-xl-offset-6[dir="rtl"] { + margin-right: 25%; + margin-left: auto; } + .next-col-xl-offset-7[dir="rtl"] { + margin-right: 29.16667%; + margin-left: auto; } + .next-col-xl-offset-8[dir="rtl"] { + margin-right: 33.33333%; + margin-left: auto; } + .next-col-xl-offset-9[dir="rtl"] { + margin-right: 37.5%; + margin-left: auto; } + .next-col-xl-offset-10[dir="rtl"] { + margin-right: 41.66667%; + margin-left: auto; } + .next-col-xl-offset-11[dir="rtl"] { + margin-right: 45.83333%; + margin-left: auto; } + .next-col-xl-offset-12[dir="rtl"] { + margin-right: 50%; + margin-left: auto; } + .next-col-xl-offset-13[dir="rtl"] { + margin-right: 54.16667%; + margin-left: auto; } + .next-col-xl-offset-14[dir="rtl"] { + margin-right: 58.33333%; + margin-left: auto; } + .next-col-xl-offset-15[dir="rtl"] { + margin-right: 62.5%; + margin-left: auto; } + .next-col-xl-offset-16[dir="rtl"] { + margin-right: 66.66667%; + margin-left: auto; } + .next-col-xl-offset-17[dir="rtl"] { + margin-right: 70.83333%; + margin-left: auto; } + .next-col-xl-offset-18[dir="rtl"] { + margin-right: 75%; + margin-left: auto; } + .next-col-xl-offset-19[dir="rtl"] { + margin-right: 79.16667%; + margin-left: auto; } + .next-col-xl-offset-20[dir="rtl"] { + margin-right: 83.33333%; + margin-left: auto; } + .next-col-xl-offset-21[dir="rtl"] { + margin-right: 87.5%; + margin-left: auto; } + .next-col-xl-offset-22[dir="rtl"] { + margin-right: 91.66667%; + margin-left: auto; } + .next-col-xl-offset-23[dir="rtl"] { + margin-right: 95.83333%; + margin-left: auto; } + .next-col-xl-offset-24[dir="rtl"] { + margin-right: 100%; + margin-left: auto; } } + +.next-col-offset-fixed-1[dir="rtl"] { + margin-right: 20px; + margin-left: auto; } + +.next-col-offset-fixed-2[dir="rtl"] { + margin-right: 40px; + margin-left: auto; } + +.next-col-offset-fixed-3[dir="rtl"] { + margin-right: 60px; + margin-left: auto; } + +.next-col-offset-fixed-4[dir="rtl"] { + margin-right: 80px; + margin-left: auto; } + +.next-col-offset-fixed-5[dir="rtl"] { + margin-right: 100px; + margin-left: auto; } + +.next-col-offset-fixed-6[dir="rtl"] { + margin-right: 120px; + margin-left: auto; } + +.next-col-offset-fixed-7[dir="rtl"] { + margin-right: 140px; + margin-left: auto; } + +.next-col-offset-fixed-8[dir="rtl"] { + margin-right: 160px; + margin-left: auto; } + +.next-col-offset-fixed-9[dir="rtl"] { + margin-right: 180px; + margin-left: auto; } + +.next-col-offset-fixed-10[dir="rtl"] { + margin-right: 200px; + margin-left: auto; } + +.next-col-offset-fixed-11[dir="rtl"] { + margin-right: 220px; + margin-left: auto; } + +.next-col-offset-fixed-12[dir="rtl"] { + margin-right: 240px; + margin-left: auto; } + +.next-col-offset-fixed-13[dir="rtl"] { + margin-right: 260px; + margin-left: auto; } + +.next-col-offset-fixed-14[dir="rtl"] { + margin-right: 280px; + margin-left: auto; } + +.next-col-offset-fixed-15[dir="rtl"] { + margin-right: 300px; + margin-left: auto; } + +.next-col-offset-fixed-16[dir="rtl"] { + margin-right: 320px; + margin-left: auto; } + +.next-col-offset-fixed-17[dir="rtl"] { + margin-right: 340px; + margin-left: auto; } + +.next-col-offset-fixed-18[dir="rtl"] { + margin-right: 360px; + margin-left: auto; } + +.next-col-offset-fixed-19[dir="rtl"] { + margin-right: 380px; + margin-left: auto; } + +.next-col-offset-fixed-20[dir="rtl"] { + margin-right: 400px; + margin-left: auto; } + +.next-col-offset-fixed-21[dir="rtl"] { + margin-right: 420px; + margin-left: auto; } + +.next-col-offset-fixed-22[dir="rtl"] { + margin-right: 440px; + margin-left: auto; } + +.next-col-offset-fixed-23[dir="rtl"] { + margin-right: 460px; + margin-left: auto; } + +.next-col-offset-fixed-24[dir="rtl"] { + margin-right: 480px; + margin-left: auto; } + +.next-col-offset-fixed-25[dir="rtl"] { + margin-right: 500px; + margin-left: auto; } + +.next-col-offset-fixed-26[dir="rtl"] { + margin-right: 520px; + margin-left: auto; } + +.next-col-offset-fixed-27[dir="rtl"] { + margin-right: 540px; + margin-left: auto; } + +.next-col-offset-fixed-28[dir="rtl"] { + margin-right: 560px; + margin-left: auto; } + +.next-col-offset-fixed-29[dir="rtl"] { + margin-right: 580px; + margin-left: auto; } + +.next-col-offset-fixed-30[dir="rtl"] { + margin-right: 600px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-1[dir="rtl"] { + margin-right: 20px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-2[dir="rtl"] { + margin-right: 40px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-3[dir="rtl"] { + margin-right: 60px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-4[dir="rtl"] { + margin-right: 80px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-5[dir="rtl"] { + margin-right: 100px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-6[dir="rtl"] { + margin-right: 120px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-7[dir="rtl"] { + margin-right: 140px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-8[dir="rtl"] { + margin-right: 160px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-9[dir="rtl"] { + margin-right: 180px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-10[dir="rtl"] { + margin-right: 200px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-11[dir="rtl"] { + margin-right: 220px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-12[dir="rtl"] { + margin-right: 240px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-13[dir="rtl"] { + margin-right: 260px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-14[dir="rtl"] { + margin-right: 280px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-15[dir="rtl"] { + margin-right: 300px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-16[dir="rtl"] { + margin-right: 320px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-17[dir="rtl"] { + margin-right: 340px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-18[dir="rtl"] { + margin-right: 360px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-19[dir="rtl"] { + margin-right: 380px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-20[dir="rtl"] { + margin-right: 400px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-21[dir="rtl"] { + margin-right: 420px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-22[dir="rtl"] { + margin-right: 440px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-23[dir="rtl"] { + margin-right: 460px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-24[dir="rtl"] { + margin-right: 480px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-25[dir="rtl"] { + margin-right: 500px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-26[dir="rtl"] { + margin-right: 520px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-27[dir="rtl"] { + margin-right: 540px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-28[dir="rtl"] { + margin-right: 560px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-29[dir="rtl"] { + margin-right: 580px; + margin-left: auto; } + +.next-col-offset-fixed-xxs-30[dir="rtl"] { + margin-right: 600px; + margin-left: auto; } + +.next-col-offset-fixed-xs-1[dir="rtl"] { + margin-right: 20px; + margin-left: auto; } + +.next-col-offset-fixed-xs-2[dir="rtl"] { + margin-right: 40px; + margin-left: auto; } + +.next-col-offset-fixed-xs-3[dir="rtl"] { + margin-right: 60px; + margin-left: auto; } + +.next-col-offset-fixed-xs-4[dir="rtl"] { + margin-right: 80px; + margin-left: auto; } + +.next-col-offset-fixed-xs-5[dir="rtl"] { + margin-right: 100px; + margin-left: auto; } + +.next-col-offset-fixed-xs-6[dir="rtl"] { + margin-right: 120px; + margin-left: auto; } + +.next-col-offset-fixed-xs-7[dir="rtl"] { + margin-right: 140px; + margin-left: auto; } + +.next-col-offset-fixed-xs-8[dir="rtl"] { + margin-right: 160px; + margin-left: auto; } + +.next-col-offset-fixed-xs-9[dir="rtl"] { + margin-right: 180px; + margin-left: auto; } + +.next-col-offset-fixed-xs-10[dir="rtl"] { + margin-right: 200px; + margin-left: auto; } + +.next-col-offset-fixed-xs-11[dir="rtl"] { + margin-right: 220px; + margin-left: auto; } + +.next-col-offset-fixed-xs-12[dir="rtl"] { + margin-right: 240px; + margin-left: auto; } + +.next-col-offset-fixed-xs-13[dir="rtl"] { + margin-right: 260px; + margin-left: auto; } + +.next-col-offset-fixed-xs-14[dir="rtl"] { + margin-right: 280px; + margin-left: auto; } + +.next-col-offset-fixed-xs-15[dir="rtl"] { + margin-right: 300px; + margin-left: auto; } + +.next-col-offset-fixed-xs-16[dir="rtl"] { + margin-right: 320px; + margin-left: auto; } + +.next-col-offset-fixed-xs-17[dir="rtl"] { + margin-right: 340px; + margin-left: auto; } + +.next-col-offset-fixed-xs-18[dir="rtl"] { + margin-right: 360px; + margin-left: auto; } + +.next-col-offset-fixed-xs-19[dir="rtl"] { + margin-right: 380px; + margin-left: auto; } + +.next-col-offset-fixed-xs-20[dir="rtl"] { + margin-right: 400px; + margin-left: auto; } + +.next-col-offset-fixed-xs-21[dir="rtl"] { + margin-right: 420px; + margin-left: auto; } + +.next-col-offset-fixed-xs-22[dir="rtl"] { + margin-right: 440px; + margin-left: auto; } + +.next-col-offset-fixed-xs-23[dir="rtl"] { + margin-right: 460px; + margin-left: auto; } + +.next-col-offset-fixed-xs-24[dir="rtl"] { + margin-right: 480px; + margin-left: auto; } + +.next-col-offset-fixed-xs-25[dir="rtl"] { + margin-right: 500px; + margin-left: auto; } + +.next-col-offset-fixed-xs-26[dir="rtl"] { + margin-right: 520px; + margin-left: auto; } + +.next-col-offset-fixed-xs-27[dir="rtl"] { + margin-right: 540px; + margin-left: auto; } + +.next-col-offset-fixed-xs-28[dir="rtl"] { + margin-right: 560px; + margin-left: auto; } + +.next-col-offset-fixed-xs-29[dir="rtl"] { + margin-right: 580px; + margin-left: auto; } + +.next-col-offset-fixed-xs-30[dir="rtl"] { + margin-right: 600px; + margin-left: auto; } + +.next-col-offset-fixed-s-1[dir="rtl"] { + margin-right: 20px; + margin-left: auto; } + +.next-col-offset-fixed-s-2[dir="rtl"] { + margin-right: 40px; + margin-left: auto; } + +.next-col-offset-fixed-s-3[dir="rtl"] { + margin-right: 60px; + margin-left: auto; } + +.next-col-offset-fixed-s-4[dir="rtl"] { + margin-right: 80px; + margin-left: auto; } + +.next-col-offset-fixed-s-5[dir="rtl"] { + margin-right: 100px; + margin-left: auto; } + +.next-col-offset-fixed-s-6[dir="rtl"] { + margin-right: 120px; + margin-left: auto; } + +.next-col-offset-fixed-s-7[dir="rtl"] { + margin-right: 140px; + margin-left: auto; } + +.next-col-offset-fixed-s-8[dir="rtl"] { + margin-right: 160px; + margin-left: auto; } + +.next-col-offset-fixed-s-9[dir="rtl"] { + margin-right: 180px; + margin-left: auto; } + +.next-col-offset-fixed-s-10[dir="rtl"] { + margin-right: 200px; + margin-left: auto; } + +.next-col-offset-fixed-s-11[dir="rtl"] { + margin-right: 220px; + margin-left: auto; } + +.next-col-offset-fixed-s-12[dir="rtl"] { + margin-right: 240px; + margin-left: auto; } + +.next-col-offset-fixed-s-13[dir="rtl"] { + margin-right: 260px; + margin-left: auto; } + +.next-col-offset-fixed-s-14[dir="rtl"] { + margin-right: 280px; + margin-left: auto; } + +.next-col-offset-fixed-s-15[dir="rtl"] { + margin-right: 300px; + margin-left: auto; } + +.next-col-offset-fixed-s-16[dir="rtl"] { + margin-right: 320px; + margin-left: auto; } + +.next-col-offset-fixed-s-17[dir="rtl"] { + margin-right: 340px; + margin-left: auto; } + +.next-col-offset-fixed-s-18[dir="rtl"] { + margin-right: 360px; + margin-left: auto; } + +.next-col-offset-fixed-s-19[dir="rtl"] { + margin-right: 380px; + margin-left: auto; } + +.next-col-offset-fixed-s-20[dir="rtl"] { + margin-right: 400px; + margin-left: auto; } + +.next-col-offset-fixed-s-21[dir="rtl"] { + margin-right: 420px; + margin-left: auto; } + +.next-col-offset-fixed-s-22[dir="rtl"] { + margin-right: 440px; + margin-left: auto; } + +.next-col-offset-fixed-s-23[dir="rtl"] { + margin-right: 460px; + margin-left: auto; } + +.next-col-offset-fixed-s-24[dir="rtl"] { + margin-right: 480px; + margin-left: auto; } + +.next-col-offset-fixed-s-25[dir="rtl"] { + margin-right: 500px; + margin-left: auto; } + +.next-col-offset-fixed-s-26[dir="rtl"] { + margin-right: 520px; + margin-left: auto; } + +.next-col-offset-fixed-s-27[dir="rtl"] { + margin-right: 540px; + margin-left: auto; } + +.next-col-offset-fixed-s-28[dir="rtl"] { + margin-right: 560px; + margin-left: auto; } + +.next-col-offset-fixed-s-29[dir="rtl"] { + margin-right: 580px; + margin-left: auto; } + +.next-col-offset-fixed-s-30[dir="rtl"] { + margin-right: 600px; + margin-left: auto; } + +.next-col-offset-fixed-m-1[dir="rtl"] { + margin-right: 20px; + margin-left: auto; } + +.next-col-offset-fixed-m-2[dir="rtl"] { + margin-right: 40px; + margin-left: auto; } + +.next-col-offset-fixed-m-3[dir="rtl"] { + margin-right: 60px; + margin-left: auto; } + +.next-col-offset-fixed-m-4[dir="rtl"] { + margin-right: 80px; + margin-left: auto; } + +.next-col-offset-fixed-m-5[dir="rtl"] { + margin-right: 100px; + margin-left: auto; } + +.next-col-offset-fixed-m-6[dir="rtl"] { + margin-right: 120px; + margin-left: auto; } + +.next-col-offset-fixed-m-7[dir="rtl"] { + margin-right: 140px; + margin-left: auto; } + +.next-col-offset-fixed-m-8[dir="rtl"] { + margin-right: 160px; + margin-left: auto; } + +.next-col-offset-fixed-m-9[dir="rtl"] { + margin-right: 180px; + margin-left: auto; } + +.next-col-offset-fixed-m-10[dir="rtl"] { + margin-right: 200px; + margin-left: auto; } + +.next-col-offset-fixed-m-11[dir="rtl"] { + margin-right: 220px; + margin-left: auto; } + +.next-col-offset-fixed-m-12[dir="rtl"] { + margin-right: 240px; + margin-left: auto; } + +.next-col-offset-fixed-m-13[dir="rtl"] { + margin-right: 260px; + margin-left: auto; } + +.next-col-offset-fixed-m-14[dir="rtl"] { + margin-right: 280px; + margin-left: auto; } + +.next-col-offset-fixed-m-15[dir="rtl"] { + margin-right: 300px; + margin-left: auto; } + +.next-col-offset-fixed-m-16[dir="rtl"] { + margin-right: 320px; + margin-left: auto; } + +.next-col-offset-fixed-m-17[dir="rtl"] { + margin-right: 340px; + margin-left: auto; } + +.next-col-offset-fixed-m-18[dir="rtl"] { + margin-right: 360px; + margin-left: auto; } + +.next-col-offset-fixed-m-19[dir="rtl"] { + margin-right: 380px; + margin-left: auto; } + +.next-col-offset-fixed-m-20[dir="rtl"] { + margin-right: 400px; + margin-left: auto; } + +.next-col-offset-fixed-m-21[dir="rtl"] { + margin-right: 420px; + margin-left: auto; } + +.next-col-offset-fixed-m-22[dir="rtl"] { + margin-right: 440px; + margin-left: auto; } + +.next-col-offset-fixed-m-23[dir="rtl"] { + margin-right: 460px; + margin-left: auto; } + +.next-col-offset-fixed-m-24[dir="rtl"] { + margin-right: 480px; + margin-left: auto; } + +.next-col-offset-fixed-m-25[dir="rtl"] { + margin-right: 500px; + margin-left: auto; } + +.next-col-offset-fixed-m-26[dir="rtl"] { + margin-right: 520px; + margin-left: auto; } + +.next-col-offset-fixed-m-27[dir="rtl"] { + margin-right: 540px; + margin-left: auto; } + +.next-col-offset-fixed-m-28[dir="rtl"] { + margin-right: 560px; + margin-left: auto; } + +.next-col-offset-fixed-m-29[dir="rtl"] { + margin-right: 580px; + margin-left: auto; } + +.next-col-offset-fixed-m-30[dir="rtl"] { + margin-right: 600px; + margin-left: auto; } + +.next-col-offset-fixed-l-1[dir="rtl"] { + margin-right: 20px; + margin-left: auto; } + +.next-col-offset-fixed-l-2[dir="rtl"] { + margin-right: 40px; + margin-left: auto; } + +.next-col-offset-fixed-l-3[dir="rtl"] { + margin-right: 60px; + margin-left: auto; } + +.next-col-offset-fixed-l-4[dir="rtl"] { + margin-right: 80px; + margin-left: auto; } + +.next-col-offset-fixed-l-5[dir="rtl"] { + margin-right: 100px; + margin-left: auto; } + +.next-col-offset-fixed-l-6[dir="rtl"] { + margin-right: 120px; + margin-left: auto; } + +.next-col-offset-fixed-l-7[dir="rtl"] { + margin-right: 140px; + margin-left: auto; } + +.next-col-offset-fixed-l-8[dir="rtl"] { + margin-right: 160px; + margin-left: auto; } + +.next-col-offset-fixed-l-9[dir="rtl"] { + margin-right: 180px; + margin-left: auto; } + +.next-col-offset-fixed-l-10[dir="rtl"] { + margin-right: 200px; + margin-left: auto; } + +.next-col-offset-fixed-l-11[dir="rtl"] { + margin-right: 220px; + margin-left: auto; } + +.next-col-offset-fixed-l-12[dir="rtl"] { + margin-right: 240px; + margin-left: auto; } + +.next-col-offset-fixed-l-13[dir="rtl"] { + margin-right: 260px; + margin-left: auto; } + +.next-col-offset-fixed-l-14[dir="rtl"] { + margin-right: 280px; + margin-left: auto; } + +.next-col-offset-fixed-l-15[dir="rtl"] { + margin-right: 300px; + margin-left: auto; } + +.next-col-offset-fixed-l-16[dir="rtl"] { + margin-right: 320px; + margin-left: auto; } + +.next-col-offset-fixed-l-17[dir="rtl"] { + margin-right: 340px; + margin-left: auto; } + +.next-col-offset-fixed-l-18[dir="rtl"] { + margin-right: 360px; + margin-left: auto; } + +.next-col-offset-fixed-l-19[dir="rtl"] { + margin-right: 380px; + margin-left: auto; } + +.next-col-offset-fixed-l-20[dir="rtl"] { + margin-right: 400px; + margin-left: auto; } + +.next-col-offset-fixed-l-21[dir="rtl"] { + margin-right: 420px; + margin-left: auto; } + +.next-col-offset-fixed-l-22[dir="rtl"] { + margin-right: 440px; + margin-left: auto; } + +.next-col-offset-fixed-l-23[dir="rtl"] { + margin-right: 460px; + margin-left: auto; } + +.next-col-offset-fixed-l-24[dir="rtl"] { + margin-right: 480px; + margin-left: auto; } + +.next-col-offset-fixed-l-25[dir="rtl"] { + margin-right: 500px; + margin-left: auto; } + +.next-col-offset-fixed-l-26[dir="rtl"] { + margin-right: 520px; + margin-left: auto; } + +.next-col-offset-fixed-l-27[dir="rtl"] { + margin-right: 540px; + margin-left: auto; } + +.next-col-offset-fixed-l-28[dir="rtl"] { + margin-right: 560px; + margin-left: auto; } + +.next-col-offset-fixed-l-29[dir="rtl"] { + margin-right: 580px; + margin-left: auto; } + +.next-col-offset-fixed-l-30[dir="rtl"] { + margin-right: 600px; + margin-left: auto; } + +.next-col-offset-fixed-xl-1[dir="rtl"] { + margin-right: 20px; + margin-left: auto; } + +.next-col-offset-fixed-xl-2[dir="rtl"] { + margin-right: 40px; + margin-left: auto; } + +.next-col-offset-fixed-xl-3[dir="rtl"] { + margin-right: 60px; + margin-left: auto; } + +.next-col-offset-fixed-xl-4[dir="rtl"] { + margin-right: 80px; + margin-left: auto; } + +.next-col-offset-fixed-xl-5[dir="rtl"] { + margin-right: 100px; + margin-left: auto; } + +.next-col-offset-fixed-xl-6[dir="rtl"] { + margin-right: 120px; + margin-left: auto; } + +.next-col-offset-fixed-xl-7[dir="rtl"] { + margin-right: 140px; + margin-left: auto; } + +.next-col-offset-fixed-xl-8[dir="rtl"] { + margin-right: 160px; + margin-left: auto; } + +.next-col-offset-fixed-xl-9[dir="rtl"] { + margin-right: 180px; + margin-left: auto; } + +.next-col-offset-fixed-xl-10[dir="rtl"] { + margin-right: 200px; + margin-left: auto; } + +.next-col-offset-fixed-xl-11[dir="rtl"] { + margin-right: 220px; + margin-left: auto; } + +.next-col-offset-fixed-xl-12[dir="rtl"] { + margin-right: 240px; + margin-left: auto; } + +.next-col-offset-fixed-xl-13[dir="rtl"] { + margin-right: 260px; + margin-left: auto; } + +.next-col-offset-fixed-xl-14[dir="rtl"] { + margin-right: 280px; + margin-left: auto; } + +.next-col-offset-fixed-xl-15[dir="rtl"] { + margin-right: 300px; + margin-left: auto; } + +.next-col-offset-fixed-xl-16[dir="rtl"] { + margin-right: 320px; + margin-left: auto; } + +.next-col-offset-fixed-xl-17[dir="rtl"] { + margin-right: 340px; + margin-left: auto; } + +.next-col-offset-fixed-xl-18[dir="rtl"] { + margin-right: 360px; + margin-left: auto; } + +.next-col-offset-fixed-xl-19[dir="rtl"] { + margin-right: 380px; + margin-left: auto; } + +.next-col-offset-fixed-xl-20[dir="rtl"] { + margin-right: 400px; + margin-left: auto; } + +.next-col-offset-fixed-xl-21[dir="rtl"] { + margin-right: 420px; + margin-left: auto; } + +.next-col-offset-fixed-xl-22[dir="rtl"] { + margin-right: 440px; + margin-left: auto; } + +.next-col-offset-fixed-xl-23[dir="rtl"] { + margin-right: 460px; + margin-left: auto; } + +.next-col-offset-fixed-xl-24[dir="rtl"] { + margin-right: 480px; + margin-left: auto; } + +.next-col-offset-fixed-xl-25[dir="rtl"] { + margin-right: 500px; + margin-left: auto; } + +.next-col-offset-fixed-xl-26[dir="rtl"] { + margin-right: 520px; + margin-left: auto; } + +.next-col-offset-fixed-xl-27[dir="rtl"] { + margin-right: 540px; + margin-left: auto; } + +.next-col-offset-fixed-xl-28[dir="rtl"] { + margin-right: 560px; + margin-left: auto; } + +.next-col-offset-fixed-xl-29[dir="rtl"] { + margin-right: 580px; + margin-left: auto; } + +.next-col-offset-fixed-xl-30[dir="rtl"] { + margin-right: 600px; + margin-left: auto; } + +.next-form { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-form *, + .next-form *:before, + .next-form *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-form-item { + /* medium */ + margin-bottom: 16px; } + .next-form-item.has-error .next-form-item-help { + color: #FF3000; } + .next-form-item .next-form-item-label, .next-form-item .next-form-text-align, .next-form-item p { + line-height: 28px; } + .next-form-item .next-form-text-align, .next-form-item p { + margin: 0; } + .next-form-item .next-checkbox-wrapper, .next-form-item .next-checkbox-group, .next-form-item .next-radio-wrapper, .next-form-item .next-radio-group { + line-height: 24px; } + .next-form-item .next-form-item-label { + font-size: 12px; } + .next-form-item.next-large { + margin-bottom: 20px; } + .next-form-item.next-large .next-form-item-label, .next-form-item.next-large .next-form-text-align, .next-form-item.next-large p { + line-height: 40px; } + .next-form-item.next-large .next-checkbox-wrapper, .next-form-item.next-large .next-checkbox-group, .next-form-item.next-large .next-radio-wrapper, .next-form-item.next-large .next-radio-group { + line-height: 39px; } + .next-form-item.next-large .next-switch { + margin-top: 7px; } + .next-form-item.next-large .next-form-item-label { + font-size: 16px; } + .next-form-item.next-small { + margin-bottom: 12px; } + .next-form-item.next-small .next-form-item-label, .next-form-item.next-small .next-form-text-align, .next-form-item.next-small p { + line-height: 20px; } + .next-form-item.next-small .next-checkbox-wrapper, .next-form-item.next-small .next-checkbox-group, .next-form-item.next-small .next-radio-wrapper, .next-form-item.next-small .next-radio-group { + line-height: 20px; } + .next-form-item.next-small .next-form-item-label { + font-size: 12px; } + .next-form-item.next-top > .next-form-item-label { + margin-bottom: 2px; } + .next-form-item.next-inset .next-form-item-label { + padding-right: 0; + padding-left: 0; + line-height: inherit; } + .next-form-item-control .next-form-text-align { + margin: 0; } + .next-form-item-control > .next-input-group, .next-form-item-control > .next-input { + width: 100%; } + .next-form-item-label { + display: inline-block; + vertical-align: top; + color: #666666; + text-align: right; + padding-right: 12px; } + .next-form-item-label label[required]:before { + margin-right: 4px; + content: "*"; + color: #FF3000; } + .next-form-item-label.next-left { + text-align: left; } + .next-form-item-label.next-left > label[required]::before { + display: none; } + .next-form-item-label.next-left > label[required]::after { + margin-left: 4px; + content: "*"; + color: #FF3000; } + .next-form-item-help { + margin-top: 4px; + font-size: 12px; + line-height: 1.5; + color: #999999; } + .next-form.next-inline .next-form-item { + display: inline-block; + vertical-align: top; + /* label on left */ } + .next-form.next-inline .next-form-item.next-left .next-form-item-control { + display: inline-block; + vertical-align: top; + line-height: 0; } + .next-form.next-inline .next-form-item:not(:last-child) { + margin-right: 20px; } + .next-form.next-inline .next-form-item.next-large:not(:last-child) { + margin-right: 24px; } + .next-form.next-inline .next-form-item.next-small:not(:last-child) { + margin-right: 16px; } + +@media screen and (min-width: 0\0) and (min-resolution: 0.001dpcm) { + .next-form-item.next-left > .next-form-item-label { + display: table-cell; } + .next-form.next-inline .next-form-item.next-left .next-form-item-control { + display: table-cell; } } + +.next-form[dir="rtl"] .next-form-item-label { + text-align: left; + padding-left: 12px; + padding-right: 0; } + +.next-form[dir="rtl"].next-inline .next-form-item:not(:last-child) { + margin-left: 20px; + margin-right: 0; } + +.next-form[dir="rtl"].next-inline .next-form-item.next-large:not(:last-child) { + margin-left: 24px; + margin-right: 0; } + +.next-form[dir="rtl"].next-inline .next-form-item.next-small:not(:last-child) { + margin-left: 16px; + margin-right: 0; } + +.next-loading-fusion-reactor[dir=rtl] { + -webkit-animation-name: nextVectorRouteRTL; + animation-name: nextVectorRouteRTL; } + +@-webkit-keyframes nextVectorRouteRTL { + 0% { + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } + 5% { + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); } + 25% { + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); } + 30% { + -webkit-transform: rotate(-180deg); + -ms-transform: rotate(-180deg); + transform: rotate(-180deg); } + 50% { + -webkit-transform: rotate(-180deg); + -ms-transform: rotate(-180deg); + transform: rotate(-180deg); } + 55% { + -webkit-transform: rotate(-270deg); + -ms-transform: rotate(-270deg); + transform: rotate(-270deg); } + 75% { + -webkit-transform: rotate(-270deg); + -ms-transform: rotate(-270deg); + transform: rotate(-270deg); } + 80% { + -webkit-transform: rotate(-360deg); + -ms-transform: rotate(-360deg); + transform: rotate(-360deg); } + 100% { + -webkit-transform: rotate(-360deg); + -ms-transform: rotate(-360deg); + transform: rotate(-360deg); } } + +@keyframes nextVectorRouteRTL { + 0% { + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } + 5% { + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); } + 25% { + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); } + 30% { + -webkit-transform: rotate(-180deg); + -ms-transform: rotate(-180deg); + transform: rotate(-180deg); } + 50% { + -webkit-transform: rotate(-180deg); + -ms-transform: rotate(-180deg); + transform: rotate(-180deg); } + 55% { + -webkit-transform: rotate(-270deg); + -ms-transform: rotate(-270deg); + transform: rotate(-270deg); } + 75% { + -webkit-transform: rotate(-270deg); + -ms-transform: rotate(-270deg); + transform: rotate(-270deg); } + 80% { + -webkit-transform: rotate(-360deg); + -ms-transform: rotate(-360deg); + transform: rotate(-360deg); } + 100% { + -webkit-transform: rotate(-360deg); + -ms-transform: rotate(-360deg); + transform: rotate(-360deg); } } + +/* put your code here */ +.next-loading { + position: relative; + /* 遮罩层 */ + /* for IE9,10 */ + /* text on the right side of */ + /* 动效 */ } + .next-loading.next-open { + pointer-events: none; } + .next-loading .next-loading-component { + opacity: .7; + -webkit-filter: blur(1px); + filter: blur(1px); + -webkit-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false)"; + filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false)"; + /* IE6~IE9 */ + position: relative; + pointer-events: none; } + .next-loading-masker { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 99; + opacity: .2; + background: #FFF; } + .next-loading-inline { + display: inline-block; } + .next-loading-tip { + display: block; + position: absolute; + top: 50%; + left: 50%; + z-index: 4; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + text-align: center; } + .next-loading-tip-fullscreen { + top: inherit; + left: inherit; + -webkit-transform: inherit; + -ms-transform: inherit; + transform: inherit; } + .next-loading-tip-placeholder { + display: none; } + .next-loading-right-tip .next-loading-indicator { + display: inline-block; } + .next-loading-right-tip .next-loading-tip-content { + position: absolute; + display: block; + top: 50%; + right: 0; + -webkit-transform: translate(0, -50%); + -ms-transform: translate(0, -50%); + transform: translate(0, -50%); } + .next-loading-right-tip .next-loading-tip-placeholder { + display: inline-block; + visibility: hidden; + margin-left: 1em; } + .next-loading-fusion-reactor { + display: inline-block; + width: 48px; + height: 48px; + position: relative; + margin: 0; + -webkit-animation-duration: 5.6s; + animation-duration: 5.6s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-timing-function: linear; + animation-timing-function: linear; + -webkit-animation-name: nextVectorRoute; + animation-name: nextVectorRoute; } + .next-loading-fusion-reactor .next-loading-dot { + position: absolute; + margin: auto; + width: 12px; + height: 12px; + border-radius: 50%; + background: #5584FF; + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-duration: 1.4s; + animation-duration: 1.4s; } + .next-loading-fusion-reactor .next-loading-dot:nth-child(1) { + top: 0; + bottom: 0; + left: 0; + -webkit-animation-name: nextVectorDotsX; + animation-name: nextVectorDotsX; } + .next-loading-fusion-reactor .next-loading-dot:nth-child(2) { + left: 0; + right: 0; + top: 0; + opacity: .8; + -webkit-animation-name: nextVectorDotsY; + animation-name: nextVectorDotsY; } + .next-loading-fusion-reactor .next-loading-dot:nth-child(3) { + top: 0; + bottom: 0; + right: 0; + opacity: .6; + -webkit-animation-name: nextVectorDotsXR; + animation-name: nextVectorDotsXR; } + .next-loading-fusion-reactor .next-loading-dot:nth-child(4) { + left: 0; + right: 0; + bottom: 0; + opacity: .2; + -webkit-animation-name: nextVectorDotsYR; + animation-name: nextVectorDotsYR; } + .next-loading-medium-fusion-reactor { + width: 32px; + height: 32px; } + .next-loading-medium-fusion-reactor .next-loading-dot { + width: 8px; + height: 8px; } + .next-loading-medium-fusion-reactor .next-loading-dot:nth-child(1) { + -webkit-animation-name: nextVectorDotsX-medium; + animation-name: nextVectorDotsX-medium; } + .next-loading-medium-fusion-reactor .next-loading-dot:nth-child(2) { + -webkit-animation-name: nextVectorDotsY-medium; + animation-name: nextVectorDotsY-medium; } + .next-loading-medium-fusion-reactor .next-loading-dot:nth-child(3) { + -webkit-animation-name: nextVectorDotsXR-medium; + animation-name: nextVectorDotsXR-medium; } + .next-loading-medium-fusion-reactor .next-loading-dot:nth-child(4) { + -webkit-animation-name: nextVectorDotsYR-medium; + animation-name: nextVectorDotsYR-medium; } + +@-webkit-keyframes nextVectorRoute { + 0% { + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } + 5% { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); } + 25% { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); } + 30% { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + 50% { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + 55% { + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); } + 75% { + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); } + 80% { + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); } + 100% { + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); } } + +@keyframes nextVectorRoute { + 0% { + -webkit-transform: rotate(0deg); + -ms-transform: rotate(0deg); + transform: rotate(0deg); } + 5% { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); } + 25% { + -webkit-transform: rotate(90deg); + -ms-transform: rotate(90deg); + transform: rotate(90deg); } + 30% { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + 50% { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + 55% { + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); } + 75% { + -webkit-transform: rotate(270deg); + -ms-transform: rotate(270deg); + transform: rotate(270deg); } + 80% { + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); } + 100% { + -webkit-transform: rotate(360deg); + -ms-transform: rotate(360deg); + transform: rotate(360deg); } } + +/* 20% 的时间在旋转 */ +@-webkit-keyframes nextVectorDotsYR { + 25% { + bottom: 0; } + 45%, + 50% { + bottom: 16.8px; + height: 14.4px; + width: 14.4px; } + 90% { + bottom: 0; + height: 12px; + width: 12px; } } + +@keyframes nextVectorDotsYR { + 25% { + bottom: 0; } + 45%, + 50% { + bottom: 16.8px; + height: 14.4px; + width: 14.4px; } + 90% { + bottom: 0; + height: 12px; + width: 12px; } } + +@-webkit-keyframes nextVectorDotsY { + 25% { + top: 0; } + 45%, + 50% { + top: 16.8px; + height: 14.4px; + width: 14.4px; } + 90% { + top: 0; + height: 12px; + width: 12px; } } + +@keyframes nextVectorDotsY { + 25% { + top: 0; } + 45%, + 50% { + top: 16.8px; + height: 14.4px; + width: 14.4px; } + 90% { + top: 0; + height: 12px; + width: 12px; } } + +@-webkit-keyframes nextVectorDotsX { + 25% { + left: 0; } + 45%, + 50% { + left: 16.8px; + width: 14.4px; + height: 14.4px; } + 90% { + left: 0; + height: 12px; + width: 12px; } } + +@keyframes nextVectorDotsX { + 25% { + left: 0; } + 45%, + 50% { + left: 16.8px; + width: 14.4px; + height: 14.4px; } + 90% { + left: 0; + height: 12px; + width: 12px; } } + +@-webkit-keyframes nextVectorDotsXR { + 25% { + right: 0; } + 45%, + 50% { + right: 16.8px; + width: 14.4px; + height: 14.4px; } + 90% { + right: 0; + height: 12px; + width: 12px; } } + +@keyframes nextVectorDotsXR { + 25% { + right: 0; } + 45%, + 50% { + right: 16.8px; + width: 14.4px; + height: 14.4px; } + 90% { + right: 0; + height: 12px; + width: 12px; } } + +@-webkit-keyframes nextVectorDotsYR-medium { + 25% { + bottom: 0; } + 45%, + 50% { + bottom: 11.2px; + height: 9.6px; + width: 9.6px; } + 90% { + bottom: 0; + height: 8px; + width: 8px; } } + +@keyframes nextVectorDotsYR-medium { + 25% { + bottom: 0; } + 45%, + 50% { + bottom: 11.2px; + height: 9.6px; + width: 9.6px; } + 90% { + bottom: 0; + height: 8px; + width: 8px; } } + +@-webkit-keyframes nextVectorDotsY-medium { + 25% { + top: 0; } + 45%, + 50% { + top: 11.2px; + height: 9.6px; + width: 9.6px; } + 90% { + top: 0; + height: 8px; + width: 8px; } } + +@keyframes nextVectorDotsY-medium { + 25% { + top: 0; } + 45%, + 50% { + top: 11.2px; + height: 9.6px; + width: 9.6px; } + 90% { + top: 0; + height: 8px; + width: 8px; } } + +@-webkit-keyframes nextVectorDotsX-medium { + 25% { + left: 0; } + 45%, + 50% { + left: 11.2px; + width: 9.6px; + height: 9.6px; } + 90% { + left: 0; + height: 8px; + width: 8px; } } + +@keyframes nextVectorDotsX-medium { + 25% { + left: 0; } + 45%, + 50% { + left: 11.2px; + width: 9.6px; + height: 9.6px; } + 90% { + left: 0; + height: 8px; + width: 8px; } } + +@-webkit-keyframes nextVectorDotsXR-medium { + 25% { + right: 0; } + 45%, + 50% { + right: 11.2px; + width: 9.6px; + height: 9.6px; } + 90% { + right: 0; + height: 8px; + width: 8px; } } + +@keyframes nextVectorDotsXR-medium { + 25% { + right: 0; } + 45%, + 50% { + right: 11.2px; + width: 9.6px; + height: 9.6px; } + 90% { + right: 0; + height: 8px; + width: 8px; } } + +.next-menu-btn { + display: inline-block; + -webkit-box-shadow: none; + box-shadow: none; } + .next-menu-btn .next-icon { + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } + .next-menu-btn.next-expand .next-menu-btn-arrow { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + .next-menu-btn.next-btn-normal .next-menu-btn-arrow { + color: #999999; } + .next-menu-btn.next-btn-secondary .next-menu-btn-arrow { + color: #5584FF; } + .next-menu-btn.next-btn-primary .next-menu-btn-arrow { + color: #FFFFFF; } + .next-menu-btn.next-btn-text.next-btn-normal .next-menu-btn-arrow { + color: #333333; } + .next-menu-btn.next-btn-text.next-btn-primary .next-menu-btn-arrow { + color: #5584FF; } + .next-menu-btn.next-btn-ghost.next-btn-light .next-menu-btn-arrow { + color: #333333; } + .next-menu-btn.next-btn-ghost.next-btn-dark .next-menu-btn-arrow { + color: #FFFFFF; } + .next-menu-btn.disabled .next-menu-btn-arrow, + .next-menu-btn[disabled] .next-menu-btn-arrow { + color: #CCCCCC; } + .next-menu-btn.next-btn-text.disabled .next-menu-btn-arrow, + .next-menu-btn.next-btn-text[disabled] .next-menu-btn-arrow { + color: #CCCCCC; } + .next-menu-btn[disabled].next-btn-ghost.next-btn-dark .next-menu-btn-arrow { + color: rgba(255, 255, 255, 0.4); } + .next-menu-btn[disabled].next-btn-ghost.next-btn-light .next-menu-btn-arrow { + color: rgba(0, 0, 0, 0.1); } + +.next-nav { + -webkit-box-sizing: border-box; + box-sizing: border-box; + min-width: auto; + padding: 0; + border-radius: 0; } + .next-nav *, + .next-nav *:before, + .next-nav *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-nav-icon.next-icon { + margin-right: 4px; + font-weight: inherit; } + .next-nav-icon.next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-nav-icon-placeholder { + display: inline-block; + width: 16px; + height: 16px; + margin-left: 2px; + margin-right: 2px; } + .next-nav-group-label { + height: 40px; + line-height: 40px; + font-size: 16px; } + .next-nav-item .next-menu-item-text > span, + .next-nav-item .next-nav-group-label > span { + opacity: 1; + -webkit-transition: opacity .3s; + transition: opacity .3s; } + .next-nav-item a { + text-decoration: none; + color: inherit; } + .next-nav-item .next-menu-hoz-icon-arrow.next-icon, + .next-nav-item .next-menu-icon-arrow.next-icon, .next-nav-item:hover .next-menu-hoz-icon-arrow.next-icon, + .next-nav-item:hover .next-menu-icon-arrow.next-icon, .next-nav-item.next-focused .next-menu-hoz-icon-arrow.next-icon, + .next-nav-item.next-focused .next-menu-icon-arrow.next-icon, .next-nav-item.next-selected .next-menu-hoz-icon-arrow.next-icon, + .next-nav-item.next-selected .next-menu-icon-arrow.next-icon, .next-nav-item.next-opened .next-menu-hoz-icon-arrow.next-icon, + .next-nav-item.next-opened .next-menu-icon-arrow.next-icon { + color: inherit; + top: 2px; + -webkit-transform-origin: center 47%; + -ms-transform-origin: center 47%; + transform-origin: center 47%; } + .next-nav.next-active .next-nav-item:before { + position: absolute; + -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); + transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); + content: ''; } + .next-nav.next-hoz { + height: 44px; + line-height: 42px; + font-size: 12px; } + .next-nav.next-hoz .next-menu-item { + margin-left: 0; + margin-right: 0; + padding: 0 20px; + border-radius: 0; } + .next-nav.next-hoz .next-menu-item:before { + height: 2px; } + .next-nav.next-hoz .next-menu-item:not(:first-child), + .next-nav.next-hoz .next-menu-sub-menu-wrapper:not(:first-child) > .next-menu-item { + margin-top: 0; } + .next-nav.next-hoz .next-menu-item:not(:last-child), + .next-nav.next-hoz .next-menu-sub-menu-wrapper:not(:last-child) > .next-menu-item { + margin-bottom: 0; } + .next-nav.next-hoz .next-menu-item-inner { + height: 42px; + font-size: 12px; } + .next-nav.next-hoz .next-nav-group-label .next-menu-item-inner { + height: 40px; + line-height: 40px; + font-size: 16px; } + .next-nav.next-hoz .next-menu-header { + float: left; + height: 42px; } + .next-nav.next-hoz .next-menu-footer { + float: right; + height: 42px; } + .next-nav.next-hoz .next-nav-item:before { + width: 0; + left: 50%; } + .next-nav.next-hoz.next-top .next-nav-item:before { + top: -1px; } + .next-nav.next-hoz.next-bottom .next-nav-item:before { + bottom: -1px; } + .next-nav.next-hoz .next-selected.next-nav-item:before { + width: 100%; + left: 0; } + .next-nav.next-ver { + -webkit-transition: width .3s; + transition: width .3s; + line-height: 40px; + font-size: 12px; } + .next-nav.next-ver .next-menu-item { + margin-left: 0; + margin-right: 0; + padding: 0 20px; + border-radius: 0; } + .next-nav.next-ver .next-menu-item:before { + width: 2px; } + .next-nav.next-ver .next-menu-item:not(:first-child), + .next-nav.next-ver .next-menu-sub-menu-wrapper:not(:first-child) > .next-menu-item { + margin-top: 0; } + .next-nav.next-ver .next-menu-item:not(:last-child), + .next-nav.next-ver .next-menu-sub-menu-wrapper:not(:last-child) > .next-menu-item { + margin-bottom: 0; } + .next-nav.next-ver .next-menu-item-inner { + height: 40px; + font-size: 12px; } + .next-nav.next-ver .next-nav-group-label .next-menu-item-inner { + height: 40px; + line-height: 40px; + font-size: 16px; } + .next-nav.next-ver > .next-menu-item:first-child, + .next-nav.next-ver > .next-menu-sub-menu-wrapper:first-child > .next-menu-item { + margin-top: 0; } + .next-nav.next-ver > .next-menu-item:last-child, + .next-nav.next-ver > .next-menu-sub-menu-wrapper:last-child > .next-menu-item { + margin-bottom: 0; } + .next-nav.next-ver .next-menu-sub-menu .next-menu-item-inner { + height: 40px; + line-height: 40px; + font-size: 12px; } + .next-nav.next-ver .next-nav-item:before { + height: 0; + top: 50%; } + .next-nav.next-ver.next-left .next-nav-item:before { + left: -1px; } + .next-nav.next-ver.next-right .next-nav-item:before { + right: -1px; } + .next-nav.next-ver .next-selected.next-nav-item:before { + height: 100%; + top: 0; } + .next-nav.next-primary { + border-width: 0; + background-color: #333333; + border-color: #333333; + color: #FFFFFF; + font-weight: normal; + -webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); } + .next-nav.next-primary.next-hoz { + line-height: 44px; } + .next-nav.next-primary.next-hoz .next-menu-header { + height: 44px; } + .next-nav.next-primary.next-hoz .next-menu-footer { + height: 44px; } + .next-nav.next-primary.next-hoz .next-menu-item-inner { + height: 44px; } + .next-nav.next-primary.next-hoz.next-top .next-nav-item:before { + top: 0; } + .next-nav.next-primary.next-hoz.next-bottom .next-nav-item:before { + bottom: 0; } + .next-nav.next-primary.next-ver.next-left .next-nav-item:before { + left: 0; } + .next-nav.next-primary.next-ver.next-right .next-nav-item:before { + right: 0; } + .next-nav.next-primary .next-nav-item.next-menu-item { + background-color: #333333; + color: #FFFFFF; } + .next-nav.next-primary .next-nav-item.next-menu-item.next-focused, .next-nav.next-primary .next-nav-item.next-menu-item:hover { + background-color: #000000; + color: #FFFFFF; } + .next-nav.next-primary .next-nav-item.next-menu-item.next-selected { + background-color: #000000; + color: #FFFFFF; + font-weight: bold; } + .next-nav.next-primary .next-nav-item.next-menu-item.next-opened { + background-color: #000000; + color: #FFFFFF; } + .next-nav.next-primary .next-nav-item.next-menu-item:before { + background-color: #5584FF; } + .next-nav.next-primary .next-menu-sub-menu .next-menu-item.next-opened { + background-color: #000000; + color: #FFFFFF; } + .next-nav.next-primary .next-nav-group-label { + color: #999999; + font-weight: normal; } + .next-nav.next-primary .next-menu-sub-menu .next-menu-item { + background-color: #333333; + color: #FFFFFF; + font-weight: normal; } + .next-nav.next-primary .next-menu-sub-menu .next-menu-item.next-focused, .next-nav.next-primary .next-menu-sub-menu .next-menu-item:hover { + background-color: #000000; + color: #FFFFFF; } + .next-nav.next-primary .next-menu-sub-menu .next-menu-item.next-selected { + background-color: #000000; + color: #FFFFFF; } + .next-nav.next-secondary { + border-width: 0; + background-color: #5584FF; + border-color: #5584FF; + color: #FFFFFF; + font-weight: normal; + -webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); } + .next-nav.next-secondary.next-hoz { + line-height: 44px; } + .next-nav.next-secondary.next-hoz .next-menu-header { + height: 44px; } + .next-nav.next-secondary.next-hoz .next-menu-footer { + height: 44px; } + .next-nav.next-secondary.next-hoz .next-menu-item-inner { + height: 44px; } + .next-nav.next-secondary.next-hoz.next-top .next-nav-item:before { + top: 0; } + .next-nav.next-secondary.next-hoz.next-bottom .next-nav-item:before { + bottom: 0; } + .next-nav.next-secondary.next-ver.next-left .next-nav-item:before { + left: 0; } + .next-nav.next-secondary.next-ver.next-right .next-nav-item:before { + right: 0; } + .next-nav.next-secondary .next-nav-item.next-menu-item { + background-color: #5584FF; + color: #FFFFFF; } + .next-nav.next-secondary .next-nav-item.next-menu-item.next-focused, .next-nav.next-secondary .next-nav-item.next-menu-item:hover { + background-color: #3E71F7; + color: #FFFFFF; } + .next-nav.next-secondary .next-nav-item.next-menu-item.next-selected { + background-color: #3E71F7; + color: #FFFFFF; + font-weight: bold; } + .next-nav.next-secondary .next-nav-item.next-menu-item.next-opened { + background-color: #3E71F7; + color: #FFFFFF; } + .next-nav.next-secondary .next-nav-item.next-menu-item:before { + background-color: #3E71F7; } + .next-nav.next-secondary .next-menu-sub-menu .next-menu-item.next-opened { + background-color: #3E71F7; + color: #FFFFFF; } + .next-nav.next-secondary .next-nav-group-label { + color: #FFFFFF; + font-weight: normal; } + .next-nav.next-secondary .next-menu-sub-menu .next-menu-item { + background-color: #5584FF; + color: #FFFFFF; + font-weight: normal; } + .next-nav.next-secondary .next-menu-sub-menu .next-menu-item.next-focused, .next-nav.next-secondary .next-menu-sub-menu .next-menu-item:hover { + background-color: #3E71F7; + color: #FFFFFF; } + .next-nav.next-secondary .next-menu-sub-menu .next-menu-item.next-selected { + background-color: #3E71F7; + color: #FFFFFF; } + .next-nav.next-normal { + background-color: #FFFFFF; + border-color: #DCDEE3; + color: #333333; + font-weight: normal; + -webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); } + .next-nav.next-normal .next-nav-item.next-menu-item { + background-color: #FFFFFF; + color: #333333; } + .next-nav.next-normal .next-nav-item.next-menu-item.next-focused, .next-nav.next-normal .next-nav-item.next-menu-item:hover { + background-color: #FFFFFF; + color: #5584FF; } + .next-nav.next-normal .next-nav-item.next-menu-item.next-selected { + background-color: #F2F3F7; + color: #5584FF; + font-weight: bold; } + .next-nav.next-normal .next-nav-item.next-menu-item.next-opened { + background-color: #F2F3F7; + color: #5584FF; } + .next-nav.next-normal .next-nav-item.next-menu-item:before { + background-color: #5584FF; } + .next-nav.next-normal .next-menu-sub-menu .next-menu-item.next-opened { + background-color: #F2F3F7; + color: #5584FF; } + .next-nav.next-normal .next-nav-group-label { + color: #999999; + font-weight: normal; } + .next-nav.next-normal .next-menu-sub-menu .next-menu-item { + background-color: #FFFFFF; + color: #333333; + font-weight: normal; } + .next-nav.next-normal .next-menu-sub-menu .next-menu-item.next-focused, .next-nav.next-normal .next-menu-sub-menu .next-menu-item:hover { + background-color: #F2F3F7; + color: #5584FF; } + .next-nav.next-normal .next-menu-sub-menu .next-menu-item.next-selected { + background-color: #F2F3F7; + color: #5584FF; } + .next-nav.next-line { + background-color: transparent; + border-color: #DCDEE3; + color: #333333; + font-weight: normal; + -webkit-box-shadow: none; + box-shadow: none; } + .next-nav.next-line.next-hoz { + border-top-color: transparent; + border-left-color: transparent; + border-right-color: transparent; } + .next-nav.next-line.next-ver { + border-top-color: transparent; + border-left-color: transparent; + border-bottom-color: transparent; } + .next-nav.next-line .next-nav-item.next-menu-item { + background-color: transparent; + color: #333333; } + .next-nav.next-line .next-nav-item.next-menu-item.next-focused, .next-nav.next-line .next-nav-item.next-menu-item:hover { + background-color: transparent; + color: #5584FF; } + .next-nav.next-line .next-nav-item.next-menu-item.next-selected { + background-color: transparent; + color: #5584FF; + font-weight: bold; } + .next-nav.next-line .next-nav-item.next-menu-item.next-opened { + background-color: transparent; + color: #5584FF; } + .next-nav.next-line .next-nav-item.next-menu-item:before { + background-color: #5584FF; } + .next-nav.next-line .next-menu-sub-menu .next-menu-item.next-opened { + background-color: transparent; + color: #5584FF; } + .next-nav.next-line .next-nav-group-label { + color: #999999; + font-weight: normal; } + .next-nav.next-line .next-menu-sub-menu .next-menu-item { + background-color: transparent; + color: #333333; + font-weight: normal; } + .next-nav.next-line .next-menu-sub-menu .next-menu-item.next-focused, .next-nav.next-line .next-menu-sub-menu .next-menu-item:hover { + background-color: transparent; + color: #5584FF; } + .next-nav.next-line .next-menu-sub-menu .next-menu-item.next-selected { + background-color: transparent; + color: #5584FF; } + .next-nav.next-icon-only .next-menu-item-inner { + text-overflow: clip; } + .next-nav.next-icon-only .next-menu-item-text > span, + .next-nav.next-icon-only .next-nav-group-label > .next-menu-item-inner > span { + opacity: 0; } + .next-nav.next-icon-only.next-normal .next-nav-icon.next-icon { + margin-left: 1px; + margin-right: 1px; } + .next-nav.next-icon-only.next-normal .next-nav-icon.next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-nav.next-icon-only.next-primary .next-nav-icon.next-icon { + margin-left: 2px; + margin-right: 2px; } + .next-nav.next-icon-only.next-primary .next-nav-icon.next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-nav.next-icon-only.next-secondary .next-nav-icon.next-icon { + margin-left: 2px; + margin-right: 2px; } + .next-nav.next-icon-only.next-secondary .next-nav-icon.next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-nav.next-icon-only .next-nav-icon-only-arrow.next-icon { + margin-left: 1px; + -webkit-transition: all ease .3s; + transition: all ease .3s; + -webkit-transform-origin: center 46%; + -ms-transform-origin: center 46%; + transform-origin: center 46%; } + .next-nav.next-icon-only .next-nav-icon-only-arrow.next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-nav.next-icon-only .next-nav-item.next-opened .next-nav-icon-only-arrow.next-icon-arrow-down { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); + margin-left: 1px; } + .next-nav.next-icon-only .next-nav-item.next-opened .next-nav-icon-only-arrow.next-icon-arrow-down:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-nav.next-icon-only .next-nav-item.next-selected .next-nav-icon.next-icon { + -webkit-animation: pulse 0.3s cubic-bezier(0.23, 1, 0.32, 1); + animation: pulse 0.3s cubic-bezier(0.23, 1, 0.32, 1); } + .next-nav.next-icon-only .next-menu-hoz-icon-arrow, + .next-nav.next-icon-only .next-menu-icon-arrow { + display: none; } + .next-nav-embeddable.next-primary, .next-nav-embeddable.next-secondary, .next-nav-embeddable.next-normal { + height: 100%; + background: initial; + -webkit-box-shadow: none; + box-shadow: none; + border: none; } + .next-nav-embeddable.next-primary .next-menu-sub-menu .next-menu-item, + .next-nav-embeddable.next-primary .next-nav-item.next-menu-item, .next-nav-embeddable.next-secondary .next-menu-sub-menu .next-menu-item, + .next-nav-embeddable.next-secondary .next-nav-item.next-menu-item, .next-nav-embeddable.next-normal .next-menu-sub-menu .next-menu-item, + .next-nav-embeddable.next-normal .next-nav-item.next-menu-item { + background: initial; } + .next-nav-embeddable.next-nav.next-hoz .next-menu-item-inner { + height: 100%; } + .next-nav-embeddable.next-nav.next-hoz .next-menu-sub-menu .next-menu-item, + .next-nav-embeddable.next-nav.next-hoz .next-nav-item.next-menu-item { + height: 100%; } + +.next-nav[dir="rtl"] .next-nav-icon.next-icon { + margin-left: 4px; + margin-right: 0; } + .next-nav[dir="rtl"] .next-nav-icon.next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-nav[dir="rtl"].next-hoz .next-menu-header { + float: right; } + +.next-nav[dir="rtl"].next-hoz .next-menu-footer { + float: left; } + +.next-nav[dir="rtl"].next-hoz .next-nav-item:before { + width: 0; + left: 50%; } + +.next-nav[dir="rtl"].next-hoz .next-selected.next-nav-item:before { + width: 100%; + left: auto; + right: 0; } + +.next-nav[dir="rtl"].next-ver.next-left .next-nav-item:before { + right: -1px; + left: auto; } + +.next-nav[dir="rtl"].next-ver.next-right .next-nav-item:before { + left: -1px; + right: auto; } + +.next-nav[dir="rtl"].next-primary.next-ver.next-left .next-nav-item:before { + right: 0; + left: auto; } + +.next-nav[dir="rtl"].next-primary.next-ver.next-right .next-nav-item:before { + left: 0; + right: auto; } + +.next-nav[dir="rtl"].next-secondary.next-ver.next-left .next-nav-item:before { + right: 0; + left: auto; } + +.next-nav[dir="rtl"].next-secondary.next-ver.next-right .next-nav-item:before { + left: 0; + right: auto; } + +.next-nav[dir="rtl"] .next-nav.next-line.next-ver { + border-top-color: transparent; + border-right-color: transparent; + border-left-color: none; + border-bottom-color: transparent; } + +.next-nav[dir="rtl"].next-icon-only .next-nav-icon.next-icon, +.next-nav[dir="rtl"].next-icon-only .next-nav-icon-only-arrow.next-icon, +.next-nav[dir="rtl"].next-icon-only .next-nav-item.next-opened .next-nav-icon-only-arrow.next-icon-arrow-down { + margin-left: 0; + margin-right: 1px; } + .next-nav[dir="rtl"].next-icon-only .next-nav-icon.next-icon:before, + .next-nav[dir="rtl"].next-icon-only .next-nav-icon-only-arrow.next-icon:before, + .next-nav[dir="rtl"].next-icon-only .next-nav-item.next-opened .next-nav-icon-only-arrow.next-icon-arrow-down:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + +.next-number-picker { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; + /* stylelint-disable declaration-no-important */ } + .next-number-picker *, + .next-number-picker *:before, + .next-number-picker *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-number-picker .next-btn { + padding: 0 !important; + line-height: 0 !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; } + .next-number-picker-normal { + width: 80px; } + .next-number-picker-normal .next-input { + width: 100%; } + .next-number-picker-normal .next-input input { + padding-right: 2px; } + .next-number-picker-normal .next-btn { + display: block; } + .next-number-picker-normal .next-btn:hover { + z-index: 1; } + .next-number-picker-normal .next-btn:first-child { + border-right: none; + border-top: none; + height: calc(50%); + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; } + .next-number-picker-normal .next-btn:last-child { + border-right: none; + border-bottom: none; + margin-top: -1px; + height: calc(50% + 1px); + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 0; } + .next-number-picker-normal .next-number-picker-handler { + opacity: 0; + -webkit-transition: opacity .24s linear .1s; + transition: opacity .24s linear .1s; + height: 100%; } + .next-number-picker-normal:hover .next-number-picker-handler { + opacity: 1; } + .next-number-picker-normal .next-input.next-disabled .next-number-picker-handler { + opacity: 0; } + .next-number-picker-normal.next-medium .next-btn { + width: 20px; } + .next-number-picker-normal.next-medium .next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-number-picker-normal.next-medium .next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-number-picker-normal.next-medium .next-icon:before { + width: 16px; + font-size: 16px; } } + .next-number-picker-normal.next-large .next-btn { + width: 20px; } + .next-number-picker-normal.next-large .next-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-number-picker-normal.next-large .next-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-number-picker-normal.next-large .next-icon:before { + width: 16px; + font-size: 16px; } } + .next-number-picker-inline input { + text-align: center; } + .next-number-picker-inline .next-input input { + padding: 0; } + .next-number-picker-inline.next-medium { + width: 100px; } + .next-number-picker-inline.next-medium .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-number-picker-inline.next-medium .next-btn:first-child { + margin-right: 2px; } + .next-number-picker-inline.next-medium .next-btn:last-child { + margin-left: 2px; } + .next-number-picker-inline.next-large { + width: 128px; } + .next-number-picker-inline.next-large .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-number-picker-inline.next-large .next-btn:first-child { + margin-right: 2px; } + .next-number-picker-inline.next-large .next-btn:last-child { + margin-left: 2px; } + .next-number-picker-inline .next-btn.next-medium { + width: 28px; } + .next-number-picker-inline .next-btn.next-large { + width: 40px; } + +.next-number-picker-normal[dir="rtl"] .next-btn:first-child { + border-right: 1px solid #C4C6CF; + border-left: 0; + border-top-left-radius: 3px; + border-top-right-radius: 0; } + +.next-number-picker-normal[dir="rtl"] .next-btn:last-child { + border-right: 1px solid #C4C6CF; + border-left: 0; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 0; } + +.next-number-picker-inline[dir="rtl"] .next-btn { + border-radius: 0; } + +.next-number-picker-inline[dir="rtl"] .next-before .next-btn { + border-top-right-radius: 3px !important; + border-bottom-right-radius: 3px !important; } + +.next-number-picker-inline[dir="rtl"] .next-after .next-btn { + border-top-left-radius: 3px !important; + border-bottom-left-radius: 3px !important; } + +.next-pagination[dir="rtl"] .next-pagination-total { + margin-right: 0; + margin-left: 16px; } + +.next-pagination[dir="rtl"] .next-pagination-jump-go { + margin-left: 0; + margin-right: 4px; } + +.next-pagination[dir="rtl"] .next-pagination-size-selector-title { + margin-right: 0; + margin-left: 4px; } + +.next-pagination[dir="rtl"] .next-pagination-size-selector-btn.next-btn-text + .next-pagination-size-selector-btn { + border-left: none; + border-right: 1px solid #DCDEE3; } + +.next-pagination[dir="rtl"] .next-pagination-pages + .next-pagination-size-selector, +.next-pagination[dir="rtl"] .next-pagination-size-selector + .next-pagination-pages { + margin-left: 0; + margin-right: 40px; } + +.next-pagination[dir="rtl"].next-start .next-pagination-pages { + float: left; } + +.next-pagination[dir="rtl"].next-start .next-pagination-size-selector { + float: right; } + +.next-pagination[dir="rtl"].next-end .next-pagination-pages { + float: right; } + +.next-pagination[dir="rtl"].next-end .next-pagination-size-selector { + float: left; } + +.next-pagination[dir="rtl"].next-small .next-pagination-list { + margin: 0 4px; } + +.next-pagination[dir="rtl"].next-small .next-pagination-total { + line-height: 20px; + vertical-align: middle; } + +.next-pagination[dir="rtl"].next-small .next-pagination-item { + padding: 0 6px; } + .next-pagination[dir="rtl"].next-small .next-pagination-item + .next-pagination-item { + margin: 0 4px 0 0; } + +.next-pagination[dir="rtl"].next-small .next-pagination-ellipsis { + height: 20px; + line-height: 20px; + margin-left: 8px; + margin-right: 8px; } + .next-pagination[dir="rtl"].next-small .next-pagination-ellipsis:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-pagination[dir="rtl"].next-small .next-pagination-display { + font-size: 12px; } + .next-pagination[dir="rtl"].next-small .next-pagination-display em { + font-size: 12px; } + +.next-pagination[dir="rtl"].next-small .next-pagination-jump-text { + font-size: 12px; } + +.next-pagination[dir="rtl"].next-small .next-pagination-jump-input { + width: 28px; } + +.next-pagination[dir="rtl"].next-small .next-pagination-size-selector-title { + height: 20px; + line-height: 20px; + font-size: 12px; + vertical-align: middle; } + +.next-pagination[dir="rtl"].next-small .next-pagination-size-selector-btn { + padding: 0 8px; } + +.next-pagination[dir="rtl"].next-small .next-pagination-item.next-prev:not([disabled]) i, +.next-pagination[dir="rtl"].next-small .next-pagination-item.next-next:not([disabled]) i { + color: #666666; } + +.next-pagination[dir="rtl"].next-small .next-pagination-item:hover.next-prev:not([disabled]) i, +.next-pagination[dir="rtl"].next-small .next-pagination-item:hover.next-next:not([disabled]) i { + color: #333333; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-list { + margin: 0 4px; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-total { + line-height: 28px; + vertical-align: middle; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-item { + padding: 0 10px; } + .next-pagination[dir="rtl"].next-medium .next-pagination-item + .next-pagination-item { + margin: 0 4px 0 0; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-ellipsis { + height: 28px; + line-height: 28px; + margin-left: 8px; + margin-right: 8px; } + .next-pagination[dir="rtl"].next-medium .next-pagination-ellipsis:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-display { + font-size: 12px; } + .next-pagination[dir="rtl"].next-medium .next-pagination-display em { + font-size: 12px; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-jump-text { + font-size: 12px; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-jump-input { + width: 36px; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-size-selector-title { + height: 28px; + line-height: 28px; + font-size: 12px; + vertical-align: middle; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-size-selector-btn { + padding: 0 12px; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-item.next-prev:not([disabled]) i, +.next-pagination[dir="rtl"].next-medium .next-pagination-item.next-next:not([disabled]) i { + color: #666666; } + +.next-pagination[dir="rtl"].next-medium .next-pagination-item:hover.next-prev:not([disabled]) i, +.next-pagination[dir="rtl"].next-medium .next-pagination-item:hover.next-next:not([disabled]) i { + color: #333333; } + +.next-pagination[dir="rtl"].next-large .next-pagination-list { + margin: 0 8px; } + +.next-pagination[dir="rtl"].next-large .next-pagination-total { + line-height: 40px; + vertical-align: middle; } + +.next-pagination[dir="rtl"].next-large .next-pagination-item { + padding: 0 15px; } + .next-pagination[dir="rtl"].next-large .next-pagination-item + .next-pagination-item { + margin: 0 8px 0 0; } + +.next-pagination[dir="rtl"].next-large .next-pagination-ellipsis { + height: 40px; + line-height: 40px; + margin-left: 8px; + margin-right: 8px; } + .next-pagination[dir="rtl"].next-large .next-pagination-ellipsis:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + +.next-pagination[dir="rtl"].next-large .next-pagination-display { + font-size: 16px; } + .next-pagination[dir="rtl"].next-large .next-pagination-display em { + font-size: 16px; } + +.next-pagination[dir="rtl"].next-large .next-pagination-jump-text { + font-size: 16px; } + +.next-pagination[dir="rtl"].next-large .next-pagination-jump-input { + width: 48px; } + +.next-pagination[dir="rtl"].next-large .next-pagination-size-selector-title { + height: 40px; + line-height: 40px; + font-size: 16px; + vertical-align: middle; } + +.next-pagination[dir="rtl"].next-large .next-pagination-size-selector-btn { + padding: 0 16px; } + +.next-pagination[dir="rtl"].next-large .next-pagination-item.next-prev:not([disabled]) i, +.next-pagination[dir="rtl"].next-large .next-pagination-item.next-next:not([disabled]) i { + color: #666666; } + +.next-pagination[dir="rtl"].next-large .next-pagination-item:hover.next-prev:not([disabled]) i, +.next-pagination[dir="rtl"].next-large .next-pagination-item:hover.next-next:not([disabled]) i { + color: #333333; } + +.next-pagination { + -webkit-box-sizing: border-box; + box-sizing: border-box; + font-size: 0; } + .next-pagination *, + .next-pagination *:before, + .next-pagination *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-pagination:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + .next-pagination-total { + display: inline-block; + font-size: 14px; + margin-right: 16px; } + .next-pagination-pages { + display: inline-block; } + .next-pagination-list { + display: inline-block; + vertical-align: top; } + .next-pagination .next-pagination-item { + display: inline-block; } + .next-pagination .next-pagination-item.next-current { + border-color: #5584FF; + background: #5584FF; + color: #FFFFFF; } + .next-pagination .next-pagination-item.next-current:hover, .next-pagination .next-pagination-item.next-current:focus { + border-color: #5584FF; + background: #5584FF; + color: #FFFFFF; } + .next-pagination-ellipsis { + display: inline-block; + color: #999999; + vertical-align: top; } + .next-pagination-display { + display: inline-block; + margin: 0 16px; + color: #333333; + vertical-align: middle; } + .next-pagination-display em { + font-style: normal; + color: #5584FF; } + .next-pagination-jump-text { + display: inline-block; + vertical-align: middle; + color: #999999; } + .next-pagination-jump-input { + margin: 0 4px; + vertical-align: top; } + .next-pagination-jump-go { + margin-left: 4px; + vertical-align: top; } + .next-pagination-size-selector { + display: inline-block; + position: relative; } + .next-pagination-size-selector-title { + margin-right: 4px; + color: #999999; } + .next-pagination-size-selector-filter { + display: inline-block; + vertical-align: middle; } + .next-pagination-size-selector-dropdown { + vertical-align: top; + min-width: 64px; } + .next-pagination-size-selector-popup { + min-width: 64px; } + .next-pagination-size-selector-btn.next-btn-text { + height: initial; + line-height: initial; + color: #666666; + border-radius: 0; } + .next-pagination-size-selector-btn.next-btn-text.next-current { + color: #5584FF; } + .next-pagination-size-selector-btn.next-btn-text + .next-pagination-size-selector-btn { + border-left: 1px solid #DCDEE3; } + .next-pagination-pages + .next-pagination-size-selector, + .next-pagination-size-selector + .next-pagination-pages { + margin-left: 40px; } + .next-pagination.next-hide { + display: none; } + .next-pagination.next-start .next-pagination-pages { + float: right; } + .next-pagination.next-start .next-pagination-size-selector { + float: left; } + .next-pagination.next-end .next-pagination-pages { + float: left; } + .next-pagination.next-end .next-pagination-size-selector { + float: right; } + .next-pagination.next-small .next-pagination-list { + margin: 0 4px; } + .next-pagination.next-small .next-pagination-total { + line-height: 20px; + vertical-align: middle; } + .next-pagination.next-small .next-pagination-item { + padding: 0 6px; } + .next-pagination.next-small .next-pagination-item + .next-pagination-item { + margin: 0 0 0 4px; } + .next-pagination.next-small .next-pagination-ellipsis { + height: 20px; + line-height: 20px; + margin-left: 8px; + margin-right: 8px; } + .next-pagination.next-small .next-pagination-ellipsis:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-pagination.next-small .next-pagination-display { + font-size: 12px; } + .next-pagination.next-small .next-pagination-display em { + font-size: 12px; } + .next-pagination.next-small .next-pagination-jump-text { + font-size: 12px; } + .next-pagination.next-small .next-pagination-jump-input { + width: 28px; } + .next-pagination.next-small .next-pagination-size-selector-title { + height: 20px; + line-height: 20px; + font-size: 12px; + vertical-align: middle; } + .next-pagination.next-small .next-pagination-size-selector-btn { + padding: 0 8px; } + .next-pagination.next-small .next-pagination-item.next-prev:not([disabled]) i, + .next-pagination.next-small .next-pagination-item.next-next:not([disabled]) i { + color: #666666; } + .next-pagination.next-small .next-pagination-item:hover.next-prev:not([disabled]) i, + .next-pagination.next-small .next-pagination-item:hover.next-next:not([disabled]) i { + color: #333333; } + .next-pagination.next-small.next-arrow-only .next-pagination-item.next-prev, .next-pagination.next-small.next-arrow-only .next-pagination-item.next-next { + width: 20px; + padding: 0; } + .next-pagination.next-small.next-arrow-only .next-pagination-item.next-prev .next-icon, .next-pagination.next-small.next-arrow-only .next-pagination-item.next-next .next-icon { + margin: 0 auto; } + .next-pagination.next-small.next-arrow-prev-only .next-pagination-item.next-prev { + width: 20px; + padding: 0; } + .next-pagination.next-small.next-arrow-prev-only .next-pagination-item.next-prev .next-icon { + margin: 0 auto; } + .next-pagination.next-small.next-no-border .next-pagination-item.next-prev, .next-pagination.next-small.next-no-border .next-pagination-item.next-next { + padding: 0; + border: none; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; } + .next-pagination.next-small.next-no-border .next-pagination-item.next-prev .next-icon, .next-pagination.next-small.next-no-border .next-pagination-item.next-next .next-icon { + margin: 0; } + .next-pagination.next-small.next-no-border .next-pagination-item.next-prev:not([disabled]):hover i, + .next-pagination.next-small.next-no-border .next-pagination-item.next-next:not([disabled]):hover i { + color: #5584FF; } + .next-pagination.next-small.next-no-border .next-pagination-display { + margin: 0 8px; } + .next-pagination.next-small.next-mini .next-pagination-item.next-prev { + margin-right: 4px; } + .next-pagination.next-small.next-mini .next-pagination-item.next-next { + margin-left: 4px; } + .next-pagination.next-medium .next-pagination-list { + margin: 0 4px; } + .next-pagination.next-medium .next-pagination-total { + line-height: 28px; + vertical-align: middle; } + .next-pagination.next-medium .next-pagination-item { + padding: 0 10px; } + .next-pagination.next-medium .next-pagination-item + .next-pagination-item { + margin: 0 0 0 4px; } + .next-pagination.next-medium .next-pagination-ellipsis { + height: 28px; + line-height: 28px; + margin-left: 8px; + margin-right: 8px; } + .next-pagination.next-medium .next-pagination-ellipsis:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-pagination.next-medium .next-pagination-display { + font-size: 12px; } + .next-pagination.next-medium .next-pagination-display em { + font-size: 12px; } + .next-pagination.next-medium .next-pagination-jump-text { + font-size: 12px; } + .next-pagination.next-medium .next-pagination-jump-input { + width: 36px; } + .next-pagination.next-medium .next-pagination-size-selector-title { + height: 28px; + line-height: 28px; + font-size: 12px; + vertical-align: middle; } + .next-pagination.next-medium .next-pagination-size-selector-btn { + padding: 0 12px; } + .next-pagination.next-medium .next-pagination-item.next-prev:not([disabled]) i, + .next-pagination.next-medium .next-pagination-item.next-next:not([disabled]) i { + color: #666666; } + .next-pagination.next-medium .next-pagination-item:hover.next-prev:not([disabled]) i, + .next-pagination.next-medium .next-pagination-item:hover.next-next:not([disabled]) i { + color: #333333; } + .next-pagination.next-medium.next-arrow-only .next-pagination-item.next-prev, .next-pagination.next-medium.next-arrow-only .next-pagination-item.next-next { + width: 28px; + padding: 0; } + .next-pagination.next-medium.next-arrow-only .next-pagination-item.next-prev .next-icon, .next-pagination.next-medium.next-arrow-only .next-pagination-item.next-next .next-icon { + margin: 0 auto; } + .next-pagination.next-medium.next-arrow-prev-only .next-pagination-item.next-prev { + width: 28px; + padding: 0; } + .next-pagination.next-medium.next-arrow-prev-only .next-pagination-item.next-prev .next-icon { + margin: 0 auto; } + .next-pagination.next-medium.next-no-border .next-pagination-item.next-prev, .next-pagination.next-medium.next-no-border .next-pagination-item.next-next { + padding: 0; + border: none; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; } + .next-pagination.next-medium.next-no-border .next-pagination-item.next-prev .next-icon, .next-pagination.next-medium.next-no-border .next-pagination-item.next-next .next-icon { + margin: 0; } + .next-pagination.next-medium.next-no-border .next-pagination-item.next-prev:not([disabled]):hover i, + .next-pagination.next-medium.next-no-border .next-pagination-item.next-next:not([disabled]):hover i { + color: #5584FF; } + .next-pagination.next-medium.next-no-border .next-pagination-display { + margin: 0 12px; } + .next-pagination.next-medium.next-mini .next-pagination-item.next-prev { + margin-right: 4px; } + .next-pagination.next-medium.next-mini .next-pagination-item.next-next { + margin-left: 4px; } + .next-pagination.next-large .next-pagination-list { + margin: 0 8px; } + .next-pagination.next-large .next-pagination-total { + line-height: 40px; + vertical-align: middle; } + .next-pagination.next-large .next-pagination-item { + padding: 0 15px; } + .next-pagination.next-large .next-pagination-item + .next-pagination-item { + margin: 0 0 0 8px; } + .next-pagination.next-large .next-pagination-ellipsis { + height: 40px; + line-height: 40px; + margin-left: 8px; + margin-right: 8px; } + .next-pagination.next-large .next-pagination-ellipsis:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-pagination.next-large .next-pagination-display { + font-size: 16px; } + .next-pagination.next-large .next-pagination-display em { + font-size: 16px; } + .next-pagination.next-large .next-pagination-jump-text { + font-size: 16px; } + .next-pagination.next-large .next-pagination-jump-input { + width: 48px; } + .next-pagination.next-large .next-pagination-size-selector-title { + height: 40px; + line-height: 40px; + font-size: 16px; + vertical-align: middle; } + .next-pagination.next-large .next-pagination-size-selector-btn { + padding: 0 16px; } + .next-pagination.next-large .next-pagination-item.next-prev:not([disabled]) i, + .next-pagination.next-large .next-pagination-item.next-next:not([disabled]) i { + color: #666666; } + .next-pagination.next-large .next-pagination-item:hover.next-prev:not([disabled]) i, + .next-pagination.next-large .next-pagination-item:hover.next-next:not([disabled]) i { + color: #333333; } + .next-pagination.next-large.next-arrow-only .next-pagination-item.next-prev, .next-pagination.next-large.next-arrow-only .next-pagination-item.next-next { + width: 40px; + padding: 0; } + .next-pagination.next-large.next-arrow-only .next-pagination-item.next-prev .next-icon, .next-pagination.next-large.next-arrow-only .next-pagination-item.next-next .next-icon { + margin: 0 auto; } + .next-pagination.next-large.next-arrow-prev-only .next-pagination-item.next-prev { + width: 40px; + padding: 0; } + .next-pagination.next-large.next-arrow-prev-only .next-pagination-item.next-prev .next-icon { + margin: 0 auto; } + .next-pagination.next-large.next-no-border .next-pagination-item.next-prev, .next-pagination.next-large.next-no-border .next-pagination-item.next-next { + padding: 0; + border: none; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; } + .next-pagination.next-large.next-no-border .next-pagination-item.next-prev .next-icon, .next-pagination.next-large.next-no-border .next-pagination-item.next-next .next-icon { + margin: 0; } + .next-pagination.next-large.next-no-border .next-pagination-item.next-prev:not([disabled]):hover i, + .next-pagination.next-large.next-no-border .next-pagination-item.next-next:not([disabled]):hover i { + color: #5584FF; } + .next-pagination.next-large.next-no-border .next-pagination-display { + margin: 0 16px; } + .next-pagination.next-large.next-mini .next-pagination-item.next-prev { + margin-right: 8px; } + .next-pagination.next-large.next-mini .next-pagination-item.next-next { + margin-left: 8px; } + +.next-paragraph { + color: #333333; } + .next-paragraph-short { + line-height: 1.5; } + .next-paragraph-long { + line-height: 1.7; } + .next-paragraph-small { + font-size: 12px; } + .next-paragraph-medium { + font-size: 14px; } + +.next-progress-circle[dir=rtl] .next-progress-circle-container { + -webkit-transform: scaleX(-1); + -ms-transform: scaleX(-1); + transform: scaleX(-1); } + +.next-progress-line[dir=rtl] .next-progress-line-overlay { + left: auto; + right: 0; } + +.next-progress-line { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-progress-line *, + .next-progress-line *:before, + .next-progress-line *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-progress-line { + width: 100%; + display: inline-block; + position: relative; } + .next-progress-line-container { + display: inline-block; + width: 100%; + vertical-align: middle; } + .next-progress-line-underlay { + position: relative; + width: 100%; + background-color: #EBECF0; } + .next-progress-line-overlay { + position: absolute; + left: 0; + top: 0; + -webkit-transition: all 1s cubic-bezier(0.65, 0.2, 0.35, 1); + transition: all 1s cubic-bezier(0.65, 0.2, 0.35, 1); } + .next-progress-line-overlay-normal { + background-color: #5584FF; } + .next-progress-line-overlay-success { + background-color: #46BC15; } + .next-progress-line-overlay-error { + background-color: #FF3000; } + .next-progress-line-overlay-started { + background-color: #FF3000; } + .next-progress-line-overlay-middle { + background-color: #FF9300; } + .next-progress-line-overlay-finishing { + background-color: #46BC15; } + .next-progress-line.next-small .next-progress-line-underlay { + border-radius: 20px; + height: 4px; } + .next-progress-line.next-small .next-progress-line-overlay { + height: 4px; + border-radius: 20px; + top: 50%; + margin-top: -2px; } + .next-progress-line.next-small .next-progress-line-text { + font-size: 12px; + line-height: 4px; } + .next-progress-line.next-medium .next-progress-line-underlay { + border-radius: 20px; + height: 8px; } + .next-progress-line.next-medium .next-progress-line-overlay { + height: 8px; + border-radius: 20px; + top: 50%; + margin-top: -4px; } + .next-progress-line.next-medium .next-progress-line-text { + font-size: 12px; + line-height: 8px; } + .next-progress-line.next-large .next-progress-line-underlay { + border-radius: 20px; + height: 12px; } + .next-progress-line.next-large .next-progress-line-overlay { + height: 12px; + border-radius: 20px; + top: 50%; + margin-top: -6px; } + .next-progress-line.next-large .next-progress-line-text { + font-size: 12px; + line-height: 12px; } + .next-progress-line-show-info .next-progress-line-container { + padding-right: 60px; + margin-right: -60px; } + .next-progress-line-show-info .next-progress-line-text { + width: 50px; + text-align: left; + margin-left: 10px; + vertical-align: middle; + display: inline-block; + color: #333333; } + .next-progress-line-show-border .next-progress-line-underlay { + border: 1px solid #DCDEE3; } + .next-progress-line-show-border.next-small .next-progress-line-underlay { + border-radius: 20px; + height: 6px; } + .next-progress-line-show-border.next-small .next-progress-line-overlay { + height: 4px; + border-radius: 20px; + top: 50%; + margin-top: -2px; } + .next-progress-line-show-border.next-small .next-progress-line-text { + font-size: 12px; + line-height: 6px; } + .next-progress-line-show-border.next-medium .next-progress-line-underlay { + border-radius: 20px; + height: 10px; } + .next-progress-line-show-border.next-medium .next-progress-line-overlay { + height: 8px; + border-radius: 20px; + top: 50%; + margin-top: -4px; } + .next-progress-line-show-border.next-medium .next-progress-line-text { + font-size: 12px; + line-height: 10px; } + .next-progress-line-show-border.next-large .next-progress-line-underlay { + border-radius: 20px; + height: 14px; } + .next-progress-line-show-border.next-large .next-progress-line-overlay { + height: 12px; + border-radius: 20px; + top: 50%; + margin-top: -6px; } + .next-progress-line-show-border.next-large .next-progress-line-text { + font-size: 12px; + line-height: 14px; } + +.next-progress-circle { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-progress-circle *, + .next-progress-circle *:before, + .next-progress-circle *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-progress-circle { + position: relative; + display: inline-block; } + .next-progress-circle-underlay { + stroke-width: 8px; + stroke: #EBECF0; } + .next-progress-circle-overlay { + -webkit-transition: all 1s cubic-bezier(0.65, 0.2, 0.35, 1); + transition: all 1s cubic-bezier(0.65, 0.2, 0.35, 1); + stroke-linecap: round; + stroke-width: 8px; } + .next-progress-circle-overlay-normal { + stroke: #5584FF; } + .next-progress-circle-overlay-success { + stroke: #46BC15; } + .next-progress-circle-overlay-error { + stroke: #FF3000; } + .next-progress-circle-overlay-started { + stroke: #FF3000; } + .next-progress-circle-overlay-middle { + stroke: #FF9300; } + .next-progress-circle-overlay-finishing { + stroke: #46BC15; } + .next-progress-circle.next-small { + width: 100px; + height: 100px; + font-size: 20px; } + .next-progress-circle.next-medium { + width: 116px; + height: 116px; + font-size: 24px; } + .next-progress-circle.next-large { + width: 132px; + height: 132px; + font-size: 36px; } + .next-progress-circle-text { + display: block; + position: absolute; + width: 100%; + top: 50%; + left: 0; + text-align: center; + line-height: 1; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.65, 0.2, 0.35, 1); + transition: -webkit-transform 0.3s cubic-bezier(0.65, 0.2, 0.35, 1); + transition: transform 0.3s cubic-bezier(0.65, 0.2, 0.35, 1); + transition: transform 0.3s cubic-bezier(0.65, 0.2, 0.35, 1), -webkit-transform 0.3s cubic-bezier(0.65, 0.2, 0.35, 1); + color: #333333; } + +.next-range { + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + font-family: inherit; + font-weight: normal; + font-size: inherit; + line-height: inherit; + vertical-align: baseline; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + cursor: pointer; } + .next-range *, + .next-range *:before, + .next-range *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-range .next-range-inner { + position: relative; } + .next-range .next-range-inner:only-child { + margin-top: auto; + margin-bottom: auto; } + .next-range .next-range-track { + position: absolute; + width: 100%; + top: 50%; + border-radius: 0; } + .next-range .next-range-selected { + position: absolute; + width: 0; + top: 50%; + left: 0; + border-radius: 0; } + .next-range .next-range-scale { + position: relative; + width: 100%; + height: 12px; } + .next-range .next-range-scale .next-range-scale-item { + position: absolute; + left: 0; + width: 2px; + border: 1px solid; + border-radius: 0; } + .next-range .next-range-scale .next-range-scale-item:last-child { + margin-left: -2px; } + .next-range .next-range-slider { + position: absolute; + top: 50%; + left: 0; + border-radius: 50%; } + .next-range .next-range-slider-inner { + position: absolute; + top: 50%; + left: 50%; + border-width: 1px; + border-style: solid; + border-color: #C4C6CF; + border-radius: 50%; + -webkit-transition: border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); + transition: border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1); + transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.4s cubic-bezier(0.23, 1, 0.32, 1); } + .next-range .next-range-slider.next-range-slider-moving .next-range-slider-inner { + border: 2px solid #5584FF; + -webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); } + .next-range .next-range-frag.next-range-active .next-range-slider .next-range-slider-inner { + border: 2px solid #5584FF; + -webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); } + .next-range .next-range-mark { + position: relative; + cursor: auto; } + .next-range .next-range-mark .next-range-mark-text { + position: absolute; + left: 0; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%); + padding-left: 2px; + text-align: center; } + .next-range .next-range-frag { + position: absolute; + top: 0; } + .next-range .next-range-frag .next-range-slider { + left: 0; } + .next-range .next-range-frag .next-range-slider:nth-child(2) { + left: 100%; } + .next-range .next-range-frag .next-range-selected { + width: 100%; } + .next-range.disabled { + cursor: not-allowed; } + .next-range.disabled .next-range-mark { + cursor: auto; } + .next-range .next-range-track { + background-color: #C4C6CF; } + .next-range .next-range-track:hover { + background-color: #C4C6CF; } + .next-range .next-range-selected { + background-color: #5584FF; } + .next-range .next-range-selected:hover { + background-color: #5584FF; } + .next-range .next-range-scale .next-range-scale-item { + border-color: #C4C6CF; + background-color: #C4C6CF; } + .next-range .next-range-scale .next-range-scale-item:hover { + border-color: #C4C6CF; } + .next-range .next-range-scale .next-range-scale-item.activated { + border-color: #5584FF; + background-color: #5584FF; } + .next-range .next-range-scale .next-range-scale-item.activated:hover { + border-color: #5584FF; } + .next-range .next-range-slider-inner { + background-color: #FFFFFF; + border-color: #C4C6CF; } + .next-range .next-range-slider-inner:hover { + background-color: #FFFFFF; + -webkit-box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.12); + box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.12); + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); } + .next-range .next-range-mark .next-range-mark-text { + color: #999999; } + .next-range .next-range-mark .next-range-mark-text:hover { + color: #999999; } + .next-range .next-range-mark .next-range-mark-text.activated { + color: #333333; } + .next-range .next-range-mark .next-range-mark-text.activated:hover { + color: #333333; } + .next-range.disabled .next-range-track { + background-color: #C4C6CF; } + .next-range.disabled .next-range-selected { + background-color: #A0A2AD; } + .next-range.disabled .next-range-scale-item { + border-color: #C4C6CF; } + .next-range.disabled .next-range-scale-item.activated { + border-color: #A0A2AD; } + .next-range.disabled .next-range-slider-inner { + background-color: #E6E7EB; + border-color: #E6E7EB; + -webkit-transform: none; + -ms-transform: none; + transform: none; + -webkit-box-shadow: none; + box-shadow: none; } + .next-range.disabled .next-range-mark-text { + color: #CCCCCC; } + .next-range.disabled .next-range-mark-text.activated { + color: #999999; } + .next-range .next-range-track { + height: 4px; + margin-top: -2px; } + .next-range .next-range-selected { + height: 4px; + margin-top: -2px; } + .next-range .next-range-frag { + margin-top: -2px; + height: 16px; } + .next-range .next-range-slider { + height: 16px; + width: 16px; + margin-top: -8px; + margin-left: -8px; + -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); } + .next-range .next-range-slider-inner { + height: 16px; + width: 16px; + margin-top: -8px; + margin-left: -8px; } + .next-range .next-range-mark { + display: block; } + .next-range .next-range-mark .next-range-mark-text { + font-size: 12px; + font-weight: normal; + line-height: 20px; + height: 20px; } + .next-range .next-range-mark.next-range-mark-below { + height: 30px; } + .next-range .next-range-mark.next-range-mark-below .next-range-mark-text { + bottom: 0; } + .next-range .next-range-mark.next-range-mark-above { + height: 30px; } + .next-range .next-range-scale .next-range-scale-item { + height: 12px; } + .next-range.simulation-hover > .next-range-slider-inner { + background-color: #FFFFFF; + -webkit-box-shadow: #FFFFFF; + box-shadow: #FFFFFF; + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); } + .next-range.simulation-click > .next-range-slider-inner { + border: 2px solid #5584FF; + -webkit-box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.12); + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); + transform: scale(1.2); } + +.next-range[dir=rtl] .next-range-mark { + position: relative; + cursor: auto; } + .next-range[dir=rtl] .next-range-mark .next-range-mark-text { + position: absolute; + right: 0; + -webkit-transform: translateX(50%); + -ms-transform: translateX(50%); + transform: translateX(50%); + padding-right: 2px; + text-align: center; } + +.next-rating[dir="rtl"] .next-rating-overlay { + right: 0; + left: auto; } + +.next-rating[dir="rtl"] .next-rating-underlay .next-rating-icon, +.next-rating[dir="rtl"] .next-rating-overlay .next-rating-icon { + margin-right: 4px; + margin-left: 0; } + +.next-rating[dir="rtl"] .next-rating-underlay .next-rating-icon:last-child, +.next-rating[dir="rtl"] .next-rating-overlay .next-rating-icon:last-child { + /* icon 放大会产生边缘溢出，这里使用 margin 为放大扩展一部分空间 */ + margin-left: 4px; } + +.next-rating { + vertical-align: top; } + .next-rating { + display: inline-block; + position: relative; } + .next-rating:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + .next-rating-base { + float: left; + cursor: pointer; } + .next-rating-text { + float: left; } + .next-rating-base-disabled { + cursor: not-allowed; } + .next-rating-underlay { + white-space: nowrap; + overflow: hidden; } + .next-rating-underlay .next-icon { + color: #E2E4E8; } + .next-rating-stroke-mode .next-rating-underlay .next-icon { + color: transparent; + -webkit-text-stroke: 1px #5584FF; } + .next-rating-overlay { + white-space: nowrap; + overflow: hidden; + position: absolute; + width: 0; + top: 0; + left: 0; } + .next-rating-overlay .next-icon { + color: #5584FF; } + .next-rating-underlay .next-rating-icon, .next-rating-overlay .next-rating-icon { + margin-left: 4px; } + .next-rating-underlay .next-rating-icon:last-child, .next-rating-overlay .next-rating-icon:last-child { + /* icon 放大会产生边缘溢出，这里使用 margin 为放大扩展一部分空间 */ + margin-right: 4px; } + .next-rating-underlay .next-icon, .next-rating-overlay .next-icon { + -webkit-transition: all 50ms ease-in; + transition: all 50ms ease-in; } + .next-rating-underlay .next-icon.hover, .next-rating-overlay .next-icon.hover { + -webkit-transform: scale3d(1.1, 1.1, 1.1); + transform: scale3d(1.1, 1.1, 1.1); } + .next-rating-underlay .next-icon.clicked, .next-rating-overlay .next-icon.clicked { + -webkit-transform: scale3d(0.9, 0.9, 0.9); + transform: scale3d(0.9, 0.9, 0.9); } + .next-rating-info { + position: absolute; + top: calc(100% + 4px); + left: 0; + border: 1px solid #E2E4E8; + background: #FFFFFF; + padding: 4px 8px 3px; + font-size: 12px; + white-space: nowrap; } + .next-rating-info:after { + position: absolute; + content: ' '; + width: 4px; + height: 4px; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + border: 1px solid #E2E4E8; + background: #FFFFFF; + border-bottom-color: transparent; + border-right-color: transparent; + top: -3px; + left: 4px; } + .next-rating:focus, .next-rating.hover { + outline: none; } + .next-rating:focus .next-rating-overlay .next-icon, .next-rating.hover .next-rating-overlay .next-icon { + color: #5584FF; } + +/* 状态 */ +/* ======================================== */ +.next-rating-grade-low .next-rating-overlay .next-icon { + color: #666666; } + +.next-rating-grade-low.hover .next-rating-overlay .next-icon { + color: #666666; } + +.next-rating-grade-high .next-rating-overlay .next-icon { + color: #5584FF; } + +.next-rating-grade-high.hover .next-rating-overlay .next-icon { + color: #5584FF; } + +/* 尺寸 */ +/* ======================================== */ +.next-rating-small { + font-size: 12px; } + .next-rating-small .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-rating-small .next-rating-text { + margin-left: 8px; } + +.next-rating-medium { + font-size: 12px; } + .next-rating-medium .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-rating-medium .next-rating-text { + margin-left: 12px; } + +.next-rating-large { + font-size: 16px; } + .next-rating-large .next-icon:before { + width: 20px; + font-size: 20px; + line-height: inherit; } + .next-rating-large .next-rating-text { + margin-left: 16px; } + +.next-search-simple[dir=rtl].next-large .next-search-icon { + margin-left: 12px; + margin-right: 0; } + +.next-search-simple[dir=rtl].next-medium .next-search-icon { + margin-left: 8px; + margin-right: 0; } + +.next-search-simple[dir=rtl].next-normal .next-search-left .next-search-left-addon { + border-left: 1px solid #C4C6CF; + border-right: none; } + +.next-search-simple[dir=rtl].next-dark .next-search-left { + border-color: #C4C6CF; } + .next-search-simple[dir=rtl].next-dark .next-search-left .next-search-left-addon { + border-right: 1px solid #C4C6CF; } + +.next-search-simple[dir=rtl].next-dark:hover .next-search-left { + border-color: #C4C6CF; } + +.next-search-simple[dir=rtl].next-dark .next-search-icon { + color: #999999; } + .next-search-simple[dir=rtl].next-dark .next-search-icon:hover { + color: #666666; } + +.next-search-normal[dir=rtl] .next-search-left { + border-left: none; + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + border-top-left-radius: 0; + border-bottom-left-radius: 0; } + +.next-search-normal[dir=rtl] .next-search-btn.next-btn { + border-radius: 3px 0 0 3px !important; } + +.next-search-normal[dir=rtl] .next-input { + border-radius: 0 3px 3px 0; } + +.next-search-normal[dir=rtl].next-primary .next-input { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; } + +.next-search-normal[dir=rtl].next-primary .next-search-left .next-search-left-addon { + border-left: 1px solid #E6E7EB; + border-right: none; } + +.next-search-normal[dir=rtl].next-secondary .next-input { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; } + +.next-search-normal[dir=rtl].next-secondary .next-search-left .next-search-left-addon { + border-left: 1px solid #E6E7EB; + border-right: none; } + +.next-search-normal[dir=rtl].next-normal .next-input { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; } + +.next-search-normal[dir=rtl].next-normal .next-search-left .next-search-left-addon { + border-left: 1px solid #E6E7EB; + border-right: none; } + +.next-search-normal[dir=rtl].next-dark .next-search-left .next-search-left-addon { + border-left: 1px solid #5584FF; + border-right: none; } + +.next-search { + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + display: inline-block; } + .next-search *, + .next-search *:before, + .next-search *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-search .next-input, + .next-search .next-select { + border: none; } + .next-search .next-select .next-input { + height: auto; } + .next-search .next-select .next-input .next-input-text-field { + height: auto; } + .next-search .next-search-left { + border-style: solid; + -webkit-transition: all .3s ease-out; + transition: all .3s ease-out; } + .next-search .next-search-left-addon .next-input, + .next-search .next-search-left-addon .next-select-trigger-search { + min-height: 100%; + border-bottom-right-radius: 0; + border-top-right-radius: 0; } + .next-search .next-search-left-addon .next-select-values { + line-height: 1; } + .next-search .next-search-left-addon + .next-search-input .next-input { + border-bottom-left-radius: 0; + border-top-left-radius: 0; } + .next-search .next-search-input { + width: 100%; } + .next-search .next-search-btn { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal { + width: 600px; } + .next-search-normal .next-search-left { + border-top-left-radius: 3px; + border-bottom-left-radius: 3px; } + .next-search-normal .next-input { + border-radius: 3px 0 0 3px; } + .next-search-normal .next-btn { + border-radius: 0 3px 3px 0; } + .next-search-normal.next-primary .next-search-left { + border-color: #5584FF; } + .next-search-normal.next-primary .next-search-left .next-search-left-addon { + border-right: 1px solid #E6E7EB; } + .next-search-normal.next-primary:hover .next-search-left, + .next-search-normal.next-primary:hover .next-btn { + border-color: #5584FF; } + .next-search-normal.next-primary .next-search-btn { + background: #5584FF; + border-color: #5584FF; + color: #FFFFFF; } + .next-search-normal.next-primary .next-search-btn:hover { + background: #3E71F7; + border-color: #5584FF; + color: #FFFFFF; } + .next-search-normal.next-primary .next-search-btn .next-icon { + color: #FFFFFF; } + .next-search-normal.next-primary .next-search-btn .next-icon:hover { + color: #FFFFFF; } + .next-search-normal.next-primary.next-large { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal.next-primary.next-large .next-search-left, .next-search-normal.next-primary.next-large .next-search-btn { + border-width: 2px; + height: 60px; } + .next-search-normal.next-primary.next-large .next-search-input { + height: 56px; + overflow-y: hidden; } + .next-search-normal.next-primary.next-large .next-search-input input { + height: 56px; + line-height: 56px \0; } + .next-search-normal.next-primary.next-large .next-select { + height: 56px; } + .next-search-normal.next-primary.next-large .next-search-btn { + font-size: 16px; } + .next-search-normal.next-primary.next-large .next-search-btn .next-icon:before { + width: 24px; + font-size: 24px; + line-height: inherit; } + .next-search-normal.next-primary.next-large .next-search-btn .next-search-btn-text { + display: inline-block; + padding-left: 0; } + .next-search-normal.next-primary.next-medium { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal.next-primary.next-medium .next-search-left, .next-search-normal.next-primary.next-medium .next-search-btn { + border-width: 2px; + height: 40px; } + .next-search-normal.next-primary.next-medium .next-search-input { + height: 36px; + overflow-y: hidden; } + .next-search-normal.next-primary.next-medium .next-search-input input { + height: 36px; + line-height: 36px \0; } + .next-search-normal.next-primary.next-medium .next-select { + height: 36px; } + .next-search-normal.next-primary.next-medium .next-search-btn { + font-size: 16px; } + .next-search-normal.next-primary.next-medium .next-search-btn .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-search-normal.next-primary.next-medium .next-search-btn .next-search-btn-text { + display: inline-block; + padding-left: 0; } + .next-search-normal.next-primary .next-input { + border-top-left-radius: 1px; + border-bottom-left-radius: 1px; } + .next-search-normal.next-secondary .next-search-left { + border-color: #C4C6CF; } + .next-search-normal.next-secondary .next-search-left .next-search-left-addon { + border-right: 1px solid #E6E7EB; } + .next-search-normal.next-secondary:hover .next-search-left, + .next-search-normal.next-secondary:hover .next-btn { + border-color: #5584FF; } + .next-search-normal.next-secondary .next-search-btn { + background: #5584FF; + border-color: #5584FF; + color: #FFFFFF; } + .next-search-normal.next-secondary .next-search-btn:hover { + background: #3E71F7; + border-color: #5584FF; + color: #FFFFFF; } + .next-search-normal.next-secondary .next-search-btn .next-icon { + color: #FFFFFF; } + .next-search-normal.next-secondary .next-search-btn .next-icon:hover { + color: #FFFFFF; } + .next-search-normal.next-secondary.next-large { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal.next-secondary.next-large .next-search-left, .next-search-normal.next-secondary.next-large .next-search-btn { + border-width: 1px; + height: 60px; } + .next-search-normal.next-secondary.next-large .next-search-input { + height: 58px; + overflow-y: hidden; } + .next-search-normal.next-secondary.next-large .next-search-input input { + height: 58px; + line-height: 58px \0; } + .next-search-normal.next-secondary.next-large .next-select { + height: 58px; } + .next-search-normal.next-secondary.next-large .next-search-btn { + font-size: 16px; } + .next-search-normal.next-secondary.next-large .next-search-btn .next-icon:before { + width: 24px; + font-size: 24px; + line-height: inherit; } + .next-search-normal.next-secondary.next-large .next-search-btn .next-search-btn-text { + display: inline-block; + padding-left: 0; } + .next-search-normal.next-secondary.next-medium { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal.next-secondary.next-medium .next-search-left, .next-search-normal.next-secondary.next-medium .next-search-btn { + border-width: 1px; + height: 40px; } + .next-search-normal.next-secondary.next-medium .next-search-input { + height: 38px; + overflow-y: hidden; } + .next-search-normal.next-secondary.next-medium .next-search-input input { + height: 38px; + line-height: 38px \0; } + .next-search-normal.next-secondary.next-medium .next-select { + height: 38px; } + .next-search-normal.next-secondary.next-medium .next-search-btn { + font-size: 16px; } + .next-search-normal.next-secondary.next-medium .next-search-btn .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-search-normal.next-secondary.next-medium .next-search-btn .next-search-btn-text { + display: inline-block; + padding-left: 0; } + .next-search-normal.next-secondary .next-input { + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; } + .next-search-normal.next-normal .next-search-left { + border-color: #C4C6CF; } + .next-search-normal.next-normal .next-search-left .next-search-left-addon { + border-right: 1px solid #E6E7EB; } + .next-search-normal.next-normal:hover .next-search-left, + .next-search-normal.next-normal:hover .next-btn { + border-color: #A0A2AD; } + .next-search-normal.next-normal .next-search-btn { + background: #F7F8FA; + border-color: #C4C6CF; + color: #666666; } + .next-search-normal.next-normal .next-search-btn:hover { + background: #EBECF0; + border-color: #A0A2AD; + color: #333333; } + .next-search-normal.next-normal .next-search-btn .next-icon { + color: #666666; } + .next-search-normal.next-normal .next-search-btn .next-icon:hover { + color: #333333; } + .next-search-normal.next-normal.next-large { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal.next-normal.next-large .next-search-left, .next-search-normal.next-normal.next-large .next-search-btn { + border-width: 1px; + height: 60px; } + .next-search-normal.next-normal.next-large .next-search-input { + height: 58px; + overflow-y: hidden; } + .next-search-normal.next-normal.next-large .next-search-input input { + height: 58px; + line-height: 58px \0; } + .next-search-normal.next-normal.next-large .next-select { + height: 58px; } + .next-search-normal.next-normal.next-large .next-search-btn { + font-size: 16px; } + .next-search-normal.next-normal.next-large .next-search-btn .next-icon:before { + width: 24px; + font-size: 24px; + line-height: inherit; } + .next-search-normal.next-normal.next-large .next-search-btn .next-search-btn-text { + display: inline-block; + padding-left: 0; } + .next-search-normal.next-normal.next-medium { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal.next-normal.next-medium .next-search-left, .next-search-normal.next-normal.next-medium .next-search-btn { + border-width: 1px; + height: 40px; } + .next-search-normal.next-normal.next-medium .next-search-input { + height: 38px; + overflow-y: hidden; } + .next-search-normal.next-normal.next-medium .next-search-input input { + height: 38px; + line-height: 38px \0; } + .next-search-normal.next-normal.next-medium .next-select { + height: 38px; } + .next-search-normal.next-normal.next-medium .next-search-btn { + font-size: 16px; } + .next-search-normal.next-normal.next-medium .next-search-btn .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-search-normal.next-normal.next-medium .next-search-btn .next-search-btn-text { + display: inline-block; + padding-left: 0; } + .next-search-normal.next-normal .next-input { + border-top-left-radius: 2px; + border-bottom-left-radius: 2px; } + .next-search-normal.next-dark .next-search-left { + border-color: #5584FF; } + .next-search-normal.next-dark .next-search-left .next-search-left-addon { + border-right: 1px solid #5584FF; } + .next-search-normal.next-dark:hover .next-search-left, + .next-search-normal.next-dark:hover .next-btn { + border-color: #5584FF; } + .next-search-normal.next-dark .next-search-btn { + background: #5584FF; + border-color: #5584FF; + color: #FFFFFF; } + .next-search-normal.next-dark .next-search-btn:hover { + background: #3E71F7; + border-color: #5584FF; + color: #FFFFFF; } + .next-search-normal.next-dark .next-search-btn .next-icon { + color: #FFFFFF; } + .next-search-normal.next-dark .next-search-btn .next-icon:hover { + color: #FFFFFF; } + .next-search-normal.next-dark .next-select-inner, + .next-search-normal.next-dark input { + color: #FFFFFF; } + .next-search-normal.next-dark .next-input { + background: rgba(255, 255, 255, 0); } + .next-search-normal.next-dark .next-select { + background: rgba(255, 255, 255, 0); } + .next-search-normal.next-dark.next-large { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal.next-dark.next-large .next-search-left, .next-search-normal.next-dark.next-large .next-search-btn { + border-width: 1px; + height: 60px; } + .next-search-normal.next-dark.next-large .next-search-input { + height: 58px; + overflow-y: hidden; } + .next-search-normal.next-dark.next-large .next-search-input input { + height: 58px; + line-height: 58px \0; } + .next-search-normal.next-dark.next-large .next-select { + height: 58px; } + .next-search-normal.next-dark.next-large .next-search-btn { + font-size: 16px; } + .next-search-normal.next-dark.next-large .next-search-btn .next-icon:before { + width: 24px; + font-size: 24px; + line-height: inherit; } + .next-search-normal.next-dark.next-large .next-search-btn .next-search-btn-text { + display: inline-block; + padding-left: 0; } + .next-search-normal.next-dark.next-medium { + -webkit-box-shadow: none; + box-shadow: none; } + .next-search-normal.next-dark.next-medium .next-search-left, .next-search-normal.next-dark.next-medium .next-search-btn { + border-width: 1px; + height: 40px; } + .next-search-normal.next-dark.next-medium .next-search-input { + height: 38px; + overflow-y: hidden; } + .next-search-normal.next-dark.next-medium .next-search-input input { + height: 38px; + line-height: 38px \0; } + .next-search-normal.next-dark.next-medium .next-select { + height: 38px; } + .next-search-normal.next-dark.next-medium .next-search-btn { + font-size: 16px; } + .next-search-normal.next-dark.next-medium .next-search-btn .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-search-normal.next-dark.next-medium .next-search-btn .next-search-btn-text { + display: inline-block; + padding-left: 0; } + .next-search-normal:not([dir=rtl]) .next-search-left { + border-right: none; } + .next-search-simple { + width: 300px; + -webkit-box-shadow: none; + box-shadow: none; + border-radius: 3px; } + .next-search-simple .next-search-icon { + cursor: pointer; + -webkit-transition: all .3s ease-out; + transition: all .3s ease-out; } + .next-search-simple .next-search-left, .next-search-simple .next-input { + border-radius: 3px; } + .next-search-simple.next-large .next-search-icon { + margin-right: 12px; } + .next-search-simple.next-medium .next-search-icon { + margin-right: 8px; } + .next-search-simple.next-normal .next-search-left { + border-color: #C4C6CF; } + .next-search-simple.next-normal .next-search-left .next-search-left-addon { + border-right: 1px solid #C4C6CF; } + .next-search-simple.next-normal:hover .next-search-left { + border-color: #A0A2AD; } + .next-search-simple.next-normal .next-search-icon { + color: #999999; } + .next-search-simple.next-normal .next-search-icon:hover { + color: #666666; } + .next-search-simple.next-normal .next-search-left { + border-width: 1px; } + .next-search-simple.next-normal.next-large .next-search-icon:before { + width: 20px; + font-size: 20px; + line-height: inherit; } + .next-search-simple.next-normal.next-medium .next-search-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-search-simple.next-dark .next-search-left { + border-color: #C4C6CF; } + .next-search-simple.next-dark .next-search-left .next-search-left-addon { + border-right: 1px solid #C4C6CF; } + .next-search-simple.next-dark:hover .next-search-left { + border-color: #C4C6CF; } + .next-search-simple.next-dark .next-search-icon { + color: #999999; } + .next-search-simple.next-dark .next-search-icon:hover { + color: #666666; } + .next-search-simple.next-dark .next-select-inner, + .next-search-simple.next-dark input { + color: #FFFFFF; } + .next-search-simple.next-dark .next-input { + background: rgba(255, 255, 255, 0); } + .next-search-simple.next-dark .next-select { + background: rgba(255, 255, 255, 0); } + .next-search-simple.next-dark .next-search-left { + border-width: 1px; } + .next-search-simple.next-dark.next-large .next-search-icon:before { + width: 20px; + font-size: 20px; + line-height: inherit; } + .next-search-simple.next-dark.next-medium .next-search-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-search-simple .next-select.next-large { + height: 38px; } + +.next-search-simple .next-select.next-medium { + height: 26px; } + +/* Slider */ +/* -------------------------------------- */ +.next-slick { + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: relative; + display: block; + -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -ms-touch-action: pan-y; + touch-action: pan-y; + -webkit-tap-highlight-color: transparent; + /* 水平滑动 */ + /* 垂直滑动 */ } + .next-slick *, + .next-slick *:before, + .next-slick *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-slick-initialized .next-slick-slide { + display: block; } + .next-slick-list { + position: relative; + overflow: hidden; + display: block; + margin: 0; + padding: 0; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + .next-slick-list:focus { + outline: none; } + .next-slick-list.dragging { + cursor: pointer; + cursor: hand; } + .next-slick-track { + position: relative; + top: 0; + left: 0; + display: block; + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } + .next-slick-slide { + float: left; + height: 100%; + min-height: 1px; + outline: 0; + -webkit-transition: all 0.3s cubic-bezier(0.86, 0, 0.07, 1); + transition: all 0.3s cubic-bezier(0.86, 0, 0.07, 1); } + .next-slick[dir="rtl"] .next-slick-slide { + float: right; } + .next-slick-slide img { + display: block; } + .next-slick-arrow { + display: block; + position: absolute; + cursor: pointer; + text-align: center; + -webkit-transition: .4s ease-in; + transition: .4s ease-in; + /* prev/next 按钮不同位置下的外观 */ } + .next-slick-arrow.inner { + color: #FFFFFF; + background: #000000; + opacity: 0.2; + padding: 0; + border: none; } + .next-slick-arrow.inner:focus, .next-slick-arrow.inner:hover { + color: #FFFFFF; + background: #000000; + opacity: 0.4; } + .next-slick-arrow.inner.disabled { + color: #CCCCCC; + background: #F7F8FA; + opacity: 0.5; } + .next-slick-arrow.outer { + color: #666666; + background: transparent; + opacity: 0.32; + padding: 0; + border: none; + border-radius: 0; } + .next-slick-arrow.outer:focus, .next-slick-arrow.outer:hover { + color: #333333; + background: transparent; + opacity: 0.32; } + .next-slick-arrow.outer.disabled { + color: #CCCCCC; + background: transparent; + opacity: 0.32; } + .next-slick-arrow.disabled { + cursor: not-allowed; } + .next-slick-dots { + display: block; + position: absolute; + margin: 0; + padding: 0; + /* dots 位于水平位置 */ + /* dots 位于右侧垂直位置 */ } + .next-slick-dots-item { + position: relative; + display: inline-block; + cursor: pointer; } + .next-slick-dots-item button { + cursor: pointer; + border-width: 0; + border-color: white; + border-style: solid; + outline: none; + padding: 0; + height: 8px; + width: 8px; + border-radius: 50%; + background: rgba(0, 0, 0, 0.32); } + .next-slick-dots-item button:hover { + background-color: rgba(0, 0, 0, 0.32); + /* border-width: $slick-dots-border-width-hover; */ + border-color: white; } + .next-slick-dots-item button:focus, + .next-slick-dots-item.active button { + background: #5584ff; + /* border-width: $slick-dots-border-width-selected; */ + border-color: white; + -webkit-animation: zoom 0.3s cubic-bezier(0.86, 0, 0.07, 1); + animation: zoom 0.3s cubic-bezier(0.86, 0, 0.07, 1); } + .next-slick-dots.hoz { + width: 100%; + bottom: 12px; + left: 0; + text-align: center; } + .next-slick-dots.hoz .next-slick-dots-item { + margin: 0 4px; } + .next-slick-dots.ver { + width: 16px; + top: 0; + right: 20px; + bottom: 0; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } + .next-slick-dots.ver .next-slick-dots-item { + margin: 0 0; } + .next-slick.next-slick-hoz.next-slick-outer { + padding: 0 24px; } + .next-slick.next-slick-hoz .next-slick-arrow.medium { + width: 28px; + height: 56px; + line-height: 56px; } + .next-slick.next-slick-hoz .next-slick-arrow.medium .next-icon:before { + width: 20px; + font-size: 20px; + line-height: inherit; } + .next-slick.next-slick-hoz .next-slick-arrow.medium.inner { + top: calc((100% - 56px) / 2); } + .next-slick.next-slick-hoz .next-slick-arrow.medium.inner.next-slick-prev { + left: 0; } + .next-slick.next-slick-hoz .next-slick-arrow.medium.inner.next-slick-next { + right: 0; } + .next-slick.next-slick-hoz .next-slick-arrow.medium.outer { + top: calc((100% - 56px) / 2); } + .next-slick.next-slick-hoz .next-slick-arrow.medium.outer.next-slick-prev { + left: -4px; } + .next-slick.next-slick-hoz .next-slick-arrow.medium.outer.next-slick-next { + right: -4px; } + .next-slick.next-slick-hoz .next-slick-arrow.large { + width: 48px; + height: 96px; + line-height: 96px; } + .next-slick.next-slick-hoz .next-slick-arrow.large .next-icon:before { + width: 32px; + font-size: 32px; + line-height: inherit; } + .next-slick.next-slick-hoz .next-slick-arrow.large.inner { + top: calc((100% - 96px) / 2); } + .next-slick.next-slick-hoz .next-slick-arrow.large.inner.next-slick-prev { + left: 0; } + .next-slick.next-slick-hoz .next-slick-arrow.large.inner.next-slick-next { + right: 0; } + .next-slick.next-slick-hoz .next-slick-arrow.large.outer { + top: calc((100% - 96px) / 2); } + .next-slick.next-slick-hoz .next-slick-arrow.large.outer.next-slick-prev { + left: -8px; } + .next-slick.next-slick-hoz .next-slick-arrow.large.outer.next-slick-next { + right: -8px; } + .next-slick.next-slick-ver.next-slick-outer { + padding: 24px 0; } + .next-slick.next-slick-ver .next-slick-slide { + display: block; + height: auto; + /* border: $slick-ver-slide-border-width solid transparent; */ } + .next-slick.next-slick-ver .next-slick-arrow { + /* size medium */ + /* size medium & position inner */ + /* size medium & position outer */ + /* size large */ + /* size large & position inner */ + /* size large & position outer */ } + .next-slick.next-slick-ver .next-slick-arrow.medium { + width: 56px; + height: 28px; + line-height: 28px; } + .next-slick.next-slick-ver .next-slick-arrow.medium .next-icon:before { + width: 20px; + font-size: 20px; + line-height: inherit; } + .next-slick.next-slick-ver .next-slick-arrow.medium.inner { + left: calc((100% - 56px) / 2); } + .next-slick.next-slick-ver .next-slick-arrow.medium.inner.next-slick-prev { + top: 0; } + .next-slick.next-slick-ver .next-slick-arrow.medium.inner.next-slick-next { + bottom: 0; } + .next-slick.next-slick-ver .next-slick-arrow.medium.outer { + left: calc((100% - 56px) / 2); } + .next-slick.next-slick-ver .next-slick-arrow.medium.outer.next-slick-prev { + top: -4px; } + .next-slick.next-slick-ver .next-slick-arrow.medium.outer.next-slick-next { + bottom: -4px; } + .next-slick.next-slick-ver .next-slick-arrow.large { + width: 96px; + height: 48px; + line-height: 48px; } + .next-slick.next-slick-ver .next-slick-arrow.large .next-icon:before { + width: 32px; + font-size: 32px; + line-height: inherit; } + .next-slick.next-slick-ver .next-slick-arrow.large.inner { + left: calc((100% - 96px) / 2); } + .next-slick.next-slick-ver .next-slick-arrow.large.inner.next-slick-prev { + top: 0; } + .next-slick.next-slick-ver .next-slick-arrow.large.inner.next-slick-next { + bottom: 0; } + .next-slick.next-slick-ver .next-slick-arrow.large.outer { + left: calc((100% - 96px) / 2); } + .next-slick.next-slick-ver .next-slick-arrow.large.outer.next-slick-prev { + top: -16px; } + .next-slick.next-slick-ver .next-slick-arrow.large.outer.next-slick-next { + bottom: -16px; } + +.next-split-btn { + display: inline-block; + position: relative; } + .next-split-btn-trigger .next-icon { + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); + transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } + .next-split-btn-trigger.next-expand .next-icon { + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + transform: rotate(180deg); } + .next-split-btn-trigger.next-btn-normal:not(:disabled):not(.disabled) .next-icon { + color: #999999; } + .next-split-btn-trigger.next-small { + padding-left: 4px; + padding-right: 4px; } + .next-split-btn-trigger.next-medium { + padding-left: 8px; + padding-right: 8px; } + +.next-step *, +.next-step *:before, +.next-step *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +.next-step, .next-step:before, .next-step:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +.next-step { + width: 100%; + position: relative; + border: none; } + .next-step-item { + position: relative; + vertical-align: middle; + outline: 0; + height: 100%; } + .next-step-item-body { + outline: 0; } + .next-step-item-node { + -webkit-transition: all .2s ease; + transition: all .2s ease; } + .next-step-item-node.clicked { + -webkit-transform: scale3d(0.8, 0.8, 0.8); + transform: scale3d(0.8, 0.8, 0.8); } + .next-step-horizontal { + overflow: hidden; } + .next-step-horizontal > .next-step-item { + display: inline-block; + text-align: left; } + .next-step-vertical > .next-step-item { + display: block; + text-align: center; } + +.next-step-arrow { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + .next-step-arrow .next-step-item { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + height: 32px; + line-height: 32px; + margin-left: 16px; + margin-right: 4px; } + .next-step-arrow .next-step-item:before { + content: ''; + position: absolute; + left: -16px; + top: 0; + z-index: 1; + border: 16px solid transparent; + border-left-color: transparent; } + .next-step-arrow .next-step-item:after { + content: ''; + position: absolute; + right: -16px; + top: 0; + z-index: 1; + border-top: 16px solid transparent; + border-bottom: 16px solid transparent; + border-left: 16px solid transparent; } + .next-step-arrow .next-step-item .next-step-item-container { + min-width: 100px; + height: 32px; + cursor: pointer; } + .next-step-arrow .next-step-item .next-step-item-container .next-step-item-title { + height: 32px; + line-height: 32px; + font-weight: bold; + font-size: 14px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + text-align: center; } + .next-step-arrow > .next-step-item-wait { + background: #EBECF0; } + .next-step-arrow > .next-step-item-wait .next-step-item-tail-overlay { + background: #000000; } + .next-step-arrow > .next-step-item-wait .next-step-item-tail-underlay { + background: #CCCCCC; } + .next-step-arrow > .next-step-item-wait > .next-step-item-container .next-step-item-progress { + width: 32px; + height: 32px; } + .next-step-arrow > .next-step-item-wait > .next-step-item-container .next-step-item-node { + color: #000000; } + .next-step-arrow > .next-step-item-wait > .next-step-item-container .next-step-item-node-circle { + background: #EBECF0; + border-color: #000000; } + .next-step-arrow > .next-step-item-wait > .next-step-item-container .next-step-item-node-dot { + background: #EBECF0; + border-color: #000000; } + .next-step-arrow > .next-step-item-wait .next-step-item-title { + color: #999999; + word-break: break-word; } + .next-step-arrow > .next-step-item-wait .next-step-item-content { + color: #999999; + font-size: 12px; + word-break: break-word; } + .next-step-arrow > .next-step-item-wait .next-step-item-node-placeholder { + width: 32px; + height: 32px; + position: relative; } + .next-step-arrow > .next-step-item-wait .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-arrow > .next-step-item-wait .next-step-item-node-circle { + display: block; + width: 32px; + height: 32px; + font-size: 12px; + font-weight: normal; + line-height: 30px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-arrow > .next-step-item-wait .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-arrow > .next-step-item-wait .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-step-arrow > .next-step-item-wait .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -16px; + left: 50%; + margin-left: -16px; + display: block; + width: 32px; + height: 32px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + .next-step-arrow > .next-step-item-wait:before { + border: 16px solid #EBECF0; + border-left-color: transparent; } + .next-step-arrow > .next-step-item-wait:after { + border-left-color: #EBECF0; } + .next-step-arrow > .next-step-item-process { + background: #5584FF; } + .next-step-arrow > .next-step-item-process .next-step-item-tail-overlay { + background: #000000; } + .next-step-arrow > .next-step-item-process .next-step-item-tail-underlay { + background: #CCCCCC; } + .next-step-arrow > .next-step-item-process > .next-step-item-container .next-step-item-progress { + width: 32px; + height: 32px; } + .next-step-arrow > .next-step-item-process > .next-step-item-container .next-step-item-node { + color: #000000; } + .next-step-arrow > .next-step-item-process > .next-step-item-container .next-step-item-node-circle { + background: #5584FF; + border-color: #000000; } + .next-step-arrow > .next-step-item-process > .next-step-item-container .next-step-item-node-dot { + background: #5584FF; + border-color: #000000; } + .next-step-arrow > .next-step-item-process .next-step-item-title { + color: #FFFFFF; + word-break: break-word; } + .next-step-arrow > .next-step-item-process .next-step-item-content { + color: #FFFFFF; + font-size: 12px; + word-break: break-word; } + .next-step-arrow > .next-step-item-process .next-step-item-node-placeholder { + width: 32px; + height: 32px; + position: relative; } + .next-step-arrow > .next-step-item-process .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-arrow > .next-step-item-process .next-step-item-node-circle { + display: block; + width: 32px; + height: 32px; + font-size: 12px; + font-weight: normal; + line-height: 30px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-arrow > .next-step-item-process .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-arrow > .next-step-item-process .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-step-arrow > .next-step-item-process .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -16px; + left: 50%; + margin-left: -16px; + display: block; + width: 32px; + height: 32px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + .next-step-arrow > .next-step-item-process:before { + border: 16px solid #5584FF; + border-left-color: transparent; } + .next-step-arrow > .next-step-item-process:after { + border-left-color: #5584FF; } + .next-step-arrow > .next-step-item-finish { + background: #DEE8FF; } + .next-step-arrow > .next-step-item-finish .next-step-item-tail-overlay { + background: #000000; } + .next-step-arrow > .next-step-item-finish .next-step-item-tail-underlay { + background: #CCCCCC; } + .next-step-arrow > .next-step-item-finish > .next-step-item-container .next-step-item-progress { + width: 32px; + height: 32px; } + .next-step-arrow > .next-step-item-finish > .next-step-item-container .next-step-item-node { + color: #000000; } + .next-step-arrow > .next-step-item-finish > .next-step-item-container .next-step-item-node-circle { + background: #DEE8FF; + border-color: #000000; } + .next-step-arrow > .next-step-item-finish > .next-step-item-container .next-step-item-node-dot { + background: #DEE8FF; + border-color: #000000; } + .next-step-arrow > .next-step-item-finish .next-step-item-title { + color: #5584FF; + word-break: break-word; } + .next-step-arrow > .next-step-item-finish .next-step-item-content { + color: #5584FF; + font-size: 12px; + word-break: break-word; } + .next-step-arrow > .next-step-item-finish .next-step-item-node-placeholder { + width: 32px; + height: 32px; + position: relative; } + .next-step-arrow > .next-step-item-finish .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-arrow > .next-step-item-finish .next-step-item-node-circle { + display: block; + width: 32px; + height: 32px; + font-size: 12px; + font-weight: normal; + line-height: 30px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-arrow > .next-step-item-finish .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-arrow > .next-step-item-finish .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-step-arrow > .next-step-item-finish .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -16px; + left: 50%; + margin-left: -16px; + display: block; + width: 32px; + height: 32px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + .next-step-arrow > .next-step-item-finish:before { + border: 16px solid #DEE8FF; + border-left-color: transparent; } + .next-step-arrow > .next-step-item-finish:after { + border-left-color: #DEE8FF; } + .next-step-arrow .next-step-item-disabled { + cursor: not-allowed; + background: #F7F8FA; } + .next-step-arrow .next-step-item-disabled .next-step-item-tail-overlay { + background: #000000; } + .next-step-arrow .next-step-item-disabled .next-step-item-tail-underlay { + background: #CCCCCC; } + .next-step-arrow .next-step-item-disabled > .next-step-item-container .next-step-item-progress { + width: 32px; + height: 32px; } + .next-step-arrow .next-step-item-disabled > .next-step-item-container .next-step-item-node { + color: #000000; } + .next-step-arrow .next-step-item-disabled > .next-step-item-container .next-step-item-node-circle { + background: #F7F8FA; + border-color: #000000; } + .next-step-arrow .next-step-item-disabled > .next-step-item-container .next-step-item-node-dot { + background: #F7F8FA; + border-color: #000000; } + .next-step-arrow .next-step-item-disabled .next-step-item-title { + color: #CCCCCC; + word-break: break-word; } + .next-step-arrow .next-step-item-disabled .next-step-item-content { + color: #CCCCCC; + font-size: 12px; + word-break: break-word; } + .next-step-arrow .next-step-item-disabled .next-step-item-node-placeholder { + width: 32px; + height: 32px; + position: relative; } + .next-step-arrow .next-step-item-disabled .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-arrow .next-step-item-disabled .next-step-item-node-circle { + display: block; + width: 32px; + height: 32px; + font-size: 12px; + font-weight: normal; + line-height: 30px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-arrow .next-step-item-disabled .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-arrow .next-step-item-disabled .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-step-arrow .next-step-item-disabled .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -16px; + left: 50%; + margin-left: -16px; + display: block; + width: 32px; + height: 32px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + .next-step-arrow .next-step-item-disabled:before { + border: 16px solid #F7F8FA; + border-left-color: transparent; } + .next-step-arrow .next-step-item-disabled:after { + border-left-color: #F7F8FA; } + .next-step-arrow .next-step-item-disabled .next-step-item-container { + cursor: not-allowed; } + .next-step-arrow .next-step-item-read-only { + cursor: default; } + .next-step-arrow .next-step-item-read-only .next-step-item-container { + cursor: default; } + .next-step-arrow .next-step-item-first { + margin-left: 0; } + .next-step-arrow .next-step-item-first:before { + border: 16px solid transparent; } + .next-step-arrow .next-step-item-last { + margin-right: 0; } + .next-step-arrow .next-step-item-last:after { + border: 16px solid transparent; } + +.next-step-circle .next-step-item-container { + display: inline-block; + vertical-align: middle; + position: relative; + padding: 0 8px; } + .next-step-circle .next-step-item-container .next-step-item-progress .next-progress-circle-text { + color: #5584FF; + font-size: 12px; } + .next-step-circle .next-step-item-container .next-step-item-progress .next-progress-circle-underlay { + stroke: #A0A2AD; + stroke-width: 4px; } + .next-step-circle .next-step-item-container .next-step-item-progress .next-progress-circle-overlay-normal { + stroke: #5584FF; + stroke-width: 4px; } + .next-step-circle .next-step-item-container .next-step-item-node-placeholder { + display: inline-block; } + +.next-step-circle > .next-step-item-wait .next-step-item-tail-overlay { + background: #C4C6CF; } + +.next-step-circle > .next-step-item-wait .next-step-item-tail-underlay { + background: #E6E7EB; } + +.next-step-circle > .next-step-item-wait > .next-step-item-container .next-step-item-progress { + width: 32px; + height: 32px; } + +.next-step-circle > .next-step-item-wait > .next-step-item-container .next-step-item-node { + color: #666666; } + +.next-step-circle > .next-step-item-wait > .next-step-item-container .next-step-item-node-circle { + background: #FFFFFF; + border-color: #A0A2AD; } + +.next-step-circle > .next-step-item-wait > .next-step-item-container .next-step-item-node-dot { + background: #FFFFFF; + border-color: #A0A2AD; } + +.next-step-circle > .next-step-item-wait .next-step-item-title { + color: #666666; + word-break: break-word; } + +.next-step-circle > .next-step-item-wait .next-step-item-content { + color: #666666; + font-size: 12px; + word-break: break-word; } + +.next-step-circle > .next-step-item-wait .next-step-item-node-placeholder { + width: 32px; + height: 32px; + position: relative; } + +.next-step-circle > .next-step-item-wait .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-circle > .next-step-item-wait .next-step-item-node-circle { + display: block; + width: 32px; + height: 32px; + font-size: 12px; + font-weight: normal; + line-height: 30px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-circle > .next-step-item-wait .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-circle > .next-step-item-wait .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-circle > .next-step-item-wait .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -16px; + left: 50%; + margin-left: -16px; + display: block; + width: 32px; + height: 32px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + +.next-step-circle > .next-step-item-process .next-step-item-tail-overlay { + background: #C4C6CF; } + +.next-step-circle > .next-step-item-process .next-step-item-tail-underlay { + background: #E6E7EB; } + +.next-step-circle > .next-step-item-process > .next-step-item-container .next-step-item-progress { + width: 32px; + height: 32px; } + +.next-step-circle > .next-step-item-process > .next-step-item-container .next-step-item-node { + color: #FFFFFF; } + +.next-step-circle > .next-step-item-process > .next-step-item-container .next-step-item-node-circle { + background: #5584FF; + border-color: #5584FF; } + +.next-step-circle > .next-step-item-process > .next-step-item-container .next-step-item-node-dot { + background: #5584FF; + border-color: #5584FF; } + +.next-step-circle > .next-step-item-process .next-step-item-title { + color: #333333; + word-break: break-word; } + +.next-step-circle > .next-step-item-process .next-step-item-content { + color: #333333; + font-size: 12px; + word-break: break-word; } + +.next-step-circle > .next-step-item-process .next-step-item-node-placeholder { + width: 32px; + height: 32px; + position: relative; } + +.next-step-circle > .next-step-item-process .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-circle > .next-step-item-process .next-step-item-node-circle { + display: block; + width: 32px; + height: 32px; + font-size: 12px; + font-weight: normal; + line-height: 30px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-circle > .next-step-item-process .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-circle > .next-step-item-process .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-circle > .next-step-item-process .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -16px; + left: 50%; + margin-left: -16px; + display: block; + width: 32px; + height: 32px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + +.next-step-circle > .next-step-item-finish .next-step-item-tail-overlay { + background: #5584FF; } + +.next-step-circle > .next-step-item-finish .next-step-item-tail-underlay { + background: #E6E7EB; } + +.next-step-circle > .next-step-item-finish > .next-step-item-container .next-step-item-progress { + width: 32px; + height: 32px; } + +.next-step-circle > .next-step-item-finish > .next-step-item-container .next-step-item-node { + color: #5584FF; } + +.next-step-circle > .next-step-item-finish > .next-step-item-container .next-step-item-node-circle { + background: #FFFFFF; + border-color: #5584FF; } + +.next-step-circle > .next-step-item-finish > .next-step-item-container .next-step-item-node-dot { + background: #FFFFFF; + border-color: #5584FF; } + +.next-step-circle > .next-step-item-finish .next-step-item-title { + color: #666666; + word-break: break-word; } + +.next-step-circle > .next-step-item-finish .next-step-item-content { + color: #666666; + font-size: 12px; + word-break: break-word; } + +.next-step-circle > .next-step-item-finish .next-step-item-node-placeholder { + width: 32px; + height: 32px; + position: relative; } + +.next-step-circle > .next-step-item-finish .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-circle > .next-step-item-finish .next-step-item-node-circle { + display: block; + width: 32px; + height: 32px; + font-size: 12px; + font-weight: normal; + line-height: 30px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-circle > .next-step-item-finish .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-circle > .next-step-item-finish .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-circle > .next-step-item-finish .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -16px; + left: 50%; + margin-left: -16px; + display: block; + width: 32px; + height: 32px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + +.next-step-circle .next-step-item-disabled .next-step-item-tail-overlay { + background: #E6E7EB; } + +.next-step-circle .next-step-item-disabled .next-step-item-tail-underlay { + background: #E6E7EB; } + +.next-step-circle .next-step-item-disabled > .next-step-item-container .next-step-item-progress { + width: 32px; + height: 32px; } + +.next-step-circle .next-step-item-disabled > .next-step-item-container .next-step-item-node { + color: #CCCCCC; } + +.next-step-circle .next-step-item-disabled > .next-step-item-container .next-step-item-node-circle { + background: #FFFFFF; + border-color: #E6E7EB; } + +.next-step-circle .next-step-item-disabled > .next-step-item-container .next-step-item-node-dot { + background: #FFFFFF; + border-color: #E6E7EB; } + +.next-step-circle .next-step-item-disabled .next-step-item-title { + color: #CCCCCC; + word-break: break-word; } + +.next-step-circle .next-step-item-disabled .next-step-item-content { + color: #CCCCCC; + font-size: 12px; + word-break: break-word; } + +.next-step-circle .next-step-item-disabled .next-step-item-node-placeholder { + width: 32px; + height: 32px; + position: relative; } + +.next-step-circle .next-step-item-disabled .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-circle .next-step-item-disabled .next-step-item-node-circle { + display: block; + width: 32px; + height: 32px; + font-size: 12px; + font-weight: normal; + line-height: 30px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-circle .next-step-item-disabled .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-circle .next-step-item-disabled .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-circle .next-step-item-disabled .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -16px; + left: 50%; + margin-left: -16px; + display: block; + width: 32px; + height: 32px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + +.next-step-circle .next-step-item-disabled .next-step-item-node-placeholder, +.next-step-circle .next-step-item-disabled .next-step-item-node { + cursor: not-allowed; } + +.next-step-circle .next-step-item-read-only .next-step-item-node-placeholder, +.next-step-circle .next-step-item-read-only .next-step-item-node { + cursor: default; } + +.next-step-circle .next-step-item-last .next-step-item-tail { + display: none; } + +.next-step-circle.next-step-horizontal { + text-align: center; + white-space: nowrap; } + .next-step-circle.next-step-horizontal > .next-step-item .next-step-item-title { + white-space: normal; } + .next-step-circle.next-step-horizontal > .next-step-item .next-step-item-content { + white-space: normal; } + .next-step-circle.next-step-horizontal > .next-step-item-wait .next-step-item-tail { + display: inline-block; + clear: both; + width: calc(100% - 48px); + vertical-align: middle; } + .next-step-circle.next-step-horizontal > .next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay { + display: block; + height: 1px; + position: relative; } + .next-step-circle.next-step-horizontal > .next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 1px; + -webkit-transition: all .4s ease; + transition: all .4s ease; + width: 100%; } + .next-step-circle.next-step-horizontal > .next-step-item-wait > .next-step-item-node { + padding: 0 8px; + width: 48px; + height: 32px; } + .next-step-circle.next-step-horizontal > .next-step-item-wait > .next-step-item-body { + width: 100px; + left: -26px; + text-align: center; + position: absolute; } + .next-step-circle.next-step-horizontal > .next-step-item-wait > .next-step-item-body > .next-step-item-title { + font-size: 14px; + line-height: 18px; + margin-top: 8px; + font-weight: bold; } + .next-step-circle.next-step-horizontal > .next-step-item-wait > .next-step-item-body > .next-step-item-content { + margin-top: 4px; } + .next-step-circle.next-step-horizontal > .next-step-item-process .next-step-item-tail { + display: inline-block; + clear: both; + width: calc(100% - 48px); + vertical-align: middle; } + .next-step-circle.next-step-horizontal > .next-step-item-process .next-step-item-tail .next-step-item-tail-underlay { + display: block; + height: 1px; + position: relative; } + .next-step-circle.next-step-horizontal > .next-step-item-process .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 1px; + -webkit-transition: all .4s ease; + transition: all .4s ease; + width: 100%; } + .next-step-circle.next-step-horizontal > .next-step-item-process > .next-step-item-node { + padding: 0 8px; + width: 48px; + height: 32px; } + .next-step-circle.next-step-horizontal > .next-step-item-process > .next-step-item-body { + width: 100px; + left: -26px; + text-align: center; + position: absolute; } + .next-step-circle.next-step-horizontal > .next-step-item-process > .next-step-item-body > .next-step-item-title { + font-size: 14px; + line-height: 18px; + margin-top: 8px; + font-weight: bold; } + .next-step-circle.next-step-horizontal > .next-step-item-process > .next-step-item-body > .next-step-item-content { + margin-top: 4px; } + .next-step-circle.next-step-horizontal > .next-step-item-finish .next-step-item-tail { + display: inline-block; + clear: both; + width: calc(100% - 48px); + vertical-align: middle; } + .next-step-circle.next-step-horizontal > .next-step-item-finish .next-step-item-tail .next-step-item-tail-underlay { + display: block; + height: 1px; + position: relative; } + .next-step-circle.next-step-horizontal > .next-step-item-finish .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 1px; + -webkit-transition: all .4s ease; + transition: all .4s ease; + width: 100%; } + .next-step-circle.next-step-horizontal > .next-step-item-finish > .next-step-item-node { + padding: 0 8px; + width: 48px; + height: 32px; } + .next-step-circle.next-step-horizontal > .next-step-item-finish > .next-step-item-body { + width: 100px; + left: -26px; + text-align: center; + position: absolute; } + .next-step-circle.next-step-horizontal > .next-step-item-finish > .next-step-item-body > .next-step-item-title { + font-size: 14px; + line-height: 18px; + margin-top: 8px; + font-weight: bold; } + .next-step-circle.next-step-horizontal > .next-step-item-finish > .next-step-item-body > .next-step-item-content { + margin-top: 4px; } + .next-step-circle.next-step-horizontal > .next-step-item-disabled .next-step-item-tail { + display: inline-block; + clear: both; + width: calc(100% - 48px); + vertical-align: middle; } + .next-step-circle.next-step-horizontal > .next-step-item-disabled .next-step-item-tail .next-step-item-tail-underlay { + display: block; + height: 1px; + position: relative; } + .next-step-circle.next-step-horizontal > .next-step-item-disabled .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 1px; + -webkit-transition: all .4s ease; + transition: all .4s ease; + width: 100%; } + .next-step-circle.next-step-horizontal > .next-step-item-disabled > .next-step-item-node { + padding: 0 8px; + width: 48px; + height: 32px; } + .next-step-circle.next-step-horizontal > .next-step-item-disabled > .next-step-item-body { + width: 100px; + left: -26px; + text-align: center; + position: absolute; } + .next-step-circle.next-step-horizontal > .next-step-item-disabled > .next-step-item-body > .next-step-item-title { + font-size: 14px; + line-height: 18px; + margin-top: 8px; + font-weight: bold; } + .next-step-circle.next-step-horizontal > .next-step-item-disabled > .next-step-item-body > .next-step-item-content { + margin-top: 4px; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item { + vertical-align: unset; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-wait .next-step-item:last-child .next-step-item-tail { + display: none; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-wait .next-step-item-body { + position: relative; + display: inline-block; + top: 0; + left: 0; + max-width: 100px; + overflow: hidden; + vertical-align: top; + text-align: left; } + .next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-wait .next-step-item-body .next-step-item-title { + display: inline-block; + padding-right: 8px; + margin-top: 9px; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-wait .next-step-item-tail { + width: calc(100% - 148px); + position: absolute; + right: 0; + margin-top: -1px; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-process .next-step-item:last-child .next-step-item-tail { + display: none; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-process .next-step-item-body { + position: relative; + display: inline-block; + top: 0; + left: 0; + max-width: 100px; + overflow: hidden; + vertical-align: top; + text-align: left; } + .next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-process .next-step-item-body .next-step-item-title { + display: inline-block; + padding-right: 8px; + margin-top: 9px; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-process .next-step-item-tail { + width: calc(100% - 148px); + position: absolute; + right: 0; + margin-top: -1px; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-finish .next-step-item:last-child .next-step-item-tail { + display: none; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-finish .next-step-item-body { + position: relative; + display: inline-block; + top: 0; + left: 0; + max-width: 100px; + overflow: hidden; + vertical-align: top; + text-align: left; } + .next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-finish .next-step-item-body .next-step-item-title { + display: inline-block; + padding-right: 8px; + margin-top: 9px; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-finish .next-step-item-tail { + width: calc(100% - 148px); + position: absolute; + right: 0; + margin-top: -1px; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-disabled .next-step-item:last-child .next-step-item-tail { + display: none; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-disabled .next-step-item-body { + position: relative; + display: inline-block; + top: 0; + left: 0; + max-width: 100px; + overflow: hidden; + vertical-align: top; + text-align: left; } + .next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-disabled .next-step-item-body .next-step-item-title { + display: inline-block; + padding-right: 8px; + margin-top: 9px; } + +.next-step-circle.next-step-horizontal.next-step-label-horizontal > .next-step-item-disabled .next-step-item-tail { + width: calc(100% - 148px); + position: absolute; + right: 0; + margin-top: -1px; } + +.next-step-circle.next-step-vertical { + font-size: 0; + display: table-cell; + vertical-align: middle; + position: relative; } + .next-step-circle.next-step-vertical .next-step-item-container { + padding: 0; } + .next-step-circle.next-step-vertical > .next-step-item:last-child .next-step-item-tail { + display: block; + visibility: hidden; } + .next-step-circle.next-step-vertical > .next-step-item-wait .next-step-item-tail { + width: 1px; + height: 0; + margin: 8px auto; } + .next-step-circle.next-step-vertical > .next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay { + height: 100%; + width: 1px; + position: relative; } + .next-step-circle.next-step-vertical > .next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 100%; + width: 1px; } + .next-step-circle.next-step-vertical > .next-step-item-wait > .next-step-item-node { + padding: 8px 0; + width: 32px; + height: 48px; } + .next-step-circle.next-step-vertical > .next-step-item-wait > .next-step-item-body { + position: absolute; + top: 0; + left: 16px; + margin-left: 8px; } + .next-step-circle.next-step-vertical > .next-step-item-wait > .next-step-item-body > .next-step-item-title { + margin-top: 8px; + text-align: left; + font-weight: bold; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-circle.next-step-vertical > .next-step-item-wait > .next-step-item-body > .next-step-item-content { + margin-top: 4px; + min-height: 8px; + text-align: left; + font-size: 12px; + line-height: 16px; } + .next-step-circle.next-step-vertical > .next-step-item-process .next-step-item-tail { + width: 1px; + height: 0; + margin: 8px auto; } + .next-step-circle.next-step-vertical > .next-step-item-process .next-step-item-tail .next-step-item-tail-underlay { + height: 100%; + width: 1px; + position: relative; } + .next-step-circle.next-step-vertical > .next-step-item-process .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 100%; + width: 1px; } + .next-step-circle.next-step-vertical > .next-step-item-process > .next-step-item-node { + padding: 8px 0; + width: 32px; + height: 48px; } + .next-step-circle.next-step-vertical > .next-step-item-process > .next-step-item-body { + position: absolute; + top: 0; + left: 16px; + margin-left: 8px; } + .next-step-circle.next-step-vertical > .next-step-item-process > .next-step-item-body > .next-step-item-title { + margin-top: 8px; + text-align: left; + font-weight: bold; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-circle.next-step-vertical > .next-step-item-process > .next-step-item-body > .next-step-item-content { + margin-top: 4px; + min-height: 8px; + text-align: left; + font-size: 12px; + line-height: 16px; } + .next-step-circle.next-step-vertical > .next-step-item-finish .next-step-item-tail { + width: 1px; + height: 0; + margin: 8px auto; } + .next-step-circle.next-step-vertical > .next-step-item-finish .next-step-item-tail .next-step-item-tail-underlay { + height: 100%; + width: 1px; + position: relative; } + .next-step-circle.next-step-vertical > .next-step-item-finish .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 100%; + width: 1px; } + .next-step-circle.next-step-vertical > .next-step-item-finish > .next-step-item-node { + padding: 8px 0; + width: 32px; + height: 48px; } + .next-step-circle.next-step-vertical > .next-step-item-finish > .next-step-item-body { + position: absolute; + top: 0; + left: 16px; + margin-left: 8px; } + .next-step-circle.next-step-vertical > .next-step-item-finish > .next-step-item-body > .next-step-item-title { + margin-top: 8px; + text-align: left; + font-weight: bold; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-circle.next-step-vertical > .next-step-item-finish > .next-step-item-body > .next-step-item-content { + margin-top: 4px; + min-height: 8px; + text-align: left; + font-size: 12px; + line-height: 16px; } + .next-step-circle.next-step-vertical > .next-step-item-disabled .next-step-item-tail { + width: 1px; + height: 0; + margin: 8px auto; } + .next-step-circle.next-step-vertical > .next-step-item-disabled .next-step-item-tail .next-step-item-tail-underlay { + height: 100%; + width: 1px; + position: relative; } + .next-step-circle.next-step-vertical > .next-step-item-disabled .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 100%; + width: 1px; } + .next-step-circle.next-step-vertical > .next-step-item-disabled > .next-step-item-node { + padding: 8px 0; + width: 32px; + height: 48px; } + .next-step-circle.next-step-vertical > .next-step-item-disabled > .next-step-item-body { + position: absolute; + top: 0; + left: 16px; + margin-left: 8px; } + .next-step-circle.next-step-vertical > .next-step-item-disabled > .next-step-item-body > .next-step-item-title { + margin-top: 8px; + text-align: left; + font-weight: bold; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-circle.next-step-vertical > .next-step-item-disabled > .next-step-item-body > .next-step-item-content { + margin-top: 4px; + min-height: 8px; + text-align: left; + font-size: 12px; + line-height: 16px; } + +.next-step-dot .next-step-item-container { + display: inline-block; + vertical-align: middle; + position: relative; + padding: 0 8px; + font-size: 0; } + .next-step-dot .next-step-item-container .next-step-item-node-placeholder { + display: inline-block; } + .next-step-dot .next-step-item-container .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-dot .next-step-item-container .next-step-item-node .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-dot > .next-step-item-wait .next-step-item-tail-overlay { + background: #C4C6CF; } + +.next-step-dot > .next-step-item-wait .next-step-item-tail-underlay { + background: #E6E7EB; } + +.next-step-dot > .next-step-item-wait > .next-step-item-container .next-step-item-progress { + width: 12px; + height: 12px; } + +.next-step-dot > .next-step-item-wait > .next-step-item-container .next-step-item-node { + color: #999999; } + +.next-step-dot > .next-step-item-wait > .next-step-item-container .next-step-item-node-circle { + background: #FFFFFF; + border-color: #A0A2AD; } + +.next-step-dot > .next-step-item-wait > .next-step-item-container .next-step-item-node-dot { + background: #FFFFFF; + border-color: #A0A2AD; } + +.next-step-dot > .next-step-item-wait .next-step-item-title { + color: #666666; + word-break: break-word; } + +.next-step-dot > .next-step-item-wait .next-step-item-content { + color: #666666; + font-size: 12px; + word-break: break-word; } + +.next-step-dot > .next-step-item-wait .next-step-item-node-placeholder { + width: 12px; + height: 12px; + position: relative; } + +.next-step-dot > .next-step-item-wait .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-dot > .next-step-item-wait .next-step-item-node-circle { + display: block; + width: 12px; + height: 12px; + font-size: 12px; + font-weight: normal; + line-height: 10px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-dot > .next-step-item-wait .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-dot > .next-step-item-wait .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-dot > .next-step-item-wait .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -6px; + left: 50%; + margin-left: -6px; + display: block; + width: 12px; + height: 12px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + +.next-step-dot > .next-step-item-process .next-step-item-tail-overlay { + background: #C4C6CF; } + +.next-step-dot > .next-step-item-process .next-step-item-tail-underlay { + background: #E6E7EB; } + +.next-step-dot > .next-step-item-process > .next-step-item-container .next-step-item-progress { + width: 12px; + height: 12px; } + +.next-step-dot > .next-step-item-process > .next-step-item-container .next-step-item-node { + color: #5584FF; } + +.next-step-dot > .next-step-item-process > .next-step-item-container .next-step-item-node-circle { + background: #5584FF; + border-color: #5584FF; } + +.next-step-dot > .next-step-item-process > .next-step-item-container .next-step-item-node-dot { + background: #5584FF; + border-color: #5584FF; } + +.next-step-dot > .next-step-item-process .next-step-item-title { + color: #333333; + word-break: break-word; } + +.next-step-dot > .next-step-item-process .next-step-item-content { + color: #333333; + font-size: 12px; + word-break: break-word; } + +.next-step-dot > .next-step-item-process .next-step-item-node-placeholder { + width: 12px; + height: 12px; + position: relative; } + +.next-step-dot > .next-step-item-process .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-dot > .next-step-item-process .next-step-item-node-circle { + display: block; + width: 12px; + height: 12px; + font-size: 12px; + font-weight: normal; + line-height: 10px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-dot > .next-step-item-process .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-dot > .next-step-item-process .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-dot > .next-step-item-process .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -6px; + left: 50%; + margin-left: -6px; + display: block; + width: 12px; + height: 12px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + +.next-step-dot > .next-step-item-finish .next-step-item-tail-overlay { + background: #5584FF; } + +.next-step-dot > .next-step-item-finish .next-step-item-tail-underlay { + background: #E6E7EB; } + +.next-step-dot > .next-step-item-finish > .next-step-item-container .next-step-item-progress { + width: 12px; + height: 12px; } + +.next-step-dot > .next-step-item-finish > .next-step-item-container .next-step-item-node { + color: #5584FF; } + +.next-step-dot > .next-step-item-finish > .next-step-item-container .next-step-item-node-circle { + background: #FFFFFF; + border-color: #5584FF; } + +.next-step-dot > .next-step-item-finish > .next-step-item-container .next-step-item-node-dot { + background: #FFFFFF; + border-color: #5584FF; } + +.next-step-dot > .next-step-item-finish .next-step-item-title { + color: #666666; + word-break: break-word; } + +.next-step-dot > .next-step-item-finish .next-step-item-content { + color: #666666; + font-size: 12px; + word-break: break-word; } + +.next-step-dot > .next-step-item-finish .next-step-item-node-placeholder { + width: 12px; + height: 12px; + position: relative; } + +.next-step-dot > .next-step-item-finish .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-dot > .next-step-item-finish .next-step-item-node-circle { + display: block; + width: 12px; + height: 12px; + font-size: 12px; + font-weight: normal; + line-height: 10px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-dot > .next-step-item-finish .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-dot > .next-step-item-finish .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-dot > .next-step-item-finish .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -6px; + left: 50%; + margin-left: -6px; + display: block; + width: 12px; + height: 12px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + +.next-step-dot .next-step-item-disabled .next-step-item-tail-overlay { + background: #E6E7EB; } + +.next-step-dot .next-step-item-disabled .next-step-item-tail-underlay { + background: #E6E7EB; } + +.next-step-dot .next-step-item-disabled > .next-step-item-container .next-step-item-progress { + width: 12px; + height: 12px; } + +.next-step-dot .next-step-item-disabled > .next-step-item-container .next-step-item-node { + color: #E6E7EB; } + +.next-step-dot .next-step-item-disabled > .next-step-item-container .next-step-item-node-circle { + background: #FFFFFF; + border-color: #DCDEE3; } + +.next-step-dot .next-step-item-disabled > .next-step-item-container .next-step-item-node-dot { + background: #FFFFFF; + border-color: #DCDEE3; } + +.next-step-dot .next-step-item-disabled .next-step-item-title { + color: #CCCCCC; + word-break: break-word; } + +.next-step-dot .next-step-item-disabled .next-step-item-content { + color: #CCCCCC; + font-size: 12px; + word-break: break-word; } + +.next-step-dot .next-step-item-disabled .next-step-item-node-placeholder { + width: 12px; + height: 12px; + position: relative; } + +.next-step-dot .next-step-item-disabled .next-step-item-node { + position: relative; + display: inline-block; + text-align: center; + cursor: pointer; } + .next-step-dot .next-step-item-disabled .next-step-item-node-circle { + display: block; + width: 12px; + height: 12px; + font-size: 12px; + font-weight: normal; + line-height: 10px; + text-align: center; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .2s ease, border-color .2s ease; + transition: background-color .2s ease, border-color .2s ease; } + .next-step-dot .next-step-item-disabled .next-step-item-node-circle .next-icon { + -webkit-animation: zoomIn .2s linear; + animation: zoomIn .2s linear; } + .next-step-dot .next-step-item-disabled .next-step-item-node-circle .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-step-dot .next-step-item-disabled .next-step-item-node-dot { + position: absolute; + top: 50%; + margin-top: -6px; + left: 50%; + margin-left: -6px; + display: block; + width: 12px; + height: 12px; + border: 1px solid; + border-radius: 50%; + -webkit-transition: background-color .3s ease, border-color .3s ease; + transition: background-color .3s ease, border-color .3s ease; } + +.next-step-dot .next-step-item-disabled .next-step-item-node-placeholder, +.next-step-dot .next-step-item-disabled .next-step-item-node { + cursor: not-allowed; } + +.next-step-dot .next-step-item-read-only .next-step-item-node-placeholder, +.next-step-dot .next-step-item-read-only .next-step-item-node { + cursor: default; } + +.next-step-dot .next-step-item-last .next-step-item-tail { + display: none; } + +.next-step-dot.next-step-horizontal { + text-align: center; + white-space: nowrap; } + .next-step-dot.next-step-horizontal > .next-step-item .next-step-item-title { + white-space: normal; } + .next-step-dot.next-step-horizontal > .next-step-item .next-step-item-content { + white-space: normal; } + .next-step-dot.next-step-horizontal .next-step-item-node .next-icon { + vertical-align: middle; } + .next-step-dot.next-step-horizontal > .next-step-item-wait .next-step-item-tail { + display: inline-block; + clear: both; + width: calc(100% - 28px); + vertical-align: middle; } + .next-step-dot.next-step-horizontal > .next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay { + display: block; + height: 1px; + position: relative; } + .next-step-dot.next-step-horizontal > .next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 1px; + -webkit-transition: all .4s ease; + transition: all .4s ease; + width: 100%; } + .next-step-dot.next-step-horizontal > .next-step-item-wait > .next-step-item-node { + padding: 0 8px; + width: 28px; + height: 12px; } + .next-step-dot.next-step-horizontal > .next-step-item-wait > .next-step-item-body { + width: 100px; + left: -36px; + text-align: center; + position: absolute; } + .next-step-dot.next-step-horizontal > .next-step-item-wait > .next-step-item-body > .next-step-item-title { + font-size: 12px; + line-height: 16px; + margin-top: 8px; + font-weight: bold; } + .next-step-dot.next-step-horizontal > .next-step-item-wait > .next-step-item-body > .next-step-item-content { + margin-top: 4px; } + .next-step-dot.next-step-horizontal > .next-step-item-process .next-step-item-tail { + display: inline-block; + clear: both; + width: calc(100% - 28px); + vertical-align: middle; } + .next-step-dot.next-step-horizontal > .next-step-item-process .next-step-item-tail .next-step-item-tail-underlay { + display: block; + height: 1px; + position: relative; } + .next-step-dot.next-step-horizontal > .next-step-item-process .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 1px; + -webkit-transition: all .4s ease; + transition: all .4s ease; + width: 100%; } + .next-step-dot.next-step-horizontal > .next-step-item-process > .next-step-item-node { + padding: 0 8px; + width: 28px; + height: 12px; } + .next-step-dot.next-step-horizontal > .next-step-item-process > .next-step-item-body { + width: 100px; + left: -36px; + text-align: center; + position: absolute; } + .next-step-dot.next-step-horizontal > .next-step-item-process > .next-step-item-body > .next-step-item-title { + font-size: 12px; + line-height: 16px; + margin-top: 8px; + font-weight: bold; } + .next-step-dot.next-step-horizontal > .next-step-item-process > .next-step-item-body > .next-step-item-content { + margin-top: 4px; } + .next-step-dot.next-step-horizontal > .next-step-item-finish .next-step-item-tail { + display: inline-block; + clear: both; + width: calc(100% - 28px); + vertical-align: middle; } + .next-step-dot.next-step-horizontal > .next-step-item-finish .next-step-item-tail .next-step-item-tail-underlay { + display: block; + height: 1px; + position: relative; } + .next-step-dot.next-step-horizontal > .next-step-item-finish .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 1px; + -webkit-transition: all .4s ease; + transition: all .4s ease; + width: 100%; } + .next-step-dot.next-step-horizontal > .next-step-item-finish > .next-step-item-node { + padding: 0 8px; + width: 28px; + height: 12px; } + .next-step-dot.next-step-horizontal > .next-step-item-finish > .next-step-item-body { + width: 100px; + left: -36px; + text-align: center; + position: absolute; } + .next-step-dot.next-step-horizontal > .next-step-item-finish > .next-step-item-body > .next-step-item-title { + font-size: 12px; + line-height: 16px; + margin-top: 8px; + font-weight: bold; } + .next-step-dot.next-step-horizontal > .next-step-item-finish > .next-step-item-body > .next-step-item-content { + margin-top: 4px; } + .next-step-dot.next-step-horizontal > .next-step-item-disabled .next-step-item-tail { + display: inline-block; + clear: both; + width: calc(100% - 28px); + vertical-align: middle; } + .next-step-dot.next-step-horizontal > .next-step-item-disabled .next-step-item-tail .next-step-item-tail-underlay { + display: block; + height: 1px; + position: relative; } + .next-step-dot.next-step-horizontal > .next-step-item-disabled .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 1px; + -webkit-transition: all .4s ease; + transition: all .4s ease; + width: 100%; } + .next-step-dot.next-step-horizontal > .next-step-item-disabled > .next-step-item-node { + padding: 0 8px; + width: 28px; + height: 12px; } + .next-step-dot.next-step-horizontal > .next-step-item-disabled > .next-step-item-body { + width: 100px; + left: -36px; + text-align: center; + position: absolute; } + .next-step-dot.next-step-horizontal > .next-step-item-disabled > .next-step-item-body > .next-step-item-title { + font-size: 12px; + line-height: 16px; + margin-top: 8px; + font-weight: bold; } + .next-step-dot.next-step-horizontal > .next-step-item-disabled > .next-step-item-body > .next-step-item-content { + margin-top: 4px; } + +.next-step-dot.next-step-vertical { + padding: 0 0 0 4px; + font-size: 0; + display: table-cell; + position: relative; } + .next-step-dot.next-step-vertical .next-step-item-container { + padding: 0; } + .next-step-dot.next-step-vertical > .next-step-item:last-child .next-step-item-tail { + display: block; + visibility: hidden; } + .next-step-dot.next-step-vertical > .next-step-item-wait .next-step-item-tail { + width: 1px; + height: 0; + margin: 8px auto; } + .next-step-dot.next-step-vertical > .next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay { + height: 100%; + width: 1px; + position: relative; } + .next-step-dot.next-step-vertical > .next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 100%; + width: 1px; } + .next-step-dot.next-step-vertical > .next-step-item-wait > .next-step-item-node { + padding: 8px 0; + width: 12px; + height: 28px; } + .next-step-dot.next-step-vertical > .next-step-item-wait > .next-step-item-body { + position: absolute; + top: 0; + left: 6px; + margin-left: 8px; } + .next-step-dot.next-step-vertical > .next-step-item-wait > .next-step-item-body > .next-step-item-title { + margin-top: 0; + font-weight: bold; + text-align: left; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-dot.next-step-vertical > .next-step-item-wait > .next-step-item-body > .next-step-item-content { + margin-top: 8px; + min-height: 8px; + text-align: left; + font-size: 12px; + line-height: 16px; } + .next-step-dot.next-step-vertical > .next-step-item-process .next-step-item-tail { + width: 1px; + height: 0; + margin: 8px auto; } + .next-step-dot.next-step-vertical > .next-step-item-process .next-step-item-tail .next-step-item-tail-underlay { + height: 100%; + width: 1px; + position: relative; } + .next-step-dot.next-step-vertical > .next-step-item-process .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 100%; + width: 1px; } + .next-step-dot.next-step-vertical > .next-step-item-process > .next-step-item-node { + padding: 8px 0; + width: 12px; + height: 28px; } + .next-step-dot.next-step-vertical > .next-step-item-process > .next-step-item-body { + position: absolute; + top: 0; + left: 6px; + margin-left: 8px; } + .next-step-dot.next-step-vertical > .next-step-item-process > .next-step-item-body > .next-step-item-title { + margin-top: 0; + font-weight: bold; + text-align: left; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-dot.next-step-vertical > .next-step-item-process > .next-step-item-body > .next-step-item-content { + margin-top: 8px; + min-height: 8px; + text-align: left; + font-size: 12px; + line-height: 16px; } + .next-step-dot.next-step-vertical > .next-step-item-finish .next-step-item-tail { + width: 1px; + height: 0; + margin: 8px auto; } + .next-step-dot.next-step-vertical > .next-step-item-finish .next-step-item-tail .next-step-item-tail-underlay { + height: 100%; + width: 1px; + position: relative; } + .next-step-dot.next-step-vertical > .next-step-item-finish .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 100%; + width: 1px; } + .next-step-dot.next-step-vertical > .next-step-item-finish > .next-step-item-node { + padding: 8px 0; + width: 12px; + height: 28px; } + .next-step-dot.next-step-vertical > .next-step-item-finish > .next-step-item-body { + position: absolute; + top: 0; + left: 6px; + margin-left: 8px; } + .next-step-dot.next-step-vertical > .next-step-item-finish > .next-step-item-body > .next-step-item-title { + margin-top: 0; + font-weight: bold; + text-align: left; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-dot.next-step-vertical > .next-step-item-finish > .next-step-item-body > .next-step-item-content { + margin-top: 8px; + min-height: 8px; + text-align: left; + font-size: 12px; + line-height: 16px; } + .next-step-dot.next-step-vertical > .next-step-item-disabled .next-step-item-tail { + width: 1px; + height: 0; + margin: 8px auto; } + .next-step-dot.next-step-vertical > .next-step-item-disabled .next-step-item-tail .next-step-item-tail-underlay { + height: 100%; + width: 1px; + position: relative; } + .next-step-dot.next-step-vertical > .next-step-item-disabled .next-step-item-tail .next-step-item-tail-overlay { + position: absolute; + top: 0; + height: 100%; + width: 1px; } + .next-step-dot.next-step-vertical > .next-step-item-disabled > .next-step-item-node { + padding: 8px 0; + width: 12px; + height: 28px; } + .next-step-dot.next-step-vertical > .next-step-item-disabled > .next-step-item-body { + position: absolute; + top: 0; + left: 6px; + margin-left: 8px; } + .next-step-dot.next-step-vertical > .next-step-item-disabled > .next-step-item-body > .next-step-item-title { + margin-top: 0; + font-weight: bold; + text-align: left; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-dot.next-step-vertical > .next-step-item-disabled > .next-step-item-body > .next-step-item-content { + margin-top: 8px; + min-height: 8px; + text-align: left; + font-size: 12px; + line-height: 16px; } + +.next-step-horizontal[dir="rtl"] > .next-step-item { + text-align: right; } + +.next-step-arrow[dir="rtl"] .next-step-item { + height: 32px; + line-height: 32px; + margin-left: 4px; + margin-right: 16px; } + .next-step-arrow[dir="rtl"] .next-step-item:before { + right: -16px; + left: auto; + border: 16px solid transparent; + border-right-color: transparent; } + .next-step-arrow[dir="rtl"] .next-step-item:after { + left: -32px; + right: auto; + border-top: 16px solid transparent; + border-bottom: 16px solid transparent; + border-right: 16px solid transparent; } + +.next-step-arrow[dir="rtl"] > .next-step-item-wait { + background: #EBECF0; } + .next-step-arrow[dir="rtl"] > .next-step-item-wait .next-step-item-node-dot { + right: 50%; + left: auto; } + .next-step-arrow[dir="rtl"] > .next-step-item-wait:before { + border: 16px solid #EBECF0; + border-right-color: transparent; } + .next-step-arrow[dir="rtl"] > .next-step-item-wait:after { + border-right-color: #EBECF0; + border-left-color: transparent; } + +.next-step-arrow[dir="rtl"] > .next-step-item-process { + background: #5584FF; } + .next-step-arrow[dir="rtl"] > .next-step-item-process .next-step-item-node-dot { + right: 50%; + left: auto; } + .next-step-arrow[dir="rtl"] > .next-step-item-process:before { + border: 16px solid #5584FF; + border-right-color: transparent; } + .next-step-arrow[dir="rtl"] > .next-step-item-process:after { + border-right-color: #5584FF; + border-left-color: transparent; } + +.next-step-arrow[dir="rtl"] > .next-step-item-finish { + background: #DEE8FF; } + .next-step-arrow[dir="rtl"] > .next-step-item-finish .next-step-item-node-dot { + right: 50%; + left: auto; } + .next-step-arrow[dir="rtl"] > .next-step-item-finish:before { + border: 16px solid #DEE8FF; + border-right-color: transparent; } + .next-step-arrow[dir="rtl"] > .next-step-item-finish:after { + border-right-color: #DEE8FF; + border-left-color: transparent; } + +.next-step-arrow[dir="rtl"] .next-step-item-disabled { + background: #F7F8FA; } + .next-step-arrow[dir="rtl"] .next-step-item-disabled .next-step-item-node-dot { + right: 50%; + left: auto; } + .next-step-arrow[dir="rtl"] .next-step-item-disabled:before { + border: 16px solid #F7F8FA; + border-right-color: transparent; } + .next-step-arrow[dir="rtl"] .next-step-item-disabled:after { + border-right-color: #F7F8FA; + border-left-color: transparent; } + +.next-step-arrow[dir="rtl"] .next-step-item-first { + margin-right: 0; } + +.next-step-arrow[dir="rtl"] .next-step-item-last { + margin-left: 0; } + +.next-step-circle[dir="rtl"] > .next-step-item-wait .next-step-item-node-dot { + right: 50%; + left: auto; } + +.next-step-circle[dir="rtl"] > .next-step-item-process .next-step-item-node-dot { + right: 50%; + left: auto; } + +.next-step-circle[dir="rtl"] > .next-step-item-finish .next-step-item-node-dot { + right: 50%; + left: auto; } + +.next-step-circle[dir="rtl"] .next-step-item-disabled .next-step-item-node-dot { + right: 50%; + left: auto; } + +.next-step-circle[dir="rtl"].next-step-horizontal > .next-step-item-wait > .next-step-item-body { + right: -26px; + left: auto; } + +.next-step-circle[dir="rtl"].next-step-horizontal > .next-step-item-process > .next-step-item-body { + right: -26px; + left: auto; } + +.next-step-circle[dir="rtl"].next-step-horizontal > .next-step-item-finish > .next-step-item-body { + right: -26px; + left: auto; } + +.next-step-circle[dir="rtl"].next-step-horizontal > .next-step-item-disabled > .next-step-item-body { + right: -26px; + left: auto; } + +.next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-wait .next-step-item-body { + left: auto; + right: 0; + text-align: right; } + .next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-wait .next-step-item-body .next-step-item-title { + padding-left: 8px; + padding-right: 0; } + +.next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-wait .next-step-item-tail { + left: 0; + right: auto; } + +.next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-process .next-step-item-body { + left: auto; + right: 0; + text-align: right; } + .next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-process .next-step-item-body .next-step-item-title { + padding-left: 8px; + padding-right: 0; } + +.next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-process .next-step-item-tail { + left: 0; + right: auto; } + +.next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-finish .next-step-item-body { + left: auto; + right: 0; + text-align: right; } + .next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-finish .next-step-item-body .next-step-item-title { + padding-left: 8px; + padding-right: 0; } + +.next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-finish .next-step-item-tail { + left: 0; + right: auto; } + +.next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-disabled .next-step-item-body { + left: auto; + right: 0; + text-align: right; } + .next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-disabled .next-step-item-body .next-step-item-title { + padding-left: 8px; + padding-right: 0; } + +.next-step-circle[dir="rtl"].next-step-horizontal.next-step-label-horizontal > .next-step-item-disabled .next-step-item-tail { + left: 0; + right: auto; } + +.next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-wait > .next-step-item-body { + right: 16px; + left: auto; + margin-right: 8px; + margin-left: 0; } + .next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-wait > .next-step-item-body > .next-step-item-title { + text-align: right; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-wait > .next-step-item-body > .next-step-item-content { + text-align: right; } + +.next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-process > .next-step-item-body { + right: 16px; + left: auto; + margin-right: 8px; + margin-left: 0; } + .next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-process > .next-step-item-body > .next-step-item-title { + text-align: right; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-process > .next-step-item-body > .next-step-item-content { + text-align: right; } + +.next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-finish > .next-step-item-body { + right: 16px; + left: auto; + margin-right: 8px; + margin-left: 0; } + .next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-finish > .next-step-item-body > .next-step-item-title { + text-align: right; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-finish > .next-step-item-body > .next-step-item-content { + text-align: right; } + +.next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-disabled > .next-step-item-body { + right: 16px; + left: auto; + margin-right: 8px; + margin-left: 0; } + .next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-disabled > .next-step-item-body > .next-step-item-title { + text-align: right; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-circle[dir="rtl"].next-step-vertical > .next-step-item-disabled > .next-step-item-body > .next-step-item-content { + text-align: right; } + +.next-step-dot[dir="rtl"] > .next-step-item-wait .next-step-item-node-dot { + right: 50%; + left: auto; } + +.next-step-dot[dir="rtl"] > .next-step-item-process .next-step-item-node-dot { + right: 50%; + left: auto; } + +.next-step-dot[dir="rtl"] > .next-step-item-finish .next-step-item-node-dot { + right: 50%; + left: auto; } + +.next-step-dot[dir="rtl"] .next-step-item-disabled .next-step-item-node-dot { + right: 50%; + left: auto; } + +.next-step-dot[dir="rtl"].next-step-horizontal > .next-step-item-wait > .next-step-item-body { + right: -36px; + left: auto; } + +.next-step-dot[dir="rtl"].next-step-horizontal > .next-step-item-process > .next-step-item-body { + right: -36px; + left: auto; } + +.next-step-dot[dir="rtl"].next-step-horizontal > .next-step-item-finish > .next-step-item-body { + right: -36px; + left: auto; } + +.next-step-dot[dir="rtl"].next-step-horizontal > .next-step-item-disabled > .next-step-item-body { + right: -36px; + left: auto; } + +.next-step-dot[dir="rtl"].next-step-vertical { + padding: 0 4px 0 0; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-wait > .next-step-item-body { + right: 6px; + left: auto; + margin-right: 8px; + margin-left: 0; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-wait > .next-step-item-body > .next-step-item-title { + text-align: right; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-wait > .next-step-item-body > .next-step-item-content { + text-align: right; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-process > .next-step-item-body { + right: 6px; + left: auto; + margin-right: 8px; + margin-left: 0; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-process > .next-step-item-body > .next-step-item-title { + text-align: right; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-process > .next-step-item-body > .next-step-item-content { + text-align: right; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-finish > .next-step-item-body { + right: 6px; + left: auto; + margin-right: 8px; + margin-left: 0; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-finish > .next-step-item-body > .next-step-item-title { + text-align: right; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-finish > .next-step-item-body > .next-step-item-content { + text-align: right; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-disabled > .next-step-item-body { + right: 6px; + left: auto; + margin-right: 8px; + margin-left: 0; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-disabled > .next-step-item-body > .next-step-item-title { + text-align: right; + font-family: Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"; + font-size: 12px; + line-height: 1.28571; } + .next-step-dot[dir="rtl"].next-step-vertical > .next-step-item-disabled > .next-step-item-body > .next-step-item-content { + text-align: right; } + +.next-switch:after[dir="rtl"] { + content: " "; + -webkit-transition: all 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + transition: all 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + -webkit-transform-origin: right center; + -ms-transform-origin: right center; + transform-origin: right center; } + +.next-switch-medium[dir="rtl"]:after { + right: 100%; + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); } + +.next-switch-small[dir="rtl"]:after { + right: 100%; + -webkit-transform: translateX(100%); + -ms-transform: translateX(100%); + transform: translateX(100%); } + +.next-switch-on[dir="rtl"] > .next-switch-children { + right: 10px; + left: auto; + color: #FFFFFF; } + +.next-switch-on[disabled][dir="rtl"]:after { + left: 0; + right: 100%; + -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); } + +.next-switch-on.next-switch-small[dir="rtl"] > .next-switch-children { + right: 6px; + left: auto; } + +.next-switch-off[dir="rtl"]:after { + right: 0; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + -webkit-box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.12); + box-shadow: -1px 0px 3px 0px rgba(0, 0, 0, 0.12); } + +.next-switch-off[dir="rtl"] > .next-switch-children { + left: 10px; + right: auto; } + +.next-switch-off.next-switch-small[dir="rtl"] > .next-switch-children { + left: 5px; + right: auto; } + +.next-switch { + -webkit-box-sizing: border-box; + box-sizing: border-box; + outline: none; + text-align: left; + -webkit-transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + overflow: hidden; + cursor: pointer; } + .next-switch *, + .next-switch *:before, + .next-switch *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-switch:after { + content: " "; + -webkit-transition: all 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + transition: all 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + -webkit-transform-origin: left center; + -ms-transform-origin: left center; + transform-origin: left center; } + .next-switch-medium { + position: relative; + display: inline-block; + border: 1px solid transparent; + width: 56px; + height: 26px; + border-radius: 20px; } + .next-switch-medium:after { + border: 1px solid transparent; + position: absolute; + left: 100%; + -webkit-transform: translateX(-100%); + -ms-transform: translateX(-100%); + transform: translateX(-100%); + width: 24px; + height: 24px; + border-radius: 20px; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-switch-medium > .next-switch-children { + font-size: 12px; + position: absolute; + height: 24px; + line-height: 24px; } + .next-switch-small { + position: relative; + display: inline-block; + border: 1px solid transparent; + width: 44px; + height: 22px; + border-radius: 20px; } + .next-switch-small:after { + border: 1px solid transparent; + position: absolute; + left: 100%; + -webkit-transform: translateX(-100%); + -ms-transform: translateX(-100%); + transform: translateX(-100%); + width: 20px; + height: 20px; + border-radius: 20px; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-switch-small > .next-switch-children { + font-size: 12px; + position: absolute; + height: 20px; + line-height: 20px; } + .next-switch-on { + background-color: #5584FF; } + .next-switch-on:after { + -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + background-color: #FFFFFF; + border-color: transparent; } + .next-switch-on > .next-switch-children { + left: 10px; + color: #FFFFFF; } + .next-switch-on:focus, .next-switch-on:hover { + background-color: #3E71F7; } + .next-switch-on:focus:after, .next-switch-on:hover:after { + background-color: #FFFFFF; } + .next-switch-on.next-switch-small > .next-switch-children { + left: 6px; } + .next-switch-on[disabled] { + background-color: #EBECF0; + cursor: not-allowed; } + .next-switch-on[disabled]:after { + right: 0; + -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + background-color: #F7F8FA; + border-color: #E6E7EB; } + .next-switch-on[disabled] > .next-switch-children { + color: #CCCCCC; } + .next-switch-off { + background-color: #FFFFFF; + border-color: #C4C6CF; } + .next-switch-off:focus, .next-switch-off:hover { + background-color: #F2F3F7; + border-color: #C4C6CF; } + .next-switch-off:after { + left: 0; + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + background-color: #FFFFFF; + border-color: transparent; } + .next-switch-off:after:focus, .next-switch-off:after:hover { + background-color: #FFFFFF; } + .next-switch-off > .next-switch-children { + right: 10px; + color: #999999; } + .next-switch-off[disabled] { + background-color: #F7F8FA; + cursor: not-allowed; } + .next-switch-off[disabled]:after { + -webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.12); + background-color: #F7F8FA; + border-color: #E6E7EB; } + .next-switch-off[disabled] > .next-switch-children { + color: #C4C6CF; } + .next-switch-off.next-switch-small > .next-switch-children { + right: 5px; } + +.next-tabs { + /* Nav Button */ + /* ----------------- */ + /* position: vertical */ + /* ----------------- */ + /* Size */ + /* ----------------- */ + /* shape: pure */ + /* ----------------- */ + /* Shape: wrapped */ + /* --------------------- */ + /* Shape: wrapped(top) */ + /* Shape: wrapped(bottom) */ + /* Shape: wrapped(left) */ + /* Shape: wrapped(right) */ + /* Shape: text */ + /* ------------------- */ } + .next-tabs { + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 100%; } + .next-tabs *, + .next-tabs *:before, + .next-tabs *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-tabs-bar { + outline: none; } + .next-tabs-bar-popup { + overflow-y: auto; + max-height: 480px; } + .next-tabs-nav-container { + position: relative; } + .next-tabs-nav-container:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + .next-tabs-nav-wrap { + overflow: hidden; } + .next-tabs-nav-scroll { + overflow: hidden; + white-space: nowrap; } + .next-tabs-nav { + display: inline-block; + position: relative; + -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); + transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); + list-style: none; + padding: 0; + margin: 0; } + .next-tabs-nav-enter, .next-tabs-nav-appear { + -webkit-animation: fadeInLeft 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + animation: fadeInLeft 0.4s cubic-bezier(0.78, 0.14, 0.15, 0.86); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; } + .next-tabs-nav-leave { + -webkit-animation: fadeOutLeft 0.2s cubic-bezier(0.78, 0.14, 0.15, 0.86); + animation: fadeOutLeft 0.2s cubic-bezier(0.78, 0.14, 0.15, 0.86); + -webkit-animation-fill-mode: both; + animation-fill-mode: both; } + .next-tabs-tab { + display: inline-block; + position: relative; + -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); + transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); } + .next-tabs-tab-inner { + position: relative; + cursor: pointer; + text-decoration: none; } + .next-tabs-tab:before { + content: ""; + position: absolute; + -webkit-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); + transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); } + .next-tabs-tab.active { + font-weight: normal; } + .next-tabs-tab .next-tabs-tab-close { + color: #666666; } + .next-tabs-tab .next-tabs-tab-close:hover { + color: #333333; } + .next-tabs-tab.active .next-tabs-tab-close { + color: #5584FF; } + .next-tabs-tab.disabled .next-tabs-tab-close { + color: #DCDEE3; } + .next-tabs-tab:focus { + outline: none; } + .next-tabs-tabpane { + display: none; } + .next-tabs-tabpane.active { + display: block; } + .next-tabs-btn-down, .next-tabs-btn-prev, .next-tabs-btn-next { + position: absolute; + top: 0; + cursor: pointer; + padding: 0; + border: 0; + outline: none; + height: 100%; + background-color: transparent; + border-color: transparent; } + .next-tabs-btn-down, .next-tabs-btn-down:link, .next-tabs-btn-down:visited, .next-tabs-btn-down.visited, .next-tabs-btn-prev, .next-tabs-btn-prev:link, .next-tabs-btn-prev:visited, .next-tabs-btn-prev.visited, .next-tabs-btn-next, .next-tabs-btn-next:link, .next-tabs-btn-next:visited, .next-tabs-btn-next.visited { + color: #666666; } + .next-tabs-btn-down:focus, .next-tabs-btn-down:hover, .next-tabs-btn-down.hover, .next-tabs-btn-down:active, .next-tabs-btn-down.active, .next-tabs-btn-prev:focus, .next-tabs-btn-prev:hover, .next-tabs-btn-prev.hover, .next-tabs-btn-prev:active, .next-tabs-btn-prev.active, .next-tabs-btn-next:focus, .next-tabs-btn-next:hover, .next-tabs-btn-next.hover, .next-tabs-btn-next:active, .next-tabs-btn-next.active { + color: #333333; + background-color: transparent; + border-color: transparent; + text-decoration: none; } + .next-tabs-btn-down.disabled, .next-tabs-btn-prev.disabled, .next-tabs-btn-next.disabled { + cursor: not-allowed; + color: #DCDEE3; } + .next-tabs-btn-next { + right: 8px; } + .next-tabs-btn-prev { + right: 32px; } + .next-tabs-btn-down { + right: 8px; } + .next-tabs-content { + overflow: hidden; } + .next-tabs-vertical > .next-tabs-bar .next-tabs-nav { + width: 100%; } + .next-tabs-vertical > .next-tabs-bar .next-tabs-tab { + display: block; } + .next-tabs.next-medium .next-tabs-nav-container-scrolling { + padding-right: 60px; } + .next-tabs.next-medium .next-tabs-tab-inner { + font-size: 12px; + padding: 12px 16px; } + .next-tabs.next-medium .next-tabs-tab-inner .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-tabs.next-medium .next-tabs-tab-inner .next-tabs-tab-close { + padding-left: 8px; } + .next-tabs.next-medium .next-tabs-tab-inner .next-tabs-tab-close:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-tabs.next-medium .next-tabs-btn-down .next-icon:before, + .next-tabs.next-medium .next-tabs-btn-prev .next-icon:before, + .next-tabs.next-medium .next-tabs-btn-next .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-tabs.next-small .next-tabs-nav-container-scrolling { + padding-right: 56px; } + .next-tabs.next-small .next-tabs-tab-inner { + font-size: 12px; + padding: 8px 12px; } + .next-tabs.next-small .next-tabs-tab-inner .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close { + padding-left: 8px; } + .next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -4px; + margin-right: -4px; } + .next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close:before { + width: 16px; + font-size: 16px; } } + .next-tabs.next-small .next-tabs-btn-down .next-icon:before, + .next-tabs.next-small .next-tabs-btn-prev .next-icon:before, + .next-tabs.next-small .next-tabs-btn-next .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-tabs-pure > .next-tabs-bar { + border-bottom: solid 1px #DCDEE3; + background-color: transparent; } + .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container { + margin-bottom: -1px; + -webkit-box-shadow: none; + box-shadow: none; } + .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container .next-tabs-tab { + color: #666666; + background-color: transparent; } + .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container .next-tabs-tab:hover { + cursor: pointer; + color: #333333; + background-color: transparent; } + .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container .next-tabs-tab.active { + z-index: 1; + color: #5584FF; + background-color: transparent; } + .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container .next-tabs-tab.disabled { + pointer-events: none; + cursor: default; + color: #DCDEE3; + background: transparent; } + .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container .next-tabs-tab:before { + border-radius: 0%; + width: 0; + border-bottom: 2px solid #5584FF; + left: 50%; + bottom: 0%; } + .next-tabs-pure > .next-tabs-bar .next-tabs-nav-container .next-tabs-tab.active:before { + width: 100%; + left: 0%; } + .next-tabs-wrapped > .next-tabs-bar { + background: transparent; } + .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab { + color: #666666; + background-color: #F2F3F7; } + .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab:hover { + cursor: pointer; + color: #333333; + background-color: #EBECF0; } + .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab.active { + z-index: 1; + color: #5584FF; + background-color: #FFFFFF; } + .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab.disabled { + pointer-events: none; + cursor: default; + color: #CCCCCC; + background: #F7F8FA; } + .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab .next-tabs-tab-close { + color: #666666; } + .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab .next-tabs-tab-close:hover { + color: #333333; } + .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab.active .next-tabs-tab-close { + color: #5584FF; } + .next-tabs-wrapped > .next-tabs-bar .next-tabs-tab.disabled .next-tabs-tab-close { + color: #DCDEE3; } + .next-tabs-wrapped:before, .next-tabs-wrapped:after { + content: ""; + display: table; } + .next-tabs-wrapped:after { + clear: both; } + .next-tabs-wrapped > .next-tabs-content { + position: relative; } + .next-tabs-wrapped.next-tabs-top > .next-tabs-bar { + position: relative; } + .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-nav-extra { + position: absolute; + top: 50%; + right: 0; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); } + .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-tab { + margin-right: 4px; + border: solid 1px #DCDEE3; + border-radius: 3px 3px 0 0; + border-width: 1px 1px 1px 1px; } + .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-tab:hover { + border-color: #C4C6CF; } + .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-tab.active { + border-color: #DCDEE3 #DCDEE3 #FFFFFF #DCDEE3; } + .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-tab:before { + border-radius: 3px; + width: 0; + border-top: 2px solid #5584FF; + left: 50%; + top: -1px; } + .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-tab.active:before { + width: calc(100% - 2 * 3px); + left: 3px; } + .next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-tab.active { + border-width: 1px 1px 1px 1px; } + .next-tabs-wrapped.next-tabs-top > .next-tabs-content { + top: -1px; + border-top: 1px solid #DCDEE3; } + .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar { + position: relative; } + .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-nav-extra { + position: absolute; + top: 50%; + right: 0; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); } + .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-tab { + margin-right: 4px; + border: solid 1px #DCDEE3; + border-radius: 0 0 3px 3px; } + .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-tab:hover { + border-color: #C4C6CF; } + .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-tab.active { + border-color: #FFFFFF #DCDEE3 #DCDEE3 #DCDEE3; } + .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-tab:before { + border-radius: 3px; + width: 0; + border-bottom: 2px solid #5584FF; + left: 50%; + bottom: -1px; } + .next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-tab.active:before { + width: calc(100% - 2 * 3px); + left: 3px; } + .next-tabs-wrapped.next-tabs-bottom > .next-tabs-content { + top: 1px; + border-bottom: 1px solid #DCDEE3; } + .next-tabs-wrapped.next-tabs-left > .next-tabs-bar { + float: left; } + .next-tabs-wrapped.next-tabs-left > .next-tabs-bar .next-tabs-tab { + float: none; + margin-bottom: 4px; + border: solid 1px #DCDEE3; + border-radius: 3px 0 0 3px; + border-width: 1px 1px 1px 1px; } + .next-tabs-wrapped.next-tabs-left > .next-tabs-bar .next-tabs-tab:hover { + border-color: #C4C6CF; } + .next-tabs-wrapped.next-tabs-left > .next-tabs-bar .next-tabs-tab.active { + border-color: #DCDEE3 #FFFFFF #DCDEE3 #DCDEE3; } + .next-tabs-wrapped.next-tabs-left > .next-tabs-bar .next-tabs-tab:before { + border-radius: 3px; + height: 0; + border-left: 2px solid #5584FF; + top: 50%; + left: -1px; } + .next-tabs-wrapped.next-tabs-left > .next-tabs-bar .next-tabs-tab.active:before { + height: calc(100% - 2 * 3px); + top: 3px; } + .next-tabs-wrapped.next-tabs-left > .next-tabs-bar .next-tabs-tab.active { + border-width: 1px 1px 1px 1px; } + .next-tabs-wrapped.next-tabs-left > .next-tabs-content { + right: 1px; + border-left: 1px solid #DCDEE3; } + .next-tabs-wrapped.next-tabs-right > .next-tabs-bar { + float: right; } + .next-tabs-wrapped.next-tabs-right > .next-tabs-bar .next-tabs-tab { + float: none; + margin-bottom: 4px; + border: solid 1px #DCDEE3; + border-radius: 0 3px 3px 0; + border-width: 1px 1px 1px 1px; } + .next-tabs-wrapped.next-tabs-right > .next-tabs-bar .next-tabs-tab:hover { + border-color: #C4C6CF; } + .next-tabs-wrapped.next-tabs-right > .next-tabs-bar .next-tabs-tab.active { + border-color: #DCDEE3 #DCDEE3 #DCDEE3 #FFFFFF; } + .next-tabs-wrapped.next-tabs-right > .next-tabs-bar .next-tabs-tab:before { + border-radius: 3px; + height: 0; + border-right: 2px solid #5584FF; + top: 50%; + right: -1px; } + .next-tabs-wrapped.next-tabs-right > .next-tabs-bar .next-tabs-tab.active:before { + height: calc(100% - 2 * 3px); + top: 3px; } + .next-tabs-wrapped.next-tabs-right > .next-tabs-bar .next-tabs-tab.active { + border-width: 1px 1px 1px 1px; } + .next-tabs-wrapped.next-tabs-right > .next-tabs-content { + right: -1px; + border-right: 1px solid #DCDEE3; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-tab { + -webkit-transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1); + transition: background-color 0.4s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.4s cubic-bezier(0.23, 1, 0.32, 1); + border-top: 1px solid #C4C6CF; + border-bottom: 1px solid #C4C6CF; + border-left: 1px solid #C4C6CF; + color: #333333; + background-color: #F2F3F7; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-tab:first-child { + border-radius: 3px 0 0 3px; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-tab:last-child { + border-radius: 0 3px 3px 0; + border-right: 1px solid #C4C6CF; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-tab.active { + margin-right: -1px; + border-right: 1px solid #C4C6CF; + border-color: #5584FF; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-tab.disabled { + border-color: #E6E7EB; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-tab:hover { + cursor: pointer; + color: #333333; + background-color: #EBECF0; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-tab.active { + z-index: 1; + color: #FFFFFF; + background-color: #5584FF; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-tab.disabled { + pointer-events: none; + cursor: default; + color: #CCCCCC; + background: #F7F8FA; } + .next-tabs-text > .next-tabs-bar .next-tabs-tab { + color: #666666; + background-color: transparent; } + .next-tabs-text > .next-tabs-bar .next-tabs-tab:hover { + cursor: pointer; + color: #333333; + background-color: transparent; } + .next-tabs-text > .next-tabs-bar .next-tabs-tab.active { + z-index: 1; + color: #5584FF; + background-color: transparent; } + .next-tabs-text > .next-tabs-bar .next-tabs-tab.disabled { + pointer-events: none; + cursor: default; + color: #CCCCCC; + background: transparent; } + .next-tabs-text > .next-tabs-bar .next-tabs-tab:not(:last-child):after { + content: ' '; + position: absolute; + right: 0; + top: calc(50% - 4px); + width: 1px; + height: 8px; + background-color: #DCDEE3; } + .next-tabs-pure > .next-tabs-bar { + position: relative; } + .next-tabs-pure > .next-tabs-bar .next-tabs-nav-extra { + position: absolute; + top: 50%; + right: 0; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); } + .next-tabs-capsule > .next-tabs-bar { + position: relative; } + .next-tabs-capsule > .next-tabs-bar .next-tabs-nav-extra { + position: absolute; + top: 50%; + right: 0; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); } + .next-tabs-text > .next-tabs-bar { + position: relative; } + .next-tabs-text > .next-tabs-bar .next-tabs-nav-extra { + position: absolute; + top: 50%; + right: 0; + -webkit-transform: translateY(-50%); + -ms-transform: translateY(-50%); + transform: translateY(-50%); } + +.next-tabs[dir='rtl'].next-medium .next-tabs-nav-container-scrolling { + padding-left: 60px; + padding-right: 0; } + +.next-tabs[dir='rtl'].next-medium .next-tabs-tab-close { + padding-right: 8px; + padding-left: 0; } + +.next-tabs[dir='rtl'].next-small .next-tabs-nav-container-scrolling { + padding-left: 56px; + padding-right: 0; } + +.next-tabs[dir='rtl'].next-small .next-tabs-tab-close { + padding-right: 8px; + padding-left: 0; } + +.next-tabs[dir='rtl'].next-tabs-wrapped.next-tabs-top > .next-tabs-bar .next-tabs-nav-extra { + right: auto; + left: 0; } + +.next-tabs[dir='rtl'].next-tabs-wrapped.next-tabs-bottom > .next-tabs-bar .next-tabs-nav-extra { + right: auto; + left: 0; } + +.next-tabs[dir='rtl'] > .next-tabs-bar .next-tabs-nav-extra { + right: auto; + left: 0; } + +.next-tabs[dir='rtl'].next-tabs-capsule > .next-tabs-bar .next-tabs-tab { + border-top: 1px solid #C4C6CF; + border-bottom: 1px solid #C4C6CF; + border-right: 1px solid #C4C6CF; + border-left: 0; } + .next-tabs[dir='rtl'].next-tabs-capsule > .next-tabs-bar .next-tabs-tab:first-child { + border-left: 0; + border-radius: 0 3px 3px 0; } + .next-tabs[dir='rtl'].next-tabs-capsule > .next-tabs-bar .next-tabs-tab:last-child { + border-radius: 3px 0 0 3px; + border-left: 1px solid #C4C6CF; } + .next-tabs[dir='rtl'].next-tabs-capsule > .next-tabs-bar .next-tabs-tab.active { + margin-left: -1px; + margin-right: auto; + border-left: 1px solid #C4C6CF; + border-color: #5584FF; } + +.next-tabs[dir='rtl'] .next-tabs-btn-next { + left: 8px; + right: auto; } + +.next-tabs[dir='rtl'] .next-tabs-btn-prev { + left: 32px; + right: auto; } + +.next-tabs[dir='rtl'] .next-tabs-btn-down { + left: 8px; + right: auto; } + +.next-tabs-text[dir='rtl'] > .next-tabs-bar .next-tabs-tab:not(:last-child):after { + content: ' '; + position: absolute; + left: 0; + right: auto; } + +/* put your code here */ +.next-table { + -webkit-box-sizing: border-box; + box-sizing: border-box; + position: relative; } + .next-table *, + .next-table *:before, + .next-table *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-table table { + border-collapse: collapse; + border-spacing: 0; + width: 100%; + background: #FFFFFF; } + .next-table table tr:first-child td { + border-top-width: 0; } + .next-table th { + padding: 0; + background: #EBECF0; + color: #333333; + text-align: left; + font-weight: normal; + border: 1px solid #DCDEE3; } + .next-table th .next-table-cell-wrapper { + padding: 12px 16px; + overflow: hidden; + text-overflow: ellipsis; + word-break: break-all; } + .next-table-affix { + z-index: 1; } + .next-table-header-resizable { + position: relative; } + .next-table-header-resizable .next-table-resize-handler { + position: absolute; + right: 0; + top: 0; + bottom: 0; + width: 3px; + background: transparent; + cursor: ew-resize; } + .next-table td { + padding: 0; + border: 1px solid #DCDEE3; } + .next-table td .next-table-cell-wrapper { + padding: 12px 16px; + overflow: hidden; + text-overflow: ellipsis; + word-break: break-all; } + .next-table td .next-table-cell-wrapper .next-icon-arrow-down.next-table-tree-arrow, + .next-table td .next-table-cell-wrapper .next-icon-arrow-right.next-table-tree-arrow, + .next-table td .next-table-cell-wrapper .next-table-tree-placeholder { + margin-right: 3px; + float: left; } + .next-table td .next-table-cell-wrapper .next-icon-arrow-down.next-table-tree-arrow:before, + .next-table td .next-table-cell-wrapper .next-icon-arrow-right.next-table-tree-arrow:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-table .next-table-expanded .next-table-cell-wrapper, + .next-table .next-table-selection .next-table-cell-wrapper { + overflow: visible; } + .next-table.no-header table tr:first-child td { + border-top-width: 1px; } + .next-table.only-bottom-border { + border-width: 0; } + .next-table.only-bottom-border th { + border-width: 0 0 1px 0; } + .next-table.only-bottom-border td { + border-width: 0 0 1px 0; } + .next-table.only-bottom-border .next-table-expanded-row th { + border-width: 0 0 1px 0; } + .next-table.only-bottom-border .next-table-expanded-row td { + border-width: 0 0 1px 0; } + .next-table-loading { + display: block; } + .next-table.zebra tr:nth-child(odd) td { + background: #FFFFFF; } + .next-table.zebra tr:nth-child(even) td { + background: #F7F8FA; } + .next-table.zebra .next-table-row.hovered td { + background: #F2F3F7; + color: #333333; } + .next-table.zebra .next-table-row.selected td { + background: #F2F3F7; + color: #333333; } + .next-table-empty { + color: #A0A2AD; + padding: 32px 0; + text-align: center; } + .next-table-expanded-row td { + border-width: 0; } + .next-table-expanded-row td:first-child { + border-left-width: 1px; } + .next-table-expanded-row td:last-child { + border-right-width: 1px; } + .next-table-expanded-row:last-child td { + border-bottom-width: 1px; } + .next-table-expanded-row .next-table .last td { + border-bottom-width: 0; } + .next-table-filter-footer { + margin: 10px 10px 0; } + .next-table-filter-footer button { + margin-right: 5px; } + .next-table-row { + -webkit-transition: all ease .3s; + transition: all ease .3s; + background: #FFFFFF; + color: #333333; } + .next-table-row.hidden { + display: none; } + .next-table-row.hovered { + background: #F2F3F7; + color: #333333; } + .next-table-row.selected { + background: #F2F3F7; + color: #333333; } + .next-table-tree-placeholder { + display: inline-block; + width: 12px; } + +.last .next-table-expanded-row td { + border-bottom-width: 1px; } + +.next-table-body, +.next-table-header { + overflow: auto; + font-size: 12px; } + +.next-table-body { + font-size: 12px; } + +.next-table-fixed { + border: 1px solid #DCDEE3; } + .next-table-fixed table { + table-layout: fixed; } + .next-table-fixed .next-table-header { + background: #EBECF0; } + .next-table-fixed table tr td:first-child, + .next-table-fixed table tr th:first-child { + border-left-width: 0; } + .next-table-fixed .next-table-header th { + border-top-width: 0; } + .next-table-fixed .next-table-header tr th:last-child { + border-right-width: 0; } + .next-table-fixed .next-table-body td { + border-top-width: 0; } + .next-table-fixed .next-table-body tr:last-child td { + border-bottom-width: 0; } + .next-table-fixed .next-table-body tr td:last-child { + border-right-width: 0; } + .next-table-fixed.next-table-group table tr td:first-child, + .next-table-fixed.next-table-group table tr th:first-child { + border-left-width: 1px; } + .next-table-fixed.next-table-group .next-table-header th { + border-top-width: 1px; } + .next-table-fixed.next-table-group .next-table-header tr th:last-child { + border-right-width: 1px; } + .next-table-fixed.next-table-group .next-table-body td { + border-top-width: 1px; } + .next-table-fixed.next-table-group .next-table-body tr:last-child td { + border-bottom-width: 1px; } + .next-table-fixed.next-table-group .next-table-body tr td:last-child { + border-right-width: 1px; } + +.next-table-lock .next-table-body { + overflow-x: auto; + overflow-y: visible; } + +.next-table-group { + border-width: 0; } + .next-table-group .next-table-body { + margin-top: 8px; } + .next-table-group .next-table-body table { + margin-bottom: 8px; } + .next-table-group .next-table-body table tr:first-child td { + border-top-width: 1px; } + .next-table-group .next-table-group-header td { + background: #EBECF0; + color: #333333; } + .next-table-group .next-table-group-footer td { + background: #EBECF0; + color: #333333; } + .next-table-group .next-table-row.hovered, + .next-table-group .next-table-row.selected { + background: #FFFFFF; + color: #333333; } + +.next-table-lock { + position: relative; } + .next-table-lock table { + table-layout: fixed; } + +.next-table-header-inner { + overflow: hidden; } + +.next-table-lock-left, +.next-table-lock-right { + position: absolute; + left: 0; + top: 0; + z-index: 1; + border: 0; } + .next-table-lock-left table, + .next-table-lock-right table { + width: auto; } + .next-table-lock-left .next-table-body, + .next-table-lock-right .next-table-body { + overflow: hidden; } + +.next-table-lock-right { + right: 0; + left: auto; } + .next-table-lock-right table tr td:first-child, + .next-table-lock-right table tr th:first-child { + border-left-width: 1px; } + .next-table-lock-right.shadow { + -webkit-box-shadow: -2px 0 3px rgba(0, 0, 0, 0.12); + box-shadow: -2px 0 3px rgba(0, 0, 0, 0.12); } + +.next-table-lock-left.shadow { + -webkit-box-shadow: 2px 0 3px rgba(0, 0, 0, 0.12); + box-shadow: 2px 0 3px rgba(0, 0, 0, 0.12); } + +.next-table-filter { + line-height: 1; } + +.next-table-sort { + position: relative; + width: 16px; + height: 15px; + display: inline-block; + vertical-align: middle; + line-height: 1; } + .next-table-sort .next-icon { + position: absolute; + left: 0; + color: #333333; } + .next-table-sort .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-table-sort .current .next-icon { + color: #5584FF; } + .next-table-sort .next-icon-ascending { + left: 4px; } + +.next-table-filter { + margin-left: 5px; + cursor: pointer; + width: 20px; + display: inline-block; } + .next-table-filter:focus { + outline: 0; } + .next-table-filter .next-icon { + color: #333333; } + .next-table-filter .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-table-expanded-ctrl.disabled { + color: #999999; } + +.next-table-expanded-ctrl .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-table[dir="rtl"] th { + text-align: right; } + +.next-table[dir="rtl"] .next-table-header-resizable .next-table-resize-handler { + right: auto; + left: 0; } + +.next-table[dir="rtl"] td .next-table-cell-wrapper .next-icon-arrow-down.next-table-tree-arrow, +.next-table[dir="rtl"] td .next-table-cell-wrapper .next-icon-arrow-right.next-table-tree-arrow, +.next-table[dir="rtl"] td .next-table-cell-wrapper .next-table-tree-placeholder { + margin-left: 3px; + margin-right: 0; + float: right; } + +.next-table[dir="rtl"] .next-table-expanded-row td:first-child { + border-left-width: 0; + border-right-width: 1px; } + +.next-table[dir="rtl"] .next-table-expanded-row td:last-child { + border-left-width: 1px; + border-right-width: 0; } + +.next-table[dir="rtl"].only-bottom-border .next-table-expanded-row th { + border-width: 0 0 1px 0; } + +.next-table[dir="rtl"].only-bottom-border .next-table-expanded-row td { + border-width: 0 0 1px 0; } + +.next-table[dir="rtl"] .next-table-filter-footer button { + margin-left: 5px; + margin-right: 0; } + +.next-table[dir="rtl"] .next-table-lock-left, +.next-table[dir="rtl"] .next-table-lock-right { + left: auto; + right: 0; } + +.next-table[dir="rtl"] .next-table-lock-right { + right: auto; + left: 0; } + .next-table[dir="rtl"] .next-table-lock-right table tr td:first-child, + .next-table[dir="rtl"] .next-table-lock-right table tr th:first-child { + border-right-width: 1px; } + .next-table[dir="rtl"] .next-table-lock-right.shadow { + -webkit-box-shadow: 2px 0 3px rgba(0, 0, 0, 0.12); + box-shadow: 2px 0 3px rgba(0, 0, 0, 0.12); } + +.next-table[dir="rtl"] .next-table-lock-left.shadow { + -webkit-box-shadow: -2px 0 3px rgba(0, 0, 0, 0.12); + box-shadow: -2px 0 3px rgba(0, 0, 0, 0.12); } + +.next-table[dir="rtl"] .next-table-sort .next-icon { + right: 0; + left: auto; } + +.next-table[dir="rtl"] .next-table-sort .next-icon-ascending { + right: 4px; + left: auto; } + +.next-table[dir="rtl"] .next-table-filter { + margin-right: 5px; + margin-left: 0; } + +.next-table-fixed[dir="rtl"] table tr td:first-child, +.next-table-fixed[dir="rtl"] table tr th:first-child { + border-left-width: 1px; + border-right-width: 0; } + +.next-table-fixed[dir="rtl"] .next-table-header tr th:last-child { + border-left-width: 1px; } + +.next-table-fixed[dir="rtl"] .next-table-body tr td:last-child { + border-left-width: 1px; } + +.next-timeline *, +.next-timeline *:before, +.next-timeline *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +.next-timeline, .next-timeline:before, .next-timeline:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + +.next-timeline ul { + margin: 0; + padding: 0; + list-style: none; } + +.next-timeline p { + margin: 0; } + +.next-timeline-hide { + display: none; } + +.next-timeline[dir='rtl'] .next-timeline-item { + /* 时间轴左边存在内容的情况 */ } + .next-timeline[dir='rtl'] .next-timeline-item-folder { + padding-left: 0; + padding-right: 28px; } + .next-timeline[dir='rtl'] .next-timeline-item-dot-tail { + left: auto; + right: 8px; + border-left: none; + border-right: 1px dotted #DCDEE3; } + .next-timeline[dir='rtl'] .next-timeline-item-has-left-content.next-timeline-item-folder { + margin-left: 0; + margin-right: 80px; } + +.next-timeline[dir='rtl'] .next-timeline-item-done { + position: relative; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-timeline { + position: absolute; + left: auto; + right: 0; + top: 0; + height: 100%; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-node { + position: relative; + width: 16px; + height: 24px; + padding: 4px 0; + text-align: center; + float: right; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom { + width: 40px; + height: auto; + font-size: 12px; + word-break: break-all; + margin-right: calc(-12px); + margin-left: 0; + line-height: 1; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-dot { + display: block; + position: absolute; + width: 8px; + height: 8px; + border-radius: 100%; + top: 50%; + margin-top: -4px; + left: 50%; + margin-left: -4px; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-icon { + display: block; + position: absolute; + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 100%; + top: 50%; + left: 50%; + margin-top: -8px; + margin-left: -8px; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-tail { + position: absolute; + width: auto; + height: calc(100% - 24px); + top: 24px; + left: auto; + right: 8px; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-tail i { + display: inline-block; + vertical-align: top; + height: 100%; + width: 1px; + position: relative; + background: #DCDEE3; + -webkit-transition: all .4s ease; + transition: all .4s ease; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-content { + display: inline-block; + margin-right: 28px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-content .next-timeline-item-title { + margin: 0; + font-size: 12px; + font-weight: bold; + line-height: 16px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #333333; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-content .next-timeline-item-body { + margin: 0; + margin-top: 8px; + font-size: 12px; + line-height: 16px; + color: #666666; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-content .next-timeline-item-time { + margin: 0; + margin-top: 4px; + margin-bottom: 12px; + font-size: 12px; + color: #999999; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-done.next-timeline-item-has-left-content > .next-timeline-item-left-content { + position: absolute; + width: 80px; + display: inline-block; + font-size: 12px; + color: #999999; + line-height: 16px; + margin-top: 4px; + text-align: left; + padding-left: 12px; + padding-right: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-done.next-timeline-item-has-left-content > .next-timeline-item-left-content p { + word-break: break-word; } + .next-timeline[dir='rtl'] .next-timeline-item-done.next-timeline-item-has-left-content > .next-timeline-item-timeline { + margin-right: 80px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-done.next-timeline-item-has-left-content > .next-timeline-item-content { + margin-right: 108px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-dot { + background: #C4C6CF; } + .next-timeline[dir='rtl'] .next-timeline-item-done .next-timeline-item-icon { + background: #C4C6CF; + color: #FFFFFF; } + +.next-timeline[dir='rtl'] .next-timeline-item-process { + position: relative; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-timeline { + position: absolute; + left: auto; + right: 0; + top: 0; + height: 100%; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-node { + position: relative; + width: 16px; + height: 24px; + padding: 4px 0; + text-align: center; + float: right; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom { + width: 40px; + height: auto; + font-size: 12px; + word-break: break-all; + margin-right: calc(-12px); + margin-left: 0; + line-height: 1; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-dot { + display: block; + position: absolute; + width: 8px; + height: 8px; + border-radius: 100%; + top: 50%; + margin-top: -4px; + left: 50%; + margin-left: -4px; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-icon { + display: block; + position: absolute; + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 100%; + top: 50%; + left: 50%; + margin-top: -8px; + margin-left: -8px; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-tail { + position: absolute; + width: auto; + height: calc(100% - 24px); + top: 24px; + left: auto; + right: 8px; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-tail i { + display: inline-block; + vertical-align: top; + height: 100%; + width: 1px; + position: relative; + background: #DCDEE3; + -webkit-transition: all .4s ease; + transition: all .4s ease; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-content { + display: inline-block; + margin-right: 28px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-content .next-timeline-item-title { + margin: 0; + font-size: 12px; + font-weight: bold; + line-height: 16px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #333333; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-content .next-timeline-item-body { + margin: 0; + margin-top: 8px; + font-size: 12px; + line-height: 16px; + color: #666666; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-content .next-timeline-item-time { + margin: 0; + margin-top: 4px; + margin-bottom: 12px; + font-size: 12px; + color: #999999; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-process.next-timeline-item-has-left-content > .next-timeline-item-left-content { + position: absolute; + width: 80px; + display: inline-block; + font-size: 12px; + color: #999999; + line-height: 16px; + margin-top: 4px; + text-align: left; + padding-left: 12px; + padding-right: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-process.next-timeline-item-has-left-content > .next-timeline-item-left-content p { + word-break: break-word; } + .next-timeline[dir='rtl'] .next-timeline-item-process.next-timeline-item-has-left-content > .next-timeline-item-timeline { + margin-right: 80px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-process.next-timeline-item-has-left-content > .next-timeline-item-content { + margin-right: 108px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-dot { + background: #5584FF; } + .next-timeline[dir='rtl'] .next-timeline-item-process .next-timeline-item-icon { + background: #5584FF; + color: #FFFFFF; } + +.next-timeline[dir='rtl'] .next-timeline-item-success { + position: relative; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-timeline { + position: absolute; + left: auto; + right: 0; + top: 0; + height: 100%; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-node { + position: relative; + width: 16px; + height: 24px; + padding: 4px 0; + text-align: center; + float: right; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom { + width: 40px; + height: auto; + font-size: 12px; + word-break: break-all; + margin-right: calc(-12px); + margin-left: 0; + line-height: 1; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-dot { + display: block; + position: absolute; + width: 8px; + height: 8px; + border-radius: 100%; + top: 50%; + margin-top: -4px; + left: 50%; + margin-left: -4px; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-icon { + display: block; + position: absolute; + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 100%; + top: 50%; + left: 50%; + margin-top: -8px; + margin-left: -8px; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-tail { + position: absolute; + width: auto; + height: calc(100% - 24px); + top: 24px; + left: auto; + right: 8px; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-tail i { + display: inline-block; + vertical-align: top; + height: 100%; + width: 1px; + position: relative; + background: #DCDEE3; + -webkit-transition: all .4s ease; + transition: all .4s ease; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-content { + display: inline-block; + margin-right: 28px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-content .next-timeline-item-title { + margin: 0; + font-size: 12px; + font-weight: bold; + line-height: 16px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #333333; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-content .next-timeline-item-body { + margin: 0; + margin-top: 8px; + font-size: 12px; + line-height: 16px; + color: #666666; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-content .next-timeline-item-time { + margin: 0; + margin-top: 4px; + margin-bottom: 12px; + font-size: 12px; + color: #999999; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-success.next-timeline-item-has-left-content > .next-timeline-item-left-content { + position: absolute; + width: 80px; + display: inline-block; + font-size: 12px; + color: #999999; + line-height: 16px; + margin-top: 4px; + text-align: left; + padding-left: 12px; + padding-right: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-success.next-timeline-item-has-left-content > .next-timeline-item-left-content p { + word-break: break-word; } + .next-timeline[dir='rtl'] .next-timeline-item-success.next-timeline-item-has-left-content > .next-timeline-item-timeline { + margin-right: 80px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-success.next-timeline-item-has-left-content > .next-timeline-item-content { + margin-right: 108px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-dot { + background: #46BC15; } + .next-timeline[dir='rtl'] .next-timeline-item-success .next-timeline-item-icon { + background: #46BC15; + color: #FFFFFF; } + +.next-timeline[dir='rtl'] .next-timeline-item-error { + position: relative; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-timeline { + position: absolute; + left: auto; + right: 0; + top: 0; + height: 100%; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-node { + position: relative; + width: 16px; + height: 24px; + padding: 4px 0; + text-align: center; + float: right; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom { + width: 40px; + height: auto; + font-size: 12px; + word-break: break-all; + margin-right: calc(-12px); + margin-left: 0; + line-height: 1; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-dot { + display: block; + position: absolute; + width: 8px; + height: 8px; + border-radius: 100%; + top: 50%; + margin-top: -4px; + left: 50%; + margin-left: -4px; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-icon { + display: block; + position: absolute; + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 100%; + top: 50%; + left: 50%; + margin-top: -8px; + margin-left: -8px; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-tail { + position: absolute; + width: auto; + height: calc(100% - 24px); + top: 24px; + left: auto; + right: 8px; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-tail i { + display: inline-block; + vertical-align: top; + height: 100%; + width: 1px; + position: relative; + background: #DCDEE3; + -webkit-transition: all .4s ease; + transition: all .4s ease; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-content { + display: inline-block; + margin-right: 28px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-content .next-timeline-item-title { + margin: 0; + font-size: 12px; + font-weight: bold; + line-height: 16px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #333333; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-content .next-timeline-item-body { + margin: 0; + margin-top: 8px; + font-size: 12px; + line-height: 16px; + color: #666666; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-content .next-timeline-item-time { + margin: 0; + margin-top: 4px; + margin-bottom: 12px; + font-size: 12px; + color: #999999; + text-align: right; } + .next-timeline[dir='rtl'] .next-timeline-item-error.next-timeline-item-has-left-content > .next-timeline-item-left-content { + position: absolute; + width: 80px; + display: inline-block; + font-size: 12px; + color: #999999; + line-height: 16px; + margin-top: 4px; + text-align: left; + padding-left: 12px; + padding-right: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-error.next-timeline-item-has-left-content > .next-timeline-item-left-content p { + word-break: break-word; } + .next-timeline[dir='rtl'] .next-timeline-item-error.next-timeline-item-has-left-content > .next-timeline-item-timeline { + margin-right: 80px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-error.next-timeline-item-has-left-content > .next-timeline-item-content { + margin-right: 108px; + margin-left: 0; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-dot { + background: #FF3000; } + .next-timeline[dir='rtl'] .next-timeline-item-error .next-timeline-item-icon { + background: #FF3000; + color: #FFFFFF; } + +.next-timeline { + margin: 0; + padding: 0; + list-style: none; } + .next-timeline > li { + outline: 0; } + +.next-timeline-item { + /* 时间轴左边存在内容的情况 */ } + .next-timeline-item-folder { + padding-left: 28px; + padding-top: 4px; + padding-bottom: 4px; + font-size: 12px; + line-height: 16px; + position: relative; + /* min-height: auto !important; */ } + .next-timeline-item-dot-tail { + position: absolute; + top: 0; + left: 8px; + height: 100%; + border-top: 0; + border-bottom: 0; + border-right: 0; + border-left: 1px dotted #DCDEE3; } + .next-timeline-item-dot-tail-solid { + border-style: solid; } + .next-timeline-item-has-left-content.next-timeline-item-folder { + margin-left: 80px; } + +.next-timeline-item-done { + position: relative; } + .next-timeline-item-done .next-timeline-item-timeline { + position: absolute; + left: 0; + top: 0; + height: 100%; } + .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-node { + position: relative; + width: 16px; + height: 24px; + padding: 4px 0; + text-align: center; + float: left; } + .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom { + width: 40px; + height: auto; + font-size: 12px; + word-break: break-all; + margin-left: calc(-12px); + line-height: 1; } + .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-dot { + display: block; + position: absolute; + width: 8px; + height: 8px; + border-radius: 100%; + top: 50%; + margin-top: -4px; + left: 50%; + margin-left: -4px; } + .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-icon { + display: block; + position: absolute; + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 100%; + top: 50%; + left: 50%; + margin-top: -8px; + margin-left: -8px; } + .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-tail { + position: absolute; + width: auto; + height: calc(100% - 24px); + top: 24px; + left: 8px; } + .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-tail i { + display: inline-block; + vertical-align: top; + height: 100%; + width: 1px; + position: relative; + background: #DCDEE3; + -webkit-transition: all .4s ease; + transition: all .4s ease; } + .next-timeline-item-done .next-timeline-item-content { + display: inline-block; + margin-left: 28px; } + .next-timeline-item-done .next-timeline-item-content .next-timeline-item-title { + margin: 0; + font-size: 12px; + font-weight: bold; + line-height: 16px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #333333; + text-align: left; } + .next-timeline-item-done .next-timeline-item-content .next-timeline-item-body { + margin: 0; + margin-top: 8px; + font-size: 12px; + line-height: 16px; + color: #666666; + text-align: left; } + .next-timeline-item-done .next-timeline-item-content .next-timeline-item-time { + margin: 0; + margin-top: 4px; + margin-bottom: 12px; + font-size: 12px; + color: #999999; + text-align: left; } + .next-timeline-item-done.next-timeline-item-has-left-content > .next-timeline-item-left-content { + position: absolute; + width: 80px; + display: inline-block; + font-size: 12px; + color: #999999; + line-height: 16px; + margin-top: 4px; + text-align: right; + padding-right: 12px; } + .next-timeline-item-done.next-timeline-item-has-left-content > .next-timeline-item-left-content p { + word-break: break-word; } + .next-timeline-item-done.next-timeline-item-has-left-content > .next-timeline-item-timeline { + margin-left: 80px; } + .next-timeline-item-done.next-timeline-item-has-left-content > .next-timeline-item-content { + margin-left: 108px; } + .next-timeline-item-done .next-timeline-item-dot { + background: #C4C6CF; } + .next-timeline-item-done .next-timeline-item-icon { + background: #C4C6CF; + color: #FFFFFF; } + +.next-timeline-item-process { + position: relative; } + .next-timeline-item-process .next-timeline-item-timeline { + position: absolute; + left: 0; + top: 0; + height: 100%; } + .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-node { + position: relative; + width: 16px; + height: 24px; + padding: 4px 0; + text-align: center; + float: left; } + .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom { + width: 40px; + height: auto; + font-size: 12px; + word-break: break-all; + margin-left: calc(-12px); + line-height: 1; } + .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-dot { + display: block; + position: absolute; + width: 8px; + height: 8px; + border-radius: 100%; + top: 50%; + margin-top: -4px; + left: 50%; + margin-left: -4px; } + .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-icon { + display: block; + position: absolute; + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 100%; + top: 50%; + left: 50%; + margin-top: -8px; + margin-left: -8px; } + .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-tail { + position: absolute; + width: auto; + height: calc(100% - 24px); + top: 24px; + left: 8px; } + .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-tail i { + display: inline-block; + vertical-align: top; + height: 100%; + width: 1px; + position: relative; + background: #DCDEE3; + -webkit-transition: all .4s ease; + transition: all .4s ease; } + .next-timeline-item-process .next-timeline-item-content { + display: inline-block; + margin-left: 28px; } + .next-timeline-item-process .next-timeline-item-content .next-timeline-item-title { + margin: 0; + font-size: 12px; + font-weight: bold; + line-height: 16px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #333333; + text-align: left; } + .next-timeline-item-process .next-timeline-item-content .next-timeline-item-body { + margin: 0; + margin-top: 8px; + font-size: 12px; + line-height: 16px; + color: #666666; + text-align: left; } + .next-timeline-item-process .next-timeline-item-content .next-timeline-item-time { + margin: 0; + margin-top: 4px; + margin-bottom: 12px; + font-size: 12px; + color: #999999; + text-align: left; } + .next-timeline-item-process.next-timeline-item-has-left-content > .next-timeline-item-left-content { + position: absolute; + width: 80px; + display: inline-block; + font-size: 12px; + color: #999999; + line-height: 16px; + margin-top: 4px; + text-align: right; + padding-right: 12px; } + .next-timeline-item-process.next-timeline-item-has-left-content > .next-timeline-item-left-content p { + word-break: break-word; } + .next-timeline-item-process.next-timeline-item-has-left-content > .next-timeline-item-timeline { + margin-left: 80px; } + .next-timeline-item-process.next-timeline-item-has-left-content > .next-timeline-item-content { + margin-left: 108px; } + .next-timeline-item-process .next-timeline-item-dot { + background: #5584FF; } + .next-timeline-item-process .next-timeline-item-icon { + background: #5584FF; + color: #FFFFFF; } + +.next-timeline-item-success { + position: relative; } + .next-timeline-item-success .next-timeline-item-timeline { + position: absolute; + left: 0; + top: 0; + height: 100%; } + .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-node { + position: relative; + width: 16px; + height: 24px; + padding: 4px 0; + text-align: center; + float: left; } + .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom { + width: 40px; + height: auto; + font-size: 12px; + word-break: break-all; + margin-left: calc(-12px); + line-height: 1; } + .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-dot { + display: block; + position: absolute; + width: 8px; + height: 8px; + border-radius: 100%; + top: 50%; + margin-top: -4px; + left: 50%; + margin-left: -4px; } + .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-icon { + display: block; + position: absolute; + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 100%; + top: 50%; + left: 50%; + margin-top: -8px; + margin-left: -8px; } + .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-tail { + position: absolute; + width: auto; + height: calc(100% - 24px); + top: 24px; + left: 8px; } + .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-tail i { + display: inline-block; + vertical-align: top; + height: 100%; + width: 1px; + position: relative; + background: #DCDEE3; + -webkit-transition: all .4s ease; + transition: all .4s ease; } + .next-timeline-item-success .next-timeline-item-content { + display: inline-block; + margin-left: 28px; } + .next-timeline-item-success .next-timeline-item-content .next-timeline-item-title { + margin: 0; + font-size: 12px; + font-weight: bold; + line-height: 16px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #333333; + text-align: left; } + .next-timeline-item-success .next-timeline-item-content .next-timeline-item-body { + margin: 0; + margin-top: 8px; + font-size: 12px; + line-height: 16px; + color: #666666; + text-align: left; } + .next-timeline-item-success .next-timeline-item-content .next-timeline-item-time { + margin: 0; + margin-top: 4px; + margin-bottom: 12px; + font-size: 12px; + color: #999999; + text-align: left; } + .next-timeline-item-success.next-timeline-item-has-left-content > .next-timeline-item-left-content { + position: absolute; + width: 80px; + display: inline-block; + font-size: 12px; + color: #999999; + line-height: 16px; + margin-top: 4px; + text-align: right; + padding-right: 12px; } + .next-timeline-item-success.next-timeline-item-has-left-content > .next-timeline-item-left-content p { + word-break: break-word; } + .next-timeline-item-success.next-timeline-item-has-left-content > .next-timeline-item-timeline { + margin-left: 80px; } + .next-timeline-item-success.next-timeline-item-has-left-content > .next-timeline-item-content { + margin-left: 108px; } + .next-timeline-item-success .next-timeline-item-dot { + background: #46BC15; } + .next-timeline-item-success .next-timeline-item-icon { + background: #46BC15; + color: #FFFFFF; } + +.next-timeline-item-error { + position: relative; } + .next-timeline-item-error .next-timeline-item-timeline { + position: absolute; + left: 0; + top: 0; + height: 100%; } + .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-node { + position: relative; + width: 16px; + height: 24px; + padding: 4px 0; + text-align: center; + float: left; } + .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom { + width: 40px; + height: auto; + font-size: 12px; + word-break: break-all; + margin-left: calc(-12px); + line-height: 1; } + .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-dot { + display: block; + position: absolute; + width: 8px; + height: 8px; + border-radius: 100%; + top: 50%; + margin-top: -4px; + left: 50%; + margin-left: -4px; } + .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-icon { + display: block; + position: absolute; + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 100%; + top: 50%; + left: 50%; + margin-top: -8px; + margin-left: -8px; } + .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-tail { + position: absolute; + width: auto; + height: calc(100% - 24px); + top: 24px; + left: 8px; } + .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-tail i { + display: inline-block; + vertical-align: top; + height: 100%; + width: 1px; + position: relative; + background: #DCDEE3; + -webkit-transition: all .4s ease; + transition: all .4s ease; } + .next-timeline-item-error .next-timeline-item-content { + display: inline-block; + margin-left: 28px; } + .next-timeline-item-error .next-timeline-item-content .next-timeline-item-title { + margin: 0; + font-size: 12px; + font-weight: bold; + line-height: 16px; + margin-top: 4px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: #333333; + text-align: left; } + .next-timeline-item-error .next-timeline-item-content .next-timeline-item-body { + margin: 0; + margin-top: 8px; + font-size: 12px; + line-height: 16px; + color: #666666; + text-align: left; } + .next-timeline-item-error .next-timeline-item-content .next-timeline-item-time { + margin: 0; + margin-top: 4px; + margin-bottom: 12px; + font-size: 12px; + color: #999999; + text-align: left; } + .next-timeline-item-error.next-timeline-item-has-left-content > .next-timeline-item-left-content { + position: absolute; + width: 80px; + display: inline-block; + font-size: 12px; + color: #999999; + line-height: 16px; + margin-top: 4px; + text-align: right; + padding-right: 12px; } + .next-timeline-item-error.next-timeline-item-has-left-content > .next-timeline-item-left-content p { + word-break: break-word; } + .next-timeline-item-error.next-timeline-item-has-left-content > .next-timeline-item-timeline { + margin-left: 80px; } + .next-timeline-item-error.next-timeline-item-has-left-content > .next-timeline-item-content { + margin-left: 108px; } + .next-timeline-item-error .next-timeline-item-dot { + background: #FF3000; } + .next-timeline-item-error .next-timeline-item-icon { + background: #FF3000; + color: #FFFFFF; } + +.next-timeline-item-last .next-timeline-item-tail { + display: none; } + +.next-timeline-item-has-left-content { + min-height: 48px; } + +.next-timeline-item-folder.next-timeline-item-has-left-content { + min-height: auto; } + +.next-transfer { + -webkit-box-sizing: border-box; + box-sizing: border-box; + display: inline-block; } + .next-transfer *, + .next-transfer *:before, + .next-transfer *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-transfer-panel { + display: inline-block; + border: 1px solid #DCDEE3; + border-radius: 3px; + background-color: #FFFFFF; + vertical-align: middle; + overflow: hidden; } + .next-transfer-panel-header { + padding: 8px 20px; + border-bottom: 1px solid #DCDEE3; + background-color: #F7F8FA; + color: #333333; + font-size: 12px; } + .next-transfer-panel-search { + padding: 0 4px; + margin-top: 8px; + margin-bottom: 0; + width: 100%; } + .next-transfer .next-transfer-panel-list { + width: 180px; + /* TODO */ + height: 160px; + padding: 0; + border: none; + -webkit-box-shadow: none; + box-shadow: none; + border-radius: 0; + overflow-y: auto; } + .next-transfer-panel-not-found-container { + display: table; + width: 100%; + height: 100%; } + .next-transfer-panel-not-found { + display: table-cell; + vertical-align: middle; + text-align: center; + color: #999999; + font-size: 14px; } + .next-transfer-panel-item.next-focused { + -webkit-transition: background-color .2s ease; + transition: background-color .2s ease; } + .next-transfer-panel-item:not(.next-disabled).next-simple:hover { + color: #5584FF; } + .next-transfer-panel-item.next-insert-before:before { + position: absolute; + top: 0; + left: 0; + content: ''; + width: 100%; + border-top: 1px solid #5584FF; } + .next-transfer-panel-item.next-insert-after:after { + position: absolute; + left: 0; + bottom: 0; + content: ''; + width: 100%; + border-bottom: 1px solid #5584FF; } + .next-transfer-panel-footer { + padding: 8px 20px; + border-top: 1px solid #DCDEE3; + background-color: #FFFFFF; + font-size: 0; } + .next-transfer-panel-count { + /* TODO */ + margin-left: 4px; + font-size: 12px; + vertical-align: middle; + color: #333333; } + .next-transfer-panel-move-all { + font-size: 12px; + color: #5584FF; + cursor: pointer; } + .next-transfer-panel-move-all.next-disabled { + color: #CCCCCC; + cursor: not-allowed; } + .next-transfer-operations { + display: inline-block; + vertical-align: middle; + margin: 0 20px; } + .next-transfer-move.next-icon { + color: #C4C6CF; } + .next-transfer-operation.next-btn { + display: block; } + .next-transfer-operation.next-btn + .next-transfer-operation.next-btn { + margin-top: 8px; } + .next-transfer-operation.next-btn .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + +.next-tree { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-tree *, + .next-tree *:before, + .next-tree *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-tree, .next-tree-child-tree { + margin: 0; + padding: 0; + list-style: none; } + .next-tree-node { + white-space: nowrap; } + .next-tree-node-inner { + font-size: 0; + outline: none; } + .next-tree-node-label-wrapper { + display: inline-block; + margin: 0 4px; + vertical-align: middle; } + .next-tree-node-label { + height: 20px; + line-height: 20px; + padding: 0 4px; + border-radius: 3px; + font-size: 12px; } + .next-tree-node-input.next-input { + margin: 0 4px; } + .next-tree-switcher { + position: relative; + display: inline-block; + vertical-align: middle; + margin-right: 8px; } + .next-tree-switcher.next-noline { + width: 12px; + height: 12px; + line-height: 12px; + cursor: pointer; } + .next-tree-switcher.next-noline .next-tree-switcher-icon { + -webkit-transition: -webkit-transform cubic-bezier(0.23, 1, 0.32, 1) 300ms; + transition: -webkit-transform cubic-bezier(0.23, 1, 0.32, 1) 300ms; + transition: transform cubic-bezier(0.23, 1, 0.32, 1) 300ms; + transition: transform cubic-bezier(0.23, 1, 0.32, 1) 300ms, -webkit-transform cubic-bezier(0.23, 1, 0.32, 1) 300ms; + color: #999999; } + .next-tree-switcher.next-noline .next-tree-switcher-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-tree-switcher.next-noline.next-close .next-tree-switcher-icon { + -webkit-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + transform: rotate(-90deg); } + .next-tree-switcher.next-noline.next-close .next-tree-switcher-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-tree-switcher.next-noline:not(.next-disabled):hover .next-tree-switcher-icon { + color: #333333; } + .next-tree-switcher.next-noline.next-disabled { + cursor: not-allowed; } + .next-tree-switcher.next-noline.next-disabled .next-tree-switcher-icon { + color: #CCCCCC; } + .next-tree-switcher.next-noop-noline { + width: 12px; + height: 12px; } + .next-tree-switcher.next-line { + width: 16px; + height: 16px; + line-height: 14px; + border: 1px solid #C4C6CF; + border-radius: 3px; + background-color: #FFFFFF; + cursor: pointer; } + .next-tree-switcher.next-line .next-tree-switcher-icon { + margin-left: 3px; + color: #666666; } + .next-tree-switcher.next-line .next-tree-switcher-icon:before { + width: 8px; + font-size: 8px; + line-height: inherit; } + @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) { + .next-tree-switcher.next-line .next-tree-switcher-icon { + -webkit-transform: scale(0.5); + -ms-transform: scale(0.5); + transform: scale(0.5); + margin-left: -1px; + margin-right: -4px; } + .next-tree-switcher.next-line .next-tree-switcher-icon:before { + width: 16px; + font-size: 16px; } } + .next-tree-switcher.next-line:not(.next-disabled):hover { + border-color: #A0A2AD; + background-color: #F2F3F7; } + .next-tree-switcher.next-line:not(.next-disabled):hover .next-tree-switcher-icon { + color: #333333; } + .next-tree-switcher.next-line.next-disabled { + border-color: #E6E7EB; + background-color: #FFFFFF; + cursor: not-allowed; } + .next-tree-switcher.next-line.next-disabled .next-tree-switcher-icon { + color: #CCCCCC; } + .next-tree-switcher.next-noop-line { + width: 16px; + height: 16px; } + .next-tree-switcher.next-noop-line-noroot { + height: 0; + border-left: 1px solid #C4C6CF; + border-bottom: 1px solid #C4C6CF; } + .next-tree-switcher.next-noop-line-noroot .next-tree-right-angle { + bottom: -1px; } + .next-tree-switcher.next-loading.next-loading-noline { + width: 12px; + height: 12px; + line-height: 12px; } + .next-tree-switcher.next-loading.next-loading-line { + width: 16px; + height: 16px; + line-height: 14px; + border: 1px solid transparent; } + .next-tree-switcher.next-loading .next-tree-switcher-icon { + color: #5584FF; } + .next-tree-switcher.next-loading .next-tree-switcher-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-tree-right-angle { + position: absolute; + bottom: 6.5px; + left: -17.5px; + display: block; + width: 16.5px; + height: 22px; + border-left: 1px solid #C4C6CF; + border-bottom: 1px solid #C4C6CF; } + .next-tree.next-label-block .next-tree-node-inner { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + outline: none; } + .next-tree.next-label-block .next-tree-node-label-wrapper { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; } + .next-tree.next-node-indent .next-tree-node .next-tree-node { + margin-left: 24px; } + .next-tree.next-node-indent .next-tree-node-inner { + padding-top: 2px; + padding-bottom: 2px; } + .next-tree.next-node-indent .next-tree-node-inner:focus .next-tree-node-label { + color: #333333; + background-color: #F2F3F7; } + .next-tree.next-node-indent .next-tree-node-label-wrapper { + border-top: 2px solid transparent; + border-bottom: 2px solid transparent; } + .next-tree.next-node-indent .next-tree-node-label { + -webkit-transition: color cubic-bezier(0.23, 1, 0.32, 1) 300ms, background-color cubic-bezier(0.23, 1, 0.32, 1) 300ms; + transition: color cubic-bezier(0.23, 1, 0.32, 1) 300ms, background-color cubic-bezier(0.23, 1, 0.32, 1) 300ms; + cursor: default; + color: #333333; + background-color: #FFFFFF; } + .next-tree.next-node-indent .next-tree-node-label-selectable { + cursor: pointer; } + .next-tree.next-node-indent .next-tree-node-label:hover { + color: #333333; + background-color: #F2F3F7; } + .next-tree.next-node-indent .next-tree-node-inner.next-selected .next-tree-node-label { + color: #333333; + background-color: #DEE8FF; } + .next-tree.next-node-indent .next-tree-node-inner.next-disabled .next-tree-node-label, + .next-tree.next-node-indent .next-tree-node-inner.next-disabled .next-tree-node-label:hover { + color: #CCCCCC; + background-color: #FFFFFF; + cursor: not-allowed; } + .next-tree.next-node-indent .next-tree-node-inner.next-drag-over .next-tree-node-label { + background-color: #5584FF; + color: #FFFFFF; + opacity: .8; } + .next-tree.next-node-indent .next-tree-node-inner.next-drag-over-gap-top .next-tree-node-label-wrapper { + border-top-color: #5584FF; } + .next-tree.next-node-indent .next-tree-node-inner.next-drag-over-gap-bottom .next-tree-node-label-wrapper { + border-bottom-color: #5584FF; } + .next-tree.next-node-block .next-tree-node-inner { + padding-top: 4px; + padding-bottom: 4px; + -webkit-transition: color cubic-bezier(0.23, 1, 0.32, 1) 300ms, background-color cubic-bezier(0.23, 1, 0.32, 1) 300ms; + transition: color cubic-bezier(0.23, 1, 0.32, 1) 300ms, background-color cubic-bezier(0.23, 1, 0.32, 1) 300ms; + cursor: pointer; + color: #333333; + background-color: #FFFFFF; } + .next-tree.next-node-block .next-tree-node-inner:hover, .next-tree.next-node-block .next-tree-node-inner:focus { + color: #333333; + background-color: #F2F3F7; } + .next-tree.next-node-block .next-tree-node-inner.next-selected { + color: #333333; + background-color: #DEE8FF; } + .next-tree.next-node-block .next-tree-node-inner.next-disabled, .next-tree.next-node-block .next-tree-node-inner.next-disabled:hover { + color: #CCCCCC; + background-color: #FFFFFF; + cursor: not-allowed; } + .next-tree.next-show-line .next-tree-node .next-tree-node:not(:last-child) { + margin-left: 7.5px; + border-left: 1px solid #C4C6CF; + padding-left: 15.5px; } + .next-tree-node.next-filtered > .next-tree-node-inner .next-tree-node-label { + color: #5584FF; } + .next-tree-node.next-filtered > .next-tree-node-inner .next-tree-node-label:hover { + color: #5584FF; } + +.next-tree[dir='rtl'] .next-tree-switcher { + margin-left: 8px; + margin-right: 0; } + +.next-tree[dir='rtl'] .next-tree-switcher.next-noop-line-noroot { + border-left: none; + border-right: 1px solid #C4C6CF; } + +.next-tree[dir='rtl'] .next-tree-right-angle { + left: auto; + right: -17.5px; + border-left: none; + border-right: 1px solid #C4C6CF; } + +.next-tree[dir='rtl'].next-show-line .next-tree-node .next-tree-node:not(:last-child) { + margin-left: 0; + margin-right: 7.5px; + border-left: none; + border-right: 1px solid #C4C6CF; + padding-left: 0; + padding-right: 15.5px; } + +.next-tree[dir='rtl'].next-node-indent .next-tree-node .next-tree-node { + margin-left: 0; + margin-right: 24px; } + +.next-tree-select { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-tree-select *, + .next-tree-select *:before, + .next-tree-select *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-tree-select-dropdown { + padding: 8px 20px; + background: #FFFFFF; + border: 1px solid #DCDEE3; + border-radius: 3px; + -webkit-box-shadow: none; + box-shadow: none; } + .next-tree-select-not-found { + height: 16px; + font-size: 12px; + color: #999999; } + +.next-upload-list[dir=rtl].next-upload-list-text .next-upload-list-item { + padding: 4px 8px; + padding-left: 36px; } + +.next-upload-list[dir=rtl].next-upload-list-text .next-icon { + left: 12px; + right: auto; } + +.next-upload-list[dir=rtl].next-upload-list-image .next-icon-close { + float: left; + margin-left: 4px; + margin-right: 0; } + +.next-upload-list[dir=rtl].next-upload-list-image .next-upload-list-item-thumbnail { + float: right; + margin-left: 8px; + margin-right: 0; } + +.next-upload-list[dir=rtl].next-upload-list-image .next-upload-list-item-progress { + margin-right: 56px; + margin-left: 20px; } + +.next-upload { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-upload *, + .next-upload *:before, + .next-upload *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-upload-inner { + outline: 0; + display: inline-block; } + .next-upload-inner.next-hidden { + display: none; } + .next-upload-list { + overflow: hidden; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-upload-list *, + .next-upload-list *:before, + .next-upload-list *:after { + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-upload-list-item { + position: relative; } + .next-upload-list-item.next-hidden { + display: none; } + .next-upload-list-item-name { + text-decoration: none; } + .next-upload.next-disabled { + border-color: #E6E7EB !important; + color: #CCCCCC !important; } + .next-upload.next-disabled .next-icon-close { + cursor: not-allowed !important; } + .next-upload.next-disabled .next-upload-inner * { + color: #CCCCCC !important; + border-color: #E6E7EB !important; + cursor: not-allowed !important; } + +.next-upload-list-text .next-upload-list-item { + background-color: #F2F3F7; + padding: 4px 8px; + padding-right: 36px; + height: 40px; + line-height: 32px; + font-size: 12px; + overflow: hidden; + -webkit-transition: all .2s ease-out; + transition: all .2s ease-out; } + .next-upload-list-text .next-upload-list-item:not(:last-child) { + margin-bottom: 4px; } + .next-upload-list-text .next-upload-list-item .next-icon { + position: absolute; + top: 0; + right: 12px; + color: #999999; + cursor: pointer; + text-align: center; + -webkit-transition: all .2s ease-out; + transition: all .2s ease-out; + line-height: 40px; } + .next-upload-list-text .next-upload-list-item .next-icon:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-upload-list-text .next-upload-list-item:hover { + background-color: #F2F3F7; } + .next-upload-list-text .next-upload-list-item:hover .next-icon { + color: #666666; } + .next-upload-list-text .next-upload-list-item-name-wrap { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + margin-right: 4px; } + .next-upload-list-text .next-upload-list-item-name { + color: #333333; + -webkit-transition: all .2s ease-out; + transition: all .2s ease-out; } + .next-upload-list-text .next-upload-list-item-size { + color: #999999; + margin-left: 8px; } + .next-upload-list-text .next-upload-list-item-uploading { + line-height: 16px; } + .next-upload-list-text .next-upload-list-item-done { + line-height: 32px; } + .next-upload-list-text .next-upload-list-item-done:hover .next-upload-list-item-name { + color: #5584FF; } + .next-upload-list-text .next-upload-list-item-done:hover .next-upload-list-item-size { + color: #5584FF; } + .next-upload-list-text .next-upload-list-item-error { + /* stylelint-disable declaration-no-important */ + background-color: #FFECE4 !important; } + .next-upload-list-text .next-upload-list-item-error.next-upload-list-item-error-with-msg { + line-height: 16px; } + .next-upload-list-text .next-upload-list-item-error-msg { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + color: #FF3000; } + +.next-upload-list-image .next-upload-list-item { + -webkit-box-sizing: content-box; + box-sizing: content-box; + border: 1px solid #DCDEE3; + background-color: #FFFFFF; + padding: 8px; + height: 48px; + line-height: 48px; + font-size: 12px; + -webkit-transition: all .2s ease-out; + transition: all .2s ease-out; + overflow: hidden; } + .next-upload-list-image .next-upload-list-item:not(:last-child) { + margin-bottom: 4px; } + .next-upload-list-image .next-upload-list-item:after { + visibility: hidden; + display: block; + height: 0; + font-size: 0; + content: ' '; + clear: both; } + .next-upload-list-image .next-upload-list-item .next-icon-close { + float: right; + margin-right: 4px; + cursor: pointer; + color: #999999; + text-align: center; } + .next-upload-list-image .next-upload-list-item .next-icon-close:before { + width: 12px; + font-size: 12px; + line-height: inherit; } + .next-upload-list-image .next-upload-list-item:hover { + border-color: #5584FF; } + .next-upload-list-image .next-upload-list-item:hover .next-icon-close { + color: #666666; } + .next-upload-list-image .next-upload-list-item-name { + display: block; + color: #333333; + margin-left: 56px; + margin-right: 20px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + -webkit-transition: all .2s ease-out; + transition: all .2s ease-out; } + .next-upload-list-image .next-upload-list-item-size { + color: #999999; + margin-left: 8px; } + .next-upload-list-image .next-upload-list-item-progress { + line-height: 24px; } + .next-upload-list-image .next-upload-list-item-done:hover .next-upload-list-item-name { + color: #5584FF; } + .next-upload-list-image .next-upload-list-item-done:hover .next-upload-list-item-size { + color: #5584FF; } + .next-upload-list-image .next-upload-list-item-thumbnail { + float: left; + width: 48px; + height: 48px; + color: #CCCCCC; + border: 1px solid #DCDEE3; + background-color: #F2F3F7; + margin-right: 8px; + vertical-align: middle; + text-align: center; + overflow: hidden; + -webkit-box-sizing: border-box; + box-sizing: border-box; } + .next-upload-list-image .next-upload-list-item-thumbnail img { + width: 100%; + height: 100%; } + .next-upload-list-image .next-upload-list-item-thumbnail .next-icon { + display: block; + margin: 0; + line-height: 48px; } + .next-upload-list-image .next-upload-list-item-thumbnail .next-icon:before { + width: 24px; + font-size: 24px; + line-height: inherit; } + .next-upload-list-image .next-upload-list-item-error { + border-color: #FF3000 !important; + background-color: #FFFFFF; } + .next-upload-list-image .next-upload-list-item-uploading { + background-color: #FFFFFF; } + .next-upload-list-image .next-upload-list-item-uploading .next-upload-list-item-name { + height: 24px; + line-height: 24px; } + .next-upload-list-image .next-upload-list-item-uploading .next-upload-list-item-progress { + margin-left: 56px; + margin-right: 20px; + height: 24px; + line-height: 24px; } + .next-upload-list-image .next-upload-list-item-error-with-msg .next-upload-list-item-name, + .next-upload-list-image .next-upload-list-item-error-with-msg .next-upload-list-item-error-msg { + height: 24px; + line-height: 24px; } + .next-upload-list-image .next-upload-list-item-error-with-msg .next-upload-list-item-error-msg { + margin-left: 56px; + margin-right: 20px; + color: #FF3000; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } + +.next-upload-list-card { + display: inline-block; } + .next-upload-list-card .next-upload-list-item { + vertical-align: middle; + float: left; } + .next-upload-list-card .next-upload-list-item:not(:last-child) { + margin-right: 12px; } + .next-upload-list-card .next-upload-list-item-wrapper { + position: relative; + border: 1px solid #C4C6CF; + width: 100px; + height: 100px; + padding: 0; + background-color: transparent; } + .next-upload-list-card .next-upload-list-item-thumbnail { + display: table; + text-align: center; + vertical-align: middle; + width: 100%; + height: 100%; + color: #CCCCCC; + font-size: 12px; } + .next-upload-list-card .next-upload-list-item-thumbnail img { + width: 100%; + height: 100%; } + .next-upload-list-card .next-upload-list-item-thumbnail img:focus { + outline: 0; } + .next-upload-list-card .next-upload-list-item-thumbnail .next-icon { + width: 100%; } + .next-upload-list-card .next-upload-list-item-thumbnail .next-icon:before { + width: 48px; + font-size: 48px; + line-height: inherit; } + .next-upload-list-card .next-upload-list-item-handler { + display: table-cell; + width: 100%; + vertical-align: middle; } + .next-upload-list-card .next-upload-list-item-name { + display: block; + width: 100px; + text-align: center; + margin-top: 4px; + font-size: 12px; + color: #666666; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } + .next-upload-list-card .next-upload-list-item-progress { + position: absolute; + font-size: 0; + bottom: 0; + left: 0; + width: 100%; } + .next-upload-list-card .next-upload-list-item-progress .next-progress-line-underlay { + border-radius: 0; } + .next-upload-list-card .next-upload-list-item-progress .next-progress-line-overlay { + border-radius: 0; } + .next-upload-list-card .next-upload-list-item-uploading .next-upload-list-item-wrapper { + background-color: #F7F8FA; } + .next-upload-list-card .next-upload-list-item:hover .next-upload-tool { + opacity: .8; } + .next-upload-list-card .next-upload-list-item .next-upload-tool { + position: absolute; + z-index: 1; + background-color: rgba(0, 0, 0, 0.7); + -webkit-transition: all .3s ease; + transition: all .3s ease; + opacity: 0; + width: 100%; + height: 28px; + left: 0; + bottom: 0; } + .next-upload-list-card .next-upload-list-item .next-upload-tool .next-icon { + width: 49%; + text-align: center; + line-height: 28px; + color: #FFFFFF; } + .next-upload-list-card .next-upload-list-item .next-upload-tool .next-icon:before { + width: 16px; + font-size: 16px; + line-height: inherit; } + .next-upload-list-card .next-upload-list-item .next-upload-tool.next-noclose .next-icon { + width: 100%; } + .next-upload-list-card .next-upload-list-item .next-upload-tool-close { + cursor: pointer; } + .next-upload-list-card .next-upload-list-item .next-upload-tool-download-icon { + border-right: 1px solid #FFFFFF; } + .next-upload-list-card .next-upload-list-item-error .next-upload-list-item-wrapper { + border-color: #FF3000; } + +.next-upload-card { + border: 1px dashed #C4C6CF; + width: 100px; + height: 100px; + background-color: #FFFFFF; + text-align: center; + cursor: pointer; + -webkit-transition: border-color .3s ease; + transition: border-color .3s ease; + display: table-cell; + vertical-align: middle; } + .next-upload-card .next-icon { + color: #C4C6CF; } + .next-upload-card .next-icon:before { + width: 24px; + font-size: 24px; + line-height: inherit; } + .next-upload-card .next-upload-text { + font-size: 12px; + margin-top: 12px; + color: #666666; } + .next-upload-card:hover { + border-color: #5584FF; } + .next-upload-card:hover .next-icon { + color: #5584FF; } + .next-upload-card:hover .next-upload-text { + color: #5584FF; } + +.next-upload-dragable .next-upload-inner { + display: block; } + +.next-upload-dragable .next-upload-drag { + border: 1px dashed #C4C6CF; + -webkit-transition: border-color .3s ease; + transition: border-color .3s ease; + cursor: pointer; + border-radius: 3px; + background-color: transparent; + text-align: center; + margin-bottom: 4px; } + .next-upload-dragable .next-upload-drag-icon { + margin: 20px 0 0; + color: #666666; } + .next-upload-dragable .next-upload-drag-icon .next-upload-drag-upload-icon::before { + content: "\E7EE"; } + .next-upload-dragable .next-upload-drag-text { + margin: 12px 0 0; + font-size: 14px; + color: #666666; } + .next-upload-dragable .next-upload-drag-hint { + margin: 4px 0 20px; + font-size: 12px; + color: #999999; } + .next-upload-dragable .next-upload-drag-over { + border-color: #5584FF; } diff --git a/dist/next-noreset.min-1.css b/dist/next-noreset.min-1.css new file mode 100644 index 0000000000..516b182756 --- /dev/null +++ b/dist/next-noreset.min-1.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-badge{position:relative;display:inline-block;vertical-align:middle;line-height:1}.next-badge,.next-badge *,.next-badge :after,.next-badge :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-badge .next-badge-count{color:#fff;background:#ff3000;text-align:center;white-space:nowrap;border-radius:8px;position:absolute;width:auto;height:16px;min-width:8px;padding:0 4px;font-size:12px;line-height:16px;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);top:-.5em}.next-badge .next-badge-count a,.next-badge .next-badge-count a:hover{color:#fff}.next-badge .next-badge-dot{color:#fff;background:#ff3000;text-align:center;white-space:nowrap;border-radius:8px;position:absolute;width:8px;height:8px;min-width:8px;padding:0;font-size:1px;line-height:1;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);top:-.5em}.next-badge .next-badge-dot a,.next-badge .next-badge-dot a:hover{color:#fff}.next-badge .next-badge-custom{line-height:1.166667;white-space:nowrap;font-size:12px;padding-left:4px;padding-right:4px;border-radius:3px;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.next-badge .next-badge-custom>*{line-height:1}.next-badge .next-badge-custom>.next-icon:before,.next-badge .next-badge-custom>i:before{font-size:inherit;width:auto;vertical-align:top}.next-badge .next-badge-scroll-number{position:absolute;top:-4px;z-index:10;overflow:hidden;-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}.next-badge-scroll-number-only{position:relative;display:inline-block;transition:transform .3s cubic-bezier(.645,.045,.355,1),-webkit-transform .3s cubic-bezier(.645,.045,.355,1);min-width:8px}.next-badge-scroll-number-only span{display:block;height:16px;line-height:16px;font-size:12px}.next-badge-not-a-wrapper .next-badge-count,.next-badge-not-a-wrapper .next-badge-custom,.next-badge-not-a-wrapper .next-badge-dot{position:relative;display:block;top:auto;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.next-badge-list-wrapper{margin-left:0}.next-badge-list-wrapper li{margin-bottom:0;list-style:none}.next-badge[dir=rtl] .next-badge-custom{padding-right:4px;padding-left:4px}.next-badge[dir=rtl] .next-badge-scroll-number{left:0;-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center}.next-overlay-wrapper .next-overlay-inner{z-index:1001}.next-overlay-wrapper .next-overlay-backdrop{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;background:#000;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0}.next-overlay-wrapper.opened .next-overlay-backdrop{opacity:.2}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-balloon{position:absolute;max-width:300px;border-style:solid;border-radius:3px;word-wrap:break-word;z-index:0}.next-balloon,.next-balloon *,.next-balloon :after,.next-balloon :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-balloon:focus,.next-balloon :focus{outline:0}.next-balloon-primary{color:#333;border-color:#4494f9;background-color:#e3f2fd;-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.12);box-shadow:0 1px 3px 0 rgba(0,0,0,.12);border-width:1px}.next-balloon-primary .next-balloon-close{position:absolute;top:12px;right:12px;font-size:12px;color:#999}.next-balloon-primary .next-balloon-close .next-icon{width:12px;height:12px;line-height:12px}.next-balloon-primary .next-balloon-close .next-icon:before{width:12px;height:12px;font-size:12px;line-height:12px}.next-balloon-primary .next-balloon-close :hover{color:#333}.next-balloon-primary:after{position:absolute;width:12px;height:12px;content:" ";-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-sizing:content-box!important;box-sizing:content-box!important;border:1px solid #4494f9;background-color:#e3f2fd;z-index:-1}.next-balloon-primary.next-balloon-top:after{top:-7px;left:calc(50% + -7px);border-right:none;border-bottom:none;-webkit-box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-right:after{top:calc(50% + -7px);right:-7px;border-left:none;border-bottom:none;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-bottom:after{bottom:-7px;left:calc(50% + -7px);border-top:none;border-left:none;-webkit-box-shadow:1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-left:after{top:calc(50% + -7px)}.next-balloon-primary.next-balloon-left-top:after,.next-balloon-primary.next-balloon-left:after{left:-7px;border-top:none;border-right:none;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-left-top:after{top:12px}.next-balloon-primary.next-balloon-left-bottom:after{bottom:12px;left:-7px;border-top:none;border-right:none;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-right-top:after{top:12px}.next-balloon-primary.next-balloon-right-bottom:after,.next-balloon-primary.next-balloon-right-top:after{right:-7px;border-bottom:none;border-left:none;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-right-bottom:after{bottom:12px}.next-balloon-primary.next-balloon-top-left:after{left:12px}.next-balloon-primary.next-balloon-top-left:after,.next-balloon-primary.next-balloon-top-right:after{top:-7px;border-right:none;border-bottom:none;-webkit-box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-top-right:after{right:12px}.next-balloon-primary.next-balloon-bottom-left:after{left:12px}.next-balloon-primary.next-balloon-bottom-left:after,.next-balloon-primary.next-balloon-bottom-right:after{bottom:-7px;border-top:none;border-left:none;-webkit-box-shadow:1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-bottom-right:after{right:12px}.next-balloon-normal{color:#333;border-color:#dcdee3;background-color:#fff;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-width:1px}.next-balloon-normal .next-balloon-close{position:absolute;top:12px;right:12px;font-size:12px;color:#999}.next-balloon-normal .next-balloon-close .next-icon{width:12px;height:12px;line-height:12px}.next-balloon-normal .next-balloon-close .next-icon:before{width:12px;height:12px;font-size:12px;line-height:12px}.next-balloon-normal .next-balloon-close :hover{color:#666}.next-balloon-normal:after{position:absolute;width:12px;height:12px;content:" ";-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-sizing:content-box!important;box-sizing:content-box!important;border:1px solid #dcdee3;background-color:#fff;z-index:-1}.next-balloon-normal.next-balloon-top:after{top:-7px;left:calc(50% + -7px);border-right:none;border-bottom:none;-webkit-box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-right:after{top:calc(50% + -7px);right:-7px;border-left:none;border-bottom:none;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-bottom:after{bottom:-7px;left:calc(50% + -7px);border-top:none;border-left:none;-webkit-box-shadow:1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-left:after{top:calc(50% + -7px)}.next-balloon-normal.next-balloon-left-top:after,.next-balloon-normal.next-balloon-left:after{left:-7px;border-top:none;border-right:none;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-left-top:after{top:12px}.next-balloon-normal.next-balloon-left-bottom:after{bottom:12px;left:-7px;border-top:none;border-right:none;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-right-top:after{top:12px}.next-balloon-normal.next-balloon-right-bottom:after,.next-balloon-normal.next-balloon-right-top:after{right:-7px;border-bottom:none;border-left:none;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-right-bottom:after{bottom:12px}.next-balloon-normal.next-balloon-top-left:after{left:12px}.next-balloon-normal.next-balloon-top-left:after,.next-balloon-normal.next-balloon-top-right:after{top:-7px;border-right:none;border-bottom:none;-webkit-box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-top-right:after{right:12px}.next-balloon-normal.next-balloon-bottom-left:after{left:12px}.next-balloon-normal.next-balloon-bottom-left:after,.next-balloon-normal.next-balloon-bottom-right:after{bottom:-7px;border-top:none;border-left:none;-webkit-box-shadow:1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-bottom-right:after{right:12px}.next-balloon.visible{display:block}.next-balloon.hidden{display:none}.next-balloon-medium{padding:16px}.next-balloon-closable{padding:16px 40px 16px 16px}.next-balloon-tooltip{position:absolute;max-width:300px;border-radius:3px;font-size:12px;z-index:0;color:#333;border:1px solid #dcdee3;background-color:#f2f3f7;-webkit-box-shadow:none;box-shadow:none}.next-balloon-tooltip,.next-balloon-tooltip *,.next-balloon-tooltip :after,.next-balloon-tooltip :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-balloon-tooltip:after{position:absolute;width:12px;height:12px;content:" ";-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-sizing:content-box!important;box-sizing:content-box!important;border:1px solid #dcdee3;background-color:#f2f3f7;z-index:-1}.next-balloon-tooltip-top:after{top:-7px;left:calc(50% + -7px);border-right:none;border-bottom:none}.next-balloon-tooltip-right:after{top:calc(50% + -7px);right:-7px;border-left:none;border-bottom:none}.next-balloon-tooltip-bottom:after{bottom:-7px;left:calc(50% + -7px);border-top:none;border-left:none}.next-balloon-tooltip-left:after{top:calc(50% + -7px);left:-7px;border-top:none;border-right:none}.next-balloon-tooltip-left-top:after{top:12px;left:-7px;border-top:none;border-right:none}.next-balloon-tooltip-left-bottom:after{bottom:12px;left:-7px;border-top:none;border-right:none}.next-balloon-tooltip-right-top:after{top:12px;right:-7px;border-bottom:none;border-left:none}.next-balloon-tooltip-right-bottom:after{right:-7px;bottom:12px;border-bottom:none;border-left:none}.next-balloon-tooltip-top-left:after{top:-7px;left:12px;border-right:none;border-bottom:none}.next-balloon-tooltip-top-right:after{top:-7px;right:12px;border-right:none;border-bottom:none}.next-balloon-tooltip-bottom-left:after{bottom:-7px;left:12px;border-top:none;border-left:none}.next-balloon-tooltip-bottom-right:after{right:12px;bottom:-7px;border-top:none;border-left:none}.next-balloon-tooltip.visible{display:block}.next-balloon-tooltip.hidden{display:none}.next-balloon-tooltip-medium{padding:8px}.next-balloon[dir=rtl].next-balloon-primary .next-balloon-close{left:12px;right:auto}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-right:after{left:-7px;right:auto;border-right:none;border-top:none;border-left:inherit;border-bottom:inherit;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-left-bottom:after,.next-balloon[dir=rtl].next-balloon-primary.next-balloon-left-top:after,.next-balloon[dir=rtl].next-balloon-primary.next-balloon-left:after{right:-7px;left:auto;border-left:none;border-bottom:none;border-right:inherit;border-top:inherit;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-right-bottom:after,.next-balloon[dir=rtl].next-balloon-primary.next-balloon-right-top:after{left:-7px;right:auto;border-right:none;border-top:none;border-bottom:inherit;border-left:inherit;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-top-left:after{right:12px;left:auto}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-top-right:after{right:auto;left:12px}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-bottom-left:after{right:12px;left:auto}.next-balloon[dir=rtl].next-balloon-normal .next-balloon-close,.next-balloon[dir=rtl].next-balloon-primary.next-balloon-bottom-right:after{left:12px;right:auto}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-right:after{left:-7px;right:auto;border-right:none;border-top:none;border-left:inherit;border-bottom:inherit;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-left-bottom:after,.next-balloon[dir=rtl].next-balloon-normal.next-balloon-left-top:after,.next-balloon[dir=rtl].next-balloon-normal.next-balloon-left:after{right:-7px;left:auto;border-left:none;border-bottom:none;border-right:inherit;border-top:inherit;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-right-bottom:after,.next-balloon[dir=rtl].next-balloon-normal.next-balloon-right-top:after{left:-7px;right:auto;border-right:none;border-top:none;border-bottom:inherit;border-left:inherit;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-top-left:after{right:12px;left:auto}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-top-right:after{right:auto;left:12px}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-bottom-left:after{right:12px;left:auto}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-bottom-right:after{left:12px;right:auto}.next-balloon[dir=rtl].next-balloon-closable{padding:16px 16px 16px 40px}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-right:after{left:-7px;right:auto;border-top:none;border-right:none;border-left:inherit;border-bottom:inherit}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-left-bottom:after,.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-left-top:after,.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-left:after{right:-7px;left:auto;border-top:inherit;border-right:inherit;border-left:none;border-bottom:none}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-right-bottom:after,.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-right-top:after{left:-7px;right:auto;border-top:none;border-right:none;border-left:inherit;border-bottom:inherit}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-top-left:after{right:12px;left:auto}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-top-right:after{left:12px;right:auto}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-bottom-left:after{right:12px;left:auto}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-bottom-right:after{left:12px;right:auto}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-medium{padding:8px}.next-breadcrumb{display:block;margin:0;padding:0;height:16px;line-height:16px}.next-breadcrumb .next-breadcrumb-item{display:inline-block}.next-breadcrumb .next-breadcrumb-item .next-breadcrumb-text{display:inline-block;text-decoration:none;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.next-breadcrumb .next-breadcrumb-item .next-breadcrumb-text>b{font-weight:400}.next-breadcrumb .next-breadcrumb-item .next-breadcrumb-separator{display:inline-block;vertical-align:top}.next-breadcrumb .next-breadcrumb-text{height:16px;min-width:16px;font-size:12px;line-height:16px}.next-breadcrumb .next-breadcrumb-separator{height:16px;margin:0 8px;font-size:8px;line-height:16px}.next-breadcrumb .next-breadcrumb-separator .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-breadcrumb .next-breadcrumb-separator .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-breadcrumb .next-breadcrumb-separator .next-icon:before{width:16px;font-size:16px}}.next-breadcrumb .next-breadcrumb-text-ellipsis{font-size:12px}.next-breadcrumb .next-breadcrumb-text{color:#666}.next-breadcrumb .next-breadcrumb-text>b{color:#5584ff}.next-breadcrumb .next-breadcrumb-text>a{color:#666;text-decoration:none;text-align:center}.next-breadcrumb .next-breadcrumb-text.activated,.next-breadcrumb .next-breadcrumb-text.activated>a{color:#333;font-weight:400}.next-breadcrumb .next-breadcrumb-text-ellipsis{color:#666;cursor:default}.next-breadcrumb .next-breadcrumb-separator{color:#a0a2ad}.next-breadcrumb .next-breadcrumb-text:not(.next-breadcrumb-text-ellipsis):hover>a,.next-breadcrumb a.next-breadcrumb-text.activated:hover>a,.next-breadcrumb a.next-breadcrumb-text:not(.next-breadcrumb-text-ellipsis):hover,.next-breadcrumb a.next-breadcrumb-text:not(.next-breadcrumb-text-ellipsis):hover>b{color:#5584ff}.next-breadcrumb a.next-breadcrumb-text.activated:hover{color:#5584ff;font-weight:400}.next-btn,.next-btn *,.next-btn :after,.next-btn :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-btn::-moz-focus-inner{border:0;padding:0}.next-btn,.next-btn:active,.next-btn:focus,.next-btn:hover{outline:0}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-btn{position:relative;display:inline-block;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;text-align:center;text-transform:none;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;cursor:pointer}.next-btn:after{text-align:center;position:absolute;opacity:0;visibility:hidden;-webkit-transition:opacity .5s ease;transition:opacity .5s ease}.next-btn .next-icon.next-xs:before{vertical-align:baseline}.next-btn.hover,.next-btn:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn.next-small{border-radius:3px;padding:0 8px;height:20px;line-height:18px;font-size:12px;border-width:1px}.next-btn.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-small>.next-btn-icon.next-icon-alone:before,.next-btn.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small.next-btn-loading{padding-left:24px}.next-btn.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:8px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-small.next-btn-loading>.next-icon{display:none}.next-btn.next-medium{border-radius:3px;padding:0 12px;height:28px;line-height:26px;font-size:12px;border-width:1px}.next-btn.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium.next-btn-loading{padding-left:28px}.next-btn.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:12px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-medium.next-btn-loading>.next-icon{display:none}.next-btn.next-large{border-radius:3px;padding:0 16px;height:40px;line-height:38px;font-size:16px;border-width:1px}.next-btn.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-large>.next-btn-icon.next-icon-alone:before,.next-btn.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large.next-btn-loading{padding-left:36px}.next-btn.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:16px;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn.next-large.next-btn-loading>.next-icon{display:none}.next-btn.next-btn-normal{border-style:solid;background-color:#fff;border-color:#c4c6cf}.next-btn.next-btn-normal,.next-btn.next-btn-normal.visited,.next-btn.next-btn-normal:link,.next-btn.next-btn-normal:visited{color:#333}.next-btn.next-btn-normal.active,.next-btn.next-btn-normal.hover,.next-btn.next-btn-normal:active,.next-btn.next-btn-normal:focus,.next-btn.next-btn-normal:hover{color:#333;background-color:#f2f3f7;border-color:#a0a2ad;text-decoration:none}.next-btn.next-btn-primary{border-style:solid;background-color:#5584ff;border-color:transparent}.next-btn.next-btn-primary,.next-btn.next-btn-primary.visited,.next-btn.next-btn-primary:link,.next-btn.next-btn-primary:visited{color:#fff}.next-btn.next-btn-primary.active,.next-btn.next-btn-primary.hover,.next-btn.next-btn-primary:active,.next-btn.next-btn-primary:focus,.next-btn.next-btn-primary:hover{color:#fff;background-color:#3e71f7;border-color:transparent;text-decoration:none}.next-btn.next-btn-secondary{border-style:solid;background-color:#fff;border-color:#5584ff}.next-btn.next-btn-secondary,.next-btn.next-btn-secondary.visited,.next-btn.next-btn-secondary:link,.next-btn.next-btn-secondary:visited{color:#5584ff}.next-btn.next-btn-secondary.active,.next-btn.next-btn-secondary.hover,.next-btn.next-btn-secondary:active,.next-btn.next-btn-secondary:focus,.next-btn.next-btn-secondary:hover{color:#fff;background-color:#3e71f7;border-color:#3e71f7;text-decoration:none}.next-btn.disabled,.next-btn[disabled]{cursor:not-allowed;background-color:#f7f8fa;border-color:#e6e7eb}.next-btn.disabled,.next-btn.disabled.visited,.next-btn.disabled:link,.next-btn.disabled:visited,.next-btn[disabled],.next-btn[disabled].visited,.next-btn[disabled]:link,.next-btn[disabled]:visited{color:#ccc}.next-btn.disabled.active,.next-btn.disabled.hover,.next-btn.disabled:active,.next-btn.disabled:focus,.next-btn.disabled:hover,.next-btn[disabled].active,.next-btn[disabled].hover,.next-btn[disabled]:active,.next-btn[disabled]:focus,.next-btn[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-warning{border-style:solid}.next-btn-warning.next-btn-primary{background-color:#ff3000;border-color:#ff3000}.next-btn-warning.next-btn-primary,.next-btn-warning.next-btn-primary.visited,.next-btn-warning.next-btn-primary:link,.next-btn-warning.next-btn-primary:visited{color:#fff}.next-btn-warning.next-btn-primary.active,.next-btn-warning.next-btn-primary.hover,.next-btn-warning.next-btn-primary:active,.next-btn-warning.next-btn-primary:focus,.next-btn-warning.next-btn-primary:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary[disabled]{background-color:#f7f8fa;border-color:#dcdee3}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary.disabled.visited,.next-btn-warning.next-btn-primary.disabled:link,.next-btn-warning.next-btn-primary.disabled:visited,.next-btn-warning.next-btn-primary[disabled],.next-btn-warning.next-btn-primary[disabled].visited,.next-btn-warning.next-btn-primary[disabled]:link,.next-btn-warning.next-btn-primary[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-primary.disabled.active,.next-btn-warning.next-btn-primary.disabled.hover,.next-btn-warning.next-btn-primary.disabled:active,.next-btn-warning.next-btn-primary.disabled:focus,.next-btn-warning.next-btn-primary.disabled:hover,.next-btn-warning.next-btn-primary[disabled].active,.next-btn-warning.next-btn-primary[disabled].hover,.next-btn-warning.next-btn-primary[disabled]:active,.next-btn-warning.next-btn-primary[disabled]:focus,.next-btn-warning.next-btn-primary[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#dcdee3;text-decoration:none}.next-btn-warning.next-btn-normal{background-color:#fff;border-color:#ff3000}.next-btn-warning.next-btn-normal,.next-btn-warning.next-btn-normal.visited,.next-btn-warning.next-btn-normal:link,.next-btn-warning.next-btn-normal:visited{color:#ff3000}.next-btn-warning.next-btn-normal.active,.next-btn-warning.next-btn-normal.hover,.next-btn-warning.next-btn-normal:active,.next-btn-warning.next-btn-normal:focus,.next-btn-warning.next-btn-normal:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal[disabled]{background-color:#f7f8fa;border-color:#e6e7eb}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal.disabled.visited,.next-btn-warning.next-btn-normal.disabled:link,.next-btn-warning.next-btn-normal.disabled:visited,.next-btn-warning.next-btn-normal[disabled],.next-btn-warning.next-btn-normal[disabled].visited,.next-btn-warning.next-btn-normal[disabled]:link,.next-btn-warning.next-btn-normal[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-normal.disabled.active,.next-btn-warning.next-btn-normal.disabled.hover,.next-btn-warning.next-btn-normal.disabled:active,.next-btn-warning.next-btn-normal.disabled:focus,.next-btn-warning.next-btn-normal.disabled:hover,.next-btn-warning.next-btn-normal[disabled].active,.next-btn-warning.next-btn-normal[disabled].hover,.next-btn-warning.next-btn-normal[disabled]:active,.next-btn-warning.next-btn-normal[disabled]:focus,.next-btn-warning.next-btn-normal[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-text{border-radius:0}.next-btn-text,.next-btn-text.hover,.next-btn-text:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn-text.next-btn-primary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-primary,.next-btn-text.next-btn-primary.visited,.next-btn-text.next-btn-primary:link,.next-btn-text.next-btn-primary:visited{color:#5584ff}.next-btn-text.next-btn-primary.active,.next-btn-text.next-btn-primary.hover,.next-btn-text.next-btn-primary:active,.next-btn-text.next-btn-primary:focus,.next-btn-text.next-btn-primary:hover{color:#3e71f7;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-secondary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-secondary,.next-btn-text.next-btn-secondary.visited,.next-btn-text.next-btn-secondary:link,.next-btn-text.next-btn-secondary:visited{color:#666}.next-btn-text.next-btn-secondary.active,.next-btn-text.next-btn-secondary.hover,.next-btn-text.next-btn-secondary:active,.next-btn-text.next-btn-secondary:focus,.next-btn-text.next-btn-secondary:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-normal{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-normal,.next-btn-text.next-btn-normal.visited,.next-btn-text.next-btn-normal:link,.next-btn-text.next-btn-normal:visited{color:#333}.next-btn-text.next-btn-normal.active,.next-btn-text.next-btn-normal.hover,.next-btn-text.next-btn-normal:active,.next-btn-text.next-btn-normal:focus,.next-btn-text.next-btn-normal:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-large{border-radius:0;padding:0;height:24px;line-height:24px;font-size:14px;border-width:0}.next-btn-text.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-large>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large.next-btn-loading{padding-left:20px}.next-btn-text.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:0;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn-text.next-large.next-btn-loading>.next-icon{display:none}.next-btn-text.next-medium{border-radius:0;padding:0;height:20px;line-height:20px;font-size:12px;border-width:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium.next-btn-loading{padding-left:16px}.next-btn-text.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-medium.next-btn-loading>.next-icon{display:none}.next-btn-text.next-small{border-radius:0;padding:0;height:16px;line-height:16px;font-size:12px;border-width:0}.next-btn-text.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-small>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small.next-btn-loading{padding-left:16px}.next-btn-text.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-small.next-btn-loading>.next-icon{display:none}.next-btn-text.disabled,.next-btn-text[disabled]{background-color:transparent;border-color:transparent}.next-btn-text.disabled,.next-btn-text.disabled.visited,.next-btn-text.disabled:link,.next-btn-text.disabled:visited,.next-btn-text[disabled],.next-btn-text[disabled].visited,.next-btn-text[disabled]:link,.next-btn-text[disabled]:visited{color:#ccc}.next-btn-text.disabled.active,.next-btn-text.disabled.hover,.next-btn-text.disabled:active,.next-btn-text.disabled:focus,.next-btn-text.disabled:hover,.next-btn-text[disabled].active,.next-btn-text[disabled].hover,.next-btn-text[disabled]:active,.next-btn-text[disabled]:focus,.next-btn-text[disabled]:hover{color:#ccc;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-loading{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-loading,.next-btn-text.next-btn-loading.visited,.next-btn-text.next-btn-loading:link,.next-btn-text.next-btn-loading:visited{color:#333}.next-btn-text.next-btn-loading.active,.next-btn-text.next-btn-loading.hover,.next-btn-text.next-btn-loading:active,.next-btn-text.next-btn-loading:focus,.next-btn-text.next-btn-loading:hover{color:#333;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-loading{pointer-events:none}.next-btn-loading:after{font-family:NextIcon;content:"\E646";opacity:1;visibility:visible;-webkit-animation:loadingCircle 2s infinite linear;animation:loadingCircle 2s infinite linear}.next-btn-ghost{-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-btn-ghost.next-btn-dark{background-color:transparent;border-color:#fff}.next-btn-ghost.next-btn-dark,.next-btn-ghost.next-btn-dark.visited,.next-btn-ghost.next-btn-dark:link,.next-btn-ghost.next-btn-dark:visited{color:#fff}.next-btn-ghost.next-btn-dark.active,.next-btn-ghost.next-btn-dark.hover,.next-btn-ghost.next-btn-dark:active,.next-btn-ghost.next-btn-dark:focus,.next-btn-ghost.next-btn-dark:hover{color:#fff;background-color:hsla(0,0%,100%,.8);border-color:#fff;text-decoration:none}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark[disabled]{background-color:transparent;border-color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark.disabled.visited,.next-btn-ghost.next-btn-dark.disabled:link,.next-btn-ghost.next-btn-dark.disabled:visited,.next-btn-ghost.next-btn-dark[disabled],.next-btn-ghost.next-btn-dark[disabled].visited,.next-btn-ghost.next-btn-dark[disabled]:link,.next-btn-ghost.next-btn-dark[disabled]:visited{color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled.active,.next-btn-ghost.next-btn-dark.disabled.hover,.next-btn-ghost.next-btn-dark.disabled:active,.next-btn-ghost.next-btn-dark.disabled:focus,.next-btn-ghost.next-btn-dark.disabled:hover,.next-btn-ghost.next-btn-dark[disabled].active,.next-btn-ghost.next-btn-dark[disabled].hover,.next-btn-ghost.next-btn-dark[disabled]:active,.next-btn-ghost.next-btn-dark[disabled]:focus,.next-btn-ghost.next-btn-dark[disabled]:hover{color:hsla(0,0%,100%,.4);background-color:transparent;border-color:hsla(0,0%,100%,.4);text-decoration:none}.next-btn-ghost.next-btn-light{background-color:transparent;border-color:#333}.next-btn-ghost.next-btn-light,.next-btn-ghost.next-btn-light.visited,.next-btn-ghost.next-btn-light:link,.next-btn-ghost.next-btn-light:visited{color:#333}.next-btn-ghost.next-btn-light.active,.next-btn-ghost.next-btn-light.hover,.next-btn-ghost.next-btn-light:active,.next-btn-ghost.next-btn-light:focus,.next-btn-ghost.next-btn-light:hover{color:#999;background-color:rgba(0,0,0,.92);border-color:#333;text-decoration:none}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light[disabled]{background-color:transparent;border-color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light.disabled.visited,.next-btn-ghost.next-btn-light.disabled:link,.next-btn-ghost.next-btn-light.disabled:visited,.next-btn-ghost.next-btn-light[disabled],.next-btn-ghost.next-btn-light[disabled].visited,.next-btn-ghost.next-btn-light[disabled]:link,.next-btn-ghost.next-btn-light[disabled]:visited{color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled.active,.next-btn-ghost.next-btn-light.disabled.hover,.next-btn-ghost.next-btn-light.disabled:active,.next-btn-ghost.next-btn-light.disabled:focus,.next-btn-ghost.next-btn-light.disabled:hover,.next-btn-ghost.next-btn-light[disabled].active,.next-btn-ghost.next-btn-light[disabled].hover,.next-btn-ghost.next-btn-light[disabled]:active,.next-btn-ghost.next-btn-light[disabled]:focus,.next-btn-ghost.next-btn-light[disabled]:hover{color:rgba(0,0,0,.1);background-color:transparent;border-color:rgba(0,0,0,.1);text-decoration:none}.next-btn-group{position:relative;display:inline-block;vertical-align:middle}.next-btn-group>.next-btn{position:relative;float:left;-webkit-box-shadow:none;box-shadow:none}.next-btn-group>.next-btn.active,.next-btn-group>.next-btn:active,.next-btn-group>.next-btn:focus,.next-btn-group>.next-btn:hover{z-index:1}.next-btn-group>.next-btn.disabled,.next-btn-group>.next-btn[disabled]{z-index:0}.next-btn-group .next-btn.next-btn{margin:0 0 0 -1px}.next-btn-group .next-btn:not(:first-child):not(:last-child){border-radius:0}.next-btn-group>.next-btn:first-child{margin:0}.next-btn-group>.next-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group>.next-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group>.next-btn-primary:not(:first-child){border-left-color:hsla(0,0%,100%,.2)}.next-btn-group>.next-btn-primary:not(:first-child):hover{border-left-color:transparent}.next-btn-group>.next-btn-primary:not(:first-child).disabled,.next-btn-group>.next-btn-primary:not(:first-child)[disabled]{border-left-color:#e6e7eb}.next-btn-group[dir=rtl]>.next-btn{float:right}.next-btn-group[dir=rtl] .next-btn.next-btn{margin:0 -1px 0 0}.next-btn-group[dir=rtl]>.next-btn:first-child:not(:last-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group[dir=rtl]>.next-btn:last-child:not(:first-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child){border-right-color:hsla(0,0%,100%,.2)}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child):hover{border-right-color:transparent}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child).disabled,.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child)[disabled]{border-right-color:#e6e7eb}.next-btn.next-small[dir=rtl]{border-radius:3px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl].next-btn-loading{padding-left:8px;padding-right:24px}.next-btn.next-small[dir=rtl].next-btn-loading:after{right:8px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-medium[dir=rtl]{border-radius:3px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl].next-btn-loading{padding-left:12px;padding-right:28px}.next-btn.next-medium[dir=rtl].next-btn-loading:after{right:12px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-large[dir=rtl]{border-radius:3px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl].next-btn-loading{padding-left:16px;padding-right:36px}.next-btn.next-large[dir=rtl].next-btn-loading:after{right:16px;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-large{border-radius:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large.next-btn-loading{padding-left:0;padding-right:20px}.next-btn-text[dir=rtl].next-large.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-medium{border-radius:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-medium.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-small{border-radius:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-small.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-radio-button-large[dir=rtl]>label:first-child{margin-left:-1px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.next-radio-button-large[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large[dir=rtl] .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-wrapper[dir=rtl] .next-radio-label{margin-left:0;margin-right:4px}.next-radio-group[dir=rtl] .next-radio-label{margin-right:4px;margin-left:16px}.next-radio-button[dir=rtl]>label .next-radio-label{margin:0}.next-radio-wrapper{outline:0}.next-radio-wrapper .next-radio{display:inline-block;vertical-align:middle;position:relative;line-height:1}.next-radio-wrapper .next-radio,.next-radio-wrapper .next-radio *,.next-radio-wrapper .next-radio :after,.next-radio-wrapper .next-radio :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-radio-wrapper .next-radio input[type=radio]{opacity:0;position:absolute;vertical-align:middle;top:0;left:0;width:16px;height:16px;margin:0}.next-radio-wrapper .next-radio-inner{display:block;width:16px;height:16px;background:#fff;border-radius:50%;border:1px solid #c4c6cf;-webkit-transition:all .36s ease 0s;transition:all .36s ease 0s;-webkit-box-shadow:none;box-shadow:none}.next-radio-wrapper .next-radio-inner:after{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;border-radius:50%;top:50%;margin-top:-2px;left:50%;margin-left:-2px;background:#fff;content:" ";-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86)}.next-radio-wrapper.checked .next-radio-inner{border-color:#5584ff;background:#5584ff}.next-radio-wrapper.checked .next-radio-inner:after{width:4px;height:4px;font-weight:700;background:#fff;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.next-radio-wrapper.checked.hovered .next-radio-inner,.next-radio-wrapper.checked:hover .next-radio-inner{border-color:transparent}.next-radio-wrapper.disabled input[type=radio]{cursor:not-allowed}.next-radio-wrapper.disabled .next-radio-inner{border-color:#e6e7eb;background:#f7f8fa}.next-radio-wrapper.disabled.checked .next-radio-inner,.next-radio-wrapper.disabled .next-radio-inner.hovered,.next-radio-wrapper.disabled .next-radio-inner:hover{border-color:#e6e7eb}.next-radio-wrapper.disabled.checked .next-radio-inner:after{background:#ccc}.next-radio-wrapper:not(.disabled).focused .next-radio-inner,.next-radio-wrapper:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper:not(.disabled):focus .next-radio-inner,.next-radio-wrapper:not(.disabled):hover .next-radio-inner{border-color:#5584ff;background-color:#dee8ff}.next-radio-wrapper.checked.focused .next-radio-inner,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner{border-color:transparent;background:#3e71f7}.next-radio-wrapper.checked.focused .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner:after{background:#fff}.next-radio-button .next-radio,.next-radio-button input[type=radio]{width:0;height:0}.next-radio-button>label{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1;margin:0 0 0 -1px;border:1px solid #c4c6cf;background-color:#fff;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;vertical-align:middle}.next-radio-button>label .next-radio-label{display:block;color:#333;margin:0;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}.next-radio-button>label.hovered,.next-radio-button>label:focus,.next-radio-button>label:hover{z-index:10;border-color:#a0a2ad;background-color:#f2f3f7}.next-radio-button>label.hovered .next-radio-label,.next-radio-button>label:focus .next-radio-label,.next-radio-button>label:hover .next-radio-label{color:#333}.next-radio-button>label.checked{z-index:11;border-color:#5584ff;background-color:#fff}.next-radio-button>label.checked .next-radio-label{color:#5584ff}.next-radio-button>label.disabled{z-index:0;cursor:not-allowed;border-color:#e6e7eb;background-color:#f7f8fa}.next-radio-button>label.disabled .next-radio-label{color:#ccc}.next-radio-button>label.checked.disabled{z-index:0;border-color:#e6e7eb;background-color:#f2f3f7}.next-radio-button>label.checked.disabled .next-radio-label{color:#ccc}.next-radio-button-large>label{padding:0 8px;height:40px;line-height:40px}.next-radio-button-large>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-large .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium>label{padding:0 8px;height:28px;line-height:28px}.next-radio-button-medium>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-medium>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium .next-radio-label{height:26px;line-height:26px;font-size:12px}.next-radio-button-small>label{padding:0 8px;height:20px;line-height:20px}.next-radio-button-small>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small .next-radio-label{height:18px;line-height:18px;font-size:12px}.next-radio-single-input input[type=radio]{opacity:0;position:absolute;top:0;left:0;margin:0}.next-radio-group{display:inline-block}.next-radio-group .next-radio-label{color:#333;margin-right:16px}.next-radio-group.disabled .next-radio-label{color:#ccc}.next-radio-group-ver .next-radio-wrapper{display:block;margin-bottom:8px}.next-radio-label{margin:0;margin-left:4px;font-size:12px;vertical-align:middle;line-height:1}@-moz-document url-prefix(){.next-radio{margin-top:-1px}@supports ((-webkit-animation:calc(0s)) or (animation:calc(0s))){.next-radio{margin-top:-3px}}}@-webkit-keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}@keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}.next-tag>.next-tag-body{overflow:hidden;text-overflow:ellipsis}.next-tag-checkable.next-tag-level-secondary{color:#333;border-color:transparent;background-color:transparent}.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):hover{color:#5584ff}.next-tag-closable.next-tag-level-primary,.next-tag-default.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-primary,.disabled.next-tag-default.next-tag-level-primary,[disabled].next-tag-closable.next-tag-level-primary,[disabled].next-tag-default.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.disabled.next-tag-default.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-checkable.next-tag-level-primary,[disabled].next-tag-checkable.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary.checked{color:#fff;border-color:#5584ff;background-color:#5584ff}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover{color:#fff;border-color:#3e71f7;background-color:#3e71f7}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked>.next-tag-close-btn{color:#fff}.next-tag-default.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-default.next-tag-level-normal,[disabled].next-tag-default.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.disabled.next-tag-default.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-closable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-normal,[disabled].next-tag-closable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:transparent}.disabled.next-tag-closable.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-normal.checked,.next-tag-checkable.next-tag-level-secondary.checked{color:#5584ff;border-color:#5584ff;background-color:transparent}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover{color:#3e71f7;border-color:#3e71f7;background-color:transparent}.next-tag-checkable.next-tag-level-secondary.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-secondary.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-secondary.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-secondary.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-secondary.checked:after{color:#fff}.next-tag-checkable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#c4c6cf;background-color:transparent}.disabled.next-tag-checkable.next-tag-level-normal,[disabled].next-tag-checkable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-normal.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-normal.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-normal.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-normal.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-normal.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-normal.checked:after{color:#fff}.next-tag-closable.next-tag-level-normal:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#c4c6cf;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-closable.next-tag-level-normal:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E626";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:before{background-color:#a0a2ad}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-closable.next-tag-level-normal:disabled:before,[disabled].next-tag-closable.next-tag-level-normal:before{background-color:#e6e7eb}.next-tag-closable.next-tag-level-normal:disabled:after,[disabled].next-tag-closable.next-tag-level-normal:after{color:#fff}.next-tag-group .next-tag-large,.next-tag-group .next-tag-medium{margin-right:8px;margin-bottom:8px}.next-tag-group .next-tag-small{margin-right:4px;margin-bottom:4px}.next-tag{display:inline-block;max-width:100%;vertical-align:middle;border-width:1px;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid;overflow:hidden;white-space:nowrap;-webkit-transition:all .2s cubic-bezier(.23,1,.32,1);transition:all .2s cubic-bezier(.23,1,.32,1);font-size:0;outline:0}.next-tag,.next-tag *,.next-tag :after,.next-tag :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tag>.next-tag-body{position:relative;display:inline-block;height:100%;text-align:center;vertical-align:middle;max-width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.next-tag>.next-tag-body>a{text-decoration:none;color:inherit}.next-tag>.next-tag-body>a:before{content:" ";position:absolute;display:block;top:0;left:0;right:0;bottom:0}.next-tag>.next-tag-body .next-icon{line-height:1;vertical-align:middle}.next-tag>.next-tag-body .next-icon:before{font-size:inherit}.next-tag.next-tag-body-pointer{cursor:pointer}.next-tag.disabled,.next-tag[disabled]{cursor:not-allowed;pointer-events:none}.next-tag-large{height:40px;padding:0;line-height:38px;font-size:0}.next-tag-large>.next-tag-body{font-size:16px;padding:0 16px;min-width:48px}.next-tag-large.next-tag-closable>.next-tag-body{padding:0 0 0 16px}.next-tag-large[dir=rtl].next-tag-closable>.next-tag-body{padding:0 16px 0 0}.next-tag-large>.next-tag-close-btn{margin-left:12px;padding-right:16px}.next-tag-large>.next-tag-close-btn .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tag-large[dir=rtl]>.next-tag-close-btn{margin-right:12px;margin-left:0;padding-right:0;padding-left:16px}.next-tag-medium{height:28px;padding:0;line-height:26px;font-size:0}.next-tag-medium>.next-tag-body{font-size:14px;padding:0 12px;min-width:40px}.next-tag-medium.next-tag-closable>.next-tag-body{padding:0 0 0 12px}.next-tag-medium[dir=rtl].next-tag-closable>.next-tag-body{padding:0 12px 0 0}.next-tag-medium>.next-tag-close-btn{margin-left:8px;padding-right:12px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-medium>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-medium[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:12px}.next-tag-small{height:20px;padding:0;line-height:18px;font-size:0}.next-tag-small>.next-tag-body{font-size:12px;padding:0 8px;min-width:28px}.next-tag-small.next-tag-closable>.next-tag-body{padding:0 0 0 8px}.next-tag-small[dir=rtl].next-tag-closable>.next-tag-body{padding:0 8px 0 0}.next-tag-small>.next-tag-close-btn{margin-left:8px;padding-right:8px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-small>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-small[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:8px}.next-tag-default{cursor:default}.next-tag-closable{position:relative}.next-tag-closable.next-tag-large>.next-tag-body{max-width:calc(100% - 40px)}.next-tag-closable.next-tag-medium>.next-tag-body{max-width:calc(100% - 28px)}.next-tag-closable.next-tag-small>.next-tag-body{max-width:calc(100% - 20px)}.next-tag-closable>.next-tag-close-btn{display:inline-block;vertical-align:middle;height:100%;text-align:center;cursor:pointer}.next-tag-closable.next-tag-level-normal.disabled,.next-tag-closable.next-tag-level-normal[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable{cursor:pointer;position:relative;border-radius:3px}.next-tag-checkable.checked:before{-webkit-animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.checked:after{-webkit-animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86);animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):before{right:-10px;bottom:-10px;width:20px;height:20px}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):after{font-size:8px;line-height:8px;right:0;bottom:0}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):before{right:-14px;bottom:-14px;width:28px;height:28px}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):after{font-size:12px;line-height:12px;right:0;bottom:0}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):before{right:-18px;bottom:-18px;width:36px;height:36px}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):after{font-size:16px;line-height:16px;right:0;bottom:0}.next-tag-checkable.next-tag-level-primary.disabled,.next-tag-checkable.next-tag-level-primary[disabled]{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-secondary.disabled,.next-tag-checkable.next-tag-level-secondary[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-zoom-appear,.next-tag-zoom-enter{-webkit-animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-tag-zoom-leave{-webkit-animation:zoomOut .3s ease-in;animation:zoomOut .3s ease-in;-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-checkbox-wrapper[dir=rtl]{margin-right:8px;margin-left:0}.next-checkbox-wrapper[dir=rtl]:first-child{margin-right:0}.next-checkbox-wrapper[dir=rtl]>.next-checkbox-label{margin-right:4px;margin-left:0}.next-checkbox-wrapper,.next-checkbox-wrapper *,.next-checkbox-wrapper :after,.next-checkbox-wrapper :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-checkbox-wrapper .next-checkbox{display:inline-block;position:relative;line-height:1;vertical-align:middle}.next-checkbox-wrapper input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:16px;height:16px;margin:0}.next-checkbox-wrapper .next-checkbox-inner{display:block;width:16px;height:16px;background:#fff;border-radius:3px;border:1px solid #c4c6cf;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;text-align:left;-webkit-box-shadow:none;box-shadow:none}.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;top:0;opacity:0;line-height:16px;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);color:#fff;left:4px;margin-left:0}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{vertical-align:top;margin-top:0}.next-checkbox-wrapper.checked .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.checked .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);margin-left:0}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.indeterminate .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.indeterminate .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1);margin-left:0}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.disabled input[type=checkbox]{cursor:not-allowed}.next-checkbox-wrapper.disabled .next-checkbox-inner{border-color:#e6e7eb;background:#f7f8fa}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover{border-color:#e6e7eb}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner>.next-icon{color:#ccc;opacity:1}.next-checkbox-wrapper.focused .next-checkbox-inner,.next-checkbox-wrapper.hovered .next-checkbox-inner,.next-checkbox-wrapper:not(.disabled):hover .next-checkbox-inner{border-color:#5584ff;background-color:#dee8ff}.next-checkbox-wrapper.checked.focused .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner{border-color:transparent;background-color:#3e71f7}.next-checkbox-wrapper.checked.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner>.next-icon{color:#fff;opacity:1}.next-checkbox-group .next-checkbox-wrapper{margin-left:8px}.next-checkbox-group .next-checkbox-wrapper:first-child{margin-left:0}.next-checkbox-group-ver .next-checkbox-wrapper{display:block;margin-left:0;margin-right:0;margin-bottom:8px}.next-checkbox-label{font-size:12px;vertical-align:middle;margin:0;margin-left:4px;line-height:1}.next-menu[dir=rtl] .next-menu-item-helper{float:left}.next-menu[dir=rtl] .next-menu-item .next-checkbox,.next-menu[dir=rtl] .next-menu-item .next-radio{margin-left:4px;margin-right:0}.next-menu[dir=rtl] .next-menu-hoz-right{float:left}.next-menu[dir=rtl] .next-menu-hoz-icon-arrow.next-icon{left:6px;right:auto}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon{margin-left:0;margin-right:-16px}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon.next-menu-icon-right{right:auto;left:4px}.next-menu[dir=rtl] .next-menu-icon-arrow.next-icon{left:10px;right:auto}.next-menu{position:relative;min-width:100px;padding:8px 0;margin:0;list-style:none;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;background:#fff;line-height:32px;font-size:12px}.next-menu,.next-menu *,.next-menu :after,.next-menu :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-menu:focus,.next-menu :focus{outline:0}.next-menu-embeddable,.next-menu-embeddable .next-menu-item.next-disabled,.next-menu-embeddable .next-menu-item.next-disabled .next-menu-item-text>a{background:initial;border:none}.next-menu-embeddable .next-menu-item-inner{height:100%}.next-menu-content{position:relative}.next-menu-content,.next-menu-sub-menu{padding:0;margin:0;list-style:none}.next-menu-sub-menu.next-expand-enter{overflow:hidden}.next-menu-sub-menu.next-expand-enter-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-sub-menu.next-expand-leave{overflow:hidden}.next-menu-sub-menu.next-expand-leave-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-item{position:relative;padding:0 20px;-webkit-transition:background .2s ease;transition:background .2s ease;color:#333;cursor:pointer}.next-menu-item-helper{float:right;color:#999;font-style:normal;font-size:12px}.next-menu-item .next-checkbox,.next-menu-item .next-radio{margin-right:4px}.next-menu-item.next-selected{color:#333;background-color:#fff}.next-menu-item.next-selected .next-menu-icon-arrow{color:#666}.next-menu-item.next-selected .next-menu-icon-selected{color:#5584ff}.next-menu-item.next-disabled,.next-menu-item.next-disabled .next-menu-item-text>a{color:#ccc;background-color:#fff;cursor:not-allowed}.next-menu-item.next-disabled .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-icon-selected,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-selected{color:#ccc}.next-menu-item:not(.next-disabled).next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover,.next-menu-item:not(.next-disabled).next-selected:focus,.next-menu-item:not(.next-disabled).next-selected:focus:hover,.next-menu-item:not(.next-disabled).next-selected:hover,.next-menu-item:not(.next-disabled):hover{color:#333;background-color:#f2f3f7}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled):hover .next-menu-icon-arrow{color:#333}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled):hover .next-menu-icon-selected{color:#5584ff}.next-menu-item-inner{height:32px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.next-menu-item-text{vertical-align:middle}.next-menu-item-text>a{display:inline-block;text-decoration:none;color:#333}.next-menu-item-text>a:before{position:absolute;background-color:transparent;top:0;left:0;bottom:0;right:0;content:""}.next-menu.next-hoz{padding:0}.next-menu.next-hoz .next-menu-content>.next-menu-item,.next-menu.next-hoz>.next-menu-item{display:inline-block;vertical-align:top}.next-menu.next-hoz .next-menu-content,.next-menu.next-hoz .next-menu-footer,.next-menu.next-hoz .next-menu-header{display:inline-block}.next-menu-hoz-right{float:right}.next-menu-group-label{padding:0 12px;color:#999}.next-menu-divider{margin:8px 12px;border-bottom:1px solid #e6e7eb}.next-menu .next-menu-icon-selected.next-icon{position:absolute;top:0;margin-left:-16px}.next-menu .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-icon-selected.next-icon.next-menu-icon-right{right:4px}.next-menu .next-menu-icon-arrow.next-icon{position:absolute;top:0;right:10px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-icon-arrow.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow.next-icon:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-icon-arrow-down.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:scale(.5) rotate(180deg);-ms-transform:scale(.5) rotate(180deg);transform:scale(.5) rotate(180deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-down.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.next-menu .next-menu-icon-arrow-right.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:scale(.5) rotate(-90deg);-ms-transform:scale(.5) rotate(-90deg);transform:scale(.5) rotate(-90deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-right.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-hoz-icon-arrow.next-icon{position:absolute;top:0;right:6px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-hoz-icon-arrow.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-hoz-icon-arrow.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-hoz-icon-arrow.next-open:before{width:12px;font-size:12px;line-height:inherit}.next-menu.next-context{line-height:24px}.next-menu.next-context .next-menu-item-inner{height:24px}.next-input{vertical-align:middle;display:inline-table;border-collapse:separate;font-size:0;line-height:1;width:200px;border-spacing:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;border:1px solid #c4c6cf;background-color:#fff}.next-input,.next-input *,.next-input :after,.next-input :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input input{height:100%}.next-input input[type=reset],.next-input input[type=submit]{-webkit-appearance:button;cursor:pointer}.next-input input::-moz-focus-inner{border:0;padding:0}.next-input input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset}.next-input textarea{resize:none}.next-input input,.next-input textarea{width:100%;border:none;outline:none;padding:0;margin:0;font-weight:400;vertical-align:middle;background-color:transparent;color:#333}.next-input input::-ms-clear,.next-input textarea::-ms-clear{display:none}.next-input.next-input-textarea{border-radius:3px;font-size:0}.next-input.next-input-textarea textarea{color:#333;padding:4px 8px;font-size:12px;border-radius:3px}.next-input.next-input-textarea .next-input-control{display:block;width:auto;border-radius:3px}.next-input.next-input-textarea .next-input-len{padding:0 8px 4px;display:block;text-align:right;width:auto}.next-input.next-small{height:20px;border-radius:3px}.next-input.next-small .next-input-label{padding-left:8px;font-size:12px}.next-input.next-small .next-input-inner{font-size:12px}.next-input.next-small .next-input-control{padding-right:4px}.next-input.next-small input{height:18px;line-height:18px \0;padding:0 4px;font-size:12px}.next-input.next-small input::-webkit-input-placeholder{font-size:12px}.next-input.next-small input::-moz-placeholder{font-size:12px}.next-input.next-small input::-ms-input-placeholder{font-size:12px}.next-input.next-small input::placeholder{font-size:12px}.next-input.next-small .next-input-text-field{padding:0 4px;font-size:12px;height:18px;line-height:18px}.next-input.next-small .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-small input{border-radius:3px}.next-input.next-small .next-input-control{border-radius:0 3px 3px 0}.next-input.next-medium{height:28px;border-radius:3px}.next-input.next-medium .next-input-label{padding-left:8px;font-size:12px}.next-input.next-medium .next-input-inner{font-size:12px}.next-input.next-medium .next-input-control{padding-right:8px}.next-input.next-medium input{height:26px;line-height:26px \0;padding:0 8px;font-size:12px}.next-input.next-medium input::-webkit-input-placeholder{font-size:12px}.next-input.next-medium input::-moz-placeholder{font-size:12px}.next-input.next-medium input::-ms-input-placeholder{font-size:12px}.next-input.next-medium input::placeholder{font-size:12px}.next-input.next-medium .next-input-text-field{padding:0 8px;font-size:12px;height:26px;line-height:26px}.next-input.next-medium .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-medium input{border-radius:3px}.next-input.next-medium .next-input-control{border-radius:0 3px 3px 0}.next-input.next-large{height:40px;border-radius:3px}.next-input.next-large .next-input-label{padding-left:12px;font-size:16px}.next-input.next-large .next-input-inner{font-size:16px}.next-input.next-large .next-input-control{padding-right:8px}.next-input.next-large input{height:38px;line-height:38px \0;padding:0 12px;font-size:16px}.next-input.next-large input::-webkit-input-placeholder{font-size:16px}.next-input.next-large input::-moz-placeholder{font-size:16px}.next-input.next-large input::-ms-input-placeholder{font-size:16px}.next-input.next-large input::placeholder{font-size:16px}.next-input.next-large .next-input-text-field{padding:0 12px;font-size:16px;height:38px;line-height:38px}.next-input.next-large .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-input.next-large input{border-radius:3px}.next-input.next-large .next-input-control{border-radius:0 3px 3px 0}.next-input-hint-wrap{color:#999;position:relative}.next-input-hint-wrap .next-input-clear{opacity:0;z-index:1;position:absolute}.next-input-hint-wrap .next-input-hint{opacity:1}.next-input .next-icon-delete-filling:hover{cursor:pointer;color:#666}.next-input.next-focus,.next-input:hover{border-color:#a0a2ad;background-color:#fff}.next-input.next-focus .next-input-clear,.next-input:hover .next-input-clear{opacity:1}.next-input.next-focus .next-input-clear+.next-input-hint,.next-input:hover .next-input-clear+.next-input-hint{opacity:0}.next-input .next-input-clear:focus{opacity:1}.next-input .next-input-clear:focus+.next-input-hint{opacity:0}.next-input.next-focus{border-color:#5584ff;background-color:#fff}.next-input.next-error,.next-input.next-error.next-focus,.next-input.next-error:hover{border-color:#ff3000}.next-input.next-hidden{display:none}.next-input.next-noborder{border:none}.next-input-control .next-input-len{font-size:12px;line-height:12px;color:#999;display:table-cell;width:1px;vertical-align:bottom}.next-input-control .next-input-len.next-error{color:#ff3000}.next-input-control>*{display:table-cell;width:1%;top:0}.next-input-control>:not(:last-child){padding-right:4px}.next-input-control .next-icon{-webkit-transition:all .3s ease-out;transition:all .3s ease-out;color:#999}.next-input-control .next-icon-success-filling{color:#46bc15}.next-input-control .next-icon-loading{color:#4494f9}.next-input-label{color:#666}.next-input input::-moz-placeholder,.next-input textarea::-moz-placeholder{color:#999;opacity:1}.next-input input:-ms-input-placeholder,.next-input textarea:-ms-input-placeholder{color:#999}.next-input input::-webkit-input-placeholder,.next-input textarea::-webkit-input-placeholder{color:#999}.next-input.next-disabled{color:#ccc;cursor:not-allowed}.next-input.next-disabled,.next-input.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled input::-moz-placeholder,.next-input.next-disabled textarea::-moz-placeholder{color:#ccc;opacity:1}.next-input.next-disabled input:-ms-input-placeholder,.next-input.next-disabled textarea:-ms-input-placeholder{color:#ccc}.next-input.next-disabled input::-webkit-input-placeholder,.next-input.next-disabled textarea::-webkit-input-placeholder{color:#ccc}.next-input.next-disabled .next-input-label,.next-input.next-disabled .next-input-len{color:#ccc}.next-input.next-disabled input,.next-input.next-disabled textarea{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa;cursor:not-allowed}.next-input.next-disabled input:hover,.next-input.next-disabled textarea:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled .next-input-hint-wrap{color:#ccc}.next-input.next-disabled .next-input-hint-wrap .next-input-clear{opacity:0}.next-input.next-disabled .next-input-hint-wrap .next-input-hint{opacity:1}.next-input.next-disabled .next-input-hint-wrap .next-icon-delete-filling:hover{cursor:not-allowed;color:#ccc}.next-input.next-disabled .next-icon{color:#ccc}.next-input-control,.next-input-inner,.next-input-label{display:table-cell;width:1px;vertical-align:middle;line-height:1;background-color:transparent;white-space:nowrap}.next-input-group{display:inline-table;border-collapse:separate;border-spacing:0;line-height:0;width:100%}.next-input-group,.next-input-group *,.next-input-group :after,.next-input-group :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input-group-auto-width{width:100%;border-radius:0!important}.next-input-group>.next-input:first-child.next-large,.next-input-group>.next-input:first-child.next-medium,.next-input-group>.next-input:first-child.next-small{border-top-left-radius:3px!important;border-bottom-left-radius:3px!important}.next-input-group>.next-input:last-child.next-large,.next-input-group>.next-input:last-child.next-medium,.next-input-group>.next-input:last-child.next-small{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.next-input-group-addon{width:1px;display:table-cell;vertical-align:middle;white-space:nowrap}.next-input-group-addon:first-child,.next-input-group-addon:first-child>*{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group-addon:last-child,.next-input-group-addon:last-child>*{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group-text{color:#999;background-color:#f2f3f7;text-align:center;border:1px solid #c4c6cf;padding:0 8px}.next-input-group-text:first-child{border-right-width:0}.next-input-group-text:last-child{border-left-width:0}.next-input-group-text.next-disabled{color:#ccc;cursor:not-allowed}.next-input-group-text.next-disabled,.next-input-group-text.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input-group-text.next-medium,.next-input-group-text.next-small{font-size:12px;border-radius:3px}.next-input-group-text.next-large{font-size:16px;border-radius:3px}.next-input[dir=rtl].next-small .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-small .next-input-control{padding-right:0;padding-left:4px}.next-input[dir=rtl].next-medium .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-medium .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-large .next-input-label{padding-left:0;padding-right:12px}.next-input[dir=rtl].next-large .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-input-textarea .next-input-len{text-align:left}.next-input[dir=rtl] .next-input-control>:not(:last-child){padding-left:4px;padding-right:0}.next-input-group[dir=rtl] .next-input-group-addon:first-child{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-small{border-bottom-right-radius:3px!important;border-top-right-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-small{border-bottom-left-radius:3px!important;border-top-left-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-text:first-child{border-right-width:1px;border-left:0}.next-input-group[dir=rtl] .next-input-group-text:last-child{border-left-width:1px;border-right:0}.next-select{display:inline-block;font-size:0;vertical-align:middle}.next-select,.next-select *,.next-select :after,.next-select :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-select-trigger{min-width:100px;outline:0;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-trigger .next-input-label{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-select-values{display:block;width:100%;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow:hidden}.next-select-trigger .next-select-values>em{font-style:inherit}.next-select-trigger .next-select-values input{padding-left:0;padding-right:0}.next-select-trigger .next-input-control{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-input-control>*{display:inline-block;width:auto}.next-select-trigger .next-input-control>.next-select-arrow{padding-right:0}.next-select-trigger .next-input.next-disabled em{color:#ccc}.next-select-trigger .next-input.next-disabled .next-select-arrow{cursor:not-allowed}.next-select-trigger .next-select-clear{display:none}.next-select-trigger.next-has-clear:hover .next-select-clear{display:inline-block}.next-select-trigger.next-has-clear:hover .next-select-arrow{display:none}.next-select .next-select-inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;min-width:100px;outline:0;color:#333}.next-select .next-select-inner .next-tag{line-height:1;margin-right:4px;margin-bottom:3px;padding-left:4px;padding-right:4px}.next-select-trigger-search{position:relative;display:inline-block;vertical-align:top;overflow:hidden;width:100%;max-width:100%}.next-select-trigger-search>input,.next-select-trigger-search>span{display:block;font-size:inherit;font-family:inherit;letter-spacing:inherit;white-space:nowrap;overflow:hidden}.next-select-trigger-search input{position:absolute;background-color:transparent;width:100%;height:100%!important;z-index:1;left:0;border:0;outline:0;margin:0;padding:0;cursor:inherit}.next-select-trigger-search>span{position:relative;visibility:hidden;white-space:pre;max-width:100%;z-index:-1}.next-select-single.next-no-search{cursor:pointer}.next-select-single.next-has-search.next-active .next-select-values>em{display:none}.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{width:1px;opacity:0;filter:alpha(opacity=0)}.next-select-single.next-inactive .next-select-trigger-search input,.next-select-single.next-no-search .next-select-trigger-search input{color:transparent}.next-select-single .next-select-values{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.next-select-single .next-select-values>em{vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.next-select-multiple .next-select-values,.next-select-tag .next-select-values{margin-bottom:-3px;height:auto!important}.next-select-multiple .next-select-trigger-search,.next-select-tag .next-select-trigger-search{margin-bottom:3px}.next-select-multiple .next-tag+.next-select-trigger-search,.next-select-tag .next-tag+.next-select-trigger-search{width:auto;min-width:1px}.next-select-multiple .next-input,.next-select-tag .next-input{height:auto;-webkit-box-align:start;-ms-flex-align:start;align-items:start}.next-select-multiple.next-small .next-select-values,.next-select-tag.next-small .next-select-values{min-height:18px;padding-top:2px;padding-bottom:2px;line-height:14px}.next-select-multiple.next-small .next-tag,.next-select-tag.next-small .next-tag{border:0;padding-top:0;padding-bottom:0;height:14px}.next-select-multiple.next-small .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-close-btn,.next-select-tag.next-small .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-close-btn{line-height:14px}.next-select-multiple.next-small .next-input-control,.next-select-multiple.next-small .next-input-label,.next-select-tag.next-small .next-input-control,.next-select-tag.next-small .next-input-label{line-height:18px}.next-select-multiple.next-medium .next-select-values,.next-select-tag.next-medium .next-select-values{min-height:26px;padding-top:3px;padding-bottom:3px;line-height:20px}.next-select-multiple.next-medium .next-tag,.next-select-tag.next-medium .next-tag{padding-top:1px;padding-bottom:1px;height:20px}.next-select-multiple.next-medium .next-tag .next-tag-body,.next-select-multiple.next-medium .next-tag .next-tag-close-btn,.next-select-tag.next-medium .next-tag .next-tag-body,.next-select-tag.next-medium .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-medium .next-input-control,.next-select-multiple.next-medium .next-input-label,.next-select-tag.next-medium .next-input-control,.next-select-tag.next-medium .next-input-label{line-height:26px}.next-select-multiple.next-large .next-select-values,.next-select-tag.next-large .next-select-values{min-height:38px;padding-top:7px;padding-bottom:7px;line-height:24px}.next-select-multiple.next-large .next-tag,.next-select-tag.next-large .next-tag{padding-top:3px;padding-bottom:3px;height:24px}.next-select-multiple.next-large .next-tag .next-tag-body,.next-select-multiple.next-large .next-tag .next-tag-close-btn,.next-select-tag.next-large .next-tag .next-tag-body,.next-select-tag.next-large .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-large .next-input-control,.next-select-multiple.next-large .next-input-label,.next-select-tag.next-large .next-input-control,.next-select-tag.next-large .next-input-label{line-height:38px}.next-select.next-no-search .next-select-trigger-search input{color:transparent}.next-select-auto-complete{width:160px}.next-select-auto-complete .next-input{width:100%}.next-select-auto-complete .next-input .next-input-hint-wrap{padding-right:1px}.next-select-auto-complete .next-input .next-select-arrow{padding-left:0}.next-select.next-active .next-select-arrow{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-select-arrow{cursor:pointer;width:auto!important;text-align:center;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-menu-wrapper{max-height:260px;overflow:auto;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none}.next-select-menu-wrapper .next-select-menu{max-height:none;border:none}.next-select-menu{max-height:260px;overflow:auto}.next-select-menu .next-select-menu-empty-content{padding-left:8px;padding-right:8px;color:#999}.next-select-menu.next-select-auto-complete-menu.next-select-menu-empty{display:none}.next-select-menu .next-menu-item-text .next-icon{vertical-align:middle}.next-select-all{display:block;cursor:pointer;padding:0 8px;margin:0 12px 8px;border-bottom:1px solid #dcdee3}.next-select-all:hover{color:#3e71f7}.next-select-all .next-menu-icon-selected.next-icon{display:inline-block!important;top:auto;color:#5584ff}.next-select-highlight{color:#5584ff;font-size:12px}.next-select-in-ie.next-select-trigger .next-select-values{overflow:visible}.next-select-in-ie.next-select-trigger .next-input-control,.next-select-in-ie.next-select-trigger .next-input-label{width:1px}.next-select-in-ie.next-select-trigger .next-input-control>*{display:table-cell;width:1%}.next-select-in-ie.next-select-trigger .next-select-arrow{display:table-cell}.next-select-in-ie.next-select-trigger .next-select-clear{display:none}.next-select-in-ie.next-select-trigger.next-select-multiple .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-tag .next-select-inner{vertical-align:top}.next-select-in-ie.next-select-trigger .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-single .next-select-values{display:inline-table}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-small .next-select-values{line-height:20px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-medium .next-select-values{line-height:28px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-large .next-select-values{line-height:40px}.next-select-in-ie.next-select-trigger .next-select-trigger-search>span{max-width:100px}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values{position:relative}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values>em{position:absolute;display:inline-block;height:100%;line-height:1;vertical-align:middle;overflow:hidden;left:4px;right:0;top:30%}.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{filter:alpha(opacity=0);font-size:0}.next-select-in-ie.next-select-trigger.next-no-search .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-trigger-search input{color:inherit}.next-calendar,.next-calendar *,.next-calendar :after,.next-calendar :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-calendar table{border-collapse:collapse;border-spacing:0}.next-calendar td,.next-calendar th{padding:0}@-webkit-keyframes cellZoomIn{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes cellZoomIn{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes cellHover{0%{opacity:0}to{opacity:1}}@keyframes cellHover{0%{opacity:0}to{opacity:1}}@-webkit-keyframes enterToLeft{0%{-webkit-transform:translate(-40%);transform:translate(-40%);opacity:0}50%{opacity:.6}to{opacity:1;-webkit-transform:translate(0);transform:translate(0)}}@keyframes enterToLeft{0%{-webkit-transform:translate(-40%);transform:translate(-40%);opacity:0}50%{opacity:.6}to{opacity:1;-webkit-transform:translate(0);transform:translate(0)}}@-webkit-keyframes enterToRight{0%{-webkit-transform:translate(40%);transform:translate(40%);opacity:0}50%{opacity:.6}to{opacity:1;-webkit-transform:translate(0);transform:translate(0)}}@keyframes enterToRight{0%{-webkit-transform:translate(40%);transform:translate(40%);opacity:0}50%{opacity:.6}to{opacity:1;-webkit-transform:translate(0);transform:translate(0)}}.next-calendar-card .next-calendar-header,.next-calendar-fullscreen .next-calendar-header{text-align:right}.next-calendar-card .next-calendar-header .next-select,.next-calendar-fullscreen .next-calendar-header .next-select{margin-right:4px;vertical-align:top}.next-calendar-card .next-calendar-header .next-menu,.next-calendar-fullscreen .next-calendar-header .next-menu{text-align:left}.next-calendar-card .next-calendar-header,.next-calendar-fullscreen .next-calendar-header{margin-bottom:8px}.next-calendar-panel-header{position:relative;background:#5584ff;margin-bottom:8px;border-bottom:1px solid transparent}.next-calendar-panel-header-full,.next-calendar-panel-header-left,.next-calendar-panel-header-right{height:32px;line-height:32px}.next-calendar-panel-header-full .next-calendar-btn,.next-calendar-panel-header-left .next-calendar-btn,.next-calendar-panel-header-right .next-calendar-btn{vertical-align:top;font-weight:700;margin:0 4px;background-color:transparent;border-color:transparent}.next-calendar-panel-header-full .next-calendar-btn,.next-calendar-panel-header-full .next-calendar-btn.visited,.next-calendar-panel-header-full .next-calendar-btn:link,.next-calendar-panel-header-full .next-calendar-btn:visited,.next-calendar-panel-header-left .next-calendar-btn,.next-calendar-panel-header-left .next-calendar-btn.visited,.next-calendar-panel-header-left .next-calendar-btn:link,.next-calendar-panel-header-left .next-calendar-btn:visited,.next-calendar-panel-header-right .next-calendar-btn,.next-calendar-panel-header-right .next-calendar-btn.visited,.next-calendar-panel-header-right .next-calendar-btn:link,.next-calendar-panel-header-right .next-calendar-btn:visited{color:#fff}.next-calendar-panel-header-full .next-calendar-btn.active,.next-calendar-panel-header-full .next-calendar-btn.hover,.next-calendar-panel-header-full .next-calendar-btn:active,.next-calendar-panel-header-full .next-calendar-btn:focus,.next-calendar-panel-header-full .next-calendar-btn:hover,.next-calendar-panel-header-left .next-calendar-btn.active,.next-calendar-panel-header-left .next-calendar-btn.hover,.next-calendar-panel-header-left .next-calendar-btn:active,.next-calendar-panel-header-left .next-calendar-btn:focus,.next-calendar-panel-header-left .next-calendar-btn:hover,.next-calendar-panel-header-right .next-calendar-btn.active,.next-calendar-panel-header-right .next-calendar-btn.hover,.next-calendar-panel-header-right .next-calendar-btn:active,.next-calendar-panel-header-right .next-calendar-btn:focus,.next-calendar-panel-header-right .next-calendar-btn:hover{color:#fff;background-color:transparent;border-color:transparent;text-decoration:none}.next-calendar-panel-header-left,.next-calendar-panel-header-right{display:inline-block;width:50%;text-align:center}.next-calendar-panel-header-full{width:100%;text-align:center}.next-calendar-btn{cursor:pointer;padding:0;margin:0;border:0;background:transparent;outline:none;height:100%}.next-calendar-btn>.next-icon.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-calendar-btn-next-decade,.next-calendar-btn-next-month,.next-calendar-btn-next-year,.next-calendar-btn-prev-decade,.next-calendar-btn-prev-month,.next-calendar-btn-prev-year{position:absolute;top:0;background-color:transparent;border-color:transparent}.next-calendar-btn-next-decade,.next-calendar-btn-next-decade.visited,.next-calendar-btn-next-decade:link,.next-calendar-btn-next-decade:visited,.next-calendar-btn-next-month,.next-calendar-btn-next-month.visited,.next-calendar-btn-next-month:link,.next-calendar-btn-next-month:visited,.next-calendar-btn-next-year,.next-calendar-btn-next-year.visited,.next-calendar-btn-next-year:link,.next-calendar-btn-next-year:visited,.next-calendar-btn-prev-decade,.next-calendar-btn-prev-decade.visited,.next-calendar-btn-prev-decade:link,.next-calendar-btn-prev-decade:visited,.next-calendar-btn-prev-month,.next-calendar-btn-prev-month.visited,.next-calendar-btn-prev-month:link,.next-calendar-btn-prev-month:visited,.next-calendar-btn-prev-year,.next-calendar-btn-prev-year.visited,.next-calendar-btn-prev-year:link,.next-calendar-btn-prev-year:visited{color:#fff}.next-calendar-btn-next-decade.active,.next-calendar-btn-next-decade.hover,.next-calendar-btn-next-decade:active,.next-calendar-btn-next-decade:focus,.next-calendar-btn-next-decade:hover,.next-calendar-btn-next-month.active,.next-calendar-btn-next-month.hover,.next-calendar-btn-next-month:active,.next-calendar-btn-next-month:focus,.next-calendar-btn-next-month:hover,.next-calendar-btn-next-year.active,.next-calendar-btn-next-year.hover,.next-calendar-btn-next-year:active,.next-calendar-btn-next-year:focus,.next-calendar-btn-next-year:hover,.next-calendar-btn-prev-decade.active,.next-calendar-btn-prev-decade.hover,.next-calendar-btn-prev-decade:active,.next-calendar-btn-prev-decade:focus,.next-calendar-btn-prev-decade:hover,.next-calendar-btn-prev-month.active,.next-calendar-btn-prev-month.hover,.next-calendar-btn-prev-month:active,.next-calendar-btn-prev-month:focus,.next-calendar-btn-prev-month:hover,.next-calendar-btn-prev-year.active,.next-calendar-btn-prev-year.hover,.next-calendar-btn-prev-year:active,.next-calendar-btn-prev-year:focus,.next-calendar-btn-prev-year:hover{color:#fff;background-color:transparent;border-color:transparent;text-decoration:none}.next-calendar-btn-prev-decade,.next-calendar-btn-prev-year{left:8px}.next-calendar-btn-prev-month{left:28px}.next-calendar-btn-next-month{right:28px}.next-calendar-btn-next-decade,.next-calendar-btn-next-year{right:8px}.next-calendar-fullscreen .next-calendar-th{text-align:right;color:#333;font-size:16px;font-weight:700;padding-right:12px;padding-bottom:4px}.next-calendar-fullscreen .next-calendar-cell{font-size:14px}.next-calendar-fullscreen .next-calendar-cell.next-selected .next-calendar-date,.next-calendar-fullscreen .next-calendar-cell.next-selected .next-calendar-month{font-weight:700;background:#dee8ff;color:#5584ff;border-color:#5584ff}.next-calendar-fullscreen .next-calendar-cell.next-disabled .next-calendar-date,.next-calendar-fullscreen .next-calendar-cell.next-disabled .next-calendar-month{cursor:not-allowed;background:#f7f8fa;color:#ccc;border-color:#e6e7eb}.next-calendar-fullscreen .next-calendar-date,.next-calendar-fullscreen .next-calendar-month{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 4px;padding:4px 8px;min-height:80px;border-top:2px solid;-webkit-transition:background .3s ease;transition:background .3s ease;background:#fff;color:#333;border-color:#dcdee3}.next-calendar-fullscreen .next-calendar-date:hover,.next-calendar-fullscreen .next-calendar-month:hover{background:#dee8ff;color:#5584ff;border-color:#5584ff}.next-calendar-fullscreen .next-calendar-cell-next-month .next-calendar-date,.next-calendar-fullscreen .next-calendar-cell-prev-month .next-calendar-date{background:transparent;color:#ccc;border-color:transparent}.next-calendar-fullscreen .next-calendar-cell-current .next-calendar-date,.next-calendar-fullscreen .next-calendar-cell-current .next-calendar-month{font-weight:700;background:#fff;color:#5584ff;border-color:#5584ff}.next-calendar-card .next-calendar-th,.next-calendar-panel .next-calendar-th,.next-calendar-range .next-calendar-th{text-align:center;color:#999;font-size:12px;font-weight:400}.next-calendar-card .next-calendar-cell,.next-calendar-panel .next-calendar-cell,.next-calendar-range .next-calendar-cell{text-align:center;font-size:12px}.next-calendar-card .next-calendar-cell.next-selected .next-calendar-date,.next-calendar-card .next-calendar-cell.next-selected .next-calendar-month,.next-calendar-card .next-calendar-cell.next-selected .next-calendar-year,.next-calendar-panel .next-calendar-cell.next-selected .next-calendar-date,.next-calendar-panel .next-calendar-cell.next-selected .next-calendar-month,.next-calendar-panel .next-calendar-cell.next-selected .next-calendar-year,.next-calendar-range .next-calendar-cell.next-selected .next-calendar-date,.next-calendar-range .next-calendar-cell.next-selected .next-calendar-month,.next-calendar-range .next-calendar-cell.next-selected .next-calendar-year{-webkit-animation:cellZoomIn .4s cubic-bezier(.23,1,.32,1);animation:cellZoomIn .4s cubic-bezier(.23,1,.32,1);font-weight:700;background:#5584ff;color:#fff;border-color:#5584ff}.next-calendar-card .next-calendar-cell.next-disabled .next-calendar-date,.next-calendar-card .next-calendar-cell.next-disabled .next-calendar-month,.next-calendar-card .next-calendar-cell.next-disabled .next-calendar-year,.next-calendar-panel .next-calendar-cell.next-disabled .next-calendar-date,.next-calendar-panel .next-calendar-cell.next-disabled .next-calendar-month,.next-calendar-panel .next-calendar-cell.next-disabled .next-calendar-year,.next-calendar-range .next-calendar-cell.next-disabled .next-calendar-date,.next-calendar-range .next-calendar-cell.next-disabled .next-calendar-month,.next-calendar-range .next-calendar-cell.next-disabled .next-calendar-year{cursor:not-allowed;background:#f7f8fa;color:#ccc;border-color:#f7f8fa}.next-calendar-card .next-calendar-cell.next-inrange .next-calendar-date,.next-calendar-panel .next-calendar-cell.next-inrange .next-calendar-date,.next-calendar-range .next-calendar-cell.next-inrange .next-calendar-date{background:#dee8ff;color:#5584ff;border-color:#dee8ff}.next-calendar-card .next-calendar-date,.next-calendar-card .next-calendar-month,.next-calendar-card .next-calendar-year,.next-calendar-panel .next-calendar-date,.next-calendar-panel .next-calendar-month,.next-calendar-panel .next-calendar-year,.next-calendar-range .next-calendar-date,.next-calendar-range .next-calendar-month,.next-calendar-range .next-calendar-year{text-align:center;border:1px solid;background:#fff;color:#666;border-color:#fff}.next-calendar-card .next-calendar-date:hover,.next-calendar-card .next-calendar-month:hover,.next-calendar-card .next-calendar-year:hover,.next-calendar-panel .next-calendar-date:hover,.next-calendar-panel .next-calendar-month:hover,.next-calendar-panel .next-calendar-year:hover,.next-calendar-range .next-calendar-date:hover,.next-calendar-range .next-calendar-month:hover,.next-calendar-range .next-calendar-year:hover{cursor:pointer;background:#dee8ff;color:#5584ff;border-color:#dee8ff}.next-calendar-card .next-calendar-date,.next-calendar-panel .next-calendar-date,.next-calendar-range .next-calendar-date{width:24px;height:24px;line-height:22px;margin:4px auto;border-radius:3px}.next-calendar-card .next-calendar-month,.next-calendar-panel .next-calendar-month,.next-calendar-range .next-calendar-month{width:60px;height:24px;line-height:22px;margin:8px auto;border-radius:3px}.next-calendar-card .next-calendar-year,.next-calendar-panel .next-calendar-year,.next-calendar-range .next-calendar-year{width:48px;height:24px;line-height:22px;margin:8px auto;border-radius:3px}.next-calendar-card .next-calendar-cell-next-month .next-calendar-date,.next-calendar-card .next-calendar-cell-prev-month .next-calendar-date,.next-calendar-panel .next-calendar-cell-next-month .next-calendar-date,.next-calendar-panel .next-calendar-cell-prev-month .next-calendar-date,.next-calendar-range .next-calendar-cell-next-month .next-calendar-date,.next-calendar-range .next-calendar-cell-prev-month .next-calendar-date{background:#fff;color:#ccc;border-color:#fff}.next-calendar-card .next-calendar-cell-current .next-calendar-date,.next-calendar-card .next-calendar-cell-current .next-calendar-month,.next-calendar-card .next-calendar-cell-current .next-calendar-year,.next-calendar-panel .next-calendar-cell-current .next-calendar-date,.next-calendar-panel .next-calendar-cell-current .next-calendar-month,.next-calendar-panel .next-calendar-cell-current .next-calendar-year,.next-calendar-range .next-calendar-cell-current .next-calendar-date,.next-calendar-range .next-calendar-cell-current .next-calendar-month,.next-calendar-range .next-calendar-cell-current .next-calendar-year{font-weight:700;background:#fff;color:#5584ff;border-color:transparent}.next-calendar[dir=rtl] .next-calendar-header{text-align:left}.next-calendar[dir=rtl] .next-calendar-header .next-select{margin-right:0;margin-left:4px}.next-calendar[dir=rtl] .next-calendar-header .next-menu{text-align:right}.next-calendar[dir=rtl] .next-calendar-btn-prev-decade,.next-calendar[dir=rtl] .next-calendar-btn-prev-year{left:auto;right:8px}.next-calendar[dir=rtl] .next-calendar-btn-prev-month{left:auto;right:28px}.next-calendar[dir=rtl] .next-calendar-btn-next-month{right:auto;left:28px}.next-calendar[dir=rtl] .next-calendar-btn-next-decade,.next-calendar[dir=rtl] .next-calendar-btn-next-year{right:auto;left:8px}.next-calendar-fullscreen[dir=rtl] .next-calendar-th{text-align:left;padding-left:12px;padding-right:0}.next-calendar-fullscreen[dir=rtl] .next-calendar-date,.next-calendar-fullscreen[dir=rtl] .next-calendar-month{text-align:left}.next-calendar-range[dir=rtl] .next-calendar-body-left,.next-calendar-range[dir=rtl] .next-calendar-body-right{float:right}.next-calendar-range[dir=rtl] .next-calendar-body-left{padding-right:0;padding-left:8px}.next-calendar-range[dir=rtl] .next-calendar-body-right{padding-left:0;padding-right:8px}.next-calendar-table{width:100%;table-layout:fixed}.next-calendar-range .next-calendar-body-left,.next-calendar-range .next-calendar-body-right{float:left;width:50%}.next-calendar-range .next-calendar-body-left{padding-right:8px}.next-calendar-range .next-calendar-body-right{padding-left:8px}.next-calendar-range .next-calendar-body:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-card,.next-card:after,.next-card:before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-card[dir=rtl] .next-card-extra{left:0;right:auto}.next-card[dir=rtl] .next-card-title:before{right:0;left:auto}.next-card[dir=rtl] .next-card-subtitle{float:left;padding-right:8px;padding-left:0}.next-card[dir=rtl] .next-card-head-show-bullet .next-card-title{padding-left:0;padding-right:8px}.next-card,.next-card *,.next-card :after,.next-card :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-card{min-width:100px;padding:0 16px;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none}.next-card,.next-card-head{background:#fff}.next-card-head-show-bullet .next-card-title{padding-left:8px}.next-card-head-show-bullet .next-card-title:before{content:"";display:inline-block;height:16px;width:3px;background:#5584ff;position:absolute;left:0;top:calc(50% - 16px / 2)}.next-card-head-main{position:relative;margin-top:8px;margin-bottom:0;height:40px;line-height:40px}.next-card-title{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80%;height:100%;color:#333;font-size:16px}.next-card-subtitle{font-size:12px;color:#666;padding-left:8px}.next-card-extra{position:absolute;right:0;top:0;height:100%;font-size:12px;color:#5584ff}.next-card-body{padding-bottom:12px}.next-card-show-divider .next-card-head{border-bottom:1px solid #e6e7eb}.next-card-show-divider .next-card-body{padding-top:12px}.next-card-hide-divider .next-card-body{padding-top:0}.next-card-content{overflow:hidden;-webkit-transition:all .3s cubic-bezier(.23,1,.32,1);transition:all .3s cubic-bezier(.23,1,.32,1);position:relative}.next-card-footer .next-icon{-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1)}.next-card-footer .next-icon.expand{-webkit-transform-origin:50% 47%;-ms-transform-origin:50% 47%;transform-origin:50% 47%;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-cascader{display:inline-block;overflow:auto;border:1px solid #dcdee3;border-radius:3px}.next-cascader,.next-cascader *,.next-cascader :after,.next-cascader :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-cascader-inner:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-cascader-menu-wrapper{float:left;overflow:auto;width:100px;height:192px}.next-cascader-menu-wrapper+.next-cascader-menu-wrapper{border-left:1px solid #dcdee3}.next-cascader-menu{position:relative;padding:0;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;min-width:auto;min-height:100%}.next-cascader-menu.next-has-right-border{border-right:1px solid #dcdee3}.next-cascader-menu-item.next-expanded{color:#333;background-color:#f2f3f7}.next-cascader-menu-icon-right{position:absolute;top:0;right:10px;color:#666}.next-cascader-menu-icon-right:hover{color:#333}.next-cascader-menu-icon-expand.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-cascader-menu-icon-expand.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-cascader-menu-icon-expand.next-icon:before{width:16px;font-size:16px}}.next-cascader-menu-icon-loading.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-cascader-menu-item.next-expanded .next-cascader-menu-icon-right{color:#333}.next-cascader-menu-item.next-expanded .next-cascader-menu-icon-loading{color:#5584ff}.next-cascader-filtered-list{height:192px;padding:0;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;overflow:auto}.next-cascader-filtered-list .next-menu-item-inner{overflow:visible}.next-cascader-filtered-item em{color:#5584ff;font-style:normal}.next-cascader[dir=rtl] .next-cascader-menu-wrapper{float:right;border-left:none;border-right:1px solid #dcdee3}.next-cascader[dir=rtl] .next-cascader-menu-wrapper:first-child{border-right:none}.next-cascader[dir=rtl] .next-cascader-menu.next-has-right-border{border-right:none;border-left:1px solid #dcdee3}.next-cascader[dir=rtl] .next-cascader-menu-icon-right{right:auto;left:10px}.next-cascader-select,.next-cascader-select *,.next-cascader-select-dropdown,.next-cascader-select :after,.next-cascader-select :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-cascader-select-dropdown{border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none}.next-cascader-select-dropdown *,.next-cascader-select-dropdown :after,.next-cascader-select-dropdown :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-cascader-select-dropdown .next-cascader{display:block;border:none;-webkit-box-shadow:none;box-shadow:none}.next-cascader-select-not-found{padding:0;border:none;-webkit-box-shadow:none;box-shadow:none;overflow:auto;color:#999}.next-cascader-select-not-found .next-menu-item:hover{color:#999;background:#fff;cursor:default}.next-collapse[dir=rtl] .next-collapse-panel-title{padding:8px 28px 8px 0}.next-collapse[dir=rtl] .next-collapse-panel-icon{left:inherit;right:12px;-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg);margin-left:0;margin-right:0}.next-collapse[dir=rtl] .next-collapse-panel-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-collapse[dir=rtl] .next-collapse-panel-icon{-webkit-transform:scale(.5) rotate(270deg);-ms-transform:scale(.5) rotate(270deg);transform:scale(.5) rotate(270deg);margin-left:-4px;margin-right:-4px}.next-collapse[dir=rtl] .next-collapse-panel-icon:before{width:16px;font-size:16px}}.next-collapse{border:1px solid #dcdee3;border-radius:3px;overflow:hidden}.next-collapse,.next-collapse *,.next-collapse :after,.next-collapse :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-collapse:focus,.next-collapse :focus{outline:0}.next-collapse-panel:not(:first-child){border-top:1px solid #dcdee3}.next-collapse .next-collapse-panel-icon{position:absolute;color:#333;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;left:12px;margin-top:-2px;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);margin-left:0;margin-right:0}.next-collapse .next-collapse-panel-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-collapse .next-collapse-panel-icon{-webkit-transform:scale(.5) rotate(90deg);-ms-transform:scale(.5) rotate(90deg);transform:scale(.5) rotate(90deg);margin-left:-4px;margin-right:-4px}.next-collapse .next-collapse-panel-icon:before{width:16px;font-size:16px}}.next-collapse-panel-title{position:relative;line-height:20px;background:#f2f3f7;font-size:14px;font-weight:400;color:#333;cursor:pointer;padding:8px 0 8px 28px;-webkit-transition:background .2s ease;transition:background .2s ease}.next-collapse-panel-title:hover{background:#ebecf0;color:#333;font-weight:400}.next-collapse-panel-title:hover .next-collapse-panel-icon{color:#333}.next-collapse-panel-content{overflow:hidden;height:0;padding:0 16px;background:#fff;font-size:12px;color:#666;-webkit-transition:all .3s cubic-bezier(.23,1,.32,1);transition:all .3s cubic-bezier(.23,1,.32,1);opacity:0}.next-collapse-panel-expanded>.next-collapse-panel-content{display:block;padding:12px 16px;height:auto;opacity:1}.next-collapse .next-collapse-panel-icon.next-collapse-panel-icon-expanded{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);margin-left:0;margin-right:0}.next-collapse .next-collapse-panel-icon.next-collapse-panel-icon-expanded:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-collapse .next-collapse-panel-icon.next-collapse-panel-icon-expanded{-webkit-transform:scale(.5) rotate(180deg);-ms-transform:scale(.5) rotate(180deg);transform:scale(.5) rotate(180deg);margin-left:-4px;margin-right:-4px}.next-collapse .next-collapse-panel-icon.next-collapse-panel-icon-expanded:before{width:16px;font-size:16px}}.next-collapse-disabled{border-color:#e6e7eb}.next-collapse-panel-disabled{overflow:hidden}.next-collapse-panel-disabled:not(:first-child){border-color:#e6e7eb}.next-collapse-panel-disabled>.next-collapse-panel-title{cursor:not-allowed;color:#ccc;background:#f2f3f7}.next-collapse-panel-disabled .next-collapse-panel-icon{color:#ccc}.next-collapse-panel-disabled .next-collapse-panel-title:hover{font-weight:400}.next-collapse-panel-disabled .next-collapse-panel-title:hover .next-collapse-panel-icon{color:#ccc}.next-collapse-panel-disabled:hover{color:#ccc;background:#f2f3f7}.next-time-picker-menu{float:left;text-align:center}.next-time-picker-menu:not(:last-child){border-right:1px solid #c4c6cf}.next-time-picker-menu-title{cursor:default;height:28px;line-height:28px;font-size:12px;font-weight:400;color:#999;background:#fff}.next-time-picker-menu ul{position:relative;overflow-y:auto;list-style:none;margin:0;padding:0;font-size:12px;height:196px}.next-time-picker-menu-item{cursor:pointer;height:28px;line-height:28px;-webkit-transition:background .3s ease-out;transition:background .3s ease-out;color:#666;background:#fff;outline:none}.next-time-picker-menu-item:hover{color:#333;background:#f2f3f7}.next-time-picker-menu-item.next-selected{font-weight:700;color:#666;background:#f2f3f7}.next-time-picker-menu-item.next-disabled{cursor:not-allowed;color:#ccc;background:#fff}.next-time-picker-panel,.next-time-picker-panel *,.next-time-picker-panel :after,.next-time-picker-panel :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-time-picker-panel:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-time-picker-panel-header{border-bottom:1px solid #dcdee3}.next-time-picker-panel-input.next-input{width:100%;padding:6px;border-color:transparent;vertical-align:middle}.next-time-picker-panel-col-3 .next-time-picker-menu{width:33.33333%}.next-time-picker-panel-col-2 .next-time-picker-menu{width:50%}.next-time-picker-body[dir=rtl] .next-time-picker-menu{float:right}.next-time-picker-body[dir=rtl] .next-time-picker-menu:not(:last-child){border-right:none;border-left:1px solid #c4c6cf}.next-time-picker{display:inline-block;width:200px}.next-time-picker,.next-time-picker *,.next-time-picker :after,.next-time-picker :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-time-picker-trigger .next-input{width:100%}.next-time-picker-body{overflow:hidden;width:200px;border:1px solid #dcdee3;border-radius:3px;background:#fff;-webkit-box-shadow:none;box-shadow:none}.next-range-picker-panel-input-separator,.next-range-picker-trigger-separator{cursor:default;display:inline-block;text-align:center;color:#ccc;width:16px;font-size:12px;vertical-align:middle}.next-date-picker,.next-month-picker,.next-year-picker{display:inline-block;width:200px}.next-date-picker-input,.next-month-picker-input,.next-year-picker-input{width:100%}.next-date-picker-body,.next-month-picker-body,.next-year-picker-body{width:288px}.next-date-picker-panel-input.next-input,.next-month-picker-panel-input.next-input,.next-year-picker-panel-input.next-input{width:100%;background:transparent}.next-date-picker-body.next-date-picker-body-show-time .next-date-picker-panel-input.next-input{width:49%}.next-date-picker-body.next-date-picker-body-show-time .next-date-picker-panel-input.next-input:first-child{margin-right:2%}.next-range-picker{display:inline-block;width:336px}.next-range-picker-input{width:100%}.next-range-picker-trigger{border:1px solid #c4c6cf;background-color:#fff}.next-range-picker-trigger:hover{border-color:#a0a2ad;background-color:#fff}.next-range-picker-trigger.next-error{border-color:#ff3000}.next-range-picker-trigger-input.next-input{height:auto;width:calc((100% - 16px) / 2)}.next-range-picker.next-disabled .next-range-picker-trigger{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa;cursor:not-allowed}.next-range-picker.next-disabled .next-range-picker-trigger:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-range-picker.next-large .next-range-picker-panel-input,.next-range-picker.next-large .next-range-picker-trigger,.next-range-picker.next-medium .next-range-picker-panel-input,.next-range-picker.next-medium .next-range-picker-trigger,.next-range-picker.next-small .next-range-picker-panel-input,.next-range-picker.next-small .next-range-picker-trigger{border-radius:3px}.next-range-picker-body{width:600px}.next-range-picker-panel-input-end-date.next-input,.next-range-picker-panel-input-start-date.next-input{width:calc((100% - 16px) / 2)}.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-end-date,.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-end-time,.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-start-date,.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-start-time{width:calc((100% - 16px - 16px) / 4)}.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-start-date{margin-right:8px}.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-end-time{margin-left:8px}.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-end,.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-start{width:50%;float:left}.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-start{border-right:1px solid #dcdee3}.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-end{border-left:1px solid #dcdee3}.next-date-picker-body[dir=rtl] .next-date-picker-panel-footer{text-align:left}.next-date-picker-body[dir=rtl] .next-date-picker-panel-footer>.next-btn:not(:last-child){margin-right:0;margin-left:16px}.next-date-picker-body[dir=rtl].next-date-picker-body-show-time .next-date-picker-panel-input.next-input:first-child{margin-left:2%;margin-right:0}.next-date-picker-body[dir=rtl].next-date-picker-body-show-time .next-time-picker-menu{float:right}.next-date-picker-body[dir=rtl].next-date-picker-body-show-time .next-time-picker-menu:not(:last-child){border-right:none;border-left:1px solid #c4c6cf}.next-range-picker-body[dir=rtl] .next-range-picker-panel-input{text-align:right}.next-range-picker-body[dir=rtl] .next-date-picker-panel-footer{text-align:left}.next-range-picker-body[dir=rtl] .next-date-picker-panel-footer>.next-btn:not(:last-child){margin-right:0;margin-left:16px}.next-range-picker-body[dir=rtl].next-range-picker-body-show-time .next-range-picker-panel-input-start-date{margin-right:0;margin-left:8px}.next-range-picker-body[dir=rtl].next-range-picker-body-show-time .next-range-picker-panel-input-end-time{margin-left:0;margin-right:8px}.next-range-picker-body[dir=rtl].next-range-picker-body-show-time .next-range-picker-panel-time-end,.next-range-picker-body[dir=rtl].next-range-picker-body-show-time .next-range-picker-panel-time-start{float:right}.next-range-picker-body[dir=rtl].next-range-picker-body-show-time .next-range-picker-panel-time-start{border-right:none;border-left:1px solid #dcdee3}.next-range-picker-body[dir=rtl].next-range-picker-body-show-time .next-range-picker-panel-time-end{border-left:none;border-right:1px solid #dcdee3}.next-range-picker-body[dir=rtl].next-range-picker-body-show-time .next-time-picker-menu{float:right}.next-range-picker-body[dir=rtl].next-range-picker-body-show-time .next-time-picker-menu:not(:last-child){border-right:none;border-left:1px solid #c4c6cf}.next-date-picker,.next-date-picker *,.next-date-picker :after,.next-date-picker :before,.next-month-picker,.next-month-picker *,.next-month-picker :after,.next-month-picker :before,.next-range-picker,.next-range-picker *,.next-range-picker :after,.next-range-picker :before,.next-year-picker,.next-year-picker *,.next-year-picker :after,.next-year-picker :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-date-picker-body,.next-month-picker-body,.next-range-picker-body,.next-year-picker-body{border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;background:#fff}.next-date-picker-panel-header,.next-month-picker-panel-header,.next-range-picker-panel-header,.next-year-picker-panel-header{padding:6px;text-align:center}.next-date-picker-panel-time,.next-month-picker-panel-time,.next-range-picker-panel-time,.next-year-picker-panel-time{border-top:1px solid #dcdee3}.next-date-picker-panel-footer,.next-month-picker-panel-footer,.next-range-picker-panel-footer,.next-year-picker-panel-footer{text-align:right;padding:8px 20px;border-top:1px solid #dcdee3}.next-date-picker-panel-footer>.next-btn:not(:last-child),.next-month-picker-panel-footer>.next-btn:not(:last-child),.next-range-picker-panel-footer>.next-btn:not(:last-child),.next-year-picker-panel-footer>.next-btn:not(:last-child){margin-right:16px}.next-date-picker .next-calendar-panel-header,.next-month-picker .next-calendar-panel-header,.next-range-picker .next-calendar-panel-header,.next-year-picker .next-calendar-panel-header{margin-left:-1px;margin-right:-1px}.next-date-picker .next-input input,.next-month-picker .next-input input,.next-range-picker .next-input input,.next-year-picker .next-input input{vertical-align:baseline}.next-message{position:relative;display:block;vertical-align:baseline}.next-message,.next-message *,.next-message :after,.next-message :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-message:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-message .next-message-close{color:#999;font-size:0;position:absolute}.next-message .next-message-close .next-icon-close{width:12px;height:12px;line-height:12px}.next-message .next-message-close .next-icon-close:before{width:12px;height:12px;font-size:12px;line-height:12px}.next-message .next-message-close:hover{color:#666}.next-message.next-message-success.next-inline{background-color:#e4fdda;border-color:#e4fdda;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-success.next-inline .next-message-title{color:#333}.next-message.next-message-success.next-inline .next-message-content{color:#666}.next-message.next-message-success.next-inline .next-message-symbol{color:#46bc15}.next-message.next-message-success.next-inline .next-message-symbol-icon:before{content:"\E60A"}.next-message.next-message-success.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-success.next-addon .next-message-title{color:#333}.next-message.next-message-success.next-addon .next-message-content{color:#666}.next-message.next-message-success.next-addon .next-message-symbol{color:#46bc15}.next-message.next-message-success.next-addon .next-message-symbol-icon:before{content:"\E60A"}.next-message.next-message-success.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-success.next-toast .next-message-title{color:#333}.next-message.next-message-success.next-toast .next-message-content{color:#666}.next-message.next-message-success.next-toast .next-message-symbol{color:#46bc15}.next-message.next-message-success.next-toast .next-message-symbol-icon:before{content:"\E60A"}.next-message.next-message-warning.next-inline{background-color:#fff3e0;border-color:#fff3e0;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-warning.next-inline .next-message-title{color:#333}.next-message.next-message-warning.next-inline .next-message-content{color:#666}.next-message.next-message-warning.next-inline .next-message-symbol{color:#ff9300}.next-message.next-message-warning.next-inline .next-message-symbol-icon:before{content:"\E60B"}.next-message.next-message-warning.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-warning.next-addon .next-message-title{color:#333}.next-message.next-message-warning.next-addon .next-message-content{color:#666}.next-message.next-message-warning.next-addon .next-message-symbol{color:#ff9300}.next-message.next-message-warning.next-addon .next-message-symbol-icon:before{content:"\E60B"}.next-message.next-message-warning.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-warning.next-toast .next-message-title{color:#333}.next-message.next-message-warning.next-toast .next-message-content{color:#666}.next-message.next-message-warning.next-toast .next-message-symbol{color:#ff9300}.next-message.next-message-warning.next-toast .next-message-symbol-icon:before{content:"\E60B"}.next-message.next-message-error.next-inline{background-color:#ffece4;border-color:#ffece4;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-error.next-inline .next-message-title{color:#333}.next-message.next-message-error.next-inline .next-message-content{color:#666}.next-message.next-message-error.next-inline .next-message-symbol{color:#ff3000}.next-message.next-message-error.next-inline .next-message-symbol-icon:before{content:"\E60D"}.next-message.next-message-error.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-error.next-addon .next-message-title{color:#333}.next-message.next-message-error.next-addon .next-message-content{color:#666}.next-message.next-message-error.next-addon .next-message-symbol{color:#ff3000}.next-message.next-message-error.next-addon .next-message-symbol-icon:before{content:"\E60D"}.next-message.next-message-error.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-error.next-toast .next-message-title{color:#333}.next-message.next-message-error.next-toast .next-message-content{color:#666}.next-message.next-message-error.next-toast .next-message-symbol{color:#ff3000}.next-message.next-message-error.next-toast .next-message-symbol-icon:before{content:"\E60D"}.next-message.next-message-notice.next-inline{background-color:#e3f2fd;border-color:#e3f2fd;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-notice.next-inline .next-message-title{color:#333}.next-message.next-message-notice.next-inline .next-message-content{color:#666}.next-message.next-message-notice.next-inline .next-message-symbol{color:#4494f9}.next-message.next-message-notice.next-inline .next-message-symbol-icon:before{content:"\E60C"}.next-message.next-message-notice.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-notice.next-addon .next-message-title{color:#333}.next-message.next-message-notice.next-addon .next-message-content{color:#666}.next-message.next-message-notice.next-addon .next-message-symbol{color:#4494f9}.next-message.next-message-notice.next-addon .next-message-symbol-icon:before{content:"\E60C"}.next-message.next-message-notice.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-notice.next-toast .next-message-title{color:#333}.next-message.next-message-notice.next-toast .next-message-content{color:#666}.next-message.next-message-notice.next-toast .next-message-symbol{color:#4494f9}.next-message.next-message-notice.next-toast .next-message-symbol-icon:before{content:"\E60C"}.next-message.next-message-help.next-inline{background-color:#e3fff8;border-color:#e3fff8;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-help.next-inline .next-message-title{color:#333}.next-message.next-message-help.next-inline .next-message-content{color:#666}.next-message.next-message-help.next-inline .next-message-symbol{color:#01c1b2}.next-message.next-message-help.next-inline .next-message-symbol-icon:before{content:"\E673"}.next-message.next-message-help.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-help.next-addon .next-message-title{color:#333}.next-message.next-message-help.next-addon .next-message-content{color:#666}.next-message.next-message-help.next-addon .next-message-symbol{color:#01c1b2}.next-message.next-message-help.next-addon .next-message-symbol-icon:before{content:"\E673"}.next-message.next-message-help.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-help.next-toast .next-message-title{color:#333}.next-message.next-message-help.next-toast .next-message-content{color:#666}.next-message.next-message-help.next-toast .next-message-symbol{color:#01c1b2}.next-message.next-message-help.next-toast .next-message-symbol-icon:before{content:"\E673"}.next-message.next-message-loading.next-inline{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-loading.next-inline .next-message-title{color:#333}.next-message.next-message-loading.next-inline .next-message-content{color:#666}.next-message.next-message-loading.next-inline .next-message-symbol{color:#5584ff}.next-message.next-message-loading.next-inline .next-message-symbol-icon:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}.next-message.next-message-loading.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-loading.next-addon .next-message-title{color:#333}.next-message.next-message-loading.next-addon .next-message-content{color:#666}.next-message.next-message-loading.next-addon .next-message-symbol{color:#5584ff}.next-message.next-message-loading.next-addon .next-message-symbol-icon:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}.next-message.next-message-loading.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-loading.next-toast .next-message-title{color:#333}.next-message.next-message-loading.next-toast .next-message-content{color:#666}.next-message.next-message-loading.next-toast .next-message-symbol{color:#5584ff}.next-message.next-message-loading.next-toast .next-message-symbol-icon:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}.next-message.next-medium{border-width:1px;padding:12px}.next-message.next-medium .next-message-symbol{float:left;line-height:16px}.next-message.next-medium .next-message-symbol:before{width:16px;font-size:16px;line-height:inherit}.next-message.next-medium .next-message-title{padding:0 20px 0 24px;font-size:16px;line-height:16px}.next-message.next-medium .next-message-content{margin-top:8px;padding:0 20px 0 24px;font-size:12px;line-height:12px}.next-message.next-medium .next-message-symbol+.next-message-content{margin-top:0}.next-message.next-medium.next-only-content .next-message-content{line-height:16px}.next-message.next-medium .next-message-close{top:12px;right:12px}.next-message.next-large{border-width:2px;padding:16px;line-height:18px}.next-message.next-large .next-message-symbol{float:left;line-height:24px}.next-message.next-large .next-message-symbol:before{width:24px;font-size:24px;line-height:inherit}.next-message.next-large .next-message-title{padding:0 20px 0 36px;font-size:20px;line-height:20px}.next-message.next-large .next-message-content{margin-top:8px;padding:0 20px 0 36px;font-size:12px;line-height:12px}.next-message.next-large .next-message-symbol+.next-message-content{margin-top:0}.next-message.next-large.next-only-content .next-message-content,.next-message.next-large.next-title-content .next-message-title{line-height:24px}.next-message.next-large .next-message-close{top:16px;right:16px}.next-message[dir=rtl] .next-message-symbol{float:right}.next-message[dir=rtl].next-medium .next-message-title{padding:0 24px 0 20px}.next-message[dir=rtl].next-medium .next-message-close{left:12px;right:auto}.next-message[dir=rtl].next-large .next-message-title{padding:0 36px 0 20px}.next-message[dir=rtl].next-large .next-message-close{left:16px;right:auto}.next-dialog[dir=rtl],.next-dialog[dir=rtl] .next-dialog-footer.next-align-left{text-align:right}.next-dialog[dir=rtl] .next-dialog-footer.next-align-center{text-align:center}.next-dialog[dir=rtl] .next-dialog-footer.next-align-right{text-align:left}.next-dialog[dir=rtl] .next-dialog-btn+.next-dialog-btn{margin-right:4px;margin-left:0}.next-dialog[dir=rtl] .next-dialog-close{left:16px;right:auto}.next-dialog{position:fixed;z-index:1001;background:#fff;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);text-align:left}.next-dialog,.next-dialog *,.next-dialog :after,.next-dialog :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-dialog-header{padding:12px 20px;border-bottom:0 solid transparent;font-size:16px;background:transparent;color:#333}.next-dialog-body{padding:20px;font-size:12px;color:#666}.next-dialog-footer{padding:12px 20px;border-top:0 solid transparent;background:transparent}.next-dialog-footer.next-align-left{text-align:left}.next-dialog-footer.next-align-center{text-align:center}.next-dialog-footer.next-align-right{text-align:right}.next-dialog-footer-fixed-height{position:absolute;width:100%;bottom:0}.next-dialog-btn+.next-dialog-btn{margin-left:4px}.next-dialog-close{position:absolute;top:16px;right:16px;width:16px}.next-dialog-close,.next-dialog-close:link,.next-dialog-close:visited{height:16px;color:#999}.next-dialog-close:hover{background:transparent;color:#333}.next-dialog-close .next-dialog-close-icon.next-icon{position:absolute;top:50%;left:50%;margin-top:-6px;margin-left:-6px;width:12px;height:12px;line-height:12px}.next-dialog-close .next-dialog-close-icon.next-icon:before{width:12px;height:12px;font-size:12px;line-height:12px}.next-dialog-container{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1001;padding:40px;overflow:auto;text-align:center}.next-dialog-container:before{display:inline-block;vertical-align:middle;width:0;height:100%;content:""}.next-dialog-container .next-dialog{display:inline-block;position:relative;vertical-align:middle}.next-dialog-quick .next-dialog-body{padding:20px}.next-dialog .next-dialog-message.next-message{min-width:300px;padding:0}.next-row{display:-webkit-box;display:-ms-flexbox;display:flex}.next-row,.next-row *,.next-row :after,.next-row :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-row.next-row-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}@media (min-width:320px){.next-row.next-row-fixed{width:320px}}@media (min-width:480px){.next-row.next-row-fixed{width:480px}}@media (min-width:720px){.next-row.next-row-fixed{width:720px}}@media (min-width:990px){.next-row.next-row-fixed{width:990px}}@media (min-width:1200px){.next-row.next-row-fixed{width:1200px}}@media (min-width:1500px){.next-row.next-row-fixed{width:1500px}}.next-row.next-row-fixed-xxs{width:320px}.next-row.next-row-fixed-xs{width:480px}.next-row.next-row-fixed-s{width:720px}.next-row.next-row-fixed-m{width:990px}.next-row.next-row-fixed-l{width:1200px}.next-row.next-row-fixed-xl{width:1500px}.next-row.next-row-justify-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.next-row.next-row-justify-end{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.next-row.next-row-justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.next-row.next-row-justify-space-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.next-row.next-row-justify-space-around{-ms-flex-pack:distribute;justify-content:space-around}.next-row.next-row-align-top{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.next-row.next-row-align-bottom{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.next-row.next-row-align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.next-row.next-row-align-baseline{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.next-row.next-row-align-stretch{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.next-col{-webkit-box-flex:1;-ms-flex:1;flex:1}.next-col.next-col-top{-ms-flex-item-align:start;align-self:flex-start}.next-col.next-col-bottom{-ms-flex-item-align:end;align-self:flex-end}.next-col.next-col-center{-ms-flex-item-align:center;align-self:center}@media (min-width:0\0) and (min-resolution:0.001dpcm){.next-row{display:table;width:100%}.next-col{display:table-cell;vertical-align:top}}.next-col-1{-webkit-box-flex:0;-ms-flex:0 0 4.16667%;flex:0 0 4.16667%;width:4.16667%;max-width:4.16667%}.next-col-2{-webkit-box-flex:0;-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;width:8.33333%;max-width:8.33333%}.next-col-3{-webkit-box-flex:0;-ms-flex:0 0 12.5%;flex:0 0 12.5%;width:12.5%;max-width:12.5%}.next-col-4{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;width:16.66667%;max-width:16.66667%}.next-col-5{-webkit-box-flex:0;-ms-flex:0 0 20.83333%;flex:0 0 20.83333%;width:20.83333%;max-width:20.83333%}.next-col-6{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;width:25%;max-width:25%}.next-col-7{-webkit-box-flex:0;-ms-flex:0 0 29.16667%;flex:0 0 29.16667%;width:29.16667%;max-width:29.16667%}.next-col-8{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;width:33.33333%;max-width:33.33333%}.next-col-9{-webkit-box-flex:0;-ms-flex:0 0 37.5%;flex:0 0 37.5%;width:37.5%;max-width:37.5%}.next-col-10{-webkit-box-flex:0;-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;width:41.66667%;max-width:41.66667%}.next-col-11{-webkit-box-flex:0;-ms-flex:0 0 45.83333%;flex:0 0 45.83333%;width:45.83333%;max-width:45.83333%}.next-col-12{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;width:50%;max-width:50%}.next-col-13{-webkit-box-flex:0;-ms-flex:0 0 54.16667%;flex:0 0 54.16667%;width:54.16667%;max-width:54.16667%}.next-col-14{-webkit-box-flex:0;-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;width:58.33333%;max-width:58.33333%}.next-col-15{-webkit-box-flex:0;-ms-flex:0 0 62.5%;flex:0 0 62.5%;width:62.5%;max-width:62.5%}.next-col-16{-webkit-box-flex:0;-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;width:66.66667%;max-width:66.66667%}.next-col-17{-webkit-box-flex:0;-ms-flex:0 0 70.83333%;flex:0 0 70.83333%;width:70.83333%;max-width:70.83333%}.next-col-18{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;width:75%;max-width:75%}.next-col-19{-webkit-box-flex:0;-ms-flex:0 0 79.16667%;flex:0 0 79.16667%;width:79.16667%;max-width:79.16667%}.next-col-20{-webkit-box-flex:0;-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;width:83.33333%;max-width:83.33333%}.next-col-21{-webkit-box-flex:0;-ms-flex:0 0 87.5%;flex:0 0 87.5%;width:87.5%;max-width:87.5%}.next-col-22{-webkit-box-flex:0;-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;width:91.66667%;max-width:91.66667%}.next-col-23{-webkit-box-flex:0;-ms-flex:0 0 95.83333%;flex:0 0 95.83333%;width:95.83333%;max-width:95.83333%}.next-col-24{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}@media (min-width:320px){.next-col-xxs-1{-webkit-box-flex:0;-ms-flex:0 0 4.16667%;flex:0 0 4.16667%;width:4.16667%;max-width:4.16667%}.next-col-xxs-2{-webkit-box-flex:0;-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;width:8.33333%;max-width:8.33333%}.next-col-xxs-3{-webkit-box-flex:0;-ms-flex:0 0 12.5%;flex:0 0 12.5%;width:12.5%;max-width:12.5%}.next-col-xxs-4{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;width:16.66667%;max-width:16.66667%}.next-col-xxs-5{-webkit-box-flex:0;-ms-flex:0 0 20.83333%;flex:0 0 20.83333%;width:20.83333%;max-width:20.83333%}.next-col-xxs-6{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;width:25%;max-width:25%}.next-col-xxs-7{-webkit-box-flex:0;-ms-flex:0 0 29.16667%;flex:0 0 29.16667%;width:29.16667%;max-width:29.16667%}.next-col-xxs-8{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;width:33.33333%;max-width:33.33333%}.next-col-xxs-9{-webkit-box-flex:0;-ms-flex:0 0 37.5%;flex:0 0 37.5%;width:37.5%;max-width:37.5%}.next-col-xxs-10{-webkit-box-flex:0;-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;width:41.66667%;max-width:41.66667%}.next-col-xxs-11{-webkit-box-flex:0;-ms-flex:0 0 45.83333%;flex:0 0 45.83333%;width:45.83333%;max-width:45.83333%}.next-col-xxs-12{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;width:50%;max-width:50%}.next-col-xxs-13{-webkit-box-flex:0;-ms-flex:0 0 54.16667%;flex:0 0 54.16667%;width:54.16667%;max-width:54.16667%}.next-col-xxs-14{-webkit-box-flex:0;-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;width:58.33333%;max-width:58.33333%}.next-col-xxs-15{-webkit-box-flex:0;-ms-flex:0 0 62.5%;flex:0 0 62.5%;width:62.5%;max-width:62.5%}.next-col-xxs-16{-webkit-box-flex:0;-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;width:66.66667%;max-width:66.66667%}.next-col-xxs-17{-webkit-box-flex:0;-ms-flex:0 0 70.83333%;flex:0 0 70.83333%;width:70.83333%;max-width:70.83333%}.next-col-xxs-18{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;width:75%;max-width:75%}.next-col-xxs-19{-webkit-box-flex:0;-ms-flex:0 0 79.16667%;flex:0 0 79.16667%;width:79.16667%;max-width:79.16667%}.next-col-xxs-20{-webkit-box-flex:0;-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;width:83.33333%;max-width:83.33333%}.next-col-xxs-21{-webkit-box-flex:0;-ms-flex:0 0 87.5%;flex:0 0 87.5%;width:87.5%;max-width:87.5%}.next-col-xxs-22{-webkit-box-flex:0;-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;width:91.66667%;max-width:91.66667%}.next-col-xxs-23{-webkit-box-flex:0;-ms-flex:0 0 95.83333%;flex:0 0 95.83333%;width:95.83333%;max-width:95.83333%}.next-col-xxs-24{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:480px){.next-col-xs-1{-webkit-box-flex:0;-ms-flex:0 0 4.16667%;flex:0 0 4.16667%;width:4.16667%;max-width:4.16667%}.next-col-xs-2{-webkit-box-flex:0;-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;width:8.33333%;max-width:8.33333%}.next-col-xs-3{-webkit-box-flex:0;-ms-flex:0 0 12.5%;flex:0 0 12.5%;width:12.5%;max-width:12.5%}.next-col-xs-4{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;width:16.66667%;max-width:16.66667%}.next-col-xs-5{-webkit-box-flex:0;-ms-flex:0 0 20.83333%;flex:0 0 20.83333%;width:20.83333%;max-width:20.83333%}.next-col-xs-6{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;width:25%;max-width:25%}.next-col-xs-7{-webkit-box-flex:0;-ms-flex:0 0 29.16667%;flex:0 0 29.16667%;width:29.16667%;max-width:29.16667%}.next-col-xs-8{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;width:33.33333%;max-width:33.33333%}.next-col-xs-9{-webkit-box-flex:0;-ms-flex:0 0 37.5%;flex:0 0 37.5%;width:37.5%;max-width:37.5%}.next-col-xs-10{-webkit-box-flex:0;-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;width:41.66667%;max-width:41.66667%}.next-col-xs-11{-webkit-box-flex:0;-ms-flex:0 0 45.83333%;flex:0 0 45.83333%;width:45.83333%;max-width:45.83333%}.next-col-xs-12{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;width:50%;max-width:50%}.next-col-xs-13{-webkit-box-flex:0;-ms-flex:0 0 54.16667%;flex:0 0 54.16667%;width:54.16667%;max-width:54.16667%}.next-col-xs-14{-webkit-box-flex:0;-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;width:58.33333%;max-width:58.33333%}.next-col-xs-15{-webkit-box-flex:0;-ms-flex:0 0 62.5%;flex:0 0 62.5%;width:62.5%;max-width:62.5%}.next-col-xs-16{-webkit-box-flex:0;-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;width:66.66667%;max-width:66.66667%}.next-col-xs-17{-webkit-box-flex:0;-ms-flex:0 0 70.83333%;flex:0 0 70.83333%;width:70.83333%;max-width:70.83333%}.next-col-xs-18{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;width:75%;max-width:75%}.next-col-xs-19{-webkit-box-flex:0;-ms-flex:0 0 79.16667%;flex:0 0 79.16667%;width:79.16667%;max-width:79.16667%}.next-col-xs-20{-webkit-box-flex:0;-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;width:83.33333%;max-width:83.33333%}.next-col-xs-21{-webkit-box-flex:0;-ms-flex:0 0 87.5%;flex:0 0 87.5%;width:87.5%;max-width:87.5%}.next-col-xs-22{-webkit-box-flex:0;-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;width:91.66667%;max-width:91.66667%}.next-col-xs-23{-webkit-box-flex:0;-ms-flex:0 0 95.83333%;flex:0 0 95.83333%;width:95.83333%;max-width:95.83333%}.next-col-xs-24{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:720px){.next-col-s-1{-webkit-box-flex:0;-ms-flex:0 0 4.16667%;flex:0 0 4.16667%;width:4.16667%;max-width:4.16667%}.next-col-s-2{-webkit-box-flex:0;-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;width:8.33333%;max-width:8.33333%}.next-col-s-3{-webkit-box-flex:0;-ms-flex:0 0 12.5%;flex:0 0 12.5%;width:12.5%;max-width:12.5%}.next-col-s-4{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;width:16.66667%;max-width:16.66667%}.next-col-s-5{-webkit-box-flex:0;-ms-flex:0 0 20.83333%;flex:0 0 20.83333%;width:20.83333%;max-width:20.83333%}.next-col-s-6{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;width:25%;max-width:25%}.next-col-s-7{-webkit-box-flex:0;-ms-flex:0 0 29.16667%;flex:0 0 29.16667%;width:29.16667%;max-width:29.16667%}.next-col-s-8{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;width:33.33333%;max-width:33.33333%}.next-col-s-9{-webkit-box-flex:0;-ms-flex:0 0 37.5%;flex:0 0 37.5%;width:37.5%;max-width:37.5%}.next-col-s-10{-webkit-box-flex:0;-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;width:41.66667%;max-width:41.66667%}.next-col-s-11{-webkit-box-flex:0;-ms-flex:0 0 45.83333%;flex:0 0 45.83333%;width:45.83333%;max-width:45.83333%}.next-col-s-12{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;width:50%;max-width:50%}.next-col-s-13{-webkit-box-flex:0;-ms-flex:0 0 54.16667%;flex:0 0 54.16667%;width:54.16667%;max-width:54.16667%}.next-col-s-14{-webkit-box-flex:0;-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;width:58.33333%;max-width:58.33333%}.next-col-s-15{-webkit-box-flex:0;-ms-flex:0 0 62.5%;flex:0 0 62.5%;width:62.5%;max-width:62.5%}.next-col-s-16{-webkit-box-flex:0;-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;width:66.66667%;max-width:66.66667%}.next-col-s-17{-webkit-box-flex:0;-ms-flex:0 0 70.83333%;flex:0 0 70.83333%;width:70.83333%;max-width:70.83333%}.next-col-s-18{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;width:75%;max-width:75%}.next-col-s-19{-webkit-box-flex:0;-ms-flex:0 0 79.16667%;flex:0 0 79.16667%;width:79.16667%;max-width:79.16667%}.next-col-s-20{-webkit-box-flex:0;-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;width:83.33333%;max-width:83.33333%}.next-col-s-21{-webkit-box-flex:0;-ms-flex:0 0 87.5%;flex:0 0 87.5%;width:87.5%;max-width:87.5%}.next-col-s-22{-webkit-box-flex:0;-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;width:91.66667%;max-width:91.66667%}.next-col-s-23{-webkit-box-flex:0;-ms-flex:0 0 95.83333%;flex:0 0 95.83333%;width:95.83333%;max-width:95.83333%}.next-col-s-24{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:990px){.next-col-m-1{-webkit-box-flex:0;-ms-flex:0 0 4.16667%;flex:0 0 4.16667%;width:4.16667%;max-width:4.16667%}.next-col-m-2{-webkit-box-flex:0;-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;width:8.33333%;max-width:8.33333%}.next-col-m-3{-webkit-box-flex:0;-ms-flex:0 0 12.5%;flex:0 0 12.5%;width:12.5%;max-width:12.5%}.next-col-m-4{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;width:16.66667%;max-width:16.66667%}.next-col-m-5{-webkit-box-flex:0;-ms-flex:0 0 20.83333%;flex:0 0 20.83333%;width:20.83333%;max-width:20.83333%}.next-col-m-6{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;width:25%;max-width:25%}.next-col-m-7{-webkit-box-flex:0;-ms-flex:0 0 29.16667%;flex:0 0 29.16667%;width:29.16667%;max-width:29.16667%}.next-col-m-8{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;width:33.33333%;max-width:33.33333%}.next-col-m-9{-webkit-box-flex:0;-ms-flex:0 0 37.5%;flex:0 0 37.5%;width:37.5%;max-width:37.5%}.next-col-m-10{-webkit-box-flex:0;-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;width:41.66667%;max-width:41.66667%}.next-col-m-11{-webkit-box-flex:0;-ms-flex:0 0 45.83333%;flex:0 0 45.83333%;width:45.83333%;max-width:45.83333%}.next-col-m-12{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;width:50%;max-width:50%}.next-col-m-13{-webkit-box-flex:0;-ms-flex:0 0 54.16667%;flex:0 0 54.16667%;width:54.16667%;max-width:54.16667%}.next-col-m-14{-webkit-box-flex:0;-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;width:58.33333%;max-width:58.33333%}.next-col-m-15{-webkit-box-flex:0;-ms-flex:0 0 62.5%;flex:0 0 62.5%;width:62.5%;max-width:62.5%}.next-col-m-16{-webkit-box-flex:0;-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;width:66.66667%;max-width:66.66667%}.next-col-m-17{-webkit-box-flex:0;-ms-flex:0 0 70.83333%;flex:0 0 70.83333%;width:70.83333%;max-width:70.83333%}.next-col-m-18{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;width:75%;max-width:75%}.next-col-m-19{-webkit-box-flex:0;-ms-flex:0 0 79.16667%;flex:0 0 79.16667%;width:79.16667%;max-width:79.16667%}.next-col-m-20{-webkit-box-flex:0;-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;width:83.33333%;max-width:83.33333%}.next-col-m-21{-webkit-box-flex:0;-ms-flex:0 0 87.5%;flex:0 0 87.5%;width:87.5%;max-width:87.5%}.next-col-m-22{-webkit-box-flex:0;-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;width:91.66667%;max-width:91.66667%}.next-col-m-23{-webkit-box-flex:0;-ms-flex:0 0 95.83333%;flex:0 0 95.83333%;width:95.83333%;max-width:95.83333%}.next-col-m-24{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:1200px){.next-col-l-1{-webkit-box-flex:0;-ms-flex:0 0 4.16667%;flex:0 0 4.16667%;width:4.16667%;max-width:4.16667%}.next-col-l-2{-webkit-box-flex:0;-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;width:8.33333%;max-width:8.33333%}.next-col-l-3{-webkit-box-flex:0;-ms-flex:0 0 12.5%;flex:0 0 12.5%;width:12.5%;max-width:12.5%}.next-col-l-4{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;width:16.66667%;max-width:16.66667%}.next-col-l-5{-webkit-box-flex:0;-ms-flex:0 0 20.83333%;flex:0 0 20.83333%;width:20.83333%;max-width:20.83333%}.next-col-l-6{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;width:25%;max-width:25%}.next-col-l-7{-webkit-box-flex:0;-ms-flex:0 0 29.16667%;flex:0 0 29.16667%;width:29.16667%;max-width:29.16667%}.next-col-l-8{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;width:33.33333%;max-width:33.33333%}.next-col-l-9{-webkit-box-flex:0;-ms-flex:0 0 37.5%;flex:0 0 37.5%;width:37.5%;max-width:37.5%}.next-col-l-10{-webkit-box-flex:0;-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;width:41.66667%;max-width:41.66667%}.next-col-l-11{-webkit-box-flex:0;-ms-flex:0 0 45.83333%;flex:0 0 45.83333%;width:45.83333%;max-width:45.83333%}.next-col-l-12{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;width:50%;max-width:50%}.next-col-l-13{-webkit-box-flex:0;-ms-flex:0 0 54.16667%;flex:0 0 54.16667%;width:54.16667%;max-width:54.16667%}.next-col-l-14{-webkit-box-flex:0;-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;width:58.33333%;max-width:58.33333%}.next-col-l-15{-webkit-box-flex:0;-ms-flex:0 0 62.5%;flex:0 0 62.5%;width:62.5%;max-width:62.5%}.next-col-l-16{-webkit-box-flex:0;-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;width:66.66667%;max-width:66.66667%}.next-col-l-17{-webkit-box-flex:0;-ms-flex:0 0 70.83333%;flex:0 0 70.83333%;width:70.83333%;max-width:70.83333%}.next-col-l-18{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;width:75%;max-width:75%}.next-col-l-19{-webkit-box-flex:0;-ms-flex:0 0 79.16667%;flex:0 0 79.16667%;width:79.16667%;max-width:79.16667%}.next-col-l-20{-webkit-box-flex:0;-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;width:83.33333%;max-width:83.33333%}.next-col-l-21{-webkit-box-flex:0;-ms-flex:0 0 87.5%;flex:0 0 87.5%;width:87.5%;max-width:87.5%}.next-col-l-22{-webkit-box-flex:0;-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;width:91.66667%;max-width:91.66667%}.next-col-l-23{-webkit-box-flex:0;-ms-flex:0 0 95.83333%;flex:0 0 95.83333%;width:95.83333%;max-width:95.83333%}.next-col-l-24{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:1500px){.next-col-xl-1{-webkit-box-flex:0;-ms-flex:0 0 4.16667%;flex:0 0 4.16667%;width:4.16667%;max-width:4.16667%}.next-col-xl-2{-webkit-box-flex:0;-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;width:8.33333%;max-width:8.33333%}.next-col-xl-3{-webkit-box-flex:0;-ms-flex:0 0 12.5%;flex:0 0 12.5%;width:12.5%;max-width:12.5%}.next-col-xl-4{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;width:16.66667%;max-width:16.66667%}.next-col-xl-5{-webkit-box-flex:0;-ms-flex:0 0 20.83333%;flex:0 0 20.83333%;width:20.83333%;max-width:20.83333%}.next-col-xl-6{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;width:25%;max-width:25%}.next-col-xl-7{-webkit-box-flex:0;-ms-flex:0 0 29.16667%;flex:0 0 29.16667%;width:29.16667%;max-width:29.16667%}.next-col-xl-8{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;width:33.33333%;max-width:33.33333%}.next-col-xl-9{-webkit-box-flex:0;-ms-flex:0 0 37.5%;flex:0 0 37.5%;width:37.5%;max-width:37.5%}.next-col-xl-10{-webkit-box-flex:0;-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;width:41.66667%;max-width:41.66667%}.next-col-xl-11{-webkit-box-flex:0;-ms-flex:0 0 45.83333%;flex:0 0 45.83333%;width:45.83333%;max-width:45.83333%}.next-col-xl-12{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;width:50%;max-width:50%}.next-col-xl-13{-webkit-box-flex:0;-ms-flex:0 0 54.16667%;flex:0 0 54.16667%;width:54.16667%;max-width:54.16667%}.next-col-xl-14{-webkit-box-flex:0;-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;width:58.33333%;max-width:58.33333%}.next-col-xl-15{-webkit-box-flex:0;-ms-flex:0 0 62.5%;flex:0 0 62.5%;width:62.5%;max-width:62.5%}.next-col-xl-16{-webkit-box-flex:0;-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;width:66.66667%;max-width:66.66667%}.next-col-xl-17{-webkit-box-flex:0;-ms-flex:0 0 70.83333%;flex:0 0 70.83333%;width:70.83333%;max-width:70.83333%}.next-col-xl-18{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;width:75%;max-width:75%}.next-col-xl-19{-webkit-box-flex:0;-ms-flex:0 0 79.16667%;flex:0 0 79.16667%;width:79.16667%;max-width:79.16667%}.next-col-xl-20{-webkit-box-flex:0;-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;width:83.33333%;max-width:83.33333%}.next-col-xl-21{-webkit-box-flex:0;-ms-flex:0 0 87.5%;flex:0 0 87.5%;width:87.5%;max-width:87.5%}.next-col-xl-22{-webkit-box-flex:0;-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;width:91.66667%;max-width:91.66667%}.next-col-xl-23{-webkit-box-flex:0;-ms-flex:0 0 95.83333%;flex:0 0 95.83333%;width:95.83333%;max-width:95.83333%}.next-col-xl-24{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}.next-col-1p5{-webkit-box-flex:0;-ms-flex:0 0 20%;flex:0 0 20%;width:20%;max-width:20%}.next-col-2p5{-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%;width:40%;max-width:40%}.next-col-3p5{-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;width:60%;max-width:60%}.next-col-4p5{-webkit-box-flex:0;-ms-flex:0 0 80%;flex:0 0 80%;width:80%;max-width:80%}.next-col-5p5{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}@media (min-width:320px){.next-col-xxs-1p5{-webkit-box-flex:0;-ms-flex:0 0 20%;flex:0 0 20%;width:20%;max-width:20%}.next-col-xxs-2p5{-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%;width:40%;max-width:40%}.next-col-xxs-3p5{-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;width:60%;max-width:60%}.next-col-xxs-4p5{-webkit-box-flex:0;-ms-flex:0 0 80%;flex:0 0 80%;width:80%;max-width:80%}.next-col-xxs-5p5{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:480px){.next-col-xs-1p5{-webkit-box-flex:0;-ms-flex:0 0 20%;flex:0 0 20%;width:20%;max-width:20%}.next-col-xs-2p5{-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%;width:40%;max-width:40%}.next-col-xs-3p5{-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;width:60%;max-width:60%}.next-col-xs-4p5{-webkit-box-flex:0;-ms-flex:0 0 80%;flex:0 0 80%;width:80%;max-width:80%}.next-col-xs-5p5{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:720px){.next-col-s-1p5{-webkit-box-flex:0;-ms-flex:0 0 20%;flex:0 0 20%;width:20%;max-width:20%}.next-col-s-2p5{-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%;width:40%;max-width:40%}.next-col-s-3p5{-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;width:60%;max-width:60%}.next-col-s-4p5{-webkit-box-flex:0;-ms-flex:0 0 80%;flex:0 0 80%;width:80%;max-width:80%}.next-col-s-5p5{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:990px){.next-col-m-1p5{-webkit-box-flex:0;-ms-flex:0 0 20%;flex:0 0 20%;width:20%;max-width:20%}.next-col-m-2p5{-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%;width:40%;max-width:40%}.next-col-m-3p5{-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;width:60%;max-width:60%}.next-col-m-4p5{-webkit-box-flex:0;-ms-flex:0 0 80%;flex:0 0 80%;width:80%;max-width:80%}.next-col-m-5p5{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:1200px){.next-col-l-1p5{-webkit-box-flex:0;-ms-flex:0 0 20%;flex:0 0 20%;width:20%;max-width:20%}.next-col-l-2p5{-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%;width:40%;max-width:40%}.next-col-l-3p5{-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;width:60%;max-width:60%}.next-col-l-4p5{-webkit-box-flex:0;-ms-flex:0 0 80%;flex:0 0 80%;width:80%;max-width:80%}.next-col-l-5p5{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:1500px){.next-col-xl-1p5{-webkit-box-flex:0;-ms-flex:0 0 20%;flex:0 0 20%;width:20%;max-width:20%}.next-col-xl-2p5{-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%;width:40%;max-width:40%}.next-col-xl-3p5{-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;width:60%;max-width:60%}.next-col-xl-4p5{-webkit-box-flex:0;-ms-flex:0 0 80%;flex:0 0 80%;width:80%;max-width:80%}.next-col-xl-5p5{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}.next-col-fixed-1{-webkit-box-flex:0;-ms-flex:0 0 20px;flex:0 0 20px;width:20px;max-width:20px}.next-col-fixed-2{-webkit-box-flex:0;-ms-flex:0 0 40px;flex:0 0 40px;width:40px;max-width:40px}.next-col-fixed-3{-webkit-box-flex:0;-ms-flex:0 0 60px;flex:0 0 60px;width:60px;max-width:60px}.next-col-fixed-4{-webkit-box-flex:0;-ms-flex:0 0 80px;flex:0 0 80px;width:80px;max-width:80px}.next-col-fixed-5{-webkit-box-flex:0;-ms-flex:0 0 100px;flex:0 0 100px;width:100px;max-width:100px}.next-col-fixed-6{-webkit-box-flex:0;-ms-flex:0 0 120px;flex:0 0 120px;width:120px;max-width:120px}.next-col-fixed-7{-webkit-box-flex:0;-ms-flex:0 0 140px;flex:0 0 140px;width:140px;max-width:140px}.next-col-fixed-8{-webkit-box-flex:0;-ms-flex:0 0 160px;flex:0 0 160px;width:160px;max-width:160px}.next-col-fixed-9{-webkit-box-flex:0;-ms-flex:0 0 180px;flex:0 0 180px;width:180px;max-width:180px}.next-col-fixed-10{-webkit-box-flex:0;-ms-flex:0 0 200px;flex:0 0 200px;width:200px;max-width:200px}.next-col-fixed-11{-webkit-box-flex:0;-ms-flex:0 0 220px;flex:0 0 220px;width:220px;max-width:220px}.next-col-fixed-12{-webkit-box-flex:0;-ms-flex:0 0 240px;flex:0 0 240px;width:240px;max-width:240px}.next-col-fixed-13{-webkit-box-flex:0;-ms-flex:0 0 260px;flex:0 0 260px;width:260px;max-width:260px}.next-col-fixed-14{-webkit-box-flex:0;-ms-flex:0 0 280px;flex:0 0 280px;width:280px;max-width:280px}.next-col-fixed-15{-webkit-box-flex:0;-ms-flex:0 0 300px;flex:0 0 300px;width:300px;max-width:300px}.next-col-fixed-16{-webkit-box-flex:0;-ms-flex:0 0 320px;flex:0 0 320px;width:320px;max-width:320px}.next-col-fixed-17{-webkit-box-flex:0;-ms-flex:0 0 340px;flex:0 0 340px;width:340px;max-width:340px}.next-col-fixed-18{-webkit-box-flex:0;-ms-flex:0 0 360px;flex:0 0 360px;width:360px;max-width:360px}.next-col-fixed-19{-webkit-box-flex:0;-ms-flex:0 0 380px;flex:0 0 380px;width:380px;max-width:380px}.next-col-fixed-20{-webkit-box-flex:0;-ms-flex:0 0 400px;flex:0 0 400px;width:400px;max-width:400px}.next-col-fixed-21{-webkit-box-flex:0;-ms-flex:0 0 420px;flex:0 0 420px;width:420px;max-width:420px}.next-col-fixed-22{-webkit-box-flex:0;-ms-flex:0 0 440px;flex:0 0 440px;width:440px;max-width:440px}.next-col-fixed-23{-webkit-box-flex:0;-ms-flex:0 0 460px;flex:0 0 460px;width:460px;max-width:460px}.next-col-fixed-24{-webkit-box-flex:0;-ms-flex:0 0 480px;flex:0 0 480px;width:480px;max-width:480px}.next-col-fixed-25{-webkit-box-flex:0;-ms-flex:0 0 500px;flex:0 0 500px;width:500px;max-width:500px}.next-col-fixed-26{-webkit-box-flex:0;-ms-flex:0 0 520px;flex:0 0 520px;width:520px;max-width:520px}.next-col-fixed-27{-webkit-box-flex:0;-ms-flex:0 0 540px;flex:0 0 540px;width:540px;max-width:540px}.next-col-fixed-28{-webkit-box-flex:0;-ms-flex:0 0 560px;flex:0 0 560px;width:560px;max-width:560px}.next-col-fixed-29{-webkit-box-flex:0;-ms-flex:0 0 580px;flex:0 0 580px;width:580px;max-width:580px}.next-col-fixed-30{-webkit-box-flex:0;-ms-flex:0 0 600px;flex:0 0 600px;width:600px;max-width:600px}.next-col-offset-1{margin-left:4.16667%}.next-col-offset-2{margin-left:8.33333%}.next-col-offset-3{margin-left:12.5%}.next-col-offset-4{margin-left:16.66667%}.next-col-offset-5{margin-left:20.83333%}.next-col-offset-6{margin-left:25%}.next-col-offset-7{margin-left:29.16667%}.next-col-offset-8{margin-left:33.33333%}.next-col-offset-9{margin-left:37.5%}.next-col-offset-10{margin-left:41.66667%}.next-col-offset-11{margin-left:45.83333%}.next-col-offset-12{margin-left:50%}.next-col-offset-13{margin-left:54.16667%}.next-col-offset-14{margin-left:58.33333%}.next-col-offset-15{margin-left:62.5%}.next-col-offset-16{margin-left:66.66667%}.next-col-offset-17{margin-left:70.83333%}.next-col-offset-18{margin-left:75%}.next-col-offset-19{margin-left:79.16667%}.next-col-offset-20{margin-left:83.33333%}.next-col-offset-21{margin-left:87.5%}.next-col-offset-22{margin-left:91.66667%}.next-col-offset-23{margin-left:95.83333%}.next-col-offset-24{margin-left:100%}@media (min-width:320px){.next-col-xxs-offset-1{margin-left:4.16667%}.next-col-xxs-offset-2{margin-left:8.33333%}.next-col-xxs-offset-3{margin-left:12.5%}.next-col-xxs-offset-4{margin-left:16.66667%}.next-col-xxs-offset-5{margin-left:20.83333%}.next-col-xxs-offset-6{margin-left:25%}.next-col-xxs-offset-7{margin-left:29.16667%}.next-col-xxs-offset-8{margin-left:33.33333%}.next-col-xxs-offset-9{margin-left:37.5%}.next-col-xxs-offset-10{margin-left:41.66667%}.next-col-xxs-offset-11{margin-left:45.83333%}.next-col-xxs-offset-12{margin-left:50%}.next-col-xxs-offset-13{margin-left:54.16667%}.next-col-xxs-offset-14{margin-left:58.33333%}.next-col-xxs-offset-15{margin-left:62.5%}.next-col-xxs-offset-16{margin-left:66.66667%}.next-col-xxs-offset-17{margin-left:70.83333%}.next-col-xxs-offset-18{margin-left:75%}.next-col-xxs-offset-19{margin-left:79.16667%}.next-col-xxs-offset-20{margin-left:83.33333%}.next-col-xxs-offset-21{margin-left:87.5%}.next-col-xxs-offset-22{margin-left:91.66667%}.next-col-xxs-offset-23{margin-left:95.83333%}.next-col-xxs-offset-24{margin-left:100%}}@media (min-width:480px){.next-col-xs-offset-1{margin-left:4.16667%}.next-col-xs-offset-2{margin-left:8.33333%}.next-col-xs-offset-3{margin-left:12.5%}.next-col-xs-offset-4{margin-left:16.66667%}.next-col-xs-offset-5{margin-left:20.83333%}.next-col-xs-offset-6{margin-left:25%}.next-col-xs-offset-7{margin-left:29.16667%}.next-col-xs-offset-8{margin-left:33.33333%}.next-col-xs-offset-9{margin-left:37.5%}.next-col-xs-offset-10{margin-left:41.66667%}.next-col-xs-offset-11{margin-left:45.83333%}.next-col-xs-offset-12{margin-left:50%}.next-col-xs-offset-13{margin-left:54.16667%}.next-col-xs-offset-14{margin-left:58.33333%}.next-col-xs-offset-15{margin-left:62.5%}.next-col-xs-offset-16{margin-left:66.66667%}.next-col-xs-offset-17{margin-left:70.83333%}.next-col-xs-offset-18{margin-left:75%}.next-col-xs-offset-19{margin-left:79.16667%}.next-col-xs-offset-20{margin-left:83.33333%}.next-col-xs-offset-21{margin-left:87.5%}.next-col-xs-offset-22{margin-left:91.66667%}.next-col-xs-offset-23{margin-left:95.83333%}.next-col-xs-offset-24{margin-left:100%}}@media (min-width:720px){.next-col-s-offset-1{margin-left:4.16667%}.next-col-s-offset-2{margin-left:8.33333%}.next-col-s-offset-3{margin-left:12.5%}.next-col-s-offset-4{margin-left:16.66667%}.next-col-s-offset-5{margin-left:20.83333%}.next-col-s-offset-6{margin-left:25%}.next-col-s-offset-7{margin-left:29.16667%}.next-col-s-offset-8{margin-left:33.33333%}.next-col-s-offset-9{margin-left:37.5%}.next-col-s-offset-10{margin-left:41.66667%}.next-col-s-offset-11{margin-left:45.83333%}.next-col-s-offset-12{margin-left:50%}.next-col-s-offset-13{margin-left:54.16667%}.next-col-s-offset-14{margin-left:58.33333%}.next-col-s-offset-15{margin-left:62.5%}.next-col-s-offset-16{margin-left:66.66667%}.next-col-s-offset-17{margin-left:70.83333%}.next-col-s-offset-18{margin-left:75%}.next-col-s-offset-19{margin-left:79.16667%}.next-col-s-offset-20{margin-left:83.33333%}.next-col-s-offset-21{margin-left:87.5%}.next-col-s-offset-22{margin-left:91.66667%}.next-col-s-offset-23{margin-left:95.83333%}.next-col-s-offset-24{margin-left:100%}}@media (min-width:990px){.next-col-m-offset-1{margin-left:4.16667%}.next-col-m-offset-2{margin-left:8.33333%}.next-col-m-offset-3{margin-left:12.5%}.next-col-m-offset-4{margin-left:16.66667%}.next-col-m-offset-5{margin-left:20.83333%}.next-col-m-offset-6{margin-left:25%}.next-col-m-offset-7{margin-left:29.16667%}.next-col-m-offset-8{margin-left:33.33333%}.next-col-m-offset-9{margin-left:37.5%}.next-col-m-offset-10{margin-left:41.66667%}.next-col-m-offset-11{margin-left:45.83333%}.next-col-m-offset-12{margin-left:50%}.next-col-m-offset-13{margin-left:54.16667%}.next-col-m-offset-14{margin-left:58.33333%}.next-col-m-offset-15{margin-left:62.5%}.next-col-m-offset-16{margin-left:66.66667%}.next-col-m-offset-17{margin-left:70.83333%}.next-col-m-offset-18{margin-left:75%}.next-col-m-offset-19{margin-left:79.16667%}.next-col-m-offset-20{margin-left:83.33333%}.next-col-m-offset-21{margin-left:87.5%}.next-col-m-offset-22{margin-left:91.66667%}.next-col-m-offset-23{margin-left:95.83333%}.next-col-m-offset-24{margin-left:100%}}@media (min-width:1200px){.next-col-l-offset-1{margin-left:4.16667%}.next-col-l-offset-2{margin-left:8.33333%}.next-col-l-offset-3{margin-left:12.5%}.next-col-l-offset-4{margin-left:16.66667%}.next-col-l-offset-5{margin-left:20.83333%}.next-col-l-offset-6{margin-left:25%}.next-col-l-offset-7{margin-left:29.16667%}.next-col-l-offset-8{margin-left:33.33333%}.next-col-l-offset-9{margin-left:37.5%}.next-col-l-offset-10{margin-left:41.66667%}.next-col-l-offset-11{margin-left:45.83333%}.next-col-l-offset-12{margin-left:50%}.next-col-l-offset-13{margin-left:54.16667%}.next-col-l-offset-14{margin-left:58.33333%}.next-col-l-offset-15{margin-left:62.5%}.next-col-l-offset-16{margin-left:66.66667%}.next-col-l-offset-17{margin-left:70.83333%}.next-col-l-offset-18{margin-left:75%}.next-col-l-offset-19{margin-left:79.16667%}.next-col-l-offset-20{margin-left:83.33333%}.next-col-l-offset-21{margin-left:87.5%}.next-col-l-offset-22{margin-left:91.66667%}.next-col-l-offset-23{margin-left:95.83333%}.next-col-l-offset-24{margin-left:100%}}@media (min-width:1500px){.next-col-xl-offset-1{margin-left:4.16667%}.next-col-xl-offset-2{margin-left:8.33333%}.next-col-xl-offset-3{margin-left:12.5%}.next-col-xl-offset-4{margin-left:16.66667%}.next-col-xl-offset-5{margin-left:20.83333%}.next-col-xl-offset-6{margin-left:25%}.next-col-xl-offset-7{margin-left:29.16667%}.next-col-xl-offset-8{margin-left:33.33333%}.next-col-xl-offset-9{margin-left:37.5%}.next-col-xl-offset-10{margin-left:41.66667%}.next-col-xl-offset-11{margin-left:45.83333%}.next-col-xl-offset-12{margin-left:50%}.next-col-xl-offset-13{margin-left:54.16667%}.next-col-xl-offset-14{margin-left:58.33333%}.next-col-xl-offset-15{margin-left:62.5%}.next-col-xl-offset-16{margin-left:66.66667%}.next-col-xl-offset-17{margin-left:70.83333%}.next-col-xl-offset-18{margin-left:75%}.next-col-xl-offset-19{margin-left:79.16667%}.next-col-xl-offset-20{margin-left:83.33333%}.next-col-xl-offset-21{margin-left:87.5%}.next-col-xl-offset-22{margin-left:91.66667%}.next-col-xl-offset-23{margin-left:95.83333%}.next-col-xl-offset-24{margin-left:100%}}.next-col-offset-fixed-1{margin-left:20px}.next-col-offset-fixed-2{margin-left:40px}.next-col-offset-fixed-3{margin-left:60px}.next-col-offset-fixed-4{margin-left:80px}.next-col-offset-fixed-5{margin-left:100px}.next-col-offset-fixed-6{margin-left:120px}.next-col-offset-fixed-7{margin-left:140px}.next-col-offset-fixed-8{margin-left:160px}.next-col-offset-fixed-9{margin-left:180px}.next-col-offset-fixed-10{margin-left:200px}.next-col-offset-fixed-11{margin-left:220px}.next-col-offset-fixed-12{margin-left:240px}.next-col-offset-fixed-13{margin-left:260px}.next-col-offset-fixed-14{margin-left:280px}.next-col-offset-fixed-15{margin-left:300px}.next-col-offset-fixed-16{margin-left:320px}.next-col-offset-fixed-17{margin-left:340px}.next-col-offset-fixed-18{margin-left:360px}.next-col-offset-fixed-19{margin-left:380px}.next-col-offset-fixed-20{margin-left:400px}.next-col-offset-fixed-21{margin-left:420px}.next-col-offset-fixed-22{margin-left:440px}.next-col-offset-fixed-23{margin-left:460px}.next-col-offset-fixed-24{margin-left:480px}.next-col-offset-fixed-25{margin-left:500px}.next-col-offset-fixed-26{margin-left:520px}.next-col-offset-fixed-27{margin-left:540px}.next-col-offset-fixed-28{margin-left:560px}.next-col-offset-fixed-29{margin-left:580px}.next-col-offset-fixed-30{margin-left:600px}.next-col-offset-fixed-xxs-1{margin-left:20px}.next-col-offset-fixed-xxs-2{margin-left:40px}.next-col-offset-fixed-xxs-3{margin-left:60px}.next-col-offset-fixed-xxs-4{margin-left:80px}.next-col-offset-fixed-xxs-5{margin-left:100px}.next-col-offset-fixed-xxs-6{margin-left:120px}.next-col-offset-fixed-xxs-7{margin-left:140px}.next-col-offset-fixed-xxs-8{margin-left:160px}.next-col-offset-fixed-xxs-9{margin-left:180px}.next-col-offset-fixed-xxs-10{margin-left:200px}.next-col-offset-fixed-xxs-11{margin-left:220px}.next-col-offset-fixed-xxs-12{margin-left:240px}.next-col-offset-fixed-xxs-13{margin-left:260px}.next-col-offset-fixed-xxs-14{margin-left:280px}.next-col-offset-fixed-xxs-15{margin-left:300px}.next-col-offset-fixed-xxs-16{margin-left:320px}.next-col-offset-fixed-xxs-17{margin-left:340px}.next-col-offset-fixed-xxs-18{margin-left:360px}.next-col-offset-fixed-xxs-19{margin-left:380px}.next-col-offset-fixed-xxs-20{margin-left:400px}.next-col-offset-fixed-xxs-21{margin-left:420px}.next-col-offset-fixed-xxs-22{margin-left:440px}.next-col-offset-fixed-xxs-23{margin-left:460px}.next-col-offset-fixed-xxs-24{margin-left:480px}.next-col-offset-fixed-xxs-25{margin-left:500px}.next-col-offset-fixed-xxs-26{margin-left:520px}.next-col-offset-fixed-xxs-27{margin-left:540px}.next-col-offset-fixed-xxs-28{margin-left:560px}.next-col-offset-fixed-xxs-29{margin-left:580px}.next-col-offset-fixed-xxs-30{margin-left:600px}.next-col-offset-fixed-xs-1{margin-left:20px}.next-col-offset-fixed-xs-2{margin-left:40px}.next-col-offset-fixed-xs-3{margin-left:60px}.next-col-offset-fixed-xs-4{margin-left:80px}.next-col-offset-fixed-xs-5{margin-left:100px}.next-col-offset-fixed-xs-6{margin-left:120px}.next-col-offset-fixed-xs-7{margin-left:140px}.next-col-offset-fixed-xs-8{margin-left:160px}.next-col-offset-fixed-xs-9{margin-left:180px}.next-col-offset-fixed-xs-10{margin-left:200px}.next-col-offset-fixed-xs-11{margin-left:220px}.next-col-offset-fixed-xs-12{margin-left:240px}.next-col-offset-fixed-xs-13{margin-left:260px}.next-col-offset-fixed-xs-14{margin-left:280px}.next-col-offset-fixed-xs-15{margin-left:300px}.next-col-offset-fixed-xs-16{margin-left:320px}.next-col-offset-fixed-xs-17{margin-left:340px}.next-col-offset-fixed-xs-18{margin-left:360px}.next-col-offset-fixed-xs-19{margin-left:380px}.next-col-offset-fixed-xs-20{margin-left:400px}.next-col-offset-fixed-xs-21{margin-left:420px}.next-col-offset-fixed-xs-22{margin-left:440px}.next-col-offset-fixed-xs-23{margin-left:460px}.next-col-offset-fixed-xs-24{margin-left:480px}.next-col-offset-fixed-xs-25{margin-left:500px}.next-col-offset-fixed-xs-26{margin-left:520px}.next-col-offset-fixed-xs-27{margin-left:540px}.next-col-offset-fixed-xs-28{margin-left:560px}.next-col-offset-fixed-xs-29{margin-left:580px}.next-col-offset-fixed-xs-30{margin-left:600px}.next-col-offset-fixed-s-1{margin-left:20px}.next-col-offset-fixed-s-2{margin-left:40px}.next-col-offset-fixed-s-3{margin-left:60px}.next-col-offset-fixed-s-4{margin-left:80px}.next-col-offset-fixed-s-5{margin-left:100px}.next-col-offset-fixed-s-6{margin-left:120px}.next-col-offset-fixed-s-7{margin-left:140px}.next-col-offset-fixed-s-8{margin-left:160px}.next-col-offset-fixed-s-9{margin-left:180px}.next-col-offset-fixed-s-10{margin-left:200px}.next-col-offset-fixed-s-11{margin-left:220px}.next-col-offset-fixed-s-12{margin-left:240px}.next-col-offset-fixed-s-13{margin-left:260px}.next-col-offset-fixed-s-14{margin-left:280px}.next-col-offset-fixed-s-15{margin-left:300px}.next-col-offset-fixed-s-16{margin-left:320px}.next-col-offset-fixed-s-17{margin-left:340px}.next-col-offset-fixed-s-18{margin-left:360px}.next-col-offset-fixed-s-19{margin-left:380px}.next-col-offset-fixed-s-20{margin-left:400px}.next-col-offset-fixed-s-21{margin-left:420px}.next-col-offset-fixed-s-22{margin-left:440px}.next-col-offset-fixed-s-23{margin-left:460px}.next-col-offset-fixed-s-24{margin-left:480px}.next-col-offset-fixed-s-25{margin-left:500px}.next-col-offset-fixed-s-26{margin-left:520px}.next-col-offset-fixed-s-27{margin-left:540px}.next-col-offset-fixed-s-28{margin-left:560px}.next-col-offset-fixed-s-29{margin-left:580px}.next-col-offset-fixed-s-30{margin-left:600px}.next-col-offset-fixed-m-1{margin-left:20px}.next-col-offset-fixed-m-2{margin-left:40px}.next-col-offset-fixed-m-3{margin-left:60px}.next-col-offset-fixed-m-4{margin-left:80px}.next-col-offset-fixed-m-5{margin-left:100px}.next-col-offset-fixed-m-6{margin-left:120px}.next-col-offset-fixed-m-7{margin-left:140px}.next-col-offset-fixed-m-8{margin-left:160px}.next-col-offset-fixed-m-9{margin-left:180px}.next-col-offset-fixed-m-10{margin-left:200px}.next-col-offset-fixed-m-11{margin-left:220px}.next-col-offset-fixed-m-12{margin-left:240px}.next-col-offset-fixed-m-13{margin-left:260px}.next-col-offset-fixed-m-14{margin-left:280px}.next-col-offset-fixed-m-15{margin-left:300px}.next-col-offset-fixed-m-16{margin-left:320px}.next-col-offset-fixed-m-17{margin-left:340px}.next-col-offset-fixed-m-18{margin-left:360px}.next-col-offset-fixed-m-19{margin-left:380px}.next-col-offset-fixed-m-20{margin-left:400px}.next-col-offset-fixed-m-21{margin-left:420px}.next-col-offset-fixed-m-22{margin-left:440px}.next-col-offset-fixed-m-23{margin-left:460px}.next-col-offset-fixed-m-24{margin-left:480px}.next-col-offset-fixed-m-25{margin-left:500px}.next-col-offset-fixed-m-26{margin-left:520px}.next-col-offset-fixed-m-27{margin-left:540px}.next-col-offset-fixed-m-28{margin-left:560px}.next-col-offset-fixed-m-29{margin-left:580px}.next-col-offset-fixed-m-30{margin-left:600px}.next-col-offset-fixed-l-1{margin-left:20px}.next-col-offset-fixed-l-2{margin-left:40px}.next-col-offset-fixed-l-3{margin-left:60px}.next-col-offset-fixed-l-4{margin-left:80px}.next-col-offset-fixed-l-5{margin-left:100px}.next-col-offset-fixed-l-6{margin-left:120px}.next-col-offset-fixed-l-7{margin-left:140px}.next-col-offset-fixed-l-8{margin-left:160px}.next-col-offset-fixed-l-9{margin-left:180px}.next-col-offset-fixed-l-10{margin-left:200px}.next-col-offset-fixed-l-11{margin-left:220px}.next-col-offset-fixed-l-12{margin-left:240px}.next-col-offset-fixed-l-13{margin-left:260px}.next-col-offset-fixed-l-14{margin-left:280px}.next-col-offset-fixed-l-15{margin-left:300px}.next-col-offset-fixed-l-16{margin-left:320px}.next-col-offset-fixed-l-17{margin-left:340px}.next-col-offset-fixed-l-18{margin-left:360px}.next-col-offset-fixed-l-19{margin-left:380px}.next-col-offset-fixed-l-20{margin-left:400px}.next-col-offset-fixed-l-21{margin-left:420px}.next-col-offset-fixed-l-22{margin-left:440px}.next-col-offset-fixed-l-23{margin-left:460px}.next-col-offset-fixed-l-24{margin-left:480px}.next-col-offset-fixed-l-25{margin-left:500px}.next-col-offset-fixed-l-26{margin-left:520px}.next-col-offset-fixed-l-27{margin-left:540px}.next-col-offset-fixed-l-28{margin-left:560px}.next-col-offset-fixed-l-29{margin-left:580px}.next-col-offset-fixed-l-30{margin-left:600px}.next-col-offset-fixed-xl-1{margin-left:20px}.next-col-offset-fixed-xl-2{margin-left:40px}.next-col-offset-fixed-xl-3{margin-left:60px}.next-col-offset-fixed-xl-4{margin-left:80px}.next-col-offset-fixed-xl-5{margin-left:100px}.next-col-offset-fixed-xl-6{margin-left:120px}.next-col-offset-fixed-xl-7{margin-left:140px}.next-col-offset-fixed-xl-8{margin-left:160px}.next-col-offset-fixed-xl-9{margin-left:180px}.next-col-offset-fixed-xl-10{margin-left:200px}.next-col-offset-fixed-xl-11{margin-left:220px}.next-col-offset-fixed-xl-12{margin-left:240px}.next-col-offset-fixed-xl-13{margin-left:260px}.next-col-offset-fixed-xl-14{margin-left:280px}.next-col-offset-fixed-xl-15{margin-left:300px}.next-col-offset-fixed-xl-16{margin-left:320px}.next-col-offset-fixed-xl-17{margin-left:340px}.next-col-offset-fixed-xl-18{margin-left:360px}.next-col-offset-fixed-xl-19{margin-left:380px}.next-col-offset-fixed-xl-20{margin-left:400px}.next-col-offset-fixed-xl-21{margin-left:420px}.next-col-offset-fixed-xl-22{margin-left:440px}.next-col-offset-fixed-xl-23{margin-left:460px}.next-col-offset-fixed-xl-24{margin-left:480px}.next-col-offset-fixed-xl-25{margin-left:500px}.next-col-offset-fixed-xl-26{margin-left:520px}.next-col-offset-fixed-xl-27{margin-left:540px}.next-col-offset-fixed-xl-28{margin-left:560px}.next-col-offset-fixed-xl-29{margin-left:580px}.next-col-offset-fixed-xl-30{margin-left:600px}.next-col.next-col-hidden{display:none}@media (min-width:320px) and (max-width:479px){.next-col.next-col-xxs-hidden{display:none}}@media (min-width:480px) and (max-width:719px){.next-col.next-col-xs-hidden{display:none}}@media (min-width:720px) and (max-width:989px){.next-col.next-col-s-hidden{display:none}}@media (min-width:990px) and (max-width:1199px){.next-col.next-col-m-hidden{display:none}}@media (min-width:1200px) and (max-width:1499px){.next-col.next-col-l-hidden{display:none}}@media (min-width:1500px){.next-col.next-col-xl-hidden{display:none}}.next-row.next-row-hidden{display:none}@media (min-width:320px) and (max-width:479px){.next-row.next-row-xxs-hidden{display:none}}@media (min-width:480px) and (max-width:719px){.next-row.next-row-xs-hidden{display:none}}@media (min-width:720px) and (max-width:989px){.next-row.next-row-s-hidden{display:none}}@media (min-width:990px) and (max-width:1199px){.next-row.next-row-m-hidden{display:none}}@media (min-width:1200px) and (max-width:1499px){.next-row.next-row-l-hidden{display:none}}@media (min-width:1500px){.next-row.next-row-xl-hidden{display:none}}.next-col-offset-1[dir=rtl]{margin-right:4.16667%;margin-left:auto}.next-col-offset-2[dir=rtl]{margin-right:8.33333%;margin-left:auto}.next-col-offset-3[dir=rtl]{margin-right:12.5%;margin-left:auto}.next-col-offset-4[dir=rtl]{margin-right:16.66667%;margin-left:auto}.next-col-offset-5[dir=rtl]{margin-right:20.83333%;margin-left:auto}.next-col-offset-6[dir=rtl]{margin-right:25%;margin-left:auto}.next-col-offset-7[dir=rtl]{margin-right:29.16667%;margin-left:auto}.next-col-offset-8[dir=rtl]{margin-right:33.33333%;margin-left:auto}.next-col-offset-9[dir=rtl]{margin-right:37.5%;margin-left:auto}.next-col-offset-10[dir=rtl]{margin-right:41.66667%;margin-left:auto}.next-col-offset-11[dir=rtl]{margin-right:45.83333%;margin-left:auto}.next-col-offset-12[dir=rtl]{margin-right:50%;margin-left:auto}.next-col-offset-13[dir=rtl]{margin-right:54.16667%;margin-left:auto}.next-col-offset-14[dir=rtl]{margin-right:58.33333%;margin-left:auto}.next-col-offset-15[dir=rtl]{margin-right:62.5%;margin-left:auto}.next-col-offset-16[dir=rtl]{margin-right:66.66667%;margin-left:auto}.next-col-offset-17[dir=rtl]{margin-right:70.83333%;margin-left:auto}.next-col-offset-18[dir=rtl]{margin-right:75%;margin-left:auto}.next-col-offset-19[dir=rtl]{margin-right:79.16667%;margin-left:auto}.next-col-offset-20[dir=rtl]{margin-right:83.33333%;margin-left:auto}.next-col-offset-21[dir=rtl]{margin-right:87.5%;margin-left:auto}.next-col-offset-22[dir=rtl]{margin-right:91.66667%;margin-left:auto}.next-col-offset-23[dir=rtl]{margin-right:95.83333%;margin-left:auto}.next-col-offset-24[dir=rtl]{margin-right:100%;margin-left:auto}@media (min-width:320px){.next-col-xxs-offset-1[dir=rtl]{margin-right:4.16667%;margin-left:auto}.next-col-xxs-offset-2[dir=rtl]{margin-right:8.33333%;margin-left:auto}.next-col-xxs-offset-3[dir=rtl]{margin-right:12.5%;margin-left:auto}.next-col-xxs-offset-4[dir=rtl]{margin-right:16.66667%;margin-left:auto}.next-col-xxs-offset-5[dir=rtl]{margin-right:20.83333%;margin-left:auto}.next-col-xxs-offset-6[dir=rtl]{margin-right:25%;margin-left:auto}.next-col-xxs-offset-7[dir=rtl]{margin-right:29.16667%;margin-left:auto}.next-col-xxs-offset-8[dir=rtl]{margin-right:33.33333%;margin-left:auto}.next-col-xxs-offset-9[dir=rtl]{margin-right:37.5%;margin-left:auto}.next-col-xxs-offset-10[dir=rtl]{margin-right:41.66667%;margin-left:auto}.next-col-xxs-offset-11[dir=rtl]{margin-right:45.83333%;margin-left:auto}.next-col-xxs-offset-12[dir=rtl]{margin-right:50%;margin-left:auto}.next-col-xxs-offset-13[dir=rtl]{margin-right:54.16667%;margin-left:auto}.next-col-xxs-offset-14[dir=rtl]{margin-right:58.33333%;margin-left:auto}.next-col-xxs-offset-15[dir=rtl]{margin-right:62.5%;margin-left:auto}.next-col-xxs-offset-16[dir=rtl]{margin-right:66.66667%;margin-left:auto}.next-col-xxs-offset-17[dir=rtl]{margin-right:70.83333%;margin-left:auto}.next-col-xxs-offset-18[dir=rtl]{margin-right:75%;margin-left:auto}.next-col-xxs-offset-19[dir=rtl]{margin-right:79.16667%;margin-left:auto}.next-col-xxs-offset-20[dir=rtl]{margin-right:83.33333%;margin-left:auto}.next-col-xxs-offset-21[dir=rtl]{margin-right:87.5%;margin-left:auto}.next-col-xxs-offset-22[dir=rtl]{margin-right:91.66667%;margin-left:auto}.next-col-xxs-offset-23[dir=rtl]{margin-right:95.83333%;margin-left:auto}.next-col-xxs-offset-24[dir=rtl]{margin-right:100%;margin-left:auto}}@media (min-width:480px){.next-col-xs-offset-1[dir=rtl]{margin-right:4.16667%;margin-left:auto}.next-col-xs-offset-2[dir=rtl]{margin-right:8.33333%;margin-left:auto}.next-col-xs-offset-3[dir=rtl]{margin-right:12.5%;margin-left:auto}.next-col-xs-offset-4[dir=rtl]{margin-right:16.66667%;margin-left:auto}.next-col-xs-offset-5[dir=rtl]{margin-right:20.83333%;margin-left:auto}.next-col-xs-offset-6[dir=rtl]{margin-right:25%;margin-left:auto}.next-col-xs-offset-7[dir=rtl]{margin-right:29.16667%;margin-left:auto}.next-col-xs-offset-8[dir=rtl]{margin-right:33.33333%;margin-left:auto}.next-col-xs-offset-9[dir=rtl]{margin-right:37.5%;margin-left:auto}.next-col-xs-offset-10[dir=rtl]{margin-right:41.66667%;margin-left:auto}.next-col-xs-offset-11[dir=rtl]{margin-right:45.83333%;margin-left:auto}.next-col-xs-offset-12[dir=rtl]{margin-right:50%;margin-left:auto}.next-col-xs-offset-13[dir=rtl]{margin-right:54.16667%;margin-left:auto}.next-col-xs-offset-14[dir=rtl]{margin-right:58.33333%;margin-left:auto}.next-col-xs-offset-15[dir=rtl]{margin-right:62.5%;margin-left:auto}.next-col-xs-offset-16[dir=rtl]{margin-right:66.66667%;margin-left:auto}.next-col-xs-offset-17[dir=rtl]{margin-right:70.83333%;margin-left:auto}.next-col-xs-offset-18[dir=rtl]{margin-right:75%;margin-left:auto}.next-col-xs-offset-19[dir=rtl]{margin-right:79.16667%;margin-left:auto}.next-col-xs-offset-20[dir=rtl]{margin-right:83.33333%;margin-left:auto}.next-col-xs-offset-21[dir=rtl]{margin-right:87.5%;margin-left:auto}.next-col-xs-offset-22[dir=rtl]{margin-right:91.66667%;margin-left:auto}.next-col-xs-offset-23[dir=rtl]{margin-right:95.83333%;margin-left:auto}.next-col-xs-offset-24[dir=rtl]{margin-right:100%;margin-left:auto}}@media (min-width:720px){.next-col-s-offset-1[dir=rtl]{margin-right:4.16667%;margin-left:auto}.next-col-s-offset-2[dir=rtl]{margin-right:8.33333%;margin-left:auto}.next-col-s-offset-3[dir=rtl]{margin-right:12.5%;margin-left:auto}.next-col-s-offset-4[dir=rtl]{margin-right:16.66667%;margin-left:auto}.next-col-s-offset-5[dir=rtl]{margin-right:20.83333%;margin-left:auto}.next-col-s-offset-6[dir=rtl]{margin-right:25%;margin-left:auto}.next-col-s-offset-7[dir=rtl]{margin-right:29.16667%;margin-left:auto}.next-col-s-offset-8[dir=rtl]{margin-right:33.33333%;margin-left:auto}.next-col-s-offset-9[dir=rtl]{margin-right:37.5%;margin-left:auto}.next-col-s-offset-10[dir=rtl]{margin-right:41.66667%;margin-left:auto}.next-col-s-offset-11[dir=rtl]{margin-right:45.83333%;margin-left:auto}.next-col-s-offset-12[dir=rtl]{margin-right:50%;margin-left:auto}.next-col-s-offset-13[dir=rtl]{margin-right:54.16667%;margin-left:auto}.next-col-s-offset-14[dir=rtl]{margin-right:58.33333%;margin-left:auto}.next-col-s-offset-15[dir=rtl]{margin-right:62.5%;margin-left:auto}.next-col-s-offset-16[dir=rtl]{margin-right:66.66667%;margin-left:auto}.next-col-s-offset-17[dir=rtl]{margin-right:70.83333%;margin-left:auto}.next-col-s-offset-18[dir=rtl]{margin-right:75%;margin-left:auto}.next-col-s-offset-19[dir=rtl]{margin-right:79.16667%;margin-left:auto}.next-col-s-offset-20[dir=rtl]{margin-right:83.33333%;margin-left:auto}.next-col-s-offset-21[dir=rtl]{margin-right:87.5%;margin-left:auto}.next-col-s-offset-22[dir=rtl]{margin-right:91.66667%;margin-left:auto}.next-col-s-offset-23[dir=rtl]{margin-right:95.83333%;margin-left:auto}.next-col-s-offset-24[dir=rtl]{margin-right:100%;margin-left:auto}}@media (min-width:990px){.next-col-m-offset-1[dir=rtl]{margin-right:4.16667%;margin-left:auto}.next-col-m-offset-2[dir=rtl]{margin-right:8.33333%;margin-left:auto}.next-col-m-offset-3[dir=rtl]{margin-right:12.5%;margin-left:auto}.next-col-m-offset-4[dir=rtl]{margin-right:16.66667%;margin-left:auto}.next-col-m-offset-5[dir=rtl]{margin-right:20.83333%;margin-left:auto}.next-col-m-offset-6[dir=rtl]{margin-right:25%;margin-left:auto}.next-col-m-offset-7[dir=rtl]{margin-right:29.16667%;margin-left:auto}.next-col-m-offset-8[dir=rtl]{margin-right:33.33333%;margin-left:auto}.next-col-m-offset-9[dir=rtl]{margin-right:37.5%;margin-left:auto}.next-col-m-offset-10[dir=rtl]{margin-right:41.66667%;margin-left:auto}.next-col-m-offset-11[dir=rtl]{margin-right:45.83333%;margin-left:auto}.next-col-m-offset-12[dir=rtl]{margin-right:50%;margin-left:auto}.next-col-m-offset-13[dir=rtl]{margin-right:54.16667%;margin-left:auto}.next-col-m-offset-14[dir=rtl]{margin-right:58.33333%;margin-left:auto}.next-col-m-offset-15[dir=rtl]{margin-right:62.5%;margin-left:auto}.next-col-m-offset-16[dir=rtl]{margin-right:66.66667%;margin-left:auto}.next-col-m-offset-17[dir=rtl]{margin-right:70.83333%;margin-left:auto}.next-col-m-offset-18[dir=rtl]{margin-right:75%;margin-left:auto}.next-col-m-offset-19[dir=rtl]{margin-right:79.16667%;margin-left:auto}.next-col-m-offset-20[dir=rtl]{margin-right:83.33333%;margin-left:auto}.next-col-m-offset-21[dir=rtl]{margin-right:87.5%;margin-left:auto}.next-col-m-offset-22[dir=rtl]{margin-right:91.66667%;margin-left:auto}.next-col-m-offset-23[dir=rtl]{margin-right:95.83333%;margin-left:auto}.next-col-m-offset-24[dir=rtl]{margin-right:100%;margin-left:auto}}@media (min-width:1200px){.next-col-l-offset-1[dir=rtl]{margin-right:4.16667%;margin-left:auto}.next-col-l-offset-2[dir=rtl]{margin-right:8.33333%;margin-left:auto}.next-col-l-offset-3[dir=rtl]{margin-right:12.5%;margin-left:auto}.next-col-l-offset-4[dir=rtl]{margin-right:16.66667%;margin-left:auto}.next-col-l-offset-5[dir=rtl]{margin-right:20.83333%;margin-left:auto}.next-col-l-offset-6[dir=rtl]{margin-right:25%;margin-left:auto}.next-col-l-offset-7[dir=rtl]{margin-right:29.16667%;margin-left:auto}.next-col-l-offset-8[dir=rtl]{margin-right:33.33333%;margin-left:auto}.next-col-l-offset-9[dir=rtl]{margin-right:37.5%;margin-left:auto}.next-col-l-offset-10[dir=rtl]{margin-right:41.66667%;margin-left:auto}.next-col-l-offset-11[dir=rtl]{margin-right:45.83333%;margin-left:auto}.next-col-l-offset-12[dir=rtl]{margin-right:50%;margin-left:auto}.next-col-l-offset-13[dir=rtl]{margin-right:54.16667%;margin-left:auto}.next-col-l-offset-14[dir=rtl]{margin-right:58.33333%;margin-left:auto}.next-col-l-offset-15[dir=rtl]{margin-right:62.5%;margin-left:auto}.next-col-l-offset-16[dir=rtl]{margin-right:66.66667%;margin-left:auto}.next-col-l-offset-17[dir=rtl]{margin-right:70.83333%;margin-left:auto}.next-col-l-offset-18[dir=rtl]{margin-right:75%;margin-left:auto}.next-col-l-offset-19[dir=rtl]{margin-right:79.16667%;margin-left:auto}.next-col-l-offset-20[dir=rtl]{margin-right:83.33333%;margin-left:auto}.next-col-l-offset-21[dir=rtl]{margin-right:87.5%;margin-left:auto}.next-col-l-offset-22[dir=rtl]{margin-right:91.66667%;margin-left:auto}.next-col-l-offset-23[dir=rtl]{margin-right:95.83333%;margin-left:auto}.next-col-l-offset-24[dir=rtl]{margin-right:100%;margin-left:auto}}@media (min-width:1500px){.next-col-xl-offset-1[dir=rtl]{margin-right:4.16667%;margin-left:auto}.next-col-xl-offset-2[dir=rtl]{margin-right:8.33333%;margin-left:auto}.next-col-xl-offset-3[dir=rtl]{margin-right:12.5%;margin-left:auto}.next-col-xl-offset-4[dir=rtl]{margin-right:16.66667%;margin-left:auto}.next-col-xl-offset-5[dir=rtl]{margin-right:20.83333%;margin-left:auto}.next-col-xl-offset-6[dir=rtl]{margin-right:25%;margin-left:auto}.next-col-xl-offset-7[dir=rtl]{margin-right:29.16667%;margin-left:auto}.next-col-xl-offset-8[dir=rtl]{margin-right:33.33333%;margin-left:auto}.next-col-xl-offset-9[dir=rtl]{margin-right:37.5%;margin-left:auto}.next-col-xl-offset-10[dir=rtl]{margin-right:41.66667%;margin-left:auto}.next-col-xl-offset-11[dir=rtl]{margin-right:45.83333%;margin-left:auto}.next-col-xl-offset-12[dir=rtl]{margin-right:50%;margin-left:auto}.next-col-xl-offset-13[dir=rtl]{margin-right:54.16667%;margin-left:auto}.next-col-xl-offset-14[dir=rtl]{margin-right:58.33333%;margin-left:auto}.next-col-xl-offset-15[dir=rtl]{margin-right:62.5%;margin-left:auto}.next-col-xl-offset-16[dir=rtl]{margin-right:66.66667%;margin-left:auto}.next-col-xl-offset-17[dir=rtl]{margin-right:70.83333%;margin-left:auto}.next-col-xl-offset-18[dir=rtl]{margin-right:75%;margin-left:auto}.next-col-xl-offset-19[dir=rtl]{margin-right:79.16667%;margin-left:auto}.next-col-xl-offset-20[dir=rtl]{margin-right:83.33333%;margin-left:auto}.next-col-xl-offset-21[dir=rtl]{margin-right:87.5%;margin-left:auto}.next-col-xl-offset-22[dir=rtl]{margin-right:91.66667%;margin-left:auto}.next-col-xl-offset-23[dir=rtl]{margin-right:95.83333%;margin-left:auto}.next-col-xl-offset-24[dir=rtl]{margin-right:100%;margin-left:auto}}.next-col-offset-fixed-1[dir=rtl]{margin-right:20px;margin-left:auto}.next-col-offset-fixed-2[dir=rtl]{margin-right:40px;margin-left:auto}.next-col-offset-fixed-3[dir=rtl]{margin-right:60px;margin-left:auto}.next-col-offset-fixed-4[dir=rtl]{margin-right:80px;margin-left:auto}.next-col-offset-fixed-5[dir=rtl]{margin-right:100px;margin-left:auto}.next-col-offset-fixed-6[dir=rtl]{margin-right:120px;margin-left:auto}.next-col-offset-fixed-7[dir=rtl]{margin-right:140px;margin-left:auto}.next-col-offset-fixed-8[dir=rtl]{margin-right:160px;margin-left:auto}.next-col-offset-fixed-9[dir=rtl]{margin-right:180px;margin-left:auto}.next-col-offset-fixed-10[dir=rtl]{margin-right:200px;margin-left:auto}.next-col-offset-fixed-11[dir=rtl]{margin-right:220px;margin-left:auto}.next-col-offset-fixed-12[dir=rtl]{margin-right:240px;margin-left:auto}.next-col-offset-fixed-13[dir=rtl]{margin-right:260px;margin-left:auto}.next-col-offset-fixed-14[dir=rtl]{margin-right:280px;margin-left:auto}.next-col-offset-fixed-15[dir=rtl]{margin-right:300px;margin-left:auto}.next-col-offset-fixed-16[dir=rtl]{margin-right:320px;margin-left:auto}.next-col-offset-fixed-17[dir=rtl]{margin-right:340px;margin-left:auto}.next-col-offset-fixed-18[dir=rtl]{margin-right:360px;margin-left:auto}.next-col-offset-fixed-19[dir=rtl]{margin-right:380px;margin-left:auto}.next-col-offset-fixed-20[dir=rtl]{margin-right:400px;margin-left:auto}.next-col-offset-fixed-21[dir=rtl]{margin-right:420px;margin-left:auto}.next-col-offset-fixed-22[dir=rtl]{margin-right:440px;margin-left:auto}.next-col-offset-fixed-23[dir=rtl]{margin-right:460px;margin-left:auto}.next-col-offset-fixed-24[dir=rtl]{margin-right:480px;margin-left:auto}.next-col-offset-fixed-25[dir=rtl]{margin-right:500px;margin-left:auto}.next-col-offset-fixed-26[dir=rtl]{margin-right:520px;margin-left:auto}.next-col-offset-fixed-27[dir=rtl]{margin-right:540px;margin-left:auto}.next-col-offset-fixed-28[dir=rtl]{margin-right:560px;margin-left:auto}.next-col-offset-fixed-29[dir=rtl]{margin-right:580px;margin-left:auto}.next-col-offset-fixed-30[dir=rtl]{margin-right:600px;margin-left:auto}.next-col-offset-fixed-xxs-1[dir=rtl]{margin-right:20px;margin-left:auto}.next-col-offset-fixed-xxs-2[dir=rtl]{margin-right:40px;margin-left:auto}.next-col-offset-fixed-xxs-3[dir=rtl]{margin-right:60px;margin-left:auto}.next-col-offset-fixed-xxs-4[dir=rtl]{margin-right:80px;margin-left:auto}.next-col-offset-fixed-xxs-5[dir=rtl]{margin-right:100px;margin-left:auto}.next-col-offset-fixed-xxs-6[dir=rtl]{margin-right:120px;margin-left:auto}.next-col-offset-fixed-xxs-7[dir=rtl]{margin-right:140px;margin-left:auto}.next-col-offset-fixed-xxs-8[dir=rtl]{margin-right:160px;margin-left:auto}.next-col-offset-fixed-xxs-9[dir=rtl]{margin-right:180px;margin-left:auto}.next-col-offset-fixed-xxs-10[dir=rtl]{margin-right:200px;margin-left:auto}.next-col-offset-fixed-xxs-11[dir=rtl]{margin-right:220px;margin-left:auto}.next-col-offset-fixed-xxs-12[dir=rtl]{margin-right:240px;margin-left:auto}.next-col-offset-fixed-xxs-13[dir=rtl]{margin-right:260px;margin-left:auto}.next-col-offset-fixed-xxs-14[dir=rtl]{margin-right:280px;margin-left:auto}.next-col-offset-fixed-xxs-15[dir=rtl]{margin-right:300px;margin-left:auto}.next-col-offset-fixed-xxs-16[dir=rtl]{margin-right:320px;margin-left:auto}.next-col-offset-fixed-xxs-17[dir=rtl]{margin-right:340px;margin-left:auto}.next-col-offset-fixed-xxs-18[dir=rtl]{margin-right:360px;margin-left:auto}.next-col-offset-fixed-xxs-19[dir=rtl]{margin-right:380px;margin-left:auto}.next-col-offset-fixed-xxs-20[dir=rtl]{margin-right:400px;margin-left:auto}.next-col-offset-fixed-xxs-21[dir=rtl]{margin-right:420px;margin-left:auto}.next-col-offset-fixed-xxs-22[dir=rtl]{margin-right:440px;margin-left:auto}.next-col-offset-fixed-xxs-23[dir=rtl]{margin-right:460px;margin-left:auto}.next-col-offset-fixed-xxs-24[dir=rtl]{margin-right:480px;margin-left:auto}.next-col-offset-fixed-xxs-25[dir=rtl]{margin-right:500px;margin-left:auto}.next-col-offset-fixed-xxs-26[dir=rtl]{margin-right:520px;margin-left:auto}.next-col-offset-fixed-xxs-27[dir=rtl]{margin-right:540px;margin-left:auto}.next-col-offset-fixed-xxs-28[dir=rtl]{margin-right:560px;margin-left:auto}.next-col-offset-fixed-xxs-29[dir=rtl]{margin-right:580px;margin-left:auto}.next-col-offset-fixed-xxs-30[dir=rtl]{margin-right:600px;margin-left:auto}.next-col-offset-fixed-xs-1[dir=rtl]{margin-right:20px;margin-left:auto}.next-col-offset-fixed-xs-2[dir=rtl]{margin-right:40px;margin-left:auto}.next-col-offset-fixed-xs-3[dir=rtl]{margin-right:60px;margin-left:auto}.next-col-offset-fixed-xs-4[dir=rtl]{margin-right:80px;margin-left:auto}.next-col-offset-fixed-xs-5[dir=rtl]{margin-right:100px;margin-left:auto}.next-col-offset-fixed-xs-6[dir=rtl]{margin-right:120px;margin-left:auto}.next-col-offset-fixed-xs-7[dir=rtl]{margin-right:140px;margin-left:auto}.next-col-offset-fixed-xs-8[dir=rtl]{margin-right:160px;margin-left:auto}.next-col-offset-fixed-xs-9[dir=rtl]{margin-right:180px;margin-left:auto}.next-col-offset-fixed-xs-10[dir=rtl]{margin-right:200px;margin-left:auto}.next-col-offset-fixed-xs-11[dir=rtl]{margin-right:220px;margin-left:auto}.next-col-offset-fixed-xs-12[dir=rtl]{margin-right:240px;margin-left:auto}.next-col-offset-fixed-xs-13[dir=rtl]{margin-right:260px;margin-left:auto}.next-col-offset-fixed-xs-14[dir=rtl]{margin-right:280px;margin-left:auto}.next-col-offset-fixed-xs-15[dir=rtl]{margin-right:300px;margin-left:auto}.next-col-offset-fixed-xs-16[dir=rtl]{margin-right:320px;margin-left:auto}.next-col-offset-fixed-xs-17[dir=rtl]{margin-right:340px;margin-left:auto}.next-col-offset-fixed-xs-18[dir=rtl]{margin-right:360px;margin-left:auto}.next-col-offset-fixed-xs-19[dir=rtl]{margin-right:380px;margin-left:auto}.next-col-offset-fixed-xs-20[dir=rtl]{margin-right:400px;margin-left:auto}.next-col-offset-fixed-xs-21[dir=rtl]{margin-right:420px;margin-left:auto}.next-col-offset-fixed-xs-22[dir=rtl]{margin-right:440px;margin-left:auto}.next-col-offset-fixed-xs-23[dir=rtl]{margin-right:460px;margin-left:auto}.next-col-offset-fixed-xs-24[dir=rtl]{margin-right:480px;margin-left:auto}.next-col-offset-fixed-xs-25[dir=rtl]{margin-right:500px;margin-left:auto}.next-col-offset-fixed-xs-26[dir=rtl]{margin-right:520px;margin-left:auto}.next-col-offset-fixed-xs-27[dir=rtl]{margin-right:540px;margin-left:auto}.next-col-offset-fixed-xs-28[dir=rtl]{margin-right:560px;margin-left:auto}.next-col-offset-fixed-xs-29[dir=rtl]{margin-right:580px;margin-left:auto}.next-col-offset-fixed-xs-30[dir=rtl]{margin-right:600px;margin-left:auto}.next-col-offset-fixed-s-1[dir=rtl]{margin-right:20px;margin-left:auto}.next-col-offset-fixed-s-2[dir=rtl]{margin-right:40px;margin-left:auto}.next-col-offset-fixed-s-3[dir=rtl]{margin-right:60px;margin-left:auto}.next-col-offset-fixed-s-4[dir=rtl]{margin-right:80px;margin-left:auto}.next-col-offset-fixed-s-5[dir=rtl]{margin-right:100px;margin-left:auto}.next-col-offset-fixed-s-6[dir=rtl]{margin-right:120px;margin-left:auto}.next-col-offset-fixed-s-7[dir=rtl]{margin-right:140px;margin-left:auto}.next-col-offset-fixed-s-8[dir=rtl]{margin-right:160px;margin-left:auto}.next-col-offset-fixed-s-9[dir=rtl]{margin-right:180px;margin-left:auto}.next-col-offset-fixed-s-10[dir=rtl]{margin-right:200px;margin-left:auto}.next-col-offset-fixed-s-11[dir=rtl]{margin-right:220px;margin-left:auto}.next-col-offset-fixed-s-12[dir=rtl]{margin-right:240px;margin-left:auto}.next-col-offset-fixed-s-13[dir=rtl]{margin-right:260px;margin-left:auto}.next-col-offset-fixed-s-14[dir=rtl]{margin-right:280px;margin-left:auto}.next-col-offset-fixed-s-15[dir=rtl]{margin-right:300px;margin-left:auto}.next-col-offset-fixed-s-16[dir=rtl]{margin-right:320px;margin-left:auto}.next-col-offset-fixed-s-17[dir=rtl]{margin-right:340px;margin-left:auto}.next-col-offset-fixed-s-18[dir=rtl]{margin-right:360px;margin-left:auto}.next-col-offset-fixed-s-19[dir=rtl]{margin-right:380px;margin-left:auto}.next-col-offset-fixed-s-20[dir=rtl]{margin-right:400px;margin-left:auto}.next-col-offset-fixed-s-21[dir=rtl]{margin-right:420px;margin-left:auto}.next-col-offset-fixed-s-22[dir=rtl]{margin-right:440px;margin-left:auto}.next-col-offset-fixed-s-23[dir=rtl]{margin-right:460px;margin-left:auto}.next-col-offset-fixed-s-24[dir=rtl]{margin-right:480px;margin-left:auto}.next-col-offset-fixed-s-25[dir=rtl]{margin-right:500px;margin-left:auto}.next-col-offset-fixed-s-26[dir=rtl]{margin-right:520px;margin-left:auto}.next-col-offset-fixed-s-27[dir=rtl]{margin-right:540px;margin-left:auto}.next-col-offset-fixed-s-28[dir=rtl]{margin-right:560px;margin-left:auto}.next-col-offset-fixed-s-29[dir=rtl]{margin-right:580px;margin-left:auto}.next-col-offset-fixed-s-30[dir=rtl]{margin-right:600px;margin-left:auto}.next-col-offset-fixed-m-1[dir=rtl]{margin-right:20px;margin-left:auto}.next-col-offset-fixed-m-2[dir=rtl]{margin-right:40px;margin-left:auto}.next-col-offset-fixed-m-3[dir=rtl]{margin-right:60px;margin-left:auto}.next-col-offset-fixed-m-4[dir=rtl]{margin-right:80px;margin-left:auto}.next-col-offset-fixed-m-5[dir=rtl]{margin-right:100px;margin-left:auto}.next-col-offset-fixed-m-6[dir=rtl]{margin-right:120px;margin-left:auto}.next-col-offset-fixed-m-7[dir=rtl]{margin-right:140px;margin-left:auto}.next-col-offset-fixed-m-8[dir=rtl]{margin-right:160px;margin-left:auto}.next-col-offset-fixed-m-9[dir=rtl]{margin-right:180px;margin-left:auto}.next-col-offset-fixed-m-10[dir=rtl]{margin-right:200px;margin-left:auto}.next-col-offset-fixed-m-11[dir=rtl]{margin-right:220px;margin-left:auto}.next-col-offset-fixed-m-12[dir=rtl]{margin-right:240px;margin-left:auto}.next-col-offset-fixed-m-13[dir=rtl]{margin-right:260px;margin-left:auto}.next-col-offset-fixed-m-14[dir=rtl]{margin-right:280px;margin-left:auto}.next-col-offset-fixed-m-15[dir=rtl]{margin-right:300px;margin-left:auto}.next-col-offset-fixed-m-16[dir=rtl]{margin-right:320px;margin-left:auto}.next-col-offset-fixed-m-17[dir=rtl]{margin-right:340px;margin-left:auto}.next-col-offset-fixed-m-18[dir=rtl]{margin-right:360px;margin-left:auto}.next-col-offset-fixed-m-19[dir=rtl]{margin-right:380px;margin-left:auto}.next-col-offset-fixed-m-20[dir=rtl]{margin-right:400px;margin-left:auto}.next-col-offset-fixed-m-21[dir=rtl]{margin-right:420px;margin-left:auto}.next-col-offset-fixed-m-22[dir=rtl]{margin-right:440px;margin-left:auto}.next-col-offset-fixed-m-23[dir=rtl]{margin-right:460px;margin-left:auto}.next-col-offset-fixed-m-24[dir=rtl]{margin-right:480px;margin-left:auto}.next-col-offset-fixed-m-25[dir=rtl]{margin-right:500px;margin-left:auto}.next-col-offset-fixed-m-26[dir=rtl]{margin-right:520px;margin-left:auto}.next-col-offset-fixed-m-27[dir=rtl]{margin-right:540px;margin-left:auto}.next-col-offset-fixed-m-28[dir=rtl]{margin-right:560px;margin-left:auto}.next-col-offset-fixed-m-29[dir=rtl]{margin-right:580px;margin-left:auto}.next-col-offset-fixed-m-30[dir=rtl]{margin-right:600px;margin-left:auto}.next-col-offset-fixed-l-1[dir=rtl]{margin-right:20px;margin-left:auto}.next-col-offset-fixed-l-2[dir=rtl]{margin-right:40px;margin-left:auto}.next-col-offset-fixed-l-3[dir=rtl]{margin-right:60px;margin-left:auto}.next-col-offset-fixed-l-4[dir=rtl]{margin-right:80px;margin-left:auto}.next-col-offset-fixed-l-5[dir=rtl]{margin-right:100px;margin-left:auto}.next-col-offset-fixed-l-6[dir=rtl]{margin-right:120px;margin-left:auto}.next-col-offset-fixed-l-7[dir=rtl]{margin-right:140px;margin-left:auto}.next-col-offset-fixed-l-8[dir=rtl]{margin-right:160px;margin-left:auto}.next-col-offset-fixed-l-9[dir=rtl]{margin-right:180px;margin-left:auto}.next-col-offset-fixed-l-10[dir=rtl]{margin-right:200px;margin-left:auto}.next-col-offset-fixed-l-11[dir=rtl]{margin-right:220px;margin-left:auto}.next-col-offset-fixed-l-12[dir=rtl]{margin-right:240px;margin-left:auto}.next-col-offset-fixed-l-13[dir=rtl]{margin-right:260px;margin-left:auto}.next-col-offset-fixed-l-14[dir=rtl]{margin-right:280px;margin-left:auto}.next-col-offset-fixed-l-15[dir=rtl]{margin-right:300px;margin-left:auto}.next-col-offset-fixed-l-16[dir=rtl]{margin-right:320px;margin-left:auto}.next-col-offset-fixed-l-17[dir=rtl]{margin-right:340px;margin-left:auto}.next-col-offset-fixed-l-18[dir=rtl]{margin-right:360px;margin-left:auto}.next-col-offset-fixed-l-19[dir=rtl]{margin-right:380px;margin-left:auto}.next-col-offset-fixed-l-20[dir=rtl]{margin-right:400px;margin-left:auto}.next-col-offset-fixed-l-21[dir=rtl]{margin-right:420px;margin-left:auto}.next-col-offset-fixed-l-22[dir=rtl]{margin-right:440px;margin-left:auto}.next-col-offset-fixed-l-23[dir=rtl]{margin-right:460px;margin-left:auto}.next-col-offset-fixed-l-24[dir=rtl]{margin-right:480px;margin-left:auto}.next-col-offset-fixed-l-25[dir=rtl]{margin-right:500px;margin-left:auto}.next-col-offset-fixed-l-26[dir=rtl]{margin-right:520px;margin-left:auto}.next-col-offset-fixed-l-27[dir=rtl]{margin-right:540px;margin-left:auto}.next-col-offset-fixed-l-28[dir=rtl]{margin-right:560px;margin-left:auto}.next-col-offset-fixed-l-29[dir=rtl]{margin-right:580px;margin-left:auto}.next-col-offset-fixed-l-30[dir=rtl]{margin-right:600px;margin-left:auto}.next-col-offset-fixed-xl-1[dir=rtl]{margin-right:20px;margin-left:auto}.next-col-offset-fixed-xl-2[dir=rtl]{margin-right:40px;margin-left:auto}.next-col-offset-fixed-xl-3[dir=rtl]{margin-right:60px;margin-left:auto}.next-col-offset-fixed-xl-4[dir=rtl]{margin-right:80px;margin-left:auto}.next-col-offset-fixed-xl-5[dir=rtl]{margin-right:100px;margin-left:auto}.next-col-offset-fixed-xl-6[dir=rtl]{margin-right:120px;margin-left:auto}.next-col-offset-fixed-xl-7[dir=rtl]{margin-right:140px;margin-left:auto}.next-col-offset-fixed-xl-8[dir=rtl]{margin-right:160px;margin-left:auto}.next-col-offset-fixed-xl-9[dir=rtl]{margin-right:180px;margin-left:auto}.next-col-offset-fixed-xl-10[dir=rtl]{margin-right:200px;margin-left:auto}.next-col-offset-fixed-xl-11[dir=rtl]{margin-right:220px;margin-left:auto}.next-col-offset-fixed-xl-12[dir=rtl]{margin-right:240px;margin-left:auto}.next-col-offset-fixed-xl-13[dir=rtl]{margin-right:260px;margin-left:auto}.next-col-offset-fixed-xl-14[dir=rtl]{margin-right:280px;margin-left:auto}.next-col-offset-fixed-xl-15[dir=rtl]{margin-right:300px;margin-left:auto}.next-col-offset-fixed-xl-16[dir=rtl]{margin-right:320px;margin-left:auto}.next-col-offset-fixed-xl-17[dir=rtl]{margin-right:340px;margin-left:auto}.next-col-offset-fixed-xl-18[dir=rtl]{margin-right:360px;margin-left:auto}.next-col-offset-fixed-xl-19[dir=rtl]{margin-right:380px;margin-left:auto}.next-col-offset-fixed-xl-20[dir=rtl]{margin-right:400px;margin-left:auto}.next-col-offset-fixed-xl-21[dir=rtl]{margin-right:420px;margin-left:auto}.next-col-offset-fixed-xl-22[dir=rtl]{margin-right:440px;margin-left:auto}.next-col-offset-fixed-xl-23[dir=rtl]{margin-right:460px;margin-left:auto}.next-col-offset-fixed-xl-24[dir=rtl]{margin-right:480px;margin-left:auto}.next-col-offset-fixed-xl-25[dir=rtl]{margin-right:500px;margin-left:auto}.next-col-offset-fixed-xl-26[dir=rtl]{margin-right:520px;margin-left:auto}.next-col-offset-fixed-xl-27[dir=rtl]{margin-right:540px;margin-left:auto}.next-col-offset-fixed-xl-28[dir=rtl]{margin-right:560px;margin-left:auto}.next-col-offset-fixed-xl-29[dir=rtl]{margin-right:580px;margin-left:auto}.next-col-offset-fixed-xl-30[dir=rtl]{margin-right:600px;margin-left:auto}.next-form,.next-form *,.next-form :after,.next-form :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-form-item{margin-bottom:16px}.next-form-item.has-error .next-form-item-help{color:#ff3000}.next-form-item .next-form-item-label,.next-form-item .next-form-text-align,.next-form-item p{line-height:28px}.next-form-item .next-form-text-align,.next-form-item p{margin:0}.next-form-item .next-checkbox-group,.next-form-item .next-checkbox-wrapper,.next-form-item .next-radio-group,.next-form-item .next-radio-wrapper{line-height:24px}.next-form-item .next-form-item-label{font-size:12px}.next-form-item.next-large{margin-bottom:20px}.next-form-item.next-large .next-form-item-label,.next-form-item.next-large .next-form-text-align,.next-form-item.next-large p{line-height:40px}.next-form-item.next-large .next-checkbox-group,.next-form-item.next-large .next-checkbox-wrapper,.next-form-item.next-large .next-radio-group,.next-form-item.next-large .next-radio-wrapper{line-height:39px}.next-form-item.next-large .next-switch{margin-top:7px}.next-form-item.next-large .next-form-item-label{font-size:16px}.next-form-item.next-small{margin-bottom:12px}.next-form-item.next-small .next-checkbox-group,.next-form-item.next-small .next-checkbox-wrapper,.next-form-item.next-small .next-form-item-label,.next-form-item.next-small .next-form-text-align,.next-form-item.next-small .next-radio-group,.next-form-item.next-small .next-radio-wrapper,.next-form-item.next-small p{line-height:20px}.next-form-item.next-small .next-form-item-label{font-size:12px}.next-form-item.next-top>.next-form-item-label{margin-bottom:2px}.next-form-item.next-inset .next-form-item-label{padding-right:0;padding-left:0;line-height:inherit}.next-form-item-control .next-form-text-align{margin:0}.next-form-item-control>.next-input,.next-form-item-control>.next-input-group{width:100%}.next-form-item-label{display:inline-block;vertical-align:top;color:#666;text-align:right;padding-right:12px}.next-form-item-label label[required]:before{margin-right:4px;content:"*";color:#ff3000}.next-form-item-label.next-left{text-align:left}.next-form-item-label.next-left>label[required]:before{display:none}.next-form-item-label.next-left>label[required]:after{margin-left:4px;content:"*";color:#ff3000}.next-form-item-help{margin-top:4px;font-size:12px;line-height:1.5;color:#999}.next-form.next-inline .next-form-item{display:inline-block;vertical-align:top}.next-form.next-inline .next-form-item.next-left .next-form-item-control{display:inline-block;vertical-align:top;line-height:0}.next-form.next-inline .next-form-item:not(:last-child){margin-right:20px}.next-form.next-inline .next-form-item.next-large:not(:last-child){margin-right:24px}.next-form.next-inline .next-form-item.next-small:not(:last-child){margin-right:16px}@media screen and (min-width:0\0) and (min-resolution:0.001dpcm){.next-form-item.next-left>.next-form-item-label,.next-form.next-inline .next-form-item.next-left .next-form-item-control{display:table-cell}}.next-form[dir=rtl] .next-form-item-label{text-align:left;padding-left:12px;padding-right:0}.next-form[dir=rtl].next-inline .next-form-item:not(:last-child){margin-left:20px;margin-right:0}.next-form[dir=rtl].next-inline .next-form-item.next-large:not(:last-child){margin-left:24px;margin-right:0}.next-form[dir=rtl].next-inline .next-form-item.next-small:not(:last-child){margin-left:16px;margin-right:0}.next-loading-fusion-reactor[dir=rtl]{-webkit-animation-name:nextVectorRouteRTL;animation-name:nextVectorRouteRTL}@-webkit-keyframes nextVectorRouteRTL{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}5%{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}25%{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}30%{-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}50%{-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}55%{-webkit-transform:rotate(-270deg);-ms-transform:rotate(-270deg);transform:rotate(-270deg)}75%{-webkit-transform:rotate(-270deg);-ms-transform:rotate(-270deg);transform:rotate(-270deg)}80%{-webkit-transform:rotate(-1turn);-ms-transform:rotate(-1turn);transform:rotate(-1turn)}to{-webkit-transform:rotate(-1turn);-ms-transform:rotate(-1turn);transform:rotate(-1turn)}}@keyframes nextVectorRouteRTL{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}5%{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}25%{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}30%{-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}50%{-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}55%{-webkit-transform:rotate(-270deg);-ms-transform:rotate(-270deg);transform:rotate(-270deg)}75%{-webkit-transform:rotate(-270deg);-ms-transform:rotate(-270deg);transform:rotate(-270deg)}80%{-webkit-transform:rotate(-1turn);-ms-transform:rotate(-1turn);transform:rotate(-1turn)}to{-webkit-transform:rotate(-1turn);-ms-transform:rotate(-1turn);transform:rotate(-1turn)}}.next-loading{position:relative}.next-loading.next-open{pointer-events:none}.next-loading .next-loading-component{opacity:.7;-webkit-filter:blur(1px);filter:blur(1px);-webkit-filter:"progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false)";filter:"progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false)";position:relative;pointer-events:none}.next-loading-masker{position:absolute;top:0;bottom:0;left:0;right:0;z-index:99;opacity:.2;background:#fff}.next-loading-inline{display:inline-block}.next-loading-tip{display:block;position:absolute;top:50%;left:50%;z-index:4;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-align:center}.next-loading-tip-fullscreen{top:inherit;left:inherit;-webkit-transform:inherit;-ms-transform:inherit;transform:inherit}.next-loading-tip-placeholder{display:none}.next-loading-right-tip .next-loading-indicator{display:inline-block}.next-loading-right-tip .next-loading-tip-content{position:absolute;display:block;top:50%;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.next-loading-right-tip .next-loading-tip-placeholder{display:inline-block;visibility:hidden;margin-left:1em}.next-loading-fusion-reactor{display:inline-block;width:48px;height:48px;position:relative;margin:0;-webkit-animation-duration:5.6s;animation-duration:5.6s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:nextVectorRoute;animation-name:nextVectorRoute}.next-loading-fusion-reactor .next-loading-dot{position:absolute;margin:auto;width:12px;height:12px;border-radius:50%;background:#5584ff;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-duration:1.4s;animation-duration:1.4s}.next-loading-fusion-reactor .next-loading-dot:first-child{top:0;bottom:0;left:0;-webkit-animation-name:nextVectorDotsX;animation-name:nextVectorDotsX}.next-loading-fusion-reactor .next-loading-dot:nth-child(2){left:0;right:0;top:0;opacity:.8;-webkit-animation-name:nextVectorDotsY;animation-name:nextVectorDotsY}.next-loading-fusion-reactor .next-loading-dot:nth-child(3){top:0;bottom:0;right:0;opacity:.6;-webkit-animation-name:nextVectorDotsXR;animation-name:nextVectorDotsXR}.next-loading-fusion-reactor .next-loading-dot:nth-child(4){left:0;right:0;bottom:0;opacity:.2;-webkit-animation-name:nextVectorDotsYR;animation-name:nextVectorDotsYR}.next-loading-medium-fusion-reactor{width:32px;height:32px}.next-loading-medium-fusion-reactor .next-loading-dot{width:8px;height:8px}.next-loading-medium-fusion-reactor .next-loading-dot:first-child{-webkit-animation-name:nextVectorDotsX-medium;animation-name:nextVectorDotsX-medium}.next-loading-medium-fusion-reactor .next-loading-dot:nth-child(2){-webkit-animation-name:nextVectorDotsY-medium;animation-name:nextVectorDotsY-medium}.next-loading-medium-fusion-reactor .next-loading-dot:nth-child(3){-webkit-animation-name:nextVectorDotsXR-medium;animation-name:nextVectorDotsXR-medium}.next-loading-medium-fusion-reactor .next-loading-dot:nth-child(4){-webkit-animation-name:nextVectorDotsYR-medium;animation-name:nextVectorDotsYR-medium}@-webkit-keyframes nextVectorRoute{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}5%{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}25%{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}30%{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}50%{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}55%{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}75%{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}80%{-webkit-transform:rotate(1turn);-ms-transform:rotate(1turn);transform:rotate(1turn)}to{-webkit-transform:rotate(1turn);-ms-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes nextVectorRoute{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}5%{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}25%{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}30%{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}50%{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}55%{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}75%{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}80%{-webkit-transform:rotate(1turn);-ms-transform:rotate(1turn);transform:rotate(1turn)}to{-webkit-transform:rotate(1turn);-ms-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes nextVectorDotsYR{25%{bottom:0}45%,50%{bottom:16.8px;height:14.4px;width:14.4px}90%{bottom:0;height:12px;width:12px}}@keyframes nextVectorDotsYR{25%{bottom:0}45%,50%{bottom:16.8px;height:14.4px;width:14.4px}90%{bottom:0;height:12px;width:12px}}@-webkit-keyframes nextVectorDotsY{25%{top:0}45%,50%{top:16.8px;height:14.4px;width:14.4px}90%{top:0;height:12px;width:12px}}@keyframes nextVectorDotsY{25%{top:0}45%,50%{top:16.8px;height:14.4px;width:14.4px}90%{top:0;height:12px;width:12px}}@-webkit-keyframes nextVectorDotsX{25%{left:0}45%,50%{left:16.8px;width:14.4px;height:14.4px}90%{left:0;height:12px;width:12px}}@keyframes nextVectorDotsX{25%{left:0}45%,50%{left:16.8px;width:14.4px;height:14.4px}90%{left:0;height:12px;width:12px}}@-webkit-keyframes nextVectorDotsXR{25%{right:0}45%,50%{right:16.8px;width:14.4px;height:14.4px}90%{right:0;height:12px;width:12px}}@keyframes nextVectorDotsXR{25%{right:0}45%,50%{right:16.8px;width:14.4px;height:14.4px}90%{right:0;height:12px;width:12px}}@-webkit-keyframes nextVectorDotsYR-medium{25%{bottom:0}45%,50%{bottom:11.2px;height:9.6px;width:9.6px}90%{bottom:0;height:8px;width:8px}}@keyframes nextVectorDotsYR-medium{25%{bottom:0}45%,50%{bottom:11.2px;height:9.6px;width:9.6px}90%{bottom:0;height:8px;width:8px}}@-webkit-keyframes nextVectorDotsY-medium{25%{top:0}45%,50%{top:11.2px;height:9.6px;width:9.6px}90%{top:0;height:8px;width:8px}}@keyframes nextVectorDotsY-medium{25%{top:0}45%,50%{top:11.2px;height:9.6px;width:9.6px}90%{top:0;height:8px;width:8px}}@-webkit-keyframes nextVectorDotsX-medium{25%{left:0}45%,50%{left:11.2px;width:9.6px;height:9.6px}90%{left:0;height:8px;width:8px}}@keyframes nextVectorDotsX-medium{25%{left:0}45%,50%{left:11.2px;width:9.6px;height:9.6px}90%{left:0;height:8px;width:8px}}@-webkit-keyframes nextVectorDotsXR-medium{25%{right:0}45%,50%{right:11.2px;width:9.6px;height:9.6px}90%{right:0;height:8px;width:8px}}@keyframes nextVectorDotsXR-medium{25%{right:0}45%,50%{right:11.2px;width:9.6px;height:9.6px}90%{right:0;height:8px;width:8px}}.next-menu-btn{display:inline-block;-webkit-box-shadow:none;box-shadow:none}.next-menu-btn .next-icon{-webkit-transition:-webkit-transform .3s cubic-bezier(.645,.045,.355,1);transition:-webkit-transform .3s cubic-bezier(.645,.045,.355,1);transition:transform .3s cubic-bezier(.645,.045,.355,1);transition:transform .3s cubic-bezier(.645,.045,.355,1),-webkit-transform .3s cubic-bezier(.645,.045,.355,1)}.next-menu-btn.next-expand .next-menu-btn-arrow{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu-btn.next-btn-normal .next-menu-btn-arrow{color:#999}.next-menu-btn.next-btn-secondary .next-menu-btn-arrow{color:#5584ff}.next-menu-btn.next-btn-primary .next-menu-btn-arrow{color:#fff}.next-menu-btn.next-btn-text.next-btn-normal .next-menu-btn-arrow{color:#333}.next-menu-btn.next-btn-text.next-btn-primary .next-menu-btn-arrow{color:#5584ff}.next-menu-btn.next-btn-ghost.next-btn-light .next-menu-btn-arrow{color:#333}.next-menu-btn.next-btn-ghost.next-btn-dark .next-menu-btn-arrow{color:#fff}.next-menu-btn.disabled .next-menu-btn-arrow,.next-menu-btn.next-btn-text.disabled .next-menu-btn-arrow,.next-menu-btn.next-btn-text[disabled] .next-menu-btn-arrow,.next-menu-btn[disabled] .next-menu-btn-arrow{color:#ccc}.next-menu-btn[disabled].next-btn-ghost.next-btn-dark .next-menu-btn-arrow{color:hsla(0,0%,100%,.4)}.next-menu-btn[disabled].next-btn-ghost.next-btn-light .next-menu-btn-arrow{color:rgba(0,0,0,.1)}.next-nav{min-width:auto;padding:0;border-radius:0}.next-nav,.next-nav *,.next-nav :after,.next-nav :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-nav-icon.next-icon{margin-right:4px;font-weight:inherit}.next-nav-icon.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-nav-icon-placeholder{display:inline-block;width:16px;height:16px;margin-left:2px;margin-right:2px}.next-nav-group-label{height:40px;line-height:40px;font-size:16px}.next-nav-item .next-menu-item-text>span,.next-nav-item .next-nav-group-label>span{opacity:1;-webkit-transition:opacity .3s;transition:opacity .3s}.next-nav-item a{text-decoration:none;color:inherit}.next-nav-item.next-focused .next-menu-hoz-icon-arrow.next-icon,.next-nav-item.next-focused .next-menu-icon-arrow.next-icon,.next-nav-item .next-menu-hoz-icon-arrow.next-icon,.next-nav-item .next-menu-icon-arrow.next-icon,.next-nav-item.next-opened .next-menu-hoz-icon-arrow.next-icon,.next-nav-item.next-opened .next-menu-icon-arrow.next-icon,.next-nav-item.next-selected .next-menu-hoz-icon-arrow.next-icon,.next-nav-item.next-selected .next-menu-icon-arrow.next-icon,.next-nav-item:hover .next-menu-hoz-icon-arrow.next-icon,.next-nav-item:hover .next-menu-icon-arrow.next-icon{color:inherit;top:2px;-webkit-transform-origin:center 47%;-ms-transform-origin:center 47%;transform-origin:center 47%}.next-nav.next-active .next-nav-item:before{position:absolute;-webkit-transition:all .4s cubic-bezier(.23,1,.32,1);transition:all .4s cubic-bezier(.23,1,.32,1);content:""}.next-nav.next-hoz{height:44px;line-height:42px;font-size:12px}.next-nav.next-hoz .next-menu-item{margin-left:0;margin-right:0;padding:0 20px;border-radius:0}.next-nav.next-hoz .next-menu-item:before{height:2px}.next-nav.next-hoz .next-menu-item:not(:first-child),.next-nav.next-hoz .next-menu-sub-menu-wrapper:not(:first-child)>.next-menu-item{margin-top:0}.next-nav.next-hoz .next-menu-item:not(:last-child),.next-nav.next-hoz .next-menu-sub-menu-wrapper:not(:last-child)>.next-menu-item{margin-bottom:0}.next-nav.next-hoz .next-menu-item-inner{height:42px;font-size:12px}.next-nav.next-hoz .next-nav-group-label .next-menu-item-inner{height:40px;line-height:40px;font-size:16px}.next-nav.next-hoz .next-menu-header{float:left;height:42px}.next-nav.next-hoz .next-menu-footer{float:right;height:42px}.next-nav.next-hoz .next-nav-item:before{width:0;left:50%}.next-nav.next-hoz.next-top .next-nav-item:before{top:-1px}.next-nav.next-hoz.next-bottom .next-nav-item:before{bottom:-1px}.next-nav.next-hoz .next-selected.next-nav-item:before{width:100%;left:0}.next-nav.next-ver{-webkit-transition:width .3s;transition:width .3s;line-height:40px;font-size:12px}.next-nav.next-ver .next-menu-item{margin-left:0;margin-right:0;padding:0 20px;border-radius:0}.next-nav.next-ver .next-menu-item:before{width:2px}.next-nav.next-ver .next-menu-item:not(:first-child),.next-nav.next-ver .next-menu-sub-menu-wrapper:not(:first-child)>.next-menu-item{margin-top:0}.next-nav.next-ver .next-menu-item:not(:last-child),.next-nav.next-ver .next-menu-sub-menu-wrapper:not(:last-child)>.next-menu-item{margin-bottom:0}.next-nav.next-ver .next-menu-item-inner{height:40px;font-size:12px}.next-nav.next-ver .next-nav-group-label .next-menu-item-inner{height:40px;line-height:40px;font-size:16px}.next-nav.next-ver>.next-menu-item:first-child,.next-nav.next-ver>.next-menu-sub-menu-wrapper:first-child>.next-menu-item{margin-top:0}.next-nav.next-ver>.next-menu-item:last-child,.next-nav.next-ver>.next-menu-sub-menu-wrapper:last-child>.next-menu-item{margin-bottom:0}.next-nav.next-ver .next-menu-sub-menu .next-menu-item-inner{height:40px;line-height:40px;font-size:12px}.next-nav.next-ver .next-nav-item:before{height:0;top:50%}.next-nav.next-ver.next-left .next-nav-item:before{left:-1px}.next-nav.next-ver.next-right .next-nav-item:before{right:-1px}.next-nav.next-ver .next-selected.next-nav-item:before{height:100%;top:0}.next-nav.next-primary{border-width:0;background-color:#333;border-color:#333;color:#fff;font-weight:400;-webkit-box-shadow:2px 2px 4px 0 rgba(0,0,0,.12);box-shadow:2px 2px 4px 0 rgba(0,0,0,.12)}.next-nav.next-primary.next-hoz{line-height:44px}.next-nav.next-primary.next-hoz .next-menu-footer,.next-nav.next-primary.next-hoz .next-menu-header,.next-nav.next-primary.next-hoz .next-menu-item-inner{height:44px}.next-nav.next-primary.next-hoz.next-top .next-nav-item:before{top:0}.next-nav.next-primary.next-hoz.next-bottom .next-nav-item:before{bottom:0}.next-nav.next-primary.next-ver.next-left .next-nav-item:before{left:0}.next-nav.next-primary.next-ver.next-right .next-nav-item:before{right:0}.next-nav.next-primary .next-nav-item.next-menu-item{background-color:#333;color:#fff}.next-nav.next-primary .next-nav-item.next-menu-item.next-focused,.next-nav.next-primary .next-nav-item.next-menu-item:hover{background-color:#000;color:#fff}.next-nav.next-primary .next-nav-item.next-menu-item.next-selected{background-color:#000;color:#fff;font-weight:700}.next-nav.next-primary .next-nav-item.next-menu-item.next-opened{background-color:#000;color:#fff}.next-nav.next-primary .next-nav-item.next-menu-item:before{background-color:#5584ff}.next-nav.next-primary .next-menu-sub-menu .next-menu-item.next-opened{background-color:#000;color:#fff}.next-nav.next-primary .next-nav-group-label{color:#999;font-weight:400}.next-nav.next-primary .next-menu-sub-menu .next-menu-item{background-color:#333;color:#fff;font-weight:400}.next-nav.next-primary .next-menu-sub-menu .next-menu-item.next-focused,.next-nav.next-primary .next-menu-sub-menu .next-menu-item.next-selected,.next-nav.next-primary .next-menu-sub-menu .next-menu-item:hover{background-color:#000;color:#fff}.next-nav.next-secondary{border-width:0;background-color:#5584ff;border-color:#5584ff;color:#fff;font-weight:400;-webkit-box-shadow:2px 2px 4px 0 rgba(0,0,0,.12);box-shadow:2px 2px 4px 0 rgba(0,0,0,.12)}.next-nav.next-secondary.next-hoz{line-height:44px}.next-nav.next-secondary.next-hoz .next-menu-footer,.next-nav.next-secondary.next-hoz .next-menu-header,.next-nav.next-secondary.next-hoz .next-menu-item-inner{height:44px}.next-nav.next-secondary.next-hoz.next-top .next-nav-item:before{top:0}.next-nav.next-secondary.next-hoz.next-bottom .next-nav-item:before{bottom:0}.next-nav.next-secondary.next-ver.next-left .next-nav-item:before{left:0}.next-nav.next-secondary.next-ver.next-right .next-nav-item:before{right:0}.next-nav.next-secondary .next-nav-item.next-menu-item{background-color:#5584ff;color:#fff}.next-nav.next-secondary .next-nav-item.next-menu-item.next-focused,.next-nav.next-secondary .next-nav-item.next-menu-item:hover{background-color:#3e71f7;color:#fff}.next-nav.next-secondary .next-nav-item.next-menu-item.next-selected{background-color:#3e71f7;color:#fff;font-weight:700}.next-nav.next-secondary .next-nav-item.next-menu-item.next-opened{background-color:#3e71f7;color:#fff}.next-nav.next-secondary .next-nav-item.next-menu-item:before{background-color:#3e71f7}.next-nav.next-secondary .next-menu-sub-menu .next-menu-item.next-opened{background-color:#3e71f7;color:#fff}.next-nav.next-secondary .next-nav-group-label{color:#fff;font-weight:400}.next-nav.next-secondary .next-menu-sub-menu .next-menu-item{background-color:#5584ff;color:#fff;font-weight:400}.next-nav.next-secondary .next-menu-sub-menu .next-menu-item.next-focused,.next-nav.next-secondary .next-menu-sub-menu .next-menu-item.next-selected,.next-nav.next-secondary .next-menu-sub-menu .next-menu-item:hover{background-color:#3e71f7;color:#fff}.next-nav.next-normal{border-color:#dcdee3;font-weight:400;-webkit-box-shadow:2px 2px 4px 0 rgba(0,0,0,.12);box-shadow:2px 2px 4px 0 rgba(0,0,0,.12)}.next-nav.next-normal,.next-nav.next-normal .next-nav-item.next-menu-item{background-color:#fff;color:#333}.next-nav.next-normal .next-nav-item.next-menu-item.next-focused,.next-nav.next-normal .next-nav-item.next-menu-item:hover{background-color:#fff;color:#5584ff}.next-nav.next-normal .next-nav-item.next-menu-item.next-selected{background-color:#f2f3f7;color:#5584ff;font-weight:700}.next-nav.next-normal .next-nav-item.next-menu-item.next-opened{background-color:#f2f3f7;color:#5584ff}.next-nav.next-normal .next-nav-item.next-menu-item:before{background-color:#5584ff}.next-nav.next-normal .next-menu-sub-menu .next-menu-item.next-opened{background-color:#f2f3f7;color:#5584ff}.next-nav.next-normal .next-nav-group-label{color:#999;font-weight:400}.next-nav.next-normal .next-menu-sub-menu .next-menu-item{background-color:#fff;color:#333;font-weight:400}.next-nav.next-normal .next-menu-sub-menu .next-menu-item.next-focused,.next-nav.next-normal .next-menu-sub-menu .next-menu-item.next-selected,.next-nav.next-normal .next-menu-sub-menu .next-menu-item:hover{background-color:#f2f3f7;color:#5584ff}.next-nav.next-line{background-color:transparent;border-color:#dcdee3;color:#333;font-weight:400;-webkit-box-shadow:none;box-shadow:none}.next-nav.next-line.next-hoz{border-right-color:transparent}.next-nav.next-line.next-hoz,.next-nav.next-line.next-ver{border-top-color:transparent;border-left-color:transparent}.next-nav.next-line.next-ver{border-bottom-color:transparent}.next-nav.next-line .next-nav-item.next-menu-item{background-color:transparent;color:#333}.next-nav.next-line .next-nav-item.next-menu-item.next-focused,.next-nav.next-line .next-nav-item.next-menu-item:hover{background-color:transparent;color:#5584ff}.next-nav.next-line .next-nav-item.next-menu-item.next-selected{background-color:transparent;color:#5584ff;font-weight:700}.next-nav.next-line .next-nav-item.next-menu-item.next-opened{background-color:transparent;color:#5584ff}.next-nav.next-line .next-nav-item.next-menu-item:before{background-color:#5584ff}.next-nav.next-line .next-menu-sub-menu .next-menu-item.next-opened{background-color:transparent;color:#5584ff}.next-nav.next-line .next-nav-group-label{color:#999;font-weight:400}.next-nav.next-line .next-menu-sub-menu .next-menu-item{background-color:transparent;color:#333;font-weight:400}.next-nav.next-line .next-menu-sub-menu .next-menu-item.next-focused,.next-nav.next-line .next-menu-sub-menu .next-menu-item.next-selected,.next-nav.next-line .next-menu-sub-menu .next-menu-item:hover{background-color:transparent;color:#5584ff}.next-nav.next-icon-only .next-menu-item-inner{text-overflow:clip}.next-nav.next-icon-only .next-menu-item-text>span,.next-nav.next-icon-only .next-nav-group-label>.next-menu-item-inner>span{opacity:0}.next-nav.next-icon-only.next-normal .next-nav-icon.next-icon{margin-left:1px;margin-right:1px}.next-nav.next-icon-only.next-normal .next-nav-icon.next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-nav.next-icon-only.next-primary .next-nav-icon.next-icon{margin-left:2px;margin-right:2px}.next-nav.next-icon-only.next-primary .next-nav-icon.next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-nav.next-icon-only.next-secondary .next-nav-icon.next-icon{margin-left:2px;margin-right:2px}.next-nav.next-icon-only.next-secondary .next-nav-icon.next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-nav.next-icon-only .next-nav-icon-only-arrow.next-icon{margin-left:1px;-webkit-transition:all .3s ease;transition:all .3s ease;-webkit-transform-origin:center 46%;-ms-transform-origin:center 46%;transform-origin:center 46%}.next-nav.next-icon-only .next-nav-icon-only-arrow.next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-nav.next-icon-only .next-nav-item.next-opened .next-nav-icon-only-arrow.next-icon-arrow-down{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);margin-left:1px}.next-nav.next-icon-only .next-nav-item.next-opened .next-nav-icon-only-arrow.next-icon-arrow-down:before{width:16px;font-size:16px;line-height:inherit}.next-nav.next-icon-only .next-nav-item.next-selected .next-nav-icon.next-icon{-webkit-animation:pulse .3s cubic-bezier(.23,1,.32,1);animation:pulse .3s cubic-bezier(.23,1,.32,1)}.next-nav.next-icon-only .next-menu-hoz-icon-arrow,.next-nav.next-icon-only .next-menu-icon-arrow{display:none}.next-nav-embeddable.next-normal,.next-nav-embeddable.next-primary,.next-nav-embeddable.next-secondary{height:100%;background:initial;-webkit-box-shadow:none;box-shadow:none;border:none}.next-nav-embeddable.next-normal .next-menu-sub-menu .next-menu-item,.next-nav-embeddable.next-normal .next-nav-item.next-menu-item,.next-nav-embeddable.next-primary .next-menu-sub-menu .next-menu-item,.next-nav-embeddable.next-primary .next-nav-item.next-menu-item,.next-nav-embeddable.next-secondary .next-menu-sub-menu .next-menu-item,.next-nav-embeddable.next-secondary .next-nav-item.next-menu-item{background:initial}.next-nav-embeddable.next-nav.next-hoz .next-menu-item-inner,.next-nav-embeddable.next-nav.next-hoz .next-menu-sub-menu .next-menu-item,.next-nav-embeddable.next-nav.next-hoz .next-nav-item.next-menu-item{height:100%}.next-nav[dir=rtl] .next-nav-icon.next-icon{margin-left:4px;margin-right:0}.next-nav[dir=rtl] .next-nav-icon.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-nav[dir=rtl].next-hoz .next-menu-header{float:right}.next-nav[dir=rtl].next-hoz .next-menu-footer{float:left}.next-nav[dir=rtl].next-hoz .next-nav-item:before{width:0;left:50%}.next-nav[dir=rtl].next-hoz .next-selected.next-nav-item:before{width:100%;left:auto;right:0}.next-nav[dir=rtl].next-ver.next-left .next-nav-item:before{right:-1px;left:auto}.next-nav[dir=rtl].next-ver.next-right .next-nav-item:before{left:-1px;right:auto}.next-nav[dir=rtl].next-primary.next-ver.next-left .next-nav-item:before{right:0;left:auto}.next-nav[dir=rtl].next-primary.next-ver.next-right .next-nav-item:before{left:0;right:auto}.next-nav[dir=rtl].next-secondary.next-ver.next-left .next-nav-item:before{right:0;left:auto}.next-nav[dir=rtl].next-secondary.next-ver.next-right .next-nav-item:before{left:0;right:auto}.next-nav[dir=rtl] .next-nav.next-line.next-ver{border-top-color:transparent;border-right-color:transparent;border-left-color:none;border-bottom-color:transparent}.next-nav[dir=rtl].next-icon-only .next-nav-icon-only-arrow.next-icon,.next-nav[dir=rtl].next-icon-only .next-nav-icon.next-icon,.next-nav[dir=rtl].next-icon-only .next-nav-item.next-opened .next-nav-icon-only-arrow.next-icon-arrow-down{margin-left:0;margin-right:1px}.next-nav[dir=rtl].next-icon-only .next-nav-icon-only-arrow.next-icon:before,.next-nav[dir=rtl].next-icon-only .next-nav-icon.next-icon:before,.next-nav[dir=rtl].next-icon-only .next-nav-item.next-opened .next-nav-icon-only-arrow.next-icon-arrow-down:before{width:16px;font-size:16px;line-height:inherit}.next-number-picker{display:inline-block}.next-number-picker,.next-number-picker *,.next-number-picker :after,.next-number-picker :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-number-picker .next-btn{padding:0!important;line-height:0!important;-webkit-box-shadow:none!important;box-shadow:none!important}.next-number-picker-normal{width:80px}.next-number-picker-normal .next-input{width:100%}.next-number-picker-normal .next-input input{padding-right:2px}.next-number-picker-normal .next-btn{display:block}.next-number-picker-normal .next-btn:hover{z-index:1}.next-number-picker-normal .next-btn:first-child{border-right:none;border-top:none;height:50%;border-top-left-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.next-number-picker-normal .next-btn:last-child{border-right:none;border-bottom:none;margin-top:-1px;height:calc(50% + 1px);border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:0}.next-number-picker-normal .next-number-picker-handler{opacity:0;-webkit-transition:opacity .24s linear .1s;transition:opacity .24s linear .1s;height:100%}.next-number-picker-normal:hover .next-number-picker-handler{opacity:1}.next-number-picker-normal .next-input.next-disabled .next-number-picker-handler{opacity:0}.next-number-picker-normal.next-medium .next-btn{width:20px}.next-number-picker-normal.next-medium .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-number-picker-normal.next-medium .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-number-picker-normal.next-medium .next-icon:before{width:16px;font-size:16px}}.next-number-picker-normal.next-large .next-btn{width:20px}.next-number-picker-normal.next-large .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-number-picker-normal.next-large .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-number-picker-normal.next-large .next-icon:before{width:16px;font-size:16px}}.next-number-picker-inline input{text-align:center}.next-number-picker-inline .next-input input{padding:0}.next-number-picker-inline.next-medium{width:100px}.next-number-picker-inline.next-medium .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-number-picker-inline.next-medium .next-btn:first-child{margin-right:2px}.next-number-picker-inline.next-medium .next-btn:last-child{margin-left:2px}.next-number-picker-inline.next-large{width:128px}.next-number-picker-inline.next-large .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-number-picker-inline.next-large .next-btn:first-child{margin-right:2px}.next-number-picker-inline.next-large .next-btn:last-child{margin-left:2px}.next-number-picker-inline .next-btn.next-medium{width:28px}.next-number-picker-inline .next-btn.next-large{width:40px}.next-number-picker-normal[dir=rtl] .next-btn:first-child{border-right:1px solid #c4c6cf;border-left:0;border-top-left-radius:3px;border-top-right-radius:0}.next-number-picker-normal[dir=rtl] .next-btn:last-child{border-right:1px solid #c4c6cf;border-left:0;border-bottom-left-radius:3px;border-bottom-right-radius:0}.next-number-picker-inline[dir=rtl] .next-btn{border-radius:0}.next-number-picker-inline[dir=rtl] .next-before .next-btn{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.next-number-picker-inline[dir=rtl] .next-after .next-btn{border-top-left-radius:3px!important;border-bottom-left-radius:3px!important}.next-pagination[dir=rtl] .next-pagination-total{margin-right:0;margin-left:16px}.next-pagination[dir=rtl] .next-pagination-jump-go{margin-left:0;margin-right:4px}.next-pagination[dir=rtl] .next-pagination-size-selector-title{margin-right:0;margin-left:4px}.next-pagination[dir=rtl] .next-pagination-size-selector-btn.next-btn-text+.next-pagination-size-selector-btn{border-left:none;border-right:1px solid #dcdee3}.next-pagination[dir=rtl] .next-pagination-pages+.next-pagination-size-selector,.next-pagination[dir=rtl] .next-pagination-size-selector+.next-pagination-pages{margin-left:0;margin-right:40px}.next-pagination[dir=rtl].next-start .next-pagination-pages{float:left}.next-pagination[dir=rtl].next-end .next-pagination-pages,.next-pagination[dir=rtl].next-start .next-pagination-size-selector{float:right}.next-pagination[dir=rtl].next-end .next-pagination-size-selector{float:left}.next-pagination[dir=rtl].next-small .next-pagination-list{margin:0 4px}.next-pagination[dir=rtl].next-small .next-pagination-total{line-height:20px;vertical-align:middle}.next-pagination[dir=rtl].next-small .next-pagination-item{padding:0 6px}.next-pagination[dir=rtl].next-small .next-pagination-item+.next-pagination-item{margin:0 4px 0 0}.next-pagination[dir=rtl].next-small .next-pagination-ellipsis{height:20px;line-height:20px;margin-left:8px;margin-right:8px}.next-pagination[dir=rtl].next-small .next-pagination-ellipsis:before{width:12px;font-size:12px;line-height:inherit}.next-pagination[dir=rtl].next-small .next-pagination-display,.next-pagination[dir=rtl].next-small .next-pagination-display em,.next-pagination[dir=rtl].next-small .next-pagination-jump-text{font-size:12px}.next-pagination[dir=rtl].next-small .next-pagination-jump-input{width:28px}.next-pagination[dir=rtl].next-small .next-pagination-size-selector-title{height:20px;line-height:20px;font-size:12px;vertical-align:middle}.next-pagination[dir=rtl].next-small .next-pagination-size-selector-btn{padding:0 8px}.next-pagination[dir=rtl].next-small .next-pagination-item.next-next:not([disabled]) i,.next-pagination[dir=rtl].next-small .next-pagination-item.next-prev:not([disabled]) i{color:#666}.next-pagination[dir=rtl].next-small .next-pagination-item:hover.next-next:not([disabled]) i,.next-pagination[dir=rtl].next-small .next-pagination-item:hover.next-prev:not([disabled]) i{color:#333}.next-pagination[dir=rtl].next-medium .next-pagination-list{margin:0 4px}.next-pagination[dir=rtl].next-medium .next-pagination-total{line-height:28px;vertical-align:middle}.next-pagination[dir=rtl].next-medium .next-pagination-item{padding:0 10px}.next-pagination[dir=rtl].next-medium .next-pagination-item+.next-pagination-item{margin:0 4px 0 0}.next-pagination[dir=rtl].next-medium .next-pagination-ellipsis{height:28px;line-height:28px;margin-left:8px;margin-right:8px}.next-pagination[dir=rtl].next-medium .next-pagination-ellipsis:before{width:12px;font-size:12px;line-height:inherit}.next-pagination[dir=rtl].next-medium .next-pagination-display,.next-pagination[dir=rtl].next-medium .next-pagination-display em,.next-pagination[dir=rtl].next-medium .next-pagination-jump-text{font-size:12px}.next-pagination[dir=rtl].next-medium .next-pagination-jump-input{width:36px}.next-pagination[dir=rtl].next-medium .next-pagination-size-selector-title{height:28px;line-height:28px;font-size:12px;vertical-align:middle}.next-pagination[dir=rtl].next-medium .next-pagination-size-selector-btn{padding:0 12px}.next-pagination[dir=rtl].next-medium .next-pagination-item.next-next:not([disabled]) i,.next-pagination[dir=rtl].next-medium .next-pagination-item.next-prev:not([disabled]) i{color:#666}.next-pagination[dir=rtl].next-medium .next-pagination-item:hover.next-next:not([disabled]) i,.next-pagination[dir=rtl].next-medium .next-pagination-item:hover.next-prev:not([disabled]) i{color:#333}.next-pagination[dir=rtl].next-large .next-pagination-list{margin:0 8px}.next-pagination[dir=rtl].next-large .next-pagination-total{line-height:40px;vertical-align:middle}.next-pagination[dir=rtl].next-large .next-pagination-item{padding:0 15px}.next-pagination[dir=rtl].next-large .next-pagination-item+.next-pagination-item{margin:0 8px 0 0}.next-pagination[dir=rtl].next-large .next-pagination-ellipsis{height:40px;line-height:40px;margin-left:8px;margin-right:8px}.next-pagination[dir=rtl].next-large .next-pagination-ellipsis:before{width:16px;font-size:16px;line-height:inherit}.next-pagination[dir=rtl].next-large .next-pagination-display,.next-pagination[dir=rtl].next-large .next-pagination-display em,.next-pagination[dir=rtl].next-large .next-pagination-jump-text{font-size:16px}.next-pagination[dir=rtl].next-large .next-pagination-jump-input{width:48px}.next-pagination[dir=rtl].next-large .next-pagination-size-selector-title{height:40px;line-height:40px;font-size:16px;vertical-align:middle}.next-pagination[dir=rtl].next-large .next-pagination-size-selector-btn{padding:0 16px}.next-pagination[dir=rtl].next-large .next-pagination-item.next-next:not([disabled]) i,.next-pagination[dir=rtl].next-large .next-pagination-item.next-prev:not([disabled]) i{color:#666}.next-pagination[dir=rtl].next-large .next-pagination-item:hover.next-next:not([disabled]) i,.next-pagination[dir=rtl].next-large .next-pagination-item:hover.next-prev:not([disabled]) i{color:#333}.next-pagination{font-size:0}.next-pagination,.next-pagination *,.next-pagination :after,.next-pagination :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-pagination:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-pagination-total{display:inline-block;font-size:14px;margin-right:16px}.next-pagination-pages{display:inline-block}.next-pagination-list{display:inline-block;vertical-align:top}.next-pagination .next-pagination-item{display:inline-block}.next-pagination .next-pagination-item.next-current,.next-pagination .next-pagination-item.next-current:focus,.next-pagination .next-pagination-item.next-current:hover{border-color:#5584ff;background:#5584ff;color:#fff}.next-pagination-ellipsis{display:inline-block;color:#999;vertical-align:top}.next-pagination-display{display:inline-block;margin:0 16px;color:#333;vertical-align:middle}.next-pagination-display em{font-style:normal;color:#5584ff}.next-pagination-jump-text{display:inline-block;vertical-align:middle;color:#999}.next-pagination-jump-input{margin:0 4px;vertical-align:top}.next-pagination-jump-go{margin-left:4px;vertical-align:top}.next-pagination-size-selector{display:inline-block;position:relative}.next-pagination-size-selector-title{margin-right:4px;color:#999}.next-pagination-size-selector-filter{display:inline-block;vertical-align:middle}.next-pagination-size-selector-dropdown{vertical-align:top;min-width:64px}.next-pagination-size-selector-popup{min-width:64px}.next-pagination-size-selector-btn.next-btn-text{height:auto;line-height:normal;color:#666;border-radius:0}.next-pagination-size-selector-btn.next-btn-text.next-current{color:#5584ff}.next-pagination-size-selector-btn.next-btn-text+.next-pagination-size-selector-btn{border-left:1px solid #dcdee3}.next-pagination-pages+.next-pagination-size-selector,.next-pagination-size-selector+.next-pagination-pages{margin-left:40px}.next-pagination.next-hide{display:none}.next-pagination.next-start .next-pagination-pages{float:right}.next-pagination.next-end .next-pagination-pages,.next-pagination.next-start .next-pagination-size-selector{float:left}.next-pagination.next-end .next-pagination-size-selector{float:right}.next-pagination.next-small .next-pagination-list{margin:0 4px}.next-pagination.next-small .next-pagination-total{line-height:20px;vertical-align:middle}.next-pagination.next-small .next-pagination-item{padding:0 6px}.next-pagination.next-small .next-pagination-item+.next-pagination-item{margin:0 0 0 4px}.next-pagination.next-small .next-pagination-ellipsis{height:20px;line-height:20px;margin-left:8px;margin-right:8px}.next-pagination.next-small .next-pagination-ellipsis:before{width:12px;font-size:12px;line-height:inherit}.next-pagination.next-small .next-pagination-display,.next-pagination.next-small .next-pagination-display em,.next-pagination.next-small .next-pagination-jump-text{font-size:12px}.next-pagination.next-small .next-pagination-jump-input{width:28px}.next-pagination.next-small .next-pagination-size-selector-title{height:20px;line-height:20px;font-size:12px;vertical-align:middle}.next-pagination.next-small .next-pagination-size-selector-btn{padding:0 8px}.next-pagination.next-small .next-pagination-item.next-next:not([disabled]) i,.next-pagination.next-small .next-pagination-item.next-prev:not([disabled]) i{color:#666}.next-pagination.next-small .next-pagination-item:hover.next-next:not([disabled]) i,.next-pagination.next-small .next-pagination-item:hover.next-prev:not([disabled]) i{color:#333}.next-pagination.next-small.next-arrow-only .next-pagination-item.next-next,.next-pagination.next-small.next-arrow-only .next-pagination-item.next-prev{width:20px;padding:0}.next-pagination.next-small.next-arrow-only .next-pagination-item.next-next .next-icon,.next-pagination.next-small.next-arrow-only .next-pagination-item.next-prev .next-icon{margin:0 auto}.next-pagination.next-small.next-arrow-prev-only .next-pagination-item.next-prev{width:20px;padding:0}.next-pagination.next-small.next-arrow-prev-only .next-pagination-item.next-prev .next-icon{margin:0 auto}.next-pagination.next-small.next-no-border .next-pagination-item.next-next,.next-pagination.next-small.next-no-border .next-pagination-item.next-prev{padding:0;border:none;background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.next-pagination.next-small.next-no-border .next-pagination-item.next-next .next-icon,.next-pagination.next-small.next-no-border .next-pagination-item.next-prev .next-icon{margin:0}.next-pagination.next-small.next-no-border .next-pagination-item.next-next:not([disabled]):hover i,.next-pagination.next-small.next-no-border .next-pagination-item.next-prev:not([disabled]):hover i{color:#5584ff}.next-pagination.next-small.next-no-border .next-pagination-display{margin:0 8px}.next-pagination.next-small.next-mini .next-pagination-item.next-prev{margin-right:4px}.next-pagination.next-small.next-mini .next-pagination-item.next-next{margin-left:4px}.next-pagination.next-medium .next-pagination-list{margin:0 4px}.next-pagination.next-medium .next-pagination-total{line-height:28px;vertical-align:middle}.next-pagination.next-medium .next-pagination-item{padding:0 10px}.next-pagination.next-medium .next-pagination-item+.next-pagination-item{margin:0 0 0 4px}.next-pagination.next-medium .next-pagination-ellipsis{height:28px;line-height:28px;margin-left:8px;margin-right:8px}.next-pagination.next-medium .next-pagination-ellipsis:before{width:12px;font-size:12px;line-height:inherit}.next-pagination.next-medium .next-pagination-display,.next-pagination.next-medium .next-pagination-display em,.next-pagination.next-medium .next-pagination-jump-text{font-size:12px}.next-pagination.next-medium .next-pagination-jump-input{width:36px}.next-pagination.next-medium .next-pagination-size-selector-title{height:28px;line-height:28px;font-size:12px;vertical-align:middle}.next-pagination.next-medium .next-pagination-size-selector-btn{padding:0 12px}.next-pagination.next-medium .next-pagination-item.next-next:not([disabled]) i,.next-pagination.next-medium .next-pagination-item.next-prev:not([disabled]) i{color:#666}.next-pagination.next-medium .next-pagination-item:hover.next-next:not([disabled]) i,.next-pagination.next-medium .next-pagination-item:hover.next-prev:not([disabled]) i{color:#333}.next-pagination.next-medium.next-arrow-only .next-pagination-item.next-next,.next-pagination.next-medium.next-arrow-only .next-pagination-item.next-prev{width:28px;padding:0}.next-pagination.next-medium.next-arrow-only .next-pagination-item.next-next .next-icon,.next-pagination.next-medium.next-arrow-only .next-pagination-item.next-prev .next-icon{margin:0 auto}.next-pagination.next-medium.next-arrow-prev-only .next-pagination-item.next-prev{width:28px;padding:0}.next-pagination.next-medium.next-arrow-prev-only .next-pagination-item.next-prev .next-icon{margin:0 auto}.next-pagination.next-medium.next-no-border .next-pagination-item.next-next,.next-pagination.next-medium.next-no-border .next-pagination-item.next-prev{padding:0;border:none;background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.next-pagination.next-medium.next-no-border .next-pagination-item.next-next .next-icon,.next-pagination.next-medium.next-no-border .next-pagination-item.next-prev .next-icon{margin:0}.next-pagination.next-medium.next-no-border .next-pagination-item.next-next:not([disabled]):hover i,.next-pagination.next-medium.next-no-border .next-pagination-item.next-prev:not([disabled]):hover i{color:#5584ff}.next-pagination.next-medium.next-no-border .next-pagination-display{margin:0 12px}.next-pagination.next-medium.next-mini .next-pagination-item.next-prev{margin-right:4px}.next-pagination.next-medium.next-mini .next-pagination-item.next-next{margin-left:4px}.next-pagination.next-large .next-pagination-list{margin:0 8px}.next-pagination.next-large .next-pagination-total{line-height:40px;vertical-align:middle}.next-pagination.next-large .next-pagination-item{padding:0 15px}.next-pagination.next-large .next-pagination-item+.next-pagination-item{margin:0 0 0 8px}.next-pagination.next-large .next-pagination-ellipsis{height:40px;line-height:40px;margin-left:8px;margin-right:8px}.next-pagination.next-large .next-pagination-ellipsis:before{width:16px;font-size:16px;line-height:inherit}.next-pagination.next-large .next-pagination-display,.next-pagination.next-large .next-pagination-display em,.next-pagination.next-large .next-pagination-jump-text{font-size:16px}.next-pagination.next-large .next-pagination-jump-input{width:48px}.next-pagination.next-large .next-pagination-size-selector-title{height:40px;line-height:40px;font-size:16px;vertical-align:middle}.next-pagination.next-large .next-pagination-size-selector-btn{padding:0 16px}.next-pagination.next-large .next-pagination-item.next-next:not([disabled]) i,.next-pagination.next-large .next-pagination-item.next-prev:not([disabled]) i{color:#666}.next-pagination.next-large .next-pagination-item:hover.next-next:not([disabled]) i,.next-pagination.next-large .next-pagination-item:hover.next-prev:not([disabled]) i{color:#333}.next-pagination.next-large.next-arrow-only .next-pagination-item.next-next,.next-pagination.next-large.next-arrow-only .next-pagination-item.next-prev{width:40px;padding:0}.next-pagination.next-large.next-arrow-only .next-pagination-item.next-next .next-icon,.next-pagination.next-large.next-arrow-only .next-pagination-item.next-prev .next-icon{margin:0 auto}.next-pagination.next-large.next-arrow-prev-only .next-pagination-item.next-prev{width:40px;padding:0}.next-pagination.next-large.next-arrow-prev-only .next-pagination-item.next-prev .next-icon{margin:0 auto}.next-pagination.next-large.next-no-border .next-pagination-item.next-next,.next-pagination.next-large.next-no-border .next-pagination-item.next-prev{padding:0;border:none;background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.next-pagination.next-large.next-no-border .next-pagination-item.next-next .next-icon,.next-pagination.next-large.next-no-border .next-pagination-item.next-prev .next-icon{margin:0}.next-pagination.next-large.next-no-border .next-pagination-item.next-next:not([disabled]):hover i,.next-pagination.next-large.next-no-border .next-pagination-item.next-prev:not([disabled]):hover i{color:#5584ff}.next-pagination.next-large.next-no-border .next-pagination-display{margin:0 16px}.next-pagination.next-large.next-mini .next-pagination-item.next-prev{margin-right:8px}.next-pagination.next-large.next-mini .next-pagination-item.next-next{margin-left:8px}.next-paragraph{color:#333}.next-paragraph-short{line-height:1.5}.next-paragraph-long{line-height:1.7}.next-paragraph-small{font-size:12px}.next-paragraph-medium{font-size:14px}.next-progress-circle[dir=rtl] .next-progress-circle-container{-webkit-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scaleX(-1)}.next-progress-line[dir=rtl] .next-progress-line-overlay{left:auto;right:0}.next-progress-line,.next-progress-line *,.next-progress-line :after,.next-progress-line :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-progress-line{width:100%;display:inline-block;position:relative}.next-progress-line-container{display:inline-block;width:100%;vertical-align:middle}.next-progress-line-underlay{position:relative;width:100%;background-color:#ebecf0}.next-progress-line-overlay{position:absolute;left:0;top:0;-webkit-transition:all 1s cubic-bezier(.65,.2,.35,1);transition:all 1s cubic-bezier(.65,.2,.35,1)}.next-progress-line-overlay-normal{background-color:#5584ff}.next-progress-line-overlay-success{background-color:#46bc15}.next-progress-line-overlay-error,.next-progress-line-overlay-started{background-color:#ff3000}.next-progress-line-overlay-middle{background-color:#ff9300}.next-progress-line-overlay-finishing{background-color:#46bc15}.next-progress-line.next-small .next-progress-line-underlay{border-radius:20px;height:4px}.next-progress-line.next-small .next-progress-line-overlay{height:4px;border-radius:20px;top:50%;margin-top:-2px}.next-progress-line.next-small .next-progress-line-text{font-size:12px;line-height:4px}.next-progress-line.next-medium .next-progress-line-underlay{border-radius:20px;height:8px}.next-progress-line.next-medium .next-progress-line-overlay{height:8px;border-radius:20px;top:50%;margin-top:-4px}.next-progress-line.next-medium .next-progress-line-text{font-size:12px;line-height:8px}.next-progress-line.next-large .next-progress-line-underlay{border-radius:20px;height:12px}.next-progress-line.next-large .next-progress-line-overlay{height:12px;border-radius:20px;top:50%;margin-top:-6px}.next-progress-line.next-large .next-progress-line-text{font-size:12px;line-height:12px}.next-progress-line-show-info .next-progress-line-container{padding-right:60px;margin-right:-60px}.next-progress-line-show-info .next-progress-line-text{width:50px;text-align:left;margin-left:10px;vertical-align:middle;display:inline-block;color:#333}.next-progress-line-show-border .next-progress-line-underlay{border:1px solid #dcdee3}.next-progress-line-show-border.next-small .next-progress-line-underlay{border-radius:20px;height:6px}.next-progress-line-show-border.next-small .next-progress-line-overlay{height:4px;border-radius:20px;top:50%;margin-top:-2px}.next-progress-line-show-border.next-small .next-progress-line-text{font-size:12px;line-height:6px}.next-progress-line-show-border.next-medium .next-progress-line-underlay{border-radius:20px;height:10px}.next-progress-line-show-border.next-medium .next-progress-line-overlay{height:8px;border-radius:20px;top:50%;margin-top:-4px}.next-progress-line-show-border.next-medium .next-progress-line-text{font-size:12px;line-height:10px}.next-progress-line-show-border.next-large .next-progress-line-underlay{border-radius:20px;height:14px}.next-progress-line-show-border.next-large .next-progress-line-overlay{height:12px;border-radius:20px;top:50%;margin-top:-6px}.next-progress-line-show-border.next-large .next-progress-line-text{font-size:12px;line-height:14px}.next-progress-circle,.next-progress-circle *,.next-progress-circle :after,.next-progress-circle :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-progress-circle{position:relative;display:inline-block}.next-progress-circle-underlay{stroke-width:8px;stroke:#ebecf0}.next-progress-circle-overlay{-webkit-transition:all 1s cubic-bezier(.65,.2,.35,1);transition:all 1s cubic-bezier(.65,.2,.35,1);stroke-linecap:round;stroke-width:8px}.next-progress-circle-overlay-normal{stroke:#5584ff}.next-progress-circle-overlay-success{stroke:#46bc15}.next-progress-circle-overlay-error,.next-progress-circle-overlay-started{stroke:#ff3000}.next-progress-circle-overlay-middle{stroke:#ff9300}.next-progress-circle-overlay-finishing{stroke:#46bc15}.next-progress-circle.next-small{width:100px;height:100px;font-size:20px}.next-progress-circle.next-medium{width:116px;height:116px;font-size:24px}.next-progress-circle.next-large{width:132px;height:132px;font-size:36px}.next-progress-circle-text{display:block;position:absolute;width:100%;top:50%;left:0;text-align:center;line-height:1;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:-webkit-transform .3s cubic-bezier(.65,.2,.35,1);transition:-webkit-transform .3s cubic-bezier(.65,.2,.35,1);transition:transform .3s cubic-bezier(.65,.2,.35,1);transition:transform .3s cubic-bezier(.65,.2,.35,1),-webkit-transform .3s cubic-bezier(.65,.2,.35,1);color:#333}.next-range{width:100%;font-family:inherit;font-weight:400;font-size:inherit;line-height:inherit;vertical-align:baseline;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;cursor:pointer}.next-range,.next-range *,.next-range :after,.next-range :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-range .next-range-inner{position:relative}.next-range .next-range-inner:only-child{margin-top:auto;margin-bottom:auto}.next-range .next-range-track{position:absolute;width:100%;top:50%;border-radius:0}.next-range .next-range-selected{position:absolute;width:0;top:50%;left:0;border-radius:0}.next-range .next-range-scale{position:relative;width:100%;height:12px}.next-range .next-range-scale .next-range-scale-item{position:absolute;left:0;width:2px;border:1px solid;border-radius:0}.next-range .next-range-scale .next-range-scale-item:last-child{margin-left:-2px}.next-range .next-range-slider{position:absolute;top:50%;left:0;border-radius:50%}.next-range .next-range-slider-inner{position:absolute;top:50%;left:50%;border:1px solid #c4c6cf;border-radius:50%;-webkit-transition:border-color .4s cubic-bezier(.23,1,.32,1),-webkit-transform .4s cubic-bezier(.23,1,.32,1);transition:border-color .4s cubic-bezier(.23,1,.32,1),-webkit-transform .4s cubic-bezier(.23,1,.32,1);transition:transform .4s cubic-bezier(.23,1,.32,1),border-color .4s cubic-bezier(.23,1,.32,1);transition:transform .4s cubic-bezier(.23,1,.32,1),border-color .4s cubic-bezier(.23,1,.32,1),-webkit-transform .4s cubic-bezier(.23,1,.32,1)}.next-range .next-range-frag.next-range-active .next-range-slider .next-range-slider-inner,.next-range .next-range-slider.next-range-slider-moving .next-range-slider-inner{border:2px solid #5584ff;-webkit-box-shadow:2px 2px 4px 0 rgba(0,0,0,.12);box-shadow:2px 2px 4px 0 rgba(0,0,0,.12);-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.next-range .next-range-mark{position:relative;cursor:auto}.next-range .next-range-mark .next-range-mark-text{position:absolute;left:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);padding-left:2px;text-align:center}.next-range .next-range-frag{position:absolute;top:0}.next-range .next-range-frag .next-range-slider{left:0}.next-range .next-range-frag .next-range-slider:nth-child(2){left:100%}.next-range .next-range-frag .next-range-selected{width:100%}.next-range.disabled{cursor:not-allowed}.next-range.disabled .next-range-mark{cursor:auto}.next-range .next-range-track,.next-range .next-range-track:hover{background-color:#c4c6cf}.next-range .next-range-selected,.next-range .next-range-selected:hover{background-color:#5584ff}.next-range .next-range-scale .next-range-scale-item{border-color:#c4c6cf;background-color:#c4c6cf}.next-range .next-range-scale .next-range-scale-item:hover{border-color:#c4c6cf}.next-range .next-range-scale .next-range-scale-item.activated{border-color:#5584ff;background-color:#5584ff}.next-range .next-range-scale .next-range-scale-item.activated:hover{border-color:#5584ff}.next-range .next-range-slider-inner{background-color:#fff;border-color:#c4c6cf}.next-range .next-range-slider-inner:hover{background-color:#fff;-webkit-box-shadow:3px 3px 5px 0 rgba(0,0,0,.12);box-shadow:3px 3px 5px 0 rgba(0,0,0,.12);-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.next-range .next-range-mark .next-range-mark-text,.next-range .next-range-mark .next-range-mark-text:hover{color:#999}.next-range .next-range-mark .next-range-mark-text.activated,.next-range .next-range-mark .next-range-mark-text.activated:hover{color:#333}.next-range.disabled .next-range-track{background-color:#c4c6cf}.next-range.disabled .next-range-selected{background-color:#a0a2ad}.next-range.disabled .next-range-scale-item{border-color:#c4c6cf}.next-range.disabled .next-range-scale-item.activated{border-color:#a0a2ad}.next-range.disabled .next-range-slider-inner{background-color:#e6e7eb;border-color:#e6e7eb;-webkit-transform:none;-ms-transform:none;transform:none;-webkit-box-shadow:none;box-shadow:none}.next-range.disabled .next-range-mark-text{color:#ccc}.next-range.disabled .next-range-mark-text.activated{color:#999}.next-range .next-range-selected,.next-range .next-range-track{height:4px;margin-top:-2px}.next-range .next-range-frag{margin-top:-2px;height:16px}.next-range .next-range-slider{-webkit-box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);box-shadow:1px 1px 3px 0 rgba(0,0,0,.12)}.next-range .next-range-slider,.next-range .next-range-slider-inner{height:16px;width:16px;margin-top:-8px;margin-left:-8px}.next-range .next-range-mark{display:block}.next-range .next-range-mark .next-range-mark-text{font-size:12px;font-weight:400;line-height:20px;height:20px}.next-range .next-range-mark.next-range-mark-below{height:30px}.next-range .next-range-mark.next-range-mark-below .next-range-mark-text{bottom:0}.next-range .next-range-mark.next-range-mark-above{height:30px}.next-range .next-range-scale .next-range-scale-item{height:12px}.next-range.simulation-hover>.next-range-slider-inner{background-color:#fff;-webkit-box-shadow:#fff;box-shadow:#fff;-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.next-range.simulation-click>.next-range-slider-inner{border:2px solid #5584ff;-webkit-box-shadow:2px 2px 4px 0 rgba(0,0,0,.12);box-shadow:2px 2px 4px 0 rgba(0,0,0,.12);-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.next-range[dir=rtl] .next-range-mark{position:relative;cursor:auto}.next-range[dir=rtl] .next-range-mark .next-range-mark-text{position:absolute;right:0;-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);padding-right:2px;text-align:center}.next-rating[dir=rtl] .next-rating-overlay{right:0;left:auto}.next-rating[dir=rtl] .next-rating-overlay .next-rating-icon,.next-rating[dir=rtl] .next-rating-underlay .next-rating-icon{margin-right:4px;margin-left:0}.next-rating[dir=rtl] .next-rating-overlay .next-rating-icon:last-child,.next-rating[dir=rtl] .next-rating-underlay .next-rating-icon:last-child{margin-left:4px}.next-rating{vertical-align:top;display:inline-block;position:relative}.next-rating:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-rating-base{float:left;cursor:pointer}.next-rating-text{float:left}.next-rating-base-disabled{cursor:not-allowed}.next-rating-underlay{white-space:nowrap;overflow:hidden}.next-rating-underlay .next-icon{color:#e2e4e8}.next-rating-stroke-mode .next-rating-underlay .next-icon{color:transparent;-webkit-text-stroke:1px #5584ff}.next-rating-overlay{white-space:nowrap;overflow:hidden;position:absolute;width:0;top:0;left:0}.next-rating-overlay .next-icon{color:#5584ff}.next-rating-overlay .next-rating-icon,.next-rating-underlay .next-rating-icon{margin-left:4px}.next-rating-overlay .next-rating-icon:last-child,.next-rating-underlay .next-rating-icon:last-child{margin-right:4px}.next-rating-overlay .next-icon,.next-rating-underlay .next-icon{-webkit-transition:all 50ms ease-in;transition:all 50ms ease-in}.next-rating-overlay .next-icon.hover,.next-rating-underlay .next-icon.hover{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}.next-rating-overlay .next-icon.clicked,.next-rating-underlay .next-icon.clicked{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}.next-rating-info{top:calc(100% + 4px);left:0;padding:4px 8px 3px;font-size:12px;white-space:nowrap}.next-rating-info,.next-rating-info:after{position:absolute;border:1px solid #e2e4e8;background:#fff}.next-rating-info:after{content:" ";width:4px;height:4px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);border-bottom-color:transparent;border-right-color:transparent;top:-3px;left:4px}.next-rating.hover,.next-rating:focus{outline:none}.next-rating.hover .next-rating-overlay .next-icon,.next-rating:focus .next-rating-overlay .next-icon{color:#5584ff}.next-rating-grade-low.hover .next-rating-overlay .next-icon,.next-rating-grade-low .next-rating-overlay .next-icon{color:#666}.next-rating-grade-high.hover .next-rating-overlay .next-icon,.next-rating-grade-high .next-rating-overlay .next-icon{color:#5584ff}.next-rating-small{font-size:12px}.next-rating-small .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-rating-small .next-rating-text{margin-left:8px}.next-rating-medium{font-size:12px}.next-rating-medium .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-rating-medium .next-rating-text{margin-left:12px}.next-rating-large{font-size:16px}.next-rating-large .next-icon:before{width:20px;font-size:20px;line-height:inherit}.next-rating-large .next-rating-text{margin-left:16px}.next-search-simple[dir=rtl].next-large .next-search-icon{margin-left:12px;margin-right:0}.next-search-simple[dir=rtl].next-medium .next-search-icon{margin-left:8px;margin-right:0}.next-search-simple[dir=rtl].next-normal .next-search-left .next-search-left-addon{border-left:1px solid #c4c6cf;border-right:none}.next-search-simple[dir=rtl].next-dark .next-search-left{border-color:#c4c6cf}.next-search-simple[dir=rtl].next-dark .next-search-left .next-search-left-addon{border-right:1px solid #c4c6cf}.next-search-simple[dir=rtl].next-dark:hover .next-search-left{border-color:#c4c6cf}.next-search-simple[dir=rtl].next-dark .next-search-icon{color:#999}.next-search-simple[dir=rtl].next-dark .next-search-icon:hover{color:#666}.next-search-normal[dir=rtl] .next-search-left{border-left:none;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.next-search-normal[dir=rtl] .next-search-btn.next-btn{border-radius:3px 0 0 3px!important}.next-search-normal[dir=rtl] .next-input{border-radius:0 3px 3px 0}.next-search-normal[dir=rtl].next-primary .next-input{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:1px;border-bottom-right-radius:1px}.next-search-normal[dir=rtl].next-primary .next-search-left .next-search-left-addon{border-left:1px solid #e6e7eb;border-right:none}.next-search-normal[dir=rtl].next-secondary .next-input{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:1px;border-bottom-right-radius:1px}.next-search-normal[dir=rtl].next-secondary .next-search-left .next-search-left-addon{border-left:1px solid #e6e7eb;border-right:none}.next-search-normal[dir=rtl].next-normal .next-input{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:1px;border-bottom-right-radius:1px}.next-search-normal[dir=rtl].next-normal .next-search-left .next-search-left-addon{border-left:1px solid #e6e7eb;border-right:none}.next-search-normal[dir=rtl].next-dark .next-search-left .next-search-left-addon{border-left:1px solid #5584ff;border-right:none} \ No newline at end of file diff --git a/dist/next-noreset.min-2.css b/dist/next-noreset.min-2.css new file mode 100644 index 0000000000..088807ee1f --- /dev/null +++ b/dist/next-noreset.min-2.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +.next-search{width:100%;display:inline-block}.next-search,.next-search *,.next-search :after,.next-search :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-search .next-input,.next-search .next-select{border:none}.next-search .next-select .next-input,.next-search .next-select .next-input .next-input-text-field{height:auto}.next-search .next-search-left{border-style:solid;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.next-search .next-search-left-addon .next-input,.next-search .next-search-left-addon .next-select-trigger-search{min-height:100%;border-bottom-right-radius:0;border-top-right-radius:0}.next-search .next-search-left-addon .next-select-values{line-height:1}.next-search .next-search-left-addon+.next-search-input .next-input{border-bottom-left-radius:0;border-top-left-radius:0}.next-search .next-search-input{width:100%}.next-search .next-search-btn{-webkit-box-shadow:none;box-shadow:none}.next-search-normal{width:600px}.next-search-normal .next-search-left{border-top-left-radius:3px;border-bottom-left-radius:3px}.next-search-normal .next-input{border-radius:3px 0 0 3px}.next-search-normal .next-btn{border-radius:0 3px 3px 0}.next-search-normal.next-primary .next-search-left{border-color:#5584ff}.next-search-normal.next-primary .next-search-left .next-search-left-addon{border-right:1px solid #e6e7eb}.next-search-normal.next-primary:hover .next-btn,.next-search-normal.next-primary:hover .next-search-left{border-color:#5584ff}.next-search-normal.next-primary .next-search-btn{background:#5584ff;border-color:#5584ff;color:#fff}.next-search-normal.next-primary .next-search-btn:hover{background:#3e71f7;border-color:#5584ff;color:#fff}.next-search-normal.next-primary .next-search-btn .next-icon,.next-search-normal.next-primary .next-search-btn .next-icon:hover{color:#fff}.next-search-normal.next-primary.next-large{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-primary.next-large .next-search-btn,.next-search-normal.next-primary.next-large .next-search-left{border-width:2px;height:60px}.next-search-normal.next-primary.next-large .next-search-input{height:56px;overflow-y:hidden}.next-search-normal.next-primary.next-large .next-search-input input{height:56px;line-height:56px \0}.next-search-normal.next-primary.next-large .next-select{height:56px}.next-search-normal.next-primary.next-large .next-search-btn{font-size:16px}.next-search-normal.next-primary.next-large .next-search-btn .next-icon:before{width:24px;font-size:24px;line-height:inherit}.next-search-normal.next-primary.next-large .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-primary.next-medium{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-primary.next-medium .next-search-btn,.next-search-normal.next-primary.next-medium .next-search-left{border-width:2px;height:40px}.next-search-normal.next-primary.next-medium .next-search-input{height:36px;overflow-y:hidden}.next-search-normal.next-primary.next-medium .next-search-input input{height:36px;line-height:36px \0}.next-search-normal.next-primary.next-medium .next-select{height:36px}.next-search-normal.next-primary.next-medium .next-search-btn{font-size:16px}.next-search-normal.next-primary.next-medium .next-search-btn .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-search-normal.next-primary.next-medium .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-primary .next-input{border-top-left-radius:1px;border-bottom-left-radius:1px}.next-search-normal.next-secondary .next-search-left{border-color:#c4c6cf}.next-search-normal.next-secondary .next-search-left .next-search-left-addon{border-right:1px solid #e6e7eb}.next-search-normal.next-secondary:hover .next-btn,.next-search-normal.next-secondary:hover .next-search-left{border-color:#5584ff}.next-search-normal.next-secondary .next-search-btn{background:#5584ff;border-color:#5584ff;color:#fff}.next-search-normal.next-secondary .next-search-btn:hover{background:#3e71f7;border-color:#5584ff;color:#fff}.next-search-normal.next-secondary .next-search-btn .next-icon,.next-search-normal.next-secondary .next-search-btn .next-icon:hover{color:#fff}.next-search-normal.next-secondary.next-large{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-secondary.next-large .next-search-btn,.next-search-normal.next-secondary.next-large .next-search-left{border-width:1px;height:60px}.next-search-normal.next-secondary.next-large .next-search-input{height:58px;overflow-y:hidden}.next-search-normal.next-secondary.next-large .next-search-input input{height:58px;line-height:58px \0}.next-search-normal.next-secondary.next-large .next-select{height:58px}.next-search-normal.next-secondary.next-large .next-search-btn{font-size:16px}.next-search-normal.next-secondary.next-large .next-search-btn .next-icon:before{width:24px;font-size:24px;line-height:inherit}.next-search-normal.next-secondary.next-large .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-secondary.next-medium{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-secondary.next-medium .next-search-btn,.next-search-normal.next-secondary.next-medium .next-search-left{border-width:1px;height:40px}.next-search-normal.next-secondary.next-medium .next-search-input{height:38px;overflow-y:hidden}.next-search-normal.next-secondary.next-medium .next-search-input input{height:38px;line-height:38px \0}.next-search-normal.next-secondary.next-medium .next-select{height:38px}.next-search-normal.next-secondary.next-medium .next-search-btn{font-size:16px}.next-search-normal.next-secondary.next-medium .next-search-btn .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-search-normal.next-secondary.next-medium .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-secondary .next-input{border-top-left-radius:2px;border-bottom-left-radius:2px}.next-search-normal.next-normal .next-search-left{border-color:#c4c6cf}.next-search-normal.next-normal .next-search-left .next-search-left-addon{border-right:1px solid #e6e7eb}.next-search-normal.next-normal:hover .next-btn,.next-search-normal.next-normal:hover .next-search-left{border-color:#a0a2ad}.next-search-normal.next-normal .next-search-btn{background:#f7f8fa;border-color:#c4c6cf;color:#666}.next-search-normal.next-normal .next-search-btn:hover{background:#ebecf0;border-color:#a0a2ad;color:#333}.next-search-normal.next-normal .next-search-btn .next-icon{color:#666}.next-search-normal.next-normal .next-search-btn .next-icon:hover{color:#333}.next-search-normal.next-normal.next-large{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-normal.next-large .next-search-btn,.next-search-normal.next-normal.next-large .next-search-left{border-width:1px;height:60px}.next-search-normal.next-normal.next-large .next-search-input{height:58px;overflow-y:hidden}.next-search-normal.next-normal.next-large .next-search-input input{height:58px;line-height:58px \0}.next-search-normal.next-normal.next-large .next-select{height:58px}.next-search-normal.next-normal.next-large .next-search-btn{font-size:16px}.next-search-normal.next-normal.next-large .next-search-btn .next-icon:before{width:24px;font-size:24px;line-height:inherit}.next-search-normal.next-normal.next-large .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-normal.next-medium{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-normal.next-medium .next-search-btn,.next-search-normal.next-normal.next-medium .next-search-left{border-width:1px;height:40px}.next-search-normal.next-normal.next-medium .next-search-input{height:38px;overflow-y:hidden}.next-search-normal.next-normal.next-medium .next-search-input input{height:38px;line-height:38px \0}.next-search-normal.next-normal.next-medium .next-select{height:38px}.next-search-normal.next-normal.next-medium .next-search-btn{font-size:16px}.next-search-normal.next-normal.next-medium .next-search-btn .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-search-normal.next-normal.next-medium .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-normal .next-input{border-top-left-radius:2px;border-bottom-left-radius:2px}.next-search-normal.next-dark .next-search-left{border-color:#5584ff}.next-search-normal.next-dark .next-search-left .next-search-left-addon{border-right:1px solid #5584ff}.next-search-normal.next-dark:hover .next-btn,.next-search-normal.next-dark:hover .next-search-left{border-color:#5584ff}.next-search-normal.next-dark .next-search-btn{background:#5584ff;border-color:#5584ff;color:#fff}.next-search-normal.next-dark .next-search-btn:hover{background:#3e71f7;border-color:#5584ff;color:#fff}.next-search-normal.next-dark .next-search-btn .next-icon,.next-search-normal.next-dark .next-search-btn .next-icon:hover,.next-search-normal.next-dark .next-select-inner,.next-search-normal.next-dark input{color:#fff}.next-search-normal.next-dark .next-input,.next-search-normal.next-dark .next-select{background:hsla(0,0%,100%,0)}.next-search-normal.next-dark.next-large{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-dark.next-large .next-search-btn,.next-search-normal.next-dark.next-large .next-search-left{border-width:1px;height:60px}.next-search-normal.next-dark.next-large .next-search-input{height:58px;overflow-y:hidden}.next-search-normal.next-dark.next-large .next-search-input input{height:58px;line-height:58px \0}.next-search-normal.next-dark.next-large .next-select{height:58px}.next-search-normal.next-dark.next-large .next-search-btn{font-size:16px}.next-search-normal.next-dark.next-large .next-search-btn .next-icon:before{width:24px;font-size:24px;line-height:inherit}.next-search-normal.next-dark.next-large .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-dark.next-medium{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-dark.next-medium .next-search-btn,.next-search-normal.next-dark.next-medium .next-search-left{border-width:1px;height:40px}.next-search-normal.next-dark.next-medium .next-search-input{height:38px;overflow-y:hidden}.next-search-normal.next-dark.next-medium .next-search-input input{height:38px;line-height:38px \0}.next-search-normal.next-dark.next-medium .next-select{height:38px}.next-search-normal.next-dark.next-medium .next-search-btn{font-size:16px}.next-search-normal.next-dark.next-medium .next-search-btn .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-search-normal.next-dark.next-medium .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal:not([dir=rtl]) .next-search-left{border-right:none}.next-search-simple{width:300px;-webkit-box-shadow:none;box-shadow:none;border-radius:3px}.next-search-simple .next-search-icon{cursor:pointer;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.next-search-simple .next-input,.next-search-simple .next-search-left{border-radius:3px}.next-search-simple.next-large .next-search-icon{margin-right:12px}.next-search-simple.next-medium .next-search-icon{margin-right:8px}.next-search-simple.next-normal .next-search-left{border-color:#c4c6cf}.next-search-simple.next-normal .next-search-left .next-search-left-addon{border-right:1px solid #c4c6cf}.next-search-simple.next-normal:hover .next-search-left{border-color:#a0a2ad}.next-search-simple.next-normal .next-search-icon{color:#999}.next-search-simple.next-normal .next-search-icon:hover{color:#666}.next-search-simple.next-normal .next-search-left{border-width:1px}.next-search-simple.next-normal.next-large .next-search-icon:before{width:20px;font-size:20px;line-height:inherit}.next-search-simple.next-normal.next-medium .next-search-icon:before{width:12px;font-size:12px;line-height:inherit}.next-search-simple.next-dark .next-search-left{border-color:#c4c6cf}.next-search-simple.next-dark .next-search-left .next-search-left-addon{border-right:1px solid #c4c6cf}.next-search-simple.next-dark:hover .next-search-left{border-color:#c4c6cf}.next-search-simple.next-dark .next-search-icon{color:#999}.next-search-simple.next-dark .next-search-icon:hover{color:#666}.next-search-simple.next-dark .next-select-inner,.next-search-simple.next-dark input{color:#fff}.next-search-simple.next-dark .next-input,.next-search-simple.next-dark .next-select{background:hsla(0,0%,100%,0)}.next-search-simple.next-dark .next-search-left{border-width:1px}.next-search-simple.next-dark.next-large .next-search-icon:before{width:20px;font-size:20px;line-height:inherit}.next-search-simple.next-dark.next-medium .next-search-icon:before{width:12px;font-size:12px;line-height:inherit}.next-search-simple .next-select.next-large{height:38px}.next-search-simple .next-select.next-medium{height:26px}.next-slick{position:relative;display:block;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.next-slick,.next-slick *,.next-slick :after,.next-slick :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-slick-initialized .next-slick-slide{display:block}.next-slick-list{position:relative;overflow:hidden;display:block;margin:0;padding:0;-webkit-transform:translateZ(0);transform:translateZ(0)}.next-slick-list:focus{outline:none}.next-slick-list.dragging{cursor:pointer;cursor:hand}.next-slick-track{position:relative;top:0;left:0;display:block;-webkit-transform:translateZ(0);transform:translateZ(0)}.next-slick-slide{float:left;height:100%;min-height:1px;outline:0;-webkit-transition:all .3s cubic-bezier(.86,0,.07,1);transition:all .3s cubic-bezier(.86,0,.07,1)}.next-slick[dir=rtl] .next-slick-slide{float:right}.next-slick-slide img{display:block}.next-slick-arrow{display:block;position:absolute;cursor:pointer;text-align:center;-webkit-transition:.4s ease-in;transition:.4s ease-in}.next-slick-arrow.inner{color:#fff;background:#000;opacity:.2;padding:0;border:none}.next-slick-arrow.inner:focus,.next-slick-arrow.inner:hover{color:#fff;background:#000;opacity:.4}.next-slick-arrow.inner.disabled{color:#ccc;background:#f7f8fa;opacity:.5}.next-slick-arrow.outer{color:#666;background:transparent;opacity:.32;padding:0;border:none;border-radius:0}.next-slick-arrow.outer:focus,.next-slick-arrow.outer:hover{color:#333;background:transparent;opacity:.32}.next-slick-arrow.outer.disabled{color:#ccc;background:transparent;opacity:.32}.next-slick-arrow.disabled{cursor:not-allowed}.next-slick-dots{display:block;position:absolute;margin:0;padding:0}.next-slick-dots-item{position:relative;display:inline-block;cursor:pointer}.next-slick-dots-item button{cursor:pointer;border:0 solid #fff;outline:none;padding:0;height:8px;width:8px;border-radius:50%;background:rgba(0,0,0,.32)}.next-slick-dots-item button:hover{background-color:rgba(0,0,0,.32);border-color:#fff}.next-slick-dots-item.active button,.next-slick-dots-item button:focus{background:#5584ff;border-color:#fff;-webkit-animation:zoom .3s cubic-bezier(.86,0,.07,1);animation:zoom .3s cubic-bezier(.86,0,.07,1)}.next-slick-dots.hoz{width:100%;bottom:12px;left:0;text-align:center}.next-slick-dots.hoz .next-slick-dots-item{margin:0 4px}.next-slick-dots.ver{width:16px;top:0;right:20px;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.next-slick-dots.ver .next-slick-dots-item{margin:0}.next-slick.next-slick-hoz.next-slick-outer{padding:0 24px}.next-slick.next-slick-hoz .next-slick-arrow.medium{width:28px;height:56px;line-height:56px}.next-slick.next-slick-hoz .next-slick-arrow.medium .next-icon:before{width:20px;font-size:20px;line-height:inherit}.next-slick.next-slick-hoz .next-slick-arrow.medium.inner{top:calc((100% - 56px) / 2)}.next-slick.next-slick-hoz .next-slick-arrow.medium.inner.next-slick-prev{left:0}.next-slick.next-slick-hoz .next-slick-arrow.medium.inner.next-slick-next{right:0}.next-slick.next-slick-hoz .next-slick-arrow.medium.outer{top:calc((100% - 56px) / 2)}.next-slick.next-slick-hoz .next-slick-arrow.medium.outer.next-slick-prev{left:-4px}.next-slick.next-slick-hoz .next-slick-arrow.medium.outer.next-slick-next{right:-4px}.next-slick.next-slick-hoz .next-slick-arrow.large{width:48px;height:96px;line-height:96px}.next-slick.next-slick-hoz .next-slick-arrow.large .next-icon:before{width:32px;font-size:32px;line-height:inherit}.next-slick.next-slick-hoz .next-slick-arrow.large.inner{top:calc((100% - 96px) / 2)}.next-slick.next-slick-hoz .next-slick-arrow.large.inner.next-slick-prev{left:0}.next-slick.next-slick-hoz .next-slick-arrow.large.inner.next-slick-next{right:0}.next-slick.next-slick-hoz .next-slick-arrow.large.outer{top:calc((100% - 96px) / 2)}.next-slick.next-slick-hoz .next-slick-arrow.large.outer.next-slick-prev{left:-8px}.next-slick.next-slick-hoz .next-slick-arrow.large.outer.next-slick-next{right:-8px}.next-slick.next-slick-ver.next-slick-outer{padding:24px 0}.next-slick.next-slick-ver .next-slick-slide{display:block;height:auto}.next-slick.next-slick-ver .next-slick-arrow.medium{width:56px;height:28px;line-height:28px}.next-slick.next-slick-ver .next-slick-arrow.medium .next-icon:before{width:20px;font-size:20px;line-height:inherit}.next-slick.next-slick-ver .next-slick-arrow.medium.inner{left:calc((100% - 56px) / 2)}.next-slick.next-slick-ver .next-slick-arrow.medium.inner.next-slick-prev{top:0}.next-slick.next-slick-ver .next-slick-arrow.medium.inner.next-slick-next{bottom:0}.next-slick.next-slick-ver .next-slick-arrow.medium.outer{left:calc((100% - 56px) / 2)}.next-slick.next-slick-ver .next-slick-arrow.medium.outer.next-slick-prev{top:-4px}.next-slick.next-slick-ver .next-slick-arrow.medium.outer.next-slick-next{bottom:-4px}.next-slick.next-slick-ver .next-slick-arrow.large{width:96px;height:48px;line-height:48px}.next-slick.next-slick-ver .next-slick-arrow.large .next-icon:before{width:32px;font-size:32px;line-height:inherit}.next-slick.next-slick-ver .next-slick-arrow.large.inner{left:calc((100% - 96px) / 2)}.next-slick.next-slick-ver .next-slick-arrow.large.inner.next-slick-prev{top:0}.next-slick.next-slick-ver .next-slick-arrow.large.inner.next-slick-next{bottom:0}.next-slick.next-slick-ver .next-slick-arrow.large.outer{left:calc((100% - 96px) / 2)}.next-slick.next-slick-ver .next-slick-arrow.large.outer.next-slick-prev{top:-16px}.next-slick.next-slick-ver .next-slick-arrow.large.outer.next-slick-next{bottom:-16px}.next-split-btn{display:inline-block;position:relative}.next-split-btn-trigger .next-icon{-webkit-transition:-webkit-transform .3s cubic-bezier(.645,.045,.355,1);transition:-webkit-transform .3s cubic-bezier(.645,.045,.355,1);transition:transform .3s cubic-bezier(.645,.045,.355,1);transition:transform .3s cubic-bezier(.645,.045,.355,1),-webkit-transform .3s cubic-bezier(.645,.045,.355,1)}.next-split-btn-trigger.next-expand .next-icon{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-split-btn-trigger.next-btn-normal:not(:disabled):not(.disabled) .next-icon{color:#999}.next-split-btn-trigger.next-small{padding-left:4px;padding-right:4px}.next-split-btn-trigger.next-medium{padding-left:8px;padding-right:8px}.next-step,.next-step *,.next-step:after,.next-step :after,.next-step:before,.next-step :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-step{width:100%;position:relative;border:none}.next-step-item{position:relative;vertical-align:middle;outline:0;height:100%}.next-step-item-body{outline:0}.next-step-item-node{-webkit-transition:all .2s ease;transition:all .2s ease}.next-step-item-node.clicked{-webkit-transform:scale3d(.8,.8,.8);transform:scale3d(.8,.8,.8)}.next-step-horizontal{overflow:hidden}.next-step-horizontal>.next-step-item{display:inline-block;text-align:left}.next-step-vertical>.next-step-item{display:block;text-align:center}.next-step-arrow{display:-webkit-box;display:-ms-flexbox;display:flex}.next-step-arrow .next-step-item{-webkit-box-flex:1;-ms-flex:1;flex:1;height:32px;line-height:32px;margin-left:16px;margin-right:4px}.next-step-arrow .next-step-item:before{content:"";position:absolute;left:-16px;top:0;z-index:1;border:16px solid transparent;border-left-color:transparent}.next-step-arrow .next-step-item:after{content:"";position:absolute;right:-16px;top:0;z-index:1;border-top:16px solid transparent;border-bottom:16px solid transparent;border-left:16px solid transparent}.next-step-arrow .next-step-item .next-step-item-container{min-width:100px;height:32px;cursor:pointer}.next-step-arrow .next-step-item .next-step-item-container .next-step-item-title{height:32px;line-height:32px;font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}.next-step-arrow>.next-step-item-wait{background:#ebecf0}.next-step-arrow>.next-step-item-wait .next-step-item-tail-overlay{background:#000}.next-step-arrow>.next-step-item-wait .next-step-item-tail-underlay{background:#ccc}.next-step-arrow>.next-step-item-wait>.next-step-item-container .next-step-item-progress{width:32px;height:32px}.next-step-arrow>.next-step-item-wait>.next-step-item-container .next-step-item-node{color:#000}.next-step-arrow>.next-step-item-wait>.next-step-item-container .next-step-item-node-circle,.next-step-arrow>.next-step-item-wait>.next-step-item-container .next-step-item-node-dot{background:#ebecf0;border-color:#000}.next-step-arrow>.next-step-item-wait .next-step-item-title{color:#999;word-break:break-word}.next-step-arrow>.next-step-item-wait .next-step-item-content{color:#999;font-size:12px;word-break:break-word}.next-step-arrow>.next-step-item-wait .next-step-item-node-placeholder{width:32px;height:32px;position:relative}.next-step-arrow>.next-step-item-wait .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-arrow>.next-step-item-wait .next-step-item-node-circle{display:block;width:32px;height:32px;font-size:12px;font-weight:400;line-height:30px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-arrow>.next-step-item-wait .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-arrow>.next-step-item-wait .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-arrow>.next-step-item-wait .next-step-item-node-dot{position:absolute;top:50%;margin-top:-16px;left:50%;margin-left:-16px;display:block;width:32px;height:32px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-arrow>.next-step-item-wait:before{border:16px solid #ebecf0;border-left-color:transparent}.next-step-arrow>.next-step-item-wait:after{border-left-color:#ebecf0}.next-step-arrow>.next-step-item-process{background:#5584ff}.next-step-arrow>.next-step-item-process .next-step-item-tail-overlay{background:#000}.next-step-arrow>.next-step-item-process .next-step-item-tail-underlay{background:#ccc}.next-step-arrow>.next-step-item-process>.next-step-item-container .next-step-item-progress{width:32px;height:32px}.next-step-arrow>.next-step-item-process>.next-step-item-container .next-step-item-node{color:#000}.next-step-arrow>.next-step-item-process>.next-step-item-container .next-step-item-node-circle,.next-step-arrow>.next-step-item-process>.next-step-item-container .next-step-item-node-dot{background:#5584ff;border-color:#000}.next-step-arrow>.next-step-item-process .next-step-item-title{color:#fff;word-break:break-word}.next-step-arrow>.next-step-item-process .next-step-item-content{color:#fff;font-size:12px;word-break:break-word}.next-step-arrow>.next-step-item-process .next-step-item-node-placeholder{width:32px;height:32px;position:relative}.next-step-arrow>.next-step-item-process .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-arrow>.next-step-item-process .next-step-item-node-circle{display:block;width:32px;height:32px;font-size:12px;font-weight:400;line-height:30px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-arrow>.next-step-item-process .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-arrow>.next-step-item-process .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-arrow>.next-step-item-process .next-step-item-node-dot{position:absolute;top:50%;margin-top:-16px;left:50%;margin-left:-16px;display:block;width:32px;height:32px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-arrow>.next-step-item-process:before{border:16px solid #5584ff;border-left-color:transparent}.next-step-arrow>.next-step-item-process:after{border-left-color:#5584ff}.next-step-arrow>.next-step-item-finish{background:#dee8ff}.next-step-arrow>.next-step-item-finish .next-step-item-tail-overlay{background:#000}.next-step-arrow>.next-step-item-finish .next-step-item-tail-underlay{background:#ccc}.next-step-arrow>.next-step-item-finish>.next-step-item-container .next-step-item-progress{width:32px;height:32px}.next-step-arrow>.next-step-item-finish>.next-step-item-container .next-step-item-node{color:#000}.next-step-arrow>.next-step-item-finish>.next-step-item-container .next-step-item-node-circle,.next-step-arrow>.next-step-item-finish>.next-step-item-container .next-step-item-node-dot{background:#dee8ff;border-color:#000}.next-step-arrow>.next-step-item-finish .next-step-item-title{color:#5584ff;word-break:break-word}.next-step-arrow>.next-step-item-finish .next-step-item-content{color:#5584ff;font-size:12px;word-break:break-word}.next-step-arrow>.next-step-item-finish .next-step-item-node-placeholder{width:32px;height:32px;position:relative}.next-step-arrow>.next-step-item-finish .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-arrow>.next-step-item-finish .next-step-item-node-circle{display:block;width:32px;height:32px;font-size:12px;font-weight:400;line-height:30px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-arrow>.next-step-item-finish .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-arrow>.next-step-item-finish .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-arrow>.next-step-item-finish .next-step-item-node-dot{position:absolute;top:50%;margin-top:-16px;left:50%;margin-left:-16px;display:block;width:32px;height:32px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-arrow>.next-step-item-finish:before{border:16px solid #dee8ff;border-left-color:transparent}.next-step-arrow>.next-step-item-finish:after{border-left-color:#dee8ff}.next-step-arrow .next-step-item-disabled{cursor:not-allowed;background:#f7f8fa}.next-step-arrow .next-step-item-disabled .next-step-item-tail-overlay{background:#000}.next-step-arrow .next-step-item-disabled .next-step-item-tail-underlay{background:#ccc}.next-step-arrow .next-step-item-disabled>.next-step-item-container .next-step-item-progress{width:32px;height:32px}.next-step-arrow .next-step-item-disabled>.next-step-item-container .next-step-item-node{color:#000}.next-step-arrow .next-step-item-disabled>.next-step-item-container .next-step-item-node-circle,.next-step-arrow .next-step-item-disabled>.next-step-item-container .next-step-item-node-dot{background:#f7f8fa;border-color:#000}.next-step-arrow .next-step-item-disabled .next-step-item-title{color:#ccc;word-break:break-word}.next-step-arrow .next-step-item-disabled .next-step-item-content{color:#ccc;font-size:12px;word-break:break-word}.next-step-arrow .next-step-item-disabled .next-step-item-node-placeholder{width:32px;height:32px;position:relative}.next-step-arrow .next-step-item-disabled .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-arrow .next-step-item-disabled .next-step-item-node-circle{display:block;width:32px;height:32px;font-size:12px;font-weight:400;line-height:30px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-arrow .next-step-item-disabled .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-arrow .next-step-item-disabled .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-arrow .next-step-item-disabled .next-step-item-node-dot{position:absolute;top:50%;margin-top:-16px;left:50%;margin-left:-16px;display:block;width:32px;height:32px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-arrow .next-step-item-disabled:before{border:16px solid #f7f8fa;border-left-color:transparent}.next-step-arrow .next-step-item-disabled:after{border-left-color:#f7f8fa}.next-step-arrow .next-step-item-disabled .next-step-item-container{cursor:not-allowed}.next-step-arrow .next-step-item-read-only,.next-step-arrow .next-step-item-read-only .next-step-item-container{cursor:default}.next-step-arrow .next-step-item-first{margin-left:0}.next-step-arrow .next-step-item-first:before{border:16px solid transparent}.next-step-arrow .next-step-item-last{margin-right:0}.next-step-arrow .next-step-item-last:after{border:16px solid transparent}.next-step-circle .next-step-item-container{display:inline-block;vertical-align:middle;position:relative;padding:0 8px}.next-step-circle .next-step-item-container .next-step-item-progress .next-progress-circle-text{color:#5584ff;font-size:12px}.next-step-circle .next-step-item-container .next-step-item-progress .next-progress-circle-underlay{stroke:#a0a2ad;stroke-width:4px}.next-step-circle .next-step-item-container .next-step-item-progress .next-progress-circle-overlay-normal{stroke:#5584ff;stroke-width:4px}.next-step-circle .next-step-item-container .next-step-item-node-placeholder{display:inline-block}.next-step-circle>.next-step-item-wait .next-step-item-tail-overlay{background:#c4c6cf}.next-step-circle>.next-step-item-wait .next-step-item-tail-underlay{background:#e6e7eb}.next-step-circle>.next-step-item-wait>.next-step-item-container .next-step-item-progress{width:32px;height:32px}.next-step-circle>.next-step-item-wait>.next-step-item-container .next-step-item-node{color:#666}.next-step-circle>.next-step-item-wait>.next-step-item-container .next-step-item-node-circle,.next-step-circle>.next-step-item-wait>.next-step-item-container .next-step-item-node-dot{background:#fff;border-color:#a0a2ad}.next-step-circle>.next-step-item-wait .next-step-item-title{color:#666;word-break:break-word}.next-step-circle>.next-step-item-wait .next-step-item-content{color:#666;font-size:12px;word-break:break-word}.next-step-circle>.next-step-item-wait .next-step-item-node-placeholder{width:32px;height:32px;position:relative}.next-step-circle>.next-step-item-wait .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-circle>.next-step-item-wait .next-step-item-node-circle{display:block;width:32px;height:32px;font-size:12px;font-weight:400;line-height:30px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-circle>.next-step-item-wait .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-circle>.next-step-item-wait .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-circle>.next-step-item-wait .next-step-item-node-dot{position:absolute;top:50%;margin-top:-16px;left:50%;margin-left:-16px;display:block;width:32px;height:32px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-circle>.next-step-item-process .next-step-item-tail-overlay{background:#c4c6cf}.next-step-circle>.next-step-item-process .next-step-item-tail-underlay{background:#e6e7eb}.next-step-circle>.next-step-item-process>.next-step-item-container .next-step-item-progress{width:32px;height:32px}.next-step-circle>.next-step-item-process>.next-step-item-container .next-step-item-node{color:#fff}.next-step-circle>.next-step-item-process>.next-step-item-container .next-step-item-node-circle,.next-step-circle>.next-step-item-process>.next-step-item-container .next-step-item-node-dot{background:#5584ff;border-color:#5584ff}.next-step-circle>.next-step-item-process .next-step-item-title{color:#333;word-break:break-word}.next-step-circle>.next-step-item-process .next-step-item-content{color:#333;font-size:12px;word-break:break-word}.next-step-circle>.next-step-item-process .next-step-item-node-placeholder{width:32px;height:32px;position:relative}.next-step-circle>.next-step-item-process .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-circle>.next-step-item-process .next-step-item-node-circle{display:block;width:32px;height:32px;font-size:12px;font-weight:400;line-height:30px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-circle>.next-step-item-process .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-circle>.next-step-item-process .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-circle>.next-step-item-process .next-step-item-node-dot{position:absolute;top:50%;margin-top:-16px;left:50%;margin-left:-16px;display:block;width:32px;height:32px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-circle>.next-step-item-finish .next-step-item-tail-overlay{background:#5584ff}.next-step-circle>.next-step-item-finish .next-step-item-tail-underlay{background:#e6e7eb}.next-step-circle>.next-step-item-finish>.next-step-item-container .next-step-item-progress{width:32px;height:32px}.next-step-circle>.next-step-item-finish>.next-step-item-container .next-step-item-node{color:#5584ff}.next-step-circle>.next-step-item-finish>.next-step-item-container .next-step-item-node-circle,.next-step-circle>.next-step-item-finish>.next-step-item-container .next-step-item-node-dot{background:#fff;border-color:#5584ff}.next-step-circle>.next-step-item-finish .next-step-item-title{color:#666;word-break:break-word}.next-step-circle>.next-step-item-finish .next-step-item-content{color:#666;font-size:12px;word-break:break-word}.next-step-circle>.next-step-item-finish .next-step-item-node-placeholder{width:32px;height:32px;position:relative}.next-step-circle>.next-step-item-finish .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-circle>.next-step-item-finish .next-step-item-node-circle{display:block;width:32px;height:32px;font-size:12px;font-weight:400;line-height:30px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-circle>.next-step-item-finish .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-circle>.next-step-item-finish .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-circle>.next-step-item-finish .next-step-item-node-dot{position:absolute;top:50%;margin-top:-16px;left:50%;margin-left:-16px;display:block;width:32px;height:32px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-circle .next-step-item-disabled .next-step-item-tail-overlay,.next-step-circle .next-step-item-disabled .next-step-item-tail-underlay{background:#e6e7eb}.next-step-circle .next-step-item-disabled>.next-step-item-container .next-step-item-progress{width:32px;height:32px}.next-step-circle .next-step-item-disabled>.next-step-item-container .next-step-item-node{color:#ccc}.next-step-circle .next-step-item-disabled>.next-step-item-container .next-step-item-node-circle,.next-step-circle .next-step-item-disabled>.next-step-item-container .next-step-item-node-dot{background:#fff;border-color:#e6e7eb}.next-step-circle .next-step-item-disabled .next-step-item-title{color:#ccc;word-break:break-word}.next-step-circle .next-step-item-disabled .next-step-item-content{color:#ccc;font-size:12px;word-break:break-word}.next-step-circle .next-step-item-disabled .next-step-item-node-placeholder{width:32px;height:32px;position:relative}.next-step-circle .next-step-item-disabled .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-circle .next-step-item-disabled .next-step-item-node-circle{display:block;width:32px;height:32px;font-size:12px;font-weight:400;line-height:30px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-circle .next-step-item-disabled .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-circle .next-step-item-disabled .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-circle .next-step-item-disabled .next-step-item-node-dot{position:absolute;top:50%;margin-top:-16px;left:50%;margin-left:-16px;display:block;width:32px;height:32px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-circle .next-step-item-disabled .next-step-item-node,.next-step-circle .next-step-item-disabled .next-step-item-node-placeholder{cursor:not-allowed}.next-step-circle .next-step-item-read-only .next-step-item-node,.next-step-circle .next-step-item-read-only .next-step-item-node-placeholder{cursor:default}.next-step-circle .next-step-item-last .next-step-item-tail{display:none}.next-step-circle.next-step-horizontal{text-align:center;white-space:nowrap}.next-step-circle.next-step-horizontal>.next-step-item .next-step-item-content,.next-step-circle.next-step-horizontal>.next-step-item .next-step-item-title{white-space:normal}.next-step-circle.next-step-horizontal>.next-step-item-wait .next-step-item-tail{display:inline-block;clear:both;width:calc(100% - 48px);vertical-align:middle}.next-step-circle.next-step-horizontal>.next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay{display:block;height:1px;position:relative}.next-step-circle.next-step-horizontal>.next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:1px;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%}.next-step-circle.next-step-horizontal>.next-step-item-wait>.next-step-item-node{padding:0 8px;width:48px;height:32px}.next-step-circle.next-step-horizontal>.next-step-item-wait>.next-step-item-body{width:100px;left:-26px;text-align:center;position:absolute}.next-step-circle.next-step-horizontal>.next-step-item-wait>.next-step-item-body>.next-step-item-title{font-size:14px;line-height:18px;margin-top:8px;font-weight:700}.next-step-circle.next-step-horizontal>.next-step-item-wait>.next-step-item-body>.next-step-item-content{margin-top:4px}.next-step-circle.next-step-horizontal>.next-step-item-process .next-step-item-tail{display:inline-block;clear:both;width:calc(100% - 48px);vertical-align:middle}.next-step-circle.next-step-horizontal>.next-step-item-process .next-step-item-tail .next-step-item-tail-underlay{display:block;height:1px;position:relative}.next-step-circle.next-step-horizontal>.next-step-item-process .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:1px;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%}.next-step-circle.next-step-horizontal>.next-step-item-process>.next-step-item-node{padding:0 8px;width:48px;height:32px}.next-step-circle.next-step-horizontal>.next-step-item-process>.next-step-item-body{width:100px;left:-26px;text-align:center;position:absolute}.next-step-circle.next-step-horizontal>.next-step-item-process>.next-step-item-body>.next-step-item-title{font-size:14px;line-height:18px;margin-top:8px;font-weight:700}.next-step-circle.next-step-horizontal>.next-step-item-process>.next-step-item-body>.next-step-item-content{margin-top:4px}.next-step-circle.next-step-horizontal>.next-step-item-finish .next-step-item-tail{display:inline-block;clear:both;width:calc(100% - 48px);vertical-align:middle}.next-step-circle.next-step-horizontal>.next-step-item-finish .next-step-item-tail .next-step-item-tail-underlay{display:block;height:1px;position:relative}.next-step-circle.next-step-horizontal>.next-step-item-finish .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:1px;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%}.next-step-circle.next-step-horizontal>.next-step-item-finish>.next-step-item-node{padding:0 8px;width:48px;height:32px}.next-step-circle.next-step-horizontal>.next-step-item-finish>.next-step-item-body{width:100px;left:-26px;text-align:center;position:absolute}.next-step-circle.next-step-horizontal>.next-step-item-finish>.next-step-item-body>.next-step-item-title{font-size:14px;line-height:18px;margin-top:8px;font-weight:700}.next-step-circle.next-step-horizontal>.next-step-item-finish>.next-step-item-body>.next-step-item-content{margin-top:4px}.next-step-circle.next-step-horizontal>.next-step-item-disabled .next-step-item-tail{display:inline-block;clear:both;width:calc(100% - 48px);vertical-align:middle}.next-step-circle.next-step-horizontal>.next-step-item-disabled .next-step-item-tail .next-step-item-tail-underlay{display:block;height:1px;position:relative}.next-step-circle.next-step-horizontal>.next-step-item-disabled .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:1px;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%}.next-step-circle.next-step-horizontal>.next-step-item-disabled>.next-step-item-node{padding:0 8px;width:48px;height:32px}.next-step-circle.next-step-horizontal>.next-step-item-disabled>.next-step-item-body{width:100px;left:-26px;text-align:center;position:absolute}.next-step-circle.next-step-horizontal>.next-step-item-disabled>.next-step-item-body>.next-step-item-title{font-size:14px;line-height:18px;margin-top:8px;font-weight:700}.next-step-circle.next-step-horizontal>.next-step-item-disabled>.next-step-item-body>.next-step-item-content{margin-top:4px}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item{vertical-align:unset}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-wait .next-step-item:last-child .next-step-item-tail{display:none}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-wait .next-step-item-body{position:relative;display:inline-block;top:0;left:0;max-width:100px;overflow:hidden;vertical-align:top;text-align:left}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-wait .next-step-item-body .next-step-item-title{display:inline-block;padding-right:8px;margin-top:9px}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-wait .next-step-item-tail{width:calc(100% - 148px);position:absolute;right:0;margin-top:-1px}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-process .next-step-item:last-child .next-step-item-tail{display:none}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-process .next-step-item-body{position:relative;display:inline-block;top:0;left:0;max-width:100px;overflow:hidden;vertical-align:top;text-align:left}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-process .next-step-item-body .next-step-item-title{display:inline-block;padding-right:8px;margin-top:9px}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-process .next-step-item-tail{width:calc(100% - 148px);position:absolute;right:0;margin-top:-1px}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-finish .next-step-item:last-child .next-step-item-tail{display:none}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-finish .next-step-item-body{position:relative;display:inline-block;top:0;left:0;max-width:100px;overflow:hidden;vertical-align:top;text-align:left}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-finish .next-step-item-body .next-step-item-title{display:inline-block;padding-right:8px;margin-top:9px}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-finish .next-step-item-tail{width:calc(100% - 148px);position:absolute;right:0;margin-top:-1px}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-disabled .next-step-item:last-child .next-step-item-tail{display:none}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-disabled .next-step-item-body{position:relative;display:inline-block;top:0;left:0;max-width:100px;overflow:hidden;vertical-align:top;text-align:left}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-disabled .next-step-item-body .next-step-item-title{display:inline-block;padding-right:8px;margin-top:9px}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-disabled .next-step-item-tail{width:calc(100% - 148px);position:absolute;right:0;margin-top:-1px}.next-step-circle.next-step-vertical{font-size:0;display:table-cell;vertical-align:middle;position:relative}.next-step-circle.next-step-vertical .next-step-item-container{padding:0}.next-step-circle.next-step-vertical>.next-step-item:last-child .next-step-item-tail{display:block;visibility:hidden}.next-step-circle.next-step-vertical>.next-step-item-wait .next-step-item-tail{width:1px;height:0;margin:8px auto}.next-step-circle.next-step-vertical>.next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay{height:100%;width:1px;position:relative}.next-step-circle.next-step-vertical>.next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:100%;width:1px}.next-step-circle.next-step-vertical>.next-step-item-wait>.next-step-item-node{padding:8px 0;width:32px;height:48px}.next-step-circle.next-step-vertical>.next-step-item-wait>.next-step-item-body{position:absolute;top:0;left:16px;margin-left:8px}.next-step-circle.next-step-vertical>.next-step-item-wait>.next-step-item-body>.next-step-item-title{margin-top:8px;text-align:left;font-weight:700;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-circle.next-step-vertical>.next-step-item-wait>.next-step-item-body>.next-step-item-content{margin-top:4px;min-height:8px;text-align:left;font-size:12px;line-height:16px}.next-step-circle.next-step-vertical>.next-step-item-process .next-step-item-tail{width:1px;height:0;margin:8px auto}.next-step-circle.next-step-vertical>.next-step-item-process .next-step-item-tail .next-step-item-tail-underlay{height:100%;width:1px;position:relative}.next-step-circle.next-step-vertical>.next-step-item-process .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:100%;width:1px}.next-step-circle.next-step-vertical>.next-step-item-process>.next-step-item-node{padding:8px 0;width:32px;height:48px}.next-step-circle.next-step-vertical>.next-step-item-process>.next-step-item-body{position:absolute;top:0;left:16px;margin-left:8px}.next-step-circle.next-step-vertical>.next-step-item-process>.next-step-item-body>.next-step-item-title{margin-top:8px;text-align:left;font-weight:700;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-circle.next-step-vertical>.next-step-item-process>.next-step-item-body>.next-step-item-content{margin-top:4px;min-height:8px;text-align:left;font-size:12px;line-height:16px}.next-step-circle.next-step-vertical>.next-step-item-finish .next-step-item-tail{width:1px;height:0;margin:8px auto}.next-step-circle.next-step-vertical>.next-step-item-finish .next-step-item-tail .next-step-item-tail-underlay{height:100%;width:1px;position:relative}.next-step-circle.next-step-vertical>.next-step-item-finish .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:100%;width:1px}.next-step-circle.next-step-vertical>.next-step-item-finish>.next-step-item-node{padding:8px 0;width:32px;height:48px}.next-step-circle.next-step-vertical>.next-step-item-finish>.next-step-item-body{position:absolute;top:0;left:16px;margin-left:8px}.next-step-circle.next-step-vertical>.next-step-item-finish>.next-step-item-body>.next-step-item-title{margin-top:8px;text-align:left;font-weight:700;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-circle.next-step-vertical>.next-step-item-finish>.next-step-item-body>.next-step-item-content{margin-top:4px;min-height:8px;text-align:left;font-size:12px;line-height:16px}.next-step-circle.next-step-vertical>.next-step-item-disabled .next-step-item-tail{width:1px;height:0;margin:8px auto}.next-step-circle.next-step-vertical>.next-step-item-disabled .next-step-item-tail .next-step-item-tail-underlay{height:100%;width:1px;position:relative}.next-step-circle.next-step-vertical>.next-step-item-disabled .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:100%;width:1px}.next-step-circle.next-step-vertical>.next-step-item-disabled>.next-step-item-node{padding:8px 0;width:32px;height:48px}.next-step-circle.next-step-vertical>.next-step-item-disabled>.next-step-item-body{position:absolute;top:0;left:16px;margin-left:8px}.next-step-circle.next-step-vertical>.next-step-item-disabled>.next-step-item-body>.next-step-item-title{margin-top:8px;text-align:left;font-weight:700;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-circle.next-step-vertical>.next-step-item-disabled>.next-step-item-body>.next-step-item-content{margin-top:4px;min-height:8px;text-align:left;font-size:12px;line-height:16px}.next-step-dot .next-step-item-container{display:inline-block;vertical-align:middle;position:relative;padding:0 8px;font-size:0}.next-step-dot .next-step-item-container .next-step-item-node-placeholder{display:inline-block}.next-step-dot .next-step-item-container .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-dot .next-step-item-container .next-step-item-node .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-dot>.next-step-item-wait .next-step-item-tail-overlay{background:#c4c6cf}.next-step-dot>.next-step-item-wait .next-step-item-tail-underlay{background:#e6e7eb}.next-step-dot>.next-step-item-wait>.next-step-item-container .next-step-item-progress{width:12px;height:12px}.next-step-dot>.next-step-item-wait>.next-step-item-container .next-step-item-node{color:#999}.next-step-dot>.next-step-item-wait>.next-step-item-container .next-step-item-node-circle,.next-step-dot>.next-step-item-wait>.next-step-item-container .next-step-item-node-dot{background:#fff;border-color:#a0a2ad}.next-step-dot>.next-step-item-wait .next-step-item-title{color:#666;word-break:break-word}.next-step-dot>.next-step-item-wait .next-step-item-content{color:#666;font-size:12px;word-break:break-word}.next-step-dot>.next-step-item-wait .next-step-item-node-placeholder{width:12px;height:12px;position:relative}.next-step-dot>.next-step-item-wait .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-dot>.next-step-item-wait .next-step-item-node-circle{display:block;width:12px;height:12px;font-size:12px;font-weight:400;line-height:10px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-dot>.next-step-item-wait .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-dot>.next-step-item-wait .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-dot>.next-step-item-wait .next-step-item-node-dot{position:absolute;top:50%;margin-top:-6px;left:50%;margin-left:-6px;display:block;width:12px;height:12px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-dot>.next-step-item-process .next-step-item-tail-overlay{background:#c4c6cf}.next-step-dot>.next-step-item-process .next-step-item-tail-underlay{background:#e6e7eb}.next-step-dot>.next-step-item-process>.next-step-item-container .next-step-item-progress{width:12px;height:12px}.next-step-dot>.next-step-item-process>.next-step-item-container .next-step-item-node{color:#5584ff}.next-step-dot>.next-step-item-process>.next-step-item-container .next-step-item-node-circle,.next-step-dot>.next-step-item-process>.next-step-item-container .next-step-item-node-dot{background:#5584ff;border-color:#5584ff}.next-step-dot>.next-step-item-process .next-step-item-title{color:#333;word-break:break-word}.next-step-dot>.next-step-item-process .next-step-item-content{color:#333;font-size:12px;word-break:break-word}.next-step-dot>.next-step-item-process .next-step-item-node-placeholder{width:12px;height:12px;position:relative}.next-step-dot>.next-step-item-process .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-dot>.next-step-item-process .next-step-item-node-circle{display:block;width:12px;height:12px;font-size:12px;font-weight:400;line-height:10px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-dot>.next-step-item-process .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-dot>.next-step-item-process .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-dot>.next-step-item-process .next-step-item-node-dot{position:absolute;top:50%;margin-top:-6px;left:50%;margin-left:-6px;display:block;width:12px;height:12px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-dot>.next-step-item-finish .next-step-item-tail-overlay{background:#5584ff}.next-step-dot>.next-step-item-finish .next-step-item-tail-underlay{background:#e6e7eb}.next-step-dot>.next-step-item-finish>.next-step-item-container .next-step-item-progress{width:12px;height:12px}.next-step-dot>.next-step-item-finish>.next-step-item-container .next-step-item-node{color:#5584ff}.next-step-dot>.next-step-item-finish>.next-step-item-container .next-step-item-node-circle,.next-step-dot>.next-step-item-finish>.next-step-item-container .next-step-item-node-dot{background:#fff;border-color:#5584ff}.next-step-dot>.next-step-item-finish .next-step-item-title{color:#666;word-break:break-word}.next-step-dot>.next-step-item-finish .next-step-item-content{color:#666;font-size:12px;word-break:break-word}.next-step-dot>.next-step-item-finish .next-step-item-node-placeholder{width:12px;height:12px;position:relative}.next-step-dot>.next-step-item-finish .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-dot>.next-step-item-finish .next-step-item-node-circle{display:block;width:12px;height:12px;font-size:12px;font-weight:400;line-height:10px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-dot>.next-step-item-finish .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-dot>.next-step-item-finish .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-dot>.next-step-item-finish .next-step-item-node-dot{position:absolute;top:50%;margin-top:-6px;left:50%;margin-left:-6px;display:block;width:12px;height:12px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-dot .next-step-item-disabled .next-step-item-tail-overlay,.next-step-dot .next-step-item-disabled .next-step-item-tail-underlay{background:#e6e7eb}.next-step-dot .next-step-item-disabled>.next-step-item-container .next-step-item-progress{width:12px;height:12px}.next-step-dot .next-step-item-disabled>.next-step-item-container .next-step-item-node{color:#e6e7eb}.next-step-dot .next-step-item-disabled>.next-step-item-container .next-step-item-node-circle,.next-step-dot .next-step-item-disabled>.next-step-item-container .next-step-item-node-dot{background:#fff;border-color:#dcdee3}.next-step-dot .next-step-item-disabled .next-step-item-title{color:#ccc;word-break:break-word}.next-step-dot .next-step-item-disabled .next-step-item-content{color:#ccc;font-size:12px;word-break:break-word}.next-step-dot .next-step-item-disabled .next-step-item-node-placeholder{width:12px;height:12px;position:relative}.next-step-dot .next-step-item-disabled .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-dot .next-step-item-disabled .next-step-item-node-circle{display:block;width:12px;height:12px;font-size:12px;font-weight:400;line-height:10px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-dot .next-step-item-disabled .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-dot .next-step-item-disabled .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-dot .next-step-item-disabled .next-step-item-node-dot{position:absolute;top:50%;margin-top:-6px;left:50%;margin-left:-6px;display:block;width:12px;height:12px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-dot .next-step-item-disabled .next-step-item-node,.next-step-dot .next-step-item-disabled .next-step-item-node-placeholder{cursor:not-allowed}.next-step-dot .next-step-item-read-only .next-step-item-node,.next-step-dot .next-step-item-read-only .next-step-item-node-placeholder{cursor:default}.next-step-dot .next-step-item-last .next-step-item-tail{display:none}.next-step-dot.next-step-horizontal{text-align:center;white-space:nowrap}.next-step-dot.next-step-horizontal>.next-step-item .next-step-item-content,.next-step-dot.next-step-horizontal>.next-step-item .next-step-item-title{white-space:normal}.next-step-dot.next-step-horizontal .next-step-item-node .next-icon{vertical-align:middle}.next-step-dot.next-step-horizontal>.next-step-item-wait .next-step-item-tail{display:inline-block;clear:both;width:calc(100% - 28px);vertical-align:middle}.next-step-dot.next-step-horizontal>.next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay{display:block;height:1px;position:relative}.next-step-dot.next-step-horizontal>.next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:1px;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%}.next-step-dot.next-step-horizontal>.next-step-item-wait>.next-step-item-node{padding:0 8px;width:28px;height:12px}.next-step-dot.next-step-horizontal>.next-step-item-wait>.next-step-item-body{width:100px;left:-36px;text-align:center;position:absolute}.next-step-dot.next-step-horizontal>.next-step-item-wait>.next-step-item-body>.next-step-item-title{font-size:12px;line-height:16px;margin-top:8px;font-weight:700}.next-step-dot.next-step-horizontal>.next-step-item-wait>.next-step-item-body>.next-step-item-content{margin-top:4px}.next-step-dot.next-step-horizontal>.next-step-item-process .next-step-item-tail{display:inline-block;clear:both;width:calc(100% - 28px);vertical-align:middle}.next-step-dot.next-step-horizontal>.next-step-item-process .next-step-item-tail .next-step-item-tail-underlay{display:block;height:1px;position:relative}.next-step-dot.next-step-horizontal>.next-step-item-process .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:1px;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%}.next-step-dot.next-step-horizontal>.next-step-item-process>.next-step-item-node{padding:0 8px;width:28px;height:12px}.next-step-dot.next-step-horizontal>.next-step-item-process>.next-step-item-body{width:100px;left:-36px;text-align:center;position:absolute}.next-step-dot.next-step-horizontal>.next-step-item-process>.next-step-item-body>.next-step-item-title{font-size:12px;line-height:16px;margin-top:8px;font-weight:700}.next-step-dot.next-step-horizontal>.next-step-item-process>.next-step-item-body>.next-step-item-content{margin-top:4px}.next-step-dot.next-step-horizontal>.next-step-item-finish .next-step-item-tail{display:inline-block;clear:both;width:calc(100% - 28px);vertical-align:middle}.next-step-dot.next-step-horizontal>.next-step-item-finish .next-step-item-tail .next-step-item-tail-underlay{display:block;height:1px;position:relative}.next-step-dot.next-step-horizontal>.next-step-item-finish .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:1px;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%}.next-step-dot.next-step-horizontal>.next-step-item-finish>.next-step-item-node{padding:0 8px;width:28px;height:12px}.next-step-dot.next-step-horizontal>.next-step-item-finish>.next-step-item-body{width:100px;left:-36px;text-align:center;position:absolute}.next-step-dot.next-step-horizontal>.next-step-item-finish>.next-step-item-body>.next-step-item-title{font-size:12px;line-height:16px;margin-top:8px;font-weight:700}.next-step-dot.next-step-horizontal>.next-step-item-finish>.next-step-item-body>.next-step-item-content{margin-top:4px}.next-step-dot.next-step-horizontal>.next-step-item-disabled .next-step-item-tail{display:inline-block;clear:both;width:calc(100% - 28px);vertical-align:middle}.next-step-dot.next-step-horizontal>.next-step-item-disabled .next-step-item-tail .next-step-item-tail-underlay{display:block;height:1px;position:relative}.next-step-dot.next-step-horizontal>.next-step-item-disabled .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:1px;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%}.next-step-dot.next-step-horizontal>.next-step-item-disabled>.next-step-item-node{padding:0 8px;width:28px;height:12px}.next-step-dot.next-step-horizontal>.next-step-item-disabled>.next-step-item-body{width:100px;left:-36px;text-align:center;position:absolute}.next-step-dot.next-step-horizontal>.next-step-item-disabled>.next-step-item-body>.next-step-item-title{font-size:12px;line-height:16px;margin-top:8px;font-weight:700}.next-step-dot.next-step-horizontal>.next-step-item-disabled>.next-step-item-body>.next-step-item-content{margin-top:4px}.next-step-dot.next-step-vertical{padding:0 0 0 4px;font-size:0;display:table-cell;position:relative}.next-step-dot.next-step-vertical .next-step-item-container{padding:0}.next-step-dot.next-step-vertical>.next-step-item:last-child .next-step-item-tail{display:block;visibility:hidden}.next-step-dot.next-step-vertical>.next-step-item-wait .next-step-item-tail{width:1px;height:0;margin:8px auto}.next-step-dot.next-step-vertical>.next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay{height:100%;width:1px;position:relative}.next-step-dot.next-step-vertical>.next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:100%;width:1px}.next-step-dot.next-step-vertical>.next-step-item-wait>.next-step-item-node{padding:8px 0;width:12px;height:28px}.next-step-dot.next-step-vertical>.next-step-item-wait>.next-step-item-body{position:absolute;top:0;left:6px;margin-left:8px}.next-step-dot.next-step-vertical>.next-step-item-wait>.next-step-item-body>.next-step-item-title{margin-top:0;font-weight:700;text-align:left;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-dot.next-step-vertical>.next-step-item-wait>.next-step-item-body>.next-step-item-content{margin-top:8px;min-height:8px;text-align:left;font-size:12px;line-height:16px}.next-step-dot.next-step-vertical>.next-step-item-process .next-step-item-tail{width:1px;height:0;margin:8px auto}.next-step-dot.next-step-vertical>.next-step-item-process .next-step-item-tail .next-step-item-tail-underlay{height:100%;width:1px;position:relative}.next-step-dot.next-step-vertical>.next-step-item-process .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:100%;width:1px}.next-step-dot.next-step-vertical>.next-step-item-process>.next-step-item-node{padding:8px 0;width:12px;height:28px}.next-step-dot.next-step-vertical>.next-step-item-process>.next-step-item-body{position:absolute;top:0;left:6px;margin-left:8px}.next-step-dot.next-step-vertical>.next-step-item-process>.next-step-item-body>.next-step-item-title{margin-top:0;font-weight:700;text-align:left;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-dot.next-step-vertical>.next-step-item-process>.next-step-item-body>.next-step-item-content{margin-top:8px;min-height:8px;text-align:left;font-size:12px;line-height:16px}.next-step-dot.next-step-vertical>.next-step-item-finish .next-step-item-tail{width:1px;height:0;margin:8px auto}.next-step-dot.next-step-vertical>.next-step-item-finish .next-step-item-tail .next-step-item-tail-underlay{height:100%;width:1px;position:relative}.next-step-dot.next-step-vertical>.next-step-item-finish .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:100%;width:1px}.next-step-dot.next-step-vertical>.next-step-item-finish>.next-step-item-node{padding:8px 0;width:12px;height:28px}.next-step-dot.next-step-vertical>.next-step-item-finish>.next-step-item-body{position:absolute;top:0;left:6px;margin-left:8px}.next-step-dot.next-step-vertical>.next-step-item-finish>.next-step-item-body>.next-step-item-title{margin-top:0;font-weight:700;text-align:left;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-dot.next-step-vertical>.next-step-item-finish>.next-step-item-body>.next-step-item-content{margin-top:8px;min-height:8px;text-align:left;font-size:12px;line-height:16px}.next-step-dot.next-step-vertical>.next-step-item-disabled .next-step-item-tail{width:1px;height:0;margin:8px auto}.next-step-dot.next-step-vertical>.next-step-item-disabled .next-step-item-tail .next-step-item-tail-underlay{height:100%;width:1px;position:relative}.next-step-dot.next-step-vertical>.next-step-item-disabled .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:100%;width:1px}.next-step-dot.next-step-vertical>.next-step-item-disabled>.next-step-item-node{padding:8px 0;width:12px;height:28px}.next-step-dot.next-step-vertical>.next-step-item-disabled>.next-step-item-body{position:absolute;top:0;left:6px;margin-left:8px}.next-step-dot.next-step-vertical>.next-step-item-disabled>.next-step-item-body>.next-step-item-title{margin-top:0;font-weight:700;text-align:left;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-dot.next-step-vertical>.next-step-item-disabled>.next-step-item-body>.next-step-item-content{margin-top:8px;min-height:8px;text-align:left;font-size:12px;line-height:16px}.next-step-horizontal[dir=rtl]>.next-step-item{text-align:right}.next-step-arrow[dir=rtl] .next-step-item{height:32px;line-height:32px;margin-left:4px;margin-right:16px}.next-step-arrow[dir=rtl] .next-step-item:before{right:-16px;left:auto;border:16px solid transparent;border-right-color:transparent}.next-step-arrow[dir=rtl] .next-step-item:after{left:-32px;right:auto;border-top:16px solid transparent;border-bottom:16px solid transparent;border-right:16px solid transparent}.next-step-arrow[dir=rtl]>.next-step-item-wait{background:#ebecf0}.next-step-arrow[dir=rtl]>.next-step-item-wait .next-step-item-node-dot{right:50%;left:auto}.next-step-arrow[dir=rtl]>.next-step-item-wait:before{border:16px solid #ebecf0;border-right-color:transparent}.next-step-arrow[dir=rtl]>.next-step-item-wait:after{border-right-color:#ebecf0;border-left-color:transparent}.next-step-arrow[dir=rtl]>.next-step-item-process{background:#5584ff}.next-step-arrow[dir=rtl]>.next-step-item-process .next-step-item-node-dot{right:50%;left:auto}.next-step-arrow[dir=rtl]>.next-step-item-process:before{border:16px solid #5584ff;border-right-color:transparent}.next-step-arrow[dir=rtl]>.next-step-item-process:after{border-right-color:#5584ff;border-left-color:transparent}.next-step-arrow[dir=rtl]>.next-step-item-finish{background:#dee8ff}.next-step-arrow[dir=rtl]>.next-step-item-finish .next-step-item-node-dot{right:50%;left:auto}.next-step-arrow[dir=rtl]>.next-step-item-finish:before{border:16px solid #dee8ff;border-right-color:transparent}.next-step-arrow[dir=rtl]>.next-step-item-finish:after{border-right-color:#dee8ff;border-left-color:transparent}.next-step-arrow[dir=rtl] .next-step-item-disabled{background:#f7f8fa}.next-step-arrow[dir=rtl] .next-step-item-disabled .next-step-item-node-dot{right:50%;left:auto}.next-step-arrow[dir=rtl] .next-step-item-disabled:before{border:16px solid #f7f8fa;border-right-color:transparent}.next-step-arrow[dir=rtl] .next-step-item-disabled:after{border-right-color:#f7f8fa;border-left-color:transparent}.next-step-arrow[dir=rtl] .next-step-item-first{margin-right:0}.next-step-arrow[dir=rtl] .next-step-item-last{margin-left:0}.next-step-circle[dir=rtl] .next-step-item-disabled .next-step-item-node-dot,.next-step-circle[dir=rtl]>.next-step-item-finish .next-step-item-node-dot,.next-step-circle[dir=rtl]>.next-step-item-process .next-step-item-node-dot,.next-step-circle[dir=rtl]>.next-step-item-wait .next-step-item-node-dot{right:50%;left:auto}.next-step-circle[dir=rtl].next-step-horizontal>.next-step-item-disabled>.next-step-item-body,.next-step-circle[dir=rtl].next-step-horizontal>.next-step-item-finish>.next-step-item-body,.next-step-circle[dir=rtl].next-step-horizontal>.next-step-item-process>.next-step-item-body,.next-step-circle[dir=rtl].next-step-horizontal>.next-step-item-wait>.next-step-item-body{right:-26px;left:auto}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-wait .next-step-item-body{left:auto;right:0;text-align:right}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-wait .next-step-item-body .next-step-item-title{padding-left:8px;padding-right:0}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-wait .next-step-item-tail{left:0;right:auto}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-process .next-step-item-body{left:auto;right:0;text-align:right}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-process .next-step-item-body .next-step-item-title{padding-left:8px;padding-right:0}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-process .next-step-item-tail{left:0;right:auto}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-finish .next-step-item-body{left:auto;right:0;text-align:right}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-finish .next-step-item-body .next-step-item-title{padding-left:8px;padding-right:0}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-finish .next-step-item-tail{left:0;right:auto}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-disabled .next-step-item-body{left:auto;right:0;text-align:right}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-disabled .next-step-item-body .next-step-item-title{padding-left:8px;padding-right:0}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-disabled .next-step-item-tail{left:0;right:auto}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-wait>.next-step-item-body{right:16px;left:auto;margin-right:8px;margin-left:0}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-wait>.next-step-item-body>.next-step-item-title{text-align:right;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-wait>.next-step-item-body>.next-step-item-content{text-align:right}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-process>.next-step-item-body{right:16px;left:auto;margin-right:8px;margin-left:0}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-process>.next-step-item-body>.next-step-item-title{text-align:right;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-process>.next-step-item-body>.next-step-item-content{text-align:right}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-finish>.next-step-item-body{right:16px;left:auto;margin-right:8px;margin-left:0}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-finish>.next-step-item-body>.next-step-item-title{text-align:right;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-finish>.next-step-item-body>.next-step-item-content{text-align:right}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-disabled>.next-step-item-body{right:16px;left:auto;margin-right:8px;margin-left:0}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-disabled>.next-step-item-body>.next-step-item-title{text-align:right;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-disabled>.next-step-item-body>.next-step-item-content{text-align:right}.next-step-dot[dir=rtl] .next-step-item-disabled .next-step-item-node-dot,.next-step-dot[dir=rtl]>.next-step-item-finish .next-step-item-node-dot,.next-step-dot[dir=rtl]>.next-step-item-process .next-step-item-node-dot,.next-step-dot[dir=rtl]>.next-step-item-wait .next-step-item-node-dot{right:50%;left:auto}.next-step-dot[dir=rtl].next-step-horizontal>.next-step-item-disabled>.next-step-item-body,.next-step-dot[dir=rtl].next-step-horizontal>.next-step-item-finish>.next-step-item-body,.next-step-dot[dir=rtl].next-step-horizontal>.next-step-item-process>.next-step-item-body,.next-step-dot[dir=rtl].next-step-horizontal>.next-step-item-wait>.next-step-item-body{right:-36px;left:auto}.next-step-dot[dir=rtl].next-step-vertical{padding:0 4px 0 0}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-wait>.next-step-item-body{right:6px;left:auto;margin-right:8px;margin-left:0}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-wait>.next-step-item-body>.next-step-item-title{text-align:right;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-wait>.next-step-item-body>.next-step-item-content{text-align:right}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-process>.next-step-item-body{right:6px;left:auto;margin-right:8px;margin-left:0}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-process>.next-step-item-body>.next-step-item-title{text-align:right;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-process>.next-step-item-body>.next-step-item-content{text-align:right}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-finish>.next-step-item-body{right:6px;left:auto;margin-right:8px;margin-left:0}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-finish>.next-step-item-body>.next-step-item-title{text-align:right;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-finish>.next-step-item-body>.next-step-item-content{text-align:right}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-disabled>.next-step-item-body{right:6px;left:auto;margin-right:8px;margin-left:0}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-disabled>.next-step-item-body>.next-step-item-title{text-align:right;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-disabled>.next-step-item-body>.next-step-item-content{text-align:right}.next-switch:after[dir=rtl]{content:" ";-webkit-transition:all .4s cubic-bezier(.78,.14,.15,.86);transition:all .4s cubic-bezier(.78,.14,.15,.86);-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center}.next-switch-medium[dir=rtl]:after,.next-switch-small[dir=rtl]:after{right:100%;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.next-switch-on[dir=rtl]>.next-switch-children{right:10px;left:auto;color:#fff}.next-switch-on[disabled][dir=rtl]:after{left:0;right:100%;-webkit-box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);box-shadow:1px 1px 3px 0 rgba(0,0,0,.12)}.next-switch-on.next-switch-small[dir=rtl]>.next-switch-children{right:6px;left:auto}.next-switch-off[dir=rtl]:after{right:0;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-box-shadow:-1px 0 3px 0 rgba(0,0,0,.12);box-shadow:-1px 0 3px 0 rgba(0,0,0,.12)}.next-switch-off[dir=rtl]>.next-switch-children{left:10px;right:auto}.next-switch-off.next-switch-small[dir=rtl]>.next-switch-children{left:5px;right:auto}.next-switch{outline:none;text-align:left;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);overflow:hidden;cursor:pointer}.next-switch,.next-switch *,.next-switch :after,.next-switch :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-switch:after{content:" ";-webkit-transition:all .4s cubic-bezier(.78,.14,.15,.86);transition:all .4s cubic-bezier(.78,.14,.15,.86);-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}.next-switch-medium{position:relative;display:inline-block;width:56px;height:26px}.next-switch-medium,.next-switch-medium:after{border:1px solid transparent;border-radius:20px}.next-switch-medium:after{position:absolute;left:100%;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);width:24px;height:24px;-webkit-box-sizing:border-box;box-sizing:border-box}.next-switch-medium>.next-switch-children{font-size:12px;position:absolute;height:24px;line-height:24px}.next-switch-small{position:relative;display:inline-block;width:44px;height:22px}.next-switch-small,.next-switch-small:after{border:1px solid transparent;border-radius:20px}.next-switch-small:after{position:absolute;left:100%;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);width:20px;height:20px;-webkit-box-sizing:border-box;box-sizing:border-box}.next-switch-small>.next-switch-children{font-size:12px;position:absolute;height:20px;line-height:20px}.next-switch-on{background-color:#5584ff}.next-switch-on:after{-webkit-box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#fff;border-color:transparent}.next-switch-on>.next-switch-children{left:10px;color:#fff}.next-switch-on:focus,.next-switch-on:hover{background-color:#3e71f7}.next-switch-on:focus:after,.next-switch-on:hover:after{background-color:#fff}.next-switch-on.next-switch-small>.next-switch-children{left:6px}.next-switch-on[disabled]{background-color:#ebecf0;cursor:not-allowed}.next-switch-on[disabled]:after{right:0;-webkit-box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#f7f8fa;border-color:#e6e7eb}.next-switch-on[disabled]>.next-switch-children{color:#ccc}.next-switch-off{background-color:#fff;border-color:#c4c6cf}.next-switch-off:focus,.next-switch-off:hover{background-color:#f2f3f7;border-color:#c4c6cf}.next-switch-off:after{left:0;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#fff;border-color:transparent}.next-switch-off:after:focus,.next-switch-off:after:hover{background-color:#fff}.next-switch-off>.next-switch-children{right:10px;color:#999}.next-switch-off[disabled]{background-color:#f7f8fa;cursor:not-allowed}.next-switch-off[disabled]:after{-webkit-box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#f7f8fa;border-color:#e6e7eb}.next-switch-off[disabled]>.next-switch-children{color:#c4c6cf}.next-switch-off.next-switch-small>.next-switch-children{right:5px}.next-tabs{width:100%}.next-tabs,.next-tabs *,.next-tabs :after,.next-tabs :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tabs-bar{outline:none}.next-tabs-bar-popup{overflow-y:auto;max-height:480px}.next-tabs-nav-container{position:relative}.next-tabs-nav-container:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-tabs-nav-wrap{overflow:hidden}.next-tabs-nav-scroll{overflow:hidden;white-space:nowrap}.next-tabs-nav{display:inline-block;position:relative;-webkit-transition:all .4s cubic-bezier(.23,1,.32,1);transition:all .4s cubic-bezier(.23,1,.32,1);list-style:none;padding:0;margin:0}.next-tabs-nav-appear,.next-tabs-nav-enter{-webkit-animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-tabs-nav-leave{-webkit-animation:fadeOutLeft .2s cubic-bezier(.78,.14,.15,.86);animation:fadeOutLeft .2s cubic-bezier(.78,.14,.15,.86);-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-tabs-tab{display:inline-block;position:relative;-webkit-transition:all .4s cubic-bezier(.23,1,.32,1);transition:all .4s cubic-bezier(.23,1,.32,1)}.next-tabs-tab-inner{position:relative;cursor:pointer;text-decoration:none}.next-tabs-tab:before{content:"";position:absolute;-webkit-transition:all .4s cubic-bezier(.23,1,.32,1);transition:all .4s cubic-bezier(.23,1,.32,1)}.next-tabs-tab.active{font-weight:400}.next-tabs-tab .next-tabs-tab-close{color:#666}.next-tabs-tab .next-tabs-tab-close:hover{color:#333}.next-tabs-tab.active .next-tabs-tab-close{color:#5584ff}.next-tabs-tab.disabled .next-tabs-tab-close{color:#dcdee3}.next-tabs-tab:focus{outline:none}.next-tabs-tabpane{display:none}.next-tabs-tabpane.active{display:block}.next-tabs-btn-down,.next-tabs-btn-next,.next-tabs-btn-prev{position:absolute;top:0;cursor:pointer;padding:0;border:0;outline:none;height:100%;background-color:transparent;border-color:transparent}.next-tabs-btn-down,.next-tabs-btn-down.visited,.next-tabs-btn-down:link,.next-tabs-btn-down:visited,.next-tabs-btn-next,.next-tabs-btn-next.visited,.next-tabs-btn-next:link,.next-tabs-btn-next:visited,.next-tabs-btn-prev,.next-tabs-btn-prev.visited,.next-tabs-btn-prev:link,.next-tabs-btn-prev:visited{color:#666}.next-tabs-btn-down.active,.next-tabs-btn-down.hover,.next-tabs-btn-down:active,.next-tabs-btn-down:focus,.next-tabs-btn-down:hover,.next-tabs-btn-next.active,.next-tabs-btn-next.hover,.next-tabs-btn-next:active,.next-tabs-btn-next:focus,.next-tabs-btn-next:hover,.next-tabs-btn-prev.active,.next-tabs-btn-prev.hover,.next-tabs-btn-prev:active,.next-tabs-btn-prev:focus,.next-tabs-btn-prev:hover{color:#333;background-color:transparent;border-color:transparent;text-decoration:none}.next-tabs-btn-down.disabled,.next-tabs-btn-next.disabled,.next-tabs-btn-prev.disabled{cursor:not-allowed;color:#dcdee3}.next-tabs-btn-next{right:8px}.next-tabs-btn-prev{right:32px}.next-tabs-btn-down{right:8px}.next-tabs-content{overflow:hidden}.next-tabs-vertical>.next-tabs-bar .next-tabs-nav{width:100%}.next-tabs-vertical>.next-tabs-bar .next-tabs-tab{display:block}.next-tabs.next-medium .next-tabs-nav-container-scrolling{padding-right:60px}.next-tabs.next-medium .next-tabs-tab-inner{font-size:12px;padding:12px 16px}.next-tabs.next-medium .next-tabs-tab-inner .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-tabs.next-medium .next-tabs-tab-inner .next-tabs-tab-close{padding-left:8px}.next-tabs.next-medium .next-tabs-tab-inner .next-tabs-tab-close:before{width:12px;font-size:12px;line-height:inherit}.next-tabs.next-medium .next-tabs-btn-down .next-icon:before,.next-tabs.next-medium .next-tabs-btn-next .next-icon:before,.next-tabs.next-medium .next-tabs-btn-prev .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-tabs.next-small .next-tabs-nav-container-scrolling{padding-right:56px}.next-tabs.next-small .next-tabs-tab-inner{font-size:12px;padding:8px 12px}.next-tabs.next-small .next-tabs-tab-inner .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close{padding-left:8px}.next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close:before{width:16px;font-size:16px}}.next-tabs.next-small .next-tabs-btn-down .next-icon:before,.next-tabs.next-small .next-tabs-btn-next .next-icon:before,.next-tabs.next-small .next-tabs-btn-prev .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tabs-pure>.next-tabs-bar{border-bottom:1px solid #dcdee3;background-color:transparent}.next-tabs-pure>.next-tabs-bar .next-tabs-nav-container{margin-bottom:-1px;-webkit-box-shadow:none;box-shadow:none}.next-tabs-pure>.next-tabs-bar .next-tabs-nav-container .next-tabs-tab{color:#666;background-color:transparent}.next-tabs-pure>.next-tabs-bar .next-tabs-nav-container .next-tabs-tab:hover{cursor:pointer;color:#333;background-color:transparent}.next-tabs-pure>.next-tabs-bar .next-tabs-nav-container .next-tabs-tab.active{z-index:1;color:#5584ff;background-color:transparent}.next-tabs-pure>.next-tabs-bar .next-tabs-nav-container .next-tabs-tab.disabled{pointer-events:none;cursor:default;color:#dcdee3;background:transparent}.next-tabs-pure>.next-tabs-bar .next-tabs-nav-container .next-tabs-tab:before{border-radius:0;width:0;border-bottom:2px solid #5584ff;left:50%;bottom:0}.next-tabs-pure>.next-tabs-bar .next-tabs-nav-container .next-tabs-tab.active:before{width:100%;left:0}.next-tabs-wrapped>.next-tabs-bar{background:transparent}.next-tabs-wrapped>.next-tabs-bar .next-tabs-tab{color:#666;background-color:#f2f3f7}.next-tabs-wrapped>.next-tabs-bar .next-tabs-tab:hover{cursor:pointer;color:#333;background-color:#ebecf0}.next-tabs-wrapped>.next-tabs-bar .next-tabs-tab.active{z-index:1;color:#5584ff;background-color:#fff}.next-tabs-wrapped>.next-tabs-bar .next-tabs-tab.disabled{pointer-events:none;cursor:default;color:#ccc;background:#f7f8fa}.next-tabs-wrapped>.next-tabs-bar .next-tabs-tab .next-tabs-tab-close{color:#666}.next-tabs-wrapped>.next-tabs-bar .next-tabs-tab .next-tabs-tab-close:hover{color:#333}.next-tabs-wrapped>.next-tabs-bar .next-tabs-tab.active .next-tabs-tab-close{color:#5584ff}.next-tabs-wrapped>.next-tabs-bar .next-tabs-tab.disabled .next-tabs-tab-close{color:#dcdee3}.next-tabs-wrapped:after,.next-tabs-wrapped:before{content:"";display:table}.next-tabs-wrapped:after{clear:both}.next-tabs-wrapped.next-tabs-top>.next-tabs-bar,.next-tabs-wrapped>.next-tabs-content{position:relative}.next-tabs-wrapped.next-tabs-top>.next-tabs-bar .next-tabs-nav-extra{position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.next-tabs-wrapped.next-tabs-top>.next-tabs-bar .next-tabs-tab{margin-right:4px;border:1px solid #dcdee3;border-radius:3px 3px 0 0;border-width:1px}.next-tabs-wrapped.next-tabs-top>.next-tabs-bar .next-tabs-tab:hover{border-color:#c4c6cf}.next-tabs-wrapped.next-tabs-top>.next-tabs-bar .next-tabs-tab.active{border-color:#dcdee3 #dcdee3 #fff}.next-tabs-wrapped.next-tabs-top>.next-tabs-bar .next-tabs-tab:before{border-radius:3px;width:0;border-top:2px solid #5584ff;left:50%;top:-1px}.next-tabs-wrapped.next-tabs-top>.next-tabs-bar .next-tabs-tab.active:before{width:calc(100% - 2 * 3px);left:3px}.next-tabs-wrapped.next-tabs-top>.next-tabs-bar .next-tabs-tab.active{border-width:1px}.next-tabs-wrapped.next-tabs-top>.next-tabs-content{top:-1px;border-top:1px solid #dcdee3}.next-tabs-wrapped.next-tabs-bottom>.next-tabs-bar{position:relative}.next-tabs-wrapped.next-tabs-bottom>.next-tabs-bar .next-tabs-nav-extra{position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.next-tabs-wrapped.next-tabs-bottom>.next-tabs-bar .next-tabs-tab{margin-right:4px;border:1px solid #dcdee3;border-radius:0 0 3px 3px}.next-tabs-wrapped.next-tabs-bottom>.next-tabs-bar .next-tabs-tab:hover{border-color:#c4c6cf}.next-tabs-wrapped.next-tabs-bottom>.next-tabs-bar .next-tabs-tab.active{border-color:#fff #dcdee3 #dcdee3}.next-tabs-wrapped.next-tabs-bottom>.next-tabs-bar .next-tabs-tab:before{border-radius:3px;width:0;border-bottom:2px solid #5584ff;left:50%;bottom:-1px}.next-tabs-wrapped.next-tabs-bottom>.next-tabs-bar .next-tabs-tab.active:before{width:calc(100% - 2 * 3px);left:3px}.next-tabs-wrapped.next-tabs-bottom>.next-tabs-content{top:1px;border-bottom:1px solid #dcdee3}.next-tabs-wrapped.next-tabs-left>.next-tabs-bar{float:left}.next-tabs-wrapped.next-tabs-left>.next-tabs-bar .next-tabs-tab{float:none;margin-bottom:4px;border:1px solid #dcdee3;border-radius:3px 0 0 3px;border-width:1px}.next-tabs-wrapped.next-tabs-left>.next-tabs-bar .next-tabs-tab:hover{border-color:#c4c6cf}.next-tabs-wrapped.next-tabs-left>.next-tabs-bar .next-tabs-tab.active{border-color:#dcdee3 #fff #dcdee3 #dcdee3}.next-tabs-wrapped.next-tabs-left>.next-tabs-bar .next-tabs-tab:before{border-radius:3px;height:0;border-left:2px solid #5584ff;top:50%;left:-1px}.next-tabs-wrapped.next-tabs-left>.next-tabs-bar .next-tabs-tab.active:before{height:calc(100% - 2 * 3px);top:3px}.next-tabs-wrapped.next-tabs-left>.next-tabs-bar .next-tabs-tab.active{border-width:1px}.next-tabs-wrapped.next-tabs-left>.next-tabs-content{right:1px;border-left:1px solid #dcdee3}.next-tabs-wrapped.next-tabs-right>.next-tabs-bar{float:right}.next-tabs-wrapped.next-tabs-right>.next-tabs-bar .next-tabs-tab{float:none;margin-bottom:4px;border:1px solid #dcdee3;border-radius:0 3px 3px 0;border-width:1px}.next-tabs-wrapped.next-tabs-right>.next-tabs-bar .next-tabs-tab:hover{border-color:#c4c6cf}.next-tabs-wrapped.next-tabs-right>.next-tabs-bar .next-tabs-tab.active{border-color:#dcdee3 #dcdee3 #dcdee3 #fff}.next-tabs-wrapped.next-tabs-right>.next-tabs-bar .next-tabs-tab:before{border-radius:3px;height:0;border-right:2px solid #5584ff;top:50%;right:-1px}.next-tabs-wrapped.next-tabs-right>.next-tabs-bar .next-tabs-tab.active:before{height:calc(100% - 2 * 3px);top:3px}.next-tabs-wrapped.next-tabs-right>.next-tabs-bar .next-tabs-tab.active{border-width:1px}.next-tabs-wrapped.next-tabs-right>.next-tabs-content{right:-1px;border-right:1px solid #dcdee3}.next-tabs-capsule>.next-tabs-bar .next-tabs-tab{-webkit-transition:background-color .4s cubic-bezier(.23,1,.32,1),border-color .4s cubic-bezier(.23,1,.32,1);transition:background-color .4s cubic-bezier(.23,1,.32,1),border-color .4s cubic-bezier(.23,1,.32,1);border-top:1px solid #c4c6cf;border-bottom:1px solid #c4c6cf;border-left:1px solid #c4c6cf;color:#333;background-color:#f2f3f7}.next-tabs-capsule>.next-tabs-bar .next-tabs-tab:first-child{border-radius:3px 0 0 3px}.next-tabs-capsule>.next-tabs-bar .next-tabs-tab:last-child{border-radius:0 3px 3px 0;border-right:1px solid #c4c6cf}.next-tabs-capsule>.next-tabs-bar .next-tabs-tab.active{margin-right:-1px;border-right:1px solid #c4c6cf;border-color:#5584ff}.next-tabs-capsule>.next-tabs-bar .next-tabs-tab.disabled{border-color:#e6e7eb}.next-tabs-capsule>.next-tabs-bar .next-tabs-tab:hover{cursor:pointer;color:#333;background-color:#ebecf0}.next-tabs-capsule>.next-tabs-bar .next-tabs-tab.active{z-index:1;color:#fff;background-color:#5584ff}.next-tabs-capsule>.next-tabs-bar .next-tabs-tab.disabled{pointer-events:none;cursor:default;color:#ccc;background:#f7f8fa}.next-tabs-text>.next-tabs-bar .next-tabs-tab{color:#666;background-color:transparent}.next-tabs-text>.next-tabs-bar .next-tabs-tab:hover{cursor:pointer;color:#333;background-color:transparent}.next-tabs-text>.next-tabs-bar .next-tabs-tab.active{z-index:1;color:#5584ff;background-color:transparent}.next-tabs-text>.next-tabs-bar .next-tabs-tab.disabled{pointer-events:none;cursor:default;color:#ccc;background:transparent}.next-tabs-text>.next-tabs-bar .next-tabs-tab:not(:last-child):after{content:" ";position:absolute;right:0;top:calc(50% - 4px);width:1px;height:8px;background-color:#dcdee3}.next-tabs-pure>.next-tabs-bar{position:relative}.next-tabs-pure>.next-tabs-bar .next-tabs-nav-extra{position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.next-tabs-capsule>.next-tabs-bar{position:relative}.next-tabs-capsule>.next-tabs-bar .next-tabs-nav-extra{position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.next-tabs-text>.next-tabs-bar{position:relative}.next-tabs-text>.next-tabs-bar .next-tabs-nav-extra{position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.next-tabs[dir=rtl].next-medium .next-tabs-nav-container-scrolling{padding-left:60px;padding-right:0}.next-tabs[dir=rtl].next-medium .next-tabs-tab-close{padding-right:8px;padding-left:0}.next-tabs[dir=rtl].next-small .next-tabs-nav-container-scrolling{padding-left:56px;padding-right:0}.next-tabs[dir=rtl].next-small .next-tabs-tab-close{padding-right:8px;padding-left:0}.next-tabs[dir=rtl].next-tabs-wrapped.next-tabs-bottom>.next-tabs-bar .next-tabs-nav-extra,.next-tabs[dir=rtl].next-tabs-wrapped.next-tabs-top>.next-tabs-bar .next-tabs-nav-extra,.next-tabs[dir=rtl]>.next-tabs-bar .next-tabs-nav-extra{right:auto;left:0}.next-tabs[dir=rtl].next-tabs-capsule>.next-tabs-bar .next-tabs-tab{border-top:1px solid #c4c6cf;border-bottom:1px solid #c4c6cf;border-right:1px solid #c4c6cf;border-left:0}.next-tabs[dir=rtl].next-tabs-capsule>.next-tabs-bar .next-tabs-tab:first-child{border-left:0;border-radius:0 3px 3px 0}.next-tabs[dir=rtl].next-tabs-capsule>.next-tabs-bar .next-tabs-tab:last-child{border-radius:3px 0 0 3px;border-left:1px solid #c4c6cf}.next-tabs[dir=rtl].next-tabs-capsule>.next-tabs-bar .next-tabs-tab.active{margin-left:-1px;margin-right:auto;border-left:1px solid #c4c6cf;border-color:#5584ff}.next-tabs[dir=rtl] .next-tabs-btn-next{left:8px;right:auto}.next-tabs[dir=rtl] .next-tabs-btn-prev{left:32px;right:auto}.next-tabs[dir=rtl] .next-tabs-btn-down{left:8px;right:auto}.next-tabs-text[dir=rtl]>.next-tabs-bar .next-tabs-tab:not(:last-child):after{content:" ";position:absolute;left:0;right:auto}.next-table{position:relative}.next-table,.next-table *,.next-table :after,.next-table :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-table table{border-collapse:collapse;border-spacing:0;width:100%;background:#fff}.next-table table tr:first-child td{border-top-width:0}.next-table th{padding:0;background:#ebecf0;color:#333;text-align:left;font-weight:400;border:1px solid #dcdee3}.next-table th .next-table-cell-wrapper{padding:12px 16px;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.next-table-affix{z-index:1}.next-table-header-resizable{position:relative}.next-table-header-resizable .next-table-resize-handler{position:absolute;right:0;top:0;bottom:0;width:3px;background:transparent;cursor:ew-resize}.next-table td{padding:0;border:1px solid #dcdee3}.next-table td .next-table-cell-wrapper{padding:12px 16px;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.next-table td .next-table-cell-wrapper .next-icon-arrow-down.next-table-tree-arrow,.next-table td .next-table-cell-wrapper .next-icon-arrow-right.next-table-tree-arrow,.next-table td .next-table-cell-wrapper .next-table-tree-placeholder{margin-right:3px;float:left}.next-table td .next-table-cell-wrapper .next-icon-arrow-down.next-table-tree-arrow:before,.next-table td .next-table-cell-wrapper .next-icon-arrow-right.next-table-tree-arrow:before{width:12px;font-size:12px;line-height:inherit}.next-table .next-table-expanded .next-table-cell-wrapper,.next-table .next-table-selection .next-table-cell-wrapper{overflow:visible}.next-table.no-header table tr:first-child td{border-top-width:1px}.next-table.only-bottom-border{border-width:0}.next-table.only-bottom-border .next-table-expanded-row td,.next-table.only-bottom-border .next-table-expanded-row th,.next-table.only-bottom-border td,.next-table.only-bottom-border th{border-width:0 0 1px}.next-table-loading{display:block}.next-table.zebra tr:nth-child(odd) td{background:#fff}.next-table.zebra tr:nth-child(2n) td{background:#f7f8fa}.next-table.zebra .next-table-row.hovered td,.next-table.zebra .next-table-row.selected td{background:#f2f3f7;color:#333}.next-table-empty{color:#a0a2ad;padding:32px 0;text-align:center}.next-table-expanded-row td{border-width:0}.next-table-expanded-row td:first-child{border-left-width:1px}.next-table-expanded-row td:last-child{border-right-width:1px}.next-table-expanded-row:last-child td{border-bottom-width:1px}.next-table-expanded-row .next-table .last td{border-bottom-width:0}.next-table-filter-footer{margin:10px 10px 0}.next-table-filter-footer button{margin-right:5px}.next-table-row{-webkit-transition:all .3s ease;transition:all .3s ease;background:#fff;color:#333}.next-table-row.hidden{display:none}.next-table-row.hovered,.next-table-row.selected{background:#f2f3f7;color:#333}.next-table-tree-placeholder{display:inline-block;width:12px}.last .next-table-expanded-row td{border-bottom-width:1px}.next-table-body,.next-table-header{overflow:auto;font-size:12px}.next-table-body{font-size:12px}.next-table-fixed{border:1px solid #dcdee3}.next-table-fixed table{table-layout:fixed}.next-table-fixed .next-table-header{background:#ebecf0}.next-table-fixed table tr td:first-child,.next-table-fixed table tr th:first-child{border-left-width:0}.next-table-fixed .next-table-header th{border-top-width:0}.next-table-fixed .next-table-header tr th:last-child{border-right-width:0}.next-table-fixed .next-table-body td{border-top-width:0}.next-table-fixed .next-table-body tr:last-child td{border-bottom-width:0}.next-table-fixed .next-table-body tr td:last-child{border-right-width:0}.next-table-fixed.next-table-group table tr td:first-child,.next-table-fixed.next-table-group table tr th:first-child{border-left-width:1px}.next-table-fixed.next-table-group .next-table-header th{border-top-width:1px}.next-table-fixed.next-table-group .next-table-header tr th:last-child{border-right-width:1px}.next-table-fixed.next-table-group .next-table-body td{border-top-width:1px}.next-table-fixed.next-table-group .next-table-body tr:last-child td{border-bottom-width:1px}.next-table-fixed.next-table-group .next-table-body tr td:last-child{border-right-width:1px}.next-table-lock .next-table-body{overflow-x:auto;overflow-y:visible}.next-table-group{border-width:0}.next-table-group .next-table-body{margin-top:8px}.next-table-group .next-table-body table{margin-bottom:8px}.next-table-group .next-table-body table tr:first-child td{border-top-width:1px}.next-table-group .next-table-group-footer td,.next-table-group .next-table-group-header td{background:#ebecf0;color:#333}.next-table-group .next-table-row.hovered,.next-table-group .next-table-row.selected{background:#fff;color:#333}.next-table-lock{position:relative}.next-table-lock table{table-layout:fixed}.next-table-header-inner{overflow:hidden}.next-table-lock-left,.next-table-lock-right{position:absolute;left:0;top:0;z-index:1;border:0}.next-table-lock-left table,.next-table-lock-right table{width:auto}.next-table-lock-left .next-table-body,.next-table-lock-right .next-table-body{overflow:hidden}.next-table-lock-right{right:0;left:auto}.next-table-lock-right table tr td:first-child,.next-table-lock-right table tr th:first-child{border-left-width:1px}.next-table-lock-right.shadow{-webkit-box-shadow:-2px 0 3px rgba(0,0,0,.12);box-shadow:-2px 0 3px rgba(0,0,0,.12)}.next-table-lock-left.shadow{-webkit-box-shadow:2px 0 3px rgba(0,0,0,.12);box-shadow:2px 0 3px rgba(0,0,0,.12)}.next-table-filter{line-height:1}.next-table-sort{position:relative;width:16px;height:15px;display:inline-block;vertical-align:middle;line-height:1}.next-table-sort .next-icon{position:absolute;left:0;color:#333}.next-table-sort .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-table-sort .current .next-icon{color:#5584ff}.next-table-sort .next-icon-ascending{left:4px}.next-table-filter{margin-left:5px;cursor:pointer;width:20px;display:inline-block}.next-table-filter:focus{outline:0}.next-table-filter .next-icon{color:#333}.next-table-filter .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-table-expanded-ctrl.disabled{color:#999}.next-table-expanded-ctrl .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-table[dir=rtl] th{text-align:right}.next-table[dir=rtl] .next-table-header-resizable .next-table-resize-handler{right:auto;left:0}.next-table[dir=rtl] td .next-table-cell-wrapper .next-icon-arrow-down.next-table-tree-arrow,.next-table[dir=rtl] td .next-table-cell-wrapper .next-icon-arrow-right.next-table-tree-arrow,.next-table[dir=rtl] td .next-table-cell-wrapper .next-table-tree-placeholder{margin-left:3px;margin-right:0;float:right}.next-table[dir=rtl] .next-table-expanded-row td:first-child{border-left-width:0;border-right-width:1px}.next-table[dir=rtl] .next-table-expanded-row td:last-child{border-left-width:1px;border-right-width:0}.next-table[dir=rtl].only-bottom-border .next-table-expanded-row td,.next-table[dir=rtl].only-bottom-border .next-table-expanded-row th{border-width:0 0 1px}.next-table[dir=rtl] .next-table-filter-footer button{margin-left:5px;margin-right:0}.next-table[dir=rtl] .next-table-lock-left,.next-table[dir=rtl] .next-table-lock-right{left:auto;right:0}.next-table[dir=rtl] .next-table-lock-right{right:auto;left:0}.next-table[dir=rtl] .next-table-lock-right table tr td:first-child,.next-table[dir=rtl] .next-table-lock-right table tr th:first-child{border-right-width:1px}.next-table[dir=rtl] .next-table-lock-right.shadow{-webkit-box-shadow:2px 0 3px rgba(0,0,0,.12);box-shadow:2px 0 3px rgba(0,0,0,.12)}.next-table[dir=rtl] .next-table-lock-left.shadow{-webkit-box-shadow:-2px 0 3px rgba(0,0,0,.12);box-shadow:-2px 0 3px rgba(0,0,0,.12)}.next-table[dir=rtl] .next-table-sort .next-icon{right:0;left:auto}.next-table[dir=rtl] .next-table-sort .next-icon-ascending{right:4px;left:auto}.next-table[dir=rtl] .next-table-filter{margin-right:5px;margin-left:0}.next-table-fixed[dir=rtl] table tr td:first-child,.next-table-fixed[dir=rtl] table tr th:first-child{border-left-width:1px;border-right-width:0}.next-table-fixed[dir=rtl] .next-table-body tr td:last-child,.next-table-fixed[dir=rtl] .next-table-header tr th:last-child{border-left-width:1px}.next-timeline,.next-timeline *,.next-timeline:after,.next-timeline :after,.next-timeline:before,.next-timeline :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-timeline ul{margin:0;padding:0;list-style:none}.next-timeline p{margin:0}.next-timeline-hide{display:none}.next-timeline[dir=rtl] .next-timeline-item-folder{padding-left:0;padding-right:28px}.next-timeline[dir=rtl] .next-timeline-item-dot-tail{left:auto;right:8px;border-left:none;border-right:1px dotted #dcdee3}.next-timeline[dir=rtl] .next-timeline-item-has-left-content.next-timeline-item-folder{margin-left:0;margin-right:80px}.next-timeline[dir=rtl] .next-timeline-item-done{position:relative}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-timeline{position:absolute;left:auto;right:0;top:0;height:100%}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-node{position:relative;width:16px;height:24px;padding:4px 0;text-align:center;float:right}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom{width:40px;height:auto;font-size:12px;word-break:break-all;margin-right:-12px;margin-left:0;line-height:1}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-dot{display:block;position:absolute;width:8px;height:8px;border-radius:100%;top:50%;margin-top:-4px;left:50%;margin-left:-4px}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-icon{display:block;position:absolute;width:16px;height:16px;line-height:16px;border-radius:100%;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-tail{position:absolute;width:auto;height:calc(100% - 24px);top:24px;left:auto;right:8px}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-tail i{display:inline-block;vertical-align:top;height:100%;width:1px;position:relative;background:#dcdee3;-webkit-transition:all .4s ease;transition:all .4s ease}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-content{display:inline-block;margin-right:28px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-content .next-timeline-item-title{margin:0;font-size:12px;font-weight:700;line-height:16px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-content .next-timeline-item-body{margin:0;margin-top:8px;font-size:12px;line-height:16px;color:#666;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-content .next-timeline-item-time{margin:0;margin-top:4px;margin-bottom:12px;font-size:12px;color:#999;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-done.next-timeline-item-has-left-content>.next-timeline-item-left-content{position:absolute;width:80px;display:inline-block;font-size:12px;color:#999;line-height:16px;margin-top:4px;text-align:left;padding-left:12px;padding-right:0}.next-timeline[dir=rtl] .next-timeline-item-done.next-timeline-item-has-left-content>.next-timeline-item-left-content p{word-break:break-word}.next-timeline[dir=rtl] .next-timeline-item-done.next-timeline-item-has-left-content>.next-timeline-item-timeline{margin-right:80px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-done.next-timeline-item-has-left-content>.next-timeline-item-content{margin-right:108px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-dot{background:#c4c6cf}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-icon{background:#c4c6cf;color:#fff}.next-timeline[dir=rtl] .next-timeline-item-process{position:relative}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-timeline{position:absolute;left:auto;right:0;top:0;height:100%}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-node{position:relative;width:16px;height:24px;padding:4px 0;text-align:center;float:right}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom{width:40px;height:auto;font-size:12px;word-break:break-all;margin-right:-12px;margin-left:0;line-height:1}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-dot{display:block;position:absolute;width:8px;height:8px;border-radius:100%;top:50%;margin-top:-4px;left:50%;margin-left:-4px}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-icon{display:block;position:absolute;width:16px;height:16px;line-height:16px;border-radius:100%;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-tail{position:absolute;width:auto;height:calc(100% - 24px);top:24px;left:auto;right:8px}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-tail i{display:inline-block;vertical-align:top;height:100%;width:1px;position:relative;background:#dcdee3;-webkit-transition:all .4s ease;transition:all .4s ease}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-content{display:inline-block;margin-right:28px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-content .next-timeline-item-title{margin:0;font-size:12px;font-weight:700;line-height:16px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-content .next-timeline-item-body{margin:0;margin-top:8px;font-size:12px;line-height:16px;color:#666;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-content .next-timeline-item-time{margin:0;margin-top:4px;margin-bottom:12px;font-size:12px;color:#999;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-process.next-timeline-item-has-left-content>.next-timeline-item-left-content{position:absolute;width:80px;display:inline-block;font-size:12px;color:#999;line-height:16px;margin-top:4px;text-align:left;padding-left:12px;padding-right:0}.next-timeline[dir=rtl] .next-timeline-item-process.next-timeline-item-has-left-content>.next-timeline-item-left-content p{word-break:break-word}.next-timeline[dir=rtl] .next-timeline-item-process.next-timeline-item-has-left-content>.next-timeline-item-timeline{margin-right:80px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-process.next-timeline-item-has-left-content>.next-timeline-item-content{margin-right:108px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-dot{background:#5584ff}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-icon{background:#5584ff;color:#fff}.next-timeline[dir=rtl] .next-timeline-item-success{position:relative}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-timeline{position:absolute;left:auto;right:0;top:0;height:100%}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-node{position:relative;width:16px;height:24px;padding:4px 0;text-align:center;float:right}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom{width:40px;height:auto;font-size:12px;word-break:break-all;margin-right:-12px;margin-left:0;line-height:1}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-dot{display:block;position:absolute;width:8px;height:8px;border-radius:100%;top:50%;margin-top:-4px;left:50%;margin-left:-4px}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-icon{display:block;position:absolute;width:16px;height:16px;line-height:16px;border-radius:100%;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-tail{position:absolute;width:auto;height:calc(100% - 24px);top:24px;left:auto;right:8px}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-tail i{display:inline-block;vertical-align:top;height:100%;width:1px;position:relative;background:#dcdee3;-webkit-transition:all .4s ease;transition:all .4s ease}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-content{display:inline-block;margin-right:28px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-content .next-timeline-item-title{margin:0;font-size:12px;font-weight:700;line-height:16px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-content .next-timeline-item-body{margin:0;margin-top:8px;font-size:12px;line-height:16px;color:#666;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-content .next-timeline-item-time{margin:0;margin-top:4px;margin-bottom:12px;font-size:12px;color:#999;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-success.next-timeline-item-has-left-content>.next-timeline-item-left-content{position:absolute;width:80px;display:inline-block;font-size:12px;color:#999;line-height:16px;margin-top:4px;text-align:left;padding-left:12px;padding-right:0}.next-timeline[dir=rtl] .next-timeline-item-success.next-timeline-item-has-left-content>.next-timeline-item-left-content p{word-break:break-word}.next-timeline[dir=rtl] .next-timeline-item-success.next-timeline-item-has-left-content>.next-timeline-item-timeline{margin-right:80px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-success.next-timeline-item-has-left-content>.next-timeline-item-content{margin-right:108px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-dot{background:#46bc15}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-icon{background:#46bc15;color:#fff}.next-timeline[dir=rtl] .next-timeline-item-error{position:relative}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-timeline{position:absolute;left:auto;right:0;top:0;height:100%}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-node{position:relative;width:16px;height:24px;padding:4px 0;text-align:center;float:right}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom{width:40px;height:auto;font-size:12px;word-break:break-all;margin-right:-12px;margin-left:0;line-height:1}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-dot{display:block;position:absolute;width:8px;height:8px;border-radius:100%;top:50%;margin-top:-4px;left:50%;margin-left:-4px}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-icon{display:block;position:absolute;width:16px;height:16px;line-height:16px;border-radius:100%;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-tail{position:absolute;width:auto;height:calc(100% - 24px);top:24px;left:auto;right:8px}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-tail i{display:inline-block;vertical-align:top;height:100%;width:1px;position:relative;background:#dcdee3;-webkit-transition:all .4s ease;transition:all .4s ease}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-content{display:inline-block;margin-right:28px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-content .next-timeline-item-title{margin:0;font-size:12px;font-weight:700;line-height:16px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-content .next-timeline-item-body{margin:0;margin-top:8px;font-size:12px;line-height:16px;color:#666;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-content .next-timeline-item-time{margin:0;margin-top:4px;margin-bottom:12px;font-size:12px;color:#999;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-error.next-timeline-item-has-left-content>.next-timeline-item-left-content{position:absolute;width:80px;display:inline-block;font-size:12px;color:#999;line-height:16px;margin-top:4px;text-align:left;padding-left:12px;padding-right:0}.next-timeline[dir=rtl] .next-timeline-item-error.next-timeline-item-has-left-content>.next-timeline-item-left-content p{word-break:break-word}.next-timeline[dir=rtl] .next-timeline-item-error.next-timeline-item-has-left-content>.next-timeline-item-timeline{margin-right:80px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-error.next-timeline-item-has-left-content>.next-timeline-item-content{margin-right:108px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-dot{background:#ff3000}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-icon{background:#ff3000;color:#fff}.next-timeline{margin:0;padding:0;list-style:none}.next-timeline>li{outline:0}.next-timeline-item-folder{padding-left:28px;padding-top:4px;padding-bottom:4px;font-size:12px;line-height:16px;position:relative}.next-timeline-item-dot-tail{position:absolute;top:0;left:8px;height:100%;border-top:0;border-bottom:0;border-right:0;border-left:1px dotted #dcdee3}.next-timeline-item-dot-tail-solid{border-style:solid}.next-timeline-item-has-left-content.next-timeline-item-folder{margin-left:80px}.next-timeline-item-done{position:relative}.next-timeline-item-done .next-timeline-item-timeline{position:absolute;left:0;top:0;height:100%}.next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-node{position:relative;width:16px;height:24px;padding:4px 0;text-align:center;float:left}.next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom{width:40px;height:auto;font-size:12px;word-break:break-all;margin-left:-12px;line-height:1}.next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-dot{display:block;position:absolute;width:8px;height:8px;border-radius:100%;top:50%;margin-top:-4px;left:50%;margin-left:-4px}.next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-icon{display:block;position:absolute;width:16px;height:16px;line-height:16px;border-radius:100%;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-tail{position:absolute;width:auto;height:calc(100% - 24px);top:24px;left:8px}.next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-tail i{display:inline-block;vertical-align:top;height:100%;width:1px;position:relative;background:#dcdee3;-webkit-transition:all .4s ease;transition:all .4s ease}.next-timeline-item-done .next-timeline-item-content{display:inline-block;margin-left:28px}.next-timeline-item-done .next-timeline-item-content .next-timeline-item-title{margin:0;font-size:12px;font-weight:700;line-height:16px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;text-align:left}.next-timeline-item-done .next-timeline-item-content .next-timeline-item-body{margin:0;margin-top:8px;font-size:12px;line-height:16px;color:#666;text-align:left}.next-timeline-item-done .next-timeline-item-content .next-timeline-item-time{margin:0;margin-top:4px;margin-bottom:12px;font-size:12px;color:#999;text-align:left}.next-timeline-item-done.next-timeline-item-has-left-content>.next-timeline-item-left-content{position:absolute;width:80px;display:inline-block;font-size:12px;color:#999;line-height:16px;margin-top:4px;text-align:right;padding-right:12px}.next-timeline-item-done.next-timeline-item-has-left-content>.next-timeline-item-left-content p{word-break:break-word}.next-timeline-item-done.next-timeline-item-has-left-content>.next-timeline-item-timeline{margin-left:80px}.next-timeline-item-done.next-timeline-item-has-left-content>.next-timeline-item-content{margin-left:108px}.next-timeline-item-done .next-timeline-item-dot{background:#c4c6cf}.next-timeline-item-done .next-timeline-item-icon{background:#c4c6cf;color:#fff}.next-timeline-item-process{position:relative}.next-timeline-item-process .next-timeline-item-timeline{position:absolute;left:0;top:0;height:100%}.next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-node{position:relative;width:16px;height:24px;padding:4px 0;text-align:center;float:left}.next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom{width:40px;height:auto;font-size:12px;word-break:break-all;margin-left:-12px;line-height:1}.next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-dot{display:block;position:absolute;width:8px;height:8px;border-radius:100%;top:50%;margin-top:-4px;left:50%;margin-left:-4px}.next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-icon{display:block;position:absolute;width:16px;height:16px;line-height:16px;border-radius:100%;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-tail{position:absolute;width:auto;height:calc(100% - 24px);top:24px;left:8px}.next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-tail i{display:inline-block;vertical-align:top;height:100%;width:1px;position:relative;background:#dcdee3;-webkit-transition:all .4s ease;transition:all .4s ease}.next-timeline-item-process .next-timeline-item-content{display:inline-block;margin-left:28px}.next-timeline-item-process .next-timeline-item-content .next-timeline-item-title{margin:0;font-size:12px;font-weight:700;line-height:16px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;text-align:left}.next-timeline-item-process .next-timeline-item-content .next-timeline-item-body{margin:0;margin-top:8px;font-size:12px;line-height:16px;color:#666;text-align:left}.next-timeline-item-process .next-timeline-item-content .next-timeline-item-time{margin:0;margin-top:4px;margin-bottom:12px;font-size:12px;color:#999;text-align:left}.next-timeline-item-process.next-timeline-item-has-left-content>.next-timeline-item-left-content{position:absolute;width:80px;display:inline-block;font-size:12px;color:#999;line-height:16px;margin-top:4px;text-align:right;padding-right:12px}.next-timeline-item-process.next-timeline-item-has-left-content>.next-timeline-item-left-content p{word-break:break-word}.next-timeline-item-process.next-timeline-item-has-left-content>.next-timeline-item-timeline{margin-left:80px}.next-timeline-item-process.next-timeline-item-has-left-content>.next-timeline-item-content{margin-left:108px}.next-timeline-item-process .next-timeline-item-dot{background:#5584ff}.next-timeline-item-process .next-timeline-item-icon{background:#5584ff;color:#fff}.next-timeline-item-success{position:relative}.next-timeline-item-success .next-timeline-item-timeline{position:absolute;left:0;top:0;height:100%}.next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-node{position:relative;width:16px;height:24px;padding:4px 0;text-align:center;float:left}.next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom{width:40px;height:auto;font-size:12px;word-break:break-all;margin-left:-12px;line-height:1}.next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-dot{display:block;position:absolute;width:8px;height:8px;border-radius:100%;top:50%;margin-top:-4px;left:50%;margin-left:-4px}.next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-icon{display:block;position:absolute;width:16px;height:16px;line-height:16px;border-radius:100%;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-tail{position:absolute;width:auto;height:calc(100% - 24px);top:24px;left:8px}.next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-tail i{display:inline-block;vertical-align:top;height:100%;width:1px;position:relative;background:#dcdee3;-webkit-transition:all .4s ease;transition:all .4s ease}.next-timeline-item-success .next-timeline-item-content{display:inline-block;margin-left:28px}.next-timeline-item-success .next-timeline-item-content .next-timeline-item-title{margin:0;font-size:12px;font-weight:700;line-height:16px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;text-align:left}.next-timeline-item-success .next-timeline-item-content .next-timeline-item-body{margin:0;margin-top:8px;font-size:12px;line-height:16px;color:#666;text-align:left}.next-timeline-item-success .next-timeline-item-content .next-timeline-item-time{margin:0;margin-top:4px;margin-bottom:12px;font-size:12px;color:#999;text-align:left}.next-timeline-item-success.next-timeline-item-has-left-content>.next-timeline-item-left-content{position:absolute;width:80px;display:inline-block;font-size:12px;color:#999;line-height:16px;margin-top:4px;text-align:right;padding-right:12px}.next-timeline-item-success.next-timeline-item-has-left-content>.next-timeline-item-left-content p{word-break:break-word}.next-timeline-item-success.next-timeline-item-has-left-content>.next-timeline-item-timeline{margin-left:80px}.next-timeline-item-success.next-timeline-item-has-left-content>.next-timeline-item-content{margin-left:108px}.next-timeline-item-success .next-timeline-item-dot{background:#46bc15}.next-timeline-item-success .next-timeline-item-icon{background:#46bc15;color:#fff}.next-timeline-item-error{position:relative}.next-timeline-item-error .next-timeline-item-timeline{position:absolute;left:0;top:0;height:100%}.next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-node{position:relative;width:16px;height:24px;padding:4px 0;text-align:center;float:left}.next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom{width:40px;height:auto;font-size:12px;word-break:break-all;margin-left:-12px;line-height:1}.next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-dot{display:block;position:absolute;width:8px;height:8px;border-radius:100%;top:50%;margin-top:-4px;left:50%;margin-left:-4px}.next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-icon{display:block;position:absolute;width:16px;height:16px;line-height:16px;border-radius:100%;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-tail{position:absolute;width:auto;height:calc(100% - 24px);top:24px;left:8px}.next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-tail i{display:inline-block;vertical-align:top;height:100%;width:1px;position:relative;background:#dcdee3;-webkit-transition:all .4s ease;transition:all .4s ease}.next-timeline-item-error .next-timeline-item-content{display:inline-block;margin-left:28px}.next-timeline-item-error .next-timeline-item-content .next-timeline-item-title{margin:0;font-size:12px;font-weight:700;line-height:16px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;text-align:left}.next-timeline-item-error .next-timeline-item-content .next-timeline-item-body{margin:0;margin-top:8px;font-size:12px;line-height:16px;color:#666;text-align:left}.next-timeline-item-error .next-timeline-item-content .next-timeline-item-time{margin:0;margin-top:4px;margin-bottom:12px;font-size:12px;color:#999;text-align:left}.next-timeline-item-error.next-timeline-item-has-left-content>.next-timeline-item-left-content{position:absolute;width:80px;display:inline-block;font-size:12px;color:#999;line-height:16px;margin-top:4px;text-align:right;padding-right:12px}.next-timeline-item-error.next-timeline-item-has-left-content>.next-timeline-item-left-content p{word-break:break-word}.next-timeline-item-error.next-timeline-item-has-left-content>.next-timeline-item-timeline{margin-left:80px}.next-timeline-item-error.next-timeline-item-has-left-content>.next-timeline-item-content{margin-left:108px}.next-timeline-item-error .next-timeline-item-dot{background:#ff3000}.next-timeline-item-error .next-timeline-item-icon{background:#ff3000;color:#fff}.next-timeline-item-last .next-timeline-item-tail{display:none}.next-timeline-item-has-left-content{min-height:48px}.next-timeline-item-folder.next-timeline-item-has-left-content{min-height:auto}.next-transfer{display:inline-block}.next-transfer,.next-transfer *,.next-transfer :after,.next-transfer :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-transfer-panel{display:inline-block;border:1px solid #dcdee3;border-radius:3px;background-color:#fff;vertical-align:middle;overflow:hidden}.next-transfer-panel-header{padding:8px 20px;border-bottom:1px solid #dcdee3;background-color:#f7f8fa;color:#333;font-size:12px}.next-transfer-panel-search{padding:0 4px;margin-top:8px;margin-bottom:0;width:100%}.next-transfer .next-transfer-panel-list{width:180px;height:160px;padding:0;border:none;-webkit-box-shadow:none;box-shadow:none;border-radius:0;overflow-y:auto}.next-transfer-panel-not-found-container{display:table;width:100%;height:100%}.next-transfer-panel-not-found{display:table-cell;vertical-align:middle;text-align:center;color:#999;font-size:14px}.next-transfer-panel-item.next-focused{-webkit-transition:background-color .2s ease;transition:background-color .2s ease}.next-transfer-panel-item:not(.next-disabled).next-simple:hover{color:#5584ff}.next-transfer-panel-item.next-insert-before:before{position:absolute;top:0;left:0;content:"";width:100%;border-top:1px solid #5584ff}.next-transfer-panel-item.next-insert-after:after{position:absolute;left:0;bottom:0;content:"";width:100%;border-bottom:1px solid #5584ff}.next-transfer-panel-footer{padding:8px 20px;border-top:1px solid #dcdee3;background-color:#fff;font-size:0}.next-transfer-panel-count{margin-left:4px;font-size:12px;vertical-align:middle;color:#333}.next-transfer-panel-move-all{font-size:12px;color:#5584ff;cursor:pointer}.next-transfer-panel-move-all.next-disabled{color:#ccc;cursor:not-allowed}.next-transfer-operations{display:inline-block;vertical-align:middle;margin:0 20px}.next-transfer-move.next-icon{color:#c4c6cf}.next-transfer-operation.next-btn{display:block}.next-transfer-operation.next-btn+.next-transfer-operation.next-btn{margin-top:8px}.next-transfer-operation.next-btn .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tree,.next-tree *,.next-tree :after,.next-tree :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tree,.next-tree-child-tree{margin:0;padding:0;list-style:none}.next-tree-node{white-space:nowrap}.next-tree-node-inner{font-size:0;outline:none}.next-tree-node-label-wrapper{display:inline-block;margin:0 4px;vertical-align:middle}.next-tree-node-label{height:20px;line-height:20px;padding:0 4px;border-radius:3px;font-size:12px}.next-tree-node-input.next-input{margin:0 4px}.next-tree-switcher{position:relative;display:inline-block;vertical-align:middle;margin-right:8px}.next-tree-switcher.next-noline{width:12px;height:12px;line-height:12px;cursor:pointer}.next-tree-switcher.next-noline .next-tree-switcher-icon{-webkit-transition:-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);color:#999}.next-tree-switcher.next-noline .next-tree-switcher-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tree-switcher.next-noline.next-close .next-tree-switcher-icon{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.next-tree-switcher.next-noline.next-close .next-tree-switcher-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tree-switcher.next-noline:not(.next-disabled):hover .next-tree-switcher-icon{color:#333}.next-tree-switcher.next-noline.next-disabled{cursor:not-allowed}.next-tree-switcher.next-noline.next-disabled .next-tree-switcher-icon{color:#ccc}.next-tree-switcher.next-noop-noline{width:12px;height:12px}.next-tree-switcher.next-line{width:16px;height:16px;line-height:14px;border:1px solid #c4c6cf;border-radius:3px;background-color:#fff;cursor:pointer}.next-tree-switcher.next-line .next-tree-switcher-icon{margin-left:3px;color:#666}.next-tree-switcher.next-line .next-tree-switcher-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tree-switcher.next-line .next-tree-switcher-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-1px;margin-right:-4px}.next-tree-switcher.next-line .next-tree-switcher-icon:before{width:16px;font-size:16px}}.next-tree-switcher.next-line:not(.next-disabled):hover{border-color:#a0a2ad;background-color:#f2f3f7}.next-tree-switcher.next-line:not(.next-disabled):hover .next-tree-switcher-icon{color:#333}.next-tree-switcher.next-line.next-disabled{border-color:#e6e7eb;background-color:#fff;cursor:not-allowed}.next-tree-switcher.next-line.next-disabled .next-tree-switcher-icon{color:#ccc}.next-tree-switcher.next-noop-line{width:16px;height:16px}.next-tree-switcher.next-noop-line-noroot{height:0;border-left:1px solid #c4c6cf;border-bottom:1px solid #c4c6cf}.next-tree-switcher.next-noop-line-noroot .next-tree-right-angle{bottom:-1px}.next-tree-switcher.next-loading.next-loading-noline{width:12px;height:12px;line-height:12px}.next-tree-switcher.next-loading.next-loading-line{width:16px;height:16px;line-height:14px;border:1px solid transparent}.next-tree-switcher.next-loading .next-tree-switcher-icon{color:#5584ff}.next-tree-switcher.next-loading .next-tree-switcher-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tree-right-angle{position:absolute;bottom:6.5px;left:-17.5px;display:block;width:16.5px;height:22px;border-left:1px solid #c4c6cf;border-bottom:1px solid #c4c6cf}.next-tree.next-label-block .next-tree-node-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;outline:none}.next-tree.next-label-block .next-tree-node-label-wrapper{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.next-tree.next-node-indent .next-tree-node .next-tree-node{margin-left:24px}.next-tree.next-node-indent .next-tree-node-inner{padding-top:2px;padding-bottom:2px}.next-tree.next-node-indent .next-tree-node-inner:focus .next-tree-node-label{color:#333;background-color:#f2f3f7}.next-tree.next-node-indent .next-tree-node-label-wrapper{border-top:2px solid transparent;border-bottom:2px solid transparent}.next-tree.next-node-indent .next-tree-node-label{-webkit-transition:color .3s cubic-bezier(.23,1,.32,1),background-color .3s cubic-bezier(.23,1,.32,1);transition:color .3s cubic-bezier(.23,1,.32,1),background-color .3s cubic-bezier(.23,1,.32,1);cursor:default;color:#333;background-color:#fff}.next-tree.next-node-indent .next-tree-node-label-selectable{cursor:pointer}.next-tree.next-node-indent .next-tree-node-label:hover{color:#333;background-color:#f2f3f7}.next-tree.next-node-indent .next-tree-node-inner.next-selected .next-tree-node-label{color:#333;background-color:#dee8ff}.next-tree.next-node-indent .next-tree-node-inner.next-disabled .next-tree-node-label,.next-tree.next-node-indent .next-tree-node-inner.next-disabled .next-tree-node-label:hover{color:#ccc;background-color:#fff;cursor:not-allowed}.next-tree.next-node-indent .next-tree-node-inner.next-drag-over .next-tree-node-label{background-color:#5584ff;color:#fff;opacity:.8}.next-tree.next-node-indent .next-tree-node-inner.next-drag-over-gap-top .next-tree-node-label-wrapper{border-top-color:#5584ff}.next-tree.next-node-indent .next-tree-node-inner.next-drag-over-gap-bottom .next-tree-node-label-wrapper{border-bottom-color:#5584ff}.next-tree.next-node-block .next-tree-node-inner{padding-top:4px;padding-bottom:4px;-webkit-transition:color .3s cubic-bezier(.23,1,.32,1),background-color .3s cubic-bezier(.23,1,.32,1);transition:color .3s cubic-bezier(.23,1,.32,1),background-color .3s cubic-bezier(.23,1,.32,1);cursor:pointer;color:#333;background-color:#fff}.next-tree.next-node-block .next-tree-node-inner:focus,.next-tree.next-node-block .next-tree-node-inner:hover{color:#333;background-color:#f2f3f7}.next-tree.next-node-block .next-tree-node-inner.next-selected{color:#333;background-color:#dee8ff}.next-tree.next-node-block .next-tree-node-inner.next-disabled,.next-tree.next-node-block .next-tree-node-inner.next-disabled:hover{color:#ccc;background-color:#fff;cursor:not-allowed}.next-tree.next-show-line .next-tree-node .next-tree-node:not(:last-child){margin-left:7.5px;border-left:1px solid #c4c6cf;padding-left:15.5px}.next-tree-node.next-filtered>.next-tree-node-inner .next-tree-node-label,.next-tree-node.next-filtered>.next-tree-node-inner .next-tree-node-label:hover{color:#5584ff}.next-tree[dir=rtl] .next-tree-switcher{margin-left:8px;margin-right:0}.next-tree[dir=rtl] .next-tree-right-angle,.next-tree[dir=rtl] .next-tree-switcher.next-noop-line-noroot{border-left:none;border-right:1px solid #c4c6cf}.next-tree[dir=rtl] .next-tree-right-angle{left:auto;right:-17.5px}.next-tree[dir=rtl].next-show-line .next-tree-node .next-tree-node:not(:last-child){margin-left:0;margin-right:7.5px;border-left:none;border-right:1px solid #c4c6cf;padding-left:0;padding-right:15.5px}.next-tree[dir=rtl].next-node-indent .next-tree-node .next-tree-node{margin-left:0;margin-right:24px}.next-tree-select,.next-tree-select *,.next-tree-select :after,.next-tree-select :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tree-select-dropdown{padding:8px 20px;background:#fff;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none}.next-tree-select-not-found{height:16px;font-size:12px;color:#999}.next-upload-list[dir=rtl].next-upload-list-text .next-upload-list-item{padding:4px 8px;padding-left:36px}.next-upload-list[dir=rtl].next-upload-list-text .next-icon{left:12px;right:auto}.next-upload-list[dir=rtl].next-upload-list-image .next-icon-close{float:left;margin-left:4px;margin-right:0}.next-upload-list[dir=rtl].next-upload-list-image .next-upload-list-item-thumbnail{float:right;margin-left:8px;margin-right:0}.next-upload-list[dir=rtl].next-upload-list-image .next-upload-list-item-progress{margin-right:56px;margin-left:20px}.next-upload,.next-upload *,.next-upload :after,.next-upload :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-upload-inner{outline:0;display:inline-block}.next-upload-inner.next-hidden{display:none}.next-upload-list{overflow:hidden}.next-upload-list,.next-upload-list *,.next-upload-list :after,.next-upload-list :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-upload-list-item{position:relative}.next-upload-list-item.next-hidden{display:none}.next-upload-list-item-name{text-decoration:none}.next-upload.next-disabled{border-color:#e6e7eb!important;color:#ccc!important}.next-upload.next-disabled .next-icon-close{cursor:not-allowed!important}.next-upload.next-disabled .next-upload-inner *{color:#ccc!important;border-color:#e6e7eb!important;cursor:not-allowed!important}.next-upload-list-text .next-upload-list-item{background-color:#f2f3f7;padding:4px 8px;padding-right:36px;height:40px;line-height:32px;font-size:12px;overflow:hidden;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.next-upload-list-text .next-upload-list-item:not(:last-child){margin-bottom:4px}.next-upload-list-text .next-upload-list-item .next-icon{position:absolute;top:0;right:12px;color:#999;cursor:pointer;text-align:center;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;line-height:40px}.next-upload-list-text .next-upload-list-item .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-upload-list-text .next-upload-list-item:hover{background-color:#f2f3f7}.next-upload-list-text .next-upload-list-item:hover .next-icon{color:#666}.next-upload-list-text .next-upload-list-item-name-wrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-right:4px}.next-upload-list-text .next-upload-list-item-name{color:#333;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.next-upload-list-text .next-upload-list-item-size{color:#999;margin-left:8px}.next-upload-list-text .next-upload-list-item-uploading{line-height:16px}.next-upload-list-text .next-upload-list-item-done{line-height:32px}.next-upload-list-text .next-upload-list-item-done:hover .next-upload-list-item-name,.next-upload-list-text .next-upload-list-item-done:hover .next-upload-list-item-size{color:#5584ff}.next-upload-list-text .next-upload-list-item-error{background-color:#ffece4!important}.next-upload-list-text .next-upload-list-item-error.next-upload-list-item-error-with-msg{line-height:16px}.next-upload-list-text .next-upload-list-item-error-msg{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#ff3000}.next-upload-list-image .next-upload-list-item{-webkit-box-sizing:content-box;box-sizing:content-box;border:1px solid #dcdee3;background-color:#fff;padding:8px;height:48px;line-height:48px;font-size:12px;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;overflow:hidden}.next-upload-list-image .next-upload-list-item:not(:last-child){margin-bottom:4px}.next-upload-list-image .next-upload-list-item:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-upload-list-image .next-upload-list-item .next-icon-close{float:right;margin-right:4px;cursor:pointer;color:#999;text-align:center}.next-upload-list-image .next-upload-list-item .next-icon-close:before{width:12px;font-size:12px;line-height:inherit}.next-upload-list-image .next-upload-list-item:hover{border-color:#5584ff}.next-upload-list-image .next-upload-list-item:hover .next-icon-close{color:#666}.next-upload-list-image .next-upload-list-item-name{display:block;color:#333;margin-left:56px;margin-right:20px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.next-upload-list-image .next-upload-list-item-size{color:#999;margin-left:8px}.next-upload-list-image .next-upload-list-item-progress{line-height:24px}.next-upload-list-image .next-upload-list-item-done:hover .next-upload-list-item-name,.next-upload-list-image .next-upload-list-item-done:hover .next-upload-list-item-size{color:#5584ff}.next-upload-list-image .next-upload-list-item-thumbnail{float:left;width:48px;height:48px;color:#ccc;border:1px solid #dcdee3;background-color:#f2f3f7;margin-right:8px;vertical-align:middle;text-align:center;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.next-upload-list-image .next-upload-list-item-thumbnail img{width:100%;height:100%}.next-upload-list-image .next-upload-list-item-thumbnail .next-icon{display:block;margin:0;line-height:48px}.next-upload-list-image .next-upload-list-item-thumbnail .next-icon:before{width:24px;font-size:24px;line-height:inherit}.next-upload-list-image .next-upload-list-item-error{border-color:#ff3000!important;background-color:#fff}.next-upload-list-image .next-upload-list-item-uploading{background-color:#fff}.next-upload-list-image .next-upload-list-item-uploading .next-upload-list-item-name{height:24px;line-height:24px}.next-upload-list-image .next-upload-list-item-uploading .next-upload-list-item-progress{margin-left:56px;margin-right:20px;height:24px;line-height:24px}.next-upload-list-image .next-upload-list-item-error-with-msg .next-upload-list-item-error-msg,.next-upload-list-image .next-upload-list-item-error-with-msg .next-upload-list-item-name{height:24px;line-height:24px}.next-upload-list-image .next-upload-list-item-error-with-msg .next-upload-list-item-error-msg{margin-left:56px;margin-right:20px;color:#ff3000;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.next-upload-list-card{display:inline-block}.next-upload-list-card .next-upload-list-item{vertical-align:middle;float:left}.next-upload-list-card .next-upload-list-item:not(:last-child){margin-right:12px}.next-upload-list-card .next-upload-list-item-wrapper{position:relative;border:1px solid #c4c6cf;width:100px;height:100px;padding:0;background-color:transparent}.next-upload-list-card .next-upload-list-item-thumbnail{display:table;text-align:center;vertical-align:middle;width:100%;height:100%;color:#ccc;font-size:12px}.next-upload-list-card .next-upload-list-item-thumbnail img{width:100%;height:100%}.next-upload-list-card .next-upload-list-item-thumbnail img:focus{outline:0}.next-upload-list-card .next-upload-list-item-thumbnail .next-icon{width:100%}.next-upload-list-card .next-upload-list-item-thumbnail .next-icon:before{width:48px;font-size:48px;line-height:inherit}.next-upload-list-card .next-upload-list-item-handler{display:table-cell;width:100%;vertical-align:middle}.next-upload-list-card .next-upload-list-item-name{display:block;width:100px;text-align:center;margin-top:4px;font-size:12px;color:#666;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.next-upload-list-card .next-upload-list-item-progress{position:absolute;font-size:0;bottom:0;left:0;width:100%}.next-upload-list-card .next-upload-list-item-progress .next-progress-line-overlay,.next-upload-list-card .next-upload-list-item-progress .next-progress-line-underlay{border-radius:0}.next-upload-list-card .next-upload-list-item-uploading .next-upload-list-item-wrapper{background-color:#f7f8fa}.next-upload-list-card .next-upload-list-item:hover .next-upload-tool{opacity:.8}.next-upload-list-card .next-upload-list-item .next-upload-tool{position:absolute;z-index:1;background-color:rgba(0,0,0,.7);-webkit-transition:all .3s ease;transition:all .3s ease;opacity:0;width:100%;height:28px;left:0;bottom:0}.next-upload-list-card .next-upload-list-item .next-upload-tool .next-icon{width:49%;text-align:center;line-height:28px;color:#fff}.next-upload-list-card .next-upload-list-item .next-upload-tool .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-upload-list-card .next-upload-list-item .next-upload-tool.next-noclose .next-icon{width:100%}.next-upload-list-card .next-upload-list-item .next-upload-tool-close{cursor:pointer}.next-upload-list-card .next-upload-list-item .next-upload-tool-download-icon{border-right:1px solid #fff}.next-upload-list-card .next-upload-list-item-error .next-upload-list-item-wrapper{border-color:#ff3000}.next-upload-card{border:1px dashed #c4c6cf;width:100px;height:100px;background-color:#fff;text-align:center;cursor:pointer;-webkit-transition:border-color .3s ease;transition:border-color .3s ease;display:table-cell;vertical-align:middle}.next-upload-card .next-icon{color:#c4c6cf}.next-upload-card .next-icon:before{width:24px;font-size:24px;line-height:inherit}.next-upload-card .next-upload-text{font-size:12px;margin-top:12px;color:#666}.next-upload-card:hover{border-color:#5584ff}.next-upload-card:hover .next-icon,.next-upload-card:hover .next-upload-text{color:#5584ff}.next-upload-dragable .next-upload-inner{display:block}.next-upload-dragable .next-upload-drag{border:1px dashed #c4c6cf;-webkit-transition:border-color .3s ease;transition:border-color .3s ease;cursor:pointer;border-radius:3px;background-color:transparent;text-align:center;margin-bottom:4px}.next-upload-dragable .next-upload-drag-icon{margin:20px 0 0;color:#666}.next-upload-dragable .next-upload-drag-icon .next-upload-drag-upload-icon:before{content:"\E7EE"}.next-upload-dragable .next-upload-drag-text{margin:12px 0 0;font-size:14px;color:#666}.next-upload-dragable .next-upload-drag-hint{margin:4px 0 20px;font-size:12px;color:#999}.next-upload-dragable .next-upload-drag-over{border-color:#5584ff} \ No newline at end of file diff --git a/dist/next-noreset.min.css b/dist/next-noreset.min.css new file mode 100644 index 0000000000..decf4dacf3 --- /dev/null +++ b/dist/next-noreset.min.css @@ -0,0 +1,6 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}to{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}to{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}to{opacity:0;-webkit-transform:translateY(-100px);-ms-transform:translateY(-100px);transform:translateY(-100px)}}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);-ms-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@-webkit-keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandInDown{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandInUp{0%{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@keyframes expandInWithFade{0%{opacity:0}40%{opacity:.1}50%{opacity:.9}to{opacity:1}}@-webkit-keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@keyframes expandOutUp{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left top 0;-ms-transform-origin:left top 0;transform-origin:left top 0}}@-webkit-keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@keyframes expandOutDown{0%{opacity:1;-webkit-transform:scaleY(1);-ms-transform:scaleY(1);transform:scaleY(1);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}to{opacity:0;-webkit-transform:scaleY(.6);-ms-transform:scaleY(.6);transform:scaleY(.6);-webkit-transform-origin:left bottom 0;-ms-transform-origin:left bottom 0;transform-origin:left bottom 0}}@-webkit-keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@keyframes expandOutWithFade{0%{opacity:1}70%{opacity:0}to{opacity:0}}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}20%{-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeIn,.fadeInDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInLeft,.fadeInRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOut,.fadeOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutLeft,.fadeOutRight{-webkit-backface-visibility:hidden;backface-visibility:hidden}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.zoomIn,.zoomOut{-webkit-backface-visibility:hidden;backface-visibility:hidden}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown{-webkit-animation-name:expandInDown;animation-name:expandInDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInDown,.expandOutUp{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutUp{-webkit-animation-name:expandOutUp;animation-name:expandOutUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp{-webkit-animation-name:expandInUp;animation-name:expandInUp;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.expandInUp,.expandOutDown{-webkit-backface-visibility:hidden;backface-visibility:hidden}.expandOutDown{-webkit-animation-name:expandOutDown;animation-name:expandOutDown;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.15s;animation-duration:.15s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both}.pulse{-webkit-animation-name:pulse;animation-name:pulse;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-enter{overflow:hidden}.expand-enter-active{-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.expand-enter-active>*{-webkit-animation-name:expandInWithFade;animation-name:expandInWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.expand-leave{overflow:hidden}.expand-leave-active{-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.expand-leave-active>*{-webkit-animation-name:expandOutWithFade;animation-name:expandOutWithFade;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-delay:0s;animation-delay:0s;-webkit-animation-timing-function:cubic-bezier(.23,1,.32,1);animation-timing-function:cubic-bezier(.23,1,.32,1);-webkit-animation-fill-mode:"forwards";animation-fill-mode:"forwards";-webkit-backface-visibility:hidden;backface-visibility:hidden}.next-sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;margin:-1px}.next-badge{position:relative;display:inline-block;vertical-align:middle;line-height:1}.next-badge,.next-badge *,.next-badge :after,.next-badge :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-badge .next-badge-count{color:#fff;background:#ff3000;text-align:center;white-space:nowrap;border-radius:8px;position:absolute;width:auto;height:16px;min-width:8px;padding:0 4px;font-size:12px;line-height:16px;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);top:-.5em}.next-badge .next-badge-count a,.next-badge .next-badge-count a:hover{color:#fff}.next-badge .next-badge-dot{color:#fff;background:#ff3000;text-align:center;white-space:nowrap;border-radius:8px;position:absolute;width:8px;height:8px;min-width:8px;padding:0;font-size:1px;line-height:1;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);top:-.5em}.next-badge .next-badge-dot a,.next-badge .next-badge-dot a:hover{color:#fff}.next-badge .next-badge-custom{line-height:1.166667;white-space:nowrap;font-size:12px;padding-left:4px;padding-right:4px;border-radius:3px;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}.next-badge .next-badge-custom>*{line-height:1}.next-badge .next-badge-custom>.next-icon:before,.next-badge .next-badge-custom>i:before{font-size:inherit;width:auto;vertical-align:top}.next-badge .next-badge-scroll-number{position:absolute;top:-4px;z-index:10;overflow:hidden;-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}.next-badge-scroll-number-only{position:relative;display:inline-block;transition:transform .3s cubic-bezier(.645,.045,.355,1),-webkit-transform .3s cubic-bezier(.645,.045,.355,1);min-width:8px}.next-badge-scroll-number-only span{display:block;height:16px;line-height:16px;font-size:12px}.next-badge-not-a-wrapper .next-badge-count,.next-badge-not-a-wrapper .next-badge-custom,.next-badge-not-a-wrapper .next-badge-dot{position:relative;display:block;top:auto;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.next-badge-list-wrapper{margin-left:0}.next-badge-list-wrapper li{margin-bottom:0;list-style:none}.next-badge[dir=rtl] .next-badge-custom{padding-right:4px;padding-left:4px}.next-badge[dir=rtl] .next-badge-scroll-number{left:0;-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center}.next-overlay-wrapper .next-overlay-inner{z-index:1001}.next-overlay-wrapper .next-overlay-backdrop{position:fixed;z-index:1001;top:0;left:0;width:100%;height:100%;background:#000;-webkit-transition:opacity .3s;transition:opacity .3s;opacity:0}.next-overlay-wrapper.opened .next-overlay-backdrop{opacity:.2}.next-icon[dir=rtl]:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}@font-face{font-family:NextIcon;src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot");src:url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.eot?#iefix") format("embedded-opentype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.woff") format("woff"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.ttf") format("truetype"),url("//at.alicdn.com/t/font_515771_emcns5054x3whfr.svg#NextIcon") format("svg")}.next-icon{display:inline-block;font-family:NextIcon;font-style:normal;font-weight:400;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.next-icon:before{display:inline-block;vertical-align:middle;text-align:center}.next-icon-smile:before{content:"\E65F"}.next-icon-cry:before{content:"\E65D"}.next-icon-success:before{content:"\E60A"}.next-icon-warning:before{content:"\E60B"}.next-icon-prompt:before{content:"\E60C"}.next-icon-error:before{content:"\E60D"}.next-icon-help:before{content:"\E673"}.next-icon-clock:before{content:"\E621"}.next-icon-success-filling:before{content:"\E63A"}.next-icon-delete-filling:before{content:"\E623"}.next-icon-favorites-filling:before{content:"\E60E"}.next-icon-add:before{content:"\E655"}.next-icon-minus:before{content:"\E601"}.next-icon-arrow-up:before{content:"\E625"}.next-icon-arrow-down:before{content:"\E63D"}.next-icon-arrow-left:before{content:"\E61D"}.next-icon-arrow-right:before{content:"\E619"}.next-icon-arrow-double-left:before{content:"\E659"}.next-icon-arrow-double-right:before{content:"\E65E"}.next-icon-switch:before{content:"\E6B3"}.next-icon-sorting:before{content:"\E634"}.next-icon-descending:before{content:"\E61F"}.next-icon-ascending:before{content:"\E61E"}.next-icon-select:before{content:"\E632"}.next-icon-semi-select:before{content:"\E633"}.next-icon-search:before{content:"\E656"}.next-icon-close:before{content:"\E626"}.next-icon-ellipsis:before{content:"\E654"}.next-icon-picture:before{content:"\E631"}.next-icon-calendar:before{content:"\E607"}.next-icon-ashbin:before{content:"\E639"}.next-icon-upload:before{content:"\E7EE"}.next-icon-download:before{content:"\E628"}.next-icon-set:before{content:"\E683"}.next-icon-edit:before{content:"\E63B"}.next-icon-refresh:before{content:"\E677"}.next-icon-filter:before{content:"\E627"}.next-icon-attachment:before{content:"\E665"}.next-icon-account:before{content:"\E608"}.next-icon-email:before{content:"\E605"}.next-icon-atm:before{content:"\E606"}.next-icon-loading:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}@-webkit-keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-icon.next-xxs:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-icon.next-xxs{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-icon.next-xxs:before{width:16px;font-size:16px}}.next-icon.next-xs:before{width:12px;font-size:12px;line-height:inherit}.next-icon.next-small:before{width:16px;font-size:16px;line-height:inherit}.next-icon.next-medium:before{width:20px;font-size:20px;line-height:inherit}.next-icon.next-large:before{width:24px;font-size:24px;line-height:inherit}.next-icon.next-xl:before{width:32px;font-size:32px;line-height:inherit}.next-icon.next-xxl:before{width:48px;font-size:48px;line-height:inherit}.next-icon.next-xxxl:before{width:64px;font-size:64px;line-height:inherit}.next-icon.next-inherit:before{width:inherit;font-size:inherit;line-height:inherit}.next-balloon{position:absolute;max-width:300px;border-style:solid;border-radius:3px;word-wrap:break-word;z-index:0}.next-balloon,.next-balloon *,.next-balloon :after,.next-balloon :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-balloon:focus,.next-balloon :focus{outline:0}.next-balloon-primary{color:#333;border-color:#4494f9;background-color:#e3f2fd;-webkit-box-shadow:0 1px 3px 0 rgba(0,0,0,.12);box-shadow:0 1px 3px 0 rgba(0,0,0,.12);border-width:1px}.next-balloon-primary .next-balloon-close{position:absolute;top:12px;right:12px;font-size:12px;color:#999}.next-balloon-primary .next-balloon-close .next-icon{width:12px;height:12px;line-height:12px}.next-balloon-primary .next-balloon-close .next-icon:before{width:12px;height:12px;font-size:12px;line-height:12px}.next-balloon-primary .next-balloon-close :hover{color:#333}.next-balloon-primary:after{position:absolute;width:12px;height:12px;content:" ";-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-sizing:content-box!important;box-sizing:content-box!important;border:1px solid #4494f9;background-color:#e3f2fd;z-index:-1}.next-balloon-primary.next-balloon-top:after{top:-7px;left:calc(50% + -7px);border-right:none;border-bottom:none;-webkit-box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-right:after{top:calc(50% + -7px);right:-7px;border-left:none;border-bottom:none;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-bottom:after{bottom:-7px;left:calc(50% + -7px);border-top:none;border-left:none;-webkit-box-shadow:1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-left:after{top:calc(50% + -7px)}.next-balloon-primary.next-balloon-left-top:after,.next-balloon-primary.next-balloon-left:after{left:-7px;border-top:none;border-right:none;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-left-top:after{top:12px}.next-balloon-primary.next-balloon-left-bottom:after{bottom:12px;left:-7px;border-top:none;border-right:none;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-right-top:after{top:12px}.next-balloon-primary.next-balloon-right-bottom:after,.next-balloon-primary.next-balloon-right-top:after{right:-7px;border-bottom:none;border-left:none;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-right-bottom:after{bottom:12px}.next-balloon-primary.next-balloon-top-left:after{left:12px}.next-balloon-primary.next-balloon-top-left:after,.next-balloon-primary.next-balloon-top-right:after{top:-7px;border-right:none;border-bottom:none;-webkit-box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-top-right:after{right:12px}.next-balloon-primary.next-balloon-bottom-left:after{left:12px}.next-balloon-primary.next-balloon-bottom-left:after,.next-balloon-primary.next-balloon-bottom-right:after{bottom:-7px;border-top:none;border-left:none;-webkit-box-shadow:1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-primary.next-balloon-bottom-right:after{right:12px}.next-balloon-normal{color:#333;border-color:#dcdee3;background-color:#fff;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-width:1px}.next-balloon-normal .next-balloon-close{position:absolute;top:12px;right:12px;font-size:12px;color:#999}.next-balloon-normal .next-balloon-close .next-icon{width:12px;height:12px;line-height:12px}.next-balloon-normal .next-balloon-close .next-icon:before{width:12px;height:12px;font-size:12px;line-height:12px}.next-balloon-normal .next-balloon-close :hover{color:#666}.next-balloon-normal:after{position:absolute;width:12px;height:12px;content:" ";-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-sizing:content-box!important;box-sizing:content-box!important;border:1px solid #dcdee3;background-color:#fff;z-index:-1}.next-balloon-normal.next-balloon-top:after{top:-7px;left:calc(50% + -7px);border-right:none;border-bottom:none;-webkit-box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-right:after{top:calc(50% + -7px);right:-7px;border-left:none;border-bottom:none;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-bottom:after{bottom:-7px;left:calc(50% + -7px);border-top:none;border-left:none;-webkit-box-shadow:1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-left:after{top:calc(50% + -7px)}.next-balloon-normal.next-balloon-left-top:after,.next-balloon-normal.next-balloon-left:after{left:-7px;border-top:none;border-right:none;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-left-top:after{top:12px}.next-balloon-normal.next-balloon-left-bottom:after{bottom:12px;left:-7px;border-top:none;border-right:none;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-right-top:after{top:12px}.next-balloon-normal.next-balloon-right-bottom:after,.next-balloon-normal.next-balloon-right-top:after{right:-7px;border-bottom:none;border-left:none;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-right-bottom:after{bottom:12px}.next-balloon-normal.next-balloon-top-left:after{left:12px}.next-balloon-normal.next-balloon-top-left:after,.next-balloon-normal.next-balloon-top-right:after{top:-7px;border-right:none;border-bottom:none;-webkit-box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-top-right:after{right:12px}.next-balloon-normal.next-balloon-bottom-left:after{left:12px}.next-balloon-normal.next-balloon-bottom-left:after,.next-balloon-normal.next-balloon-bottom-right:after{bottom:-7px;border-top:none;border-left:none;-webkit-box-shadow:1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon-normal.next-balloon-bottom-right:after{right:12px}.next-balloon.visible{display:block}.next-balloon.hidden{display:none}.next-balloon-medium{padding:16px}.next-balloon-closable{padding:16px 40px 16px 16px}.next-balloon-tooltip{position:absolute;max-width:300px;border-radius:3px;font-size:12px;z-index:0;color:#333;border:1px solid #dcdee3;background-color:#f2f3f7;-webkit-box-shadow:none;box-shadow:none}.next-balloon-tooltip,.next-balloon-tooltip *,.next-balloon-tooltip :after,.next-balloon-tooltip :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-balloon-tooltip:after{position:absolute;width:12px;height:12px;content:" ";-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-sizing:content-box!important;box-sizing:content-box!important;border:1px solid #dcdee3;background-color:#f2f3f7;z-index:-1}.next-balloon-tooltip-top:after{top:-7px;left:calc(50% + -7px);border-right:none;border-bottom:none}.next-balloon-tooltip-right:after{top:calc(50% + -7px);right:-7px;border-left:none;border-bottom:none}.next-balloon-tooltip-bottom:after{bottom:-7px;left:calc(50% + -7px);border-top:none;border-left:none}.next-balloon-tooltip-left:after{top:calc(50% + -7px);left:-7px;border-top:none;border-right:none}.next-balloon-tooltip-left-top:after{top:12px;left:-7px;border-top:none;border-right:none}.next-balloon-tooltip-left-bottom:after{bottom:12px;left:-7px;border-top:none;border-right:none}.next-balloon-tooltip-right-top:after{top:12px;right:-7px;border-bottom:none;border-left:none}.next-balloon-tooltip-right-bottom:after{right:-7px;bottom:12px;border-bottom:none;border-left:none}.next-balloon-tooltip-top-left:after{top:-7px;left:12px;border-right:none;border-bottom:none}.next-balloon-tooltip-top-right:after{top:-7px;right:12px;border-right:none;border-bottom:none}.next-balloon-tooltip-bottom-left:after{bottom:-7px;left:12px;border-top:none;border-left:none}.next-balloon-tooltip-bottom-right:after{right:12px;bottom:-7px;border-top:none;border-left:none}.next-balloon-tooltip.visible{display:block}.next-balloon-tooltip.hidden{display:none}.next-balloon-tooltip-medium{padding:8px}.next-balloon[dir=rtl].next-balloon-primary .next-balloon-close{left:12px;right:auto}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-right:after{left:-7px;right:auto;border-right:none;border-top:none;border-left:inherit;border-bottom:inherit;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-left-bottom:after,.next-balloon[dir=rtl].next-balloon-primary.next-balloon-left-top:after,.next-balloon[dir=rtl].next-balloon-primary.next-balloon-left:after{right:-7px;left:auto;border-left:none;border-bottom:none;border-right:inherit;border-top:inherit;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-right-bottom:after,.next-balloon[dir=rtl].next-balloon-primary.next-balloon-right-top:after{left:-7px;right:auto;border-right:none;border-top:none;border-bottom:inherit;border-left:inherit;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-top-left:after{right:12px;left:auto}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-top-right:after{right:auto;left:12px}.next-balloon[dir=rtl].next-balloon-primary.next-balloon-bottom-left:after{right:12px;left:auto}.next-balloon[dir=rtl].next-balloon-normal .next-balloon-close,.next-balloon[dir=rtl].next-balloon-primary.next-balloon-bottom-right:after{left:12px;right:auto}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-right:after{left:-7px;right:auto;border-right:none;border-top:none;border-left:inherit;border-bottom:inherit;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-left-bottom:after,.next-balloon[dir=rtl].next-balloon-normal.next-balloon-left-top:after,.next-balloon[dir=rtl].next-balloon-normal.next-balloon-left:after{right:-7px;left:auto;border-left:none;border-bottom:none;border-right:inherit;border-top:inherit;-webkit-box-shadow:1px -1px 1px 0 rgba(0,0,0,.1);box-shadow:1px -1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-right-bottom:after,.next-balloon[dir=rtl].next-balloon-normal.next-balloon-right-top:after{left:-7px;right:auto;border-right:none;border-top:none;border-bottom:inherit;border-left:inherit;-webkit-box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1);box-shadow:-1px 1px 1px 0 rgba(0,0,0,.1)}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-top-left:after{right:12px;left:auto}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-top-right:after{right:auto;left:12px}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-bottom-left:after{right:12px;left:auto}.next-balloon[dir=rtl].next-balloon-normal.next-balloon-bottom-right:after{left:12px;right:auto}.next-balloon[dir=rtl].next-balloon-closable{padding:16px 16px 16px 40px}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-right:after{left:-7px;right:auto;border-top:none;border-right:none;border-left:inherit;border-bottom:inherit}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-left-bottom:after,.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-left-top:after,.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-left:after{right:-7px;left:auto;border-top:inherit;border-right:inherit;border-left:none;border-bottom:none}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-right-bottom:after,.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-right-top:after{left:-7px;right:auto;border-top:none;border-right:none;border-left:inherit;border-bottom:inherit}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-top-left:after{right:12px;left:auto}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-top-right:after{left:12px;right:auto}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-bottom-left:after{right:12px;left:auto}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-bottom-right:after{left:12px;right:auto}.next-balloon-tooltip[dir=rtl].next-balloon-tooltip-medium{padding:8px}.next-breadcrumb{display:block;margin:0;padding:0;height:16px;line-height:16px}.next-breadcrumb .next-breadcrumb-item{display:inline-block}.next-breadcrumb .next-breadcrumb-item .next-breadcrumb-text{display:inline-block;text-decoration:none;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.next-breadcrumb .next-breadcrumb-item .next-breadcrumb-text>b{font-weight:400}.next-breadcrumb .next-breadcrumb-item .next-breadcrumb-separator{display:inline-block;vertical-align:top}.next-breadcrumb .next-breadcrumb-text{height:16px;min-width:16px;font-size:12px;line-height:16px}.next-breadcrumb .next-breadcrumb-separator{height:16px;margin:0 8px;font-size:8px;line-height:16px}.next-breadcrumb .next-breadcrumb-separator .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-breadcrumb .next-breadcrumb-separator .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-breadcrumb .next-breadcrumb-separator .next-icon:before{width:16px;font-size:16px}}.next-breadcrumb .next-breadcrumb-text-ellipsis{font-size:12px}.next-breadcrumb .next-breadcrumb-text{color:#666}.next-breadcrumb .next-breadcrumb-text>b{color:#5584ff}.next-breadcrumb .next-breadcrumb-text>a{color:#666;text-decoration:none;text-align:center}.next-breadcrumb .next-breadcrumb-text.activated,.next-breadcrumb .next-breadcrumb-text.activated>a{color:#333;font-weight:400}.next-breadcrumb .next-breadcrumb-text-ellipsis{color:#666;cursor:default}.next-breadcrumb .next-breadcrumb-separator{color:#a0a2ad}.next-breadcrumb .next-breadcrumb-text:not(.next-breadcrumb-text-ellipsis):hover>a,.next-breadcrumb a.next-breadcrumb-text.activated:hover>a,.next-breadcrumb a.next-breadcrumb-text:not(.next-breadcrumb-text-ellipsis):hover,.next-breadcrumb a.next-breadcrumb-text:not(.next-breadcrumb-text-ellipsis):hover>b{color:#5584ff}.next-breadcrumb a.next-breadcrumb-text.activated:hover{color:#5584ff;font-weight:400}.next-btn,.next-btn *,.next-btn :after,.next-btn :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-btn::-moz-focus-inner{border:0;padding:0}.next-btn,.next-btn:active,.next-btn:focus,.next-btn:hover{outline:0}@keyframes loadingCircle{0%{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.next-btn{position:relative;display:inline-block;-webkit-box-shadow:none;box-shadow:none;text-decoration:none;text-align:center;text-transform:none;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;cursor:pointer}.next-btn:after{text-align:center;position:absolute;opacity:0;visibility:hidden;-webkit-transition:opacity .5s ease;transition:opacity .5s ease}.next-btn .next-icon.next-xs:before{vertical-align:baseline}.next-btn.hover,.next-btn:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn.next-small{border-radius:3px;padding:0 8px;height:20px;line-height:18px;font-size:12px;border-width:1px}.next-btn.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-small>.next-btn-icon.next-icon-alone:before,.next-btn.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small.next-btn-loading{padding-left:24px}.next-btn.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:8px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-small.next-btn-loading>.next-icon{display:none}.next-btn.next-medium{border-radius:3px;padding:0 12px;height:28px;line-height:26px;font-size:12px;border-width:1px}.next-btn.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium.next-btn-loading{padding-left:28px}.next-btn.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:12px;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn.next-medium.next-btn-loading>.next-icon{display:none}.next-btn.next-large{border-radius:3px;padding:0 16px;height:40px;line-height:38px;font-size:16px;border-width:1px}.next-btn.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn.next-large>.next-btn-icon.next-icon-alone:before,.next-btn.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large.next-btn-loading{padding-left:36px}.next-btn.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:16px;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn.next-large.next-btn-loading>.next-icon{display:none}.next-btn.next-btn-normal{border-style:solid;background-color:#fff;border-color:#c4c6cf}.next-btn.next-btn-normal,.next-btn.next-btn-normal.visited,.next-btn.next-btn-normal:link,.next-btn.next-btn-normal:visited{color:#333}.next-btn.next-btn-normal.active,.next-btn.next-btn-normal.hover,.next-btn.next-btn-normal:active,.next-btn.next-btn-normal:focus,.next-btn.next-btn-normal:hover{color:#333;background-color:#f2f3f7;border-color:#a0a2ad;text-decoration:none}.next-btn.next-btn-primary{border-style:solid;background-color:#5584ff;border-color:transparent}.next-btn.next-btn-primary,.next-btn.next-btn-primary.visited,.next-btn.next-btn-primary:link,.next-btn.next-btn-primary:visited{color:#fff}.next-btn.next-btn-primary.active,.next-btn.next-btn-primary.hover,.next-btn.next-btn-primary:active,.next-btn.next-btn-primary:focus,.next-btn.next-btn-primary:hover{color:#fff;background-color:#3e71f7;border-color:transparent;text-decoration:none}.next-btn.next-btn-secondary{border-style:solid;background-color:#fff;border-color:#5584ff}.next-btn.next-btn-secondary,.next-btn.next-btn-secondary.visited,.next-btn.next-btn-secondary:link,.next-btn.next-btn-secondary:visited{color:#5584ff}.next-btn.next-btn-secondary.active,.next-btn.next-btn-secondary.hover,.next-btn.next-btn-secondary:active,.next-btn.next-btn-secondary:focus,.next-btn.next-btn-secondary:hover{color:#fff;background-color:#3e71f7;border-color:#3e71f7;text-decoration:none}.next-btn.disabled,.next-btn[disabled]{cursor:not-allowed;background-color:#f7f8fa;border-color:#e6e7eb}.next-btn.disabled,.next-btn.disabled.visited,.next-btn.disabled:link,.next-btn.disabled:visited,.next-btn[disabled],.next-btn[disabled].visited,.next-btn[disabled]:link,.next-btn[disabled]:visited{color:#ccc}.next-btn.disabled.active,.next-btn.disabled.hover,.next-btn.disabled:active,.next-btn.disabled:focus,.next-btn.disabled:hover,.next-btn[disabled].active,.next-btn[disabled].hover,.next-btn[disabled]:active,.next-btn[disabled]:focus,.next-btn[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-warning{border-style:solid}.next-btn-warning.next-btn-primary{background-color:#ff3000;border-color:#ff3000}.next-btn-warning.next-btn-primary,.next-btn-warning.next-btn-primary.visited,.next-btn-warning.next-btn-primary:link,.next-btn-warning.next-btn-primary:visited{color:#fff}.next-btn-warning.next-btn-primary.active,.next-btn-warning.next-btn-primary.hover,.next-btn-warning.next-btn-primary:active,.next-btn-warning.next-btn-primary:focus,.next-btn-warning.next-btn-primary:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary[disabled]{background-color:#f7f8fa;border-color:#dcdee3}.next-btn-warning.next-btn-primary.disabled,.next-btn-warning.next-btn-primary.disabled.visited,.next-btn-warning.next-btn-primary.disabled:link,.next-btn-warning.next-btn-primary.disabled:visited,.next-btn-warning.next-btn-primary[disabled],.next-btn-warning.next-btn-primary[disabled].visited,.next-btn-warning.next-btn-primary[disabled]:link,.next-btn-warning.next-btn-primary[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-primary.disabled.active,.next-btn-warning.next-btn-primary.disabled.hover,.next-btn-warning.next-btn-primary.disabled:active,.next-btn-warning.next-btn-primary.disabled:focus,.next-btn-warning.next-btn-primary.disabled:hover,.next-btn-warning.next-btn-primary[disabled].active,.next-btn-warning.next-btn-primary[disabled].hover,.next-btn-warning.next-btn-primary[disabled]:active,.next-btn-warning.next-btn-primary[disabled]:focus,.next-btn-warning.next-btn-primary[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#dcdee3;text-decoration:none}.next-btn-warning.next-btn-normal{background-color:#fff;border-color:#ff3000}.next-btn-warning.next-btn-normal,.next-btn-warning.next-btn-normal.visited,.next-btn-warning.next-btn-normal:link,.next-btn-warning.next-btn-normal:visited{color:#ff3000}.next-btn-warning.next-btn-normal.active,.next-btn-warning.next-btn-normal.hover,.next-btn-warning.next-btn-normal:active,.next-btn-warning.next-btn-normal:focus,.next-btn-warning.next-btn-normal:hover{color:#fff;background-color:#e72b00;border-color:#e72b00;text-decoration:none}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal[disabled]{background-color:#f7f8fa;border-color:#e6e7eb}.next-btn-warning.next-btn-normal.disabled,.next-btn-warning.next-btn-normal.disabled.visited,.next-btn-warning.next-btn-normal.disabled:link,.next-btn-warning.next-btn-normal.disabled:visited,.next-btn-warning.next-btn-normal[disabled],.next-btn-warning.next-btn-normal[disabled].visited,.next-btn-warning.next-btn-normal[disabled]:link,.next-btn-warning.next-btn-normal[disabled]:visited{color:#ccc}.next-btn-warning.next-btn-normal.disabled.active,.next-btn-warning.next-btn-normal.disabled.hover,.next-btn-warning.next-btn-normal.disabled:active,.next-btn-warning.next-btn-normal.disabled:focus,.next-btn-warning.next-btn-normal.disabled:hover,.next-btn-warning.next-btn-normal[disabled].active,.next-btn-warning.next-btn-normal[disabled].hover,.next-btn-warning.next-btn-normal[disabled]:active,.next-btn-warning.next-btn-normal[disabled]:focus,.next-btn-warning.next-btn-normal[disabled]:hover{color:#ccc;background-color:#f7f8fa;border-color:#e6e7eb;text-decoration:none}.next-btn-text{border-radius:0}.next-btn-text,.next-btn-text.hover,.next-btn-text:hover{-webkit-box-shadow:none;box-shadow:none}.next-btn-text.next-btn-primary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-primary,.next-btn-text.next-btn-primary.visited,.next-btn-text.next-btn-primary:link,.next-btn-text.next-btn-primary:visited{color:#5584ff}.next-btn-text.next-btn-primary.active,.next-btn-text.next-btn-primary.hover,.next-btn-text.next-btn-primary:active,.next-btn-text.next-btn-primary:focus,.next-btn-text.next-btn-primary:hover{color:#3e71f7;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-secondary{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-secondary,.next-btn-text.next-btn-secondary.visited,.next-btn-text.next-btn-secondary:link,.next-btn-text.next-btn-secondary:visited{color:#666}.next-btn-text.next-btn-secondary.active,.next-btn-text.next-btn-secondary.hover,.next-btn-text.next-btn-secondary:active,.next-btn-text.next-btn-secondary:focus,.next-btn-text.next-btn-secondary:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-normal{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-normal,.next-btn-text.next-btn-normal.visited,.next-btn-text.next-btn-normal:link,.next-btn-text.next-btn-normal:visited{color:#333}.next-btn-text.next-btn-normal.active,.next-btn-text.next-btn-normal.hover,.next-btn-text.next-btn-normal:active,.next-btn-text.next-btn-normal:focus,.next-btn-text.next-btn-normal:hover{color:#5584ff;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-large{border-radius:0;padding:0;height:24px;line-height:24px;font-size:14px;border-width:0}.next-btn-text.next-large>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-large>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text.next-large.next-btn-loading{padding-left:20px}.next-btn-text.next-large.next-btn-loading:after{width:16px;height:16px;font-size:16px;line-height:16px;left:0;top:50%;text-align:center;margin-top:-8px;margin-right:4px}.next-btn-text.next-large.next-btn-loading>.next-icon{display:none}.next-btn-text.next-medium{border-radius:0;padding:0;height:20px;line-height:20px;font-size:12px;border-width:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-medium>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-medium.next-btn-loading{padding-left:16px}.next-btn-text.next-medium.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-medium.next-btn-loading>.next-icon{display:none}.next-btn-text.next-small{border-radius:0;padding:0;height:16px;line-height:16px;font-size:12px;border-width:0}.next-btn-text.next-small>.next-btn-icon.next-icon-first{margin-left:0;margin-right:4px}.next-btn-text.next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small>.next-btn-icon.next-icon-last{margin-left:4px;margin-right:0}.next-btn-text.next-small>.next-btn-icon.next-icon-alone:before,.next-btn-text.next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text.next-small.next-btn-loading{padding-left:16px}.next-btn-text.next-small.next-btn-loading:after{width:12px;height:12px;font-size:12px;line-height:12px;left:0;top:50%;text-align:center;margin-top:-6px;margin-right:4px}.next-btn-text.next-small.next-btn-loading>.next-icon{display:none}.next-btn-text.disabled,.next-btn-text[disabled]{background-color:transparent;border-color:transparent}.next-btn-text.disabled,.next-btn-text.disabled.visited,.next-btn-text.disabled:link,.next-btn-text.disabled:visited,.next-btn-text[disabled],.next-btn-text[disabled].visited,.next-btn-text[disabled]:link,.next-btn-text[disabled]:visited{color:#ccc}.next-btn-text.disabled.active,.next-btn-text.disabled.hover,.next-btn-text.disabled:active,.next-btn-text.disabled:focus,.next-btn-text.disabled:hover,.next-btn-text[disabled].active,.next-btn-text[disabled].hover,.next-btn-text[disabled]:active,.next-btn-text[disabled]:focus,.next-btn-text[disabled]:hover{color:#ccc;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-text.next-btn-loading{background-color:transparent;border-color:transparent}.next-btn-text.next-btn-loading,.next-btn-text.next-btn-loading.visited,.next-btn-text.next-btn-loading:link,.next-btn-text.next-btn-loading:visited{color:#333}.next-btn-text.next-btn-loading.active,.next-btn-text.next-btn-loading.hover,.next-btn-text.next-btn-loading:active,.next-btn-text.next-btn-loading:focus,.next-btn-text.next-btn-loading:hover{color:#333;background-color:transparent;border-color:transparent;text-decoration:none}.next-btn-loading{pointer-events:none}.next-btn-loading:after{font-family:NextIcon;content:"\E646";opacity:1;visibility:visible;-webkit-animation:loadingCircle 2s infinite linear;animation:loadingCircle 2s infinite linear}.next-btn-ghost{-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-btn-ghost.next-btn-dark{background-color:transparent;border-color:#fff}.next-btn-ghost.next-btn-dark,.next-btn-ghost.next-btn-dark.visited,.next-btn-ghost.next-btn-dark:link,.next-btn-ghost.next-btn-dark:visited{color:#fff}.next-btn-ghost.next-btn-dark.active,.next-btn-ghost.next-btn-dark.hover,.next-btn-ghost.next-btn-dark:active,.next-btn-ghost.next-btn-dark:focus,.next-btn-ghost.next-btn-dark:hover{color:#fff;background-color:hsla(0,0%,100%,.8);border-color:#fff;text-decoration:none}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark[disabled]{background-color:transparent;border-color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled,.next-btn-ghost.next-btn-dark.disabled.visited,.next-btn-ghost.next-btn-dark.disabled:link,.next-btn-ghost.next-btn-dark.disabled:visited,.next-btn-ghost.next-btn-dark[disabled],.next-btn-ghost.next-btn-dark[disabled].visited,.next-btn-ghost.next-btn-dark[disabled]:link,.next-btn-ghost.next-btn-dark[disabled]:visited{color:hsla(0,0%,100%,.4)}.next-btn-ghost.next-btn-dark.disabled.active,.next-btn-ghost.next-btn-dark.disabled.hover,.next-btn-ghost.next-btn-dark.disabled:active,.next-btn-ghost.next-btn-dark.disabled:focus,.next-btn-ghost.next-btn-dark.disabled:hover,.next-btn-ghost.next-btn-dark[disabled].active,.next-btn-ghost.next-btn-dark[disabled].hover,.next-btn-ghost.next-btn-dark[disabled]:active,.next-btn-ghost.next-btn-dark[disabled]:focus,.next-btn-ghost.next-btn-dark[disabled]:hover{color:hsla(0,0%,100%,.4);background-color:transparent;border-color:hsla(0,0%,100%,.4);text-decoration:none}.next-btn-ghost.next-btn-light{background-color:transparent;border-color:#333}.next-btn-ghost.next-btn-light,.next-btn-ghost.next-btn-light.visited,.next-btn-ghost.next-btn-light:link,.next-btn-ghost.next-btn-light:visited{color:#333}.next-btn-ghost.next-btn-light.active,.next-btn-ghost.next-btn-light.hover,.next-btn-ghost.next-btn-light:active,.next-btn-ghost.next-btn-light:focus,.next-btn-ghost.next-btn-light:hover{color:#999;background-color:rgba(0,0,0,.92);border-color:#333;text-decoration:none}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light[disabled]{background-color:transparent;border-color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled,.next-btn-ghost.next-btn-light.disabled.visited,.next-btn-ghost.next-btn-light.disabled:link,.next-btn-ghost.next-btn-light.disabled:visited,.next-btn-ghost.next-btn-light[disabled],.next-btn-ghost.next-btn-light[disabled].visited,.next-btn-ghost.next-btn-light[disabled]:link,.next-btn-ghost.next-btn-light[disabled]:visited{color:rgba(0,0,0,.1)}.next-btn-ghost.next-btn-light.disabled.active,.next-btn-ghost.next-btn-light.disabled.hover,.next-btn-ghost.next-btn-light.disabled:active,.next-btn-ghost.next-btn-light.disabled:focus,.next-btn-ghost.next-btn-light.disabled:hover,.next-btn-ghost.next-btn-light[disabled].active,.next-btn-ghost.next-btn-light[disabled].hover,.next-btn-ghost.next-btn-light[disabled]:active,.next-btn-ghost.next-btn-light[disabled]:focus,.next-btn-ghost.next-btn-light[disabled]:hover{color:rgba(0,0,0,.1);background-color:transparent;border-color:rgba(0,0,0,.1);text-decoration:none}.next-btn-group{position:relative;display:inline-block;vertical-align:middle}.next-btn-group>.next-btn{position:relative;float:left;-webkit-box-shadow:none;box-shadow:none}.next-btn-group>.next-btn.active,.next-btn-group>.next-btn:active,.next-btn-group>.next-btn:focus,.next-btn-group>.next-btn:hover{z-index:1}.next-btn-group>.next-btn.disabled,.next-btn-group>.next-btn[disabled]{z-index:0}.next-btn-group .next-btn.next-btn{margin:0 0 0 -1px}.next-btn-group .next-btn:not(:first-child):not(:last-child){border-radius:0}.next-btn-group>.next-btn:first-child{margin:0}.next-btn-group>.next-btn:first-child:not(:last-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group>.next-btn:last-child:not(:first-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group>.next-btn-primary:not(:first-child){border-left-color:hsla(0,0%,100%,.2)}.next-btn-group>.next-btn-primary:not(:first-child):hover{border-left-color:transparent}.next-btn-group>.next-btn-primary:not(:first-child).disabled,.next-btn-group>.next-btn-primary:not(:first-child)[disabled]{border-left-color:#e6e7eb}.next-btn-group[dir=rtl]>.next-btn{float:right}.next-btn-group[dir=rtl] .next-btn.next-btn{margin:0 -1px 0 0}.next-btn-group[dir=rtl]>.next-btn:first-child:not(:last-child){border-bottom-left-radius:0;border-top-left-radius:0}.next-btn-group[dir=rtl]>.next-btn:last-child:not(:first-child){border-bottom-right-radius:0;border-top-right-radius:0}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child){border-right-color:hsla(0,0%,100%,.2)}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child):hover{border-right-color:transparent}.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child).disabled,.next-btn-group[dir=rtl]>.next-btn-primary:not(:first-child)[disabled]{border-right-color:#e6e7eb}.next-btn.next-small[dir=rtl]{border-radius:3px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-small[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-small[dir=rtl].next-btn-loading{padding-left:8px;padding-right:24px}.next-btn.next-small[dir=rtl].next-btn-loading:after{right:8px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-medium[dir=rtl]{border-radius:3px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-medium[dir=rtl]>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn.next-medium[dir=rtl].next-btn-loading{padding-left:12px;padding-right:28px}.next-btn.next-medium[dir=rtl].next-btn-loading:after{right:12px;top:50%;margin-right:0;margin-left:4px}.next-btn.next-large[dir=rtl]{border-radius:3px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn.next-large[dir=rtl]>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn.next-large[dir=rtl].next-btn-loading{padding-left:16px;padding-right:36px}.next-btn.next-large[dir=rtl].next-btn-loading:after{right:16px;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-large{border-radius:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-first:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-large>.next-btn-icon.next-icon-last:before{width:16px;font-size:16px;line-height:inherit}.next-btn-text[dir=rtl].next-large.next-btn-loading{padding-left:0;padding-right:20px}.next-btn-text[dir=rtl].next-large.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-medium{border-radius:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-medium>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-medium.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-medium.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-btn-text[dir=rtl].next-small{border-radius:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first{margin-left:4px;margin-right:0}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-first:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last{margin-left:0;margin-right:4px}.next-btn-text[dir=rtl].next-small>.next-btn-icon.next-icon-last:before{width:12px;font-size:12px;line-height:inherit}.next-btn-text[dir=rtl].next-small.next-btn-loading{padding-left:0;padding-right:16px}.next-btn-text[dir=rtl].next-small.next-btn-loading:after{right:0;top:50%;margin-right:0;margin-left:4px}.next-radio-button-large[dir=rtl]>label:first-child{margin-left:-1px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.next-radio-button-large[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large[dir=rtl] .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small[dir=rtl]>label:first-child{margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small[dir=rtl]>label:last-child{margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-wrapper[dir=rtl] .next-radio-label{margin-left:0;margin-right:4px}.next-radio-group[dir=rtl] .next-radio-label{margin-right:4px;margin-left:16px}.next-radio-button[dir=rtl]>label .next-radio-label{margin:0}.next-radio-wrapper{outline:0}.next-radio-wrapper .next-radio{display:inline-block;vertical-align:middle;position:relative;line-height:1}.next-radio-wrapper .next-radio,.next-radio-wrapper .next-radio *,.next-radio-wrapper .next-radio :after,.next-radio-wrapper .next-radio :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-radio-wrapper .next-radio input[type=radio]{opacity:0;position:absolute;vertical-align:middle;top:0;left:0;width:16px;height:16px;margin:0}.next-radio-wrapper .next-radio-inner{display:block;width:16px;height:16px;background:#fff;border-radius:50%;border:1px solid #c4c6cf;-webkit-transition:all .36s ease 0s;transition:all .36s ease 0s;-webkit-box-shadow:none;box-shadow:none}.next-radio-wrapper .next-radio-inner:after{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;border-radius:50%;top:50%;margin-top:-2px;left:50%;margin-left:-2px;background:#fff;content:" ";-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86)}.next-radio-wrapper.checked .next-radio-inner{border-color:#5584ff;background:#5584ff}.next-radio-wrapper.checked .next-radio-inner:after{width:4px;height:4px;font-weight:700;background:#fff;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.next-radio-wrapper.checked.hovered .next-radio-inner,.next-radio-wrapper.checked:hover .next-radio-inner{border-color:transparent}.next-radio-wrapper.disabled input[type=radio]{cursor:not-allowed}.next-radio-wrapper.disabled .next-radio-inner{border-color:#e6e7eb;background:#f7f8fa}.next-radio-wrapper.disabled.checked .next-radio-inner,.next-radio-wrapper.disabled .next-radio-inner.hovered,.next-radio-wrapper.disabled .next-radio-inner:hover{border-color:#e6e7eb}.next-radio-wrapper.disabled.checked .next-radio-inner:after{background:#ccc}.next-radio-wrapper:not(.disabled).focused .next-radio-inner,.next-radio-wrapper:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper:not(.disabled):focus .next-radio-inner,.next-radio-wrapper:not(.disabled):hover .next-radio-inner{border-color:#5584ff;background-color:#dee8ff}.next-radio-wrapper.checked.focused .next-radio-inner,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner{border-color:transparent;background:#3e71f7}.next-radio-wrapper.checked.focused .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled).hovered .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):focus .next-radio-inner:after,.next-radio-wrapper.checked:not(.disabled):hover .next-radio-inner:after{background:#fff}.next-radio-button .next-radio,.next-radio-button input[type=radio]{width:0;height:0}.next-radio-button>label{display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;z-index:1;margin:0 0 0 -1px;border:1px solid #c4c6cf;background-color:#fff;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;vertical-align:middle}.next-radio-button>label .next-radio-label{display:block;color:#333;margin:0;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s}.next-radio-button>label.hovered,.next-radio-button>label:focus,.next-radio-button>label:hover{z-index:10;border-color:#a0a2ad;background-color:#f2f3f7}.next-radio-button>label.hovered .next-radio-label,.next-radio-button>label:focus .next-radio-label,.next-radio-button>label:hover .next-radio-label{color:#333}.next-radio-button>label.checked{z-index:11;border-color:#5584ff;background-color:#fff}.next-radio-button>label.checked .next-radio-label{color:#5584ff}.next-radio-button>label.disabled{z-index:0;cursor:not-allowed;border-color:#e6e7eb;background-color:#f7f8fa}.next-radio-button>label.disabled .next-radio-label{color:#ccc}.next-radio-button>label.checked.disabled{z-index:0;border-color:#e6e7eb;background-color:#f2f3f7}.next-radio-button>label.checked.disabled .next-radio-label{color:#ccc}.next-radio-button-large>label{padding:0 8px;height:40px;line-height:40px}.next-radio-button-large>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-large>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-large .next-radio-label{height:38px;line-height:38px;font-size:16px}.next-radio-button-medium>label{padding:0 8px;height:28px;line-height:28px}.next-radio-button-medium>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-medium>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-medium .next-radio-label{height:26px;line-height:26px;font-size:12px}.next-radio-button-small>label{padding:0 8px;height:20px;line-height:20px}.next-radio-button-small>label:first-child{margin-left:0;border-top-left-radius:3px;border-bottom-left-radius:3px}.next-radio-button-small>label:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.next-radio-button-small .next-radio-label{height:18px;line-height:18px;font-size:12px}.next-radio-single-input input[type=radio]{opacity:0;position:absolute;top:0;left:0;margin:0}.next-radio-group{display:inline-block}.next-radio-group .next-radio-label{color:#333;margin-right:16px}.next-radio-group.disabled .next-radio-label{color:#ccc}.next-radio-group-ver .next-radio-wrapper{display:block;margin-bottom:8px}.next-radio-label{margin:0;margin-left:4px;font-size:12px;vertical-align:middle;line-height:1}@-moz-document url-prefix(){.next-radio{margin-top:-1px}@supports ((-webkit-animation:calc(0s)) or (animation:calc(0s))){.next-radio{margin-top:-3px}}}@-webkit-keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}@keyframes fadeInRightForTag{0%{opacity:0;-webkit-transform:rotate(45deg) translateX(20px);transform:rotate(45deg) translateX(20px)}to{opacity:1;-webkit-transform:rotate(45deg) translateX(0);transform:rotate(45deg) translateX(0)}}.next-tag>.next-tag-body{overflow:hidden;text-overflow:ellipsis}.next-tag-checkable.next-tag-level-secondary{color:#333;border-color:transparent;background-color:transparent}.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary:not(.disabled):not([disabled]):hover{color:#5584ff}.next-tag-closable.next-tag-level-primary,.next-tag-default.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-primary,.disabled.next-tag-default.next-tag-level-primary,[disabled].next-tag-closable.next-tag-level-primary,[disabled].next-tag-default.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.disabled.next-tag-default.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-primary>.next-tag-close-btn,.next-tag-default.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary{color:#666;border-color:#ebecf0;background-color:#ebecf0}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover{color:#333;border-color:#e2e4e8;background-color:#e2e4e8}.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-checkable.next-tag-level-primary,[disabled].next-tag-checkable.next-tag-level-primary{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.disabled.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn,[disabled].next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#ccc}.next-tag-checkable.next-tag-level-primary>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-primary.checked{color:#fff;border-color:#5584ff;background-color:#5584ff}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover{color:#fff;border-color:#3e71f7;background-color:#3e71f7}.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked:not(.disabled):not([disabled]):hover>.next-tag-close-btn,.next-tag-checkable.next-tag-level-primary.checked>.next-tag-close-btn{color:#fff}.next-tag-default.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-default.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-default.next-tag-level-normal,[disabled].next-tag-default.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.disabled.next-tag-default.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-default.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-closable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#a0a2ad;background-color:transparent}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus>.next-tag-close-btn,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover>.next-tag-close-btn{color:#333}.disabled.next-tag-closable.next-tag-level-normal,[disabled].next-tag-closable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:transparent}.disabled.next-tag-closable.next-tag-level-normal>.next-tag-close-btn,[disabled].next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#ccc}.next-tag-closable.next-tag-level-normal>.next-tag-close-btn{color:#666}.next-tag-checkable.next-tag-level-normal.checked,.next-tag-checkable.next-tag-level-secondary.checked{color:#5584ff;border-color:#5584ff;background-color:transparent}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover{color:#3e71f7;border-color:#3e71f7;background-color:transparent}.next-tag-checkable.next-tag-level-secondary.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-secondary.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-secondary.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-secondary.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-secondary.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-secondary.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-secondary.checked:after{color:#fff}.next-tag-checkable.next-tag-level-normal{color:#666;border-color:#c4c6cf;background-color:transparent}.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]).hover,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):focus,.next-tag-checkable.next-tag-level-normal:not(.disabled):not([disabled]):hover{color:#333;border-color:#c4c6cf;background-color:transparent}.disabled.next-tag-checkable.next-tag-level-normal,[disabled].next-tag-checkable.next-tag-level-normal{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-normal.checked:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#5584ff;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-checkable.next-tag-level-normal.checked:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E632";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:before,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:before{background-color:#3e71f7}.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]).hover:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):focus:after,.next-tag-checkable.next-tag-level-normal.checked:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-checkable.next-tag-level-normal.checked:disabled:before,[disabled].next-tag-checkable.next-tag-level-normal.checked:before{background-color:#e6e7eb}.next-tag-checkable.next-tag-level-normal.checked:disabled:after,[disabled].next-tag-checkable.next-tag-level-normal.checked:after{color:#fff}.next-tag-closable.next-tag-level-normal:before{position:absolute;content:"";-webkit-font-smoothing:antialiased;background-color:#c4c6cf;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.next-tag-closable.next-tag-level-normal:after{position:absolute;font-family:NextIcon;-webkit-font-smoothing:antialiased;content:"\E626";-webkit-transform:scale(.6);-ms-transform:scale(.6);transform:scale(.6);color:#fff}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:before,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:before{background-color:#a0a2ad}.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]).hover:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):focus:after,.next-tag-closable.next-tag-level-normal:not(.disabled):not([disabled]):hover:after{color:#fff}.next-tag-closable.next-tag-level-normal:disabled:before,[disabled].next-tag-closable.next-tag-level-normal:before{background-color:#e6e7eb}.next-tag-closable.next-tag-level-normal:disabled:after,[disabled].next-tag-closable.next-tag-level-normal:after{color:#fff}.next-tag-group .next-tag-large,.next-tag-group .next-tag-medium{margin-right:8px;margin-bottom:8px}.next-tag-group .next-tag-small{margin-right:4px;margin-bottom:4px}.next-tag{display:inline-block;max-width:100%;vertical-align:middle;border-width:1px;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid;overflow:hidden;white-space:nowrap;-webkit-transition:all .2s cubic-bezier(.23,1,.32,1);transition:all .2s cubic-bezier(.23,1,.32,1);font-size:0;outline:0}.next-tag,.next-tag *,.next-tag :after,.next-tag :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tag>.next-tag-body{position:relative;display:inline-block;height:100%;text-align:center;vertical-align:middle;max-width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.next-tag>.next-tag-body>a{text-decoration:none;color:inherit}.next-tag>.next-tag-body>a:before{content:" ";position:absolute;display:block;top:0;left:0;right:0;bottom:0}.next-tag>.next-tag-body .next-icon{line-height:1;vertical-align:middle}.next-tag>.next-tag-body .next-icon:before{font-size:inherit}.next-tag.next-tag-body-pointer{cursor:pointer}.next-tag.disabled,.next-tag[disabled]{cursor:not-allowed;pointer-events:none}.next-tag-large{height:40px;padding:0;line-height:38px;font-size:0}.next-tag-large>.next-tag-body{font-size:16px;padding:0 16px;min-width:48px}.next-tag-large.next-tag-closable>.next-tag-body{padding:0 0 0 16px}.next-tag-large[dir=rtl].next-tag-closable>.next-tag-body{padding:0 16px 0 0}.next-tag-large>.next-tag-close-btn{margin-left:12px;padding-right:16px}.next-tag-large>.next-tag-close-btn .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tag-large[dir=rtl]>.next-tag-close-btn{margin-right:12px;margin-left:0;padding-right:0;padding-left:16px}.next-tag-medium{height:28px;padding:0;line-height:26px;font-size:0}.next-tag-medium>.next-tag-body{font-size:14px;padding:0 12px;min-width:40px}.next-tag-medium.next-tag-closable>.next-tag-body{padding:0 0 0 12px}.next-tag-medium[dir=rtl].next-tag-closable>.next-tag-body{padding:0 12px 0 0}.next-tag-medium>.next-tag-close-btn{margin-left:8px;padding-right:12px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-medium>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-medium>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-medium[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:12px}.next-tag-small{height:20px;padding:0;line-height:18px;font-size:0}.next-tag-small>.next-tag-body{font-size:12px;padding:0 8px;min-width:28px}.next-tag-small.next-tag-closable>.next-tag-body{padding:0 0 0 8px}.next-tag-small[dir=rtl].next-tag-closable>.next-tag-body{padding:0 8px 0 0}.next-tag-small>.next-tag-close-btn{margin-left:8px;padding-right:8px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tag-small>.next-tag-close-btn .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tag-small>.next-tag-close-btn .next-icon:before{width:16px;font-size:16px}}.next-tag-small[dir=rtl]>.next-tag-close-btn{margin-right:8px;margin-left:0;padding-right:0;padding-left:8px}.next-tag-default{cursor:default}.next-tag-closable{position:relative}.next-tag-closable.next-tag-large>.next-tag-body{max-width:calc(100% - 40px)}.next-tag-closable.next-tag-medium>.next-tag-body{max-width:calc(100% - 28px)}.next-tag-closable.next-tag-small>.next-tag-body{max-width:calc(100% - 20px)}.next-tag-closable>.next-tag-close-btn{display:inline-block;vertical-align:middle;height:100%;text-align:center;cursor:pointer}.next-tag-closable.next-tag-level-normal.disabled,.next-tag-closable.next-tag-level-normal[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-checkable{cursor:pointer;position:relative;border-radius:3px}.next-tag-checkable.checked:before{-webkit-animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInRightForTag .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.checked:after{-webkit-animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86);animation:zoomIn .4s cubic-bezier(.78,.14,.15,.86)}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):before{right:-10px;bottom:-10px;width:20px;height:20px}.next-tag-checkable.next-tag-small:not(.next-tag-level-primary):after{font-size:8px;line-height:8px;right:0;bottom:0}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):before{right:-14px;bottom:-14px;width:28px;height:28px}.next-tag-checkable.next-tag-medium:not(.next-tag-level-primary):after{font-size:12px;line-height:12px;right:0;bottom:0}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):before{right:-18px;bottom:-18px;width:36px;height:36px}.next-tag-checkable.next-tag-large:not(.next-tag-level-primary):after{font-size:16px;line-height:16px;right:0;bottom:0}.next-tag-checkable.next-tag-level-primary.disabled,.next-tag-checkable.next-tag-level-primary[disabled]{color:#ccc;border-color:#f7f8fa;background-color:#f7f8fa}.next-tag-checkable.next-tag-level-secondary.disabled,.next-tag-checkable.next-tag-level-secondary[disabled]{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa}.next-tag-zoom-appear,.next-tag-zoom-enter{-webkit-animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-tag-zoom-leave{-webkit-animation:zoomOut .3s ease-in;animation:zoomOut .3s ease-in;-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-checkbox-wrapper[dir=rtl]{margin-right:8px;margin-left:0}.next-checkbox-wrapper[dir=rtl]:first-child{margin-right:0}.next-checkbox-wrapper[dir=rtl]>.next-checkbox-label{margin-right:4px;margin-left:0}.next-checkbox-wrapper,.next-checkbox-wrapper *,.next-checkbox-wrapper :after,.next-checkbox-wrapper :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-checkbox-wrapper .next-checkbox{display:inline-block;position:relative;line-height:1;vertical-align:middle}.next-checkbox-wrapper input[type=checkbox]{opacity:0;position:absolute;top:0;left:0;width:16px;height:16px;margin:0}.next-checkbox-wrapper .next-checkbox-inner{display:block;width:16px;height:16px;background:#fff;border-radius:3px;border:1px solid #c4c6cf;-webkit-transition:all .3s ease 0s;transition:all .3s ease 0s;text-align:left;-webkit-box-shadow:none;box-shadow:none}.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);position:absolute;top:0;opacity:0;line-height:16px;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);color:#fff;left:4px;margin-left:0}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper .next-checkbox-inner>.next-icon:before{vertical-align:top;margin-top:0}.next-checkbox-wrapper.checked .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.checked .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);margin-left:0}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.checked .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.indeterminate .next-checkbox-inner{border-color:transparent;background-color:#5584ff}.next-checkbox-wrapper.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.indeterminate .next-checkbox-inner:hover{border-color:transparent}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1);margin-left:0}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-checkbox-wrapper.indeterminate .next-checkbox-inner>.next-icon:before{width:16px;font-size:16px}}.next-checkbox-wrapper.disabled input[type=checkbox]{cursor:not-allowed}.next-checkbox-wrapper.disabled .next-checkbox-inner{border-color:#e6e7eb;background:#f7f8fa}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.checked .next-checkbox-inner:hover,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner.hovered,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner:hover{border-color:#e6e7eb}.next-checkbox-wrapper.disabled.checked .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.disabled.indeterminate .next-checkbox-inner>.next-icon{color:#ccc;opacity:1}.next-checkbox-wrapper.focused .next-checkbox-inner,.next-checkbox-wrapper.hovered .next-checkbox-inner,.next-checkbox-wrapper:not(.disabled):hover .next-checkbox-inner{border-color:#5584ff;background-color:#dee8ff}.next-checkbox-wrapper.checked.focused .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner{border-color:transparent;background-color:#3e71f7}.next-checkbox-wrapper.checked.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.checked:not(.disabled):hover .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate.focused .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled).hovered .next-checkbox-inner>.next-icon,.next-checkbox-wrapper.indeterminate:not(.disabled):hover .next-checkbox-inner>.next-icon{color:#fff;opacity:1}.next-checkbox-group .next-checkbox-wrapper{margin-left:8px}.next-checkbox-group .next-checkbox-wrapper:first-child{margin-left:0}.next-checkbox-group-ver .next-checkbox-wrapper{display:block;margin-left:0;margin-right:0;margin-bottom:8px}.next-checkbox-label{font-size:12px;vertical-align:middle;margin:0;margin-left:4px;line-height:1}.next-menu[dir=rtl] .next-menu-item-helper{float:left}.next-menu[dir=rtl] .next-menu-item .next-checkbox,.next-menu[dir=rtl] .next-menu-item .next-radio{margin-left:4px;margin-right:0}.next-menu[dir=rtl] .next-menu-hoz-right{float:left}.next-menu[dir=rtl] .next-menu-hoz-icon-arrow.next-icon{left:6px;right:auto}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon{margin-left:0;margin-right:-16px}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu[dir=rtl] .next-menu-icon-selected.next-icon.next-menu-icon-right{right:auto;left:4px}.next-menu[dir=rtl] .next-menu-icon-arrow.next-icon{left:10px;right:auto}.next-menu{position:relative;min-width:100px;padding:8px 0;margin:0;list-style:none;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;background:#fff;line-height:32px;font-size:12px}.next-menu,.next-menu *,.next-menu :after,.next-menu :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-menu:focus,.next-menu :focus{outline:0}.next-menu-embeddable,.next-menu-embeddable .next-menu-item.next-disabled,.next-menu-embeddable .next-menu-item.next-disabled .next-menu-item-text>a{background:initial;border:none}.next-menu-embeddable .next-menu-item-inner{height:100%}.next-menu-content{position:relative}.next-menu-content,.next-menu-sub-menu{padding:0;margin:0;list-style:none}.next-menu-sub-menu.next-expand-enter{overflow:hidden}.next-menu-sub-menu.next-expand-enter-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-sub-menu.next-expand-leave{overflow:hidden}.next-menu-sub-menu.next-expand-leave-active{-webkit-transition:height .3s ease-out;transition:height .3s ease-out}.next-menu-item{position:relative;padding:0 20px;-webkit-transition:background .2s ease;transition:background .2s ease;color:#333;cursor:pointer}.next-menu-item-helper{float:right;color:#999;font-style:normal;font-size:12px}.next-menu-item .next-checkbox,.next-menu-item .next-radio{margin-right:4px}.next-menu-item.next-selected{color:#333;background-color:#fff}.next-menu-item.next-selected .next-menu-icon-arrow{color:#666}.next-menu-item.next-selected .next-menu-icon-selected{color:#5584ff}.next-menu-item.next-disabled,.next-menu-item.next-disabled .next-menu-item-text>a{color:#ccc;background-color:#fff;cursor:not-allowed}.next-menu-item.next-disabled .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-icon-selected,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-arrow,.next-menu-item.next-disabled .next-menu-item-text>a .next-menu-icon-selected{color:#ccc}.next-menu-item:not(.next-disabled).next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover,.next-menu-item:not(.next-disabled).next-selected:focus,.next-menu-item:not(.next-disabled).next-selected:focus:hover,.next-menu-item:not(.next-disabled).next-selected:hover,.next-menu-item:not(.next-disabled):hover{color:#333;background-color:#f2f3f7}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-arrow,.next-menu-item:not(.next-disabled):hover .next-menu-icon-arrow{color:#333}.next-menu-item:not(.next-disabled).next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-selected,.next-menu-item:not(.next-disabled):hover .next-menu-icon-selected{color:#5584ff}.next-menu-item-inner{height:32px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}.next-menu-item-text{vertical-align:middle}.next-menu-item-text>a{display:inline-block;text-decoration:none;color:#333}.next-menu-item-text>a:before{position:absolute;background-color:transparent;top:0;left:0;bottom:0;right:0;content:""}.next-menu.next-hoz{padding:0}.next-menu.next-hoz .next-menu-content>.next-menu-item,.next-menu.next-hoz>.next-menu-item{display:inline-block;vertical-align:top}.next-menu.next-hoz .next-menu-content,.next-menu.next-hoz .next-menu-footer,.next-menu.next-hoz .next-menu-header{display:inline-block}.next-menu-hoz-right{float:right}.next-menu-group-label{padding:0 12px;color:#999}.next-menu-divider{margin:8px 12px;border-bottom:1px solid #e6e7eb}.next-menu .next-menu-icon-selected.next-icon{position:absolute;top:0;margin-left:-16px}.next-menu .next-menu-icon-selected.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-icon-selected.next-icon.next-menu-icon-right{right:4px}.next-menu .next-menu-icon-arrow.next-icon{position:absolute;top:0;right:10px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-icon-arrow.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow.next-icon:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-icon-arrow-down.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-down.next-open{-webkit-transform:scale(.5) rotate(180deg);-ms-transform:scale(.5) rotate(180deg);transform:scale(.5) rotate(180deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-down.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.next-menu .next-menu-icon-arrow-right.next-open:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-menu .next-menu-icon-arrow-right.next-open{-webkit-transform:scale(.5) rotate(-90deg);-ms-transform:scale(.5) rotate(-90deg);transform:scale(.5) rotate(-90deg);margin-left:-4px;margin-right:-4px}.next-menu .next-menu-icon-arrow-right.next-open:before{width:16px;font-size:16px}}.next-menu .next-menu-hoz-icon-arrow.next-icon{position:absolute;top:0;right:6px;color:#666;-webkit-transition:all .3s ease;transition:all .3s ease}.next-menu .next-menu-hoz-icon-arrow.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-menu .next-menu-hoz-icon-arrow.next-open{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu .next-menu-hoz-icon-arrow.next-open:before{width:12px;font-size:12px;line-height:inherit}.next-menu.next-context{line-height:24px}.next-menu.next-context .next-menu-item-inner{height:24px}.next-input{vertical-align:middle;display:inline-table;border-collapse:separate;font-size:0;line-height:1;width:200px;border-spacing:0;-webkit-transition:all .3s ease-out;transition:all .3s ease-out;border:1px solid #c4c6cf;background-color:#fff}.next-input,.next-input *,.next-input :after,.next-input :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input input{height:100%}.next-input input[type=reset],.next-input input[type=submit]{-webkit-appearance:button;cursor:pointer}.next-input input::-moz-focus-inner{border:0;padding:0}.next-input input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px #fff inset}.next-input textarea{resize:none}.next-input input,.next-input textarea{width:100%;border:none;outline:none;padding:0;margin:0;font-weight:400;vertical-align:middle;background-color:transparent;color:#333}.next-input input::-ms-clear,.next-input textarea::-ms-clear{display:none}.next-input.next-input-textarea{border-radius:3px;font-size:0}.next-input.next-input-textarea textarea{color:#333;padding:4px 8px;font-size:12px;border-radius:3px}.next-input.next-input-textarea .next-input-control{display:block;width:auto;border-radius:3px}.next-input.next-input-textarea .next-input-len{padding:0 8px 4px;display:block;text-align:right;width:auto}.next-input.next-small{height:20px;border-radius:3px}.next-input.next-small .next-input-label{padding-left:8px;font-size:12px}.next-input.next-small .next-input-inner{font-size:12px}.next-input.next-small .next-input-control{padding-right:4px}.next-input.next-small input{height:18px;line-height:18px \0;padding:0 4px;font-size:12px}.next-input.next-small input::-webkit-input-placeholder{font-size:12px}.next-input.next-small input::-moz-placeholder{font-size:12px}.next-input.next-small input::-ms-input-placeholder{font-size:12px}.next-input.next-small input::placeholder{font-size:12px}.next-input.next-small .next-input-text-field{padding:0 4px;font-size:12px;height:18px;line-height:18px}.next-input.next-small .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-small input{border-radius:3px}.next-input.next-small .next-input-control{border-radius:0 3px 3px 0}.next-input.next-medium{height:28px;border-radius:3px}.next-input.next-medium .next-input-label{padding-left:8px;font-size:12px}.next-input.next-medium .next-input-inner{font-size:12px}.next-input.next-medium .next-input-control{padding-right:8px}.next-input.next-medium input{height:26px;line-height:26px \0;padding:0 8px;font-size:12px}.next-input.next-medium input::-webkit-input-placeholder{font-size:12px}.next-input.next-medium input::-moz-placeholder{font-size:12px}.next-input.next-medium input::-ms-input-placeholder{font-size:12px}.next-input.next-medium input::placeholder{font-size:12px}.next-input.next-medium .next-input-text-field{padding:0 8px;font-size:12px;height:26px;line-height:26px}.next-input.next-medium .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-input.next-medium input{border-radius:3px}.next-input.next-medium .next-input-control{border-radius:0 3px 3px 0}.next-input.next-large{height:40px;border-radius:3px}.next-input.next-large .next-input-label{padding-left:12px;font-size:16px}.next-input.next-large .next-input-inner{font-size:16px}.next-input.next-large .next-input-control{padding-right:8px}.next-input.next-large input{height:38px;line-height:38px \0;padding:0 12px;font-size:16px}.next-input.next-large input::-webkit-input-placeholder{font-size:16px}.next-input.next-large input::-moz-placeholder{font-size:16px}.next-input.next-large input::-ms-input-placeholder{font-size:16px}.next-input.next-large input::placeholder{font-size:16px}.next-input.next-large .next-input-text-field{padding:0 12px;font-size:16px;height:38px;line-height:38px}.next-input.next-large .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-input.next-large input{border-radius:3px}.next-input.next-large .next-input-control{border-radius:0 3px 3px 0}.next-input-hint-wrap{color:#999;position:relative}.next-input-hint-wrap .next-input-clear{opacity:0;z-index:1;position:absolute}.next-input-hint-wrap .next-input-hint{opacity:1}.next-input .next-icon-delete-filling:hover{cursor:pointer;color:#666}.next-input.next-focus,.next-input:hover{border-color:#a0a2ad;background-color:#fff}.next-input.next-focus .next-input-clear,.next-input:hover .next-input-clear{opacity:1}.next-input.next-focus .next-input-clear+.next-input-hint,.next-input:hover .next-input-clear+.next-input-hint{opacity:0}.next-input .next-input-clear:focus{opacity:1}.next-input .next-input-clear:focus+.next-input-hint{opacity:0}.next-input.next-focus{border-color:#5584ff;background-color:#fff}.next-input.next-error,.next-input.next-error.next-focus,.next-input.next-error:hover{border-color:#ff3000}.next-input.next-hidden{display:none}.next-input.next-noborder{border:none}.next-input-control .next-input-len{font-size:12px;line-height:12px;color:#999;display:table-cell;width:1px;vertical-align:bottom}.next-input-control .next-input-len.next-error{color:#ff3000}.next-input-control>*{display:table-cell;width:1%;top:0}.next-input-control>:not(:last-child){padding-right:4px}.next-input-control .next-icon{-webkit-transition:all .3s ease-out;transition:all .3s ease-out;color:#999}.next-input-control .next-icon-success-filling{color:#46bc15}.next-input-control .next-icon-loading{color:#4494f9}.next-input-label{color:#666}.next-input input::-moz-placeholder,.next-input textarea::-moz-placeholder{color:#999;opacity:1}.next-input input:-ms-input-placeholder,.next-input textarea:-ms-input-placeholder{color:#999}.next-input input::-webkit-input-placeholder,.next-input textarea::-webkit-input-placeholder{color:#999}.next-input.next-disabled{color:#ccc;cursor:not-allowed}.next-input.next-disabled,.next-input.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled input::-moz-placeholder,.next-input.next-disabled textarea::-moz-placeholder{color:#ccc;opacity:1}.next-input.next-disabled input:-ms-input-placeholder,.next-input.next-disabled textarea:-ms-input-placeholder{color:#ccc}.next-input.next-disabled input::-webkit-input-placeholder,.next-input.next-disabled textarea::-webkit-input-placeholder{color:#ccc}.next-input.next-disabled .next-input-label,.next-input.next-disabled .next-input-len{color:#ccc}.next-input.next-disabled input,.next-input.next-disabled textarea{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa;cursor:not-allowed}.next-input.next-disabled input:hover,.next-input.next-disabled textarea:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input.next-disabled .next-input-hint-wrap{color:#ccc}.next-input.next-disabled .next-input-hint-wrap .next-input-clear{opacity:0}.next-input.next-disabled .next-input-hint-wrap .next-input-hint{opacity:1}.next-input.next-disabled .next-input-hint-wrap .next-icon-delete-filling:hover{cursor:not-allowed;color:#ccc}.next-input.next-disabled .next-icon{color:#ccc}.next-input-control,.next-input-inner,.next-input-label{display:table-cell;width:1px;vertical-align:middle;line-height:1;background-color:transparent;white-space:nowrap}.next-input-group{display:inline-table;border-collapse:separate;border-spacing:0;line-height:0;width:100%}.next-input-group,.next-input-group *,.next-input-group :after,.next-input-group :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-input-group-auto-width{width:100%;border-radius:0!important}.next-input-group>.next-input:first-child.next-large,.next-input-group>.next-input:first-child.next-medium,.next-input-group>.next-input:first-child.next-small{border-top-left-radius:3px!important;border-bottom-left-radius:3px!important}.next-input-group>.next-input:last-child.next-large,.next-input-group>.next-input:last-child.next-medium,.next-input-group>.next-input:last-child.next-small{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.next-input-group-addon{width:1px;display:table-cell;vertical-align:middle;white-space:nowrap}.next-input-group-addon:first-child,.next-input-group-addon:first-child>*{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group-addon:last-child,.next-input-group-addon:last-child>*{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group-text{color:#999;background-color:#f2f3f7;text-align:center;border:1px solid #c4c6cf;padding:0 8px}.next-input-group-text:first-child{border-right-width:0}.next-input-group-text:last-child{border-left-width:0}.next-input-group-text.next-disabled{color:#ccc;cursor:not-allowed}.next-input-group-text.next-disabled,.next-input-group-text.next-disabled:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-input-group-text.next-medium,.next-input-group-text.next-small{font-size:12px;border-radius:3px}.next-input-group-text.next-large{font-size:16px;border-radius:3px}.next-input[dir=rtl].next-small .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-small .next-input-control{padding-right:0;padding-left:4px}.next-input[dir=rtl].next-medium .next-input-label{padding-left:0;padding-right:8px}.next-input[dir=rtl].next-medium .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-large .next-input-label{padding-left:0;padding-right:12px}.next-input[dir=rtl].next-large .next-input-control{padding-right:0;padding-left:8px}.next-input[dir=rtl].next-input-textarea .next-input-len{text-align:left}.next-input[dir=rtl] .next-input-control>:not(:last-child){padding-left:4px;padding-right:0}.next-input-group[dir=rtl] .next-input-group-addon:first-child{border-bottom-left-radius:0!important;border-top-left-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:first-child.next-small{border-bottom-right-radius:3px!important;border-top-right-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child{border-bottom-right-radius:0!important;border-top-right-radius:0!important}.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-large,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-medium,.next-input-group[dir=rtl] .next-input-group-addon:last-child.next-small{border-bottom-left-radius:3px!important;border-top-left-radius:3px!important}.next-input-group[dir=rtl] .next-input-group-text:first-child{border-right-width:1px;border-left:0}.next-input-group[dir=rtl] .next-input-group-text:last-child{border-left-width:1px;border-right:0}.next-select{display:inline-block;font-size:0;vertical-align:middle}.next-select,.next-select *,.next-select :after,.next-select :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-select-trigger{min-width:100px;outline:0;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-trigger .next-input-label{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-select-values{display:block;width:100%;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;overflow:hidden}.next-select-trigger .next-select-values>em{font-style:inherit}.next-select-trigger .next-select-values input{padding-left:0;padding-right:0}.next-select-trigger .next-input-control{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.next-select-trigger .next-input-control>*{display:inline-block;width:auto}.next-select-trigger .next-input-control>.next-select-arrow{padding-right:0}.next-select-trigger .next-input.next-disabled em{color:#ccc}.next-select-trigger .next-input.next-disabled .next-select-arrow{cursor:not-allowed}.next-select-trigger .next-select-clear{display:none}.next-select-trigger.next-has-clear:hover .next-select-clear{display:inline-block}.next-select-trigger.next-has-clear:hover .next-select-arrow{display:none}.next-select .next-select-inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;min-width:100px;outline:0;color:#333}.next-select .next-select-inner .next-tag{line-height:1;margin-right:4px;margin-bottom:3px;padding-left:4px;padding-right:4px}.next-select-trigger-search{position:relative;display:inline-block;vertical-align:top;overflow:hidden;width:100%;max-width:100%}.next-select-trigger-search>input,.next-select-trigger-search>span{display:block;font-size:inherit;font-family:inherit;letter-spacing:inherit;white-space:nowrap;overflow:hidden}.next-select-trigger-search input{position:absolute;background-color:transparent;width:100%;height:100%!important;z-index:1;left:0;border:0;outline:0;margin:0;padding:0;cursor:inherit}.next-select-trigger-search>span{position:relative;visibility:hidden;white-space:pre;max-width:100%;z-index:-1}.next-select-single.next-no-search{cursor:pointer}.next-select-single.next-has-search.next-active .next-select-values>em{display:none}.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{width:1px;opacity:0;filter:alpha(opacity=0)}.next-select-single.next-inactive .next-select-trigger-search input,.next-select-single.next-no-search .next-select-trigger-search input{color:transparent}.next-select-single .next-select-values{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.next-select-single .next-select-values>em{vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.next-select-multiple .next-select-values,.next-select-tag .next-select-values{margin-bottom:-3px;height:auto!important}.next-select-multiple .next-select-trigger-search,.next-select-tag .next-select-trigger-search{margin-bottom:3px}.next-select-multiple .next-tag+.next-select-trigger-search,.next-select-tag .next-tag+.next-select-trigger-search{width:auto;min-width:1px}.next-select-multiple .next-input,.next-select-tag .next-input{height:auto;-webkit-box-align:start;-ms-flex-align:start;align-items:start}.next-select-multiple.next-small .next-select-values,.next-select-tag.next-small .next-select-values{min-height:18px;padding-top:2px;padding-bottom:2px;line-height:14px}.next-select-multiple.next-small .next-tag,.next-select-tag.next-small .next-tag{border:0;padding-top:0;padding-bottom:0;height:14px}.next-select-multiple.next-small .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-body,.next-select-multiple.next-small .next-tag .next-tag-close-btn,.next-select-tag.next-small .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-body,.next-select-tag.next-small .next-tag .next-tag-close-btn{line-height:14px}.next-select-multiple.next-small .next-input-control,.next-select-multiple.next-small .next-input-label,.next-select-tag.next-small .next-input-control,.next-select-tag.next-small .next-input-label{line-height:18px}.next-select-multiple.next-medium .next-select-values,.next-select-tag.next-medium .next-select-values{min-height:26px;padding-top:3px;padding-bottom:3px;line-height:20px}.next-select-multiple.next-medium .next-tag,.next-select-tag.next-medium .next-tag{padding-top:1px;padding-bottom:1px;height:20px}.next-select-multiple.next-medium .next-tag .next-tag-body,.next-select-multiple.next-medium .next-tag .next-tag-close-btn,.next-select-tag.next-medium .next-tag .next-tag-body,.next-select-tag.next-medium .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-medium .next-input-control,.next-select-multiple.next-medium .next-input-label,.next-select-tag.next-medium .next-input-control,.next-select-tag.next-medium .next-input-label{line-height:26px}.next-select-multiple.next-large .next-select-values,.next-select-tag.next-large .next-select-values{min-height:38px;padding-top:7px;padding-bottom:7px;line-height:24px}.next-select-multiple.next-large .next-tag,.next-select-tag.next-large .next-tag{padding-top:3px;padding-bottom:3px;height:24px}.next-select-multiple.next-large .next-tag .next-tag-body,.next-select-multiple.next-large .next-tag .next-tag-close-btn,.next-select-tag.next-large .next-tag .next-tag-body,.next-select-tag.next-large .next-tag .next-tag-close-btn{line-height:18px}.next-select-multiple.next-large .next-input-control,.next-select-multiple.next-large .next-input-label,.next-select-tag.next-large .next-input-control,.next-select-tag.next-large .next-input-label{line-height:38px}.next-select.next-no-search .next-select-trigger-search input{color:transparent}.next-select-auto-complete{width:160px}.next-select-auto-complete .next-input{width:100%}.next-select-auto-complete .next-input .next-input-hint-wrap{padding-right:1px}.next-select-auto-complete .next-input .next-select-arrow{padding-left:0}.next-select.next-active .next-select-arrow{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-select-arrow{cursor:pointer;width:auto!important;text-align:center;-webkit-transition:all .3s ease;transition:all .3s ease}.next-select-menu-wrapper{max-height:260px;overflow:auto;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none}.next-select-menu-wrapper .next-select-menu{max-height:none;border:none}.next-select-menu{max-height:260px;overflow:auto}.next-select-menu .next-select-menu-empty-content{padding-left:8px;padding-right:8px;color:#999}.next-select-menu.next-select-auto-complete-menu.next-select-menu-empty{display:none}.next-select-menu .next-menu-item-text .next-icon{vertical-align:middle}.next-select-all{display:block;cursor:pointer;padding:0 8px;margin:0 12px 8px;border-bottom:1px solid #dcdee3}.next-select-all:hover{color:#3e71f7}.next-select-all .next-menu-icon-selected.next-icon{display:inline-block!important;top:auto;color:#5584ff}.next-select-highlight{color:#5584ff;font-size:12px}.next-select-in-ie.next-select-trigger .next-select-values{overflow:visible}.next-select-in-ie.next-select-trigger .next-input-control,.next-select-in-ie.next-select-trigger .next-input-label{width:1px}.next-select-in-ie.next-select-trigger .next-input-control>*{display:table-cell;width:1%}.next-select-in-ie.next-select-trigger .next-select-arrow{display:table-cell}.next-select-in-ie.next-select-trigger .next-select-clear{display:none}.next-select-in-ie.next-select-trigger.next-select-multiple .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-tag .next-select-inner{vertical-align:top}.next-select-in-ie.next-select-trigger .next-select-inner,.next-select-in-ie.next-select-trigger.next-select-single .next-select-values{display:inline-table}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-small .next-select-values{line-height:20px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-medium .next-select-values{line-height:28px}.next-select-in-ie.next-select-trigger.next-select-single .next-input.next-large .next-select-values{line-height:40px}.next-select-in-ie.next-select-trigger .next-select-trigger-search>span{max-width:100px}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values{position:relative}.next-select-in-ie.next-select-trigger.next-select-single.next-select-in-ie-fixwidth .next-select-values>em{position:absolute;display:inline-block;height:100%;line-height:1;vertical-align:middle;overflow:hidden;left:4px;right:0;top:30%}.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-values>em+.next-select-trigger-search,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-values>em+.next-select-trigger-search{filter:alpha(opacity=0);font-size:0}.next-select-in-ie.next-select-trigger.next-no-search .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-inactive .next-select-trigger-search input,.next-select-in-ie.next-select-trigger.next-select-single.next-no-search .next-select-trigger-search input{color:inherit}.next-calendar,.next-calendar *,.next-calendar :after,.next-calendar :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-calendar table{border-collapse:collapse;border-spacing:0}.next-calendar td,.next-calendar th{padding:0}@-webkit-keyframes cellZoomIn{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes cellZoomIn{0%{-webkit-transform:scale(.5);transform:scale(.5)}to{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes cellHover{0%{opacity:0}to{opacity:1}}@keyframes cellHover{0%{opacity:0}to{opacity:1}}@-webkit-keyframes enterToLeft{0%{-webkit-transform:translate(-40%);transform:translate(-40%);opacity:0}50%{opacity:.6}to{opacity:1;-webkit-transform:translate(0);transform:translate(0)}}@keyframes enterToLeft{0%{-webkit-transform:translate(-40%);transform:translate(-40%);opacity:0}50%{opacity:.6}to{opacity:1;-webkit-transform:translate(0);transform:translate(0)}}@-webkit-keyframes enterToRight{0%{-webkit-transform:translate(40%);transform:translate(40%);opacity:0}50%{opacity:.6}to{opacity:1;-webkit-transform:translate(0);transform:translate(0)}}@keyframes enterToRight{0%{-webkit-transform:translate(40%);transform:translate(40%);opacity:0}50%{opacity:.6}to{opacity:1;-webkit-transform:translate(0);transform:translate(0)}}.next-calendar-card .next-calendar-header,.next-calendar-fullscreen .next-calendar-header{text-align:right}.next-calendar-card .next-calendar-header .next-select,.next-calendar-fullscreen .next-calendar-header .next-select{margin-right:4px;vertical-align:top}.next-calendar-card .next-calendar-header .next-menu,.next-calendar-fullscreen .next-calendar-header .next-menu{text-align:left}.next-calendar-card .next-calendar-header,.next-calendar-fullscreen .next-calendar-header{margin-bottom:8px}.next-calendar-panel-header{position:relative;background:#5584ff;margin-bottom:8px;border-bottom:1px solid transparent}.next-calendar-panel-header-full,.next-calendar-panel-header-left,.next-calendar-panel-header-right{height:32px;line-height:32px}.next-calendar-panel-header-full .next-calendar-btn,.next-calendar-panel-header-left .next-calendar-btn,.next-calendar-panel-header-right .next-calendar-btn{vertical-align:top;font-weight:700;margin:0 4px;background-color:transparent;border-color:transparent}.next-calendar-panel-header-full .next-calendar-btn,.next-calendar-panel-header-full .next-calendar-btn.visited,.next-calendar-panel-header-full .next-calendar-btn:link,.next-calendar-panel-header-full .next-calendar-btn:visited,.next-calendar-panel-header-left .next-calendar-btn,.next-calendar-panel-header-left .next-calendar-btn.visited,.next-calendar-panel-header-left .next-calendar-btn:link,.next-calendar-panel-header-left .next-calendar-btn:visited,.next-calendar-panel-header-right .next-calendar-btn,.next-calendar-panel-header-right .next-calendar-btn.visited,.next-calendar-panel-header-right .next-calendar-btn:link,.next-calendar-panel-header-right .next-calendar-btn:visited{color:#fff}.next-calendar-panel-header-full .next-calendar-btn.active,.next-calendar-panel-header-full .next-calendar-btn.hover,.next-calendar-panel-header-full .next-calendar-btn:active,.next-calendar-panel-header-full .next-calendar-btn:focus,.next-calendar-panel-header-full .next-calendar-btn:hover,.next-calendar-panel-header-left .next-calendar-btn.active,.next-calendar-panel-header-left .next-calendar-btn.hover,.next-calendar-panel-header-left .next-calendar-btn:active,.next-calendar-panel-header-left .next-calendar-btn:focus,.next-calendar-panel-header-left .next-calendar-btn:hover,.next-calendar-panel-header-right .next-calendar-btn.active,.next-calendar-panel-header-right .next-calendar-btn.hover,.next-calendar-panel-header-right .next-calendar-btn:active,.next-calendar-panel-header-right .next-calendar-btn:focus,.next-calendar-panel-header-right .next-calendar-btn:hover{color:#fff;background-color:transparent;border-color:transparent;text-decoration:none}.next-calendar-panel-header-left,.next-calendar-panel-header-right{display:inline-block;width:50%;text-align:center}.next-calendar-panel-header-full{width:100%;text-align:center}.next-calendar-btn{cursor:pointer;padding:0;margin:0;border:0;background:transparent;outline:none;height:100%}.next-calendar-btn>.next-icon.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-calendar-btn-next-decade,.next-calendar-btn-next-month,.next-calendar-btn-next-year,.next-calendar-btn-prev-decade,.next-calendar-btn-prev-month,.next-calendar-btn-prev-year{position:absolute;top:0;background-color:transparent;border-color:transparent}.next-calendar-btn-next-decade,.next-calendar-btn-next-decade.visited,.next-calendar-btn-next-decade:link,.next-calendar-btn-next-decade:visited,.next-calendar-btn-next-month,.next-calendar-btn-next-month.visited,.next-calendar-btn-next-month:link,.next-calendar-btn-next-month:visited,.next-calendar-btn-next-year,.next-calendar-btn-next-year.visited,.next-calendar-btn-next-year:link,.next-calendar-btn-next-year:visited,.next-calendar-btn-prev-decade,.next-calendar-btn-prev-decade.visited,.next-calendar-btn-prev-decade:link,.next-calendar-btn-prev-decade:visited,.next-calendar-btn-prev-month,.next-calendar-btn-prev-month.visited,.next-calendar-btn-prev-month:link,.next-calendar-btn-prev-month:visited,.next-calendar-btn-prev-year,.next-calendar-btn-prev-year.visited,.next-calendar-btn-prev-year:link,.next-calendar-btn-prev-year:visited{color:#fff}.next-calendar-btn-next-decade.active,.next-calendar-btn-next-decade.hover,.next-calendar-btn-next-decade:active,.next-calendar-btn-next-decade:focus,.next-calendar-btn-next-decade:hover,.next-calendar-btn-next-month.active,.next-calendar-btn-next-month.hover,.next-calendar-btn-next-month:active,.next-calendar-btn-next-month:focus,.next-calendar-btn-next-month:hover,.next-calendar-btn-next-year.active,.next-calendar-btn-next-year.hover,.next-calendar-btn-next-year:active,.next-calendar-btn-next-year:focus,.next-calendar-btn-next-year:hover,.next-calendar-btn-prev-decade.active,.next-calendar-btn-prev-decade.hover,.next-calendar-btn-prev-decade:active,.next-calendar-btn-prev-decade:focus,.next-calendar-btn-prev-decade:hover,.next-calendar-btn-prev-month.active,.next-calendar-btn-prev-month.hover,.next-calendar-btn-prev-month:active,.next-calendar-btn-prev-month:focus,.next-calendar-btn-prev-month:hover,.next-calendar-btn-prev-year.active,.next-calendar-btn-prev-year.hover,.next-calendar-btn-prev-year:active,.next-calendar-btn-prev-year:focus,.next-calendar-btn-prev-year:hover{color:#fff;background-color:transparent;border-color:transparent;text-decoration:none}.next-calendar-btn-prev-decade,.next-calendar-btn-prev-year{left:8px}.next-calendar-btn-prev-month{left:28px}.next-calendar-btn-next-month{right:28px}.next-calendar-btn-next-decade,.next-calendar-btn-next-year{right:8px}.next-calendar-fullscreen .next-calendar-th{text-align:right;color:#333;font-size:16px;font-weight:700;padding-right:12px;padding-bottom:4px}.next-calendar-fullscreen .next-calendar-cell{font-size:14px}.next-calendar-fullscreen .next-calendar-cell.next-selected .next-calendar-date,.next-calendar-fullscreen .next-calendar-cell.next-selected .next-calendar-month{font-weight:700;background:#dee8ff;color:#5584ff;border-color:#5584ff}.next-calendar-fullscreen .next-calendar-cell.next-disabled .next-calendar-date,.next-calendar-fullscreen .next-calendar-cell.next-disabled .next-calendar-month{cursor:not-allowed;background:#f7f8fa;color:#ccc;border-color:#e6e7eb}.next-calendar-fullscreen .next-calendar-date,.next-calendar-fullscreen .next-calendar-month{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 4px;padding:4px 8px;min-height:80px;border-top:2px solid;-webkit-transition:background .3s ease;transition:background .3s ease;background:#fff;color:#333;border-color:#dcdee3}.next-calendar-fullscreen .next-calendar-date:hover,.next-calendar-fullscreen .next-calendar-month:hover{background:#dee8ff;color:#5584ff;border-color:#5584ff}.next-calendar-fullscreen .next-calendar-cell-next-month .next-calendar-date,.next-calendar-fullscreen .next-calendar-cell-prev-month .next-calendar-date{background:transparent;color:#ccc;border-color:transparent}.next-calendar-fullscreen .next-calendar-cell-current .next-calendar-date,.next-calendar-fullscreen .next-calendar-cell-current .next-calendar-month{font-weight:700;background:#fff;color:#5584ff;border-color:#5584ff}.next-calendar-card .next-calendar-th,.next-calendar-panel .next-calendar-th,.next-calendar-range .next-calendar-th{text-align:center;color:#999;font-size:12px;font-weight:400}.next-calendar-card .next-calendar-cell,.next-calendar-panel .next-calendar-cell,.next-calendar-range .next-calendar-cell{text-align:center;font-size:12px}.next-calendar-card .next-calendar-cell.next-selected .next-calendar-date,.next-calendar-card .next-calendar-cell.next-selected .next-calendar-month,.next-calendar-card .next-calendar-cell.next-selected .next-calendar-year,.next-calendar-panel .next-calendar-cell.next-selected .next-calendar-date,.next-calendar-panel .next-calendar-cell.next-selected .next-calendar-month,.next-calendar-panel .next-calendar-cell.next-selected .next-calendar-year,.next-calendar-range .next-calendar-cell.next-selected .next-calendar-date,.next-calendar-range .next-calendar-cell.next-selected .next-calendar-month,.next-calendar-range .next-calendar-cell.next-selected .next-calendar-year{-webkit-animation:cellZoomIn .4s cubic-bezier(.23,1,.32,1);animation:cellZoomIn .4s cubic-bezier(.23,1,.32,1);font-weight:700;background:#5584ff;color:#fff;border-color:#5584ff}.next-calendar-card .next-calendar-cell.next-disabled .next-calendar-date,.next-calendar-card .next-calendar-cell.next-disabled .next-calendar-month,.next-calendar-card .next-calendar-cell.next-disabled .next-calendar-year,.next-calendar-panel .next-calendar-cell.next-disabled .next-calendar-date,.next-calendar-panel .next-calendar-cell.next-disabled .next-calendar-month,.next-calendar-panel .next-calendar-cell.next-disabled .next-calendar-year,.next-calendar-range .next-calendar-cell.next-disabled .next-calendar-date,.next-calendar-range .next-calendar-cell.next-disabled .next-calendar-month,.next-calendar-range .next-calendar-cell.next-disabled .next-calendar-year{cursor:not-allowed;background:#f7f8fa;color:#ccc;border-color:#f7f8fa}.next-calendar-card .next-calendar-cell.next-inrange .next-calendar-date,.next-calendar-panel .next-calendar-cell.next-inrange .next-calendar-date,.next-calendar-range .next-calendar-cell.next-inrange .next-calendar-date{background:#dee8ff;color:#5584ff;border-color:#dee8ff}.next-calendar-card .next-calendar-date,.next-calendar-card .next-calendar-month,.next-calendar-card .next-calendar-year,.next-calendar-panel .next-calendar-date,.next-calendar-panel .next-calendar-month,.next-calendar-panel .next-calendar-year,.next-calendar-range .next-calendar-date,.next-calendar-range .next-calendar-month,.next-calendar-range .next-calendar-year{text-align:center;border:1px solid;background:#fff;color:#666;border-color:#fff}.next-calendar-card .next-calendar-date:hover,.next-calendar-card .next-calendar-month:hover,.next-calendar-card .next-calendar-year:hover,.next-calendar-panel .next-calendar-date:hover,.next-calendar-panel .next-calendar-month:hover,.next-calendar-panel .next-calendar-year:hover,.next-calendar-range .next-calendar-date:hover,.next-calendar-range .next-calendar-month:hover,.next-calendar-range .next-calendar-year:hover{cursor:pointer;background:#dee8ff;color:#5584ff;border-color:#dee8ff}.next-calendar-card .next-calendar-date,.next-calendar-panel .next-calendar-date,.next-calendar-range .next-calendar-date{width:24px;height:24px;line-height:22px;margin:4px auto;border-radius:3px}.next-calendar-card .next-calendar-month,.next-calendar-panel .next-calendar-month,.next-calendar-range .next-calendar-month{width:60px;height:24px;line-height:22px;margin:8px auto;border-radius:3px}.next-calendar-card .next-calendar-year,.next-calendar-panel .next-calendar-year,.next-calendar-range .next-calendar-year{width:48px;height:24px;line-height:22px;margin:8px auto;border-radius:3px}.next-calendar-card .next-calendar-cell-next-month .next-calendar-date,.next-calendar-card .next-calendar-cell-prev-month .next-calendar-date,.next-calendar-panel .next-calendar-cell-next-month .next-calendar-date,.next-calendar-panel .next-calendar-cell-prev-month .next-calendar-date,.next-calendar-range .next-calendar-cell-next-month .next-calendar-date,.next-calendar-range .next-calendar-cell-prev-month .next-calendar-date{background:#fff;color:#ccc;border-color:#fff}.next-calendar-card .next-calendar-cell-current .next-calendar-date,.next-calendar-card .next-calendar-cell-current .next-calendar-month,.next-calendar-card .next-calendar-cell-current .next-calendar-year,.next-calendar-panel .next-calendar-cell-current .next-calendar-date,.next-calendar-panel .next-calendar-cell-current .next-calendar-month,.next-calendar-panel .next-calendar-cell-current .next-calendar-year,.next-calendar-range .next-calendar-cell-current .next-calendar-date,.next-calendar-range .next-calendar-cell-current .next-calendar-month,.next-calendar-range .next-calendar-cell-current .next-calendar-year{font-weight:700;background:#fff;color:#5584ff;border-color:transparent}.next-calendar[dir=rtl] .next-calendar-header{text-align:left}.next-calendar[dir=rtl] .next-calendar-header .next-select{margin-right:0;margin-left:4px}.next-calendar[dir=rtl] .next-calendar-header .next-menu{text-align:right}.next-calendar[dir=rtl] .next-calendar-btn-prev-decade,.next-calendar[dir=rtl] .next-calendar-btn-prev-year{left:auto;right:8px}.next-calendar[dir=rtl] .next-calendar-btn-prev-month{left:auto;right:28px}.next-calendar[dir=rtl] .next-calendar-btn-next-month{right:auto;left:28px}.next-calendar[dir=rtl] .next-calendar-btn-next-decade,.next-calendar[dir=rtl] .next-calendar-btn-next-year{right:auto;left:8px}.next-calendar-fullscreen[dir=rtl] .next-calendar-th{text-align:left;padding-left:12px;padding-right:0}.next-calendar-fullscreen[dir=rtl] .next-calendar-date,.next-calendar-fullscreen[dir=rtl] .next-calendar-month{text-align:left}.next-calendar-range[dir=rtl] .next-calendar-body-left,.next-calendar-range[dir=rtl] .next-calendar-body-right{float:right}.next-calendar-range[dir=rtl] .next-calendar-body-left{padding-right:0;padding-left:8px}.next-calendar-range[dir=rtl] .next-calendar-body-right{padding-left:0;padding-right:8px}.next-calendar-table{width:100%;table-layout:fixed}.next-calendar-range .next-calendar-body-left,.next-calendar-range .next-calendar-body-right{float:left;width:50%}.next-calendar-range .next-calendar-body-left{padding-right:8px}.next-calendar-range .next-calendar-body-right{padding-left:8px}.next-calendar-range .next-calendar-body:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-card,.next-card:after,.next-card:before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-card[dir=rtl] .next-card-extra{left:0;right:auto}.next-card[dir=rtl] .next-card-title:before{right:0;left:auto}.next-card[dir=rtl] .next-card-subtitle{float:left;padding-right:8px;padding-left:0}.next-card[dir=rtl] .next-card-head-show-bullet .next-card-title{padding-left:0;padding-right:8px}.next-card,.next-card *,.next-card :after,.next-card :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-card{min-width:100px;padding:0 16px;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none}.next-card,.next-card-head{background:#fff}.next-card-head-show-bullet .next-card-title{padding-left:8px}.next-card-head-show-bullet .next-card-title:before{content:"";display:inline-block;height:16px;width:3px;background:#5584ff;position:absolute;left:0;top:calc(50% - 16px / 2)}.next-card-head-main{position:relative;margin-top:8px;margin-bottom:0;height:40px;line-height:40px}.next-card-title{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:80%;height:100%;color:#333;font-size:16px}.next-card-subtitle{font-size:12px;color:#666;padding-left:8px}.next-card-extra{position:absolute;right:0;top:0;height:100%;font-size:12px;color:#5584ff}.next-card-body{padding-bottom:12px}.next-card-show-divider .next-card-head{border-bottom:1px solid #e6e7eb}.next-card-show-divider .next-card-body{padding-top:12px}.next-card-hide-divider .next-card-body{padding-top:0}.next-card-content{overflow:hidden;-webkit-transition:all .3s cubic-bezier(.23,1,.32,1);transition:all .3s cubic-bezier(.23,1,.32,1);position:relative}.next-card-footer .next-icon{-webkit-transition:all .3s cubic-bezier(.645,.045,.355,1);transition:all .3s cubic-bezier(.645,.045,.355,1)}.next-card-footer .next-icon.expand{-webkit-transform-origin:50% 47%;-ms-transform-origin:50% 47%;transform-origin:50% 47%;-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-cascader{display:inline-block;overflow:auto;border:1px solid #dcdee3;border-radius:3px}.next-cascader,.next-cascader *,.next-cascader :after,.next-cascader :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-cascader-inner:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-cascader-menu-wrapper{float:left;overflow:auto;width:100px;height:192px}.next-cascader-menu-wrapper+.next-cascader-menu-wrapper{border-left:1px solid #dcdee3}.next-cascader-menu{position:relative;padding:0;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;min-width:auto;min-height:100%}.next-cascader-menu.next-has-right-border{border-right:1px solid #dcdee3}.next-cascader-menu-item.next-expanded{color:#333;background-color:#f2f3f7}.next-cascader-menu-icon-right{position:absolute;top:0;right:10px;color:#666}.next-cascader-menu-icon-right:hover{color:#333}.next-cascader-menu-icon-expand.next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-cascader-menu-icon-expand.next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-cascader-menu-icon-expand.next-icon:before{width:16px;font-size:16px}}.next-cascader-menu-icon-loading.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-cascader-menu-item.next-expanded .next-cascader-menu-icon-right{color:#333}.next-cascader-menu-item.next-expanded .next-cascader-menu-icon-loading{color:#5584ff}.next-cascader-filtered-list{height:192px;padding:0;border:none;border-radius:0;-webkit-box-shadow:none;box-shadow:none;overflow:auto}.next-cascader-filtered-list .next-menu-item-inner{overflow:visible}.next-cascader-filtered-item em{color:#5584ff;font-style:normal}.next-cascader[dir=rtl] .next-cascader-menu-wrapper{float:right;border-left:none;border-right:1px solid #dcdee3}.next-cascader[dir=rtl] .next-cascader-menu-wrapper:first-child{border-right:none}.next-cascader[dir=rtl] .next-cascader-menu.next-has-right-border{border-right:none;border-left:1px solid #dcdee3}.next-cascader[dir=rtl] .next-cascader-menu-icon-right{right:auto;left:10px}.next-cascader-select,.next-cascader-select *,.next-cascader-select-dropdown,.next-cascader-select :after,.next-cascader-select :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-cascader-select-dropdown{border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none}.next-cascader-select-dropdown *,.next-cascader-select-dropdown :after,.next-cascader-select-dropdown :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-cascader-select-dropdown .next-cascader{display:block;border:none;-webkit-box-shadow:none;box-shadow:none}.next-cascader-select-not-found{padding:0;border:none;-webkit-box-shadow:none;box-shadow:none;overflow:auto;color:#999}.next-cascader-select-not-found .next-menu-item:hover{color:#999;background:#fff;cursor:default}.next-collapse[dir=rtl] .next-collapse-panel-title{padding:8px 28px 8px 0}.next-collapse[dir=rtl] .next-collapse-panel-icon{left:inherit;right:12px;-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg);margin-left:0;margin-right:0}.next-collapse[dir=rtl] .next-collapse-panel-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-collapse[dir=rtl] .next-collapse-panel-icon{-webkit-transform:scale(.5) rotate(270deg);-ms-transform:scale(.5) rotate(270deg);transform:scale(.5) rotate(270deg);margin-left:-4px;margin-right:-4px}.next-collapse[dir=rtl] .next-collapse-panel-icon:before{width:16px;font-size:16px}}.next-collapse{border:1px solid #dcdee3;border-radius:3px;overflow:hidden}.next-collapse,.next-collapse *,.next-collapse :after,.next-collapse :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-collapse:focus,.next-collapse :focus{outline:0}.next-collapse-panel:not(:first-child){border-top:1px solid #dcdee3}.next-collapse .next-collapse-panel-icon{position:absolute;color:#333;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;left:12px;margin-top:-2px;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);margin-left:0;margin-right:0}.next-collapse .next-collapse-panel-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-collapse .next-collapse-panel-icon{-webkit-transform:scale(.5) rotate(90deg);-ms-transform:scale(.5) rotate(90deg);transform:scale(.5) rotate(90deg);margin-left:-4px;margin-right:-4px}.next-collapse .next-collapse-panel-icon:before{width:16px;font-size:16px}}.next-collapse-panel-title{position:relative;line-height:20px;background:#f2f3f7;font-size:14px;font-weight:400;color:#333;cursor:pointer;padding:8px 0 8px 28px;-webkit-transition:background .2s ease;transition:background .2s ease}.next-collapse-panel-title:hover{background:#ebecf0;color:#333;font-weight:400}.next-collapse-panel-title:hover .next-collapse-panel-icon{color:#333}.next-collapse-panel-content{overflow:hidden;height:0;padding:0 16px;background:#fff;font-size:12px;color:#666;-webkit-transition:all .3s cubic-bezier(.23,1,.32,1);transition:all .3s cubic-bezier(.23,1,.32,1);opacity:0}.next-collapse-panel-expanded>.next-collapse-panel-content{display:block;padding:12px 16px;height:auto;opacity:1}.next-collapse .next-collapse-panel-icon.next-collapse-panel-icon-expanded{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);margin-left:0;margin-right:0}.next-collapse .next-collapse-panel-icon.next-collapse-panel-icon-expanded:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-collapse .next-collapse-panel-icon.next-collapse-panel-icon-expanded{-webkit-transform:scale(.5) rotate(180deg);-ms-transform:scale(.5) rotate(180deg);transform:scale(.5) rotate(180deg);margin-left:-4px;margin-right:-4px}.next-collapse .next-collapse-panel-icon.next-collapse-panel-icon-expanded:before{width:16px;font-size:16px}}.next-collapse-disabled{border-color:#e6e7eb}.next-collapse-panel-disabled{overflow:hidden}.next-collapse-panel-disabled:not(:first-child){border-color:#e6e7eb}.next-collapse-panel-disabled>.next-collapse-panel-title{cursor:not-allowed;color:#ccc;background:#f2f3f7}.next-collapse-panel-disabled .next-collapse-panel-icon{color:#ccc}.next-collapse-panel-disabled .next-collapse-panel-title:hover{font-weight:400}.next-collapse-panel-disabled .next-collapse-panel-title:hover .next-collapse-panel-icon{color:#ccc}.next-collapse-panel-disabled:hover{color:#ccc;background:#f2f3f7}.next-time-picker-menu{float:left;text-align:center}.next-time-picker-menu:not(:last-child){border-right:1px solid #c4c6cf}.next-time-picker-menu-title{cursor:default;height:28px;line-height:28px;font-size:12px;font-weight:400;color:#999;background:#fff}.next-time-picker-menu ul{position:relative;overflow-y:auto;list-style:none;margin:0;padding:0;font-size:12px;height:196px}.next-time-picker-menu-item{cursor:pointer;height:28px;line-height:28px;-webkit-transition:background .3s ease-out;transition:background .3s ease-out;color:#666;background:#fff;outline:none}.next-time-picker-menu-item:hover{color:#333;background:#f2f3f7}.next-time-picker-menu-item.next-selected{font-weight:700;color:#666;background:#f2f3f7}.next-time-picker-menu-item.next-disabled{cursor:not-allowed;color:#ccc;background:#fff}.next-time-picker-panel,.next-time-picker-panel *,.next-time-picker-panel :after,.next-time-picker-panel :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-time-picker-panel:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-time-picker-panel-header{border-bottom:1px solid #dcdee3}.next-time-picker-panel-input.next-input{width:100%;padding:6px;border-color:transparent;vertical-align:middle}.next-time-picker-panel-col-3 .next-time-picker-menu{width:33.33333%}.next-time-picker-panel-col-2 .next-time-picker-menu{width:50%}.next-time-picker-body[dir=rtl] .next-time-picker-menu{float:right}.next-time-picker-body[dir=rtl] .next-time-picker-menu:not(:last-child){border-right:none;border-left:1px solid #c4c6cf}.next-time-picker{display:inline-block;width:200px}.next-time-picker,.next-time-picker *,.next-time-picker :after,.next-time-picker :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-time-picker-trigger .next-input{width:100%}.next-time-picker-body{overflow:hidden;width:200px;border:1px solid #dcdee3;border-radius:3px;background:#fff;-webkit-box-shadow:none;box-shadow:none}.next-range-picker-panel-input-separator,.next-range-picker-trigger-separator{cursor:default;display:inline-block;text-align:center;color:#ccc;width:16px;font-size:12px;vertical-align:middle}.next-date-picker,.next-month-picker,.next-year-picker{display:inline-block;width:200px}.next-date-picker-input,.next-month-picker-input,.next-year-picker-input{width:100%}.next-date-picker-body,.next-month-picker-body,.next-year-picker-body{width:288px}.next-date-picker-panel-input.next-input,.next-month-picker-panel-input.next-input,.next-year-picker-panel-input.next-input{width:100%;background:transparent}.next-date-picker-body.next-date-picker-body-show-time .next-date-picker-panel-input.next-input{width:49%}.next-date-picker-body.next-date-picker-body-show-time .next-date-picker-panel-input.next-input:first-child{margin-right:2%}.next-range-picker{display:inline-block;width:336px}.next-range-picker-input{width:100%}.next-range-picker-trigger{border:1px solid #c4c6cf;background-color:#fff}.next-range-picker-trigger:hover{border-color:#a0a2ad;background-color:#fff}.next-range-picker-trigger.next-error{border-color:#ff3000}.next-range-picker-trigger-input.next-input{height:auto;width:calc((100% - 16px) / 2)}.next-range-picker.next-disabled .next-range-picker-trigger{color:#ccc;border-color:#e6e7eb;background-color:#f7f8fa;cursor:not-allowed}.next-range-picker.next-disabled .next-range-picker-trigger:hover{border-color:#e6e7eb;background-color:#f7f8fa}.next-range-picker.next-large .next-range-picker-panel-input,.next-range-picker.next-large .next-range-picker-trigger,.next-range-picker.next-medium .next-range-picker-panel-input,.next-range-picker.next-medium .next-range-picker-trigger,.next-range-picker.next-small .next-range-picker-panel-input,.next-range-picker.next-small .next-range-picker-trigger{border-radius:3px}.next-range-picker-body{width:600px}.next-range-picker-panel-input-end-date.next-input,.next-range-picker-panel-input-start-date.next-input{width:calc((100% - 16px) / 2)}.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-end-date,.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-end-time,.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-start-date,.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-start-time{width:calc((100% - 16px - 16px) / 4)}.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-start-date{margin-right:8px}.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-input-end-time{margin-left:8px}.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-end,.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-start{width:50%;float:left}.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-start{border-right:1px solid #dcdee3}.next-range-picker-body.next-range-picker-body-show-time .next-range-picker-panel-time-end{border-left:1px solid #dcdee3}.next-date-picker-body[dir=rtl] .next-date-picker-panel-footer{text-align:left}.next-date-picker-body[dir=rtl] .next-date-picker-panel-footer>.next-btn:not(:last-child){margin-right:0;margin-left:16px}.next-date-picker-body[dir=rtl].next-date-picker-body-show-time .next-date-picker-panel-input.next-input:first-child{margin-left:2%;margin-right:0}.next-date-picker-body[dir=rtl].next-date-picker-body-show-time .next-time-picker-menu{float:right}.next-date-picker-body[dir=rtl].next-date-picker-body-show-time .next-time-picker-menu:not(:last-child){border-right:none;border-left:1px solid #c4c6cf}.next-range-picker-body[dir=rtl] .next-range-picker-panel-input{text-align:right}.next-range-picker-body[dir=rtl] .next-date-picker-panel-footer{text-align:left}.next-range-picker-body[dir=rtl] .next-date-picker-panel-footer>.next-btn:not(:last-child){margin-right:0;margin-left:16px}.next-range-picker-body[dir=rtl].next-range-picker-body-show-time .next-range-picker-panel-input-start-date{margin-right:0;margin-left:8px}.next-range-picker-body[dir=rtl].next-range-picker-body-show-time .next-range-picker-panel-input-end-time{margin-left:0;margin-right:8px}.next-range-picker-body[dir=rtl].next-range-picker-body-show-time .next-range-picker-panel-time-end,.next-range-picker-body[dir=rtl].next-range-picker-body-show-time .next-range-picker-panel-time-start{float:right}.next-range-picker-body[dir=rtl].next-range-picker-body-show-time .next-range-picker-panel-time-start{border-right:none;border-left:1px solid #dcdee3}.next-range-picker-body[dir=rtl].next-range-picker-body-show-time .next-range-picker-panel-time-end{border-left:none;border-right:1px solid #dcdee3}.next-range-picker-body[dir=rtl].next-range-picker-body-show-time .next-time-picker-menu{float:right}.next-range-picker-body[dir=rtl].next-range-picker-body-show-time .next-time-picker-menu:not(:last-child){border-right:none;border-left:1px solid #c4c6cf}.next-date-picker,.next-date-picker *,.next-date-picker :after,.next-date-picker :before,.next-month-picker,.next-month-picker *,.next-month-picker :after,.next-month-picker :before,.next-range-picker,.next-range-picker *,.next-range-picker :after,.next-range-picker :before,.next-year-picker,.next-year-picker *,.next-year-picker :after,.next-year-picker :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-date-picker-body,.next-month-picker-body,.next-range-picker-body,.next-year-picker-body{border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;background:#fff}.next-date-picker-panel-header,.next-month-picker-panel-header,.next-range-picker-panel-header,.next-year-picker-panel-header{padding:6px;text-align:center}.next-date-picker-panel-time,.next-month-picker-panel-time,.next-range-picker-panel-time,.next-year-picker-panel-time{border-top:1px solid #dcdee3}.next-date-picker-panel-footer,.next-month-picker-panel-footer,.next-range-picker-panel-footer,.next-year-picker-panel-footer{text-align:right;padding:8px 20px;border-top:1px solid #dcdee3}.next-date-picker-panel-footer>.next-btn:not(:last-child),.next-month-picker-panel-footer>.next-btn:not(:last-child),.next-range-picker-panel-footer>.next-btn:not(:last-child),.next-year-picker-panel-footer>.next-btn:not(:last-child){margin-right:16px}.next-date-picker .next-calendar-panel-header,.next-month-picker .next-calendar-panel-header,.next-range-picker .next-calendar-panel-header,.next-year-picker .next-calendar-panel-header{margin-left:-1px;margin-right:-1px}.next-date-picker .next-input input,.next-month-picker .next-input input,.next-range-picker .next-input input,.next-year-picker .next-input input{vertical-align:baseline}.next-message{position:relative;display:block;vertical-align:baseline}.next-message,.next-message *,.next-message :after,.next-message :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-message:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-message .next-message-close{color:#999;font-size:0;position:absolute}.next-message .next-message-close .next-icon-close{width:12px;height:12px;line-height:12px}.next-message .next-message-close .next-icon-close:before{width:12px;height:12px;font-size:12px;line-height:12px}.next-message .next-message-close:hover{color:#666}.next-message.next-message-success.next-inline{background-color:#e4fdda;border-color:#e4fdda;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-success.next-inline .next-message-title{color:#333}.next-message.next-message-success.next-inline .next-message-content{color:#666}.next-message.next-message-success.next-inline .next-message-symbol{color:#46bc15}.next-message.next-message-success.next-inline .next-message-symbol-icon:before{content:"\E60A"}.next-message.next-message-success.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-success.next-addon .next-message-title{color:#333}.next-message.next-message-success.next-addon .next-message-content{color:#666}.next-message.next-message-success.next-addon .next-message-symbol{color:#46bc15}.next-message.next-message-success.next-addon .next-message-symbol-icon:before{content:"\E60A"}.next-message.next-message-success.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-success.next-toast .next-message-title{color:#333}.next-message.next-message-success.next-toast .next-message-content{color:#666}.next-message.next-message-success.next-toast .next-message-symbol{color:#46bc15}.next-message.next-message-success.next-toast .next-message-symbol-icon:before{content:"\E60A"}.next-message.next-message-warning.next-inline{background-color:#fff3e0;border-color:#fff3e0;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-warning.next-inline .next-message-title{color:#333}.next-message.next-message-warning.next-inline .next-message-content{color:#666}.next-message.next-message-warning.next-inline .next-message-symbol{color:#ff9300}.next-message.next-message-warning.next-inline .next-message-symbol-icon:before{content:"\E60B"}.next-message.next-message-warning.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-warning.next-addon .next-message-title{color:#333}.next-message.next-message-warning.next-addon .next-message-content{color:#666}.next-message.next-message-warning.next-addon .next-message-symbol{color:#ff9300}.next-message.next-message-warning.next-addon .next-message-symbol-icon:before{content:"\E60B"}.next-message.next-message-warning.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-warning.next-toast .next-message-title{color:#333}.next-message.next-message-warning.next-toast .next-message-content{color:#666}.next-message.next-message-warning.next-toast .next-message-symbol{color:#ff9300}.next-message.next-message-warning.next-toast .next-message-symbol-icon:before{content:"\E60B"}.next-message.next-message-error.next-inline{background-color:#ffece4;border-color:#ffece4;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-error.next-inline .next-message-title{color:#333}.next-message.next-message-error.next-inline .next-message-content{color:#666}.next-message.next-message-error.next-inline .next-message-symbol{color:#ff3000}.next-message.next-message-error.next-inline .next-message-symbol-icon:before{content:"\E60D"}.next-message.next-message-error.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-error.next-addon .next-message-title{color:#333}.next-message.next-message-error.next-addon .next-message-content{color:#666}.next-message.next-message-error.next-addon .next-message-symbol{color:#ff3000}.next-message.next-message-error.next-addon .next-message-symbol-icon:before{content:"\E60D"}.next-message.next-message-error.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-error.next-toast .next-message-title{color:#333}.next-message.next-message-error.next-toast .next-message-content{color:#666}.next-message.next-message-error.next-toast .next-message-symbol{color:#ff3000}.next-message.next-message-error.next-toast .next-message-symbol-icon:before{content:"\E60D"}.next-message.next-message-notice.next-inline{background-color:#e3f2fd;border-color:#e3f2fd;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-notice.next-inline .next-message-title{color:#333}.next-message.next-message-notice.next-inline .next-message-content{color:#666}.next-message.next-message-notice.next-inline .next-message-symbol{color:#4494f9}.next-message.next-message-notice.next-inline .next-message-symbol-icon:before{content:"\E60C"}.next-message.next-message-notice.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-notice.next-addon .next-message-title{color:#333}.next-message.next-message-notice.next-addon .next-message-content{color:#666}.next-message.next-message-notice.next-addon .next-message-symbol{color:#4494f9}.next-message.next-message-notice.next-addon .next-message-symbol-icon:before{content:"\E60C"}.next-message.next-message-notice.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-notice.next-toast .next-message-title{color:#333}.next-message.next-message-notice.next-toast .next-message-content{color:#666}.next-message.next-message-notice.next-toast .next-message-symbol{color:#4494f9}.next-message.next-message-notice.next-toast .next-message-symbol-icon:before{content:"\E60C"}.next-message.next-message-help.next-inline{background-color:#e3fff8;border-color:#e3fff8;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-help.next-inline .next-message-title{color:#333}.next-message.next-message-help.next-inline .next-message-content{color:#666}.next-message.next-message-help.next-inline .next-message-symbol{color:#01c1b2}.next-message.next-message-help.next-inline .next-message-symbol-icon:before{content:"\E673"}.next-message.next-message-help.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-help.next-addon .next-message-title{color:#333}.next-message.next-message-help.next-addon .next-message-content{color:#666}.next-message.next-message-help.next-addon .next-message-symbol{color:#01c1b2}.next-message.next-message-help.next-addon .next-message-symbol-icon:before{content:"\E673"}.next-message.next-message-help.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-help.next-toast .next-message-title{color:#333}.next-message.next-message-help.next-toast .next-message-content{color:#666}.next-message.next-message-help.next-toast .next-message-symbol{color:#01c1b2}.next-message.next-message-help.next-toast .next-message-symbol-icon:before{content:"\E673"}.next-message.next-message-loading.next-inline{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-loading.next-inline .next-message-title{color:#333}.next-message.next-message-loading.next-inline .next-message-content{color:#666}.next-message.next-message-loading.next-inline .next-message-symbol{color:#5584ff}.next-message.next-message-loading.next-inline .next-message-symbol-icon:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}.next-message.next-message-loading.next-addon{background-color:transparent;border-color:transparent;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;border-style:solid}.next-message.next-message-loading.next-addon .next-message-title{color:#333}.next-message.next-message-loading.next-addon .next-message-content{color:#666}.next-message.next-message-loading.next-addon .next-message-symbol{color:#5584ff}.next-message.next-message-loading.next-addon .next-message-symbol-icon:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}.next-message.next-message-loading.next-toast{background-color:#fff;border-color:#fff;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);border-style:solid}.next-message.next-message-loading.next-toast .next-message-title{color:#333}.next-message.next-message-loading.next-toast .next-message-content{color:#666}.next-message.next-message-loading.next-toast .next-message-symbol{color:#5584ff}.next-message.next-message-loading.next-toast .next-message-symbol-icon:before{content:"\E646";-webkit-animation:loadingCircle 1s infinite linear;animation:loadingCircle 1s infinite linear}.next-message.next-medium{border-width:1px;padding:12px}.next-message.next-medium .next-message-symbol{float:left;line-height:16px}.next-message.next-medium .next-message-symbol:before{width:16px;font-size:16px;line-height:inherit}.next-message.next-medium .next-message-title{padding:0 20px 0 24px;font-size:16px;line-height:16px}.next-message.next-medium .next-message-content{margin-top:8px;padding:0 20px 0 24px;font-size:12px;line-height:12px}.next-message.next-medium .next-message-symbol+.next-message-content{margin-top:0}.next-message.next-medium.next-only-content .next-message-content{line-height:16px}.next-message.next-medium .next-message-close{top:12px;right:12px}.next-message.next-large{border-width:2px;padding:16px;line-height:18px}.next-message.next-large .next-message-symbol{float:left;line-height:24px}.next-message.next-large .next-message-symbol:before{width:24px;font-size:24px;line-height:inherit}.next-message.next-large .next-message-title{padding:0 20px 0 36px;font-size:20px;line-height:20px}.next-message.next-large .next-message-content{margin-top:8px;padding:0 20px 0 36px;font-size:12px;line-height:12px}.next-message.next-large .next-message-symbol+.next-message-content{margin-top:0}.next-message.next-large.next-only-content .next-message-content,.next-message.next-large.next-title-content .next-message-title{line-height:24px}.next-message.next-large .next-message-close{top:16px;right:16px}.next-message[dir=rtl] .next-message-symbol{float:right}.next-message[dir=rtl].next-medium .next-message-title{padding:0 24px 0 20px}.next-message[dir=rtl].next-medium .next-message-close{left:12px;right:auto}.next-message[dir=rtl].next-large .next-message-title{padding:0 36px 0 20px}.next-message[dir=rtl].next-large .next-message-close{left:16px;right:auto}.next-dialog[dir=rtl],.next-dialog[dir=rtl] .next-dialog-footer.next-align-left{text-align:right}.next-dialog[dir=rtl] .next-dialog-footer.next-align-center{text-align:center}.next-dialog[dir=rtl] .next-dialog-footer.next-align-right{text-align:left}.next-dialog[dir=rtl] .next-dialog-btn+.next-dialog-btn{margin-right:4px;margin-left:0}.next-dialog[dir=rtl] .next-dialog-close{left:16px;right:auto}.next-dialog{position:fixed;z-index:1001;background:#fff;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:0 2px 4px 0 rgba(0,0,0,.12);box-shadow:0 2px 4px 0 rgba(0,0,0,.12);text-align:left}.next-dialog,.next-dialog *,.next-dialog :after,.next-dialog :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-dialog-header{padding:12px 20px;border-bottom:0 solid transparent;font-size:16px;background:transparent;color:#333}.next-dialog-body{padding:20px;font-size:12px;color:#666}.next-dialog-footer{padding:12px 20px;border-top:0 solid transparent;background:transparent}.next-dialog-footer.next-align-left{text-align:left}.next-dialog-footer.next-align-center{text-align:center}.next-dialog-footer.next-align-right{text-align:right}.next-dialog-footer-fixed-height{position:absolute;width:100%;bottom:0}.next-dialog-btn+.next-dialog-btn{margin-left:4px}.next-dialog-close{position:absolute;top:16px;right:16px;width:16px}.next-dialog-close,.next-dialog-close:link,.next-dialog-close:visited{height:16px;color:#999}.next-dialog-close:hover{background:transparent;color:#333}.next-dialog-close .next-dialog-close-icon.next-icon{position:absolute;top:50%;left:50%;margin-top:-6px;margin-left:-6px;width:12px;height:12px;line-height:12px}.next-dialog-close .next-dialog-close-icon.next-icon:before{width:12px;height:12px;font-size:12px;line-height:12px}.next-dialog-container{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1001;padding:40px;overflow:auto;text-align:center}.next-dialog-container:before{display:inline-block;vertical-align:middle;width:0;height:100%;content:""}.next-dialog-container .next-dialog{display:inline-block;position:relative;vertical-align:middle}.next-dialog-quick .next-dialog-body{padding:20px}.next-dialog .next-dialog-message.next-message{min-width:300px;padding:0}.next-row{display:-webkit-box;display:-ms-flexbox;display:flex}.next-row,.next-row *,.next-row :after,.next-row :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-row.next-row-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}@media (min-width:320px){.next-row.next-row-fixed{width:320px}}@media (min-width:480px){.next-row.next-row-fixed{width:480px}}@media (min-width:720px){.next-row.next-row-fixed{width:720px}}@media (min-width:990px){.next-row.next-row-fixed{width:990px}}@media (min-width:1200px){.next-row.next-row-fixed{width:1200px}}@media (min-width:1500px){.next-row.next-row-fixed{width:1500px}}.next-row.next-row-fixed-xxs{width:320px}.next-row.next-row-fixed-xs{width:480px}.next-row.next-row-fixed-s{width:720px}.next-row.next-row-fixed-m{width:990px}.next-row.next-row-fixed-l{width:1200px}.next-row.next-row-fixed-xl{width:1500px}.next-row.next-row-justify-start{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}.next-row.next-row-justify-end{-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.next-row.next-row-justify-center{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.next-row.next-row-justify-space-between{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.next-row.next-row-justify-space-around{-ms-flex-pack:distribute;justify-content:space-around}.next-row.next-row-align-top{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.next-row.next-row-align-bottom{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}.next-row.next-row-align-center{-webkit-box-align:center;-ms-flex-align:center;align-items:center}.next-row.next-row-align-baseline{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline}.next-row.next-row-align-stretch{-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.next-col{-webkit-box-flex:1;-ms-flex:1;flex:1}.next-col.next-col-top{-ms-flex-item-align:start;align-self:flex-start}.next-col.next-col-bottom{-ms-flex-item-align:end;align-self:flex-end}.next-col.next-col-center{-ms-flex-item-align:center;align-self:center}@media (min-width:0\0) and (min-resolution:0.001dpcm){.next-row{display:table;width:100%}.next-col{display:table-cell;vertical-align:top}}.next-col-1{-webkit-box-flex:0;-ms-flex:0 0 4.16667%;flex:0 0 4.16667%;width:4.16667%;max-width:4.16667%}.next-col-2{-webkit-box-flex:0;-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;width:8.33333%;max-width:8.33333%}.next-col-3{-webkit-box-flex:0;-ms-flex:0 0 12.5%;flex:0 0 12.5%;width:12.5%;max-width:12.5%}.next-col-4{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;width:16.66667%;max-width:16.66667%}.next-col-5{-webkit-box-flex:0;-ms-flex:0 0 20.83333%;flex:0 0 20.83333%;width:20.83333%;max-width:20.83333%}.next-col-6{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;width:25%;max-width:25%}.next-col-7{-webkit-box-flex:0;-ms-flex:0 0 29.16667%;flex:0 0 29.16667%;width:29.16667%;max-width:29.16667%}.next-col-8{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;width:33.33333%;max-width:33.33333%}.next-col-9{-webkit-box-flex:0;-ms-flex:0 0 37.5%;flex:0 0 37.5%;width:37.5%;max-width:37.5%}.next-col-10{-webkit-box-flex:0;-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;width:41.66667%;max-width:41.66667%}.next-col-11{-webkit-box-flex:0;-ms-flex:0 0 45.83333%;flex:0 0 45.83333%;width:45.83333%;max-width:45.83333%}.next-col-12{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;width:50%;max-width:50%}.next-col-13{-webkit-box-flex:0;-ms-flex:0 0 54.16667%;flex:0 0 54.16667%;width:54.16667%;max-width:54.16667%}.next-col-14{-webkit-box-flex:0;-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;width:58.33333%;max-width:58.33333%}.next-col-15{-webkit-box-flex:0;-ms-flex:0 0 62.5%;flex:0 0 62.5%;width:62.5%;max-width:62.5%}.next-col-16{-webkit-box-flex:0;-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;width:66.66667%;max-width:66.66667%}.next-col-17{-webkit-box-flex:0;-ms-flex:0 0 70.83333%;flex:0 0 70.83333%;width:70.83333%;max-width:70.83333%}.next-col-18{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;width:75%;max-width:75%}.next-col-19{-webkit-box-flex:0;-ms-flex:0 0 79.16667%;flex:0 0 79.16667%;width:79.16667%;max-width:79.16667%}.next-col-20{-webkit-box-flex:0;-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;width:83.33333%;max-width:83.33333%}.next-col-21{-webkit-box-flex:0;-ms-flex:0 0 87.5%;flex:0 0 87.5%;width:87.5%;max-width:87.5%}.next-col-22{-webkit-box-flex:0;-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;width:91.66667%;max-width:91.66667%}.next-col-23{-webkit-box-flex:0;-ms-flex:0 0 95.83333%;flex:0 0 95.83333%;width:95.83333%;max-width:95.83333%}.next-col-24{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}@media (min-width:320px){.next-col-xxs-1{-webkit-box-flex:0;-ms-flex:0 0 4.16667%;flex:0 0 4.16667%;width:4.16667%;max-width:4.16667%}.next-col-xxs-2{-webkit-box-flex:0;-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;width:8.33333%;max-width:8.33333%}.next-col-xxs-3{-webkit-box-flex:0;-ms-flex:0 0 12.5%;flex:0 0 12.5%;width:12.5%;max-width:12.5%}.next-col-xxs-4{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;width:16.66667%;max-width:16.66667%}.next-col-xxs-5{-webkit-box-flex:0;-ms-flex:0 0 20.83333%;flex:0 0 20.83333%;width:20.83333%;max-width:20.83333%}.next-col-xxs-6{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;width:25%;max-width:25%}.next-col-xxs-7{-webkit-box-flex:0;-ms-flex:0 0 29.16667%;flex:0 0 29.16667%;width:29.16667%;max-width:29.16667%}.next-col-xxs-8{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;width:33.33333%;max-width:33.33333%}.next-col-xxs-9{-webkit-box-flex:0;-ms-flex:0 0 37.5%;flex:0 0 37.5%;width:37.5%;max-width:37.5%}.next-col-xxs-10{-webkit-box-flex:0;-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;width:41.66667%;max-width:41.66667%}.next-col-xxs-11{-webkit-box-flex:0;-ms-flex:0 0 45.83333%;flex:0 0 45.83333%;width:45.83333%;max-width:45.83333%}.next-col-xxs-12{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;width:50%;max-width:50%}.next-col-xxs-13{-webkit-box-flex:0;-ms-flex:0 0 54.16667%;flex:0 0 54.16667%;width:54.16667%;max-width:54.16667%}.next-col-xxs-14{-webkit-box-flex:0;-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;width:58.33333%;max-width:58.33333%}.next-col-xxs-15{-webkit-box-flex:0;-ms-flex:0 0 62.5%;flex:0 0 62.5%;width:62.5%;max-width:62.5%}.next-col-xxs-16{-webkit-box-flex:0;-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;width:66.66667%;max-width:66.66667%}.next-col-xxs-17{-webkit-box-flex:0;-ms-flex:0 0 70.83333%;flex:0 0 70.83333%;width:70.83333%;max-width:70.83333%}.next-col-xxs-18{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;width:75%;max-width:75%}.next-col-xxs-19{-webkit-box-flex:0;-ms-flex:0 0 79.16667%;flex:0 0 79.16667%;width:79.16667%;max-width:79.16667%}.next-col-xxs-20{-webkit-box-flex:0;-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;width:83.33333%;max-width:83.33333%}.next-col-xxs-21{-webkit-box-flex:0;-ms-flex:0 0 87.5%;flex:0 0 87.5%;width:87.5%;max-width:87.5%}.next-col-xxs-22{-webkit-box-flex:0;-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;width:91.66667%;max-width:91.66667%}.next-col-xxs-23{-webkit-box-flex:0;-ms-flex:0 0 95.83333%;flex:0 0 95.83333%;width:95.83333%;max-width:95.83333%}.next-col-xxs-24{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:480px){.next-col-xs-1{-webkit-box-flex:0;-ms-flex:0 0 4.16667%;flex:0 0 4.16667%;width:4.16667%;max-width:4.16667%}.next-col-xs-2{-webkit-box-flex:0;-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;width:8.33333%;max-width:8.33333%}.next-col-xs-3{-webkit-box-flex:0;-ms-flex:0 0 12.5%;flex:0 0 12.5%;width:12.5%;max-width:12.5%}.next-col-xs-4{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;width:16.66667%;max-width:16.66667%}.next-col-xs-5{-webkit-box-flex:0;-ms-flex:0 0 20.83333%;flex:0 0 20.83333%;width:20.83333%;max-width:20.83333%}.next-col-xs-6{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;width:25%;max-width:25%}.next-col-xs-7{-webkit-box-flex:0;-ms-flex:0 0 29.16667%;flex:0 0 29.16667%;width:29.16667%;max-width:29.16667%}.next-col-xs-8{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;width:33.33333%;max-width:33.33333%}.next-col-xs-9{-webkit-box-flex:0;-ms-flex:0 0 37.5%;flex:0 0 37.5%;width:37.5%;max-width:37.5%}.next-col-xs-10{-webkit-box-flex:0;-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;width:41.66667%;max-width:41.66667%}.next-col-xs-11{-webkit-box-flex:0;-ms-flex:0 0 45.83333%;flex:0 0 45.83333%;width:45.83333%;max-width:45.83333%}.next-col-xs-12{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;width:50%;max-width:50%}.next-col-xs-13{-webkit-box-flex:0;-ms-flex:0 0 54.16667%;flex:0 0 54.16667%;width:54.16667%;max-width:54.16667%}.next-col-xs-14{-webkit-box-flex:0;-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;width:58.33333%;max-width:58.33333%}.next-col-xs-15{-webkit-box-flex:0;-ms-flex:0 0 62.5%;flex:0 0 62.5%;width:62.5%;max-width:62.5%}.next-col-xs-16{-webkit-box-flex:0;-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;width:66.66667%;max-width:66.66667%}.next-col-xs-17{-webkit-box-flex:0;-ms-flex:0 0 70.83333%;flex:0 0 70.83333%;width:70.83333%;max-width:70.83333%}.next-col-xs-18{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;width:75%;max-width:75%}.next-col-xs-19{-webkit-box-flex:0;-ms-flex:0 0 79.16667%;flex:0 0 79.16667%;width:79.16667%;max-width:79.16667%}.next-col-xs-20{-webkit-box-flex:0;-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;width:83.33333%;max-width:83.33333%}.next-col-xs-21{-webkit-box-flex:0;-ms-flex:0 0 87.5%;flex:0 0 87.5%;width:87.5%;max-width:87.5%}.next-col-xs-22{-webkit-box-flex:0;-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;width:91.66667%;max-width:91.66667%}.next-col-xs-23{-webkit-box-flex:0;-ms-flex:0 0 95.83333%;flex:0 0 95.83333%;width:95.83333%;max-width:95.83333%}.next-col-xs-24{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:720px){.next-col-s-1{-webkit-box-flex:0;-ms-flex:0 0 4.16667%;flex:0 0 4.16667%;width:4.16667%;max-width:4.16667%}.next-col-s-2{-webkit-box-flex:0;-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;width:8.33333%;max-width:8.33333%}.next-col-s-3{-webkit-box-flex:0;-ms-flex:0 0 12.5%;flex:0 0 12.5%;width:12.5%;max-width:12.5%}.next-col-s-4{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;width:16.66667%;max-width:16.66667%}.next-col-s-5{-webkit-box-flex:0;-ms-flex:0 0 20.83333%;flex:0 0 20.83333%;width:20.83333%;max-width:20.83333%}.next-col-s-6{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;width:25%;max-width:25%}.next-col-s-7{-webkit-box-flex:0;-ms-flex:0 0 29.16667%;flex:0 0 29.16667%;width:29.16667%;max-width:29.16667%}.next-col-s-8{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;width:33.33333%;max-width:33.33333%}.next-col-s-9{-webkit-box-flex:0;-ms-flex:0 0 37.5%;flex:0 0 37.5%;width:37.5%;max-width:37.5%}.next-col-s-10{-webkit-box-flex:0;-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;width:41.66667%;max-width:41.66667%}.next-col-s-11{-webkit-box-flex:0;-ms-flex:0 0 45.83333%;flex:0 0 45.83333%;width:45.83333%;max-width:45.83333%}.next-col-s-12{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;width:50%;max-width:50%}.next-col-s-13{-webkit-box-flex:0;-ms-flex:0 0 54.16667%;flex:0 0 54.16667%;width:54.16667%;max-width:54.16667%}.next-col-s-14{-webkit-box-flex:0;-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;width:58.33333%;max-width:58.33333%}.next-col-s-15{-webkit-box-flex:0;-ms-flex:0 0 62.5%;flex:0 0 62.5%;width:62.5%;max-width:62.5%}.next-col-s-16{-webkit-box-flex:0;-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;width:66.66667%;max-width:66.66667%}.next-col-s-17{-webkit-box-flex:0;-ms-flex:0 0 70.83333%;flex:0 0 70.83333%;width:70.83333%;max-width:70.83333%}.next-col-s-18{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;width:75%;max-width:75%}.next-col-s-19{-webkit-box-flex:0;-ms-flex:0 0 79.16667%;flex:0 0 79.16667%;width:79.16667%;max-width:79.16667%}.next-col-s-20{-webkit-box-flex:0;-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;width:83.33333%;max-width:83.33333%}.next-col-s-21{-webkit-box-flex:0;-ms-flex:0 0 87.5%;flex:0 0 87.5%;width:87.5%;max-width:87.5%}.next-col-s-22{-webkit-box-flex:0;-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;width:91.66667%;max-width:91.66667%}.next-col-s-23{-webkit-box-flex:0;-ms-flex:0 0 95.83333%;flex:0 0 95.83333%;width:95.83333%;max-width:95.83333%}.next-col-s-24{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:990px){.next-col-m-1{-webkit-box-flex:0;-ms-flex:0 0 4.16667%;flex:0 0 4.16667%;width:4.16667%;max-width:4.16667%}.next-col-m-2{-webkit-box-flex:0;-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;width:8.33333%;max-width:8.33333%}.next-col-m-3{-webkit-box-flex:0;-ms-flex:0 0 12.5%;flex:0 0 12.5%;width:12.5%;max-width:12.5%}.next-col-m-4{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;width:16.66667%;max-width:16.66667%}.next-col-m-5{-webkit-box-flex:0;-ms-flex:0 0 20.83333%;flex:0 0 20.83333%;width:20.83333%;max-width:20.83333%}.next-col-m-6{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;width:25%;max-width:25%}.next-col-m-7{-webkit-box-flex:0;-ms-flex:0 0 29.16667%;flex:0 0 29.16667%;width:29.16667%;max-width:29.16667%}.next-col-m-8{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;width:33.33333%;max-width:33.33333%}.next-col-m-9{-webkit-box-flex:0;-ms-flex:0 0 37.5%;flex:0 0 37.5%;width:37.5%;max-width:37.5%}.next-col-m-10{-webkit-box-flex:0;-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;width:41.66667%;max-width:41.66667%}.next-col-m-11{-webkit-box-flex:0;-ms-flex:0 0 45.83333%;flex:0 0 45.83333%;width:45.83333%;max-width:45.83333%}.next-col-m-12{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;width:50%;max-width:50%}.next-col-m-13{-webkit-box-flex:0;-ms-flex:0 0 54.16667%;flex:0 0 54.16667%;width:54.16667%;max-width:54.16667%}.next-col-m-14{-webkit-box-flex:0;-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;width:58.33333%;max-width:58.33333%}.next-col-m-15{-webkit-box-flex:0;-ms-flex:0 0 62.5%;flex:0 0 62.5%;width:62.5%;max-width:62.5%}.next-col-m-16{-webkit-box-flex:0;-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;width:66.66667%;max-width:66.66667%}.next-col-m-17{-webkit-box-flex:0;-ms-flex:0 0 70.83333%;flex:0 0 70.83333%;width:70.83333%;max-width:70.83333%}.next-col-m-18{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;width:75%;max-width:75%}.next-col-m-19{-webkit-box-flex:0;-ms-flex:0 0 79.16667%;flex:0 0 79.16667%;width:79.16667%;max-width:79.16667%}.next-col-m-20{-webkit-box-flex:0;-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;width:83.33333%;max-width:83.33333%}.next-col-m-21{-webkit-box-flex:0;-ms-flex:0 0 87.5%;flex:0 0 87.5%;width:87.5%;max-width:87.5%}.next-col-m-22{-webkit-box-flex:0;-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;width:91.66667%;max-width:91.66667%}.next-col-m-23{-webkit-box-flex:0;-ms-flex:0 0 95.83333%;flex:0 0 95.83333%;width:95.83333%;max-width:95.83333%}.next-col-m-24{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:1200px){.next-col-l-1{-webkit-box-flex:0;-ms-flex:0 0 4.16667%;flex:0 0 4.16667%;width:4.16667%;max-width:4.16667%}.next-col-l-2{-webkit-box-flex:0;-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;width:8.33333%;max-width:8.33333%}.next-col-l-3{-webkit-box-flex:0;-ms-flex:0 0 12.5%;flex:0 0 12.5%;width:12.5%;max-width:12.5%}.next-col-l-4{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;width:16.66667%;max-width:16.66667%}.next-col-l-5{-webkit-box-flex:0;-ms-flex:0 0 20.83333%;flex:0 0 20.83333%;width:20.83333%;max-width:20.83333%}.next-col-l-6{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;width:25%;max-width:25%}.next-col-l-7{-webkit-box-flex:0;-ms-flex:0 0 29.16667%;flex:0 0 29.16667%;width:29.16667%;max-width:29.16667%}.next-col-l-8{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;width:33.33333%;max-width:33.33333%}.next-col-l-9{-webkit-box-flex:0;-ms-flex:0 0 37.5%;flex:0 0 37.5%;width:37.5%;max-width:37.5%}.next-col-l-10{-webkit-box-flex:0;-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;width:41.66667%;max-width:41.66667%}.next-col-l-11{-webkit-box-flex:0;-ms-flex:0 0 45.83333%;flex:0 0 45.83333%;width:45.83333%;max-width:45.83333%}.next-col-l-12{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;width:50%;max-width:50%}.next-col-l-13{-webkit-box-flex:0;-ms-flex:0 0 54.16667%;flex:0 0 54.16667%;width:54.16667%;max-width:54.16667%}.next-col-l-14{-webkit-box-flex:0;-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;width:58.33333%;max-width:58.33333%}.next-col-l-15{-webkit-box-flex:0;-ms-flex:0 0 62.5%;flex:0 0 62.5%;width:62.5%;max-width:62.5%}.next-col-l-16{-webkit-box-flex:0;-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;width:66.66667%;max-width:66.66667%}.next-col-l-17{-webkit-box-flex:0;-ms-flex:0 0 70.83333%;flex:0 0 70.83333%;width:70.83333%;max-width:70.83333%}.next-col-l-18{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;width:75%;max-width:75%}.next-col-l-19{-webkit-box-flex:0;-ms-flex:0 0 79.16667%;flex:0 0 79.16667%;width:79.16667%;max-width:79.16667%}.next-col-l-20{-webkit-box-flex:0;-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;width:83.33333%;max-width:83.33333%}.next-col-l-21{-webkit-box-flex:0;-ms-flex:0 0 87.5%;flex:0 0 87.5%;width:87.5%;max-width:87.5%}.next-col-l-22{-webkit-box-flex:0;-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;width:91.66667%;max-width:91.66667%}.next-col-l-23{-webkit-box-flex:0;-ms-flex:0 0 95.83333%;flex:0 0 95.83333%;width:95.83333%;max-width:95.83333%}.next-col-l-24{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:1500px){.next-col-xl-1{-webkit-box-flex:0;-ms-flex:0 0 4.16667%;flex:0 0 4.16667%;width:4.16667%;max-width:4.16667%}.next-col-xl-2{-webkit-box-flex:0;-ms-flex:0 0 8.33333%;flex:0 0 8.33333%;width:8.33333%;max-width:8.33333%}.next-col-xl-3{-webkit-box-flex:0;-ms-flex:0 0 12.5%;flex:0 0 12.5%;width:12.5%;max-width:12.5%}.next-col-xl-4{-webkit-box-flex:0;-ms-flex:0 0 16.66667%;flex:0 0 16.66667%;width:16.66667%;max-width:16.66667%}.next-col-xl-5{-webkit-box-flex:0;-ms-flex:0 0 20.83333%;flex:0 0 20.83333%;width:20.83333%;max-width:20.83333%}.next-col-xl-6{-webkit-box-flex:0;-ms-flex:0 0 25%;flex:0 0 25%;width:25%;max-width:25%}.next-col-xl-7{-webkit-box-flex:0;-ms-flex:0 0 29.16667%;flex:0 0 29.16667%;width:29.16667%;max-width:29.16667%}.next-col-xl-8{-webkit-box-flex:0;-ms-flex:0 0 33.33333%;flex:0 0 33.33333%;width:33.33333%;max-width:33.33333%}.next-col-xl-9{-webkit-box-flex:0;-ms-flex:0 0 37.5%;flex:0 0 37.5%;width:37.5%;max-width:37.5%}.next-col-xl-10{-webkit-box-flex:0;-ms-flex:0 0 41.66667%;flex:0 0 41.66667%;width:41.66667%;max-width:41.66667%}.next-col-xl-11{-webkit-box-flex:0;-ms-flex:0 0 45.83333%;flex:0 0 45.83333%;width:45.83333%;max-width:45.83333%}.next-col-xl-12{-webkit-box-flex:0;-ms-flex:0 0 50%;flex:0 0 50%;width:50%;max-width:50%}.next-col-xl-13{-webkit-box-flex:0;-ms-flex:0 0 54.16667%;flex:0 0 54.16667%;width:54.16667%;max-width:54.16667%}.next-col-xl-14{-webkit-box-flex:0;-ms-flex:0 0 58.33333%;flex:0 0 58.33333%;width:58.33333%;max-width:58.33333%}.next-col-xl-15{-webkit-box-flex:0;-ms-flex:0 0 62.5%;flex:0 0 62.5%;width:62.5%;max-width:62.5%}.next-col-xl-16{-webkit-box-flex:0;-ms-flex:0 0 66.66667%;flex:0 0 66.66667%;width:66.66667%;max-width:66.66667%}.next-col-xl-17{-webkit-box-flex:0;-ms-flex:0 0 70.83333%;flex:0 0 70.83333%;width:70.83333%;max-width:70.83333%}.next-col-xl-18{-webkit-box-flex:0;-ms-flex:0 0 75%;flex:0 0 75%;width:75%;max-width:75%}.next-col-xl-19{-webkit-box-flex:0;-ms-flex:0 0 79.16667%;flex:0 0 79.16667%;width:79.16667%;max-width:79.16667%}.next-col-xl-20{-webkit-box-flex:0;-ms-flex:0 0 83.33333%;flex:0 0 83.33333%;width:83.33333%;max-width:83.33333%}.next-col-xl-21{-webkit-box-flex:0;-ms-flex:0 0 87.5%;flex:0 0 87.5%;width:87.5%;max-width:87.5%}.next-col-xl-22{-webkit-box-flex:0;-ms-flex:0 0 91.66667%;flex:0 0 91.66667%;width:91.66667%;max-width:91.66667%}.next-col-xl-23{-webkit-box-flex:0;-ms-flex:0 0 95.83333%;flex:0 0 95.83333%;width:95.83333%;max-width:95.83333%}.next-col-xl-24{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}.next-col-1p5{-webkit-box-flex:0;-ms-flex:0 0 20%;flex:0 0 20%;width:20%;max-width:20%}.next-col-2p5{-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%;width:40%;max-width:40%}.next-col-3p5{-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;width:60%;max-width:60%}.next-col-4p5{-webkit-box-flex:0;-ms-flex:0 0 80%;flex:0 0 80%;width:80%;max-width:80%}.next-col-5p5{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}@media (min-width:320px){.next-col-xxs-1p5{-webkit-box-flex:0;-ms-flex:0 0 20%;flex:0 0 20%;width:20%;max-width:20%}.next-col-xxs-2p5{-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%;width:40%;max-width:40%}.next-col-xxs-3p5{-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;width:60%;max-width:60%}.next-col-xxs-4p5{-webkit-box-flex:0;-ms-flex:0 0 80%;flex:0 0 80%;width:80%;max-width:80%}.next-col-xxs-5p5{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:480px){.next-col-xs-1p5{-webkit-box-flex:0;-ms-flex:0 0 20%;flex:0 0 20%;width:20%;max-width:20%}.next-col-xs-2p5{-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%;width:40%;max-width:40%}.next-col-xs-3p5{-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;width:60%;max-width:60%}.next-col-xs-4p5{-webkit-box-flex:0;-ms-flex:0 0 80%;flex:0 0 80%;width:80%;max-width:80%}.next-col-xs-5p5{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:720px){.next-col-s-1p5{-webkit-box-flex:0;-ms-flex:0 0 20%;flex:0 0 20%;width:20%;max-width:20%}.next-col-s-2p5{-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%;width:40%;max-width:40%}.next-col-s-3p5{-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;width:60%;max-width:60%}.next-col-s-4p5{-webkit-box-flex:0;-ms-flex:0 0 80%;flex:0 0 80%;width:80%;max-width:80%}.next-col-s-5p5{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:990px){.next-col-m-1p5{-webkit-box-flex:0;-ms-flex:0 0 20%;flex:0 0 20%;width:20%;max-width:20%}.next-col-m-2p5{-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%;width:40%;max-width:40%}.next-col-m-3p5{-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;width:60%;max-width:60%}.next-col-m-4p5{-webkit-box-flex:0;-ms-flex:0 0 80%;flex:0 0 80%;width:80%;max-width:80%}.next-col-m-5p5{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:1200px){.next-col-l-1p5{-webkit-box-flex:0;-ms-flex:0 0 20%;flex:0 0 20%;width:20%;max-width:20%}.next-col-l-2p5{-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%;width:40%;max-width:40%}.next-col-l-3p5{-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;width:60%;max-width:60%}.next-col-l-4p5{-webkit-box-flex:0;-ms-flex:0 0 80%;flex:0 0 80%;width:80%;max-width:80%}.next-col-l-5p5{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}@media (min-width:1500px){.next-col-xl-1p5{-webkit-box-flex:0;-ms-flex:0 0 20%;flex:0 0 20%;width:20%;max-width:20%}.next-col-xl-2p5{-webkit-box-flex:0;-ms-flex:0 0 40%;flex:0 0 40%;width:40%;max-width:40%}.next-col-xl-3p5{-webkit-box-flex:0;-ms-flex:0 0 60%;flex:0 0 60%;width:60%;max-width:60%}.next-col-xl-4p5{-webkit-box-flex:0;-ms-flex:0 0 80%;flex:0 0 80%;width:80%;max-width:80%}.next-col-xl-5p5{-webkit-box-flex:0;-ms-flex:0 0 100%;flex:0 0 100%;width:100%;max-width:100%}}.next-col-fixed-1{-webkit-box-flex:0;-ms-flex:0 0 20px;flex:0 0 20px;width:20px;max-width:20px}.next-col-fixed-2{-webkit-box-flex:0;-ms-flex:0 0 40px;flex:0 0 40px;width:40px;max-width:40px}.next-col-fixed-3{-webkit-box-flex:0;-ms-flex:0 0 60px;flex:0 0 60px;width:60px;max-width:60px}.next-col-fixed-4{-webkit-box-flex:0;-ms-flex:0 0 80px;flex:0 0 80px;width:80px;max-width:80px}.next-col-fixed-5{-webkit-box-flex:0;-ms-flex:0 0 100px;flex:0 0 100px;width:100px;max-width:100px}.next-col-fixed-6{-webkit-box-flex:0;-ms-flex:0 0 120px;flex:0 0 120px;width:120px;max-width:120px}.next-col-fixed-7{-webkit-box-flex:0;-ms-flex:0 0 140px;flex:0 0 140px;width:140px;max-width:140px}.next-col-fixed-8{-webkit-box-flex:0;-ms-flex:0 0 160px;flex:0 0 160px;width:160px;max-width:160px}.next-col-fixed-9{-webkit-box-flex:0;-ms-flex:0 0 180px;flex:0 0 180px;width:180px;max-width:180px}.next-col-fixed-10{-webkit-box-flex:0;-ms-flex:0 0 200px;flex:0 0 200px;width:200px;max-width:200px}.next-col-fixed-11{-webkit-box-flex:0;-ms-flex:0 0 220px;flex:0 0 220px;width:220px;max-width:220px}.next-col-fixed-12{-webkit-box-flex:0;-ms-flex:0 0 240px;flex:0 0 240px;width:240px;max-width:240px}.next-col-fixed-13{-webkit-box-flex:0;-ms-flex:0 0 260px;flex:0 0 260px;width:260px;max-width:260px}.next-col-fixed-14{-webkit-box-flex:0;-ms-flex:0 0 280px;flex:0 0 280px;width:280px;max-width:280px}.next-col-fixed-15{-webkit-box-flex:0;-ms-flex:0 0 300px;flex:0 0 300px;width:300px;max-width:300px}.next-col-fixed-16{-webkit-box-flex:0;-ms-flex:0 0 320px;flex:0 0 320px;width:320px;max-width:320px}.next-col-fixed-17{-webkit-box-flex:0;-ms-flex:0 0 340px;flex:0 0 340px;width:340px;max-width:340px}.next-col-fixed-18{-webkit-box-flex:0;-ms-flex:0 0 360px;flex:0 0 360px;width:360px;max-width:360px}.next-col-fixed-19{-webkit-box-flex:0;-ms-flex:0 0 380px;flex:0 0 380px;width:380px;max-width:380px}.next-col-fixed-20{-webkit-box-flex:0;-ms-flex:0 0 400px;flex:0 0 400px;width:400px;max-width:400px}.next-col-fixed-21{-webkit-box-flex:0;-ms-flex:0 0 420px;flex:0 0 420px;width:420px;max-width:420px}.next-col-fixed-22{-webkit-box-flex:0;-ms-flex:0 0 440px;flex:0 0 440px;width:440px;max-width:440px}.next-col-fixed-23{-webkit-box-flex:0;-ms-flex:0 0 460px;flex:0 0 460px;width:460px;max-width:460px}.next-col-fixed-24{-webkit-box-flex:0;-ms-flex:0 0 480px;flex:0 0 480px;width:480px;max-width:480px}.next-col-fixed-25{-webkit-box-flex:0;-ms-flex:0 0 500px;flex:0 0 500px;width:500px;max-width:500px}.next-col-fixed-26{-webkit-box-flex:0;-ms-flex:0 0 520px;flex:0 0 520px;width:520px;max-width:520px}.next-col-fixed-27{-webkit-box-flex:0;-ms-flex:0 0 540px;flex:0 0 540px;width:540px;max-width:540px}.next-col-fixed-28{-webkit-box-flex:0;-ms-flex:0 0 560px;flex:0 0 560px;width:560px;max-width:560px}.next-col-fixed-29{-webkit-box-flex:0;-ms-flex:0 0 580px;flex:0 0 580px;width:580px;max-width:580px}.next-col-fixed-30{-webkit-box-flex:0;-ms-flex:0 0 600px;flex:0 0 600px;width:600px;max-width:600px}.next-col-offset-1{margin-left:4.16667%}.next-col-offset-2{margin-left:8.33333%}.next-col-offset-3{margin-left:12.5%}.next-col-offset-4{margin-left:16.66667%}.next-col-offset-5{margin-left:20.83333%}.next-col-offset-6{margin-left:25%}.next-col-offset-7{margin-left:29.16667%}.next-col-offset-8{margin-left:33.33333%}.next-col-offset-9{margin-left:37.5%}.next-col-offset-10{margin-left:41.66667%}.next-col-offset-11{margin-left:45.83333%}.next-col-offset-12{margin-left:50%}.next-col-offset-13{margin-left:54.16667%}.next-col-offset-14{margin-left:58.33333%}.next-col-offset-15{margin-left:62.5%}.next-col-offset-16{margin-left:66.66667%}.next-col-offset-17{margin-left:70.83333%}.next-col-offset-18{margin-left:75%}.next-col-offset-19{margin-left:79.16667%}.next-col-offset-20{margin-left:83.33333%}.next-col-offset-21{margin-left:87.5%}.next-col-offset-22{margin-left:91.66667%}.next-col-offset-23{margin-left:95.83333%}.next-col-offset-24{margin-left:100%}@media (min-width:320px){.next-col-xxs-offset-1{margin-left:4.16667%}.next-col-xxs-offset-2{margin-left:8.33333%}.next-col-xxs-offset-3{margin-left:12.5%}.next-col-xxs-offset-4{margin-left:16.66667%}.next-col-xxs-offset-5{margin-left:20.83333%}.next-col-xxs-offset-6{margin-left:25%}.next-col-xxs-offset-7{margin-left:29.16667%}.next-col-xxs-offset-8{margin-left:33.33333%}.next-col-xxs-offset-9{margin-left:37.5%}.next-col-xxs-offset-10{margin-left:41.66667%}.next-col-xxs-offset-11{margin-left:45.83333%}.next-col-xxs-offset-12{margin-left:50%}.next-col-xxs-offset-13{margin-left:54.16667%}.next-col-xxs-offset-14{margin-left:58.33333%}.next-col-xxs-offset-15{margin-left:62.5%}.next-col-xxs-offset-16{margin-left:66.66667%}.next-col-xxs-offset-17{margin-left:70.83333%}.next-col-xxs-offset-18{margin-left:75%}.next-col-xxs-offset-19{margin-left:79.16667%}.next-col-xxs-offset-20{margin-left:83.33333%}.next-col-xxs-offset-21{margin-left:87.5%}.next-col-xxs-offset-22{margin-left:91.66667%}.next-col-xxs-offset-23{margin-left:95.83333%}.next-col-xxs-offset-24{margin-left:100%}}@media (min-width:480px){.next-col-xs-offset-1{margin-left:4.16667%}.next-col-xs-offset-2{margin-left:8.33333%}.next-col-xs-offset-3{margin-left:12.5%}.next-col-xs-offset-4{margin-left:16.66667%}.next-col-xs-offset-5{margin-left:20.83333%}.next-col-xs-offset-6{margin-left:25%}.next-col-xs-offset-7{margin-left:29.16667%}.next-col-xs-offset-8{margin-left:33.33333%}.next-col-xs-offset-9{margin-left:37.5%}.next-col-xs-offset-10{margin-left:41.66667%}.next-col-xs-offset-11{margin-left:45.83333%}.next-col-xs-offset-12{margin-left:50%}.next-col-xs-offset-13{margin-left:54.16667%}.next-col-xs-offset-14{margin-left:58.33333%}.next-col-xs-offset-15{margin-left:62.5%}.next-col-xs-offset-16{margin-left:66.66667%}.next-col-xs-offset-17{margin-left:70.83333%}.next-col-xs-offset-18{margin-left:75%}.next-col-xs-offset-19{margin-left:79.16667%}.next-col-xs-offset-20{margin-left:83.33333%}.next-col-xs-offset-21{margin-left:87.5%}.next-col-xs-offset-22{margin-left:91.66667%}.next-col-xs-offset-23{margin-left:95.83333%}.next-col-xs-offset-24{margin-left:100%}}@media (min-width:720px){.next-col-s-offset-1{margin-left:4.16667%}.next-col-s-offset-2{margin-left:8.33333%}.next-col-s-offset-3{margin-left:12.5%}.next-col-s-offset-4{margin-left:16.66667%}.next-col-s-offset-5{margin-left:20.83333%}.next-col-s-offset-6{margin-left:25%}.next-col-s-offset-7{margin-left:29.16667%}.next-col-s-offset-8{margin-left:33.33333%}.next-col-s-offset-9{margin-left:37.5%}.next-col-s-offset-10{margin-left:41.66667%}.next-col-s-offset-11{margin-left:45.83333%}.next-col-s-offset-12{margin-left:50%}.next-col-s-offset-13{margin-left:54.16667%}.next-col-s-offset-14{margin-left:58.33333%}.next-col-s-offset-15{margin-left:62.5%}.next-col-s-offset-16{margin-left:66.66667%}.next-col-s-offset-17{margin-left:70.83333%}.next-col-s-offset-18{margin-left:75%}.next-col-s-offset-19{margin-left:79.16667%}.next-col-s-offset-20{margin-left:83.33333%}.next-col-s-offset-21{margin-left:87.5%}.next-col-s-offset-22{margin-left:91.66667%}.next-col-s-offset-23{margin-left:95.83333%}.next-col-s-offset-24{margin-left:100%}}@media (min-width:990px){.next-col-m-offset-1{margin-left:4.16667%}.next-col-m-offset-2{margin-left:8.33333%}.next-col-m-offset-3{margin-left:12.5%}.next-col-m-offset-4{margin-left:16.66667%}.next-col-m-offset-5{margin-left:20.83333%}.next-col-m-offset-6{margin-left:25%}.next-col-m-offset-7{margin-left:29.16667%}.next-col-m-offset-8{margin-left:33.33333%}.next-col-m-offset-9{margin-left:37.5%}.next-col-m-offset-10{margin-left:41.66667%}.next-col-m-offset-11{margin-left:45.83333%}.next-col-m-offset-12{margin-left:50%}.next-col-m-offset-13{margin-left:54.16667%}.next-col-m-offset-14{margin-left:58.33333%}.next-col-m-offset-15{margin-left:62.5%}.next-col-m-offset-16{margin-left:66.66667%}.next-col-m-offset-17{margin-left:70.83333%}.next-col-m-offset-18{margin-left:75%}.next-col-m-offset-19{margin-left:79.16667%}.next-col-m-offset-20{margin-left:83.33333%}.next-col-m-offset-21{margin-left:87.5%}.next-col-m-offset-22{margin-left:91.66667%}.next-col-m-offset-23{margin-left:95.83333%}.next-col-m-offset-24{margin-left:100%}}@media (min-width:1200px){.next-col-l-offset-1{margin-left:4.16667%}.next-col-l-offset-2{margin-left:8.33333%}.next-col-l-offset-3{margin-left:12.5%}.next-col-l-offset-4{margin-left:16.66667%}.next-col-l-offset-5{margin-left:20.83333%}.next-col-l-offset-6{margin-left:25%}.next-col-l-offset-7{margin-left:29.16667%}.next-col-l-offset-8{margin-left:33.33333%}.next-col-l-offset-9{margin-left:37.5%}.next-col-l-offset-10{margin-left:41.66667%}.next-col-l-offset-11{margin-left:45.83333%}.next-col-l-offset-12{margin-left:50%}.next-col-l-offset-13{margin-left:54.16667%}.next-col-l-offset-14{margin-left:58.33333%}.next-col-l-offset-15{margin-left:62.5%}.next-col-l-offset-16{margin-left:66.66667%}.next-col-l-offset-17{margin-left:70.83333%}.next-col-l-offset-18{margin-left:75%}.next-col-l-offset-19{margin-left:79.16667%}.next-col-l-offset-20{margin-left:83.33333%}.next-col-l-offset-21{margin-left:87.5%}.next-col-l-offset-22{margin-left:91.66667%}.next-col-l-offset-23{margin-left:95.83333%}.next-col-l-offset-24{margin-left:100%}}@media (min-width:1500px){.next-col-xl-offset-1{margin-left:4.16667%}.next-col-xl-offset-2{margin-left:8.33333%}.next-col-xl-offset-3{margin-left:12.5%}.next-col-xl-offset-4{margin-left:16.66667%}.next-col-xl-offset-5{margin-left:20.83333%}.next-col-xl-offset-6{margin-left:25%}.next-col-xl-offset-7{margin-left:29.16667%}.next-col-xl-offset-8{margin-left:33.33333%}.next-col-xl-offset-9{margin-left:37.5%}.next-col-xl-offset-10{margin-left:41.66667%}.next-col-xl-offset-11{margin-left:45.83333%}.next-col-xl-offset-12{margin-left:50%}.next-col-xl-offset-13{margin-left:54.16667%}.next-col-xl-offset-14{margin-left:58.33333%}.next-col-xl-offset-15{margin-left:62.5%}.next-col-xl-offset-16{margin-left:66.66667%}.next-col-xl-offset-17{margin-left:70.83333%}.next-col-xl-offset-18{margin-left:75%}.next-col-xl-offset-19{margin-left:79.16667%}.next-col-xl-offset-20{margin-left:83.33333%}.next-col-xl-offset-21{margin-left:87.5%}.next-col-xl-offset-22{margin-left:91.66667%}.next-col-xl-offset-23{margin-left:95.83333%}.next-col-xl-offset-24{margin-left:100%}}.next-col-offset-fixed-1{margin-left:20px}.next-col-offset-fixed-2{margin-left:40px}.next-col-offset-fixed-3{margin-left:60px}.next-col-offset-fixed-4{margin-left:80px}.next-col-offset-fixed-5{margin-left:100px}.next-col-offset-fixed-6{margin-left:120px}.next-col-offset-fixed-7{margin-left:140px}.next-col-offset-fixed-8{margin-left:160px}.next-col-offset-fixed-9{margin-left:180px}.next-col-offset-fixed-10{margin-left:200px}.next-col-offset-fixed-11{margin-left:220px}.next-col-offset-fixed-12{margin-left:240px}.next-col-offset-fixed-13{margin-left:260px}.next-col-offset-fixed-14{margin-left:280px}.next-col-offset-fixed-15{margin-left:300px}.next-col-offset-fixed-16{margin-left:320px}.next-col-offset-fixed-17{margin-left:340px}.next-col-offset-fixed-18{margin-left:360px}.next-col-offset-fixed-19{margin-left:380px}.next-col-offset-fixed-20{margin-left:400px}.next-col-offset-fixed-21{margin-left:420px}.next-col-offset-fixed-22{margin-left:440px}.next-col-offset-fixed-23{margin-left:460px}.next-col-offset-fixed-24{margin-left:480px}.next-col-offset-fixed-25{margin-left:500px}.next-col-offset-fixed-26{margin-left:520px}.next-col-offset-fixed-27{margin-left:540px}.next-col-offset-fixed-28{margin-left:560px}.next-col-offset-fixed-29{margin-left:580px}.next-col-offset-fixed-30{margin-left:600px}.next-col-offset-fixed-xxs-1{margin-left:20px}.next-col-offset-fixed-xxs-2{margin-left:40px}.next-col-offset-fixed-xxs-3{margin-left:60px}.next-col-offset-fixed-xxs-4{margin-left:80px}.next-col-offset-fixed-xxs-5{margin-left:100px}.next-col-offset-fixed-xxs-6{margin-left:120px}.next-col-offset-fixed-xxs-7{margin-left:140px}.next-col-offset-fixed-xxs-8{margin-left:160px}.next-col-offset-fixed-xxs-9{margin-left:180px}.next-col-offset-fixed-xxs-10{margin-left:200px}.next-col-offset-fixed-xxs-11{margin-left:220px}.next-col-offset-fixed-xxs-12{margin-left:240px}.next-col-offset-fixed-xxs-13{margin-left:260px}.next-col-offset-fixed-xxs-14{margin-left:280px}.next-col-offset-fixed-xxs-15{margin-left:300px}.next-col-offset-fixed-xxs-16{margin-left:320px}.next-col-offset-fixed-xxs-17{margin-left:340px}.next-col-offset-fixed-xxs-18{margin-left:360px}.next-col-offset-fixed-xxs-19{margin-left:380px}.next-col-offset-fixed-xxs-20{margin-left:400px}.next-col-offset-fixed-xxs-21{margin-left:420px}.next-col-offset-fixed-xxs-22{margin-left:440px}.next-col-offset-fixed-xxs-23{margin-left:460px}.next-col-offset-fixed-xxs-24{margin-left:480px}.next-col-offset-fixed-xxs-25{margin-left:500px}.next-col-offset-fixed-xxs-26{margin-left:520px}.next-col-offset-fixed-xxs-27{margin-left:540px}.next-col-offset-fixed-xxs-28{margin-left:560px}.next-col-offset-fixed-xxs-29{margin-left:580px}.next-col-offset-fixed-xxs-30{margin-left:600px}.next-col-offset-fixed-xs-1{margin-left:20px}.next-col-offset-fixed-xs-2{margin-left:40px}.next-col-offset-fixed-xs-3{margin-left:60px}.next-col-offset-fixed-xs-4{margin-left:80px}.next-col-offset-fixed-xs-5{margin-left:100px}.next-col-offset-fixed-xs-6{margin-left:120px}.next-col-offset-fixed-xs-7{margin-left:140px}.next-col-offset-fixed-xs-8{margin-left:160px}.next-col-offset-fixed-xs-9{margin-left:180px}.next-col-offset-fixed-xs-10{margin-left:200px}.next-col-offset-fixed-xs-11{margin-left:220px}.next-col-offset-fixed-xs-12{margin-left:240px}.next-col-offset-fixed-xs-13{margin-left:260px}.next-col-offset-fixed-xs-14{margin-left:280px}.next-col-offset-fixed-xs-15{margin-left:300px}.next-col-offset-fixed-xs-16{margin-left:320px}.next-col-offset-fixed-xs-17{margin-left:340px}.next-col-offset-fixed-xs-18{margin-left:360px}.next-col-offset-fixed-xs-19{margin-left:380px}.next-col-offset-fixed-xs-20{margin-left:400px}.next-col-offset-fixed-xs-21{margin-left:420px}.next-col-offset-fixed-xs-22{margin-left:440px}.next-col-offset-fixed-xs-23{margin-left:460px}.next-col-offset-fixed-xs-24{margin-left:480px}.next-col-offset-fixed-xs-25{margin-left:500px}.next-col-offset-fixed-xs-26{margin-left:520px}.next-col-offset-fixed-xs-27{margin-left:540px}.next-col-offset-fixed-xs-28{margin-left:560px}.next-col-offset-fixed-xs-29{margin-left:580px}.next-col-offset-fixed-xs-30{margin-left:600px}.next-col-offset-fixed-s-1{margin-left:20px}.next-col-offset-fixed-s-2{margin-left:40px}.next-col-offset-fixed-s-3{margin-left:60px}.next-col-offset-fixed-s-4{margin-left:80px}.next-col-offset-fixed-s-5{margin-left:100px}.next-col-offset-fixed-s-6{margin-left:120px}.next-col-offset-fixed-s-7{margin-left:140px}.next-col-offset-fixed-s-8{margin-left:160px}.next-col-offset-fixed-s-9{margin-left:180px}.next-col-offset-fixed-s-10{margin-left:200px}.next-col-offset-fixed-s-11{margin-left:220px}.next-col-offset-fixed-s-12{margin-left:240px}.next-col-offset-fixed-s-13{margin-left:260px}.next-col-offset-fixed-s-14{margin-left:280px}.next-col-offset-fixed-s-15{margin-left:300px}.next-col-offset-fixed-s-16{margin-left:320px}.next-col-offset-fixed-s-17{margin-left:340px}.next-col-offset-fixed-s-18{margin-left:360px}.next-col-offset-fixed-s-19{margin-left:380px}.next-col-offset-fixed-s-20{margin-left:400px}.next-col-offset-fixed-s-21{margin-left:420px}.next-col-offset-fixed-s-22{margin-left:440px}.next-col-offset-fixed-s-23{margin-left:460px}.next-col-offset-fixed-s-24{margin-left:480px}.next-col-offset-fixed-s-25{margin-left:500px}.next-col-offset-fixed-s-26{margin-left:520px}.next-col-offset-fixed-s-27{margin-left:540px}.next-col-offset-fixed-s-28{margin-left:560px}.next-col-offset-fixed-s-29{margin-left:580px}.next-col-offset-fixed-s-30{margin-left:600px}.next-col-offset-fixed-m-1{margin-left:20px}.next-col-offset-fixed-m-2{margin-left:40px}.next-col-offset-fixed-m-3{margin-left:60px}.next-col-offset-fixed-m-4{margin-left:80px}.next-col-offset-fixed-m-5{margin-left:100px}.next-col-offset-fixed-m-6{margin-left:120px}.next-col-offset-fixed-m-7{margin-left:140px}.next-col-offset-fixed-m-8{margin-left:160px}.next-col-offset-fixed-m-9{margin-left:180px}.next-col-offset-fixed-m-10{margin-left:200px}.next-col-offset-fixed-m-11{margin-left:220px}.next-col-offset-fixed-m-12{margin-left:240px}.next-col-offset-fixed-m-13{margin-left:260px}.next-col-offset-fixed-m-14{margin-left:280px}.next-col-offset-fixed-m-15{margin-left:300px}.next-col-offset-fixed-m-16{margin-left:320px}.next-col-offset-fixed-m-17{margin-left:340px}.next-col-offset-fixed-m-18{margin-left:360px}.next-col-offset-fixed-m-19{margin-left:380px}.next-col-offset-fixed-m-20{margin-left:400px}.next-col-offset-fixed-m-21{margin-left:420px}.next-col-offset-fixed-m-22{margin-left:440px}.next-col-offset-fixed-m-23{margin-left:460px}.next-col-offset-fixed-m-24{margin-left:480px}.next-col-offset-fixed-m-25{margin-left:500px}.next-col-offset-fixed-m-26{margin-left:520px}.next-col-offset-fixed-m-27{margin-left:540px}.next-col-offset-fixed-m-28{margin-left:560px}.next-col-offset-fixed-m-29{margin-left:580px}.next-col-offset-fixed-m-30{margin-left:600px}.next-col-offset-fixed-l-1{margin-left:20px}.next-col-offset-fixed-l-2{margin-left:40px}.next-col-offset-fixed-l-3{margin-left:60px}.next-col-offset-fixed-l-4{margin-left:80px}.next-col-offset-fixed-l-5{margin-left:100px}.next-col-offset-fixed-l-6{margin-left:120px}.next-col-offset-fixed-l-7{margin-left:140px}.next-col-offset-fixed-l-8{margin-left:160px}.next-col-offset-fixed-l-9{margin-left:180px}.next-col-offset-fixed-l-10{margin-left:200px}.next-col-offset-fixed-l-11{margin-left:220px}.next-col-offset-fixed-l-12{margin-left:240px}.next-col-offset-fixed-l-13{margin-left:260px}.next-col-offset-fixed-l-14{margin-left:280px}.next-col-offset-fixed-l-15{margin-left:300px}.next-col-offset-fixed-l-16{margin-left:320px}.next-col-offset-fixed-l-17{margin-left:340px}.next-col-offset-fixed-l-18{margin-left:360px}.next-col-offset-fixed-l-19{margin-left:380px}.next-col-offset-fixed-l-20{margin-left:400px}.next-col-offset-fixed-l-21{margin-left:420px}.next-col-offset-fixed-l-22{margin-left:440px}.next-col-offset-fixed-l-23{margin-left:460px}.next-col-offset-fixed-l-24{margin-left:480px}.next-col-offset-fixed-l-25{margin-left:500px}.next-col-offset-fixed-l-26{margin-left:520px}.next-col-offset-fixed-l-27{margin-left:540px}.next-col-offset-fixed-l-28{margin-left:560px}.next-col-offset-fixed-l-29{margin-left:580px}.next-col-offset-fixed-l-30{margin-left:600px}.next-col-offset-fixed-xl-1{margin-left:20px}.next-col-offset-fixed-xl-2{margin-left:40px}.next-col-offset-fixed-xl-3{margin-left:60px}.next-col-offset-fixed-xl-4{margin-left:80px}.next-col-offset-fixed-xl-5{margin-left:100px}.next-col-offset-fixed-xl-6{margin-left:120px}.next-col-offset-fixed-xl-7{margin-left:140px}.next-col-offset-fixed-xl-8{margin-left:160px}.next-col-offset-fixed-xl-9{margin-left:180px}.next-col-offset-fixed-xl-10{margin-left:200px}.next-col-offset-fixed-xl-11{margin-left:220px}.next-col-offset-fixed-xl-12{margin-left:240px}.next-col-offset-fixed-xl-13{margin-left:260px}.next-col-offset-fixed-xl-14{margin-left:280px}.next-col-offset-fixed-xl-15{margin-left:300px}.next-col-offset-fixed-xl-16{margin-left:320px}.next-col-offset-fixed-xl-17{margin-left:340px}.next-col-offset-fixed-xl-18{margin-left:360px}.next-col-offset-fixed-xl-19{margin-left:380px}.next-col-offset-fixed-xl-20{margin-left:400px}.next-col-offset-fixed-xl-21{margin-left:420px}.next-col-offset-fixed-xl-22{margin-left:440px}.next-col-offset-fixed-xl-23{margin-left:460px}.next-col-offset-fixed-xl-24{margin-left:480px}.next-col-offset-fixed-xl-25{margin-left:500px}.next-col-offset-fixed-xl-26{margin-left:520px}.next-col-offset-fixed-xl-27{margin-left:540px}.next-col-offset-fixed-xl-28{margin-left:560px}.next-col-offset-fixed-xl-29{margin-left:580px}.next-col-offset-fixed-xl-30{margin-left:600px}.next-col.next-col-hidden{display:none}@media (min-width:320px) and (max-width:479px){.next-col.next-col-xxs-hidden{display:none}}@media (min-width:480px) and (max-width:719px){.next-col.next-col-xs-hidden{display:none}}@media (min-width:720px) and (max-width:989px){.next-col.next-col-s-hidden{display:none}}@media (min-width:990px) and (max-width:1199px){.next-col.next-col-m-hidden{display:none}}@media (min-width:1200px) and (max-width:1499px){.next-col.next-col-l-hidden{display:none}}@media (min-width:1500px){.next-col.next-col-xl-hidden{display:none}}.next-row.next-row-hidden{display:none}@media (min-width:320px) and (max-width:479px){.next-row.next-row-xxs-hidden{display:none}}@media (min-width:480px) and (max-width:719px){.next-row.next-row-xs-hidden{display:none}}@media (min-width:720px) and (max-width:989px){.next-row.next-row-s-hidden{display:none}}@media (min-width:990px) and (max-width:1199px){.next-row.next-row-m-hidden{display:none}}@media (min-width:1200px) and (max-width:1499px){.next-row.next-row-l-hidden{display:none}}@media (min-width:1500px){.next-row.next-row-xl-hidden{display:none}}.next-col-offset-1[dir=rtl]{margin-right:4.16667%;margin-left:auto}.next-col-offset-2[dir=rtl]{margin-right:8.33333%;margin-left:auto}.next-col-offset-3[dir=rtl]{margin-right:12.5%;margin-left:auto}.next-col-offset-4[dir=rtl]{margin-right:16.66667%;margin-left:auto}.next-col-offset-5[dir=rtl]{margin-right:20.83333%;margin-left:auto}.next-col-offset-6[dir=rtl]{margin-right:25%;margin-left:auto}.next-col-offset-7[dir=rtl]{margin-right:29.16667%;margin-left:auto}.next-col-offset-8[dir=rtl]{margin-right:33.33333%;margin-left:auto}.next-col-offset-9[dir=rtl]{margin-right:37.5%;margin-left:auto}.next-col-offset-10[dir=rtl]{margin-right:41.66667%;margin-left:auto}.next-col-offset-11[dir=rtl]{margin-right:45.83333%;margin-left:auto}.next-col-offset-12[dir=rtl]{margin-right:50%;margin-left:auto}.next-col-offset-13[dir=rtl]{margin-right:54.16667%;margin-left:auto}.next-col-offset-14[dir=rtl]{margin-right:58.33333%;margin-left:auto}.next-col-offset-15[dir=rtl]{margin-right:62.5%;margin-left:auto}.next-col-offset-16[dir=rtl]{margin-right:66.66667%;margin-left:auto}.next-col-offset-17[dir=rtl]{margin-right:70.83333%;margin-left:auto}.next-col-offset-18[dir=rtl]{margin-right:75%;margin-left:auto}.next-col-offset-19[dir=rtl]{margin-right:79.16667%;margin-left:auto}.next-col-offset-20[dir=rtl]{margin-right:83.33333%;margin-left:auto}.next-col-offset-21[dir=rtl]{margin-right:87.5%;margin-left:auto}.next-col-offset-22[dir=rtl]{margin-right:91.66667%;margin-left:auto}.next-col-offset-23[dir=rtl]{margin-right:95.83333%;margin-left:auto}.next-col-offset-24[dir=rtl]{margin-right:100%;margin-left:auto}@media (min-width:320px){.next-col-xxs-offset-1[dir=rtl]{margin-right:4.16667%;margin-left:auto}.next-col-xxs-offset-2[dir=rtl]{margin-right:8.33333%;margin-left:auto}.next-col-xxs-offset-3[dir=rtl]{margin-right:12.5%;margin-left:auto}.next-col-xxs-offset-4[dir=rtl]{margin-right:16.66667%;margin-left:auto}.next-col-xxs-offset-5[dir=rtl]{margin-right:20.83333%;margin-left:auto}.next-col-xxs-offset-6[dir=rtl]{margin-right:25%;margin-left:auto}.next-col-xxs-offset-7[dir=rtl]{margin-right:29.16667%;margin-left:auto}.next-col-xxs-offset-8[dir=rtl]{margin-right:33.33333%;margin-left:auto}.next-col-xxs-offset-9[dir=rtl]{margin-right:37.5%;margin-left:auto}.next-col-xxs-offset-10[dir=rtl]{margin-right:41.66667%;margin-left:auto}.next-col-xxs-offset-11[dir=rtl]{margin-right:45.83333%;margin-left:auto}.next-col-xxs-offset-12[dir=rtl]{margin-right:50%;margin-left:auto}.next-col-xxs-offset-13[dir=rtl]{margin-right:54.16667%;margin-left:auto}.next-col-xxs-offset-14[dir=rtl]{margin-right:58.33333%;margin-left:auto}.next-col-xxs-offset-15[dir=rtl]{margin-right:62.5%;margin-left:auto}.next-col-xxs-offset-16[dir=rtl]{margin-right:66.66667%;margin-left:auto}.next-col-xxs-offset-17[dir=rtl]{margin-right:70.83333%;margin-left:auto}.next-col-xxs-offset-18[dir=rtl]{margin-right:75%;margin-left:auto}.next-col-xxs-offset-19[dir=rtl]{margin-right:79.16667%;margin-left:auto}.next-col-xxs-offset-20[dir=rtl]{margin-right:83.33333%;margin-left:auto}.next-col-xxs-offset-21[dir=rtl]{margin-right:87.5%;margin-left:auto}.next-col-xxs-offset-22[dir=rtl]{margin-right:91.66667%;margin-left:auto}.next-col-xxs-offset-23[dir=rtl]{margin-right:95.83333%;margin-left:auto}.next-col-xxs-offset-24[dir=rtl]{margin-right:100%;margin-left:auto}}@media (min-width:480px){.next-col-xs-offset-1[dir=rtl]{margin-right:4.16667%;margin-left:auto}.next-col-xs-offset-2[dir=rtl]{margin-right:8.33333%;margin-left:auto}.next-col-xs-offset-3[dir=rtl]{margin-right:12.5%;margin-left:auto}.next-col-xs-offset-4[dir=rtl]{margin-right:16.66667%;margin-left:auto}.next-col-xs-offset-5[dir=rtl]{margin-right:20.83333%;margin-left:auto}.next-col-xs-offset-6[dir=rtl]{margin-right:25%;margin-left:auto}.next-col-xs-offset-7[dir=rtl]{margin-right:29.16667%;margin-left:auto}.next-col-xs-offset-8[dir=rtl]{margin-right:33.33333%;margin-left:auto}.next-col-xs-offset-9[dir=rtl]{margin-right:37.5%;margin-left:auto}.next-col-xs-offset-10[dir=rtl]{margin-right:41.66667%;margin-left:auto}.next-col-xs-offset-11[dir=rtl]{margin-right:45.83333%;margin-left:auto}.next-col-xs-offset-12[dir=rtl]{margin-right:50%;margin-left:auto}.next-col-xs-offset-13[dir=rtl]{margin-right:54.16667%;margin-left:auto}.next-col-xs-offset-14[dir=rtl]{margin-right:58.33333%;margin-left:auto}.next-col-xs-offset-15[dir=rtl]{margin-right:62.5%;margin-left:auto}.next-col-xs-offset-16[dir=rtl]{margin-right:66.66667%;margin-left:auto}.next-col-xs-offset-17[dir=rtl]{margin-right:70.83333%;margin-left:auto}.next-col-xs-offset-18[dir=rtl]{margin-right:75%;margin-left:auto}.next-col-xs-offset-19[dir=rtl]{margin-right:79.16667%;margin-left:auto}.next-col-xs-offset-20[dir=rtl]{margin-right:83.33333%;margin-left:auto}.next-col-xs-offset-21[dir=rtl]{margin-right:87.5%;margin-left:auto}.next-col-xs-offset-22[dir=rtl]{margin-right:91.66667%;margin-left:auto}.next-col-xs-offset-23[dir=rtl]{margin-right:95.83333%;margin-left:auto}.next-col-xs-offset-24[dir=rtl]{margin-right:100%;margin-left:auto}}@media (min-width:720px){.next-col-s-offset-1[dir=rtl]{margin-right:4.16667%;margin-left:auto}.next-col-s-offset-2[dir=rtl]{margin-right:8.33333%;margin-left:auto}.next-col-s-offset-3[dir=rtl]{margin-right:12.5%;margin-left:auto}.next-col-s-offset-4[dir=rtl]{margin-right:16.66667%;margin-left:auto}.next-col-s-offset-5[dir=rtl]{margin-right:20.83333%;margin-left:auto}.next-col-s-offset-6[dir=rtl]{margin-right:25%;margin-left:auto}.next-col-s-offset-7[dir=rtl]{margin-right:29.16667%;margin-left:auto}.next-col-s-offset-8[dir=rtl]{margin-right:33.33333%;margin-left:auto}.next-col-s-offset-9[dir=rtl]{margin-right:37.5%;margin-left:auto}.next-col-s-offset-10[dir=rtl]{margin-right:41.66667%;margin-left:auto}.next-col-s-offset-11[dir=rtl]{margin-right:45.83333%;margin-left:auto}.next-col-s-offset-12[dir=rtl]{margin-right:50%;margin-left:auto}.next-col-s-offset-13[dir=rtl]{margin-right:54.16667%;margin-left:auto}.next-col-s-offset-14[dir=rtl]{margin-right:58.33333%;margin-left:auto}.next-col-s-offset-15[dir=rtl]{margin-right:62.5%;margin-left:auto}.next-col-s-offset-16[dir=rtl]{margin-right:66.66667%;margin-left:auto}.next-col-s-offset-17[dir=rtl]{margin-right:70.83333%;margin-left:auto}.next-col-s-offset-18[dir=rtl]{margin-right:75%;margin-left:auto}.next-col-s-offset-19[dir=rtl]{margin-right:79.16667%;margin-left:auto}.next-col-s-offset-20[dir=rtl]{margin-right:83.33333%;margin-left:auto}.next-col-s-offset-21[dir=rtl]{margin-right:87.5%;margin-left:auto}.next-col-s-offset-22[dir=rtl]{margin-right:91.66667%;margin-left:auto}.next-col-s-offset-23[dir=rtl]{margin-right:95.83333%;margin-left:auto}.next-col-s-offset-24[dir=rtl]{margin-right:100%;margin-left:auto}}@media (min-width:990px){.next-col-m-offset-1[dir=rtl]{margin-right:4.16667%;margin-left:auto}.next-col-m-offset-2[dir=rtl]{margin-right:8.33333%;margin-left:auto}.next-col-m-offset-3[dir=rtl]{margin-right:12.5%;margin-left:auto}.next-col-m-offset-4[dir=rtl]{margin-right:16.66667%;margin-left:auto}.next-col-m-offset-5[dir=rtl]{margin-right:20.83333%;margin-left:auto}.next-col-m-offset-6[dir=rtl]{margin-right:25%;margin-left:auto}.next-col-m-offset-7[dir=rtl]{margin-right:29.16667%;margin-left:auto}.next-col-m-offset-8[dir=rtl]{margin-right:33.33333%;margin-left:auto}.next-col-m-offset-9[dir=rtl]{margin-right:37.5%;margin-left:auto}.next-col-m-offset-10[dir=rtl]{margin-right:41.66667%;margin-left:auto}.next-col-m-offset-11[dir=rtl]{margin-right:45.83333%;margin-left:auto}.next-col-m-offset-12[dir=rtl]{margin-right:50%;margin-left:auto}.next-col-m-offset-13[dir=rtl]{margin-right:54.16667%;margin-left:auto}.next-col-m-offset-14[dir=rtl]{margin-right:58.33333%;margin-left:auto}.next-col-m-offset-15[dir=rtl]{margin-right:62.5%;margin-left:auto}.next-col-m-offset-16[dir=rtl]{margin-right:66.66667%;margin-left:auto}.next-col-m-offset-17[dir=rtl]{margin-right:70.83333%;margin-left:auto}.next-col-m-offset-18[dir=rtl]{margin-right:75%;margin-left:auto}.next-col-m-offset-19[dir=rtl]{margin-right:79.16667%;margin-left:auto}.next-col-m-offset-20[dir=rtl]{margin-right:83.33333%;margin-left:auto}.next-col-m-offset-21[dir=rtl]{margin-right:87.5%;margin-left:auto}.next-col-m-offset-22[dir=rtl]{margin-right:91.66667%;margin-left:auto}.next-col-m-offset-23[dir=rtl]{margin-right:95.83333%;margin-left:auto}.next-col-m-offset-24[dir=rtl]{margin-right:100%;margin-left:auto}}@media (min-width:1200px){.next-col-l-offset-1[dir=rtl]{margin-right:4.16667%;margin-left:auto}.next-col-l-offset-2[dir=rtl]{margin-right:8.33333%;margin-left:auto}.next-col-l-offset-3[dir=rtl]{margin-right:12.5%;margin-left:auto}.next-col-l-offset-4[dir=rtl]{margin-right:16.66667%;margin-left:auto}.next-col-l-offset-5[dir=rtl]{margin-right:20.83333%;margin-left:auto}.next-col-l-offset-6[dir=rtl]{margin-right:25%;margin-left:auto}.next-col-l-offset-7[dir=rtl]{margin-right:29.16667%;margin-left:auto}.next-col-l-offset-8[dir=rtl]{margin-right:33.33333%;margin-left:auto}.next-col-l-offset-9[dir=rtl]{margin-right:37.5%;margin-left:auto}.next-col-l-offset-10[dir=rtl]{margin-right:41.66667%;margin-left:auto}.next-col-l-offset-11[dir=rtl]{margin-right:45.83333%;margin-left:auto}.next-col-l-offset-12[dir=rtl]{margin-right:50%;margin-left:auto}.next-col-l-offset-13[dir=rtl]{margin-right:54.16667%;margin-left:auto}.next-col-l-offset-14[dir=rtl]{margin-right:58.33333%;margin-left:auto}.next-col-l-offset-15[dir=rtl]{margin-right:62.5%;margin-left:auto}.next-col-l-offset-16[dir=rtl]{margin-right:66.66667%;margin-left:auto}.next-col-l-offset-17[dir=rtl]{margin-right:70.83333%;margin-left:auto}.next-col-l-offset-18[dir=rtl]{margin-right:75%;margin-left:auto}.next-col-l-offset-19[dir=rtl]{margin-right:79.16667%;margin-left:auto}.next-col-l-offset-20[dir=rtl]{margin-right:83.33333%;margin-left:auto}.next-col-l-offset-21[dir=rtl]{margin-right:87.5%;margin-left:auto}.next-col-l-offset-22[dir=rtl]{margin-right:91.66667%;margin-left:auto}.next-col-l-offset-23[dir=rtl]{margin-right:95.83333%;margin-left:auto}.next-col-l-offset-24[dir=rtl]{margin-right:100%;margin-left:auto}}@media (min-width:1500px){.next-col-xl-offset-1[dir=rtl]{margin-right:4.16667%;margin-left:auto}.next-col-xl-offset-2[dir=rtl]{margin-right:8.33333%;margin-left:auto}.next-col-xl-offset-3[dir=rtl]{margin-right:12.5%;margin-left:auto}.next-col-xl-offset-4[dir=rtl]{margin-right:16.66667%;margin-left:auto}.next-col-xl-offset-5[dir=rtl]{margin-right:20.83333%;margin-left:auto}.next-col-xl-offset-6[dir=rtl]{margin-right:25%;margin-left:auto}.next-col-xl-offset-7[dir=rtl]{margin-right:29.16667%;margin-left:auto}.next-col-xl-offset-8[dir=rtl]{margin-right:33.33333%;margin-left:auto}.next-col-xl-offset-9[dir=rtl]{margin-right:37.5%;margin-left:auto}.next-col-xl-offset-10[dir=rtl]{margin-right:41.66667%;margin-left:auto}.next-col-xl-offset-11[dir=rtl]{margin-right:45.83333%;margin-left:auto}.next-col-xl-offset-12[dir=rtl]{margin-right:50%;margin-left:auto}.next-col-xl-offset-13[dir=rtl]{margin-right:54.16667%;margin-left:auto}.next-col-xl-offset-14[dir=rtl]{margin-right:58.33333%;margin-left:auto}.next-col-xl-offset-15[dir=rtl]{margin-right:62.5%;margin-left:auto}.next-col-xl-offset-16[dir=rtl]{margin-right:66.66667%;margin-left:auto}.next-col-xl-offset-17[dir=rtl]{margin-right:70.83333%;margin-left:auto}.next-col-xl-offset-18[dir=rtl]{margin-right:75%;margin-left:auto}.next-col-xl-offset-19[dir=rtl]{margin-right:79.16667%;margin-left:auto}.next-col-xl-offset-20[dir=rtl]{margin-right:83.33333%;margin-left:auto}.next-col-xl-offset-21[dir=rtl]{margin-right:87.5%;margin-left:auto}.next-col-xl-offset-22[dir=rtl]{margin-right:91.66667%;margin-left:auto}.next-col-xl-offset-23[dir=rtl]{margin-right:95.83333%;margin-left:auto}.next-col-xl-offset-24[dir=rtl]{margin-right:100%;margin-left:auto}}.next-col-offset-fixed-1[dir=rtl]{margin-right:20px;margin-left:auto}.next-col-offset-fixed-2[dir=rtl]{margin-right:40px;margin-left:auto}.next-col-offset-fixed-3[dir=rtl]{margin-right:60px;margin-left:auto}.next-col-offset-fixed-4[dir=rtl]{margin-right:80px;margin-left:auto}.next-col-offset-fixed-5[dir=rtl]{margin-right:100px;margin-left:auto}.next-col-offset-fixed-6[dir=rtl]{margin-right:120px;margin-left:auto}.next-col-offset-fixed-7[dir=rtl]{margin-right:140px;margin-left:auto}.next-col-offset-fixed-8[dir=rtl]{margin-right:160px;margin-left:auto}.next-col-offset-fixed-9[dir=rtl]{margin-right:180px;margin-left:auto}.next-col-offset-fixed-10[dir=rtl]{margin-right:200px;margin-left:auto}.next-col-offset-fixed-11[dir=rtl]{margin-right:220px;margin-left:auto}.next-col-offset-fixed-12[dir=rtl]{margin-right:240px;margin-left:auto}.next-col-offset-fixed-13[dir=rtl]{margin-right:260px;margin-left:auto}.next-col-offset-fixed-14[dir=rtl]{margin-right:280px;margin-left:auto}.next-col-offset-fixed-15[dir=rtl]{margin-right:300px;margin-left:auto}.next-col-offset-fixed-16[dir=rtl]{margin-right:320px;margin-left:auto}.next-col-offset-fixed-17[dir=rtl]{margin-right:340px;margin-left:auto}.next-col-offset-fixed-18[dir=rtl]{margin-right:360px;margin-left:auto}.next-col-offset-fixed-19[dir=rtl]{margin-right:380px;margin-left:auto}.next-col-offset-fixed-20[dir=rtl]{margin-right:400px;margin-left:auto}.next-col-offset-fixed-21[dir=rtl]{margin-right:420px;margin-left:auto}.next-col-offset-fixed-22[dir=rtl]{margin-right:440px;margin-left:auto}.next-col-offset-fixed-23[dir=rtl]{margin-right:460px;margin-left:auto}.next-col-offset-fixed-24[dir=rtl]{margin-right:480px;margin-left:auto}.next-col-offset-fixed-25[dir=rtl]{margin-right:500px;margin-left:auto}.next-col-offset-fixed-26[dir=rtl]{margin-right:520px;margin-left:auto}.next-col-offset-fixed-27[dir=rtl]{margin-right:540px;margin-left:auto}.next-col-offset-fixed-28[dir=rtl]{margin-right:560px;margin-left:auto}.next-col-offset-fixed-29[dir=rtl]{margin-right:580px;margin-left:auto}.next-col-offset-fixed-30[dir=rtl]{margin-right:600px;margin-left:auto}.next-col-offset-fixed-xxs-1[dir=rtl]{margin-right:20px;margin-left:auto}.next-col-offset-fixed-xxs-2[dir=rtl]{margin-right:40px;margin-left:auto}.next-col-offset-fixed-xxs-3[dir=rtl]{margin-right:60px;margin-left:auto}.next-col-offset-fixed-xxs-4[dir=rtl]{margin-right:80px;margin-left:auto}.next-col-offset-fixed-xxs-5[dir=rtl]{margin-right:100px;margin-left:auto}.next-col-offset-fixed-xxs-6[dir=rtl]{margin-right:120px;margin-left:auto}.next-col-offset-fixed-xxs-7[dir=rtl]{margin-right:140px;margin-left:auto}.next-col-offset-fixed-xxs-8[dir=rtl]{margin-right:160px;margin-left:auto}.next-col-offset-fixed-xxs-9[dir=rtl]{margin-right:180px;margin-left:auto}.next-col-offset-fixed-xxs-10[dir=rtl]{margin-right:200px;margin-left:auto}.next-col-offset-fixed-xxs-11[dir=rtl]{margin-right:220px;margin-left:auto}.next-col-offset-fixed-xxs-12[dir=rtl]{margin-right:240px;margin-left:auto}.next-col-offset-fixed-xxs-13[dir=rtl]{margin-right:260px;margin-left:auto}.next-col-offset-fixed-xxs-14[dir=rtl]{margin-right:280px;margin-left:auto}.next-col-offset-fixed-xxs-15[dir=rtl]{margin-right:300px;margin-left:auto}.next-col-offset-fixed-xxs-16[dir=rtl]{margin-right:320px;margin-left:auto}.next-col-offset-fixed-xxs-17[dir=rtl]{margin-right:340px;margin-left:auto}.next-col-offset-fixed-xxs-18[dir=rtl]{margin-right:360px;margin-left:auto}.next-col-offset-fixed-xxs-19[dir=rtl]{margin-right:380px;margin-left:auto}.next-col-offset-fixed-xxs-20[dir=rtl]{margin-right:400px;margin-left:auto}.next-col-offset-fixed-xxs-21[dir=rtl]{margin-right:420px;margin-left:auto}.next-col-offset-fixed-xxs-22[dir=rtl]{margin-right:440px;margin-left:auto}.next-col-offset-fixed-xxs-23[dir=rtl]{margin-right:460px;margin-left:auto}.next-col-offset-fixed-xxs-24[dir=rtl]{margin-right:480px;margin-left:auto}.next-col-offset-fixed-xxs-25[dir=rtl]{margin-right:500px;margin-left:auto}.next-col-offset-fixed-xxs-26[dir=rtl]{margin-right:520px;margin-left:auto}.next-col-offset-fixed-xxs-27[dir=rtl]{margin-right:540px;margin-left:auto}.next-col-offset-fixed-xxs-28[dir=rtl]{margin-right:560px;margin-left:auto}.next-col-offset-fixed-xxs-29[dir=rtl]{margin-right:580px;margin-left:auto}.next-col-offset-fixed-xxs-30[dir=rtl]{margin-right:600px;margin-left:auto}.next-col-offset-fixed-xs-1[dir=rtl]{margin-right:20px;margin-left:auto}.next-col-offset-fixed-xs-2[dir=rtl]{margin-right:40px;margin-left:auto}.next-col-offset-fixed-xs-3[dir=rtl]{margin-right:60px;margin-left:auto}.next-col-offset-fixed-xs-4[dir=rtl]{margin-right:80px;margin-left:auto}.next-col-offset-fixed-xs-5[dir=rtl]{margin-right:100px;margin-left:auto}.next-col-offset-fixed-xs-6[dir=rtl]{margin-right:120px;margin-left:auto}.next-col-offset-fixed-xs-7[dir=rtl]{margin-right:140px;margin-left:auto}.next-col-offset-fixed-xs-8[dir=rtl]{margin-right:160px;margin-left:auto}.next-col-offset-fixed-xs-9[dir=rtl]{margin-right:180px;margin-left:auto}.next-col-offset-fixed-xs-10[dir=rtl]{margin-right:200px;margin-left:auto}.next-col-offset-fixed-xs-11[dir=rtl]{margin-right:220px;margin-left:auto}.next-col-offset-fixed-xs-12[dir=rtl]{margin-right:240px;margin-left:auto}.next-col-offset-fixed-xs-13[dir=rtl]{margin-right:260px;margin-left:auto}.next-col-offset-fixed-xs-14[dir=rtl]{margin-right:280px;margin-left:auto}.next-col-offset-fixed-xs-15[dir=rtl]{margin-right:300px;margin-left:auto}.next-col-offset-fixed-xs-16[dir=rtl]{margin-right:320px;margin-left:auto}.next-col-offset-fixed-xs-17[dir=rtl]{margin-right:340px;margin-left:auto}.next-col-offset-fixed-xs-18[dir=rtl]{margin-right:360px;margin-left:auto}.next-col-offset-fixed-xs-19[dir=rtl]{margin-right:380px;margin-left:auto}.next-col-offset-fixed-xs-20[dir=rtl]{margin-right:400px;margin-left:auto}.next-col-offset-fixed-xs-21[dir=rtl]{margin-right:420px;margin-left:auto}.next-col-offset-fixed-xs-22[dir=rtl]{margin-right:440px;margin-left:auto}.next-col-offset-fixed-xs-23[dir=rtl]{margin-right:460px;margin-left:auto}.next-col-offset-fixed-xs-24[dir=rtl]{margin-right:480px;margin-left:auto}.next-col-offset-fixed-xs-25[dir=rtl]{margin-right:500px;margin-left:auto}.next-col-offset-fixed-xs-26[dir=rtl]{margin-right:520px;margin-left:auto}.next-col-offset-fixed-xs-27[dir=rtl]{margin-right:540px;margin-left:auto}.next-col-offset-fixed-xs-28[dir=rtl]{margin-right:560px;margin-left:auto}.next-col-offset-fixed-xs-29[dir=rtl]{margin-right:580px;margin-left:auto}.next-col-offset-fixed-xs-30[dir=rtl]{margin-right:600px;margin-left:auto}.next-col-offset-fixed-s-1[dir=rtl]{margin-right:20px;margin-left:auto}.next-col-offset-fixed-s-2[dir=rtl]{margin-right:40px;margin-left:auto}.next-col-offset-fixed-s-3[dir=rtl]{margin-right:60px;margin-left:auto}.next-col-offset-fixed-s-4[dir=rtl]{margin-right:80px;margin-left:auto}.next-col-offset-fixed-s-5[dir=rtl]{margin-right:100px;margin-left:auto}.next-col-offset-fixed-s-6[dir=rtl]{margin-right:120px;margin-left:auto}.next-col-offset-fixed-s-7[dir=rtl]{margin-right:140px;margin-left:auto}.next-col-offset-fixed-s-8[dir=rtl]{margin-right:160px;margin-left:auto}.next-col-offset-fixed-s-9[dir=rtl]{margin-right:180px;margin-left:auto}.next-col-offset-fixed-s-10[dir=rtl]{margin-right:200px;margin-left:auto}.next-col-offset-fixed-s-11[dir=rtl]{margin-right:220px;margin-left:auto}.next-col-offset-fixed-s-12[dir=rtl]{margin-right:240px;margin-left:auto}.next-col-offset-fixed-s-13[dir=rtl]{margin-right:260px;margin-left:auto}.next-col-offset-fixed-s-14[dir=rtl]{margin-right:280px;margin-left:auto}.next-col-offset-fixed-s-15[dir=rtl]{margin-right:300px;margin-left:auto}.next-col-offset-fixed-s-16[dir=rtl]{margin-right:320px;margin-left:auto}.next-col-offset-fixed-s-17[dir=rtl]{margin-right:340px;margin-left:auto}.next-col-offset-fixed-s-18[dir=rtl]{margin-right:360px;margin-left:auto}.next-col-offset-fixed-s-19[dir=rtl]{margin-right:380px;margin-left:auto}.next-col-offset-fixed-s-20[dir=rtl]{margin-right:400px;margin-left:auto}.next-col-offset-fixed-s-21[dir=rtl]{margin-right:420px;margin-left:auto}.next-col-offset-fixed-s-22[dir=rtl]{margin-right:440px;margin-left:auto}.next-col-offset-fixed-s-23[dir=rtl]{margin-right:460px;margin-left:auto}.next-col-offset-fixed-s-24[dir=rtl]{margin-right:480px;margin-left:auto}.next-col-offset-fixed-s-25[dir=rtl]{margin-right:500px;margin-left:auto}.next-col-offset-fixed-s-26[dir=rtl]{margin-right:520px;margin-left:auto}.next-col-offset-fixed-s-27[dir=rtl]{margin-right:540px;margin-left:auto}.next-col-offset-fixed-s-28[dir=rtl]{margin-right:560px;margin-left:auto}.next-col-offset-fixed-s-29[dir=rtl]{margin-right:580px;margin-left:auto}.next-col-offset-fixed-s-30[dir=rtl]{margin-right:600px;margin-left:auto}.next-col-offset-fixed-m-1[dir=rtl]{margin-right:20px;margin-left:auto}.next-col-offset-fixed-m-2[dir=rtl]{margin-right:40px;margin-left:auto}.next-col-offset-fixed-m-3[dir=rtl]{margin-right:60px;margin-left:auto}.next-col-offset-fixed-m-4[dir=rtl]{margin-right:80px;margin-left:auto}.next-col-offset-fixed-m-5[dir=rtl]{margin-right:100px;margin-left:auto}.next-col-offset-fixed-m-6[dir=rtl]{margin-right:120px;margin-left:auto}.next-col-offset-fixed-m-7[dir=rtl]{margin-right:140px;margin-left:auto}.next-col-offset-fixed-m-8[dir=rtl]{margin-right:160px;margin-left:auto}.next-col-offset-fixed-m-9[dir=rtl]{margin-right:180px;margin-left:auto}.next-col-offset-fixed-m-10[dir=rtl]{margin-right:200px;margin-left:auto}.next-col-offset-fixed-m-11[dir=rtl]{margin-right:220px;margin-left:auto}.next-col-offset-fixed-m-12[dir=rtl]{margin-right:240px;margin-left:auto}.next-col-offset-fixed-m-13[dir=rtl]{margin-right:260px;margin-left:auto}.next-col-offset-fixed-m-14[dir=rtl]{margin-right:280px;margin-left:auto}.next-col-offset-fixed-m-15[dir=rtl]{margin-right:300px;margin-left:auto}.next-col-offset-fixed-m-16[dir=rtl]{margin-right:320px;margin-left:auto}.next-col-offset-fixed-m-17[dir=rtl]{margin-right:340px;margin-left:auto}.next-col-offset-fixed-m-18[dir=rtl]{margin-right:360px;margin-left:auto}.next-col-offset-fixed-m-19[dir=rtl]{margin-right:380px;margin-left:auto}.next-col-offset-fixed-m-20[dir=rtl]{margin-right:400px;margin-left:auto}.next-col-offset-fixed-m-21[dir=rtl]{margin-right:420px;margin-left:auto}.next-col-offset-fixed-m-22[dir=rtl]{margin-right:440px;margin-left:auto}.next-col-offset-fixed-m-23[dir=rtl]{margin-right:460px;margin-left:auto}.next-col-offset-fixed-m-24[dir=rtl]{margin-right:480px;margin-left:auto}.next-col-offset-fixed-m-25[dir=rtl]{margin-right:500px;margin-left:auto}.next-col-offset-fixed-m-26[dir=rtl]{margin-right:520px;margin-left:auto}.next-col-offset-fixed-m-27[dir=rtl]{margin-right:540px;margin-left:auto}.next-col-offset-fixed-m-28[dir=rtl]{margin-right:560px;margin-left:auto}.next-col-offset-fixed-m-29[dir=rtl]{margin-right:580px;margin-left:auto}.next-col-offset-fixed-m-30[dir=rtl]{margin-right:600px;margin-left:auto}.next-col-offset-fixed-l-1[dir=rtl]{margin-right:20px;margin-left:auto}.next-col-offset-fixed-l-2[dir=rtl]{margin-right:40px;margin-left:auto}.next-col-offset-fixed-l-3[dir=rtl]{margin-right:60px;margin-left:auto}.next-col-offset-fixed-l-4[dir=rtl]{margin-right:80px;margin-left:auto}.next-col-offset-fixed-l-5[dir=rtl]{margin-right:100px;margin-left:auto}.next-col-offset-fixed-l-6[dir=rtl]{margin-right:120px;margin-left:auto}.next-col-offset-fixed-l-7[dir=rtl]{margin-right:140px;margin-left:auto}.next-col-offset-fixed-l-8[dir=rtl]{margin-right:160px;margin-left:auto}.next-col-offset-fixed-l-9[dir=rtl]{margin-right:180px;margin-left:auto}.next-col-offset-fixed-l-10[dir=rtl]{margin-right:200px;margin-left:auto}.next-col-offset-fixed-l-11[dir=rtl]{margin-right:220px;margin-left:auto}.next-col-offset-fixed-l-12[dir=rtl]{margin-right:240px;margin-left:auto}.next-col-offset-fixed-l-13[dir=rtl]{margin-right:260px;margin-left:auto}.next-col-offset-fixed-l-14[dir=rtl]{margin-right:280px;margin-left:auto}.next-col-offset-fixed-l-15[dir=rtl]{margin-right:300px;margin-left:auto}.next-col-offset-fixed-l-16[dir=rtl]{margin-right:320px;margin-left:auto}.next-col-offset-fixed-l-17[dir=rtl]{margin-right:340px;margin-left:auto}.next-col-offset-fixed-l-18[dir=rtl]{margin-right:360px;margin-left:auto}.next-col-offset-fixed-l-19[dir=rtl]{margin-right:380px;margin-left:auto}.next-col-offset-fixed-l-20[dir=rtl]{margin-right:400px;margin-left:auto}.next-col-offset-fixed-l-21[dir=rtl]{margin-right:420px;margin-left:auto}.next-col-offset-fixed-l-22[dir=rtl]{margin-right:440px;margin-left:auto}.next-col-offset-fixed-l-23[dir=rtl]{margin-right:460px;margin-left:auto}.next-col-offset-fixed-l-24[dir=rtl]{margin-right:480px;margin-left:auto}.next-col-offset-fixed-l-25[dir=rtl]{margin-right:500px;margin-left:auto}.next-col-offset-fixed-l-26[dir=rtl]{margin-right:520px;margin-left:auto}.next-col-offset-fixed-l-27[dir=rtl]{margin-right:540px;margin-left:auto}.next-col-offset-fixed-l-28[dir=rtl]{margin-right:560px;margin-left:auto}.next-col-offset-fixed-l-29[dir=rtl]{margin-right:580px;margin-left:auto}.next-col-offset-fixed-l-30[dir=rtl]{margin-right:600px;margin-left:auto}.next-col-offset-fixed-xl-1[dir=rtl]{margin-right:20px;margin-left:auto}.next-col-offset-fixed-xl-2[dir=rtl]{margin-right:40px;margin-left:auto}.next-col-offset-fixed-xl-3[dir=rtl]{margin-right:60px;margin-left:auto}.next-col-offset-fixed-xl-4[dir=rtl]{margin-right:80px;margin-left:auto}.next-col-offset-fixed-xl-5[dir=rtl]{margin-right:100px;margin-left:auto}.next-col-offset-fixed-xl-6[dir=rtl]{margin-right:120px;margin-left:auto}.next-col-offset-fixed-xl-7[dir=rtl]{margin-right:140px;margin-left:auto}.next-col-offset-fixed-xl-8[dir=rtl]{margin-right:160px;margin-left:auto}.next-col-offset-fixed-xl-9[dir=rtl]{margin-right:180px;margin-left:auto}.next-col-offset-fixed-xl-10[dir=rtl]{margin-right:200px;margin-left:auto}.next-col-offset-fixed-xl-11[dir=rtl]{margin-right:220px;margin-left:auto}.next-col-offset-fixed-xl-12[dir=rtl]{margin-right:240px;margin-left:auto}.next-col-offset-fixed-xl-13[dir=rtl]{margin-right:260px;margin-left:auto}.next-col-offset-fixed-xl-14[dir=rtl]{margin-right:280px;margin-left:auto}.next-col-offset-fixed-xl-15[dir=rtl]{margin-right:300px;margin-left:auto}.next-col-offset-fixed-xl-16[dir=rtl]{margin-right:320px;margin-left:auto}.next-col-offset-fixed-xl-17[dir=rtl]{margin-right:340px;margin-left:auto}.next-col-offset-fixed-xl-18[dir=rtl]{margin-right:360px;margin-left:auto}.next-col-offset-fixed-xl-19[dir=rtl]{margin-right:380px;margin-left:auto}.next-col-offset-fixed-xl-20[dir=rtl]{margin-right:400px;margin-left:auto}.next-col-offset-fixed-xl-21[dir=rtl]{margin-right:420px;margin-left:auto}.next-col-offset-fixed-xl-22[dir=rtl]{margin-right:440px;margin-left:auto}.next-col-offset-fixed-xl-23[dir=rtl]{margin-right:460px;margin-left:auto}.next-col-offset-fixed-xl-24[dir=rtl]{margin-right:480px;margin-left:auto}.next-col-offset-fixed-xl-25[dir=rtl]{margin-right:500px;margin-left:auto}.next-col-offset-fixed-xl-26[dir=rtl]{margin-right:520px;margin-left:auto}.next-col-offset-fixed-xl-27[dir=rtl]{margin-right:540px;margin-left:auto}.next-col-offset-fixed-xl-28[dir=rtl]{margin-right:560px;margin-left:auto}.next-col-offset-fixed-xl-29[dir=rtl]{margin-right:580px;margin-left:auto}.next-col-offset-fixed-xl-30[dir=rtl]{margin-right:600px;margin-left:auto}.next-form,.next-form *,.next-form :after,.next-form :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-form-item{margin-bottom:16px}.next-form-item.has-error .next-form-item-help{color:#ff3000}.next-form-item .next-form-item-label,.next-form-item .next-form-text-align,.next-form-item p{line-height:28px}.next-form-item .next-form-text-align,.next-form-item p{margin:0}.next-form-item .next-checkbox-group,.next-form-item .next-checkbox-wrapper,.next-form-item .next-radio-group,.next-form-item .next-radio-wrapper{line-height:24px}.next-form-item .next-form-item-label{font-size:12px}.next-form-item.next-large{margin-bottom:20px}.next-form-item.next-large .next-form-item-label,.next-form-item.next-large .next-form-text-align,.next-form-item.next-large p{line-height:40px}.next-form-item.next-large .next-checkbox-group,.next-form-item.next-large .next-checkbox-wrapper,.next-form-item.next-large .next-radio-group,.next-form-item.next-large .next-radio-wrapper{line-height:39px}.next-form-item.next-large .next-switch{margin-top:7px}.next-form-item.next-large .next-form-item-label{font-size:16px}.next-form-item.next-small{margin-bottom:12px}.next-form-item.next-small .next-checkbox-group,.next-form-item.next-small .next-checkbox-wrapper,.next-form-item.next-small .next-form-item-label,.next-form-item.next-small .next-form-text-align,.next-form-item.next-small .next-radio-group,.next-form-item.next-small .next-radio-wrapper,.next-form-item.next-small p{line-height:20px}.next-form-item.next-small .next-form-item-label{font-size:12px}.next-form-item.next-top>.next-form-item-label{margin-bottom:2px}.next-form-item.next-inset .next-form-item-label{padding-right:0;padding-left:0;line-height:inherit}.next-form-item-control .next-form-text-align{margin:0}.next-form-item-control>.next-input,.next-form-item-control>.next-input-group{width:100%}.next-form-item-label{display:inline-block;vertical-align:top;color:#666;text-align:right;padding-right:12px}.next-form-item-label label[required]:before{margin-right:4px;content:"*";color:#ff3000}.next-form-item-label.next-left{text-align:left}.next-form-item-label.next-left>label[required]:before{display:none}.next-form-item-label.next-left>label[required]:after{margin-left:4px;content:"*";color:#ff3000}.next-form-item-help{margin-top:4px;font-size:12px;line-height:1.5;color:#999}.next-form.next-inline .next-form-item{display:inline-block;vertical-align:top}.next-form.next-inline .next-form-item.next-left .next-form-item-control{display:inline-block;vertical-align:top;line-height:0}.next-form.next-inline .next-form-item:not(:last-child){margin-right:20px}.next-form.next-inline .next-form-item.next-large:not(:last-child){margin-right:24px}.next-form.next-inline .next-form-item.next-small:not(:last-child){margin-right:16px}@media screen and (min-width:0\0) and (min-resolution:0.001dpcm){.next-form-item.next-left>.next-form-item-label,.next-form.next-inline .next-form-item.next-left .next-form-item-control{display:table-cell}}.next-form[dir=rtl] .next-form-item-label{text-align:left;padding-left:12px;padding-right:0}.next-form[dir=rtl].next-inline .next-form-item:not(:last-child){margin-left:20px;margin-right:0}.next-form[dir=rtl].next-inline .next-form-item.next-large:not(:last-child){margin-left:24px;margin-right:0}.next-form[dir=rtl].next-inline .next-form-item.next-small:not(:last-child){margin-left:16px;margin-right:0}.next-loading-fusion-reactor[dir=rtl]{-webkit-animation-name:nextVectorRouteRTL;animation-name:nextVectorRouteRTL}@-webkit-keyframes nextVectorRouteRTL{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}5%{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}25%{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}30%{-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}50%{-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}55%{-webkit-transform:rotate(-270deg);-ms-transform:rotate(-270deg);transform:rotate(-270deg)}75%{-webkit-transform:rotate(-270deg);-ms-transform:rotate(-270deg);transform:rotate(-270deg)}80%{-webkit-transform:rotate(-1turn);-ms-transform:rotate(-1turn);transform:rotate(-1turn)}to{-webkit-transform:rotate(-1turn);-ms-transform:rotate(-1turn);transform:rotate(-1turn)}}@keyframes nextVectorRouteRTL{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}5%{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}25%{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}30%{-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}50%{-webkit-transform:rotate(-180deg);-ms-transform:rotate(-180deg);transform:rotate(-180deg)}55%{-webkit-transform:rotate(-270deg);-ms-transform:rotate(-270deg);transform:rotate(-270deg)}75%{-webkit-transform:rotate(-270deg);-ms-transform:rotate(-270deg);transform:rotate(-270deg)}80%{-webkit-transform:rotate(-1turn);-ms-transform:rotate(-1turn);transform:rotate(-1turn)}to{-webkit-transform:rotate(-1turn);-ms-transform:rotate(-1turn);transform:rotate(-1turn)}}.next-loading{position:relative}.next-loading.next-open{pointer-events:none}.next-loading .next-loading-component{opacity:.7;-webkit-filter:blur(1px);filter:blur(1px);-webkit-filter:"progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false)";filter:"progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false)";position:relative;pointer-events:none}.next-loading-masker{position:absolute;top:0;bottom:0;left:0;right:0;z-index:99;opacity:.2;background:#fff}.next-loading-inline{display:inline-block}.next-loading-tip{display:block;position:absolute;top:50%;left:50%;z-index:4;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-align:center}.next-loading-tip-fullscreen{top:inherit;left:inherit;-webkit-transform:inherit;-ms-transform:inherit;transform:inherit}.next-loading-tip-placeholder{display:none}.next-loading-right-tip .next-loading-indicator{display:inline-block}.next-loading-right-tip .next-loading-tip-content{position:absolute;display:block;top:50%;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.next-loading-right-tip .next-loading-tip-placeholder{display:inline-block;visibility:hidden;margin-left:1em}.next-loading-fusion-reactor{display:inline-block;width:48px;height:48px;position:relative;margin:0;-webkit-animation-duration:5.6s;animation-duration:5.6s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-name:nextVectorRoute;animation-name:nextVectorRoute}.next-loading-fusion-reactor .next-loading-dot{position:absolute;margin:auto;width:12px;height:12px;border-radius:50%;background:#5584ff;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-duration:1.4s;animation-duration:1.4s}.next-loading-fusion-reactor .next-loading-dot:first-child{top:0;bottom:0;left:0;-webkit-animation-name:nextVectorDotsX;animation-name:nextVectorDotsX}.next-loading-fusion-reactor .next-loading-dot:nth-child(2){left:0;right:0;top:0;opacity:.8;-webkit-animation-name:nextVectorDotsY;animation-name:nextVectorDotsY}.next-loading-fusion-reactor .next-loading-dot:nth-child(3){top:0;bottom:0;right:0;opacity:.6;-webkit-animation-name:nextVectorDotsXR;animation-name:nextVectorDotsXR}.next-loading-fusion-reactor .next-loading-dot:nth-child(4){left:0;right:0;bottom:0;opacity:.2;-webkit-animation-name:nextVectorDotsYR;animation-name:nextVectorDotsYR}.next-loading-medium-fusion-reactor{width:32px;height:32px}.next-loading-medium-fusion-reactor .next-loading-dot{width:8px;height:8px}.next-loading-medium-fusion-reactor .next-loading-dot:first-child{-webkit-animation-name:nextVectorDotsX-medium;animation-name:nextVectorDotsX-medium}.next-loading-medium-fusion-reactor .next-loading-dot:nth-child(2){-webkit-animation-name:nextVectorDotsY-medium;animation-name:nextVectorDotsY-medium}.next-loading-medium-fusion-reactor .next-loading-dot:nth-child(3){-webkit-animation-name:nextVectorDotsXR-medium;animation-name:nextVectorDotsXR-medium}.next-loading-medium-fusion-reactor .next-loading-dot:nth-child(4){-webkit-animation-name:nextVectorDotsYR-medium;animation-name:nextVectorDotsYR-medium}@-webkit-keyframes nextVectorRoute{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}5%{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}25%{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}30%{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}50%{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}55%{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}75%{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}80%{-webkit-transform:rotate(1turn);-ms-transform:rotate(1turn);transform:rotate(1turn)}to{-webkit-transform:rotate(1turn);-ms-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes nextVectorRoute{0%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}5%{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}25%{-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}30%{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}50%{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}55%{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}75%{-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}80%{-webkit-transform:rotate(1turn);-ms-transform:rotate(1turn);transform:rotate(1turn)}to{-webkit-transform:rotate(1turn);-ms-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes nextVectorDotsYR{25%{bottom:0}45%,50%{bottom:16.8px;height:14.4px;width:14.4px}90%{bottom:0;height:12px;width:12px}}@keyframes nextVectorDotsYR{25%{bottom:0}45%,50%{bottom:16.8px;height:14.4px;width:14.4px}90%{bottom:0;height:12px;width:12px}}@-webkit-keyframes nextVectorDotsY{25%{top:0}45%,50%{top:16.8px;height:14.4px;width:14.4px}90%{top:0;height:12px;width:12px}}@keyframes nextVectorDotsY{25%{top:0}45%,50%{top:16.8px;height:14.4px;width:14.4px}90%{top:0;height:12px;width:12px}}@-webkit-keyframes nextVectorDotsX{25%{left:0}45%,50%{left:16.8px;width:14.4px;height:14.4px}90%{left:0;height:12px;width:12px}}@keyframes nextVectorDotsX{25%{left:0}45%,50%{left:16.8px;width:14.4px;height:14.4px}90%{left:0;height:12px;width:12px}}@-webkit-keyframes nextVectorDotsXR{25%{right:0}45%,50%{right:16.8px;width:14.4px;height:14.4px}90%{right:0;height:12px;width:12px}}@keyframes nextVectorDotsXR{25%{right:0}45%,50%{right:16.8px;width:14.4px;height:14.4px}90%{right:0;height:12px;width:12px}}@-webkit-keyframes nextVectorDotsYR-medium{25%{bottom:0}45%,50%{bottom:11.2px;height:9.6px;width:9.6px}90%{bottom:0;height:8px;width:8px}}@keyframes nextVectorDotsYR-medium{25%{bottom:0}45%,50%{bottom:11.2px;height:9.6px;width:9.6px}90%{bottom:0;height:8px;width:8px}}@-webkit-keyframes nextVectorDotsY-medium{25%{top:0}45%,50%{top:11.2px;height:9.6px;width:9.6px}90%{top:0;height:8px;width:8px}}@keyframes nextVectorDotsY-medium{25%{top:0}45%,50%{top:11.2px;height:9.6px;width:9.6px}90%{top:0;height:8px;width:8px}}@-webkit-keyframes nextVectorDotsX-medium{25%{left:0}45%,50%{left:11.2px;width:9.6px;height:9.6px}90%{left:0;height:8px;width:8px}}@keyframes nextVectorDotsX-medium{25%{left:0}45%,50%{left:11.2px;width:9.6px;height:9.6px}90%{left:0;height:8px;width:8px}}@-webkit-keyframes nextVectorDotsXR-medium{25%{right:0}45%,50%{right:11.2px;width:9.6px;height:9.6px}90%{right:0;height:8px;width:8px}}@keyframes nextVectorDotsXR-medium{25%{right:0}45%,50%{right:11.2px;width:9.6px;height:9.6px}90%{right:0;height:8px;width:8px}}.next-menu-btn{display:inline-block;-webkit-box-shadow:none;box-shadow:none}.next-menu-btn .next-icon{-webkit-transition:-webkit-transform .3s cubic-bezier(.645,.045,.355,1);transition:-webkit-transform .3s cubic-bezier(.645,.045,.355,1);transition:transform .3s cubic-bezier(.645,.045,.355,1);transition:transform .3s cubic-bezier(.645,.045,.355,1),-webkit-transform .3s cubic-bezier(.645,.045,.355,1)}.next-menu-btn.next-expand .next-menu-btn-arrow{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-menu-btn.next-btn-normal .next-menu-btn-arrow{color:#999}.next-menu-btn.next-btn-secondary .next-menu-btn-arrow{color:#5584ff}.next-menu-btn.next-btn-primary .next-menu-btn-arrow{color:#fff}.next-menu-btn.next-btn-text.next-btn-normal .next-menu-btn-arrow{color:#333}.next-menu-btn.next-btn-text.next-btn-primary .next-menu-btn-arrow{color:#5584ff}.next-menu-btn.next-btn-ghost.next-btn-light .next-menu-btn-arrow{color:#333}.next-menu-btn.next-btn-ghost.next-btn-dark .next-menu-btn-arrow{color:#fff}.next-menu-btn.disabled .next-menu-btn-arrow,.next-menu-btn.next-btn-text.disabled .next-menu-btn-arrow,.next-menu-btn.next-btn-text[disabled] .next-menu-btn-arrow,.next-menu-btn[disabled] .next-menu-btn-arrow{color:#ccc}.next-menu-btn[disabled].next-btn-ghost.next-btn-dark .next-menu-btn-arrow{color:hsla(0,0%,100%,.4)}.next-menu-btn[disabled].next-btn-ghost.next-btn-light .next-menu-btn-arrow{color:rgba(0,0,0,.1)}.next-nav{min-width:auto;padding:0;border-radius:0}.next-nav,.next-nav *,.next-nav :after,.next-nav :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-nav-icon.next-icon{margin-right:4px;font-weight:inherit}.next-nav-icon.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-nav-icon-placeholder{display:inline-block;width:16px;height:16px;margin-left:2px;margin-right:2px}.next-nav-group-label{height:40px;line-height:40px;font-size:16px}.next-nav-item .next-menu-item-text>span,.next-nav-item .next-nav-group-label>span{opacity:1;-webkit-transition:opacity .3s;transition:opacity .3s}.next-nav-item a{text-decoration:none;color:inherit}.next-nav-item.next-focused .next-menu-hoz-icon-arrow.next-icon,.next-nav-item.next-focused .next-menu-icon-arrow.next-icon,.next-nav-item .next-menu-hoz-icon-arrow.next-icon,.next-nav-item .next-menu-icon-arrow.next-icon,.next-nav-item.next-opened .next-menu-hoz-icon-arrow.next-icon,.next-nav-item.next-opened .next-menu-icon-arrow.next-icon,.next-nav-item.next-selected .next-menu-hoz-icon-arrow.next-icon,.next-nav-item.next-selected .next-menu-icon-arrow.next-icon,.next-nav-item:hover .next-menu-hoz-icon-arrow.next-icon,.next-nav-item:hover .next-menu-icon-arrow.next-icon{color:inherit;top:2px;-webkit-transform-origin:center 47%;-ms-transform-origin:center 47%;transform-origin:center 47%}.next-nav.next-active .next-nav-item:before{position:absolute;-webkit-transition:all .4s cubic-bezier(.23,1,.32,1);transition:all .4s cubic-bezier(.23,1,.32,1);content:""}.next-nav.next-hoz{height:44px;line-height:42px;font-size:12px}.next-nav.next-hoz .next-menu-item{margin-left:0;margin-right:0;padding:0 20px;border-radius:0}.next-nav.next-hoz .next-menu-item:before{height:2px}.next-nav.next-hoz .next-menu-item:not(:first-child),.next-nav.next-hoz .next-menu-sub-menu-wrapper:not(:first-child)>.next-menu-item{margin-top:0}.next-nav.next-hoz .next-menu-item:not(:last-child),.next-nav.next-hoz .next-menu-sub-menu-wrapper:not(:last-child)>.next-menu-item{margin-bottom:0}.next-nav.next-hoz .next-menu-item-inner{height:42px;font-size:12px}.next-nav.next-hoz .next-nav-group-label .next-menu-item-inner{height:40px;line-height:40px;font-size:16px}.next-nav.next-hoz .next-menu-header{float:left;height:42px}.next-nav.next-hoz .next-menu-footer{float:right;height:42px}.next-nav.next-hoz .next-nav-item:before{width:0;left:50%}.next-nav.next-hoz.next-top .next-nav-item:before{top:-1px}.next-nav.next-hoz.next-bottom .next-nav-item:before{bottom:-1px}.next-nav.next-hoz .next-selected.next-nav-item:before{width:100%;left:0}.next-nav.next-ver{-webkit-transition:width .3s;transition:width .3s;line-height:40px;font-size:12px}.next-nav.next-ver .next-menu-item{margin-left:0;margin-right:0;padding:0 20px;border-radius:0}.next-nav.next-ver .next-menu-item:before{width:2px}.next-nav.next-ver .next-menu-item:not(:first-child),.next-nav.next-ver .next-menu-sub-menu-wrapper:not(:first-child)>.next-menu-item{margin-top:0}.next-nav.next-ver .next-menu-item:not(:last-child),.next-nav.next-ver .next-menu-sub-menu-wrapper:not(:last-child)>.next-menu-item{margin-bottom:0}.next-nav.next-ver .next-menu-item-inner{height:40px;font-size:12px}.next-nav.next-ver .next-nav-group-label .next-menu-item-inner{height:40px;line-height:40px;font-size:16px}.next-nav.next-ver>.next-menu-item:first-child,.next-nav.next-ver>.next-menu-sub-menu-wrapper:first-child>.next-menu-item{margin-top:0}.next-nav.next-ver>.next-menu-item:last-child,.next-nav.next-ver>.next-menu-sub-menu-wrapper:last-child>.next-menu-item{margin-bottom:0}.next-nav.next-ver .next-menu-sub-menu .next-menu-item-inner{height:40px;line-height:40px;font-size:12px}.next-nav.next-ver .next-nav-item:before{height:0;top:50%}.next-nav.next-ver.next-left .next-nav-item:before{left:-1px}.next-nav.next-ver.next-right .next-nav-item:before{right:-1px}.next-nav.next-ver .next-selected.next-nav-item:before{height:100%;top:0}.next-nav.next-primary{border-width:0;background-color:#333;border-color:#333;color:#fff;font-weight:400;-webkit-box-shadow:2px 2px 4px 0 rgba(0,0,0,.12);box-shadow:2px 2px 4px 0 rgba(0,0,0,.12)}.next-nav.next-primary.next-hoz{line-height:44px}.next-nav.next-primary.next-hoz .next-menu-footer,.next-nav.next-primary.next-hoz .next-menu-header,.next-nav.next-primary.next-hoz .next-menu-item-inner{height:44px}.next-nav.next-primary.next-hoz.next-top .next-nav-item:before{top:0}.next-nav.next-primary.next-hoz.next-bottom .next-nav-item:before{bottom:0}.next-nav.next-primary.next-ver.next-left .next-nav-item:before{left:0}.next-nav.next-primary.next-ver.next-right .next-nav-item:before{right:0}.next-nav.next-primary .next-nav-item.next-menu-item{background-color:#333;color:#fff}.next-nav.next-primary .next-nav-item.next-menu-item.next-focused,.next-nav.next-primary .next-nav-item.next-menu-item:hover{background-color:#000;color:#fff}.next-nav.next-primary .next-nav-item.next-menu-item.next-selected{background-color:#000;color:#fff;font-weight:700}.next-nav.next-primary .next-nav-item.next-menu-item.next-opened{background-color:#000;color:#fff}.next-nav.next-primary .next-nav-item.next-menu-item:before{background-color:#5584ff}.next-nav.next-primary .next-menu-sub-menu .next-menu-item.next-opened{background-color:#000;color:#fff}.next-nav.next-primary .next-nav-group-label{color:#999;font-weight:400}.next-nav.next-primary .next-menu-sub-menu .next-menu-item{background-color:#333;color:#fff;font-weight:400}.next-nav.next-primary .next-menu-sub-menu .next-menu-item.next-focused,.next-nav.next-primary .next-menu-sub-menu .next-menu-item.next-selected,.next-nav.next-primary .next-menu-sub-menu .next-menu-item:hover{background-color:#000;color:#fff}.next-nav.next-secondary{border-width:0;background-color:#5584ff;border-color:#5584ff;color:#fff;font-weight:400;-webkit-box-shadow:2px 2px 4px 0 rgba(0,0,0,.12);box-shadow:2px 2px 4px 0 rgba(0,0,0,.12)}.next-nav.next-secondary.next-hoz{line-height:44px}.next-nav.next-secondary.next-hoz .next-menu-footer,.next-nav.next-secondary.next-hoz .next-menu-header,.next-nav.next-secondary.next-hoz .next-menu-item-inner{height:44px}.next-nav.next-secondary.next-hoz.next-top .next-nav-item:before{top:0}.next-nav.next-secondary.next-hoz.next-bottom .next-nav-item:before{bottom:0}.next-nav.next-secondary.next-ver.next-left .next-nav-item:before{left:0}.next-nav.next-secondary.next-ver.next-right .next-nav-item:before{right:0}.next-nav.next-secondary .next-nav-item.next-menu-item{background-color:#5584ff;color:#fff}.next-nav.next-secondary .next-nav-item.next-menu-item.next-focused,.next-nav.next-secondary .next-nav-item.next-menu-item:hover{background-color:#3e71f7;color:#fff}.next-nav.next-secondary .next-nav-item.next-menu-item.next-selected{background-color:#3e71f7;color:#fff;font-weight:700}.next-nav.next-secondary .next-nav-item.next-menu-item.next-opened{background-color:#3e71f7;color:#fff}.next-nav.next-secondary .next-nav-item.next-menu-item:before{background-color:#3e71f7}.next-nav.next-secondary .next-menu-sub-menu .next-menu-item.next-opened{background-color:#3e71f7;color:#fff}.next-nav.next-secondary .next-nav-group-label{color:#fff;font-weight:400}.next-nav.next-secondary .next-menu-sub-menu .next-menu-item{background-color:#5584ff;color:#fff;font-weight:400}.next-nav.next-secondary .next-menu-sub-menu .next-menu-item.next-focused,.next-nav.next-secondary .next-menu-sub-menu .next-menu-item.next-selected,.next-nav.next-secondary .next-menu-sub-menu .next-menu-item:hover{background-color:#3e71f7;color:#fff}.next-nav.next-normal{border-color:#dcdee3;font-weight:400;-webkit-box-shadow:2px 2px 4px 0 rgba(0,0,0,.12);box-shadow:2px 2px 4px 0 rgba(0,0,0,.12)}.next-nav.next-normal,.next-nav.next-normal .next-nav-item.next-menu-item{background-color:#fff;color:#333}.next-nav.next-normal .next-nav-item.next-menu-item.next-focused,.next-nav.next-normal .next-nav-item.next-menu-item:hover{background-color:#fff;color:#5584ff}.next-nav.next-normal .next-nav-item.next-menu-item.next-selected{background-color:#f2f3f7;color:#5584ff;font-weight:700}.next-nav.next-normal .next-nav-item.next-menu-item.next-opened{background-color:#f2f3f7;color:#5584ff}.next-nav.next-normal .next-nav-item.next-menu-item:before{background-color:#5584ff}.next-nav.next-normal .next-menu-sub-menu .next-menu-item.next-opened{background-color:#f2f3f7;color:#5584ff}.next-nav.next-normal .next-nav-group-label{color:#999;font-weight:400}.next-nav.next-normal .next-menu-sub-menu .next-menu-item{background-color:#fff;color:#333;font-weight:400}.next-nav.next-normal .next-menu-sub-menu .next-menu-item.next-focused,.next-nav.next-normal .next-menu-sub-menu .next-menu-item.next-selected,.next-nav.next-normal .next-menu-sub-menu .next-menu-item:hover{background-color:#f2f3f7;color:#5584ff}.next-nav.next-line{background-color:transparent;border-color:#dcdee3;color:#333;font-weight:400;-webkit-box-shadow:none;box-shadow:none}.next-nav.next-line.next-hoz{border-right-color:transparent}.next-nav.next-line.next-hoz,.next-nav.next-line.next-ver{border-top-color:transparent;border-left-color:transparent}.next-nav.next-line.next-ver{border-bottom-color:transparent}.next-nav.next-line .next-nav-item.next-menu-item{background-color:transparent;color:#333}.next-nav.next-line .next-nav-item.next-menu-item.next-focused,.next-nav.next-line .next-nav-item.next-menu-item:hover{background-color:transparent;color:#5584ff}.next-nav.next-line .next-nav-item.next-menu-item.next-selected{background-color:transparent;color:#5584ff;font-weight:700}.next-nav.next-line .next-nav-item.next-menu-item.next-opened{background-color:transparent;color:#5584ff}.next-nav.next-line .next-nav-item.next-menu-item:before{background-color:#5584ff}.next-nav.next-line .next-menu-sub-menu .next-menu-item.next-opened{background-color:transparent;color:#5584ff}.next-nav.next-line .next-nav-group-label{color:#999;font-weight:400}.next-nav.next-line .next-menu-sub-menu .next-menu-item{background-color:transparent;color:#333;font-weight:400}.next-nav.next-line .next-menu-sub-menu .next-menu-item.next-focused,.next-nav.next-line .next-menu-sub-menu .next-menu-item.next-selected,.next-nav.next-line .next-menu-sub-menu .next-menu-item:hover{background-color:transparent;color:#5584ff}.next-nav.next-icon-only .next-menu-item-inner{text-overflow:clip}.next-nav.next-icon-only .next-menu-item-text>span,.next-nav.next-icon-only .next-nav-group-label>.next-menu-item-inner>span{opacity:0}.next-nav.next-icon-only.next-normal .next-nav-icon.next-icon{margin-left:1px;margin-right:1px}.next-nav.next-icon-only.next-normal .next-nav-icon.next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-nav.next-icon-only.next-primary .next-nav-icon.next-icon{margin-left:2px;margin-right:2px}.next-nav.next-icon-only.next-primary .next-nav-icon.next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-nav.next-icon-only.next-secondary .next-nav-icon.next-icon{margin-left:2px;margin-right:2px}.next-nav.next-icon-only.next-secondary .next-nav-icon.next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-nav.next-icon-only .next-nav-icon-only-arrow.next-icon{margin-left:1px;-webkit-transition:all .3s ease;transition:all .3s ease;-webkit-transform-origin:center 46%;-ms-transform-origin:center 46%;transform-origin:center 46%}.next-nav.next-icon-only .next-nav-icon-only-arrow.next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-nav.next-icon-only .next-nav-item.next-opened .next-nav-icon-only-arrow.next-icon-arrow-down{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);margin-left:1px}.next-nav.next-icon-only .next-nav-item.next-opened .next-nav-icon-only-arrow.next-icon-arrow-down:before{width:16px;font-size:16px;line-height:inherit}.next-nav.next-icon-only .next-nav-item.next-selected .next-nav-icon.next-icon{-webkit-animation:pulse .3s cubic-bezier(.23,1,.32,1);animation:pulse .3s cubic-bezier(.23,1,.32,1)}.next-nav.next-icon-only .next-menu-hoz-icon-arrow,.next-nav.next-icon-only .next-menu-icon-arrow{display:none}.next-nav-embeddable.next-normal,.next-nav-embeddable.next-primary,.next-nav-embeddable.next-secondary{height:100%;background:initial;-webkit-box-shadow:none;box-shadow:none;border:none}.next-nav-embeddable.next-normal .next-menu-sub-menu .next-menu-item,.next-nav-embeddable.next-normal .next-nav-item.next-menu-item,.next-nav-embeddable.next-primary .next-menu-sub-menu .next-menu-item,.next-nav-embeddable.next-primary .next-nav-item.next-menu-item,.next-nav-embeddable.next-secondary .next-menu-sub-menu .next-menu-item,.next-nav-embeddable.next-secondary .next-nav-item.next-menu-item{background:initial}.next-nav-embeddable.next-nav.next-hoz .next-menu-item-inner,.next-nav-embeddable.next-nav.next-hoz .next-menu-sub-menu .next-menu-item,.next-nav-embeddable.next-nav.next-hoz .next-nav-item.next-menu-item{height:100%}.next-nav[dir=rtl] .next-nav-icon.next-icon{margin-left:4px;margin-right:0}.next-nav[dir=rtl] .next-nav-icon.next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-nav[dir=rtl].next-hoz .next-menu-header{float:right}.next-nav[dir=rtl].next-hoz .next-menu-footer{float:left}.next-nav[dir=rtl].next-hoz .next-nav-item:before{width:0;left:50%}.next-nav[dir=rtl].next-hoz .next-selected.next-nav-item:before{width:100%;left:auto;right:0}.next-nav[dir=rtl].next-ver.next-left .next-nav-item:before{right:-1px;left:auto}.next-nav[dir=rtl].next-ver.next-right .next-nav-item:before{left:-1px;right:auto}.next-nav[dir=rtl].next-primary.next-ver.next-left .next-nav-item:before{right:0;left:auto}.next-nav[dir=rtl].next-primary.next-ver.next-right .next-nav-item:before{left:0;right:auto}.next-nav[dir=rtl].next-secondary.next-ver.next-left .next-nav-item:before{right:0;left:auto}.next-nav[dir=rtl].next-secondary.next-ver.next-right .next-nav-item:before{left:0;right:auto}.next-nav[dir=rtl] .next-nav.next-line.next-ver{border-top-color:transparent;border-right-color:transparent;border-left-color:none;border-bottom-color:transparent}.next-nav[dir=rtl].next-icon-only .next-nav-icon-only-arrow.next-icon,.next-nav[dir=rtl].next-icon-only .next-nav-icon.next-icon,.next-nav[dir=rtl].next-icon-only .next-nav-item.next-opened .next-nav-icon-only-arrow.next-icon-arrow-down{margin-left:0;margin-right:1px}.next-nav[dir=rtl].next-icon-only .next-nav-icon-only-arrow.next-icon:before,.next-nav[dir=rtl].next-icon-only .next-nav-icon.next-icon:before,.next-nav[dir=rtl].next-icon-only .next-nav-item.next-opened .next-nav-icon-only-arrow.next-icon-arrow-down:before{width:16px;font-size:16px;line-height:inherit}.next-number-picker{display:inline-block}.next-number-picker,.next-number-picker *,.next-number-picker :after,.next-number-picker :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-number-picker .next-btn{padding:0!important;line-height:0!important;-webkit-box-shadow:none!important;box-shadow:none!important}.next-number-picker-normal{width:80px}.next-number-picker-normal .next-input{width:100%}.next-number-picker-normal .next-input input{padding-right:2px}.next-number-picker-normal .next-btn{display:block}.next-number-picker-normal .next-btn:hover{z-index:1}.next-number-picker-normal .next-btn:first-child{border-right:none;border-top:none;height:50%;border-top-left-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}.next-number-picker-normal .next-btn:last-child{border-right:none;border-bottom:none;margin-top:-1px;height:calc(50% + 1px);border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:0}.next-number-picker-normal .next-number-picker-handler{opacity:0;-webkit-transition:opacity .24s linear .1s;transition:opacity .24s linear .1s;height:100%}.next-number-picker-normal:hover .next-number-picker-handler{opacity:1}.next-number-picker-normal .next-input.next-disabled .next-number-picker-handler{opacity:0}.next-number-picker-normal.next-medium .next-btn{width:20px}.next-number-picker-normal.next-medium .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-number-picker-normal.next-medium .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-number-picker-normal.next-medium .next-icon:before{width:16px;font-size:16px}}.next-number-picker-normal.next-large .next-btn{width:20px}.next-number-picker-normal.next-large .next-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-number-picker-normal.next-large .next-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-number-picker-normal.next-large .next-icon:before{width:16px;font-size:16px}}.next-number-picker-inline input{text-align:center}.next-number-picker-inline .next-input input{padding:0}.next-number-picker-inline.next-medium{width:100px}.next-number-picker-inline.next-medium .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-number-picker-inline.next-medium .next-btn:first-child{margin-right:2px}.next-number-picker-inline.next-medium .next-btn:last-child{margin-left:2px}.next-number-picker-inline.next-large{width:128px}.next-number-picker-inline.next-large .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-number-picker-inline.next-large .next-btn:first-child{margin-right:2px}.next-number-picker-inline.next-large .next-btn:last-child{margin-left:2px}.next-number-picker-inline .next-btn.next-medium{width:28px}.next-number-picker-inline .next-btn.next-large{width:40px}.next-number-picker-normal[dir=rtl] .next-btn:first-child{border-right:1px solid #c4c6cf;border-left:0;border-top-left-radius:3px;border-top-right-radius:0}.next-number-picker-normal[dir=rtl] .next-btn:last-child{border-right:1px solid #c4c6cf;border-left:0;border-bottom-left-radius:3px;border-bottom-right-radius:0}.next-number-picker-inline[dir=rtl] .next-btn{border-radius:0}.next-number-picker-inline[dir=rtl] .next-before .next-btn{border-top-right-radius:3px!important;border-bottom-right-radius:3px!important}.next-number-picker-inline[dir=rtl] .next-after .next-btn{border-top-left-radius:3px!important;border-bottom-left-radius:3px!important}.next-pagination[dir=rtl] .next-pagination-total{margin-right:0;margin-left:16px}.next-pagination[dir=rtl] .next-pagination-jump-go{margin-left:0;margin-right:4px}.next-pagination[dir=rtl] .next-pagination-size-selector-title{margin-right:0;margin-left:4px}.next-pagination[dir=rtl] .next-pagination-size-selector-btn.next-btn-text+.next-pagination-size-selector-btn{border-left:none;border-right:1px solid #dcdee3}.next-pagination[dir=rtl] .next-pagination-pages+.next-pagination-size-selector,.next-pagination[dir=rtl] .next-pagination-size-selector+.next-pagination-pages{margin-left:0;margin-right:40px}.next-pagination[dir=rtl].next-start .next-pagination-pages{float:left}.next-pagination[dir=rtl].next-end .next-pagination-pages,.next-pagination[dir=rtl].next-start .next-pagination-size-selector{float:right}.next-pagination[dir=rtl].next-end .next-pagination-size-selector{float:left}.next-pagination[dir=rtl].next-small .next-pagination-list{margin:0 4px}.next-pagination[dir=rtl].next-small .next-pagination-total{line-height:20px;vertical-align:middle}.next-pagination[dir=rtl].next-small .next-pagination-item{padding:0 6px}.next-pagination[dir=rtl].next-small .next-pagination-item+.next-pagination-item{margin:0 4px 0 0}.next-pagination[dir=rtl].next-small .next-pagination-ellipsis{height:20px;line-height:20px;margin-left:8px;margin-right:8px}.next-pagination[dir=rtl].next-small .next-pagination-ellipsis:before{width:12px;font-size:12px;line-height:inherit}.next-pagination[dir=rtl].next-small .next-pagination-display,.next-pagination[dir=rtl].next-small .next-pagination-display em,.next-pagination[dir=rtl].next-small .next-pagination-jump-text{font-size:12px}.next-pagination[dir=rtl].next-small .next-pagination-jump-input{width:28px}.next-pagination[dir=rtl].next-small .next-pagination-size-selector-title{height:20px;line-height:20px;font-size:12px;vertical-align:middle}.next-pagination[dir=rtl].next-small .next-pagination-size-selector-btn{padding:0 8px}.next-pagination[dir=rtl].next-small .next-pagination-item.next-next:not([disabled]) i,.next-pagination[dir=rtl].next-small .next-pagination-item.next-prev:not([disabled]) i{color:#666}.next-pagination[dir=rtl].next-small .next-pagination-item:hover.next-next:not([disabled]) i,.next-pagination[dir=rtl].next-small .next-pagination-item:hover.next-prev:not([disabled]) i{color:#333}.next-pagination[dir=rtl].next-medium .next-pagination-list{margin:0 4px}.next-pagination[dir=rtl].next-medium .next-pagination-total{line-height:28px;vertical-align:middle}.next-pagination[dir=rtl].next-medium .next-pagination-item{padding:0 10px}.next-pagination[dir=rtl].next-medium .next-pagination-item+.next-pagination-item{margin:0 4px 0 0}.next-pagination[dir=rtl].next-medium .next-pagination-ellipsis{height:28px;line-height:28px;margin-left:8px;margin-right:8px}.next-pagination[dir=rtl].next-medium .next-pagination-ellipsis:before{width:12px;font-size:12px;line-height:inherit}.next-pagination[dir=rtl].next-medium .next-pagination-display,.next-pagination[dir=rtl].next-medium .next-pagination-display em,.next-pagination[dir=rtl].next-medium .next-pagination-jump-text{font-size:12px}.next-pagination[dir=rtl].next-medium .next-pagination-jump-input{width:36px}.next-pagination[dir=rtl].next-medium .next-pagination-size-selector-title{height:28px;line-height:28px;font-size:12px;vertical-align:middle}.next-pagination[dir=rtl].next-medium .next-pagination-size-selector-btn{padding:0 12px}.next-pagination[dir=rtl].next-medium .next-pagination-item.next-next:not([disabled]) i,.next-pagination[dir=rtl].next-medium .next-pagination-item.next-prev:not([disabled]) i{color:#666}.next-pagination[dir=rtl].next-medium .next-pagination-item:hover.next-next:not([disabled]) i,.next-pagination[dir=rtl].next-medium .next-pagination-item:hover.next-prev:not([disabled]) i{color:#333}.next-pagination[dir=rtl].next-large .next-pagination-list{margin:0 8px}.next-pagination[dir=rtl].next-large .next-pagination-total{line-height:40px;vertical-align:middle}.next-pagination[dir=rtl].next-large .next-pagination-item{padding:0 15px}.next-pagination[dir=rtl].next-large .next-pagination-item+.next-pagination-item{margin:0 8px 0 0}.next-pagination[dir=rtl].next-large .next-pagination-ellipsis{height:40px;line-height:40px;margin-left:8px;margin-right:8px}.next-pagination[dir=rtl].next-large .next-pagination-ellipsis:before{width:16px;font-size:16px;line-height:inherit}.next-pagination[dir=rtl].next-large .next-pagination-display,.next-pagination[dir=rtl].next-large .next-pagination-display em,.next-pagination[dir=rtl].next-large .next-pagination-jump-text{font-size:16px}.next-pagination[dir=rtl].next-large .next-pagination-jump-input{width:48px}.next-pagination[dir=rtl].next-large .next-pagination-size-selector-title{height:40px;line-height:40px;font-size:16px;vertical-align:middle}.next-pagination[dir=rtl].next-large .next-pagination-size-selector-btn{padding:0 16px}.next-pagination[dir=rtl].next-large .next-pagination-item.next-next:not([disabled]) i,.next-pagination[dir=rtl].next-large .next-pagination-item.next-prev:not([disabled]) i{color:#666}.next-pagination[dir=rtl].next-large .next-pagination-item:hover.next-next:not([disabled]) i,.next-pagination[dir=rtl].next-large .next-pagination-item:hover.next-prev:not([disabled]) i{color:#333}.next-pagination{font-size:0}.next-pagination,.next-pagination *,.next-pagination :after,.next-pagination :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-pagination:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-pagination-total{display:inline-block;font-size:14px;margin-right:16px}.next-pagination-pages{display:inline-block}.next-pagination-list{display:inline-block;vertical-align:top}.next-pagination .next-pagination-item{display:inline-block}.next-pagination .next-pagination-item.next-current,.next-pagination .next-pagination-item.next-current:focus,.next-pagination .next-pagination-item.next-current:hover{border-color:#5584ff;background:#5584ff;color:#fff}.next-pagination-ellipsis{display:inline-block;color:#999;vertical-align:top}.next-pagination-display{display:inline-block;margin:0 16px;color:#333;vertical-align:middle}.next-pagination-display em{font-style:normal;color:#5584ff}.next-pagination-jump-text{display:inline-block;vertical-align:middle;color:#999}.next-pagination-jump-input{margin:0 4px;vertical-align:top}.next-pagination-jump-go{margin-left:4px;vertical-align:top}.next-pagination-size-selector{display:inline-block;position:relative}.next-pagination-size-selector-title{margin-right:4px;color:#999}.next-pagination-size-selector-filter{display:inline-block;vertical-align:middle}.next-pagination-size-selector-dropdown{vertical-align:top;min-width:64px}.next-pagination-size-selector-popup{min-width:64px}.next-pagination-size-selector-btn.next-btn-text{height:auto;line-height:normal;color:#666;border-radius:0}.next-pagination-size-selector-btn.next-btn-text.next-current{color:#5584ff}.next-pagination-size-selector-btn.next-btn-text+.next-pagination-size-selector-btn{border-left:1px solid #dcdee3}.next-pagination-pages+.next-pagination-size-selector,.next-pagination-size-selector+.next-pagination-pages{margin-left:40px}.next-pagination.next-hide{display:none}.next-pagination.next-start .next-pagination-pages{float:right}.next-pagination.next-end .next-pagination-pages,.next-pagination.next-start .next-pagination-size-selector{float:left}.next-pagination.next-end .next-pagination-size-selector{float:right}.next-pagination.next-small .next-pagination-list{margin:0 4px}.next-pagination.next-small .next-pagination-total{line-height:20px;vertical-align:middle}.next-pagination.next-small .next-pagination-item{padding:0 6px}.next-pagination.next-small .next-pagination-item+.next-pagination-item{margin:0 0 0 4px}.next-pagination.next-small .next-pagination-ellipsis{height:20px;line-height:20px;margin-left:8px;margin-right:8px}.next-pagination.next-small .next-pagination-ellipsis:before{width:12px;font-size:12px;line-height:inherit}.next-pagination.next-small .next-pagination-display,.next-pagination.next-small .next-pagination-display em,.next-pagination.next-small .next-pagination-jump-text{font-size:12px}.next-pagination.next-small .next-pagination-jump-input{width:28px}.next-pagination.next-small .next-pagination-size-selector-title{height:20px;line-height:20px;font-size:12px;vertical-align:middle}.next-pagination.next-small .next-pagination-size-selector-btn{padding:0 8px}.next-pagination.next-small .next-pagination-item.next-next:not([disabled]) i,.next-pagination.next-small .next-pagination-item.next-prev:not([disabled]) i{color:#666}.next-pagination.next-small .next-pagination-item:hover.next-next:not([disabled]) i,.next-pagination.next-small .next-pagination-item:hover.next-prev:not([disabled]) i{color:#333}.next-pagination.next-small.next-arrow-only .next-pagination-item.next-next,.next-pagination.next-small.next-arrow-only .next-pagination-item.next-prev{width:20px;padding:0}.next-pagination.next-small.next-arrow-only .next-pagination-item.next-next .next-icon,.next-pagination.next-small.next-arrow-only .next-pagination-item.next-prev .next-icon{margin:0 auto}.next-pagination.next-small.next-arrow-prev-only .next-pagination-item.next-prev{width:20px;padding:0}.next-pagination.next-small.next-arrow-prev-only .next-pagination-item.next-prev .next-icon{margin:0 auto}.next-pagination.next-small.next-no-border .next-pagination-item.next-next,.next-pagination.next-small.next-no-border .next-pagination-item.next-prev{padding:0;border:none;background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.next-pagination.next-small.next-no-border .next-pagination-item.next-next .next-icon,.next-pagination.next-small.next-no-border .next-pagination-item.next-prev .next-icon{margin:0}.next-pagination.next-small.next-no-border .next-pagination-item.next-next:not([disabled]):hover i,.next-pagination.next-small.next-no-border .next-pagination-item.next-prev:not([disabled]):hover i{color:#5584ff}.next-pagination.next-small.next-no-border .next-pagination-display{margin:0 8px}.next-pagination.next-small.next-mini .next-pagination-item.next-prev{margin-right:4px}.next-pagination.next-small.next-mini .next-pagination-item.next-next{margin-left:4px}.next-pagination.next-medium .next-pagination-list{margin:0 4px}.next-pagination.next-medium .next-pagination-total{line-height:28px;vertical-align:middle}.next-pagination.next-medium .next-pagination-item{padding:0 10px}.next-pagination.next-medium .next-pagination-item+.next-pagination-item{margin:0 0 0 4px}.next-pagination.next-medium .next-pagination-ellipsis{height:28px;line-height:28px;margin-left:8px;margin-right:8px}.next-pagination.next-medium .next-pagination-ellipsis:before{width:12px;font-size:12px;line-height:inherit}.next-pagination.next-medium .next-pagination-display,.next-pagination.next-medium .next-pagination-display em,.next-pagination.next-medium .next-pagination-jump-text{font-size:12px}.next-pagination.next-medium .next-pagination-jump-input{width:36px}.next-pagination.next-medium .next-pagination-size-selector-title{height:28px;line-height:28px;font-size:12px;vertical-align:middle}.next-pagination.next-medium .next-pagination-size-selector-btn{padding:0 12px}.next-pagination.next-medium .next-pagination-item.next-next:not([disabled]) i,.next-pagination.next-medium .next-pagination-item.next-prev:not([disabled]) i{color:#666}.next-pagination.next-medium .next-pagination-item:hover.next-next:not([disabled]) i,.next-pagination.next-medium .next-pagination-item:hover.next-prev:not([disabled]) i{color:#333}.next-pagination.next-medium.next-arrow-only .next-pagination-item.next-next,.next-pagination.next-medium.next-arrow-only .next-pagination-item.next-prev{width:28px;padding:0}.next-pagination.next-medium.next-arrow-only .next-pagination-item.next-next .next-icon,.next-pagination.next-medium.next-arrow-only .next-pagination-item.next-prev .next-icon{margin:0 auto}.next-pagination.next-medium.next-arrow-prev-only .next-pagination-item.next-prev{width:28px;padding:0}.next-pagination.next-medium.next-arrow-prev-only .next-pagination-item.next-prev .next-icon{margin:0 auto}.next-pagination.next-medium.next-no-border .next-pagination-item.next-next,.next-pagination.next-medium.next-no-border .next-pagination-item.next-prev{padding:0;border:none;background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.next-pagination.next-medium.next-no-border .next-pagination-item.next-next .next-icon,.next-pagination.next-medium.next-no-border .next-pagination-item.next-prev .next-icon{margin:0}.next-pagination.next-medium.next-no-border .next-pagination-item.next-next:not([disabled]):hover i,.next-pagination.next-medium.next-no-border .next-pagination-item.next-prev:not([disabled]):hover i{color:#5584ff}.next-pagination.next-medium.next-no-border .next-pagination-display{margin:0 12px}.next-pagination.next-medium.next-mini .next-pagination-item.next-prev{margin-right:4px}.next-pagination.next-medium.next-mini .next-pagination-item.next-next{margin-left:4px}.next-pagination.next-large .next-pagination-list{margin:0 8px}.next-pagination.next-large .next-pagination-total{line-height:40px;vertical-align:middle}.next-pagination.next-large .next-pagination-item{padding:0 15px}.next-pagination.next-large .next-pagination-item+.next-pagination-item{margin:0 0 0 8px}.next-pagination.next-large .next-pagination-ellipsis{height:40px;line-height:40px;margin-left:8px;margin-right:8px}.next-pagination.next-large .next-pagination-ellipsis:before{width:16px;font-size:16px;line-height:inherit}.next-pagination.next-large .next-pagination-display,.next-pagination.next-large .next-pagination-display em,.next-pagination.next-large .next-pagination-jump-text{font-size:16px}.next-pagination.next-large .next-pagination-jump-input{width:48px}.next-pagination.next-large .next-pagination-size-selector-title{height:40px;line-height:40px;font-size:16px;vertical-align:middle}.next-pagination.next-large .next-pagination-size-selector-btn{padding:0 16px}.next-pagination.next-large .next-pagination-item.next-next:not([disabled]) i,.next-pagination.next-large .next-pagination-item.next-prev:not([disabled]) i{color:#666}.next-pagination.next-large .next-pagination-item:hover.next-next:not([disabled]) i,.next-pagination.next-large .next-pagination-item:hover.next-prev:not([disabled]) i{color:#333}.next-pagination.next-large.next-arrow-only .next-pagination-item.next-next,.next-pagination.next-large.next-arrow-only .next-pagination-item.next-prev{width:40px;padding:0}.next-pagination.next-large.next-arrow-only .next-pagination-item.next-next .next-icon,.next-pagination.next-large.next-arrow-only .next-pagination-item.next-prev .next-icon{margin:0 auto}.next-pagination.next-large.next-arrow-prev-only .next-pagination-item.next-prev{width:40px;padding:0}.next-pagination.next-large.next-arrow-prev-only .next-pagination-item.next-prev .next-icon{margin:0 auto}.next-pagination.next-large.next-no-border .next-pagination-item.next-next,.next-pagination.next-large.next-no-border .next-pagination-item.next-prev{padding:0;border:none;background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.next-pagination.next-large.next-no-border .next-pagination-item.next-next .next-icon,.next-pagination.next-large.next-no-border .next-pagination-item.next-prev .next-icon{margin:0}.next-pagination.next-large.next-no-border .next-pagination-item.next-next:not([disabled]):hover i,.next-pagination.next-large.next-no-border .next-pagination-item.next-prev:not([disabled]):hover i{color:#5584ff}.next-pagination.next-large.next-no-border .next-pagination-display{margin:0 16px}.next-pagination.next-large.next-mini .next-pagination-item.next-prev{margin-right:8px}.next-pagination.next-large.next-mini .next-pagination-item.next-next{margin-left:8px}.next-paragraph{color:#333}.next-paragraph-short{line-height:1.5}.next-paragraph-long{line-height:1.7}.next-paragraph-small{font-size:12px}.next-paragraph-medium{font-size:14px}.next-progress-circle[dir=rtl] .next-progress-circle-container{-webkit-transform:scaleX(-1);-ms-transform:scaleX(-1);transform:scaleX(-1)}.next-progress-line[dir=rtl] .next-progress-line-overlay{left:auto;right:0}.next-progress-line,.next-progress-line *,.next-progress-line :after,.next-progress-line :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-progress-line{width:100%;display:inline-block;position:relative}.next-progress-line-container{display:inline-block;width:100%;vertical-align:middle}.next-progress-line-underlay{position:relative;width:100%;background-color:#ebecf0}.next-progress-line-overlay{position:absolute;left:0;top:0;-webkit-transition:all 1s cubic-bezier(.65,.2,.35,1);transition:all 1s cubic-bezier(.65,.2,.35,1)}.next-progress-line-overlay-normal{background-color:#5584ff}.next-progress-line-overlay-success{background-color:#46bc15}.next-progress-line-overlay-error,.next-progress-line-overlay-started{background-color:#ff3000}.next-progress-line-overlay-middle{background-color:#ff9300}.next-progress-line-overlay-finishing{background-color:#46bc15}.next-progress-line.next-small .next-progress-line-underlay{border-radius:20px;height:4px}.next-progress-line.next-small .next-progress-line-overlay{height:4px;border-radius:20px;top:50%;margin-top:-2px}.next-progress-line.next-small .next-progress-line-text{font-size:12px;line-height:4px}.next-progress-line.next-medium .next-progress-line-underlay{border-radius:20px;height:8px}.next-progress-line.next-medium .next-progress-line-overlay{height:8px;border-radius:20px;top:50%;margin-top:-4px}.next-progress-line.next-medium .next-progress-line-text{font-size:12px;line-height:8px}.next-progress-line.next-large .next-progress-line-underlay{border-radius:20px;height:12px}.next-progress-line.next-large .next-progress-line-overlay{height:12px;border-radius:20px;top:50%;margin-top:-6px}.next-progress-line.next-large .next-progress-line-text{font-size:12px;line-height:12px}.next-progress-line-show-info .next-progress-line-container{padding-right:60px;margin-right:-60px}.next-progress-line-show-info .next-progress-line-text{width:50px;text-align:left;margin-left:10px;vertical-align:middle;display:inline-block;color:#333}.next-progress-line-show-border .next-progress-line-underlay{border:1px solid #dcdee3}.next-progress-line-show-border.next-small .next-progress-line-underlay{border-radius:20px;height:6px}.next-progress-line-show-border.next-small .next-progress-line-overlay{height:4px;border-radius:20px;top:50%;margin-top:-2px}.next-progress-line-show-border.next-small .next-progress-line-text{font-size:12px;line-height:6px}.next-progress-line-show-border.next-medium .next-progress-line-underlay{border-radius:20px;height:10px}.next-progress-line-show-border.next-medium .next-progress-line-overlay{height:8px;border-radius:20px;top:50%;margin-top:-4px}.next-progress-line-show-border.next-medium .next-progress-line-text{font-size:12px;line-height:10px}.next-progress-line-show-border.next-large .next-progress-line-underlay{border-radius:20px;height:14px}.next-progress-line-show-border.next-large .next-progress-line-overlay{height:12px;border-radius:20px;top:50%;margin-top:-6px}.next-progress-line-show-border.next-large .next-progress-line-text{font-size:12px;line-height:14px}.next-progress-circle,.next-progress-circle *,.next-progress-circle :after,.next-progress-circle :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-progress-circle{position:relative;display:inline-block}.next-progress-circle-underlay{stroke-width:8px;stroke:#ebecf0}.next-progress-circle-overlay{-webkit-transition:all 1s cubic-bezier(.65,.2,.35,1);transition:all 1s cubic-bezier(.65,.2,.35,1);stroke-linecap:round;stroke-width:8px}.next-progress-circle-overlay-normal{stroke:#5584ff}.next-progress-circle-overlay-success{stroke:#46bc15}.next-progress-circle-overlay-error,.next-progress-circle-overlay-started{stroke:#ff3000}.next-progress-circle-overlay-middle{stroke:#ff9300}.next-progress-circle-overlay-finishing{stroke:#46bc15}.next-progress-circle.next-small{width:100px;height:100px;font-size:20px}.next-progress-circle.next-medium{width:116px;height:116px;font-size:24px}.next-progress-circle.next-large{width:132px;height:132px;font-size:36px}.next-progress-circle-text{display:block;position:absolute;width:100%;top:50%;left:0;text-align:center;line-height:1;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:-webkit-transform .3s cubic-bezier(.65,.2,.35,1);transition:-webkit-transform .3s cubic-bezier(.65,.2,.35,1);transition:transform .3s cubic-bezier(.65,.2,.35,1);transition:transform .3s cubic-bezier(.65,.2,.35,1),-webkit-transform .3s cubic-bezier(.65,.2,.35,1);color:#333}.next-range{width:100%;font-family:inherit;font-weight:400;font-size:inherit;line-height:inherit;vertical-align:baseline;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;cursor:pointer}.next-range,.next-range *,.next-range :after,.next-range :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-range .next-range-inner{position:relative}.next-range .next-range-inner:only-child{margin-top:auto;margin-bottom:auto}.next-range .next-range-track{position:absolute;width:100%;top:50%;border-radius:0}.next-range .next-range-selected{position:absolute;width:0;top:50%;left:0;border-radius:0}.next-range .next-range-scale{position:relative;width:100%;height:12px}.next-range .next-range-scale .next-range-scale-item{position:absolute;left:0;width:2px;border:1px solid;border-radius:0}.next-range .next-range-scale .next-range-scale-item:last-child{margin-left:-2px}.next-range .next-range-slider{position:absolute;top:50%;left:0;border-radius:50%}.next-range .next-range-slider-inner{position:absolute;top:50%;left:50%;border:1px solid #c4c6cf;border-radius:50%;-webkit-transition:border-color .4s cubic-bezier(.23,1,.32,1),-webkit-transform .4s cubic-bezier(.23,1,.32,1);transition:border-color .4s cubic-bezier(.23,1,.32,1),-webkit-transform .4s cubic-bezier(.23,1,.32,1);transition:transform .4s cubic-bezier(.23,1,.32,1),border-color .4s cubic-bezier(.23,1,.32,1);transition:transform .4s cubic-bezier(.23,1,.32,1),border-color .4s cubic-bezier(.23,1,.32,1),-webkit-transform .4s cubic-bezier(.23,1,.32,1)}.next-range .next-range-frag.next-range-active .next-range-slider .next-range-slider-inner,.next-range .next-range-slider.next-range-slider-moving .next-range-slider-inner{border:2px solid #5584ff;-webkit-box-shadow:2px 2px 4px 0 rgba(0,0,0,.12);box-shadow:2px 2px 4px 0 rgba(0,0,0,.12);-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.next-range .next-range-mark{position:relative;cursor:auto}.next-range .next-range-mark .next-range-mark-text{position:absolute;left:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);padding-left:2px;text-align:center}.next-range .next-range-frag{position:absolute;top:0}.next-range .next-range-frag .next-range-slider{left:0}.next-range .next-range-frag .next-range-slider:nth-child(2){left:100%}.next-range .next-range-frag .next-range-selected{width:100%}.next-range.disabled{cursor:not-allowed}.next-range.disabled .next-range-mark{cursor:auto}.next-range .next-range-track,.next-range .next-range-track:hover{background-color:#c4c6cf}.next-range .next-range-selected,.next-range .next-range-selected:hover{background-color:#5584ff}.next-range .next-range-scale .next-range-scale-item{border-color:#c4c6cf;background-color:#c4c6cf}.next-range .next-range-scale .next-range-scale-item:hover{border-color:#c4c6cf}.next-range .next-range-scale .next-range-scale-item.activated{border-color:#5584ff;background-color:#5584ff}.next-range .next-range-scale .next-range-scale-item.activated:hover{border-color:#5584ff}.next-range .next-range-slider-inner{background-color:#fff;border-color:#c4c6cf}.next-range .next-range-slider-inner:hover{background-color:#fff;-webkit-box-shadow:3px 3px 5px 0 rgba(0,0,0,.12);box-shadow:3px 3px 5px 0 rgba(0,0,0,.12);-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.next-range .next-range-mark .next-range-mark-text,.next-range .next-range-mark .next-range-mark-text:hover{color:#999}.next-range .next-range-mark .next-range-mark-text.activated,.next-range .next-range-mark .next-range-mark-text.activated:hover{color:#333}.next-range.disabled .next-range-track{background-color:#c4c6cf}.next-range.disabled .next-range-selected{background-color:#a0a2ad}.next-range.disabled .next-range-scale-item{border-color:#c4c6cf}.next-range.disabled .next-range-scale-item.activated{border-color:#a0a2ad}.next-range.disabled .next-range-slider-inner{background-color:#e6e7eb;border-color:#e6e7eb;-webkit-transform:none;-ms-transform:none;transform:none;-webkit-box-shadow:none;box-shadow:none}.next-range.disabled .next-range-mark-text{color:#ccc}.next-range.disabled .next-range-mark-text.activated{color:#999}.next-range .next-range-selected,.next-range .next-range-track{height:4px;margin-top:-2px}.next-range .next-range-frag{margin-top:-2px;height:16px}.next-range .next-range-slider{-webkit-box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);box-shadow:1px 1px 3px 0 rgba(0,0,0,.12)}.next-range .next-range-slider,.next-range .next-range-slider-inner{height:16px;width:16px;margin-top:-8px;margin-left:-8px}.next-range .next-range-mark{display:block}.next-range .next-range-mark .next-range-mark-text{font-size:12px;font-weight:400;line-height:20px;height:20px}.next-range .next-range-mark.next-range-mark-below{height:30px}.next-range .next-range-mark.next-range-mark-below .next-range-mark-text{bottom:0}.next-range .next-range-mark.next-range-mark-above{height:30px}.next-range .next-range-scale .next-range-scale-item{height:12px}.next-range.simulation-hover>.next-range-slider-inner{background-color:#fff;-webkit-box-shadow:#fff;box-shadow:#fff;-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.next-range.simulation-click>.next-range-slider-inner{border:2px solid #5584ff;-webkit-box-shadow:2px 2px 4px 0 rgba(0,0,0,.12);box-shadow:2px 2px 4px 0 rgba(0,0,0,.12);-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.next-range[dir=rtl] .next-range-mark{position:relative;cursor:auto}.next-range[dir=rtl] .next-range-mark .next-range-mark-text{position:absolute;right:0;-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%);padding-right:2px;text-align:center}.next-rating[dir=rtl] .next-rating-overlay{right:0;left:auto}.next-rating[dir=rtl] .next-rating-overlay .next-rating-icon,.next-rating[dir=rtl] .next-rating-underlay .next-rating-icon{margin-right:4px;margin-left:0}.next-rating[dir=rtl] .next-rating-overlay .next-rating-icon:last-child,.next-rating[dir=rtl] .next-rating-underlay .next-rating-icon:last-child{margin-left:4px}.next-rating{vertical-align:top;display:inline-block;position:relative}.next-rating:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-rating-base{float:left;cursor:pointer}.next-rating-text{float:left}.next-rating-base-disabled{cursor:not-allowed}.next-rating-underlay{white-space:nowrap;overflow:hidden}.next-rating-underlay .next-icon{color:#e2e4e8}.next-rating-stroke-mode .next-rating-underlay .next-icon{color:transparent;-webkit-text-stroke:1px #5584ff}.next-rating-overlay{white-space:nowrap;overflow:hidden;position:absolute;width:0;top:0;left:0}.next-rating-overlay .next-icon{color:#5584ff}.next-rating-overlay .next-rating-icon,.next-rating-underlay .next-rating-icon{margin-left:4px}.next-rating-overlay .next-rating-icon:last-child,.next-rating-underlay .next-rating-icon:last-child{margin-right:4px}.next-rating-overlay .next-icon,.next-rating-underlay .next-icon{-webkit-transition:all 50ms ease-in;transition:all 50ms ease-in}.next-rating-overlay .next-icon.hover,.next-rating-underlay .next-icon.hover{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}.next-rating-overlay .next-icon.clicked,.next-rating-underlay .next-icon.clicked{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}.next-rating-info{top:calc(100% + 4px);left:0;padding:4px 8px 3px;font-size:12px;white-space:nowrap}.next-rating-info,.next-rating-info:after{position:absolute;border:1px solid #e2e4e8;background:#fff}.next-rating-info:after{content:" ";width:4px;height:4px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);border-bottom-color:transparent;border-right-color:transparent;top:-3px;left:4px}.next-rating.hover,.next-rating:focus{outline:none}.next-rating.hover .next-rating-overlay .next-icon,.next-rating:focus .next-rating-overlay .next-icon{color:#5584ff}.next-rating-grade-low.hover .next-rating-overlay .next-icon,.next-rating-grade-low .next-rating-overlay .next-icon{color:#666}.next-rating-grade-high.hover .next-rating-overlay .next-icon,.next-rating-grade-high .next-rating-overlay .next-icon{color:#5584ff}.next-rating-small{font-size:12px}.next-rating-small .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-rating-small .next-rating-text{margin-left:8px}.next-rating-medium{font-size:12px}.next-rating-medium .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-rating-medium .next-rating-text{margin-left:12px}.next-rating-large{font-size:16px}.next-rating-large .next-icon:before{width:20px;font-size:20px;line-height:inherit}.next-rating-large .next-rating-text{margin-left:16px}.next-search-simple[dir=rtl].next-large .next-search-icon{margin-left:12px;margin-right:0}.next-search-simple[dir=rtl].next-medium .next-search-icon{margin-left:8px;margin-right:0}.next-search-simple[dir=rtl].next-normal .next-search-left .next-search-left-addon{border-left:1px solid #c4c6cf;border-right:none}.next-search-simple[dir=rtl].next-dark .next-search-left{border-color:#c4c6cf}.next-search-simple[dir=rtl].next-dark .next-search-left .next-search-left-addon{border-right:1px solid #c4c6cf}.next-search-simple[dir=rtl].next-dark:hover .next-search-left{border-color:#c4c6cf}.next-search-simple[dir=rtl].next-dark .next-search-icon{color:#999}.next-search-simple[dir=rtl].next-dark .next-search-icon:hover{color:#666}.next-search-normal[dir=rtl] .next-search-left{border-left:none;border-top-right-radius:3px;border-bottom-right-radius:3px;border-top-left-radius:0;border-bottom-left-radius:0}.next-search-normal[dir=rtl] .next-search-btn.next-btn{border-radius:3px 0 0 3px!important}.next-search-normal[dir=rtl] .next-input{border-radius:0 3px 3px 0}.next-search-normal[dir=rtl].next-primary .next-input{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:1px;border-bottom-right-radius:1px}.next-search-normal[dir=rtl].next-primary .next-search-left .next-search-left-addon{border-left:1px solid #e6e7eb;border-right:none}.next-search-normal[dir=rtl].next-secondary .next-input{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:1px;border-bottom-right-radius:1px}.next-search-normal[dir=rtl].next-secondary .next-search-left .next-search-left-addon{border-left:1px solid #e6e7eb;border-right:none}.next-search-normal[dir=rtl].next-normal .next-input{border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:1px;border-bottom-right-radius:1px}.next-search-normal[dir=rtl].next-normal .next-search-left .next-search-left-addon{border-left:1px solid #e6e7eb;border-right:none}.next-search-normal[dir=rtl].next-dark .next-search-left .next-search-left-addon{border-left:1px solid #5584ff;border-right:none}.next-search{width:100%;display:inline-block}.next-search,.next-search *,.next-search :after,.next-search :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-search .next-input,.next-search .next-select{border:none}.next-search .next-select .next-input,.next-search .next-select .next-input .next-input-text-field{height:auto}.next-search .next-search-left{border-style:solid;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.next-search .next-search-left-addon .next-input,.next-search .next-search-left-addon .next-select-trigger-search{min-height:100%;border-bottom-right-radius:0;border-top-right-radius:0}.next-search .next-search-left-addon .next-select-values{line-height:1}.next-search .next-search-left-addon+.next-search-input .next-input{border-bottom-left-radius:0;border-top-left-radius:0}.next-search .next-search-input{width:100%}.next-search .next-search-btn{-webkit-box-shadow:none;box-shadow:none}.next-search-normal{width:600px}.next-search-normal .next-search-left{border-top-left-radius:3px;border-bottom-left-radius:3px}.next-search-normal .next-input{border-radius:3px 0 0 3px}.next-search-normal .next-btn{border-radius:0 3px 3px 0}.next-search-normal.next-primary .next-search-left{border-color:#5584ff}.next-search-normal.next-primary .next-search-left .next-search-left-addon{border-right:1px solid #e6e7eb}.next-search-normal.next-primary:hover .next-btn,.next-search-normal.next-primary:hover .next-search-left{border-color:#5584ff}.next-search-normal.next-primary .next-search-btn{background:#5584ff;border-color:#5584ff;color:#fff}.next-search-normal.next-primary .next-search-btn:hover{background:#3e71f7;border-color:#5584ff;color:#fff}.next-search-normal.next-primary .next-search-btn .next-icon,.next-search-normal.next-primary .next-search-btn .next-icon:hover{color:#fff}.next-search-normal.next-primary.next-large{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-primary.next-large .next-search-btn,.next-search-normal.next-primary.next-large .next-search-left{border-width:2px;height:60px}.next-search-normal.next-primary.next-large .next-search-input{height:56px;overflow-y:hidden}.next-search-normal.next-primary.next-large .next-search-input input{height:56px;line-height:56px \0}.next-search-normal.next-primary.next-large .next-select{height:56px}.next-search-normal.next-primary.next-large .next-search-btn{font-size:16px}.next-search-normal.next-primary.next-large .next-search-btn .next-icon:before{width:24px;font-size:24px;line-height:inherit}.next-search-normal.next-primary.next-large .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-primary.next-medium{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-primary.next-medium .next-search-btn,.next-search-normal.next-primary.next-medium .next-search-left{border-width:2px;height:40px}.next-search-normal.next-primary.next-medium .next-search-input{height:36px;overflow-y:hidden}.next-search-normal.next-primary.next-medium .next-search-input input{height:36px;line-height:36px \0}.next-search-normal.next-primary.next-medium .next-select{height:36px}.next-search-normal.next-primary.next-medium .next-search-btn{font-size:16px}.next-search-normal.next-primary.next-medium .next-search-btn .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-search-normal.next-primary.next-medium .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-primary .next-input{border-top-left-radius:1px;border-bottom-left-radius:1px}.next-search-normal.next-secondary .next-search-left{border-color:#c4c6cf}.next-search-normal.next-secondary .next-search-left .next-search-left-addon{border-right:1px solid #e6e7eb}.next-search-normal.next-secondary:hover .next-btn,.next-search-normal.next-secondary:hover .next-search-left{border-color:#5584ff}.next-search-normal.next-secondary .next-search-btn{background:#5584ff;border-color:#5584ff;color:#fff}.next-search-normal.next-secondary .next-search-btn:hover{background:#3e71f7;border-color:#5584ff;color:#fff}.next-search-normal.next-secondary .next-search-btn .next-icon,.next-search-normal.next-secondary .next-search-btn .next-icon:hover{color:#fff}.next-search-normal.next-secondary.next-large{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-secondary.next-large .next-search-btn,.next-search-normal.next-secondary.next-large .next-search-left{border-width:1px;height:60px}.next-search-normal.next-secondary.next-large .next-search-input{height:58px;overflow-y:hidden}.next-search-normal.next-secondary.next-large .next-search-input input{height:58px;line-height:58px \0}.next-search-normal.next-secondary.next-large .next-select{height:58px}.next-search-normal.next-secondary.next-large .next-search-btn{font-size:16px}.next-search-normal.next-secondary.next-large .next-search-btn .next-icon:before{width:24px;font-size:24px;line-height:inherit}.next-search-normal.next-secondary.next-large .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-secondary.next-medium{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-secondary.next-medium .next-search-btn,.next-search-normal.next-secondary.next-medium .next-search-left{border-width:1px;height:40px}.next-search-normal.next-secondary.next-medium .next-search-input{height:38px;overflow-y:hidden}.next-search-normal.next-secondary.next-medium .next-search-input input{height:38px;line-height:38px \0}.next-search-normal.next-secondary.next-medium .next-select{height:38px}.next-search-normal.next-secondary.next-medium .next-search-btn{font-size:16px}.next-search-normal.next-secondary.next-medium .next-search-btn .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-search-normal.next-secondary.next-medium .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-secondary .next-input{border-top-left-radius:2px;border-bottom-left-radius:2px}.next-search-normal.next-normal .next-search-left{border-color:#c4c6cf}.next-search-normal.next-normal .next-search-left .next-search-left-addon{border-right:1px solid #e6e7eb}.next-search-normal.next-normal:hover .next-btn,.next-search-normal.next-normal:hover .next-search-left{border-color:#a0a2ad}.next-search-normal.next-normal .next-search-btn{background:#f7f8fa;border-color:#c4c6cf;color:#666}.next-search-normal.next-normal .next-search-btn:hover{background:#ebecf0;border-color:#a0a2ad;color:#333}.next-search-normal.next-normal .next-search-btn .next-icon{color:#666}.next-search-normal.next-normal .next-search-btn .next-icon:hover{color:#333}.next-search-normal.next-normal.next-large{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-normal.next-large .next-search-btn,.next-search-normal.next-normal.next-large .next-search-left{border-width:1px;height:60px}.next-search-normal.next-normal.next-large .next-search-input{height:58px;overflow-y:hidden}.next-search-normal.next-normal.next-large .next-search-input input{height:58px;line-height:58px \0}.next-search-normal.next-normal.next-large .next-select{height:58px}.next-search-normal.next-normal.next-large .next-search-btn{font-size:16px}.next-search-normal.next-normal.next-large .next-search-btn .next-icon:before{width:24px;font-size:24px;line-height:inherit}.next-search-normal.next-normal.next-large .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-normal.next-medium{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-normal.next-medium .next-search-btn,.next-search-normal.next-normal.next-medium .next-search-left{border-width:1px;height:40px}.next-search-normal.next-normal.next-medium .next-search-input{height:38px;overflow-y:hidden}.next-search-normal.next-normal.next-medium .next-search-input input{height:38px;line-height:38px \0}.next-search-normal.next-normal.next-medium .next-select{height:38px}.next-search-normal.next-normal.next-medium .next-search-btn{font-size:16px}.next-search-normal.next-normal.next-medium .next-search-btn .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-search-normal.next-normal.next-medium .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-normal .next-input{border-top-left-radius:2px;border-bottom-left-radius:2px}.next-search-normal.next-dark .next-search-left{border-color:#5584ff}.next-search-normal.next-dark .next-search-left .next-search-left-addon{border-right:1px solid #5584ff}.next-search-normal.next-dark:hover .next-btn,.next-search-normal.next-dark:hover .next-search-left{border-color:#5584ff}.next-search-normal.next-dark .next-search-btn{background:#5584ff;border-color:#5584ff;color:#fff}.next-search-normal.next-dark .next-search-btn:hover{background:#3e71f7;border-color:#5584ff;color:#fff}.next-search-normal.next-dark .next-search-btn .next-icon,.next-search-normal.next-dark .next-search-btn .next-icon:hover,.next-search-normal.next-dark .next-select-inner,.next-search-normal.next-dark input{color:#fff}.next-search-normal.next-dark .next-input,.next-search-normal.next-dark .next-select{background:hsla(0,0%,100%,0)}.next-search-normal.next-dark.next-large{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-dark.next-large .next-search-btn,.next-search-normal.next-dark.next-large .next-search-left{border-width:1px;height:60px}.next-search-normal.next-dark.next-large .next-search-input{height:58px;overflow-y:hidden}.next-search-normal.next-dark.next-large .next-search-input input{height:58px;line-height:58px \0}.next-search-normal.next-dark.next-large .next-select{height:58px}.next-search-normal.next-dark.next-large .next-search-btn{font-size:16px}.next-search-normal.next-dark.next-large .next-search-btn .next-icon:before{width:24px;font-size:24px;line-height:inherit}.next-search-normal.next-dark.next-large .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal.next-dark.next-medium{-webkit-box-shadow:none;box-shadow:none}.next-search-normal.next-dark.next-medium .next-search-btn,.next-search-normal.next-dark.next-medium .next-search-left{border-width:1px;height:40px}.next-search-normal.next-dark.next-medium .next-search-input{height:38px;overflow-y:hidden}.next-search-normal.next-dark.next-medium .next-search-input input{height:38px;line-height:38px \0}.next-search-normal.next-dark.next-medium .next-select{height:38px}.next-search-normal.next-dark.next-medium .next-search-btn{font-size:16px}.next-search-normal.next-dark.next-medium .next-search-btn .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-search-normal.next-dark.next-medium .next-search-btn .next-search-btn-text{display:inline-block;padding-left:0}.next-search-normal:not([dir=rtl]) .next-search-left{border-right:none}.next-search-simple{width:300px;-webkit-box-shadow:none;box-shadow:none;border-radius:3px}.next-search-simple .next-search-icon{cursor:pointer;-webkit-transition:all .3s ease-out;transition:all .3s ease-out}.next-search-simple .next-input,.next-search-simple .next-search-left{border-radius:3px}.next-search-simple.next-large .next-search-icon{margin-right:12px}.next-search-simple.next-medium .next-search-icon{margin-right:8px}.next-search-simple.next-normal .next-search-left{border-color:#c4c6cf}.next-search-simple.next-normal .next-search-left .next-search-left-addon{border-right:1px solid #c4c6cf}.next-search-simple.next-normal:hover .next-search-left{border-color:#a0a2ad}.next-search-simple.next-normal .next-search-icon{color:#999}.next-search-simple.next-normal .next-search-icon:hover{color:#666}.next-search-simple.next-normal .next-search-left{border-width:1px}.next-search-simple.next-normal.next-large .next-search-icon:before{width:20px;font-size:20px;line-height:inherit}.next-search-simple.next-normal.next-medium .next-search-icon:before{width:12px;font-size:12px;line-height:inherit}.next-search-simple.next-dark .next-search-left{border-color:#c4c6cf}.next-search-simple.next-dark .next-search-left .next-search-left-addon{border-right:1px solid #c4c6cf}.next-search-simple.next-dark:hover .next-search-left{border-color:#c4c6cf}.next-search-simple.next-dark .next-search-icon{color:#999}.next-search-simple.next-dark .next-search-icon:hover{color:#666}.next-search-simple.next-dark .next-select-inner,.next-search-simple.next-dark input{color:#fff}.next-search-simple.next-dark .next-input,.next-search-simple.next-dark .next-select{background:hsla(0,0%,100%,0)}.next-search-simple.next-dark .next-search-left{border-width:1px}.next-search-simple.next-dark.next-large .next-search-icon:before{width:20px;font-size:20px;line-height:inherit}.next-search-simple.next-dark.next-medium .next-search-icon:before{width:12px;font-size:12px;line-height:inherit}.next-search-simple .next-select.next-large{height:38px}.next-search-simple .next-select.next-medium{height:26px}.next-slick{position:relative;display:block;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.next-slick,.next-slick *,.next-slick :after,.next-slick :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-slick-initialized .next-slick-slide{display:block}.next-slick-list{position:relative;overflow:hidden;display:block;margin:0;padding:0;-webkit-transform:translateZ(0);transform:translateZ(0)}.next-slick-list:focus{outline:none}.next-slick-list.dragging{cursor:pointer;cursor:hand}.next-slick-track{position:relative;top:0;left:0;display:block;-webkit-transform:translateZ(0);transform:translateZ(0)}.next-slick-slide{float:left;height:100%;min-height:1px;outline:0;-webkit-transition:all .3s cubic-bezier(.86,0,.07,1);transition:all .3s cubic-bezier(.86,0,.07,1)}.next-slick[dir=rtl] .next-slick-slide{float:right}.next-slick-slide img{display:block}.next-slick-arrow{display:block;position:absolute;cursor:pointer;text-align:center;-webkit-transition:.4s ease-in;transition:.4s ease-in}.next-slick-arrow.inner{color:#fff;background:#000;opacity:.2;padding:0;border:none}.next-slick-arrow.inner:focus,.next-slick-arrow.inner:hover{color:#fff;background:#000;opacity:.4}.next-slick-arrow.inner.disabled{color:#ccc;background:#f7f8fa;opacity:.5}.next-slick-arrow.outer{color:#666;background:transparent;opacity:.32;padding:0;border:none;border-radius:0}.next-slick-arrow.outer:focus,.next-slick-arrow.outer:hover{color:#333;background:transparent;opacity:.32}.next-slick-arrow.outer.disabled{color:#ccc;background:transparent;opacity:.32}.next-slick-arrow.disabled{cursor:not-allowed}.next-slick-dots{display:block;position:absolute;margin:0;padding:0}.next-slick-dots-item{position:relative;display:inline-block;cursor:pointer}.next-slick-dots-item button{cursor:pointer;border:0 solid #fff;outline:none;padding:0;height:8px;width:8px;border-radius:50%;background:rgba(0,0,0,.32)}.next-slick-dots-item button:hover{background-color:rgba(0,0,0,.32);border-color:#fff}.next-slick-dots-item.active button,.next-slick-dots-item button:focus{background:#5584ff;border-color:#fff;-webkit-animation:zoom .3s cubic-bezier(.86,0,.07,1);animation:zoom .3s cubic-bezier(.86,0,.07,1)}.next-slick-dots.hoz{width:100%;bottom:12px;left:0;text-align:center}.next-slick-dots.hoz .next-slick-dots-item{margin:0 4px}.next-slick-dots.ver{width:16px;top:0;right:20px;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.next-slick-dots.ver .next-slick-dots-item{margin:0}.next-slick.next-slick-hoz.next-slick-outer{padding:0 24px}.next-slick.next-slick-hoz .next-slick-arrow.medium{width:28px;height:56px;line-height:56px}.next-slick.next-slick-hoz .next-slick-arrow.medium .next-icon:before{width:20px;font-size:20px;line-height:inherit}.next-slick.next-slick-hoz .next-slick-arrow.medium.inner{top:calc((100% - 56px) / 2)}.next-slick.next-slick-hoz .next-slick-arrow.medium.inner.next-slick-prev{left:0}.next-slick.next-slick-hoz .next-slick-arrow.medium.inner.next-slick-next{right:0}.next-slick.next-slick-hoz .next-slick-arrow.medium.outer{top:calc((100% - 56px) / 2)}.next-slick.next-slick-hoz .next-slick-arrow.medium.outer.next-slick-prev{left:-4px}.next-slick.next-slick-hoz .next-slick-arrow.medium.outer.next-slick-next{right:-4px}.next-slick.next-slick-hoz .next-slick-arrow.large{width:48px;height:96px;line-height:96px}.next-slick.next-slick-hoz .next-slick-arrow.large .next-icon:before{width:32px;font-size:32px;line-height:inherit}.next-slick.next-slick-hoz .next-slick-arrow.large.inner{top:calc((100% - 96px) / 2)}.next-slick.next-slick-hoz .next-slick-arrow.large.inner.next-slick-prev{left:0}.next-slick.next-slick-hoz .next-slick-arrow.large.inner.next-slick-next{right:0}.next-slick.next-slick-hoz .next-slick-arrow.large.outer{top:calc((100% - 96px) / 2)}.next-slick.next-slick-hoz .next-slick-arrow.large.outer.next-slick-prev{left:-8px}.next-slick.next-slick-hoz .next-slick-arrow.large.outer.next-slick-next{right:-8px}.next-slick.next-slick-ver.next-slick-outer{padding:24px 0}.next-slick.next-slick-ver .next-slick-slide{display:block;height:auto}.next-slick.next-slick-ver .next-slick-arrow.medium{width:56px;height:28px;line-height:28px}.next-slick.next-slick-ver .next-slick-arrow.medium .next-icon:before{width:20px;font-size:20px;line-height:inherit}.next-slick.next-slick-ver .next-slick-arrow.medium.inner{left:calc((100% - 56px) / 2)}.next-slick.next-slick-ver .next-slick-arrow.medium.inner.next-slick-prev{top:0}.next-slick.next-slick-ver .next-slick-arrow.medium.inner.next-slick-next{bottom:0}.next-slick.next-slick-ver .next-slick-arrow.medium.outer{left:calc((100% - 56px) / 2)}.next-slick.next-slick-ver .next-slick-arrow.medium.outer.next-slick-prev{top:-4px}.next-slick.next-slick-ver .next-slick-arrow.medium.outer.next-slick-next{bottom:-4px}.next-slick.next-slick-ver .next-slick-arrow.large{width:96px;height:48px;line-height:48px}.next-slick.next-slick-ver .next-slick-arrow.large .next-icon:before{width:32px;font-size:32px;line-height:inherit}.next-slick.next-slick-ver .next-slick-arrow.large.inner{left:calc((100% - 96px) / 2)}.next-slick.next-slick-ver .next-slick-arrow.large.inner.next-slick-prev{top:0}.next-slick.next-slick-ver .next-slick-arrow.large.inner.next-slick-next{bottom:0}.next-slick.next-slick-ver .next-slick-arrow.large.outer{left:calc((100% - 96px) / 2)}.next-slick.next-slick-ver .next-slick-arrow.large.outer.next-slick-prev{top:-16px}.next-slick.next-slick-ver .next-slick-arrow.large.outer.next-slick-next{bottom:-16px}.next-split-btn{display:inline-block;position:relative}.next-split-btn-trigger .next-icon{-webkit-transition:-webkit-transform .3s cubic-bezier(.645,.045,.355,1);transition:-webkit-transform .3s cubic-bezier(.645,.045,.355,1);transition:transform .3s cubic-bezier(.645,.045,.355,1);transition:transform .3s cubic-bezier(.645,.045,.355,1),-webkit-transform .3s cubic-bezier(.645,.045,.355,1)}.next-split-btn-trigger.next-expand .next-icon{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.next-split-btn-trigger.next-btn-normal:not(:disabled):not(.disabled) .next-icon{color:#999}.next-split-btn-trigger.next-small{padding-left:4px;padding-right:4px}.next-split-btn-trigger.next-medium{padding-left:8px;padding-right:8px}.next-step,.next-step *,.next-step:after,.next-step :after,.next-step:before,.next-step :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-step{width:100%;position:relative;border:none}.next-step-item{position:relative;vertical-align:middle;outline:0;height:100%}.next-step-item-body{outline:0}.next-step-item-node{-webkit-transition:all .2s ease;transition:all .2s ease}.next-step-item-node.clicked{-webkit-transform:scale3d(.8,.8,.8);transform:scale3d(.8,.8,.8)}.next-step-horizontal{overflow:hidden}.next-step-horizontal>.next-step-item{display:inline-block;text-align:left}.next-step-vertical>.next-step-item{display:block;text-align:center}.next-step-arrow{display:-webkit-box;display:-ms-flexbox;display:flex}.next-step-arrow .next-step-item{-webkit-box-flex:1;-ms-flex:1;flex:1;height:32px;line-height:32px;margin-left:16px;margin-right:4px}.next-step-arrow .next-step-item:before{content:"";position:absolute;left:-16px;top:0;z-index:1;border:16px solid transparent;border-left-color:transparent}.next-step-arrow .next-step-item:after{content:"";position:absolute;right:-16px;top:0;z-index:1;border-top:16px solid transparent;border-bottom:16px solid transparent;border-left:16px solid transparent}.next-step-arrow .next-step-item .next-step-item-container{min-width:100px;height:32px;cursor:pointer}.next-step-arrow .next-step-item .next-step-item-container .next-step-item-title{height:32px;line-height:32px;font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}.next-step-arrow>.next-step-item-wait{background:#ebecf0}.next-step-arrow>.next-step-item-wait .next-step-item-tail-overlay{background:#000}.next-step-arrow>.next-step-item-wait .next-step-item-tail-underlay{background:#ccc}.next-step-arrow>.next-step-item-wait>.next-step-item-container .next-step-item-progress{width:32px;height:32px}.next-step-arrow>.next-step-item-wait>.next-step-item-container .next-step-item-node{color:#000}.next-step-arrow>.next-step-item-wait>.next-step-item-container .next-step-item-node-circle,.next-step-arrow>.next-step-item-wait>.next-step-item-container .next-step-item-node-dot{background:#ebecf0;border-color:#000}.next-step-arrow>.next-step-item-wait .next-step-item-title{color:#999;word-break:break-word}.next-step-arrow>.next-step-item-wait .next-step-item-content{color:#999;font-size:12px;word-break:break-word}.next-step-arrow>.next-step-item-wait .next-step-item-node-placeholder{width:32px;height:32px;position:relative}.next-step-arrow>.next-step-item-wait .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-arrow>.next-step-item-wait .next-step-item-node-circle{display:block;width:32px;height:32px;font-size:12px;font-weight:400;line-height:30px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-arrow>.next-step-item-wait .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-arrow>.next-step-item-wait .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-arrow>.next-step-item-wait .next-step-item-node-dot{position:absolute;top:50%;margin-top:-16px;left:50%;margin-left:-16px;display:block;width:32px;height:32px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-arrow>.next-step-item-wait:before{border:16px solid #ebecf0;border-left-color:transparent}.next-step-arrow>.next-step-item-wait:after{border-left-color:#ebecf0}.next-step-arrow>.next-step-item-process{background:#5584ff}.next-step-arrow>.next-step-item-process .next-step-item-tail-overlay{background:#000}.next-step-arrow>.next-step-item-process .next-step-item-tail-underlay{background:#ccc}.next-step-arrow>.next-step-item-process>.next-step-item-container .next-step-item-progress{width:32px;height:32px}.next-step-arrow>.next-step-item-process>.next-step-item-container .next-step-item-node{color:#000}.next-step-arrow>.next-step-item-process>.next-step-item-container .next-step-item-node-circle,.next-step-arrow>.next-step-item-process>.next-step-item-container .next-step-item-node-dot{background:#5584ff;border-color:#000}.next-step-arrow>.next-step-item-process .next-step-item-title{color:#fff;word-break:break-word}.next-step-arrow>.next-step-item-process .next-step-item-content{color:#fff;font-size:12px;word-break:break-word}.next-step-arrow>.next-step-item-process .next-step-item-node-placeholder{width:32px;height:32px;position:relative}.next-step-arrow>.next-step-item-process .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-arrow>.next-step-item-process .next-step-item-node-circle{display:block;width:32px;height:32px;font-size:12px;font-weight:400;line-height:30px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-arrow>.next-step-item-process .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-arrow>.next-step-item-process .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-arrow>.next-step-item-process .next-step-item-node-dot{position:absolute;top:50%;margin-top:-16px;left:50%;margin-left:-16px;display:block;width:32px;height:32px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-arrow>.next-step-item-process:before{border:16px solid #5584ff;border-left-color:transparent}.next-step-arrow>.next-step-item-process:after{border-left-color:#5584ff}.next-step-arrow>.next-step-item-finish{background:#dee8ff}.next-step-arrow>.next-step-item-finish .next-step-item-tail-overlay{background:#000}.next-step-arrow>.next-step-item-finish .next-step-item-tail-underlay{background:#ccc}.next-step-arrow>.next-step-item-finish>.next-step-item-container .next-step-item-progress{width:32px;height:32px}.next-step-arrow>.next-step-item-finish>.next-step-item-container .next-step-item-node{color:#000}.next-step-arrow>.next-step-item-finish>.next-step-item-container .next-step-item-node-circle,.next-step-arrow>.next-step-item-finish>.next-step-item-container .next-step-item-node-dot{background:#dee8ff;border-color:#000}.next-step-arrow>.next-step-item-finish .next-step-item-title{color:#5584ff;word-break:break-word}.next-step-arrow>.next-step-item-finish .next-step-item-content{color:#5584ff;font-size:12px;word-break:break-word}.next-step-arrow>.next-step-item-finish .next-step-item-node-placeholder{width:32px;height:32px;position:relative}.next-step-arrow>.next-step-item-finish .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-arrow>.next-step-item-finish .next-step-item-node-circle{display:block;width:32px;height:32px;font-size:12px;font-weight:400;line-height:30px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-arrow>.next-step-item-finish .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-arrow>.next-step-item-finish .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-arrow>.next-step-item-finish .next-step-item-node-dot{position:absolute;top:50%;margin-top:-16px;left:50%;margin-left:-16px;display:block;width:32px;height:32px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-arrow>.next-step-item-finish:before{border:16px solid #dee8ff;border-left-color:transparent}.next-step-arrow>.next-step-item-finish:after{border-left-color:#dee8ff}.next-step-arrow .next-step-item-disabled{cursor:not-allowed;background:#f7f8fa}.next-step-arrow .next-step-item-disabled .next-step-item-tail-overlay{background:#000}.next-step-arrow .next-step-item-disabled .next-step-item-tail-underlay{background:#ccc}.next-step-arrow .next-step-item-disabled>.next-step-item-container .next-step-item-progress{width:32px;height:32px}.next-step-arrow .next-step-item-disabled>.next-step-item-container .next-step-item-node{color:#000}.next-step-arrow .next-step-item-disabled>.next-step-item-container .next-step-item-node-circle,.next-step-arrow .next-step-item-disabled>.next-step-item-container .next-step-item-node-dot{background:#f7f8fa;border-color:#000}.next-step-arrow .next-step-item-disabled .next-step-item-title{color:#ccc;word-break:break-word}.next-step-arrow .next-step-item-disabled .next-step-item-content{color:#ccc;font-size:12px;word-break:break-word}.next-step-arrow .next-step-item-disabled .next-step-item-node-placeholder{width:32px;height:32px;position:relative}.next-step-arrow .next-step-item-disabled .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-arrow .next-step-item-disabled .next-step-item-node-circle{display:block;width:32px;height:32px;font-size:12px;font-weight:400;line-height:30px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-arrow .next-step-item-disabled .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-arrow .next-step-item-disabled .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-arrow .next-step-item-disabled .next-step-item-node-dot{position:absolute;top:50%;margin-top:-16px;left:50%;margin-left:-16px;display:block;width:32px;height:32px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-arrow .next-step-item-disabled:before{border:16px solid #f7f8fa;border-left-color:transparent}.next-step-arrow .next-step-item-disabled:after{border-left-color:#f7f8fa}.next-step-arrow .next-step-item-disabled .next-step-item-container{cursor:not-allowed}.next-step-arrow .next-step-item-read-only,.next-step-arrow .next-step-item-read-only .next-step-item-container{cursor:default}.next-step-arrow .next-step-item-first{margin-left:0}.next-step-arrow .next-step-item-first:before{border:16px solid transparent}.next-step-arrow .next-step-item-last{margin-right:0}.next-step-arrow .next-step-item-last:after{border:16px solid transparent}.next-step-circle .next-step-item-container{display:inline-block;vertical-align:middle;position:relative;padding:0 8px}.next-step-circle .next-step-item-container .next-step-item-progress .next-progress-circle-text{color:#5584ff;font-size:12px}.next-step-circle .next-step-item-container .next-step-item-progress .next-progress-circle-underlay{stroke:#a0a2ad;stroke-width:4px}.next-step-circle .next-step-item-container .next-step-item-progress .next-progress-circle-overlay-normal{stroke:#5584ff;stroke-width:4px}.next-step-circle .next-step-item-container .next-step-item-node-placeholder{display:inline-block}.next-step-circle>.next-step-item-wait .next-step-item-tail-overlay{background:#c4c6cf}.next-step-circle>.next-step-item-wait .next-step-item-tail-underlay{background:#e6e7eb}.next-step-circle>.next-step-item-wait>.next-step-item-container .next-step-item-progress{width:32px;height:32px}.next-step-circle>.next-step-item-wait>.next-step-item-container .next-step-item-node{color:#666}.next-step-circle>.next-step-item-wait>.next-step-item-container .next-step-item-node-circle,.next-step-circle>.next-step-item-wait>.next-step-item-container .next-step-item-node-dot{background:#fff;border-color:#a0a2ad}.next-step-circle>.next-step-item-wait .next-step-item-title{color:#666;word-break:break-word}.next-step-circle>.next-step-item-wait .next-step-item-content{color:#666;font-size:12px;word-break:break-word}.next-step-circle>.next-step-item-wait .next-step-item-node-placeholder{width:32px;height:32px;position:relative}.next-step-circle>.next-step-item-wait .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-circle>.next-step-item-wait .next-step-item-node-circle{display:block;width:32px;height:32px;font-size:12px;font-weight:400;line-height:30px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-circle>.next-step-item-wait .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-circle>.next-step-item-wait .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-circle>.next-step-item-wait .next-step-item-node-dot{position:absolute;top:50%;margin-top:-16px;left:50%;margin-left:-16px;display:block;width:32px;height:32px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-circle>.next-step-item-process .next-step-item-tail-overlay{background:#c4c6cf}.next-step-circle>.next-step-item-process .next-step-item-tail-underlay{background:#e6e7eb}.next-step-circle>.next-step-item-process>.next-step-item-container .next-step-item-progress{width:32px;height:32px}.next-step-circle>.next-step-item-process>.next-step-item-container .next-step-item-node{color:#fff}.next-step-circle>.next-step-item-process>.next-step-item-container .next-step-item-node-circle,.next-step-circle>.next-step-item-process>.next-step-item-container .next-step-item-node-dot{background:#5584ff;border-color:#5584ff}.next-step-circle>.next-step-item-process .next-step-item-title{color:#333;word-break:break-word}.next-step-circle>.next-step-item-process .next-step-item-content{color:#333;font-size:12px;word-break:break-word}.next-step-circle>.next-step-item-process .next-step-item-node-placeholder{width:32px;height:32px;position:relative}.next-step-circle>.next-step-item-process .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-circle>.next-step-item-process .next-step-item-node-circle{display:block;width:32px;height:32px;font-size:12px;font-weight:400;line-height:30px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-circle>.next-step-item-process .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-circle>.next-step-item-process .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-circle>.next-step-item-process .next-step-item-node-dot{position:absolute;top:50%;margin-top:-16px;left:50%;margin-left:-16px;display:block;width:32px;height:32px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-circle>.next-step-item-finish .next-step-item-tail-overlay{background:#5584ff}.next-step-circle>.next-step-item-finish .next-step-item-tail-underlay{background:#e6e7eb}.next-step-circle>.next-step-item-finish>.next-step-item-container .next-step-item-progress{width:32px;height:32px}.next-step-circle>.next-step-item-finish>.next-step-item-container .next-step-item-node{color:#5584ff}.next-step-circle>.next-step-item-finish>.next-step-item-container .next-step-item-node-circle,.next-step-circle>.next-step-item-finish>.next-step-item-container .next-step-item-node-dot{background:#fff;border-color:#5584ff}.next-step-circle>.next-step-item-finish .next-step-item-title{color:#666;word-break:break-word}.next-step-circle>.next-step-item-finish .next-step-item-content{color:#666;font-size:12px;word-break:break-word}.next-step-circle>.next-step-item-finish .next-step-item-node-placeholder{width:32px;height:32px;position:relative}.next-step-circle>.next-step-item-finish .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-circle>.next-step-item-finish .next-step-item-node-circle{display:block;width:32px;height:32px;font-size:12px;font-weight:400;line-height:30px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-circle>.next-step-item-finish .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-circle>.next-step-item-finish .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-circle>.next-step-item-finish .next-step-item-node-dot{position:absolute;top:50%;margin-top:-16px;left:50%;margin-left:-16px;display:block;width:32px;height:32px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-circle .next-step-item-disabled .next-step-item-tail-overlay,.next-step-circle .next-step-item-disabled .next-step-item-tail-underlay{background:#e6e7eb}.next-step-circle .next-step-item-disabled>.next-step-item-container .next-step-item-progress{width:32px;height:32px}.next-step-circle .next-step-item-disabled>.next-step-item-container .next-step-item-node{color:#ccc}.next-step-circle .next-step-item-disabled>.next-step-item-container .next-step-item-node-circle,.next-step-circle .next-step-item-disabled>.next-step-item-container .next-step-item-node-dot{background:#fff;border-color:#e6e7eb}.next-step-circle .next-step-item-disabled .next-step-item-title{color:#ccc;word-break:break-word}.next-step-circle .next-step-item-disabled .next-step-item-content{color:#ccc;font-size:12px;word-break:break-word}.next-step-circle .next-step-item-disabled .next-step-item-node-placeholder{width:32px;height:32px;position:relative}.next-step-circle .next-step-item-disabled .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-circle .next-step-item-disabled .next-step-item-node-circle{display:block;width:32px;height:32px;font-size:12px;font-weight:400;line-height:30px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-circle .next-step-item-disabled .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-circle .next-step-item-disabled .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-circle .next-step-item-disabled .next-step-item-node-dot{position:absolute;top:50%;margin-top:-16px;left:50%;margin-left:-16px;display:block;width:32px;height:32px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-circle .next-step-item-disabled .next-step-item-node,.next-step-circle .next-step-item-disabled .next-step-item-node-placeholder{cursor:not-allowed}.next-step-circle .next-step-item-read-only .next-step-item-node,.next-step-circle .next-step-item-read-only .next-step-item-node-placeholder{cursor:default}.next-step-circle .next-step-item-last .next-step-item-tail{display:none}.next-step-circle.next-step-horizontal{text-align:center;white-space:nowrap}.next-step-circle.next-step-horizontal>.next-step-item .next-step-item-content,.next-step-circle.next-step-horizontal>.next-step-item .next-step-item-title{white-space:normal}.next-step-circle.next-step-horizontal>.next-step-item-wait .next-step-item-tail{display:inline-block;clear:both;width:calc(100% - 48px);vertical-align:middle}.next-step-circle.next-step-horizontal>.next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay{display:block;height:1px;position:relative}.next-step-circle.next-step-horizontal>.next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:1px;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%}.next-step-circle.next-step-horizontal>.next-step-item-wait>.next-step-item-node{padding:0 8px;width:48px;height:32px}.next-step-circle.next-step-horizontal>.next-step-item-wait>.next-step-item-body{width:100px;left:-26px;text-align:center;position:absolute}.next-step-circle.next-step-horizontal>.next-step-item-wait>.next-step-item-body>.next-step-item-title{font-size:14px;line-height:18px;margin-top:8px;font-weight:700}.next-step-circle.next-step-horizontal>.next-step-item-wait>.next-step-item-body>.next-step-item-content{margin-top:4px}.next-step-circle.next-step-horizontal>.next-step-item-process .next-step-item-tail{display:inline-block;clear:both;width:calc(100% - 48px);vertical-align:middle}.next-step-circle.next-step-horizontal>.next-step-item-process .next-step-item-tail .next-step-item-tail-underlay{display:block;height:1px;position:relative}.next-step-circle.next-step-horizontal>.next-step-item-process .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:1px;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%}.next-step-circle.next-step-horizontal>.next-step-item-process>.next-step-item-node{padding:0 8px;width:48px;height:32px}.next-step-circle.next-step-horizontal>.next-step-item-process>.next-step-item-body{width:100px;left:-26px;text-align:center;position:absolute}.next-step-circle.next-step-horizontal>.next-step-item-process>.next-step-item-body>.next-step-item-title{font-size:14px;line-height:18px;margin-top:8px;font-weight:700}.next-step-circle.next-step-horizontal>.next-step-item-process>.next-step-item-body>.next-step-item-content{margin-top:4px}.next-step-circle.next-step-horizontal>.next-step-item-finish .next-step-item-tail{display:inline-block;clear:both;width:calc(100% - 48px);vertical-align:middle}.next-step-circle.next-step-horizontal>.next-step-item-finish .next-step-item-tail .next-step-item-tail-underlay{display:block;height:1px;position:relative}.next-step-circle.next-step-horizontal>.next-step-item-finish .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:1px;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%}.next-step-circle.next-step-horizontal>.next-step-item-finish>.next-step-item-node{padding:0 8px;width:48px;height:32px}.next-step-circle.next-step-horizontal>.next-step-item-finish>.next-step-item-body{width:100px;left:-26px;text-align:center;position:absolute}.next-step-circle.next-step-horizontal>.next-step-item-finish>.next-step-item-body>.next-step-item-title{font-size:14px;line-height:18px;margin-top:8px;font-weight:700}.next-step-circle.next-step-horizontal>.next-step-item-finish>.next-step-item-body>.next-step-item-content{margin-top:4px}.next-step-circle.next-step-horizontal>.next-step-item-disabled .next-step-item-tail{display:inline-block;clear:both;width:calc(100% - 48px);vertical-align:middle}.next-step-circle.next-step-horizontal>.next-step-item-disabled .next-step-item-tail .next-step-item-tail-underlay{display:block;height:1px;position:relative}.next-step-circle.next-step-horizontal>.next-step-item-disabled .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:1px;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%}.next-step-circle.next-step-horizontal>.next-step-item-disabled>.next-step-item-node{padding:0 8px;width:48px;height:32px}.next-step-circle.next-step-horizontal>.next-step-item-disabled>.next-step-item-body{width:100px;left:-26px;text-align:center;position:absolute}.next-step-circle.next-step-horizontal>.next-step-item-disabled>.next-step-item-body>.next-step-item-title{font-size:14px;line-height:18px;margin-top:8px;font-weight:700}.next-step-circle.next-step-horizontal>.next-step-item-disabled>.next-step-item-body>.next-step-item-content{margin-top:4px}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item{vertical-align:unset}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-wait .next-step-item:last-child .next-step-item-tail{display:none}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-wait .next-step-item-body{position:relative;display:inline-block;top:0;left:0;max-width:100px;overflow:hidden;vertical-align:top;text-align:left}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-wait .next-step-item-body .next-step-item-title{display:inline-block;padding-right:8px;margin-top:9px}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-wait .next-step-item-tail{width:calc(100% - 148px);position:absolute;right:0;margin-top:-1px}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-process .next-step-item:last-child .next-step-item-tail{display:none}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-process .next-step-item-body{position:relative;display:inline-block;top:0;left:0;max-width:100px;overflow:hidden;vertical-align:top;text-align:left}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-process .next-step-item-body .next-step-item-title{display:inline-block;padding-right:8px;margin-top:9px}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-process .next-step-item-tail{width:calc(100% - 148px);position:absolute;right:0;margin-top:-1px}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-finish .next-step-item:last-child .next-step-item-tail{display:none}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-finish .next-step-item-body{position:relative;display:inline-block;top:0;left:0;max-width:100px;overflow:hidden;vertical-align:top;text-align:left}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-finish .next-step-item-body .next-step-item-title{display:inline-block;padding-right:8px;margin-top:9px}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-finish .next-step-item-tail{width:calc(100% - 148px);position:absolute;right:0;margin-top:-1px}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-disabled .next-step-item:last-child .next-step-item-tail{display:none}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-disabled .next-step-item-body{position:relative;display:inline-block;top:0;left:0;max-width:100px;overflow:hidden;vertical-align:top;text-align:left}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-disabled .next-step-item-body .next-step-item-title{display:inline-block;padding-right:8px;margin-top:9px}.next-step-circle.next-step-horizontal.next-step-label-horizontal>.next-step-item-disabled .next-step-item-tail{width:calc(100% - 148px);position:absolute;right:0;margin-top:-1px}.next-step-circle.next-step-vertical{font-size:0;display:table-cell;vertical-align:middle;position:relative}.next-step-circle.next-step-vertical .next-step-item-container{padding:0}.next-step-circle.next-step-vertical>.next-step-item:last-child .next-step-item-tail{display:block;visibility:hidden}.next-step-circle.next-step-vertical>.next-step-item-wait .next-step-item-tail{width:1px;height:0;margin:8px auto}.next-step-circle.next-step-vertical>.next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay{height:100%;width:1px;position:relative}.next-step-circle.next-step-vertical>.next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:100%;width:1px}.next-step-circle.next-step-vertical>.next-step-item-wait>.next-step-item-node{padding:8px 0;width:32px;height:48px}.next-step-circle.next-step-vertical>.next-step-item-wait>.next-step-item-body{position:absolute;top:0;left:16px;margin-left:8px}.next-step-circle.next-step-vertical>.next-step-item-wait>.next-step-item-body>.next-step-item-title{margin-top:8px;text-align:left;font-weight:700;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-circle.next-step-vertical>.next-step-item-wait>.next-step-item-body>.next-step-item-content{margin-top:4px;min-height:8px;text-align:left;font-size:12px;line-height:16px}.next-step-circle.next-step-vertical>.next-step-item-process .next-step-item-tail{width:1px;height:0;margin:8px auto}.next-step-circle.next-step-vertical>.next-step-item-process .next-step-item-tail .next-step-item-tail-underlay{height:100%;width:1px;position:relative}.next-step-circle.next-step-vertical>.next-step-item-process .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:100%;width:1px}.next-step-circle.next-step-vertical>.next-step-item-process>.next-step-item-node{padding:8px 0;width:32px;height:48px}.next-step-circle.next-step-vertical>.next-step-item-process>.next-step-item-body{position:absolute;top:0;left:16px;margin-left:8px}.next-step-circle.next-step-vertical>.next-step-item-process>.next-step-item-body>.next-step-item-title{margin-top:8px;text-align:left;font-weight:700;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-circle.next-step-vertical>.next-step-item-process>.next-step-item-body>.next-step-item-content{margin-top:4px;min-height:8px;text-align:left;font-size:12px;line-height:16px}.next-step-circle.next-step-vertical>.next-step-item-finish .next-step-item-tail{width:1px;height:0;margin:8px auto}.next-step-circle.next-step-vertical>.next-step-item-finish .next-step-item-tail .next-step-item-tail-underlay{height:100%;width:1px;position:relative}.next-step-circle.next-step-vertical>.next-step-item-finish .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:100%;width:1px}.next-step-circle.next-step-vertical>.next-step-item-finish>.next-step-item-node{padding:8px 0;width:32px;height:48px}.next-step-circle.next-step-vertical>.next-step-item-finish>.next-step-item-body{position:absolute;top:0;left:16px;margin-left:8px}.next-step-circle.next-step-vertical>.next-step-item-finish>.next-step-item-body>.next-step-item-title{margin-top:8px;text-align:left;font-weight:700;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-circle.next-step-vertical>.next-step-item-finish>.next-step-item-body>.next-step-item-content{margin-top:4px;min-height:8px;text-align:left;font-size:12px;line-height:16px}.next-step-circle.next-step-vertical>.next-step-item-disabled .next-step-item-tail{width:1px;height:0;margin:8px auto}.next-step-circle.next-step-vertical>.next-step-item-disabled .next-step-item-tail .next-step-item-tail-underlay{height:100%;width:1px;position:relative}.next-step-circle.next-step-vertical>.next-step-item-disabled .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:100%;width:1px}.next-step-circle.next-step-vertical>.next-step-item-disabled>.next-step-item-node{padding:8px 0;width:32px;height:48px}.next-step-circle.next-step-vertical>.next-step-item-disabled>.next-step-item-body{position:absolute;top:0;left:16px;margin-left:8px}.next-step-circle.next-step-vertical>.next-step-item-disabled>.next-step-item-body>.next-step-item-title{margin-top:8px;text-align:left;font-weight:700;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-circle.next-step-vertical>.next-step-item-disabled>.next-step-item-body>.next-step-item-content{margin-top:4px;min-height:8px;text-align:left;font-size:12px;line-height:16px}.next-step-dot .next-step-item-container{display:inline-block;vertical-align:middle;position:relative;padding:0 8px;font-size:0}.next-step-dot .next-step-item-container .next-step-item-node-placeholder{display:inline-block}.next-step-dot .next-step-item-container .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-dot .next-step-item-container .next-step-item-node .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-dot>.next-step-item-wait .next-step-item-tail-overlay{background:#c4c6cf}.next-step-dot>.next-step-item-wait .next-step-item-tail-underlay{background:#e6e7eb}.next-step-dot>.next-step-item-wait>.next-step-item-container .next-step-item-progress{width:12px;height:12px}.next-step-dot>.next-step-item-wait>.next-step-item-container .next-step-item-node{color:#999}.next-step-dot>.next-step-item-wait>.next-step-item-container .next-step-item-node-circle,.next-step-dot>.next-step-item-wait>.next-step-item-container .next-step-item-node-dot{background:#fff;border-color:#a0a2ad}.next-step-dot>.next-step-item-wait .next-step-item-title{color:#666;word-break:break-word}.next-step-dot>.next-step-item-wait .next-step-item-content{color:#666;font-size:12px;word-break:break-word}.next-step-dot>.next-step-item-wait .next-step-item-node-placeholder{width:12px;height:12px;position:relative}.next-step-dot>.next-step-item-wait .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-dot>.next-step-item-wait .next-step-item-node-circle{display:block;width:12px;height:12px;font-size:12px;font-weight:400;line-height:10px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-dot>.next-step-item-wait .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-dot>.next-step-item-wait .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-dot>.next-step-item-wait .next-step-item-node-dot{position:absolute;top:50%;margin-top:-6px;left:50%;margin-left:-6px;display:block;width:12px;height:12px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-dot>.next-step-item-process .next-step-item-tail-overlay{background:#c4c6cf}.next-step-dot>.next-step-item-process .next-step-item-tail-underlay{background:#e6e7eb}.next-step-dot>.next-step-item-process>.next-step-item-container .next-step-item-progress{width:12px;height:12px}.next-step-dot>.next-step-item-process>.next-step-item-container .next-step-item-node{color:#5584ff}.next-step-dot>.next-step-item-process>.next-step-item-container .next-step-item-node-circle,.next-step-dot>.next-step-item-process>.next-step-item-container .next-step-item-node-dot{background:#5584ff;border-color:#5584ff}.next-step-dot>.next-step-item-process .next-step-item-title{color:#333;word-break:break-word}.next-step-dot>.next-step-item-process .next-step-item-content{color:#333;font-size:12px;word-break:break-word}.next-step-dot>.next-step-item-process .next-step-item-node-placeholder{width:12px;height:12px;position:relative}.next-step-dot>.next-step-item-process .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-dot>.next-step-item-process .next-step-item-node-circle{display:block;width:12px;height:12px;font-size:12px;font-weight:400;line-height:10px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-dot>.next-step-item-process .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-dot>.next-step-item-process .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-dot>.next-step-item-process .next-step-item-node-dot{position:absolute;top:50%;margin-top:-6px;left:50%;margin-left:-6px;display:block;width:12px;height:12px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-dot>.next-step-item-finish .next-step-item-tail-overlay{background:#5584ff}.next-step-dot>.next-step-item-finish .next-step-item-tail-underlay{background:#e6e7eb}.next-step-dot>.next-step-item-finish>.next-step-item-container .next-step-item-progress{width:12px;height:12px}.next-step-dot>.next-step-item-finish>.next-step-item-container .next-step-item-node{color:#5584ff}.next-step-dot>.next-step-item-finish>.next-step-item-container .next-step-item-node-circle,.next-step-dot>.next-step-item-finish>.next-step-item-container .next-step-item-node-dot{background:#fff;border-color:#5584ff}.next-step-dot>.next-step-item-finish .next-step-item-title{color:#666;word-break:break-word}.next-step-dot>.next-step-item-finish .next-step-item-content{color:#666;font-size:12px;word-break:break-word}.next-step-dot>.next-step-item-finish .next-step-item-node-placeholder{width:12px;height:12px;position:relative}.next-step-dot>.next-step-item-finish .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-dot>.next-step-item-finish .next-step-item-node-circle{display:block;width:12px;height:12px;font-size:12px;font-weight:400;line-height:10px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-dot>.next-step-item-finish .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-dot>.next-step-item-finish .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-dot>.next-step-item-finish .next-step-item-node-dot{position:absolute;top:50%;margin-top:-6px;left:50%;margin-left:-6px;display:block;width:12px;height:12px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-dot .next-step-item-disabled .next-step-item-tail-overlay,.next-step-dot .next-step-item-disabled .next-step-item-tail-underlay{background:#e6e7eb}.next-step-dot .next-step-item-disabled>.next-step-item-container .next-step-item-progress{width:12px;height:12px}.next-step-dot .next-step-item-disabled>.next-step-item-container .next-step-item-node{color:#e6e7eb}.next-step-dot .next-step-item-disabled>.next-step-item-container .next-step-item-node-circle,.next-step-dot .next-step-item-disabled>.next-step-item-container .next-step-item-node-dot{background:#fff;border-color:#dcdee3}.next-step-dot .next-step-item-disabled .next-step-item-title{color:#ccc;word-break:break-word}.next-step-dot .next-step-item-disabled .next-step-item-content{color:#ccc;font-size:12px;word-break:break-word}.next-step-dot .next-step-item-disabled .next-step-item-node-placeholder{width:12px;height:12px;position:relative}.next-step-dot .next-step-item-disabled .next-step-item-node{position:relative;display:inline-block;text-align:center;cursor:pointer}.next-step-dot .next-step-item-disabled .next-step-item-node-circle{display:block;width:12px;height:12px;font-size:12px;font-weight:400;line-height:10px;text-align:center;border:1px solid;border-radius:50%;-webkit-transition:background-color .2s ease,border-color .2s ease;transition:background-color .2s ease,border-color .2s ease}.next-step-dot .next-step-item-disabled .next-step-item-node-circle .next-icon{-webkit-animation:zoomIn .2s linear;animation:zoomIn .2s linear}.next-step-dot .next-step-item-disabled .next-step-item-node-circle .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-step-dot .next-step-item-disabled .next-step-item-node-dot{position:absolute;top:50%;margin-top:-6px;left:50%;margin-left:-6px;display:block;width:12px;height:12px;border:1px solid;border-radius:50%;-webkit-transition:background-color .3s ease,border-color .3s ease;transition:background-color .3s ease,border-color .3s ease}.next-step-dot .next-step-item-disabled .next-step-item-node,.next-step-dot .next-step-item-disabled .next-step-item-node-placeholder{cursor:not-allowed}.next-step-dot .next-step-item-read-only .next-step-item-node,.next-step-dot .next-step-item-read-only .next-step-item-node-placeholder{cursor:default}.next-step-dot .next-step-item-last .next-step-item-tail{display:none}.next-step-dot.next-step-horizontal{text-align:center;white-space:nowrap}.next-step-dot.next-step-horizontal>.next-step-item .next-step-item-content,.next-step-dot.next-step-horizontal>.next-step-item .next-step-item-title{white-space:normal}.next-step-dot.next-step-horizontal .next-step-item-node .next-icon{vertical-align:middle}.next-step-dot.next-step-horizontal>.next-step-item-wait .next-step-item-tail{display:inline-block;clear:both;width:calc(100% - 28px);vertical-align:middle}.next-step-dot.next-step-horizontal>.next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay{display:block;height:1px;position:relative}.next-step-dot.next-step-horizontal>.next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:1px;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%}.next-step-dot.next-step-horizontal>.next-step-item-wait>.next-step-item-node{padding:0 8px;width:28px;height:12px}.next-step-dot.next-step-horizontal>.next-step-item-wait>.next-step-item-body{width:100px;left:-36px;text-align:center;position:absolute}.next-step-dot.next-step-horizontal>.next-step-item-wait>.next-step-item-body>.next-step-item-title{font-size:12px;line-height:16px;margin-top:8px;font-weight:700}.next-step-dot.next-step-horizontal>.next-step-item-wait>.next-step-item-body>.next-step-item-content{margin-top:4px}.next-step-dot.next-step-horizontal>.next-step-item-process .next-step-item-tail{display:inline-block;clear:both;width:calc(100% - 28px);vertical-align:middle}.next-step-dot.next-step-horizontal>.next-step-item-process .next-step-item-tail .next-step-item-tail-underlay{display:block;height:1px;position:relative}.next-step-dot.next-step-horizontal>.next-step-item-process .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:1px;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%}.next-step-dot.next-step-horizontal>.next-step-item-process>.next-step-item-node{padding:0 8px;width:28px;height:12px}.next-step-dot.next-step-horizontal>.next-step-item-process>.next-step-item-body{width:100px;left:-36px;text-align:center;position:absolute}.next-step-dot.next-step-horizontal>.next-step-item-process>.next-step-item-body>.next-step-item-title{font-size:12px;line-height:16px;margin-top:8px;font-weight:700}.next-step-dot.next-step-horizontal>.next-step-item-process>.next-step-item-body>.next-step-item-content{margin-top:4px}.next-step-dot.next-step-horizontal>.next-step-item-finish .next-step-item-tail{display:inline-block;clear:both;width:calc(100% - 28px);vertical-align:middle}.next-step-dot.next-step-horizontal>.next-step-item-finish .next-step-item-tail .next-step-item-tail-underlay{display:block;height:1px;position:relative}.next-step-dot.next-step-horizontal>.next-step-item-finish .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:1px;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%}.next-step-dot.next-step-horizontal>.next-step-item-finish>.next-step-item-node{padding:0 8px;width:28px;height:12px}.next-step-dot.next-step-horizontal>.next-step-item-finish>.next-step-item-body{width:100px;left:-36px;text-align:center;position:absolute}.next-step-dot.next-step-horizontal>.next-step-item-finish>.next-step-item-body>.next-step-item-title{font-size:12px;line-height:16px;margin-top:8px;font-weight:700}.next-step-dot.next-step-horizontal>.next-step-item-finish>.next-step-item-body>.next-step-item-content{margin-top:4px}.next-step-dot.next-step-horizontal>.next-step-item-disabled .next-step-item-tail{display:inline-block;clear:both;width:calc(100% - 28px);vertical-align:middle}.next-step-dot.next-step-horizontal>.next-step-item-disabled .next-step-item-tail .next-step-item-tail-underlay{display:block;height:1px;position:relative}.next-step-dot.next-step-horizontal>.next-step-item-disabled .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:1px;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%}.next-step-dot.next-step-horizontal>.next-step-item-disabled>.next-step-item-node{padding:0 8px;width:28px;height:12px}.next-step-dot.next-step-horizontal>.next-step-item-disabled>.next-step-item-body{width:100px;left:-36px;text-align:center;position:absolute}.next-step-dot.next-step-horizontal>.next-step-item-disabled>.next-step-item-body>.next-step-item-title{font-size:12px;line-height:16px;margin-top:8px;font-weight:700}.next-step-dot.next-step-horizontal>.next-step-item-disabled>.next-step-item-body>.next-step-item-content{margin-top:4px}.next-step-dot.next-step-vertical{padding:0 0 0 4px;font-size:0;display:table-cell;position:relative}.next-step-dot.next-step-vertical .next-step-item-container{padding:0}.next-step-dot.next-step-vertical>.next-step-item:last-child .next-step-item-tail{display:block;visibility:hidden}.next-step-dot.next-step-vertical>.next-step-item-wait .next-step-item-tail{width:1px;height:0;margin:8px auto}.next-step-dot.next-step-vertical>.next-step-item-wait .next-step-item-tail .next-step-item-tail-underlay{height:100%;width:1px;position:relative}.next-step-dot.next-step-vertical>.next-step-item-wait .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:100%;width:1px}.next-step-dot.next-step-vertical>.next-step-item-wait>.next-step-item-node{padding:8px 0;width:12px;height:28px}.next-step-dot.next-step-vertical>.next-step-item-wait>.next-step-item-body{position:absolute;top:0;left:6px;margin-left:8px}.next-step-dot.next-step-vertical>.next-step-item-wait>.next-step-item-body>.next-step-item-title{margin-top:0;font-weight:700;text-align:left;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-dot.next-step-vertical>.next-step-item-wait>.next-step-item-body>.next-step-item-content{margin-top:8px;min-height:8px;text-align:left;font-size:12px;line-height:16px}.next-step-dot.next-step-vertical>.next-step-item-process .next-step-item-tail{width:1px;height:0;margin:8px auto}.next-step-dot.next-step-vertical>.next-step-item-process .next-step-item-tail .next-step-item-tail-underlay{height:100%;width:1px;position:relative}.next-step-dot.next-step-vertical>.next-step-item-process .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:100%;width:1px}.next-step-dot.next-step-vertical>.next-step-item-process>.next-step-item-node{padding:8px 0;width:12px;height:28px}.next-step-dot.next-step-vertical>.next-step-item-process>.next-step-item-body{position:absolute;top:0;left:6px;margin-left:8px}.next-step-dot.next-step-vertical>.next-step-item-process>.next-step-item-body>.next-step-item-title{margin-top:0;font-weight:700;text-align:left;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-dot.next-step-vertical>.next-step-item-process>.next-step-item-body>.next-step-item-content{margin-top:8px;min-height:8px;text-align:left;font-size:12px;line-height:16px}.next-step-dot.next-step-vertical>.next-step-item-finish .next-step-item-tail{width:1px;height:0;margin:8px auto}.next-step-dot.next-step-vertical>.next-step-item-finish .next-step-item-tail .next-step-item-tail-underlay{height:100%;width:1px;position:relative}.next-step-dot.next-step-vertical>.next-step-item-finish .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:100%;width:1px}.next-step-dot.next-step-vertical>.next-step-item-finish>.next-step-item-node{padding:8px 0;width:12px;height:28px}.next-step-dot.next-step-vertical>.next-step-item-finish>.next-step-item-body{position:absolute;top:0;left:6px;margin-left:8px}.next-step-dot.next-step-vertical>.next-step-item-finish>.next-step-item-body>.next-step-item-title{margin-top:0;font-weight:700;text-align:left;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-dot.next-step-vertical>.next-step-item-finish>.next-step-item-body>.next-step-item-content{margin-top:8px;min-height:8px;text-align:left;font-size:12px;line-height:16px}.next-step-dot.next-step-vertical>.next-step-item-disabled .next-step-item-tail{width:1px;height:0;margin:8px auto}.next-step-dot.next-step-vertical>.next-step-item-disabled .next-step-item-tail .next-step-item-tail-underlay{height:100%;width:1px;position:relative}.next-step-dot.next-step-vertical>.next-step-item-disabled .next-step-item-tail .next-step-item-tail-overlay{position:absolute;top:0;height:100%;width:1px}.next-step-dot.next-step-vertical>.next-step-item-disabled>.next-step-item-node{padding:8px 0;width:12px;height:28px}.next-step-dot.next-step-vertical>.next-step-item-disabled>.next-step-item-body{position:absolute;top:0;left:6px;margin-left:8px}.next-step-dot.next-step-vertical>.next-step-item-disabled>.next-step-item-body>.next-step-item-title{margin-top:0;font-weight:700;text-align:left;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-dot.next-step-vertical>.next-step-item-disabled>.next-step-item-body>.next-step-item-content{margin-top:8px;min-height:8px;text-align:left;font-size:12px;line-height:16px}.next-step-horizontal[dir=rtl]>.next-step-item{text-align:right}.next-step-arrow[dir=rtl] .next-step-item{height:32px;line-height:32px;margin-left:4px;margin-right:16px}.next-step-arrow[dir=rtl] .next-step-item:before{right:-16px;left:auto;border:16px solid transparent;border-right-color:transparent}.next-step-arrow[dir=rtl] .next-step-item:after{left:-32px;right:auto;border-top:16px solid transparent;border-bottom:16px solid transparent;border-right:16px solid transparent}.next-step-arrow[dir=rtl]>.next-step-item-wait{background:#ebecf0}.next-step-arrow[dir=rtl]>.next-step-item-wait .next-step-item-node-dot{right:50%;left:auto}.next-step-arrow[dir=rtl]>.next-step-item-wait:before{border:16px solid #ebecf0;border-right-color:transparent}.next-step-arrow[dir=rtl]>.next-step-item-wait:after{border-right-color:#ebecf0;border-left-color:transparent}.next-step-arrow[dir=rtl]>.next-step-item-process{background:#5584ff}.next-step-arrow[dir=rtl]>.next-step-item-process .next-step-item-node-dot{right:50%;left:auto}.next-step-arrow[dir=rtl]>.next-step-item-process:before{border:16px solid #5584ff;border-right-color:transparent}.next-step-arrow[dir=rtl]>.next-step-item-process:after{border-right-color:#5584ff;border-left-color:transparent}.next-step-arrow[dir=rtl]>.next-step-item-finish{background:#dee8ff}.next-step-arrow[dir=rtl]>.next-step-item-finish .next-step-item-node-dot{right:50%;left:auto}.next-step-arrow[dir=rtl]>.next-step-item-finish:before{border:16px solid #dee8ff;border-right-color:transparent}.next-step-arrow[dir=rtl]>.next-step-item-finish:after{border-right-color:#dee8ff;border-left-color:transparent}.next-step-arrow[dir=rtl] .next-step-item-disabled{background:#f7f8fa}.next-step-arrow[dir=rtl] .next-step-item-disabled .next-step-item-node-dot{right:50%;left:auto}.next-step-arrow[dir=rtl] .next-step-item-disabled:before{border:16px solid #f7f8fa;border-right-color:transparent}.next-step-arrow[dir=rtl] .next-step-item-disabled:after{border-right-color:#f7f8fa;border-left-color:transparent}.next-step-arrow[dir=rtl] .next-step-item-first{margin-right:0}.next-step-arrow[dir=rtl] .next-step-item-last{margin-left:0}.next-step-circle[dir=rtl] .next-step-item-disabled .next-step-item-node-dot,.next-step-circle[dir=rtl]>.next-step-item-finish .next-step-item-node-dot,.next-step-circle[dir=rtl]>.next-step-item-process .next-step-item-node-dot,.next-step-circle[dir=rtl]>.next-step-item-wait .next-step-item-node-dot{right:50%;left:auto}.next-step-circle[dir=rtl].next-step-horizontal>.next-step-item-disabled>.next-step-item-body,.next-step-circle[dir=rtl].next-step-horizontal>.next-step-item-finish>.next-step-item-body,.next-step-circle[dir=rtl].next-step-horizontal>.next-step-item-process>.next-step-item-body,.next-step-circle[dir=rtl].next-step-horizontal>.next-step-item-wait>.next-step-item-body{right:-26px;left:auto}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-wait .next-step-item-body{left:auto;right:0;text-align:right}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-wait .next-step-item-body .next-step-item-title{padding-left:8px;padding-right:0}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-wait .next-step-item-tail{left:0;right:auto}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-process .next-step-item-body{left:auto;right:0;text-align:right}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-process .next-step-item-body .next-step-item-title{padding-left:8px;padding-right:0}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-process .next-step-item-tail{left:0;right:auto}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-finish .next-step-item-body{left:auto;right:0;text-align:right}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-finish .next-step-item-body .next-step-item-title{padding-left:8px;padding-right:0}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-finish .next-step-item-tail{left:0;right:auto}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-disabled .next-step-item-body{left:auto;right:0;text-align:right}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-disabled .next-step-item-body .next-step-item-title{padding-left:8px;padding-right:0}.next-step-circle[dir=rtl].next-step-horizontal.next-step-label-horizontal>.next-step-item-disabled .next-step-item-tail{left:0;right:auto}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-wait>.next-step-item-body{right:16px;left:auto;margin-right:8px;margin-left:0}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-wait>.next-step-item-body>.next-step-item-title{text-align:right;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-wait>.next-step-item-body>.next-step-item-content{text-align:right}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-process>.next-step-item-body{right:16px;left:auto;margin-right:8px;margin-left:0}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-process>.next-step-item-body>.next-step-item-title{text-align:right;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-process>.next-step-item-body>.next-step-item-content{text-align:right}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-finish>.next-step-item-body{right:16px;left:auto;margin-right:8px;margin-left:0}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-finish>.next-step-item-body>.next-step-item-title{text-align:right;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-finish>.next-step-item-body>.next-step-item-content{text-align:right}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-disabled>.next-step-item-body{right:16px;left:auto;margin-right:8px;margin-left:0}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-disabled>.next-step-item-body>.next-step-item-title{text-align:right;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-circle[dir=rtl].next-step-vertical>.next-step-item-disabled>.next-step-item-body>.next-step-item-content{text-align:right}.next-step-dot[dir=rtl] .next-step-item-disabled .next-step-item-node-dot,.next-step-dot[dir=rtl]>.next-step-item-finish .next-step-item-node-dot,.next-step-dot[dir=rtl]>.next-step-item-process .next-step-item-node-dot,.next-step-dot[dir=rtl]>.next-step-item-wait .next-step-item-node-dot{right:50%;left:auto}.next-step-dot[dir=rtl].next-step-horizontal>.next-step-item-disabled>.next-step-item-body,.next-step-dot[dir=rtl].next-step-horizontal>.next-step-item-finish>.next-step-item-body,.next-step-dot[dir=rtl].next-step-horizontal>.next-step-item-process>.next-step-item-body,.next-step-dot[dir=rtl].next-step-horizontal>.next-step-item-wait>.next-step-item-body{right:-36px;left:auto}.next-step-dot[dir=rtl].next-step-vertical{padding:0 4px 0 0}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-wait>.next-step-item-body{right:6px;left:auto;margin-right:8px;margin-left:0}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-wait>.next-step-item-body>.next-step-item-title{text-align:right;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-wait>.next-step-item-body>.next-step-item-content{text-align:right}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-process>.next-step-item-body{right:6px;left:auto;margin-right:8px;margin-left:0}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-process>.next-step-item-body>.next-step-item-title{text-align:right;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-process>.next-step-item-body>.next-step-item-content{text-align:right}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-finish>.next-step-item-body{right:6px;left:auto;margin-right:8px;margin-left:0}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-finish>.next-step-item-body>.next-step-item-title{text-align:right;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-finish>.next-step-item-body>.next-step-item-content{text-align:right}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-disabled>.next-step-item-body{right:6px;left:auto;margin-right:8px;margin-left:0}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-disabled>.next-step-item-body>.next-step-item-title{text-align:right;font-family:Roboto,Helvetica Neue,Helvetica,Tahoma,Arial,PingFang SC,Microsoft YaHei;font-size:12px;line-height:1.28571}.next-step-dot[dir=rtl].next-step-vertical>.next-step-item-disabled>.next-step-item-body>.next-step-item-content{text-align:right}.next-switch:after[dir=rtl]{content:" ";-webkit-transition:all .4s cubic-bezier(.78,.14,.15,.86);transition:all .4s cubic-bezier(.78,.14,.15,.86);-webkit-transform-origin:right center;-ms-transform-origin:right center;transform-origin:right center}.next-switch-medium[dir=rtl]:after,.next-switch-small[dir=rtl]:after{right:100%;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.next-switch-on[dir=rtl]>.next-switch-children{right:10px;left:auto;color:#fff}.next-switch-on[disabled][dir=rtl]:after{left:0;right:100%;-webkit-box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);box-shadow:1px 1px 3px 0 rgba(0,0,0,.12)}.next-switch-on.next-switch-small[dir=rtl]>.next-switch-children{right:6px;left:auto}.next-switch-off[dir=rtl]:after{right:0;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-box-shadow:-1px 0 3px 0 rgba(0,0,0,.12);box-shadow:-1px 0 3px 0 rgba(0,0,0,.12)}.next-switch-off[dir=rtl]>.next-switch-children{left:10px;right:auto}.next-switch-off.next-switch-small[dir=rtl]>.next-switch-children{left:5px;right:auto}.next-switch{outline:none;text-align:left;-webkit-transition:all .3s cubic-bezier(.78,.14,.15,.86);transition:all .3s cubic-bezier(.78,.14,.15,.86);overflow:hidden;cursor:pointer}.next-switch,.next-switch *,.next-switch :after,.next-switch :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-switch:after{content:" ";-webkit-transition:all .4s cubic-bezier(.78,.14,.15,.86);transition:all .4s cubic-bezier(.78,.14,.15,.86);-webkit-transform-origin:left center;-ms-transform-origin:left center;transform-origin:left center}.next-switch-medium{position:relative;display:inline-block;width:56px;height:26px}.next-switch-medium,.next-switch-medium:after{border:1px solid transparent;border-radius:20px}.next-switch-medium:after{position:absolute;left:100%;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);width:24px;height:24px;-webkit-box-sizing:border-box;box-sizing:border-box}.next-switch-medium>.next-switch-children{font-size:12px;position:absolute;height:24px;line-height:24px}.next-switch-small{position:relative;display:inline-block;width:44px;height:22px}.next-switch-small,.next-switch-small:after{border:1px solid transparent;border-radius:20px}.next-switch-small:after{position:absolute;left:100%;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);width:20px;height:20px;-webkit-box-sizing:border-box;box-sizing:border-box}.next-switch-small>.next-switch-children{font-size:12px;position:absolute;height:20px;line-height:20px}.next-switch-on{background-color:#5584ff}.next-switch-on:after{-webkit-box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#fff;border-color:transparent}.next-switch-on>.next-switch-children{left:10px;color:#fff}.next-switch-on:focus,.next-switch-on:hover{background-color:#3e71f7}.next-switch-on:focus:after,.next-switch-on:hover:after{background-color:#fff}.next-switch-on.next-switch-small>.next-switch-children{left:6px}.next-switch-on[disabled]{background-color:#ebecf0;cursor:not-allowed}.next-switch-on[disabled]:after{right:0;-webkit-box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#f7f8fa;border-color:#e6e7eb}.next-switch-on[disabled]>.next-switch-children{color:#ccc}.next-switch-off{background-color:#fff;border-color:#c4c6cf}.next-switch-off:focus,.next-switch-off:hover{background-color:#f2f3f7;border-color:#c4c6cf}.next-switch-off:after{left:0;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#fff;border-color:transparent}.next-switch-off:after:focus,.next-switch-off:after:hover{background-color:#fff}.next-switch-off>.next-switch-children{right:10px;color:#999}.next-switch-off[disabled]{background-color:#f7f8fa;cursor:not-allowed}.next-switch-off[disabled]:after{-webkit-box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);box-shadow:1px 1px 3px 0 rgba(0,0,0,.12);background-color:#f7f8fa;border-color:#e6e7eb}.next-switch-off[disabled]>.next-switch-children{color:#c4c6cf}.next-switch-off.next-switch-small>.next-switch-children{right:5px}.next-tabs{width:100%}.next-tabs,.next-tabs *,.next-tabs :after,.next-tabs :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tabs-bar{outline:none}.next-tabs-bar-popup{overflow-y:auto;max-height:480px}.next-tabs-nav-container{position:relative}.next-tabs-nav-container:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-tabs-nav-wrap{overflow:hidden}.next-tabs-nav-scroll{overflow:hidden;white-space:nowrap}.next-tabs-nav{display:inline-block;position:relative;-webkit-transition:all .4s cubic-bezier(.23,1,.32,1);transition:all .4s cubic-bezier(.23,1,.32,1);list-style:none;padding:0;margin:0}.next-tabs-nav-appear,.next-tabs-nav-enter{-webkit-animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);animation:fadeInLeft .4s cubic-bezier(.78,.14,.15,.86);-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-tabs-nav-leave{-webkit-animation:fadeOutLeft .2s cubic-bezier(.78,.14,.15,.86);animation:fadeOutLeft .2s cubic-bezier(.78,.14,.15,.86);-webkit-animation-fill-mode:both;animation-fill-mode:both}.next-tabs-tab{display:inline-block;position:relative;-webkit-transition:all .4s cubic-bezier(.23,1,.32,1);transition:all .4s cubic-bezier(.23,1,.32,1)}.next-tabs-tab-inner{position:relative;cursor:pointer;text-decoration:none}.next-tabs-tab:before{content:"";position:absolute;-webkit-transition:all .4s cubic-bezier(.23,1,.32,1);transition:all .4s cubic-bezier(.23,1,.32,1)}.next-tabs-tab.active{font-weight:400}.next-tabs-tab .next-tabs-tab-close{color:#666}.next-tabs-tab .next-tabs-tab-close:hover{color:#333}.next-tabs-tab.active .next-tabs-tab-close{color:#5584ff}.next-tabs-tab.disabled .next-tabs-tab-close{color:#dcdee3}.next-tabs-tab:focus{outline:none}.next-tabs-tabpane{display:none}.next-tabs-tabpane.active{display:block}.next-tabs-btn-down,.next-tabs-btn-next,.next-tabs-btn-prev{position:absolute;top:0;cursor:pointer;padding:0;border:0;outline:none;height:100%;background-color:transparent;border-color:transparent}.next-tabs-btn-down,.next-tabs-btn-down.visited,.next-tabs-btn-down:link,.next-tabs-btn-down:visited,.next-tabs-btn-next,.next-tabs-btn-next.visited,.next-tabs-btn-next:link,.next-tabs-btn-next:visited,.next-tabs-btn-prev,.next-tabs-btn-prev.visited,.next-tabs-btn-prev:link,.next-tabs-btn-prev:visited{color:#666}.next-tabs-btn-down.active,.next-tabs-btn-down.hover,.next-tabs-btn-down:active,.next-tabs-btn-down:focus,.next-tabs-btn-down:hover,.next-tabs-btn-next.active,.next-tabs-btn-next.hover,.next-tabs-btn-next:active,.next-tabs-btn-next:focus,.next-tabs-btn-next:hover,.next-tabs-btn-prev.active,.next-tabs-btn-prev.hover,.next-tabs-btn-prev:active,.next-tabs-btn-prev:focus,.next-tabs-btn-prev:hover{color:#333;background-color:transparent;border-color:transparent;text-decoration:none}.next-tabs-btn-down.disabled,.next-tabs-btn-next.disabled,.next-tabs-btn-prev.disabled{cursor:not-allowed;color:#dcdee3}.next-tabs-btn-next{right:8px}.next-tabs-btn-prev{right:32px}.next-tabs-btn-down{right:8px}.next-tabs-content{overflow:hidden}.next-tabs-vertical>.next-tabs-bar .next-tabs-nav{width:100%}.next-tabs-vertical>.next-tabs-bar .next-tabs-tab{display:block}.next-tabs.next-medium .next-tabs-nav-container-scrolling{padding-right:60px}.next-tabs.next-medium .next-tabs-tab-inner{font-size:12px;padding:12px 16px}.next-tabs.next-medium .next-tabs-tab-inner .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-tabs.next-medium .next-tabs-tab-inner .next-tabs-tab-close{padding-left:8px}.next-tabs.next-medium .next-tabs-tab-inner .next-tabs-tab-close:before{width:12px;font-size:12px;line-height:inherit}.next-tabs.next-medium .next-tabs-btn-down .next-icon:before,.next-tabs.next-medium .next-tabs-btn-next .next-icon:before,.next-tabs.next-medium .next-tabs-btn-prev .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-tabs.next-small .next-tabs-nav-container-scrolling{padding-right:56px}.next-tabs.next-small .next-tabs-tab-inner{font-size:12px;padding:8px 12px}.next-tabs.next-small .next-tabs-tab-inner .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close{padding-left:8px}.next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-4px;margin-right:-4px}.next-tabs.next-small .next-tabs-tab-inner .next-tabs-tab-close:before{width:16px;font-size:16px}}.next-tabs.next-small .next-tabs-btn-down .next-icon:before,.next-tabs.next-small .next-tabs-btn-next .next-icon:before,.next-tabs.next-small .next-tabs-btn-prev .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tabs-pure>.next-tabs-bar{border-bottom:1px solid #dcdee3;background-color:transparent}.next-tabs-pure>.next-tabs-bar .next-tabs-nav-container{margin-bottom:-1px;-webkit-box-shadow:none;box-shadow:none}.next-tabs-pure>.next-tabs-bar .next-tabs-nav-container .next-tabs-tab{color:#666;background-color:transparent}.next-tabs-pure>.next-tabs-bar .next-tabs-nav-container .next-tabs-tab:hover{cursor:pointer;color:#333;background-color:transparent}.next-tabs-pure>.next-tabs-bar .next-tabs-nav-container .next-tabs-tab.active{z-index:1;color:#5584ff;background-color:transparent}.next-tabs-pure>.next-tabs-bar .next-tabs-nav-container .next-tabs-tab.disabled{pointer-events:none;cursor:default;color:#dcdee3;background:transparent}.next-tabs-pure>.next-tabs-bar .next-tabs-nav-container .next-tabs-tab:before{border-radius:0;width:0;border-bottom:2px solid #5584ff;left:50%;bottom:0}.next-tabs-pure>.next-tabs-bar .next-tabs-nav-container .next-tabs-tab.active:before{width:100%;left:0}.next-tabs-wrapped>.next-tabs-bar{background:transparent}.next-tabs-wrapped>.next-tabs-bar .next-tabs-tab{color:#666;background-color:#f2f3f7}.next-tabs-wrapped>.next-tabs-bar .next-tabs-tab:hover{cursor:pointer;color:#333;background-color:#ebecf0}.next-tabs-wrapped>.next-tabs-bar .next-tabs-tab.active{z-index:1;color:#5584ff;background-color:#fff}.next-tabs-wrapped>.next-tabs-bar .next-tabs-tab.disabled{pointer-events:none;cursor:default;color:#ccc;background:#f7f8fa}.next-tabs-wrapped>.next-tabs-bar .next-tabs-tab .next-tabs-tab-close{color:#666}.next-tabs-wrapped>.next-tabs-bar .next-tabs-tab .next-tabs-tab-close:hover{color:#333}.next-tabs-wrapped>.next-tabs-bar .next-tabs-tab.active .next-tabs-tab-close{color:#5584ff}.next-tabs-wrapped>.next-tabs-bar .next-tabs-tab.disabled .next-tabs-tab-close{color:#dcdee3}.next-tabs-wrapped:after,.next-tabs-wrapped:before{content:"";display:table}.next-tabs-wrapped:after{clear:both}.next-tabs-wrapped.next-tabs-top>.next-tabs-bar,.next-tabs-wrapped>.next-tabs-content{position:relative}.next-tabs-wrapped.next-tabs-top>.next-tabs-bar .next-tabs-nav-extra{position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.next-tabs-wrapped.next-tabs-top>.next-tabs-bar .next-tabs-tab{margin-right:4px;border:1px solid #dcdee3;border-radius:3px 3px 0 0;border-width:1px}.next-tabs-wrapped.next-tabs-top>.next-tabs-bar .next-tabs-tab:hover{border-color:#c4c6cf}.next-tabs-wrapped.next-tabs-top>.next-tabs-bar .next-tabs-tab.active{border-color:#dcdee3 #dcdee3 #fff}.next-tabs-wrapped.next-tabs-top>.next-tabs-bar .next-tabs-tab:before{border-radius:3px;width:0;border-top:2px solid #5584ff;left:50%;top:-1px}.next-tabs-wrapped.next-tabs-top>.next-tabs-bar .next-tabs-tab.active:before{width:calc(100% - 2 * 3px);left:3px}.next-tabs-wrapped.next-tabs-top>.next-tabs-bar .next-tabs-tab.active{border-width:1px}.next-tabs-wrapped.next-tabs-top>.next-tabs-content{top:-1px;border-top:1px solid #dcdee3}.next-tabs-wrapped.next-tabs-bottom>.next-tabs-bar{position:relative}.next-tabs-wrapped.next-tabs-bottom>.next-tabs-bar .next-tabs-nav-extra{position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.next-tabs-wrapped.next-tabs-bottom>.next-tabs-bar .next-tabs-tab{margin-right:4px;border:1px solid #dcdee3;border-radius:0 0 3px 3px}.next-tabs-wrapped.next-tabs-bottom>.next-tabs-bar .next-tabs-tab:hover{border-color:#c4c6cf}.next-tabs-wrapped.next-tabs-bottom>.next-tabs-bar .next-tabs-tab.active{border-color:#fff #dcdee3 #dcdee3}.next-tabs-wrapped.next-tabs-bottom>.next-tabs-bar .next-tabs-tab:before{border-radius:3px;width:0;border-bottom:2px solid #5584ff;left:50%;bottom:-1px}.next-tabs-wrapped.next-tabs-bottom>.next-tabs-bar .next-tabs-tab.active:before{width:calc(100% - 2 * 3px);left:3px}.next-tabs-wrapped.next-tabs-bottom>.next-tabs-content{top:1px;border-bottom:1px solid #dcdee3}.next-tabs-wrapped.next-tabs-left>.next-tabs-bar{float:left}.next-tabs-wrapped.next-tabs-left>.next-tabs-bar .next-tabs-tab{float:none;margin-bottom:4px;border:1px solid #dcdee3;border-radius:3px 0 0 3px;border-width:1px}.next-tabs-wrapped.next-tabs-left>.next-tabs-bar .next-tabs-tab:hover{border-color:#c4c6cf}.next-tabs-wrapped.next-tabs-left>.next-tabs-bar .next-tabs-tab.active{border-color:#dcdee3 #fff #dcdee3 #dcdee3}.next-tabs-wrapped.next-tabs-left>.next-tabs-bar .next-tabs-tab:before{border-radius:3px;height:0;border-left:2px solid #5584ff;top:50%;left:-1px}.next-tabs-wrapped.next-tabs-left>.next-tabs-bar .next-tabs-tab.active:before{height:calc(100% - 2 * 3px);top:3px}.next-tabs-wrapped.next-tabs-left>.next-tabs-bar .next-tabs-tab.active{border-width:1px}.next-tabs-wrapped.next-tabs-left>.next-tabs-content{right:1px;border-left:1px solid #dcdee3}.next-tabs-wrapped.next-tabs-right>.next-tabs-bar{float:right}.next-tabs-wrapped.next-tabs-right>.next-tabs-bar .next-tabs-tab{float:none;margin-bottom:4px;border:1px solid #dcdee3;border-radius:0 3px 3px 0;border-width:1px}.next-tabs-wrapped.next-tabs-right>.next-tabs-bar .next-tabs-tab:hover{border-color:#c4c6cf}.next-tabs-wrapped.next-tabs-right>.next-tabs-bar .next-tabs-tab.active{border-color:#dcdee3 #dcdee3 #dcdee3 #fff}.next-tabs-wrapped.next-tabs-right>.next-tabs-bar .next-tabs-tab:before{border-radius:3px;height:0;border-right:2px solid #5584ff;top:50%;right:-1px}.next-tabs-wrapped.next-tabs-right>.next-tabs-bar .next-tabs-tab.active:before{height:calc(100% - 2 * 3px);top:3px}.next-tabs-wrapped.next-tabs-right>.next-tabs-bar .next-tabs-tab.active{border-width:1px}.next-tabs-wrapped.next-tabs-right>.next-tabs-content{right:-1px;border-right:1px solid #dcdee3}.next-tabs-capsule>.next-tabs-bar .next-tabs-tab{-webkit-transition:background-color .4s cubic-bezier(.23,1,.32,1),border-color .4s cubic-bezier(.23,1,.32,1);transition:background-color .4s cubic-bezier(.23,1,.32,1),border-color .4s cubic-bezier(.23,1,.32,1);border-top:1px solid #c4c6cf;border-bottom:1px solid #c4c6cf;border-left:1px solid #c4c6cf;color:#333;background-color:#f2f3f7}.next-tabs-capsule>.next-tabs-bar .next-tabs-tab:first-child{border-radius:3px 0 0 3px}.next-tabs-capsule>.next-tabs-bar .next-tabs-tab:last-child{border-radius:0 3px 3px 0;border-right:1px solid #c4c6cf}.next-tabs-capsule>.next-tabs-bar .next-tabs-tab.active{margin-right:-1px;border-right:1px solid #c4c6cf;border-color:#5584ff}.next-tabs-capsule>.next-tabs-bar .next-tabs-tab.disabled{border-color:#e6e7eb}.next-tabs-capsule>.next-tabs-bar .next-tabs-tab:hover{cursor:pointer;color:#333;background-color:#ebecf0}.next-tabs-capsule>.next-tabs-bar .next-tabs-tab.active{z-index:1;color:#fff;background-color:#5584ff}.next-tabs-capsule>.next-tabs-bar .next-tabs-tab.disabled{pointer-events:none;cursor:default;color:#ccc;background:#f7f8fa}.next-tabs-text>.next-tabs-bar .next-tabs-tab{color:#666;background-color:transparent}.next-tabs-text>.next-tabs-bar .next-tabs-tab:hover{cursor:pointer;color:#333;background-color:transparent}.next-tabs-text>.next-tabs-bar .next-tabs-tab.active{z-index:1;color:#5584ff;background-color:transparent}.next-tabs-text>.next-tabs-bar .next-tabs-tab.disabled{pointer-events:none;cursor:default;color:#ccc;background:transparent}.next-tabs-text>.next-tabs-bar .next-tabs-tab:not(:last-child):after{content:" ";position:absolute;right:0;top:calc(50% - 4px);width:1px;height:8px;background-color:#dcdee3}.next-tabs-pure>.next-tabs-bar{position:relative}.next-tabs-pure>.next-tabs-bar .next-tabs-nav-extra{position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.next-tabs-capsule>.next-tabs-bar{position:relative}.next-tabs-capsule>.next-tabs-bar .next-tabs-nav-extra{position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.next-tabs-text>.next-tabs-bar{position:relative}.next-tabs-text>.next-tabs-bar .next-tabs-nav-extra{position:absolute;top:50%;right:0;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.next-tabs[dir=rtl].next-medium .next-tabs-nav-container-scrolling{padding-left:60px;padding-right:0}.next-tabs[dir=rtl].next-medium .next-tabs-tab-close{padding-right:8px;padding-left:0}.next-tabs[dir=rtl].next-small .next-tabs-nav-container-scrolling{padding-left:56px;padding-right:0}.next-tabs[dir=rtl].next-small .next-tabs-tab-close{padding-right:8px;padding-left:0}.next-tabs[dir=rtl].next-tabs-wrapped.next-tabs-bottom>.next-tabs-bar .next-tabs-nav-extra,.next-tabs[dir=rtl].next-tabs-wrapped.next-tabs-top>.next-tabs-bar .next-tabs-nav-extra,.next-tabs[dir=rtl]>.next-tabs-bar .next-tabs-nav-extra{right:auto;left:0}.next-tabs[dir=rtl].next-tabs-capsule>.next-tabs-bar .next-tabs-tab{border-top:1px solid #c4c6cf;border-bottom:1px solid #c4c6cf;border-right:1px solid #c4c6cf;border-left:0}.next-tabs[dir=rtl].next-tabs-capsule>.next-tabs-bar .next-tabs-tab:first-child{border-left:0;border-radius:0 3px 3px 0}.next-tabs[dir=rtl].next-tabs-capsule>.next-tabs-bar .next-tabs-tab:last-child{border-radius:3px 0 0 3px;border-left:1px solid #c4c6cf}.next-tabs[dir=rtl].next-tabs-capsule>.next-tabs-bar .next-tabs-tab.active{margin-left:-1px;margin-right:auto;border-left:1px solid #c4c6cf;border-color:#5584ff}.next-tabs[dir=rtl] .next-tabs-btn-next{left:8px;right:auto}.next-tabs[dir=rtl] .next-tabs-btn-prev{left:32px;right:auto}.next-tabs[dir=rtl] .next-tabs-btn-down{left:8px;right:auto}.next-tabs-text[dir=rtl]>.next-tabs-bar .next-tabs-tab:not(:last-child):after{content:" ";position:absolute;left:0;right:auto}.next-table{position:relative}.next-table,.next-table *,.next-table :after,.next-table :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-table table{border-collapse:collapse;border-spacing:0;width:100%;background:#fff}.next-table table tr:first-child td{border-top-width:0}.next-table th{padding:0;background:#ebecf0;color:#333;text-align:left;font-weight:400;border:1px solid #dcdee3}.next-table th .next-table-cell-wrapper{padding:12px 16px;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.next-table-affix{z-index:1}.next-table-header-resizable{position:relative}.next-table-header-resizable .next-table-resize-handler{position:absolute;right:0;top:0;bottom:0;width:3px;background:transparent;cursor:ew-resize}.next-table td{padding:0;border:1px solid #dcdee3}.next-table td .next-table-cell-wrapper{padding:12px 16px;overflow:hidden;text-overflow:ellipsis;word-break:break-all}.next-table td .next-table-cell-wrapper .next-icon-arrow-down.next-table-tree-arrow,.next-table td .next-table-cell-wrapper .next-icon-arrow-right.next-table-tree-arrow,.next-table td .next-table-cell-wrapper .next-table-tree-placeholder{margin-right:3px;float:left}.next-table td .next-table-cell-wrapper .next-icon-arrow-down.next-table-tree-arrow:before,.next-table td .next-table-cell-wrapper .next-icon-arrow-right.next-table-tree-arrow:before{width:12px;font-size:12px;line-height:inherit}.next-table .next-table-expanded .next-table-cell-wrapper,.next-table .next-table-selection .next-table-cell-wrapper{overflow:visible}.next-table.no-header table tr:first-child td{border-top-width:1px}.next-table.only-bottom-border{border-width:0}.next-table.only-bottom-border .next-table-expanded-row td,.next-table.only-bottom-border .next-table-expanded-row th,.next-table.only-bottom-border td,.next-table.only-bottom-border th{border-width:0 0 1px}.next-table-loading{display:block}.next-table.zebra tr:nth-child(odd) td{background:#fff}.next-table.zebra tr:nth-child(2n) td{background:#f7f8fa}.next-table.zebra .next-table-row.hovered td,.next-table.zebra .next-table-row.selected td{background:#f2f3f7;color:#333}.next-table-empty{color:#a0a2ad;padding:32px 0;text-align:center}.next-table-expanded-row td{border-width:0}.next-table-expanded-row td:first-child{border-left-width:1px}.next-table-expanded-row td:last-child{border-right-width:1px}.next-table-expanded-row:last-child td{border-bottom-width:1px}.next-table-expanded-row .next-table .last td{border-bottom-width:0}.next-table-filter-footer{margin:10px 10px 0}.next-table-filter-footer button{margin-right:5px}.next-table-row{-webkit-transition:all .3s ease;transition:all .3s ease;background:#fff;color:#333}.next-table-row.hidden{display:none}.next-table-row.hovered,.next-table-row.selected{background:#f2f3f7;color:#333}.next-table-tree-placeholder{display:inline-block;width:12px}.last .next-table-expanded-row td{border-bottom-width:1px}.next-table-body,.next-table-header{overflow:auto;font-size:12px}.next-table-body{font-size:12px}.next-table-fixed{border:1px solid #dcdee3}.next-table-fixed table{table-layout:fixed}.next-table-fixed .next-table-header{background:#ebecf0}.next-table-fixed table tr td:first-child,.next-table-fixed table tr th:first-child{border-left-width:0}.next-table-fixed .next-table-header th{border-top-width:0}.next-table-fixed .next-table-header tr th:last-child{border-right-width:0}.next-table-fixed .next-table-body td{border-top-width:0}.next-table-fixed .next-table-body tr:last-child td{border-bottom-width:0}.next-table-fixed .next-table-body tr td:last-child{border-right-width:0}.next-table-fixed.next-table-group table tr td:first-child,.next-table-fixed.next-table-group table tr th:first-child{border-left-width:1px}.next-table-fixed.next-table-group .next-table-header th{border-top-width:1px}.next-table-fixed.next-table-group .next-table-header tr th:last-child{border-right-width:1px}.next-table-fixed.next-table-group .next-table-body td{border-top-width:1px}.next-table-fixed.next-table-group .next-table-body tr:last-child td{border-bottom-width:1px}.next-table-fixed.next-table-group .next-table-body tr td:last-child{border-right-width:1px}.next-table-lock .next-table-body{overflow-x:auto;overflow-y:visible}.next-table-group{border-width:0}.next-table-group .next-table-body{margin-top:8px}.next-table-group .next-table-body table{margin-bottom:8px}.next-table-group .next-table-body table tr:first-child td{border-top-width:1px}.next-table-group .next-table-group-footer td,.next-table-group .next-table-group-header td{background:#ebecf0;color:#333}.next-table-group .next-table-row.hovered,.next-table-group .next-table-row.selected{background:#fff;color:#333}.next-table-lock{position:relative}.next-table-lock table{table-layout:fixed}.next-table-header-inner{overflow:hidden}.next-table-lock-left,.next-table-lock-right{position:absolute;left:0;top:0;z-index:1;border:0}.next-table-lock-left table,.next-table-lock-right table{width:auto}.next-table-lock-left .next-table-body,.next-table-lock-right .next-table-body{overflow:hidden}.next-table-lock-right{right:0;left:auto}.next-table-lock-right table tr td:first-child,.next-table-lock-right table tr th:first-child{border-left-width:1px}.next-table-lock-right.shadow{-webkit-box-shadow:-2px 0 3px rgba(0,0,0,.12);box-shadow:-2px 0 3px rgba(0,0,0,.12)}.next-table-lock-left.shadow{-webkit-box-shadow:2px 0 3px rgba(0,0,0,.12);box-shadow:2px 0 3px rgba(0,0,0,.12)}.next-table-filter{line-height:1}.next-table-sort{position:relative;width:16px;height:15px;display:inline-block;vertical-align:middle;line-height:1}.next-table-sort .next-icon{position:absolute;left:0;color:#333}.next-table-sort .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-table-sort .current .next-icon{color:#5584ff}.next-table-sort .next-icon-ascending{left:4px}.next-table-filter{margin-left:5px;cursor:pointer;width:20px;display:inline-block}.next-table-filter:focus{outline:0}.next-table-filter .next-icon{color:#333}.next-table-filter .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-table-expanded-ctrl.disabled{color:#999}.next-table-expanded-ctrl .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-table[dir=rtl] th{text-align:right}.next-table[dir=rtl] .next-table-header-resizable .next-table-resize-handler{right:auto;left:0}.next-table[dir=rtl] td .next-table-cell-wrapper .next-icon-arrow-down.next-table-tree-arrow,.next-table[dir=rtl] td .next-table-cell-wrapper .next-icon-arrow-right.next-table-tree-arrow,.next-table[dir=rtl] td .next-table-cell-wrapper .next-table-tree-placeholder{margin-left:3px;margin-right:0;float:right}.next-table[dir=rtl] .next-table-expanded-row td:first-child{border-left-width:0;border-right-width:1px}.next-table[dir=rtl] .next-table-expanded-row td:last-child{border-left-width:1px;border-right-width:0}.next-table[dir=rtl].only-bottom-border .next-table-expanded-row td,.next-table[dir=rtl].only-bottom-border .next-table-expanded-row th{border-width:0 0 1px}.next-table[dir=rtl] .next-table-filter-footer button{margin-left:5px;margin-right:0}.next-table[dir=rtl] .next-table-lock-left,.next-table[dir=rtl] .next-table-lock-right{left:auto;right:0}.next-table[dir=rtl] .next-table-lock-right{right:auto;left:0}.next-table[dir=rtl] .next-table-lock-right table tr td:first-child,.next-table[dir=rtl] .next-table-lock-right table tr th:first-child{border-right-width:1px}.next-table[dir=rtl] .next-table-lock-right.shadow{-webkit-box-shadow:2px 0 3px rgba(0,0,0,.12);box-shadow:2px 0 3px rgba(0,0,0,.12)}.next-table[dir=rtl] .next-table-lock-left.shadow{-webkit-box-shadow:-2px 0 3px rgba(0,0,0,.12);box-shadow:-2px 0 3px rgba(0,0,0,.12)}.next-table[dir=rtl] .next-table-sort .next-icon{right:0;left:auto}.next-table[dir=rtl] .next-table-sort .next-icon-ascending{right:4px;left:auto}.next-table[dir=rtl] .next-table-filter{margin-right:5px;margin-left:0}.next-table-fixed[dir=rtl] table tr td:first-child,.next-table-fixed[dir=rtl] table tr th:first-child{border-left-width:1px;border-right-width:0}.next-table-fixed[dir=rtl] .next-table-body tr td:last-child,.next-table-fixed[dir=rtl] .next-table-header tr th:last-child{border-left-width:1px}.next-timeline,.next-timeline *,.next-timeline:after,.next-timeline :after,.next-timeline:before,.next-timeline :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-timeline ul{margin:0;padding:0;list-style:none}.next-timeline p{margin:0}.next-timeline-hide{display:none}.next-timeline[dir=rtl] .next-timeline-item-folder{padding-left:0;padding-right:28px}.next-timeline[dir=rtl] .next-timeline-item-dot-tail{left:auto;right:8px;border-left:none;border-right:1px dotted #dcdee3}.next-timeline[dir=rtl] .next-timeline-item-has-left-content.next-timeline-item-folder{margin-left:0;margin-right:80px}.next-timeline[dir=rtl] .next-timeline-item-done{position:relative}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-timeline{position:absolute;left:auto;right:0;top:0;height:100%}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-node{position:relative;width:16px;height:24px;padding:4px 0;text-align:center;float:right}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom{width:40px;height:auto;font-size:12px;word-break:break-all;margin-right:-12px;margin-left:0;line-height:1}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-dot{display:block;position:absolute;width:8px;height:8px;border-radius:100%;top:50%;margin-top:-4px;left:50%;margin-left:-4px}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-icon{display:block;position:absolute;width:16px;height:16px;line-height:16px;border-radius:100%;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-tail{position:absolute;width:auto;height:calc(100% - 24px);top:24px;left:auto;right:8px}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-tail i{display:inline-block;vertical-align:top;height:100%;width:1px;position:relative;background:#dcdee3;-webkit-transition:all .4s ease;transition:all .4s ease}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-content{display:inline-block;margin-right:28px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-content .next-timeline-item-title{margin:0;font-size:12px;font-weight:700;line-height:16px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-content .next-timeline-item-body{margin:0;margin-top:8px;font-size:12px;line-height:16px;color:#666;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-content .next-timeline-item-time{margin:0;margin-top:4px;margin-bottom:12px;font-size:12px;color:#999;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-done.next-timeline-item-has-left-content>.next-timeline-item-left-content{position:absolute;width:80px;display:inline-block;font-size:12px;color:#999;line-height:16px;margin-top:4px;text-align:left;padding-left:12px;padding-right:0}.next-timeline[dir=rtl] .next-timeline-item-done.next-timeline-item-has-left-content>.next-timeline-item-left-content p{word-break:break-word}.next-timeline[dir=rtl] .next-timeline-item-done.next-timeline-item-has-left-content>.next-timeline-item-timeline{margin-right:80px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-done.next-timeline-item-has-left-content>.next-timeline-item-content{margin-right:108px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-dot{background:#c4c6cf}.next-timeline[dir=rtl] .next-timeline-item-done .next-timeline-item-icon{background:#c4c6cf;color:#fff}.next-timeline[dir=rtl] .next-timeline-item-process{position:relative}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-timeline{position:absolute;left:auto;right:0;top:0;height:100%}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-node{position:relative;width:16px;height:24px;padding:4px 0;text-align:center;float:right}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom{width:40px;height:auto;font-size:12px;word-break:break-all;margin-right:-12px;margin-left:0;line-height:1}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-dot{display:block;position:absolute;width:8px;height:8px;border-radius:100%;top:50%;margin-top:-4px;left:50%;margin-left:-4px}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-icon{display:block;position:absolute;width:16px;height:16px;line-height:16px;border-radius:100%;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-tail{position:absolute;width:auto;height:calc(100% - 24px);top:24px;left:auto;right:8px}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-tail i{display:inline-block;vertical-align:top;height:100%;width:1px;position:relative;background:#dcdee3;-webkit-transition:all .4s ease;transition:all .4s ease}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-content{display:inline-block;margin-right:28px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-content .next-timeline-item-title{margin:0;font-size:12px;font-weight:700;line-height:16px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-content .next-timeline-item-body{margin:0;margin-top:8px;font-size:12px;line-height:16px;color:#666;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-content .next-timeline-item-time{margin:0;margin-top:4px;margin-bottom:12px;font-size:12px;color:#999;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-process.next-timeline-item-has-left-content>.next-timeline-item-left-content{position:absolute;width:80px;display:inline-block;font-size:12px;color:#999;line-height:16px;margin-top:4px;text-align:left;padding-left:12px;padding-right:0}.next-timeline[dir=rtl] .next-timeline-item-process.next-timeline-item-has-left-content>.next-timeline-item-left-content p{word-break:break-word}.next-timeline[dir=rtl] .next-timeline-item-process.next-timeline-item-has-left-content>.next-timeline-item-timeline{margin-right:80px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-process.next-timeline-item-has-left-content>.next-timeline-item-content{margin-right:108px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-dot{background:#5584ff}.next-timeline[dir=rtl] .next-timeline-item-process .next-timeline-item-icon{background:#5584ff;color:#fff}.next-timeline[dir=rtl] .next-timeline-item-success{position:relative}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-timeline{position:absolute;left:auto;right:0;top:0;height:100%}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-node{position:relative;width:16px;height:24px;padding:4px 0;text-align:center;float:right}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom{width:40px;height:auto;font-size:12px;word-break:break-all;margin-right:-12px;margin-left:0;line-height:1}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-dot{display:block;position:absolute;width:8px;height:8px;border-radius:100%;top:50%;margin-top:-4px;left:50%;margin-left:-4px}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-icon{display:block;position:absolute;width:16px;height:16px;line-height:16px;border-radius:100%;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-tail{position:absolute;width:auto;height:calc(100% - 24px);top:24px;left:auto;right:8px}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-tail i{display:inline-block;vertical-align:top;height:100%;width:1px;position:relative;background:#dcdee3;-webkit-transition:all .4s ease;transition:all .4s ease}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-content{display:inline-block;margin-right:28px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-content .next-timeline-item-title{margin:0;font-size:12px;font-weight:700;line-height:16px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-content .next-timeline-item-body{margin:0;margin-top:8px;font-size:12px;line-height:16px;color:#666;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-content .next-timeline-item-time{margin:0;margin-top:4px;margin-bottom:12px;font-size:12px;color:#999;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-success.next-timeline-item-has-left-content>.next-timeline-item-left-content{position:absolute;width:80px;display:inline-block;font-size:12px;color:#999;line-height:16px;margin-top:4px;text-align:left;padding-left:12px;padding-right:0}.next-timeline[dir=rtl] .next-timeline-item-success.next-timeline-item-has-left-content>.next-timeline-item-left-content p{word-break:break-word}.next-timeline[dir=rtl] .next-timeline-item-success.next-timeline-item-has-left-content>.next-timeline-item-timeline{margin-right:80px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-success.next-timeline-item-has-left-content>.next-timeline-item-content{margin-right:108px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-dot{background:#46bc15}.next-timeline[dir=rtl] .next-timeline-item-success .next-timeline-item-icon{background:#46bc15;color:#fff}.next-timeline[dir=rtl] .next-timeline-item-error{position:relative}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-timeline{position:absolute;left:auto;right:0;top:0;height:100%}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-node{position:relative;width:16px;height:24px;padding:4px 0;text-align:center;float:right}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom{width:40px;height:auto;font-size:12px;word-break:break-all;margin-right:-12px;margin-left:0;line-height:1}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-dot{display:block;position:absolute;width:8px;height:8px;border-radius:100%;top:50%;margin-top:-4px;left:50%;margin-left:-4px}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-icon{display:block;position:absolute;width:16px;height:16px;line-height:16px;border-radius:100%;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-tail{position:absolute;width:auto;height:calc(100% - 24px);top:24px;left:auto;right:8px}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-tail i{display:inline-block;vertical-align:top;height:100%;width:1px;position:relative;background:#dcdee3;-webkit-transition:all .4s ease;transition:all .4s ease}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-content{display:inline-block;margin-right:28px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-content .next-timeline-item-title{margin:0;font-size:12px;font-weight:700;line-height:16px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-content .next-timeline-item-body{margin:0;margin-top:8px;font-size:12px;line-height:16px;color:#666;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-content .next-timeline-item-time{margin:0;margin-top:4px;margin-bottom:12px;font-size:12px;color:#999;text-align:right}.next-timeline[dir=rtl] .next-timeline-item-error.next-timeline-item-has-left-content>.next-timeline-item-left-content{position:absolute;width:80px;display:inline-block;font-size:12px;color:#999;line-height:16px;margin-top:4px;text-align:left;padding-left:12px;padding-right:0}.next-timeline[dir=rtl] .next-timeline-item-error.next-timeline-item-has-left-content>.next-timeline-item-left-content p{word-break:break-word}.next-timeline[dir=rtl] .next-timeline-item-error.next-timeline-item-has-left-content>.next-timeline-item-timeline{margin-right:80px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-error.next-timeline-item-has-left-content>.next-timeline-item-content{margin-right:108px;margin-left:0}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-dot{background:#ff3000}.next-timeline[dir=rtl] .next-timeline-item-error .next-timeline-item-icon{background:#ff3000;color:#fff}.next-timeline{margin:0;padding:0;list-style:none}.next-timeline>li{outline:0}.next-timeline-item-folder{padding-left:28px;padding-top:4px;padding-bottom:4px;font-size:12px;line-height:16px;position:relative}.next-timeline-item-dot-tail{position:absolute;top:0;left:8px;height:100%;border-top:0;border-bottom:0;border-right:0;border-left:1px dotted #dcdee3}.next-timeline-item-dot-tail-solid{border-style:solid}.next-timeline-item-has-left-content.next-timeline-item-folder{margin-left:80px}.next-timeline-item-done{position:relative}.next-timeline-item-done .next-timeline-item-timeline{position:absolute;left:0;top:0;height:100%}.next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-node{position:relative;width:16px;height:24px;padding:4px 0;text-align:center;float:left}.next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom{width:40px;height:auto;font-size:12px;word-break:break-all;margin-left:-12px;line-height:1}.next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-dot{display:block;position:absolute;width:8px;height:8px;border-radius:100%;top:50%;margin-top:-4px;left:50%;margin-left:-4px}.next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-icon{display:block;position:absolute;width:16px;height:16px;line-height:16px;border-radius:100%;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-tail{position:absolute;width:auto;height:calc(100% - 24px);top:24px;left:8px}.next-timeline-item-done .next-timeline-item-timeline .next-timeline-item-tail i{display:inline-block;vertical-align:top;height:100%;width:1px;position:relative;background:#dcdee3;-webkit-transition:all .4s ease;transition:all .4s ease}.next-timeline-item-done .next-timeline-item-content{display:inline-block;margin-left:28px}.next-timeline-item-done .next-timeline-item-content .next-timeline-item-title{margin:0;font-size:12px;font-weight:700;line-height:16px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;text-align:left}.next-timeline-item-done .next-timeline-item-content .next-timeline-item-body{margin:0;margin-top:8px;font-size:12px;line-height:16px;color:#666;text-align:left}.next-timeline-item-done .next-timeline-item-content .next-timeline-item-time{margin:0;margin-top:4px;margin-bottom:12px;font-size:12px;color:#999;text-align:left}.next-timeline-item-done.next-timeline-item-has-left-content>.next-timeline-item-left-content{position:absolute;width:80px;display:inline-block;font-size:12px;color:#999;line-height:16px;margin-top:4px;text-align:right;padding-right:12px}.next-timeline-item-done.next-timeline-item-has-left-content>.next-timeline-item-left-content p{word-break:break-word}.next-timeline-item-done.next-timeline-item-has-left-content>.next-timeline-item-timeline{margin-left:80px}.next-timeline-item-done.next-timeline-item-has-left-content>.next-timeline-item-content{margin-left:108px}.next-timeline-item-done .next-timeline-item-dot{background:#c4c6cf}.next-timeline-item-done .next-timeline-item-icon{background:#c4c6cf;color:#fff}.next-timeline-item-process{position:relative}.next-timeline-item-process .next-timeline-item-timeline{position:absolute;left:0;top:0;height:100%}.next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-node{position:relative;width:16px;height:24px;padding:4px 0;text-align:center;float:left}.next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom{width:40px;height:auto;font-size:12px;word-break:break-all;margin-left:-12px;line-height:1}.next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-dot{display:block;position:absolute;width:8px;height:8px;border-radius:100%;top:50%;margin-top:-4px;left:50%;margin-left:-4px}.next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-icon{display:block;position:absolute;width:16px;height:16px;line-height:16px;border-radius:100%;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-tail{position:absolute;width:auto;height:calc(100% - 24px);top:24px;left:8px}.next-timeline-item-process .next-timeline-item-timeline .next-timeline-item-tail i{display:inline-block;vertical-align:top;height:100%;width:1px;position:relative;background:#dcdee3;-webkit-transition:all .4s ease;transition:all .4s ease}.next-timeline-item-process .next-timeline-item-content{display:inline-block;margin-left:28px}.next-timeline-item-process .next-timeline-item-content .next-timeline-item-title{margin:0;font-size:12px;font-weight:700;line-height:16px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;text-align:left}.next-timeline-item-process .next-timeline-item-content .next-timeline-item-body{margin:0;margin-top:8px;font-size:12px;line-height:16px;color:#666;text-align:left}.next-timeline-item-process .next-timeline-item-content .next-timeline-item-time{margin:0;margin-top:4px;margin-bottom:12px;font-size:12px;color:#999;text-align:left}.next-timeline-item-process.next-timeline-item-has-left-content>.next-timeline-item-left-content{position:absolute;width:80px;display:inline-block;font-size:12px;color:#999;line-height:16px;margin-top:4px;text-align:right;padding-right:12px}.next-timeline-item-process.next-timeline-item-has-left-content>.next-timeline-item-left-content p{word-break:break-word}.next-timeline-item-process.next-timeline-item-has-left-content>.next-timeline-item-timeline{margin-left:80px}.next-timeline-item-process.next-timeline-item-has-left-content>.next-timeline-item-content{margin-left:108px}.next-timeline-item-process .next-timeline-item-dot{background:#5584ff}.next-timeline-item-process .next-timeline-item-icon{background:#5584ff;color:#fff}.next-timeline-item-success{position:relative}.next-timeline-item-success .next-timeline-item-timeline{position:absolute;left:0;top:0;height:100%}.next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-node{position:relative;width:16px;height:24px;padding:4px 0;text-align:center;float:left}.next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom{width:40px;height:auto;font-size:12px;word-break:break-all;margin-left:-12px;line-height:1}.next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-dot{display:block;position:absolute;width:8px;height:8px;border-radius:100%;top:50%;margin-top:-4px;left:50%;margin-left:-4px}.next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-icon{display:block;position:absolute;width:16px;height:16px;line-height:16px;border-radius:100%;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-tail{position:absolute;width:auto;height:calc(100% - 24px);top:24px;left:8px}.next-timeline-item-success .next-timeline-item-timeline .next-timeline-item-tail i{display:inline-block;vertical-align:top;height:100%;width:1px;position:relative;background:#dcdee3;-webkit-transition:all .4s ease;transition:all .4s ease}.next-timeline-item-success .next-timeline-item-content{display:inline-block;margin-left:28px}.next-timeline-item-success .next-timeline-item-content .next-timeline-item-title{margin:0;font-size:12px;font-weight:700;line-height:16px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;text-align:left}.next-timeline-item-success .next-timeline-item-content .next-timeline-item-body{margin:0;margin-top:8px;font-size:12px;line-height:16px;color:#666;text-align:left}.next-timeline-item-success .next-timeline-item-content .next-timeline-item-time{margin:0;margin-top:4px;margin-bottom:12px;font-size:12px;color:#999;text-align:left}.next-timeline-item-success.next-timeline-item-has-left-content>.next-timeline-item-left-content{position:absolute;width:80px;display:inline-block;font-size:12px;color:#999;line-height:16px;margin-top:4px;text-align:right;padding-right:12px}.next-timeline-item-success.next-timeline-item-has-left-content>.next-timeline-item-left-content p{word-break:break-word}.next-timeline-item-success.next-timeline-item-has-left-content>.next-timeline-item-timeline{margin-left:80px}.next-timeline-item-success.next-timeline-item-has-left-content>.next-timeline-item-content{margin-left:108px}.next-timeline-item-success .next-timeline-item-dot{background:#46bc15}.next-timeline-item-success .next-timeline-item-icon{background:#46bc15;color:#fff}.next-timeline-item-error{position:relative}.next-timeline-item-error .next-timeline-item-timeline{position:absolute;left:0;top:0;height:100%}.next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-node{position:relative;width:16px;height:24px;padding:4px 0;text-align:center;float:left}.next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-node.next-timeline-item-node-custom{width:40px;height:auto;font-size:12px;word-break:break-all;margin-left:-12px;line-height:1}.next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-dot{display:block;position:absolute;width:8px;height:8px;border-radius:100%;top:50%;margin-top:-4px;left:50%;margin-left:-4px}.next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-icon{display:block;position:absolute;width:16px;height:16px;line-height:16px;border-radius:100%;top:50%;left:50%;margin-top:-8px;margin-left:-8px}.next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-icon .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-tail{position:absolute;width:auto;height:calc(100% - 24px);top:24px;left:8px}.next-timeline-item-error .next-timeline-item-timeline .next-timeline-item-tail i{display:inline-block;vertical-align:top;height:100%;width:1px;position:relative;background:#dcdee3;-webkit-transition:all .4s ease;transition:all .4s ease}.next-timeline-item-error .next-timeline-item-content{display:inline-block;margin-left:28px}.next-timeline-item-error .next-timeline-item-content .next-timeline-item-title{margin:0;font-size:12px;font-weight:700;line-height:16px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;text-align:left}.next-timeline-item-error .next-timeline-item-content .next-timeline-item-body{margin:0;margin-top:8px;font-size:12px;line-height:16px;color:#666;text-align:left}.next-timeline-item-error .next-timeline-item-content .next-timeline-item-time{margin:0;margin-top:4px;margin-bottom:12px;font-size:12px;color:#999;text-align:left}.next-timeline-item-error.next-timeline-item-has-left-content>.next-timeline-item-left-content{position:absolute;width:80px;display:inline-block;font-size:12px;color:#999;line-height:16px;margin-top:4px;text-align:right;padding-right:12px}.next-timeline-item-error.next-timeline-item-has-left-content>.next-timeline-item-left-content p{word-break:break-word}.next-timeline-item-error.next-timeline-item-has-left-content>.next-timeline-item-timeline{margin-left:80px}.next-timeline-item-error.next-timeline-item-has-left-content>.next-timeline-item-content{margin-left:108px}.next-timeline-item-error .next-timeline-item-dot{background:#ff3000}.next-timeline-item-error .next-timeline-item-icon{background:#ff3000;color:#fff}.next-timeline-item-last .next-timeline-item-tail{display:none}.next-timeline-item-has-left-content{min-height:48px}.next-timeline-item-folder.next-timeline-item-has-left-content{min-height:auto}.next-transfer{display:inline-block}.next-transfer,.next-transfer *,.next-transfer :after,.next-transfer :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-transfer-panel{display:inline-block;border:1px solid #dcdee3;border-radius:3px;background-color:#fff;vertical-align:middle;overflow:hidden}.next-transfer-panel-header{padding:8px 20px;border-bottom:1px solid #dcdee3;background-color:#f7f8fa;color:#333;font-size:12px}.next-transfer-panel-search{padding:0 4px;margin-top:8px;margin-bottom:0;width:100%}.next-transfer .next-transfer-panel-list{width:180px;height:160px;padding:0;border:none;-webkit-box-shadow:none;box-shadow:none;border-radius:0;overflow-y:auto}.next-transfer-panel-not-found-container{display:table;width:100%;height:100%}.next-transfer-panel-not-found{display:table-cell;vertical-align:middle;text-align:center;color:#999;font-size:14px}.next-transfer-panel-item.next-focused{-webkit-transition:background-color .2s ease;transition:background-color .2s ease}.next-transfer-panel-item:not(.next-disabled).next-simple:hover{color:#5584ff}.next-transfer-panel-item.next-insert-before:before{position:absolute;top:0;left:0;content:"";width:100%;border-top:1px solid #5584ff}.next-transfer-panel-item.next-insert-after:after{position:absolute;left:0;bottom:0;content:"";width:100%;border-bottom:1px solid #5584ff}.next-transfer-panel-footer{padding:8px 20px;border-top:1px solid #dcdee3;background-color:#fff;font-size:0}.next-transfer-panel-count{margin-left:4px;font-size:12px;vertical-align:middle;color:#333}.next-transfer-panel-move-all{font-size:12px;color:#5584ff;cursor:pointer}.next-transfer-panel-move-all.next-disabled{color:#ccc;cursor:not-allowed}.next-transfer-operations{display:inline-block;vertical-align:middle;margin:0 20px}.next-transfer-move.next-icon{color:#c4c6cf}.next-transfer-operation.next-btn{display:block}.next-transfer-operation.next-btn+.next-transfer-operation.next-btn{margin-top:8px}.next-transfer-operation.next-btn .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tree,.next-tree *,.next-tree :after,.next-tree :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tree,.next-tree-child-tree{margin:0;padding:0;list-style:none}.next-tree-node{white-space:nowrap}.next-tree-node-inner{font-size:0;outline:none}.next-tree-node-label-wrapper{display:inline-block;margin:0 4px;vertical-align:middle}.next-tree-node-label{height:20px;line-height:20px;padding:0 4px;border-radius:3px;font-size:12px}.next-tree-node-input.next-input{margin:0 4px}.next-tree-switcher{position:relative;display:inline-block;vertical-align:middle;margin-right:8px}.next-tree-switcher.next-noline{width:12px;height:12px;line-height:12px;cursor:pointer}.next-tree-switcher.next-noline .next-tree-switcher-icon{-webkit-transition:-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:-webkit-transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1);transition:transform .3s cubic-bezier(.23,1,.32,1),-webkit-transform .3s cubic-bezier(.23,1,.32,1);color:#999}.next-tree-switcher.next-noline .next-tree-switcher-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tree-switcher.next-noline.next-close .next-tree-switcher-icon{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.next-tree-switcher.next-noline.next-close .next-tree-switcher-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tree-switcher.next-noline:not(.next-disabled):hover .next-tree-switcher-icon{color:#333}.next-tree-switcher.next-noline.next-disabled{cursor:not-allowed}.next-tree-switcher.next-noline.next-disabled .next-tree-switcher-icon{color:#ccc}.next-tree-switcher.next-noop-noline{width:12px;height:12px}.next-tree-switcher.next-line{width:16px;height:16px;line-height:14px;border:1px solid #c4c6cf;border-radius:3px;background-color:#fff;cursor:pointer}.next-tree-switcher.next-line .next-tree-switcher-icon{margin-left:3px;color:#666}.next-tree-switcher.next-line .next-tree-switcher-icon:before{width:8px;font-size:8px;line-height:inherit}@media (-webkit-min-device-pixel-ratio:0) and (min-resolution:0.001dpcm){.next-tree-switcher.next-line .next-tree-switcher-icon{-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);margin-left:-1px;margin-right:-4px}.next-tree-switcher.next-line .next-tree-switcher-icon:before{width:16px;font-size:16px}}.next-tree-switcher.next-line:not(.next-disabled):hover{border-color:#a0a2ad;background-color:#f2f3f7}.next-tree-switcher.next-line:not(.next-disabled):hover .next-tree-switcher-icon{color:#333}.next-tree-switcher.next-line.next-disabled{border-color:#e6e7eb;background-color:#fff;cursor:not-allowed}.next-tree-switcher.next-line.next-disabled .next-tree-switcher-icon{color:#ccc}.next-tree-switcher.next-noop-line{width:16px;height:16px}.next-tree-switcher.next-noop-line-noroot{height:0;border-left:1px solid #c4c6cf;border-bottom:1px solid #c4c6cf}.next-tree-switcher.next-noop-line-noroot .next-tree-right-angle{bottom:-1px}.next-tree-switcher.next-loading.next-loading-noline{width:12px;height:12px;line-height:12px}.next-tree-switcher.next-loading.next-loading-line{width:16px;height:16px;line-height:14px;border:1px solid transparent}.next-tree-switcher.next-loading .next-tree-switcher-icon{color:#5584ff}.next-tree-switcher.next-loading .next-tree-switcher-icon:before{width:12px;font-size:12px;line-height:inherit}.next-tree-right-angle{position:absolute;bottom:6.5px;left:-17.5px;display:block;width:16.5px;height:22px;border-left:1px solid #c4c6cf;border-bottom:1px solid #c4c6cf}.next-tree.next-label-block .next-tree-node-inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;outline:none}.next-tree.next-label-block .next-tree-node-label-wrapper{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.next-tree.next-node-indent .next-tree-node .next-tree-node{margin-left:24px}.next-tree.next-node-indent .next-tree-node-inner{padding-top:2px;padding-bottom:2px}.next-tree.next-node-indent .next-tree-node-inner:focus .next-tree-node-label{color:#333;background-color:#f2f3f7}.next-tree.next-node-indent .next-tree-node-label-wrapper{border-top:2px solid transparent;border-bottom:2px solid transparent}.next-tree.next-node-indent .next-tree-node-label{-webkit-transition:color .3s cubic-bezier(.23,1,.32,1),background-color .3s cubic-bezier(.23,1,.32,1);transition:color .3s cubic-bezier(.23,1,.32,1),background-color .3s cubic-bezier(.23,1,.32,1);cursor:default;color:#333;background-color:#fff}.next-tree.next-node-indent .next-tree-node-label-selectable{cursor:pointer}.next-tree.next-node-indent .next-tree-node-label:hover{color:#333;background-color:#f2f3f7}.next-tree.next-node-indent .next-tree-node-inner.next-selected .next-tree-node-label{color:#333;background-color:#dee8ff}.next-tree.next-node-indent .next-tree-node-inner.next-disabled .next-tree-node-label,.next-tree.next-node-indent .next-tree-node-inner.next-disabled .next-tree-node-label:hover{color:#ccc;background-color:#fff;cursor:not-allowed}.next-tree.next-node-indent .next-tree-node-inner.next-drag-over .next-tree-node-label{background-color:#5584ff;color:#fff;opacity:.8}.next-tree.next-node-indent .next-tree-node-inner.next-drag-over-gap-top .next-tree-node-label-wrapper{border-top-color:#5584ff}.next-tree.next-node-indent .next-tree-node-inner.next-drag-over-gap-bottom .next-tree-node-label-wrapper{border-bottom-color:#5584ff}.next-tree.next-node-block .next-tree-node-inner{padding-top:4px;padding-bottom:4px;-webkit-transition:color .3s cubic-bezier(.23,1,.32,1),background-color .3s cubic-bezier(.23,1,.32,1);transition:color .3s cubic-bezier(.23,1,.32,1),background-color .3s cubic-bezier(.23,1,.32,1);cursor:pointer;color:#333;background-color:#fff}.next-tree.next-node-block .next-tree-node-inner:focus,.next-tree.next-node-block .next-tree-node-inner:hover{color:#333;background-color:#f2f3f7}.next-tree.next-node-block .next-tree-node-inner.next-selected{color:#333;background-color:#dee8ff}.next-tree.next-node-block .next-tree-node-inner.next-disabled,.next-tree.next-node-block .next-tree-node-inner.next-disabled:hover{color:#ccc;background-color:#fff;cursor:not-allowed}.next-tree.next-show-line .next-tree-node .next-tree-node:not(:last-child){margin-left:7.5px;border-left:1px solid #c4c6cf;padding-left:15.5px}.next-tree-node.next-filtered>.next-tree-node-inner .next-tree-node-label,.next-tree-node.next-filtered>.next-tree-node-inner .next-tree-node-label:hover{color:#5584ff}.next-tree[dir=rtl] .next-tree-switcher{margin-left:8px;margin-right:0}.next-tree[dir=rtl] .next-tree-right-angle,.next-tree[dir=rtl] .next-tree-switcher.next-noop-line-noroot{border-left:none;border-right:1px solid #c4c6cf}.next-tree[dir=rtl] .next-tree-right-angle{left:auto;right:-17.5px}.next-tree[dir=rtl].next-show-line .next-tree-node .next-tree-node:not(:last-child){margin-left:0;margin-right:7.5px;border-left:none;border-right:1px solid #c4c6cf;padding-left:0;padding-right:15.5px}.next-tree[dir=rtl].next-node-indent .next-tree-node .next-tree-node{margin-left:0;margin-right:24px}.next-tree-select,.next-tree-select *,.next-tree-select :after,.next-tree-select :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-tree-select-dropdown{padding:8px 20px;background:#fff;border:1px solid #dcdee3;border-radius:3px;-webkit-box-shadow:none;box-shadow:none}.next-tree-select-not-found{height:16px;font-size:12px;color:#999}.next-upload-list[dir=rtl].next-upload-list-text .next-upload-list-item{padding:4px 8px;padding-left:36px}.next-upload-list[dir=rtl].next-upload-list-text .next-icon{left:12px;right:auto}.next-upload-list[dir=rtl].next-upload-list-image .next-icon-close{float:left;margin-left:4px;margin-right:0}.next-upload-list[dir=rtl].next-upload-list-image .next-upload-list-item-thumbnail{float:right;margin-left:8px;margin-right:0}.next-upload-list[dir=rtl].next-upload-list-image .next-upload-list-item-progress{margin-right:56px;margin-left:20px}.next-upload,.next-upload *,.next-upload :after,.next-upload :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-upload-inner{outline:0;display:inline-block}.next-upload-inner.next-hidden{display:none}.next-upload-list{overflow:hidden}.next-upload-list,.next-upload-list *,.next-upload-list :after,.next-upload-list :before{-webkit-box-sizing:border-box;box-sizing:border-box}.next-upload-list-item{position:relative}.next-upload-list-item.next-hidden{display:none}.next-upload-list-item-name{text-decoration:none}.next-upload.next-disabled{border-color:#e6e7eb!important;color:#ccc!important}.next-upload.next-disabled .next-icon-close{cursor:not-allowed!important}.next-upload.next-disabled .next-upload-inner *{color:#ccc!important;border-color:#e6e7eb!important;cursor:not-allowed!important}.next-upload-list-text .next-upload-list-item{background-color:#f2f3f7;padding:4px 8px;padding-right:36px;height:40px;line-height:32px;font-size:12px;overflow:hidden;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.next-upload-list-text .next-upload-list-item:not(:last-child){margin-bottom:4px}.next-upload-list-text .next-upload-list-item .next-icon{position:absolute;top:0;right:12px;color:#999;cursor:pointer;text-align:center;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;line-height:40px}.next-upload-list-text .next-upload-list-item .next-icon:before{width:12px;font-size:12px;line-height:inherit}.next-upload-list-text .next-upload-list-item:hover{background-color:#f2f3f7}.next-upload-list-text .next-upload-list-item:hover .next-icon{color:#666}.next-upload-list-text .next-upload-list-item-name-wrap{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-right:4px}.next-upload-list-text .next-upload-list-item-name{color:#333;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.next-upload-list-text .next-upload-list-item-size{color:#999;margin-left:8px}.next-upload-list-text .next-upload-list-item-uploading{line-height:16px}.next-upload-list-text .next-upload-list-item-done{line-height:32px}.next-upload-list-text .next-upload-list-item-done:hover .next-upload-list-item-name,.next-upload-list-text .next-upload-list-item-done:hover .next-upload-list-item-size{color:#5584ff}.next-upload-list-text .next-upload-list-item-error{background-color:#ffece4!important}.next-upload-list-text .next-upload-list-item-error.next-upload-list-item-error-with-msg{line-height:16px}.next-upload-list-text .next-upload-list-item-error-msg{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#ff3000}.next-upload-list-image .next-upload-list-item{-webkit-box-sizing:content-box;box-sizing:content-box;border:1px solid #dcdee3;background-color:#fff;padding:8px;height:48px;line-height:48px;font-size:12px;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;overflow:hidden}.next-upload-list-image .next-upload-list-item:not(:last-child){margin-bottom:4px}.next-upload-list-image .next-upload-list-item:after{visibility:hidden;display:block;height:0;font-size:0;content:" ";clear:both}.next-upload-list-image .next-upload-list-item .next-icon-close{float:right;margin-right:4px;cursor:pointer;color:#999;text-align:center}.next-upload-list-image .next-upload-list-item .next-icon-close:before{width:12px;font-size:12px;line-height:inherit}.next-upload-list-image .next-upload-list-item:hover{border-color:#5584ff}.next-upload-list-image .next-upload-list-item:hover .next-icon-close{color:#666}.next-upload-list-image .next-upload-list-item-name{display:block;color:#333;margin-left:56px;margin-right:20px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;-webkit-transition:all .2s ease-out;transition:all .2s ease-out}.next-upload-list-image .next-upload-list-item-size{color:#999;margin-left:8px}.next-upload-list-image .next-upload-list-item-progress{line-height:24px}.next-upload-list-image .next-upload-list-item-done:hover .next-upload-list-item-name,.next-upload-list-image .next-upload-list-item-done:hover .next-upload-list-item-size{color:#5584ff}.next-upload-list-image .next-upload-list-item-thumbnail{float:left;width:48px;height:48px;color:#ccc;border:1px solid #dcdee3;background-color:#f2f3f7;margin-right:8px;vertical-align:middle;text-align:center;overflow:hidden;-webkit-box-sizing:border-box;box-sizing:border-box}.next-upload-list-image .next-upload-list-item-thumbnail img{width:100%;height:100%}.next-upload-list-image .next-upload-list-item-thumbnail .next-icon{display:block;margin:0;line-height:48px}.next-upload-list-image .next-upload-list-item-thumbnail .next-icon:before{width:24px;font-size:24px;line-height:inherit}.next-upload-list-image .next-upload-list-item-error{border-color:#ff3000!important;background-color:#fff}.next-upload-list-image .next-upload-list-item-uploading{background-color:#fff}.next-upload-list-image .next-upload-list-item-uploading .next-upload-list-item-name{height:24px;line-height:24px}.next-upload-list-image .next-upload-list-item-uploading .next-upload-list-item-progress{margin-left:56px;margin-right:20px;height:24px;line-height:24px}.next-upload-list-image .next-upload-list-item-error-with-msg .next-upload-list-item-error-msg,.next-upload-list-image .next-upload-list-item-error-with-msg .next-upload-list-item-name{height:24px;line-height:24px}.next-upload-list-image .next-upload-list-item-error-with-msg .next-upload-list-item-error-msg{margin-left:56px;margin-right:20px;color:#ff3000;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.next-upload-list-card{display:inline-block}.next-upload-list-card .next-upload-list-item{vertical-align:middle;float:left}.next-upload-list-card .next-upload-list-item:not(:last-child){margin-right:12px}.next-upload-list-card .next-upload-list-item-wrapper{position:relative;border:1px solid #c4c6cf;width:100px;height:100px;padding:0;background-color:transparent}.next-upload-list-card .next-upload-list-item-thumbnail{display:table;text-align:center;vertical-align:middle;width:100%;height:100%;color:#ccc;font-size:12px}.next-upload-list-card .next-upload-list-item-thumbnail img{width:100%;height:100%}.next-upload-list-card .next-upload-list-item-thumbnail img:focus{outline:0}.next-upload-list-card .next-upload-list-item-thumbnail .next-icon{width:100%}.next-upload-list-card .next-upload-list-item-thumbnail .next-icon:before{width:48px;font-size:48px;line-height:inherit}.next-upload-list-card .next-upload-list-item-handler{display:table-cell;width:100%;vertical-align:middle}.next-upload-list-card .next-upload-list-item-name{display:block;width:100px;text-align:center;margin-top:4px;font-size:12px;color:#666;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.next-upload-list-card .next-upload-list-item-progress{position:absolute;font-size:0;bottom:0;left:0;width:100%}.next-upload-list-card .next-upload-list-item-progress .next-progress-line-overlay,.next-upload-list-card .next-upload-list-item-progress .next-progress-line-underlay{border-radius:0}.next-upload-list-card .next-upload-list-item-uploading .next-upload-list-item-wrapper{background-color:#f7f8fa}.next-upload-list-card .next-upload-list-item:hover .next-upload-tool{opacity:.8}.next-upload-list-card .next-upload-list-item .next-upload-tool{position:absolute;z-index:1;background-color:rgba(0,0,0,.7);-webkit-transition:all .3s ease;transition:all .3s ease;opacity:0;width:100%;height:28px;left:0;bottom:0}.next-upload-list-card .next-upload-list-item .next-upload-tool .next-icon{width:49%;text-align:center;line-height:28px;color:#fff}.next-upload-list-card .next-upload-list-item .next-upload-tool .next-icon:before{width:16px;font-size:16px;line-height:inherit}.next-upload-list-card .next-upload-list-item .next-upload-tool.next-noclose .next-icon{width:100%}.next-upload-list-card .next-upload-list-item .next-upload-tool-close{cursor:pointer}.next-upload-list-card .next-upload-list-item .next-upload-tool-download-icon{border-right:1px solid #fff}.next-upload-list-card .next-upload-list-item-error .next-upload-list-item-wrapper{border-color:#ff3000}.next-upload-card{border:1px dashed #c4c6cf;width:100px;height:100px;background-color:#fff;text-align:center;cursor:pointer;-webkit-transition:border-color .3s ease;transition:border-color .3s ease;display:table-cell;vertical-align:middle}.next-upload-card .next-icon{color:#c4c6cf}.next-upload-card .next-icon:before{width:24px;font-size:24px;line-height:inherit}.next-upload-card .next-upload-text{font-size:12px;margin-top:12px;color:#666}.next-upload-card:hover{border-color:#5584ff}.next-upload-card:hover .next-icon,.next-upload-card:hover .next-upload-text{color:#5584ff}.next-upload-dragable .next-upload-inner{display:block}.next-upload-dragable .next-upload-drag{border:1px dashed #c4c6cf;-webkit-transition:border-color .3s ease;transition:border-color .3s ease;cursor:pointer;border-radius:3px;background-color:transparent;text-align:center;margin-bottom:4px}.next-upload-dragable .next-upload-drag-icon{margin:20px 0 0;color:#666}.next-upload-dragable .next-upload-drag-icon .next-upload-drag-upload-icon:before{content:"\E7EE"}.next-upload-dragable .next-upload-drag-text{margin:12px 0 0;font-size:14px;color:#666}.next-upload-dragable .next-upload-drag-hint{margin:4px 0 20px;font-size:12px;color:#999}.next-upload-dragable .next-upload-drag-over{border-color:#5584ff} \ No newline at end of file diff --git a/dist/next-with-locales.js b/dist/next-with-locales.js new file mode 100644 index 0000000000..241e541a8e --- /dev/null +++ b/dist/next-with-locales.js @@ -0,0 +1,60640 @@ +/*! + * @alifd/next@1.14.4 (https://fusion.design) + * Copyright 2018-present Alibaba Group, + * Licensed under MIT (https://github.com/alibaba-fusion/next/blob/master/LICENSE) + */ +(function webpackUniversalModuleDefinition(root, factory) { + if(typeof exports === 'object' && typeof module === 'object') + module.exports = factory(require("react"), require("react-dom"), require("moment")); + else if(typeof define === 'function' && define.amd) + define(["react", "react-dom", "moment"], factory); + else if(typeof exports === 'object') + exports["Next"] = factory(require("react"), require("react-dom"), require("moment")); + else + root["Next"] = factory(root["React"], root["ReactDOM"], root["moment"]); +})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_11__, __WEBPACK_EXTERNAL_MODULE_17__) { +return /******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) { +/******/ return installedModules[moduleId].exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ i: moduleId, +/******/ l: false, +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); +/******/ +/******/ // Flag the module as loaded +/******/ module.l = true; +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/******/ +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; +/******/ +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; +/******/ +/******/ // define getter function for harmony exports +/******/ __webpack_require__.d = function(exports, name, getter) { +/******/ if(!__webpack_require__.o(exports, name)) { +/******/ Object.defineProperty(exports, name, { +/******/ configurable: false, +/******/ enumerable: true, +/******/ get: getter +/******/ }); +/******/ } +/******/ }; +/******/ +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = function(module) { +/******/ var getter = module && module.__esModule ? +/******/ function getDefault() { return module['default']; } : +/******/ function getModuleExports() { return module; }; +/******/ __webpack_require__.d(getter, 'a', getter); +/******/ return getter; +/******/ }; +/******/ +/******/ // Object.prototype.hasOwnProperty.call +/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; +/******/ +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = "/dist/"; +/******/ +/******/ // Load entry module and return exports +/******/ return __webpack_require__(__webpack_require__.s = 377); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ (function(module, exports) { + +module.exports = __WEBPACK_EXTERNAL_MODULE_0__; + +/***/ }), +/* 1 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +exports.__esModule = true; + +exports.default = function (instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } +}; + +/***/ }), +/* 2 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +exports.__esModule = true; + +var _typeof2 = __webpack_require__(15); + +var _typeof3 = _interopRequireDefault(_typeof2); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = function (self, call) { + if (!self) { + throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); + } + + return call && ((typeof call === "undefined" ? "undefined" : (0, _typeof3.default)(call)) === "object" || typeof call === "function") ? call : self; +}; + +/***/ }), +/* 3 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +exports.__esModule = true; + +var _setPrototypeOf = __webpack_require__(189); + +var _setPrototypeOf2 = _interopRequireDefault(_setPrototypeOf); + +var _create = __webpack_require__(193); + +var _create2 = _interopRequireDefault(_create); + +var _typeof2 = __webpack_require__(15); + +var _typeof3 = _interopRequireDefault(_typeof2); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = function (subClass, superClass) { + if (typeof superClass !== "function" && superClass !== null) { + throw new TypeError("Super expression must either be null or a function, not " + (typeof superClass === "undefined" ? "undefined" : (0, _typeof3.default)(superClass))); + } + + subClass.prototype = (0, _create2.default)(superClass && superClass.prototype, { + constructor: { + value: subClass, + enumerable: false, + writable: true, + configurable: true + } + }); + if (superClass) _setPrototypeOf2.default ? (0, _setPrototypeOf2.default)(subClass, superClass) : subClass.__proto__ = superClass; +}; + +/***/ }), +/* 4 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +exports.__esModule = true; + +var _assign = __webpack_require__(159); + +var _assign2 = _interopRequireDefault(_assign); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _assign2.default || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; +}; + +/***/ }), +/* 5 */ +/***/ (function(module, exports, __webpack_require__) { + +/** + * Copyright (c) 2013-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +if (false) { + var ReactIs = require('react-is'); + + // By explicitly using `prop-types` you are opting into new development behavior. + // http://fb.me/prop-types-in-prod + var throwOnDirectAccess = true; + module.exports = require('./factoryWithTypeCheckers')(ReactIs.isElement, throwOnDirectAccess); +} else { + // By explicitly using `prop-types` you are opting into new production behavior. + // http://fb.me/prop-types-in-prod + module.exports = __webpack_require__(196)(); +} + + +/***/ }), +/* 6 */ +/***/ (function(module, exports, __webpack_require__) { + +var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*! + Copyright (c) 2017 Jed Watson. + Licensed under the MIT License (MIT), see + http://jedwatson.github.io/classnames +*/ +/* global define */ + +(function () { + 'use strict'; + + var hasOwn = {}.hasOwnProperty; + + function classNames () { + var classes = []; + + for (var i = 0; i < arguments.length; i++) { + var arg = arguments[i]; + if (!arg) continue; + + var argType = typeof arg; + + if (argType === 'string' || argType === 'number') { + classes.push(arg); + } else if (Array.isArray(arg) && arg.length) { + var inner = classNames.apply(null, arg); + if (inner) { + classes.push(inner); + } + } else if (argType === 'object') { + for (var key in arg) { + if (hasOwn.call(arg, key) && arg[key]) { + classes.push(key); + } + } + } + } + + return classes.join(' '); + } + + if (typeof module !== 'undefined' && module.exports) { + classNames.default = classNames; + module.exports = classNames; + } else if (true) { + // register as 'classnames', consistent with npm package name + !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = (function () { + return classNames; + }).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), + __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); + } else { + window.classNames = classNames; + } +}()); + + +/***/ }), +/* 7 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +exports.__esModule = true; +exports.htmlId = exports.KEYCODE = exports.guid = exports.focus = exports.support = exports.str = exports.obj = exports.log = exports.func = exports.events = exports.env = exports.dom = undefined; + +var _dom2 = __webpack_require__(92); + +var _dom = _interopRequireWildcard(_dom2); + +var _env2 = __webpack_require__(95); + +var _env = _interopRequireWildcard(_env2); + +var _events2 = __webpack_require__(198); + +var _events = _interopRequireWildcard(_events2); + +var _func2 = __webpack_require__(199); + +var _func = _interopRequireWildcard(_func2); + +var _log2 = __webpack_require__(94); + +var _log = _interopRequireWildcard(_log2); + +var _object2 = __webpack_require__(31); + +var _object = _interopRequireWildcard(_object2); + +var _string2 = __webpack_require__(93); + +var _string = _interopRequireWildcard(_string2); + +var _support2 = __webpack_require__(200); + +var _support = _interopRequireWildcard(_support2); + +var _focus2 = __webpack_require__(201); + +var _focus = _interopRequireWildcard(_focus2); + +var _guid2 = __webpack_require__(202); + +var _guid3 = _interopRequireDefault(_guid2); + +var _keycode = __webpack_require__(96); + +var _keycode2 = _interopRequireDefault(_keycode); + +var _htmlId2 = __webpack_require__(203); + +var _htmlId = _interopRequireWildcard(_htmlId2); + +function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { default: obj }; +} + +function _interopRequireWildcard(obj) { + if (obj && obj.__esModule) { + return obj; + } else { + var newObj = {};if (obj != null) { + for (var key in obj) { + if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; + } + }newObj.default = obj;return newObj; + } +} + +var dom = exports.dom = _dom; +var env = exports.env = _env; +var events = exports.events = _events; +var func = exports.func = _func; +var log = exports.log = _log; +var obj = exports.obj = _object; +var str = exports.str = _string; +var support = exports.support = _support; +var focus = exports.focus = _focus; +var guid = exports.guid = _guid3.default; +var KEYCODE = exports.KEYCODE = _keycode2.default; +var htmlId = exports.htmlId = _htmlId; + +/***/ }), +/* 8 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +exports.__esModule = true; + +exports.default = function (obj, keys) { + var target = {}; + + for (var i in obj) { + if (keys.indexOf(i) >= 0) continue; + if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; + target[i] = obj[i]; + } + + return target; +}; + +/***/ }), +/* 9 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +exports.__esModule = true; + +var _extends2 = __webpack_require__(4); + +var _extends3 = _interopRequireDefault(_extends2); + +var _classCallCheck2 = __webpack_require__(1); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _possibleConstructorReturn2 = __webpack_require__(2); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = __webpack_require__(3); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _class, _temp; + +var _react = __webpack_require__(0); + +var _propTypes = __webpack_require__(5); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _getContextProps = __webpack_require__(97); + +var _getContextProps2 = _interopRequireDefault(_getContextProps); + +var _config = __webpack_require__(204); + +var _consumer = __webpack_require__(206); + +var _consumer2 = _interopRequireDefault(_consumer); + +var _errorBoundary = __webpack_require__(98); + +var _errorBoundary2 = _interopRequireDefault(_errorBoundary); + +var _cache = __webpack_require__(207); + +var _cache2 = _interopRequireDefault(_cache); + +function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { default: obj }; +} + +var childContextCache = new _cache2.default(); + +/** + * ConfigProvider + * @propsExtends false + */ +var ConfigProvider = (_temp = _class = function (_Component) { + (0, _inherits3.default)(ConfigProvider, _Component); + + /** + * 传入组件，生成受 ConfigProvider 控制的 HOC 组件 + * @param {Component} Component 组件类 + * @param {Object} options 可选项 + * @returns {Component} HOC + */ + function ConfigProvider() { + (0, _classCallCheck3.default)(this, ConfigProvider); + + for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { + args[_key] = arguments[_key]; + } + + var _this = (0, _possibleConstructorReturn3.default)(this, _Component.call.apply(_Component, [this].concat(args))); + + childContextCache.add(_this, (0, _extends3.default)({}, childContextCache.get(_this, {}), _this.getChildContext())); + return _this; + } + + /** + * 传入组件的 props 和 displayName，得到和 childContext 计算过的包含有 preifx/locale/pure 的对象，一般用于通过静态方法生成脱离组件树的组件 + * @param {Object} props 组件的 props + * @param {String} displayName 组件的 displayName + * @returns {Object} 新的 context props + */ + + ConfigProvider.prototype.getChildContext = function getChildContext() { + var _props = this.props, + prefix = _props.prefix, + locale = _props.locale, + pure = _props.pure, + warning = _props.warning, + rtl = _props.rtl, + errorBoundary = _props.errorBoundary; + + return { + nextPrefix: prefix, + nextLocale: locale, + nextPure: pure, + nextRtl: rtl, + nextWarning: warning, + nextErrorBoundary: errorBoundary + }; + }; + + ConfigProvider.prototype.componentWillMount = function componentWillMount() { + this.setMomentLocale(this.props.locale); + }; + + ConfigProvider.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) { + if (this.props.locale !== nextProps.locale) { + this.setMomentLocale(nextProps.locale); + } + }; + + ConfigProvider.prototype.componentDidUpdate = function componentDidUpdate() { + childContextCache.add(this, (0, _extends3.default)({}, childContextCache.get(this, {}), this.getChildContext())); + }; + + ConfigProvider.prototype.componentWillUnmount = function componentWillUnmount() { + childContextCache.remove(this); + }; + + ConfigProvider.prototype.setMomentLocale = function setMomentLocale(locale) { + var moment = void 0; + try { + moment = __webpack_require__(17); + } catch (e) { + // ignore + } + + if (moment && locale) { + moment.locale(locale.momentLocale); + } + }; + + ConfigProvider.prototype.render = function render() { + return _react.Children.only(this.props.children); + }; + + return ConfigProvider; +}(_react.Component), _class.propTypes = { + /** + * 样式类名的品牌前缀 + */ + prefix: _propTypes2.default.string, + /** + * 国际化文案对象，属性为组件的 displayName + */ + locale: _propTypes2.default.object, + /** + * 是否开启错误捕捉 errorBoundary + * 如需自定义参数，请传入对象 对象接受参数列表如下： + * + * fallbackUI `Function(error?: {}, errorInfo?: {}) => Element` 捕获错误后的展示 + * afterCatch `Function(error?: {}, errorInfo?: {})` 捕获错误后的行为, 比如埋点上传 + */ + errorBoundary: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.object]), + /** + * 是否开启 Pure Render 模式，会提高性能，但是也会带来副作用 + */ + pure: _propTypes2.default.bool, + /** + * 是否在开发模式下显示组件属性被废弃的 warning 提示 + */ + warning: _propTypes2.default.bool, + /** + * 是否开启 rtl 模式 + */ + rtl: _propTypes2.default.bool, + /** + * 组件树 + */ + children: _propTypes2.default.element +}, _class.defaultProps = { + warning: true, + errorBoundary: false +}, _class.childContextTypes = { + nextPrefix: _propTypes2.default.string, + nextLocale: _propTypes2.default.object, + nextPure: _propTypes2.default.bool, + nextRtl: _propTypes2.default.bool, + nextWarning: _propTypes2.default.bool, + nextErrorBoundary: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.object]) +}, _class.config = function (Component, options) { + return (0, _config.config)(Component, options); +}, _class.getContextProps = function (props, displayName) { + return (0, _getContextProps2.default)(props, childContextCache.root() || {}, displayName); +}, _class.initLocales = _config.initLocales, _class.setLanguage = _config.setLanguage, _class.setLocale = _config.setLocale, _class.setDirection = _config.setDirection, _class.getLanguage = _config.getLanguage, _class.getLocale = _config.getLocale, _class.getDirection = _config.getDirection, _class.Consumer = _consumer2.default, _class.ErrorBoundary = _errorBoundary2.default, _class.getContext = function () { + var _ref = childContextCache.root() || {}, + nextPrefix = _ref.nextPrefix, + nextLocale = _ref.nextLocale, + nextPure = _ref.nextPure, + nextRtl = _ref.nextRtl, + nextWarning = _ref.nextWarning, + nextErrorBoundary = _ref.nextErrorBoundary; + + return { + prefix: nextPrefix, + locale: nextLocale, + pure: nextPure, + rtl: nextRtl, + warning: nextWarning, + errorBoundary: nextErrorBoundary + }; +}, _temp); +ConfigProvider.displayName = 'ConfigProvider'; +exports.default = ConfigProvider; +module.exports = exports['default']; + +/***/ }), +/* 10 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +exports.__esModule = true; + +var _extends2 = __webpack_require__(4); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = __webpack_require__(8); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _classCallCheck2 = __webpack_require__(1); + +var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); + +var _possibleConstructorReturn2 = __webpack_require__(2); + +var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); + +var _inherits2 = __webpack_require__(3); + +var _inherits3 = _interopRequireDefault(_inherits2); + +var _class, _temp; + +var _react = __webpack_require__(0); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = __webpack_require__(5); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _classnames = __webpack_require__(6); + +var _classnames2 = _interopRequireDefault(_classnames); + +var _configProvider = __webpack_require__(9); + +var _configProvider2 = _interopRequireDefault(_configProvider); + +function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { default: obj }; +} + +/** + * Icon + */ +var Icon = (_temp = _class = function (_Component) { + (0, _inherits3.default)(Icon, _Component); + + function Icon() { + (0, _classCallCheck3.default)(this, Icon); + return (0, _possibleConstructorReturn3.default)(this, _Component.apply(this, arguments)); + } + + Icon.prototype.render = function render() { + var _cx; + + /* eslint-disable no-unused-vars*/ + var _props = this.props, + prefix = _props.prefix, + type = _props.type, + size = _props.size, + className = _props.className, + rtl = _props.rtl, + other = (0, _objectWithoutProperties3.default)(_props, ['prefix', 'type', 'size', 'className', 'rtl']); + + var classes = (0, _classnames2.default)((_cx = {}, _cx[prefix + 'icon'] = true, _cx[prefix + 'icon-' + type] = !!type, _cx['' + prefix + size] = !!size, _cx[className] = !!className, _cx)); + + if (rtl && ['arrow-left', 'arrow-right', 'arrow-double-left', 'arrow-double-right', 'switch', 'sorting', 'descending', 'ascending'].indexOf(type) !== -1) { + other.dir = 'rtl'; + } + + return _react2.default.createElement('i', (0, _extends3.default)({}, other, { className: classes })); + }; + + return Icon; +}(_react.Component), _class.propTypes = { + prefix: _propTypes2.default.string, + rtl: _propTypes2.default.bool, + /** + * 指定显示哪种图标 + */ + type: _propTypes2.default.string, + /** + * 指定图标大小 + */ + size: _propTypes2.default.oneOf(['xxs', 'xs', 'small', 'medium', 'large', 'xl', 'xxl', 'xxxl', 'inherit']), + className: _propTypes2.default.string +}, _class.defaultProps = { + prefix: 'next-', + size: 'medium' +}, _class._typeMark = 'icon', _temp); +Icon.displayName = 'Icon'; +exports.default = _configProvider2.default.config(Icon); +module.exports = exports['default']; + +/***/ }), +/* 11 */ +/***/ (function(module, exports) { + +module.exports = __WEBPACK_EXTERNAL_MODULE_11__; + +/***/ }), +/* 12 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +exports.__esModule = true; +exports.default = { + momentLocale: 'zh-cn', + Timeline: { + expand: '展开', + fold: '收起' + }, + Balloon: { + close: '关闭' + }, + Card: { + expand: '展开', + fold: '收起' + }, + Calendar: { + today: '今天', + now: '此刻', + ok: '确定', + clear: '清除', + month: '月', + year: '年', + prevYear: '上一年', + nextYear: '下一年', + prevMonth: '上个月', + nextMonth: '下个月', + prevDecade: '上十年', + nextDecade: '后十年', + yearSelectAriaLabel: '选择年份', + monthSelectAriaLabel: '选择月份' + }, + DatePicker: { + placeholder: '请选择日期', + datetimePlaceholder: '请选择日期和时间', + monthPlaceholder: '请选择月', + yearPlaceholder: '请选择年', + now: '此刻', + selectTime: '选择时间', + selectDate: '选择日期', + ok: '确定', + clear: '清除', + startPlaceholder: '起始日期', + endPlaceholder: '结束日期', + hour: '时', + minute: '分', + second: '秒' + }, + Dialog: { + close: '关闭', + ok: '确认', + cancel: '取消' + }, + Message: { + closeAriaLabel: '关闭' + }, + Pagination: { + prev: '上一页', + next: '下一页', + goTo: '到第', + page: '页', + go: '确定', + total: '第{current}页，共{total}页', + labelPrev: '上一页，当前第{current}页', + labelNext: '下一页，当前第{current}页', + inputAriaLabel: '请输入跳转到第几页', + selectAriaLabel: '请选择每页显示几条', + pageSize: '每页显示：' + }, + Input: { + clear: '清除' + }, + Select: { + selectPlaceholder: '请选择', + autoCompletePlaceholder: '请输入', + notFoundContent: '无选项' + }, + Table: { + empty: '没有数据', + ok: '确认', + reset: '重置', + asc: '升序', + desc: '降序', + expanded: '已展开', + folded: '已折叠', + filter: '筛选', + selectAll: '全选' + }, + TimePicker: { + placeholder: '请选择时间', + clear: '清除', + hour: '时', + minute: '分', + second: '秒' + }, + Transfer: { + items: '项', + item: '项', + moveAll: '移动全部', + searchPlaceholder: '请输入', + moveToLeft: '撤销选中元素', + moveToRight: '提交选中元素' + }, + Upload: { + card: { + cancel: '取消', + addPhoto: '上传图片', + download: '下载', + delete: '删除' + }, + drag: { + text: '点击或者拖动文件到虚线框内上传', + hint: '支持 docx, xls, PDF, rar, zip, PNG, JPG 等类型的文件' + }, + upload: { + delete: '删除' + } + }, + Search: { + buttonText: '搜索' + }, + Tag: { + delete: '删除' + }, + Rating: { + description: '评分选项' + } +}; +module.exports = exports['default']; + +/***/ }), +/* 13 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +exports.__esModule = true; + +var _configProvider = __webpack_require__(9); + +var _configProvider2 = _interopRequireDefault(_configProvider); + +var _overlay = __webpack_require__(104); + +var _overlay2 = _interopRequireDefault(_overlay); + +var _gateway = __webpack_require__(105); + +var _gateway2 = _interopRequireDefault(_gateway); + +var _position = __webpack_require__(106); + +var _position2 = _interopRequireDefault(_position); + +var _popup = __webpack_require__(223); + +var _popup2 = _interopRequireDefault(_popup); + +function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { default: obj }; +} + +_overlay2.default.Gateway = _gateway2.default; +_overlay2.default.Position = _position2.default; +_overlay2.default.Popup = _configProvider2.default.config(_popup2.default, { + exportNames: ['overlay'] +}); + +exports.default = _configProvider2.default.config(_overlay2.default, { + exportNames: ['getContent', 'getContentNode'] +}); +module.exports = exports['default']; + +/***/ }), +/* 14 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +exports.__esModule = true; + +var _extends2 = __webpack_require__(4); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = __webpack_require__(8); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _configProvider = __webpack_require__(9); + +var _configProvider2 = _interopRequireDefault(_configProvider); + +var _menu = __webpack_require__(112); + +var _menu2 = _interopRequireDefault(_menu); + +var _subMenu = __webpack_require__(237); + +var _subMenu2 = _interopRequireDefault(_subMenu); + +var _selectableItem = __webpack_require__(71); + +var _selectableItem2 = _interopRequireDefault(_selectableItem); + +var _checkboxItem = __webpack_require__(238); + +var _checkboxItem2 = _interopRequireDefault(_checkboxItem); + +var _radioItem = __webpack_require__(241); + +var _radioItem2 = _interopRequireDefault(_radioItem); + +var _popupItem = __webpack_require__(113); + +var _popupItem2 = _interopRequireDefault(_popupItem); + +var _group = __webpack_require__(242); + +var _group2 = _interopRequireDefault(_group); + +var _divider = __webpack_require__(243); + +var _divider2 = _interopRequireDefault(_divider); + +var _create = __webpack_require__(244); + +var _create2 = _interopRequireDefault(_create); + +function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { default: obj }; +} + +_menu2.default.SubMenu = _subMenu2.default; +_menu2.default.Item = _selectableItem2.default; +_menu2.default.CheckboxItem = _checkboxItem2.default; +_menu2.default.RadioItem = _radioItem2.default; +_menu2.default.PopupItem = _popupItem2.default; +_menu2.default.Group = _group2.default; +_menu2.default.Divider = _divider2.default; +_menu2.default.create = _create2.default; + +/* istanbul ignore next */ +var transform = function transform(props, deprecated) { + if ('indentSize' in props) { + deprecated('indentSize', 'inlineIndent', 'Menu'); + + var _props = props, + indentSize = _props.indentSize, + others = (0, _objectWithoutProperties3.default)(_props, ['indentSize']); + + props = (0, _extends3.default)({ inlineIndent: indentSize }, others); + } + + if ('onDeselect' in props) { + deprecated('onDeselect', 'onSelect', 'Menu'); + if (props.onDeselect) { + var _props2 = props, + onDeselect = _props2.onDeselect, + onSelect = _props2.onSelect, + _others = (0, _objectWithoutProperties3.default)(_props2, ['onDeselect', 'onSelect']); + + var newOnSelect = function newOnSelect(selectedKeys, item, extra) { + if (!extra.select) { + onDeselect(extra.key); + } + if (onSelect) { + onSelect(selectedKeys, item, extra); + } + }; + + props = (0, _extends3.default)({ onSelect: newOnSelect }, _others); + } + } + + return props; +}; + +exports.default = _configProvider2.default.config(_menu2.default, { + transform: transform +}); +module.exports = exports['default']; + +/***/ }), +/* 15 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +exports.__esModule = true; + +var _iterator = __webpack_require__(167); + +var _iterator2 = _interopRequireDefault(_iterator); + +var _symbol = __webpack_require__(179); + +var _symbol2 = _interopRequireDefault(_symbol); + +var _typeof = typeof _symbol2.default === "function" && typeof _iterator2.default === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof _symbol2.default === "function" && obj.constructor === _symbol2.default && obj !== _symbol2.default.prototype ? "symbol" : typeof obj; }; + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = typeof _symbol2.default === "function" && _typeof(_iterator2.default) === "symbol" ? function (obj) { + return typeof obj === "undefined" ? "undefined" : _typeof(obj); +} : function (obj) { + return obj && typeof _symbol2.default === "function" && obj.constructor === _symbol2.default && obj !== _symbol2.default.prototype ? "symbol" : typeof obj === "undefined" ? "undefined" : _typeof(obj); +}; + +/***/ }), +/* 16 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +exports.__esModule = true; + +var _extends2 = __webpack_require__(4); + +var _extends3 = _interopRequireDefault(_extends2); + +var _objectWithoutProperties2 = __webpack_require__(8); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _configProvider = __webpack_require__(9); + +var _configProvider2 = _interopRequireDefault(_configProvider); + +var _button = __webpack_require__(227); + +var _button2 = _interopRequireDefault(_button); + +var _group = __webpack_require__(228); + +var _group2 = _interopRequireDefault(_group); + +function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { default: obj }; +} + +_button2.default.Group = _group2.default; + +exports.default = _configProvider2.default.config(_button2.default, { + transform: /* istanbul ignore next */function transform(props, deprecated) { + if ('shape' in props) { + deprecated('shape', 'text | warning | ghost', 'Button'); + + var _props = props, + shape = _props.shape, + type = _props.type, + others = (0, _objectWithoutProperties3.default)(_props, ['shape', 'type']); + + var newType = type; + if (type === 'light' || type === 'dark' || type === 'secondary' && shape === 'warning') { + newType = 'normal'; + } + + var ghost = void 0; + if (shape === 'ghost') { + ghost = { + primary: 'dark', + secondary: 'dark', + normal: 'light', + dark: 'dark', + light: 'light' + }[type || _button2.default.defaultProps.type]; + } + + var text = shape === 'text'; + var warning = shape === 'warning'; + + props = (0, _extends3.default)({ type: newType, ghost: ghost, text: text, warning: warning }, others); + } + + return props; + } +}); +module.exports = exports['default']; + +/***/ }), +/* 17 */ +/***/ (function(module, exports) { + +module.exports = __WEBPACK_EXTERNAL_MODULE_17__; + +/***/ }), +/* 18 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +exports.__esModule = true; + +var _configProvider = __webpack_require__(9); + +var _configProvider2 = _interopRequireDefault(_configProvider); + +var _input = __webpack_require__(235); + +var _input2 = _interopRequireDefault(_input); + +var _textarea = __webpack_require__(236); + +var _textarea2 = _interopRequireDefault(_textarea); + +var _group = __webpack_require__(110); + +var _group2 = _interopRequireDefault(_group); + +function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { default: obj }; +} + +_input2.default.TextArea = _configProvider2.default.config(_textarea2.default, { + exportNames: ['getInputNode', 'focus'] +}); +_input2.default.Group = _group2.default; + +// 用来自动生成文档的工具底层依赖的 react-docgen，无法解析生成 HOC 的方法中存在第二个参数的情况 +// 所以不能在 input.jsx／textarea.jsx 中生成 HOC +exports.default = _configProvider2.default.config(_input2.default, { + exportNames: ['getInputNode', 'focus'] +}); +module.exports = exports['default']; + +/***/ }), +/* 19 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +exports.__esModule = true; +var blackList = ['defaultProps', 'propTypes', 'contextTypes', 'childContextTypes', 'displayName']; + +var statics = exports.statics = function statics(Target, Component) { + Object.keys(Component).forEach(function (property) { + if (blackList.indexOf(property) === -1) { + Target[property] = Component[property]; + } + }); +}; + +var fetchDataByPath = exports.fetchDataByPath = function fetchDataByPath(object, path) { + if (!object || !path) { + return false; + } + path = path.toString(); + var field = path.split('.'); + var val = void 0, + key = void 0; + if (field.length) { + key = field[0]; + // lists[1].name + if (key.indexOf('[') >= 0) { + key = key.match(/(.*)\[(.*)\]/); + if (key) { + val = object[key[1]][key[2]]; + } + } else { + val = object[field[0]]; + } + if (val) { + for (var colIndex = 1; colIndex < field.length; colIndex++) { + val = val[field[colIndex]]; + if (typeof val === 'undefined') { + break; + } + } + } + } + return val; +}; + +/***/ }), +/* 20 */ +/***/ (function(module, exports) { + +// https://github.com/zloirock/core-js/issues/86#issuecomment-115759028 +var global = module.exports = typeof window != 'undefined' && window.Math == Math + ? window : typeof self != 'undefined' && self.Math == Math ? self + // eslint-disable-next-line no-new-func + : Function('return this')(); +if (typeof __g == 'number') __g = global; // eslint-disable-line no-undef + + +/***/ }), +/* 21 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +exports.__esModule = true; + +var _animate = __webpack_require__(99); + +var _animate2 = _interopRequireDefault(_animate); + +var _expand = __webpack_require__(217); + +var _expand2 = _interopRequireDefault(_expand); + +function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { default: obj }; +} + +_animate2.default.Expand = _expand2.default; + +exports.default = _animate2.default; +module.exports = exports['default']; + +/***/ }), +/* 22 */ +/***/ (function(module, exports) { + +var core = module.exports = { version: '2.6.5' }; +if (typeof __e == 'number') __e = core; // eslint-disable-line no-undef + + +/***/ }), +/* 23 */ +/***/ (function(module, exports) { + +var hasOwnProperty = {}.hasOwnProperty; +module.exports = function (it, key) { + return hasOwnProperty.call(it, key); +}; + + +/***/ }), +/* 24 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +exports.__esModule = true; +exports.CALENDAR_MODES = exports.CALENDAR_MODE_DATE = exports.CALENDAR_MODE_MONTH = exports.CALENDAR_MODE_YEAR = exports.YEAR_TABLE_COL_COUNT = exports.YEAR_TABLE_ROW_COUNT = exports.MONTH_TABLE_COL_COUNT = exports.MONTH_TABLE_ROW_COUNT = exports.CALENDAR_TABLE_ROW_COUNT = exports.CALENDAR_TABLE_COL_COUNT = exports.DAYS_OF_WEEK = undefined; +exports.isDisabledDate = isDisabledDate; +exports.checkMomentObj = checkMomentObj; +exports.formatDateValue = formatDateValue; +exports.getVisibleMonth = getVisibleMonth; +exports.isSameYearMonth = isSameYearMonth; +exports.preFormatDateValue = preFormatDateValue; + +var _moment = __webpack_require__(17); + +var _moment2 = _interopRequireDefault(_moment); + +function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { default: obj }; +} + +var DAYS_OF_WEEK = exports.DAYS_OF_WEEK = 7; + +var CALENDAR_TABLE_COL_COUNT = exports.CALENDAR_TABLE_COL_COUNT = 7; + +var CALENDAR_TABLE_ROW_COUNT = exports.CALENDAR_TABLE_ROW_COUNT = 6; + +var MONTH_TABLE_ROW_COUNT = exports.MONTH_TABLE_ROW_COUNT = 4; + +var MONTH_TABLE_COL_COUNT = exports.MONTH_TABLE_COL_COUNT = 3; + +var YEAR_TABLE_ROW_COUNT = exports.YEAR_TABLE_ROW_COUNT = 4; + +var YEAR_TABLE_COL_COUNT = exports.YEAR_TABLE_COL_COUNT = 3; + +var CALENDAR_MODE_YEAR = exports.CALENDAR_MODE_YEAR = 'year'; + +var CALENDAR_MODE_MONTH = exports.CALENDAR_MODE_MONTH = 'month'; + +var CALENDAR_MODE_DATE = exports.CALENDAR_MODE_DATE = 'date'; + +var CALENDAR_MODES = exports.CALENDAR_MODES = [CALENDAR_MODE_DATE, CALENDAR_MODE_MONTH, CALENDAR_MODE_YEAR]; + +function isDisabledDate(date, fn, view) { + if (typeof fn === 'function' && fn(date, view)) { + return true; + } + return false; +} + +function checkMomentObj(props, propName, componentName) { + if (props[propName] && !_moment2.default.isMoment(props[propName])) { + return new Error('Invalid prop ' + propName + ' supplied to ' + componentName + '. Required a moment object'); + } +} + +function formatDateValue(value) { + var reservedValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null; + + if (value && _moment2.default.isMoment(value)) { + return value; + } + return reservedValue; +} + +function getVisibleMonth(defaultVisibleMonth, value) { + var getVM = defaultVisibleMonth; + if (typeof getVM !== 'function' || !_moment2.default.isMoment(getVM())) { + getVM = function getVM() { + if (value) { + return value; + } + return (0, _moment2.default)(); + }; + } + return getVM(); +} + +function isSameYearMonth(dateA, dateB) { + return dateA.month() === dateB.month() && dateA.year() === dateB.year(); +} + +function preFormatDateValue(value, format) { + var val = typeof value === 'string' ? (0, _moment2.default)(value, format, false) : value; + if (val && _moment2.default.isMoment(val) && val.isValid()) { + return val; + } + + return null; +} + +/***/ }), +/* 25 */ +/***/ (function(module, exports, __webpack_require__) { + +var dP = __webpack_require__(26); +var createDesc = __webpack_require__(42); +module.exports = __webpack_require__(28) ? function (object, key, value) { + return dP.f(object, key, createDesc(1, value)); +} : function (object, key, value) { + object[key] = value; + return object; +}; + + +/***/ }), +/* 26 */ +/***/ (function(module, exports, __webpack_require__) { + +var anObject = __webpack_require__(38); +var IE8_DOM_DEFINE = __webpack_require__(82); +var toPrimitive = __webpack_require__(54); +var dP = Object.defineProperty; + +exports.f = __webpack_require__(28) ? Object.defineProperty : function defineProperty(O, P, Attributes) { + anObject(O); + P = toPrimitive(P, true); + anObject(Attributes); + if (IE8_DOM_DEFINE) try { + return dP(O, P, Attributes); + } catch (e) { /* empty */ } + if ('get' in Attributes || 'set' in Attributes) throw TypeError('Accessors not supported!'); + if ('value' in Attributes) O[P] = Attributes.value; + return O; +}; + + +/***/ }), +/* 27 */ +/***/ (function(module, exports) { + +module.exports = function (it) { + return typeof it === 'object' ? it !== null : typeof it === 'function'; +}; + + +/***/ }), +/* 28 */ +/***/ (function(module, exports, __webpack_require__) { + +// Thank's IE8 for his funny defineProperty +module.exports = !__webpack_require__(39)(function () { + return Object.defineProperty({}, 'a', { get: function () { return 7; } }).a != 7; +}); + + +/***/ }), +/* 29 */ +/***/ (function(module, exports, __webpack_require__) { + +// to indexed object, toObject with fallback for non-array-like ES3 strings +var IObject = __webpack_require__(85); +var defined = __webpack_require__(55); +module.exports = function (it) { + return IObject(defined(it)); +}; + + +/***/ }), +/* 30 */ +/***/ (function(module, exports, __webpack_require__) { + +var store = __webpack_require__(58)('wks'); +var uid = __webpack_require__(45); +var Symbol = __webpack_require__(20).Symbol; +var USE_SYMBOL = typeof Symbol == 'function'; + +var $exports = module.exports = function (name) { + return store[name] || (store[name] = + USE_SYMBOL && Symbol[name] || (USE_SYMBOL ? Symbol : uid)('Symbol.' + name)); +}; + +$exports.store = store; + + +/***/ }), +/* 31 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +exports.__esModule = true; + +var _typeof2 = __webpack_require__(15); + +var _typeof3 = _interopRequireDefault(_typeof2); + +exports.typeOf = typeOf; +exports.isArrayLike = isArrayLike; +exports.isPromise = isPromise; +exports.isPlainObject = isPlainObject; +exports.shallowEqual = shallowEqual; +exports.each = each; +exports.pickOthers = pickOthers; +exports.pickAttrsWith = pickAttrsWith; +exports.isNil = isNil; + +function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { default: obj }; +} + +/** + * 获取对象的类型 + * @param {*} obj + * @return {String} + * + * @example + * typeOf([]) === 'Array' + * typeOf() === 'Undefined' + * typeOf(1) === 'Number' + */ +function typeOf(obj) { + return Object.prototype.toString.call(obj).replace(/\[object\s|]/g, ''); +} + +/** + * 判断是否是数组或类数组对象 + * @param {*} obj + * @return {Boolean} + * + * @example + * isArrayLike([]) === true + * isArrayLike(arguments) === true + * isArrayLike(this.props.children) === true + */ +function isArrayLike(obj) { + var length = !!obj && 'length' in obj && obj.length; + var type = typeOf(obj); + + return type === 'Array' || length === 0 || typeof length === 'number' && length > 0 && length - 1 in obj; +} + +/** + * 判断对象是否是一个promise，即是否可以用.then + * @param {*} obj + * @return {Boolean} + */ +function isPromise(obj) { + return !!obj && ((typeof obj === 'undefined' ? 'undefined' : (0, _typeof3.default)(obj)) === 'object' || typeof obj === 'function') && typeof obj.then === 'function'; +} + +/** + * 是否是一个纯净的对象 + * @param {*} obj + * @return {Boolean} + * @reference https://github.com/jonschlinkert/is-plain-object + */ +function isPlainObject(obj) { + if (typeOf(obj) !== 'Object') { + return false; + } + + var ctor = obj.constructor; + + if (typeof ctor !== 'function') { + return false; + } + + var prot = ctor.prototype; + + if (typeOf(prot) !== 'Object') { + return false; + } + + if (!prot.hasOwnProperty('isPrototypeOf')) { + return false; + } + + return true; +} + +/** + * 对象浅比较 + * @param {Object} objA + * @param {Object} objB + * @param {Function} [compare] 手动调用方法比较 + * @return {Boolean} 对象浅比较是否相等 + * + * @example + * object.shallowEqual({a: 100}, {a: 100}); // true + */ +function shallowEqual(objA, objB, compare) { + if (objA === objB) { + return true; + } + + // 其中一个不是object，则不相等 + if (!objA || !objB || (typeof objA === 'undefined' ? 'undefined' : (0, _typeof3.default)(objA)) + (typeof objB === 'undefined' ? 'undefined' : (0, _typeof3.default)(objB)) !== 'objectobject') { + return false; + } + + var keyA = Object.keys(objA); + var keyB = Object.keys(objB); + var len = keyA.length; + + // key 数量不一致则不相等 + if (len !== keyB.length) { + return false; + } + + var hasCallback = typeof compare === 'function'; + + for (var i = 0; i < len; i++) { + var key = keyA[i]; + + if (!Object.prototype.hasOwnProperty.call(objB, key)) { + return false; + } + + var valA = objA[key]; + var valB = objB[key]; + + var ret = hasCallback ? compare(valA, valB, key) : void 0; + + if (ret === false || ret === void 0 && valA !== valB) { + return false; + } + } + + return true; +} + +/** + * 遍历对象或数组，或者类数组，例如React中的children对象、arguments等 + * @param {Object|Array} obj + * @param {Function} callback fn(n, i) or fn(val, key) + * @param {Number} [direction = 1] 是否倒序遍历，只对数组有效 + * @return {Object|Array} + * + * @example + * // 遍历数组 + * object.each([100, 200, 300], (n, i) => console.log(n, i)); + * // 遍历json对象 + * object.each({a: 100, b: 200}, (value, key) => console.log(key, value)); + * // 遍历React子节点 + * object.each(this.props.children, (child, index) => console.log(child)); + * // 遍历arguments + * object.each(arguments, (arg, i) => console.log(arg)); + */ +function each(obj, callback, direction) { + var reversed = direction === -1; + var length = obj.length; + var value = void 0, + i = reversed ? length - 1 : 0; + + if (isArrayLike(obj)) { + for (; i < length && i >= 0; reversed ? i-- : i++) { + value = callback.call(obj[i], obj[i], i); + + if (value === false) { + break; + } + } + } else { + for (i in obj) { + /* istanbul ignore else */ + if (obj.hasOwnProperty(i)) { + value = callback.call(obj[i], obj[i], i); + + if (value === false) { + break; + } + } + } + } + + return obj; +} + +// @private 判断key是否在数组或对象中 +var _isInObj = function _isInObj(key, obj, isArray) { + return isArray ? obj.indexOf(key) > -1 : key in obj; +}; + +/** + * 过滤出其它属性 + * @param {Object|Array} holdProps 过滤的参照对象，最终的结果只保留不在参照对象中的key + * @param {Object} props 被过滤的对象 + * @return {Object} others + * + * @example + * object.pickOthers(FooComponent.propTypes, this.props); + * object.pickOthers(['className', 'onChange'], this.props); + */ +function pickOthers(holdProps, props) { + var others = {}; + var isArray = typeOf(holdProps) === 'Array'; + + for (var key in props) { + if (!_isInObj(key, holdProps, isArray)) { + others[key] = props[key]; + } + } + + return others; +} + +/** + * 过滤出带prefix的属性 + * @param {Object} holdProps 过滤的参照对象，最终的结果只保留不在参照对象中的key + * @param {string} prefix 包含的字符串 + * @return {Object} others + * + * @example + * object.pickAttrsWith(FooComponent.propTypes, 'data-'); + */ +function pickAttrsWith(holdProps, prefix) { + var others = {}; + + for (var key in holdProps) { + if (key.match(prefix)) { + others[key] = holdProps[key]; + } + } + + return others; +} + +/** + * Checks if value is `null` or `undefined`. + * @param {*} value + * @return {Boolean} + */ +function isNil(value) { + // It will returns `true` only if `null` or `undefined` compare with `null` + // with loose equaliy + return value == null; // eslint-disable-line eqeqeq +} + +/***/ }), +/* 32 */ +/***/ (function(module, exports, __webpack_require__) { + +"use strict"; + + +exports.__esModule = true; + +var _objectWithoutProperties2 = __webpack_require__(8); + +var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2); + +var _configProvider = __webpack_require__(9); + +var _configProvider2 = _interopRequireDefault(_configProvider); + +var _select = __webpack_require__(231); + +var _select2 = _interopRequireDefault(_select); + +var _autoComplete = __webpack_require__(247); + +var _autoComplete2 = _interopRequireDefault(_autoComplete); + +var _option = __webpack_require__(248); + +var _option2 = _interopRequireDefault(_option); + +var _optionGroup = __webpack_require__(249); + +var _optionGroup2 = _interopRequireDefault(_optionGroup); + +function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { default: obj }; +} + +_select2.default.AutoComplete = _configProvider2.default.config(_autoComplete2.default, { + componentName: 'Select' +}); + +_select2.default.Option = _option2.default; +_select2.default.OptionGroup = _optionGroup2.default; + +// compatible with 0.x version +/* istanbul ignore next */ +function _transform(props, deprecated) { + var shape = props.shape, + container = props.container, + multiple = props.multiple, + filterBy = props.filterBy, + overlay = props.overlay, + safeNode = props.safeNode, + noFoundContent = props.noFoundContent, + others = (0, _objectWithoutProperties3.default)(props, ['shape', 'container', 'multiple', 'filterBy', 'overlay', 'safeNode', 'noFoundContent']); + + var newprops = others; + if (shape === 'arrow-only') { + deprecated('shape=arrow-only', 'hasBorder=false', 'Select'); + newprops.hasBorder = false; + } + if (container) { + deprecated('container', 'popupContainer', 'Select'); + newprops.popupContainer = container; + } + if (multiple) { + deprecated('multiple', 'mode=multiple', 'Select'); + newprops.mode = 'multiple'; + } + if (filterBy) { + deprecated('filterBy', 'filter', 'Select'); + newprops.filter = filterBy; + } + if (overlay) { + deprecated('overlay', 'popupContent', 'Select'); + newprops.popupContent = overlay; + newprops.autoWidth = false; + } + + if (noFoundContent) { + deprecated('noFoundContent', 'notFoundContent', 'Select'); + newprops.notFoundContent = noFoundContent; + } + + if (safeNode) { + deprecated('safeNode', 'popupProps={safeNode}', 'Select'); + newprops.popupProps = { + safeNode: safeNode + }; + } + + return newprops; +} + +// compatible with 0.x version: Select.Combobox +_select2.default.Combobox = _configProvider2.default.config(_select2.default, { + transform: /* istanbul ignore next */function transform(props, deprecated) { + deprecated('Select.Combobox', '","Select");var a=o(e,t);return e.onInputUpdate&&(a.onSearch=e.onInputUpdate,a.showSearch=!0),a}}),t.default=s.default.config(d.default,{transform:o,exportNames:["focusInput"]}),e.exports=t.default},function(e,t,a){"use strict";function n(e){return!!(e&&e.constructor&&e.call&&e.apply)}function o(e,t){return p.default.isMoment(e)&&p.default.isMoment(t)?e.clone().hour(t.hour()).minute(t.minute()).second(t.second()):e}function r(e,t){var a="string"==typeof e?(0,p.default)(e,t,!1):e;return a&&p.default.isMoment(a)&&a.isValid()?a:null}function l(e,t,a){if(e[t]&&!p.default.isMoment(e[t])&&"string"!=typeof e[t])return new Error("Invalid prop "+t+" supplied to "+a+". Required a moment object or format date string!")}function i(e,t){var a=t?t.format||h:"";return{format:e,timeFormat:a,dateTimeFormat:a?e+" "+a:e}}function s(e,t){for(var a in e)e.hasOwnProperty(a)&&(t[a]=e[a]);return t}function u(e,t,a){var n=t.format,o=t.dateInputStr,r=t.value;if(-1!==[c.KEYCODE.UP,c.KEYCODE.DOWN,c.KEYCODE.PAGE_UP,c.KEYCODE.PAGE_DOWN].indexOf(e.keyCode)&&!(e.altKey&&-1===[c.KEYCODE.PAGE_UP,c.KEYCODE.PAGE_DOWN].indexOf(e.keyCode)||e.controlKey||e.shiftKey)){var l=(0,p.default)(o,n,!0);if(l.isValid()){var i=e.altKey?"year":"month";switch(e.keyCode){case c.KEYCODE.UP:l.subtract(1,a);break;case c.KEYCODE.DOWN:l.add(1,a);break;case c.KEYCODE.PAGE_UP:l.subtract(1,i);break;case c.KEYCODE.PAGE_DOWN:l.add(1,i)}}else l=r?r.clone():(0,p.default)();return e.preventDefault(),l.format(n)}}function d(e,t,a){var n=t.format,o=t.timeInputStr,r=t.steps,l=t.value;if(-1!==[c.KEYCODE.UP,c.KEYCODE.DOWN,c.KEYCODE.PAGE_UP,c.KEYCODE.PAGE_DOWN].indexOf(e.keyCode)&&!(e.altKey&&-1===[c.KEYCODE.PAGE_UP,c.KEYCODE.PAGE_DOWN].indexOf(e.keyCode)||e.controlKey||e.shiftKey)){var i=(0,p.default)(o,n,!0);if(i.isValid()){var s=e.altKey?"hour":"minute";switch(e.keyCode){case c.KEYCODE.UP:i.subtract(r[a],a);break;case c.KEYCODE.DOWN:i.add(r[a],a);break;case c.KEYCODE.PAGE_UP:i.subtract(r[s],s);break;case c.KEYCODE.PAGE_DOWN:i.add(r[s],s)}}else i=l?l.clone():(0,p.default)().hours(0).minutes(0).seconds(0);return e.preventDefault(),i.format(n)}}t.__esModule=!0,t.DEFAULT_TIME_FORMAT=t.PANEL=void 0,t.isFunction=n,t.resetValueTime=o,t.formatDateValue=r,t.checkDateValue=l,t.getDateTimeFormat=i,t.extend=s,t.onDateKeydown=u,t.onTimeKeydown=d;var f=a(17),p=function(e){return e&&e.__esModule?e:{default:e}}(f),c=a(7),h=(t.PANEL={TIME:"time-panel",DATE:"date-panel"},t.DEFAULT_TIME_FORMAT="HH:mm:ss")},function(e,t,a){"use strict";function n(){for(var e=arguments.length,t=Array(e),a=0;a=r)return e;switch(e){case"%s":return String(t[n++]);case"%d":return Number(t[n++]);case"%j":try{return JSON.stringify(t[n++])}catch(e){return"[Circular]"}default:return e}})}return o}function o(e,t,a){function n(l){if(l&&l.length)return void a(l);var i=o;if(o+=1,!(i=t[0]&&e<=t[1]}function o(e,t,a){return 100*(a-e)/(t-e)}function r(e){var t=0,a=e.toString();return-1!==a.indexOf(".")&&(t=a.length-a.indexOf(".")-1),t}function l(e,t){return Array.isArray(e)?e[0]===t[0]&&e[1]===t[1]:e===t}function i(e,t){var a="upper";if(e>t[1])a="upper";else if(ethis.menuNode.clientHeight)){var e=this.menuNode.clientHeight+this.menuNode.scrollTop,t=this.itemNode.offsetTop+this.itemNode.offsetHeight;t>e?this.menuNode.scrollTop=t-this.menuNode.clientHeight:this.itemNode.offsetTop1&&x>0&&p){var T,w=_?"paddingRight":"paddingLeft";g.style=(0,i.default)({},g.style||{},(T={},T[w]=n*x-.4*(l||0)*x+"px",T))}var O=s,M="menuitem";return"selectMode"in o.props&&(M="listitem"),m.default.createElement(O,(0,i.default)({role:M,title:this.getTitle(f)},g,{className:k,onClick:this.handleClick,onKeyDown:this.handleKeyDown}),m.default.createElement("div",{className:y+"menu-item-inner"},f))},t}(h.Component),o.propTypes={_key:y.default.string,level:y.default.number,groupIndent:y.default.number,root:y.default.object,menu:y.default.any,parent:y.default.object,parentMode:y.default.oneOf(["inline","popup"]),type:y.default.oneOf(["submenu","item"]),component:y.default.string,disabled:y.default.bool,className:y.default.string,onClick:y.default.func,onKeyDown:y.default.func,needIndent:y.default.bool,replaceClassName:y.default.bool},o.defaultProps={component:"li",groupIndent:0,replaceClassName:!1,needIndent:!0},r);_.displayName="Item",t.default=_,e.exports=t.default},function(e,t,a){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var o=a(115),r=n(o),l=a(239),i=n(l);r.default.Group=i.default,t.default=r.default,e.exports=t.default},function(e,t){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t,a){var n=a(84),o=a(59);e.exports=Object.keys||function(e){return n(e,o)}},function(e,t){e.exports=!0},function(e,t){var a=0,n=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++a+n).toString(36))}},function(e,t){t.f={}.propertyIsEnumerable},function(e,t,a){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var o=a(4),r=n(o),l=a(8),i=n(l),s=a(9),u=n(s),d=a(220),f=n(d),p=a(224),c=n(p),h=a(68),m=n(h),g=a(7);f.default.Tooltip=u.default.config(c.default,{transform:function(e,t){if("text"in e){t("text","children","Tooltip");var a=e,n=a.text,o=(0,i.default)(a,["text"]);e=(0,r.default)({children:n},o)}return e}}),f.default.Inner=m.default,t.default=u.default.config(f.default,{transform:function(e,t){if(e.alignment){t("alignment","alignEdge","Balloon");var a=e,n=a.alignment,o=(0,i.default)(a,["alignment"]);e=(0,r.default)({alignEdge:"edge"===n},o)}if(e.onCloseClick){t("onCloseClick","onVisibleChange","Balloon");var l=e,s=l.onCloseClick,u=l.onVisibleChange,d=(0,i.default)(l,["onCloseClick","onVisibleChange"]),f=function(e,t){"closeClick"===t&&s(),u&&u(e,t)};e=(0,r.default)({onVisibleChange:f},d)}if("triggerType"in e){(Array.isArray(e.triggerType)?[].concat(e.triggerType):[e.triggerType]).indexOf("focus")>-1&&g.log.warning("triggerType[focus] is deprecated at [Balloon], use triggerType[hover, click] instead of it. If focus is desired maybe you should use [Balloon.Tooltip]")}return e}}),e.exports=t.default},function(e,t,a){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var o=a(8),r=n(o),l=a(9),i=n(l),s=a(24),u=a(229),d=n(u),f=function(e,t){var a=e.type,n=e.onChange,o=e.base,l=e.disabledMonth,i=e.disabledYear,u=(0,r.default)(e,["type","onChange","base","disabledMonth","disabledYear"]),d=u;if("type"in e&&(t("type","shape","Calendar"),d.shape=a,"shape"in e&&(d.shape=e.shape)),"base"in e){t("base","defaultVisibleMonth","Calendar");var f=function(){(0,s.preFormatDateValue)(o,"YYYY-MM-DD")};"defaultVisibleMonth"in e&&(f=e.defaultVisibleMonth),d.defaultVisibleMonth=f}if("onChange"in e&&"function"==typeof n){t("onChange","onSelect","Calendar");var p=function(t){n({mode:u.mode,value:t}),"onSelect"in e&&e.onSelect(t)};d.onSelect=p}return"disabledMonth"in e&&"function"==typeof l&&t("disabledMonth","disabledDate","Calendar"),"disabledYear"in e&&"function"==typeof i&&t("disabledYear","disabledDate","Calendar"),"yearCellRender"in e&&t("yearCellRender","monthCellRender/dateCellRender","Calendar"),"language"in e&&t("language","moment.locale","Calendar"),d};t.default=i.default.config(d.default,{transform:f}),e.exports=t.default},function(e,t,a){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var o=a(117),r=n(o),l=a(240),i=n(l);r.default.Group=i.default,t.default=r.default,e.exports=t.default},function(e,t,a){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.default=void 0;var o,r,l=a(4),i=n(l),s=a(8),u=n(s),d=a(1),f=n(d),p=a(2),c=n(p),h=a(3),m=n(h),g=a(0),v=n(g),y=a(5),b=n(y),C=a(6),x=n(C),E=a(51),S=n(E),_=a(52),N=n(_),k=function(){},T=(r=o=function(e){function t(){var a,n,o;(0,f.default)(this,t);for(var r=arguments.length,l=Array(r),i=0;i-1)return a.context.notRenderCellIndex.splice(T,1),null}(k.colSpan&&k.colSpan>1||k.rowSpan&&k.rowSpan>1)&&a._getNotRenderCellIndex(g,t,k.colSpan||1,k.rowSpan||1);var w=k.className,O=(0,E.default)((y={first:"right"!==m&&0===g,last:"left"!==m&&(g===r.length-1||g+k.colSpan===r.length)},y[n.className]=n.className,y[w]=w,y));return v.default.createElement(o,(0,i.default)({key:g},S,k,{ref:function(e){return s(t,g,e)},prefix:d,pure:p,primaryKey:f,record:e,className:O,value:N,colIndex:g,rowIndex:t,align:C,locale:c,rtl:h,width:x}))})},t.prototype._getNotRenderCellIndex=function(e,t,a,n){for(var o=a,r=n,l=[],i=0;i0?n:a)(e)}},function(e,t,a){var n=a(58)("keys"),o=a(45);e.exports=function(e){return n[e]||(n[e]=o(e))}},function(e,t,a){var n=a(22),o=a(20),r=o["__core-js_shared__"]||(o["__core-js_shared__"]={});(e.exports=function(e,t){return r[e]||(r[e]=void 0!==t?t:{})})("versions",[]).push({version:n.version,mode:a(44)?"pure":"global",copyright:"\xa9 2019 Denis Pushkarev (zloirock.ru)"})},function(e,t){e.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(e,t){t.f=Object.getOwnPropertySymbols},function(e,t){e.exports={}},function(e,t,a){var n=a(38),o=a(172),r=a(59),l=a(57)("IE_PROTO"),i=function(){},s=function(){var e,t=a(83)("iframe"),n=r.length;for(t.style.display="none",a(173).appendChild(t),t.src="javascript:",e=t.contentWindow.document,e.open(),e.write("